/*
Theme Name:  Premier Properties of Charleston v2
Theme URI:   https://premierpropertiesofchs.com
Author:      Roger Grant
Description: Custom WordPress theme for Premier Properties of Charleston. LATEST UPDATE — FIX for the desktop horizontal scrollbar on full-bleed pages; new page templates "Showcases — Full Width" and "Showcases — Constrained Width (1400px)" make it easy to switch and compare widths per page.
Version:     2.73
Requires at least: 6.0
Tested up to: 6.7
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: premier-properties

   Changelog
   ---------
   v1.01  Added z-index: 300 to .site-header so logo overlaps nav bar correctly.
   v1.02  Added --brand-color-accent-mid variable; added 3px gold border to
          .site-logo-wrap and .custom-logo-link.
   v1.03  Mobile header redesign: logo stays position:absolute at 80px wide;
          company name clamped to 0.85rem with ellipsis overflow; phone number
          replaced with base64 SVG phone icon via ::before pseudo-element.
   v1.04  Replaced URL-encoded SVG (breaks on WP save) with base64 data URI;
          reduced logo to 80px; company name white-space:nowrap to prevent wrap.
   v1.05  Cache busting: CSS enqueue now auto-reads Version from theme header.
          Phone icon moved to inline SVG in header.php — no more CSS base64.
          Added !important to mobile logo width to override WP img attributes.
   v1.06  Increased mobile header padding-right from 88px to 104px; added
          margin-right on .phone-icon so it breathes away from the logo.
   v1.07  Reduced mobile logo from 80px to 64px; shrunk header padding-right
          from 104px to 84px — frees ~20px so company name no longer truncates
          on narrow Android viewports.
   v1.08  Mobile header min-height cut to 48px so 64px logo overflows into nav
          (floating-logo effect matching TraciMiles). Padding tightened to
          6px 70px 6px 10px; phone margin-right 2px; branding padding-right 4px
          — frees ~26px more for title. Hero reduced from 120px to 80px.
   v1.09  Added padding: 8px 6px to logo box (desktop) and 6px 4px (mobile)
          so image no longer touches the gold border. Updated desktop phone
          margin-right and mobile header right padding to compensate.
   v1.10  Added background: white to logo box. Without it, the transparent
          padding area showed the gold nav bar behind it, making the bottom
          padding and side borders invisible in the overlap zone.
   v1.11  IDX frame pages now fill the viewport exactly: footer hidden and
          iframe stretched via flexbox on body.idx-page (class added in
          functions.php). Eliminates the double vertical scrollbar.
   v1.12  Per-page hero images: defaults wired to every page (with one-time
          updater for existing installs); new optional Hero Image Position
          field on pages; map menu item auto-renamed to "Map Search".
   v1.13  All non-frame images now ship inside the theme (assets/img/):
          favicons (pineapple set) output on wp_head, header logo, and all
          hero images — no more dependencies on tracimiles.com.
   v1.14  Mobile nav UX: submenu keeps its always-expanded behavior but loses
          the dark background that made it look like the active page; an
          elbow connector now visually ties Map Search to Property Search;
          parent caret hidden on mobile, enlarged on desktop.
   v1.15  New front page: fading hero slider (flagship listing photo + site
          heroes), flagship showcase for MLS# 26000320 with CTA to a new
          framed detail page; "Home" added to the Primary menu.
   v1.16  Front page gone full width (max 1700px): larger flagship photo,
          clickable thumbnail grid, and a lightbox gallery of all 64 MLS
          photos with prev/next arrows, dots, numeric counter, keyboard
          and swipe support; second CTA "Contact About This Property".
   v1.17  Price moved off the photo into a prominent standalone line under
          the address (same spot desktop & mobile); thumbnails hidden on
          mobile (main photo opens the gallery); added Elevated Private
          Pool to the fact list.
   v1.18  Mobile flagship layout: fixed two-column grid leaking into mobile
          (desktop rule outweighed the mobile one); photo now floats left at
          75% width with facts wrapping around it; description spans full
          width; CTAs centered and widened so their text never wraps.
   v1.19  Mobile facts no longer orphaned next to the floated photo: first
          three facts abbreviate to one-liners (5 BR / 5 BA · 2 ½ BA /
          3,750 SQFT) with inline numbers; full labels remain on desktop;
          remaining facts flow below the photo unabbreviated.
   v1.20  Mobile: baths split onto two lines (5 BA / 2 ½ BA) with SQFT the
          last fact beside the photo; footer phone number moves to its own
          line (separator dots hidden). Desktop unchanged.
   v1.21  Mobile: unabbreviated facts now clear the floated photo so value
          and label can never split across it; abbreviated facts get an
          explicit offset so their gold bars sit clear of the photo border
          with consistent spacing; photo trimmed to 70% so SQFT fits.
   v1.22  Dynamic showcase engine: front page edit screen gets a "Home Page
          Property Showcases" box (MLS# | optional Title, up to 4 per page);
          listing data scraped from the IDX detail page and cached 12 h;
          generic /property/?mls= frame page; title omitted cleanly when
          blank; lightbox supports multiple galleries.
   v1.23  MLS resolver now uses the IDX /listings/r/{mls} redirect endpoint
          — works for any MLS# in the feed (not just featured listings) and
          needs only one fetch; featured-listings scan kept as fallback.
   v1.24  Lightbox: listing data line (price · street · city · MLS#) added
          at the top of the viewer, with the image counter beneath it in
          smaller, dimmer type.
   v1.25  Lightbox info line: state added after city; on mobile each field
          gets its own line (separators hidden) and the counter relocates
          to the bottom above the dots so text never overlaps text.
   v1.26  Lightbox counter can no longer collide with anything: on portrait
          phones it stacks in a flex column directly above the dots (always
          clears them however many rows they wrap to); on landscape phones
          it moves to the top-left corner, opposite the close button.
   v1.27  Lightbox dots span the full viewport width and are bigger
          (8px → 12px desktop, 6px → 11px mobile) with wider gaps —
          easier click/tap targets on every screen.
   v1.28  Showcase config gains a third field: MLS# | Title | Eyebrow.
          Custom eyebrow text replaces the auto-generated line; left blank,
          the eyebrow is still generated from the listing data.
   v1.29  Front hero headline now pulls from the home page's title, making
          it editable in wp-admin like every other page's hero text; home
          page retitled once so the rendered text is unchanged.
   v1.30  Showcase agent-comments excerpt doubled from 60 to 120 words on
          all screens.
   v1.31  Added screenshot.png (1200×900) so the theme shows a proper
          thumbnail of the home page in Appearance → Themes.
   v1.32  Fixed the short showcase excerpt: og:description on the IDX page
          is truncated to ~30 words, so trimming at 60 vs 120 never showed a
          difference. The parser now reads the full agent remarks from the
          page body (340+ words for the flagship) and the 120-word excerpt
          works as intended. Cache key bumped so data refetches on update.
   v1.33  Ornamental divider between multiple showcases: twin gold rules
          meeting at a pineapple medallion in a gold-bordered white box
          (echoes the header logo). Renders only between properties —
          a single showcase shows no divider.
   v1.34  Hero band now matches tracimiles.com exactly: height
          min(200px, 24vh) and background-position center center (was
          175px / center 40%) — same image slice on both sites. The
          per-page Hero Position field remains as an optional override.
   v1.35  Mobile front-hero slides anchored at center 75% so the image
          content (horizon) rides up roughly a quarter to a third of the
          band — the intentional crop center sits clear of the two-line
          title box at the bottom. Desktop slider unchanged.
   v1.36  Mobile front-hero anchor pushed from center 75% to center 100%
          (bottom-aligned) — doubles the upward shift; this is the maximum
          possible with cover cropping.
   v1.37  Front-hero positioning that actually moves: the hero images are
          much wider than the band, so cover-cropping had zero vertical
          overflow and position-Y did nothing. Slides are now bottom-
          anchored on all screens, with a 135% vertical zoom on mobile to
          create real overflow (horizon lands ~1/3 from the top, clear of
          the title box). default.jpg anchors top (opposite direction).
   v1.38  Desktop slide anchor softened from center 100% to center 62% —
          full bottom-anchoring made the 3:2 MLS photo show a sliver that
          read as ~4x over-zoomed. default.jpg mirrored at center 38%.
          Mobile (135% zoom, bottom) unchanged.
   v1.39  Per-slide desktop anchors (each slide now carries a class named
          after its image file): charleston and about stay centered (no
          shift), charleston-property-search anchors full bottom (max
          upward shift), default stays 38%, the rest stay 62%. Mobile
          behavior unchanged.
   v1.40  Desktop slide tuning round 2: listing photo (slide 1) rendered
          zoomed-out and sharp over a blurred fill of itself (cover was
          already at minimum zoom for a 3:2 photo in the wide band);
          charleston horizon nudged down (center 42%); featured-listings
          pans right slightly (112% width, right-anchored);
          default pans right ~a third (130% width, right-anchored).
   v1.41  Slide 1 swapped from the dynamic MLS photo to the bundled
          189-station-18th-street.webp (first WebP in the theme). Keeps
          the zoomed-out blur-fill treatment since it's also 3:2.
   v1.42  Bigger eye candy: thumbnail grid goes from 6×2 to 4×4 (15 thumbs
          + the "+N more" tile, each tile ~2.2x larger); pineapple divider
          widened to span nearly the full content area (820px → 1700px).
   v1.43  Slide 1 blur-fill treatment removed — the new webp shows plain
          cover (full width, no blurry side bars). Debug overlay added:
          append ?slides=1 to the home URL to stamp each slide with its
          number in the top-left corner.
   v1.44  Slide tuning round 3: slide 1 (webp) and sullivans-island horizon
          up a little (62% → 72%); default.jpg horizon down a little
          (38% → 30%); featured-listings.jpg removed from the slideshow
          (now 6 slides).
   v1.45  Slides 1 and 3 horizon up a tad more (72% → 78%). Slide 1 cannot
          pan right: its full width is already on screen at desktop sizes
          (width-fit cover), so there is no off-screen content to reveal.
   v1.46  Slide 2 swapped: charleston.jpg out of the slideshow, new
          charleston-aerial-french-downtown.jpg (2560×860) in. Starts at
          the default 62% anchor; charleston.jpg remains in the theme as
          the home page's hero banner.
   v1.47  Slides 1 and 3 swapped (sullivans-island leads, the 189 Station
          webp third); per-slide anchors travel with their images. Divider
          pineapple unboxed — border and white plate removed, icon slightly
          larger, gold rules tucked in closer for a cleaner ornament.
   v1.48  Self-service slideshow: new "Home Page Slideshow" box on the home
          page edit screen — one "URL | position | zoom" per line, ordered
          by line, Media Library friendly. Per-slide desktop styling moved
          from hardcoded CSS into the config (seeded with current values
          by a one-time updater). Mobile framing still automatic.
   v1.49  Named template "Flagship Showcase" — the familiar Template
          dropdown is back; apply the home layout (with its own slideshow
          and showcases) to any page. Frame pages now render editor
          content above the iframe: with content present the page scrolls
          normally (footer returns, frame at 80vh); empty pages keep the
          viewport-fit frame.
   v1.50  Above-frame content now left-aligns with the frame's own content:
          intro wrapper matches the IDX frame's Bootstrap container
          geometry (1170px max-width, 15px gutters) instead of the theme's
          1100px/24px prose wrapper.
   v1.51  Frame pages with intro content keep the single-scrollbar
          viewport-fit layout: intro pinned above, frame flexes to fill
          the rest (min 340px; very long intros degrade to page scroll).
          Replaces v1.49's two-scrollbar "normal scrolling" mode.
   v1.52  WP footer rebuilt to mirror the frame footer: logo with company
          address (450 Meeting Street, Charleston, SC 29403) on the left,
          tagline + phone center, the five nav links right, copyright +
          EHO below. Links use home_url() so the footer is portable
          across domains.
   v1.53  Slideshow no longer freezes on devices reporting reduced motion
          (Android "Remove animations", battery savers): it keeps rotating
          with instant cuts instead of fades. Fixes "only the first image
          shows" on Android.
   v1.54  Mobile showcase thumbnails are back: 2 across × 3 rows (5 thumbs
          + the "+N more" tile, recounted for mobile), stretched to full
          page width beneath the 70% floated photo.
   v1.55  Mobile showcase reordered: photo full width, then ALL facts
          grouped in a two-column grid (full labels, no abbreviated split
          around the photo), then thumbnails, then description and CTAs.
          Float layout retired in favor of flex ordering.
   v1.56  Mobile CTAs truly centered: the desktop grid's align-items:start
          leaked into the mobile flex column (where it governs the
          horizontal axis), shrinking blocks to content width on the left.
          Mobile now forces align-items:stretch.
   v1.57  New [premier_showcase mls="..." title="..." eyebrow="..."]
          shortcode renders a full property showcase on any page, post, or
          text widget. Rendering refactored into one shared function used
          by the front page and the shortcode; the lightbox viewer loads
          automatically wherever a showcase appears.
   v1.58  Shortcode spacing fix: .entry-content-wrap p's 16px margin was
          overriding showcase typography (address/price gap went negative).
          Higher-specificity guards restore the showcase's own spacing
          inside page content, desktop and mobile.
   v1.59  Curated thumbnails: new Thumbs / Mobile Thumbs controls on both
          the shortcode (thumbs="2,5,9" thumbs_mobile="2,9") and the home
          page showcase lines (fields 4 and 5). Comma-separated photo
          numbers matching the gallery counter; blank = MLS order. The
          "+N more" tile recounts per layout and opens at the first
          photo not already shown.
   v1.60  Gallery dots now show their photo number inside each dot
          (always visible — hover doesn't exist on phones), sized up to
          20px desktop / 19px mobile for legibility; doubles as a bigger
          tap target. Pairs with the Thumbs curation fields.
   v1.61  New [premier_thumb_generator] admin tool shortcode: numbered grid
          of all listing photos with D/M toggles, drag-to-reorder Desktop
          (15) and Mobile (5) strips with arrow/remove fallbacks, live
          comma lists and a ready-to-paste [premier_showcase] line with
          copy buttons. Accepts mls="" or ?mls= in the URL.
   v1.62  Thumb generator became a full shortcode builder: Title and
          Eyebrow fields feed the generated line live, and a type-ahead
          picker (3+ chars, matches MLS#/address/city) searches the
          featured listings (indexed hourly) — pick a result and the
          tool loads that property.
   v1.63  Generator renamed "Showcase Generator" (+ [premier_showcase_generator]
          alias); thumb fields labeled optional; ready-to-paste output in a
          highlighted gold panel (new standard for must-see fields); theme
          Description now carries the latest-update summary (visible on the
          install/compare screen) and a one-time admin notice announces
          old → new version with the summary after each update.
   v1.64  Showcase Generator UX: tool goes full viewport width with photo
          tiles doubled (300px min, 200px tall); property banner (serif,
          gold-edged) shows street, city/state/zip, price, MLS#, photo
          count; instructions moved to their own italic line; search and
          manual MLS entry presented as one "or" row.
   v1.65  Favicons hooked into admin_head and login_head — the pineapple
          now identifies wp-admin and login tabs, not just the front end.
   v1.66  Showcase Generator live preview: the top-right of the tool shows
          the first four showcase lines (eyebrow, title, address, price)
          rendered with the real front-end classes, updating as you type;
          eyebrow input moved above title to match display order.
   v1.67  Stacked showcases auto-insert the pineapple divider (front page
          and shortcodes share it); eyebrow="none" hides the eyebrow line
          (generator checkbox emits it); agent comments shown in a fixed
          scrolling panel under the preview; price line gray site-wide;
          AI title/eyebrow suggestions (Claude preferred, ChatGPT
          fallback) with keys stored via Settings → Premier AI.
   v1.68  AI suggest: AJAX endpoint made same-origin relative (the www vs
          non-www host mismatch silently blocked the response); errors now
          report the actual cause (stale nonce/cached page, theme version,
          HTTP status, or network) instead of a generic failure.
   v1.69  AI suggest: nopriv AJAX endpoint registered so logged-out clicks
          return the explicit "log in as an editor" message instead of
          admin-ajax's bare 0; editors-only capability check unchanged.
   v1.70  Auto-generated eyebrow now starts "Showcase Listing" (was
          Flagship) in the renderer, generator default, and AI prompt;
          Title field gets a None checkbox matching the eyebrow's; empty
          drag-strips now spell out the automatic fallback precisely.
   v1.71  Generator: D/M instructions relocated directly above the All
          photos grid; italic live counters ("4 of 15 selected") under the
          Desktop and Mobile order headings.
   v1.72  Generator polish: order headings now mention the ‹ › and ×
          buttons; D/M restyled as raised buttons with hover and tooltips
          ("Add to / Remove from the Desktop|Mobile thumbnail grid");
          inputs grouped into gold-edged cards so each checkbox visibly
          belongs to its field.
   v1.73  New /admin/ tools area: auto-created editor-only pages (gated,
          noindexed) with a table-of-contents index, left-side tool nav,
          and /admin/showcase_generator as the first tool; quick links to
          the slideshow-numbers view, property frame viewer, home page
          config, and Premier AI keys. AI prompt now strictly excludes
          address, city, state, price, and MLS from titles and eyebrows.
   v1.74  Featured Listing Pages tool (/admin/featured-listings): builds an
          SEO page per property at /MLS#/address-slug — parent /MLS#/ 301s
          to the child — with showcase content, listing-photo hero, AI
          meta description (fact prefix: price · bd · ba · sqft), full
          Open Graph + Twitter card tags for link unfurls, "all" or
          comma-list modes processed one-at-a-time, and a configurable
          page-title pattern ({street}, {city} · {mls} default) in
          Settings → Premier AI.
   v1.75  Listing title pattern: {subdivision} placeholder (parsed from
          the IDX page), default now "{street}, {subdivision}, {state}
          {zip} | MLS# {mls} | For Sale" with blank-placeholder cleanup
          (stray commas/spaces/pipes removed); settings page titled with
          the theme name and inputs widened to half-page; /admin/ quick
          link renamed "Settings"; featured-listings tool shows a table
          of existing listing pages with view/edit links.
   v1.76  Listing parent slugs forced to the clean MLS number — WordPress
          auto-suffixes purely numeric page slugs (-2) as a pagination
          guard that does not actually apply to 8-digit numbers; re-running
          the tool repairs existing pages. Tool styles extracted into a
          shared function so /admin/featured-listings gets the same
          polished look as the Showcase Generator.
   v1.77  HOTFIX: v1.76's style refactor dropped the ?> that returns the
          generator template to HTML mode, causing a PHP parse error
          (white-screen critical error). Tag restored.
   v1.78  Desktop showcase collage: the single main photo becomes a 5-photo
          collage (one large + four small — always the first five MLS
          photos). The 16-tile grid below defaults to photos 6–21 with
          "+N More" overlaid on its last tile, so 21 photos show per
          listing; mobile layout unchanged. Generator: fixed-collage strip,
          16 desktop picks, clearer unknown-MLS error. Listing pages:
          separate Page Title (<title>) and Page H1 patterns; Settings
          page links to the Site Toolbox (/admin/).
   v1.79  Desktop showcase: the 5-photo collage spans the full page-body
          width (photos much larger than the grid tiles); the facts,
          description, CTAs and 16-photo grid sit below it in the familiar
          two-column split. Mobile unchanged. Listing-data cache key bumped
          so {subdivision} (e.g. Snee Farm) reaches Page Titles and H1s —
          re-run the Featured Listing Pages tool to repair existing pages.
   v1.80  One showcase workflow everywhere: the front page now renders its
          editor content below the hero, so [premier_showcase] shortcodes
          (from the Showcase Generator) work there like on any other page.
          The "Home Page Property Showcases" meta box is retired; a one-time
          updater converts existing entries to shortcodes (no visual
          change). Saving any page clears the listing cache for the MLS
          numbers it showcases. The Home Page Slideshow box is unchanged.
   v1.81  Showcases span the full page-body width on the home page AND on
          regular (non-frame) pages, where they now break out of the text
          column. Collage polish: all five photos get the gold border and
          the main photo's right edge aligns with the 3rd thumbnail column.
          Default eyebrow is just "Showcase Listing" (no city/state) and is
          prefilled in the generator; the title field starts blank. Titles
          and eyebrows render as styled <p> tags, not <h2> (headings stay
          reserved for SEO). AI Provider Integration: Google Gemini joins
          Claude and ChatGPT, each with its own key + model dropdown and a
          default-provider radio (failures fall back to other configured
          providers). Generator gains Title-only and Eyebrow-only buttons.
   v1.82  FIX: some listings showed 1-2 phantom final photos — the IDX
          detail page's "Related Listings" thumbnails matched the photo
          pattern; parsing now stops above that block, and the listing
          cache is refreshed. Featured Listing Pages: the table gains a
          Price column (stored when pages are built), renders high-to-low
          by price, and every column heading sorts asc/desc on click.
   v1.83  FIX: desktop horizontal scrollbar on pages with full-bleed
          showcases (100vw includes the vertical scrollbar) — horizontal
          overflow is now clipped at the root. Two new page templates make
          the width choice explicit and easy to demo: "Showcases — Full
          Width" (same as default) and "Showcases — Constrained Width
          (1400px)" (showcases boxed in a centered 1400px column).
*/

