/* ==========================================================================
   Contour — GeneratePress chrome (child theme stylesheet, after dds.css)
   Targets GP 3.6 + GP Premium 2.5 markup with: navigation as header, sticky nav, off-canvas (slideout) menu on mobile,
   mobile_menu_breakpoint 1024, top bar widget area, CTA printed by a generate_menu_bar_items hook.
   ========================================================================== */

/* ---- Top bar (widget area "top-bar": one Custom HTML widget, see DESIGN.md §9.1) ---- */
.top-bar{ background:var(--contrast); color:var(--sage); font:500 .875rem/1 var(--f-mono); letter-spacing:.02em; }
.top-bar .inside-top-bar{ max-width:1288px; min-height:44px; padding:0 24px; }
.top-bar a{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding-inline:4px; color:var(--base-3); text-decoration:none; }
.top-bar a:hover{ color:var(--accent); }
.top-bar a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.top-bar a svg{ width:16px; height:16px; color:var(--accent); fill:none; stroke:currentColor; stroke-width:1.75; }
@media (max-width:767px){ .top-bar .inside-top-bar{ justify-content:center; padding:0 20px; } }

/* ---- Header = GP navigation (navigation_as_header) ---- */
.main-navigation{ background:var(--base-3); }
.main-navigation .inside-navigation{ max-width:1288px; min-height:84px; padding-inline:24px; }
.main-navigation .navigation-branding .site-logo img, .main-navigation .site-logo img{ height:60px; width:auto; padding:0; } /* Logo-Banner, 196 px wide */
.main-navigation .main-nav ul li a{ color:var(--contrast); font:400 1rem/84px var(--f-body); padding-inline:13px; text-decoration:none; }
.main-navigation .main-nav ul li:not(.nav-cta) > a:hover,
.main-navigation .main-nav ul li.current-menu-item > a{ color:var(--contrast); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:8px; }
.main-navigation .main-nav ul li:not(.nav-cta) > a:hover{ text-decoration-color:var(--accent); }
.main-navigation .main-nav ul li.current-menu-item > a{ text-decoration-color:var(--contrast); }
.main-navigation :focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; }
/* header ruler: the single header flourish (minor tick 8px, major 80px) */
.main-navigation::after{ content:""; display:block; height:9px; border-bottom:1px solid var(--base);
  background:repeating-linear-gradient(90deg, var(--contrast-3) 0 1px, transparent 1px 80px) left bottom/100% 9px no-repeat,
             repeating-linear-gradient(90deg, var(--base) 0 1px, transparent 1px 8px) left bottom/100% 5px no-repeat; }
.main-navigation.is_stuck, #sticky-navigation{ box-shadow:0 1px 0 var(--base); }

/* CTA in the menu bar (hook generate_menu_bar_items prints .menu-bar-item.nav-cta) */
.main-navigation .menu-bar-items{ align-items:center; }
.main-navigation .menu-bar-item.nav-cta > a{ display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-left:14px; padding:0 16px;
  background:var(--accent); border:1px solid var(--accent); border-radius:2px; color:var(--contrast); font:600 1rem/1.2 var(--f-body); text-decoration:none;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease; }
.main-navigation .menu-bar-item.nav-cta > a:is(:hover, :focus-visible){ background:var(--contrast); border-color:var(--contrast); color:var(--base-3); }
.main-navigation .menu-bar-item.nav-cta svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.75; transition:transform .18s ease; }
.main-navigation .menu-bar-item.nav-cta > a:hover svg{ transform:translateX(3px); }
.nav-cta__sm{ display:none; }

/* Mobile toggle (icon only; label "" in Menu Plus → screen-reader text "Menu") */
.main-navigation .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; min-width:44px; height:44px; margin-left:8px; padding:0;
  background:transparent; border:1px solid var(--contrast); border-radius:2px; color:var(--contrast); line-height:1; }
.main-navigation .menu-toggle:is(:hover, :focus){ background:var(--contrast); color:var(--base-3); }
@media (max-width:1024px){ .main-navigation .inside-navigation{ min-height:76px; } }
@media (max-width:767px){
  .main-navigation .inside-navigation{ min-height:68px; padding-inline:20px; }
  .main-navigation .navigation-branding .site-logo img, .main-navigation .site-logo img{ height:48px; }
  .main-navigation .menu-bar-item.nav-cta > a{ margin-left:0; padding:0 12px; }
  .main-navigation .menu-bar-item.nav-cta svg, .nav-cta__lg{ display:none; }
  .nav-cta__sm{ display:inline; }
}
@media (max-width:359px){
  .main-navigation .navigation-branding .site-logo img, .main-navigation .site-logo img{ height:44px; }
  .main-navigation .menu-bar-item.nav-cta{ display:none; } /* the off-canvas panel and the hero carry the quote CTA */
}

/* ---- Off-canvas panel (Menu Plus slideout: side right, style slide, close button inside) ---- */
#generate-slideout-menu, .slideout-navigation.main-navigation{ background:var(--canopy); }
#generate-slideout-menu{ --btn-bg-h:var(--base-3); --btn-fg-h:var(--contrast); --btn-bd-h:var(--base-3); --focus:var(--accent); }
.slideout-navigation.main-navigation .inside-navigation{ padding:20px 24px 32px; }
.slideout-navigation.main-navigation .main-nav ul{ border-top:1px solid rgba(169,189,176,.3); }
.slideout-navigation.main-navigation .main-nav ul li a{ display:flex; align-items:center; min-height:56px; padding:12px 0; line-height:1.2;
  border-bottom:1px solid rgba(169,189,176,.3); color:var(--base-3); font:500 1.375rem/1.2 var(--f-head); }
.slideout-navigation.main-navigation .main-nav ul li a:hover{ color:var(--base-3); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:6px; }
.slideout-navigation.main-navigation .main-nav ul li.current-menu-item > a{ padding-left:14px; box-shadow:inset 3px 0 0 var(--accent); }
.slideout-navigation .slideout-exit{ display:grid; place-items:center; width:44px; height:44px; margin-left:auto; padding:0; background:transparent;
  border:1px solid rgba(169,189,176,.5); border-radius:2px; color:var(--base-3); }
.slideout-navigation :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.slideout-overlay{ background:rgba(19,36,29,.55); }
/* Widget area "slide-out-widget": Custom HTML with a .dds-btn quote button + the email line (DESIGN.md §9.3) */
.slideout-navigation .slideout-widget{ margin-top:28px; color:var(--sage); font-size:.9375rem; }
.slideout-navigation .slideout-widget a:not(.dds-btn){ color:var(--base-3); font-weight:600; }