/*
Theme Name:   Loon Lake Child
Theme URI:    {{SITE_URL}}
Description:  Child theme of Hello Elementor for the Loon Lake Luxury direct-booking site. Carries the complete --ll-* design-token set and the seasonal layer keyed on the ll-season-* body class. No component CSS; no logic the loon-lake-core mu-plugin owns.
Author:       Loon Lake Luxury
Template:     hello-elementor
Version:      1.1.0
Requires at least: 6.0
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  loon-lake-child
*/

/* ===========================================================================
 * WHAT THIS FILE IS
 * ---------------------------------------------------------------------------
 * wp-content/themes/loon-lake-child/style.css
 *
 * The single source of truth for design tokens on this site. Every value below
 * is transcribed from wiki/concepts/design-system.md (authored 2026-08-11),
 * which computed ~80 WCAG contrast ratios against these exact hexes. THE
 * NUMBERS ARE LOAD-BEARING. Do not "tidy" a hex, do not round a clamp(), do not
 * add a ramp step that is not here.
 *
 * WHAT THIS FILE ASSUMES
 * ---------------------------------------------------------------------------
 *  1. Parent theme "hello-elementor" is installed and active as the template.
 *  2. wp-content/mu-plugins/loon-lake-core.php is present and its body_class
 *     filter emits `ll-season-summer` or `ll-season-winter`.
 *     -> If it is ABSENT the site FAILS CLOSED TO SUMMER, because the summer
 *        values are declared on :root as well as on body.ll-season-summer.
 *        Summer is the state in which the hot tub is absent. That is deliberate.
 *  3. Elementor (free core) may or may not be active. Block 4 below degrades to
 *     a selector that simply never matches; nothing breaks.
 *  4. This file is enqueued at wp_enqueue_scripts priority 100 by functions.php,
 *     after the Hello Elementor stylesheets and after the Elementor kit CSS.
 *
 * PLACEHOLDERS THAT MUST BE FILLED BEFORE USE
 * ---------------------------------------------------------------------------
 *   {{SITE_URL}}   Theme URI in the header above. Cosmetic only; the theme
 *                  installs and runs with the placeholder in place.
 *
 * PLACEHOLDERS INSIDE COMMENTED-OUT CODE (fill only if you uncomment it)
 *   {{KIT_ID}}                    numeric post ID of the active Elementor kit.
 *                                 NOT needed for the shipping selector - see
 *                                 the note in Block 4.
 *   {{GLOBAL_ID_SEASON_ACCENT}}   Elementor hash IDs for the custom Global
 *   {{GLOBAL_ID_SEASON_SOFT}}     Colors listed in design-system.md 8.3. These
 *   {{GLOBAL_ID_SEASON_GROUND}}   are unknowable until the kit exists; read them
 *                                 out of
 *                                 wp-content/uploads/elementor/css/post-{KIT_ID}.css
 *                                 and record the mapping in
 *                                 wiki/concepts/elementor-build-architecture.md.
 *
 * NEVER PUT A CREDENTIAL, LICENCE KEY, DOOR CODE OR WIFI PASSWORD IN THIS FILE.
 *
 * Source: design-system.md 2.2-2.6 (colour), 3.1-3.2 (type), 4.1-4.6 (space,
 * radius, shadow, border, motion, focus), 6.1 (breakpoints), 8.5 (block order).
 * =========================================================================== */


/* ===========================================================================
 * BLOCK 1 - PRIMITIVES + SEMANTICS (season-independent)
 *
 * Only the `USE`-marked steps from design-system.md 2.2 are defined. The
 * `reserve` steps are intentionally absent: an undefined token is a build
 * error you can see, an available-but-unvetted token is a contrast failure
 * you cannot.
 *
 * Two omissions are deliberate and must NOT be "fixed":
 *   --ll-stone-400 (#A2988A) is NOT defined. 2.84:1 on white, 2.31:1 on inset.
 *       Banned for text (colour rule 2 / 2.5). Defining it invites the misuse.
 *   --ll-gold      is NOT defined. There is only --ll-gold-on-dark, because
 *       #FFCF6B on white is 1.46:1. The prohibition lives in the token's name.
 * =========================================================================== */

