/* =============================================================================
 * FILE:      ES_Core.css
 * LOCATION:  public_html/assets/CSS/ES_Core.css (linked as /assets/CSS/ES_Core.css)
 * PART OF:   ease-see (ease-see.com) - central stylesheet
 * PURPOSE:   The single source of styling for ease-see. Holds the brand design
 *            tokens in :root and every shared class. No page contains <style>
 *            or style="" - all styling lives here.
 *
 * TOKENS:    Colours/type below are APPROXIMATE, read from the v1.0 identity
 *            mockup. Replace with the exact brand values (hex + real typeface)
 *            when the brand pack surfaces - change them HERE only and every
 *            surface updates. This is the token seam: today file-based; it can
 *            become DB-driven later by generating :root from data without
 *            touching any page.
 * CREATED:   2026-09-12
 * UPDATED:   2026-09-19  Two additions, both for the page editor / map work:
 *              1. .es-map-legend / .es-map-legend-item / .es-map-legend-swatch
 *                 / .es-map-legend-count / .es-map-caption - classes
 *                 ES_MapBlock.php's legend and caption markup already emit
 *                 but had no rules yet.
 *              2. .es-langf textarea min-height - the page editor's per-
 *                 language text fields were too shallow, forcing scrolling to
 *                 read/edit copy. This replaces a scoped <style> override that
 *                 had been added directly to admin/pages/index.php as a
 *                 stopgap before this file had been seen - that override is
 *                 being removed from that page now that the real fix belongs
 *                 here, per this file's own stated rule (no <style> in pages).
 *            NOTED, NOT FIXED: .es-map-empty-text references var(--muted,
 *            #666) - no --muted token exists (the real one is --es-muted), so
 *            it silently runs on the #666 fallback. Pre-existing, harmless,
 *            spotted in passing while adding the rules above it - not fixed
 *            here since it wasn't what was asked.
 * UPDATED:   2026-09-19  (later same day) Two more additions, from first-use
 *            feedback on the page/map editors:
 *              - .es-media-slot-preview--lg - hero's image preview was the
 *                same tiny size as every other block's; this gives it room.
 *              - .es-pinclass-langs - spacing for the new per-language pin-
 *                class label override inputs in admin/map/index.php.
 * UPDATED:   2026-09-22  Added styling for the operator-dominant reservation
 *            page (operator_trust, reservation_note, reserve, activity_tile
 *            blocks) and the admin operator/review editor, built up over
 *            several rounds of testing that day. CONSOLIDATED THIS ENTRY,
 *            SAME DAY: those rounds had each been delivered as "append this
 *            whole file" with no clear replace step, so the file had been
 *            accumulating full duplicate copies of the same rules on every
 *            round (confirmed directly from the live file - the same block
 *            appeared 8+ times). This entry replaces all of that with each
 *            rule appearing exactly once, using its final/correct version
 *            from the last round it was touched in. Nothing new added here -
 *            a cleanup pass only.
 * UPDATED:   2026-09-24  Added the "Things to do here" block and the ACTIVITY
 *            DEVICE (.es-block-things-to-do, .es-things-to-do-grid,
 *            .es-act-dev*, .es-act-btn, .es-act-arrow) - see that section's
 *            own comment, placed straight after the old activity_tile rules.
 *            Delivered as a FULL REPLACEMENT of this file (not an append), so
 *            nothing is duplicated - every earlier rule is unchanged, word
 *            for word. The old .es-activity-tile rules stay until the
 *            activity_tile block is removed.
 *            (later same day) Added .es-flag-empty - admin field groups whose
 *            EMPTY inputs are highlighted amber (something is missing), using
 *            :placeholder-shown, so it clears live as you type with no
 *            script. First used on admin/activities/. Also full replacement.
 *            (later again) Added the NEARBY row of "Things to do here"
 *            (.es-nearby, .es-nearby-grid, .es-nearby-card, .es-nearby-thumb,
 *            .es-nearby-name, .es-nearby-town, .es-nearby-dist) - compact
 *            cards visibly lighter than the main row. Full replacement again.
 * UPDATED:   2026-09-26  Added the operations-grid cell states on the Operators
 *            screen (.es-cell-state, .es-cell-ok / -gaps / -bad / -paused):
 *            the live/paused choice's own colour shows its tile status,
 *            using the existing ok/warn/danger tokens. Full replacement.
 *            (later) MENUS AT ANY DEPTH: .es-nav-head (label link + opener
 *            side by side), .es-nav-toggle--caret, .es-nav-link, nested
 *            .es-dropdown opening to the SIDE on desktop and expanding in
 *            place, indented, in the phone overlay. Full replacement.
 *            (later) .es-act-dev-towns--compact - 7+ towns in a region /
 *            destination activity card shown as wrapping chips (a mini-map
 *            trial the same day was dropped and its styles removed).
 *            Full replacement.
 * UPDATED:   2026-09-27  DOCUMENT / LEGAL PAGES (terms, privacy, legal-notice),
 *            appended at the end of this file:
 *              - .es-block-document, .es-doc-title, .es-doc-updated,
 *                .es-doc-body (+ its h2/h3/h4, p, ul/ol/li, strong),
 *                .es-doc-link - the 'document' block (Render/ES_Document.php).
 *                Narrower reading width than other blocks (long text);
 *                lists get their indent back (the reset above zeroes it);
 *                headings leave room when jumped to by #anchor.
 *              - .es-legal-notice (+ -text, -link) - the permanent notice under
 *                the header on a legal page shown to a non-French visitor,
 *                using the existing warn tokens. The pop-up itself reuses the
 *                coming-soon .es-cs-* rules - no new pop-up styles.
 *              - editor: a document block's per-language fields stack full
 *                width, and its body field is much taller than other bodies.
 *            Nothing above changed. Full replacement.
 * UPDATED:   2026-09-28  FONT SELF-HOSTED: the Google Fonts @import for Jost is
 *            replaced by an @font-face pointing at /assets/fonts/Jost-var.woff2
 *            (official Jost variable font from Google's font repository, cut to
 *            weights 300-700 and Latin characters incl. French; licence file
 *            beside it). Same font, same weights - no visitor IP goes to Google.
 *            Nothing else changed. Full replacement.
 * UPDATED:   2026-09-28  (later) .es-optout-note - the analytics opt-out
 *            confirmation line, fixed at the foot of the screen (appended at
 *            the end of this file). Nothing else changed. Full replacement.
 * UPDATED:   2026-09-29  FORM BLOCK (Contact Us and any later form), appended
 *            at the end of this file: .es-block-form, .es-form, .es-form-group,
 *            .es-form-legend, .es-form-field, .es-form-label, .es-form-input,
 *            .es-form-consent (+ -text, -link), .es-form-err, .es-form-status,
 *            .es-form-submit, .es-form-sent (+ -body). Reading width like the
 *            document block; existing tokens only (ochre focus, danger for
 *            errors, ok for the thank-you panel). A field with an error is
 *            marked by the script with aria-invalid, styled here. [hidden]
 *            always wins, so the script can show/hide by the attribute alone.
 *            A form straight after a text block drops its top padding, so
 *            the page heading sits close to the form (the two blocks'
 *            paddings were stacking into a large gap). Phone field: ONE box -
 *            prefix segment on the left over an invisible native select,
 *            then the number, same height (.es-form-phone, -pfx, -pfx-show,
 *            -cc, -num; .es-form.es-js turns the one-box look on). Without
 *            JavaScript they sit side by side as plain fields. Choice tiles:
 *            .es-form-choice(-tiles, -tile, -text) - radio buttons drawn as
 *            wrapping pill buttons, chosen = ochre; hidden groups/fields
 *            (show only when) respect [hidden]. The
 *            "Did you mean +33 ...?" line under it: .es-form-phone-suggest(-btn).
 * UPDATED:   2026-09-30  ADMIN CONVERSATIONS LIST, appended at the end:
 *            .es-conv-list / .es-conv-row (one link per row - click anywhere),
 *            .is-unread (ochre edge, bold name), .es-conv-head, .es-conv-from,
 *            .es-conv-snippet, .is-urgent (red edge and tint - 2026-09-30);
 *            ADMIN NAV (2026-09-30, in the admin chrome section): header
 *            links are large buttons on every admin page, and a page's lone
 *            first-line link becomes a big Back button; THE SHARED ADMIN
 *            BAR (.es-admin-home, .es-admin-nav*, .es-admin-sub*, back
 *            button) for Render/ES_AdminBar.php;
 *            narrow screens show name, date, unread and
 *            first words only. The admin forms list reuses these rows with
 *            .es-forms-row (its own six columns). No existing rule changed.
 *            Full replacement.
 *            No existing rule changed. Full replacement.
 * UPDATED:   2026-10-02  LOGO AS AN IMAGE: .es-site-logo-img (header bar and
 *            mobile menu) and .es-footer-logo-img (footer) set the height of
 *            the logo picture that ES_Page.php's es_site_logo_inner() now
 *            draws from the media library; the width follows. Added straight
 *            after the existing text-logo rules (header, footer, and the
 *            desktop size in the min-width block). The text-logo rules stay -
 *            they are still used whenever no logo image is set. No existing
 *            rule changed. Full replacement.
 * UPDATED:   2026-10-03  REVIEWS BLOCK (reviews of ease-see, ES_Blocks.php
 *            'reviews'): added at the END of this file - the list layout
 *            (.es-reviews-list: one column, two from 760px; cards there are
 *            full-width and can be hidden by a filter) and its filter
 *            buttons (.es-reviews-filters, .es-reviews-filter, .is-on). The
 *            carousel layout reuses the existing operator review rules
 *            unchanged. No existing rule changed. Full replacement.
 * UPDATED:   2026-10-06  MAP BLOCK WIDTH. A map block (.es-block-map) has
 *            no .es-block-inner of its own - on town, region and destination
 *            pages it takes its width from the page's .es-place-main, but a
 *            reservation page (and any content page) has no such wrapper,
 *            so the map ran the full width of the screen. .es-block-map now
 *            has the same width and side padding as .es-block-inner;
 *            inside .es-place-main it is reset to exactly what it was, so
 *            maps on those pages are unchanged. Nothing else changed.
 * UPDATED:   2026-10-06  (later) "WHAT PEOPLE SAID" - the operator reviews
 *            row inside "Things you can do here" (ES_Blocks.php
 *            es_blk_place_reviews_html(), same date): .es-place-reviews,
 *            .es-place-reviews-grid (one column, three from 760px) and
 *            .es-place-review-about (the line naming the activity and
 *            operator, a link when there is a page to go to). The card is
 *            the existing .es-review-card; in this row it only stops being
 *            a fixed-width carousel item and takes the white surface, since
 *            the section behind it is already bone. New rules at the end of
 *            the file; no existing rule changed.
 * UPDATED:   2026-10-06  (later again) TRANSLATION CONSOLE - what can be
 *            edited is now visible (admin/translation/index.php, same
 *            date). In the console's tables: a cell that CAN be changed
 *            (.es-cell) is drawn as a white box, like a field; missing
 *            wording (.es-tcell-empty) is amber; a cell that cannot be
 *            changed (.es-tcell-locked) is grey with a dashed edge and a
 *            "not allowed" pointer; long wording (.es-tcell-long) keeps its
 *            line breaks and scrolls inside the cell; and the multi-line
 *            edit box (.es-cell-input--multi). New rules at the end of the
 *            file; no existing rule changed.
 * UPDATED:   2026-10-06  (evening) RESERVATION PAGE PRESENTATION - the shared
 *            reservation page, as agreed from a mockup (ES_Blocks.php, same
 *            date): a dark opening band with a large heading, the score and
 *            an ochre Reserve button (.es-res-open, -inner, -text, -action,
 *            -ratings); the operator's reviews under their own heading, in
 *            larger cards (.es-res-reviews, -inner, -head); the new "About
 *            {operator}" block (.es-block-operator-about, .es-op-about,
 *            -media, -text, -head); and a dark closing band (.es-res-close,
 *            -line, -action). The Reserve button (.es-reserve-btn) is now
 *            ochre with ink text, full width on a phone and its own width
 *            from 760px. New rules at the END of the file; no existing rule
 *            was edited - where a new rule replaces an older one (the
 *            reservation heading, the Reserve button, the reserve block's
 *            padding) it does so by coming later, and says so beside it.
 *            Review cards are larger ONLY inside the operator block; the
 *            cards on town pages and in the 'reviews' block are unchanged.
 *            Existing tokens only. Full replacement.
 *            (later the same evening) The closing band is no longer the full
 *            width of the screen - it read as part of the footer. It is now
 *            a dark panel with rounded corners, kept to the page width, on
 *            the bone page ground with space beneath it (.es-block-reserve,
 *            .es-res-close). Only those rules changed. Full replacement.
 * UPDATED:   2026-10-07  RESERVATION PAGE CONTENT BLOCKS (ES_Blocks.php, same
 *            date). New rules at the END of the file; no existing rule was
 *            edited. Existing tokens only. Full replacement.
 *            - The opening band's optional content: the small line above a
 *              typed headline (.es-res-open-eyebrow), the intro line
 *              (.es-res-open-intro), and the split band used when a photo is
 *              chosen (.es-res-open--photo, .es-res-open-split, -panel,
 *              -panel-inner, -photo): photo on top on a phone, words left
 *              and photo right from 760px.
 *            - BLOCK operator_reviews (.es-block-operator-reviews): the
 *              operator's reviews as a block of their own - same ground,
 *              heading and larger cards they had inside the operator block.
 *            - BLOCK facts_row (.es-block-facts-row, .es-facts-grid,
 *              .es-fact, -label, -value, -note).
 *            - BLOCK photo_row (.es-block-photo-row, .es-photo-row-head,
 *              .es-photo-grid, .es-photo-card, -media, -head, -body).
 *            - BLOCK pull_quote (.es-block-pull-quote, .es-pull-quote,
 *              -text, -by); its quotation marks are added here.
 * UPDATED:   2026-10-07  (later) THE HEADER STAYS IN VIEW ON A PHONE. Below
 *            760px the public header (.es-site-header - logo + hamburger)
 *            now stays at the top of the screen while the page scrolls, so
 *            the ease-see name is always visible. Desktop is unchanged. It
 *            sits above page content and BELOW every pop-up (the "More..."
 *            window, the menu, the lightbox). Because a map's own layers
 *            are numbered far higher than anything on this site, each map
 *            is now kept in a layer of its own (.es-map-canvas) - without
 *            that a map would slide OVER the header, and over the open
 *            menu. New rules at the END of the file; no existing rule was
 *            edited. Full replacement.
 * UPDATED:   2026-10-07  (later) THE VISUAL EDITOR, STEP 1
 *            (admin/pages/visual.php): the bar across the top (.es-ve-bar,
 *            -group, -tools, -link, -back, -title, -kicker, -pill, -note,
 *            -form, -btn, -seg) and the frame that shows the real page beneath it
 *            (.es-ve-stage, -frame; .es-ve-stage--phone = the 390px view).
 *            Admin only - nothing here applies to the public site. New rules
 *            at the END of the file; no existing rule was edited. Existing
 *            tokens only. Full replacement.
 * UPDATED:   2026-10-07  (later) THE VISUAL EDITOR, STEP 2 - editing in place.
 *            Two groups of new rules at the END of the file; no existing
 *            rule was edited.
 *            - On the editor screen (admin/pages/visual.php): the saved /
 *              not-saved line (.es-ve-status), the legend under the bar
 *              (.es-ve-legend, .es-ve-key--type / --photo / --lock), the
 *              Edit / Preview switch (.es-ve-seg--mode) and the "Choose an
 *              image" window (.es-ve-picker, -note, -search, .es-ve-pickcard).
 *            - INSIDE the page, and ONLY while it is being edited: every
 *              rule starts with .es-editing, a class that admin/pages/
 *              preview.php puts on <body> for the edit view alone - so none
 *              of them can reach the public site. Typed words
 *              ([data-es-slot]: dashed outline, greyed prompt while empty,
 *              saving / saved / failed colours), photo places
 *              ([data-es-media], .es-edit-media-tools, -empty, -note,
 *              .es-edit-btn), the padlock label on parts that fill
 *              themselves in ([data-es-auto], [data-es-lock]) and the
 *              one-line stand-in for a block with nothing to show
 *              (.es-edit-ghost). The padlock is a small drawing held in the
 *              stylesheet itself (--es-edit-lock), in the ink colour.
 *            Existing tokens only. Full replacement.
 * UPDATED:   2026-10-07  (later) The visual editor's bar: ONE on/off switch
 *            for a town's own page (.es-ve-switch, -track, -knob, -text) -
 *            green with the knob to the right when on, grey with the knob to
 *            the left when off, the word On or Off beside it. New rules at
 *            the END of the file; no existing rule was edited. Admin only.
 *            Full replacement.
 * UPDATED:   2026-10-07  (later again) THE OPENING BAND (ES_Blocks.php, same
 *            note). (1) A typed headline is now a second, smaller line UNDER
 *            the heading (.es-res-open-headline) - the heading no longer
 *            shrinks. .es-res-open-eyebrow is no longer used by the renderer;
 *            its rules are left in place. (2) In the editor: an empty
 *            headline is a slim prompt, and a band with no photo gets one
 *            slim "Add a photo" place (.es-edit-addphoto). ONE earlier rule
 *            of today was REMOVED, not just overridden: ".es-editing
 *            .es-res-open .es-reservation-heading { margin-bottom: 18px }" -
 *            it gave the heading more room in the editor than on the live
 *            page, which is no longer wanted. New rules at the END of the
 *            file. (Two notes above said "(evening)" - that work was done in
 *            the morning; corrected to "(later)".) Full replacement.
 * UPDATED:   2026-10-07  (later again) The visual editor screen now carries
 *            the standard admin header above its own bar. Two small rules at
 *            the END of the file keep that screen's layout sound: nothing
 *            above the page may be squeezed, and the page area is never
 *            shorter than 420px (on a short screen the whole screen scrolls
 *            instead). Admin only. Full replacement.
 * UPDATED:   2026-10-08  ONE new rule, .es-keep (display: inline-block), next to
 *            .es-nowrap: keeps a few words together so they move to the next
 *            line as one piece. First use: the place name in a reservation
 *            page's title (Render/ES_Blocks.php), which was splitting at its
 *            hyphen. Nothing else changed.
 * =============================================================================
 * UPDATED:   2026-10-11  PHONE MENU: a top-level item that is a plain link
 *            (today "Our story") came out bigger and lighter than the
 *            items beside it. Those open a list, so they are buttons and take
 *            the text size of the menu; a plain link was still given the old
 *            22px light size of ".es-menu-nav a". One rule added after
 *            ".es-menu-nav .es-dropdown-link": a top-level plain link in the
 *            phone menu takes the same size and weight as the buttons.
 *            Links inside the opened lists are unchanged. Nothing else changed.
 * UPDATED:   2026-10-18  OPENING BAND (.es-res-open), two additions:
 *              - .es-res-open-action is now a wrapping row with a 12px gap,
 *                so two buttons side by side (a place to stay's "Get bike
 *                rental / e-bike rental delivered here") no longer run into
 *                each other; on a phone they stack with the gap. One button
 *                looks as before.
 *              - NEW .es-res-open-photo--graphic (set by Render/ES_Blocks.php
 *                when the opening image is a PNG, SVG or GIF - an emblem or
 *                logo, not a photo): drawn whole and centred on the panel
 *                colour, never cropped, in a smaller place - 180px high on a
 *                phone; beside the words from 760px, no wider than 360px and
 *                no taller than the words (the 560px minimum is for photos).
 *            Nothing else changed.
 * UPDATED:   2026-10-18  (evening) A TOWN'S ACCOMMODATION PAGE, each place to
 *            stay (Render/ES_Venues.php): its delivery buttons are one row of
 *            half-width buttons (.es-act-dev-towns--deliver, .es-venue-deliver)
 *            - the activity's drawing (.es-venue-deliver-ico, the same bike /
 *            e-bike drawings as the reservation form) and its name; the line
 *            saying what they do, once above the list (.es-venue-deliver-line);
 *            the stay's name as a link to its own page (.es-venue-name-link).
 *            Nothing else changed.
 * UPDATED:   2026-10-25  THE ACCOMMODATION MAP'S PIN POP-UP (.es-map-pop - the
 *            stay's name and its delivery lozenges, Render/ES_Venues.php and
 *            assets/JS/ES_Map.js click type 'popup'): Leaflet's own link colour
 *            (.leaflet-container a, #0078A8) is stronger than .es-act-dev-town
 *            and .es-venue-name-link, so their words came out blue in the
 *            pop-up. Four rules at the end of this file re-state OUR colours
 *            inside the pop-up only (ink; white on hover for the lozenges;
 *            dark ochre on hover for the name) - no new colour. Nothing else
 *            changed.
 */

