/* ==========================================================================
   Shingle Shield header + toolbar + mobile nav.
   Loaded sitewide by ss-style.php. Scoped to theme wrappers only.
   Swap the four vars to re-skin if the home candidate changes.
   ========================================================================== */
:root{
  --ssh-ink:#0E1B2A;
  --ssh-ink-2:#16283C;
  --ssh-amber:#E08A2E;
  --ssh-amber-2:#C4741F;
  --ssh-line:#E5DFD6;
}

/* --- toolbar. Template shipped an orange to gold gradient that fights the
   navy and amber palette. Higher specificity beats the theme's !important. --- */
.tm-toolbar.tm-toolbar-default{
  background:var(--ssh-ink)!important;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-top:9px!important;padding-bottom:9px!important;
  font-size:13.5px!important;
}
.tm-toolbar .ss-tb{
  color:rgba(255,255,255,.72);font-weight:500;letter-spacing:.01em;
  font-family:'Work Sans',system-ui,sans-serif;
}
.tm-toolbar .ss-tb a{color:var(--ssh-amber);font-weight:700;text-decoration:none}
.tm-toolbar .ss-tb a:hover{color:#F0A559}
.tm-toolbar .ss-tb-sep{color:rgba(255,255,255,.28);margin:0 8px}

/* --- sticky header ---
   theme.1.css sets `.tm-header, .tm-header-mobile{position:relative}` and loads
   after this file, so a plain `.tm-header` loses on source order. Doubling the
   class raises specificity enough to win without reaching for !important. --- */
.tm-header.tm-header{position:sticky;top:0;z-index:980}
/* the WP admin bar is fixed at the top for logged in users, so offset under it */
body.admin-bar .tm-header.tm-header{top:32px}
@media (max-width:782px){body.admin-bar .tm-header.tm-header{top:46px}}
.tm-header > .uk-navbar-container > .uk-container{max-width:1500px}
.tm-header .uk-navbar-container{
  background:#fff!important;
  border-bottom:1px solid var(--ssh-line);
  box-shadow:0 2px 18px rgba(14,27,42,.06);
}

/* --- top level links --- */
.tm-header .uk-navbar-nav > li > a{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ssh-ink);padding:0 11px;min-height:84px;position:relative;
  white-space:nowrap;
  transition:color .2s ease;
}
/* the accent underline that draws in on hover */
.tm-header .uk-navbar-nav > li > a::after{
  content:"";position:absolute;left:11px;right:11px;bottom:27px;height:2px;
  background:var(--ssh-amber);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.tm-header .uk-navbar-nav > li:hover > a::after,
.tm-header .uk-navbar-nav > li.uk-active > a::after,
.tm-header .uk-navbar-nav > li.current-menu-item > a::after,
.tm-header .uk-navbar-nav > li.current-menu-ancestor > a::after{transform:scaleX(1)}
.tm-header .uk-navbar-nav > li:hover > a,
.tm-header .uk-navbar-nav > li.uk-active > a{color:var(--ssh-ink)}
/* parent chevron */
.tm-header .uk-navbar-nav > li.uk-parent > a{padding-right:26px}
.tm-header .uk-navbar-parent-icon{margin-left:6px;color:var(--ssh-amber)}

/* --- phone link --- */
.tm-header .ss-nav-tel > a{
  color:var(--ssh-amber-2)!important;font-size:14px;letter-spacing:0;
  font-weight:800;text-transform:none;padding-left:18px;padding-right:12px;
  white-space:nowrap;
}
.tm-header .ss-nav-tel > a::after{display:none}
.tm-header .ss-nav-tel > a:hover{color:var(--ssh-amber)!important}

/* --- the estimate button --- */
.tm-header .uk-navbar-nav > li.ss-nav-cta{display:flex;align-items:center;margin-left:8px}
.tm-header .uk-navbar-nav > li.ss-nav-cta > a{
  min-height:46px;height:46px;padding:0 18px;border-radius:6px;white-space:nowrap;
  background:var(--ssh-amber);color:#12212F;
  font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 6px 18px rgba(224,138,46,.34);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.tm-header .uk-navbar-nav > li.ss-nav-cta > a::after{display:none}
.tm-header .uk-navbar-nav > li.ss-nav-cta > a:hover{
  background:var(--ssh-amber-2);color:#12212F;
  transform:translateY(-2px);box-shadow:0 10px 24px rgba(224,138,46,.42);
}

/* --- dropdowns. 12 services and 16 areas are too many for one column --- */
.tm-header .uk-navbar-dropdown{
  padding:24px 26px;border-radius:8px;border-top:3px solid var(--ssh-amber);
  box-shadow:0 26px 64px rgba(14,27,42,.18);
  min-width:600px;margin-top:0;
}
.tm-header .uk-navbar-dropdown-nav{column-count:2;column-gap:30px}
.tm-header .uk-navbar-dropdown-nav > li{break-inside:avoid;-webkit-column-break-inside:avoid}
.tm-header .uk-navbar-dropdown-nav > li > a{
  display:block;font-family:'Work Sans',system-ui,sans-serif;
  font-size:14.5px;font-weight:500;color:#1B2733;
  padding:8px 12px;border-radius:5px;
  transition:background .18s ease,color .18s ease,padding-left .18s ease;
}
.tm-header .uk-navbar-dropdown-nav > li > a:hover{
  background:#F7F4EF;color:var(--ssh-amber-2);padding-left:18px;
}

/* --- mobile --- */
.tm-header-mobile .uk-navbar-container{
  background:#fff!important;border-bottom:1px solid var(--ssh-line);
}
.tm-header-mobile .uk-navbar-toggle{color:var(--ssh-ink)}
#tm-dialog-mobile .uk-offcanvas-bar{background:var(--ssh-ink);padding:30px 26px}
#tm-dialog-mobile .uk-nav > li > a{
  font-family:'Work Sans',system-ui,sans-serif;
  color:#fff;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09);
}
#tm-dialog-mobile .uk-nav > li > a:hover{color:var(--ssh-amber)}
#tm-dialog-mobile .uk-nav-sub a{
  color:rgba(255,255,255,.66);font-size:14px;font-weight:400;
  text-transform:none;letter-spacing:0;padding:7px 0;
}
#tm-dialog-mobile .uk-nav-sub a:hover{color:var(--ssh-amber)}
#tm-dialog-mobile .uk-nav-parent-icon{color:var(--ssh-amber)}
#tm-dialog-mobile .ss-nav-tel > a{color:var(--ssh-amber)!important;text-transform:none;font-size:20px}
#tm-dialog-mobile .ss-nav-cta > a{
  background:var(--ssh-amber);color:#12212F!important;border-radius:6px;
  text-align:center;justify-content:center;margin-top:18px;border-bottom:0;
}

