/* =============================================================================
   Avalon Search Filter — v7.0.8 styles
   Auto-enqueued by the plugin SITE-WIDE on the front-end.
   v7.0.4 introduced site-wide enqueue (was previously limited to is_search()
   / is_tax(boat_model|boat_category)). v7.0.5 added defensive scroll-margin-top
   on anchor targets so any non-JS scroll path (CSS smooth-scroll, browser
   restore, future native :target handling) lands below the fixed header.
   v7.0.6 appended mobile/tablet @media blocks (≤1199px) backported from Tahoe
   Search Filter v1.0.7, scoped so desktop / laptop layout (≥1200px) is
   bit-for-bit unchanged from v7.0.5. v7.0.7 corrects every former Tahoe-orange
   burnt orange) reference to #006991 (Avalon teal) and appends two new
   sections (H1 styling for is_search() pages + mobile-portrait divider fix).
   v7.0.8 is a CSS no-op refresh: the v7.0.7 H1-styling rules at lines 607-615
   are unchanged and now have spans in the DOM to bind to (delivered by the
   new Section 19b DOM-side JS wrapper in avalon-search-filter.php).

   To manage separately, define('AVALON_SKIP_PLUGIN_CSS', true) in wp-config.php
   and copy these rules to child theme style.css.

   v7.0.8 CHANGES (May 12, 2026):
   • NO RULE CHANGES in this file. Only this header banner is bumped to
     v7.0.8 so the file matches the plugin version.
   • The v7.0.7 H1-styling rules at lines 607-615 (.avalon-search-quote
     → color #6ec1e4 and .avalon-search-term → color #ffffff +
     text-decoration: underline) are unchanged. They never bound in
     production because Elementor Pro 3.7.7 bypasses the
     get_the_archive_title PHP filter chain that v7.0.7 hooked. v7.0.8
     adds Section 19b to avalon-search-filter.php — a small wp_footer
     (priority 101) DOM-side wrapper that injects three spans
     (avalon-search-quote / avalon-search-term / avalon-search-quote)
     into the rendered H1, after which these CSS rules paint correctly.

   v7.0.7 CHANGES (May 12, 2026):
   • CRITICAL BRAND-COLOR CORRECTION: Every former Tahoe-orange burnt orange)
     reference in this file is replaced with #006991 (Avalon teal). v7.0.5
     and v7.0.6 carried Tahoe's color through by mistake. Avalon's primary
     brand color is #006991. No former Tahoe-orange reference remains anywhere in this
     stylesheet. The yellow highlight (#FFEA00) and rgba(0,105,145,*)
     accordion pulse remain unchanged.
   • H1 STYLING FOR SEARCH RESULTS PAGES (appended at end): New rules
     for .avalon-search-quote (color: #6ec1e4) and .avalon-search-term
     (color: #fff; text-decoration: underline), scoped to .search-results.
     The PHP filter avalon_style_search_archive_title() in
     avalon-search-filter.php (Section 19) attempted to inject these
     spans into the H1 archive title on is_search() pages — but Elementor
     Pro 3.7.7's theme-archive-title widget bypasses get_the_archive_title
     and the spans never reached the DOM. v7.0.8's Section 19b ports
     Tahoe's proven DOM-side JS approach to make these CSS rules bind.
   • MOBILE-PORTRAIT DIVIDER FIX (appended at end): New
     @media (max-width: 599px) and (orientation: portrait) block widens
     .avalon-result-divider from width:51% to calc(100% - 20px) and
     reduces .avalon-divider-text padding from 12px to 8px on each side.
     Result: the flex-grow ::before / ::after pseudo-lines have room to
     render for every divider label length, including the long
     "OTHER PAGES (10 RESULTS)" label that previously pushed both lines
     to zero visible width on phones held in portrait. Landscape and
     tablet+ viewports are unaffected.

   v7.0.6 CHANGES (May 12, 2026 — CSS-only patch on top of v7.0.5):
   • Backport of Tahoe Search Filter v1.0.7's mobile card layout fixes.
   • All new rules are scoped to mobile/tablet viewports (≤1199px).
   • Desktop / laptop layout (≥1200px) is bit-for-bit unchanged from v7.0.5.
   • Avalon brand colors (CORRECTED IN v7.0.7):
       - #006991 Avalon teal (title border-left, divider color, hover color)
       - #FFEA00 highlight yellow
       - rgba(0, 105, 145, *) teal accordion pulse
     No Tahoe amber (#de8b0d) introduced.
   • Element IDs verified from Avalon-DEV-elementor-36955-2026-05-12.json:
       - page template ID:        36955  (was Tahoe 34595)
       - archive-posts widget ID: 6f3e49d4 (was Tahoe f78c58a)
   • v7.0.5 rules below (scroll-margin-top, .avalon-anchor-target pulse,
     site-wide mark, etc.) are preserved verbatim — v7.0.6 only APPENDED.
   ============================================================================= */

