/* Shared site CSS. Theme files at /themes/{variant}/style.css load AFTER
   this file and override the colour palette + a handful of accents. */

:root {
    --bg: #ffffff;
    --fg: #111827;
    --muted: #6b7280;
    --accent: #2563eb;
    --accent-fg: #ffffff;
    --border: #e5e7eb;
    --card-bg: #f9fafb;
    --max: 1100px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

.container {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.site-header {
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
}
.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.site-brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--fg);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}
.site-brand:hover { text-decoration: none; }
.site-brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.site-brand-text { line-height: 1; }
.site-nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--fg); text-decoration: none; }

.site-main { padding: 2rem 0 4rem; }

/* ───────── Footer ───────── */
/* Solid dark band, full width, sits below all content with its own colour
   palette so the visual break is clear regardless of the active theme.
   Falls back to the theme accent for the heading underlines. */
.site-footer {
    --footer-bg:        #0e1117;
    --footer-bg-bottom: #060810;
    --footer-fg:        #e5e7eb;
    --footer-muted:     #94a3b8;
    --footer-border:    rgba(255, 255, 255, 0.08);

    margin-top: 4rem;
    padding: 3rem 0 0;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 8%, var(--footer-bg)) 0,
            var(--footer-bg) 120px,
            var(--footer-bg) 100%);
    color: var(--footer-fg);
    font-size: 0.92rem;
    border-top: 3px solid var(--accent);
}
.site-footer a { color: var(--footer-fg); }
.site-footer a:hover { color: var(--accent); text-decoration: none; }

.footer-widgets {
    display: grid;
    /* auto-fit + minmax(220px, 1fr) gives 4 columns on full-width container,
       3 columns on tablet/laptop down to ~880px and 2 columns down to ~440px.
       Single column only kicks in on narrow phone widths, matching the
       chaturbate.nl behaviour. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.25rem;
    padding: 0 0 2rem;
}
/* Force at least 2 columns even on very narrow phones unless the screen
   is really tight; below 440px we collapse to a single column. */
@media (max-width: 440px) {
    .footer-widgets { grid-template-columns: 1fr; gap: 1.5rem; }
}

.footer-widget { min-width: 0; }
.footer-widget-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1rem;
    padding-bottom: 0.55rem;
    position: relative;
}
.footer-widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.footer-widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-widget-list li {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--footer-border);
    line-height: 1.4;
}
.footer-widget-list li:last-child { border-bottom: 0; }
.footer-widget-list a {
    color: var(--footer-fg);
    opacity: 0.78;
    font-size: 0.88rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s ease, opacity 0.15s ease, padding-left 0.15s ease;
}
.footer-widget-list a:hover {
    color: var(--accent);
    opacity: 1;
    padding-left: 4px;
}
.footer-widget-empty {
    font-style: italic;
    color: var(--footer-muted);
    margin: 0;
    font-size: 0.86rem;
}
.footer-widget-meta {
    margin: 0.85rem 0 0;
    font-size: 0.88rem;
}
.footer-widget-meta a {
    color: var(--accent);
    font-weight: 500;
}

.footer-about-text {
    color: var(--footer-fg);
    opacity: 0.82;
    line-height: 1.6;
    font-size: 0.86rem;
    margin: 0 0 0.5rem;
}

