/* ===== Ductless Brothers — clover header v2 (tested on live homepage 1181–1920px + 390px) ===== */
/* NOTE: the site already has a rule
   `header, header[style], header ul, header [class*="menu"], header [class*="dropdown"]{background:rgba(15,23,42,.97)!important}`
   That is why the header colors, the swoop and the dropdown buttons kept failing.
   The !important flags below are deliberate and only beat that rule. */

/* --- All widths --- */
header.site-header{background:#1D3A60!important;box-shadow:none}
header.site-header .brand{display:flex;align-items:center;gap:14px;flex:0 0 auto;text-decoration:none}
header.site-header .brand img{display:block;width:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.db-clover{flex-shrink:0;display:block;transition:transform .35s ease}
a:hover>.db-clover,button:hover>.db-clover{transform:rotate(25deg) scale(1.12)}
header.site-header nav.nav>.dropdown{background:transparent!important;padding:0;margin:0;border:0;box-shadow:none}
header.site-header nav.nav>a.nav-link,
header.site-header nav.nav>.dropdown>button.dropdown-toggle{background:linear-gradient(135deg,#5DB6DC,#3192BF)!important;color:#fff;border:0}
header.site-header nav.nav>a.nav-link.cta{background:linear-gradient(135deg,#D85A1C,#B94712)!important}

/* --- Hero buttons: bigger text + clovers (approved mockup, replaces the old 53px-tall rule) ---
   .actions covers the town/regional-page equivalent of .db-hero2__btns.
   On desktop (>1180px) the exact tier — 20px side by side, 18px side by side, 18px stacked,
   or 17px stacked — is decided at runtime by fitHeroButtons() in js/clover-header.js, which
   measures the real rendered row against the column width and the crew photo/map, and toggles
   the db-btns-18 / db-btns-17 / db-btns-stacked classes below. This file only supplies the
   per-tier styling; with none of those classes present (JS hasn't run yet, or the row fits),
   the rules immediately below are the default: 20px, side by side. */
.db-hero2__btns{position:relative;z-index:2}
.db-hero2__btns{gap:14px!important}
.actions{gap:14px!important}
.db-hero2__btns .btn,
.actions .btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;flex:0 0 auto;
  font-size:20px;font-weight:800;line-height:1.1;
  padding:17px 22px 17px 16px;border-radius:16px}
.db-hero2__btns .btn .db-clover,
.actions .btn .db-clover{width:1.5em;height:1.5em;margin:-.15em 0}
.db-hero2__btns .btn-primary,
.actions .btn-primary{background:linear-gradient(135deg,#D85A1C,#B94712)}
.db-hero2__btns .btn-secondary,
.actions .btn-secondary{background:linear-gradient(135deg,#5DB6DC,#3192BF)}

/* --- Tagline + green bubble centered under the two buttons --- */
.db-hero2__cta-group{display:flex;flex-direction:column;align-items:center;gap:16px;
  width:fit-content;max-width:100%}
.db-hero2__cta-group > *{margin-left:0;margin-right:0}
.db-hero2__cta-group > :not(.db-hero2__btns):not(.actions){text-align:center;align-self:center}

/* Wide desktop: widen the hero text column so there's room to try fitting both buttons
   on one row at full size. Whether that actually ends up side by side or stacked is decided
   by the JS measurement above, not by this breakpoint. */
@media (min-width:1441px){
  .db-hero2 .db-hero2__text{max-width:680px}
  .db-maphero .db-mh__text{max-width:680px}
}

/* 18px tier: tried side by side first; combined with .db-btns-stacked below when it has to stack */
.db-hero2__btns.db-btns-18 .btn,
.actions.db-btns-18 .btn{font-size:18px;padding:15px 20px 15px 14px}
.db-hero2__btns.db-btns-18 .btn .db-clover,
.actions.db-btns-18 .btn .db-clover{width:27px;height:27px;margin:-3px 0}

/* 17px tier: last-resort fallback (fixes the 1181px case where even 18px stacked crowds the photo) —
   JS only ever applies this alongside .db-btns-stacked. */
.db-hero2__btns.db-btns-17 .btn,
.actions.db-btns-17 .btn{font-size:17px;padding:14px 18px 14px 13px}
.db-hero2__btns.db-btns-17 .btn .db-clover,
.actions.db-btns-17 .btn .db-clover{width:25px;height:25px;margin:-3px 0}

/* Stacked: equal width (grid, single max-content column), centered */
.db-hero2__btns.db-btns-stacked,
.db-maphero .actions.db-btns-stacked{display:grid!important;grid-template-columns:max-content;justify-items:stretch}

/* Mobile / tablet: stacked and centered (unchanged; this block doesn't depend on the JS
   classes above — fitHeroButtons() leaves those off ≤1180px, so the stacking here is
   forced directly, the same way it already was). */
@media (max-width:1180px){
  .db-hero2__cta-group{width:100%;gap:12px}
  .db-hero2__btns,
  .db-maphero .actions{display:grid!important;grid-template-columns:max-content;justify-items:stretch}
  .db-hero2__btns,
  .actions{gap:12px!important}
  .db-hero2__btns .btn,
  .actions .btn{font-size:18px;padding:15px 20px 15px 14px}
  .db-hero2__btns .btn .db-clover,
  .actions .btn .db-clover{width:27px;height:27px;margin:-3px 0}
}

/* --- Desktop / laptop (site's own breakpoint is 1180px): one row, scaled by clover-header.js --- */
@media (min-width:1181px){
  header.site-header .header-inner{max-width:none;width:100%;margin:0;box-sizing:border-box;
    height:clamp(84px,6.2vw,118px);padding:0 0 0 clamp(12px,1.25vw,24px);
    display:flex;align-items:stretch;justify-content:flex-start;gap:0}
  header.site-header .brand{align-self:center}
  .db-logo-clover{height:clamp(62px,5.55vw,106px)}
  .db-logo-text{height:clamp(58px,5.25vw,100px)}
  header.site-header .nav-toggle{display:none}
  .db-swoop-m{display:contents}

  /* The nav IS the dark side; its left edge is the swoop. It always starts right after the logo. */
  header.site-header nav.nav{position:relative;isolation:isolate;flex:1 1 0;min-width:0;
    margin:0 0 0 clamp(16px,1.6vw,30px);padding:0 clamp(14px,1.6vw,30px) 0 clamp(26px,2.1vw,40px);
    display:flex;align-items:center;justify-content:flex-end;gap:.4em;font-size:20px;
    background:transparent!important;box-shadow:none;border:0}
  header.site-header nav.nav::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;
    background:#10182A;border-left:3px solid #6CC4E6;
    border-radius:clamp(22px,2.1vw,40px) 0 0 clamp(22px,2.1vw,40px) / 50% 0 0 50%;
    box-shadow:-6px 0 18px rgba(108,196,230,.25)}

  /* Top-level buttons: every size in em so the JS can scale the whole row together */
  header.site-header nav.nav>.dropdown{flex:0 0 auto}
  header.site-header nav.nav>a.nav-link,
  header.site-header nav.nav>.dropdown>button.dropdown-toggle{
    display:inline-flex;align-items:center;gap:.3em;flex:0 0 auto;
    width:auto;min-width:0;max-width:none;margin:0;
    font-size:1em;font-weight:800;line-height:1.1;letter-spacing:0;white-space:nowrap;
    padding:1.05em .75em 1.05em .6em;border-radius:.7em;box-shadow:none;animation:none;text-decoration:none;
    transition:filter .2s ease,transform .2s ease}
  header.site-header nav.nav>a.nav-link.cta{padding:1.05em 1em 1.05em .7em}
  header.site-header nav.nav>a.nav-link:hover,
  header.site-header nav.nav>.dropdown>button.dropdown-toggle:hover,
  header.site-header nav.nav>.dropdown>button.dropdown-toggle[aria-expanded="true"]{
    filter:brightness(1.07);transform:translateY(-1px);color:#fff}
  header.site-header nav.nav>a.nav-link:focus-visible,
  header.site-header nav.nav>.dropdown>button.dropdown-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
  header.site-header nav.nav>a.nav-link>.db-clover,
  header.site-header nav.nav>.dropdown>button>.db-clover{width:1.8em;height:1.8em;margin:-.4em 0}
  header.site-header nav.nav>a.nav-link.cta>.db-clover{width:2em;height:2em}
}

/* --- Phones / tablets: hamburger (matches the site's existing 1180px breakpoint) --- */
@media (max-width:1180px){
  header.site-header .header-inner{height:84px;padding:0 0 0 10px;display:flex;align-items:stretch}
  header.site-header .brand{align-self:center;gap:8px}
  .db-logo-clover{height:62px}
  .db-logo-text{height:54px}
  /* dark side of the swoop, behind the hamburger */
  .db-swoop-m{position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;
    margin-left:14px;padding-right:14px;isolation:isolate}
  .db-swoop-m::before{content:"";position:absolute;z-index:-1;inset:0;background:#10182A;
    border-left:3px solid #6CC4E6;border-radius:22px 0 0 22px / 50% 0 0 50%}
  header.site-header .nav-toggle{width:52px;height:52px;border-radius:12px;border:0;
    background:linear-gradient(135deg,#5DB6DC,#3192BF)!important;color:#fff;font-size:26px;line-height:1;
    display:inline-flex;align-items:center;justify-content:center}
  /* open menu panel — keep the site's existing .nav / .nav.open show-hide mechanism */
  header.site-header nav.nav{top:calc(100% + 6px);background:#10182A!important;padding:14px;gap:10px;border-radius:0 0 16px 16px;
    max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain}
  header.site-header nav.nav>a.nav-link,
  header.site-header nav.nav>.dropdown>button.dropdown-toggle{
    display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;justify-content:flex-start;
    font-size:19px;font-weight:800;padding:14px 16px 14px 12px;margin:0;border-radius:14px}
  header.site-header nav.nav>.dropdown{width:100%}
  header.site-header nav.nav .db-clover{width:34px;height:34px;margin:-6px 0}
}
@media (prefers-reduced-motion:reduce){.db-clover,header.site-header nav.nav>*{transition:none}}

/* --- Dropdown menus: light-blue clover tabs (all widths). Doesn't touch display, so the site's open/close still works. --- */
header.site-header .dropdown-menu,
header.site-header .dropdown-menu .nested-menu{background:#10182A!important;border:1px solid rgba(108,196,230,.35)!important;
  border-radius:14px!important;padding:8px!important;box-shadow:0 14px 30px rgba(0,0,0,.45)!important}
header.site-header .dropdown-menu .dropdown-nested{background:transparent!important}
header.site-header .dropdown-menu .nav-link{display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box;
  margin:0!important;padding:10px 14px 10px 10px!important;border:0!important;border-radius:10px!important;
  background:linear-gradient(135deg,#7FD0EC,#4FAED3)!important;color:#fff!important;
  font-size:16px;font-weight:700;line-height:1.15;white-space:nowrap;text-decoration:none;
  text-shadow:0 1px 2px rgba(0,0,0,.25);transition:filter .2s ease,transform .2s ease}
header.site-header .dropdown-menu .nav-link+.nav-link,
header.site-header .dropdown-menu .dropdown-nested+.dropdown-nested{margin-top:6px!important}
header.site-header .dropdown-menu .nav-link:hover,
header.site-header .dropdown-menu .nav-link:focus-visible{filter:brightness(1.06);transform:translateX(2px)}
header.site-header .dropdown-menu .nav-link>.db-clover{width:22px;height:22px;margin:-3px 0}
header.site-header .dropdown-menu .nested-arrow{margin-left:auto}

/* --- Homepage hero: headline on one line + nowrap tail on the subhead --- */
.db-h1-oneline{white-space:nowrap}
.db-nobr{white-space:nowrap}

/* --- Booking-button pulse: glow ring only, no size/position change --- */
@keyframes dbPulseOrange{0%{box-shadow:0 0 0 0 rgba(216,90,28,.65)}70%{box-shadow:0 0 0 12px rgba(216,90,28,0)}100%{box-shadow:0 0 0 0 rgba(216,90,28,0)}}
@keyframes dbPulseBlue{0%{box-shadow:0 0 0 0 rgba(93,182,220,.65)}70%{box-shadow:0 0 0 12px rgba(93,182,220,0)}100%{box-shadow:0 0 0 0 rgba(93,182,220,0)}}
header.site-header nav.nav>a.nav-link.cta,
.db-hero2__btns .btn-primary,
.actions .btn-primary{animation:dbPulseOrange 1.8s ease-out infinite!important}
.db-hero2__btns .btn-secondary,
.actions .btn-secondary{animation:dbPulseBlue 1.8s ease-out .9s infinite!important}
@media (prefers-reduced-motion:reduce){
  header.site-header nav.nav>a.nav-link.cta,.db-hero2__btns .btn,.actions .btn{animation:none!important}
}