:root {

  /* --- Stone: the shared neutral core. Identical in both seasons. --------- */
  --ll-stone-0:      #FFFFFF;  /* card surface, sheet surface                */
  --ll-stone-50:     #FAF7F2;  /* page background ("bone")                   */
  --ll-stone-75:     #F5F1EA;  /* inset / alternating band ("sand")          */
  --ll-stone-100:    #EDE7DD;  /* disabled fill, skeleton                    */
  --ll-stone-200:    #DFD7C9;  /* hairline divider, card edge                */
  --ll-stone-450:    #8C8271;  /* control border            (3.79:1 on white)*/
  --ll-stone-500:    #7D7365;  /* minimum legal grey for text (4.65:1 white) */
  --ll-stone-600:    #5E5548;  /* secondary / meta text, attribution line    */
  --ll-stone-800:    #2C2721;  /* body text ("ink")                          */
  --ll-stone-900:    #1C1915;  /* headings, dark ground ("ink-strong")       */

  /* --- Ember: the one action colour. Season-invariant. ------------------- */
  --ll-ember-50:     #FDF3EE;  /* selected-range fill in the calendar        */
  --ll-ember-200:    #F2C4AB;  /* text / border on dark grounds              */
  --ll-ember-500:    #B85A2E;  /* NON-TEXT ONLY (icons, 3px rules). 4.63:1   */
  --ll-ember-600:    #9E4820;  /* primary action, default state              */
  --ll-ember-700:    #7E3A1B;  /* primary action hover                       */
  --ll-ember-800:    #5E2C16;  /* primary action active / pressed            */

  /* --- Lake: water. Summer accent; winter ground. ------------------------ */
  --ll-lake-50:      #EEF6FB;  /* summer accent-soft fill; info notice bg    */
  --ll-lake-200:     #AFD5EA;  /* text / icon on winter dark ground          */
  --ll-lake-600:     #256084;  /* summer accent, large text / non-text       */
  --ll-lake-700:     #1E4D6B;  /* summer accent (text-safe) + info           */
  --ll-lake-800:     #183C53;  /* winter band ground                         */
  --ll-lake-900:     #12293A;  /* winter hero ground; focus-ring outer       */

  /* --- Honey: wood. Winter warmth. --------------------------------------- */
  --ll-honey-50:     #FDF6EC;  /* winter accent-soft fill                    */
  --ll-honey-200:    #F0D3A9;  /* winter text / rule on dark ground          */
  --ll-honey-300:    #E3B87C;  /* winter icon on dark ground                 */
  --ll-honey-700:    #785026;  /* winter accent on light surfaces  (7.06:1)  */
  --ll-gold-on-dark: #FFCF6B;  /* DARK GROUNDS ONLY. 1.46:1 on white.        */

  /* --- Forest: land. "available / included", plus summer outdoors tint. -- */
  --ll-forest-50:    #EFF5EA;  /* available-date tint, "included" chip bg    */
  --ll-forest-200:   #C6DCB7;  /* on dark ground                             */
  --ll-forest-600:   #3F6B2E;  /* ok / available / included                  */
  --ll-forest-800:   #2A4620;  /* ok text on forest-50                       */

  /* --- Semantic layer. This is what components reference. ---------------- *
   * Colour rule 4: no component reads a primitive directly. If a component
   * needs a primitive, the primitive is missing a semantic name - add one.  */
  --ll-surface-0:      var(--ll-stone-0);    /* cards, booking widget, sheets */
  --ll-surface-1:      var(--ll-stone-50);   /* page background              */
  --ll-surface-2:      var(--ll-stone-75);   /* alternating section band     */
  --ll-surface-inset:  var(--ll-stone-100);  /* disabled, skeleton           */

  --ll-ink-strong:     var(--ll-stone-900);  /* H1-H3                        */
  --ll-ink:            var(--ll-stone-800);  /* body                         */
  --ll-ink-muted:      var(--ll-stone-600);  /* meta, captions, ATTRIBUTION  */
  --ll-ink-faint:      var(--ll-stone-500);  /* LEGAL ON #FFFFFF ONLY        */

  --ll-line:           var(--ll-stone-200);  /* dividers, card edges         */
  --ll-line-control:   var(--ll-stone-450);  /* input/select/checkbox borders*/

  --ll-action:         var(--ll-ember-600);  /* every primary CTA, both seasons */
  --ll-action-hover:   var(--ll-ember-700);
  --ll-action-active:  var(--ll-ember-800);
  --ll-action-soft:    var(--ll-ember-50);   /* selected calendar range      */

  --ll-ok:             var(--ll-forest-600);
  --ll-ok-soft:        var(--ll-forest-50);
  --ll-err:            #A32A21;
  --ll-err-soft:       #FBECEA;
  --ll-info:           var(--ll-lake-700);
  --ll-info-soft:      var(--ll-lake-50);

  /* There is deliberately NO `warn` token. Caveats (no A/C, $25/bag, must
   * climb stairs, min age 25) are content for the house-rules block, not a
   * colour state. A yellow banner reads as a site error. (2.2) */

  --ll-focus:          #12293A;              /* focus ring outer             */
  --ll-focus-inner:    #FFFFFF;              /* focus ring inner             */

  /* =========================================================================
   * TYPOGRAPHY (3.1-3.2)
   * ===================================================================== */

  --ll-font-display: "Fraunces", "Bitter", Georgia, "Times New Roman", serif;
  --ll-font-text:    "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Sizes. Root stays at 16px - NEVER set html{font-size} in %, it breaks
   * user zoom preferences. Columns measured at 375px and 1440px. */
  --ll-t-display:  clamp(2rem, 1.55rem + 2.25vw, 3.5rem);   /* 33.2 -> 56px  */
  --ll-t-h2:       clamp(1.5rem, 1.28rem + 1.1vw, 2.25rem); /* 24.6 -> 36px  */
  --ll-t-h3:       clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);/* 20.3 -> 24px  */
  --ll-t-h4:       1.125rem;    /* 18px */
  --ll-t-lead:     1.125rem;    /* 18px */
  --ll-t-body:     1.0625rem;   /* 17px */
  --ll-t-sm:       0.9375rem;   /* 15px */
  --ll-t-caption:  0.8125rem;   /* 13px */
  --ll-t-overline: 0.75rem;     /* 12px */
  --ll-t-price-xl: 1.5rem;      /* 24px, tabular */
  --ll-t-price:    1.0625rem;   /* 17px, tabular */
  --ll-t-control:  1rem;        /* 16px - MAY NEVER BE REDUCED. Below 16px
                                 * mobile Safari zooms the viewport on focus
                                 * and throws the guest out of the booking
                                 * flow. (3.2) */

  /* Line heights, paired 1:1 with the sizes above. */
  --ll-lh-display:  1.08;
  --ll-lh-h2:       1.15;
  --ll-lh-h3:       1.25;
  --ll-lh-h4:       1.35;
  --ll-lh-lead:     1.60;
  --ll-lh-body:     1.65;
  --ll-lh-sm:       1.55;
  --ll-lh-caption:  1.45;
  --ll-lh-overline: 1.40;
  --ll-lh-price:    1.20;
  --ll-lh-control:  1.25;

  /* Weights and tracking. */
  --ll-fw-regular:  400;
  --ll-fw-semibold: 600;
  --ll-fw-bold:     700;
  --ll-ls-display:  -0.01em;
  --ll-ls-h2:       -0.005em;
  --ll-ls-overline:  0.08em;

  /* Measure. Applied via max-width, never by constraining the container. */
  --ll-measure:        68ch;   /* body copy                                  */
  --ll-measure-narrow: 56ch;   /* lead paragraphs, review quotes             */

  /* Price column. Belt and braces alongside font-variant-numeric:tabular-nums,
   * so alignment never depends on an OpenType feature being present. (3.1) */
  --ll-price-col: 7.5rem;

  /* =========================================================================
   * SPACING - 4px base, expressed in rem (4.1)
   * ===================================================================== */
  --ll-space-1:   0.25rem;   /*   4px */
  --ll-space-2:   0.5rem;    /*   8px */
  --ll-space-3:   0.75rem;   /*  12px */
  --ll-space-4:   1rem;      /*  16px */
  --ll-space-5:   1.25rem;   /*  20px */
  --ll-space-6:   1.5rem;    /*  24px */
  --ll-space-8:   2rem;      /*  32px */
  --ll-space-10:  2.5rem;    /*  40px */
  --ll-space-12:  3rem;      /*  48px */
  --ll-space-16:  4rem;      /*  64px */
  --ll-space-20:  5rem;      /*  80px */
  --ll-space-24:  6rem;      /*  96px */
  --ll-space-32:  8rem;      /* 128px */

  /* Fluid derivatives. These do most of the responsive work, which is why
   * most components need no breakpoint at all. */
  --ll-gutter:    clamp(1rem, 0.6rem + 1.6vw, 1.5rem);  /* 16 @375 -> 24 @1440 */
  --ll-section-y: clamp(2.5rem, 1.6rem + 4.5vw, 6rem);  /* 43 @375 -> 90.4 @1440 */
  --ll-card-pad:  clamp(1rem, 0.75rem + 1vw, 1.5rem);   /* 16 @375 -> 24 @1440 */
  --ll-stack:     clamp(0.75rem, 0.6rem + 0.6vw, 1rem); /* gap inside cards    */

  --ll-container:        1200px;
  --ll-container-narrow: 760px;

  /* Layout constants referenced from component calc(). --ll-header-h is
   * INVENTED - see the note at the foot of this file. */
  --ll-header-h:  56px;   /* mobile header height (6.3); lg override below   */
  --ll-bookbar-h: 68px;   /* sticky mobile book bar, excl. safe area (5.8)   */
  --ll-hero-min:  clamp(420px, 62vh, 640px);            /* 5.7               */

  /* =========================================================================
   * RADII (4.2)
   * ===================================================================== */
  --ll-r-xs:    4px;    /* chips, tags                                       */
  --ll-r-sm:    6px;    /* inputs, buttons                                   */
  --ll-r-md:   10px;    /* cards, calendar cells                             */
  --ll-r-lg:   14px;    /* booking widget, sheets (top corners on mobile)    */
  --ll-r-xl:   20px;    /* hero image mask on desktop                        */
  --ll-r-pill: 999px;   /* filter chips, badges                              */
  --ll-r-photo: 12px;

  /* =========================================================================
   * SHADOWS - warm-tinted, never neutral black (4.3)
   *
   * Content elevation stops at sh-3; only overlays get sh-sheet / sh-overlay.
   * NEVER combine sh-2 or above with a visible border - pick one edge
   * treatment. Cards on bone use border + sh-1; cards on #FFFFFF use sh-2 and
   * no border.
   * ===================================================================== */
  --ll-sh-1: 0 1px 2px rgba(28,25,21,.06), 0 1px 3px rgba(28,25,21,.08);
  --ll-sh-2: 0 2px 4px rgba(28,25,21,.05), 0 4px 12px rgba(28,25,21,.10);
  --ll-sh-3: 0 2px 6px rgba(28,25,21,.06), 0 6px 16px rgba(28,25,21,.12);
  --ll-sh-sheet:   0 -4px 24px rgba(28,25,21,.18);  /* sticky bar, bottom sheet */
  --ll-sh-overlay: 0 16px 48px rgba(28,25,21,.22);  /* lightbox, modal          */

  /* =========================================================================
   * BORDERS (4.4)
   * ===================================================================== */
  --ll-bw-hair:    1px;
  --ll-bw-control: 1px;
  --ll-bw-strong:  2px;
  --ll-bw-rule:    3px;   /* seasonal accent rule under section headings     */

  /* =========================================================================
   * MOTION (4.5)
   * ===================================================================== */
  --ll-dur-fast: 120ms;
  --ll-dur-base: 200ms;
  --ll-dur-slow: 320ms;   /* sheet transitions only                          */
  --ll-ease-out:   cubic-bezier(.2,.8,.2,1);
  --ll-ease-inout: cubic-bezier(.4,0,.2,1);

  /* =========================================================================
   * FOCUS RING - one definition, works on every background (4.6)
   *
   * The double ring guarantees at least one of its two colours clears 3:1:
   * outer #12293A on white = 14.96:1; inner #FFFFFF on the winter ground
   * #12293A = 14.96:1. A single-colour ring cannot do this.
   * ===================================================================== */
  --ll-focus-ring: 0 0 0 2px var(--ll-focus-inner), 0 0 0 5px var(--ll-focus);
}


