/*
 * assets/css/design-system.css
 * THE SHARED FOUNDATION of the CBAM Advisory website (added in v34, chat 12d).
 *
 * Look: plain and institutional, like european-union.europa.eu - flat colours, Arial,
 * no gradients, no animations, no shadows, no rounded corners.
 *
 * Loaded from includes/header.php AFTER legal.css and BEFORE cookie-banner.css
 * (the cookie banner stays last). Page CSS files that are linked inside a page body load
 * later and win on equal specificity, so when one of them needs to change a rule from this
 * file, edit that page rule in place instead of adding overrides.
 *
 * ------------------------------------------------------------------------------------
 * THE ONLY COLOURS ALLOWED IN PUBLIC CSS
 *   Blue (brand)    #4073AF  headings (h3), buttons, bars, table headers.
 *                            Text in this colour only on WHITE backgrounds.
 *   Blue dark       #255D9D  links, button hover, blue text on ANY grey / tinted background
 *   Blue deep       #1D497C  text on tinted boxes, deep emphasis, link hover
 *   Blue tint       #E8EEF6  info box background (checker)
 *   Yellow          #FFDE39  top lines, accent bars, focus line
 *   Yellow dark     #C29500  small marker borders only (never text)
 *   Yellow tint     #FFF6C2  note background
 *   Text            #262626  all body text, dark headings
 *   Text secondary  #444444  secondary text
 *   Text note       #595959  small notes, captions
 *   Line            #CFCFCF  borders, dividers
 *   Background grey #EBEBEB (banner), #F4F4F4 (panels, sections)
 *   White           #FFFFFF
 *   Error           #B00020  form errors only
 *   LinkedIn        #0A66C2 / #084E96  the LinkedIn buttons only (brand colours)
 *   (A lighter grey is allowed only for placeholder text on white; at present none is used.)
 *   Contrast: text must reach 4.5:1 (3:1 for text 24px or larger, or 18.66px bold or larger).
 *
 * COMPONENT RULES (see the sections below)
 *   Container   max-width 1200px, side padding 24px (16px on phones)   -> style.css
 *   Headings    h1 2rem normal #262626; block title (h2) 1.65rem bold; card/panel title (h3)
 *               1.1rem bold, #4073AF on white or #255D9D on grey. Text 17px, line-height 1.6,
 *               lines no wider than about 760px unless something sits beside the text.
 *   Card        white, 1px #CFCFCF border, 3px #FFDE39 top line, 24px padding, equal heights,
 *               links pinned to the bottom                              -> .ds-card
 *   Panel       #F4F4F4, 4px #4073AF left bar, 28px padding             -> .ds-panel
 *   Note        #FFF6C2, 4px #FFDE39 left bar                           -> .ds-note
 *   Info box    #E8EEF6, 4px #255D9D left bar (checker only)           -> .ds-info
 *   Buttons     primary #4073AF fill / white bold text; secondary white fill, 2px #4073AF
 *               border, #255D9D text; min-height 46px; padding 12px 24px; hover #255D9D
 *   Links       #255D9D, underlined; hover #1D497C
 *   Focus       3px #FFDE39 line plus a 2px #262626 ring (same as the cookie banner)
 *   Image frame 1px #CFCFCF border, 8px white padding, no shadow        -> .ds-image-frame
 *   Tables      header #4073AF with white bold text, zebra #F4F4F4, 1px #CFCFCF lines
 * ------------------------------------------------------------------------------------
 *
 * The variables --blue, --yellow, --grey, --light, --text, --white and --map-overlay stay in
 * style.css and keep working. The new names below are added next to them.
 *
 * v36 (chat 12f) added the section "Intro with a side photo" at the end of this file. The
 * Card / Panel / Note / chip / frame rules for the EU CBAM, UK CBAM, Filing and Reduce pages
 * are written in the page style sheets (style.css, reducing-emissions.css) and follow the
 * component rules above.
 */

