/* ==========================================================
   Eternal Design & Build — cookie consent + Cookie Policy page
   Uses the site design system: plaster / charcoal / green / brass,
   Fraunces + Inter, zero border-radius.
   ========================================================== */

:root {
    --ec-plaster:   #F5F1EA;
    --ec-limestone: #EAE4D9;
    --ec-charcoal:  #22211E;
    --ec-iron:      #55524B;
    --ec-green:     #2E4438;
    --ec-brass:     #A8895B;
    --ec-display:   'Fraunces', Georgia, serif;
    --ec-text:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html.ec-lock { overflow: hidden; }

/* ---------- Buttons ---------- */
.ec-btn {
    font: 500 14px/1 var(--ec-text);
    letter-spacing: .02em;
    padding: 14px 22px;
    border: 1px solid var(--ec-charcoal);
    border-radius: 0;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.ec-btn--solid   { background: var(--ec-charcoal); color: var(--ec-plaster); }
.ec-btn--solid:hover { background: var(--ec-green); border-color: var(--ec-green); }
.ec-btn--outline { background: transparent; color: var(--ec-charcoal); }
.ec-btn--outline:hover { background: var(--ec-charcoal); color: var(--ec-plaster); }
.ec-btn--link {
    background: none; border-color: transparent; color: var(--ec-charcoal);
    text-decoration: underline; text-underline-offset: 3px; padding-inline: 8px;
}
.ec-btn--link:hover { color: var(--ec-green); }
.ec-btn:focus-visible,
.ec-modal__close:focus-visible,
.ec-switch input:focus-visible + .ec-switch__track { outline: 2px solid var(--ec-brass); outline-offset: 2px; }

/* ---------- Banner ---------- */
.ec-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
    background: var(--ec-plaster);
    border-top: 1px solid var(--ec-charcoal);
    box-shadow: 0 -8px 30px rgba(34, 33, 30, .08);
    color: var(--ec-charcoal);
    font: 400 15px/1.6 var(--ec-text);
    animation: ec-up .35s ease-out;
}
.ec-banner[hidden] { display: none; }
.ec-banner__inner {
    max-width: 1240px; margin: 0 auto; padding: 24px 32px;
    display: flex; align-items: center; gap: 40px;
}
.ec-banner__text { flex: 1; }
.ec-banner__text p { margin: 0; color: var(--ec-iron); }
.ec-banner__title {
    font: 400 22px/1.2 var(--ec-display) !important;
    color: var(--ec-charcoal) !important;
    margin-bottom: 6px !important;
}
.ec-banner a, .ec-modal a, .ec-policy a { color: var(--ec-charcoal); text-underline-offset: 3px; }
.ec-banner a:hover, .ec-modal a:hover, .ec-policy a:hover { color: var(--ec-green); }
.ec-banner__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

@keyframes ec-up { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- Modal ---------- */
.ec-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ec-modal[hidden] { display: none; }
.ec-modal__backdrop { position: absolute; inset: 0; background: rgba(34, 33, 30, .55); }
.ec-modal__panel {
    position: relative; width: 100%; max-width: 620px; max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    background: var(--ec-plaster); color: var(--ec-charcoal);
    font: 400 15px/1.6 var(--ec-text);
    border: 1px solid var(--ec-charcoal);
    animation: ec-fade .2s ease-out;
}
.ec-modal__panel:focus { outline: none; }
@keyframes ec-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ec-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 28px; border-bottom: 1px solid var(--ec-limestone);
}
.ec-modal__title { font: 400 28px/1.15 var(--ec-display); margin: 0; }
.ec-modal__close {
    width: 40px; height: 40px; display: grid; place-items: center;
    background: none; border: 1px solid transparent; border-radius: 0; color: var(--ec-charcoal); cursor: pointer;
}
.ec-modal__close:hover { border-color: var(--ec-charcoal); }

.ec-modal__body { padding: 8px 28px 8px; overflow-y: auto; }
.ec-modal__intro { color: var(--ec-iron); margin: 16px 0 8px; }

.ec-cat { border-top: 1px solid var(--ec-limestone); padding: 18px 0; }
.ec-cat:first-of-type { border-top: 0; }
.ec-cat__row { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.ec-cat__title { font: 600 15px/1.4 var(--ec-text); margin: 0 0 4px; }
.ec-cat__desc  { margin: 0; color: var(--ec-iron); font-size: 14px; }
.ec-cat__always {
    font: 500 12px/1 var(--ec-text); letter-spacing: .06em; text-transform: uppercase;
    color: var(--ec-green); white-space: nowrap; padding-top: 4px;
}

/* Switch */
.ec-switch { position: relative; flex: 0 0 auto; cursor: pointer; }
.ec-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ec-switch__track {
    display: block; width: 48px; height: 26px;
    background: var(--ec-limestone); border: 1px solid var(--ec-iron);
    position: relative; transition: background .15s;
}
.ec-switch__track::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    background: var(--ec-iron); transition: transform .15s, background .15s;
}
.ec-switch input:checked + .ec-switch__track { background: var(--ec-green); border-color: var(--ec-green); }
.ec-switch input:checked + .ec-switch__track::after { transform: translateX(22px); background: var(--ec-plaster); }

.ec-modal__foot {
    display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
    padding: 20px 28px; border-top: 1px solid var(--ec-limestone);
}

/* ---------- Toast ---------- */
.ec-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999;
    background: var(--ec-charcoal); color: var(--ec-plaster);
    font: 400 14px/1.4 var(--ec-text); padding: 12px 20px;
}
.ec-toast[hidden] { display: none; }

