/* ============================================================
   Theme: MARINE  -  bright, airy, Cottesloe coastal
   ------------------------------------------------------------
   For: beachside / all-day / brunch cafes.
   Mood: the authentic WA beach-house look - Dulux Surfmist
   off-white, bleached driftwood timber, soft powder / duck-egg
   blue, pale sand, a muted Cottesloe-sunset clay pop. A clean
   modern sans, lots of breathing room. Section headings and the
   hero sit to the left, so it reads structurally different from
   the two serif templates. UI accents stay a deeper ocean blue
   for AA contrast; the powder blue lives in the photography.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

.theme-marine {
  /* -------- Surfaces (Surfmist off-white, bleached) ------ */
  --bg:        #EFEDE3;
  --bg-2:      #E3E4DD;
  --surface:   #FAF8F1;

  /* -------- Text (deep weathered charcoal-teal) --------- */
  --fg:            #313B3D;
  --fg-muted:      #6E7679;
  --heading-color: #31494F;

  /* -------- Accent (deep duck-egg ocean) + clay pop ----- */
  --accent:        #3F6E7C;   /* fills, buttons, rules         */
  --accent-bright: #386A79;   /* links/prices on light (AA)    */
  --accent-hover:  #2C525E;
  --accent-2:      #CC9A78;   /* muted Cottesloe-sunset clay    */
  --on-accent:     #FFFFFF;

  --hairline:   rgba(49, 59, 61, 0.14);
  --hairline-2: rgba(49, 59, 61, 0.24);

  /* -------- Hero (light, legible coastal veil) ----------- */
  --hero-ink: #FFFFFF;
  --hero-min-h: 84vh;
  --hero-overlay:
    linear-gradient(105deg, rgba(15,48,62,0.74) 0%, rgba(20,58,71,0.46) 46%, rgba(20,58,71,0.18) 100%),
    linear-gradient(180deg, rgba(20,58,71,0.10) 0%, rgba(20,58,71,0.36) 100%);

  /* -------- Footer (deep weathered teal) ----------------- */
  --footer-bg:     #2C3B3F;
  --footer-fg:     rgba(255, 255, 255, 0.80);
  --footer-strong: #FFFFFF;
  --footer-head:   #A7C7CE;   /* powder blue */

  /* -------- Type ----------------------------------------- */
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.7rem, 6.5vw + 1rem, 5.2rem);
  --heading-weight: 600;
  --heading-tracking: -0.02em;
  --eyebrow-tracking: 0.2em;

  /* -------- Rounded, clean corners ----------------------- */
  --radius-1: 8px;
  --radius-2: 16px;
  --radius-3: 24px;
  --rule-color: var(--accent-2);
  --shadow-1: 0 1px 2px rgba(20,58,71,0.05), 0 8px 24px rgba(20,58,71,0.08);
  --shadow-2: 0 18px 46px rgba(20,58,71,0.13);
}

/* ---- Structural personality: left-anchored, airy ----------- */

/* Section heads to the left */
.theme-marine .section-head {
  align-items: flex-start;
  text-align: left;
}

/* Hero text block sits lower-left, not centred */
.theme-marine .hero { justify-content: flex-start; }
.theme-marine .hero__inner {
  align-items: flex-start;
  text-align: left;
  max-width: 40rem;
}
.theme-marine .hero__lede { margin-inline: 0; }
.theme-marine .hero__hours,
.theme-marine .hero__ctas { justify-content: flex-start; }
.theme-marine .hero__scroll { left: var(--gutter); transform: none; }

/* Airy borderless menu columns with an accent top-rule */
.theme-marine .menu-group {
  background: transparent;
  border: 0;
  border-top: 3px solid var(--accent);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-4) 0 0;
}
.theme-marine .menu-group__title {
  border-bottom: 1px solid var(--hairline);
}
.theme-marine .menu-row { border-bottom-color: var(--hairline); }