/* ===========================================================================
 * BLOCK 2 - THE SEASONAL LAYER
 *
 * The only seven custom properties that change: the five of design-system.md
 * 2.4 plus the two conditional decorative rules from the table beneath it.
 * (design-system.md 8.5's comment says "the ONLY five (+1)" - it is seven;
 * see the note at the foot of this file.)
 *
 * SUMMER IS THE :root DEFAULT. An absent body class - a cache miss, a template
 * that bypasses body_class, an editor preview, a missing mu-plugin - therefore
 * renders SUMMER, not unstyled. Summer is the season in which the hot tub is
 * absent, so failing closed here is a compliance property, not a nicety.
 *
 * Specificity: :root is (0,1,0); body.ll-season-winter is (0,1,1) and wins.
 * =========================================================================== */

:root,
body.ll-season-summer {
  --ll-accent:         var(--ll-lake-700);   /* #1E4D6B */
  --ll-accent-soft:    var(--ll-lake-50);    /* #EEF6FB */
  --ll-accent-on-dark: var(--ll-lake-200);   /* #AFD5EA */
  --ll-ground:         var(--ll-stone-900);  /* #1C1915 */
  /* The `.55 @ 55%` stop is REQUIRED by the positional rule in 2.5 (overlay
   * text sits in the bottom 45%, where alpha must be >= .55). A plain two-stop
   * 0 -> .72 ramp only reaches .55 at 76.4% depth. DO NOT SIMPLIFY. */
  --ll-scrim: linear-gradient(180deg,
                rgba(28,25,21,0)    0%,
                rgba(28,25,21,.55) 55%,
                rgba(28,25,21,.72) 100%);
  --ll-rule-on-light:  var(--ll-lake-700);   /* legal on surface-0/1/2       */
  --ll-rule-on-dark:   var(--ll-lake-200);   /* legal on --ll-ground only    */
}

