/* ============================================================
   NetraClos brand overrides for the Porto chrome. v1.0 2026-07-26

   Owner: no colour outside the brand palette anywhere on the site.

   Porto ships its own primary colour #F15605, which is NOT the brand
   orange (#F4772E) and rendered 86 times on the homepage alone, and a
   body grey #636363 that is not the brand body colour. This file loads
   on EVERY page, including the 89 blog posts still on Porto, so the
   whole site reads as one brand while pages are hand coded one by one.

   Palette is netraclouds.com verbatim, shared by design.
   ============================================================ */

:root {
	--porto-primary-color: #16265C;   /* brand navy, was #F15605 */
	--porto-secondary-color: #0A1A30; /* brand ink */
	--porto-tertiary-color: #16265C;
	--porto-quaternary-color: #0A1A30;
	--porto-dark-color: #111318;      /* brand black */
	--porto-body-color: #3D4C66;      /* brand body, was #636363 */

	--nclos-navy: #16265C;
	--nclos-ink: #0A1A30;
	--nclos-accent: #E11D48;
	--nclos-grad: linear-gradient(135deg, #F4772E 0%, #ED3A5F 45%, #C81E1E 100%);
}

/* body copy and links in brand colours */
body { color: var(--porto-body-color); }
a { color: var(--nclos-navy); }
a:hover { color: var(--nclos-accent); }

/* the primary button is the one place the gradient belongs in the chrome */
.btn-primary,
#header .btn-primary {
	background-image: var(--nclos-grad) !important;
	background-color: transparent !important;
	border-color: transparent !important;
	color: #fff !important;
}
.btn-primary:hover,
#header .btn-primary:hover {
	background-image: none !important;
	background-color: var(--nclos-navy) !important;
	color: #fff !important;
}

/* menu: navy at rest, brand accent on the current or hovered item */
#header .main-menu > li > a { color: var(--nclos-navy); }
#header .main-menu > li.active > a,
#header .main-menu > li:hover > a { color: var(--nclos-accent); }

/* headings site wide sit in brand navy */
h1, h2, h3, h4, h5, h6 { color: var(--nclos-navy); }

/* blog post body: readable measure and brand colours while it waits
   to be hand coded */
.single-post .entry-content,
.single-post article { color: var(--porto-body-color); }
.single-post article a { color: var(--nclos-navy); text-decoration: underline; }
.single-post article a:hover { color: var(--nclos-accent); }

/* our own anchors must not inherit the theme link colour */
.ncx a { color: inherit; }

/* ------------------------------------------------------------
   Porto hardcodes greys in the header and footer chrome that are
   not in the palette:
     #636363  header text      #777777  footer text
     #333333  misc             #082C50  header links
   #082C50 is the navy from inside the logo artwork, close to brand
   navy but not it. All normalised below. These rules become
   redundant once the header and footer are hand coded.
   ------------------------------------------------------------ */

#header,
#header .header-top,
#header .header-row,
#header .header-col { color: var(--nclos-navy); }

#header a,
#header .header-top a { color: var(--nclos-navy); }
#header a:hover,
#header .header-top a:hover { color: var(--nclos-accent); }

/* keep the header CTA readable, it is on the gradient */
#header .btn-primary,
#header .btn-primary:hover { color: #fff !important; }

.footer,
.footer-main,
.footer .container,
.footer p,
.footer li,
.footer td { color: #E3E9F4; }

.footer a { color: #E3E9F4; }
.footer a:hover { color: #fff; }

.footer h1, .footer h2, .footer h3,
.footer h4, .footer h5, .footer h6,
.footer .widget-title { color: #fff; }

/* ------------------------------------------------------------
   CORRECTION: the blanket `.ncx a { color: inherit }` above beats
   .ncx-btn--ghost on specificity (0,1,1 vs 0,1,0), which made
   "See what we do" dark navy text on the dark hero. Restore the
   button colours with a higher specificity selector.
   ------------------------------------------------------------ */
.ncx a.ncx-btn { color: #fff; }
.ncx a.ncx-btn--ghost { color: #fff; }
.ncx a.ncx-btn--ghost:hover { color: var(--nclos-navy); }
.ncx a.ncx-btn--outline { color: var(--nclos-navy); }
.ncx a.ncx-btn--outline:hover { color: #fff; }