/* ==========================================================================
   NetConfig.io — 3-tier header (news-portal pattern, own brand/logo/content)

   Structure:
     .nc-utility-bar                         (tier 1 -- dark strip)
     header#masthead.site-header             (blue top border = tier divider)
       div.inside-header                     (tier 2 -- brand row, sticky)
         .site-logo                          (GeneratePress's own, unchanged)
         .nc-header-tagline                  (this file)
         .nc-header-search                   (this file)
     nav#site-navigation                     (tier 3 -- existing menu, restyled)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Utility bar
   -------------------------------------------------------------------------- */
.nc-utility-bar {
	background: var( --nc-ink );
	color: #cbd5e1;
	font-size: 12.5px;
}

.nc-utility-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 20px;
}

.nc-utility-bar__home {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #cbd5e1 !important;
	text-decoration: none !important;
	font-weight: 500;
	min-width: 0;
}

.nc-utility-bar__home span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nc-utility-bar__home svg {
	flex: 0 0 auto;
	opacity: 0.85;
}

.nc-utility-bar__links {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 0 0 auto;
}

.nc-utility-bar__links > a {
	color: #cbd5e1 !important;
	text-decoration: none !important;
	font-weight: 500;
	white-space: nowrap;
}

.nc-utility-bar__links > a:hover {
	color: #ffffff !important;
}

.nc-utility-bar__social {
	display: flex;
	align-items: center;
	gap: 6px;
}

.nc-utility-bar__social .nc-social-btn {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: rgba( 255, 255, 255, 0.08 );
	border: none;
}

/* --------------------------------------------------------------------------
   2. Blue accent line -- sits between the utility bar and the brand row.
   -------------------------------------------------------------------------- */
.site-header {
	border-top: 3px solid var( --nc-accent );
}

/* --------------------------------------------------------------------------
   3. Brand row -- GeneratePress's own .inside-header, restyled.

      Plain `position: sticky` doesn't actually work here: a sticky
      element is bounded by its own containing block (here, <header>,
      .inside-header's direct parent), and <header>'s box is only as
      tall as its own content (inside-header + the nav row, maybe 100px
      total) -- nowhere near enough scroll room to stay pinned through a
      whole article. Confirmed live: it unstuck and scrolled away after
      barely 100px. Condensing on scroll (nav + utility bar disappear,
      just the brand row stays put) needs the header-scroll.js toggle
      below, which switches this row to position:fixed and hides the nav
      row -- header-scroll.js also sets #page's padding-top to this
      row's real measured height so fixing it doesn't jump the page
      content upward.
   -------------------------------------------------------------------------- */
.inside-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 24px;
	padding-top: 14px;
	padding-bottom: 14px;
	background: var( --nc-bg-panel );
}

body.nc-header-condensed #masthead {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.08 );
}

/* Desktop-only: #site-navigation doubles as the mobile flyout menu
   (GeneratePress toggles it open/closed with the same element under
   .has-inline-mobile-toggle), so unconditionally hiding it here would
   also break the hamburger menu once scrolled on a phone. Above 767px
   it's always the plain horizontal row, safe to hide outright. */
@media ( min-width: 768px ) {
	body.nc-header-condensed #masthead #site-navigation {
		display: none;
	}
}

body.nc-header-condensed .nc-utility-bar {
	display: none;
}

.site-logo {
	flex: 0 0 auto;
}

.site-logo img {
	display: block;
}

.nc-header-tagline {
	display: flex;
	align-items: center;
	padding-left: 18px;
	border-left: 1px solid var( --nc-border );
	min-width: 0;
}

.nc-header-tagline__desc {
	font-size: 15px;
	color: var( --nc-ink-soft );
	font-weight: 500;
}

.nc-header-search {
	position: relative;
	margin-left: auto;
	flex: 0 0 auto;
}

