/* ─── Primary colors ──────────────────────────────────── */
:root {
    color-scheme: light dark;
    --color-oxford-blue:  #0a1137;
    --color-baby-powder:  #f5f7f3;
    --color-madder:       #a6112f;
    --color-madder-dark:  #f0a4b0;
    --color-rose-quartz:  #aca6bb;
    --color-ink-black:    #0d0d1a;
}

/* ─── Semantic tokens — light (default) ──────────────── */
:root {
    --bg:            var(--color-baby-powder);
    --bg-elevated:   #ffffff;
    --fg:            var(--color-oxford-blue);
    --fg-strong:     var(--color-ink-black);
    --fg-muted:      #5a566a;
    --button-bg:     var(--color-oxford-blue);
    --button-fg:     var(--color-baby-powder);
    --accent:        var(--color-madder);
    --border:        rgba(10,17,55,.10);
    --border-strong: rgba(10,17,55,.22);
    --focus-ring:    var(--color-madder);

    --font-heading:  "CormorantGaramond", "EB Garamond", Georgia, serif;
    --font-body:     "Nunito", system-ui, sans-serif;

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  3rem;
    --space-8:  4rem;
    --space-9:  6rem;
    --space-10: 8rem;

    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   14px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px 0 rgba(10,17,55,.06);
    --shadow-sm: 0 2px 6px -1px rgba(10,17,55,.08), 0 1px 2px 0 rgba(10,17,55,.04);
    --shadow-md: 0 8px 20px -6px rgba(10,17,55,.14), 0 2px 4px 0 rgba(10,17,55,.06);
    --shadow-lg: 0 20px 40px -12px rgba(10,17,55,.22), 0 4px 8px 0 rgba(10,17,55,.06);

    --duration-base: 200ms;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Dark mode tokens ───────────────────────────────── */
:root[data-theme="dark"] {
    --bg:            var(--color-ink-black);
    --bg-elevated:   #16162a;
    --fg:            var(--color-baby-powder);
    --fg-strong:     #ffffff;
    --fg-muted:      var(--color-rose-quartz);
    --button-bg:     var(--color-rose-quartz);
    --button-fg:     var(--color-oxford-blue);
    --accent:        var(--color-madder-dark);
    --border:        rgba(172,166,187,.14);
    --border-strong: rgba(172,166,187,.30);
    --focus-ring:    var(--color-madder-dark);
}

/* ─── Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--fg);
    font: 300 1rem/1.6 var(--font-body);
    transition: background-color var(--duration-base) var(--ease-standard),
                color var(--duration-base) var(--ease-standard);
}

strong, b { font-weight: 600; }

/* ─── Fonts ──────────────────────────────────────────── */
@font-face {
    font-family: 'CormorantGaramond';
    src: url('https://joram.eu/fonts/CormorantGaramond-VariableFont_wght.woff2') format('woff2-variations');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'CormorantGaramond';
    src: url('https://joram.eu/fonts/CormorantGaramond-Italic-VariableFont_wght.woff2') format('woff2-variations');
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url('https://joram.eu/fonts/Nunito-VariableFont_wght.woff2') format('woff2-variations');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url('https://joram.eu/fonts/Nunito-Italic-VariableFont_wght.woff2') format('woff2-variations');
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

/* ─── Topbar ─────────────────────────────────────────── */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 10vw;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    position: sticky;
    top: 0;
    z-index: 100;
}

.brandblock {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--fg);
    font: 600 1.1rem/1 var(--font-heading);
    letter-spacing: 0.01em;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Logo visibility */
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-dark  { display: inline; }
:root[data-theme="dark"] .logo-light { display: none; }

/* ─── Topbar controls ────────────────────────────────── */
.info-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: 600 0.75rem/1 var(--font-body);
    padding: var(--space-2) var(--space-3);
    height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fg);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration-base) var(--ease-standard);
}
.info-button:hover {
    background: color-mix(in oklch, var(--fg) 8%, transparent);
}
.info-button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.lang-toggle,
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--fg);
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    transition: background var(--duration-base) var(--ease-standard);
}
.lang-toggle:hover,
.theme-toggle:hover {
    background: color-mix(in oklch, var(--fg) 8%, transparent);
}
.lang-toggle:focus-visible,
.theme-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.home-btn {
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--fg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    text-decoration: none;
    transition: background var(--duration-base) var(--ease-standard);
}
.home-btn svg { width: 18px; height: 18px; }
.home-btn:hover {
    background: color-mix(in oklch, var(--fg) 8%, transparent);
}
.home-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

