/*
 * Design-system header (D-020). Needs tokens.css + components.css.
 * Two sizes via data-size on .cy-hdr:
 *   64: desktop 64px, mobile 56px, logo 34/28px tall, Login button md (40px)
 *   56: desktop 56px, mobile 52px, logo 30/26px tall, Login button sm (32px)
 * Everything is scoped to .cy-hdr / .cy-drawer, and the old global `header {}` rules in
 * header.css are overridden here, so nothing leaks either way.
 */
.cy-hdr {
  --cy-hdr-h: 64px;
  --cy-hdr-h-mobile: 56px;
  --cy-hdr-logo: 34px;
  --cy-hdr-logo-mobile: 28px;
  --cy-hdr-gap: var(--cy-space-1);

  position: sticky;
  top: 0;
  z-index: 1030;
  max-width: none;
  overflow: visible;
  /* Glass (owner, 17 Oct): Figma dynamic-lighten/300 (white 25%) over a "Blur BG Light 30"
     background blur. Old browsers without backdrop-filter get near-solid white instead, so the
     menu text never sits on unblurred content. */
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--cy-darken-100);
  box-shadow: none;
  font-family: var(--cy-font);
  transition: box-shadow var(--cy-duration) var(--cy-ease);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cy-hdr {
    background: var(--cy-lighten-300);
    -webkit-backdrop-filter: var(--cy-blur-light) saturate(160%);
    backdrop-filter: var(--cy-blur-light) saturate(160%);
  }
}
.cy-hdr[data-size="56"] {
  --cy-hdr-h: 56px;
  --cy-hdr-h-mobile: 52px;
  --cy-hdr-logo: 30px;
  --cy-hdr-logo-mobile: 26px;
}
.cy-hdr.is-scrolled { box-shadow: var(--cy-elevation-3); border-bottom-color: transparent; }

.cy-hdr__bar {
  display: flex;
  align-items: center;
  gap: var(--cy-space-6);
  height: var(--cy-hdr-h);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--cy-space-8);
}

/* D-075 (owner, 26 Oct): the menu is centred on the page, not between the logo and the buttons (with "Book a free
   call" the buttons are wider than the logo, which pulled the menu left). Equal side columns centre it whenever
   they fit (1280px and up); on narrower screens each side keeps its own width and the menu sits as near the
   centre as it can. Below 992px the menu is in the drawer and the bar stays flex. */
@media (min-width: 992px) {
  .cy-hdr__bar { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  .cy-hdr__logo { justify-self: start; }
  .cy-hdr__actions { justify-self: end; }
}

/* logo */
.cy-hdr__logo { display: inline-flex; align-items: center; flex: none; }
.cy-hdr__logo img { display: block; height: var(--cy-hdr-logo); width: auto; max-width: none; margin: 0; }

/* nav */
.cy-hdr__nav { flex: 1; display: flex; justify-content: center; }
.cy-hdr__menu { display: flex; align-items: center; gap: var(--cy-hdr-gap); list-style: none; margin: 0; padding: 0; }
.cy-hdr__item { position: relative; }
.cy-hdr__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 var(--cy-space-3);
  border: 0;
  border-radius: var(--cy-radius-sm);
  background: transparent;
  color: var(--cy-text-body);
  font-family: var(--cy-font);
  font-size: var(--cy-fs-md);
  font-weight: var(--cy-weight-label);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--cy-duration) var(--cy-ease), color var(--cy-duration) var(--cy-ease);
}
.cy-hdr__link:hover,
.cy-hdr__item.is-open > .cy-hdr__link { background: var(--cy-neutral-100); color: var(--cy-text-primary); text-decoration: none; }
.cy-hdr__link.is-current { color: var(--cy-brand-700); }
.cy-hdr__link:focus { outline: none; }
.cy-hdr__link:focus-visible { outline: 2px solid var(--cy-neutral-900); outline-offset: 2px; }
.cy-hdr__chev { width: 16px; height: 16px; color: var(--cy-primary); transition: transform var(--cy-duration) var(--cy-ease); }
.cy-hdr__item.is-open .cy-hdr__chev,
[aria-expanded="true"] > .cy-hdr__chev { transform: rotate(180deg); }

