/* Site layer: page-level patterns on top of Salt. Tokens only. */

.skip { position: absolute; left: -999px; top: var(--space-2); z-index: 100; background: var(--color-surface); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.skip:focus { left: var(--space-4); }

/* Mobile menu */
.menu-toggle { display: none; justify-self: end; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-5); font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-heading); cursor: pointer; }
.mobile-menu { border-top: 1px solid var(--color-border-soft); background: var(--color-background); }
.mobile-menu ul { list-style: none; margin: 0; padding: var(--space-4) var(--gutter) var(--space-6); display: grid; gap: var(--space-1); }
.mobile-menu a { display: block; padding: var(--space-3) 0; color: var(--color-heading); text-decoration: none; font-size: var(--text-lg); font-family: var(--font-display); font-weight: 300; border-bottom: 1px solid var(--color-border-soft); }
@media (max-width: 960px) { .menu-toggle { display: inline-flex; } .nav { grid-template-columns: 1fr auto auto; } }
@media (max-width: 640px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__end { grid-column: 1 / -1; grid-row: 2; }
  .menu-toggle { grid-column: 2; grid-row: 1; }
}

/* Photo placeholders: dashed sea-mist box with a label of the photo needed */
.ph { display: grid; place-items: center; text-align: center; padding: var(--space-6); border: 1.5px dashed var(--color-primary-light); border-radius: var(--radius); background: var(--color-surface-mist); color: var(--color-primary-mid); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; min-height: 12rem; width: 100%; height: 100%; }
.ph::before { content: "PHOTO · "; opacity: .7; }
.ph--sq { aspect-ratio: 1; min-height: 0; }
.ph--wide { aspect-ratio: 16 / 9; min-height: 0; }
.ph--tall { aspect-ratio: 4 / 5; min-height: 0; }
.ph--arch { border-radius: var(--radius-arch); aspect-ratio: 3 / 4; min-height: 0; }
.card__media .ph { border-radius: 0; border-width: 0 0 1.5px; }

/* Page hero (inner pages): sky wash, light heading, optional photo */
.page-hero { background: linear-gradient(180deg, var(--sky-top), var(--color-background)); padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem); }
.page-hero .lead { margin-top: var(--space-2); }
.crumbs { font-size: var(--text-xs); color: var(--color-copy-muted); margin-bottom: var(--space-6); }
.crumbs a { color: var(--color-copy-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-primary); }

/* Home hero */
.hero .btn-row { justify-content: center; margin-top: var(--space-8); }
.hero__trust { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-heading); text-shadow: 0 0 14px hsl(var(--brand-h) 50% 97% / .95); }

/* Pain grid */
.pain { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-5); margin-top: var(--space-10); }
.pain > div { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius); padding: var(--space-6) var(--space-6) var(--space-8); box-shadow: var(--shadow-xs); }
.pain h5 { margin-bottom: var(--space-2); }
.pain p { margin: 0; font-size: var(--text-sm); color: var(--color-copy-muted); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--space-10); counter-reset: s; margin-top: var(--space-12); }
.steps > div { counter-increment: s; }
.steps > div::before { content: counter(s); display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--color-primary-light); font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); margin-bottom: var(--space-4); background: var(--color-surface); }
.steps p { font-size: var(--text-sm); color: var(--color-copy-muted); margin: 0; }

.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .four { grid-template-columns: repeat(2, 1fr); } }

/* FAQ accordion */
.faq { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary { list-style: none; cursor: pointer; padding: var(--space-5) var(--space-10) var(--space-5) 0; position: relative; font-family: var(--font-display); font-weight: 300; font-size: var(--text-xl); color: var(--color-heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: var(--space-2); top: 50%; width: 0.75rem; height: 0.75rem; border: solid var(--color-primary); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); transition: transform var(--dur-base) var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding: 0 0 var(--space-6); color: var(--color-copy); }
.faq details > div p { margin-bottom: var(--space-3); }

/* Prose (legal, guides) */
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-12); }
.prose h3 { font-size: var(--text-xl); margin-top: var(--space-8); }
.prose ul { padding-left: var(--space-6); margin: 0 0 var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.draft-note { background: var(--color-secondary-wash); color: var(--color-secondary-dark); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-5); font-size: var(--text-sm); margin-bottom: var(--space-8); }

/* Calculator */
.calc output { font-family: var(--font-display); font-weight: 300; font-size: var(--text-3xl); color: var(--color-heading); display: block; line-height: 1.1; }

/* Availability strip */
.season-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: var(--space-6) 0; }
.season-strip span { padding: var(--space-3) 0; text-align: center; font-size: var(--text-2xs); font-weight: 600; border-radius: 6px; background: var(--color-surface-mist); color: var(--color-copy-muted); }
.season-strip .busy { background: var(--color-surface-sand); }
.season-strip .closed { background: var(--color-surface-raised); text-decoration: line-through; }
@media (max-width: 640px) { .season-strip { grid-template-columns: repeat(6, 1fr); } }

/* Floating WhatsApp */
.wa-float { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 60; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-heading); text-decoration: none; font-size: var(--text-sm); font-weight: 600; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border-soft); }
.wa-float svg { width: 1.2rem; height: 1.2rem; color: var(--color-primary); }
.wa-float:hover { box-shadow: var(--shadow-xl); color: var(--color-primary); }

.notice { border-left: 3px solid var(--color-primary-light); padding: var(--space-2) var(--space-5); color: var(--color-copy-muted); font-size: var(--text-sm); }

/* Phones: hero text sits lower over sand and surf, so the sky veil reaches further */
@media (max-width: 640px) {
  .hero::after { background: linear-gradient(180deg, hsl(var(--brand-h) 50% 97% / 0.78) 0%, hsl(var(--brand-h) 50% 97% / 0.62) 62%, transparent 82%, var(--color-background) 100%); }
}

a.card { text-decoration: none; color: inherit; }
.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .three { grid-template-columns: 1fr; } }