/* Working stand-in for the brand's humanist sans until the real face is known. */
/* Jost, served from this site (2026-09-28) - no longer from Google Fonts, so a
 * visitor's browser contacts no third party. One variable file, weights 300-700,
 * Latin incl. French. Licence: SIL OFL 1.1 - /assets/fonts/Jost-OFL.txt. */
@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/Jost-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- brand palette (APPROXIMATE - replace with exact brand hex) --------- */
  --es-ink:        #2f3529;   /* deep forest/ink green - primary text, headers */
  --es-ink-soft:   #4a5142;   /* softened ink for secondary text */
  --es-sage:       #8a9a5b;   /* muted olive/sage - secondary/labels */
  --es-ochre:      #c39a4d;   /* warm gold - the single accent (actions, mark) */
  --es-ochre-dk:   #a8823a;   /* ochre pressed/hover */
  --es-bone:       #f3f1ea;   /* warm off-white page background */
  --es-surface:    #fbfaf6;   /* cards/panels - a touch lighter than bone */
  --es-border:     #e2ddd0;   /* hairline borders on bone */
  --es-muted:      #7d7a6f;   /* muted meta text */

  /* --- status (kept muted to sit with the palette) ----------------------- */
  --es-danger:     #a5442f;
  --es-danger-bg:  #f6e7e1;
  --es-ok:         #4f6d3a;
  --es-ok-bg:      #eaf0e0;
  --es-warn:       #92600a;
  --es-warn-bg:    #f6ecd8;

  /* --- type -------------------------------------------------------------- */
  --es-font:       'Jost', system-ui, -apple-system, sans-serif;
  --es-fs:         14px;
  --es-fs-sm:      12px;
  --es-fs-lg:      20px;
  --es-fs-h1:      26px;

  /* --- spacing / shape --------------------------------------------------- */
  --es-gap:        16px;
  --es-radius:     8px;
  --es-radius-sm:  5px;
  --es-maxw:       1100px;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--es-bone);
  color: var(--es-ink);
  font-family: var(--es-font);
  font-size: var(--es-fs);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--es-ink); text-decoration: none; }
a:hover { color: var(--es-ochre-dk); }
/* 2026-09-22: a.es-btn:hover was losing its white text - a:hover above has
   higher specificity than .es-btn's own color:#fff, and .es-btn:hover
   separately darkens the background to the SAME shade a:hover sets the
   text to, making the text invisible against its own background. Only
   affected <a class="es-btn"> (like "View page") - a <button class="es-btn">
   was never touched by a:hover at all. */
a.es-btn:hover { color: #fff; }

/* --- admin chrome --------------------------------------------------------- */
.es-admin-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  background: var(--es-surface);
  border-bottom: 1px solid var(--es-border);
}
.es-brand {
  font-weight: 400; font-size: 18px; letter-spacing: .04em;
  color: var(--es-ink);
}
.es-admin-tag { color: var(--es-sage); font-size: var(--es-fs-sm); letter-spacing: .08em; }
.es-spacer { flex: 1; }
.es-user { color: var(--es-muted); font-size: var(--es-fs-sm); }
.es-link { color: var(--es-ink-soft); font-size: var(--es-fs-sm); }
.es-link:hover { color: var(--es-ochre-dk); }
/* 2026-09-30: ADMIN NAV, every admin page at once (no page changes needed):
   links in the admin header (Admin home, Sign out, section links) are now
   large buttons, and a page's lone first-line link (e.g. "<- All forms") is a
   big Back button. The shared section bar comes later, page by page. */
.es-admin-bar { flex-wrap: wrap; row-gap: 8px; }
.es-admin-bar .es-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 15px; color: var(--es-ink); background: var(--es-bone); border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); text-decoration: none; }
.es-admin-bar .es-link:hover { border-color: var(--es-ochre); color: var(--es-ink); background: var(--es-surface); }
.es-admin-bar .es-link:focus-visible { outline: 2px solid var(--es-ochre); outline-offset: 2px; }
.es-admin-main > p:first-child > a.es-link:only-child { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; font-size: 15px; color: var(--es-ink); background: var(--es-bone); border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); text-decoration: none; }
.es-admin-main > p:first-child > a.es-link:only-child:hover { border-color: var(--es-ochre); background: var(--es-surface); }
/* 2026-09-30: THE SHARED ADMIN BAR (Render/ES_AdminBar.php) - home button,
   one button per admin area (current highlighted, unread badge), Arrange at
   the end, and an optional row under it (Back, where you are, extra links).
   Wraps on wide screens; scrolls sideways on a phone. */
.es-admin-home { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: var(--es-bone); border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); text-decoration: none; }
.es-admin-home:hover { border-color: var(--es-ochre); }
.es-admin-home[aria-current="page"] { border-color: var(--es-ochre); }
.es-admin-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 20px; background: var(--es-surface); border-bottom: 1px solid var(--es-border); }
.es-admin-nav-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; font-size: 15px; color: var(--es-ink); background: var(--es-bone); border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); text-decoration: none; white-space: nowrap; }
.es-admin-nav-btn:hover { border-color: var(--es-ochre); color: var(--es-ink); }
.es-admin-nav-btn:focus-visible, .es-admin-home:focus-visible, .es-admin-back:focus-visible { outline: 2px solid var(--es-ochre); outline-offset: 2px; }
.es-admin-nav-btn.is-current { background: var(--es-ochre); border-color: var(--es-ochre); font-weight: 600; }
.es-admin-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--es-danger); color: #fff; font-size: 12px; font-weight: 600; }
.es-admin-nav-arrange { margin-left: auto; background: transparent; border-style: dashed; color: var(--es-muted); }
.es-admin-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: var(--es-maxw); margin: 18px auto 0; padding: 0 20px; }
.es-admin-back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; font-size: 15px; color: var(--es-ink); background: var(--es-bone); border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); text-decoration: none; }
.es-admin-back:hover { border-color: var(--es-ochre); }
.es-admin-where { color: var(--es-muted); font-size: 15px; }
.es-admin-sub-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; font-size: 14px; color: var(--es-ink); border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); text-decoration: none; }
.es-admin-sub-link:hover { border-color: var(--es-ochre); }
@media (max-width: 800px) {
  .es-admin-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .es-admin-nav-arrange { margin-left: 0; }
}

.es-admin-main { max-width: var(--es-maxw); margin: 0 auto; padding: 28px 20px 60px; }
.es-h1 { font-size: var(--es-fs-h1); font-weight: 300; letter-spacing: .01em; margin-bottom: 20px; }

/* --- tiles ---------------------------------------------------------------- */
.es-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--es-gap); }
.es-tile {
  display: block; padding: 20px; background: var(--es-surface);
  border: 1px solid var(--es-border); border-radius: var(--es-radius);
}
.es-tile:hover { border-color: var(--es-ochre); }
.es-tile-title { display: block; font-size: var(--es-fs-lg); font-weight: 500; }
.es-tile-sub { display: block; color: var(--es-muted); font-size: var(--es-fs-sm); margin-top: 6px; }

/* --- panels / forms ------------------------------------------------------- */
.es-panel {
  background: var(--es-surface); border: 1px solid var(--es-border);
  border-radius: var(--es-radius); padding: 16px 18px; margin-bottom: 22px;
}
.es-inline-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.es-muted { color: var(--es-muted); font-size: var(--es-fs-sm); }