/* ── v7.0.5 (Bug fix): Defensive scroll-margin-top on anchor targets ──────────
   The Avalon Search Filter universal anchor scroller (Section 14d, added
   v7.0.5) handles the malformed-hash format /page/#anchor?highlight=term and
   scrolls to the target with a 120px header offset via JS. These CSS rules
   are belt-and-suspenders: if a future browser, prefers-reduced-motion path,
   or third-party scroll handler bypasses our JS and lands on a target via
   the CSS scroll-margin / :target / scroll-into-view APIs, the fixed header
   won't cover the section.

   Selectors:
     [id$="-sec"]  — Path 1 product-section anchors (e.g. catalina-elite-windshield-sec)
     [id$="-id"]   — Path 2 accordion item anchors (e.g. helmstand-electronics-id)

   Adjust to your theme's header height; default matches the JS HEADER_OFFSET. */
[id$="-sec"],
[id$="-id"] {
    scroll-margin-top: 120px;
}

/* ── v7.0.5 (Bug fix): Subtle pulse on universal-scroll target ────────────────
   When the universal anchor scroller (Section 14d) lands on a non-accordion
   element (e.g. a product section div with -sec suffix), it adds the class
   .avalon-anchor-target for ~3 seconds. The animation is intentionally lighter
   than the accordion's own pulse — it's a confirmation, not a celebration.
   Removed automatically by JS once the user has reached the section. */
.avalon-anchor-target {
    animation: avalon-anchor-pulse 1.2s ease-in-out 1;
}

@keyframes avalon-anchor-pulse {
    0%   { box-shadow: 0 0 0 rgba(255, 234, 0, 0); }
    50%  { box-shadow: 0 0 18px 2px rgba(255, 234, 0, 0.55); }
    100% { box-shadow: 0 0 0 rgba(255, 234, 0, 0); }
}

/* ── v7.0.4 (Feature 1): Site-wide mark for destination highlighting ──────────
   This bare selector is required because the destination highlighter wraps
   matches in <mark class="avalon-search-highlight"> on ANY landing page —
   not just search results. The two scoped rules below (.search-results and
   .accordion__avalon_item) override these defaults with context-specific
   tweaks. */
mark.avalon-search-highlight {
    background-color: #FFEA00;
    color: #111111;
    font-weight: bold;
    border-radius: 2px;
    padding: 0;
    font-style: normal;
    display: inline;
    white-space: normal;
}

/* ── Search term highlight (search results card excerpts) ──────────────────── */
/* v7.0.3 (Issue 1a): padding 0 — horizontal padding rendered as visible
   whitespace flanking the <mark>, breaking mid-word matches like
   "sea" inside "seat" (which appeared as "sea  t"). */
.search-results mark.avalon-search-highlight {
    background-color: #FFEA00;
    color: #111111;
    font-weight: bold;
    border-radius: 2px;
    padding: 0;
    font-style: normal;
    display: inline;
    white-space: normal;
}

/* ── Hide dates on non-blog cards ──────────────────────────────────────────── */
.search-results .elementor-posts-container
    .elementor-post:not(.type-post) .elementor-post__meta-data,
.search-results .elementor-posts-container
    .elementor-post:not(.type-post) .elementor-post-date {
    display: none !important;
}
.search-results .elementor-posts-container
    .elementor-post.type-post .elementor-post__meta-data {
    display: block !important;
}

/* ── Excerpt inline chunk styling ──────────────────────────────────────────── */
.search-results .elementor-post__excerpt .avalon-excerpt-chunk {
    display: inline;
    white-space: nowrap;
}