/* =============================================================================
   BRAND VARIABLES
   ============================================================================= */
:root {
    --green-dark:   #2d6228;   /* site title, H1, buttons */
    --green-mid:    #3a7d34;   /* hover states */
    --gold:                    #b89a45;   /* navigation bar background */
    --gold-dark:               #9e8339;   /* nav hover */
    --gold-light:              #cbb05e;   /* footer links */
    --brand-color-accent-mid:  #b89a45;   /* alias used for borders/accents */
    --white:        #ffffff;
    --off-white:    #f8f8f6;
    --gray-light:   #eeeeee;
    --gray-border:  #dddddd;
    --text-dark:    #333333;
    --text-mid:     #555555;
    --font-serif:   'Merriweather', Georgia, 'Times New Roman', serif;
    --font-sans:    'Open Sans', Arial, Helvetica, sans-serif;
}

/* =============================================================================
   RESET & BASE
   ============================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    /* Full-bleed (100vw) showcase sections measure the viewport INCLUDING
       the vertical scrollbar, leaving ~17px of horizontal overflow on
       Windows — clip it instead of showing a horizontal scrollbar */
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: var(--font-sans);
    color: var(--text-dark);
    background: var(--white);
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--green-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--green-mid);
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    line-height: 1.3;
}

/* =============================================================================
   SITE WRAPPER
   ============================================================================= */
