/* ==========================================================================
   BRELLON — Site chrome: header, navigation, footer, mobile action bar.
   Shared by every page. Self-contained: uses its own --ch-* tokens so it
   never changes the page stylesheets it sits alongside.
   ========================================================================== */

.header, .footer, .mobile-bar {
  --ch-white: #fff;
  --ch-bg: #fbfaf7;
  --ch-tint: #f5f1ea;
  --ch-stone: #ece6db;
  --ch-line: #e2dbcf;
  --ch-grey: #8a847c;
  --ch-text-2: #5f5a54;
  --ch-text: #2e2c29;
  --ch-charcoal: #1f1e1c;
  --ch-bronze: #8e6e44;
  --ch-bronze-dark: #775b37;
  --ch-bronze-text: #7d6039;
  --ch-serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  --ch-sans: "Jost", "Jost Fallback", Arial, Helvetica, sans-serif;
  /* chrome type unit: the inner-page root size (14.4px, 15px on phones) on every page, home included */
  --ch-rem: 14.4px;
  --ch-gutter: clamp(calc(1.25 * var(--ch-rem)), 5vw, calc(4.5 * var(--ch-rem)));   /* = main.css --gutter */
  --ch-ease: cubic-bezier(.2, .7, .2, 1);
  --ch-shadow: 0 1px 2px rgba(31, 30, 28, .05), 0 14px 32px -14px rgba(31, 30, 28, .22);
  font-family: var(--ch-sans);
}
@media (max-width: 700px) { .header, .footer, .mobile-bar { --ch-rem: 15px; } }
.header *, .footer *, .mobile-bar * { box-sizing: border-box; }
.header ul, .footer ul { list-style: none; margin: 0; padding: 0; }
.header a, .footer a, .mobile-bar a { text-decoration: none; color: inherit; }
.header .icon, .footer .icon, .mobile-bar .icon { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- logo (roof + door mark) ---------- */
.logo { display: flex; align-items: center; gap: calc(.8 * var(--ch-rem)); flex: none; }
.logo__mark { width: 60px; height: 40px; flex: none; }
.logo__text { display: flex; flex-direction: column; }
.logo__name { font-family: var(--ch-serif); font-size: calc(1.42 * var(--ch-rem)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ch-charcoal); line-height: 1; }
.logo__tag { font-family: var(--ch-sans); font-size: calc(.6 * var(--ch-rem)); font-weight: 500; letter-spacing: .19em; text-transform: uppercase; color: var(--ch-text-2); margin-top: calc(.38 * var(--ch-rem)); line-height: 1; }

/* ---------- header ---------- */
.header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--ch-line); color: var(--ch-text); transition: box-shadow .25s; }
.header.is-scrolled { box-shadow: 0 6px 24px -14px rgba(31, 30, 28, .35); }
/* 1200px content column, the same as page content (.container / home --content) so the logo lines up with headings */
.header__inner { max-width: calc(1200px + 2 * var(--ch-gutter)); margin: 0 auto; min-height: 72px; padding: 0 var(--ch-gutter); display: flex; align-items: center; gap: calc(1.5 * var(--ch-rem)); }
.header__right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.header__contact, .header .header__cta { display: none; }