/* ── Post title ─────────────────────────────────────────────────────────────── */
.search-results h3.elementor-post__title {
    text-decoration: underline;
    padding: 0 0 0 15px;
    border-style: solid;
    border-width: 0 0 0 4px;
    border-color: #006991;
    font-weight: 100 !important;
}
.search-results h3.elementor-post__title a:hover,
.search-results h3.elementor-post__title a:focus {
    color: #006991 !important;
    text-decoration: underline;
}

/* ── Read More hover ────────────────────────────────────────────────────────── */
.search-results .elementor-post__read-more:hover,
.search-results .elementor-post__read-more:focus {
    color: #ffffff !important;
}

/* ── Section dividers ───────────────────────────────────────────────────────── */
.avalon-result-divider {
    grid-column: 1 / -1;
    width: 51%;
    margin: 24px auto 12px;
    display: flex;
    align-items: center;
    gap: 0;
}
.avalon-result-divider::before,
.avalon-result-divider::after {
    content: "";
    display: block;
    flex-grow: 1;
    border-block-end-width: 0;
    border-block-end-style: initial;
    border-block-end-color: initial;
    border-block-start-width: 2px;
    border-block-start-style: solid;
    border-block-start-color: var(--e-global-color-primary, #006991);
}
.avalon-result-divider .avalon-divider-text {
    padding: 0 12px;
    color: #ffffff;
    font-family: "Gotham Bold", sans-serif;
    font-size: 0.8em;
    font-weight: 400;
    white-space: nowrap;
    text-transform: uppercase;
    text-decoration: none !important;
    border: none !important;
    padding-left: 12px !important;
}

/* ── Thumbnail overflow fix ─────────────────────────────────────────────────── */
.search-results .type-avalon_boat_model .elementor-post__thumbnail,
.search-results .type-avalon_product_cat .elementor-post__thumbnail,
.search-results .type-avalon_shopping_tools .elementor-post__thumbnail {
    overflow: hidden;
    max-height: 200px;
    display: block;
    line-height: 0;
}
.search-results .type-avalon_boat_model .elementor-post__thumbnail img,
.search-results .type-avalon_product_cat .elementor-post__thumbnail img,
.search-results .type-avalon_shopping_tools .elementor-post__thumbnail img {
    width: 100%;
    height: 210px !important;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.search-results .type-avalon_boat_model .elementor-post__thumbnail__link,
.search-results .type-avalon_product_cat .elementor-post__thumbnail__link,
.search-results .type-avalon_shopping_tools .elementor-post__thumbnail__link {
    display: block;
    overflow: hidden;
    max-height: 200px;
    line-height: 0;
}

/* ── Mark inside excerpt ──────────────────────────────────────────────────── */
.search-results .elementor-post__excerpt mark.avalon-search-highlight {
    display: inline;
    white-space: normal;
}


/* =============================================================================
   v7.0.0 NEW — Accordion Deep-Link Highlight (boat-model pages)
   v7.0.3 — Mid-word match fix (Issue 1a): zero horizontal padding so
            highlighted substrings inside words don't show visual whitespace.
   v7.0.3 — Removed .avalon-deeplink-secondary rule (Issue 1b): the persistent
            yellow inset side-rule on opened-but-not-targeted accordions was
            distracting per user feedback. Highlighted text alone is enough.
   v7.0.4 — Highlighting INSIDE accordion bodies is now primarily produced by
            the global destination highlighter (Feature 1, Section 14c). The
            scoped rule below is retained for visual parity in the rare case
            where an accordion is opened by user click AFTER the global
            highlighter has finished — the in-accordion fallback in the
            accordion deep-link script (Section 14b) re-runs against the
            opened body, which is idempotent.
   ============================================================================= */

/* Highlight mark inside accordion items on boat-model pages */
.accordion__avalon_item mark.avalon-search-highlight {
    background-color: #FFEA00;
    color: #111111;
    font-weight: bold;
    border-radius: 2px;
    padding: 0;
    font-style: normal;
    display: inline;
}

/* Subtle pulse animation on the URL-targeted (PRIMARY) accordion item only */
.accordion__avalon_item.avalon-deeplink-target {
    animation: avalon-accordion-pulse 1.5s ease-in-out 2;
}

@keyframes avalon-accordion-pulse {
    0%   { border-color: rgba(0, 105, 145, 0.4); }
    50%  { border-color: rgba(255, 234, 0, 0.9); box-shadow: 0 0 12px rgba(255, 234, 0, 0.4); }
    100% { border-color: rgba(0, 105, 145, 0.4); }
}


/* =============================================================================
   v7.0.6 — ISSUE 1 (mobile) — Responsive thumbnails + card column count
   =============================================================================
   Backported from Tahoe Search Filter v1.0.7 (Issue 1).

   PROBLEM (mobile/tablet only — desktop ≥1200px unaffected): Handheld-
   landscape phones (568–932px), iPad mini (all orientations), iPad / iPad
   10.2 (all orientations), and iPad Pro 10.5" in portrait all render each
   search-result card with the pontoon photo cropped to a thin top band —
   sky, treeline, or empty water — with the boat itself out of frame. Also
   tablet portrait was rendering only 1 card per row per the Elementor
   template's archive_cards_columns_tablet=1 setting; we want 2 per row.

   ROOT CAUSE: the existing v7.0.5 rule hardcoded
       img { height: 210px !important; object-position: center top; }
       .elementor-post__thumbnail { max-height: 200px; overflow: hidden; }
   which clipped each pontoon photo to its sky/treeline band when
   Elementor's archive_cards aspect-ratio container collapsed below 200px.
   And Elementor's archive_cards widget honors --grid-template-columns
   from the archive-template's archive_cards_columns_tablet setting which
   defaults to 1 on the Avalon template.

   FIX (mobile/tablet only):
   • Release the forced 210px image height in the 481–1199px range so
     Elementor's aspect-ratio container can drive the visible thumbnail
     height; recenter the crop with object-position: center center.
   • Override grid-template-columns on the
     .elementor-posts-container.elementor-grid to force 2 columns at
     tablet sizes and 3 columns at iPad-Pro-10.5-landscape sizes.

   Mobile-portrait (≤480px) keeps the original behavior — 1 card per row,
   full-width thumbnail. Desktop (≥1200px) is bit-for-bit unchanged from
   v7.0.5 — none of these rules fire there.
   ============================================================================= */

/* ── Mid-range viewports: handheld landscape, iPad mini, iPad, iPad Pro 10.5
       portrait. Releases the forced 210px thumbnail height and recenters
       the crop. Column count is set by the orientation-specific rules
       below. */
@media (min-width: 481px) and (max-width: 1199px) {

    .search-results .type-avalon_boat_model .elementor-post__thumbnail,
    .search-results .type-avalon_product_cat .elementor-post__thumbnail,
    .search-results .type-avalon_shopping_tools .elementor-post__thumbnail {
        max-height: none;
        height: auto;
        overflow: hidden;
        line-height: 0;
    }
    .search-results .type-avalon_boat_model .elementor-post__thumbnail__link,
    .search-results .type-avalon_product_cat .elementor-post__thumbnail__link,
    .search-results .type-avalon_shopping_tools .elementor-post__thumbnail__link {
        max-height: none;
        height: auto;
        display: block;
        overflow: hidden;
    }
    .search-results .type-avalon_boat_model .elementor-post__thumbnail img,
    .search-results .type-avalon_product_cat .elementor-post__thumbnail img,
    .search-results .type-avalon_shopping_tools .elementor-post__thumbnail img {
        /* Inside Elementor's archive_cards skin the thumbnail's
           parent .elementor-post__thumbnail__link is positioned with
           padding-bottom equal to its item_ratio. The image is positioned
           absolutely inside it. height:100% + object-fit:cover makes the
           image fill that aspect-ratio box, and object-position:center
           keeps the boat (center-frame in product photography) in the
           visible crop instead of just the sky. */
        width: 100%;
        height: 100% !important;
        max-height: none;
        min-height: 140px;
        object-fit: cover;
        object-position: center center;
        display: block;
    }
}

/* ── Handheld-landscape (≥700px): phones rotated, 7"–8" Android tablets,
       small tablets. TWO cards per row instead of one.
       The 700px lower bound matches the spec — "any device in landscape
       mode that has 700px or more can show 2 cards per row." */
@media (min-width: 700px) and (max-width: 1024px) and (orientation: landscape) {

    .search-results .elementor-posts-container.elementor-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        --e-archive-posts-columns: 2;
    }
    .elementor-36955 .elementor-element.elementor-element-6f3e49d4
        .elementor-posts-container.elementor-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .search-results .type-avalon_boat_model .elementor-post__thumbnail,
    .search-results .type-avalon_product_cat .elementor-post__thumbnail,
    .search-results .type-avalon_shopping_tools .elementor-post__thumbnail {
        aspect-ratio: 16 / 9;
        min-height: 180px;
    }
    .search-results .type-avalon_boat_model .elementor-post__thumbnail img,
    .search-results .type-avalon_product_cat .elementor-post__thumbnail img,
    .search-results .type-avalon_shopping_tools .elementor-post__thumbnail img {
        min-height: 180px;
    }
}

/* ── Handheld-landscape narrow (481–699px): phones in landscape that fall
       just below the 2-cards threshold. Keep 1 card per row (Elementor
       default at mobile breakpoint), but still apply the thumbnail
       recenter so the boat is visible. */
@media (min-width: 481px) and (max-width: 699px) and (orientation: landscape) {

    .search-results .type-avalon_boat_model .elementor-post__thumbnail,
    .search-results .type-avalon_product_cat .elementor-post__thumbnail,
    .search-results .type-avalon_shopping_tools .elementor-post__thumbnail {
        aspect-ratio: 16 / 9;
        min-height: 180px;
    }
    .search-results .type-avalon_boat_model .elementor-post__thumbnail img,
    .search-results .type-avalon_product_cat .elementor-post__thumbnail img,
    .search-results .type-avalon_shopping_tools .elementor-post__thumbnail img {
        min-height: 180px;
    }
}

/* ── Tablet portrait: iPad mini portrait (768px), iPad portrait (810px),
       iPad Pro 10.5" portrait (834px), iPad Pro 11" portrait (834px).
       TWO cards per row instead of one. */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {

    .search-results .elementor-posts-container.elementor-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        --e-archive-posts-columns: 2;
    }
    .elementor-36955 .elementor-element.elementor-element-6f3e49d4
        .elementor-posts-container.elementor-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .search-results .type-avalon_boat_model .elementor-post__thumbnail,
    .search-results .type-avalon_product_cat .elementor-post__thumbnail,
    .search-results .type-avalon_shopping_tools .elementor-post__thumbnail {
        aspect-ratio: 16 / 9;
        min-height: 220px;
    }
    .search-results .type-avalon_boat_model .elementor-post__thumbnail img,
    .search-results .type-avalon_product_cat .elementor-post__thumbnail img,
    .search-results .type-avalon_shopping_tools .elementor-post__thumbnail img {
        min-height: 220px;
    }
}