#scrollTopBtn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--fg);
    color: var(--bg);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-standard);
    z-index: 200;
}
#scrollTopBtn:hover {
    background: color-mix(in oklch, var(--fg) 85%, transparent);
}
#scrollTopBtn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* ─── Language dropdown ──────────────────────────────── */
.lang-switcher { position: relative; }

.lang-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 120px;
    z-index: 200;
    overflow: hidden;
}
.lang-dropdown.open { display: block; }

.lang-dropdown button {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    color: var(--fg);
    cursor: pointer;
    text-align: left;
    font: 400 0.875rem/1.4 var(--font-body);
    transition: background var(--duration-base) var(--ease-standard);
}
.lang-dropdown button:hover {
    background: color-mix(in oklch, var(--fg) 8%, transparent);
}
.lang-dropdown button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
}

/* ─── Page content wrapper ───────────────────────────── */
.page-content {
    padding: 0 10vw;
    margin-bottom: var(--space-8);
}

/* ─── Headings ───────────────────────────────────────── */
h1 {
    font: 800 clamp(2.25rem, 2.5vw + 1rem, 3.25rem)/1.1 var(--font-heading);
    letter-spacing: -0.01em;
    color: var(--fg-strong);
    margin: var(--space-8) 0 var(--space-5);
    text-align: center;
    font-feature-settings: "case" 1, "zero" 1, "calt" 1;
}
h2 {
    font: 600 clamp(1.75rem, 1.5vw + 1rem, 2.5rem)/1.15 var(--font-heading);
    letter-spacing: -0.01em;
    color: var(--fg-strong);
    padding-bottom: var(--space-2);
    margin-top: var(--space-8);
    font-feature-settings: "case" 1, "zero" 1, "calt" 1;
}

/* ─── Explainer ──────────────────────────────────────── */
#explainer {
    text-align: center;
    padding: var(--space-4) 0 var(--space-6);
    color: var(--fg-muted);
    font: 300 1.125rem/1.65 var(--font-body);
    max-width: 65ch;
    margin: 0 auto;
}

/* ─── Section navigation ─────────────────────────────── */
#navigation {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-5) 0;
}
#navigation a {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    color: var(--fg);
    text-decoration: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font: 400 0.875rem/1 var(--font-body);
    transition: background var(--duration-base) var(--ease-standard),
                color var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard);
}
#navigation a:hover {
    background: var(--button-bg);
    color: var(--button-fg);
    border-color: var(--button-bg);
}
#navigation a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* ─── Search ─────────────────────────────────────────── */
#search-div {
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-5);
}
#search-box {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font: 400 1.05rem/1.4 var(--font-body);
    background: var(--bg-elevated);
    color: var(--fg);
    transition: border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
}
#search-box:focus {
    outline: none;
    border-color: var(--fg);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}
#search-box::placeholder { color: var(--fg-muted); }

/* ─── Cards ──────────────────────────────────────────── */
.box-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.alternative-box,
.search-box {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-sm);
    text-align: center;
    min-width: min-content;
    position: relative;
    transition: box-shadow var(--duration-base) var(--ease-standard);
}
.alternative-box:hover,
.search-box:hover {
    box-shadow: var(--shadow-md);
}