#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#content {
    flex: 1;
}

/* =============================================================================
   SITE HEADER
   ============================================================================= */
.site-header {
    background: var(--white);
    padding: 12px 20px 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--gray-border);
    position: relative;
    min-height: 72px;
    z-index: 300; /* keeps logo visible above the nav bar */
}

/* Site title (left) */
.site-branding {
    flex: 1;
}

.site-branding .site-title-link {
    font-family: var(--font-serif);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--green-dark);
    text-decoration: none;
    display: block;
    line-height: 1.2;
}

.site-branding .site-title-link:hover {
    color: var(--green-mid);
    text-decoration: none;
}

/* Phone (center-right) */
.header-phone {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--green-dark);
    margin-right: 142px; /* make room for logo (120px img + 12px padding + 6px border + 4px gap) */
    white-space: nowrap;
}

.header-phone a {
    color: inherit;
    text-decoration: none;
}

.header-phone a:hover {
    text-decoration: underline;
}

/* Logo (top-right, absolute) */
.site-logo-wrap {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 0;
    border: 3px solid var(--brand-color-accent-mid);
    padding: 8px 6px;
    background: var(--white);
}

.site-logo-wrap img,
.site-logo-wrap a img {
    width: 120px;
    height: auto;
    display: block;
}

/* WordPress custom-logo class */
.custom-logo-link {
    position: absolute;
    top: 0;
    right: 0;
    border: 3px solid var(--brand-color-accent-mid);
    display: block;
    line-height: 0;
    padding: 8px 6px;
    background: var(--white);
}

