/*
 * Homepage slider — formatting for client-edited slides.
 *
 * Each slide's content comes from a free-form ACF WYSIWYG field, so the client can enter any mix of
 * paragraphs, headings, links, lists, buttons and images. all.css only styles the hand-built first slide
 * (div.large / div.sub / span.experience). These rules give everything else a consistent, fluid type
 * scale and make sure any amount of content fits on any screen.
 *
 * Loaded after all.css (see theme_styles() in functions.php).
 */

/* ---------------------------------------------------------------------------------------------
 * Layout: let the slider grow to fit its tallest slide instead of clipping or spilling over the
 * next section. JS ($.windowHeight) sets an inline 80%-of-window height on the section; we turn that
 * into a minimum.
 *
 * The slides are stacked in a single grid cell (flexslider's fade mode otherwise floats them on top
 * of each other), so every slide stretches to the height of the tallest one and no slide shows a gap
 * under its background image. A display:table element treats `height` as a minimum, so vertical
 * centering still works when a slide is taller than the minimum.
 * ------------------------------------------------------------------------------------------- */
#homeSlider {
    height: auto !important;
}

#homeSlider .flexslider {
    height: auto;
}

#homeSlider .flexslider .slides {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
}

#homeSlider .flexslider .slides::after {
    content: none;
}

#homeSlider .flexslider .slides > .slide {
    grid-area: 1 / 1;
    height: auto;
    min-height: 80vh;
    min-height: 80svh;
}

#homeSlider .vert-center-cont {
    height: 100%;
}

/* The pager sits after the slides and is nudged up over them. With a fixed section height it used to
 * overflow harmlessly; now that the section sizes to its content, keep it from adding a strip below. */
#homeSlider .slider-nav-container {
    height: 0;
}

#homeSlider .slide-contents .container {
    /* When a slide is taller than the screen, keep its first line out from under the fixed header and
     * its last line clear of the pager dots. Symmetric, so vertically-centered slides don't move. */
    padding-top: 96px;
    padding-bottom: 96px;
}



@media (max-width: 767px) {
    #homeSlider .slide-contents .container {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

/* ---------------------------------------------------------------------------------------------
 * Client-edited slides (li.slide-custom).
 *
 * page-home.php runs their content through cdb_theme::format_slide_content(), which tags blocks by
 * role and groups them, whatever the client types:
 *   div.slide-head    the opening headline lines
 *     .slide-kicker   short opening line            -> blue script accent ("Experience")
 *     h1 / .large     headline                      -> thin uppercase display
 *   div.slide-body    everything after
 *     .slide-link-lead  h1/h2 that's only a link    -> lead line with an arrow
 *     .slide-ctas       link-only lines             -> quiet uppercase links
 *
 * Desktop: "Echo" of slide 1 — right-aligned, script overlapping a thin display headline.
 * Phones:  "Editorial" — centered, hairline between headline and details, links as ruled rows.
 * The layout sets the alignment; alignment picked in the editor is overridden so every slide
 * matches. Slide 1 (the "Experience" slide) has no .slide-custom and is styled only by all.css.
 * ------------------------------------------------------------------------------------------- */

/* ---- Shared ----------------------------------------------------------------------------------- */

#homeSlider .slide-custom::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background: linear-gradient(270deg, rgba(9, 13, 19, 0.7) 0%, rgba(9, 13, 19, 0.46) 55%, rgba(9, 13, 19, 0.3) 100%);
}

#homeSlider .slide-custom .vert-center-cont {
    position: relative;
    z-index: 1;
}

/* The overlay does the contrast work; the shadow options become a soft lift instead of a glow. */
#homeSlider .slide-custom.heavy-shadow {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}

#homeSlider .slide-custom.light-shadow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 14px rgba(0, 0, 0, 0.2);
}

#homeSlider .slide-custom .slide-contents {
    font-size: clamp(16px, min(0.6vw + 12px, 2.6vh + 6px), 21px);
    font-weight: 300;
    line-height: 1.45;
}

#homeSlider .slide-custom .container {
    text-align: right;
}

/* Editor alignment (inline style or Bootstrap class) follows the layout instead. */
#homeSlider .slide-custom .container :is([style*="text-align"], .text-left, .text-center, .text-right) {
    text-align: inherit !important;
}

#homeSlider .slide-custom :is(p, ul, ol, blockquote, table, figure, h1, h2, h3, h4, h5, h6) {
    margin: 0;
    color: inherit;
}

#homeSlider .slide-custom :is(p, li, h1, h2, h3, h4, h5, h6, a, td, blockquote) {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

#homeSlider .slide-custom :is(h1, h2, h3, .large, .slide-kicker, .slide-link-lead) {
    text-wrap: balance;
}

