/* ═══════════════════════════════════════════════════════════════════════════
   A Pinch of Salt — Elementor native-widget typography bridge
   ---------------------------------------------------------------------------
   Enqueue AFTER aps-club.css. Order-independent by construction: every
   declaration here either (a) is a custom-property definition, which cannot
   collide with any aps-*.css rule, or (b) carries specificity strictly above
   post-N.css AND strictly above every competing aps-*.css selector — so it
   behaves identically whether it loads before or after the per-page CSS.

   WHAT IT FIXES
   Chef's Table (post-9 / post-50) and Dining Club (post-11 / post-55) are
   built from NATIVE Elementor heading + text-editor widgets. Elementor's
   per-page CSS emits, late in the cascade:
       .elementor-widget-heading .elementor-heading-title{
         font-family:var(--e-global-typography-primary-font-family),Sans-serif;
         font-weight:var(--e-global-typography-primary-font-weight);
         color:var(--e-global-color-primary)}                        (0,2,0)
       .elementor-widget-text-editor{
         font-family:var(--e-global-typography-text-font-family),Sans-serif;
         font-weight:var(--e-global-typography-text-font-weight);
         color:var(--e-global-color-text)}                           (0,1,0)
       .elementor-widget-image .widget-image-caption{...same vars...} (0,2,0)
   The Elementor kit (post-5.css) is stock, so those vars resolve to
   Roboto 600 / Roboto 400, #6EC1E4 and #7A7A7A.

   STRATEGY
   Do not fight those rules — feed them. Redefining the kit's OWN variables
   on the page-scope element makes them resolve to design-system values while
   keeping the rules at their original low specificity, so every aps-*.css
   selector (.hero h1, .h-xl, .eyebrow, .lede, .event h3 …) still wins as the
   architecture intends. No !important is used anywhere in this file.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   1. Kit variables → design-system values, scoped to the two Elementor-built
      pages. FIXES: Roboto 600 / Roboto 400 on all 76 chef + 44 club native
      widgets, and the #6EC1E4 / #7A7A7A stock colours.

      NOT applied to .ct-page.page-home on purpose. post-7.css hard-codes
      per-element fonts on 5 of the home page's 7 native widgets, but the
      intro sub-heading (element lk7o6cn9) has no such override and would
      shift Roboto 400 -> Jost 300. The brief requires the home page's
      appearance to be untouched. To bring home into the system later, add
      `.ct-page.page-home` to the selector list below — nothing else changes.

      Full fallback chains are used, not the bare family name: Elementor
      appends a hard-coded ", Sans-serif" to whatever the var yields, so a
      bare "Cormorant Garamond" would fall back to a SANS face if the webfont
      (loaded via @import in aps-base.css) fails, is deferred, or is stripped
      by an optimisation/consent plugin — producing serif and sans headings
      side by side on the same page. Ending the chain in `serif` makes
      Elementor's trailing keyword unreachable.
   ───────────────────────────────────────────────────────────────────────── */
.ct-page.page-chef,
.ct-page.page-club{
  --e-global-typography-primary-font-family:"Cormorant Garamond","Times New Roman",serif;
  --e-global-typography-primary-font-weight:400;
  --e-global-typography-secondary-font-family:"Cormorant Garamond","Times New Roman",serif;
  --e-global-typography-secondary-font-weight:400;
  --e-global-typography-text-font-family:"Jost","Helvetica Neue",system-ui,sans-serif;
  --e-global-typography-text-font-weight:300;
  --e-global-typography-accent-font-family:"Jost","Helvetica Neue",system-ui,sans-serif;
  --e-global-typography-accent-font-weight:400;
}

/* Light-ground defaults (chef page as a whole; the club page's one light
   section is re-declared below). --ink / --ink-soft. */
.ct-page.page-chef{
  --e-global-color-primary:#1B1E18;
  --e-global-color-secondary:#2A2E26;
  --e-global-color-text:#2A2E26;
  --e-global-color-accent:#4C6342;
}


/* ─────────────────────────────────────────────────────────────────────────
   2. DARK GROUND. Colour is contextual, so the colour vars are re-declared
      per section rather than bridged with `color:inherit`.

      Why not `color:inherit`: an inherit bridge on the widget div needs
      (0,2,0)+ to beat the kit rule, which ties with `.ct-page .eyebrow` and
      `.ct-page .lede` (both (0,2,0)) and, on the club page, with
      `.page-club .eyebrow` / `.page-club .lede` (both (0,3,0)) — turning
      correct sage/gold/soft-paper text into a source-order coin flip.
      A `p`-level inherit bridge is worse still: it pulls from the widget DIV
      (which the kit has already painted), not from the section, which is the
      exact trap that killed the earlier `font-family:inherit` attempt.
      Variable redeclaration has zero specificity interaction with anything.

      FIXES (critical): chef .other-side body copy — a text-editor widget
      holding a BARE TEXT NODE, so `.page-chef .other-side p` never matches
      it and it is the only rule-less element on near-black --moss-darkest.
      Without this it would go from poor-contrast #7A7A7A to invisible
      #2A2E18-on-black once the vars above land.
   ───────────────────────────────────────────────────────────────────────── */