.custom-logo {
    width: 120px;
    height: auto;
}

/* =============================================================================
   PRIMARY NAVIGATION
   ============================================================================= */
.main-navigation {
    background: var(--gold);
    position: relative;
    z-index: 200;
}

/* Mobile toggle button (hidden on desktop) */
.nav-toggle {
    display: none;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: var(--white);
    padding: 7px 14px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    width: 100%;
    text-align: left;
    letter-spacing: 0.05em;
}

/* Top-level menu */
.main-navigation #primary-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.main-navigation #primary-menu > li {
    position: relative;
}

.main-navigation #primary-menu > li > a {
    display: block;
    padding: 13px 20px;
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    text-decoration: none;
    transition: background 0.15s ease;
}

.main-navigation #primary-menu > li:first-child > a {
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.main-navigation #primary-menu > li > a:hover,
.main-navigation #primary-menu > li.current-menu-item > a,
.main-navigation #primary-menu > li.current-page-ancestor > a {
    background: rgba(0, 0, 0, 0.18);
    text-decoration: none;
}

/* Dropdown caret */
.main-navigation #primary-menu > li.menu-item-has-children > a::after {
    content: ' ▾';
    font-size: 1em;
    opacity: 0.9;
}

/* Dropdown submenu */
.main-navigation #primary-menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--gold-dark);
    min-width: 190px;
    z-index: 300;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-navigation #primary-menu li:hover > ul,