body.ll-season-winter {
  --ll-accent:         var(--ll-honey-700);  /* #785026 */
  --ll-accent-soft:    var(--ll-honey-50);   /* #FDF6EC */
  --ll-accent-on-dark: var(--ll-honey-200);  /* #F0D3A9 */
  --ll-ground:         var(--ll-lake-900);   /* #12293A */
  /* Winter needs no extra stop: alpha = .25 + .57t is >= .55 from 52.6% down. */
  --ll-scrim: linear-gradient(180deg,
                rgba(18,41,58,.25)   0%,
                rgba(18,41,58,.82) 100%);
  --ll-rule-on-light:  var(--ll-honey-700);
  /* Winter's on-dark rule is gold. It is 1.37:1 on the bone page background,
   * which is why there is no single --ll-rule token. (2.4) */
  --ll-rule-on-dark:   var(--ll-gold-on-dark);
}


/* ===========================================================================
 * BLOCK 3 - RESPONSIVE TOKEN OVERRIDES
 *
 * Breakpoints per design-system.md 6.1. 1025px is the one hard boundary: it is
 * where the sticky book bar turns off and the sticky booking rail turns on.
 * =========================================================================== */

@media (min-width: 1025px) {
  :root {
    --ll-header-h: 72px;   /* INVENTED - see the note at the foot of this file */
  }
}


