/**
 * Hero Block Styles - Child Theme Override
 *
 * Extends parent theme hero styles with:
 * - Optional color overlay toggle (default: on)
 * - Automatic text color based on overlay setting:
 *   - Overlay ON: light text + light buttons (for dark backgrounds)
 *   - Overlay OFF: dark text + dark buttons (for light backgrounds)
 * - Users can override text color via Gutenberg's native text color picker
 * - Default solid Anika Blue background when no image and no editor background
 *
 * @package TMW_Core_Child
 * @version 1.4.0
 */

/* ========================================
 * BASE HERO STYLES (from parent theme)
 * ========================================
 */

/* Hero Section - Light and airy aesthetic with strategic bold elements */
.hero {
    position: relative;
    overflow: clip;
}

/* Responsive image wrapper - replaces background-image approach */
.hero__image-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Optional overlay for gradient/color effects on hero background */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/*
 * Blue hero gradient overlay (default) - dark background with gradient.
 * Page-context aware: interior pages get the interior gradient (default
 * below); the homepage overrides to the homepage gradient via body.home /
 * body.front-page. No editor choice or PHP branching required.
 */
.hero.has-background-image.has-overlay--gradient .hero__overlay {
    background: var(--wp--preset--gradient--gradient-hero-overlay-interior);
}

.home .hero.has-background-image.has-overlay--gradient .hero__overlay,
.front-page .hero.has-background-image.has-overlay--gradient .hero__overlay {
    background: var(--wp--preset--gradient--gradient-hero-overlay);
}

/* Dark blue overlay - flat 90% dark blue wash across the full image.
   Not page-context aware (unlike --gradient); the same treatment applies
   everywhere. hero.php derives light text for any non-'light' overlay style. */
.hero.has-background-image.has-overlay--dark-blue .hero__overlay {
    background: var(--wp--preset--gradient--gradient-overlay-2);
}

/* Light overlay - light gray to white gradient */
.hero.has-background-image.has-overlay--light .hero__overlay {
    background: var(--wp--preset--gradient--gradient-grey-white);
    opacity: 0.85;
}

/* ========================================
 * DEFAULT BACKGROUND (NO IMAGE SELECTED)
 * ========================================
 * When no background image is chosen and the editor has not picked a
 * background colour/gradient in Gutenberg, the hero falls back to solid
 * Anika Blue. hero.php adds .has-default-bg and pairs it with .has-dark-bg
 * so text and buttons render light.
 *
 * :not(.has-background) keeps an editor-chosen colour/gradient winning — that
 * class is only present when Gutenberg has applied one.
 * ========================================
 */
.hero.has-default-bg:not(.has-background) {
    background-color: var(--color-primary);
}

/* Ensure content stays above image and overlay */
.hero>.container {
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    margin-bottom: var(--space-md);
    line-height: 1.1em;
    text-wrap: balance;
    max-width: 800px;
}

.hero.hero-content-full .hero-content .hero-description {
    max-width: 800px;
}

.hero-content .small,
.hero-content p > .small {
    line-height: 1em;
}