/* ─── Loader ─────────────────────────────────────────── */
.loader-small,
.loader-big {
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: relative;
    margin: auto;
}
.loader-small {
    border: 3px solid var(--border);
    border-top: 3px solid var(--fg);
    width: 20px;
    height: 20px;
    margin-right: var(--space-2);
}
.loader-big {
    border: 8px solid var(--border);
    border-top: 8px solid var(--fg);
    width: 60px;
    height: 60px;
    margin-top: var(--space-7);
}
@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ─── Links ──────────────────────────────────────────── */
a, a:visited, a:focus, a:hover, a:active { color: inherit; }
.link {
    text-decoration: underline dotted;
    text-underline-offset: 4px;
    text-decoration-thickness: 2.75px;
}
a:visited.link { text-decoration: underline dashed; text-decoration-thickness: 50%; }
a:focus.link,
a:hover.link,
a:active.link {
    text-decoration: underline wavy;
    text-underline-offset: 2px;
}

/* ─── Modal ──────────────────────────────────────────── */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: rgba(0,0,0,.55);
    padding: var(--space-8) var(--space-5);
    overflow: auto;
}
.modal-content {
    background: var(--bg-elevated);
    color: var(--fg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}
.modal-content h2 {
    font: 600 1.5rem/1.2 var(--font-heading);
    color: var(--fg-strong);
    margin-top: 0;
    font-feature-settings: "case" 1, "calt" 1;
}
.modal-text { padding-bottom: var(--space-5); }
.close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-5);
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--fg-muted);
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}
.close:hover { color: var(--fg); }
.close:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* ─── Footer ─────────────────────────────────────────── */
.site-footer {
    margin-top: var(--space-9);
    border-top: 1px solid var(--border-strong);
    padding: var(--space-6) 10vw var(--space-7);
    text-align: center;
    font: 400 0.875rem/1.6 var(--font-body);
    color: var(--fg-muted);
}
.site-footer .footer-extras {
    margin-top: var(--space-3);
}
.site-footer .legal-links {
    margin-top: var(--space-4);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

/* ─── Detailed AI view ───────────────────────────────── */
.alternative-box.detailed,
.search-box.detailed {
    text-align: left;
}
.alternative-box.detailed .inside-box,
.search-box.detailed .inside-box {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.alternative-content {
    min-width: 0;
    flex: 1 1 auto;
}
.detail-desc {
    font-size: 0.825rem;
    color: var(--fg-muted);
    line-height: 1.55;
    margin: var(--space-3) 0 var(--space-2);
}
.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
}
.detail-tag {
    font-size: 0.72rem;
    line-height: 1;
    padding: 3px var(--space-2);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    color: var(--fg-muted);
    white-space: nowrap;
}
.detail-tag--good {
    border-color: color-mix(in oklch, green 35%, var(--border-strong));
    color: color-mix(in oklch, green 55%, var(--fg));
}
.detail-tag--bad {
    border-color: color-mix(in oklch, var(--accent) 45%, var(--border-strong));
    color: var(--accent);
}
.detail-sustainability {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--fg-muted);
    margin: var(--space-2) 0 0;
}
.alternative-logo-box {
    flex: none;
    width: clamp(48px, 8vw, 67px);
    height: clamp(48px, 8vw, 67px);
    background: #ececec;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.alternative-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-1);
}
@media (min-width: 541px) {
    .alternative-box.detailed,
    .search-box.detailed {
        flex-basis: 100%;
    }
}

/* ─── Utility ────────────────────────────────────────── */
.hidden { display: none; }

/* ─── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 540px) {
    .page-content  { padding: 0 var(--space-5); }
    .site-footer   { padding: var(--space-6) var(--space-5) var(--space-7); }
    .topbar        { padding: var(--space-3) var(--space-4); }
    .info-button span { display: none; }
}
@media (min-width: 541px) {
    .alternative-box,
    .search-box {
        flex-basis: calc(35% - var(--space-3));
    }
}