/* ===========================================================================
 * BLOCK 4 - REPOINT ELEMENTOR'S KIT VARIABLES AT OURS
 *
 * Elementor writes its globals to `.elementor-kit-{ID}` - specificity (0,1,0).
 * The selector below is `body` (type, 0,0,1) + one attribute selector (0,1,0)
 * = (0,1,1), which beats it REGARDLESS OF STYLESHEET ORDER.
 *
 * DEVIATION FROM design-system.md 8.5, DELIBERATE: that section writes the
 * selector as `body.elementor-kit-KIT_ID`, which requires someone to paste a
 * numeric post ID into this file. An unfilled ID does not error - it produces
 * a selector that silently never matches, Elementor's literal kit hexes win,
 * and the front end quietly diverges from --ll-*. The attribute selector has
 * identical specificity, needs no ID, and cannot be forgotten. The ID-bearing
 * form is kept below, commented, in case a future build needs to scope this to
 * one specific kit.
 *
 * NOTE WHAT IS NOT HERE: the seasonal accent. It is not one of Elementor's four
 * roles, and putting it in "Accent" would make the CTA change colour with the
 * season - a direct violation of colour rule 7. Accent is --ll-action, always.
 * =========================================================================== */

body[class*="elementor-kit-"] {
  --e-global-color-primary:   var(--ll-ink-strong);  /* #1C1915 headings      */
  --e-global-color-secondary: var(--ll-ink-muted);   /* #5E5548 subheadings   */
  --e-global-color-text:      var(--ll-ink);         /* #2C2721 body          */
  --e-global-color-accent:    var(--ll-action);      /* #9E4820 links/buttons */
}

/* --- Scoped alternative (uncomment and fill {{KIT_ID}} only if needed) -----
body.elementor-kit-{{KIT_ID}} {
  --e-global-color-primary:   var(--ll-ink-strong);
  --e-global-color-secondary: var(--ll-ink-muted);
  --e-global-color-text:      var(--ll-ink);
  --e-global-color-accent:    var(--ll-action);
}
--------------------------------------------------------------------------- */

/* --- Custom Global Colors (design-system.md 8.3) ---------------------------
 * Elementor assigns custom globals HASH ids, e.g. --e-global-color-7deaba8;
 * only the four system slots get readable names. Create the eleven swatches in
 * Site Settings -> Global Colors, then read the generated IDs out of
 * wp-content/uploads/elementor/css/post-{KIT_ID}.css, paste them below and
 * uncomment. Without this the seasonal swatches an owner picks in the editor
 * will not follow the season on the front end.

body[class*="elementor-kit-"] {
  --e-global-color-{{GLOBAL_ID_SEASON_ACCENT}}: var(--ll-accent);
  --e-global-color-{{GLOBAL_ID_SEASON_SOFT}}:   var(--ll-accent-soft);
  --e-global-color-{{GLOBAL_ID_SEASON_GROUND}}: var(--ll-ground);
}
--------------------------------------------------------------------------- */


/* ===========================================================================
 * BLOCK 5 - MOTION AND FOCUS GUARDS
 *
 * Two rules, both verbatim from design-system.md 4.5 / 4.6. They are the only
 * non-token declarations in this file, and both are safety guards rather than
 * styling: they no-op until a component with the matching class exists.
 * Component CSS proper does NOT belong here.
 * =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --ll-dur-fast: 1ms;
    --ll-dur-base: 1ms;
    --ll-dur-slow: 1ms;
  }
  .ll-sheet      { transform: none !important; }  /* fade, never slide */
  .ll-hero__media{ animation:  none !important; } /* no Ken Burns      */
}

.ll-focusable:focus-visible {
  box-shadow: var(--ll-focus-ring);
  outline: 2px solid transparent;   /* becomes visible in forced-colors mode */
  outline-offset: 2px;
  border-radius: inherit;
}


