/*
Theme Name: Divi Business Resources Child
Theme URI: https://example.gov/
Description: Child theme of Divi for the Economic & Civic Development / Business Resources Program section (header, left nav, body, footer).
Author: City Web Team
Template: Divi
Version: 1.0.41
Text Domain: divi-child-brp
*/

/* =====================================================
   1. DESIGN TOKENS
   ===================================================== */
:root{
  --brp-orange-dark:   #d9601a;
  --brp-orange:        #e8752c;
  --brp-orange-light:  #f7b98b;
  --brp-cream:         #fdf0e5;
  --brp-cream-light:   #fdf6f0;
  --brp-olive:         #b0bc22;
  --brp-olive-dark:    #93ad35;
  --brp-navy:          #1c2b39;
  --brp-blue-link:     #1e6fd9;
  --brp-white:         #ffffff;
  --brp-border:        #e3d3c4;
  --brp-radius:         4px;
}

body{
  color: var(--brp-navy);
}

/* =====================================================
   2. TOP UTILITY BAR
   ===================================================== */
/* Two stacked rows, both right-aligned: "Accessibility help | Contact"
   on top, the search box+button underneath — matching Service Category
   Page.png's utility bar exactly, instead of one inline row. */
#top-header{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.brp-utility-links{
  display: flex;
  align-items: center;
}
.brp-utility-links a{
  color: #555 !important;
  font-size: 13px;
  text-decoration: none;
}
.brp-utility-links a:hover{ text-decoration: underline; }
.brp-utility-links a + a{ margin-left: 14px; position: relative; }
.brp-utility-links a + a:before{
  content: "";
  position: absolute;
  left: -8px;
  top: 1px;
  bottom: 1px;
  width: 1px;
  background: #ccc;
}
.brp-utility-search{
  display: flex;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}
.brp-utility-search input{
  width: 210px;
  border: none;
  outline: none;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
}
.brp-utility-search button{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  border: none;
  background: var(--cda-nav-blue);
  color: #fff;
  cursor: pointer;
  padding: 0;
}

/* =====================================================
   3. PRIMARY NAV
   ===================================================== */
#main-header{
  background: var(--brp-white) !important;
  box-shadow: none !important;
}
#top-menu > li > a{
  color: var(--brp-navy) !important;
  font-weight: 700;
  font-size: 15px;
}
#top-menu > li.current-menu-item > a,
#top-menu > li.brp-active > a{
  background: var(--brp-blue-link);
  color: var(--brp-white) !important;
  padding: 10px 14px;
  border-radius: var(--brp-radius);
}

/* =====================================================
   4. PAGE BANNER (icon + eyebrow + title)
   ===================================================== */