.main-navigation #primary-menu li.focus > ul {
    display: block;
}

.main-navigation #primary-menu li ul li a {
    display: block;
    padding: 11px 20px;
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 600;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
    transition: background 0.15s ease;
}

.main-navigation #primary-menu li ul li a:hover {
    background: rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

/* =============================================================================
   HERO BANNER
   ============================================================================= */
.page-hero {
    position: relative;
    width: 100%;
    height: min(200px, 24vh);   /* matches .pp-hero on tracimiles.com */
    overflow: hidden;
    background-color: var(--green-dark);
    background-size: cover;
    background-position: center center;   /* matches .pp-hero-img object-position */
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
}

.hero-title-box {
    background: rgba(245, 243, 230, 0.80);
    padding: 9px 22px 9px 22px;
    margin: 0 0 18px 24px;
    display: inline-block;
    border-radius: 2px;
}

.hero-title-box h1 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--green-dark);
    margin: 0;
    line-height: 1.2;
    text-shadow: none;
}

/* =============================================================================
   CONTENT / IDX FRAMES
   ============================================================================= */
.site-content {
    width: 100%;
}

/* IDX iframe wrapper */
.idx-frame-wrapper {
    width: 100%;
    padding: 0;
    background: var(--off-white);
}

.idx-frame-wrapper iframe {
    width: 100%;
    height: 750px;
    border: none;
    display: block;
}

/* Map search gets taller frame */
.idx-frame-map iframe {
    height: 85vh;
    min-height: 600px;
}

/* Regular page content (non-iframe pages) */
.entry-content-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 36px 24px 48px;
}

.entry-content-wrap h2 {
    color: var(--green-dark);
    margin-bottom: 16px;
}

.entry-content-wrap p {
    margin-bottom: 16px;
    color: var(--text-mid);
}

/* Showcase typography keeps its own spacing when rendered inside page
   content via the [premier_showcase] shortcode */
.entry-content-wrap .showcase-eyebrow {
    margin-bottom: 10px;
    color: var(--gold-dark);
}

.entry-content-wrap .showcase-address {
    margin-bottom: 32px;
}

.entry-content-wrap .showcase-price-line {
    margin: -22px 0 30px;
}

.entry-content-wrap .showcase-desc {
    margin-bottom: 26px;
}

/* Non-frame pages (v1.81): showcases and their dividers break out of the
   1100px text column and span the full viewport width, like the home page */
.entry-content-wrap .showcase-full,
.entry-content-wrap .showcase-divider {
    width: 100vw;
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* "Showcases — Constrained Width" template (v1.83): same layout, but
   showcases stay boxed in a centered 1400px column */
body.pp-constrained .entry-content-wrap .showcase-full,
body.pp-constrained .entry-content-wrap .showcase-divider {
    width: 100%;
    max-width: 1400px;
    left: auto;
    transform: none;
    margin-left: auto;
    margin-right: auto;
}

/* The showcase title is a <p> (not a heading) as of v1.81 — restate the
   text-column paragraph overrides it would otherwise inherit */
.entry-content-wrap .showcase-title {
    color: var(--green-dark);
    margin-bottom: 6px;
}

/* =============================================================================
   FOOTER
   ============================================================================= */
.site-footer {
    background: var(--green-dark);
    color: rgba(255, 255, 255, 0.8);
    padding: 30px 24px 20px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    margin-top: auto;
}

.footer-inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

.footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 14px;
}

.footer-brand img {
    width: 110px;
    height: auto;
    background: var(--white);
    padding: 4px 6px;
    display: block;
}

.footer-address {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    line-height: 1.5;
}

.footer-tagline {
    color: var(--gold-light);
    font-family: var(--font-serif);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
}

.footer-phone-line {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav ul li {
    margin-bottom: 6px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.8rem;
}

.footer-eho {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.site-footer a {
    color: var(--gold-light);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
    color: var(--white);
}

/* =============================================================================
   FRONT PAGE — HERO SLIDER & FLAGSHIP SHOWCASE (v1.15)
   ============================================================================= */
.front-hero {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    background: var(--green-dark);
}

.front-hero-slide {
    position: absolute;
    inset: 0;
    background-size: var(--slide-size, cover);
    background-position: var(--slide-pos, center 62%);
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

/* Per-slide desktop position/zoom now come from the Home Page Slideshow
   box (custom properties --slide-pos / --slide-size set per slide). */

.front-hero-slide.active {
    opacity: 1;
}

/* Debug badge — rendered only when ?slides=1 is appended to the home URL */
.front-hero-slide .slide-num {
    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.72);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    padding: 8px 16px;
    border-radius: 4px;
}

.front-hero-title {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 2;
    max-width: 82%;
}

.front-hero-title h1 {
    font-size: 1.9rem;
}

.showcase {
    max-width: 1150px;
    margin: 0 auto;
    padding: 44px 24px 56px;
    text-align: center;
}

.showcase-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold-dark);
    margin-bottom: 10px;
}

.showcase-title {
    /* rendered as <p> since v1.81 (headings reserved for SEO content) —
       these rules recreate the old <h2> look exactly */
    font-family: var(--font-serif);
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1.3;      /* same as the global heading rule */
    color: var(--green-dark);
    margin: 0 0 6px;
}

