/* Inline tag pills available in the RTE Style Menu.
   The dropdown itself is configured in App_Plugins/ThirdEyeRteStyles/umbraco-package.json.
   This file is linked in the RTE data type so the styles render in the editor preview. */

span.tag--green {
    display: inline-block;
    background: var(--mint, #c8e6d8);
    color: var(--primary, #035850);
    /* slightly more padding-top than bottom to compensate for the optical
       weighting of uppercase glyphs sitting near the top of their em-box */
    padding: 5px 14px 3px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
}

span.tag--coral {
    display: inline-block;
    background: var(--coral, #f6ab93);
    color: var(--dark-blue, #003845);
    padding: 5px 14px 3px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
}

/* Big metric. The leading number animates from 0 → target when the metric
   scrolls into view (handled by main.js — looks for `.metric` text content,
   parses any "$"/"+"/"-" prefix and any "%"/"x"/"k"/etc suffix). */
/* Shared base for Metric and Giant Metric */
span.metric,
span.metric-giant {
    display: inline-block;
    font-weight: 900;
    line-height: 1;
    color: var(--primary, #03584E);
}
span.metric        { font-size: 4rem; }
span.metric-giant  { font-size: 8rem; }

/* On dark-green sections the brand-green metric is invisible — flip to coral. */
.section--deep span.metric,
.section--deep span.metric-giant,
.cta-section span.metric,
.cta-section span.metric-giant,
.contact-body span.metric,
.contact-body span.metric-giant {
    color: var(--coral, #f6ab93);
}

/* Tighten vertical space around a paragraph that contains a metric so
   the big number doesn't sit in a sea of whitespace. Scoped via :has() so
   ordinary paragraphs keep their normal rhythm. */
p:has(> span.metric),
p:has(> span.metric-giant) {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    line-height: 1;
}

/* Section-style subtitle — matches the .label kicker used above section
   headings (small all-caps, brand green, tracked). */
span.subtitle {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary, #03584E);
    line-height: 1.4;
}

/* Inline emphasis — bold + brand dark-green. Inherits surrounding font-size
   so it sits naturally within body copy. */
span.bold-green {
    font-weight: 700;
    color: var(--primary, #03584E);
}

/* RTE-embedded images — Umbraco's image picker emits explicit
   width="X" height="Y" HTML attributes baked into the <img> tag (the
   picker's "Set image dimensions" option). Without this rule, the
   browser uses both attributes as fixed pixel dimensions; if anything
   then scales just the width down (e.g. the container being narrower
   than 700px on mobile), the height stays at its explicit value and
   the image renders squished.
     max-width: 100% — caps the image at the container's width so it
                       never overflows the article column
     height: auto    — recalculates height from the explicit width
                       attribute proportionally, preserving the
                       original aspect ratio at every viewport width
   display: block + margin: auto — centres images that aren't already
   floated, and removes the baseline gap underneath. */
.rte-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 24px auto;
    border-radius: var(--radius-xs, 8px);
}