/* ================================================================
   page-company-detail.css  –  Compliance Checker
   Per-page styles for /company-detail. The layout reuses the
   cc-detail-* frame (page-detail-frame.css) and the case-studies
   table chrome (page-case-studies.css + table.css + the
   cc-table--case-studies modifier rules in page-country-detail-
   shared.css).

   What lives here
   ────────────────
     1. Company-logo flag adjustments in the sidebar combobox
        (.cc-detail-combo__flag--company)
     2. Stat-card list variant for the 4 overview cards
        (.stat-card--list, .stat-card__list, etc.)
     3. Small-text value variant for the revenue card
     4. Active-company highlight inside the case-studies table pills
================================================================ */


/* === Headquarters row in the overview heading ==================
   Sits between the cc-detail-heading title and lede on the
   company-detail Overview tab. Muted small text with a
   Font-Awesome map-marker glyph so the HQ reads as metadata, not
   body copy. */
.cc-detail-heading__hq {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: var(--space-xs) 0 var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-muted);
    line-height: 1.2;
}

.cc-detail-heading__hq i {
    color: var(--ae-darkblue);
    font-size: 0.95em;
}


/* === Sidebar company-logo flags ================================
   Country flags render at clamp(width:24px, height:auto) so their
   landscape SVG shape is preserved. Company logos come in mixed
   aspect ratios (square, landscape, portrait); cap both axes so
   the trigger row stays consistent regardless of source asset. */
.cc-detail-combo__flag--company,
.cc-detail-combo__option-flag--company {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
    background: var(--white);
    padding: 1px;
    border: 1px solid var(--color-input-border);
}

.cc-detail-combo__option-flag--company {
    width: 22px;
    height: 22px;
}


/* === Stat-card list variant ====================================
   The Forest-risk commodities and Top sourcing regions cards each
   show a vertical list of icon + label items instead of a single
   big number. The base .stat-card (in page-country-detail-shared.css)
   already handles the white background + label + shadow; this
   variant tweaks the inner content area. */

.stat-card--list {
    align-items: stretch;
}

.stat-card__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

.stat-card__list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--ae-black);
    line-height: 1.2;
}

/* Commodity glyph, sits flush on the surface, no badge background. */
.stat-card__commodity-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Colored dot fallback for commodities without a dedicated SVG icon
   (cotton, corn, etc.). Pulls its colour from the same --commodity-X
   tokens used by the case-studies table dots so a row reads as the
   same commodity across both surfaces. */
.stat-card__commodity-dot {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    margin: 4px;  /* match the visual mass of the 22px icon variant */
    background: var(--commodity-color, var(--color-muted));
}
.stat-card__commodity-dot[data-commodity="cattle"]    { background: var(--commodity-cattle); }
.stat-card__commodity-dot[data-commodity="cocoa"]     { background: var(--commodity-cocoa); }
.stat-card__commodity-dot[data-commodity="coffee"]    { background: var(--commodity-coffee); }
.stat-card__commodity-dot[data-commodity="corn"]      { background: var(--commodity-corn); }
.stat-card__commodity-dot[data-commodity="cotton"]    { background: var(--commodity-cotton); }
.stat-card__commodity-dot[data-commodity="palm"]      { background: var(--commodity-palm); }
.stat-card__commodity-dot[data-commodity="palm-oil"]  { background: var(--commodity-palm); }
.stat-card__commodity-dot[data-commodity="poultry"]   { background: var(--commodity-poultry); }
.stat-card__commodity-dot[data-commodity="rubber"]    { background: var(--commodity-rubber); }
.stat-card__commodity-dot[data-commodity="soy"]       { background: var(--commodity-soy); }
.stat-card__commodity-dot[data-commodity="wood"]      { background: var(--commodity-wood); }
.stat-card__commodity-dot[data-commodity="timber"]    { background: var(--commodity-wood); }

/* Country flag — small rounded chip matching the combobox flags. */
.stat-card__country-flag {
    width: 22px;
    height: auto;
    max-height: 16px;
    flex-shrink: 0;
    border-radius: 2px;
    object-fit: cover;
    background: var(--ae-white);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}


/* === Revenue card: smaller, wrappable value ====================
   The default .stat-card__value is a big heading-style number. For
   the revenue card the text is wordy ("USD 160 billion (2023)" or
   "Not disclosed"), so we drop a notch and let it wrap. */
