/* ============================================================
   BE Species Profile — BASE styles (always loaded)
   v1.11.0

   This file contains everything from the card body downwards, plus the
   root wrapper. It contains NO header styling at all.

   Each of the six header layouts lives in its own stylesheet under
   species-profile/layouts/, and exactly ONE of them is enqueued per page
   (see be_species_profile_conditional_enqueue in be-featured-box.php).
   Nothing for an unselected layout is ever sent to the browser.

     layouts/band.css       Option A — gradient band
     layouts/hero.css       Option B — hero photo + scrim
     layouts/split.css      Option C — split header, portrait inset
     layouts/editorial.css  Option D — editorial light
     layouts/ribbon.css     Option E — lineage breadcrumb ribbon
     layouts/spine.css      Option F — gold spine, flat panel
   ============================================================ */

/* PERFORMANCE: the Lato webfont used to be pulled in here with
   `@import url('https://fonts.googleapis.com/...')`.

   A CSS @import is render-blocking AND serialized: the browser had to
   download this stylesheet, parse it, only THEN discover the font request,
   open a new connection to fonts.googleapis.com, receive a second stylesheet,
   and finally fetch the font files from fonts.gstatic.com. Three chained
   round trips before any text could paint.

   The font is now registered as its own stylesheet in be-featured-box.php, so
   it downloads in parallel with this file, and a preconnect hint warms up the
   fonts.gstatic.com connection ahead of time. Sites that would rather not call
   out to Google at all can switch it off with:

       add_filter( 'be_species_profile_load_fonts', '__return_false' );

   The font-family stack below degrades to the system UI font either way. */

/* ---- Root wrapper ---- */
.be-species-profile {
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    color: #1A1A1A;
    margin: 1.5rem 0 2rem;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}
.be-species-profile *,
.be-species-profile *::before,
.be-species-profile *::after {
    box-sizing: border-box;
}

/* The root element also carries the `wp-block-group` class so the theme's
   group layout styles (content width, alignment, block spacing) apply.
   The card supplies its own internal padding, so if your theme also adds
   padding to .wp-block-group you will see a ring around the header.
   If that happens, uncomment the rule below.

.be-species-profile.wp-block-group {
    padding: 0;
}
*/

/* ---- Body section: white card with rounded top corners ---- */
.be-species-profile__body {
    background: #ffffff;
    padding: 24px 40px 16px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    position: relative;
    z-index: 1;
    margin-top: -12px;  /* subtle overlap with the header — design-05 depth */
}

/* Compatibility shim: v1.8.0 briefly wrapped content in child "zone" blocks.
   These rules keep such content readable in any post saved under that version.
   The current block does not emit them. */
.be-species-profile__zone {
    padding: 0 0 16px;
}
.be-species-profile__zone:empty {
    display: none;
}
.be-species-profile__zone-label {
    display: none;
}

/* Intro: rich-text lead-in between the header and the info rows.
   Only present when the field has content. */
.be-species-profile__intro {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.65;
    color: #333;
}
.be-species-profile__intro:empty {
    display: none;
}
/* Placeholder styling while editing */
.editor-styles-wrapper .be-species-profile__intro {
    min-height: 1.65em;
}

/* Free-content zone for inner blocks.
   `__inner` is the current single zone; `__inner-before` / `__inner-after` are
   kept so markup saved before v1.7.0 (which had two zones) still spaces
   correctly until those posts are re-saved. */
.be-species-profile__inner,
.be-species-profile__inner-before {
    padding: 0 0 16px;
}
.be-species-profile__inner:empty,
.be-species-profile__inner-before:empty {
    display: none;
}
/* When the zone sits below the rows it needs its space on top instead */
.be-species-profile__rows-area + .be-species-profile__inner {
    padding: 16px 0 0;
}

/* ============================================================
   Rows area: rows + right column.
   The right column is 248px so the 4px white frame sits OUTSIDE the
   picture and the <img> content box lands on exactly 240 x 240 px.
   ============================================================ */
/* The right column FLOATS rather than occupying a grid column.
   With a grid the rows were locked into a narrow track for their whole length,
   so once the picture ended the space beside it stayed empty and long values
   like "Native Countries" kept wrapping in a column a third of the card wide.
   Floating lets the rows reclaim the full width as soon as they clear the
   picture. The ::after clearfix stops the float escaping into the audio bar. */
