/* ==========================================================================
   COMPONENTS: reusable across homepage, service-detail and blog-detail
   ========================================================================== */

/* ---------- Header ---------- */
.hdr { background: var(--color-primary); transition: background .4s, box-shadow .4s; position: sticky; top: 0; z-index: var(--z-header); }
.hdr-in { height: var(--header-h); transition: height .35s; }
.logo-pill { background: var(--white); border-radius: 14px; padding: 6px 14px; transition: padding .35s, box-shadow .35s, background .35s; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); display: flex; align-items: center; }
.logo-pill img { transition: height .35s; }
.hdr.on { background: rgba(255,255,255,.96); box-shadow: 0 12px 30px -14px rgba(5,31,62,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hdr.on .hdr-in { height: var(--header-h-scrolled); }
.hdr.on .logo-pill { padding: 2px 6px; box-shadow: none; }

.nav-link { font-weight: 600; font-size: 15px; color: var(--color-nav-text); padding: 10px 0; position: relative; transition: color .2s; }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: 2px; height: 2px; width: 0; background: var(--color-accent-light); transition: width .3s; }
.nav-link:hover::after, .nav-link.is-current::after { width: 100%; }
.nav-link:hover { color: #fff; }
.hdr.on .nav-link { color: var(--color-primary); }
.hdr.on .nav-link:hover { color: var(--color-accent); }
.hdr.on .nav-link::after { background: var(--color-accent); }

/* Mobile menu toggle (hidden on desktop) */
.nav-toggle { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); background: transparent; color: #fff; cursor: pointer; place-items: center; transition: background .25s, border-color .25s, color .25s; }
.nav-toggle:hover { background: rgba(255,255,255,.12); }
.hdr.on .nav-toggle { color: var(--color-primary); border-color: var(--color-border); }
.nav-toggle__bars { position: relative; width: 20px; height: 14px; display: block; }
.nav-toggle__bars i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease-out), opacity .2s, top .35s var(--ease-out); }
.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 6px; }
.nav-toggle__bars i:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.mobile-nav { display: none; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); font-weight: 700; cursor: pointer; transition: transform .25s var(--ease-out), background .25s, box-shadow .25s; text-align: center; }
.btn:hover { transform: translateY(-3px); }
.btn-red { background: var(--color-accent); color: #fff; }
.btn-red:hover { background: var(--color-accent-dark); box-shadow: var(--shadow-red); }
.btn-ghost { color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn svg:last-child:not(:first-child) { transition: transform .3s var(--ease-out); }
.btn:hover svg:last-child:not(:first-child) { transform: translateX(4px); }
.btn__text { white-space: nowrap; }

/* ---------- Eyebrow + section headings ---------- */
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.eyebrow--hero { margin-bottom: 28px; }
.eyebrow__bar { display: block; width: 44px; height: 3px; background: var(--color-accent); transform-origin: left center; }
.eyebrow__text { font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent); }
.eyebrow--light .eyebrow__bar { background: var(--color-accent-light); }
.eyebrow--light .eyebrow__text { color: var(--color-accent-soft); }

.h-section { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.05; font-weight: 800; font-style: italic; letter-spacing: -.02em; text-wrap: balance; }
.h-section--md { font-size: clamp(32px, 4vw, 50px); line-height: 1.08; text-wrap: initial; }

/* Word-reveal helpers (injected by animations.js) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .14em .16em .14em; margin: -.06em -.14em -.16em -.14em; }
.wi { display: inline-block; will-change: transform; }

/* ---------- Form controls ---------- */
.field-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; }
.field { width: 100%; height: 50px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 16px; font: 500 16px var(--font-body); color: var(--color-primary); background: var(--white); transition: border-color .2s, box-shadow .2s, background .2s; }
.field[type="date"], .field[type="time"] { padding: 0 14px; }
select.field { padding: 0 12px; }
.field::placeholder { color: var(--color-placeholder); opacity: 1; }
.field:hover { border-color: var(--color-text-muted); }
.field:focus { outline: 3px solid rgba(201,2,2,.35); outline-offset: 0; border-color: var(--color-accent); }
.field[aria-invalid="true"] { border-color: var(--color-accent); background: #FFF6F6; }
.form-status { margin-top: 14px; min-height: 22px; font-size: 14.5px; font-weight: 600; color: var(--color-text-muted); text-align: center; }
.form-status:empty { margin: 0; min-height: 0; }
.form-status.is-error { color: var(--color-accent-dark); }
.form-status.is-ok { color: #11693A; }

.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); font: 600 15px var(--font-body); background: var(--white); color: var(--color-primary); border: 1.5px solid var(--color-border); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--color-primary); }
.chip.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ---------- Cards ---------- */
.card { transition: transform .4s var(--ease-out), box-shadow .4s; }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-card); }
.arrow { transition: transform .3s; display: inline-flex; }
.card:hover .arrow, .post__more:hover .arrow { transform: translateX(6px); }

/* ---------- Footer links ---------- */
.flink { display: inline-block; padding: 7px 0; color: var(--color-nav-text); transition: color .2s, transform .2s; }
.flink:hover { color: #fff; transform: translateX(4px); }
.credit { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-accent-light); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.credit:hover { color: var(--color-accent-soft); text-decoration-color: #fff; }

/* ---------- Floating buttons (WhatsApp + Back to top) ---------- */
.fab { position: fixed; z-index: var(--z-fab); display: grid; place-items: center; border: 0; cursor: pointer; border-radius: 50%; transition: transform .3s var(--ease-out), box-shadow .3s, opacity .35s, visibility .35s; }
.fab:hover { transform: translateY(-4px) scale(1.06); }
.fab.wa { right: 24px; bottom: 24px; width: 60px; height: 60px; background: var(--color-whatsapp); box-shadow: 0 16px 30px -10px rgba(31,168,85,.7); animation: waPulse 2.8s ease-out infinite; }
.fab.top { right: 30px; bottom: 98px; width: 48px; height: 48px; background: var(--color-primary); box-shadow: 0 12px 24px -10px rgba(5,31,62,.7); opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
.fab.top.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.fab.top.is-visible:hover { transform: translateY(-4px) scale(1.06); }

/* Google address suggestions (booking form) */
.ac-wrap { position: relative; }
.ac-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 6px; list-style: none; background: var(--white); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: 0 24px 40px -18px rgba(5,31,62,.35); max-height: 260px; overflow: auto; }
.ac-list[hidden] { display: none; }
.ac-list li { padding: 10px 12px; border-radius: 8px; font: 500 15px/1.35 var(--font-body); color: var(--color-primary); cursor: pointer; }
.ac-list li:hover, .ac-list li.is-active { background: var(--color-bg-alt, #eef2f8); }