/* Theme-specific overrides on top of the TownGov stylesheet */

/* Brand palette supplied by the client to replicate on nairobi.go.ke.
   Mapped onto the TownGov template's own token names:
   - --thm-black doubles in the source stylesheet as both the heading
     color and a general dark hover/background accent; pointed at the
     client's "heading" (#1D1D1D) since headings are its main use.
   - --thm-dark-black is the template's single darkest section background
     (footer, CTA strips) -- pointed at primary-dark so those read as
     brand dark-green instead of the template's stock navy.
   - --thm-primary-dark is a new token (not in the stock template) used
     just below to make .btn-primary darken toward brand green on
     hover/focus instead of falling through to --thm-black. */
:root {
	--thm-primary: #1e5f3a;
	--thm-primary-rgb: 30, 95, 58;
	--thm-primary-dark: #174b2e;
	--thm-secondary: #f2b233;
	--thm-secondary-rgb: 242, 178, 51;
	--thm-secondary-dark: #c98c18;
	--thm-gray: #5b6770;
	--thm-gray-rgb: 91, 103, 112;
	--thm-border: #e4e7ea;
	--thm-border-rgb: 228, 231, 234;
	--thm-black: #1d1d1d;
	--thm-black-rgb: 29, 29, 29;
	--thm-dark-black: #174b2e;
	--thm-dark-black-rgb: 23, 75, 46;
	--thm-light-bg: #f5f6f7;
	--thm-light-bg-rgb: 245, 246, 247;
}

/* The source stylesheet darkens .btn-primary on hover/focus via
   --thm-black, which was a dark navy standing in for "brand, but darker" --
   now that --thm-black is a neutral near-black heading color, repoint just
   this interaction at the real brand-dark green so the button still reads
   as "itself, darker" rather than turning a flat black. */
.btn-check:active+.btn-primary:focus,
.btn-check:checked+.btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active,
.btn-primary:focus,
.show>.btn-primary.dropdown-toggle:focus,
.btn-check:focus+.btn-primary,
.btn-primary:hover {
	background-color: var(--thm-primary-dark);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.alignleft {
	float: left;
	margin: 0 1.5em 1.5em 0;
}

.alignright {
	float: right;
	margin: 0 0 1.5em 1.5em;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	font-size: 0.85em;
	opacity: 0.75;
}

/* Contact Form 7 field wrappers shouldn't break the Bootstrap grid layout */
.contact-form .wpcf7-form-control-wrap,
.cta-two-form .wpcf7-form-control-wrap,
.event-details-card-content .wpcf7-form-control-wrap,
.error-form .wpcf7-form-control-wrap {
	display: contents;
}

/* Client's palette has no dedicated error/danger color -- secondary-dark
   (not the lighter base secondary) for enough contrast at 13px on white. */
.wpcf7-not-valid-tip {
	display: block;
	color: var(--thm-secondary-dark);
	font-size: 13px;
	margin-top: 4px;
}

.wpcf7-response-output {
	margin: 1em 0 0 !important;
	border-radius: 6px;
}

/* Accordion items are toggled by main.js; avoid a flash of all-open content before it runs */
.accordian-box-item:not(.active) .accordian-content {
	display: none;
}

/* The source template ships without assets/image/shapes/widget-1.png, which
   this card relies on as a background for its white text. Fall back to a
   solid brand-dark background so the text stays legible. */
.sidebar-widget-card {
	background-color: var(--thm-primary-dark);
	background-image: none;
}

/* The source template points #loader-logo at a since-abandoned third-party
   domain (imgh.us) that now redirects to an unrelated site. Drop the
   external dependency entirely rather than load anything from it. */
#loader-logo {
	background-image: none;
}

/* #pre-loader's own hide transition has a 1s delay before visibility:hidden
   applies, so the full-viewport overlay silently swallows clicks on
   anything else for up to ~1.3s after the page has visually finished
   loading. It has nothing left to do once loaded, so take it out of hit
   testing immediately rather than waiting on the cosmetic transition. */
.loaded #pre-loader {
	pointer-events: none;
}

/* ==========================================================================
   Only the main menu bar sticks on scroll; the topbar (contact info strip)
   is normal, non-sticky page content that scrolls away with the rest of
   the page. Floating (transparent) at the top, becoming solid once stuck.
   State toggled by assets/js/nbogov-header.js.
   ========================================================================== */
:root {
	--nbogov-header-height: 124px;
}

.header {
	min-width: 0; /* the source stylesheet sets min-width:400px, which overflowed narrower phones */
}

/* .main-menu is a sibling of <header> (not nested inside it) so that its
   sticky containing block is <body> -- spanning the whole page -- rather
   than the short header box, which would otherwise cap how far it can
   stick before scrolling away with its parent. */
.main-menu {
	position: sticky;
	top: 0;
	z-index: 999;
	min-width: 0;
	margin-bottom: calc(-1 * var(--nbogov-header-height));
	transition: background-color 300ms ease, box-shadow 350ms ease;
}