/* =============================================================================
 * BUTTON SIZE/STYLE HIERARCHY - documented 2026-09-20, because buttons had
 * become inconsistent across the admin (different sizes/colours for
 * similar-weight actions, with no rule anyone could follow). This is the
 * rule going forward for anything touched from here on:
 *   .es-btn-lg    - THE one primary/final action in a section (Save, View
 *                   page). At most one per panel - if everything is "big",
 *                   nothing is.
 *   .es-btn       - a standard, real action (Upload, Research, Create page,
 *                   Copy, Approve). The default weight for anything a
 *                   person deliberately clicks to DO something.
 *   .es-btn-sm    - compact actions where space is genuinely tight (table
 *                   rows, dense admin grids) - not a lighter-weight version
 *                   of a standard action, a space constraint.
 *   .es-linkbtn   - text-only, for minor/reversible actions (clear, choose
 *                   from library, change) - never the main way to DO the
 *                   section's actual job.
 *   .es-tinybtn   - ONLY for a micro-action directly attached to a single
 *                   field's label (the per-language "translate ▸" link) -
 *                   never for a standalone action like Copy, which needs to
 *                   be seen and clicked confidently on its own.
 * NOT YET DONE: this rule is only actually applied to admin/pages/ so far.
 * admin/place/, admin/map/, admin/media/ still have their older, less
 * consistent button choices - a real follow-up, not silently claimed done
 * here.
 * ========================================================================== */
.es-btn {
  font-family: var(--es-font); font-size: var(--es-fs); font-weight: 500;
  color: #fff; background: var(--es-ochre); border: none;
  border-radius: var(--es-radius-sm); padding: 9px 16px; cursor: pointer;
}
.es-btn:hover { background: var(--es-ochre-dk); }
.es-btn-sm { padding: 6px 12px; font-size: var(--es-fs-sm); }
.es-btn-lg { padding: 14px 26px; font-size: 16px; }
/* 2026-09-20: the icon/brief approve buttons turn green when approved -
   real visual state, not just changed text, per explicit direction. Reuses
   the existing --es-ok token (the same green already used for success
   alerts elsewhere), not a new invented colour. */
.es-btn-approved { background: var(--es-ok); cursor: default; }
.es-btn-approved:hover { background: var(--es-ok); }

/* --- alerts --------------------------------------------------------------- */
.es-alert { border-radius: var(--es-radius-sm); padding: 9px 13px; font-size: var(--es-fs-sm); margin-top: 12px; }
.es-alert-error { background: var(--es-danger-bg); color: var(--es-danger); }
.es-alert-ok    { background: var(--es-ok-bg);     color: var(--es-ok); }

/* --- tabs ----------------------------------------------------------------- */
.es-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--es-border); margin-bottom: 16px; }
.es-tab {
  padding: 9px 16px; font-size: var(--es-fs-sm); color: var(--es-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.es-tab:hover { color: var(--es-ink); }
.es-tab.is-active { color: var(--es-ink); border-bottom-color: var(--es-ochre); }

/* --- search --------------------------------------------------------------- */
.es-search { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.es-search-input {
  font-family: var(--es-font); font-size: var(--es-fs);
  padding: 8px 12px; border: 1px solid var(--es-border);
  border-radius: var(--es-radius-sm); background: var(--es-surface);
  color: var(--es-ink); min-width: 260px; outline: none;
}
.es-search-input:focus { border-color: var(--es-ochre); }

/* --- data grid ------------------------------------------------------------ */
.es-results { overflow-x: auto; }
.es-grid { border-collapse: collapse; width: 100%; font-size: var(--es-fs-sm); }
.es-grid th, .es-grid td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--es-border);
  vertical-align: top;
}
.es-grid th {
  font-weight: 500; color: var(--es-ink-soft); background: var(--es-surface);
  position: sticky; top: 0; white-space: nowrap;
}
.es-grid tr:hover td { background: var(--es-surface); }
.es-mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; }
.es-warn { color: var(--es-danger); font-weight: 500; }

/* --- login ---------------------------------------------------------------- */
.es-login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.es-login-wrap { width: 100%; max-width: 360px; padding: 24px; }
.es-login-brand { text-align: center; margin-bottom: 30px; }
.es-login-brand .es-brand { font-size: 24px; }
.es-login-brand-sub { font-size: var(--es-fs-sm); color: var(--es-muted); margin-top: 4px; letter-spacing: .08em; }
.es-card {
  background: var(--es-surface); border: 1px solid var(--es-border);
  border-radius: var(--es-radius); padding: 26px;
}
.es-card-title { font-size: var(--es-fs-lg); font-weight: 500; margin-bottom: 18px; }
.es-field { margin-bottom: 15px; }
.es-field label {
  display: block; font-size: 11px; font-weight: 500; letter-spacing: .06em;
  color: var(--es-muted); margin-bottom: 6px;
}
.es-field input {
  width: 100%; padding: 9px 12px; font-family: var(--es-font); font-size: var(--es-fs);
  border: 1px solid var(--es-border); border-radius: var(--es-radius-sm);
  background: var(--es-bone); color: var(--es-ink); outline: none;
}
.es-field input:focus { border-color: var(--es-ochre); }
.es-btn-block { width: 100%; margin-top: 6px; }

/* --- modal (code viewer, and the review "More" modal - same chrome) ------- */
.es-modal-back {
  position: fixed; inset: 0; background: rgba(30,34,26,.55);
  display: none; align-items: center; justify-content: center; padding: 24px; z-index: 50;
}
.es-modal-back.is-open { display: flex; }
.es-modal {
  background: var(--es-surface); border: 1px solid var(--es-border);
  border-radius: var(--es-radius); width: 100%; max-width: 900px;
  max-height: 85vh; display: flex; flex-direction: column;
}
.es-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--es-border);
}
.es-modal-title { font-family: ui-monospace, Menlo, monospace; font-size: var(--es-fs-sm); color: var(--es-ink-soft); flex: 1; word-break: break-all; }
.es-modal-close { cursor: pointer; border: none; background: none; font-size: 20px; line-height: 1; color: var(--es-muted); }
.es-modal-close:hover { color: var(--es-ink); }
.es-modal-body { overflow: auto; padding: 14px 16px; }
.es-code {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.55;
  white-space: pre; color: var(--es-ink);
}

/* --- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- translation console -------------------------------------------------- */
.es-filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 14px;
  align-items: end;
}
.es-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.es-fld > span { font-size: 11px; letter-spacing: .05em; color: var(--es-muted); text-transform: uppercase; }
.es-fld input, .es-fld select {
  width: 100%;
  font-family: var(--es-font); font-size: var(--es-fs);
  padding: 7px 10px; border: 1px solid var(--es-border);
  border-radius: var(--es-radius-sm); background: var(--es-surface); color: var(--es-ink); outline: none;
}
.es-fld input:focus, .es-fld select:focus { border-color: var(--es-ochre); }
.es-fld-actions { flex-direction: row; gap: 10px; align-items: center; }
.es-filter .es-muted { margin-top: 12px; }

.es-cell { cursor: text; min-width: 120px; }
.es-cell:hover { background: var(--es-bone); }
.es-cell-missing { color: var(--es-muted); }
.es-cell-saving { opacity: .5; }
.es-cell-error { color: var(--es-danger); }
.es-cell-input {
  width: 100%; font-family: var(--es-font); font-size: var(--es-fs-sm);
  padding: 4px 6px; border: 1px solid var(--es-ochre);
  border-radius: 4px; background: var(--es-surface); color: var(--es-ink); outline: none;
}

/* --- public site (MOBILE-FIRST: base = phone; min-width adds desktop) ------ */
.es-public { background: var(--es-bone); color: var(--es-ink); }

/* header: mobile base = logo + hamburger */
.es-site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--es-surface);
  border-bottom: 1px solid var(--es-border); position: relative;
}
.es-site-logo { font-size: 21px; font-weight: 400; letter-spacing: .06em; color: var(--es-ink); display: flex; align-items: center; }
.es-logo-con { color: var(--es-ochre); font-size: 25px; line-height: 0; position: relative; top: -2px; margin: 0 1px; }
/* 2026-10-02: logo as an image (media library) - height set here, width follows */
.es-site-logo picture, .es-footer-logo picture { display: block; line-height: 0; }
.es-site-logo-img { display: block; height: 28px; width: auto; max-width: 100%; }

/* desktop-only inline nav + right cluster: hidden on mobile */
.es-site-nav, .es-site-right { display: none; }

/* hamburger */
.es-burger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.es-burger span { display: block; width: 24px; height: 2px; background: var(--es-ink); border-radius: 2px; }

