/* ==========================================================================
   Fosters Legal 500 Badge
   Floating accreditation badge pinned to the right edge of the screen.
   Collapsed = narrow vertical tab; expanded = wider card.
   William's chat button lives bottom-right, so this sits from the top to
   keep the two clear of each other.
   ========================================================================== */

#fosters-l500-badge {
    position: fixed;
    top: 180px;
    right: 0;
    z-index: 9990; /* below William's chat button, but they don't overlap anyway */

    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    width: 75px;
    padding: 25px 8px;

    background-image: linear-gradient(47deg, #173361 14%, #050f29 86%);
    border-radius: 20px 0 0 20px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.09);

    color: #ffffff;
    text-align: center;

    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

/* --- Expanded state --------------------------------------------------- */
#fosters-l500-badge[data-state="expanded"] {
    width: 256px;
    padding: 44px 24px 26px;
    /* stays centered (align-items / text-align inherited from base) */
}

/* --- Shared elements -------------------------------------------------- */
.fosters-l500__star {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 9px rgba(231, 178, 53, 0.33));
}

/* Override the SVG's inline fill (#E7B235) — CSS beats presentation attrs */
.fosters-l500__star path {
    fill: #E1B569;
}

.fosters-l500__logo {
    width: 42px;
    height: auto;
    margin-top: 14px;
    flex-shrink: 0;
}

.fosters-l500__divider {
    width: 36px;
    height: 2px;
    margin: 9.2px 0;
    background: #ffffff;
    flex-shrink: 0;
}

.fosters-l500__rank {
    margin: 0;
    text-align: center;

    /* Collapsed state = Rubik "Eyebrow" */
    font-family: "Rubik", Arial, sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.96px;
    color: #ffffff;

    /* Animate the font-size / spacing change between the two states */
    transition: font-size 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                letter-spacing 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Expanded state = Playfair Display headline */
#fosters-l500-badge[data-state="expanded"] .fosters-l500__rank {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: 0.66px;
}

/* --- Expand-only elements (hidden while collapsed) -------------------- */
.fosters-l500__desc,
.fosters-l500__more {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.fosters-l500__close {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.fosters-l500__desc {
    margin: 0;
    max-height: 0;
    overflow: hidden;
    font-family: "Rubik", Arial, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.14px;
    color: #ffffff;
}

.fosters-l500__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    font-family: "Rubik", Arial, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: #4fbebe;
    text-decoration: none;
}

.fosters-l500__more:hover {
    text-decoration: underline;
}

.fosters-l500__arrow {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
}

.fosters-l500__close {
    position: absolute;
    top: 12px;
    left: 16px;
    padding: 0;
    background: none;
    border: none;
    color: #4fbebe;
    font-family: "Rubik", Arial, sans-serif;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

#fosters-l500-badge[data-state="expanded"] .fosters-l500__desc,
#fosters-l500-badge[data-state="expanded"] .fosters-l500__more {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0.3s; /* body eases in AFTER the card has widened */
}

/* Margins only apply once expanded — kept off the collapsed state so an
   invisible (opacity:0, max-height:0) desc/more can't still push a gap open. */
#fosters-l500-badge[data-state="expanded"] .fosters-l500__desc {
    margin-top: 14px;
}

#fosters-l500-badge[data-state="expanded"] .fosters-l500__more {
    margin-top: 16px;
}

#fosters-l500-badge[data-state="expanded"] .fosters-l500__close {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.3s;
}

#fosters-l500-badge[data-state="expanded"] .fosters-l500__desc,
#fosters-l500-badge[data-state="expanded"] .fosters-l500__more {
    max-height: 200px;
}

/* --- Collapse-only elements (the expand chevron / clickable tab) ------ */
.fosters-l500__expand {
    margin-top: 20px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 0;
    /* Pull it back toward true centre — the container padding otherwise
       makes this narrow chevron read as off-centre. Tweak this value. */
    transform: translateX(-2px) !important;
}

.fosters-l500__chevron {
    width: auto;
    height: 12px; /* keeps the 6:11 aspect of the new chevron */
}

/* The tablet/mobile bar is hidden on desktop (shown in the <=1024px block) */
.fosters-l500-bar {
    display: none;
}

/* Whole collapsed tab is clickable to expand */
#fosters-l500-badge[data-state="collapsed"] {
    cursor: pointer;
}