.showcase-address {
    color: var(--text-mid);
    margin-bottom: 32px;
}

/* Front-page editor content (v1.80): showcase sections render full-bleed;
   loose text paragraphs get a readable centered column; empty paragraphs
   that wpautop leaves around shortcodes are hidden */
.front-content > p {
    max-width: 960px;
    margin: 18px auto;
    padding: 0 24px;
}

.front-content > p:empty {
    display: none;
    margin: 0;
    padding: 0;
}

.showcase-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 32px;
    text-align: left;
    align-items: start;
}

.showcase-photo {
    position: relative;
    display: block;
    border: 4px solid var(--brand-color-accent-mid);
    line-height: 0;
}

.showcase-photo img {
    width: 100%;
    height: auto;
}

/* Desktop collage: one large photo (left) + four small (2 x 2, right).
   Mobile collapses this to the single main photo (see the 640px block). */
.showcase-collage {
    display: grid;
    /* Main photo's right edge lines up with the 3rd thumbnail column below:
       3/4 of the 8fr thumbs track works out to calc(50% - 22.5px) of the
       full row (10px thumb gaps, 40px column gap). Extras fill a 2 x 2. */
    grid-template-columns: calc(50% - 22.5px) 1fr 1fr;
    gap: 10px;
}

.showcase-collage .showcase-photo {
    grid-column: 1;
    grid-row: 1 / 3;
    height: 100%;
}

.showcase-collage .showcase-photo img {
    height: 100%;
    object-fit: cover;
}

.collage-extra {
    position: relative;
    display: block;
    padding: 0;
    border: 4px solid var(--brand-color-accent-mid);   /* match the main photo */
    background: var(--gray-light);
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    line-height: 0;
}

.collage-extra img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.collage-extra:hover img {
    transform: scale(1.06);
}

.showcase-price-line {
    font-family: var(--font-serif);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--text-mid);   /* gray everywhere (was green on the home page) */
    line-height: 1.2;
    margin: -22px 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.showcase-price-line::before,
.showcase-price-line::after {
    content: '';
    flex: 0 0 56px;
    height: 2px;
    background: var(--gold);
}

.showcase-facts {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    margin: 0 0 20px;
    padding: 0;
}

.showcase-facts li {
    border-left: 3px solid var(--gold);
    padding: 2px 0 2px 12px;
    color: var(--text-mid);
    font-size: 0.92rem;
}

.showcase-facts .fact-m {
    display: none;
}

.showcase-facts strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--green-dark);
}

.showcase-desc {
    color: var(--text-mid);
    margin-bottom: 26px;
}

.btn {
    display: inline-block;
    padding: 12px 26px;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    text-decoration: none;
    margin: 0 10px 10px 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-primary {
    background: var(--green-dark);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--green-mid);
    color: var(--white);
    text-decoration: none;
}

.btn-secondary {
    border: 2px solid var(--gold);
    color: var(--gold-dark);
}

.btn-secondary:hover {
    background: var(--gold);
    color: var(--white);
    text-decoration: none;
}

/* ---- Showcase divider (v1.33) — only rendered between properties ---- */
.showcase-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: none;     /* spans the full showcase content width (v1.81) */
    margin: 10px auto;
    padding: 0 36px;
}

.showcase-divider-line {
    flex: 1 1 auto;
    height: 2px;
    background: linear-gradient(to right, rgba(184, 154, 69, 0), var(--gold) 30%, var(--gold) 70%, rgba(184, 154, 69, 0));
}

.showcase-divider-line:first-child {
    background: linear-gradient(to right, rgba(184, 154, 69, 0), var(--gold));
}

.showcase-divider-line:last-child {
    background: linear-gradient(to left, rgba(184, 154, 69, 0), var(--gold));
}

.showcase-divider-icon {
    flex: 0 0 auto;
    line-height: 0;
}

.showcase-divider-icon img {
    width: 38px;
    height: 38px;
    display: block;
}

/* ---- Full-width showcase + gallery (v1.16) ---- */
.showcase-full {
    max-width: none;   /* full page-body width (v1.81) */
    padding: 44px 36px 64px;
}

.showcase-full .showcase-grid {
    grid-template-columns: 8fr 4fr;
    gap: 28px 40px;
}

/* Full-width collage row: unwrap the gallery so the collage can span both
   columns; the 16-photo grid and the details share the row beneath it */
.showcase-full .showcase-gallery {
    display: contents;
}

.showcase-full .showcase-collage {
    grid-column: 1 / -1;
}

.showcase-full .showcase-thumbs {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
}

.showcase-full .showcase-details {
    grid-column: 2;
    grid-row: 2;
}

.showcase-photo {
    cursor: zoom-in;
}

.showcase-count {
    position: absolute;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.65);
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 7px 14px;
}

.showcase-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.showcase-thumb {
    position: relative;
    display: block;
    padding: 0;
    border: 2px solid transparent;
    background: var(--gray-light);
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.showcase-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.showcase-thumb:hover {
    border-color: var(--gold);
}

.showcase-thumb:hover img {
    transform: scale(1.06);
}

.showcase-thumb-more .more-m {
    display: none;
}

.showcase-thumb.thumb-m {
    display: none;
}

.showcase-thumb-more { /* mobile-only tile; desktop overlays its last thumb */
    display: none;
}

.showcase-thumb .more-d,
.showcase-thumb-more span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(45, 98, 40, 0.72);
    color: var(--white);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
}

/* ---- Lightbox ---- */
.pp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 12, 10, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp-lightbox[hidden] {
    display: none;
}

.lb-stage {
    max-width: 90vw;
    max-height: 84vh;
    margin: 0;
    line-height: 0;
}

.lb-img {
    max-width: 90vw;
    max-height: 84vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
}

.lb-close,
.lb-prev,
.lb-next {
    position: absolute;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    z-index: 2;
    transition: color 0.15s ease, transform 0.15s ease;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
    color: var(--gold-light);
}

.lb-close {
    top: 12px;
    right: 20px;
    font-size: 3rem;
    line-height: 1;
}

.lb-prev,
.lb-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 3.2rem;
    padding: 18px 22px;
}