/* full-screen overlay menu */
.es-menu-overlay {
  position: fixed; inset: 0; background: var(--es-bone); z-index: 90;
  display: none; flex-direction: column; align-items: center; gap: 26px; padding: 0 32px 40px;
}
.es-menu-top { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 0 26px; }
.es-menu-body-pad { flex: 1; }
/* push nav block toward vertical centre while keeping top bar at top */
.es-menu-overlay .es-menu-nav { margin-top: 8vh; }
.es-menu-overlay.is-open { display: flex; }
.es-menu-close { font-size: 30px; line-height: 1; background: none; border: none; color: var(--es-ink); cursor: pointer; }
.es-menu-nav { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.es-menu-nav a { font-size: 22px; font-weight: 300; color: var(--es-ink); text-decoration: none; }
.es-menu-nav a:active { color: var(--es-ochre-dk); }
.es-menu-cta { font-size: 15px; padding: 12px 26px; }
.es-menu-lang { display: flex; gap: 10px; font-size: 15px; margin-top: 4px; }

/* shared language switch styling */
.es-lang-switch { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.es-lang-current { color: var(--es-ink); font-weight: 500; }
.es-lang-opt { color: var(--es-muted); text-decoration: none; }
.es-lang-opt:active, .es-lang-opt:hover { color: var(--es-ochre-dk); }
.es-lang-off { color: var(--es-border); }
.es-lang-sep { color: var(--es-border); }
.es-site-cta { font-size: 13px; font-weight: 500; padding: 9px 18px; border-radius: var(--es-radius-sm); background: var(--es-ochre); color: #fff; text-decoration: none; }
.es-site-cta:hover { background: var(--es-ochre-dk); color:#fff; }

/* strapline + breadcrumb: mobile base */
.es-strapline { padding: 11px 18px; background: var(--es-bone); font-size: 14px; font-style: italic; color: var(--es-ink-soft); border-bottom: 1px solid var(--es-border); }
.es-breadcrumb { padding: 10px 18px; background: var(--es-surface); font-size: 12px; color: var(--es-muted); border-bottom: 1px solid var(--es-border); overflow-x: auto; white-space: nowrap; }
.es-breadcrumb a { color: var(--es-muted); text-decoration: none; }
.es-breadcrumb b { color: var(--es-ink-soft); font-weight: 500; }
.es-crumb-sep { margin: 0 7px; color: var(--es-border); }

/* place body: mobile base */
.es-place-main { max-width: 820px; margin: 0 auto; padding: 30px 18px 56px; }
.es-place-title { font-size: 30px; font-weight: 300; letter-spacing: .01em; color: var(--es-ink); margin-bottom: 8px; }
.es-place-context { font-size: 14px; color: var(--es-sage); margin-bottom: 20px; }
.es-place-lead { font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--es-ink-soft); }

/* footer: mobile base = stacked */
.es-site-footer { background: var(--es-ink); color: #d9d6cc; margin-top: 48px; }
.es-footer-inner { max-width: var(--es-maxw); margin: 0 auto; padding: 30px 18px; display: flex; flex-direction: column; gap: 24px; }
.es-footer-logo { font-size: 20px; letter-spacing: .06em; color: #fff; }
.es-footer-logo .es-logo-con { color: var(--es-ochre); }
.es-footer-logo-img { display: block; height: 32px; width: auto; max-width: 100%; }
.es-footer-tag { font-size: 13px; color: #a9a596; margin-top: 6px; font-style: italic; }
.es-footer-links { display: flex; flex-direction: column; gap: 10px; }
.es-footer-links a { color: #d9d6cc; text-decoration: none; font-size: 15px; }
.es-footer-links a:active, .es-footer-links a:hover { color: var(--es-ochre); }
.es-footer-meta { display: flex; flex-direction: column; gap: 10px; }
.es-footer-lang { display: flex; gap: 8px; font-size: 14px; }
.es-footer-lang .es-lang-current { color: #fff; }
.es-footer-lang .es-lang-opt { color: #a9a596; text-decoration: none; }
.es-footer-lang .es-lang-sep { color: #5a5f52; }
.es-footer-copy { font-size: 12px; color: #8a8779; }

/* coming-soon modal */
.es-cs-back { position: fixed; inset: 0; background: rgba(30,34,26,.5); display: none; align-items: center; justify-content: center; padding: 22px; z-index: 100; }
.es-cs-back.is-open { display: flex; }
.es-cs-modal { background: var(--es-surface); border: 1px solid var(--es-border); border-radius: var(--es-radius); max-width: 380px; width: 100%; padding: 26px; text-align: center; }
.es-cs-title { font-size: 18px; font-weight: 500; color: var(--es-ink); margin-bottom: 10px; }
.es-cs-msg { font-size: 14px; color: var(--es-ink-soft); line-height: 1.5; margin-bottom: 20px; }

/* --- nav dropdowns + footer columns -------------------------------------- */
/* base (mobile overlay context): nav items stack; dropdowns are expandable */
.es-nav-item { position: relative; }
.es-nav-toggle {
  background: none; border: none; cursor: pointer; font: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 6px; padding: 0;
}
.es-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .15s; }
.es-nav-toggle[aria-expanded="true"] .es-caret { transform: rotate(180deg); }
.es-dropdown { display: none; }
.es-nav-item.is-open > .es-dropdown { display: block; }
.es-dropdown-link { display: block; }

/* mobile overlay: dropdown children indent under the parent */
.es-menu-nav .es-nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.es-menu-nav .es-dropdown { text-align: center; }
.es-menu-nav .es-dropdown-link { font-size: 18px; color: var(--es-ink-soft); }
/* 2026-10-11: a top-level plain link (e.g. "Our story") matches the top-level buttons beside it - see header */
.es-menu-nav > .es-nav-item > a:not(.es-dropdown-link) { font: inherit; }

/* footer columns */
.es-footer-col { display: flex; flex-direction: column; gap: 8px; }
.es-footer-col-head { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #a9a596; margin-bottom: 4px; }

/* ---- desktop enhancement (min-width: 760px) ---- */
@media (min-width: 760px) {
  /* desktop nav dropdown: absolute panel */
  .es-site-nav .es-dropdown {
    position: absolute; top: 100%; left: 0; min-width: 180px;
    background: var(--es-surface); border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm); padding: 8px 0; margin-top: 8px;
    box-shadow: 0 6px 20px rgba(30,34,26,.08); z-index: 40;
  }
  .es-site-nav .es-dropdown-link { padding: 7px 16px; font-size: 14px; color: var(--es-ink); white-space: nowrap; }
  .es-site-nav .es-dropdown-link:hover { background: var(--es-bone); color: var(--es-ochre-dk); }
  .es-site-nav .es-nav-toggle { font-size: 14px; color: var(--es-ink); }
  .es-site-nav .es-nav-toggle:hover { color: var(--es-ochre-dk); }

  .es-site-header { padding: 18px 32px; gap: 28px; justify-content: flex-start; }
  .es-site-logo { font-size: 24px; }
  .es-logo-con { font-size: 28px; }
  .es-site-logo-img { height: 34px; }
  .es-site-nav { display: flex; gap: 22px; flex: 1; }
  .es-site-nav a { font-size: 14px; color: var(--es-ink); text-decoration: none; letter-spacing: .02em; }
  .es-site-nav a:hover { color: var(--es-ochre-dk); }
  .es-site-right { display: flex; align-items: center; gap: 20px; }
  .es-burger, .es-menu-overlay { display: none !important; }
  .es-strapline { padding: 12px 32px; }
  .es-breadcrumb { padding: 11px 32px; overflow: visible; white-space: normal; }
  .es-place-main { padding: 48px 32px 80px; }
  .es-place-title { font-size: 40px; }
  .es-place-context { font-size: 15px; }
  .es-place-lead { font-size: 18px; }
  .es-footer-inner { flex-direction: row; flex-wrap: wrap; gap: 28px; padding: 36px 32px; align-items: flex-start; }
  .es-footer-brand { flex: 1; min-width: 180px; }
  .es-footer-links { min-width: 140px; }
  .es-footer-meta { align-items: flex-end; min-width: 160px; }
}

/* --- menus at any depth (2026-09-26) ----------------------------------------
   An item with children has a head (.es-nav-head): either an opener button,
   or - when the item is also a page - its link plus a small caret opener.
   Base = phone overlay: deeper lists expand in place, indented and smaller.
   Desktop (below): deeper lists open to the SIDE of their parent's list. */
.es-nav-head { display: flex; align-items: center; justify-content: center; gap: 6px; }
.es-nav-link { color: inherit; text-decoration: none; }
.es-nav-toggle--caret { padding: 4px; }
.es-menu-nav .es-dropdown .es-dropdown { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--es-border); }
.es-menu-nav .es-dropdown .es-nav-item { gap: 10px; margin-top: 8px; }
.es-menu-nav .es-dropdown .es-dropdown .es-dropdown-link { font-size: 16px; }
.es-menu-nav .es-dropdown .es-nav-toggle { font-size: 18px; color: var(--es-ink-soft); }
@media (min-width: 760px) {
  .es-site-nav .es-nav-link { font-size: 14px; color: var(--es-ink); letter-spacing: .02em; }
  .es-site-nav .es-nav-link:hover { color: var(--es-ochre-dk); }
  .es-site-nav .es-dropdown .es-nav-item { position: relative; }
  .es-site-nav .es-dropdown .es-nav-head { justify-content: space-between; padding-right: 8px; }
  .es-site-nav .es-dropdown .es-nav-head .es-dropdown-link { flex: 1; }
  .es-site-nav .es-dropdown .es-nav-toggle { font-size: 14px; padding: 7px 8px 7px 16px; width: 100%; justify-content: space-between; }
  .es-site-nav .es-dropdown .es-nav-toggle--caret { width: auto; padding: 7px 4px; }
  .es-site-nav .es-dropdown .es-caret { transform: rotate(-90deg); }          /* sub-levels open to the right */
  .es-site-nav .es-dropdown .es-dropdown { top: -9px; left: 100%; margin-top: 0; margin-left: 4px; }
}

/* --- menu editor bits ----------------------------------------------------- */
.es-linkbtn { background: none; border: none; cursor: pointer; color: var(--es-muted); font-size: 12px; padding: 2px 4px; }
.es-linkbtn:hover { color: var(--es-ink); }
.es-linkbtn.es-danger:hover, .es-danger { color: var(--es-danger); }
.es-btn-danger { background: var(--es-danger); }
.es-btn-danger:hover { background: #8a2f20; }
.es-mt { margin-top: 12px; }
.es-active-tog { font-size: 11px; color: var(--es-muted); margin-right: 8px; }
.es-active-tog input { vertical-align: middle; }
.es-saved { font-size: 11px; margin-left: 8px; }
.es-saved.is-ok { color: var(--es-ok); }
.es-saved.is-err { color: var(--es-danger); }
.es-nowrap { white-space: nowrap; }
/* 2026-10-08: keep a few words together (e.g. a hyphenated place name in a
   title). The words move to the next line as one piece when they do not fit
   on the current line; if they are wider than the whole line they still wrap,
   so nothing can run off the edge of a narrow screen. */
.es-keep { display: inline-block; }
.es-menu-editor input, .es-menu-editor select { font-family: var(--es-font); font-size: 12px; padding: 4px 6px; border: 1px solid var(--es-border); border-radius: 4px; background: var(--es-surface); color: var(--es-ink); }

/* --- add-item modal (menu editor) ---------------------------------------- */
.es-add-modal { max-width: 460px; }
.es-form-grid { display: flex; flex-direction: column; gap: 12px; align-items: stretch; width: 100%; }
.es-modal-foot { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--es-border); }
.es-add-err { font-size: 12px; }

/* --- media admin ---------------------------------------------------------- */
.es-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 14px; margin-top: 12px; }
.es-media-card { display: block; border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); overflow: hidden; background: var(--es-surface); text-decoration: none; color: inherit; }
.es-media-card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.es-media-noimg { height: 120px; display: flex; align-items: center; justify-content: center; color: var(--es-muted); font-size: 12px; }
.es-media-meta { padding: 6px 8px; font-size: 11px; color: var(--es-muted); }

/* media metadata review: full-width inputs so long alt/caption text is visible */
.es-form-grid .es-fld { width: 100%; align-items: stretch; }
.es-form-grid .es-fld input,
.es-form-grid .es-fld textarea { width: 100%; box-sizing: border-box; }
.es-form-grid textarea { font-family: var(--es-font); font-size: 13px; padding: 7px 10px; border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); background: var(--es-surface); color: var(--es-ink); resize: vertical; line-height: 1.4; }
.es-form-grid textarea:focus { border-color: var(--es-ochre); outline: none; }

/* media lightbox */
.es-lb { position: fixed; inset: 0; background: rgba(20,22,18,.85); display: none; align-items: center; justify-content: center; padding: 30px; z-index: 200; cursor: zoom-out; }
.es-lb.is-open { display: flex; }
.es-lb img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.4); }

/* media detail/review: image left (fixed), form right (fills) - plain flex, NOT the filter grid */
.es-media-detail { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.es-media-detail > form.es-form-grid { flex: 1; min-width: 280px; }

/* --- media library rebuild ------------------------------------------------ */
.es-media-body { padding: 8px 10px; }
.es-media-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.es-chip { font-size: 10px; padding: 2px 7px; border: 1px solid var(--es-border); border-radius: 12px; color: var(--es-ink-soft); text-decoration: none; background: var(--es-bone); }
.es-chip:hover { border-color: var(--es-ochre); color: var(--es-ochre-dk); }
.es-media-actions { display: flex; gap: 12px; margin-top: 4px; }
.es-inuse { color: var(--es-ok); font-weight: 500; }

/* --- media tags ----------------------------------------------------------- */
.es-tagbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.es-tagchip { font-size: 12px; padding: 3px 10px; border: 1px solid var(--es-border); border-radius: 14px; color: var(--es-ink-soft); text-decoration: none; background: var(--es-surface); }
.es-tagchip:hover { border-color: var(--es-ochre); color: var(--es-ochre-dk); }
.es-tagchip.is-active { background: var(--es-ochre); color: #fff; border-color: var(--es-ochre); }
.es-tagchip-sm { font-size: 10px; padding: 1px 7px; }
.es-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }

/* =============================================================================
 * CONTENT BLOCKS (public). Each block TYPE's house style, built on brand tokens.
 * Grouped by type for findability. Mobile-first; min-width adds desktop.
 * ========================================================================== */

/* --- shared block scaffolding --- */
.es-block-inner { max-width: var(--es-maxw); margin: 0 auto; padding: 36px 18px; }
.es-block-head { font-size: 24px; font-weight: 300; color: var(--es-ink); margin-bottom: 14px; letter-spacing: .01em; }
.es-block-body { font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--es-ink-soft); }

/* --- BLOCK: hero --- */
.es-block-hero { position: relative; background: var(--es-ink); color: #fff; overflow: hidden; }
.es-block-hero .es-hero-img, .es-block-hero picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.es-block-hero .es-hero-img { object-fit: cover; opacity: .55; }
.es-block-hero picture img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.es-hero-inner { position: relative; max-width: var(--es-maxw); margin: 0 auto; padding: 64px 18px; }
.es-hero-head { font-size: 34px; font-weight: 300; letter-spacing: .01em; margin-bottom: 12px; color: #fff; }
.es-hero-sub { font-size: 18px; font-weight: 300; color: #e7e4da; max-width: 560px; line-height: 1.5; }
.es-hero-cta { display: inline-block; margin-top: 22px; }

/* --- BLOCK: text --- */
.es-block-text { background: var(--es-bone); }

/* --- BLOCK: image_text --- */
.es-block-imagetext { background: var(--es-surface); }
.es-it-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.es-it-media { display: block; }
.es-it-media picture { display: block; }
.es-it-media img, .es-it-media picture img { width: 100%; height: auto; max-width: 100%; border-radius: var(--es-radius); display: block; }
.es-it-media picture { width: 100%; }

/* --- BLOCK: feature_row --- */
.es-block-feature-row { background: var(--es-bone); }
.es-feature-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.es-feature-head { font-size: 17px; font-weight: 500; color: var(--es-ink); margin-bottom: 6px; }
.es-feature-body { font-size: 15px; font-weight: 300; color: var(--es-ink-soft); line-height: 1.5; }

@media (min-width: 760px) {
  .es-block-inner { padding: 56px 32px; }
  .es-hero-inner { padding: 96px 32px; }
  .es-hero-head { font-size: 46px; }
  .es-it-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .es-block-imagetext.is-right .es-it-media { order: 2; }
  .es-feature-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

/* --- page editor ---------------------------------------------------------- */
.es-pb { border: 1px solid var(--es-border); border-radius: var(--es-radius); background: var(--es-surface); padding: 16px 18px; margin-bottom: 16px; }
.es-pb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.es-pb-type { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--es-ochre-dk); font-weight: 500; }
.es-pb-field { margin-bottom: 14px; }
.es-pb-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--es-muted); margin-bottom: 6px; }
.es-lang-fields { display: flex; gap: 12px; flex-wrap: wrap; }
.es-langf { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.es-langf > span { font-size: 10px; color: var(--es-muted); text-transform: uppercase; }
.es-langf textarea, .es-pb-field > input, .es-pb-field select { width: 100%; box-sizing: border-box; font-family: var(--es-font); font-size: 13px; padding: 7px 10px; border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); background: var(--es-bone); color: var(--es-ink); resize: vertical; }
/* 2026-09-19: fields were too shallow (browser default ~2 rows), forcing
   scrolling to read/edit copy - see this file's own UPDATED note above. */
.es-langf textarea { min-height: 4.5em; }
/* "body" copy fields need real room, distinct from short heading/label fields
   sharing the rule above - added 2026-09-19 after the general min-height
   still read as too small for actual paragraph text. */
.es-langf textarea[data-text="body"] { min-height: 16em; }
.es-media-slot { display: flex; align-items: center; gap: 12px; }
.es-media-slot-preview { width: 90px; height: 60px; border: 1px solid var(--es-border); border-radius: 5px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--es-bone); }
.es-media-slot-preview img { width: 100%; height: 100%; object-fit: cover; }
/* 2026-09-19: hero's image preview was the same tiny size as every other
   block's, when seeing the actual image matters more there. */
.es-media-slot-preview--lg { width: 220px; height: 140px; }
.es-tinybtn { font-size: 10px; padding: 1px 6px; border: 1px solid var(--es-border); border-radius: 10px; background: var(--es-surface); color: var(--es-ochre-dk); cursor: pointer; margin-left: 6px; }
.es-tinybtn:hover { border-color: var(--es-ochre); }

/* --- maps ---------------------------------------------------------- */
.es-map { margin: 24px 0; }
.es-map-title { margin: 0 0 12px; }
.es-map-canvas { height: 420px; width: 100%; }
.es-map-empty-text { color: var(--muted, #666); font-size: 14px; }
.es-map-caption { font-size: 14px; color: var(--es-ink-soft); line-height: 1.5; margin: -4px 0 14px; max-width: 640px; }
.es-map-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; padding: 10px 14px; background: var(--es-surface); border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); }
.es-map-legend-item label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--es-ink-soft); cursor: pointer; }
.es-map-legend-item input[type="checkbox"] { margin: 0; }
.es-map-legend-swatch { display: inline-block; width: 11px; height: 11px; border: 1px solid rgba(0,0,0,.15); flex: 0 0 auto; }
.es-map-legend-count { color: var(--es-muted); }
/* 2026-10-06: a map block outside .es-place-main (reservation and content
   pages) keeps to the page width, like every block's .es-block-inner; inside
   .es-place-main it is exactly as before - see header UPDATED note. */
.es-block-map { max-width: var(--es-maxw); margin: 0 auto; padding: 0 18px; }
.es-place-main .es-block-map { max-width: none; margin: 0; padding: 0; }
@media (min-width: 760px) {
  .es-block-map { padding: 0 32px; }
  .es-place-main .es-block-map { padding: 0; }
}

/* --- BLOCK: children_list (added 2026-09-19) - card grid, not a bare link
   list. Text-led: designed to look intentional with zero place icons
   attached, since most places won't have one for a long while. --- */
.es-block-children { background: var(--es-surface); }
.es-children-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 16px; }
.es-child-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 10px;
  min-height: 160px; padding: 12px 10px;
  border: 1px solid var(--es-border); border-radius: var(--es-radius);
  background: var(--es-bone); color: var(--es-ink); text-decoration: none;
}
.es-child-card:hover { border-color: var(--es-ochre); color: var(--es-ochre-dk); }
.es-child-card-icon { width: 148px; height: 148px; object-fit: contain; }
.es-child-card-name { font-size: 15px; font-weight: 500; }
.es-child-card--nolink { color: var(--es-muted); cursor: default; }
.es-child-card--nolink:hover { border-color: var(--es-border); color: var(--es-muted); }