/* Hero CTAs */
.hero-ctas {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

/* ========================================
 * CHILD THEME: BACKGROUND IMAGE STYLING
 * ========================================
 * Text and button colors are derived from overlay setting:
 * - Overlay ON (.has-overlay): light text + light buttons
 * - Overlay OFF (no .has-overlay): dark text + standard buttons
 * Users can override with Gutenberg's native text color picker.
 * ========================================
 */

/* Light text style on background images (default for dark backgrounds) */
.hero.has-background-image.hero-text-light h1,
.hero.has-background-image.hero-text-light .hero-description,
.hero.has-background-image.hero-text-light .hero-description p {
    color: var(--color-text-light);
}

/* ========================================
 * HOMEPAGE HERO LAYOUT VARIATIONS
 * ========================================
 */

/* Content Left - responsive max-width on left side */
.hero.hero-content-left .container {
    display: flex;
    justify-content: flex-start;
}

.hero.hero-content-left .hero-content {
    max-width: 700px;
    width: 45vw;
    flex: 0 1 auto;
}

.hero.hero-content-left .hero-content .hero-description strong {
    font-family: var(--font-family-heading);
    font-size: 115%;
}

/* XL Breakpoint: Scale hero content width with wider container */

/* body.has-xl-breakpoint .hero.hero-content-left .hero-content {
    max-width: 700px;
} */

.home .hero.hero-content-left {
    min-height: clamp(600px, 80vh, 1000px);
    align-content: center;
}

/* Hero description - body copy size (not the larger hero-subtitle preset,
   which read as noticeably bigger than the rest of the page's paragraph
   text). font-size is intentionally omitted here — --font-size-body is
   already the default for paragraphs. */
.hero .hero-description {
    line-height: var(--line-height-body);
    max-width: var(--max-width-content-xl);
}

.home .hero .hero-description {
    margin-bottom: var(--space-xl);
}

.hero .hero-description blockquote {
    width: 100%;
    max-width: 100%;
}

/* Tablet: reduce max-width to prevent overlap */
@media (width <=1350px) {
    .hero.hero-content-left .hero-content .hero-description {
        max-width: 600px;
    }
}

@media (width <=1150px) {
    .hero.hero-content-left .hero-content .hero-description {
        width: 100%;
        max-width: 550px;
    }
}

/* Content Full - centered full-width content */
.hero.hero-content-full .hero-content {
    text-align: center;
    max-width: var(--max-width-content-xl);
    margin-left: auto;
    margin-right: auto;
}

/* The base rules constrain the title (max-width: 700px) and description
   (max-width: 600px) for left-aligned heroes but leave their horizontal margins
   at 0. In the centered full-width variant those narrower boxes then hug the
   left edge of the centered .hero-content, so the text read off-center even
   though text-align was already center. Auto margins center the boxes
   themselves within .hero-content. */
.hero.hero-content-full .hero-content h1 {
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

.hero.hero-content-full .hero-content .hero-description {
    margin-top: var(--space-md);
    margin-left: auto;
    margin-right: auto;
}

.hero.hero-content-full .hero-ctas {
    justify-content: center;
}

/* Fullwidth Image - displays below centered content when layout is full */
.hero-fullwidth-image {
    margin-top: var(--space-2xl);
    width: 100%;
}

.hero-fullwidth-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-card);
}

/* ========================================
 * SIDE-BY-SIDE LAYOUT WITH SUBJECT IMAGE
 * ========================================
 */

.hero-wrapper {
    align-items: center;
    min-height: fit-content;
}

.hero-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image img {
    width: auto;
    height: auto;
    max-height: 50vh;
}

.hero-image img[src$=".jpg"],
.hero-image img[src$=".webp"],
.hero-image img[src$=".png"] {
    border-radius: var(--radius-card);
}

.hero-image img[src$=".svg"] {
    max-height: 43vh;
}

/* Content left layout - image on right */
.hero.hero-content-left .hero-wrapper .hero-content {
    max-width: 100%;
}

/* ========================================
 * SIDE-BY-SIDE LAYOUT WITH DATA TABLE
 *
 * Alternative to the subject image in the 'left' layout, selected via the
 * hero_side_content field. Shares the .hero-wrapper grid, so only the card and
 * table itself need styling.
 *
 * The card carries has-nested-bg so the dark-background adaptation system keeps
 * its text dark against the hero's blue gradient - see the child theme's
 * Dark Background Detection guidance.
 * ========================================
 */

.hero-table-col,
.hero-checklist-col {
    display: flex;
    align-items: center;

    /* Separation from the copy beyond the grid's own 20px gutter, which reads as
     * cramped between a text column and a solid card. Padding on the column
     * rather than a wrapper column-gap, so the 12-column grid keeps its
     * standard gutter and only this variant is affected. Reset at the mobile
     * breakpoint below, where the two stack and vertical margin takes over. */
    padding-left: var(--space-xl);
}

.hero-table,
.hero-checklist {
    width: 100%;
    padding: var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-card);
}

/* Checklist card: a bit more breathing room than the shared --space-md default
   above, now that its padding is symmetric on all sides. Scoped to
   .hero-checklist only so the table variant (already tuned separately) is
   unaffected. */
.hero-checklist {
    padding: var(--space-lg);
}

.hero-table {
    margin-block-start: var(--space-md) !important;
}

.hero-table > table,
.hero-table .hero-table__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.hero-table,
.hero-table .hero-table__table {
    border: none !important;
}

/* Sentence case, not the uppercase treatment .eyebrow-text applies - the
 * previous hand-built version used that class and rendered ALL CAPS.
 *
 * Scoped through .hero-table for specificity: the hero block's stylesheet is
 * enqueued well before frontend-child.css (measured: index 8 vs 35), so on any
 * specificity tie the later sheet wins. Everything here is deliberately at
 * least (0,2,0). */
.hero-table p.hero-table__title,
.hero-checklist p.hero-checklist__title {
    margin: 0 0 var(--space-md);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h5);
    line-height: var(--line-height-heading);
    color: var(--color-tertiary) !important;
    text-transform: none;
    font-weight: var(--font-weight-medium);
}