/* dropdown panel */
.cy-hdr__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 264px;
  padding: var(--cy-space-2);
  background: var(--cy-surface-primary);
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  box-shadow: var(--cy-elevation-6);
  z-index: 10;
  animation: cy-hdr-in 140ms var(--cy-ease);
}
.cy-hdr__panel[hidden] { display: none; }
/* invisible bridge so the menu doesn't close while the mouse crosses the 8px gap */
.cy-hdr__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.cy-hdr__panel--mega { display: grid; grid-template-columns: repeat(2, max-content); width: max-content; gap: var(--cy-space-2) var(--cy-space-4); }
.cy-hdr__panel--mega[hidden] { display: none; }
.cy-hdr__panel--end { left: auto; right: 0; transform: none; }
@keyframes cy-hdr-in { from { opacity: 0; margin-top: -4px; } to { opacity: 1; margin-top: 0; } }

.cy-hdr__group ul { list-style: none; margin: 0; padding: 0; }
.cy-hdr__group-title {
  margin: 0;
  padding: var(--cy-space-2) var(--cy-space-3) var(--cy-space-1);
  font-size: var(--cy-fs-2xs);
  line-height: var(--cy-lh-2xs);
  font-weight: var(--cy-weight-title);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cy-text-secondary);
}
.cy-hdr__option {
  display: flex;
  align-items: center;
  gap: var(--cy-space-3);
  padding: 6px var(--cy-space-3) 6px 6px;
  border-radius: var(--cy-radius-sm);
  color: var(--cy-text-primary);
  font-size: var(--cy-fs-md);
  line-height: var(--cy-lh-md);
  font-weight: var(--cy-weight-label);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--cy-duration) var(--cy-ease);
}
.cy-hdr__option:hover,
.cy-hdr__option:focus-visible { background: var(--cy-neutral-100); color: var(--cy-text-primary); text-decoration: none; outline: none; }
.cy-hdr__option.is-current { background: var(--cy-brand-50); }
.cy-hdr__option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--cy-radius-sm);
  background: var(--cy-brand-50);
  color: var(--cy-brand-600);
  transition: background-color var(--cy-duration) var(--cy-ease), color var(--cy-duration) var(--cy-ease);
}
.cy-hdr__option-icon .cy-icon { width: 18px; height: 18px; }
.cy-hdr__option:hover .cy-hdr__option-icon { background: var(--cy-brand-600); color: var(--cy-neutral-0); }

/* actions */
.cy-hdr__actions { display: flex; align-items: center; gap: var(--cy-space-2); flex: none; }
.cy-hdr .cy-hdr__cta { --_h: var(--cy-btn-md-h); --_px: var(--cy-btn-md-px); --_fs: var(--cy-btn-md-fs); --_r: var(--cy-btn-md-r); }
.cy-hdr[data-size="56"] .cy-hdr__cta { --_h: var(--cy-btn-sm-h); --_px: var(--cy-btn-sm-px); --_fs: var(--cy-btn-sm-fs); --_r: var(--cy-btn-sm-r); --_b: 2px; }
.cy-hdr__account .cy-hdr__cta { max-width: 220px; }
.cy-hdr__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: var(--cy-radius-sm);
  background: transparent;
  color: var(--cy-text-primary);
  cursor: pointer;
}
.cy-hdr__burger .cy-icon { width: 24px; height: 24px; }
.cy-hdr__burger:hover { background: var(--cy-neutral-100); }
.cy-hdr__burger:focus { outline: none; }
.cy-hdr__burger:focus-visible { outline: 2px solid var(--cy-neutral-900); outline-offset: 2px; }

/* below 1200px: tighter menu */
@media (max-width: 1199.98px) {
  .cy-hdr__bar { gap: var(--cy-space-4); padding: 0 var(--cy-space-6); }
  .cy-hdr__link { padding: 0 var(--cy-space-2); }
}

/* below 992px: logo left, menu button right; nav and Login move into the drawer */
@media (max-width: 991.98px) {
  .cy-hdr__bar { height: var(--cy-hdr-h-mobile); padding: 0 var(--cy-space-4); }
  .cy-hdr__logo img { height: var(--cy-hdr-logo-mobile); }
  .cy-hdr__nav,
  .cy-hdr__actions > .cy-btn,
  .cy-hdr__account { display: none; }
  .cy-hdr__actions { margin-left: auto; }
  .cy-hdr__burger { display: inline-flex; }
}