:root {
    --blue-dark:   #255D9D;   /* links, button hover, blue text on grey or tinted backgrounds */
    --blue-deep:   #1D497C;   /* text on tinted boxes, link hover */
    --blue-tint:   #E8EEF6;   /* info box background */
    --yellow-dark: #C29500;   /* small marker borders only, never text */
    --yellow-tint: #FFF6C2;   /* note background */
    --text-2:      #444444;   /* secondary text */
    --text-note:   #595959;   /* small notes and captions */
    --line:        #CFCFCF;   /* borders and dividers */
    --bg-1:        #EBEBEB;   /* banner grey */
    --bg-2:        #F4F4F4;   /* panels and grey sections */
    --error:       #B00020;   /* form errors only */
}

/* ---------- Links ---------- */

a {
    color: var(--blue-dark);
    text-decoration: underline;
}

a:hover {
    color: var(--blue-deep);
}

/* ---------- Keyboard focus: yellow line with a dark ring around it ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 0;
    box-shadow: 0 0 0 5px var(--text);
}

/* The Menu button (phones) sits on the blue bar, so its line is drawn inside the button */
.nav-toggle:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: -3px;
    box-shadow: none;
}

/* ---------- Content text ---------- */
/*
 * Paragraphs, list items and definition text inside a content section: 17px, line-height 1.6.
 * :where() keeps this rule at zero strength, so any element that has its own size
 * (menu, buttons, form controls, tables, captions, small notes, footer, cookie banner)
 * keeps it. The checker (.cbc), the calculator, forms and tables are left out.
 */
:where(.section:not(.cbc)) :where(p, li, dd):not(:where(
    table *, form *, .rp-calc *,
    .eu-file ul *, .fp-card ul *, .rp-card-list *, .eu-statement *, .fp-step-label
)) {
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* ---------- Subscripts and superscripts (added in v49) ---------- */
/* Without this, CO2, N2O and tCO2e make the line they sit in taller than the lines around it. */
:where(sub, sup) {
    line-height: 0;
}

/* ---------- Line length (added in v38) ---------- */
/*
 * Running text is never wider than 760px (about 70 characters). Text inside tables and forms and
 * the rows that have a label beside the text (.rp-part) are left alone. :where() keeps the rule at
 * zero strength, so a rule that sets its own max-width still wins.
 */
:where(.section:not(.cbc)) :where(p, dd):not(:where(table *, form *, .rp-part *)) {
    max-width: 760px;
}

/* ---------- Justified running text (added in v41) ---------- */
/*
 * Running text (paragraphs, list items, definition text) is justified so both edges are straight,
 * including the bold lead sentences. Words are never split (no hyphenation). main.js (v51) tunes the letter and word spacing of a paragraph very slightly when a line would stretch too far. On phones and tablets (1100px and below) text is left aligned,
 * because narrow justified lines leave wide gaps.
 * Left alone on purpose: the three team biographies (narrow column), tables, forms, the calculator, the checker, the Home facts list, process
 * step labels and numbers, short blue taglines, scenario quotes and replies, job titles, the narrow stat boxes, link cards
 * and the address (short lines, where justifying only creates gaps), and the dot-separated
 * keyword lines. :where() keeps the rule at zero strength, so any element that sets its own
 * text-align (for example centred text) still wins.
 */
@media (min-width: 1101px) {

:where(.section:not(.cbc)) :where(p, li, dd):not(:where(
    table *, form *, .rp-calc *, .hm-facts *, .hm-label, .hm-step, .hm-step *,
    [class*="-number"], [class*="-subtitle"], .eu-lead, .uk-lead, .about-lead, .about-role,
    [class*="-stat-"], [class*="-stat-"] *, .eu-stat *, .uk-stat *, .fp-stat *,
    .eu-scenario-quote, .eu-scenario-response, .cp-card, .eu-statement, .eu-statement *, .cp-link-card, .cp-link-card *, .cp-card p, .fp-flow li, .rp-flow li, .about-note-address *, address, address *,
    .hm-card > p:has(+ .hm-more), .eu-tags *, .uk-tags *, .fp-flow-step *, .rp-flow-step *, .uk-timeline li, .fp-step-label, .fp-step-label *,
    .eu-scenario *, .rp-card-body *, .eu-file *, .about-member-body *
)) {
    text-align: justify;
    text-justify: inter-word;
    hyphens: manual;
}

}

/* ---------- Buttons ---------- */
/*
 * One size and one typography for every button family. Families: .eu-btn, .uk-btn, .about-btn,
 * .about-contact-btn, .fp-btn, .rp-btn, .cp-btn, .cbc-btn. Layout rules that make a button
 * full width on a form (.cbc-btn-block) and the LinkedIn colours stay in their own files.
 */
.eu-btn,
.uk-btn,
.about-btn,
.about-contact-btn,
.fp-btn,
.rp-btn,
.cp-btn,
.cbc-btn {
    box-sizing: border-box;
    display: inline-block;
    max-width: 100%;
    min-height: 46px;
    padding: 12px 24px;
    border: 2px solid var(--blue);
    border-radius: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Primary: blue fill, white bold text */
.eu-btn-primary,
.uk-btn-primary,
.about-btn-primary,
.fp-btn-primary,
.rp-btn-primary,
.cp-btn-primary,
.cbc-btn-primary {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

.eu-btn-primary:hover,
.eu-btn-primary:focus,
.uk-btn-primary:hover,
.uk-btn-primary:focus,
.about-btn-primary:hover,
.about-btn-primary:focus,
.fp-btn-primary:hover,
.fp-btn-primary:focus,
.rp-btn-primary:hover,
.rp-btn-primary:focus,
.cp-btn-primary:hover,
.cp-btn-primary:focus,
.cbc-btn-primary:hover,
.cbc-btn-primary:focus {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
    color: var(--white);
    text-decoration: none;
}

/* Secondary: white fill, 2px blue border, dark blue text (the About email / phone buttons too) */
.eu-btn-secondary,
.fp-btn-outline,
.about-contact-btn-email {
    background: var(--white);
    border-color: var(--blue);
    color: var(--blue-dark);
}

.eu-btn-secondary:hover,
.eu-btn-secondary:focus,
.fp-btn-outline:hover,
.fp-btn-outline:focus,
.about-contact-btn-email:hover,
.about-contact-btn-email:focus {
    background: var(--blue-tint);
    border-color: var(--blue-dark);
    color: var(--blue-dark);
    text-decoration: none;
}

/* ---------- Image frame ---------- */

.ds-image-frame {
    margin: 0;
    padding: 8px;
    background: var(--white);
    border: 1px solid var(--line);
}

.ds-image-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Card ---------- */
/* White, 1px line border, 3px yellow top line, 24px padding. Cards in a row get equal
   heights when the row is a grid or flex row; the last link is pinned to the bottom. */

.ds-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--yellow);
}

.ds-card h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.35;
    color: var(--blue);
}

