/* ============================================================
   VILLA SOLÈNE — "Riviera Noir" theme
   Single-file re-skin of the Elyse Webflow mirror.
   Loaded AFTER the Webflow stylesheet, so these :root
   overrides cascade over the original design tokens.
   Swap the values here to re-theme the entire site.
   ============================================================ */

/* ---- 1. Self-hosted display font (Playfair Display, OFL) ---- */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/PlayfairDisplay-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/PlayfairDisplay-latinExt.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/PlayfairDisplay-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/PlayfairDisplay-italic-latinExt.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- 2. Design tokens (the whole palette + type lives here) ---- */
:root {
  /* Palette — Riviera Noir: warm espresso, champagne gold, ivory */
  --black-900: #17120d;   /* primary background — warm espresso-black */
  --green-700: #2b2118;   /* dark bronze — dark-on-light button text / accents */
  --orange:    #c6a15b;   /* champagne gold — the highlight accent */
  --white:     #f4efe7;   /* warm ivory — primary text */

  /* Ivory-tinted alpha ramp (borders, secondary text) */
  --white-alpha-900: rgba(244, 239, 231, 0.90);
  --white-alpha-800: rgba(244, 239, 231, 0.80);
  --white-alpha-700: rgba(244, 239, 231, 0.68);
  --white-alpha-500: rgba(244, 239, 231, 0.48);
  --white-alpha-50:  rgba(244, 239, 231, 0.16);
  --gray-alpha-500:  rgba(231, 225, 220, 0.50);
  --gray-alpha-200:  rgba(231, 225, 220, 0.18);

  /* Typography — display serif = Playfair Display (free, OFL). Body stays on the
     already-vendored Inter. Swap these two tokens to change the display face site-wide. */
  --_fonts---family--serif: "Playfair Display", Georgia, serif;
  --_fonts---family--glare: "Playfair Display", Georgia, serif;
}

/* ---- 3. Eyebrows / small headings: keep the elegant italic voice ---- */
.h6, .h7, .h8, .h5-glare {
  font-style: italic;
  letter-spacing: 0.005em;
}

/* ---- 4. Hero: ONLY a centred catchphrase (the text block is hidden).
   Char reveal keeps natural letter spacing (no per-character offsets). ---- */
[data-hero='title'] .char-mask { left: 0 !important; margin-right: 0 !important; }

.hero .hero-right { display: none !important; }   /* remove tagline + subtitle + scroll */
/* centre the remaining title both axes within the hero */
.hero .hero-wrap    { justify-content: center !important; align-items: center !important; }
.hero .hero-heading { justify-content: center !important; align-items: center !important; width: 100% !important; }
.h1.hero-title {
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;   /* only the <br/> breaks — never wrap mid-word between split chars */
  letter-spacing: 0.015em;
  line-height: 1.05;
  margin: 0 auto;
}
/* Desktop: big, uppercase, two lines (the per-word .mbr breaks are switched off). */
@media (min-width: 480px) {
  .h1.hero-title { font-size: 10rem; }
  /* SplitText puts an inline display:inline-block on <br>, so !important is needed to hide these */
  .h1.hero-title br.mbr { display: none !important; }
}
/* Mobile: editorial hero — big, left-aligned, bottom-anchored, filling the lower screen.
   Line grouping (via the .mbr breaks): L'ART / DE VIVRE, / FACE À / LA MER. */
@media (max-width: 479px) {
  .hero { padding-bottom: 2rem; }
  /* undo the desktop centring: push the title to the bottom-left of the hero */
  .hero .hero-wrap    { justify-content: flex-end !important; align-items: flex-start !important; }
  .hero .hero-heading { justify-content: flex-end !important; align-items: flex-start !important; }
  .h1.hero-title {
    text-align: left;
    margin: 0 0 0.4rem 0;
    font-size: clamp(3.25rem, 18vw, 5rem);  /* fills the width; longest line "DE VIVRE," ~touches the edge */
    line-height: 0.98;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);  /* legibility over the busy lower image */
  }
}

/* ---- 4b. Hero still image (replaces the original bg video) ---- */
.hero .full-bg-wrap, .hero .full-bg-inner { overflow: hidden; }
/* the original bg was a Webflow background-video wrapper that sat behind the content;
   a plain <img> in the absolute .full-bg-inner would paint OVER the static hero content,
   so re-establish the stacking: background below, hero copy above. */
.hero .full-bg-wrap { z-index: 0; }
.hero .page-padding { position: relative; z-index: 2; }
/* readability scrim over the hero image so the ivory catchphrase reads cleanly */
.hero .full-bg-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(23,18,13,0.55) 0%, rgba(23,18,13,0.30) 45%, rgba(23,18,13,0.60) 100%);
}

/* ---- 4c. Text wordmark replacing the old ELYSE logo SVG (nav / footer / modal) ---- */
.solene-wordmark {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--white);
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.logo__img.solene-wordmark,
.footer-logo.solene-wordmark { font-size: 1.55rem; }
.modal-logo.solene-wordmark  { font-size: 1.4rem; }

/* ---- 5. Remove the "Made in Webflow" badge (belt; JS in _reveal-fix.js is suspenders).
   Their rule forces visibility/opacity/z-index with !important but only
   display:inline-block — display:none from a later sheet wins. ---- */
html body .w-webflow-badge,
.w-webflow-badge { display: none !important; }

/* ---- 6. Readability + layout fixes ---- */
/* Beliefs cards were a LIGHT frosted tint that washed out over bright photos.
   A dark frosted panel keeps the ivory heading/text readable over any background. */
.beliefs-card-bg { background-color: rgba(18, 13, 9, 0.5) !important; }
/* Slightly darken the beliefs full-bleed background so overlaid ivory text stays legible. */
.beliefs .full-bg-wrap img { filter: brightness(0.7); }
/* Amenities titles: a touch smaller so longer French words don't clip inside the
   masked single-line SplitText boxes. */
.amenities-slide-box h2 { font-size: 3.6rem; }