/* =========================================================================
   Cookie banner

   Fixed to the bottom of the viewport so it can never push layout around
   (CLS), and styled from the theme's tokens so it reads as part of the site
   rather than as a bolted-on plugin.
   ========================================================================= */

.at-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--paper, #F4F1EA);
    border-top: 3px solid var(--accent, #B0552F);
    box-shadow: 0 -8px 30px rgba(15, 17, 21, 0.14);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.at-consent[hidden] { display: none; }
.at-consent.is-open { opacity: 1; transform: translateY(0); }

.at-consent__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 40px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.at-consent__body { flex: 1 1 460px; min-width: 0; }

.at-consent__title {
    font-family: var(--font-display, sans-serif);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink, #1A1C1E);
    margin: 0 0 6px;
}

.at-consent__desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-soft, #54565A);
    margin: 0;
    max-width: 68ch;
}
.at-consent__desc a {
    color: var(--accent, #B0552F);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Per-category options
   ------------------------------------------------------------------------- */

.at-consent__options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 28px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line, #D9D3C6);
}
.at-consent__options[hidden] { display: none; }

.at-consent__option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.at-consent__option input {
    margin: 3px 0 0;
    width: 17px;
    height: 17px;
    accent-color: var(--accent, #B0552F);
    flex-shrink: 0;
}
.at-consent__option input:disabled { cursor: default; }

.at-consent__option-label {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink, #1A1C1E);
}
.at-consent__option-label em {
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-soft, #54565A);
}
.at-consent__option-desc {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft, #54565A);
    margin-top: 3px;
}

/* -------------------------------------------------------------------------
   Actions
   ------------------------------------------------------------------------- */

.at-consent__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.at-consent__actions .btn { white-space: nowrap; }
.at-consent__actions [hidden] { display: none; }

.at-consent__link {
    background: none;
    border: 0;
    padding: 8px 4px;
    min-height: 44px;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--ink-soft, #54565A);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.at-consent__link:hover { color: var(--accent, #B0552F); }

@media (max-width: 900px) {
    .at-consent__inner { padding: 20px 24px; gap: 18px; }
    .at-consent__actions { width: 100%; }
    .at-consent__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* The banner is chrome, not content: it should not animate under reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .at-consent { transition: none; }
}