/* ── iPad Pro 10.5 / iPad Air landscape (1025–1199px) — 3 cards per row.
       min-height: 190px shows the entire boat without disproportionate
       vertical whitespace. iPad Pro 12.9 landscape (1366px) is above this
       range and falls into the desktop default at ≥1200px (also 3 cards
       per row in the Elementor template, so the visual outcome stays
       consistent). */
@media (min-width: 1025px) and (max-width: 1199px) {

    .search-results .elementor-posts-container.elementor-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        --e-archive-posts-columns: 3;
    }
    .elementor-36955 .elementor-element.elementor-element-6f3e49d4
        .elementor-posts-container.elementor-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .search-results .type-avalon_boat_model .elementor-post__thumbnail,
    .search-results .type-avalon_product_cat .elementor-post__thumbnail,
    .search-results .type-avalon_shopping_tools .elementor-post__thumbnail {
        aspect-ratio: 16 / 9;
        min-height: 190px;
    }
    .search-results .type-avalon_boat_model .elementor-post__thumbnail img,
    .search-results .type-avalon_product_cat .elementor-post__thumbnail img,
    .search-results .type-avalon_shopping_tools .elementor-post__thumbnail img {
        min-height: 190px;
    }
}


/* =============================================================================
   v7.0.6 — ISSUE 2 (mobile card spacing + article/text padding)
   =============================================================================
   Backported from Tahoe Search Filter v1.0.7 (Issue 2 finalization), with
   the user-requested constraint that desktop/laptop (≥1025px) MUST NOT be
   affected. Tahoe v1.0.7 unscoped the text-block padding rules across all
   viewports; Avalon v7.0.6 keeps them scoped to @media (max-width: 1024px)
   so the existing desktop layout is bit-for-bit unchanged from v7.0.5.

   Three layers of related card-spacing rules, all mobile-scoped:

     1. GRID ROW-GAP:
        On viewports ≤1024px the Elementor archive_cards widget's default
        --grid-row-gap collapses to 0, producing back-to-back result cards
        with no vertical separation. Force --grid-row-gap: 20px so cards
        have visible breathing room when they stack into 1 or 2 columns.
        Two selector paths ship: the exact .elementor-36955
        .elementor-element-6f3e49d4 (verified from the current Elementor
        JSON export) and a generic .search-results
        .elementor-posts-container.elementor-grid fallback that survives
        an Elementor template re-save which regenerates the element ID.

     2. ARTICLE L/R PADDING:
        On iPad portrait (768×1024) and phone landscape, search-result
        cards rendered flush to the column edge. The 10px L/R padding +
        margin: 0 restores the gutter.

     3. TEXT-BLOCK PADDING — split by featured-image presence:
        WordPress automatically adds .has-post-thumbnail to <article>
        elements with a featured image set. Cards with images need zero
        top/bottom padding so the text block sits flush below the
        thumbnail; cards without images need 10px top/bottom so the title
        isn't flush against the card edge.

        post-36955.css (Elementor per-page generated, loads after the
        plugin's CSS) emits at specificity (0,3,0):
          .elementor-36955 .elementor-element.elementor-element-6f3e49d4
          .elementor-post__text { padding: 0 10px; }
        Avalon v7.0.6 bumps specificity to (0,6,0) by chaining
        .elementor-post.has-post-thumbnail /
        .elementor-post:not(.has-post-thumbnail) so this wins on weight
        regardless of cascade load order. !important is retained as
        insurance against a future Elementor template re-save that
        emits even higher-specificity rules. A generic fallback ships
        in case .elementor-element-6f3e49d4 is regenerated.
   ============================================================================= */

