/* ═══════════════════════════════════════════════════════════════════════════
   MUSEO DELLE VOCI ARTIFICIALI
   Theme: Blue — Abyssal Ocean Theme
   ═══════════════════════════════════════════════════════════════════════════

   Used for:
   - Abissopelagico (all chapters)

   Color palette inspired by ocean depths:
   - Deep blue for backgrounds
   - Luminous cyan for accents
   - Gradient from surface to abyss

   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="blue"],
.theme-blue {
    /* ─── Primary Accent ─── */
    --accent: #00b4d8;
    --accent-light: #48cae4;
    --accent-dark: #0077b6;
    --accent-glow: rgba(0, 180, 216, 0.15);
    --accent-dim: rgba(0, 180, 216, 0.4);

    /* ─── Deep Ocean Colors ─── */
    --blu-abissale: #0d1b2a;
    --blu-profondo: #1b263b;
    --blu-medio: #1b4965;
    --blu-luminoso: #00b4d8;

    /* ─── Borders ─── */
    --border-color: rgba(0, 180, 216, 0.2);
    --border-hover: rgba(0, 180, 216, 0.5);
    --border-subtle: rgba(0, 180, 216, 0.08);

    /* ─── Shadows ─── */
    --shadow-glow: 0 0 20px rgba(0, 180, 216, 0.15);
    --shadow-accent: 0 4px 20px rgba(0, 180, 216, 0.2);

    /* ─── Backgrounds ─── */
    --bg-primary: #0d1b2a;
    --bg-elevated: #1b263b;
    --bg-card: #1b4965;

    /* ─── Day Mode (Light) Colors ─── */
    --day-bg: #f0f7fa;
    --day-bg-elevated: #ffffff;
    --day-text: #0d1b2a;
    --day-text-muted: rgba(13, 27, 42, 0.7);
    --day-accent: #0077b6;
    --day-border: rgba(0, 119, 182, 0.2);
}

/* ═══════════════════════════════════════════
   BLUE THEME — Header Overrides
   ═══════════════════════════════════════════ */

/* Header background with deep ocean gradient */
.theme-blue .museo-header,
[data-theme="blue"] .museo-header {
    background: linear-gradient(
        180deg,
        rgba(13, 27, 42, 0.96) 0%,
        rgba(27, 38, 59, 0.92) 100%
    );
    border-bottom-color: rgba(0, 180, 216, 0.15);
}