/* Chef's Table: the closing "other door" band is the page's only dark
   section containing native widgets. */
.ct-page.page-chef .other-side{
  --e-global-color-primary:#FDF6E4;                 /* --paper  */
  --e-global-color-secondary:#FDF6E4;
  --e-global-color-text:rgba(251,248,242,0.78);
  --e-global-color-accent:oklch(0.84 0.07 80);      /* --gold-soft */
}

/* Dining Club is dark GLOBALLY (aps-club.css:6 sets --moss-darkest on the
   scope element itself), so the page-level default is light-on-dark. */
.ct-page.page-club{
  --e-global-color-primary:#FDF6E4;                 /* --paper  */
  --e-global-color-secondary:#FDF6E4;
  --e-global-color-text:rgba(251,248,242,0.78);
  --e-global-color-accent:oklch(0.84 0.07 80);      /* --gold-soft */
}

/* …except the club's closing "other side" band, which is a light --cream
   card inside the dark page. Flip the vars back. */
.ct-page.page-club .other-side{
  --e-global-color-primary:#1B1E18;                 /* --ink      */
  --e-global-color-secondary:#2A2E26;
  --e-global-color-text:#2A2E26;                    /* --ink-soft */
  --e-global-color-accent:#4C6342;                  /* --sage-deep */
}


/* ─────────────────────────────────────────────────────────────────────────
   3. Display-heading WEIGHT relay.
      FIXES: all 13 .h-xl / .h-lg section headings (6+1 chef, 7 club, ×2 for
      the EN pages) rendering at 400 instead of the design system's 300.
      The size class sits on the widget DIV; aps-base.css:36/37 put
      font-weight:300 there, but the kit rule pins font-weight on the inner
      hN at (0,2,0) and aps-base.css:146's relay is only (0,2,0) loading
      earlier, so it loses the tie. This relay is (0,3,0) and wins outright.

      Scoped to the size classes deliberately. Setting
      --e-global-typography-primary-font-weight:300 globally instead would
      drop the eight .occ .title h3s (which declare no weight of their own
      and legitimately want 400) to 300.
   ───────────────────────────────────────────────────────────────────────── */
.ct-page :is(.display,.h-xl,.h-lg,.h-md) .elementor-heading-title{
  font-weight:inherit;
}


/* ─────────────────────────────────────────────────────────────────────────
   4. Bare-text-node body copy: size / leading / measure.
      Elementor 4.1.4 emits NO .elementor-widget-container, and 49 of 50 chef
      and 26 of 28 club text-editor widgets hold a bare text node rather than
      a <p>. Several aps rules are written as `… p { }` and therefore match
      nothing. These widen the same declarations to the widget div itself.

      Only the widgets whose intended rule is currently unmatched are
      targeted; :not() excludes siblings that already have a correct, more
      specific rule (.eyebrow at (0,4,0), .num at (0,4,0)) so no tie is
      created with aps-chefs-table.css / aps-club.css.

      Colour is intentionally omitted here — section 2 already delivers it
      through the kit var, which keeps these rules from outranking any
      future contextual colour override.
   ───────────────────────────────────────────────────────────────────────── */

/* mirrors aps-chefs-table.css:151 `.page-chef .other-side p` */
.ct-page.page-chef .other-side .elementor-widget-text-editor:not(.eyebrow){
  line-height:1.6;
  margin-top:24px;
  max-width:48ch;
}

/* mirrors aps-chefs-table.css:82 `.page-chef .inc-card p` */
.ct-page.page-chef .inc-card .elementor-widget-text-editor:not(.num){
  font-size:15px;
  line-height:1.6;
}

/* mirrors aps-club.css:176 `.page-club .other-side p` */
.ct-page.page-club .other-side .elementor-widget-text-editor:not(.eyebrow){
  line-height:1.6;
  margin-top:24px;
  max-width:48ch;
}