@media (max-width: 1024px) {

    /* ── Grid row-gap — primary (exact element ID) ─────────────────────────── */
    .elementor-36955 .elementor-element.elementor-element-6f3e49d4 {
        --grid-row-gap: 20px;
        --grid-column-gap: 0px;
    }
    /* Generic fallback in case .elementor-element-6f3e49d4 is regenerated
       by an Elementor template re-save. */
    .search-results .elementor-posts-container.elementor-grid {
        --grid-row-gap: 20px;
    }

    /* ── Article L/R padding ────────────────────────────────────────────────
       Restores the column-edge gutter on iPad portrait + phone landscape
       where post-36955.css's default settings let cards render flush. */
    .search-results .elementor-posts-container .elementor-post {
        margin: 0;
        /* padding-left: 10px;
        padding-right: 10px; */
    }

    /* ── Text-block padding — cards WITHOUT featured image (primary) ───────
       Specificity (0,6,0) beats post-36955.css (0,3,0) on weight
       regardless of cascade load order. */
    .elementor-36955 .elementor-element.elementor-element-6f3e49d4
    .elementor-post:not(.has-post-thumbnail) .elementor-post__text {
        padding: 10px 10px !important;
        margin-top: 0 !important;
    }

    /* ── Text-block padding — cards WITHOUT image (generic fallback) ──────── */
    .search-results .elementor-posts-container
    .elementor-post:not(.has-post-thumbnail) .elementor-post__text {
        padding: 10px 10px !important;
        margin-top: 0 !important;
    }

    /* ── Text-block padding — cards WITH featured image (primary) ──────────
       Matches what post-36955.css already emits. Explicit rule here
       documents intent and provides survival path against any future
       Elementor change that flips the per-page CSS default. */
    .elementor-36955 .elementor-element.elementor-element-6f3e49d4
    .elementor-post.has-post-thumbnail .elementor-post__text {
        padding: 0 10px !important;
        margin-top: 0 !important;
    }

    /* ── Text-block padding — cards WITH featured image (generic fallback) ── */
    .search-results .elementor-posts-container
    .elementor-post.has-post-thumbnail .elementor-post__text {
        padding: 0 10px !important;
        margin-top: 0 !important;
    }
}