/* Logo diamond with blue glow */
.theme-blue .museo-header__logo-diamond,
[data-theme="blue"] .museo-header__logo-diamond {
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

.theme-blue .museo-header__logo-diamond::before,
[data-theme="blue"] .museo-header__logo-diamond::before {
    background: var(--accent);
}

/* Logo text */
.theme-blue .museo-header__logo-text,
[data-theme="blue"] .museo-header__logo-text {
    color: var(--accent);
}

/* Back button */
.theme-blue .museo-header__back,
[data-theme="blue"] .museo-header__back {
    border-color: rgba(0, 180, 216, 0.2);
    background: rgba(0, 180, 216, 0.04);
}

.theme-blue .museo-header__back:hover,
[data-theme="blue"] .museo-header__back:hover {
    color: var(--accent);
    border-color: rgba(0, 180, 216, 0.4);
    background: rgba(0, 180, 216, 0.1);
}

/* Language switcher */
.theme-blue .museo-header__lang,
[data-theme="blue"] .museo-header__lang {
    background: rgba(0, 180, 216, 0.06);
    border-color: rgba(0, 180, 216, 0.15);
}

.theme-blue .museo-header__lang-btn.active,
[data-theme="blue"] .museo-header__lang-btn.active {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    box-shadow: 0 2px 8px var(--accent-glow);
}

/* Controls */
.theme-blue .museo-header__audio-btn,
.theme-blue .museo-header__account-btn,
.theme-blue .museo-header__theme-toggle,
[data-theme="blue"] .museo-header__audio-btn,
[data-theme="blue"] .museo-header__account-btn,
[data-theme="blue"] .museo-header__theme-toggle {
    border-color: rgba(0, 180, 216, 0.2);
}

.theme-blue .museo-header__audio-btn:hover,
.theme-blue .museo-header__account-btn:hover,
.theme-blue .museo-header__theme-toggle:hover,
[data-theme="blue"] .museo-header__audio-btn:hover,
[data-theme="blue"] .museo-header__account-btn:hover,
[data-theme="blue"] .museo-header__theme-toggle:hover {
    color: var(--accent);
    border-color: rgba(0, 180, 216, 0.4);
    background: rgba(0, 180, 216, 0.08);
}

/* Font controls */
.theme-blue .museo-header__font-controls,
[data-theme="blue"] .museo-header__font-controls {
    background: rgba(0, 180, 216, 0.06);
    border-color: rgba(0, 180, 216, 0.15);
}

.theme-blue .museo-header__font-divider,
[data-theme="blue"] .museo-header__font-divider {
    background: rgba(0, 180, 216, 0.2);
}

/* ═══════════════════════════════════════════
   BLUE THEME — Footer Overrides
   ═══════════════════════════════════════════ */
.theme-blue .site-footer__bar,
[data-theme="blue"] .site-footer__bar {
    background: rgba(13, 27, 42, 0.85);
    border-top-color: rgba(0, 180, 216, 0.2);
}

.theme-blue .site-footer__bar:hover,
[data-theme="blue"] .site-footer__bar:hover {
    background: rgba(13, 27, 42, 0.95);
    border-top-color: rgba(0, 180, 216, 0.4);
}

.theme-blue .site-footer__toggle,
[data-theme="blue"] .site-footer__toggle {
    color: var(--accent);
}

.theme-blue .site-footer__expanded,
[data-theme="blue"] .site-footer__expanded {
    background: rgba(13, 27, 42, 0.95);
}

.theme-blue .site-footer__content,
[data-theme="blue"] .site-footer__content {
    border-top-color: rgba(0, 180, 216, 0.1);
}

.theme-blue .site-footer__brand,
[data-theme="blue"] .site-footer__brand {
    border-right-color: rgba(0, 180, 216, 0.08);
}

.theme-blue .site-footer__symbol,
[data-theme="blue"] .site-footer__symbol {
    color: var(--accent);
}

.theme-blue .site-footer__column h4,
[data-theme="blue"] .site-footer__column h4 {
    color: var(--accent);
}

.theme-blue .site-footer__column a:hover,
[data-theme="blue"] .site-footer__column a:hover {
    color: var(--accent);
}

/* ═══════════════════════════════════════════
   BLUE THEME — Day Mode
   ═══════════════════════════════════════════ */
.theme-blue .museo-header--day,
[data-theme="blue"] .museo-header--day {
    background: linear-gradient(
        180deg,
        rgba(240, 247, 250, 0.98) 0%,
        rgba(230, 242, 247, 0.95) 100%
    );
    border-bottom-color: rgba(0, 119, 182, 0.15);
}

.theme-blue .museo-header--day .museo-header__logo-text,
[data-theme="blue"] .museo-header--day .museo-header__logo-text {
    color: var(--day-accent);
}

.theme-blue .museo-header--day .museo-header__logo-diamond,
[data-theme="blue"] .museo-header--day .museo-header__logo-diamond {
    border-color: var(--day-accent);
}

.theme-blue .museo-header--day .museo-header__logo-diamond::before,
[data-theme="blue"] .museo-header--day .museo-header__logo-diamond::before {
    background: var(--day-accent);
}

/* ═══════════════════════════════════════════
   BLUE THEME — General Overrides
   ═══════════════════════════════════════════ */
.theme-blue a:hover,
[data-theme="blue"] a:hover {
    color: var(--accent);
}

.theme-blue ::selection,
[data-theme="blue"] ::selection {
    background: var(--accent);
    color: var(--blu-abissale);
}