/* ===========================================================================
 * NOTES ON WHAT WAS INVENTED OR RESOLVED HERE
 * ---------------------------------------------------------------------------
 * 1. --ll-header-h IS INVENTED. design-system.md 5.1 and 7.1 both use it inside
 *    calc() - `sticky; top: calc(var(--ll-header-h) + 16px)` and
 *    `scroll-margin-top: calc(var(--ll-header-h) + 16px)` - but NO SECTION EVER
 *    DEFINES IT. An undefined custom property inside calc() makes the whole
 *    declaration invalid at computed-value time, so the sticky booking rail
 *    would silently stop sticking and SC 2.4.11 mitigation would silently stop
 *    mitigating, with no console error. 56px is taken from 6.3 ("Header: 56px")
 *    for mobile; the 72px desktop value is a guess. VERIFY BOTH against the
 *    built Elementor header template (T1) and correct them here.
 *
 * 2. --ll-lh-*, --ll-fw-*, --ll-ls-* are named by this file. 3.2's scale table
 *    states every line-height, weight and tracking value but gives them no
 *    token names. The values are transcribed exactly; only the names are new.
 *
 * 3. design-system.md 8.5 block 2 is commented "the ONLY five (+1) that
 *    change" and then defines SEVEN properties (the five of 2.4 plus both
 *    --ll-rule-on-* from the table beneath it). The count in that comment is
 *    wrong; the code is right. Seven are defined here.
 *
 * 4. The Elementor repoint selector is an intentional deviation - see Block 4.
 *
 * 5. NOT DEFINED HERE, ON PURPOSE, because wp-content/mu-plugins/loon-lake-core.php
 *    owns them: the season flag, the two Elementor Dynamic Tags, the
 *    [loon_lake_seasonal] shortcode, the ll-hero / ll-wide / ll-card image
 *    sizes, the cache purge and the JSON-LD graph. This file only consumes the
 *    ll-season-* body class.
 * =========================================================================== */

/* ===========================================================================
 * 6. Booking-page layout (DIRECT_STAY mockup, Wander-derived, 2026-10-27;
 *    built 2026-10-29). Tokens from the mockup: Inter, ink #202020, muted
 *    #636363, surface #F7F7F7, border #D1D5DC, accent #00733D, radius 12/8,
 *    content 644 + card 400 in a 1117 container. Season-neutral; the season
 *    class only swaps the hero slot content (mu-plugin). This file is appended
 *    to style.css by build/pages/apply_pages.php's caller; keep both in sync.
 * =========================================================================== */