/* The above negative margin-bottom pulls .page-wrapper (main-menu's next
   sibling) up underneath the menu by the menu's own height, so its first
   section (hero slider / page banner) renders behind the transparent menu
   instead of below it -- the menu's z-index keeps it on top while it's
   transparent, and everything after it is pushed back down by this same
   amount so nothing else on the page shifts.
   This has to happen via a margin on .main-menu itself rather than a
   negative margin-top pulling .main-slider/.page-banner up from inside --
   .page-wrapper has `overflow: hidden` (for unrelated decorative shapes
   elsewhere on the page), which would otherwise clip that overlap into a
   blank gap instead of showing the hero image through it. */

/* Every property that differs between the floating and solid states
   transitions smoothly instead of snapping, so the menu eases into its
   scrolled/stuck look rather than jumping. */
.main-menu-logo {
	transition: background-color 300ms ease;
	max-width: 100%;
}

/* Site Identity > Logo is registered with flex-width/flex-height (see
   add_theme_support('custom-logo') in functions.php), so WordPress renders
   whatever the uploaded file's own dimensions are instead of cropping it --
   a large source image overflows the header with nothing else to stop it.
   Cap it here instead, sized off the template's own logo: the fallback
   header logo (assets/image/logo.png) is used at width="140" in header.php,
   and the theme's registered custom-logo height is 60. width/height:auto
   keeps every upload's own aspect ratio and only ever scales it down, never
   up, so a small logo isn't blown up to fill the box. */
.main-menu-logo img {
	width: auto;
	height: auto;
	max-width: 140px;
	max-height: 60px;
}
.mobile-menu-button,
.search-box,
.main-menu-right-button {
	transition: opacity 250ms ease, visibility 250ms ease;
}

/* main-menu-right-button (the "Report Issue" button) only reserves its
   layout space at >=1400px, where the solid state actually reveals it
   further down -- so the hamburger/search icons to its left never shift
   horizontally when it fades in or out there. Below 1400px the button can
   never appear (its reveal rule is itself scoped to >=1400px), so it must
   stay display:none as in the source template; forcing it into flow at
   narrower widths was pushing the hamburger/search away from the right
   edge for no reason. */
@media (min-width: 1400px) {
	.main-menu-right-button {
		display: block !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/* Below 1400px, .search-box is the last item in .main-menu-right (the
   Report Issue button isn't in flow there -- see above), so its own
   margin-right: 30px from the source stylesheet is what's setting the
   gap to the edge of the header. That 30px is sized for the space
   between search and the button at >=1400px, not for edge spacing, so
   it leaves the hamburger/search sitting further from the edge than
   intended at narrower widths. Tighten it there only. */
@media (max-width: 1399px) {
	.search-box {
		margin-right: 12px;
	}
}

/* --- Floating / top-of-page state: transparent --- */
.main-menu.nbogov-header--floating {
	background-color: transparent;
}
.nbogov-header--floating .main-menu-logo {
	background-color: transparent;
}
.nbogov-header--floating .mobile-menu-button {
	display: block !important;
	opacity: 1;
	visibility: visible;
}
.nbogov-header--floating .mobile-menu-button span {
	background-color: var(--thm-white);
}

/* --- Solid / scrolled (stuck) state: opaque, full menu --- */
.main-menu.nbogov-header--solid {
	background-color: var(--thm-light-bg);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}
.nbogov-header--solid .main-menu-logo {
	background-color: var(--thm-white);
}
/* The "Report Issue" button only ever renders from 1400px up (the source
   template's own breakpoint); its reserved space is a no-op width below
   that, so it never affects layout there. */
@media (min-width: 1400px) {
	.nbogov-header--solid .main-menu-right-button {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

/* The nav link list has real width (a whole horizontal menu), so unlike
   search/report-issue it's only safe to force into flow (for the
   cross-fade) at the width where it's actually meant to render. Below
   1200px it stays display:none in both states via the original stylesheet,
   so there's nothing to animate there anyway. */
@media (min-width: 1200px) {
	.navigation {
		transition: opacity 300ms ease, visibility 300ms ease;
	}
	.nbogov-header--floating .navigation {
		display: block !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	.nbogov-header--solid .navigation {
		opacity: 1;
		visibility: visible;
	}
}

/* Above 1400px the hamburger is normally replaced entirely by the full
   menu; fade it out instead of the original instant display:none. */
@media (min-width: 1400px) {
	.nbogov-header--solid .mobile-menu-button {
		display: block !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/* Drop the white circle behind the header search icon; just show the icon.
   Scoped to .search-box specifically -- .search-popup-overlay (the
   full-screen search backdrop) also carries the .search-toggler class, so
   it can be clicked to close the popup, and an unscoped rule here would
   wipe out its black background too. */
.search-box .search-toggler {
	background-color: transparent;
}