.nc-header-search__toggle {
	display: flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px 4px;
	color: var( --nc-ink );
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.nc-header-search__toggle:hover,
.nc-header-search__toggle.is-active {
	color: var( --nc-accent );
}

.nc-header-search__panel {
	position: absolute;
	top: calc( 100% + 10px );
	right: 0;
	width: 300px;
	max-width: calc( 100vw - 40px );
	background: var( --nc-bg-panel );
	border: 1px solid var( --nc-border );
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
	padding: 12px;
	z-index: 201;
}

.nc-header-search__panel .search-form {
	display: flex;
	gap: 8px;
}

.nc-header-search__panel .search-field {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var( --nc-border-hover );
	border-radius: 7px;
	padding: 9px 12px;
	font-size: 13.5px;
	color: var( --nc-ink );
	background: var( --nc-bg-paper );
}

.nc-header-search__panel .search-field:focus {
	outline: none;
	border-color: var( --nc-accent );
}

.nc-header-search__panel .search-submit {
	flex: 0 0 auto;
	border: none;
	border-radius: 7px;
	padding: 0 14px;
	background: var( --nc-accent );
	color: #ffffff;
	font-weight: 600;
	cursor: pointer;
}

.nc-header-search__panel .search-submit:hover {
	background: var( --nc-accent-dark );
}

/* --------------------------------------------------------------------------
   4. Nav menu row (tier 3) -- GeneratePress's existing #site-navigation,
      restyled to a light-gray bar. Not made sticky itself: on scroll it
      moves away naturally above the sticky brand row, same as the
      reference (only logo + search stay pinned once scrolled).
   -------------------------------------------------------------------------- */
#site-navigation {
	/* GeneratePress centers this nav as a shrink-to-fit box by default
	   (`#site-navigation{margin-left:auto;margin-right:auto}` in its own
	   main.min.css) -- fine for a plain inline menu, but it means the
	   background/border below only ever wrapped the menu's own width
	   instead of spanning full-bleed like the reference's nav row.
	   Reset to a real full-width bar; .inside-navigation (a
	   .grid-container) still centers/caps the *content* inside it. */
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background: var( --nc-bg-paper ) !important;
	border-top: 1px solid var( --nc-border );
	border-bottom: 1px solid var( --nc-border );
}

.main-navigation .main-nav > ul > li > a {
	font-weight: 600;
	font-size: 14px;
	padding-top: 13px;
	padding-bottom: 13px;
}

/* Chevron after any menu item that has a dropdown -- GeneratePress marks
   these with .menu-item-has-children; matches the reference's dropdown
   arrows without needing a new nav-walker. */
.main-navigation .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 6px;
	margin-bottom: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg );
	opacity: 0.6;
}

/* --------------------------------------------------------------------------
   5. Responsive -- utility bar's right-hand links/social icons are the
      first thing to go on a narrow screen; the tagline follows on phones,
      leaving just logo + search in the sticky brand row (matches how the
      reference itself simplifies down on scroll/small screens).
   -------------------------------------------------------------------------- */
@media ( max-width: 767px ) {
	.nc-utility-bar__links > a {
		display: none;
	}

	.nc-header-tagline {
		display: none;
	}

	/* Real bug found live, in two parts:
	   1) logo(200px) + search(~80px) + the mobile hamburger toggle
	      (~55px) don't fit on one line under ~420px -- shrunk the logo
	      to give the row more room.
	   2) shrinking the logo alone didn't fix it: .nc-header-search has
	      margin-left:auto (correct for desktop, where it's the last
	      item), but #mobile-menu-control-wrapper (the hamburger) is a
	      LATER sibling that only exists on mobile -- confirmed via the
	      real DOM order (site-logo, nc-header-tagline, nc-header-search,
	      mobile-menu-control-wrapper, site-navigation). With the
	      auto-margin on search, search itself gets pushed flush to the
	      row's right edge, leaving zero room after it for the hamburger
	      to share that line -- it wraps no matter how small the logo
	      gets. Moving the auto-margin to the hamburger (the item that's
	      actually last on mobile) and letting search sit normally
	      before it fixes the real cause; shrinking the search button
	      too (icon only, no "Search" label) buys the last bit of room
	      so all three fit on one line together. */
	.site-logo img {
		width: 130px !important;
		height: auto !important;
	}

	.nc-header-search {
		margin-left: 0;
	}

	.nc-header-search__toggle span {
		display: none;
	}

	#mobile-menu-control-wrapper {
		margin-left: auto;
	}
}

@media ( max-width: 480px ) {
	.nc-utility-bar__social {
		display: none;
	}
}