/* --- icon-panel steps (added 2026-09-20) ----------------------------------- */
.es-icon-step { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--es-border); }
.es-icon-step-title { font-size: 15px; font-weight: 500; color: var(--es-ink); margin-bottom: 10px; }

/* --- map admin: pin-class per-language label overrides (2026-09-19) ------- */
.es-pinclass-langs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }

/* =============================================================================
 * BLOCK: operator_trust / reservation_note / reserve / activity_tile - the
 * operator-dominant reservation page (2026-09-22 session). See this file's
 * own UPDATED note above re: this section being a consolidation pass.
 * ========================================================================== */
.es-block-operator-trust { background: var(--es-bone); }
.es-reservation-heading { font-size: 28px; font-weight: 300; letter-spacing: .01em; color: var(--es-ink); margin-bottom: 6px; }
.es-reservation-subheading { font-size: 15px; color: var(--es-sage); margin-bottom: 20px; }

.es-operator-block {
  background: var(--es-surface); border: 1px solid var(--es-border);
  border-radius: var(--es-radius); padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.es-operator-logo { max-width: 120px; max-height: 64px; width: auto; height: auto; border-radius: var(--es-radius-sm); object-fit: contain; }
.es-operator-name { font-size: 19px; font-weight: 500; color: var(--es-ink); }

/* aggregate star rating (own review scores), shown right under the name */
.es-operator-score-summary { display: flex; align-items: baseline; gap: 6px; margin: -4px 0 4px; }
.es-score-stars { color: var(--es-ochre); font-size: 18px; letter-spacing: 1px; }
.es-score-avg { font-weight: 700; color: var(--es-ink); font-size: 15px; }
.es-score-count { color: var(--es-muted); font-size: 13px; }

/* platform ratings list (Google/TripAdvisor/etc - any platform, an open list) */
.es-operator-rating {
  display: inline-flex; align-items: center; gap: 7px; margin-right: 16px;
  text-decoration: none; font-size: 14px;
}
.es-rating-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  font-size: 11px; font-weight: 700; color: #fff; font-family: var(--es-font);
  background: var(--es-sage);
}
.es-rating-badge-img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.es-operator-rating .es-rating-source { font-weight: 500; color: var(--es-sage); }
.es-operator-rating .es-rating-stars { color: var(--es-ochre); font-size: 13px; letter-spacing: 1px; }
.es-operator-rating .es-rating-value { font-weight: 500; color: var(--es-ink); }
.es-operator-rating .es-rating-count { color: var(--es-muted); font-size: 12px; }
.es-operator-rating:hover .es-rating-value { color: var(--es-ochre-dk); }

.es-operator-bio { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--es-ink-soft); }

/* reviews row - arrow-navigated, native scrollbar hidden (arrows replace it,
   touch/trackpad scroll still works underneath) */
.es-operator-reviews {
  display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 6px; margin: 4px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.es-operator-reviews::-webkit-scrollbar { display: none; }
.es-reviews-nav { display: flex; align-items: center; gap: 8px; }
.es-reviews-nav .es-operator-reviews { flex: 1; margin: 4px 0; }
.es-reviews-arrow {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--es-border); background: var(--es-surface);
  color: var(--es-ink); font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.es-reviews-arrow:hover { border-color: var(--es-ochre); color: var(--es-ochre-dk); }

.es-review-card {
  flex: 0 0 240px; background: var(--es-bone); border: 1px solid var(--es-border);
  border-left: 3px solid var(--es-ochre);
  border-radius: var(--es-radius-sm); padding: 14px; font-size: 13.5px;
}
.es-review-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.es-review-platform-icon { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }
.es-review-reviewer { font-weight: 500; color: var(--es-ink); }
.es-review-stars { color: var(--es-ochre); font-size: 13px; letter-spacing: 1px; margin-bottom: 6px; }
.es-review-quote { color: var(--es-ink-soft); margin-bottom: 8px; line-height: 1.5; }
.es-review-more {
  background: none; border: none; padding: 0; margin-left: 2px;
  color: var(--es-ochre-dk); font-size: 13.5px; cursor: pointer; text-decoration: underline;
}
.es-review-translated-note { font-size: 11px; color: var(--es-muted); font-style: italic; margin: -4px 0 6px; }
.es-review-visited { color: var(--es-muted); font-size: 11px; margin-top: 6px; }

/* review "More…" modal content - reuses .es-modal-back/.es-modal chrome
   above; this is just the injected inner content's own styling */
.es-review-modal-text { font-size: 15px; line-height: 1.6; color: var(--es-ink-soft); }
.es-review-modal-text .es-review-quote { font-size: 16px; margin: 10px 0; }
.es-review-modal-text .es-review-header { margin-bottom: 8px; }

.es-operator-other-towns { font-size: 13.5px; color: var(--es-muted); }
.es-operator-other-towns-label { font-weight: 500; color: var(--es-ink); }
.es-operator-other-town { color: var(--es-sage); text-decoration: none; margin-right: 10px; }
.es-operator-other-town:hover { color: var(--es-ochre-dk); }

/* --- BLOCK: reservation_note (freeform HTML) --- */
.es-block-reservation-note { background: var(--es-surface); }
.es-block-reservation-note .es-block-inner { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--es-ink-soft); padding-top: 24px; padding-bottom: 24px; }

/* --- BLOCK: reserve --- */
.es-block-reserve { background: var(--es-bone); }
.es-block-reserve .es-block-inner { padding-top: 12px; padding-bottom: 40px; }
.es-reserve-btn {
  display: block; width: 100%; text-align: center; padding: 15px;
  background: var(--es-ink); color: #fff; border-radius: var(--es-radius-sm);
  font-weight: 500; font-size: 16px; text-decoration: none;
}
.es-reserve-btn:hover { background: var(--es-ink-soft); color: #fff; }
/* top variant (inside operator_trust) - compact, not full-width like the bottom one */
.es-reserve-btn-top {
  display: inline-block; width: auto; padding: 10px 22px;
  font-size: 14px; margin-bottom: 18px;
}

/* --- BLOCK: activity_tile --- */
.es-block-activity-tile { background: var(--es-bone); }
.es-block-activity-tile .es-block-inner { padding-top: 16px; padding-bottom: 16px; }
.es-activity-tile {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; max-width: 320px;
  background: var(--es-surface); border: 1px solid var(--es-border);
  border-radius: var(--es-radius); text-decoration: none;
}
.es-activity-tile:hover { border-color: var(--es-ochre); }
.es-activity-tile-label { font-size: 16px; font-weight: 500; color: var(--es-ink); }
.es-activity-tile:hover .es-activity-tile-label { color: var(--es-ochre-dk); }

/* =============================================================================
 * BLOCK: things_to_do - "Things to do here" and the ACTIVITY DEVICE
 * (2026-09-24). One device per activity, rendered by ES_Blocks.php:
 *   a.es-act-dev              full device on a town page - the whole card is
 *                             ONE link (picture + name + short line + call
 *                             to action)
 *   div.es-act-dev--region    full device on a region page - picture + name
 *                             + short line + prompt + one button per town
 *   div.es-act-dev--compact   region fallback - name + prompt + town buttons
 *   a.es-act-btn              town fallback - plain pill button
 * "Looks clickable": every clickable part lifts/turns ochre on hover and its
 * arrow nudges forward; non-clickable containers (region/compact cards) do
 * not react - only their town buttons do, so it is always clear where to
 * click. Mobile-first: one column on a phone, auto-filling columns wider.
 * ========================================================================== */
.es-block-things-to-do { background: var(--es-bone); }
.es-block-things-to-do .es-block-inner { padding-top: 28px; padding-bottom: 28px; }
.es-things-to-do-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px; align-items: start;
}

/* the card */
.es-act-dev {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--es-surface); border: 1px solid var(--es-border);
  border-radius: 12px; color: var(--es-ink); text-decoration: none;
}
a.es-act-dev { transition: border-color .15s, transform .15s; }
a.es-act-dev:hover { border-color: var(--es-ochre); transform: translateY(-2px); color: var(--es-ink); }
a.es-act-dev:focus-visible, .es-act-dev-town:focus-visible, .es-act-btn:focus-visible { outline: 2px solid var(--es-ochre); outline-offset: 2px; }

/* the picture - landscape, cropped to fill */
.es-act-dev picture { display: block; }
.es-act-dev-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* the words */
.es-act-dev-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.es-act-dev-name { font-size: 18px; font-weight: 500; color: var(--es-ink); }
.es-act-dev-line { font-size: 14px; font-weight: 300; line-height: 1.45; color: var(--es-ink-soft); margin-bottom: 6px; }
.es-act-dev-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 14px; font-weight: 500; color: var(--es-ochre-dk); }
.es-act-arrow { display: inline-block; transition: transform .15s; }
a.es-act-dev:hover .es-act-arrow, .es-act-dev-town:hover .es-act-arrow, .es-act-btn:hover .es-act-arrow { transform: translateX(3px); }