/* Border removed per design. The global table border in frontend-child.css has
 * since been dropped at source, so these resets are defensive - kept so the
 * hero table stays border-free if a global table border is ever reintroduced.
 *
 * Longhands, not `border: none` - the minifier collapses the shorthand to
 * `border-width: medium`, which leaves border-style intact and the line still
 * renders. */
.hero-table .hero-table__table {
    width: 100%;
    margin-top: var(--space-sm);
    border-style: solid;
    border-width: 1px;
    border-color: var(--color-border);
    border-radius: calc(var(--radius-button) / 1.5);
    border-collapse: collapse;
    table-layout: auto;
}

/* Zebra striping on alternate rows, matching the mockup's grey (--color-bg,
 * i.e. Gray Light #EFF0F1). The card is white so the stripe reads - the
 * hand-built version set the card background to this same grey, which made the
 * striping invisible. */
.hero-table .hero-table__table tbody .hero-table__row:nth-child(even) {
    background: var(--color-bg);
}

/* The label is a <th> and the value is a <td>, which is why these two cells
 * must be styled by one rule that out-specifies the global table styles.
 *
 * frontend-child.css has
 * `:is(.wp-block-table, .entry-content...) table:not(.comparison-table__table) tbody td`
 * at (0,4,1) - :is() contributes its most specific argument (a class) and
 * :not() contributes its argument - and it loads AFTER this sheet (measured:
 * hero block at index 8, frontend-child at 35). It matches the <td> value but
 * not the <th> label, so anything below (0,4,1) here styles the label only and
 * leaves the value with the global padding and border. That asymmetry was the
 * cause of the border-on-label-only and mismatched-padding defects.
 *
 * These selectors are (0,4,2): four classes plus the tbody and th/td element
 * types. Above the global rule, so load order stops mattering. Do not simplify
 * them back toward `.hero-table .hero-table__table .hero-table__value` - that
 * is (0,3,0) and silently loses on the value cell only. */
.hero-table .hero-table__table tbody .hero-table__row th.hero-table__label,
.hero-table .hero-table__table tbody .hero-table__row td.hero-table__value {
    padding: var(--space-sm);
    line-height: var(--line-height-normal);
    vertical-align: top;

    /* Longhands, not `border: none` - the minifier collapses the shorthand to
     * `border-width: medium`, which leaves border-style intact and a line
     * still renders. No border-bottom here - zebra striping alone marks rows. */
    border-style: none;
    border-width: 0;
}

/* Labels share the brand blue with the values; weight alone distinguishes them
 * (normal vs semibold). Selector shape matches the shared cell rule above - see
 * the specificity note there. */
.hero-table .hero-table__table tbody .hero-table__row th.hero-table__label {
    font-weight: var(--font-weight-normal);
    color: var(--color-tertiary);
    text-align: left;
    white-space: nowrap;
}

/* Values in brand blue, per design.
 *
 * The colour previously needed !important because the (0,3,0) selector lost to
 * the global `...tbody td` rule's `color: var(--color-text-primary)` at (0,4,1).
 * At (0,4,2) it wins on specificity, so the !important is gone. */
.hero-table .hero-table__table tbody .hero-table__row td.hero-table__value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-tertiary);
    text-align: right;
}

/* ========================================
 * Hero Checkmark List (Side Content: Checkmark List)
 *
 * Bullet glyph, item padding and item spacing all come from the global
 * `.checkmarks-list` rules in frontend-child.css - including the HCP subsite's
 * blue-gradient checkmark variant. Only the card-local concerns are set here:
 * outer margins and the text treatment that matches the sibling table variant.
 *
 * The card carries has-nested-bg so the dark-background adaptation system keeps
 * its text dark against the hero's blue gradient, same as .hero-table.
 * ========================================
 */

/* The global rule zeroes padding-left/margin-left but not the browser's default
 * vertical margin, which would push the list off the card's padding. */
.hero-checklist .hero-checklist__list {
    margin-top: 0;
    margin-bottom: 0;
}

/* Matches the table cells' scale so the two side-content variants read as the
 * same component family. Scoped through .hero-checklist for specificity: the
 * hero block sheet loads before frontend-child.css (measured: index 8 vs 35),
 * so a specificity tie would lose to the later sheet. */
.hero-checklist .hero-checklist__list li {
    font-size: 16px;
    line-height: var(--line-height-normal);
    color: var(--color-tertiary) !important;
}

/* No trailing gap under the final item - the global rule applies
 * margin-bottom to every li, which would misalign the card's bottom padding. */