#homeSlider .slide-custom :is(p, li, blockquote):not(.large):not(.slide-kicker) {
    text-wrap: pretty;
}

#homeSlider .slide-custom p:empty {
    display: none;
}

/* Bold means "stand out", not "heavy": keep the thin weights of slide 1. */
#homeSlider .slide-custom :is(strong, b) {
    font-weight: inherit;
}

#homeSlider .slide-custom .slide-body > p :is(strong, b),
#homeSlider .slide-custom li :is(strong, b) {
    font-weight: 500;
}

#homeSlider .slide-custom a {
    color: #7fc7f9;
    text-decoration: none;
    -webkit-transition: color 0.2s, border-color 0.2s;
    transition: color 0.2s, border-color 0.2s;
}

#homeSlider .slide-custom a:hover,
#homeSlider .slide-custom a:focus {
    color: #fff;
    text-decoration: none;
    outline: none;
}

#homeSlider .slide-custom a:focus-visible {
    outline: 2px solid #7fc7f9;
    outline-offset: 4px;
}

/* Script accent */
#homeSlider .slide-custom .slide-kicker {
    position: relative;
    z-index: 1;
    font-family: Allura, "Snell Roundhand", "Apple Chancery", cursive;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #7fc7f9;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

/* Display headline: anything headline-like, in or out of the head group. */
#homeSlider .slide-custom :is(h1, .large:not(.slide-kicker)),
#homeSlider .slide-custom .slide-head h2,
#homeSlider .slide-custom span.large {
    text-transform: uppercase;
}

#homeSlider .slide-custom span.large {
    display: block;
}

/* Lead line (a headline that's only a link): white, with a blue arrow. */
#homeSlider .slide-custom .slide-link-lead {
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

#homeSlider .slide-custom .slide-link-lead a {
    color: #fff;
}

#homeSlider .slide-custom .slide-link-lead a::after {
    content: "\2192";
    display: inline-block;
    margin-left: 0.45em;
    color: #7fc7f9;
    -webkit-transition: -webkit-transform 0.25s;
    transition: transform 0.25s;
}

#homeSlider .slide-custom .slide-link-lead a:hover {
    color: #7fc7f9;
}

#homeSlider .slide-custom .slide-link-lead a:hover::after {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}

/* Link-only lines and editor buttons: quiet uppercase links. */
#homeSlider .slide-custom .slide-cta {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

#homeSlider .slide-custom .slide-cta a,
#homeSlider .slide-custom a.btn {
    color: #fff;
    text-shadow: none;
}

#homeSlider .slide-custom a.btn {
    display: table;
    height: auto;
    margin: 1.4em 0 0 auto;
    padding: 0 0 7px;
    border: 0;
    border-bottom: 1px solid #7fc7f9;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: Raleway, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: normal;
}

#homeSlider .slide-custom .slide-cta a:hover,
#homeSlider .slide-custom .slide-cta a:focus,
#homeSlider .slide-custom a.btn:hover,
#homeSlider .slide-custom a.btn:focus {
    color: #7fc7f9;
}

/* Lists keep left-aligned bullets inside a block that sits with the text. */
#homeSlider .slide-custom :is(ul, ol) {
    display: table;
    margin-left: auto;
    padding-left: 1.2em;
    text-align: left !important;
}

#homeSlider .slide-custom li + li {
    margin-top: 0.2em;
}

#homeSlider .slide-custom blockquote {
    padding: 0;
    border: 0;
    font-size: inherit;
    font-style: italic;
}

#homeSlider .slide-custom img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 30vh;
}

#homeSlider .slide-custom :is(img.alignleft, img.alignright, img.aligncenter) {
    float: none;
    display: inline-block;
    margin: 0;
}

#homeSlider .slide-custom :is(iframe, video) {
    max-width: 100%;
}

#homeSlider .slide-custom hr {
    display: inline-block;
    width: 56px;
    margin: 0.8em 0;
    border: 0;
    border-top: 1px solid #7fc7f9;
}

