/* =====================================================================
 * texture-text.css — texture-filled headings via background-clip: text
 * Owner: texture-text agent (2026-06-01) · expanded 2026-06-02
 *
 * As of 2026-06-02 the user wants EVERY display-text element (titles,
 * eyebrows — Hebrew AND English) to be filled with the brand texture.
 * To honor that without hand-tagging every element in markup, this
 * stylesheet now does TWO things:
 *
 *   1. The opt-in classes (.texture-text, .texture-text--dark/--light)
 *      keep working — for places that need to override the auto behavior.
 *   2. A site-wide RULE applies the dark-on-ivory texture automatically to:
 *        - .section-header__title
 *        - .section-header__eyebrow
 *        - h2.lounge__title, h3.lounge__title  (lounge labels)
 *        - .hall-* h1/h2 titles
 *      Sections with dark backgrounds get the cream-on-cocoa texture instead.
 *
 * Two textures available (renamed 2026-06-03 to remove the dark/light
 * inversion that was making titles vanish):
 *   --typo-on-light : DARK gold-flecked fill, for headings on LIGHT/ivory bg
 *                     (the dominant case across the site).
 *   --typo-on-dark  : LIGHT cream + gold fill, for headings on DARK bg
 *                     (Hero, Halls, Kosher, Culinary, Footer).
 * Plus the older --texture-{dark,light} aliases for opt-in compatibility.
 *
 * GRACEFUL DEGRADATION: the texture fill lives ENTIRELY inside an
 * @supports block. Browsers without background-clip:text keep the solid
 * token color inherited from base.css — headings stay readable.
 *
 * RTL: background-clip is direction-agnostic.
 * Tokens consumed from css/tokens.css — never hard-code url().
 * ===================================================================== */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {

  /* ---- Shared paint base ----
     2026-06-03: background-size changed to `100% 100%`. The previous
     `auto 280%` over-zoomed the texture: each glyph saw only a tiny crop,
     and if that crop happened to land in a near-bg-luma patch the letter
     vanished. Forcing the texture to fill the heading box exactly means
     every glyph samples the entire texture; combined with luma-clamped
     textures (typo-on-light ≤ 112, typo-on-dark ≥ 153), no letter ever
     blends into ivory or cocoa. */
  .texture-text,
  .texture-text--dark,
  .texture-text--light,
  .section-header__title,
  .lounge__title,
  .rooms__name,
  .feature h3,
  .marquee__text,
  .about__stat dd {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* ---- Default: DARK texture (gold flecks on near-black) for headings on
     light/ivory surfaces — the dominant case across the site.
     Gallery + kosher titles also live on ivory and want the dark fill
     (corrected 2026-06-03 — they were previously forced to the light
     cream texture which disappears on ivory).

     2026-06-08: brightness/contrast/saturate lift removed. The current
     typo-on-light source is calibrated for ivory backgrounds without a
     filter; the lift was flattening the bronze ribbons into uniform gold. */
  .texture-text,
  .texture-text--dark,
  .section-header__title,
  .rooms__name,
  .feature h3,
  .marquee__text,
  .gallery .section-header__title,
  .kosher .section-header__title,
  .about__stat dd {
    background-image: var(--typo-on-light);
  }

  /* ---- LIGHT texture override for content on dark surfaces ----
     Sections with cocoa/dark imagery, and the lounge panel titles
     (which sit over dark indoor photography). Eyebrows stay solid brass,
     per impeccable: texture only earns its place at display sizes.
     Footer claim was removed 2026-06-03 — user wants flat ivory text
     there ("בהיר בלבד ללא טקסטורה מאחורה"). ---- */
  [data-bg="dark"] .section-header__title,
  .bg-dark .section-header__title,
  .culinary .section-header__title,
  .hero .section-header__title,
  .lounge__title,
  .texture-text--light {
    background-image: var(--typo-on-dark) !important;
  }

  /* These extra titles also need the paint base (background-clip etc.). */
  .culinary .section-header__title,
  .hero .section-header__title,
  .lounge__title {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* Dark-bg consumers don't get the brightness lift — the LIGHT texture
     fills are already calibrated for cocoa surfaces. */
  [data-bg="dark"] .section-header__title,
  .bg-dark .section-header__title,
  .culinary .section-header__title,
  .hero .section-header__title,
  .lounge__title,
  .texture-text--light {
    filter: none;
  }

  /* ---- Per-element overrides: legacy `.texture-text--dark/--light`
     classes can also pick the older background-tile textures, in case any
     element wants the surface tile rather than the typo fill. ---- */
  .texture-text--dark.texture-text--bg {
    background-image: var(--texture-dark);
  }
  .texture-text--light.texture-text--bg {
    background-image: var(--texture-light);
  }

  /* ---- Brass solid fallback for tiny text elements that should NOT be
     filled (footer copyright, slider dots, etc.). Opt out via
     `.texture-text--off`. ---- */
  .texture-text--off {
    background: none !important;
    color: var(--brass) !important;
    -webkit-text-fill-color: currentColor !important;
  }
}