/* =========================================================================
   Single-company page — Phase 1 Culture Intelligence styles.

   Loaded only on is_singular('company') via blogza_enqueue_scripts().
   Uses design tokens from css/design-system.css exclusively.
   ========================================================================= */

/* =========================================================================
   Flags panel (.company-flags)
   ========================================================================= */

.company-flags {
    margin: var(--space-5) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.company-flags__heading {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin: 0 0 var(--space-3);
}

.company-flags__heading--green {
    color: var(--color-success);
}

.company-flags__heading--amber {
    color: var(--color-warning);
}

.company-flags__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 600px) {
    .company-flags__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Flag card ---------------------------------------------------------- */

.flag-card {
    border-radius: var(--radius);
    padding: var(--space-4);
    border: 1px solid transparent;
}

.flag-card--green {
    background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
}

.flag-card--amber {
    background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-warning) 25%, transparent);
}

/* Fallback for browsers without color-mix support */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .flag-card--green {
        background: var(--color-accent-soft);
        border-color: var(--color-border);
    }
    .flag-card--amber {
        background: var(--color-bg-alt);
        border-color: var(--color-border-strong);
    }
}

.flag-card__blurb {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: var(--leading-snug);
}

.flag-card__context {
    margin: 0;
}

/* =========================================================================
   Population context caption (.data-row__context)
   ========================================================================= */

.data-row__context {
    margin: var(--space-1) 0 0;
    line-height: var(--leading-snug);
}

/* =========================================================================
   Similar companies (.company-similar)
   ========================================================================= */

.company-similar {
    margin: var(--space-7) 0 var(--space-5);
    border-top: var(--border-thin);
    padding-top: var(--space-6);
}

.company-similar__heading {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    margin: 0 0 var(--space-5);
}

.company-similar__grid {
    margin-top: 0;
}

/* Similar cards: limit to 3 columns max */
@media (min-width: 960px) {
    .company-similar__grid.post-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.company-similar__card {
    text-decoration: none;
    color: var(--color-text);
}

.company-similar__card:hover {
    text-decoration: none;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

/* =========================================================================
   Collapsible principles (.company-header__principles-clip)
   ========================================================================= */

.company-header__principles-clip {
    max-height: 8em;
    overflow: hidden;
    position: relative;
}

.company-header__principles-clip::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em;
    background: linear-gradient(to bottom, transparent, var(--color-bg));
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
}

.company-header__principles-clip.is-expanded {
    max-height: none;
}

.company-header__principles-clip.is-expanded::after {
    opacity: 0;
}

/* Force BOTH background transparent and the text colour with !important across
   every interaction state. A parent-theme/Bootstrap button rule was turning the
   text white on :focus/:active after a click (and a dark hover background
   earlier), making the button vanish against the light header. */
.company-header__principles-toggle,
.company-header__principles-toggle:hover,
.company-header__principles-toggle:focus,
.company-header__principles-toggle:focus-visible,
.company-header__principles-toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.company-header__principles-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding: 0;
    border: 0;
    color: var(--color-accent) !important;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color var(--dur) var(--ease);
}

.company-header__principles-toggle:hover,
.company-header__principles-toggle:focus,
.company-header__principles-toggle:focus-visible,
.company-header__principles-toggle:active {
    color: var(--color-accent-hover) !important;
}

.company-header__principles-toggle:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}