.brp-banner{
  display: flex;
  align-items: center;
  background: var(--brp-orange);
  min-height: 190px;
}
.brp-banner__icon-wrap{
  flex: 0 0 260px;
  min-height: 190px;
  background: var(--brp-orange-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brp-banner__icon{
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--brp-orange-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brp-banner__icon img,
.brp-banner__icon svg{
  width: 52px;
  height: 52px;
  fill: var(--brp-white);
}
.brp-banner__text{
  padding: 0 48px;
}
.brp-banner__eyebrow{
  color: var(--brp-navy);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 4px;
}
.brp-banner__title{
  color: var(--brp-navy);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.15;
  margin: 0;
}

/* =====================================================
   5. PAGE BODY LAYOUT (sidebar + content)
   ===================================================== */
.brp-content-area{
  background: var(--brp-cream);
  padding: 48px 0 120px;
}
.brp-layout{
  display: flex;
  gap: 40px;
  width: 100%;
  padding: 0 24px;
  align-items: flex-start;
  box-sizing: border-box;
}
.brp-main{
  flex: 1 1 auto;
  min-width: 0;
}
.brp-breadcrumbs{
  font-weight: 700;
  margin-bottom: 24px;
  line-height: 1.6;
}
.brp-breadcrumbs a{
  color: var(--brp-blue-link);
  text-decoration: none;
}
.brp-breadcrumbs a:hover{ text-decoration: underline; }
.brp-body-copy p{
  font-size: 21px;
  line-height: 1.5;
  color: var(--brp-navy);
  margin-bottom: 24px;
}

/* =====================================================
   6. LEFT NAVIGATION (sidebar)
   ===================================================== */
.brp-sidebar{
  flex: 0 0 340px;
  max-width: 340px;
}
.brp-sidebar__title{
  background: var(--brp-orange-light);
  color: var(--brp-orange-dark);
  font-weight: 800;
  font-size: 20px;
  padding: 18px 20px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brp-sidebar__title:before{
  content: "\25c0";
  font-size: 13px;
}
.brp-sidebar__subtitle{
  background: var(--brp-orange);
  color: var(--brp-white);
  font-weight: 700;
  font-size: 17px;
  padding: 14px 20px;
}
.brp-nav-list{
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--brp-white);
  border: 1px solid var(--brp-border);
  border-top: none;
}
.brp-nav-list li{
  border-bottom: 1px solid var(--brp-border);
}
.brp-nav-list a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 20px;
  color: var(--brp-navy);
  font-weight: 600;
  text-decoration: none;
}
.brp-nav-list a:hover{ background: var(--brp-cream-light); }
.brp-nav-list li.is-open > a{
  background: var(--brp-orange-light);
}
.brp-nav-list .caret:after{ content:"\25be"; font-size:11px; color: var(--brp-orange-dark); }
.brp-nav-list li.is-open .caret:after{ content:"\25b4"; }
.brp-nav-list ul.brp-sub{
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--brp-cream-light);
}
.brp-nav-list ul.brp-sub li{ border-bottom: 1px solid var(--brp-border); }
.brp-nav-list ul.brp-sub a{ padding-left: 40px; font-weight: 500; }
.brp-nav-list ul.brp-sub li.current a{
  background: var(--brp-orange-light);
  font-weight: 700;
}

/* =====================================================
   7. WAVE DIVIDER
   ===================================================== */
.brp-wave{
  display: block;
  width: 100%;
  line-height: 0;
}
.brp-wave svg{ width: 100%; height: auto; display:block; }

/* =====================================================
   8. FOOTER
   ===================================================== */
#main-footer,
#footer-bottom{
  background: var(--brp-olive) !important;
}
/* Outer <footer> holds the wave (see footer.php) and matches whatever
   background the page content area above it used, so the wave's olive
   shapes read against the right backdrop instead of disappearing into
   an already-olive footer. The actual olive footer content sits in
   .brp-footer__body just below the wave. */
