/* ==========================================================================
   COMPONENTS — header, footer, page hero, CTA band, FAQ, photo slot,
   and the mobile contact bar.

   Ported from the scoped <style> blocks of the Astro components. Two changes
   were forced by the loss of Astro's per-component scoping:

   1. `.brand` was defined twice with conflicting rules — flex/graphite in the
      header, inline-flex/white in the footer. Both are now scoped to their
      natural container (`.site-header` / `.site-footer`) rather than renamed,
      so the markup still matches the Astro source line for line.

   2. The CTA band's root class was `.cta`, which is also the homepage's own
      lifted red panel — a different component with different rules. The band
      has no distinguishing ancestor, so its classes were renamed to
      `.cta-band*`. This is the only class rename in the port.

   Astro's `:global(...)` wrappers are dropped; without scoping they are
   redundant.
   ========================================================================== */

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--stone-000);
  border-bottom: 1px solid var(--rule);
}

.site-header[data-scrolled] {
  box-shadow: var(--shadow-m);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

/* --- Brand (header) --- */
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--graphite-900);
  flex: none;
}

.site-header .brand__logo {
  height: 2.5rem;
  width: auto;
  flex: none;
}

/* The logo already carries the name, so the text beside it is the descriptor.
   A hairline divides the two so the lockup reads as one mark plus a label,
   not as two competing wordmarks. */
.site-header .brand__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--rule);
  font-size: var(--step--5);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite-600);
  white-space: nowrap;
}

@media (max-width: 24rem) {
  .site-header .brand__logo {
    height: 2.125rem;
  }
  .site-header .brand__text {
    padding-left: 0.5rem;
    letter-spacing: 0.06em;
  }
}

/* --- Navigation --- */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__link {
  display: block;
  padding: 0.5rem 0.6875rem;
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--graphite-700);
  white-space: nowrap;
  transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.nav__link:hover {
  background: var(--stone-100);
  color: var(--graphite-900);
}

.nav__link[aria-current='page'] {
  color: var(--brand-700);
  background: var(--brand-100);
}

.nav__cta {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font-size: var(--step--1);
}

/* --- Mobile toggle --- */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-s);
  padding: 0.5rem 0.75rem;
  min-height: 2.75rem;
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  color: var(--graphite-900);
}

.nav-toggle .nav-toggle__close {
  display: none;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__close {
  display: block;
}

@media (max-width: 63.999rem) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-s) var(--gutter) var(--space-m);
    background: var(--stone-000);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-l);
  }

  .nav[data-open] {
    display: flex;
  }

  .site-header__inner {
    position: relative;
    flex-wrap: wrap;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    padding: 0.875rem 0.75rem;
    font-size: var(--step-0);
    border-bottom: 1px solid var(--stone-100);
    border-radius: 0;
  }

  .nav__cta {
    margin-top: var(--space-s);
    width: 100%;
    min-height: 3.25rem;
    font-size: var(--step-0);
  }
}

/* The desktop CTA is redundant on narrow screens where the floating
   WhatsApp action is always present, but it stays inside the open menu. */
@media (min-width: 64rem) {
  .nav {
    display: flex !important;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  padding-block: var(--space-3xl) var(--space-l);
  /* Clear the floating WhatsApp action on mobile. */
  padding-bottom: calc(var(--space-l) + 4.5rem);
}

@media (min-width: 64rem) {
  .site-footer {
    padding-bottom: var(--space-l);
  }
}

.footer-grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: var(--space-l);
  }
  .footer-brand {
    grid-column: auto;
    padding-right: var(--space-l);
  }
}

/* --- Brand (footer) --- */
.site-footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: #fff;
}

/* The mark reads directly on graphite — its red clears 4:1 and its grey
   5.5:1 — so it needs no white plate behind it. */
.site-footer .brand__logo {
  height: 2.8125rem;
  width: auto;
  flex: none;
}

.site-footer .brand__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  font-size: var(--step--5);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone-200);
  white-space: nowrap;
}

.footer-brand__line {
  margin-top: var(--space-s);
  color: var(--stone-200);
  font-size: var(--step--1);
  line-height: 1.55;
  max-width: 34ch;
}

.footer-brand__area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--stone-200);
}

.footer-brand__area svg {
  flex: none;
  color: var(--brand-300);
}

.footer-cta {
  margin-top: var(--space-m);
}