#fosters-l500-badge[data-state="expanded"] .fosters-l500__expand {
    display: none;
}

/* --- Tablet & mobile: full-width bar docked under the sticky header -------
   The right-edge tab obstructs content on small screens, so at <=1024px the
   desktop tab is hidden and a dedicated bar (#fosters-l500-bar) is shown flush
   under .site-header__main. The whole bar is a link, and it slides up behind
   the header on scroll-down / returns on scroll-up (JS toggles .is-tucked and
   sets the header height / z-index vars). */
@media (max-width: 1024px) {
    /* Hide the desktop right-edge tab */
    #fosters-l500-badge {
        display: none;
    }

    /* Show the bar */
    .fosters-l500-bar {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        box-sizing: border-box;

        position: fixed;
        top: var(--fosters-l500-header-h, 60px);
        left: 0;
        right: 0;
        width: 100%;
        padding: 12px 40px; /* tablet; mobile override below */

        background-image: linear-gradient(9.5deg, #173361 14%, #050f29 86%);
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.09);
        text-decoration: none;

        z-index: var(--fosters-l500-z, 90); /* sit behind the header */
        transform: translateY(0);
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Slid up behind the header while scrolling down */
    .fosters-l500-bar.is-tucked {
        transform: translateY(calc(-100% - var(--fosters-l500-header-h, 60px)));
    }

    /* Left cluster: star · [logo / Ranked #1] · gold divider */
    .fosters-l500-bar__left {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
    }

    .fosters-l500-bar .fosters-l500__star {
        display: block;
        width: 26px;
        height: 26px;
        margin: 0;
        flex-shrink: 0;
    }

    .fosters-l500-bar__stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .fosters-l500-bar .fosters-l500__logo {
        display: block;
        width: 42px;
        height: auto;
        margin: 0;
    }

    .fosters-l500-bar__rank {
        margin: 0;
        font-family: "Playfair Display", Georgia, serif;
        font-weight: 600;
        font-size: 15px;
        line-height: 1;
        letter-spacing: 0.3px;
        color: #ffffff;
        white-space: nowrap;
    }

    /* Gold vertical divider */
    .fosters-l500-bar__divider {
        align-self: stretch;
        width: 2px;
        background: #e7b235;
        flex-shrink: 0;
    }

    /* Middle: two-line ranking blurb */
    .fosters-l500-bar__desc {
        font-family: "Rubik", Arial, sans-serif;
        font-weight: 300;
        font-size: 11px;
        line-height: 1.32;
        letter-spacing: 0.11px;
        color: #ffffff;
        width: 120px;
        flex-shrink: 0;
    }

    /* Right: Read more link (visual only — the whole bar is the anchor).
       margin-left:auto pushes it to the far right; the rest stays left-aligned. */
    .fosters-l500-bar__more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        flex-shrink: 0;
        font-family: "Rubik", Arial, sans-serif;
        font-weight: 500;
        font-size: 13px;
        line-height: 1;
        color: #4fbebe;
        white-space: nowrap;
    }

    .fosters-l500-bar .fosters-l500__arrow {
        width: 9px;
        height: 9px;
        flex-shrink: 0;
    }
}

/* Mobile: 20px side padding (tablet uses 40px above) */
@media (max-width: 767px) {
    .fosters-l500-bar {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Very small phones: drop the middle blurb so star + rank + read-more still fit */
@media (max-width: 400px) {
    .fosters-l500-bar__desc {
        display: none;
    }
}

/* When the mobile/tablet bar is visible, push the page down so it doesn't
   cover the banner. header.js owns the body's base padding-top (= header
   height, ~69px, inline); the class below overrides it to 120px while the bar
   is open and cleanly falls back to header.js's value when it tucks away.
   The transition is only enabled (via .fosters-l500-anim, added after load)
   so header.js's initial padding sync doesn't animate on page load. */
body.fosters-l500-anim {
    transition: padding-top 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1024px) {
    body.fosters-l500-bar-open {
        padding-top: 110px !important;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    body.fosters-l500-anim,
    #fosters-l500-badge,
    .fosters-l500-bar,
    .fosters-l500__rank,
    .fosters-l500__desc,
    .fosters-l500__more,
    .fosters-l500__close {
        transition: none;
    }
}