/**
 * Provider bio tabs — /staff/<slug>/
 *
 * Built by includes/gsd/gsd-provider-tabs.php on the same Webflow tab component
 * the blockified service pages use, so nearly all of the look already comes from
 * css/webflow.css (.tabs-menu.hair, .tab-link.dark.lum). This file only covers
 * what that export cannot: a strip that is not exactly five tabs wide, a keyboard
 * focus ring, and the Blog tab's card grid.
 *
 * Enqueued on `is_singular('provider')` after glacial-style, so it wins on source
 * order against css/webflow.css without needing extra specificity.
 */

.gsd-provider-tabs {
    margin-top: 2em;
}

/*
 * The export hard-codes .tab-link.dark.lum at width:20% — its strip had exactly
 * five tabs. Equal flexible columns work for any count. Desktop only: at <=767px
 * webflow.css already stacks the strip and sets width:100%.
 */
/*
 * The rule under the strip: navy here, not the export's gold. Scoped to
 * .gsd-provider-tabs on purpose — .tabs-menu.face / .tabs-menu.hair are shared
 * with the blockified service pages (glacial/service-tabs), which keep the gold.
 */
.gsd-provider-tabs .tabs-menu {
    border-bottom-color: #041444;
}

@media (min-width: 768px) {
    .gsd-provider-tabs .tabs-menu .tab-link {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}

/*
 * Equal-height tabs. .tabs-menu sets align-items:center, so a label that wraps to
 * two lines ("My Skin Care Regimen") grows its own tab and leaves the rest
 * floating mid-strip with gaps above and below. Stretch them, then centre each
 * label inside its own tab instead.
 */
.gsd-provider-tabs .tabs-menu {
    align-items: stretch;
}

.gsd-provider-tabs .tab-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tab colours ------------------------------------------------------------ */

/*
 * Navy tabs, brand gold for the rolled-over and the selected one (teal until
 * 2026-09-15). The export's .tab-link.dark.lum is a
 * transparent tab with teal text on a gold active state, which reads as unstyled
 * here.
 *
 * ⚠ SPECIFICITY: these selectors repeat `.dark.lum` deliberately. webflow.css
 * styles the active and hover states at `.tab-link.dark.lum.w--current` and
 * `.tab-link.dark.lum:hover` — (0,4,0) — so a tidier
 * `.gsd-provider-tabs .tab-link.w--current` (0,3,0) LOSES and the tab silently
 * stays gold, whatever the source order. Loading later only settles ties.
 *
 * text-decoration: style.css's `.entry a` underlines EVERY link inside the
 * inner-page content column, and the tab strip renders inside it — so the
 * underline has to be turned off explicitly, not just inherited away from
 * components.css's .w-tab-link.
 *
 * Contrast (WCAG AA, normal text): white on navy #002d72 is 13:1 and white on
 * the active teal #4b7881 is 4.9:1 — both pass. The export's gold #e1a300 could
 * only ever carry NAVY text (5.8:1), never white (2.2:1), if reinstated.
 */
.gsd-provider-tabs .tab-link.dark.lum,
.gsd-provider-tabs .tab-link.dark.lum:visited {
    background-color: #031444;
    color: var(--color, #fff);
    text-decoration: none;
}

/*
 * A hairline between abutting navy tabs, so they are not one navy bar. The strip
 * is a row on desktop and a column at <=767px (webflow.css), so the edge the
 * separator sits on has to move with it.
 */
.gsd-provider-tabs .tab-link.dark.lum:not(:last-child) {
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.18);
}

@media (max-width: 767px) {
    .gsd-provider-tabs .tab-link.dark.lum:not(:last-child) {
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
    }
}

/*
 * 2026-09-15 (client: "change the teal rollover color to gold on the provider
 * pages"): the rolled-over AND the selected tab are brand gold with NAVY text.
 * Gold can only ever carry navy (5.8:1); white on it is 2.2:1 and fails AA — see
 * the contrast note above. The teal (--_luminous---color-2) is gone from the strip.
 */
.gsd-provider-tabs .tab-link.dark.lum:hover,
.gsd-provider-tabs .tab-link.dark.lum:focus {
    background-color: var(--color-6, #d29f13);
    color: var(--color-2, #001543);
    text-decoration: none;
}

.gsd-provider-tabs .tab-link.dark.lum.w--current,
.gsd-provider-tabs .tab-link.dark.lum.w--current:hover,
.gsd-provider-tabs .tab-link.dark.lum.w--current:focus {
    background-color: var(--color-6, #d29f13);
    border-bottom-color: var(--color-6, #d29f13);
    color: var(--color-2, #001543);
    box-shadow: none;
}

/*
 * components.css zeroes the focus outline on every .w-tab-link. These tabs are
 * keyboard-operable (Webflow binds arrow/Home/End), so the ring has to come back
 * or the focused tab is invisible to anyone not using a mouse. White reads on
 * the navy; on the gold hover/selected state the ring is navy (SC 1.4.11).
 */
.gsd-provider-tabs .tab-link.dark.lum:focus-visible {
    outline: 3px solid var(--color, #fff);
    outline-offset: -3px;
}

.gsd-provider-tabs .tab-link.dark.lum:hover:focus-visible,
.gsd-provider-tabs .tab-link.dark.lum.w--current:focus-visible {
    outline-color: var(--color-2, #001543);
}

/* Pane content ------------------------------------------------------------ */

/*
 * In-pane heading scale. The migrated copy uses an h2 per question / sub-topic,
 * and the site's base h2 is 2.5em — page-title scale, which gives each Q&A
 * question three lines of 45px type inside a tab. Scaled down visually while the
 * heading LEVEL is left alone, so the document outline (h1 name -> h2 sections)
 * stays correct.
 */
.gsd-provider-tabs .w-tab-pane h2 {
    font-size: 1.6em;
    margin-bottom: 12px;
}

.gsd-provider-tabs .w-tab-pane h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.gsd-provider-tabs .w-tab-pane h2:not(:first-child),
.gsd-provider-tabs .w-tab-pane h3:not(:first-child) {
    margin-top: 1.5em;
}

/* Blog tab -------------------------------------------------------------- */

/*
 * .gl-posts-grid / .gl-post-card come from blocks/assets/blocks-frontend.css,
 * which is enqueued on every front-end view (enqueue_block_assets), so the cards
 * are already styled and match glacial/latest-posts. Only the thumbnail-less
 * case needs handling — the block never had to, because its callers all have
 * featured images.
 */
.gsd-provider-tabs__thumb-placeholder {
    display: block;
    width: 100%;
    height: 200px;
    background: var(--_luminous---color-2, #4b7881);
    opacity: 0.15;
}

.gsd-provider-tabs__posts .gl-post-card h5 {
    margin: 0;
}

/*
 * ⚠ style.css:174 underlines `.entry a` (0,2,0) and ties with blocks-frontend's
 * `.gl-posts-grid .gl-post-card { text-decoration: none }` — whichever loads
 * later wins, and on a Page (`[gsd_provider_media]` on /paul-rose-md-jd/, inside
 * .standard-inner-wrapper.entry) that is style.css, so every card title came out
 * underlined. (0,3,1) settles it wherever the grid lands.
 */
.entry .gsd-provider-tabs__posts a.gl-post-card {
    text-decoration: none;
}

/*
 * "Featuring" pill under the title, on Blog AND Media cards (2026-10-12) — one
 * per provider the post is TAGGED with, unlinked because the card is the link.
 * Its white-card colours are shared with the homepage press carousel in
 * blocks/assets/blocks-frontend.css; only the spacing is here.
 *
 * ⚠ `.gl-posts-grid .gl-post-card img` (0,2,1) makes every card image 200px
 * tall and TIES with style.css's `.gsd-post-featured__avatar img.gsd-post-featured__photo`,
 * so load order would decide whether the headshot fills its 36px box or spills
 * out of it. (0,3,1) settles it.
 */
.gsd-provider-tabs__posts .gsd-card-featured {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.gsd-provider-tabs__posts .gsd-post-featured__avatar img.gsd-post-featured__photo {
    width: 100%;
    height: 100%;
}

/*
 * The post's category above the date (2026-10-12) — Yoast's Primary category,
 * else the first the post header shows (gsd_post_card_category()). Same face as
 * the press carousel's outlet line (blocks-frontend.css, .gsd-press__outlet).
 * The date's own top margin moves up onto the eyebrow.
 */
.gsd-provider-tabs__posts .gsd-card-cat {
    display: block;
    margin: 0.85em 0 0;
    font-family: trajan-sans-pro, sans-serif;
    font-size: 0.75em;
    line-height: 1.3;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #94700d; /* 4.6:1 on white */
}

.gsd-provider-tabs__posts .gsd-card-cat + .gl-post-date {
    margin-top: 0.3em;
}

/* Bio page intro (above the strip) --------------------------------------- */

.gsd-provider-intro {
    margin-bottom: 2.5em;
}

/*
 * The eyebrow borrows the export's gold kicker class but is a <p>, not the <h3>
 * the Webflow blocks use: it sits directly above the block's own h2, and an h3
 * there would put the page's heading order at h1 -> h3 -> h2. These four
 * declarations are what an <h3> would have contributed (webflow.css `h3`);
 * .h3-gold still supplies the colour, size and margins.
 */
.gsd-provider-intro__eyebrow {
    margin-top: 0;
    font-family: trajan-sans-pro, sans-serif;
    font-weight: 400;
    line-height: 1.2em;
    color: #94700d
}

.gsd-provider-intro__heading {
    margin-top: 0;
    color: #001543;
}

.gsd-provider-intro__body > :last-child {
    margin-bottom: 0;
}

/*
 * Intro bullets — the site's standard list marker.
 *
 * The blurb copy is a <ul> in the ACF wysiwyg, so the editor writes it with
 * TinyMCE's ordinary list button and gets the branded marker for free; nothing
 * about the field or the template knows this is a list.
 *
 * The default marker is the navy circled arrow every other bulleted list on the
 * site uses — this MIRRORS `.gl-list--arrow li::before` in
 * blocks/assets/blocks-frontend.css (same SVG, same geometry, same
 * `--color-2` fill); keep the two in step. It is a MASK rather than an <img>,
 * so the colour is ours: swap `background-color` to var(--color-6) for gold.
 * The path differs from the block stylesheet's only because this file sits one
 * directory deeper than `images/`.
 *
 * ⚠ The marker is decorative. The blurb reads identically without it, so there
 * is deliberately no alt-text equivalent — an ::before carries none, and a real
 * <img> per bullet would put the icon into a screen reader 5x per provider page.
 *
 * Two opt-in variants remain, via
 * `add_filter( 'gsd_provider_intro_bullet_style', fn() => 'logo' );` —
 * 'logo' is the gold GSD roundel this shipped with (the client asked for the
 * standard bullet instead, 2026-09-15) and 'check' a drawn gold check. See
 * gsd_provider_intro_html().
 */
.gsd-provider-intro__body ul {
    margin: 0 0 1em;
    padding-left: 0;
    list-style: none;
}

.gsd-provider-intro__body ul li {
    position: relative;
    margin-bottom: .85em;
    padding-left: 1.75em;
    line-height: 1.6em;
}

.gsd-provider-intro__body ul li:last-child {
    margin-bottom: 0;
}

.gsd-provider-intro__body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    /*
     * Centres the marker on the first LINE of the bullet, not on the bullet
     * box: these run to two and three lines at narrow widths, and a marker
     * aligned to the box floats to the middle of the paragraph. A 1.1em mark
     * on a 1.6em line box centres at (1.6 - 1.1) / 2.
     */
    top: .25em;
    width: 1.1em;
    height: 1.1em;
    background-color: var(--color-2, #001543);
    -webkit-mask: url("../images/locations/icons8-right-arrow_2.svg") no-repeat center / contain;
    mask: url("../images/locations/icons8-right-arrow_2.svg") no-repeat center / contain;
}

/*
 * The roundel variant — the gold GSD icon, the 130px Webflow variant rather
 * than the 4500px original, which is ~6x the rendered size and so still crisp
 * on a 3x display for 1.6 KB. Painted as a background (not a mask), so the
 * mask has to be cleared or the arrow would knock a hole in it.
 */
.gsd-provider-intro--logo .gsd-provider-intro__body ul li {
    padding-left: 2.15em;
}

.gsd-provider-intro--logo .gsd-provider-intro__body ul li::before {
    top: .2em;
    width: 1.4em;
    height: 1.4em;
    background: url(../images/gsd-icon-p-130x130q80.png) 50% 50% / contain no-repeat;
    -webkit-mask: none;
    mask: none;
}

/*
 * The check variant: drawn rather than fetched, so it stays sharp at any size.
 * The SVG is inline-encoded (a two-path file is smaller as a data URI than as
 * an HTTP round trip) and the `#` in the fill colour has to stay
 * percent-encoded or the URL terminates at the fragment.
 */
.gsd-provider-intro--check .gsd-provider-intro__body ul li::before {
    top: .1em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23d29f13'/%3E%3Cpath d='M6.8 12.3l3.4 3.4 7-7.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / contain no-repeat;
    -webkit-mask: none;
    mask: none;
}

@media (max-width: 767px) {
    .gsd-provider-intro--logo .gsd-provider-intro__body ul li {
        padding-left: 1.85em;
    }

    .gsd-provider-intro--logo .gsd-provider-intro__body ul li::before {
        width: 1.25em;
        height: 1.25em;
    }
}

/* Empty Media / Blog tabs ------------------------------------------------ */

/*
 * A physician with no tagged press and no blog categories still gets both tabs
 * (client direction), so each empty one carries a line of copy and a button out
 * to the site-wide listing rather than rendering as a dead pane.
 *
 * ⚠ The anchor rule is `.gsd-provider-tabs__empty a.gsd-provider-tabs__btn`
 * (0,2,1) for the same reason gsd-provider-booking.css spells its selectors out:
 * style.css:174 styles `.entry a` at 0,2,0 and beats a bare class, which would
 * paint the label navy-on-navy. Don't tidy this down.
 */
.gsd-provider-tabs__empty {
    margin: 0;
}

.gsd-provider-tabs__empty p {
    margin-top: 0;
}

.gsd-provider-tabs__empty a.gsd-provider-tabs__btn {
    display: inline-block;
    padding: 15px 30px;
    border: 2px solid var(--color-2, #001543);
    background-color: transparent;
    color: var(--color-2, #001543);
    font-size: 18px;
    font-weight: 500;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}

.gsd-provider-tabs__empty a.gsd-provider-tabs__btn:hover,
.gsd-provider-tabs__empty a.gsd-provider-tabs__btn:focus {
    border-color: var(--color-6, #d29f13);
    background-color: var(--color-6, #d29f13);
    color: var(--color-2, #001543);
    text-decoration: none;
}

.gsd-provider-tabs__empty a.gsd-provider-tabs__btn:focus-visible {
    outline: 2px solid var(--color-2, #001543);
    outline-offset: 2px;
}

/*
 * Read All under the Blog tab's grid (2026-10-08) — the empty state's button,
 * centred below the cards.
 */
.gsd-provider-tabs__more {
    margin-top: 1.5em;
    text-align: center;
}

/*
 * A hand-written Media list and the auto grid of tagged press share one pane
 * (see gsd_provider_media_tab_html()), so the two need separating when both are
 * present.
 */
.gsd-provider-tabs__media-auto:not(:first-child) {
    margin-top: 1.5em;
}

@media (max-width: 767px) {
    .gsd-provider-tabs__empty a.gsd-provider-tabs__btn {
        display: block;
        padding: 14px 20px;
        font-size: 16px;
    }
}

/*
 * Tap-to-call phone under each office in the provider sidebar's Locations list
 * (2026-10-08). (0,2,1) because `.entry a` (0,2,0) would otherwise restyle it.
 */
.single-cpt-wrapper a.gsd-loc-phone {
    display: block;
    margin: 6px 0 14px;
    text-align: center;
    color: var(--color-2, #001543);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.single-cpt-wrapper a.gsd-loc-phone:hover,
.single-cpt-wrapper a.gsd-loc-phone:focus-visible {
    color: var(--color-3, #3f4f72);
}