/*
 * Brand refresh. Redefines the custom properties the legacy stylesheet
 * (site-20260719-seo.min.css) already reads via var(), so every page built
 * from that stylesheet re-themes without any markup changes. Loaded after
 * that stylesheet — see app/layout.js for why this can't be a Tailwind
 * `@theme` block instead.
 *
 * Palette: teal #2E7D77 is the primary/CTA color (buttons, links, icons —
 * never a large fill). Orange #FF9A00 is the secondary accent, used in
 * small deliberate spots (the services banner, a few underlines/markers,
 * the "featured" package badge) — never body text, since white-on-orange
 * and orange-on-cream both fail contrast at this brightness (checked:
 * 2.1:1, WCAG needs 3:1 minimum even for graphics). Blue #4496B8 is a
 * minor tertiary accent for section labels. Backgrounds are cream —
 * #FEF8E9 as the default surface, #F5ECDB for alternating/"raised"
 * sections — never teal, orange, or black.
 *
 * IMPORTANT: --ocean-dark is the legacy sheet's "dark ink" token — it's
 * read all over the site for HEADING TEXT on light cards (package/pricing
 * titles, form labels, etc.), not just section backgrounds. It has to
 * stay dark. Every section that used to render as a solid dark-teal
 * surface (.dark-band, .final-cta, .legal-hero, .page-hero, .gallery-item,
 * .article-cta, .testimonial-rail article, .site-footer,
 * .mobile-menu-inner) gets its own explicit cream `background` override
 * further down instead of inheriting one from this variable.
 */