/* Bottom bar: centered links + copyright on a slightly darker strip. */
.footer-bottom {
    background: var(--footer-bg-bottom);
    margin: 0 calc(-1 * 1.25rem);
    padding: 1.1rem 1.25rem;
    border-top: 1px solid var(--footer-border);
    text-align: center;
}
.footer-nav {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 0.5rem;
}
.footer-nav a {
    color: var(--footer-muted);
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.footer-nav a:hover { color: #ffffff; }

.footer-rta {
    font-size: 0.82rem;
    color: var(--footer-muted);
    margin: 0.3rem 0 0;
}
.footer-rta a { color: var(--footer-muted); }
.footer-copy {
    font-size: 0.8rem;
    color: var(--footer-muted);
    margin: 0;
    opacity: 0.85;
}

/* Push footer above the fixed cookie banner so it's never hidden by it.
   When the banner has been dismissed (cookie set), JS removes the class
   from <body> and the padding goes back to 0. */
body.bbc-cookie-active { padding-bottom: 110px; }
@media (max-width: 600px) {
    body.bbc-cookie-active { padding-bottom: 180px; }
}

.hero { padding: 1.5rem 0 2rem; }
.hero h1 { font-size: 2rem; margin: 0 0 0.5rem; }
.hero-tagline { color: var(--muted); margin: 0; }

.empty { color: var(--muted); font-style: italic; }

.recent h2,
.category-header h1,
.author-header h1,
.article-header h1 { font-size: 1.75rem; margin: 0 0 0.75rem; }

.category-header { margin-bottom: 1.75rem; }
.category-description {
    color: var(--fg);
    opacity: 0.92;
    font-size: 1rem;
    line-height: 1.65;
    max-width: 760px;
    padding: 1rem 1.2rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0 0.4rem 0.4rem 0;
    margin: 0.5rem 0 0;
}
.category-description p { margin: 0 0 0.75rem; }
.category-description p:last-child { margin-bottom: 0; }

/* About page styling */
.about-page { max-width: 760px; margin: 0 auto; }
.about-page .lead {
    font-size: 1.08rem;
    color: var(--fg);
    opacity: 0.88;
    border-left: 3px solid var(--accent);
    padding: 12px 16px;
    background: var(--card-bg);
    border-radius: 0 6px 6px 0;
    margin-bottom: 1.5rem;
}
.about-page h2 { font-size: 1.25rem; margin: 1.75rem 0 0.6rem; }
.about-page p { line-height: 1.7; margin: 0 0 1rem; }

.article-grid {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}
.article-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 1rem;
}
.article-card h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.article-card img { border-radius: 0.35rem; margin-bottom: 0.75rem; }
.article-meta { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.5rem; }
.article-excerpt { color: var(--muted); font-size: 0.95rem; margin: 0; }

.article-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}
.article-list li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: baseline;
}
.article-list time { color: var(--muted); font-size: 0.85rem; flex-shrink: 0; }

.article {
    max-width: 760px;
    margin: 0 auto;
}
.article-body { font-size: 1.05rem; }
.article-body h2 { font-size: 1.4rem; margin-top: 2rem; }
.article-body h3 { font-size: 1.15rem; margin-top: 1.5rem; }
.article-body p, .article-body li { margin-bottom: 1rem; }
.article-body pre {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
}
.article-body img.featured,
.article img.featured {
    border-radius: 0.5rem;
    margin: 1rem 0;
}