/* =============================================================================
   v7.0.7 — H1 styling on search-results pages (effective in v7.0.8)
   =============================================================================
   The DOM-side wrapper avalon_search_query_title_wrapper() in
   avalon-search-filter.php (Section 19b — new in v7.0.8) injects the
   search term and its surrounding quote marks as three spans into the
   rendered <h1> on is_search() pages only:

       <h1 class="elementor-heading-title elementor-size-default">
           Search Results for: <span class="avalon-search-quote">&ldquo;</span><span
           class="avalon-search-term">performance</span><span
           class="avalon-search-quote">&rdquo;</span>
       </h1>

   v7.0.7 attempted to do this via a PHP filter on get_the_archive_title
   (Section 19) but the filter never fired in production because Elementor
   Pro 3.7.7's theme-archive-title.default widget bypasses the WP core
   get_the_archive_title filter chain. v7.0.8 keeps Section 19 in place
   as defensive belt-and-suspenders and adds Section 19b as the actual
   injector. The CSS rules below are unchanged from v7.0.7 — they finally
   have spans in the DOM to bind to as of v7.0.8.

   Visual outcome:
     • "Search Results for:"  — unchanged (Heading widget's existing color)
     • opening + closing quotes — #6ec1e4 (light blue accent)
     • the term itself — white + underlined
   Scoping: rules are gated on .search-results body class so they only
   fire on is_search() pages. The wrapping spans never appear elsewhere
   (Section 19b early-returns when ! is_search()).
   Color: #6ec1e4 is hardcoded (per spec) rather than referencing
   var(--primary-color), so the appearance is deterministic regardless
   of the active Elementor global color scheme.
   ============================================================================= */