:root { --llm-ink:#202020; --llm-muted:#636363; --llm-surface:#F7F7F7; --llm-border:#D1D5DC; --llm-accent:#00733D; --llm-radius:12px; }
body, .elementor-widget-text-editor, .elementor-widget-heading .elementor-heading-title { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--llm-ink); }
.site-header { padding: 14px 24px; }
.site-header .site-title a, .site-header .site-branding .site-title { font-weight: 600; font-size: 24px; color: var(--llm-ink); text-decoration: none; }
.site-header .site-description { display: none; }
.site-header .site-navigation ul.menu li a { border-radius: 999px; padding: 8px 14px; color: var(--llm-ink); font-weight: 500; }
.site-header .site-navigation ul.menu li a:hover { background: var(--llm-surface); }
.ll-gallery { display: grid !important; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 8px; border-radius: var(--llm-radius); overflow: hidden; position: relative; padding: 0 !important; }
.ll-gallery > .elementor-element { margin: 0; min-width: 0; }
.ll-gallery .ll-tile-0 { grid-row: 1 / span 2; grid-column: 1; }
.ll-gallery .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ll-gallery .elementor-widget-image, .ll-gallery .elementor-widget-container, .ll-gallery figure, .ll-gallery a { height: 100%; display: block; }
.ll-show-all { position: absolute; right: 16px; bottom: 16px; background: #fff; color: var(--llm-ink); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 500; text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.ll-two-col { display: flex !important; gap: 72px; align-items: flex-start; }
.ll-main { flex: 1 1 644px; max-width: 644px; }
.ll-aside { flex: 0 0 400px; width: 400px; position: sticky; top: 24px; }
.ll-eyebrow { color: var(--llm-muted); margin: 0; }
.ll-h1 .elementor-heading-title { font-size: 36px; font-weight: 600; margin: 4px 0 8px; }
.ll-facts { margin: 0 0 20px; }
.ll-review-box { display: flex; gap: 24px; align-items: center; border: 1px solid var(--llm-border); border-radius: var(--llm-radius); padding: 24px; margin: 0 0 24px; }
.ll-review-box .ll-review-score { font-size: 22px; font-weight: 600; text-align: center; }
.ll-review-box small { display: block; color: var(--llm-muted); font-size: 13px; font-weight: 400; }
.ll-trust { list-style: none; padding: 0 0 24px; margin: 0 0 32px; border-bottom: 1px solid var(--llm-border); }
.ll-trust li { margin: 0 0 16px; }
.ll-h2 { font-size: 24px; font-weight: 600; margin: 8px 0 12px; }
.ll-pill { display: inline-block; border: 1px solid var(--llm-ink); border-radius: 999px; padding: 10px 18px; color: var(--llm-ink); text-decoration: none; margin: 8px 0 32px; }
.ll-why { background: var(--llm-surface); border-radius: var(--llm-radius); padding: 28px 36px; margin: 0 0 32px; }
.ll-why h3 { margin: 0 0 8px; font-size: 20px; }
.ll-card { border-radius: var(--llm-radius); padding: 28px !important; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 3px 12px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04); }
.ll-card-kicker { color: var(--llm-muted); font-size: 14px; margin: 0 0 12px; }
.ll-card-note { color: var(--llm-muted); font-size: 13px; text-align: center; margin: 12px 0 0; }
.ll-card form { width: 100%; }
.ll-card .mphb-datepick-group, .ll-card .mphb-availability-form-group, .ll-card .mphb_sc_search-form-wrapper p, .ll-card .mphb-reserve-btn-wrapper, .ll-card .mphb-booking-form p { margin: 0 0 12px; }
.ll-card input[type=text], .ll-card select, .ll-card .mphb-datepick, .ll-card .mphb-input { width: 100%; border: 1px solid var(--llm-border); border-radius: 8px; padding: 12px 14px; font: inherit; }
.ll-card .button, .ll-card button, .ll-card input[type=submit], .ll-card .mphb-reserve-btn, .ll-card .mphb-confirm-reservation-button { width: 100%; background: var(--llm-accent); color: #fff; border: 0; border-radius: 999px; padding: 16px; font-weight: 600; font-size: 16px; cursor: pointer; }
.ll-card .mphb-price, .ll-card .mphb-room-type-price-for-dates { font-size: 22px; font-weight: 600; }
.ll-btn .elementor-button { background: var(--llm-accent); border-radius: 999px; padding: 14px 24px; font-weight: 600; }
.ll-photo-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ll-photo-grid img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--llm-radius); }
.ll-page-hero img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--llm-radius); }
.ll-winter-hero { background: #1C1915; color: #FAF7F2; border-radius: var(--llm-radius); padding: 48px; }
.ll-winter-hero h1, .ll-winter-hero h2 { color: #FAF7F2; font-size: 36px; margin: 8px 0; }
.ll-winter-hero .ll-eyebrow { color: #FFCF6B; }
.ll-winter-tiles { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ll-winter-tiles img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--llm-radius); }
.ll-amenities { columns: 2; column-gap: 40px; }
.ll-amenities h3 { font-size: 16px; margin: 16px 0 6px; break-after: avoid; }
.ll-amenities ul { margin: 0 0 8px 18px; padding: 0; }
.ll-review { border: 1px solid var(--llm-border); border-radius: var(--llm-radius); padding: 20px 24px; margin: 0 0 16px; }
.ll-review footer { color: var(--llm-muted); font-size: 14px; margin-top: 8px; }
.ll-mobile-bar { display: none; }
@media (max-width: 1024px) {
  .ll-two-col { flex-direction: column; gap: 32px; }
  .ll-main { max-width: none; }
  .ll-aside { position: static; width: 100%; flex-basis: auto; }
  .ll-gallery { grid-template-columns: 1fr; grid-template-rows: 260px; }
  .ll-gallery .ll-tile-1, .ll-gallery .ll-tile-2, .ll-gallery .ll-tile-3, .ll-gallery .ll-tile-4 { display: none; }
  .ll-gallery .ll-tile-0 { grid-row: 1; }
  .ll-photo-grid, .ll-winter-tiles { grid-template-columns: repeat(2, 1fr); }
  .ll-amenities { columns: 1; }
  .ll-mobile-bar { display: flex; position: sticky; bottom: 0; justify-content: space-between; align-items: center; background: #fff; border-top: 1px solid var(--llm-border); padding: 12px 16px; font-size: 14px; }
  .ll-mobile-bar .ll-reserve { background: var(--llm-accent); color: #fff; border-radius: 999px; padding: 12px 22px; font-weight: 600; text-decoration: none; }
}
@media (max-width: 480px) {
  .ll-photo-grid, .ll-winter-tiles { grid-template-columns: 1fr; }
  .ll-h1 .elementor-heading-title { font-size: 28px; }
  .ll-winter-hero { padding: 28px 20px; }
}
/* 6b. Section renderers used by build/pages/generate_pages.py */
.ll-two-column { display: flex !important; gap: 32px; align-items: flex-start; } .ll-col-text { flex: 1 1 55%; } .ll-col-photo-wrap { flex: 1 1 45%; } .ll-col-photo img { width: 100%; border-radius: var(--llm-radius); object-fit: cover; }
.ll-card-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 8px 0 24px; } .ll-card-links a { display: block; border: 1px solid var(--llm-border); border-radius: var(--llm-radius); padding: 20px 24px; color: var(--llm-ink); text-decoration: none; } .ll-card-links a strong { display: block; margin-bottom: 4px; } .ll-card-links a:hover { background: var(--llm-surface); }
.ll-faq { border-bottom: 1px solid var(--llm-border); padding: 12px 0; } .ll-faq summary { font-weight: 600; cursor: pointer; } .ll-faq div { padding: 8px 0 4px; }
.ll-micro { color: var(--llm-muted); font-size: 14px; margin: -8px 0 20px; } .ll-btn-secondary .elementor-button { background: transparent; color: var(--llm-ink); border: 1px solid var(--llm-ink); }
@media (max-width: 767px) { .ll-two-column { flex-direction: column; } .ll-card-links { grid-template-columns: 1fr; } }
/* 6c. Boxed Elementor containers wrap children in .e-con-inner; the grid and flex rules must land there. */
.ll-gallery > .e-con-inner, .ll-gallery.e-con-full { display: grid !important; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 8px; border-radius: var(--llm-radius); overflow: hidden; position: relative; width: 100%; max-width: 1117px; margin: 0 auto; }
.ll-gallery > .e-con-inner > .elementor-element { margin: 0; min-width: 0; width: auto; }
.ll-gallery .ll-tile-0 { grid-row: 1 / span 2; grid-column: 1; }
.ll-gallery .elementor-widget-html { position: static; }
.ll-two-col > .e-con-inner { display: flex !important; gap: 72px; align-items: flex-start; }
.ll-two-col > .e-con-inner > .ll-main { width: 644px; max-width: 644px; flex: 0 0 644px; }
.ll-two-col > .e-con-inner > .ll-aside { width: 400px; flex: 0 0 400px; position: sticky; top: 24px; }
.ll-winter-tiles > .e-con-inner, .ll-photo-grid > .e-con-inner { display: grid !important; gap: 8px; }
.ll-winter-tiles > .e-con-inner { grid-template-columns: repeat(3, 1fr); } .ll-photo-grid > .e-con-inner { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ll-winter-tiles > .e-con-inner > .elementor-element, .ll-photo-grid > .e-con-inner > .elementor-element { width: auto; min-width: 0; }
.ll-two-column > .e-con-inner { display: flex !important; gap: 32px; align-items: flex-start; }
.ll-two-column > .e-con-inner > .ll-col-text { flex: 1 1 55%; width: auto; } .ll-two-column > .e-con-inner > .ll-col-photo-wrap { flex: 1 1 45%; width: auto; }
@media (max-width: 1024px) {
  .ll-two-col > .e-con-inner { flex-direction: column; gap: 32px; }
  .ll-two-col > .e-con-inner > .ll-main, .ll-two-col > .e-con-inner > .ll-aside { width: 100%; max-width: none; flex-basis: auto; position: static; }
  .ll-gallery > .e-con-inner { grid-template-columns: 1fr; grid-template-rows: 260px; }
  .ll-winter-tiles > .e-con-inner, .ll-photo-grid > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) { .ll-two-column > .e-con-inner { flex-direction: column; } }
@media (max-width: 480px) { .ll-winter-tiles > .e-con-inner, .ll-photo-grid > .e-con-inner { grid-template-columns: 1fr; } }
/* 6d. Gallery: full container width, and the "show all" link out of the grid flow. */
.ll-gallery, .ll-winter-tiles, .ll-photo-grid { --content-width: 100%; }
.ll-gallery > .e-con-inner { width: 100% !important; max-width: var(--container-max-width, 1117px) !important; }
.ll-gallery .elementor-widget-html { position: absolute !important; right: 16px; bottom: 16px; width: auto !important; margin: 0; z-index: 2; }
.ll-gallery .elementor-widget-html .elementor-widget-container { background: transparent; }
.ll-show-all { position: static; }
.ll-winter-tiles > .e-con-inner, .ll-photo-grid > .e-con-inner { width: 100% !important; max-width: 100% !important; }
/* 6e. Grid containers are full-width Elementor containers (no .e-con-inner); size them like the boxed ones. */
.ll-gallery.e-con-full, .ll-winter-tiles.e-con-full, .ll-photo-grid.e-con-full { width: 100%; max-width: var(--container-max-width, 1117px); margin-left: auto; margin-right: auto; }
.ll-winter-tiles.e-con-full, .ll-photo-grid.e-con-full { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ll-photo-grid.e-con-full { gap: 12px; }
.ll-gallery.e-con-full > .elementor-element, .ll-winter-tiles.e-con-full > .elementor-element, .ll-photo-grid.e-con-full > .elementor-element { width: auto; min-width: 0; margin: 0; }
.ll-hero-winter .ll-winter-tiles.e-con-full { max-width: none; }
@media (max-width: 1024px) { .ll-gallery.e-con-full { grid-template-columns: 1fr; grid-template-rows: 260px; } .ll-winter-tiles.e-con-full, .ll-photo-grid.e-con-full { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ll-winter-tiles.e-con-full, .ll-photo-grid.e-con-full { grid-template-columns: 1fr; } }