.lb-prev { left: 6px; }
.lb-next { right: 6px; }

.lb-prev:hover,
.lb-next:hover {
    transform: translateY(-50%) scale(1.15);
}

.lb-info {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--white);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
    max-width: calc(100vw - 140px);
    line-height: 1.35;
}

.lb-counter {
    position: fixed;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-serif);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

/* Wrapper is inert on desktop — counter and dots position themselves */
.lb-bottom {
    display: contents;
}

.lb-dots {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 0 14px;
}

.lb-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.lb-dot:hover {
    background: rgba(255, 255, 255, 0.45);
}

.lb-dot.active {
    background: var(--gold);
    color: var(--white);
    transform: scale(1.2);
}

/* =============================================================================
   IDX FRAME PAGES — FILL VIEWPORT, NO FOOTER (v1.11)
   body.idx-page is added by premier_idx_body_class() in functions.php on any
   page with an IDX Frame URL set. The page wrapper is locked to the viewport
   height, the footer is hidden, and the iframe flexes to fill the remaining
   space — so the only vertical scrollbar is the IDX frame's own.
   ============================================================================= */
body.idx-page #page {
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    min-height: 0;
}

body.idx-page .site-footer {
    display: none;
}

body.idx-page #content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.idx-page .idx-frame-wrapper,
body.idx-page .idx-frame-wrapper.idx-frame-map {
    flex: 1 1 auto;
    min-height: 0;
}

body.idx-page .idx-frame-wrapper iframe,
body.idx-page .idx-frame-map iframe {
    height: 100%;
    min-height: 0;
}

/* Page content above an IDX frame — width/gutters match the Bootstrap 3
   container inside the IDX frame (1170px / 15px) so text edges line up */
.frame-intro .entry-content-wrap {
    max-width: 1170px;
    padding: 24px 15px 16px;
}

/* With an intro present the frame still fills the remaining viewport
   (single scrollbar); the floor keeps it usable under long intros,
   at which point the page itself scrolls. */
body.idx-page .idx-frame-wrapper {
    min-height: 340px;
}

/* =============================================================================
   /admin/ TOOLS AREA (v1.73) — editor-only utility pages
   ============================================================================= */
.pp-admin {
    display: flex;
    align-items: stretch;
    min-height: 60vh;
}

.pp-admin-nav {
    flex: 0 0 240px;
    background: var(--off-white);
    border-right: 1px solid var(--gray-border);
    padding: 24px 0 40px;
}

.pp-admin-nav h2 {
    font-size: 0.95rem;
    color: var(--green-dark);
    padding: 0 18px 10px;
}

.pp-admin-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pp-admin-nav a {
    display: block;
    padding: 9px 18px;
    color: var(--text-dark);
    font-size: 0.92rem;
}

.pp-admin-nav a:hover {
    background: #fff;
    text-decoration: none;
}

.pp-admin-nav li.current > a {
    background: #fff;
    border-left: 4px solid var(--gold);
    font-weight: 700;
    color: var(--green-dark);
}

.pp-admin-sub {
    margin-top: 22px;
    border-top: 1px solid var(--gray-border);
    padding-top: 14px;
}

.pp-admin-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 28px 34px 60px;
}

.pp-admin-main h1 {
    color: var(--green-dark);
    margin-bottom: 10px;
}

.pp-admin-toc {
    width: 100%;
    border-collapse: collapse;
    margin-top: 18px;
}

.pp-admin-toc th,
.pp-admin-toc td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-border);
    vertical-align: top;
    font-size: 0.95rem;
}

.pp-admin-toc th {
    background: var(--off-white);
    color: var(--green-dark);
}

/* The generator's full-bleed breakout would overlap the tool nav — inside
   the admin layout it fills the main column instead */
.pp-admin-main .pp-thumbgen {
    width: auto;
    max-width: none;
    position: static;
    left: auto;
    transform: none;
    margin: 6px 0;
    padding: 0;
}

@media (max-width: 900px) {
    .pp-admin {
        flex-direction: column;
    }

    .pp-admin-nav {
        flex: 1 1 auto;
        border-right: none;
        border-bottom: 1px solid var(--gray-border);
        padding: 14px 0;
    }
}

/* Phone spans: show text on desktop, hide SVG icon */
.phone-text { display: inline; }
.phone-icon { display: none; line-height: 0; }

/* =============================================================================
   RESPONSIVE — TABLET & MOBILE
   ============================================================================= */
@media (max-width: 900px) {
    .header-phone {
        margin-right: 100px;
        font-size: 1rem;
    }

    .site-logo-wrap img,
    .custom-logo {
        width: 95px;
    }
}