.search-results .elementor-heading-title .avalon-search-quote {
    color: #6ec1e4;
}
.search-results .elementor-heading-title .avalon-search-term {
    color: #ffffff;
    /* text-decoration: underline; */
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
}


/* =============================================================================
   v7.0.7 — Mobile-portrait divider line widths
   =============================================================================
   Problem: on phones held in portrait (Galaxy S25 @ 360px, iPhone 17 @
   ~393px), the existing .avalon-result-divider width:51% leaves the
   container so narrow that long labels — especially "OTHER PAGES
   (10 RESULTS)" at ~24 uppercase chars — fill the entire container,
   pushing the flex-grow ::before and ::after pseudo-elements to zero
   visible width. Shorter labels (e.g. MODELS, CATEGORIES) render with
   visibly truncated lines that look inconsistent with each other and
   nothing like the landscape rendering, where every divider has even,
   substantial lines on both sides.

   Fix: at (max-width: 599px) and (orientation: portrait) only, widen
   the divider container to calc(100% - 20px) and tighten the text
   padding from 12px to 8px on each side. This gives every label —
   including OTHER PAGES — enough remaining horizontal space for the
   ::before / ::after pseudo-lines to render with visible length, and
   visually equalizes the line lengths across MODELS, CATEGORIES, and
   OTHER PAGES (within the natural variance of label-text width).

   Scope: strictly (max-width: 599px) and (orientation: portrait).
     - Phone landscape (≥600px or orientation:landscape): unchanged
       (already renders correctly with the v7.0.6 baseline).
     - Tablet portrait (≥600px portrait): unchanged.
     - Desktop / laptop: unchanged.
   The override of .avalon-divider-text padding-left uses !important to
   defeat the original rule's !important on line ~168 of this file.
   ============================================================================= */
@media (max-width: 599px) and (orientation: portrait) {

    .search-results .avalon-result-divider {
        /* Widen the flex container so the ::before / ::after pseudo-lines
           have room to fill on either side of every divider label.
           At a ~360px viewport: 51% → ~184px (no room for OTHER PAGES);
           calc(100% - 20px) → ~340px (visible lines on every label). */
        width: calc(100% - 20px);
        max-width: 100%;
    }

    .search-results .avalon-result-divider .avalon-divider-text {
        /* Tighten label padding from 12px → 8px on each side, freeing
           an additional 8px of horizontal space for the flex-grow lines.
           !important on both sides defeats the original rule's
           !important on padding-left (line ~168). */
        padding-left:  8px !important;
        padding-right: 8px !important;
    }
}