/* ---- Desktop & tablet: "Echo" ------------------------------------------------------------------ */
@media (min-width: 768px) {
    #homeSlider .slide-custom :is(.slide-head, .slide-body) {
        max-width: 940px;
        margin-left: auto;
    }

    #homeSlider .slide-custom .slide-kicker {
        font-size: clamp(40px, min(3.2vw + 12px, 6.6vh + 6px), 66px);
        line-height: 0.95;
        padding-right: 0.1em;
    }

    /* The script tucks into the headline below it, like "Experience" over "REAL ESTATE EXCELLENCE". */
    #homeSlider .slide-custom .slide-kicker:has(+ :is(h1, h2, .large)) {
        margin-bottom: -0.16em;
    }

    #homeSlider .slide-custom :is(h1, .large:not(.slide-kicker)),
    #homeSlider .slide-custom .slide-head h2,
    #homeSlider .slide-custom span.large {
        font-size: clamp(28px, min(3.4vw + 8px, 6.6vh + 2px), 58px);
        font-weight: 100;
        line-height: 1.04;
        letter-spacing: 0.01em;
    }

    #homeSlider .slide-custom .slide-head > * + :not(.slide-kicker) {
        margin-top: 0.08em;
    }

    #homeSlider .slide-custom .slide-body {
        margin-top: 16px;
    }

    #homeSlider .slide-custom .slide-body > * + * {
        margin-top: 12px;
    }

    #homeSlider .slide-custom .slide-link-lead {
        font-size: clamp(18px, min(0.8vw + 13px, 3vh + 6px), 24px);
    }

    #homeSlider .slide-custom .slide-body > :is(p, ul, ol, blockquote) {
        max-width: 680px;
        margin-left: auto;
    }

    #homeSlider .slide-custom .slide-body > h2:not(.slide-link-lead) {
        font-size: clamp(22px, min(1.6vw + 8px, 4vh + 4px), 34px);
        font-weight: 200;
        line-height: 1.15;
        text-transform: uppercase;
    }

    #homeSlider .slide-custom .slide-body > h3:not(.slide-cta) {
        font-size: clamp(18px, min(0.8vw + 13px, 3vh + 6px), 24px);
        font-weight: 300;
        line-height: 1.3;
    }

    #homeSlider .slide-custom .slide-body > :is(h4, h5, h6):not(.slide-cta) {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #7fc7f9;
    }

    #homeSlider .slide-custom .slide-ctas {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 14px 34px;
        margin-top: 30px !important;
    }

    #homeSlider .slide-custom .slide-cta a {
        display: inline-block;
        padding-bottom: 7px;
        border-bottom: 1px solid #7fc7f9;
    }
}

/* ---- Phones: "Editorial" ---------------------------------------------------------------------- */
@media (max-width: 767px) {
    #homeSlider .slide-custom::before {
        background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(9, 13, 19, 0.72) 0%, rgba(9, 13, 19, 0.55) 70%, rgba(9, 13, 19, 0.48) 100%);
    }

    #homeSlider .slide-custom .container {
        text-align: center;
    }

    #homeSlider .slide-custom .slide-kicker {
        font-size: clamp(30px, 5.6vw + 11px, 42px);
        line-height: 1.05;
        margin-bottom: 0.1em;
    }

    #homeSlider .slide-custom :is(h1, .large:not(.slide-kicker)),
    #homeSlider .slide-custom .slide-head h2,
    #homeSlider .slide-custom span.large {
        font-size: clamp(22px, 3.2vw + 11px, 30px);
        font-weight: 200;
        line-height: 1.3;
        letter-spacing: 0.08em;
    }

    #homeSlider .slide-custom .slide-head > * + :not(.slide-kicker) {
        margin-top: 0.15em;
    }

    /* Hairline between the headline and the details. */
    #homeSlider .slide-custom .slide-head:not(:last-child)::after {
        content: "";
        display: block;
        width: 48px;
        height: 1px;
        margin: 22px auto 18px;
        background: #7fc7f9;
    }

    #homeSlider .slide-custom .slide-body > * + * {
        margin-top: 12px;
    }

    #homeSlider .slide-custom .slide-link-lead {
        font-size: 17px;
        font-weight: 400;
        letter-spacing: 0.02em;
    }

    #homeSlider .slide-custom .slide-body > :is(p, blockquote) {
        font-size: 15px;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.88);
    }

    #homeSlider .slide-custom .slide-body > h2:not(.slide-link-lead) {
        font-size: 20px;
        font-weight: 200;
        line-height: 1.3;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    #homeSlider .slide-custom .slide-body > h3:not(.slide-cta) {
        font-size: 17px;
        font-weight: 400;
    }

    #homeSlider .slide-custom .slide-body > :is(h4, h5, h6):not(.slide-cta) {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #7fc7f9;
    }

    #homeSlider .slide-custom :is(ul, ol) {
        margin-right: auto;
    }

    /* Links become full-width ruled rows: easy to tap, tidy however long the label is. */
    #homeSlider .slide-custom .slide-ctas {
        margin-top: 24px !important;
    }

    #homeSlider .slide-custom .slide-ctas .slide-cta {
        margin: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.22);
    }

    #homeSlider .slide-custom .slide-ctas .slide-cta:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    }

    #homeSlider .slide-custom .slide-cta a {
        display: block;
        padding: 15px 8px;
        color: #7fc7f9;
    }

    #homeSlider .slide-custom a.btn {
        margin: 1.4em auto 0;
    }
}