.hero-checklist .hero-checklist__list li:last-child {
    margin-bottom: 0;
}

/* Tablet: Adjust image sizing */
@media (width <=1200px) {
    .hero-image img {
        max-height: 500px;
    }
}

/* Mobile: swap the diagonal desktop overlay for a full-width vertical wash.
 *
 * The desktop gradients run at 256deg/264deg — dense on the left, fading to
 * fully transparent on the right. That reads fine across a wide viewport where
 * the copy occupies the left column, but once the layout stacks the copy spans
 * the full width and its right-hand edge lands on the uncovered part of the
 * photo. White text over bare foliage/highlights was failing contrast.
 * A 180deg wash covers the entire frame edge to edge instead.
 *
 * The .home/.front-page selectors are repeated deliberately. The homepage
 * override above is (0,3,1) and this rule was previously (0,2,1) — media
 * queries add no specificity, so the unqualified version lost on the homepage
 * and the diagonal gradient kept rendering on mobile. Matching the selector
 * shape is what makes this apply; do not "simplify" it back.
 */
@media (width <=768px) {
    .hero.has-background-image.has-overlay--gradient .hero__overlay,
    .home .hero.has-background-image.has-overlay--gradient .hero__overlay,
    .front-page .hero.has-background-image.has-overlay--gradient .hero__overlay {
        background: var(--wp--preset--gradient--gradient-hero-overlay-mobile);
    }
}

/* Mobile Responsive (768px and below) */
@media (width <=768px) {
    .home .hero.hero-content-left {
        min-height: 62vh;
        height: auto;
        max-height: none;
        padding-bottom: var(--space-lg);
    }

    .hero-wrapper,
    .hero.hero-content-left .hero-wrapper {
        min-height: auto;
    }

    /* Content always appears first on mobile (before image) */
    .hero-wrapper .hero-content {
        order: 1;
    }

    .hero-wrapper .hero-image {
        order: 2;
        max-width: 100%; /* Prevent image column from overflowing container */
    }

    /* Table column follows the content on mobile, same as the image column.
     *
     * margin-top adds breathing room between the stacked copy and the table
     * card - the wrapper's own row-gap is only ~13px at this breakpoint, which
     * reads as cramped once the two are stacked rather than side by side. Set on
     * the column rather than as a wrapper gap so it only affects the table
     * variant and leaves the subject-image layout's spacing untouched. */
    .hero-wrapper .hero-table-col,
    .hero-wrapper .hero-checklist-col {
        order: 2;
        max-width: 100%;
        margin-top: var(--space-lg);

        /* Stacked here, so the desktop horizontal separation would just inset
         * the card and misalign it against the copy above. */
        padding-left: 0;
    }

    .hero-table,
    .hero-checklist {
        padding: var(--space-md);
    }

    /* Labels may wrap once the card is narrow - nowrap would overflow instead.
     * Selector shape matches the desktop cell rules so it overrides the nowrap
     * set there; see the specificity note on those rules. */
    .hero-table .hero-table__table tbody .hero-table__row th.hero-table__label {
        white-space: normal;
    }

    /* Give the label column a little more room on mobile so short labels stop
     * wrapping unnecessarily.
     *
     * `table-layout: auto` (the desktop rule) sizes the label column to roughly
     * its longest word - measured at 88-91px in a ~302px card - which wraps
     * two-word labels like "Primary endpoint" that would fit on one line with
     * marginally more width. `fixed` makes the declared widths authoritative.
     *
     * 35/65 is measured, not assumed. Both hero-table pages were swept across
     * 30/70 through 55/45 at a 390px viewport; 35/65 produced the fewest wrapped
     * lines on each (trials-studies 11, real-world-data 13 - the latter's best
     * result, beating auto's 15). Pushing the labels wider is actively worse:
     * the values are the longer strings on these pages, so width taken from the
     * value column comes straight back as extra wrapped value lines.
     *
     * Re-measure before changing the ratio - the right split depends on the
     * label/value text lengths, which are editor-controlled.
     *
     * Fixed layout sizes columns from the first row only, hence the :first-child
     * scoping. Selector shape matches the desktop cell rules for the same
     * specificity reason noted there. */
    .hero-table .hero-table__table {
        table-layout: fixed;
    }

    .hero-table .hero-table__table tbody .hero-table__row:first-child th.hero-table__label {
        width: 35%;
    }

    .hero-table .hero-table__table tbody .hero-table__row:first-child td.hero-table__value {
        width: 65%;
    }

    .hero-image img {
        max-height: 400px;
        max-width: 100%; /* Prevent image from overflowing on mobile */
    }

    /* Reset layout variations on mobile - all stack vertically */
    .hero.hero-content-left .container {
        display: block;
    }

    .hero.hero-content-left .hero-content,
    .hero.hero-content-full .hero-content,
    .hero-wrapper .hero-content {
        width: 100%;
        max-width: 100%;
        text-align: left;
    }

    /* Reset flex alignment for all layouts on mobile - text only, not buttons */
    .hero .hero-description,
    .hero .hero-ctas {
        text-align: left;
    }

    .hero .hero-ctas {
        display: flex;
        align-items: flex-start;
    }

    .hero-ctas {
        flex-direction: column;
        gap: var(--space-sm);
    }

    /* Hero button responsive adjustments */
    .hero-ctas .btn {
        min-height: var(--dimension-touch-target);
    }
}

