/*
 * mod_comickatalog_templateswitch 1.1.2
 *
 * Deliberately NOT part of the comicfan/mangafan template packages (release 5.4.0: two links, "Manga" and
 * "Comic", next to Anmelden/Registrieren resp. Mein Profil/Abmelden, module position "topbar"; a small heart
 * marks whichever is active). Uses only the --cf-*/--cfn-* custom properties both official templates already
 * define on :root, so it blends into either one without a single template file having been touched; the
 * link look (colour, weight, no underline, hover colour) deliberately matches the existing
 * ".cfn-topbar a"/":hover" rules in each template's own template.css (read, never written) so the two new
 * links are visually indistinguishable from "Anmelden"/"Mein Profil" etc. If a future template does not
 * define these variables, the fallback values below (2nd argument of each var()) keep the links readable.
 *
 * tester-Fund 2026-10-06 (mangafan-Farbfund): ".cfn-topbar a" is NOT one shared rule across both templates --
 * each template's own template.css sets DIFFERENT --cf-*/--cfn-* variables for it:
 *   - comicfan:  color: var(--cf-yellow)  (#fcd116), hover/focus: var(--cfn-white)  (#ffffff)
 *   - mangafan:  color: var(--cf-paper)   (#f7f5f0), hover/focus: var(--cfn-pink-bright) (#ffd1d8)
 * The base rules below (unchanged, still the --cf-yellow/--cfn-white pair) therefore only ever matched
 * comicfan's own topbar links by coincidence -- on mangafan the switcher rendered in the WRONG colour
 * (visibly different from "Anmelden"/"Mein Profil" there). Fix: a template modifier class
 * "cfn-tplswitch--<template>", set server-side from the already allowlist-checked active template name (see
 * Dispatcher::getLayoutData()), selects the matching pair per template -- comicfan needs no modifier (it IS
 * the default below), mangafan gets its own override block. Both pairs keep >= 4.5:1 contrast against each
 * template's dark --cf-ink topbar background (verified: comicfan #fcd116/#ffffff and mangafan #f7f5f0/#ffd1d8
 * on #111111/#121212 are all > 13:1).
 */

.cfn-tplswitch {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .9rem;
    margin: 0;
    padding: 0;
}

.cfn-tplswitch__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font: inherit;
    font-size: inherit;
    font-weight: 700;
    color: var(--cf-yellow, #fcd116);
    background: none;
    border: 0;
    padding: .5rem .25rem;         /* together with line-height/font-size this reaches the 44px touch target */
    margin: -0.5rem -0.25rem;      /* ...without adding visible extra space in the topbar row */
    min-height: 44px;
    cursor: pointer;
    text-decoration: none;
}

.cfn-tplswitch__link:hover,
.cfn-tplswitch__link:focus-visible {
    color: var(--cfn-white, #ffffff);
}

.cfn-tplswitch__link:focus-visible {
    outline: 3px solid var(--cf-yellow, #fcd116);
    outline-offset: 1px;
}

.cfn-tplswitch__link.is-active {
    cursor: default;
}

/*
 * mangafan uses a different pair of topbar-link variables than the default above (see note at the top of
 * this file) -- override colour/hover/focus so the switcher again matches "Anmelden"/"Mein Profil" exactly
 * on mangafan, same as it already does on comicfan via the default rules.
 */
.cfn-tplswitch--mangafan .cfn-tplswitch__link {
    color: var(--cf-paper, #f7f5f0);
}

.cfn-tplswitch--mangafan .cfn-tplswitch__link:hover,
.cfn-tplswitch--mangafan .cfn-tplswitch__link:focus-visible {
    color: var(--cfn-pink-bright, #ffd1d8);
}

.cfn-tplswitch--mangafan .cfn-tplswitch__link:focus-visible {
    outline: 3px solid var(--cfn-pink-bright, #ffd1d8);
    outline-offset: 1px;
}

.cfn-tplswitch__heart {
    display: inline-flex;
    color: var(--cf-red, #e8101a);
    line-height: 0;
}

.cfn-tplswitch__heart svg {
    fill: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
    .cfn-tplswitch__heart {
        transition: transform .2s ease;
    }
}

@media print {
    .cfn-tplswitch {
        display: none !important;
    }
}