/*
Theme Name: Marée — Fine Dining Seafood & Raw Bar
Theme URI: https://example.com
Author: Studio Build
Author URI: https://example.com
Description: A premium, tide-themed WordPress theme for fine-dining seafood restaurants. Built around a custom catch-of-the-day tide ticker, an editorial seafood menu, a dedicated raw bar / cocktail program section, and a suite of bespoke generative ambiance photography in place of stock imagery. Includes Customizer controls for venue details, a React-powered interactive menu filter, and a Tailwind utility layer.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: maree
Tags: restaurant, fine-dining, seafood, custom-colors, custom-logo, custom-menu, threaded-comments, translation-ready
*/

/* =========================================================
   DESIGN TOKENS — "Marée" / Tide & Catch
   ========================================================= */
:root{
  /* ---- Color: named per the brief, used deliberately ---- */
  --c-abyss:        #0A1418;  /* primary background — deep ocean, not pure black */
  --c-abyss-deep:    #060B0E;  /* darkest layer, footer / overlays */
  --c-tidepool:      #102229;  /* secondary surface, cards, bar section base */
  --c-tidepool-edge: #16313A;  /* hover/elevated surface */
  --c-nacre:         #EDE6D6;  /* primary text — warm pearl, never pure white */
  --c-nacre-dim:     #B9B2A2;  /* secondary text */
  --c-brine:         #2F5D55;  /* sea-glass teal accent */
  --c-brine-light:   #4B8479;
  --c-brass:         #B8884B;  /* brass / candlelight metal accent — primary CTA color */
  --c-brass-light:   #D2A86B;
  --c-coral:         #C1503A;  /* coral ember — sparing accent, used for "today only" marks */
  --c-line:          rgba(237,230,214,0.14); /* hairline on dark */
  --c-line-strong:   rgba(237,230,214,0.28);

  /* ---- Type ---- */
  --f-display: 'Italiana', 'Times New Roman', serif;            /* wordmark + big hero */
  --f-heading: 'Cormorant Garamond', 'Georgia', serif;          /* menu items, section titles */
  --f-body:    'Jost', -apple-system, 'Segoe UI', sans-serif;   /* body copy, UI, nav, labels */

  --fs-h1: clamp(2.6rem, 5vw, 4.6rem);
  --fs-h2: clamp(2rem, 3.6vw, 3rem);

  /* ---- Motion ---- */
  --dur-fast: 220ms;
  --dur-med:  420ms;
  --dur-slow: 760ms;
  --ease-tide: cubic-bezier(.4,0,.2,1);

  /* ---- Layout ---- */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4rem, 9vw, 7.5rem);
}

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
body, h1, h2, h3, p, figure, ul{ margin:0; padding:0; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input, select, textarea{ font:inherit; color:inherit; }

body{
  background:var(--c-abyss);
  color:var(--c-nacre);
  font-family:var(--f-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--f-heading); font-weight:500; color:var(--c-nacre); }

.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.section{ padding-top:var(--section-pad); padding-bottom:var(--section-pad); }

.eyebrow{
  font-family:var(--f-body);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-brass-light);
  font-weight:500;
}

.wordmark{ font-family:var(--f-display); letter-spacing:.04em; font-weight:400; }

.hairline{ height:1px; background:var(--c-line); border:0; }

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--c-brass); color:var(--c-abyss-deep);
  padding:.8em 1.4em; z-index:9999; font-family:var(--f-body); font-weight:500;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--c-brass-light); outline-offset:3px;
}

/* Scroll-reveal base (animated via main.js IntersectionObserver) */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity var(--dur-slow) var(--ease-tide), transform var(--dur-slow) var(--ease-tide); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal[data-reveal-delay="1"]{ transition-delay:.12s; }
.reveal[data-reveal-delay="2"]{ transition-delay:.24s; }
.reveal[data-reveal-delay="3"]{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}