/*
 * WordPress adaptations for the referral portal template.
 * referral-portal.css is the Webflow page CSS (trimmed against the theme's
 * webflow.css); everything WP- or theme-specific lives here.
 */

html {
    --gl-header-height: 131px;
    --gl-header-margin-top: 131px;
}

/* The theme's .navbar is position:fixed and steps down with the viewport
   (webflow.css: 100px, 60px at 991, 45px at 479), so the offset the hero needs
   to clear it has to step down too. Without these the hero kept the desktop
   131px on phones, leaving ~86px of dead space above the H1.

   The offset is not strictly the header height: the 479 value is 65px against
   a 45px navbar, eyeballed to give the H1 some breathing room rather than
   sitting flush under the header. --gl-header-height stays the real height. */
@media (max-width: 991px) {
    html {
        --gl-header-height: 60px;
        --gl-header-margin-top: 60px;
    }
}

@media (max-width: 479px) {
    html {
        --gl-header-height: 45px;
        --gl-header-margin-top: 65px;
    }
}

.ecp-referral-portal .standard-inner-wrapper {
    max-width: 100%;
    padding: 0;
}

.ecp-referral-portal .entry > section {
    max-width: 100%;
    overflow-x: hidden;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.ecp-referral-portal .breadcrumbs-custom {
    display: none;
}

.jm-hero {
    margin-top: var(--gl-header-margin-top);
    min-height: 600px;
}

.ecp-referral-portal .image-9,
.ecp-referral-portal .img {
    height: 100%;
}

.ecp-referral-portal .entry .w-button,
.ecp-referral-portal .w-button {
    white-space: normal;
    word-break: normal !important;
}

.btn-div.left {
    gap: 10px;
}

.ecp-referral-portal .access-div h4 {
    color: #fff;
}

/* Stack multiple liaison cards with breathing room */
.inner-card + .inner-card {
    margin-top: 15px;
}

/*
 * The referral-method and tools rows hold a variable number of cards (each
 * one is conditional on practice data), so they're grids: auto-fit collapses
 * unused tracks and whatever cards render stretch to fill the row. This
 * replaces the export's fixed 24%/32%/49% card widths and space-between
 * flex layout, which left holes when cards were missing.
 */
.service-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.service-row .service-link-2,
.service-row .service-link-2.sp,
.service-row .service-link-2._32 {
    width: auto;
    margin-bottom: 0;
}

/*
 * The Webflow export's interactions JS (hover states on the referral method
 * and tools cards) is not shipped; these rules replicate the intended
 * states in CSS instead. Arrows render black, cards on the blue section
 * render white, and hover shifts the card to brand blue.
 */

.right-arrow {
    filter: brightness(0);
    transition: transform .25s ease, filter .3s ease;
}

/*
 * The export blows the card PNG icons out to white (brightness 500%), which
 * is illegible on the yellow squares, and the hero quick-access icons are
 * white-drawn PNGs on the same light squares. Recolor both with filter
 * chains: filters can't read CSS variables, so each chain below is a solved
 * approximation of a fixed hex (recompute if the brand colors change).
 */

/* --text-black (#363f45) */
.small-yellow-service-square .icon-blue {
    filter: brightness(.2) saturate(100%) invert(23%) sepia(26%) saturate(773%) hue-rotate(161deg) brightness(54%) contrast(66%);
}

/* brand green (#54bed1) */
.quick-div .icon-div img {
    filter: brightness(0) saturate(100%) invert(41%) sepia(58%) saturate(553%) hue-rotate(154deg) brightness(126%) contrast(64%);
}

.top-service-div {
    transition: background-color .3s ease, color .3s ease;
}

.service-link-2:hover .right-arrow {
    transform: translateX(4px);
}

.service-row .service-link-2:not(._32):not(.sp):hover {
    background-color: var(--background-blue);
}

.service-link-2.sp:hover .top-service-div.bg-blue {
    background-color: var(--color-5);
}

.service-link-2._32 {
    background-color: #fff;
}

.service-link-2._32:hover .top-service-div {
    background-color: var(--main-blue);
    color: #fff;
}

.service-link-2._32:hover .top-service-div .blue {
    color: #fff;
}

.service-link-2._32:hover .right-arrow {
    filter: brightness(0) invert(1);
}

@media (max-width: 991px) {
    .jm-hero {
        justify-content: flex-end;
    }
}

@media (max-width: 767px) {
    .jm-hero {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}


/* ---------------------------------------------------------------------------
   1.0.1 mobile revisions.

   These live here rather than in referral-portal.css so that file stays a
   straight trim of the Webflow export and can still be diffed against
   webflow/css/. This file is enqueued as a dependent of it, so equal
   specificity wins.
   --------------------------------------------------------------------------- */

@media (max-width: 991px) {
    /* Was .8em, which left the card text smaller than everything around it.
       referral-portal.css already ships the 40px 10px 20px 40px padding at
       this breakpoint, so the size is the only change needed. */
    .top-service-div {
        font-size: 1em;
    }

    /* 30px at full width; the hero accent reads as heavy once the hero
       stacks. Colour is var(--main-blue) at every breakpoint already. */
    .hero-little-square {
        width: 22px;
        height: 22px;
    }

    /* Phone numbers must never break mid-number. Anchored to "tel:" rather
       than a substring match so a link to a page like /telehealth/ or
       /hotel-directions/ isn't caught by it. */
    a[href^="tel:"] {
        white-space: nowrap;
    }
}

@media (max-width: 767px) {
    /* referral-portal.css centres the grid items once the grid collapses to a
       single column; the checkmark rows read better flush left. Scoped to the
       section because .grid on its own is a generic Webflow class. */
    .values-section .grid {
        justify-items: start;
    }

    /* Hero subhead only. The base h2 is 2em, which wraps "Partnering with you
       to" onto two lines before the <br> once the hero stacks, so it comes
       down to 1.5em and centres. Scoped to .cataract-options-div because every
       other section on the page uses a bare h2 at full size. */
    .cataract-options-div h2 {
        text-align: left;
        font-size: 1.5em;
    }
}