/* ---------- Mobile drawer ---------- */
.cy-no-scroll, .cy-no-scroll body { overflow: hidden; }
.cy-drawer { position: fixed; inset: 0; z-index: 1040; font-family: var(--cy-font); }
.cy-drawer[hidden] { display: none; }
.cy-drawer__overlay { position: absolute; inset: 0; background: var(--cy-dimmer); opacity: 0; transition: opacity 200ms var(--cy-ease); }
.cy-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--cy-surface-primary);
  box-shadow: var(--cy-elevation-8);
  transform: translateX(100%);
  transition: transform 200ms var(--cy-ease);
}
.cy-drawer.is-open .cy-drawer__overlay { opacity: 1; }
.cy-drawer.is-open .cy-drawer__panel { transform: none; }
.cy-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--cy-space-4);
  border-bottom: 1px solid var(--cy-border);
  flex: none;
}
.cy-drawer__top .cy-hdr__logo img { height: 28px; }
.cy-drawer__top .cy-hdr__burger { display: inline-flex; }
.cy-drawer__body { flex: 1; overflow-y: auto; padding: var(--cy-space-2) var(--cy-space-2) var(--cy-space-4); overscroll-behavior: contain; }
.cy-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--cy-space-3);
  border: 0;
  border-radius: var(--cy-radius-sm);
  background: transparent;
  color: var(--cy-text-primary);
  font-family: var(--cy-font);
  font-size: var(--cy-fs-lg);
  font-weight: var(--cy-weight-title);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.cy-drawer__toggle > span { display: inline-flex; align-items: center; gap: var(--cy-space-2); }
.cy-drawer__toggle:hover { background: var(--cy-neutral-100); color: var(--cy-text-primary); text-decoration: none; }
.cy-drawer__toggle.is-current { color: var(--cy-brand-700); }
.cy-drawer__toggle:focus { outline: none; }
.cy-drawer__toggle:focus-visible { outline: 2px solid var(--cy-neutral-900); outline-offset: -2px; }
.cy-drawer__list { list-style: none; margin: 0 0 var(--cy-space-2); padding: 0 0 0 var(--cy-space-1); }
.cy-drawer__list[hidden] { display: none; }
.cy-drawer__list .cy-hdr__option { min-height: 44px; white-space: normal; }
.cy-drawer__foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-3);
  padding: var(--cy-space-4);
  border-top: 1px solid var(--cy-border);
  background: var(--cy-surface-secondary);
}
.cy-drawer__contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cy-space-2); }
.cy-drawer__contact .cy-btn { width: 100%; padding: 0 var(--cy-space-2); }

@media (prefers-reduced-motion: reduce) {
  .cy-hdr__panel { animation: none; }
  .cy-drawer__overlay,
  .cy-drawer__panel,
  .cy-hdr__chev { transition: none; }
}

/* ---------- D-032: over a dark section (footer, photo heroes) ----------
   The 25% white glass can't carry dark text over black, so the header switches to a dark glass with the white
   footer logo and light menu text. The header script sets .is-on-dark from what is underneath it. */
.cy-hdr__logo .cy-hdr__logo-dark-bg { display: none; }
.cy-hdr.is-on-dark { background: rgba(18, 18, 18, 0.55); border-bottom-color: rgba(255, 255, 255, 0.08); }
.cy-hdr.is-on-dark .cy-hdr__logo-light-bg { display: none; }
.cy-hdr.is-on-dark .cy-hdr__logo-dark-bg { display: block; }
.cy-hdr.is-on-dark .cy-hdr__link { color: rgba(255, 255, 255, 0.92); }
.cy-hdr.is-on-dark .cy-hdr__link.is-current { color: var(--cy-brand-400); }
.cy-hdr.is-on-dark .cy-hdr__link:hover,
.cy-hdr.is-on-dark .cy-hdr__item.is-open > .cy-hdr__link { background: rgba(255, 255, 255, 0.12); color: var(--cy-neutral-0); }
.cy-hdr.is-on-dark .cy-hdr__chev { color: var(--cy-brand-400); }
.cy-hdr.is-on-dark .cy-hdr__burger { color: var(--cy-neutral-0); }
.cy-hdr.is-on-dark .cy-hdr__burger:hover { background: rgba(255, 255, 255, 0.12); }
@media (prefers-reduced-motion: no-preference) {
  .cy-hdr { transition: box-shadow var(--cy-duration) var(--cy-ease), background-color var(--cy-duration) var(--cy-ease); }
}

