/* Funquizo design-system foundation. Existing feature layouts remain separate
   until their individual migration and visual verification are complete. */
@layer tokens, base, layout, components, utilities;
@layer tokens {
:root {
        --fq-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --fq-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        --fq-color-primary: #7c3aed; --fq-color-primary-dark: #6d28d9;
        --fq-color-play: #ec4899; --fq-color-multiplayer: #10b981; --fq-color-multiplayer-dark: #059669;
        --fq-color-text: #1e293b; --fq-color-text-muted: #64748b; --fq-color-border: #e2e8f0;
        --fq-color-border-control: #cbd5e1; --fq-color-surface: #fff; --fq-color-surface-muted: #f8fafc;
        --fq-color-danger: #b91c1c; --fq-color-success: #15803d; --fq-color-focus: rgba(124,58,237,.2);
        --fq-space-1: .25rem; --fq-space-2: .5rem; --fq-space-3: .75rem; --fq-space-4: 1rem;
        --fq-space-5: 1.25rem; --fq-space-6: 1.5rem; --fq-space-8: 2rem; --fq-space-12: 3rem;
        --fq-radius-sm: 8px; --fq-radius-control: 12px; --fq-radius-card: 20px; --fq-radius-cta: 24px; --fq-radius-pill: 999px;
        --fq-card-gap-compact: .75rem; --fq-card-gap-default: 1.5rem; --fq-card-gap-comfortable: 2.5rem;
        --fq-section-gap-before: 4rem;
        --fq-shadow-sm: 0 4px 12px rgba(15,23,42,.06); --fq-shadow-md: 0 12px 30px rgba(15,23,42,.08);
    }
}

/* Shared content-card badges. Larger quiz/question badges intentionally keep their page-specific design. */
:root {
    --fq-content-badge-font-family: var(--fq-font-sans);
    --fq-content-badge-font-size: .8rem;
    --fq-content-badge-font-weight: 600;
    --fq-content-badge-line-height: 1.2;
}

.fq-search-card-badge,
.latest-badge,
.recent-feed-badge,
.feed-card-badge,
.daily-wyr-card-badge,
.riddle-hub-badge,
.trivia-hub-latest-badge {
    font-family: var(--fq-content-badge-font-family) !important;
    font-size: var(--fq-content-badge-font-size) !important;
    font-weight: var(--fq-content-badge-font-weight) !important;
    line-height: var(--fq-content-badge-line-height) !important;
}

/* Compact true/false controls used in the homepage/latest feed. */
.recent-feed-item .tf-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1.25rem;
    border-radius: 14px;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: normal;
    text-transform: none;
}
    /* Switch styling for settings */
    #consent-functional:checked + .slider,
    #consent-analytics:checked + .slider { background-color: #10b981; }
    #consent-functional:checked + .slider:before,
    #consent-analytics:checked + .slider:before { transform: translateX(20px); }
    .slider:before {
        position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px;
        background-color: white; transition: .4s; border-radius: 50%;
    }
    @media (max-width: 600px) {
        #cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 1.5rem; }
    }