.hbtn { display: inline-flex; align-items: center; justify-content: center; gap: calc(.6 * var(--ch-rem)); min-height: 46px; padding: calc(.7 * var(--ch-rem)) calc(1.3 * var(--ch-rem)); border: 1px solid transparent; border-radius: 1px; font-family: var(--ch-sans); font-size: calc(.76 * var(--ch-rem)); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; transition: background-color .2s, color .2s; }
.hbtn .icon { transition: transform .25s var(--ch-ease); }
.hbtn:hover .icon { transform: translateX(3px); }
.hbtn--bronze { background: var(--ch-bronze); color: #fff !important; }
.hbtn--bronze:hover { background: var(--ch-bronze-dark); }
.hbtn--outline { background: #fff; border-color: var(--ch-charcoal); color: var(--ch-charcoal); }
.hbtn--outline:hover { background: var(--ch-charcoal); color: #fff; }

.burger { margin-left: auto; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ch-line); background: #fff; color: var(--ch-charcoal); cursor: pointer; }
.burger .icon { width: 22px; height: 22px; }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }

/* mobile drawer */
.nav { position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: var(--ch-bg); padding: calc(1 * var(--ch-rem)) var(--ch-gutter) calc(6 * var(--ch-rem)); overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .3s var(--ch-ease), visibility 0s .3s; }
.nav.is-open { transform: none; visibility: visible; transition: transform .3s var(--ch-ease); }
.nav__list > li { border-bottom: 1px solid var(--ch-line); }
.nav__list > li > a, .nav__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: calc(.95 * var(--ch-rem)) 0; background: none; border: 0; font: inherit; font-size: calc(1.05 * var(--ch-rem)); color: var(--ch-text); text-align: left; cursor: pointer; }
.nav__toggle .icon { transition: transform .2s; }
.nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav__menu { display: none; padding: 0 0 calc(.8 * var(--ch-rem)) calc(.8 * var(--ch-rem)) !important; }
.nav__toggle[aria-expanded="true"] + .nav__menu { display: block; }
.nav__menu a { display: block; padding: calc(.45 * var(--ch-rem)) 0; color: var(--ch-text-2); }
.nav__all a { color: var(--ch-bronze-text); font-weight: 500; }
.nav__mobile-cta { display: grid; gap: calc(.7 * var(--ch-rem)); margin-top: calc(1.5 * var(--ch-rem)); }
body.nav-open { overflow: hidden; }

@media (min-width: 1200px) {
  html:not(.nav-compact) .burger, html:not(.nav-compact) .nav__mobile-cta { display: none; }
  html:not(.nav-compact) .header__inner { min-height: 88px; }
  html:not(.nav-compact) .logo__mark { width: 68px; height: 45px; }
  html:not(.nav-compact) .logo__name { font-size: calc(1.55 * var(--ch-rem)); }
  html:not(.nav-compact) .header__contact { display: flex; gap: calc(1.8 * var(--ch-rem)); font-size: calc(.8 * var(--ch-rem)); color: var(--ch-text-2); padding-top: calc(.4 * var(--ch-rem)); }
  html:not(.nav-compact) .header__contact a { display: inline-flex; align-items: center; gap: calc(.45 * var(--ch-rem)); }
  html:not(.nav-compact) .header__contact .icon { color: var(--ch-bronze); }
  html:not(.nav-compact) .header__contact a:hover { color: var(--ch-charcoal); }
  html:not(.nav-compact) .header .header__cta { display: inline-flex; align-self: center; }

  html:not(.nav-compact) .nav { position: static; transform: none; visibility: visible; background: none; padding: 0; overflow: visible; }
  html:not(.nav-compact) .nav__list { display: flex; gap: clamp(calc(.9 * var(--ch-rem)), 1.6vw, calc(1.5 * var(--ch-rem))); }
  html:not(.nav-compact) .nav__list > li { border: 0; position: relative; }
  html:not(.nav-compact) .nav__list > li > a, html:not(.nav-compact) .nav__toggle { padding: calc(.9 * var(--ch-rem)) 0 calc(1 * var(--ch-rem)); font-size: calc(.84 * var(--ch-rem)); width: auto; gap: calc(.25 * var(--ch-rem)); }
  html:not(.nav-compact) .nav__list > li > a { position: relative; }
  html:not(.nav-compact) .nav__list > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(.6 * var(--ch-rem)); height: 2px; background: var(--ch-bronze); transform: scaleX(0); transition: transform .25s var(--ch-ease); }
  html:not(.nav-compact) .nav__list > li > a:hover::after, html:not(.nav-compact) .nav__list > li > a[aria-current]::after { transform: scaleX(1); }
  html:not(.nav-compact) .nav__toggle[aria-current] { color: var(--ch-bronze-text); }
  html:not(.nav-compact) .nav__toggle .icon { width: .85em; }
  html:not(.nav-compact) .nav__menu { position: absolute; top: 100%; left: calc(-1 * var(--ch-rem)); min-width: 250px; padding: calc(.7 * var(--ch-rem)) 0 !important; background: #fff; border: 1px solid var(--ch-line); box-shadow: var(--ch-shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility 0s .18s; display: block; }
  html:not(.nav-compact) .nav__drop:hover .nav__menu, html:not(.nav-compact) .nav__drop:focus-within .nav__menu, html:not(.nav-compact) .nav__toggle[aria-expanded="true"] + .nav__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
  html:not(.nav-compact) .nav__menu a { padding: calc(.45 * var(--ch-rem)) calc(1.1 * var(--ch-rem)); font-size: calc(.88 * var(--ch-rem)); }
  html:not(.nav-compact) .nav__menu a:hover { background: var(--ch-tint); color: var(--ch-charcoal); }
}
/* Desktop bar. Every rule is scoped to html:not(.nav-compact): when the menu doesn't fit on
   one line (long labels or extra items added in the admin), main.js adds .nav-compact to <html>
   and the header falls back to the menu button + drawer, keeping the Request a Quote button. */
@media (min-width: 1200px) {
  html:not(.nav-compact) .nav__list > li > a, html:not(.nav-compact) .nav__toggle, html:not(.nav-compact) .header .header__cta { white-space: nowrap; }
  html.nav-compact .header .header__cta { display: inline-flex; align-self: center; white-space: nowrap; }
  html.nav-compact .burger { margin-left: 0; }
  /* step before compact: a long menu may use the full screen width instead of the 1200px column */
  html.nav-wide .header__inner { max-width: none; }
}
/* small desktops: tighten the bar so logo, nav and CTA fit on one line at both the 16px (home) and 14.4px (inner page) base size */
@media (min-width: 1200px) and (max-width: 1365px) {
  html:not(.nav-compact) .header__inner { gap: calc(1 * var(--ch-rem)); }
  html:not(.nav-compact) .logo { gap: calc(.6 * var(--ch-rem)); }
  html:not(.nav-compact) .logo__mark { width: 56px; height: 37px; }
  html:not(.nav-compact) .logo__name { font-size: calc(1.3 * var(--ch-rem)); }
  html:not(.nav-compact) .logo__tag { font-size: calc(.54 * var(--ch-rem)); letter-spacing: .14em; }
  html:not(.nav-compact) .nav__list { gap: calc(.9 * var(--ch-rem)); }
  html:not(.nav-compact) .nav__list > li > a, html:not(.nav-compact) .nav__toggle { font-size: calc(.8 * var(--ch-rem)); }
  html:not(.nav-compact) .header__contact { gap: calc(1.2 * var(--ch-rem)); }
  html:not(.nav-compact) .header .header__cta { padding-inline: calc(1 * var(--ch-rem)); }
}
/* narrowest desktops: a little tighter again so the default menu still fits on one line */
@media (min-width: 1200px) and (max-width: 1279px) {
  html:not(.nav-compact) .header__inner { gap: calc(.8 * var(--ch-rem)); }
  html:not(.nav-compact) .nav__list { gap: calc(.72 * var(--ch-rem)); }
  html:not(.nav-compact) .logo__name { font-size: calc(1.2 * var(--ch-rem)); }
  html:not(.nav-compact) .logo__mark { width: 50px; height: 33px; }
  html:not(.nav-compact) .nav__list > li > a, html:not(.nav-compact) .nav__toggle { font-size: calc(.78 * var(--ch-rem)); }
  html:not(.nav-compact) .header .header__cta { padding-inline: calc(.8 * var(--ch-rem)); }
}
/* phones: the logo scales with the screen so the menu button always keeps its full 46px */
.logo { min-width: 0; }
.burger { flex: none; }
@media (max-width: 599px) {
  .header__inner { gap: 12px; }
  .logo { gap: clamp(8px, 2.4vw, 12px); }
  .logo__mark { width: clamp(40px, 11.5vw, 60px); height: auto; aspect-ratio: 3 / 2; }
  .logo__name { font-size: clamp(14px, 4.3vw, 21px); letter-spacing: .04em; }
  .logo__tag { font-size: clamp(6.8px, 2.05vw, 9.5px); letter-spacing: .12em; margin-top: .35em; }
}

/* ---------- footer (light stone, no dark band) ---------- */
.footer { background: var(--ch-stone); color: var(--ch-text-2); border-top: 1px solid var(--ch-line); padding: calc(3.5 * var(--ch-rem)) var(--ch-gutter) calc(6 * var(--ch-rem)); font-size: calc(.9 * var(--ch-rem)); line-height: 1.6; }
.footer__grid { max-width: 1200px; margin: 0 auto; display: grid; gap: calc(2.2 * var(--ch-rem)); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.footer__brand { grid-column: 1 / -1; display: grid; gap: calc(1 * var(--ch-rem)); max-width: 400px; }
.footer__brand p { margin: 0; }
.footer__contact a { color: var(--ch-charcoal); font-weight: 500; }
.footer__h { font-family: var(--ch-sans); font-size: calc(.72 * var(--ch-rem)); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ch-bronze-text); margin: 0 0 calc(.9 * var(--ch-rem)); }
.footer ul { display: grid; gap: calc(.45 * var(--ch-rem)); }
.footer a:hover { color: var(--ch-bronze-text); }
.footer__base { max-width: 1200px; margin: calc(2.5 * var(--ch-rem)) auto 0; padding-top: calc(1.4 * var(--ch-rem)); border-top: 1px solid #d6cdbd; display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(.6 * var(--ch-rem)); font-size: calc(.78 * var(--ch-rem)); }
.footer__base p { margin: 0; }
@media (min-width: 900px) {
  .footer { padding-bottom: calc(2 * var(--ch-rem)); }
  .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); }
  .footer__brand { grid-column: auto; }
}