/* ─────────────────────────────────────────────────────────────────────────
   5. Media slots — make a native Elementor image widget fill its frame.

   A media slot (.hero-side, .sketch .ph, .mood .ph, .event .ph) is a
   positioned box with a fixed aspect-ratio and a stripe placeholder painted
   as its background. aps-chefs-table.css:36 and aps-club.css:40/152 already
   style the photo itself:
       .page-chef .hero-side img{position:absolute;inset:0;
                                 width:100%;height:100%;object-fit:cover}
   but an Elementor image widget does not drop a bare <img> into the slot —
   it drops
       <div class="elementor-widget-image"><figure><img></figure></div>
   and nothing sizes those two wrappers. Because the <img> is taken out of
   flow by the theme rule, the <figure> has no in-flow content and collapses
   to 0x0, the widget collapses with it, and `width:100%` on the absolutely
   positioned <img> then resolves against a 0-wide containing block. Net
   effect: the photo is 0px across and the slot shows its empty placeholder.

   Elementor's per-page CSS also emits per-widget overrides from whatever was
   set in the editor's Image control, e.g. post-9.css:
       .elementor-9 .elementor-element.elementor-element-7dkawvwk img{
         height:500px;object-fit:fill}                              (0,3,1)
   which ties aps-chefs-table.css on specificity and loads later, so it wins.
   The selectors below sit at (0,4,1) and load later still.

   This is the same treatment the home page already gets from the Customizer's
   Additional CSS (`.page-home .atmosphere .frame figure/img`); it is written
   once here for every chef/club slot so any future upload behaves. */

.ct-page:is(.page-chef,.page-club)
  :is(.hero-side,.sketch .ph,.mood .ph,.event .ph) > .elementor-widget-image,
.ct-page:is(.page-chef,.page-club)
  :is(.hero-side,.sketch .ph,.mood .ph,.event .ph) figure{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  z-index:0;
}

.ct-page:is(.page-chef,.page-club)
  :is(.hero-side,.sketch .ph,.mood .ph,.event .ph) img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* The slot's caption is a later sibling of the photo, so tree order already
   paints it on top. Stated explicitly so it survives a reorder. */
.ct-page:is(.page-chef,.page-club)
  :is(.hero-side,.sketch .ph,.mood .ph,.event .ph) .tag{
  z-index:1;
}


/* ─────────────────────────────────────────────────────────────────────────
   6. Hero mark — restore its containing block.

   aps-chefs-table.css:60 / aps-club.css:64 place the vertical mark with
       .hero-mark{position:absolute;right:var(--pad);top:140px;
                  writing-mode:vertical-rl;transform:rotate(180deg)}
   and `.hero` is `position:relative` with `padding:140px var(--pad) …`, so
   those two offsets are plainly written against the hero: top:140px lands on
   the hero's content edge and right:var(--pad) lands in its right gutter.

   But the mark is authored inside an Elementor HTML widget, and Elementor
   gives every widget `position:relative`. That widget — not `.hero` —
   therefore becomes the containing block, and because its only child is
   absolutely positioned it has no in-flow content and collapses to 0 height.
   In `vertical-rl` the inline axis is vertical, so shrink-to-fit clamps the
   mark's inline size against that 0-height block and the string wraps into
   three stacked columns of fragments instead of one continuous line.

   Taking the widget out of the positioning chain hands the job back to
   `.hero`, exactly as the theme intended. Browsers without `:has()` simply
   drop the rule and get today's behaviour. */

.ct-page:is(.page-chef,.page-club) .hero .elementor-widget:has(> .hero-mark){
  position:static;
}

/* Same trap, same cure: .sketch .grid-bg is `position:absolute;inset:0` and is
   meant to fill .sketch with its graph-paper ruling. Once the sketch block was
   split into real containers so its image could be picked from the media
   library, that decorative layer ended up inside a widget of its own — and an
   Elementor widget is position:relative, so the ruling would shrink to a
   zero-height box instead of covering the card. */
.ct-page.page-chef .sketch .elementor-widget:has(> .grid-bg){
  position:static;
}


/* ─────────────────────────────────────────────────────────────────────────
   7. TEMPORARY — language switcher hidden, Dutch is the public site.

   ###  TO PUT ENGLISH BACK: delete this whole section and redeploy.  ###

   The salt-shaker button in the header (.lang-toggle, one per page) is the
   only route a visitor has into the English pages: aps-lang.js reads the
   Polylang <link rel="alternate" hreflang> tags, works out the other
   language, and navigates on click. Hiding the button therefore takes the
   English side out of the visible site while every page stays published and
   directly reachable by URL, so it can still be reviewed and improved.

   display:none rather than visibility/opacity so the button also leaves the
   tab order and the accessibility tree — a control nobody is meant to use
   should not be reachable by keyboard or screen reader either.

   !important is deliberate and is the only use of it in this file:
   aps-lang.js sets an inline style on this button (it hides itself when a
   page has no translation), and an inline style would otherwise outrank a
   stylesheet rule.

   Hiding it leaves no gap — .brand-row is a flex row, so the wordmark simply
   takes the button's place at the left edge. */

.ct-page .lang-toggle{
  display:none !important;
}