/* region / compact: the prompt and one button per town */
.es-act-dev-prompt { font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--es-sage); margin-top: 6px; }
.es-act-dev-towns { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.es-act-dev-town {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--es-ochre); border-radius: var(--es-radius);
  background: var(--es-bone); color: var(--es-ink); font-size: 14px; text-decoration: none;
}
.es-act-dev-town .es-act-arrow { color: var(--es-ochre-dk); }
.es-act-dev-town:hover { background: var(--es-ochre); color: #fff; }
.es-act-dev-town:hover .es-act-arrow { color: #fff; }

/* 7 or more towns (2026-09-26): the same town buttons as compact chips
   wrapping across the card - no ranking, a fraction of the height. */
.es-act-dev-towns--compact { flex-direction: row; flex-wrap: wrap; gap: 4px; }
.es-act-dev-towns--compact .es-act-dev-town { padding: 3px 8px; font-size: 13px; gap: 5px; } /* same corners as the full-width buttons, so both read as one family */

/* 2026-10-18: a place to stay on the accommodation page - half-width delivery buttons */
.es-act-dev-towns--deliver { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.es-act-dev-towns--deliver { flex-wrap: nowrap; }
.es-act-dev-towns--deliver .es-venue-deliver { flex: 1 1 0; min-width: 0; justify-content: center; gap: 6px; padding: 7px 6px; font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; }
.es-venue-deliver-ico { flex: none; width: 30px; height: 20px; }
.es-venue-deliver-ico .es-venue-zap { fill: var(--es-ochre); stroke: var(--es-ochre); stroke-width: 1; }
.es-venue-deliver:hover .es-venue-zap { fill: #fff; stroke: #fff; }
.es-venue-deliver-line { margin: 0 0 14px; font-size: 16px; color: var(--es-ink-soft); }
.es-venue-name-link { color: inherit; text-decoration: underline; text-decoration-color: var(--es-ochre); text-underline-offset: 3px; }
.es-venue-name-link:hover { color: var(--es-ochre-dk); }

/* town fallback: plain pill button */
.es-act-btn {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border: 1px solid var(--es-ochre); border-radius: 999px;
  background: var(--es-surface); color: var(--es-ink); font-size: 16px; font-weight: 500; text-decoration: none;
}
.es-act-btn .es-act-arrow { color: var(--es-ochre-dk); }
.es-act-btn:hover { background: var(--es-ochre); color: #fff; }
.es-act-btn:hover .es-act-arrow { color: #fff; }


/* --- "Things to do here": NEARBY row (2026-09-24) -------------------------
   Compact cards, deliberately lighter than the main row: small square
   picture (optional) + name + one button per town (nearest first, max 3),
   each with its distance line. The card itself is NOT a link - only the
   town buttons are, same rule as the region cards. */
.es-nearby { margin-top: 28px; }
.es-nearby-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.es-nearby-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--es-surface); border: 1px solid var(--es-border);
  border-radius: 12px; padding: 10px;
}
.es-nearby-thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: var(--es-radius); overflow: hidden; }
.es-nearby-thumb picture { display: block; width: 100%; height: 100%; }
.es-nearby-thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.es-nearby-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.es-nearby-name { font-size: 15px; font-weight: 500; color: var(--es-ink); }
.es-nearby-town {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--es-ochre); border-radius: var(--es-radius);
  background: var(--es-bone); color: var(--es-ink); text-decoration: none; font-size: 13px;
}
.es-nearby-town-text { display: flex; flex-direction: column; min-width: 0; }
.es-nearby-town-name { font-weight: 500; }
.es-nearby-dist { font-size: 11px; color: var(--es-muted); }
.es-nearby-town .es-act-arrow { color: var(--es-ochre-dk); }
.es-nearby-town:hover { background: var(--es-ochre); color: #fff; }
.es-nearby-town:hover .es-nearby-dist, .es-nearby-town:hover .es-act-arrow { color: #fff; }
.es-nearby-town:hover .es-act-arrow { transform: translateX(3px); }
.es-nearby-town:focus-visible { outline: 2px solid var(--es-ochre); outline-offset: 2px; }
@media (min-width: 760px) {
  .es-nearby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- admin: flag empty fields (2026-09-24) --------------------------------
   Put class es-flag-empty on a field group; any text input in it that is
   EMPTY shows amber (reusing the existing --es-warn tokens) - something is
   missing. Relies on :placeholder-shown, so each input needs a placeholder
   attribute (a single space is enough and shows nothing). Clears live as
   the person types; no script. */
.es-flag-empty input[type="text"] {
  width: 100%; font-family: var(--es-font); font-size: 13px;
  padding: 7px 10px; border: 1px solid var(--es-border); border-radius: var(--es-radius-sm);
  background: var(--es-bone); color: var(--es-ink); outline: none;
}
.es-flag-empty input[type="text"]:focus { border-color: var(--es-ochre); }
.es-flag-empty input[type="text"]:placeholder-shown { background: var(--es-warn-bg); border-color: var(--es-warn); }

/* --- admin: operations grid cell states (2026-09-26) ------------------------
   The live/paused/- choice in each grid cell is coloured by its tile status,
   so no extra line is needed. The reason is in the title (hover) and the
   aria-label, so the status is never carried by colour alone. */
.es-cell-state { font-family: var(--es-font); font-size: 13px; padding: 4px 6px; border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); background: var(--es-surface); color: var(--es-ink); }
.es-cell-ok     { background: var(--es-ok-bg);     border-color: var(--es-ok);     color: var(--es-ok); }
.es-cell-gaps   { background: var(--es-warn-bg);   border-color: var(--es-warn);   color: var(--es-warn); }
.es-cell-bad    { background: var(--es-danger-bg); border-color: var(--es-danger); color: var(--es-danger); }
.es-cell-paused { background: var(--es-bone);      border-color: var(--es-border); color: var(--es-muted); }

/* --- admin: operator/review editor (2026-09-22) --------------------------- */
.es-review-admin-card {
  border: 1px solid var(--es-border); border-left: 4px solid var(--es-ochre);
  border-radius: var(--es-radius-sm); background: var(--es-surface);
  padding: 12px 14px; margin-bottom: 10px;
}
.es-lang-badge {
  display: inline-block; font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 10px; margin-left: 5px; font-weight: 500;
}
.es-lang-badge--original { background: var(--es-ok-bg); color: var(--es-ok); }
.es-lang-badge--translated { background: var(--es-warn-bg); color: var(--es-warn); }
.es-admin-tag-chip {
  display: inline-block; background: var(--es-sage); color: #fff;
  border-radius: 20px; padding: 2px 10px; font-size: 12px; margin-right: 6px;
}

@media (min-width: 760px) {
  .es-reservation-heading { font-size: 38px; }
  .es-operator-block { padding: 28px; }
  .es-review-card { flex: 0 0 280px; }
}

/* --- document block (2026-09-27) - terms, privacy, legal-notice ------------ */
.es-block-document { background: var(--es-bone); }
.es-block-document .es-block-inner { max-width: 820px; }
.es-doc-title { font-size: 28px; font-weight: 300; letter-spacing: .01em; color: var(--es-ink); margin-bottom: 6px; }
.es-doc-updated { font-size: var(--es-fs-sm); color: var(--es-muted); margin-bottom: 28px; }
.es-doc-body { font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--es-ink-soft); }
.es-doc-body h2 { font-size: 22px; font-weight: 400; color: var(--es-ink); margin: 34px 0 10px; scroll-margin-top: 16px; }
.es-doc-body h3 { font-size: 18px; font-weight: 500; color: var(--es-ink); margin: 26px 0 8px; scroll-margin-top: 16px; }
.es-doc-body h4 { font-size: 16px; font-weight: 500; color: var(--es-ink); margin: 20px 0 6px; scroll-margin-top: 16px; }
.es-doc-body > :first-child { margin-top: 0; }
.es-doc-body p { margin: 0 0 14px; }
.es-doc-body ul, .es-doc-body ol { margin: 0 0 14px; padding-left: 1.4em; }
.es-doc-body ul { list-style: disc; }
.es-doc-body ol { list-style: decimal; }
.es-doc-body li { margin-bottom: 5px; }
.es-doc-body strong { font-weight: 500; color: var(--es-ink); }
.es-doc-link { color: var(--es-ink); text-decoration: underline; text-decoration-color: var(--es-ochre); text-underline-offset: 2px; }
.es-doc-link:hover { color: var(--es-ochre-dk); }

/* legal notice under the header - non-French visitor on a legal page */
.es-legal-notice { background: var(--es-warn-bg); border-bottom: 1px solid var(--es-border); }
.es-legal-notice .es-block-inner { max-width: 820px; padding-top: 14px; padding-bottom: 14px; }
.es-legal-notice-text { font-size: 14px; line-height: 1.5; color: var(--es-warn); }
.es-legal-notice-link { display: inline-block; margin-top: 4px; font-size: 14px; color: var(--es-warn); text-decoration: underline; }
.es-legal-notice-link:hover { color: var(--es-ink); }

/* editor: a document block's language fields stacked full width, tall body */
.es-pb[data-block-type="document"] .es-lang-fields { flex-direction: column; }
.es-pb[data-block-type="document"] .es-langf textarea[data-text="body"] { min-height: 36em; }

@media (min-width: 760px) {
  .es-doc-title { font-size: 38px; }
  .es-legal-notice .es-block-inner { padding-top: 16px; padding-bottom: 16px; }
}

/* --- analytics opt-out confirmation (2026-09-28) - ES_Track.js shows it --- */
.es-optout-note { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 95; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--es-radius-sm); background: var(--es-ink); color: var(--es-bone); font-size: 14px; line-height: 1.4; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.es-optout-note[hidden] { display: none; }

/* --- form block (2026-09-29) - Render/ES_Form.php + /assets/JS/ES_Form.js --- */
.es-block-form { background: var(--es-bone); }
.es-block-form .es-block-inner { max-width: 820px; }
/* a text block's heading straight above the form: no second band of padding */
.es-block-text + .es-block-form .es-block-inner { padding-top: 0; }
.es-form { display: flex; flex-direction: column; gap: 22px; }
.es-form-group { border: none; display: flex; flex-direction: column; gap: 14px; }
.es-form-legend { font-size: 18px; font-weight: 400; color: var(--es-ink); margin-bottom: 4px; }
.es-form-field { display: flex; flex-direction: column; gap: 6px; }
.es-form-label { font-size: 14px; font-weight: 500; color: var(--es-ink-soft); }
.es-form-field.is-required .es-form-label::after { content: " *"; color: var(--es-ochre-dk); }
.es-form-input { width: 100%; font-family: var(--es-font); font-size: 16px; line-height: 1.4; color: var(--es-ink); background: var(--es-surface); border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); padding: 10px 12px; }
textarea.es-form-input { resize: vertical; min-height: 9em; }
.es-form-input::placeholder { color: var(--es-muted); }
.es-form-input:focus { outline: none; border-color: var(--es-ochre); box-shadow: 0 0 0 2px rgba(195,154,77,.25); }
.es-form-input[aria-invalid="true"] { border-color: var(--es-danger); background: var(--es-danger-bg); }
/* phone: ONE box - prefix segment on the left, number on the right, same height.
   Without JavaScript: the list and the number sit side by side as plain fields. */
.es-form-phone { display: flex; gap: 8px; }
.es-form-phone-pfx { order: -1; position: relative; display: flex; flex: 0 0 auto; }
.es-form-phone-pfx-show { display: none; }
.es-form-phone-num { flex: 1 1 auto; min-width: 0; }
.es-form.es-js .es-form-phone { gap: 0; background: var(--es-surface); border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); }
.es-form.es-js .es-form-phone:focus-within { border-color: var(--es-ochre); box-shadow: 0 0 0 2px rgba(195,154,77,.25); }
.es-form.es-js .es-form-phone.is-invalid { border-color: var(--es-danger); background: var(--es-danger-bg); }
.es-form.es-js .es-form-phone .es-form-input { border: none; border-radius: 0; background: transparent; box-shadow: none; }
.es-form.es-js .es-form-phone-pfx { border-right: 1px solid var(--es-border); }
.es-form.es-js .es-form-phone-pfx:focus-within { background: var(--es-bone); }
.es-form.es-js .es-form-phone-pfx-show { display: flex; align-items: center; padding: 0 12px; min-width: 4.8em; font-size: 16px; color: var(--es-ink); white-space: nowrap; }
.es-form.es-js .es-form-phone-cc { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.es-form-phone-suggest { margin-top: 2px; }
.es-form-phone-suggest[hidden] { display: none; }
.es-form-phone-suggest-btn { background: none; border: none; padding: 0; font-family: var(--es-font); font-size: 14px; color: var(--es-ink); text-decoration: underline; text-decoration-color: var(--es-ochre); text-underline-offset: 2px; cursor: pointer; text-align: left; }
.es-form-phone-suggest-btn:hover { color: var(--es-ochre-dk); }
.es-form-phone-suggest-btn:focus-visible { outline: 2px solid var(--es-ochre); outline-offset: 2px; }
.es-form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--es-ink-soft); cursor: pointer; }
.es-form-consent input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--es-ochre); }
.es-form-consent input[aria-invalid="true"] { outline: 2px solid var(--es-danger); outline-offset: 2px; }
.es-form-consent-link { font-size: 14px; color: var(--es-ink); text-decoration: underline; text-decoration-color: var(--es-ochre); text-underline-offset: 2px; margin-left: 28px; }
.es-form-consent-link:hover { color: var(--es-ochre-dk); }
.es-form-err { font-size: 13px; color: var(--es-danger); }
.es-form-status { font-size: 14px; color: var(--es-danger); background: var(--es-danger-bg); border-radius: var(--es-radius-sm); padding: 10px 12px; }
.es-form-submit { align-self: flex-start; padding: 12px 28px; font-size: 16px; }
.es-form-submit:disabled { opacity: .6; cursor: wait; }
.es-form-submit:focus-visible { outline: 2px solid var(--es-ochre); outline-offset: 2px; }
.es-form-sent { background: var(--es-ok-bg); border-radius: var(--es-radius); padding: 22px 24px; }
.es-form-sent:focus { outline: none; }
.es-form-sent .es-block-head { color: var(--es-ok); margin-bottom: 8px; }
.es-form-sent-body { font-size: 15px; line-height: 1.6; color: var(--es-ink-soft); }
.es-form[hidden], .es-form-err[hidden], .es-form-status[hidden], .es-form-sent[hidden] { display: none; }
/* choice tiles (2026-09-30): real radio buttons, drawn as buttons that wrap */
.es-form-choice { border: none; }
.es-form-choice-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.es-form-choice-tile { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.es-form-choice-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.es-form-choice-text { display: inline-block; padding: 9px 16px; font-size: 15px; line-height: 1.2; color: var(--es-ink); background: var(--es-surface); border: 1px solid var(--es-border); border-radius: 999px; }
.es-form-choice-tile:hover .es-form-choice-text { border-color: var(--es-ochre); }
.es-form-choice-tile input:checked + .es-form-choice-text, .es-form-choice-tile.is-chosen .es-form-choice-text { background: var(--es-ochre); border-color: var(--es-ochre); color: var(--es-ink); font-weight: 500; }
.es-form-choice-tile input:focus-visible + .es-form-choice-text { outline: 2px solid var(--es-ochre-dk); outline-offset: 2px; }
.es-form-group[hidden], .es-form-field[hidden] { display: none; }

/* --- admin conversations list (2026-09-30) - admin/conversations/index.php ---
   each row is ONE link: click anywhere on it to open the conversation. */
.es-conv-list { display: flex; flex-direction: column; gap: 6px; }
.es-conv-row { display: grid; grid-template-columns: 3em 10.5em minmax(12em, 1.3fr) 7em 3em 3.5em 4em minmax(12em, 2fr); gap: 12px; align-items: center; padding: 10px 14px; background: var(--es-surface); border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); color: var(--es-ink); text-decoration: none; font-size: 14px; }
a.es-conv-row:hover { border-color: var(--es-ochre); background: var(--es-bone); }
a.es-conv-row:focus-visible { outline: 2px solid var(--es-ochre); outline-offset: 2px; }
.es-conv-row.is-unread { border-left: 4px solid var(--es-ochre); }
.es-conv-row.is-unread .es-conv-name { font-weight: 600; }
.es-conv-row.is-urgent { border-color: var(--es-danger); background: var(--es-danger-bg); }
.es-conv-row.is-urgent.is-unread { border-left-color: var(--es-danger); }
.es-conv-head { background: transparent; border-color: transparent; color: var(--es-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-top: 0; padding-bottom: 0; }
.es-conv-from { display: flex; flex-direction: column; min-width: 0; }
.es-forms-row { grid-template-columns: minmax(10em, 1.5fr) 9em 3em 4em 7em minmax(10em, 1.5fr); }
.es-conv-from > span, .es-conv-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .es-conv-head { display: none; }
  .es-conv-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .es-conv-row > span:nth-child(1), .es-conv-row > span:nth-child(4), .es-conv-row > span:nth-child(5), .es-conv-row > span:nth-child(6) { display: none; }
  .es-conv-snippet { grid-column: 1 / -1; }
  .es-forms-row > span { display: block !important; }
  .es-forms-row { grid-template-columns: 1fr 1fr; }
}

/* =============================================================================
 * Reviews block - list layout (2026-10-03). ES_Blocks.php 'reviews' with
 * layout = list: every review in full, with filter buttons above. The card
 * itself is the existing .es-review-card; here it only stops being a
 * fixed-width carousel item. Filtering (ES_Core.js) sets [hidden] on a card.
 * ========================================================================= */