/* ---------- D-088 (owner, 29 Oct): floating header ----------
   The bar floats: a rounded, glass pill inset from the page edges, instead of a full-width strip. Nothing inside it
   changed (logo, centred menu, Book a free call, Login, dropdowns, drawer). The outer <header> is now only a
   transparent sticky holder; its padding is the gap around the pill, and clicks there reach the page underneath.
   "header.cy-hdr" (element + class) wins over the earlier .cy-hdr rules, including the @supports glass block. */
header.cy-hdr {
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
}
header.cy-hdr .cy-hdr__bar {
  pointer-events: auto;
  max-width: 1280px;
  padding: 0 var(--cy-space-6);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  /* outline 4% black (was 10%, owner: too dark) */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 24px -14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: box-shadow 250ms var(--cy-ease), background-color 250ms var(--cy-ease);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header.cy-hdr .cy-hdr__bar {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: var(--cy-blur-light) saturate(160%);
    backdrop-filter: var(--cy-blur-light) saturate(160%);
  }
}
header.cy-hdr.is-scrolled { box-shadow: none; }
header.cy-hdr.is-scrolled .cy-hdr__bar { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 14px 32px -12px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
header.cy-hdr.is-on-dark { background: transparent; }
header.cy-hdr.is-on-dark .cy-hdr__bar { background: rgba(18, 18, 18, 0.62); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 14px 32px -12px rgba(0, 0, 0, 0.5); }
@media (max-width: 991.98px) {
  header.cy-hdr { padding: 8px max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px)); }
  header.cy-hdr .cy-hdr__bar { padding: 0 var(--cy-space-2) 0 var(--cy-space-4); border-radius: 16px; }
}

/* D-111: compliance strip above the header (home page SEO brief, item 1); it scrolls away, the header stays */
.cy-compliance { position: relative; z-index: 1031; padding: 6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px)); background: #f6f2f0; border-bottom: 1px solid rgba(21, 17, 15, .06); text-align: center; font: 400 11.5px/16px var(--cy-font, Inter, sans-serif); color: var(--cy-neutral-600, #5e5651); }
@media (max-width: 767px) { .cy-compliance { font-size: 10.5px; line-height: 14px; padding-top: 5px; padding-bottom: 5px; } }

/* D-115: the compliance line now sits under the footer (footer.blade.php), on the footer's dark background */
.cy-compliance--foot { margin: 18px 0 0; padding: 14px 0 0; background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .1); text-align: center; color: rgba(255, 255, 255, .62); }

/* ---------- D-239 (owner, 5 Nov: "when the page goes above the nav bar we can see the content, can you blur that"; all pages) ----------
   Once the page is scrolled, a soft frosted strip sits behind the floating pill: it blurs whatever scrolls behind and above
   the nav and fades out below the pill (a mask, so there is no hard band edge; OLD D-205: no band at all, content showed
   clearly around the pill). The pill itself is a little more frosted, so text no longer reads through it. Dark pages get a
   dark tint. Pointer events pass through, so nothing under it is blocked. */
header.cy-hdr::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: -22px; pointer-events: none;
  opacity: 0; transition: opacity 250ms var(--cy-ease, ease);
  background: rgba(253, 251, 250, .38);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
}
header.cy-hdr.is-scrolled::before { opacity: 1; }
header.cy-hdr.is-on-dark::before { background: rgba(18, 18, 18, .3); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header.cy-hdr.is-scrolled .cy-hdr__bar { background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: var(--cy-blur-light) saturate(170%); backdrop-filter: var(--cy-blur-light) saturate(170%); }
  header.cy-hdr.is-scrolled.is-on-dark .cy-hdr__bar { background: rgba(18, 18, 18, .7); }
}