/* Small mobile: let the description span the full content width. Matches the
   5-class specificity of the base .container > .hero-content .hero-description
   rule so the 45vw width is actually overridden below 767px. */
@media (width < 767px) {
    .hero.hero-content-left .container > .hero-content .hero-description {
        width: 100%;
    }
}

/* ========================================
 * BLOCK EDITOR STYLES
 * ========================================
 * Ensure hero block appears consistently in the editor
 * ========================================
 */

/* Editor: Light text on background images with light text style */
.hero.has-background-image.hero-text-light h1,
.hero.has-background-image.hero-text-light .hero-content h1,
.editor-styles-wrapper :is(.acf-block-preview, [data-type^="acf/"]) .hero.has-default-bg h1,
.editor-styles-wrapper :is(.acf-block-preview, [data-type^="acf/"]) .hero.has-dark-bg h1,
.editor-styles-wrapper .hero.has-background-image.hero-text-light h1,
.editor-styles-wrapper .hero.has-background-image.hero-text-light .hero-content h1 {
    color: var(--color-text-light);
}

/* Editor: Background image should cover the entire hero area */
.editor-styles-wrapper .hero__image-wrapper,
.block-editor-block-list__block .hero__image-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.editor-styles-wrapper .hero__image,
.block-editor-block-list__block .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Ensure hero has minimum height in editor to show background */
.editor-styles-wrapper .hero.has-background-image,
.block-editor-block-list__block .hero.has-background-image {
    position: relative;
    min-height: 400px;
}

/* Editor: default Anika Blue background for heroes with no background image.
 *
 * Every other editor rule in this section is scoped to .has-background-image, so
 * the no-image case had no editor styling at all and previewed as dark text on
 * the editor's white canvas - unreadable, and not what the frontend renders.
 * The frontend rule cannot be reused directly: it carries
 * :not(.has-background), and hero.php only adds .has-default-bg when the editor
 * has NOT chosen a background, so the two conditions are equivalent here and
 * the negation is redundant noise in this context.
 *
 * PHP pairs .has-default-bg with .has-dark-bg, and the parent theme's
 * block-editor.css already forces light text for .has-dark-bg, so the text
 * colour follows once the background actually paints. */
.editor-styles-wrapper .hero.has-default-bg,
.block-editor-block-list__block .hero.has-default-bg {
    background-color: var(--color-primary);
}

/* Editor: Overlay positioning and styling */
.editor-styles-wrapper .hero__overlay,
.block-editor-block-list__block .hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Editor: Blue hero gradient overlay (default) — homepage gradient shown in
   the editor since front-vs-interior context isn't reliably known here */
.editor-styles-wrapper .hero.has-background-image.has-overlay--gradient .hero__overlay,
.block-editor-block-list__block .hero.has-background-image.has-overlay--gradient .hero__overlay {
    background: var(--wp--preset--gradient--gradient-hero-overlay);
}

/* Editor: Dark blue overlay */
.editor-styles-wrapper .hero.has-background-image.has-overlay--dark-blue .hero__overlay,
.block-editor-block-list__block .hero.has-background-image.has-overlay--dark-blue .hero__overlay {
    background: var(--wp--preset--gradient--gradient-overlay-2);
}

/* Editor: Light overlay */
.editor-styles-wrapper .hero.has-background-image.has-overlay--light .hero__overlay,
.block-editor-block-list__block .hero.has-background-image.has-overlay--light .hero__overlay {
    background: var(--wp--preset--gradient--gradient-grey-white);
    opacity: 0.9;
}

/* Editor: Ensure content stays above overlay */
.editor-styles-wrapper .hero > .container,
.block-editor-block-list__block .hero > .container {
    position: relative;
    z-index: 2;
}