/* --- Link columns --- */
.footer-col__title {
  font-size: var(--step--3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-stretch: 100%;
  color: var(--brand-300);
  margin-bottom: var(--space-s);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.footer-col a,
.footer-contact span {
  color: var(--stone-200);
  font-size: var(--step--1);
  text-decoration: none;
  line-height: 1.5;
}

.footer-col a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.footer-contact svg {
  flex: none;
  margin-top: 0.125rem;
  color: var(--brand-300);
}

/* --- Base bar --- */
.footer-base {
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
  font-size: var(--step--3);
  color: var(--stone-300);
}

/* ==========================================================================
   PAGE HERO — interior pages
   ========================================================================== */

.page-hero {
  padding-block: var(--space-2xl) var(--space-2xl);
}

.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 var(--space-m);
  font-size: var(--step--2);
  color: var(--stone-300);
}

.crumbs li + li::before {
  content: '/';
  margin-right: 0.5rem;
  color: var(--stone-300);
}

.crumbs a {
  color: var(--stone-200);
  text-decoration: none;
}

.crumbs a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-hero h1 {
  max-width: 20ch;
}

.page-hero .lede {
  margin-top: var(--space-m);
  max-width: 58ch;
}

/* ==========================================================================
   CTA BAND — interior pages. Renamed from `.cta`; see the note at the top.
   ========================================================================== */

.cta-band {
  padding-block: var(--space-3xl);
}

.cta-band__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 60rem) {
  .cta-band__inner {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-2xl);
  }
}

.cta-band__text h2 {
  max-width: 20ch;
}

.cta-band__text .lede {
  margin-top: var(--space-s);
  max-width: 54ch;
}

.cta-band__actions {
  display: grid;
  gap: var(--space-s);
  align-content: start;
}

@media (min-width: 30rem) and (max-width: 59.999rem) {
  .cta-band__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */

.faq {
  border-top: 1px solid var(--rule);
}

.faq__item {
  border-bottom: 1px solid var(--rule);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.35;
  color: var(--graphite-900);
  transition: color 0.15s var(--ease-out);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:hover {
  color: var(--brand-700);
}

.faq__q .faq__chev {
  flex: none;
  margin-top: 0.125rem;
  color: var(--brand-700);
  transition: transform 0.22s var(--ease-out);
}

.faq__item[open] .faq__q .faq__chev {
  transform: rotate(180deg);
}

.faq__a {
  padding-bottom: var(--space-m);
  max-width: var(--measure);
  color: var(--graphite-700);
}

.faq__a p + p {
  margin-top: var(--space-s);
}

@media (prefers-reduced-motion: reduce) {
  .faq__q .faq__chev {
    transition: none;
  }
}

/* ==========================================================================
   PHOTO SLOT — a photograph in a fixed-ratio, cropped frame
   ========================================================================== */

.slot {
  position: relative;
  aspect-ratio: var(--slot-ratio);
  overflow: hidden;
  border-radius: var(--radius-m);
  background-color: var(--stone-200);
}

/* Pinned to the slot's edges rather than sized at height:100%. A percentage
   height here resolves against the grid area and silently falls back to the
   photo's own ratio, which lets the image overflow and be clipped by an
   ancestor instead of cropped by object-fit — object-position then does
   nothing. Absolute inset:0 makes the box exactly the slot, always. */
.slot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--slot-focus, 50% 50%);
  display: block;
}

/* ==========================================================================
   MOBILE CONTACT BAR
   ========================================================================== */

.contact-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: flex;
  gap: 1px;
  background: var(--rule-strong);
  border-top: 1px solid var(--rule-strong);
  box-shadow: 0 -2px 6px rgba(28, 31, 29, 0.08), 0 -10px 28px rgba(28, 31, 29, 0.1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.contact-bar__action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.5rem;
  font-size: var(--step-0);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s var(--ease-out);
}

.contact-bar__action svg {
  flex: none;
}

.contact-bar__action--wa {
  flex: 1.8;
  background: var(--action-600);
  color: #fff;
}

.contact-bar__action--wa:active {
  background: var(--action-700);
}

.contact-bar__action--call {
  background: var(--stone-000);
  color: var(--graphite-900);
}

.contact-bar__action--call:active {
  background: var(--stone-100);
}

/* The bar retires only once the header's own WhatsApp button appears, which
   happens at 64rem. Retiring it at 48rem left tablets and large phones in
   landscape with no persistent action at all. */
@media (min-width: 64rem) {
  .contact-bar {
    display: none;
  }
}