/* the fixed mobile CTA bar already reserves 70px at the top, so the sticky
   header must not also stick underneath it on small screens */
@media (max-width:1099px){.tm-header.tm-header,.tm-header-mobile.tm-header-mobile{position:static}}

@media (prefers-reduced-motion:reduce){
  .tm-header .uk-navbar-nav > li > a::after{transition:none}
  .tm-header .uk-navbar-nav > li.ss-nav-cta > a{transition:none}
  .tm-header .uk-navbar-nav > li.ss-nav-cta > a:hover{transform:none}
}

/* --- mobile sticky call/estimate bar (HFCM snippet id 1) ---
   The template shipped these as black #000 and #232323 with `display:inline`,
   which fights the palette and breaks the fixed 70px height. custom_less cannot
   be edited from WP-CLI (YOOtheme compiles LESS in the browser only), so this
   overrides it from here. The template uses !important, so this has to as well. */
/* theme.1.css sets .mobile-buttons{z-index:3!important} and loads later, so the
   class has to be doubled to win. z-index 3 lets page content overlap the bar. */
.mobile-buttons.mobile-buttons{z-index:990!important}
.mobile-buttons ul li a{display:block;text-decoration:none}
.mobile-buttons .button-left,
.mobile-buttons .button-right{
  display:flex!important;align-items:center;justify-content:center;
  width:100%!important;height:70px;padding:0 10px;
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:15px!important;font-weight:800;line-height:1.25;letter-spacing:.02em;
  text-align:center;border-radius:0;cursor:pointer;
}
.mobile-buttons .button-left{
  background-color:#E08A2E!important;border:1px solid #E08A2E!important;color:#12212F!important;
}
.mobile-buttons .button-right{
  background-color:#0E1B2A!important;border:1px solid #0E1B2A!important;color:#FFFFFF!important;
}