.es-reviews-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.es-reviews-filter {
  font-family: var(--es-font); font-size: 14px; color: var(--es-ink);
  min-height: 40px; padding: 0 16px; cursor: pointer;
  background: var(--es-surface); border: 1px solid var(--es-border); border-radius: 999px;
}
.es-reviews-filter:hover { border-color: var(--es-ochre); }
.es-reviews-filter:focus-visible { outline: 2px solid var(--es-ochre); outline-offset: 2px; }
.es-reviews-filter.is-on { background: var(--es-ochre); border-color: var(--es-ochre); font-weight: 600; }
.es-reviews-list { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.es-reviews-list .es-review-card { flex: none; font-size: 15px; }
.es-reviews-list .es-review-card[hidden] { display: none; }
@media (min-width: 760px) {
  .es-reviews-list { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* =============================================================================
 * "What people said" (2026-10-06) - operator reviews under the activity cards
 * in "Things you can do here" (ES_Blocks.php es_blk_place_reviews_html()).
 * Up to three cards. The card is the existing .es-review-card.
 * ========================================================================= */
.es-place-reviews { margin-top: 28px; }
.es-place-reviews-grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.es-place-reviews .es-review-card { flex: none; background: var(--es-surface); }
.es-place-review-about {
  display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--es-border);
  font-size: 12.5px; line-height: 1.4; color: var(--es-ink-soft); text-decoration: none;
}
a.es-place-review-about { color: var(--es-ochre-dk); font-weight: 500; }
a.es-place-review-about:hover { text-decoration: underline; }
a.es-place-review-about:hover .es-act-arrow { transform: translateX(3px); }
a.es-place-review-about:focus-visible { outline: 2px solid var(--es-ochre); outline-offset: 2px; }
@media (min-width: 760px) {
  .es-place-reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* =============================================================================
 * Translation console - editable / missing / locked cells (2026-10-06).
 * admin/translation/index.php es_tr_cell() + /assets/JS/ES_Translation.js.
 *   td.es-cell          can be changed  -> looks like a field (white box)
 *   td.es-tcell-empty   no wording      -> amber (with either of the others)
 *   td.es-tcell-locked  cannot be changed here -> grey, dashed, not-allowed
 *   td.es-tcell-long    long / multi-line wording
 * ========================================================================= */
.es-grid td.es-cell .es-cell-val,
.es-grid td.es-tcell-locked .es-cell-val {
  display: block; min-height: 1.5em; padding: 5px 8px;
  border: 1px solid var(--es-border); border-radius: var(--es-radius-sm);
}
.es-grid td.es-cell .es-cell-val { background: #fff; color: var(--es-ink); }
.es-grid td.es-cell:hover .es-cell-val { border-color: var(--es-ochre); }
.es-grid td.es-tcell-locked { cursor: not-allowed; min-width: 120px; }
.es-grid td.es-tcell-locked .es-cell-val { background: var(--es-bone); border-style: dashed; color: var(--es-muted); }
.es-grid td.es-tcell-empty .es-cell-val { background: var(--es-warn-bg); border-color: var(--es-warn); color: var(--es-warn); }
.es-grid td.es-tcell-long .es-cell-val { max-height: 7.5em; overflow: auto; white-space: pre-wrap; }
.es-cell-input--multi { width: 100%; min-width: 280px; resize: vertical; font-family: var(--es-font); line-height: 1.4; }

/* =============================================================================
 * RESERVATION PAGE PRESENTATION (2026-10-06, evening) - see this file's UPDATED
 * note. Rendered by ES_Blocks.php: 'operator_trust' (opening band + reviews),
 * 'operator_about', 'reserve' (closing band). Phone first; desktop from 760px.
 * Rules marked REPLACES come after an older rule of the same name further up
 * and take over from it; the older rule is left where it is.
 * ========================================================================= */

/* --- the operator block's own ground (REPLACES the bone background) -------- */
.es-block-operator-trust { background: var(--es-surface); }

/* --- opening band ---------------------------------------------------------- */
.es-res-open { background: var(--es-ink); color: #fff; }
.es-block-inner.es-res-open-inner {
  display: flex; flex-direction: column; gap: 26px;
  padding: 44px 18px 48px;
}
.es-res-open-text { min-width: 0; }
/* REPLACES .es-reservation-heading / .es-reservation-subheading */
.es-res-open .es-reservation-heading {
  font-size: 36px; line-height: 1.08; font-weight: 300; letter-spacing: 0;
  color: #fff; margin-bottom: 12px;
}
.es-res-open .es-reservation-subheading {
  font-size: 18px; font-weight: 300; color: var(--es-ochre); margin-bottom: 16px;
}
.es-res-open .es-operator-score-summary { margin: 0; gap: 8px; }
.es-res-open .es-score-stars { font-size: 22px; }
.es-res-open .es-score-avg { color: #fff; font-size: 18px; font-weight: 500; }
.es-res-open .es-score-count { color: var(--es-bone); font-size: 16px; }
.es-res-open-ratings { margin-top: 14px; }
.es-res-open .es-operator-rating { font-size: 15px; }
.es-res-open .es-operator-rating .es-rating-source { color: var(--es-bone); }
.es-res-open .es-operator-rating .es-rating-value { color: #fff; }
.es-res-open .es-operator-rating .es-rating-count { color: var(--es-bone); }
.es-res-open .es-operator-rating:hover .es-rating-value { color: var(--es-ochre); }

/* --- the Reserve button (REPLACES .es-reserve-btn and .es-reserve-btn-top) - */
.es-reserve-btn {
  display: block; width: 100%; text-align: center; padding: 16px 28px;
  background: var(--es-ochre); color: var(--es-ink); border-radius: var(--es-radius-sm);
  font-weight: 600; font-size: 18px; line-height: 1.25; text-decoration: none;
}
.es-reserve-btn:hover { background: var(--es-bone); color: var(--es-ink); }
.es-reserve-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.es-reserve-btn-top { display: block; width: 100%; padding: 16px 28px; font-size: 18px; margin-bottom: 0; }
/* 2026-10-18: more than one button side by side - a gap, and they wrap */
.es-res-open-action { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- reviews under the opening --------------------------------------------- */
.es-res-reviews { border-bottom: 1px solid var(--es-border); }
.es-block-inner.es-res-reviews-inner { padding: 40px 18px; }
.es-res-reviews-head {
  font-size: 26px; font-weight: 300; line-height: 1.15; color: var(--es-ink); margin-bottom: 18px;
}
/* larger cards - ONLY inside the operator block */
.es-block-operator-trust .es-review-card {
  flex: 0 0 280px; border: none; background: var(--es-bone);
  padding: 22px; font-size: 16px;
}
.es-block-operator-trust .es-review-stars { font-size: 15px; }
.es-block-operator-trust .es-review-quote { line-height: 1.55; }
.es-block-operator-trust .es-review-more { font-size: inherit; }
.es-block-operator-trust .es-review-translated-note,
.es-block-operator-trust .es-review-visited { font-size: 13px; }
.es-block-operator-trust .es-reviews-arrow { width: 40px; height: 40px; font-size: 20px; }

/* the map that follows the operator block on a reservation page */
.es-block-operator-trust + .es-block-map { margin-top: 40px; }

/* --- BLOCK: operator_about -------------------------------------------------- */
.es-block-operator-about { background: var(--es-bone); }
.es-block-inner.es-op-about {
  display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
  padding: 44px 18px;
}
.es-op-about-media { flex: 0 0 auto; }
.es-op-about .es-operator-logo { max-width: 160px; max-height: 110px; }
.es-op-about-text { min-width: 0; max-width: 720px; }
.es-op-about-head {
  font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--es-ink); margin-bottom: 14px;
}
.es-op-about .es-operator-bio { font-size: 17px; line-height: 1.6; }
.es-op-about .es-operator-other-towns { margin-top: 18px; font-size: 15px; }

/* --- closing panel (REPLACES the reserve block's background and padding).
   A dark panel kept to the page width, NOT a full-width band - full width
   it read as part of the footer. The section itself stays bone and only
   gives the panel its side and bottom space. ------------------------------ */
.es-block-reserve { background: var(--es-bone); padding: 0 18px 48px; }
.es-block-reservation-note + .es-block-reserve,
.es-block-map + .es-block-reserve { padding-top: 40px; }
.es-block-reserve .es-block-inner.es-res-close {
  display: flex; flex-direction: column; gap: 22px;
  padding: 36px 24px;
  background: var(--es-ink); color: #fff; border-radius: var(--es-radius);
}
.es-res-close-line {
  font-size: 28px; font-weight: 300; line-height: 1.12; color: #fff;
}

@media (min-width: 760px) {
  .es-block-inner.es-res-open-inner {
    flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px;
    padding: 84px 32px 88px;
  }
  .es-res-open-text { flex: 1 1 520px; }
  .es-res-open-action { flex: 0 0 auto; }
  .es-res-open .es-reservation-heading { font-size: 60px; line-height: 1.06; max-width: 680px; }
  .es-res-open .es-reservation-subheading { font-size: 22px; }
  .es-res-open .es-score-stars { font-size: 24px; }

  .es-reserve-btn, .es-reserve-btn-top { display: inline-block; width: auto; padding: 18px 36px; font-size: 20px; }

  .es-block-inner.es-res-reviews-inner { padding: 64px 32px; }
  .es-res-reviews-head { font-size: 36px; margin-bottom: 24px; }
  .es-block-operator-trust .es-review-card { flex-basis: 330px; padding: 28px; font-size: 17px; }
  .es-block-operator-trust .es-reviews-arrow { width: 44px; height: 44px; }
  .es-block-operator-trust + .es-block-map { margin-top: 72px; }

  .es-block-inner.es-op-about { flex-direction: row; gap: 40px; padding: 72px 32px; }
  .es-op-about-text { flex: 1 1 420px; }
  .es-op-about-head { font-size: 30px; }
  .es-op-about .es-operator-bio { font-size: 18px; }

  .es-block-reserve { padding: 0 32px 80px; }
  .es-block-reservation-note + .es-block-reserve,
  .es-block-map + .es-block-reserve { padding-top: 56px; }
  .es-block-reserve .es-block-inner.es-res-close {
    flex-direction: row; align-items: center; justify-content: space-between; gap: 32px;
    padding: 56px 48px;
  }
  .es-res-close-line { font-size: 40px; max-width: 560px; }
  .es-res-close-action { flex: 0 0 auto; }
}


/* =============================================================================
 * RESERVATION PAGE CONTENT BLOCKS (2026-10-07) - see this file's UPDATED note.
 * Rendered by ES_Blocks.php: 'operator_trust' (optional headline, intro and
 * photo in the opening band), 'operator_reviews', 'facts_row', 'photo_row',
 * 'pull_quote'. Each shows nothing while empty. Phone first; desktop from 760px.
 * ========================================================================= */

/* --- opening band: the optional typed content ------------------------------ */
.es-res-open-eyebrow { font-size: 15px; line-height: 1.4; color: var(--es-ochre); margin-bottom: 12px; }
.es-res-open-intro {
  font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--es-bone);
  max-width: 480px; margin-bottom: 16px;
}

/* --- opening band WITH a photo: words + button, and the photo -------------- */
.es-res-open-split { display: flex; flex-direction: column; }
.es-res-open-photo { order: -1; position: relative; height: 240px; overflow: hidden; background: var(--es-ink-soft); }
.es-res-open-photo img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  max-width: none; object-fit: cover; display: block;
}
.es-res-open-panel { padding: 32px 18px 44px; }
.es-res-open-panel-inner { width: 100%; }
.es-res-open--photo .es-reservation-heading { font-size: 34px; }
.es-res-open--photo .es-res-open-action { margin-top: 24px; }
/* 2026-10-18: a graphic (emblem / logo) in the photo place - whole, on the panel colour */
.es-res-open-photo--graphic { height: 180px; background: var(--es-ink); }
.es-res-open-photo--graphic img { object-fit: contain; padding: 24px; box-sizing: border-box; }

/* --- BLOCK: operator_reviews ------------------------------------------------ */
.es-block-operator-reviews { background: var(--es-surface); }
.es-block-photo-row + .es-block-operator-reviews,
.es-block-pull-quote + .es-block-operator-reviews { border-top: 1px solid var(--es-border); }
/* the same larger cards the reviews had inside the operator block */
.es-block-operator-reviews .es-review-card {
  flex: 0 0 280px; border: none; background: var(--es-bone);
  padding: 22px; font-size: 16px;
}
.es-block-operator-reviews .es-review-stars { font-size: 15px; }
.es-block-operator-reviews .es-review-quote { line-height: 1.55; }
.es-block-operator-reviews .es-review-more { font-size: inherit; }
.es-block-operator-reviews .es-review-translated-note,
.es-block-operator-reviews .es-review-visited { font-size: 13px; }
.es-block-operator-reviews .es-reviews-arrow { width: 40px; height: 40px; font-size: 20px; }
.es-block-operator-reviews + .es-block-map,
.es-block-facts-row + .es-block-map { margin-top: 40px; }

/* --- BLOCK: facts_row ------------------------------------------------------- */
.es-block-facts-row { background: var(--es-surface); border-bottom: 1px solid var(--es-border); }
.es-block-facts-row .es-block-inner { padding: 30px 18px; }
.es-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px 20px; }
.es-fact { min-width: 0; }
.es-fact-label { font-size: 14px; color: var(--es-ink-soft); margin-bottom: 4px; }
.es-fact-value { font-size: 21px; font-weight: 500; line-height: 1.25; color: var(--es-ink); }
.es-fact-note { font-size: 14px; line-height: 1.45; color: var(--es-ink-soft); margin-top: 5px; }

/* --- BLOCK: photo_row ------------------------------------------------------- */
.es-block-photo-row { background: var(--es-bone); }
.es-block-photo-row .es-block-inner { padding: 44px 18px 20px; }
.es-photo-row-head {
  font-size: 26px; font-weight: 300; line-height: 1.15; color: var(--es-ink);
  max-width: 700px; margin-bottom: 22px;
}
.es-photo-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.es-photo-card { min-width: 0; }
.es-photo-card-media {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--es-radius-sm);
  background: var(--es-border); margin-bottom: 14px;
}
.es-photo-card-media picture { display: block; width: 100%; height: 100%; }
.es-photo-card-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.es-photo-card-head { font-size: 19px; font-weight: 500; line-height: 1.25; color: var(--es-ink); margin-bottom: 6px; }
.es-photo-card-body { font-size: 16px; line-height: 1.55; color: var(--es-ink-soft); }

/* --- BLOCK: pull_quote ------------------------------------------------------ */
.es-block-pull-quote { background: var(--es-bone); }
.es-block-pull-quote .es-block-inner { padding: 30px 18px 44px; }
.es-pull-quote { max-width: 880px; }
.es-pull-quote-text { font-size: 28px; font-weight: 300; line-height: 1.2; color: var(--es-ink); }
.es-pull-quote-text::before { content: open-quote; }
.es-pull-quote-text::after { content: close-quote; }
.es-pull-quote-by { font-size: 15px; color: var(--es-ink-soft); margin-top: 14px; }

@media (min-width: 760px) {
  .es-res-open-eyebrow { font-size: 17px; margin-bottom: 14px; }
  .es-res-open-intro { font-size: 20px; }

  .es-res-open-split { flex-direction: row; align-items: stretch; }
  .es-res-open-photo { order: 0; flex: 1 1 420px; height: auto; min-height: 560px; }
  .es-res-open-panel { flex: 1 1 520px; display: flex; justify-content: flex-end; padding: 72px 48px 72px 32px; }
  .es-res-open-panel-inner { max-width: 520px; }
  .es-res-open--photo .es-reservation-heading { font-size: 54px; line-height: 1.08; max-width: none; }
  .es-res-open--photo .es-res-open-action { margin-top: 30px; }
  .es-res-open-photo--graphic { flex: 0 1 360px; min-height: 0; }   /* 2026-10-18 */
  .es-res-open-photo--graphic img { padding: 48px; }

  .es-block-operator-reviews .es-review-card { flex-basis: 330px; padding: 28px; font-size: 17px; }
  .es-block-operator-reviews .es-reviews-arrow { width: 44px; height: 44px; }
  .es-block-operator-reviews + .es-block-map,
  .es-block-facts-row + .es-block-map { margin-top: 72px; }

  .es-block-facts-row .es-block-inner { padding: 44px 32px; }
  .es-facts-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 32px; }
  .es-fact-label, .es-fact-note { font-size: 15px; }
  .es-fact-value { font-size: 24px; }

  .es-block-photo-row .es-block-inner { padding: 80px 32px 36px; }
  .es-photo-row-head { font-size: 38px; margin-bottom: 32px; }
  .es-photo-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
  .es-photo-card-head { font-size: 21px; }
  .es-photo-card-body { font-size: 17px; }

  .es-block-pull-quote .es-block-inner { padding: 52px 32px 72px; }
  .es-pull-quote-text { font-size: 44px; line-height: 1.18; }
  .es-pull-quote-by { font-size: 17px; margin-top: 18px; }
}


/* =============================================================================
 * THE HEADER STAYS IN VIEW ON A PHONE (2026-10-07) - see this file's UPDATED note.
 * ========================================================================= */

/* A map (Leaflet) numbers its own layers from 200 up to 1000 - higher than
   anything on this site. Keeping each map in a layer of its own stops those
   numbers competing with the header, the menu and the pop-ups. */
.es-map-canvas { isolation: isolate; }

/* Phone only (desktop starts at 760px, as everywhere in this file). Above
   page content; below the pop-ups (.es-modal 50, the menu 90, the lightbox 200). */
@media (max-width: 759.98px) {
  .es-site-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 45; }
}


/* =============================================================================
 * THE VISUAL EDITOR, STEP 1 (2026-10-07) - admin/pages/visual.php. The bar and
 * the frame that shows the real page (admin/pages/preview.php). Admin only.
 * ========================================================================= */

/* the screen: bar on top, the page fills the rest */
body.es-ve { display: flex; flex-direction: column; height: 100vh; height: 100dvh; margin: 0; }

.es-ve-bar {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px; padding: 8px 20px; background: var(--es-surface); border-bottom: 1px solid var(--es-border);
}
.es-ve-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
/* second row of the bar: the switches on the left, the links on the right */
.es-ve-tools { flex: 1 1 100%; justify-content: space-between; }
.es-ve-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--es-ink); }
.es-ve-link:hover { color: var(--es-ochre-dk); }
.es-ve-back { font-weight: 500; }
.es-ve-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.es-ve-kicker { font-size: 12px; color: var(--es-ink-soft); }
.es-ve-title b { font-size: 16px; font-weight: 500; color: var(--es-ink); }

