/* ============================================================
   MOTIVY MEMORIÁLU
   ------------------------------------------------------------
   Načítá se PO memorial.css a přebarvuje jen to, co má.
   memorial.css se NESMÍ upravovat (pravidlo projektu), proto
   se zde jeho pevné barvy přepisují přes CSS proměnné.

   Co memorial.css barví napevno a co tedy přebarvujeme:
     #c8a14f (zlatá)          7× – rámečky karty, profilových
                                   koleček, hlavní fotky, galerie,
                                   videa, audia + --circle-color
     rgba(182,184,183,1)      2× – záře kolem koleček a hlavní
                                   fotky; je to odstín původního
                                   šedého pozadí, na barevném
                                   podkladu by rušila
     body background #B6B8B7  1× – podklad stránky

   Proměnné nastavuje šablona podle zvoleného motivu. Když motiv
   není zvolen, tento soubor se vůbec nenačte a vzhled zůstává
   původní.
   ============================================================ */

/* Motiv patří DOVNITŘ karty memoriálu – okolí stránky zůstává
   původní (šedé). Karta má pevnou šířku a je to ten "papír", na
   kterém memoriál žije; motiv mimo ni by působil jako tapeta webu. */
.memorial-themed .profile-card {
    background-color: var(--memorial-bg);
    background-image: var(--memorial-image);
    background-repeat: no-repeat;
    background-position: top center;
    /* šířka karty, výška podle poměru – motiv nahoře plynule
       přechází do --memorial-bg, takže konec obrázku není vidět
       ani u velmi dlouhého memoriálu */
    background-size: 100% auto;
}

/* ── Rámečky (zlatá → akcent motivu) ───────────────────────── */
.memorial-themed .profile-card,
.memorial-themed .gallery-item,
.memorial-themed .video-wrapper,
.memorial-themed .audio-container {
    border-color: var(--memorial-accent);
}

.memorial-themed .profile-preview,
.memorial-themed .main-photo-wrapper {
    border-color: var(--memorial-accent);
}

/* ── Neaktivní profilová kolečka ────────────────────────────
   memorial.css ztlumuje CELÝ prvek (opacity: .5). Na jednolitém
   šedém pozadí to nevadilo, ale přes motiv skrz fotku prosvítá
   vzor. Řešení: prvek nechat plný a ztlumit jen fotku uvnitř –
   výsledek vypadá stejně, ale kolečko zůstává neprůhledné.       */
.memorial-themed .profile-preview {
    opacity: 1;
    background-color: var(--memorial-bg);
}

.memorial-themed .profile-preview img {
    opacity: .5;
    transition: opacity .3s;
}

.memorial-themed .profile-preview.active img {
    opacity: 1;
}

/* ── Záře kolem fotek (šedá → tón motivu) ──────────────────── */
.memorial-themed .profile-preview {
    box-shadow: 0 0 15px var(--memorial-glow);
}

.memorial-themed .main-photo-wrapper {
    box-shadow: 0 0 30px var(--memorial-glow);
}

/* ── Kolečka s fotkami (proměnná uvnitř memorial.css) ──────── */
.memorial-themed .circles-container,
.memorial-themed .profiles-container {
    --circle-color: var(--memorial-accent);
}

/* ── Audio lišta – jemné tónované pozadí ───────────────────── */
.memorial-themed .audio-container {
    background-color: color-mix(in srgb, var(--memorial-accent) 10%, transparent);
}

/* ── Šipky listování ───────────────────────────────────────── */
.memorial-themed .nav-arrow {
    color: var(--memorial-accent);
    border-color: var(--memorial-accent);
}

/* ── Pager mezi memoriály (memorial-pager.css) ─────────────────
   Zlatá #c8a14f a její průsvitná varianta jsou tam napevno.
   Pager je součást memoriálu, ne rozhraní platformy – v motivu
   proto musí přebarvit, jinak působí nedodělaně. */
.memorial-themed .memorial-pager-btn {
    border-color: var(--memorial-accent);
    background-color: color-mix(in srgb, var(--memorial-accent) 15%, transparent);
    color: var(--memorial-accent-text);
}