.ds-card p {
    margin: 0 0 12px 0;
}

.ds-card .ds-card-link {
    margin-top: auto;
}

/* ---------- Panel (a grouping box on grey) ---------- */

.ds-panel {
    padding: 28px;
    background: var(--bg-2);
    border-left: 4px solid var(--blue);
}

.ds-panel h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.35;
    color: var(--blue-dark);
}

/* Cards inside a panel are normal cards, so their title is blue on white again */
.ds-panel .ds-card h3 {
    color: var(--blue);
}

/* ---------- Note (pale yellow) ---------- */

.ds-note {
    margin: 0 0 16px 0;
    padding: 16px 20px;
    background: var(--yellow-tint);
    border-left: 4px solid var(--yellow);
    color: var(--text);
}

/* ---------- Info box (EU CBAM checker only) ---------- */

.ds-info {
    margin: 0 0 16px 0;
    padding: 16px 20px;
    background: var(--blue-tint);
    border-left: 4px solid var(--blue-dark);
    color: var(--text);
}

/* ---------- Table ---------- */

.ds-table {
    width: 100%;
    border-collapse: collapse;
}

.ds-table th,
.ds-table td {
    padding: 10px 12px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.ds-table th {
    background: var(--blue);
    color: var(--white);
    font-weight: bold;
}

.ds-table tbody tr:nth-child(even) td {
    background: var(--bg-2);
}

/* ---------- Intro with a side photo (EU CBAM, UK CBAM, Filing, Reduce; added in v36 / chat 12f) ---------- */
/*
 * From 1000px the intro block of the four long pages is two columns: title, lead, text and buttons
 * on the left (about 58%), the photo on the right (about 42%), top aligned. The page text order
 * does not change (text first, photo last in the page); the photo is placed in column 2 and spans
 * every row. The last row is a flexible empty row, so a photo that is taller than the text never
 * stretches the text rows apart.
 * Below 1000px nothing here applies: one column, text and buttons first, photo underneath, as before.
 * The photo is never shown flatter than 4:3 and never taller than 460px (object-fit: cover).
 */
@media (min-width: 1000px) {

    .eu-cbam .eu-intro,
    .uk-cbam .uk-intro,
    .filing-page .fp-intro {
        display: grid;
        grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
        grid-template-rows: repeat(5, auto) minmax(0, 1fr);   /* heading, lead, two paragraphs, buttons, spare */
        column-gap: 40px;
        align-items: start;
    }

    .reduce-page .rp-intro {
        display: grid;
        grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
        grid-template-rows: repeat(3, auto) minmax(0, 1fr);   /* title, lead, paragraph, spare */
        column-gap: 40px;
        align-items: start;
    }

    .eu-cbam .eu-intro > *,
    .uk-cbam .uk-intro > *,
    .filing-page .fp-intro > *,
    .reduce-page .rp-intro > * {
        grid-column: 1;
    }

    .eu-cbam .eu-intro > .eu-hero-image,
    .uk-cbam .uk-intro > .uk-hero-image,
    .filing-page .fp-intro > .fp-hero,
    .reduce-page .rp-intro > .rp-hero {
        grid-column: 2;
        grid-row: 1 / -1;
        margin: 0;
    }

    /* v39: the photo fills the whole height of the text column (no empty space under it) */
    .eu-cbam .eu-intro > .eu-hero-image,
    .uk-cbam .uk-intro > .uk-hero-image,
    .filing-page .fp-intro > .fp-hero,
    .reduce-page .rp-intro > .rp-hero {
        position: relative;
        align-self: stretch;
        min-height: 400px;
    }

    /* EU and UK: their page title sits above the intro block, so the photo is lifted by the height
       of that one-line title (2rem x 1.25 + 12px margin = 52px) and starts level with the title */
    .eu-cbam .eu-intro > .eu-hero-image,
    .uk-cbam .uk-intro > .uk-hero-image {
        margin-top: -52px;
    }

    .eu-cbam .eu-intro > .eu-hero-image img,
    .uk-cbam .uk-intro > .uk-hero-image img,
    .filing-page .fp-intro > .fp-hero img,
    .reduce-page .rp-intro > .rp-hero img {
        position: absolute;
        top: 8px;
        left: 8px;
        width: calc(100% - 16px);
        height: calc(100% - 16px);
        max-height: none;
        aspect-ratio: auto;
        object-fit: cover;
    }

    /* No extra space under the buttons: the photo beside them sets the height */
    .eu-cbam .eu-intro > .eu-buttons,
    .uk-cbam .uk-intro > .uk-buttons,
    .filing-page .fp-intro > .fp-buttons {
        margin-bottom: 0;
    }
}

/* ---------- v39: finishing touches ---------- */
/*
 * 1. Section titles get a short yellow accent line (EU institutional style). It is decoration only
 *    (generated content, no text) and sits under the block titles of the content sections, not
 *    under card, panel or call-to-action titles.
 * 2. Clickable cards show a blue border on hover and keyboard focus (no animation).
 */
.eu-cbam .eu-block > h2::after,
.uk-cbam .uk-block > h2::after,
.filing-page .fp-block > h2::after,
.reduce-page .rp-block > h2::after,
.about-page .about-block > h2::after,
.contact-page .cp-block > h2::after,
.hm .section h2:not(.hm-cta h2)::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 10px;
    background: var(--yellow);
}

.contact-page .cp-link-card:hover,
.contact-page .cp-link-card:focus-within {
    border-color: var(--blue);
}