@media (max-width: 640px) {
    /* Header: compact row; 64px logo overflows below into nav (floating effect) */
    .site-header {
        flex-wrap: nowrap;
        padding: 6px 82px 6px 10px;
        min-height: 48px;
        gap: 0;
        align-items: center;
        overflow: visible;
    }

    /* Site title: clamp size so it never wraps */
    .site-branding {
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 4px;
    }

    .site-branding .site-title-link {
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    /* Phone: hide number text, show inline SVG icon */
    .header-phone {
        margin-right: 2px;
        flex-basis: auto;
        flex-shrink: 0;
        line-height: 0;
    }

    .header-phone a {
        display: flex;
        align-items: center;
        line-height: 0;
    }

    .phone-text { display: none; }
    .phone-icon { display: block; line-height: 0; }

    /* Logo: stay absolute top-right; less padding than desktop since logo is smaller */
    .site-logo-wrap {
        position: absolute;
        top: 0;
        right: 0;
        order: unset;
        flex-shrink: unset;
        padding: 6px 4px;

    }

    .site-logo-wrap img,
    .custom-logo {
        width: 64px !important;
        height: auto !important;
    }

    .custom-logo-link {
        position: absolute;
        top: 0;
        right: 0;
        padding: 6px 4px;
    }

    /* Mobile nav */
    .nav-toggle {
        display: block;
    }

    .main-navigation #primary-menu {
        display: none;
        flex-direction: column;
    }

    .main-navigation.toggled #primary-menu {
        display: flex;
    }

    .main-navigation #primary-menu > li > a {
        border-right: none;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding: 12px 18px;
    }

    /* Submenu stays expanded (few items = better UX). Background is
       transparent so it no longer reads as the “current page” highlight. */
    .main-navigation #primary-menu li ul {
        position: static;
        display: block;
        box-shadow: none;
        background: transparent;
    }

    /* Parent caret is pointless when the submenu is always open */
    .main-navigation #primary-menu > li.menu-item-has-children > a::after {
        content: none;
    }

    .main-navigation #primary-menu li ul li a {
        padding-left: 30px;
        display: flex;
        align-items: center;
    }

    /* Elbow arrow (┗) drawn from the parent item down and to the right */
    .main-navigation #primary-menu li ul li a::before {
        content: '';
        flex: 0 0 auto;
        width: 12px;
        height: 14px;
        border-left: 2px solid rgba(255, 255, 255, 0.85);
        border-bottom: 2px solid rgba(255, 255, 255, 0.85);
        border-bottom-left-radius: 3px;
        margin-right: 10px;
        transform: translateY(-5px);
    }

    .page-hero {
        height: 80px;
    }

    .hero-title-box {
        margin: 0 0 8px 10px;
        padding: 5px 12px;
    }

    .hero-title-box h1 {
        font-size: 1rem;
    }

    .idx-frame-wrapper iframe {
        height: 600px;
    }

    body.idx-page .idx-frame-wrapper {
        min-height: 300px;
    }

    .idx-frame-map iframe {
        height: 70vh;
    }

    /* Front page */
    .front-hero {
        height: 240px;
    }

    /* The hero images are far wider than the mobile band, so plain cover
       has no vertical overflow and position-Y can't move anything. A 135%
       vertical zoom creates the overflow; bottom anchor then puts the
       horizon ~1/3 from the top, clear of the two-line title box. */
    .front-hero-slide {
        background-size: auto 135%;
        background-position: center 100%;
    }

    .front-hero-slide--default {
        background-position: center 0%;
    }

    .front-hero-title {
        left: 10px;
        bottom: 10px;
    }

    .front-hero-title h1 {
        font-size: 1.05rem;
    }

    .showcase {
        padding: 28px 16px 40px;
    }

    .showcase-title {
        font-size: 1.5rem;
    }

    /* Flagship layout on phones: photo → facts (2 columns, grouped) →
       thumbnails → description → CTAs. display:contents flattens the
       gallery/details wrappers so their children can be flex-ordered. */
    .showcase-full .showcase-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;   /* desktop's align-items:start would left-shrink blocks */
        gap: 40px;              /* keep the pre-v1.79 inherited spacing */
    }

    .showcase-full .showcase-gallery,
    .showcase-full .showcase-details {
        display: contents;
    }

    .showcase-photo {
        order: 1;
    }

    /* Collage is desktop-only: unwrap it so .showcase-photo keeps its flex
       order, and hide the four extra collage photos */
    .showcase-collage {
        display: contents;
    }

    .collage-extra {
        display: none;
    }

    .showcase-facts {
        order: 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
        margin: 14px 0 0;
    }


    /* Footer: columns stack on phones */
    .footer-top {
        flex-direction: column;
        gap: 18px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .showcase-desc,
    .entry-content-wrap .showcase-desc {
        order: 4;
        margin: 16px 0 20px;
    }

    .showcase-actions {
        order: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .showcase-actions .btn {
        margin: 0 0 12px;
        font-size: 0.9rem;
    }

    .showcase-price-line,
    .entry-content-wrap .showcase-price-line {
        font-size: 1.45rem;
        margin: -16px 0 22px;
        gap: 12px;
    }

    .showcase-divider {
        gap: 12px;
        margin: 2px auto;
        padding: 0 16px;
    }

    .showcase-divider-icon img {
        width: 26px;
        height: 26px;
    }

    .showcase-price-line::before,
    .showcase-price-line::after {
        flex-basis: 34px;
    }

    /* Thumbnails: 2 across × 3 rows (5 thumbs + the "+N more" tile),
       full width, beneath the grouped facts */
    .showcase-thumbs,
    .showcase-full .showcase-thumbs {
        order: 3;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-top: 14px;
        width: 100%;
    }

    .showcase-thumb.thumb-d {
        display: none;
    }

    .showcase-thumb.thumb-m {
        display: block;
    }

    .showcase-thumb.showcase-thumb-more {
        display: block;
    }

    .showcase-thumb-more .more-d {
        display: none;
    }

    .showcase-thumb-more .more-m {
        display: flex;
    }

    .showcase-full {
        padding: 28px 16px 44px;
    }

    .showcase-thumbs {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .showcase-count {
        font-size: 0.75rem;
        padding: 5px 10px;
    }

    .lb-prev,
    .lb-next {
        font-size: 2.2rem;
        padding: 14px 10px;
    }

    .lb-close {
        font-size: 2.4rem;
        right: 12px;
    }

    .lb-info {
        font-size: 0.85rem;
        top: 10px;
        max-width: calc(100vw - 90px);
        line-height: 1.5;
    }

    /* One field per line; no separators needed */
    .lb-info-part {
        display: block;
    }

    .lb-info-sep {
        display: none;
    }

    /* Counter + dots become one bottom-anchored stack: the counter always
       sits just above the dots, no matter how many rows the dots wrap to */
    .lb-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        width: 100%;
        padding: 0 8px;
    }

    .lb-counter {
        position: static;
        transform: none;
        font-size: 0.75rem;
    }

    .lb-dots {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        gap: 8px;
        width: 100%;
        padding: 0;
    }

    .lb-dot {
        width: 19px;
        height: 19px;
        font-size: 9px;
    }
}

/* =============================================================================
   LANDSCAPE PHONES (short viewports) — the centered top counter would sit
   under the wrapping info line, so it moves to the top-left corner,
   opposite the close button (v1.26)
   ============================================================================= */
@media (max-height: 500px) {
    .lb-counter {
        position: fixed;
        top: 14px;
        left: 18px;
        right: auto;
        bottom: auto;
        transform: none;
        font-size: 0.8rem;
    }

    .lb-bottom {
        display: contents;
    }

    .lb-dots {
        position: absolute;
        bottom: 8px;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        padding: 0 14px;
    }

    .lb-info {
        max-width: calc(100vw - 170px);
    }
}