:root {
  --ocean-dark: #0a0a0a;
  --deep-blue: #2e7d77;
  --surf-blue: #4496b8;
  --foam-white: #fef8e9;
  --sand: #f5ecdb;
  --sunset: #2e7d77;
  --charcoal: #0a0a0a;
  --ink: #0a0a0a;
  --muted: #5c6a70;
  --line: rgba(255, 255, 255, 0.18);
  --line-dark: rgba(10, 10, 10, 0.12);
  --seafoam: #dcefea;
  --serif: var(--font-archivo), "Arial Black", sans-serif;
  --sans: var(--font-inter), system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1,
h2 {
  font-weight: 640;
}

/*
 * The legacy .container padding collapses to near-zero at ~1024px viewport
 * width (100% browser zoom on common laptop screens). This floors the
 * horizontal padding so content always has breathing room — at least 20px
 * on the narrowest supported screen, scaling up proportionally beyond that.
 * max() picks whichever is larger: the rem floor or the vw-relative value.
 */
.container {
  padding-left: max(1.25rem, 3vw);
  padding-right: max(1.25rem, 3vw);
}

.btn,
.nav-link,
.header-cta,
label,
button,
input,
select,
textarea {
  font-family: var(--font-satoshi), var(--font-inter), sans-serif;
}

/* .mobile-link keeps var(--serif) (now Archivo) — it's set in large
   display-sized type in the slide-out panel, not UI chrome. */

/*
 * Navbar: the legacy header was built to sit transparently over a dark
 * hero image (light text, blur-to-dark on scroll). The identity wants a
 * permanently solid white bar with black text and a teal CTA, so these
 * roles diverge from the shared --foam-white/--ocean-dark tokens above
 * and need their own overrides.
 */
.site-header,
.site-header.is-scrolled {
  color: #0a0a0a;
  background: #ffffff;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
  backdrop-filter: none;
  transition:
    opacity 420ms ease,
    transform 420ms ease,
    visibility 420ms,
    height 240ms;
}

/*
 * The header stays out of the way until the homepage intro finishes
 * expanding. The hero renders data-hero-gate="closed" server-side and
 * flips it to "open" once the media is fully expanded, so the header is
 * hidden from first paint rather than flashing in and then leaving.
 *
 * Scoped via :has() so it costs nothing on pages without a hero — they
 * have no [data-hero-gate] element, so the rule simply never matches.
 * visibility (not just opacity) keeps the links out of the tab order
 * while hidden. Browsers without :has() just show the header throughout,
 * which is a harmless fallback.
 */
body:has([data-hero-gate="closed"]) .site-header {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  pointer-events: none;
}

/* The legacy sheet inverted this to white for sections that used to be
   dark (header, footer, mobile menu). All of those are light cream now,
   so the mark's own dark colors already work everywhere — no inversion
   needed anywhere on the site. */
.brand-mark {
  filter: none;
}

.header-cta,
.btn-primary {
  color: #ffffff;
  background: #2e7d77;
}

.btn-primary:hover {
  background: #3a9a92;
}

.menu-toggle {
  border-color: rgba(10, 10, 10, 0.18);
  background: rgba(10, 10, 10, 0.04);
}

.menu-toggle span {
  background: #0a0a0a;
}

/* .btn-ghost/.btn-outline's own base styling (color:var(--foam-white),
   translucent white fill) assumed the dark sections they used to sit on
   — now that those are cream, the same translucent-white treatment would
   be nearly invisible. Ink-tinted instead. */
.btn-ghost,
.btn-outline {
  color: #0a0a0a;
  border-color: rgba(10, 10, 10, 0.28);
  background: rgba(10, 10, 10, 0.05);
}

/*
 * Services marquee (homepage, under the hero): the one place orange is
 * still used. See components/ServicesMarquee.js — a separate Tailwind
 * component, unaffected by the --sunset token above.
 *
 * Partner-camps strip ("Trusted by Surf Camps") keeps its own separate
 * .brand-marquee/.brand-track classes, recolored to teal below to match.
 * Its scroll animation was unconditionally disabled elsewhere in this
 * stylesheet (a deliberate static-wrapped-grid fallback, likely for Core
 * Web Vitals) — left as-is on purpose.
 */
.brand-marquee {
  border-block: none;
  background: #2e7d77;
}

.brand-track span {
  color: #ffffff;
}

.article-content h2 {
  color: #0a0a0a;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline-color: #2e7d77;
}

.section-heading {
  text-align: center;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.75rem;
}

.section-label {
  display: inline-block;
  font-family: var(--font-ui), var(--font-satoshi), sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #2e7d77;
  margin-bottom: 0.75rem;
}

.section-heading h2,
.split-heading h2 {
  font-family: var(--font-display), var(--font-archivo), sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #0a0a0a;
}

.blog-meta,
.package-dialog-price,
.pricing-card .price,
.package-card .price,
.text-link {
  color: #2e7d77;
}

/* The one other deliberate use of the secondary orange: highlighting the
   "most popular" package against an otherwise teal-dominant page reads as
   a clear, purposeful accent rather than a random color swap. */
.package-card.featured,
.pricing-card.featured {
  border-color: rgba(255, 154, 0, 0.55);
}

/*
 * These sections used to render as a solid dark-teal (formerly near-black)
 * flat-color surface with light text — the site's one "dark section"
 * pattern. They're cream now, like everywhere else on the site, so the
 * pattern is retired: explicit cream background + dark ink text,
 * overriding the legacy sheet's own var(--ocean-dark) background and
 * color:var(--foam-white) (light text) on the same selectors.
 *
 * .page-hero, .error-page, and .gallery-item are NOT here on purpose —
 * unlike the ones below, they sit behind an actual full-bleed photo
 * (.hero-media) with a dark gradient scrim for legibility, and their text
 * needs to stay light against that photo. Flipping them to dark ink was a
 * mistake caught by testing: it made every inner-page hero title
 * (Portfolio/Packages/Blog/Contact) illegible against its own dark photo
 * overlay. Their rare flat-color fallback (visible only if the photo
 * fails to load) is left as whatever --ocean-dark now resolves to
 * (dark ink) — a dark placeholder behind a photo is normal and fine.
 */
.dark-band,
.final-cta,
.legal-hero,
.article-cta,
.testimonial-rail article,
.package-dialog-media,
.mobile-menu-inner {
  background: #f5ecdb;
  color: #0a0a0a;
}

/*
 * The footer is the ONE deliberate exception to the cream-background rule at
 * the top of this file: it is a solid teal slab with cream text, with a
 * darker teal sub-bar beneath it. Kept in sync with components/SiteFooter.js,
 * which sets the same colours inline. Contrast was checked — cream on #2E7D77
 * is 4.6:1, cream on #245F5A is 6.9:1, both pass AA for body text. Orange is
 * still not used for text anywhere in here (2.3:1 on teal); it appears only
 * as the small rule under each heading and as a hover accent.
 */
.site-footer {
  background: #2e7d77;
  color: #fef8e9;
}

/*
 * Each of the flat sections above also has one or more child selectors in
 * the legacy sheet that hardcode a light text color directly (higher
 * specificity than the parent-level color set above, so it wins over it)
 * — literally invisible on the new cream background if left alone. This
 * mirrors the same "audit every page, not just the container" lesson from
 * the black→teal pass: text-in-context needs checking, not just the
 * section shell.
 */
.dark-band .lead,
.dark-band p,
.article-cta p,
.article-cta h2,
.package-showcase-content h2,
.package-showcase-content li,
.package-showcase-content>p:not(.section-label),
.in-water-showcase .price.large,
.cta-panel p,
.legal-hero p,
.testimonial-rail p,
.testimonial-rail article h3,
.footer-grid p,
.footer-bottom p,
.breadcrumbs li {
  color: rgba(10, 10, 10, 0.72);
}

.footer-grid a {
  color: rgba(10, 10, 10, 0.72);
}

.footer-grid a:hover {
  color: #2e7d77;
}

.breadcrumbs li+li::before {
  color: rgba(10, 10, 10, 0.42);
}

.blog-link-panel h2 {
  color: #0a0a0a;
}

.blog-link-panel p:not(.section-label) {
  color: rgba(10, 10, 10, 0.72);
}

/* Was a translucent white pill (right at home on the old dark section) —
   a light-on-cream pill would be nearly invisible. */
.blog-link-list a {
  color: #0a0a0a;
  border-color: rgba(10, 10, 10, 0.14);
  background: rgba(10, 10, 10, 0.04);
}

.form-row input,
.form-row select,
.form-row textarea {
  background: #fef8e9;
}

/* The mobile menu's own close button and active-page link both read
   color:var(--foam-white) from the legacy sheet — fine on the old dark
   panel, invisible on this cream one. */
.mobile-menu-top button {
  color: #0a0a0a;
  border-color: rgba(10, 10, 10, 0.18);
}

.mobile-link[aria-current="page"] {
  color: #2e7d77;
}

/* --sand now equals the footer's own background — these headings need
   their own dark color rather than the (invisible) shared token. */
.footer-grid h3 {
  color: #0a0a0a;
}

/*
 * .breadcrumbs a{color:#fff} is unconditional in the legacy sheet, correct
 * on .page-hero (still a dark photo underneath) but not on .legal-hero
 * (flat cream now, like the rest of this pass) — scoped fix, not a
 * blanket one, or Portfolio/Packages/Blog/Contact breadcrumbs would go
 * dark-on-dark-photo instead.
 */
.legal-hero .breadcrumbs a {
  color: #0a0a0a;
}

.legal-hero .breadcrumbs li {
  color: rgba(10, 10, 10, 0.72);
}

.legal-hero .breadcrumbs li+li::before {
  color: rgba(10, 10, 10, 0.42);
}

/*
 * .page-hero, .error-page, and .gallery-item keep their light TEXT (see
 * the big comment above — they sit on a photo), but their background
 * still routes through var(--ocean-dark), which is dark ink now, not
 * teal. That's a black fallback surface again, exactly what was removed
 * earlier — needs its own cream background without touching the color
 * these three already correctly inherit.
 */
.page-hero,
.error-page,
.gallery-item {
  background: #f5ecdb;
}

/* ==========================================================================
 * Interaction states
 *
 * An audit of every page found seven interactive elements with no :hover
 * rule anywhere in the legacy stylesheet — the navbar CTA, portfolio
 * filter chips, FAQ rows, contact links, the WhatsApp button, the logo,
 * and the lightbox controls. Most also had no `transition`, so anything
 * added here needs one to avoid snapping. The stylesheet's global
 * prefers-reduced-motion rule already zeroes these durations.
 * ========================================================================== */

.brand,
.contact-card a,
.faq-list summary,
.filter-bar button,
.lightbox-close,
.lightbox-nav,
.mobile-link,
.whatsapp-float {
  transition:
    background 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    opacity 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}

/* Navbar CTA — the single most important button on the site had no
   hover feedback at all. Matches .btn-primary:hover. */
.header-cta:hover {
  background: #3a9a92;
  transform: translateY(-1px);
}

.brand:hover {
  opacity: 0.72;
}

/* Desktop nav links were only 22px tall — well under a comfortable
   pointer/touch target. The padding grows the hit area without moving
   the text (the header row is centred), and ::after is re-anchored from
   -8px to 4px so the underline stays the same visual distance below the
   label rather than drifting down with the new padding. */
.nav-link {
  padding: 12px 2px;
}

.nav-link::after {
  bottom: 4px;
  /* Orange rather than teal — a small, purely decorative underline is
     exactly where the secondary accent color belongs: visible, but never
     competing with the teal CTA button next to it. */
  background: #ff9a00;
}

.mobile-link:hover {
  color: #2e7d77;
  padding-left: 10px;
}

/* Portfolio category chips: only .is-active was styled, so the inactive
   chips gave no feedback on hover. */
.filter-bar button:hover:not(.is-active) {
  color: #2e7d77;
  border-color: rgba(46, 125, 119, 0.5);
  background: rgba(46, 125, 119, 0.06);
}

/* <summary> only gets a pointer cursor in some browsers, and the legacy
   sheet sets cursor:pointer on button but never on summary. */
.faq-list summary {
  cursor: pointer;
}

.faq-list summary:hover {
  background: rgba(46, 125, 119, 0.05);
}

.faq-list summary::after {
  color: #ff9a00;
}

.contact-card a:hover {
  color: #2e7d77;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.whatsapp-float:hover {
  transform: scale(1.06);
  box-shadow: 0 20px 44px rgba(37, 211, 102, 0.42);
}

.lightbox-close:hover,
.lightbox-nav:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.2);
}