@layer base {
    :where(button,input,select,textarea) { font-family: var(--fq-font-sans); }
    :where(.creator-shell,.creator-shell h1,.creator-shell h2,.creator-shell h3,.creator-shell button,.creator-shell input,.creator-shell select,.creator-shell textarea) { font-family: var(--fq-font-sans); }
    :where(button,a,input,select,textarea):focus-visible { outline: 3px solid var(--fq-color-focus); outline-offset: 2px; }
    @media (prefers-reduced-motion: reduce) {
        :where(*,*::before,*::after) { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }
}
@layer components {
    .fq-header-search { display:flex; align-items:center; margin-left:auto; margin-right:1.5rem; border:1px solid #dbe3ef; border-radius:999px; background:#fff; overflow:hidden; height:40px; }
    .fq-header-search input { width:150px; border:0; outline:0; padding:.55rem .75rem .55rem 1rem; color:var(--fq-color-text); background:transparent; }
    .fq-header-search button { border:0; background:transparent; color:var(--fq-color-text-muted); font-size:1.35rem; line-height:1; padding:.35rem .75rem; cursor:pointer; }
    .fq-search-page { max-width:900px; padding-top:3rem; padding-bottom:5rem; }
    .fq-search-page { width:calc(100% - 2rem); margin-left:auto; margin-right:auto; box-sizing:border-box; }
    .fq-search-intro { text-align:center; margin-bottom:1.5rem; }
    .fq-search-intro h1 { margin:0 0 1rem; }
    .fq-search-intro p { margin:0; }
    .fq-search-kicker { color:var(--fq-color-primary); font-weight:800; margin-bottom:.25rem; }
    .fq-search-form { display:flex; align-items:center; gap:1rem; }
    .fq-search-form input { flex:1; min-width:0; border:1px solid var(--fq-color-border-control); border-radius:var(--fq-radius-control); padding:.95rem 1.15rem; font:inherit; background:#fff; }
    .fq-search-form button { border:0; border-radius:var(--fq-radius-control); padding:.85rem 1.1rem; min-width:3.25rem; background:var(--fq-color-primary); color:#fff; font-weight:800; cursor:pointer; }
    .fq-search-form { margin-bottom:1.5rem; }
    .fq-search-results-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-top:2.5rem; padding-bottom:.8rem; border-bottom:1px solid var(--fq-color-border); }
    .fq-search-results-heading h2 { font-size:1.25rem; }
    .fq-search-results-heading > span,.fq-search-group-heading > span { color:var(--fq-color-text-muted); font-size:.88rem; white-space:nowrap; }
    .fq-search-groups { display:grid; gap:2rem; margin-top:1.5rem; }
    .fq-search-filters { display:flex; gap:.5rem; margin-top:1rem; padding:.25rem 0 .5rem; overflow-x:auto; scrollbar-width:thin; }
    .fq-search-filters button { display:inline-flex; align-items:center; gap:.45rem; flex:0 0 auto; padding:.65rem .9rem; border:1px solid var(--fq-color-border-control); border-radius:var(--fq-radius-control); background:#fff; color:#475569; font:inherit; font-size:.88rem; font-weight:700; cursor:pointer; }
    .fq-search-filters button span { color:#94a3b8; font-size:.8rem; }
    .fq-search-filters button:hover { border-color:#a78bfa; background:#faf5ff; color:#5b21b6; }
    .fq-search-filters button.is-active { border-color:var(--fq-color-primary); background:#ede9fe; color:#5b21b6; }
    .fq-search-filters button.is-active span { color:var(--fq-color-primary); }
    .fq-search-group { min-width:0; }
    .fq-search-group-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
    .fq-search-group-heading h3 { font-size:1.05rem; }
    .fq-search-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
    .fq-search-result { display:flex; flex-direction:column; justify-content:space-between; gap:.75rem; min-height:130px; text-decoration:none; color:var(--fq-color-text); background:#fff; border:1px solid var(--fq-color-border); border-radius:var(--fq-radius-control); padding:1.15rem 1.2rem; transition:border-color .15s, transform .15s, box-shadow .15s; }
    .fq-search-result:hover { border-color:var(--fq-color-primary); transform:translateY(-1px); }
    .fq-search-result strong { line-height:1.4; }
    .fq-search-result-action { color:var(--fq-color-primary); font-size:.84rem; font-weight:750; }
    .fq-search-empty { margin-top:1.5rem; color:var(--fq-color-text-muted); }
    .fq-search-message { margin-top:1.25rem; padding:.85rem 1rem; border:1px solid #fbbf24; border-radius:var(--fq-radius-control); background:#fffbeb; color:#92400e; }
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .lang-dropdown { position:relative; padding-bottom:1rem; margin-bottom:-1rem; }
    .lang-btn { display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; background:#f8fafc; border:1px solid var(--fq-color-border); border-radius:var(--fq-radius-pill); color:var(--fq-color-text); font:700 .85rem/1.2 var(--fq-font-sans); cursor:pointer; transition:all .2s; }
    .lang-btn:hover,.lang-btn:focus-visible { background:#fff; border-color:var(--fq-color-primary); box-shadow:0 4px 12px rgba(0,0,0,.05); }
    .lang-dropdown-content { position:absolute; top:100%; right:0; background:#fff; min-width:180px; box-shadow:0 10px 30px rgba(0,0,0,.12); border-radius:16px; padding:.8rem 0; display:none; z-index:1100; border:1px solid var(--fq-color-border); margin-top:-.2rem; }
    .lang-dropdown:hover .lang-dropdown-content,.lang-dropdown:focus-within .lang-dropdown-content { display:block; }
    .lang-option { display:flex; justify-content:space-between; align-items:center; gap:.7rem; padding:.7rem 1.5rem; color:#475569; text-decoration:none; font:600 .9rem/1.2 var(--fq-font-sans); transition:all .2s; }
    .lang-option:hover,.lang-option:focus-visible { background:#f8fafc; color:var(--fq-color-primary); }
    .lang-option.active { color:var(--fq-color-primary); background:#f5f3ff; }
    .lang-option .lang-code { font-size:.7rem; opacity:.5; text-transform:uppercase; }
    .mobile-lang-switcher p { font-size:.8rem; font-weight:700; color:var(--fq-color-text-muted); text-transform:uppercase; margin-bottom:1rem; }
    .lang-options { display:flex; justify-content:center; gap:1rem; }
    .lang-options a { text-decoration:none; padding:.8rem 1.5rem; background:#f1f5f9; border-radius:var(--fq-radius-control); font-weight:800; color:var(--fq-color-text); }
    .lang-options a.active { background:var(--fq-color-primary); color:#fff; }
    .button { display:inline-flex; align-items:center; justify-content:center; gap:var(--fq-space-2); min-height:2.75rem; padding:.7rem 1rem; border:1px solid transparent; border-radius:var(--fq-radius-control); background:var(--fq-color-surface-muted); color:var(--fq-color-text); font:700 1rem/1.2 var(--fq-font-sans); text-decoration:none; cursor:pointer; transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease; }
    .button:hover { transform:translateY(-1px); }
    .button--primary { background:var(--fq-color-primary); color:#fff; }
    .button--play { background:var(--fq-color-play); color:#fff; border-radius:var(--fq-radius-cta); }
    .button--danger { background:#fef2f2; color:var(--fq-color-danger); }
    .button--ghost { background:transparent; border-color:var(--fq-color-border-control); }
    .button--lg { min-height:3.25rem; padding:.9rem 1.5rem; border-radius:var(--fq-radius-cta); }
    .button--block { width:100%; }
    .button:disabled,.button.is-disabled { opacity:.55; cursor:not-allowed; transform:none; }
    .form-control { width:100%; box-sizing:border-box; min-height:2.75rem; padding:.7rem .8rem; border:1px solid var(--fq-color-border-control); border-radius:var(--fq-radius-control); background:var(--fq-color-surface); color:var(--fq-color-text); font:400 1rem/1.35 var(--fq-font-sans); }
    .form-control:focus { border-color:var(--fq-color-primary); }
    .card { background:var(--fq-color-surface); border:1px solid var(--fq-color-border); border-radius:var(--fq-radius-card); box-shadow:var(--fq-shadow-sm); }
    .badge { display:inline-flex; align-items:center; gap:var(--fq-space-1); max-width:100%; border-radius:var(--fq-radius-pill); white-space:normal; }
}
@layer utilities {
    .u-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
}
@media (max-width: 768px) {
    .fq-header-search { margin-left:.75rem; margin-right:.75rem; flex:1; height:36px; }
    .fq-header-search input { width:100%; min-width:0; }
    .fq-account-link--join { display:none; }
    .fq-search-results { grid-template-columns:1fr; }
    .fq-search-result { min-height:auto; }
}

/* Compatibility lock: the language menu is a global component, but its
   established appearance must remain identical while the rest is migrated. */
.fq-site-header .lang-dropdown { position:relative; padding-bottom:1rem; margin-bottom:-1rem; }
.fq-site-header .lang-btn { display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; background:#f8fafc; border:1px solid #e2e8f0; border-radius:99px; color:#1e293b; font:700 .85rem/1.2 var(--fq-font-sans); cursor:pointer; transition:all .2s; }
.fq-site-header .lang-btn:hover,.fq-site-header .lang-btn:focus-visible { background:#fff; border-color:#7c3aed; box-shadow:0 4px 12px rgba(0,0,0,.05); }
.fq-site-header .lang-dropdown-content { position:absolute; top:100%; right:0; background:#fff; min-width:180px; box-shadow:0 10px 30px rgba(0,0,0,.12); border-radius:16px; padding:.8rem 0; display:none; z-index:1100; border:1px solid #e2e8f0; margin-top:-.2rem; }
.fq-site-header .lang-dropdown:hover .lang-dropdown-content,.fq-site-header .lang-dropdown:focus-within .lang-dropdown-content { display:block; }
.fq-site-header .lang-option { display:flex; justify-content:space-between; align-items:center; gap:.7rem; padding:.7rem 1.5rem; color:#475569; text-decoration:none; font:600 .9rem/1.2 var(--fq-font-sans); transition:all .2s; }
.fq-site-header .lang-option:hover,.fq-site-header .lang-option:focus-visible { background:#f8fafc; color:#7c3aed; }
.fq-site-header .lang-option.active { color:#7c3aed; background:#f5f3ff; }
.fq-site-header .lang-option .lang-code { font-size:.7rem; opacity:.5; text-transform:uppercase; }

/* Shared spacing owner for lists of cards. The list controls sibling spacing;
   cards must not add a second outer margin. */
.fq-card-list { --fq-card-list-gap: var(--fq-card-gap-default); display:grid; gap:var(--fq-card-list-gap); }
.fq-card-list--compact { --fq-card-list-gap: var(--fq-card-gap-compact); }
.fq-card-list--comfortable { --fq-card-list-gap: var(--fq-card-gap-comfortable); }
.fq-card-list > .fq-card-item { margin-block:0 !important; }
.fq-section--after-featured { margin-top: var(--fq-section-gap-before) !important; }

/* Shared primary game CTAs used by the Gåtor, Frågesport and Sant eller
   Falskt hubs. These belong to the global component layer because the same
   markup is used across several page families. */
.cta-buttons-container-test {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
    box-sizing: border-box;
}
.funquizo-cta-test {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 345px;
    max-width: 100%;
    min-height: 84px;
    padding: .5rem 1.5rem;
    border: 0;
    border-radius: var(--fq-radius-cta);
    box-sizing: border-box;
    color: #fff;
    font-family: var(--fq-font-sans);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.funquizo-cta-test .cta-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    color: inherit;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.funquizo-cta-test .cta-subtitle {
    margin-top: .15rem;
    color: inherit;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: .02em;
    text-transform: none;
    opacity: .9;
}
.funquizo-cta-test.solo {
    background: var(--fq-color-play);
    box-shadow: 0 10px 20px rgba(236,72,153,.3);
}
.funquizo-cta-test.solo:hover {
    background: #db2777;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(236,72,153,.4);
}
.funquizo-cta-test.multi {
    background: var(--fq-color-primary);
    box-shadow: 0 10px 20px rgba(124,58,237,.25);
}
.funquizo-cta-test.multi:hover {
    background: var(--fq-color-primary-dark);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(124,58,237,.35);
}
.funquizo-cta-test:active { transform: translateY(0); }
@media (max-width: 768px) {
    .cta-buttons-container-test { flex-direction: column; gap: 1rem; }
    .funquizo-cta-test { width: 100%; max-width: 345px; }
}

/* Shared true/false answer controls. The large answer treatment is used by
   preview cards on multiple hubs; compact hub/list variants can override it
   with their more specific selectors. */
.tf-choice-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2rem;
}
.tf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem;
    border: 2px solid;
    border-radius: 25px;
    cursor: pointer;
    font: 900 1.1rem/1.2 var(--fq-font-sans);
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: transform .2s, background-color .2s, border-color .2s;
}
.tf-btn-true { background:#ecfdf5; border-color:#d1fae5; color:#065f46; }
.tf-btn-false { background:#fff1f2; border-color:#ffe4e6; color:#9f1239; }
.tf-btn-true:hover { background:#d1fae5; border-color:#10b981; transform:translateY(-2px); }
.tf-btn-false:hover { background:#ffe4e6; border-color:#f43f5e; transform:translateY(-2px); }
@media (max-width: 600px) {
    .tf-choice-row { gap: .75rem; }
    .tf-btn { padding: 1.25rem .75rem; font-size: .95rem; }
}

/* Search page layout override: keep the page rhythm independent from the
   legacy global .container rules. */
.fq-search-page {
    width: min(900px, calc(100% - 2rem));
    max-width: 900px;
    margin: 0 auto;
    padding: 3.5rem 0 5rem;
    box-sizing: border-box;
}
.fq-search-intro { margin: 0 0 2rem; }
.fq-search-intro h1 { margin: 0 0 1rem; }
.fq-search-intro p { margin: 0; }
.fq-search-form { margin: 0 0 2rem; }
.fq-search-results-heading { margin-top: 0; margin-bottom: 0; }
.fq-search-filters { margin: 1rem 0 2rem; }
.fq-search-groups { gap: 2.5rem; margin-top: 0; }
.fq-search-group-heading { margin-bottom: 1rem; }
.fq-search-results { gap: 1rem; }
.fq-search-result { min-height: 130px; padding: 1.2rem 1.25rem; }
@media (max-width: 768px) {
    .fq-search-page { width: calc(100% - 1.5rem); padding-top: 2rem; }
    .fq-search-intro { margin-bottom: 1.5rem; }
    .fq-search-form { margin-bottom: 1.5rem; }
    .fq-search-filters { margin-bottom: 1.5rem; }
    .fq-search-groups { gap: 2rem; }
}