/*
 * Copyright (C) 2026-Present ComiCine
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * Section 7 additional terms apply when the work is used under GNU AGPL v3.
 * See ADDITIONAL_TERMS.txt.
 */

/* ComiCine site-wide base styles.
   Design tokens such as colors, radii, and easing live in tokens.css as the single source of truth.
   This file contains structural styles for typography, the header, and the footer. */
        :root { --theme-transition-duration: 250ms; }

        /* Global base styles. */
        html, body {
            margin: 0; padding: 0; width: 100%; height: 100%;
            background-color: var(--bg) !important;
            color: var(--text);
            overflow: hidden;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            -webkit-font-smoothing: antialiased;
            font-weight: 500;
        }

        .site-nav {
            position: fixed; top: 0; left: 0; width: 100%; height: 70px; z-index: 100;
            box-sizing: border-box; border-bottom: 1px solid var(--line); background: var(--bg);
        }
        @media (min-width: 768px) {
            .site-nav { height: 100px; }
        }
        .site-nav .nav-inner {
            display: flex; align-items: center; width: 100%; max-width: 80rem; height: 100%;
            margin: 0 auto; padding-inline: 20px;
        }
        @media (min-width: 768px) {
            .site-nav .nav-inner { padding-inline: 2rem; }
        }
        .site-nav .nav-brand-link {
            display: flex; align-items: center; flex-shrink: 0; text-decoration: none;
        }
        .site-nav .nav-brand-logo {
            display: block; width: 64px; height: 64px; object-fit: contain;
        }
        .site-nav .nav-right { display: flex; align-items: center; margin-inline-start: auto; }

        * { -webkit-tap-highlight-color: transparent; }

        /* The SVG brand mark keeps its intrinsic proportions and scales for smaller screens. */
        .nav-brand {
            font-family: 'Baloo 2', ui-rounded, system-ui, sans-serif;
            font-weight: 700;
            line-height: 1;
            font-size: 1.125rem;
            letter-spacing: 0.05em;
            color: var(--text);
        }
        @media (min-width: 768px) {
            .site-nav .nav-brand { font-size: 1.5rem; }
        }
        @media (max-width: 767px) {
            .site-nav .nav-brand-logo { width: 48px; height: 48px; }
        }

        .pressable {
            transition: transform 160ms var(--ease-out);
            cursor: pointer;
        }
        .pressable:active { transform: scale(0.97); }

        /* Footer copyright information. */
        .global-footer {
            position: fixed; bottom: 0; left: 0; width: 100%; z-index: 90;
            border-top: 1px solid var(--footer-border);
            background-color: var(--bg) !important;
            display: flex; align-items: center; justify-content: center;
        }
        /* The full-width footer is clickable; put padding on the link to enlarge its hit area. */
        .footer-link {
            display: flex; align-items: center; justify-content: center;
            width: 100%; height: 100%;
            padding: 1.25rem 0;
            padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
            color: inherit; text-decoration: none;
        }
        .footer-text {
            display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
            /* Keep wrapped lines apart without changing the single-line height. */
            row-gap: 0.45em;
            column-gap: 0;
            /* Keep text away from the screen edges on narrow viewports. */
            padding-inline: 1rem;
            font-size: 10px !important; font-weight: 600;
            letter-spacing: calc(0.15em*var(--ls-scale)); opacity: 0.5; text-align: center; line-height: 1;
        }
        /* Keep each semantic item intact, separate items with "·", and center the group. */
        .footer-text > span, .footer-text > a { white-space: nowrap; }
        /* Draw "·" on each item's ::before so it wraps with that item instead of being orphaned.
           Use inline-block rather than inline-flex: flex removes spaces between children. */
        .footer-text > .footer-item { display: inline-block; }
        .footer-text > .footer-item:not(:first-child)::before {
            content: "·"; margin: 0 0.55em; opacity: 0.7;
        }
        /* On mobile, keep the footer to two rows: copyright on the first, the other three items
           together on the second. Give copyright a full row with flex-basis: 100%.
           An ::after line break would sit inside a flex item and cannot wrap the parent. */
        @media (max-width: 559px) {
            .footer-text > .footer-copyright { flex: 0 0 100%; white-space: nowrap; }
            /* Do not show "·" at the wrap; it must not precede the first item on row two. */
            .footer-text > .footer-copyright + .footer-item::before { content: none; }
        }
        .footer-brand-logo {
            display: inline-block;
            width: 6.4em; height: 1.6em;
            margin-inline-start: 0.25em;
            object-fit: contain;
            vertical-align: -0.15em;
        }
        /* Apply Baloo 2 consistently to the ComiCine brand name in body text. */
        .brand-word {
            font-family: 'Baloo 2', ui-rounded, system-ui, sans-serif;
            font-weight: 700;
            letter-spacing: 0.02em;
            font-size-adjust: 0.6552;
        }
        .footer-source-link { color: inherit; text-decoration: underline; white-space: nowrap; }
        /* The old copy ("…source code available on here") needed an English-only space.
           The new "·" separator handles spacing for all languages, so that patch was removed;
           keeping it would add 3px after "·" in English. */
        /* Show the footer on mobile and touch devices; do not hide it based on pointer type. */

        .icon-btn, .theme-btn {
            width: 36px; height: 36px; display: flex; align-items: center;
            justify-content: center; border-radius: var(--radius-md);
            border: none; background: none; cursor: pointer;
            color: var(--text); opacity: 0.75;
            transition: transform 200ms var(--ease-out), background 200ms var(--ease-out), opacity 200ms var(--ease-out);
        }
        .icon-btn { text-decoration: none; }
        .icon-btn:active, .theme-btn:active { transform: scale(0.92); }
        .site-nav .nav-social-link svg, .site-nav .nav-menu-button svg { width: 18px; height: 18px; }
        .site-nav .nav-social-link svg { fill: currentColor; }
        @media (max-width: 767px) {
            .site-nav .nav-social-link { display: none; }
        }
        @media (hover: hover) and (pointer: fine) {
            .icon-btn:hover, .theme-btn:hover { background: var(--highlight); opacity: 1; }
        }
        .site-nav .global-nav { display: none; align-items: center; }
        @media (min-width: 768px) {
            .site-nav .global-nav { display: flex; }
        }
        .global-nav a {
            display: inline-flex; align-items: center; padding: 0 12px;
            font-size: 14px; font-weight: 500; text-decoration: none;
            color: var(--text); transition: color 200ms var(--ease-out);
            -webkit-font-smoothing: antialiased; white-space: nowrap;
        }
        .global-nav a.active, .global-nav a:hover { color: var(--accent); }
        .nav-external {
            display: inline-block; margin-inline-start: 4px; width: 11px; height: 11px;
            flex-shrink: 0; opacity: 0.45;
        }
        .nav-divider {
            display: none; width: 1px; height: 24px; background: var(--line);
            margin: 0 12px; flex-shrink: 0;
        }
        @media (min-width: 768px) {
            .site-nav .nav-divider { display: block; }
        }
        .site-nav .nav-divider.nav-divider-lang-theme { display: block; }
        .site-nav .nav-divider-mobile { display: none; }
        .site-nav .lang-toggle { position: relative; display: flex; align-items: center; }
        .site-nav .lang-btn {
            display: flex; align-items: center; padding: 0 12px; height: 36px;
            border: none; background: none; cursor: pointer; color: var(--text);
            transition: color 200ms var(--ease-out);
        }
        @media (hover: hover) and (pointer: fine) {
            .site-nav .lang-btn:hover { color: var(--accent); }
        }
        .site-nav .lang-icon { width: 16px; height: 16px; }
        .site-nav .lang-chevron { width: 14px; height: 14px; margin-inline-start: 4px; opacity: 0.6; }
        .appearance-switch {
            position: relative; display: block; width: 40px; height: 22px; flex-shrink: 0;
            padding: 0; border: 1px solid var(--line); border-radius: 11px;
            background: var(--highlight); cursor: pointer;
            transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
        }
        @media (hover: hover) and (pointer: fine) {
            .appearance-switch:hover { border-color: var(--accent); }
        }
        .appearance-check {
            position: absolute; top: 1px; left: 1px; width: 18px; height: 18px;
            border-radius: 50%; background: var(--bg); box-shadow: var(--switch-shadow);
            transform: translateX(18px); transition: transform 250ms var(--ease-out);
        }
        .appearance-icon {
            position: relative; display: block; width: 18px; height: 18px;
            border-radius: 50%; overflow: hidden;
        }
        .appearance-icon svg {
            position: absolute; top: 3px; left: 3px; width: 12px; height: 12px;
            color: var(--switch-icon); transition: opacity 250ms var(--ease-out);
        }
        .appearance-icon .sun { opacity: 0; }
        .appearance-icon .moon { opacity: 1; }
        .light-mode .appearance-icon .sun { opacity: 1; }
        .light-mode .appearance-icon .moon { opacity: 0; }
        .light-mode .appearance-check { transform: translateX(0); }
        .site-nav .nav-mobile-menu { position: relative; display: flex; align-items: center; }
        @media (min-width: 768px) {
            .site-nav .nav-mobile-menu { display: none; }
        }
        .site-nav .nav-menu-button {
            position: relative; z-index: 1; width: 48px; height: 70px;
        }
        .nav-hamburger {
            position: relative; display: block; width: 16px; height: 14px; overflow: hidden;
        }
        .nav-hamburger > span {
            position: absolute; inset-inline-start: 0; width: 16px; height: 2px;
            background: currentColor;
            transition: top 250ms var(--ease-out), background-color 500ms var(--ease-out), transform 250ms var(--ease-out);
        }
        .nav-hamburger .top { top: 0; transform: translateX(0); }
        .nav-hamburger .middle { top: 6px; transform: translateX(8px); }
        .nav-hamburger .bottom { top: 12px; transform: translateX(4px); }
        .nav-menu-button.active .nav-hamburger .top {
            top: 6px; transform: translateX(0) rotate(225deg);
        }
        .nav-menu-button.active .nav-hamburger .middle { top: 6px; transform: translateX(16px); }
        .nav-menu-button.active .nav-hamburger .bottom {
            top: 6px; transform: translateX(0) rotate(135deg);
        }
        @media (hover: hover) and (pointer: fine) {
            .nav-menu-button:not(.active):hover .nav-hamburger .top { top: 0; transform: translateX(4px); }
            .nav-menu-button:not(.active):hover .nav-hamburger .middle { top: 6px; transform: translateX(0); }
            .nav-menu-button:not(.active):hover .nav-hamburger .bottom { top: 12px; transform: translateX(8px); }
        }
        .site-nav .lang-menu {
            position: absolute; right: 0; padding: 4px; z-index: 200;
            background: var(--panel-bg); border: 1px solid var(--line); border-radius: var(--radius-md);
            opacity: 0; visibility: hidden; transform: translateY(-4px) scale(0.92);
            transform-origin: top right;
            transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 150ms;
            box-shadow: 0 8px 28px var(--shadow-soft);
        }
        .site-nav .lang-menu { top: calc(100% + 4px); min-width: 132px; }
        .site-nav .lang-menu.open {
            opacity: 1; visibility: visible; transform: translateY(0) scale(1);
        }
        .theme-option {
            padding: 8px 14px; margin: 2px 0; border-radius: var(--radius-sm);
            font-size: 12px; font-weight: 600; letter-spacing: calc(0.05em*var(--ls-scale));
            cursor: pointer; white-space: nowrap; transition: background 150ms var(--ease-out); opacity: 0.5;
        }
        .site-nav .lang-menu .theme-option {
            display: block; color: var(--text); text-decoration: none;
        }
        .lang-flag { margin-inline-end: 6px; }
        .theme-option.selected { opacity: 1; background: var(--highlight); }
        @media (hover: hover) and (pointer: fine) {
            .theme-option:hover { opacity: 1; background: var(--highlight); }
        }
        .nav-screen {
            position: fixed; inset: 0; z-index: 99;
            padding: calc(70px + 1px) 2rem 0;
            width: 100%; overflow-y: auto; overscroll-behavior: contain;
            background: var(--bg); pointer-events: none;
            opacity: 0; visibility: hidden;
            transition: opacity 250ms ease, visibility 0s linear 250ms, background-color 250ms ease;
        }
        .nav-screen.open {
            pointer-events: auto; opacity: 1; visibility: visible;
            transition: opacity 250ms ease, visibility 0s, background-color 250ms ease;
        }
        .nav-screen-container {
            max-width: 18rem; margin: 0 auto; padding: 1.5rem 0 6rem;
            transform: translateY(-0.5rem); transition: transform 250ms ease;
        }
        .nav-screen.open .nav-screen-container { transform: translateY(0); }
        .nav-screen-links { display: block; }
        .nav-screen-link {
            display: block; border-bottom: 1px solid var(--line);
            padding: 0.75rem 0 0.6875rem; line-height: 1.7142857;
            color: var(--text); font-size: 0.875rem; font-weight: 500;
            text-decoration: none; transition: color 250ms var(--ease-out), border-color 250ms var(--ease-out);
        }
        .nav-screen-link.active, .nav-screen-link:hover { color: var(--accent); }
        .nav-screen-translations { margin-top: 1.5rem; }
        .nav-screen-language-toggle {
            display: flex; align-items: center; width: 100%; padding: 0;
            border: 0; background: none; color: var(--text); text-align: start;
            font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
        }
        .nav-screen-language-icon { width: 1rem; height: 1rem; margin-inline-end: 0.5rem; }
        .nav-screen-chevron {
            width: 1rem; height: 1rem; margin-inline-start: 0.25rem;
            transition: transform 250ms var(--ease-out);
        }
        .nav-screen-translations.open .nav-screen-chevron { transform: rotate(-90deg); }
        .nav-screen-language-list {
            margin: 0; padding: 0.25rem 0 0; padding-inline-start: 1.5rem;
            max-height: 0; overflow: hidden; opacity: 0;
            transition: max-height 250ms var(--ease-out), opacity 180ms var(--ease-out);
        }
        .nav-screen-language-list.open { max-height: 12rem; opacity: 1; }
        .nav-screen-language-list li { list-style: none; }
        .nav-screen-language-option {
            display: block; line-height: 2.4615385; font-size: 0.8125rem;
            color: var(--text); text-decoration: none; opacity: 0.75;
        }
        .nav-screen-language-option.selected, .nav-screen-language-option:hover { color: var(--accent); opacity: 1; }
        .nav-screen-appearance {
            display: flex; justify-content: space-between; align-items: center;
            margin-top: 1.5rem; border-radius: 0.5rem; padding: 0.75rem 1rem 0.75rem 1rem;
            background: var(--panel-bg);
        }
        .nav-screen-appearance-label { color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; line-height: 2; }
        .nav-screen-socials {
            display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem;
        }
        .nav-screen-social-link {
            display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
            color: var(--text); opacity: 0.55; transition: opacity 200ms var(--ease-out), color 200ms var(--ease-out);
        }
        .nav-screen-social-link svg { width: 24px; height: 24px; fill: currentColor; }
        .nav-screen-social-link:hover { opacity: 1; }
        @media (min-width: 768px) {
            .nav-screen { display: none; }
        }
        @media (max-width: 767px) {
            .site-nav .nav-divider,
            .site-nav .nav-divider.nav-divider-lang-theme,
            .site-nav .nav-desktop-language,
            .site-nav .nav-right > .appearance-switch,
            .site-nav .nav-desktop-social { display: none; }
            .site-nav .nav-brand { font-size: 1.125rem; }
        }
        @media (min-width: 768px) and (max-width: 1023px) {
            body.wide-nav-page .site-nav .global-nav,
            body.wide-nav-page .site-nav .nav-divider:not(.nav-divider-lang-theme),
            body.wide-nav-page .site-nav .nav-desktop-social { display: none; }
            body.wide-nav-page .site-nav .nav-mobile-menu { display: flex; }
            body.wide-nav-page .nav-screen { display: block; padding-top: calc(100px + 1px); }
        }
        html.nav-screen-open, html.nav-screen-open body { overflow: hidden; }
        body.nav-screen-open #hero-title { opacity: 0 !important; visibility: hidden !important; }
        body.nav-screen-open #nav-logo.is-hidden { opacity: 1 !important; pointer-events: auto; }
        @media (prefers-reduced-motion: reduce) {
            .nav-screen, .nav-screen-container, .nav-hamburger > span, .nav-screen-chevron, .nav-screen-language-list { transition: none; }
        }

        @media (max-width: 767px) {
            html.theme-transitioning,
            html.theme-transitioning *,
            html.theme-transitioning *::before,
            html.theme-transitioning *::after {
                transition-property: color, background-color, border-color, outline-color, fill, stroke, text-decoration-color, box-shadow, opacity, transform !important;
                transition-duration: var(--theme-transition-duration) !important;
                transition-delay: 0s !important;
                transition-timing-function: var(--ease-out) !important;
            }
        }

        @media (max-width: 767px) and (prefers-reduced-motion: reduce) {
            html.theme-transitioning,
            html.theme-transitioning *,
            html.theme-transitioning *::before,
            html.theme-transitioning *::after {
                transition: none !important;
            }
        }

        /* Entrance animation: reveal-item to show. */
        .reveal-item {
            opacity: 0 !important; transform: translateY(20px);
            transition: transform 500ms var(--ease-out), opacity 500ms ease-out;
            will-change: transform, opacity;
        }
        .reveal-item.show { opacity: 1 !important; transform: translateY(0); }