.memorial-themed .memorial-pager-btn:hover {
    background-color: color-mix(in srgb, var(--memorial-accent) 28%, transparent);
}

.memorial-themed .memorial-pager-count {
    color: var(--memorial-accent-text);
}

/* ── Akční kolečka (mapa, projekt, MyHeritage) ─────────────────
   Sekce má vlastní proměnné, takže stačí přepsat je – kolečka
   i jejich popisky se přizpůsobí samy. */
.memorial-themed .action-circles {
    --circle-color: var(--memorial-accent);
    --circle-bg: var(--memorial-bg);
}

/* ── Navigace k hrobu ──────────────────────────────────────────
   Tlačítko má průsvitné zlaté pozadí; v motivu přebírá akcent. */
.memorial-themed .grave-location-button {
    background-color: color-mix(in srgb, var(--memorial-accent) 10%, transparent);
    border-color: var(--memorial-accent);
}

.memorial-themed .grave-location-button:hover {
    background-color: color-mix(in srgb, var(--memorial-accent) 20%, transparent);
}

/* ── PIN okénko pro rodinu (memorial-pin.css) ──────────────────
   Panel je součástí memoriálu a má stejný zlatý akcent jako
   tlačítko navigace – v motivu musí přebarvit také. */
.memorial-themed .memorial-pin-input {
    /* Klidový rámeček pole je průsvitná zlatá – v motivu akcent. */
    border-color: color-mix(in srgb, var(--memorial-accent) 50%, transparent);
}

.memorial-themed .memorial-pin-input:focus {
    border-color: var(--memorial-accent);
}

.memorial-themed .memorial-pin-submit {
    border-color: var(--memorial-accent);
    background-color: color-mix(in srgb, var(--memorial-accent) 10%, transparent);
}

.memorial-themed .memorial-pin-submit:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--memorial-accent) 20%, transparent);
}

/* ── Vzkaz pro rodinu (po odemčení PINem) ──────────────────────
   Objevuje se JEN v odemčeném stavu, proto se na něj při prvním
   kole přebarvení nedostalo. Má stejný zlatý akcent jako PIN panel. */
.memorial-themed .memorial-family-note {
    background-color: color-mix(in srgb, var(--memorial-accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--memorial-accent) 35%, transparent);
}

/* Fallback pro prohlížeče bez color-mix (Safari < 16.2):
   místo průsvitné barvy plná světlá plocha motivu. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .memorial-themed .memorial-pager-btn,
    .memorial-themed .grave-location-button,
    .memorial-themed .memorial-pin-submit,
    .memorial-themed .memorial-family-note {
        background-color: var(--memorial-bg);
    }

    .memorial-themed .memorial-family-note {
        border-color: var(--memorial-accent);
    }
}

/* ── Odkazy v obsahu (tmavší varianta kvůli čitelnosti) ────── */
.memorial-themed .memorial-bio a,
.memorial-themed .grave-location-container a {
    color: var(--memorial-accent-text);
}

/* ── Tlačítka (bílý text na akcentu – kontrast ověřen) ─────── */
.memorial-themed .btn-primary,
.memorial-themed .memorial-btn {
    background-color: var(--memorial-accent);
    border-color: var(--memorial-accent);
    color: #ffffff;
}

/* ── Náhledový přepínač (jen na stagingu, viz šablona) ─────── */
.theme-switcher {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: rgba(20, 20, 20, .94);
    color: #eee;
    padding: 8px 10px;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .45);
}

.theme-switcher-label {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 6px;
}

.theme-switcher-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.theme-switcher a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #4a4a4a;
    border-radius: 14px;
    background: #2b2b2b;
    color: #ddd;
    text-decoration: none;
    font-size: 12.5px;
}

.theme-switcher a:hover { border-color: #888; }

.theme-switcher a.on {
    background: #f0f0f0;
    color: #111;
    border-color: #f0f0f0;
    font-weight: 600;
}