/* ================================================================
   dropdown.css
   Custom dropdown picker used wherever a native <select> would be
   too limiting, mainly because the options need to render images
   (country flags, commodity icons, company logos) alongside text.

   Markup shape
   ────────────
     <div class="cc-detail-combo">
       <button class="cc-detail-combo__button">
         <img class="cc-detail-combo__flag" ...>
         <span class="cc-detail-combo__label">All</span>
         <span class="cc-detail-combo__chevron">▾</span>
       </button>
       <ul class="cc-detail-combo__list" role="listbox" hidden>
         <li class="cc-detail-combo__option" role="option">
           <img class="cc-detail-combo__option-flag" ...>
           <span class="cc-detail-combo__option-label">Belgium</span>
         </li>
         ...
       </ul>
     </div>

   Used by
   ───────
     • EU member-state + producing-country pickers (detail pages)
     • Commodity filter (detail pages + case studies)
     • Producing-country + company filters (case studies)

   The case-studies page extends a couple of these classes via
   .cs-image-combo overrides (size + dot fallback for commodities
   without an icon) in page-case-studies.css.
   ================================================================ */


/* Root + trigger button. Pill-shaped to match the rest of the
   sidebar controls. */
.cc-detail-combo {
    position: relative;
}

.cc-detail-combo__button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-pill);
    background: var(--white);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ae-black);
    cursor: pointer;
    text-align: left;
}


/* Trigger imagery + label. width:auto on the flag preserves the
   SVG's natural landscape ratio so a 24px-wide flag renders at its
   own height (matches the supplier flags in the table). */
.cc-detail-combo__flag {
    width: 24px;
    height: auto;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--ae-white);
}

.cc-detail-combo__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-detail-combo__chevron {
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1;
    transition: transform var(--transition-base);
}

.cc-detail-combo__button[aria-expanded="true"] .cc-detail-combo__chevron {
    transform: rotate(180deg);
}


/* Dropdown listbox. JS caps max-height to the available viewport
   space on open so the list doesn't extend past the bottom edge. */
.cc-detail-combo__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-dropdown);
    max-height: 320px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
}


/* Non-clickable header that introduces a section of options. Used by
   the company-detail switcher to separate "Full profile available"
   from "No full profile". role="presentation" on the <li> keeps it
   out of the listbox's keyboard cycle and out of the accessible
   tree, so arrow-key navigation jumps over it automatically. */
.cc-detail-combo__group-header {
    padding: 8px 8px 4px;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--color-muted);
    letter-spacing: var(--ls-uppercase);
    text-transform: uppercase;
    cursor: default;
    pointer-events: none;
}
.cc-detail-combo__group-header + .cc-detail-combo__group-header,
.cc-detail-combo__option + .cc-detail-combo__group-header {
    border-top: 1px solid var(--color-input-border);
    margin-top: 4px;
}


/* Option row. Hover + keyboard focus share the same highlight. */
.cc-detail-combo__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 3px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--ae-black);
    cursor: pointer;
    outline: none;
}

.cc-detail-combo__option:hover,
.cc-detail-combo__option:focus-visible {
    background: var(--ae-white);
}

.cc-detail-combo__option--selected {
    font-weight: 700;
    color: var(--ae-darkblue);
}

.cc-detail-combo__option-flag {
    width: 22px;
    height: auto;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--ae-white);
}

.cc-detail-combo__option-label {
    /* Allow long option names (e.g. multi-word noncompliance frameworks)
       to wrap to multiple lines so every option is fully readable.
       The dropdown panel scrolls vertically if the list exceeds its
       max-height. The button label (.cc-detail-combo__label) keeps
       its single-line + ellipsis behaviour since the button has fixed
       horizontal room. */
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}