/* Ghost/outline buttons only had the shared .btn::after sheen; give them
   a border and fill response too. Ink-tinted to match the base override
   above (cream sections now, not the old dark ones). */
.btn-ghost:hover,
.btn-outline:hover {
  border-color: rgba(10, 10, 10, 0.5);
  background: rgba(10, 10, 10, 0.1);
}

/* Contact page map pin marker — a small non-text dot, another safe spot
   for the secondary accent. */
.map-point::before {
  background: #ff9a00;
}

/* ==========================================================================
 * Two-tone section headings
 *
 * Headings split across the two brand colours (see the reference designs) —
 * wrap the words to tint in <span class="t-teal"> / <span class="t-orange">.
 *
 * CONTRAST WARNING for .t-orange: #FF9A00 measures only 2.1:1 against the
 * cream page (#FEF8E9) and 2.0:1 against the sand band (#F5ECDB). WCAG wants
 * 3:1 even for large display text, so orange-tinted words are noticeably
 * washed out and are the weakest text on the page. This is a deliberate,
 * requested brand choice. To fix it in one place, change --heading-orange
 * below to #C2410C, which reads as the same warm accent and measures 4.9:1.
 * ========================================================================== */
:root {
  --heading-teal: #2e7d77;
  --heading-orange: #ff9a00;
}

.t-teal {
  color: var(--heading-teal);
}

.t-orange {
  color: var(--heading-orange);
}

/* Homepage "Recent Surf Stories": the CTA under the static grid that the
   scroll animation hands off to. */
.portfolio-preview-cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* Floating WhatsApp Button */
.whatsapp-float {
  background: transparent !important;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.35);
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 0;
}

.whatsapp-float:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.45);
}

.whatsapp-float img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Portfolio Gallery Clean Borderless Reset */
.portfolio-gallery-wrapper .portfolio-photo-card,
.portfolio-gallery-wrapper [role="button"],
.portfolio-gallery-wrapper img {
  border: none !important;
  outline: none !important;
  box-shadow: none;
}