/* ─────────────────────────────────────────────────────────────────────────
 * Logo Container Suite — modifier classes consumed by template-parts/websly/
 * logo.php (navbar) and template-parts/websly/footer.php (footer logo).
 *
 * The template emits inline CSS vars for the per-instance numeric values
 * (radius_px, padding_px, custom color) and class modifiers for the
 * categorical choices (fill, shape, border, shadow).
 *
 *   <div class="ws-logo-container
 *               ws-logo-container--fill-white
 *               ws-logo-container--shape-rounded
 *               ws-logo-container--border-hairline
 *               ws-logo-container--shadow-soft"
 *        data-dark-fill="black"
 *        style="--ws-logo-radius: 12px; --ws-logo-padding: 8px;">
 *     <img src="…" alt="">
 *   </div>
 * ─────────────────────────────────────────────────────────────────────── */

.ws-logo-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: var(--ws-logo-padding, 0);
    border-radius: var(--ws-logo-radius, 0);
    background: var(--ws-logo-fill, transparent);
    border: var(--ws-logo-border-width, 0) solid var(--ws-logo-border-color, transparent);
    box-shadow: var(--ws-logo-shadow, none);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ws-logo-container > img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ── Fill modifiers ──────────────────────────────────────────────────── */
.ws-logo-container--fill-white            { --ws-logo-fill: #ffffff; }
.ws-logo-container--fill-black            { --ws-logo-fill: #000000; }
.ws-logo-container--fill-brand-primary    { --ws-logo-fill: var(--theme-primary); }
.ws-logo-container--fill-brand-secondary  { --ws-logo-fill: var(--theme-secondary); }
.ws-logo-container--fill-surface          { --ws-logo-fill: var(--page-bg-surface, #f5f5f5); }
.ws-logo-container--fill-glass-light {
    --ws-logo-fill: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.ws-logo-container--fill-glass-dark {
    --ws-logo-fill: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
/* --fill-custom: template sets --ws-logo-fill inline from color picker */

/* ── Shape modifiers ─────────────────────────────────────────────────── */
.ws-logo-container--shape-square   { border-radius: 0; }
.ws-logo-container--shape-rounded  { border-radius: var(--ws-logo-radius, 12px); }
.ws-logo-container--shape-pill     { border-radius: 9999px; }
.ws-logo-container--shape-circle {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

/* ── Border modifiers ────────────────────────────────────────────────── */
.ws-logo-container--border-hairline {
    --ws-logo-border-width: 1px;
    --ws-logo-border-color: rgba(var(--text-base-rgb, 17, 17, 17), 0.12);
}
.ws-logo-container--border-strong {
    --ws-logo-border-width: 2px;
    --ws-logo-border-color: rgba(var(--text-base-rgb, 17, 17, 17), 0.25);
}
.ws-logo-container--border-accent {
    --ws-logo-border-width: 2px;
    --ws-logo-border-color: var(--theme-accent, #d4af37);
}
.ws-logo-container--border-glow {
    --ws-logo-border-width: 1px;
    --ws-logo-border-color: color-mix(in srgb, var(--theme-accent, #d4af37) 60%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent, #d4af37) 12%, transparent);
}

/* ── Shadow modifiers ────────────────────────────────────────────────── */
.ws-logo-container--shadow-soft    { --ws-logo-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.ws-logo-container--shadow-lifted  { --ws-logo-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.ws-logo-container--shadow-glow    { --ws-logo-shadow: 0 0 24px color-mix(in srgb, var(--theme-accent, #d4af37) 40%, transparent); }
.ws-logo-container--shadow-inner   { --ws-logo-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12); }

/* ── Dark-mode fill override (when data-dark-fill ≠ "match") ─────────── */
:is(.dark, html.dark, body.dark) .ws-logo-container[data-dark-fill="white"]            { --ws-logo-fill: #ffffff; }
:is(.dark, html.dark, body.dark) .ws-logo-container[data-dark-fill="black"]            { --ws-logo-fill: #000000; }
:is(.dark, html.dark, body.dark) .ws-logo-container[data-dark-fill="brand-primary"]    { --ws-logo-fill: var(--theme-primary); }
:is(.dark, html.dark, body.dark) .ws-logo-container[data-dark-fill="brand-secondary"]  { --ws-logo-fill: var(--theme-secondary); }
:is(.dark, html.dark, body.dark) .ws-logo-container[data-dark-fill="surface"]          { --ws-logo-fill: var(--page-bg-surface, #1a1a1a); }
:is(.dark, html.dark, body.dark) .ws-logo-container[data-dark-fill="glass-light"] {
    --ws-logo-fill: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
:is(.dark, html.dark, body.dark) .ws-logo-container[data-dark-fill="glass-dark"] {
    --ws-logo-fill: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}