/* ============================================================================
   Brand Identity — Front-end Components & Typography Cascade
   ============================================================================
   Consumes CSS custom properties output by includes/brand-identity.php on
   :root. Includes:
   - Global typography cascade (font-family, font-size per element)
   - Social Links list styles (rendered via guidelines_brand_socials_html())

   Brand colors and button variables are also output as CSS variables but
   consumed by their respective component stylesheets.
============================================================================ */

/* ── Typography cascade ──────────────────────────────────────────────────── */
/* Variables come from includes/brand-identity.php (admin → Brand Identity →
   Typography tab). Each rule falls back to a sensible default when the
   variable is unset, so a fresh theme install still renders cleanly. */

body,
p,
li,
td,
th,
input,
textarea,
select,
button {
    font-family: var( --brand-font-body, system-ui, -apple-system, "Segoe UI", sans-serif );
    font-size: var( --brand-font-size-p, 1rem );
}

h1, h2, h3, h4, h5, h6 {
    font-family: var( --brand-font-heading, var( --brand-font-body, system-ui, -apple-system, "Segoe UI", sans-serif ) );
}

h1 { font-size: var( --brand-font-size-h1, clamp( 2rem, 5vw, 3.5rem ) ); }
h2 { font-size: var( --brand-font-size-h2, clamp( 1.75rem, 4vw, 2.5rem ) ); }
h3 { font-size: var( --brand-font-size-h3, clamp( 1.25rem, 3vw, 1.75rem ) ); }
h4 { font-size: var( --brand-font-size-h4, 1.125rem ); }

.btn,
button {
    font-family: var( --brand-font-family-button, var( --brand-font-body, inherit ) );
    font-size: var( --brand-font-size-button, 0.875rem );
}

/* ── Button system ────────────────────────────────────────────────────────── */
/* Two layers of indirection:
   1. `.btn--primary` / `.btn--secondary` set the *accent* + *contrast* locals
      from the Brand Identity vars. Default `.btn` (no modifier) acts as primary.
   2. Style variants (`.btn--filled` / `--outline` / `--text`) apply those
      locals to specific properties: filled uses accent for bg, contrast for
      text; outline uses accent for text/border on transparent bg; text-link
      uses accent for text on transparent bg/border.

   Per-instance color overrides cascade through `--btn-bg`, `--btn-text`, and
   `--btn-border` — set via inline style on a single button to swap any
   subset of colors without touching the shared system. Per the
   header-CTA color-override fields. */

.btn {
    --btn-accent:   var( --brand-button-primary-bg, #1a1a1a );
    --btn-contrast: var( --brand-button-primary-text, #ffffff );

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var( --brand-button-padding-y, 12px ) var( --brand-button-padding-x, 24px );
    border: 1px solid transparent;
    border-radius: 6px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
    opacity: 0.85;
}

/* Accent palette modifiers — set the local accent/contrast pair */
.btn--primary {
    --btn-accent:   var( --brand-button-primary-bg, #1a1a1a );
    --btn-contrast: var( --brand-button-primary-text, #ffffff );
}

.btn--secondary {
    --btn-accent:   var( --brand-button-secondary-bg, #f0f0f0 );
    --btn-contrast: var( --brand-button-secondary-text, #1a1a1a );
}

/* Style variants — each property reads from `--btn-bg/text/border` first
   (per-instance override), falls back to the accent/contrast pair. */
.btn--filled {
    background-color: var( --btn-bg, var( --btn-accent ) );
    color:            var( --btn-text, var( --btn-contrast ) );
    border-color:     var( --btn-border, var( --btn-accent ) );
}

.btn--outline {
    background-color: var( --btn-bg, transparent );
    color:            var( --btn-text, var( --btn-accent ) );
    border-color:     var( --btn-border, var( --btn-accent ) );
}

.btn--text {
    background-color: var( --btn-bg, transparent );
    color:            var( --btn-text, var( --btn-accent ) );
    border-color:     var( --btn-border, transparent );
}

/* ── Social Links ─────────────────────────────────────────────────────────── */

.brand-socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.brand-socials__item {
    display: inline-flex;
}

.brand-socials__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s ease;
}

.brand-socials__link:hover,
.brand-socials__link:focus-visible {
    opacity: 0.7;
}

.brand-socials__icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba( 0, 0, 0, 0.04 );
    overflow: hidden;
    flex-shrink: 0;
}

.brand-socials__icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

.brand-socials__label {
    font-size: 0.9rem;
    line-height: 1.2;
}

/* ── Empty state — 3 shimmer circles + a shimmer bar ──────────────────────── */

.brand-socials--empty {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.brand-socials__icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    gap: 12px;
}

.brand-socials__icon--shimmer {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba( 0, 0, 0, 0.04 );
}

.brand-socials__bar {
    width: 140px;
    height: 12px;
    border-radius: 6px;
}