.breadcrumbs {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs span { margin: 0 0.25rem; }

.article-faq dt { font-weight: 600; margin-top: 1rem; }
.article-faq dd { margin: 0.25rem 0 0; color: var(--fg); }

.article-related { margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.article-related ul { list-style: square; padding-left: 1.25rem; }

.author-header { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
.author-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

.faq-list dt { font-weight: 600; margin-top: 1rem; }
.faq-list dd { margin: 0.25rem 0 0; }

@media (max-width: 600px) {
    .site-header .container { flex-direction: column; align-items: flex-start; }
    .site-nav { width: 100%; }
    .site-search { width: 100%; }
}

/* ───────── Header search + autosuggest ───────── */
.site-search {
    position: relative;
    margin-left: auto;
    flex: 0 1 280px;
    min-width: 200px;
}
.site-search input[type="search"] {
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-soft, #fff);
    color: var(--fg);
    font: inherit;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.site-search input[type="search"]:focus {
    outline: none;
    border-color: var(--accent, #58a6ff);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.18);
}
.site-search-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--bg-soft, #fff);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    max-height: 60vh;
    overflow-y: auto;
}
.site-search-group {
    padding: 4px 12px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    border-top: 1px solid var(--border);
}
.site-search-suggest > li.site-search-group:first-child { border-top: 0; }
.site-search-item {
    padding: 7px 12px;
    cursor: pointer;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.site-search-item:hover,
.site-search-item.is-active {
    background: rgba(88, 166, 255, 0.12);
}
.site-search-item-category::before { content: "# "; color: var(--muted); }
.site-search-item-article::before  { content: "→ "; color: var(--muted); }

/* Search results page */
.search-header { margin-bottom: 1.5rem; }
.search-page-form {
    display: flex; gap: 0.5rem; margin-top: 0.75rem; max-width: 520px;
}
.search-page-form input[type="search"] {
    flex: 1; padding: 0.5rem 0.75rem; font: inherit;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-soft, #fff); color: var(--fg);
}
.search-page-form button {
    padding: 0.5rem 1rem; font: inherit;
    border: 1px solid var(--accent, #58a6ff);
    background: var(--accent, #58a6ff); color: #fff;
    border-radius: 6px; cursor: pointer;
}
.search-section { margin: 1.5rem 0; }
.search-section h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results li { padding: 0.35rem 0; border-bottom: 1px dashed var(--border); }
.search-results li:last-child { border-bottom: 0; }

/* ───────── Phase 8: brand disclaimer banner (homepage top) ───────── */
.brand-disclaimer-banner {
    background: #fff8e1;
    color: #5d4d00;
    border: 1px solid #f0c900;
    border-left: 4px solid #f0c900;
    padding: 10px 14px;
    margin: 0 0 18px;
    font-size: 0.92em;
    line-height: 1.45;
    border-radius: 4px;
}
.brand-disclaimer-banner strong { margin-right: 4px; }
@media (prefers-color-scheme: dark) {
    .brand-disclaimer-banner { background: #2a240b; color: #fde79a; border-color: #b58900; }
}

/* ───────── Phase 8: cookie consent banner ───────── */
.bbc-cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #1f2329;
    color: #f1f3f5;
    border-top: 3px solid #1f6feb;
    padding: 14px 20px;
    z-index: 9999;
    font-size: 0.92em;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.28);
}
.bbc-cookie-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
}
.bbc-cookie-msg { flex: 1 1 320px; margin: 0; }
.bbc-cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bbc-cookie-btn {
    background: #1f6feb;
    color: #fff;
    border: 0;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95em;
}
.bbc-cookie-btn.bbc-cookie-decline {
    background: transparent;
    color: #c9d1d9;
    border: 1px solid #444c56;
}
.bbc-cookie-btn:hover { filter: brightness(1.12); }
.bbc-cookie-link {
    color: #c9d1d9;
    text-decoration: underline;
    align-self: center;
    font-size: 0.92em;
}
@media (max-width: 600px) {
    .bbc-cookie-banner { padding: 12px 14px; }
    .bbc-cookie-inner { flex-direction: column; align-items: stretch; }
    .bbc-cookie-actions { justify-content: flex-end; }
}
.footer-nav .bbc-cookie-manage { cursor: pointer; }

/* ───────── Contact form ───────── */
.bbc-contact-form {
    display: grid;
    gap: 16px;
    max-width: 620px;
    margin: 24px 0;
    padding: 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.bbc-contact-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--fg);
}
.bbc-contact-form input,
.bbc-contact-form textarea {
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    font: inherit;
    font-size: 0.95rem;
    background: var(--bg);
    color: var(--fg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}
.bbc-contact-form input:focus,
.bbc-contact-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.bbc-contact-form input::placeholder,
.bbc-contact-form textarea::placeholder { color: var(--muted); opacity: 0.7; }
.bbc-contact-form textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.bbc-contact-form .bbc-form-required { color: #dc2626; opacity: 0.85; margin-left: 2px; }
.bbc-contact-form .cf-turnstile { margin-top: 4px; }
.bbc-contact-form .bbc-submit-btn {
    background: var(--accent);
    color: var(--accent-fg);
    border: 0;
    padding: 12px 28px;
    border-radius: 0.4rem;
    cursor: pointer;
    font-size: 0.98rem;
    font-weight: 600;
    justify-self: start;
    transition: filter 0.15s ease, transform 0.05s ease;
}
.bbc-contact-form .bbc-submit-btn:hover { filter: brightness(1.08); }
.bbc-contact-form .bbc-submit-btn:active { transform: translateY(1px); }
.bbc-contact-form .bbc-submit-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.bbc-form-msg-ok  {
    padding: 12px 14px;
    background: color-mix(in srgb, #34a853 14%, var(--bg));
    border: 1px solid #34a853;
    color: #186629;
    border-radius: 0.4rem;
    margin: 12px 0;
}
.bbc-form-msg-err {
    padding: 12px 14px;
    background: color-mix(in srgb, #d93025 14%, var(--bg));
    border: 1px solid #d93025;
    color: #8a1a14;
    border-radius: 0.4rem;
    margin: 12px 0;
}
@media (prefers-color-scheme: dark) {
    .bbc-form-msg-ok  { color: #79e0a3; }
    .bbc-form-msg-err { color: #ffb3ad; }
}
@media (max-width: 600px) {
    .bbc-contact-form { padding: 1.1rem; }
    .bbc-contact-form .bbc-submit-btn { width: 100%; justify-self: stretch; text-align: center; }
}

/* ───────── Phase 8: article author avatar + meta line ───────── */
.article-header .article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    color: var(--muted);
    font-size: 0.92rem;
    margin: 0 0 18px;
}
.article-author-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}
.article-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--border);
    border: 1px solid var(--border);
}
.article-author-name { display: inline-flex; flex-direction: column; line-height: 1.2; }
.article-author-prefix { font-size: 0.78rem; opacity: 0.7; }
.article-author-name strong { color: var(--text); font-weight: 600; }
.article-meta-extras { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.meta-sep { opacity: 0.5; }

/* ───────── Phase 8: comments section on article ───────── */
.bbc-comments {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border);
}
.bbc-comments h2 {
    font-size: 1.5rem;
    margin: 0 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bbc-comments h2::before {
    content: "";
    display: inline-block;
    width: 22px; height: 22px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}
.bbc-comments-count {
    display: inline-block;
    background: var(--card-bg);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
}

.bbc-comments-empty {
    color: var(--muted);
    font-style: italic;
    padding: 1rem 0;
    text-align: center;
    background: var(--card-bg);
    border-radius: 0.5rem;
    margin: 0 0 2rem;
}

.bbc-comments-list { list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; gap: 14px; }
.bbc-comment {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    transition: border-color 0.15s ease;
}
.bbc-comment:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.bbc-comment-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--bg);
    border: 2px solid var(--bg);
    box-shadow: 0 0 0 1px var(--border);
}
.bbc-comment-body { flex: 1 1 auto; min-width: 0; }
.bbc-comment-meta {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 6px;
}
.bbc-comment-meta strong { color: var(--fg); font-weight: 600; }
.bbc-comment-meta a { color: var(--fg); }
.bbc-comment-meta time { font-size: 0.8rem; opacity: 0.85; }
.bbc-comment-text { margin: 0; line-height: 1.6; word-wrap: break-word; }

/* Form: card style with accent border on focus */
.bbc-comments-form-title {
    font-size: 1.2rem;
    margin: 1rem 0 0.4rem;
    font-weight: 600;
}
.bbc-comments-form-intro {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0 0 1.25rem;
}
.bbc-comments-form {
    display: grid;
    gap: 14px;
    max-width: 720px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 1.25rem;
}
.bbc-comments-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--fg);
}
.bbc-comments-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.bbc-comments-form input,
.bbc-comments-form textarea {
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    font: inherit;
    font-size: 0.95rem;
    background: var(--bg);
    color: var(--fg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}
.bbc-comments-form input:focus,
.bbc-comments-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.bbc-comments-form input::placeholder,
.bbc-comments-form textarea::placeholder { color: var(--muted); opacity: 0.7; }
.bbc-comments-form textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.55;
}
.bbc-comments-form .bbc-form-required { color: #dc2626; opacity: 0.85; margin-left: 2px; }
.bbc-comments-form .cf-turnstile { margin-top: 4px; }

.bbc-comments-form .bbc-submit-btn {
    background: var(--accent);
    color: var(--accent-fg);
    border: 0;
    padding: 12px 28px;
    border-radius: 0.4rem;
    cursor: pointer;
    font-size: 0.98rem;
    font-weight: 600;
    justify-self: start;
    transition: filter 0.15s ease, transform 0.05s ease;
}
.bbc-comments-form .bbc-submit-btn:hover { filter: brightness(1.08); }
.bbc-comments-form .bbc-submit-btn:active { transform: translateY(1px); }
.bbc-comments-form .bbc-submit-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

@media (max-width: 600px) {
    .bbc-comments-form-row { grid-template-columns: 1fr; }
    .bbc-comments-form .bbc-submit-btn { width: 100%; justify-self: stretch; text-align: center; }
    .bbc-comment { padding: 14px; gap: 12px; }
    .bbc-comment-avatar { width: 38px; height: 38px; }
}

/* Dark-mode polish: card backgrounds invert via prefers-color-scheme.
   Theme variants (cam/gambling/crypto/dating/generic) override --bg
   and --card-bg via /themes/{variant}/style.css so this section follows
   the site palette automatically. */
@media (prefers-color-scheme: dark) {
    .bbc-comments h2::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
    }
    .bbc-comment { background: rgba(255,255,255,0.03); }
    .bbc-comments-form { background: rgba(255,255,255,0.02); }
    .bbc-comments-form input,
    .bbc-comments-form textarea {
        background: rgba(0,0,0,0.25);
    }
}

/* ───────── Phase 8: legal pages (privacy + terms) ───────── */
.legal-page { max-width: 760px; margin: 0 auto; }
.legal-page .lead {
    font-size: 1.05rem;
    color: var(--fg);
    opacity: 0.85;
    border-left: 3px solid var(--accent);
    padding: 12px 16px;
    background: var(--card-bg);
    border-radius: 0 6px 6px 0;
    margin-bottom: 1.5rem;
}
.legal-page h2 {
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}
.legal-page h3 { font-size: 1.05rem; margin-top: 1.25rem; }
.legal-page p, .legal-page li { line-height: 1.65; }
.legal-page ul { padding-left: 1.25rem; }
.legal-page code {
    background: var(--card-bg);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
    font-size: 0.88em;
}
.legal-disclaimer {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.85rem;
    font-style: italic;
}