.brp-footer{
  width: 100%;
  box-sizing: border-box;
}
body:has( .brp-banner--olive ) .brp-footer{ background: #fff; }
.brp-footer__body{
  background: var(--brp-olive);
  width: 100%;
  margin-top: -1px;
  padding: 56px 0 24px;
  color: var(--brp-navy);
  box-sizing: border-box;
}
.brp-footer__inner{
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.brp-footer__logo{
  padding: 14px 20px;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 800;
  color: #9aa2ab;
}
.brp-footer__col h4{
  color: var(--brp-navy);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 12px;
}
.brp-footer__col ul{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.brp-footer__col a{
  color: var(--brp-navy);
  text-decoration: none;
  font-size: 15px;
  line-height: 2;
  display: block;
}
.brp-footer__col a:hover{ text-decoration: underline; }
.brp-footer__bottom{
  width: 100%;
  margin: 40px 0 0;
  padding: 20px 24px 0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(0,0,0,.15);
}
.brp-footer__social a{
  display: inline-flex;
  margin-left: 16px;
  color: var(--brp-navy);
}
.brp-footer__legal a{
  color: var(--brp-navy);
  font-size: 13px;
  margin-left: 16px;
  text-decoration: none;
}

/* =====================================================
   9. RESPONSIVE
   ===================================================== */
@media (max-width: 980px){
  .brp-layout{ flex-direction: column; }
  .brp-sidebar{ max-width: 100%; flex-basis: auto; }
  .brp-banner{ flex-direction: column; text-align: center; }
  .brp-banner__icon-wrap{ flex-basis: auto; width: 100%; padding: 24px 0; }
  .brp-banner__title{ font-size: 30px; }
  .brp-footer__inner{ flex-direction: column; }
  .brp-nav-list ul.brp-sub li{ border-bottom: none; }
}

/* =====================================================================
   10. MEGA MENU (Departments / I Need Help With / About Us)
   Built as real theme CSS — no menu plugin. Colors match the actual
   design tokens from the mockups (nav blue #007dc3, mega button
   #fdb913, green #b0bc22) rather than the section 1 tokens above,
   since those are specific to this file's original orange BRP pages.
   ===================================================================== */
:root{
	--cda-nav-blue:    #007dc3;
	--cda-olive-deep:  #747e1b;
	--cda-olive-tint:  #d7dd90;
	--cda-cream-2:     #f7f8e9;
	--cda-cream-3:     #ebeec8;
	--cda-row-line:    #747e1b;
}

#main-header{ position: relative; }
/* Anchor the mega panel to the nav row itself (not the whole header
   block) so top:100% is always exactly the nav's own bottom edge,
   regardless of header height changes — and it naturally matches the
   nav's own (now 1300px-contained) width instead of full-bleed. */
#brp-primary-nav{ position: relative; }

/* Row 1: logo + utility bar (Accessibility/Contact/Search) + mobile
   hamburger, all in one row with the olive divider below it — matches
   Depertments Mega.png / Service Category Page.png. Nav sits in its
   own full-width row underneath (see header.php). */
.brp-header-row1{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	border-bottom: 3px solid var(--brp-olive);
	padding-bottom: 16px;
	margin-bottom: 12px;
}
.brp-header-brand{ display: flex; align-items: center; gap: 10px; }

#top-menu{
	display: flex;
	list-style: none;
	align-items: stretch;
	gap: clamp(14px, 2vw, 36px);
	margin: 0 !important;
	padding: 0 !important;
	/* Divi's own base stylesheet sets "#top-menu{float:left}" for its
	   stock nav. display:flex here wins for layout, but the browser
	   still keeps the cascaded float:left as this element's computed
	   float — which stops it counting toward #brp-primary-nav's height
	   (classic floated-child collapse), so the nav box reports 0
	   height. That in turn made ".mega-menu"'s "top:100%" land at the
	   SAME position as the nav instead of below it, burying the whole
	   nav row under the open panel. Resetting float explicitly fixes
	   the collapse at the source. */
	float: none !important;
}
/* Divi's own dynamic per-page CSS sets "#top-menu li{padding-right:22px}"
   for its stock nav spacing — same specificity as our own rule below
   (1 ID + 1 type each), so it's a coin-flip on source order; !important
   guarantees ours wins and removes the extra gap Divi adds on top of
   our own #top-menu gap. */
#top-menu > li{ display: flex; position: static; padding-right: 0 !important; }

#top-menu > li > a,
#top-menu .mega-toggle{
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 16px 4px;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--brp-navy) !important;
	white-space: nowrap;
	background: transparent;
	border: 0;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
}
/* Hover should read as the same "highlighted/active" pill used for the
   open and current-page states elsewhere in this nav (blue background,
   white text) rather than just recoloring the text blue/navy — no
   padding/margin change here either, so hovering never shifts
   neighboring nav items sideways. */
#top-menu > li > a:hover,
#top-menu .mega-toggle:hover{
	background: var(--cda-nav-blue) !important;
	color: #fff !important;
	border-radius: var(--brp-radius) var(--brp-radius) 0 0;
}

#top-menu .caret{ display: inline-flex; align-items: center; }
#top-menu .caret svg{ width: 13px; height: 13px; fill: currentColor; display: block; transition: transform .15s; }
.has-mega.open > .mega-toggle .caret svg{ transform: rotate(180deg); }

/* Prefixed with "#top-menu" so this beats the base rule below
   ("#top-menu > li > a, #top-menu .mega-toggle{color:...!important}")
   — that rule has an ID, so without a matching ID here this open-state
   override (class-only) always lost the specificity contest despite
   also using !important, leaving the toggle's own text stuck navy on
   its blue background for EVERY mega item ("I Need Help With",
   "About Us", "Departments" alike) whenever it was open. */