.be-species-profile__rows-area {
    display: block;
}
.be-species-profile__rows-area::after {
    content: '';
    display: block;
    clear: both;
}
.be-species-profile__rows-area--no-right {
    display: block;
}

/* No image, but an IUCN badge.
   This used to keep the `1fr 248px` split, so the rows were squeezed into the
   left column beside 248px of empty space — every row's bottom rule stopped
   short and a third of the card went unused. The badge does not need a column
   of its own: the rows now run the full width and the badge sits above them at
   its natural size. (The split header layout lands here too, since it shows the
   photograph in the header rather than the body.) */
.be-species-profile__rows-area--iucn-only {
    display: flex;          /* flex so `order` can lift the badge above the rows */
    flex-direction: column;
}
.be-species-profile__rows-area--iucn-only .be-species-profile__right {
    float: none;
    width: auto;
    max-width: 100%;
    order: -1;              /* badge above the rows */
    align-items: flex-start;
    margin: 0 0 4px;
}
.be-species-profile__rows-area--iucn-only .be-species-profile__iucn {
    width: auto;            /* hug the label instead of stretching to 248px */
    max-width: 100%;
}
/* ---- Fallback for markup saved before v1.7.1 ----
   Those posts emit the rows list BEFORE the right column. A float only wraps
   content that follows it, so floating there would drop the picture below every
   row. `:has()` detects the old order and restores the previous two-column grid
   until the post is re-saved. */
.be-species-profile__rows-area:has(> .be-species-profile__rows:first-child) {
    display: grid;
    grid-template-columns: 1fr 248px;
    gap: 24px;
    align-items: start;
}
.be-species-profile__rows-area:has(> .be-species-profile__rows:first-child) .be-species-profile__right {
    float: none;
    margin: 0;
}
.be-species-profile__rows-area:has(> .be-species-profile__rows:first-child)::after {
    display: none;
}
.be-species-profile:has(.be-species-profile__rows:first-child) .be-species-profile__row {
    display: flex !important;
    padding: 12px 0 !important;
    text-indent: 0;
    gap: 8px;
}
.be-species-profile:has(.be-species-profile__rows:first-child) .be-species-profile__row-label {
    display: block !important;
    flex: 0 0 180px !important;
    width: auto;
    padding-left: 16px !important;
}

/* The info rows list. Selectors are chained with .be-species-profile to beat
   theme rules like `.single-content ol { padding-left: 2em }`. */
.be-species-profile .be-species-profile__rows {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}
/* Rows are BLOCK boxes with a hanging indent, not flex rows.
   A flex container establishes a block formatting context, which refuses to
   flow around a float — the rows would have slid underneath the picture
   instead of beside it. Block boxes let their line boxes shrink around the
   float, so a long value wraps beside the picture and then widens once it
   clears it. `padding-left` + negative `text-indent` reproduces the fixed
   180px label column that the flex layout gave. */
.be-species-profile .be-species-profile__row {
    display: block !important;
    padding: 12px 0 12px 196px !important;   /* 16px gutter + 180px label */
    text-indent: -180px;
    margin: 0 !important;
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
    color: #1A1A1A;
    border-bottom: 1px solid var(--bio-border, #E5E5E0);
    list-style: none !important;
    background: none !important;
    box-shadow: none !important;
}
.be-species-profile__row:last-child {
    border-bottom: none;
}
.be-species-profile .be-species-profile__row-label {
    font-weight: 900;
    color: #1B5E3F;
    font-size: 16px;
    display: inline-block !important;
    width: 180px;
    vertical-align: top;
    text-indent: 0;          /* cancel the parent's hanging indent */
    text-align: left;
    letter-spacing: -0.2px;
    /* Inside the 180px box (border-box), so a long label wraps within its
       column instead of running into the value. */
    padding: 0 10px 0 0 !important;
    margin: 0 !important;
}
.be-species-profile__row-value {
    text-indent: 0;
}

/* ---- Image on the LEFT keeps the two-column grid ----
   The rows hold their label column with a hanging indent (padding-left plus a
   negative text-indent). A left float shifts the line boxes rightwards but NOT
   the block's padding box, so the label — which sits in that padding — would be
   painted underneath the picture and disappear. Only a right-hand float is
   compatible with the technique, so this variant keeps the original grid.
   Since the right column is now first in source order it lands in column 1
   naturally, which is exactly where the image should be. */
.be-species-profile .be-species-profile__rows-area--img-left {
    display: grid;
    grid-template-columns: 248px 1fr;
    gap: 24px;
    align-items: start;
}
.be-species-profile .be-species-profile__rows-area--img-left::after {
    display: none;
}
.be-species-profile .be-species-profile__rows-area--img-left .be-species-profile__right {
    float: none;
    margin: 0;
}
.be-species-profile .be-species-profile__rows-area--img-left .be-species-profile__row {
    display: flex !important;
    padding: 12px 0 !important;
    text-indent: 0;
    gap: 8px;
}
.be-species-profile .be-species-profile__rows-area--img-left .be-species-profile__row-label {
    display: block !important;
    flex: 0 0 180px !important;
    width: auto;
    padding-left: 16px !important;
}

/* ---- Right column: image + IUCN. Floated — see the rows-area note above. ---- */
.be-species-profile__right {
    float: right;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    width: 248px;
    max-width: 100%;
    margin: 0 0 16px 24px;
}
.be-species-profile__image-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Exact 240 x 240 picture area. border-box + 4px border => 240px content. */
.be-species-profile__image {
    width: 248px;
    height: 248px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background-color: #f0f0f0;
    position: relative;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.be-species-profile__image img {
    width: 240px;
    height: 240px;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.be-species-profile__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
}
.be-species-profile__image-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.95);
    color: #1B5E3F;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 1;
}
.be-species-profile__image-caption {
    font-size: 12px;
    color: #6B6B6B;
    line-height: 1.4;
    max-width: 248px;
}

