/* ============================================================
   Gaycation.eu — MOURNING MODE (temporary)
   ------------------------------------------------------------
   Loaded ONLY when MOURNING_MODE === true (see config.php +
   includes/header.php). This file is purely additive: it is
   linked AFTER assets/style.css and overrides the theme with a
   dark colour scheme plus a rainbow mourning ribbon.

   The normal design lives untouched in assets/style.css.
   To return to the regular appearance, set MOURNING_MODE to
   false in config.php — nothing here needs to be removed.
   ============================================================ */

/* ---- 1. Dark mourning palette (variable overrides) ---- */
:root {
    /* Muted fuchsia — subdued, lifted for legibility on dark */
    --primary:        oklch(72% 0.15 315);
    --primary-dark:   oklch(55% 0.14 315);
    --primary-light:  oklch(82% 0.10 315);
    --primary-hover:  oklch(80% 0.16 315);
    --primary-subtle: oklch(27% 0.03 315);

    /* Surfaces — deep, desaturated, faint fuchsia undertone */
    --bg:            oklch(16% 0.012 315);
    --surface:       oklch(20% 0.014 315);
    --section-tint:  oklch(24% 0.016 315);

    /* Text — soft off-white, easy on grieving eyes */
    --text-main:     oklch(91% 0.008 340);
    --text-muted:    oklch(67% 0.010 340);

    /* Borders — low-contrast on dark */
    --border:        oklch(32% 0.014 340);

    /* Shadows — deeper on dark */
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.35), 0 1px 2px oklch(0% 0 0 / 0.25);
    --shadow-md: 0 4px 8px oklch(0% 0 0 / 0.40), 0 2px 4px oklch(0% 0 0 / 0.25);
    --shadow-lg: 0 10px 20px oklch(0% 0 0 / 0.45), 0 4px 8px oklch(0% 0 0 / 0.30);

    /* Rainbow — kept as our community symbol but muted for a somber tone */
    --rainbow-grad: linear-gradient(90deg,
        #b03a2e, #b06a2e, #a9962e, #6f8f34, #2e8a86, #345f9e, #4a3f8f, #7a3e86);

    /* Legacy mappings follow automatically (they use var() above) */
    --bg-body: var(--bg);
    --bg-card: var(--surface);
    --accent:  var(--primary);
    --accent-hover: var(--primary-hover);
}

/* ---- 2. Hard-coded light surfaces → dark (targeted) ----
   These rules in style.css set literal light colours that the
   variables above cannot reach. */
.header {
    background: oklch(14% 0.014 315 / 0.90) !important;
    box-shadow: 0 2px 10px oklch(0% 0 0 / 0.45) !important;
    border-bottom: 1px solid var(--border) !important;
}
@media (max-width: 768px) {
    .header { background: oklch(13% 0.014 315 / 0.97) !important; }
}

#hero-map            { background: var(--surface) !important; }
.page-hero           { background: var(--section-tint) !important; }
.search-bar          { background: var(--surface) !important; }
.privacy-content     { background: var(--surface) !important; }
.review              { background: var(--surface) !important; }
.news-card,
.news-source-card    { background: var(--surface) !important; }
.file-preview-item   { background: var(--surface) !important; }
.map-privacy-overlay { background: oklch(20% 0.012 315 / 0.85) !important; }

/* ---- 3. Rainbow mourning ribbon (top banner) ---- */
.mourning-topline {
    height: 4px;
    width: 100%;
    background: var(--rainbow-grad);
    opacity: 0.85;
}

.mourning-ribbon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 0.7rem 5%;
    background: oklch(11% 0.010 315);
    border-bottom: 1px solid var(--border);
    color: oklch(88% 0.010 340);
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: center;
}

.mourning-ribbon__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 1px 2px oklch(0% 0 0 / 0.5));
}

.mourning-ribbon__text {
    max-width: 70ch;
    font-family: 'Bitter', Georgia, serif;
    letter-spacing: 0.01em;
}

@media (max-width: 560px) {
    .mourning-ribbon { flex-direction: column; gap: 0.5rem; padding: 0.75rem 6%; }
    .mourning-ribbon__text { font-size: 0.85rem; }
}