/* Footer "Cookie settings" link rendered as a button */
.ec-footer-link {
    background: none; border: 0; padding: 0; font: inherit; color: inherit;
    cursor: pointer; text-decoration: inherit;
}
.ec-footer-link:hover { text-decoration: underline; }

/* ---------- Cookie Policy page ---------- */
.ec-policy {
    max-width: 860px; margin: 0 auto; padding: 120px 24px 96px;
    color: var(--ec-charcoal); font: 400 16px/1.7 var(--ec-text);
}
.ec-policy__eyebrow { font: 500 12px/1 var(--ec-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ec-brass); margin: 0 0 16px; }
.ec-policy h1 { font: 400 clamp(36px, 5vw, 56px)/1.05 var(--ec-display); margin: 0 0 12px; }
.ec-policy__updated { color: var(--ec-iron); margin: 0 0 40px; }
.ec-policy h2 { font: 400 26px/1.2 var(--ec-display); margin: 56px 0 16px; }
.ec-policy p { margin: 0 0 16px; }
.ec-policy__lead { font-size: 18px; }

.ec-table-wrap { overflow-x: auto; border: 1px solid var(--ec-limestone); }
.ec-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.ec-table th, .ec-table td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--ec-limestone); }
.ec-table th { font-weight: 600; background: var(--ec-limestone); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.ec-table tr:last-child td { border-bottom: 0; }
.ec-table code { font: 500 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--ec-limestone); padding: 2px 6px; }

.ec-policy__cta { margin: 32px 0 0; padding: 24px; background: var(--ec-limestone); display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ec-policy__cta p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .ec-banner__inner { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px 16px; }
    .ec-banner__actions { display: grid; grid-template-columns: 1fr 1fr; }
    .ec-banner__actions .ec-btn--link { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 520px) {
    .ec-modal { padding: 0; align-items: flex-end; }
    .ec-modal__panel { max-height: 92vh; border-left: 0; border-right: 0; border-bottom: 0; }
    .ec-modal__head, .ec-modal__body, .ec-modal__foot { padding-left: 16px; padding-right: 16px; }
    .ec-modal__foot { display: grid; grid-template-columns: 1fr 1fr; }
    .ec-modal__foot .ec-btn--solid { grid-column: 1 / -1; order: -1; }
    .ec-policy { padding: 96px 16px 72px; }
}
@media (prefers-reduced-motion: reduce) {
    .ec-banner, .ec-modal__panel { animation: none; }
}

/* ==========================================================
   Visibility hardening — wins over any site-wide [hidden],
   reveal-on-scroll or paragraph styles in the main stylesheet.
   Banner/modal show ONLY when JS adds .is-open
   ========================================================== */
#ec-banner:not(.is-open),
#ec-modal:not(.is-open),
#ec-toast[hidden] { display: none !important; }

#ec-banner.is-open { display: block !important; }
#ec-modal.is-open  { display: flex !important; }

#ec-banner *, #ec-modal * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none;
}
#ec-banner .ec-banner__text p:not(.ec-banner__title) {
    display: block !important;
    color: var(--ec-iron) !important;
    font: 400 15px/1.6 var(--ec-text) !important;
    max-width: 720px;
}
#ec-banner .ec-banner__text a,
#ec-modal .ec-modal__intro a { margin-left: .25em; text-decoration: underline; }