/* ---------- mobile sticky action bar ---------- */
.mobile-bar { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.6fr; background: #fff; border-top: 1px solid var(--ch-line); box-shadow: 0 -8px 24px -16px rgba(31, 30, 28, .4); padding-bottom: env(safe-area-inset-bottom); }
.mobile-bar a { display: flex; align-items: center; justify-content: center; gap: calc(.5 * var(--ch-rem)); min-height: 56px; font-size: calc(.8 * var(--ch-rem)); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ch-charcoal); }
.mobile-bar .mobile-bar__quote { background: var(--ch-bronze); color: #fff; }
body.nav-open .mobile-bar { display: none; }
@media (min-width: 900px) { .mobile-bar { display: none; } }

/* ---------- floating WhatsApp button (sits above the mobile bar on phones) ---------- */
/* phones: 52px, on the 16px page gutter, 14px above the 56px action bar */
.wa-float { position: fixed; z-index: 95; right: max(16px, env(safe-area-inset-right)); bottom: calc(56px + 14px + env(safe-area-inset-bottom)); width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 8px 22px -8px rgba(31, 30, 28, .45); -webkit-tap-highlight-color: transparent; transition: background-color .2s; animation: wa-beat 1s ease-in-out infinite; }
/* highlight: a green ring pulses out once every second */
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1; animation: wa-ring 1s ease-out infinite; pointer-events: none; }
.wa-float:hover { background: #1ebe5b; }
.wa-float:focus-visible { outline: 3px solid #1f1e1c; outline-offset: 3px; }
.wa-float .icon { width: 28px; height: 28px; }
@keyframes wa-ring { from { transform: scale(1); opacity: .6; } to { transform: scale(1.7); opacity: 0; } }
@keyframes wa-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .wa-float, .wa-float::before { animation: none; } }
body.nav-open .wa-float { display: none; }
/* keep the footer's last line (Privacy · Terms …) clear of the button on phones */
@media (max-width: 899px) { body:has(.wa-float) .footer { padding-bottom: calc(56px + 52px + 40px + env(safe-area-inset-bottom)); } }
@media (min-width: 900px) { .wa-float { right: 28px; bottom: 28px; width: 58px; height: 58px; } .wa-float .icon { width: 30px; height: 30px; } }

@media print { .header, .footer, .mobile-bar, .wa-float { display: none !important; } }

/* ---------- server-side form errors (Laravel) ---------- */
.form-alert { padding: 1rem 1.25rem; background: #fbf1ee; border: 1px solid #e6c4bb; border-left: 3px solid #a23b2a; color: #5c2117; font-size: .9rem; line-height: 1.5; }
.form-alert__title { font-weight: 500; margin: 0 0 .35rem; }
.form-alert ul { margin: 0; padding-left: 1.1rem; }
button[aria-busy="true"] { opacity: .7; cursor: progress; }