/* ==========================================================================
   hzseo-links.css
   "Explore more" SEO link block — property channel homepage, above the footer.

   NAMESPACE: hzseo-
   Chosen after a whole-token census of every class in property.css,
   property-pages.css and every Blade view under views/property (including
   their inlined <style> blocks). Substring grep is worthless for this job,
   because "hz" prefixes every namespace on the channel: matching is on the
   leading segment of a complete class token instead.

   Prefixes already owned by other work, all avoided:
       hz-     113 tokens      hzp-    189 tokens
       hzf-     49 tokens      hzpr-    80 tokens
       hzb-     25 tokens      hzg-     24 tokens
       hzs-     37 tokens   <- the Add Listing step rail in
                               views/sell-for-me/index.blade.php. This file
                               used to use hzs-; that was a collision and this
                               is the correction.
   Leading segment "hzseo": 0 tokens anywhere. And no rule on the channel uses
   [class*=], [class^=], [class|=] or [class$=], so nothing can catch this
   prefix by pattern rather than by name.

   -------------------------------------------------------------------------
   LOAD ORDER, AND WHY NOTHING HERE DEPENDS ON IT
   -------------------------------------------------------------------------
   The inserting agent adds this sheet with @push('styles'). Measured on the
   rendered homepage, that stack lands at roughly byte 3k-35k of <head> while
   property.css lands at 45.7k — so THIS FILE LOADS FIRST and loses every
   cascade tie to property.css. Three things follow, and all three are honoured
   below:

     1. This file never redefines a --hz-* token, it only reads them. Custom
        properties resolve at computed-value time from whichever :root
        declaration wins, so a consumer is order-independent by construction.
        Every var() here also carries a literal fallback, which is what makes
        the file correct standing alone as well.

     2. This file declares nothing at a specificity that property.css also
        reaches. Checked, not assumed: property.css and property-pages.css
        contain no bare element rules and no descendant rules rooted at
        .hz-shell or .hz-sec that end in an element type, so there is nothing
        for a single-class rule here to tie with.

     3. .hzseo__shell restates .hz-shell rather than overriding it. Same
        values, so the tie it loses changes nothing.

   The one borrow is .hz-shell on the inner wrapper, for the site's 1200px
   centred gutter.

   PALETTE — read from property.css, each with a literal fallback:
       --hagzi-primary  #0745D9  accent: active tab underline, hover, focus
                                 ring, chip and link hover, chevron

   That accent used to be --hz-red. This sheet was written before the purple
   landed and kept reading the red token afterwards, which is why this one
   section still had a red underline when the rest of the channel did not.
   --hz-red itself is untouched and still very much in use -- property.css,
   the sell-for-me form and the banner all read it -- so only the ten uses
   in this file moved. The saved state on favourites is a different colour
   again (--hzfav-saved, #e11d48) and is unrelated to either.
       --hz-ink   #12141a   headings and summaries
       --hz-nav   #3c414c   link text
       --hz-line  #e7e9ee   rules and chip borders
   The reference design's purple is Property Finder's brand and is not used.

   NO JAVASCRIPT
   Tabs are a radio group read with :checked and the sibling combinator.
   Groups are native <details>. Nothing here needs a script, so the block is
   immune to the Vue mount on #app discarding listeners bound during parse.
   The tab mechanism depends on the #hzseo-tab-rent / #hzseo-tab-buy ids and
   the shared radio name matching the markup exactly — a half-renamed selector
   here breaks the tabs silently.
   ========================================================================== */