.stat-card__value--small {
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.25;
    letter-spacing: -0.2px;
    overflow-wrap: break-word;
}


/* === Group-header commodity dot colours ========================
   .cs-group-commodity-dot is rendered into the case-studies group
   header row by JS when the user picks "Group by → commodity". The
   shared chrome (size, radius, ring) lives in page-case-studies.css;
   the per-commodity background colour does NOT exist there because
   the case-studies page injects it via inline style from its own JS
   commodityColors map. On this page we resolve it from the same
   --commodity-X tokens via attribute selectors, which keeps the JS
   declarative (no colour lookup needed). The --image variant is
   handled inline in JS for the seven commodities with dedicated SVG
   icons. */
.cs-group-commodity-dot[data-commodity="cattle"]    { background: var(--commodity-cattle); }
.cs-group-commodity-dot[data-commodity="cocoa"]     { background: var(--commodity-cocoa); }
.cs-group-commodity-dot[data-commodity="coffee"]    { background: var(--commodity-coffee); }
.cs-group-commodity-dot[data-commodity="corn"]      { background: var(--commodity-corn); }
.cs-group-commodity-dot[data-commodity="cotton"]    { background: var(--commodity-cotton); }
.cs-group-commodity-dot[data-commodity="palm"]      { background: var(--commodity-palm); }
.cs-group-commodity-dot[data-commodity="palm-oil"]  { background: var(--commodity-palm); }
.cs-group-commodity-dot[data-commodity="poultry"]   { background: var(--commodity-poultry); }
.cs-group-commodity-dot[data-commodity="rubber"]    { background: var(--commodity-rubber); }
.cs-group-commodity-dot[data-commodity="soy"]       { background: var(--commodity-soy); }
.cs-group-commodity-dot[data-commodity="wood"]      { background: var(--commodity-wood); }
.cs-group-commodity-dot[data-commodity="timber"]    { background: var(--commodity-wood); }


/* Group-header top stripe colour — same idea as the dots above:
   .cc-table__group has `border-top: 2px solid var(--group-color, ...)`
   (defined in table.css), so resolving --group-color from
   data-commodity here paints the stripe in the commodity's brand
   colour without any inline JS-set custom property. Mirrors what
   case_studies.html does via inline `style.setProperty`. */
.cc-table__group--commodity[data-commodity="cattle"]    { --group-color: var(--commodity-cattle); }
.cc-table__group--commodity[data-commodity="cocoa"]     { --group-color: var(--commodity-cocoa); }
.cc-table__group--commodity[data-commodity="coffee"]    { --group-color: var(--commodity-coffee); }
.cc-table__group--commodity[data-commodity="corn"]      { --group-color: var(--commodity-corn); }
.cc-table__group--commodity[data-commodity="cotton"]    { --group-color: var(--commodity-cotton); }
.cc-table__group--commodity[data-commodity="palm"]      { --group-color: var(--commodity-palm); }
.cc-table__group--commodity[data-commodity="palm-oil"]  { --group-color: var(--commodity-palm); }
.cc-table__group--commodity[data-commodity="poultry"]   { --group-color: var(--commodity-poultry); }
.cc-table__group--commodity[data-commodity="rubber"]    { --group-color: var(--commodity-rubber); }
.cc-table__group--commodity[data-commodity="soy"]       { --group-color: var(--commodity-soy); }
.cc-table__group--commodity[data-commodity="wood"]      { --group-color: var(--commodity-wood); }
.cc-table__group--commodity[data-commodity="timber"]    { --group-color: var(--commodity-wood); }


/* === Map tab figure ============================================
   Static supply-chain map image — fits the panel width with no own
   chrome; the cc-detail-panel + cc-detail-heading already provide
   the surrounding card and title. Falls within the same max-width
   as the other tab content via the parent panel. */
.cc-company-map {
    margin: 0;
}

.cc-company-map__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-dropdown);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}


/* === Highlight the current company in the case-studies pill row ==
   On the case-studies table inside this page, each row's company
   pill list includes the company we're currently viewing. Bold the
   pill that matches so the user can spot the relevant company at a
   glance. */
.cs-company-pill--active {
    background: color-mix(in srgb, var(--ae-darkblue) 10%, transparent);
    color: var(--ae-darkblue);
    font-weight: 700;
}