/* ============================================================
   IUCN status pill — official IUCN Red List colour chart.
   https://nc.iucnredlist.org/redlist/resources/files/1646067752-FINAL_IUCN_Red_List_colour_chart.pdf
   The block also writes background/color inline; these class rules are the
   fallback if a sanitiser strips inline styles, and they colour markup saved
   before v1.4.0 (which had no usable colour at all — hence all-green badges).
   ============================================================ */
.be-species-profile__iucn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #9E9E9E;
    border-radius: 20px;
    color: #fff;
    align-self: flex-start;
    width: 100%;
    max-width: 248px;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.be-species-profile__iucn--EX { background: #000000; color: #FFFFFF; }
.be-species-profile__iucn--EW { background: #542344; color: #FFFFFF; }
.be-species-profile__iucn--RE { background: #9B4F96; color: #FFFFFF; }
.be-species-profile__iucn--CR { background: #D81E05; color: #FFFFFF; }
.be-species-profile__iucn--EN { background: #FC7F3F; color: #1A1A1A; }
.be-species-profile__iucn--VU { background: #F9E814; color: #1A1A1A; }
.be-species-profile__iucn--NT { background: #CCE226; color: #1A1A1A; }
.be-species-profile__iucn--LC { background: #60C659; color: #1A1A1A; }
.be-species-profile__iucn--DD { background: #D1D1C6; color: #1A1A1A; }
.be-species-profile__iucn--NE { background: #FFFFFF; color: #1A1A1A; }
.be-species-profile__iucn--NA { background: #C1B5A5; color: #1A1A1A; }

.be-species-profile__iucn .be-species-profile__iucn-text small,
.be-species-profile__iucn .be-species-profile__iucn-text strong {
    color: inherit;
}

/* Status disc inverts the pair (disc fill = text colour, code = category colour) */
.be-species-profile__iucn-disc {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.be-species-profile__iucn--EX .be-species-profile__iucn-disc,
.be-species-profile__iucn--EW .be-species-profile__iucn-disc,
.be-species-profile__iucn--RE .be-species-profile__iucn-disc,
.be-species-profile__iucn--CR .be-species-profile__iucn-disc { background: #FFFFFF; }
.be-species-profile__iucn--EN .be-species-profile__iucn-disc,
.be-species-profile__iucn--VU .be-species-profile__iucn-disc,
.be-species-profile__iucn--NT .be-species-profile__iucn-disc,
.be-species-profile__iucn--LC .be-species-profile__iucn-disc,
.be-species-profile__iucn--DD .be-species-profile__iucn-disc,
.be-species-profile__iucn--NE .be-species-profile__iucn-disc,
.be-species-profile__iucn--NA .be-species-profile__iucn-disc { background: #1A1A1A; }

.be-species-profile__iucn-code {
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}
.be-species-profile__iucn--EX .be-species-profile__iucn-code { color: #000000; }
.be-species-profile__iucn--EW .be-species-profile__iucn-code { color: #542344; }
.be-species-profile__iucn--RE .be-species-profile__iucn-code { color: #9B4F96; }
.be-species-profile__iucn--CR .be-species-profile__iucn-code { color: #D81E05; }
.be-species-profile__iucn--EN .be-species-profile__iucn-code { color: #FC7F3F; }
.be-species-profile__iucn--VU .be-species-profile__iucn-code { color: #F9E814; }
.be-species-profile__iucn--NT .be-species-profile__iucn-code { color: #CCE226; }
.be-species-profile__iucn--LC .be-species-profile__iucn-code { color: #60C659; }
.be-species-profile__iucn--DD .be-species-profile__iucn-code { color: #D1D1C6; }
.be-species-profile__iucn--NE .be-species-profile__iucn-code { color: #FFFFFF; }
.be-species-profile__iucn--NA .be-species-profile__iucn-code { color: #C1B5A5; }

.be-species-profile__iucn-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.be-species-profile__iucn-text small {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.8;
    margin: 0 0 1px 0;
    font-weight: 600;
}
.be-species-profile__iucn-text strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
}

/* Bottom InnerBlocks zone */
.be-species-profile__inner-after {
    padding: 16px 0 0;
}
.be-species-profile__inner-after:empty {
    display: none;
}

/* ============================================================
   Audio: green bar holding a REAL native HTML5 <audio controls>.
   No JS, no shortcode, no mediaelement dependency.

   BROWSER SUPPORT:
     Chrome / Edge / Opera / Brave -> full skin (gold button, gold progress).
     Safari                        -> panel + play button largely honoured.
     Firefox                       -> does not expose media control internals
                                      to CSS, so it draws its own player inside
                                      the green bar. Functional, not skinned.
   ============================================================ */
.be-species-profile__audio {
    display: block;
    padding: 10px 14px;
    background: var(--bio-green, #1B5E3F);
    color: #fff;
    border-radius: 12px;
    margin: 0;
    overflow: hidden;
}

/* The player label is not printed on screen — it travels as the <audio>
   element's aria-label. This hides the label div in markup saved before
   v1.4.1 while keeping it available to screen readers. */
.be-species-profile__audio-label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.be-species-profile__audio-native,
.be-species-profile__audio audio {
    display: block;
    width: 100%;
    min-width: 0;
    height: 44px;
    border-radius: 22px;
    background: transparent;
    /* 'light' makes Chromium draw a DARK play glyph, which is what we want on
       the gold disc below. Do not change to 'dark'. */
    color-scheme: light;
    outline: none;
}
.be-species-profile__audio-native:focus-visible {
    outline: 2px solid var(--bio-gold, #E8B923);
    outline-offset: 2px;
}
.be-species-profile__audio-native::-webkit-media-controls-enclosure,
.be-species-profile__audio-native::-webkit-media-controls-panel {
    background: transparent;
    padding: 0;
}
.be-species-profile__audio-native::-webkit-media-controls-play-button {
    background-color: var(--bio-gold, #E8B923);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    margin-right: 10px;
}
.be-species-profile__audio-native::-webkit-media-controls-current-time-display,
.be-species-profile__audio-native::-webkit-media-controls-time-remaining-display {
    color: #ffffff;
    font-size: 12px;
    text-shadow: none;
}
/* Chromium paints the played/unplayed segments internally and exposes no
   colour hook, so the timeline is recoloured wholesale with a filter. */
.be-species-profile__audio-native::-webkit-media-controls-timeline {
    background: transparent;
    margin: 0 12px;
    filter: invert(72%) sepia(85%) saturate(1200%) hue-rotate(357deg) brightness(95%) contrast(92%);
}
.be-species-profile__audio-native::-webkit-media-controls-mute-button,
.be-species-profile__audio-native::-webkit-media-controls-volume-slider,
.be-species-profile__audio-native::-webkit-media-controls-volume-control-container {
    display: none !important;
}

/* Legacy support: posts still saved with the WP [audio] shortcode */
.be-species-profile__audio .wp-audio-shortcode {
    margin: 0;
    padding: 0;
    background: transparent;
    max-width: 100%;
    overflow: hidden;
}
.be-species-profile__audio .mejs-container,
.be-species-profile__audio .mejs-controls {
    background: transparent !important;
}

.be-species-profile__audio-transcript {
    display: block;
    margin: 12px 0 16px;
    padding: 10px 14px;
    background: #F5F5F0;
    border-left: 3px solid var(--bio-green, #1B5E3F);
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    color: #444;
    line-height: 1.5;
}
.be-species-profile__audio-transcript-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--bio-green, #1B5E3F);
    font-weight: 700;
    margin-right: 8px;
}

/* ============================================================
   Mobile (body and below — header breakpoints live in the layout files)
   ============================================================ */
@media (max-width: 768px) {
    .be-species-profile__body {
        padding: 20px;
    }

    /* One narrow column: nothing to float around, nothing to grid.
       These selectors are chained with .be-species-profile so they outrank the
       desktop --img-left overrides, which are themselves (0,3,0). */
    .be-species-profile .be-species-profile__rows-area,
    .be-species-profile .be-species-profile__rows-area--no-right,
    .be-species-profile .be-species-profile__rows-area--iucn-only,
    .be-species-profile .be-species-profile__rows-area--img-left {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        padding: 0;
        gap: 16px;
    }
    .be-species-profile .be-species-profile__rows-area--img-left .be-species-profile__right {
        float: none;
        margin: 0 auto;
    }
    /* img-left reverts to the hanging indent on phones like every other variant */
    .be-species-profile .be-species-profile__rows-area--img-left .be-species-profile__row {
        display: block !important;
        padding: 12px 0 12px 122px !important;
        text-indent: -110px;
    }
    .be-species-profile .be-species-profile__rows-area--img-left .be-species-profile__row-label {
        /* The desktop img-left rule sets `display: block !important` for its
           flex layout. Without resetting it here the label becomes a block and
           pushes the value onto its own line. */
        display: inline-block !important;
        width: 110px;
        flex: none !important;
        padding: 0 8px 0 0 !important;
    }
    .be-species-profile__rows-area--img-left .be-species-profile__right {
        order: -1;
    }

    /* Right column: centred, NOT stretched */
    .be-species-profile__right {
        width: 248px;
        max-width: 100%;
        margin: 0 auto;
        align-items: center;
        order: -1;
    }
    .be-species-profile__image-wrap {
        width: 248px;
        max-width: 100%;
        align-items: center;
    }

    /* Exact 240 x 240 on mobile too — no full-bleed stretch, no crop */
    .be-species-profile__image {
        width: 248px;
        height: 248px;
        max-width: 100%;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }
    .be-species-profile__image img {
        width: 240px;
        height: 240px;
        max-width: 100%;
        object-fit: cover;
    }
    .be-species-profile__image-caption {
        width: 248px;
        max-width: 100%;
        text-align: center;
    }
    .be-species-profile__iucn {
        width: 248px;
        max-width: 100%;
        align-self: center;
    }

    .be-species-profile__rows {
        padding: 0;
    }
    .be-species-profile__row {
        font-size: 16px;
    }
    /* Narrower hanging indent on phones */
    .be-species-profile .be-species-profile__row {
        padding: 12px 0 12px 122px !important;   /* 12px gutter + 110px label */
        text-indent: -110px;
    }
    .be-species-profile .be-species-profile__row-label {
        font-size: 16px;
        width: 110px;
        padding: 0 8px 0 0 !important;
    }

    .be-species-profile__inner-before,
    .be-species-profile__inner-after {
        padding-left: 0;
        padding-right: 0;
    }

    .be-species-profile__audio {
        padding: 8px 10px;
        border-radius: 12px;
    }
    .be-species-profile__audio-native,
    .be-species-profile__audio audio {
        height: 40px;
    }
    .be-species-profile__audio-native::-webkit-media-controls-play-button {
        width: 30px;
        height: 30px;
        margin-right: 6px;
    }
    .be-species-profile__audio-native::-webkit-media-controls-timeline {
        margin: 0 8px;
    }
}

/* Very narrow phones — keep the frame inside the viewport */
@media (max-width: 320px) {
    .be-species-profile__image,
    .be-species-profile__right,
    .be-species-profile__image-wrap,
    .be-species-profile__iucn {
        width: 100%;
    }
    .be-species-profile__image img {
        width: 100%;
        height: 100%;
    }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
    .be-species-profile__audio,
    .be-species-profile__audio-transcript {
        display: none !important;
    }
    .be-species-profile__image-badge {
        display: none;
    }
    /* Keep the official IUCN colour on paper — it is the point of the badge. */
    .be-species-profile__iucn {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        box-shadow: none;
        border: 1px solid #999;
    }
}