.es-ve-pill {
  font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
  background: var(--es-bone); border: 1px solid var(--es-border); color: var(--es-ink); white-space: nowrap;
}
.es-ve-pill.is-on { background: var(--es-ok-bg); border-color: var(--es-ok-bg); color: var(--es-ok); }
.es-ve-note { font-size: 14px; color: var(--es-ink-soft); }

.es-ve-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.es-ve-form label { font-size: 14px; color: var(--es-ink-soft); }
.es-ve-form select {
  min-height: 44px; max-width: 220px; padding: 0 10px; font-family: var(--es-font); font-size: 15px;
  color: var(--es-ink); background: var(--es-surface); border: 1px solid var(--es-border); border-radius: var(--es-radius-sm);
}
.es-ve-btn {
  min-height: 44px; padding: 0 16px; font-family: var(--es-font); font-size: 15px; font-weight: 500;
  color: var(--es-ink); background: var(--es-surface); border: 1px solid var(--es-ink);
  border-radius: var(--es-radius-sm); cursor: pointer;
}
.es-ve-btn:hover { background: var(--es-bone); }

/* two-or-more-way switches: language, width */
.es-ve-seg { display: flex; border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); overflow: hidden; }
.es-ve-seg a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 15px;
  color: var(--es-ink); background: var(--es-surface); text-decoration: none;
}
.es-ve-seg a + a { border-left: 1px solid var(--es-border); }
.es-ve-seg a:hover { background: var(--es-bone); color: var(--es-ink); }
.es-ve-seg a.is-active, .es-ve-seg a.is-active:hover { background: var(--es-ink); color: #fff; }

.es-ve-link:focus-visible, .es-ve-btn:focus-visible, .es-ve-seg a:focus-visible, .es-ve-form select:focus-visible {
  outline: 2px solid var(--es-ochre); outline-offset: 2px;
}

.es-ve-alert { margin: 10px 20px 0; }
.es-ve-empty { padding: 24px 20px; max-width: 760px; }

/* the page itself */
.es-ve-stage { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; background: var(--es-border); }
.es-ve-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--es-bone); }
.es-ve-stage--phone { padding: 16px 0; }
.es-ve-stage--phone .es-ve-frame {
  width: 390px; max-width: 100%; border: 1px solid var(--es-ink-soft); border-radius: var(--es-radius);
}


/* =============================================================================
 * THE VISUAL EDITOR, STEP 2 (2026-10-07) - editing in place.
 * ========================================================================= */

/* the padlock drawing (ink) - used on the editor screen and inside the page */
.es-ve, .es-editing {
  --es-edit-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f3529' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

/* --- on the editor screen (admin/pages/visual.php) -------------------------- */
.es-ve-status { font-size: 14px; color: var(--es-ink-soft); }
.es-ve-status.is-error { color: var(--es-danger); font-weight: 600; }
.es-ve-seg--mode { border-color: var(--es-ink); }
.es-ve-seg--mode a { font-weight: 600; }

.es-ve-legend {
  flex: 1 1 100%; gap: 6px 26px; padding-top: 8px; border-top: 1px solid var(--es-border);
  font-size: 13px; color: var(--es-ink-soft);
}
.es-ve-legend span { display: inline-flex; align-items: center; gap: 8px; }
.es-ve-key { display: inline-block; flex: 0 0 auto; width: 24px; height: 14px; }
.es-ve-key--type { outline: 2px dashed var(--es-ochre-dk); outline-offset: -2px; border-radius: 2px; }
.es-ve-key--photo { background: var(--es-border); border: 2px dashed var(--es-ink-soft); }
.es-ve-key--lock { width: 15px; height: 15px; background: var(--es-edit-lock) center / contain no-repeat; }

.es-ve-picker .es-modal { max-width: 820px; }
.es-ve-picker-note { margin-bottom: 10px; }
.es-ve-picker-search { margin-bottom: 12px; }
.es-ve-pickcard { width: 100%; padding: 0; font-family: var(--es-font); text-align: left; cursor: pointer; }
.es-ve-pickcard:hover, .es-ve-pickcard:focus-visible { border-color: var(--es-ochre); outline: 2px solid var(--es-ochre); outline-offset: 1px; }

/* --- INSIDE the page, only while it is being edited (.es-editing) ----------- */

/* typed words: a dashed outline; solid while the cursor is in them */
.es-editing [data-es-slot] {
  outline: 2px dashed var(--es-ochre-dk); outline-offset: 4px; border-radius: 2px;
  cursor: text; min-height: 1.2em;
}
/* where typed words sit close together, a little more room between their
   outlines than the live page has (Preview shows the exact spacing) */
.es-editing .es-fact > [data-es-slot] { outline-offset: 2px; margin-top: 0; margin-bottom: 9px; }
.es-editing .es-fact > [data-es-slot]:last-child { margin-bottom: 0; }
.es-editing .es-photo-card [data-es-slot] { outline-offset: 2px; }
.es-editing .es-photo-card-head { margin-bottom: 11px; }
.es-editing .es-pull-quote-by { margin-top: 22px; }
/* the note fills its band from edge to edge: draw its outline inside it */
.es-editing .es-block-reservation-note [data-es-slot] { outline-offset: -9px; }
.es-editing .es-res-open [data-es-slot] { outline-color: var(--es-ochre); }
.es-editing [data-es-slot]:hover { outline-style: solid; }
.es-editing [data-es-slot]:focus { outline: 2px solid var(--es-ochre); }
.es-editing [data-es-mode="multi"] { white-space: pre-wrap; }
/* an empty place: its prompt, greyed, in the place's own type */
.es-editing [data-es-slot]:empty::before { content: attr(data-es-ph); opacity: .6; }
/* ... and on a page in another language with no text of its own yet: the
   live page falls back to the English, so say so and show it */
.es-editing [data-es-slot][data-es-en]:empty::before { content: "Not translated. Visitors see: " attr(data-es-en); }
.es-editing .es-pull-quote-text:empty::after { content: none; }
/* saving / saved / not saved */
.es-editing [data-es-slot].es-edit-saving { outline: 2px solid var(--es-ink-soft); }
.es-editing [data-es-slot].es-edit-saved  { outline: 2px solid var(--es-ok); }
.es-editing [data-es-slot].es-edit-failed { outline: 3px solid var(--es-danger); }

/* photo places */
.es-editing [data-es-media] { position: relative; }
.es-editing .es-edit-media-tools { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.es-editing .es-edit-btn {
  min-height: 44px; padding: 0 16px; font-family: var(--es-font); font-size: 15px; font-weight: 600;
  color: var(--es-ink); background: #fff; border: 1px solid var(--es-ink); border-radius: var(--es-radius-sm); cursor: pointer;
}
.es-editing .es-edit-btn:hover { background: var(--es-bone); }
.es-editing .es-edit-btn:focus-visible { outline: 2px solid var(--es-ochre); outline-offset: 2px; }
.es-editing .es-edit-btn:disabled { opacity: .6; cursor: default; }
.es-editing .es-edit-media-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 18px; text-align: center; background: var(--es-border); border: 2px dashed var(--es-ink-soft);
}
.es-editing .es-edit-media-empty .es-edit-media-tools { position: static; justify-content: center; }
.es-editing .es-edit-media-note { font-size: 14px; line-height: 1.4; color: var(--es-ink); max-width: 320px; }

/* parts that fill themselves in: a padlock label in the corner */
.es-editing [data-es-auto] { position: relative; }
.es-editing [data-es-auto]::before {
  content: attr(data-es-auto); position: absolute; top: 10px; right: 10px; z-index: 3;
  max-width: calc(100% - 20px); box-sizing: border-box; padding: 4px 12px 4px 30px;
  font-family: var(--es-font); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-align: left;
  color: var(--es-ink); background: var(--es-surface) var(--es-edit-lock) 10px center / 13px 13px no-repeat;
  border: 1px solid var(--es-border); border-radius: 999px;
}
/* a single automatic line or button inside a typed block: just the padlock */
.es-editing [data-es-lock]::after {
  content: ''; display: inline-block; width: 15px; height: 15px; margin-left: 8px; vertical-align: -2px;
  border-radius: 50%; background: var(--es-surface) var(--es-edit-lock) center / 11px 11px no-repeat;
}
/* a block with nothing to show: one line, so it is not simply missing */
.es-editing .es-edit-ghost {
  max-width: var(--es-maxw); margin: 14px auto; padding: 12px 18px 12px 44px; font-size: 14px; color: var(--es-ink-soft);
  border: 1px dashed var(--es-ink-soft); border-radius: var(--es-radius-sm);
  background: var(--es-surface) var(--es-edit-lock) 16px center / 15px 15px no-repeat;
}
.es-editing .es-edit-ghost[data-es-auto]::before { content: none; }


/* --- the visual editor's on/off switch (2026-10-07, evening) --------------- */
.es-ve-switch {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 2px;
  font-family: var(--es-font); font-size: 16px; font-weight: 600; color: var(--es-ink);
  background: none; border: 0; border-radius: 999px; cursor: pointer;
}
.es-ve-switch-track {
  position: relative; flex: 0 0 auto; width: 54px; height: 30px; border-radius: 999px;
  background: var(--es-muted);
}
.es-ve-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
}
.es-ve-switch.is-on .es-ve-switch-track { background: var(--es-ok); }
.es-ve-switch.is-on .es-ve-switch-knob { left: 27px; }
.es-ve-switch.is-on .es-ve-switch-text { color: var(--es-ok); }
.es-ve-switch-text { min-width: 26px; text-align: left; }
.es-ve-switch:hover .es-ve-switch-track { box-shadow: 0 0 0 3px var(--es-border); }
.es-ve-switch:focus-visible { outline: 2px solid var(--es-ochre); outline-offset: 2px; }


/* =============================================================================
 * THE OPENING BAND: a typed headline sits UNDER the heading (2026-10-07, later
 * again) - see this file's UPDATED note. Rendered by ES_Blocks.php 'operator_trust'.
 * ========================================================================= */
.es-res-open-headline {
  font-size: 24px; font-weight: 300; line-height: 1.25; color: #fff;
  max-width: 620px; margin-bottom: 14px;
}
@media (min-width: 760px) {
  .es-res-open-headline { font-size: 34px; line-height: 1.2; margin-bottom: 16px; }
  .es-res-open--photo .es-res-open-headline { font-size: 30px; }
}

/* in the editor: an empty headline is only a slim prompt (it takes its real
   size the moment something is typed) */
.es-editing .es-res-open-headline:empty { font-size: 16px; line-height: 1.5; }
/* in the editor: a band with no photo - one slim place to add one */
.es-editing .es-edit-addphoto.es-edit-media-empty {
  flex-direction: row; flex-wrap: wrap; gap: 8px 16px; padding: 8px 14px;
  margin: 0 18px 20px; border-radius: var(--es-radius-sm);
}
@media (min-width: 760px) {
  .es-editing .es-edit-addphoto.es-edit-media-empty { max-width: calc(var(--es-maxw) - 64px); margin: 0 auto 28px; }
}
/* in the editor: the small padlock after an automatic line must take NO room,
   or it pushes the line's last word down and the editor stops matching the
   live page. Lifted out of the text flow; it stays where it would have stood. */
.es-editing [data-es-lock]::after { position: absolute; }

/* --- the visual editor screen under the standard admin header (2026-10-07) -- */
body.es-ve > *:not(.es-ve-stage) { flex: 0 0 auto; }   /* header and bars keep their height */
.es-ve-stage { min-height: 420px; }                     /* the page area never collapses */
/* --- the map pin pop-up: our colours, not Leaflet's link blue (2026-10-25) --
   .leaflet-container a (#0078A8) outranks .es-act-dev-town / .es-venue-name-link;
   these re-state the list's own colours inside the pop-up only. */
.es-map-pop a.es-act-dev-town                    { color: var(--es-ink); }
.es-map-pop a.es-act-dev-town:hover              { color: #fff; }
.es-map-pop a.es-venue-name-link                 { color: inherit; }
.es-map-pop a.es-venue-name-link:hover           { color: var(--es-ochre-dk); }