.hzseo {
    padding: 44px 0 56px;
    background: #ffffff;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}

.hzseo *,
.hzseo *::before,
.hzseo *::after {
    box-sizing: border-box;
}

/* Fallback for .hz-shell. Identical values, so the two never disagree. */
.hzseo__shell {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.hzseo__title {
    margin: 0 0 18px;
    color: var(--hz-ink, #12141a);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.25;
}

/* --------------------------------------------------------------------------
   TABS

   The radios are the state. They sit as direct children of .hzseo__tabwrap,
   before both the labels and the panels, because :checked ~ only reaches
   later siblings. Moving them inside .hzseo__tabs would break every rule
   below.
   -------------------------------------------------------------------------- */

.hzseo__tabwrap {
    position: relative;
}

.hzseo__radio {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    /* Not display:none and not visibility:hidden — both would take the control
       out of the tab order and make the tabs keyboard-unreachable. */
    pointer-events: none;
}

.hzseo__tabs {
    display: flex;
    gap: 28px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--hz-line, #e7e9ee);
}

.hzseo__tab {
    display: inline-block;
    margin-bottom: -1px;
    padding: 0 0 12px;
    border-bottom: 2px solid transparent;
    color: #5a6070;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    transition: color 0.15s ease, border-color 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
}

.hzseo__tab:hover {
    color: var(--hz-ink, #12141a);
}

#hzseo-tab-rent:checked ~ .hzseo__tabs .hzseo__tab[for="hzseo-tab-rent"],
#hzseo-tab-buy:checked ~ .hzseo__tabs .hzseo__tab[for="hzseo-tab-buy"] {
    border-bottom-color: var(--hagzi-primary, #0745D9);
    color: var(--hz-ink, #12141a);
    font-weight: 700;
}

/* Keyboard focus has to be shown on the label, because the control it belongs
   to is the visually hidden radio. */
#hzseo-tab-rent:focus-visible ~ .hzseo__tabs .hzseo__tab[for="hzseo-tab-rent"],
#hzseo-tab-buy:focus-visible ~ .hzseo__tabs .hzseo__tab[for="hzseo-tab-buy"] {
    outline: 2px solid var(--hagzi-primary, #0745D9);
    outline-offset: 3px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   PANELS
   -------------------------------------------------------------------------- */

.hzseo__panel {
    display: none;
}

#hzseo-tab-rent:checked ~ .hzseo__panel--rent,
#hzseo-tab-buy:checked ~ .hzseo__panel--buy {
    display: block;
}

/* --------------------------------------------------------------------------
   DISTRICT CHIPS
   Wrapping rather than a horizontal scroller: the reference keeps them on one
   line, but ten chips in a 342px viewport would need an overflow container,
   and a wrap costs nothing and cannot leak a scrollbar onto the page.
   -------------------------------------------------------------------------- */

.hzseo__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.hzseo__chip {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--hz-line, #e7e9ee);
    border-radius: 999px;
    background: #ffffff;
    color: var(--hz-nav, #3c414c);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.hzseo__chip:hover,
.hzseo__chip:focus-visible {
    border-color: var(--hagzi-primary, #0745D9);
    background: #fff5f5;
    color: var(--hagzi-primary, #0745D9);
}

.hzseo__chip:focus-visible {
    outline: 2px solid var(--hagzi-primary, #0745D9);
    outline-offset: 2px;
}

.hzseo__note {
    margin: 0 0 20px;
    color: #5a6070;
    font-size: 12px;
    line-height: 1.6;
}

.hzseo__note b {
    color: var(--hz-nav, #3c414c);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   COLLAPSIBLE GROUPS
   -------------------------------------------------------------------------- */

.hzseo__group {
    border-top: 1px solid var(--hz-line, #e7e9ee);
}

.hzseo__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 2px;
    color: var(--hz-ink, #12141a);
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
}

/* Remove the UA disclosure triangle in both engine families. */
.hzseo__summary::-webkit-details-marker {
    display: none;
}

.hzseo__summary::marker {
    content: "";
}

.hzseo__summary:hover {
    color: var(--hagzi-primary, #0745D9);
}

.hzseo__summary:focus-visible {
    outline: 2px solid var(--hagzi-primary, #0745D9);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Match the shared FAQ chevron exactly: a 20px stroked SVG inside a 24px
   control area. It points down when closed and rotates up when open. */
.hzseo__chev {
    display: grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--hzp-accent, var(--hagzi-primary, #0745D9));
    transition: transform 0.18s ease;
}

.hzseo__chev svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hzseo__group[open] > .hzseo__summary .hzseo__chev {
    transform: rotate(180deg);
}

.hzseo__summary:hover .hzseo__chev {
    color: var(--hzp-accent, var(--hagzi-primary, #0745D9));
}

/* --------------------------------------------------------------------------
   TWO-COLUMN LINK LISTS
   CSS columns rather than a grid: the reference fills the left column before
   the right, which is column-major, and that is what `columns` does natively.
   -------------------------------------------------------------------------- */

.hzseo__list {
    margin: 0;
    padding: 0 0 20px;
    column-count: 2;
    column-gap: 56px;
    list-style: none;
}

.hzseo__item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.hzseo__link {
    display: inline-block;
    padding: 6px 0;
    color: var(--hz-nav, #3c414c);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    /* Long district phrases must wrap inside the column rather than push it
       wider, which is what would put a scrollbar on the page. */
    overflow-wrap: break-word;
    word-break: break-word;
}

.hzseo__link:hover {
    color: var(--hagzi-primary, #0745D9);
    text-decoration: underline;
}

.hzseo__link:focus-visible {
    outline: 2px solid var(--hagzi-primary, #0745D9);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   NARROW VIEWPORTS
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .hzseo {
        padding: 32px 0 40px;
    }

    .hzseo__title {
        font-size: 20px;
    }

    .hzseo__list {
        column-count: 1;
    }

    .hzseo__summary {
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    .hzseo__chev {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hzseo__list {
        column-gap: 32px;
    }
}

/* Respect a reduced-motion preference: the only motion here is the chevron. */
@media (prefers-reduced-motion: reduce) {
    .hzseo__tab,
    .hzseo__chip,
    .hzseo__chev {
        transition: none;
    }
}