#top-menu .has-mega.open > .mega-toggle{
	/* Color/background only — no padding or margin change, so opening
	   a mega item doesn't shove the neighboring nav items sideways. */
	background: var(--cda-nav-blue) !important;
	color: #fff !important;
	border-radius: var(--brp-radius) var(--brp-radius) 0 0;
}
.has-mega.open > .mega-toggle:hover{ color: #fff !important; }

.mega-menu{
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 9999;
	display: none;
}
.has-mega.open .mega-menu{ display: block; }

.mega-inner{
	display: flex !important;
	width: 100%;
	padding: 36px 40px !important;
	margin: 0 !important;
	gap: 40px;
	justify-content: center;
	align-items: flex-start;
	background: var(--cda-nav-blue);
	list-style: none;
}

.mega-intro{ flex: 0 0 280px !important; max-width: 280px !important; margin: 0 !important; padding: 0 !important; }
.mega-intro h3{ color: #fff !important; font-size: 26px !important; font-weight: 700 !important; line-height: 1.2 !important; margin: 0 0 14px !important; }
.mega-intro p{ color: #fff !important; font-size: 14px !important; line-height: 1.55 !important; margin: 0 0 22px !important; }

.mega-btn{
	display: inline-flex !important;
	padding: 14px 22px !important;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: var(--brp-radius) !important;
	background: #fdb913 !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	text-decoration: none !important;
	white-space: nowrap;
}
.mega-btn:hover{ background: #fee08a !important; }

.mega-col{ flex: 1 1 0 !important; min-width: 170px; max-width: none !important; margin: 0 !important; padding: 0 !important; font-size: 14px; line-height: 1.4; list-style: none; }
.mega-group{ margin: 0 !important; padding: 0 !important; }
.mega-group + .mega-group{ margin-top: 24px !important; }
.mega-group h4{ color: #fff !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.2 !important; margin: 0 0 12px !important; }

.mega-links{ list-style: none; margin: 0 !important; padding: 0 !important; }
.mega-links li{ margin: 0 0 7px !important; padding: 0 !important; font-size: 14px !important; line-height: 1.3 !important; }
.mega-links a,
.mega-links a:hover{ color: #fff !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 400 !important; margin: 0 !important; padding: 0 !important; text-decoration: none; white-space: normal; }
.mega-links a:hover{ text-decoration: underline; }

.mega-col--wide{ min-width: 220px !important; }
.mega-cat + .mega-cat{ margin-top: 20px; }
.mega-cat h5{ margin: 0 0 6px !important; line-height: 1.2 !important; }
.mega-cat h5 a,
.mega-cat h5 a:hover{ color: #fff !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none; }
.mega-cat h5 a:hover{ text-decoration: underline; }
.mega-cat p{ color: #fff !important; font-size: 13px !important; line-height: 1.5 !important; margin: 0 !important; opacity: .9; }

.mega-search{ display: flex; margin-top: 6px; max-width: 280px; border: 1px solid #fff; border-radius: 4px; overflow: hidden; }
.mega-search input{ flex: 1 0 0; height: 36px !important; border: none !important; background: #fff !important; padding: 0 12px !important; margin: 0 !important; font-size: 14px !important; font-family: inherit; outline: none; color: var(--brp-navy) !important; }
.mega-search button{ width: 44px; height: 36px !important; border: none !important; background: var(--brp-navy) !important; color: #fff !important; padding: 0 !important; margin: 0 !important; cursor: pointer; display: flex; align-items: center; justify-content: center; }

@media (max-width: 980px){
	.mega-inner{ flex-wrap: wrap; padding: 24px !important; }
}

/* =====================================================================
   11. SERVICE CATEGORY variant of the existing banner + sidebar
   (template-parts/banner.php + sidebar.php) — olive palette matching
   Service Category Page.png, toggled by a "brp_theme=olive" postmeta
   flag rather than duplicating the whole template.
   ===================================================================== */
.brp-banner--olive{ background: var(--brp-olive); }
.brp-banner--olive .brp-banner__icon-wrap{ display: none; }
.brp-banner--olive .brp-banner__text{ width: 100%; padding: 0 48px; box-sizing: border-box; }
.brp-banner--olive .brp-banner__eyebrow,
.brp-banner--olive .brp-banner__title{ color: var(--brp-navy); }

/* .brp-content-area defaults to the cream tone used by the orange BRP
   department pages — Service Category Page.png shows plain white for
   this section instead, so override it specifically when the olive
   banner/sidebar variant is in use. */
body:has( .brp-banner--olive ) .brp-content-area{ background: #fff; }

.brp-sidebar--olive .brp-sidebar__title{
	background: var(--cda-olive-deep);
	color: #fff;
}
.brp-sidebar--olive .brp-sidebar__title:before{ content: none; }

/* Each row is its own inset "card" (left edge steps in per depth, right
   edge always flush) with a thin gap between rows revealing the dark
   olive frame behind them — matching Sidebar-nav_responsive.png pixel
   for pixel, rather than full-bleed rows separated by a border line. */
.brp-sidebar--olive .brp-nav-list{ list-style: none; margin: 0; padding: 3px 0; border: none; background: var(--cda-olive-deep); }
.brp-sidebar--olive .brp-nav-list li{ border: none; }
.brp-sidebar--olive .brp-nav-list a{
	display: flex; justify-content: space-between; align-items: center;
	text-decoration: none; box-sizing: border-box;
}
.brp-sidebar--olive .brp-nav-list > li > a{
	margin: 1px 0 1px 10px;
	padding: 11px 18px; background: #fff; color: var(--brp-navy); font-weight: 600; font-size: 16px;
}
.brp-sidebar--olive .brp-nav-list > li > a:hover{ background: var(--cda-cream-2); }
.brp-sidebar--olive .brp-nav-list li.is-open > a{ background: var(--cda-olive-tint) !important; font-weight: 700; }
.brp-sidebar--olive .brp-nav-list .caret{ width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--brp-navy); flex: 0 0 auto; }
/* The base (orange) sidebar's ".brp-nav-list .caret:after" unicode-glyph
   rule (section 6) isn't scoped to that variant, so it was also firing
   here on top of this border-triangle icon — strip it for the olive
   sidebar specifically. */
.brp-sidebar--olive .brp-nav-list .caret:after,
.brp-sidebar--olive .brp-nav-list li.is-open .caret:after{ content: none; }
.brp-sidebar--olive .brp-nav-list li.is-open > a .caret{ border-top: none; border-bottom: 7px solid var(--brp-navy); }
.brp-sidebar--olive .brp-nav-list ul.brp-sub{ list-style: none; margin: 0; padding: 0; background: transparent; display: none; }
.brp-sidebar--olive .brp-nav-list li.is-open > ul.brp-sub{ display: block; }
.brp-sidebar--olive .brp-nav-list ul.brp-sub a{
	margin: 1px 0 1px 20px;
	padding: 10px 18px; background: var(--cda-cream-2); color: var(--brp-navy); font-weight: 400; font-size: 15px;
}
.brp-sidebar--olive .brp-nav-list ul.brp-sub a:hover{ text-decoration: underline; }
.brp-sidebar--olive .brp-nav-list ul.brp-sub li.current > a{ font-weight: 700; text-decoration: underline; }

.brp-breadcrumbs{ color: var(--brp-blue-link); font-size: 18px; font-weight: 700; margin-bottom: 22px; }
.brp-breadcrumbs a{ color: inherit; text-decoration: none; }
.brp-breadcrumbs a:hover{ text-decoration: underline; }

.brp-body-copy .brp-intro{ font-size: 24px; line-height: 1.5; color: var(--brp-navy); margin-bottom: 36px; }
.brp-body-copy h2{ font-size: 32px; font-weight: 800; color: var(--brp-navy); margin: 0 0 24px; }

.brp-svc-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.brp-svc-card{
	position: relative;
	overflow: hidden;
	border: 1px solid var(--brp-olive);
	border-radius: 4px;
	background: #fff;
	padding: 20px 24px 60px;
}
.brp-svc-card__title{ font-size: 20px; font-weight: 800; margin: 0 0 10px; position: relative; z-index: 1; }
.brp-svc-card__title a{ color: var(--brp-navy); text-decoration: none; }
.brp-svc-card__title a:hover{ text-decoration: underline; }
.brp-svc-card__excerpt{ font-size: 15px; line-height: 1.55; color: var(--brp-navy); margin: 0; position: relative; z-index: 1; }
.brp-svc-card__wave{ position: absolute; left: 0; right: 0; bottom: 0; height: 34px; line-height: 0; }
.brp-svc-card__wave svg{ width: 100%; height: 100%; display: block; }

@media (max-width: 980px){
	.brp-svc-grid{ grid-template-columns: 1fr; }
}

/* =====================================================================
   12. SIDEBAR — deeper accordion nesting (Category > Area > Service >
   Project, etc.), matching Sidebar-nav_responsive.png. Each level gets
   a bit more indent and an alternating shade so depth stays legible.
   ===================================================================== */
.brp-sidebar--olive .brp-nav-list li.has-children > a{ cursor: pointer; }

/* Deeper levels step the row's left inset in by ~10px each (right edge
   always stays flush) and get progressively more muted cream when
   closed — matching Sidebar-nav_responsive.png's staircase of inset
   boxes. ANY open/expanded row, at any depth, uses the same olive-tint
   (handled generically by "li.is-open > a" above), not an alternating
   open color by depth. */
.brp-sidebar--olive .brp-nav-list .brp-sub .brp-sub > li > a{ margin-left: 30px; background: var(--cda-cream-3); }
.brp-sidebar--olive .brp-nav-list .brp-sub .brp-sub .brp-sub > li > a{ margin-left: 40px; background: var(--cda-cream-3); }

/* =====================================================================
   13. MOBILE NAV — hamburger toggle, stacked menu, full-width mega
   panels, and the mobile-only category accordion tree inside
   "I Need Help With" (see mobile nav dropdowns.png).
   ===================================================================== */
.nav-toggle{
	display: none;
	flex: 0 0 auto;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 8px;
}
.nav-toggle span{
	display: block;
	width: 26px;
	height: 3px;
	margin: 5px 0;
	background: var(--brp-navy);
}

/* Divi's own dynamic CSS sets "#top-menu{line-height:0}" for its stock
   nav — since this tree lives inside #top-menu (unlike the sidebar's
   copy of this same markup, which doesn't), that 0 line-height
   inherits all the way down to these links, collapsing each row's line
   box to ~0 and making any wrapped 2-line label (e.g. "Agriculture /
   Weights & Measures") visually overlap the row below it instead of
   pushing it down. Resetting it here fixes every descendant at once. */
.mega-mobile-tree{ display: none; line-height: 1.4; }

@media (max-width: 980px){
	.nav-toggle{ display: block; }

	/* Utility bar (Accessibility/Contact/Search) was cramming into the
	   header row and wrapping awkwardly on narrow screens — hide it on
	   mobile so row1 is just logo + hamburger, matching the mobile
	   mockup's clean top bar. */
	#top-header{ display: none; }

	#top-menu{ display: none; width: 100%; flex-direction: column; gap: 0; }
	#top-menu.mobile-open{ display: flex; }
	/* #top-menu > li is still "display:flex" (set unconditionally,
	   desktop + mobile) with the default ROW direction — so its two
	   children (the toggle button and, once made position:static
	   below, the mega-menu panel) were sitting side by side, each
	   squeezed into half the row's width, instead of the panel getting
	   its own full-width line below the button. Stacking the li itself
	   fixes that at the source. */
	#top-menu > li{ width: 100%; flex-direction: column; }
	#top-menu > li > a,
	#top-menu .mega-toggle{ width: 100%; justify-content: space-between; padding: 14px 4px !important; }

	/* Mega panels take over the full width below the header instead of
	   floating as a fixed-width dropdown. */
	#top-menu .mega-menu{ position: static; width: 100%; }
	/* The desktop rule sets "align-items:flex-start" on .mega-inner,
	   which in column direction is the CROSS axis (horizontal) — so
	   every child shrink-wraps to its own content width instead of
	   filling the viewport. That let items like the mobile category
	   tree and search box size to their natural (too-wide) content
	   width and overflow off the right edge of the screen. Stretching
	   fixes it, plus box-sizing so 100% width plus padding doesn't
	   itself cause overflow. */
	.mega-inner{ flex-direction: column; align-items: stretch; padding: 20px !important; gap: 0 !important; box-sizing: border-box; }
	.mega-inner > *{ width: 100%; box-sizing: border-box; max-width: 100%; }
	.mega-intro{ flex-basis: auto !important; max-width: none !important; margin-bottom: 20px !important; }
	.mega-search{ max-width: 100% !important; }

	.mega-desktop-only{ display: none !important; }
	/* Solid white/light-blue/cream list box sitting on the blue panel —
	   matching mobile nav dropdowns.png exactly (dark text throughout,
	   not white text over transparent blue). */
	.mega-mobile-tree{ display: block; }

	/* Rebuilt to match "mobile nav dropdowns.png" pixel-sampled exactly:
	   each row is its own inset "card" (left edge steps in per depth,
	   right edge flush) sitting on the panel's own nav-blue as the
	   frame color — same staircase pattern as the desktop sidebar
	   accordion, not full-bleed rows on a white strip. Colors sampled
	   directly from the mockup: open = #bfdff0, closed level2/3 =
	   --cda-cream-2/--cda-cream-3 (already matched these earlier), and
	   the caret is a solid triangle — blue (#409dd2) closed, near-black
	   (#313131) open — not the base rule's small orange ::after arrow. */
	/* Divi's own dynamic CSS reaches into any li/a nested inside
	   #top-menu — "#top-menu li{display:inline-block}" (shrink-wraps
	   every row to its text width instead of full-bleed) and
	   "#top-menu li li a{width:200px}" (hard-codes every SUB-level link
	   to 200px, since this tree's rows are li-inside-li once you get to
	   any nesting). Both are ID selectors with no !important, so they
	   silently beat these rules' plain classes on specificity alone —
	   every layout property below needs !important to actually stick. */
	.mega-mobile-tree .brp-nav-list{ list-style: none; margin: 0; padding: 3px 0; background: var(--cda-nav-blue); border: none; border-radius: 4px; overflow: hidden; }
	.mega-mobile-tree .brp-nav-list li{ display: block !important; float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; border: none; }
	.mega-mobile-tree .brp-nav-list a{ display: flex !important; justify-content: space-between; align-items: center; text-decoration: none; box-sizing: border-box; width: auto !important; }
	.mega-mobile-tree .brp-nav-list > li > a{ margin: 1px 0 1px 10px !important; padding: 12px 16px !important; background: #fff; color: var(--brp-navy); font-weight: 700; }
	.mega-mobile-tree .brp-nav-list li.is-open > a{ background: #bfdff0 !important; }

	.mega-mobile-tree .brp-nav-list .caret{ width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #409dd2; flex: 0 0 auto; }
	.mega-mobile-tree .brp-nav-list li.is-open > a .caret{ border-top: none; border-bottom: 7px solid #313131; }
	.mega-mobile-tree .brp-nav-list .caret:after,
	.mega-mobile-tree .brp-nav-list li.is-open .caret:after{ content: none; }

	.mega-mobile-tree .brp-nav-list ul.brp-sub{ list-style: none; margin: 0 !important; padding: 0 !important; background: transparent; display: none; }
	.mega-mobile-tree .brp-nav-list li.is-open > ul.brp-sub{ display: block; }
	.mega-mobile-tree .brp-nav-list ul.brp-sub a{ margin: 1px 0 1px 20px !important; padding: 11px 16px !important; background: var(--cda-cream-2); color: var(--brp-navy); font-weight: 500; font-size: 14px; }
	.mega-mobile-tree .brp-nav-list .brp-sub .brp-sub a{ margin-left: 30px !important; background: var(--cda-cream-3); }
	.mega-mobile-tree .brp-nav-list .brp-sub .brp-sub .brp-sub a{ margin-left: 40px !important; background: var(--cda-cream-3); }

	/* Mobile per-group toggle for About Us / Departments columns
	   (js/mega-nav.js adds the click behaviour to .mega-group h4). */
	.mega-group h4{ cursor: pointer; }
	.mega-group .mega-links{ display: none; }
	.mega-group.open .mega-links{ display: block; }
}

/* =====================================================================
   14. SERVICE CATEGORY — mobile layout (see
   "Service Category Page – mobile.png"): sidebar is hidden entirely
   (its content lives in the "I Need Help With" mobile tree above
   instead of being shown twice), and cards stack to one column.
   ===================================================================== */
@media (max-width: 980px){
	.brp-sidebar--olive{ display: none; }
	.brp-svc-grid{ grid-template-columns: 1fr; }
}

/* =====================================================================
   15. Disable Divi's "fixed nav" (sticky header) behavior for this
   custom header — the header/footer here don't wrap content in Divi's
   #page-container, so Divi's own compensating top-padding never
   applies, and the fixed header just overlaps the utility bar/banner
   below it instead of pushing them down.
   ===================================================================== */
#main-header{
	position: relative !important;
	top: auto !important;
}

/* =====================================================================
   16. Force the banner to full width. It's computing to a narrow,
   shrink-to-fit box despite being a plain block-level child of body —
   forcing explicit width sidesteps whatever is causing that regardless
   of the exact cause. No container cap anywhere on the site now — the
   header row, banner, body layout and footer are all full-bleed edge
   to edge, matching the mockups exactly (only inner text/cards get
   breathing-room padding, never a centered max-width box).
   ===================================================================== */
.brp-banner{ display: flex !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; }
.brp-wave{ width: 100%; }

/* =====================================================================
   17. #main-header's background spans full width (correct), but its
   inner .container was capped by Divi's generic .container rule to
   something well short of the visible header width. No max-width here
   either — the header row runs the full width of the page, with the
   inline padding:16px 24px (see header.php) providing the edge gutter.
   ===================================================================== */
#main-header > .container{
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}