/*
Theme Name:  Anhaenger24
Theme URI:   https://test.swisscase.ch/
Description: Eigenstaendige Website fuer die Anhaenger-Vermietung der Swisscase AG. Child-Theme von Twenty Twenty-Five, traegt die Marke Anhaenger24 (Logo, Farben, Schriften) und stellt den Buchungskalender aus dem Plugin swisscase-anhaenger in die Theme-Farben.
Author:      Swisscase AG
Template:    twentytwentyfive
Version:     0.2.0
Text Domain: anhaenger24
*/

/**
 * Die Marke steckt in zwei Dateien:
 *
 *   theme.json  – Farben, Schriften, Groessen. Das ist die Datenquelle.
 *                 Alles hier unten greift nur ueber var(--wp--preset--…)
 *                 darauf zu und schreibt nie einen Farbwert selbst hin.
 *   style.css   – das Logo und die Stellen, an denen fremdes Markup
 *                 (Kalender, WooCommerce) in die Marke geholt wird.
 *
 * Die Logo-Masse stehen absichtlich in em und haengen an genau einer
 * Stellschraube: der Schriftgroesse von .a24-logo. Ein Logo, dessen
 * Balkenstaerke man beim Verkleinern von Hand nachziehen muss, wird beim
 * dritten Einsatzort falsch.
 */


/* ── Das Logo ───────────────────────────────────────────────────────── */

.a24-logo {
    /* Die eine Stellschraube. Alles andere rechnet daraus. */
    font-size: 2.75rem;

    display: inline-flex;
    flex-direction: column;
    gap: 0.145em;
    align-items: stretch;
    font-family: var(--wp--preset--font-family--sora);
    line-height: 1;
    text-decoration: none;
    color: inherit;
}

.a24-logo__wortmarke {
    display: flex;
    align-items: baseline;
    gap: 0.226em;
}

.a24-logo__wort {
    font-weight: 600;
    font-size: 1em;
    letter-spacing: -0.04em;
    color: var(--wp--preset--color--marine);
    white-space: nowrap;
}

.a24-logo__zahl {
    font-weight: 700;
    font-size: 1em;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--signal);
}

/* Nie unter 2 px: ein Haarstrich verschwindet im Druck und auf
 * Bildschirmen mit einfacher Pixeldichte. */
.a24-logo__regel {
    height: max(2px, 0.065em);
    background: var(--wp--preset--color--marine);
}

.a24-logo__zusatz {
    font-family: var(--wp--preset--font-family--space-grotesk);
    font-weight: 400;
    font-size: 0.21em;
    letter-spacing: 0.24em;
    /* Sperrschrift haengt hinten einen Leerraum an. Ohne diesen Ausgleich
     * sitzt die Zeile optisch nach links versetzt unter dem Balken. */
    margin-right: -0.24em;
    text-transform: uppercase;
    color: #7C7A73;
    white-space: nowrap;
}


/* Negativ – auf Marine. Das helle Signal gibt es NUR hier: auf Papier
 * kommt es auf 2.6:1 und ist dann nicht mehr lesbar. */
.a24-logo--negativ .a24-logo__wort   { color: var(--wp--preset--color--papier); }
.a24-logo--negativ .a24-logo__zahl   { color: var(--wp--preset--color--signal-hell); }
.a24-logo--negativ .a24-logo__regel  { background: var(--wp--preset--color--papier); }
.a24-logo--negativ .a24-logo__zusatz { color: #9AA3B2; }


/* Gestapelt – wenn die Breite fehlt (Hochformat, Kleber, Handy-Kopf). */
.a24-logo--gestapelt                    { gap: 0.045em; align-items: flex-start; }
.a24-logo--gestapelt .a24-logo__wortmarke { flex-direction: column; gap: 0.045em; align-items: flex-start; }
.a24-logo--gestapelt .a24-logo__zeile     { display: flex; align-items: center; gap: 0.16em; }
.a24-logo--gestapelt .a24-logo__regel     { width: 2.3em; }


/* Einfarbig – Gravur, Stempel, Fax, einfarbiger Druck. Erbt die Farbe
 * vom Elternelement, damit ein Aufruf sie setzen kann. */
.a24-logo--einfarbig .a24-logo__wort,
.a24-logo--einfarbig .a24-logo__zahl,
.a24-logo--einfarbig .a24-logo__zusatz { color: inherit; }
.a24-logo--einfarbig .a24-logo__regel  { background: currentColor; }


/* Das Zeichen: die 24 allein. App-Icon, Favicon, Kleinstgroessen. */
.a24-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: 5.5rem;
    border-radius: 0.205em;
    background: var(--wp--preset--color--marine);
    color: var(--wp--preset--color--signal-hell);
    font-family: var(--wp--preset--font-family--sora);
    font-weight: 700;
    font-size-adjust: none;
    letter-spacing: -0.02em;
    line-height: 1;
}
.a24-zeichen span { font-size: 0.432em; }


/* ── Kopf und Fuss ──────────────────────────────────────────────────── */

.a24-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.1rem var(--wp--preset--spacing--30);
    background: var(--wp--preset--color--papier);
    border-bottom: 1px solid var(--wp--preset--color--linie);
}

.a24-kopf .a24-logo { font-size: 1.375rem; }
.a24-kopf .a24-logo__regel,
.a24-kopf .a24-logo__zusatz { display: none; }

/* Die Telefonnummer ist kein Beiwerk: wer den Kalender nicht bedienen
 * mag, soll anrufen koennen, ohne zu suchen. Darum im Kopf, gross genug
 * zum Antippen. */
.a24-telefon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 2px solid var(--wp--preset--color--signal);
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--wp--preset--color--signal);
    text-decoration: none;
    white-space: nowrap;
}
.a24-telefon:hover,
.a24-telefon:focus-visible { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--papier); }
.a24-telefon svg { width: 1.125em; height: 1.125em; flex: none; }

.a24-fuss {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    text-align: center;
    padding: 2rem var(--wp--preset--spacing--30);
    background: var(--wp--preset--color--marine);
    color: #C7CEDA;
    font-size: var(--wp--preset--font-size--klein);
}
.a24-fuss a { color: #C7CEDA; }
.a24-fuss a:hover { color: var(--wp--preset--color--signal-hell); }
.a24-fuss nav { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
.a24-fuss nav a { min-height: 44px; display: inline-flex; align-items: center; }


/* ── Sichtbarer Fokus ───────────────────────────────────────────────── */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--wp--preset--color--signal);
    outline-offset: 2px;
}


/* ── Der Kalender erbt die Marke ────────────────────────────────────── */

/*
 * frontend-buchung.css aus dem Plugin haelt seine Farben in eigenen
 * Variablen. Genau dafuer sind sie da: hier werden sie umgesetzt, statt
 * die Regeln des Plugins zu ueberschreiben. Das Plugin bleibt damit
 * unveraendert und funktioniert auch unter einem fremden Theme weiter.
 *
 * Die Auswahl ist Marine, nicht Signal. Signal traegt im ganzen
 * Auftritt nur die 24; ein zweiter Ort mit derselben Signalfarbe nimmt
 * ihr die Bedeutung. Dazu kommt Marine auf 15.9:1 gegen Weiss, Signal
 * nur auf 4.3:1.
 *
 * Das vorangestellte `body` ist kein Zierrat. Das Plugin haengt seine
 * CSS erst beim Rendern des Shortcodes ein, also NACH der Theme-CSS –
 * bei gleicher Spezifitaet gewaenne damit das Plugin, und die
 * Umsetzung hier bliebe wirkungslos. `body` hebt die Regeln knapp
 * darueber, ohne !important, das nur den naechsten Streit vorbereitet.
 */
/* .scm-vertrag ist der Vertragsschritt aus G5 – gleiche Variablen,
 * gleiche Umsetzung. */
body .scm-kalender,
body .scm-vertrag {
    --scm-rand:      var(--wp--preset--color--linie);
    --scm-text:      var(--wp--preset--color--tinte);
    --scm-grau:      var(--wp--preset--color--grau);
    --scm-belegt-bg: #E6E4DE;
    --scm-wahl:      var(--wp--preset--color--marine);
    --scm-wahl-hell: #E7EAEF;
    --scm-fehler:    var(--wp--preset--color--fehler);

    font-family: var(--wp--preset--font-family--space-grotesk);
    font-size: var(--wp--preset--font-size--basis);
}

/* Ueberschriften im Vertragstext tragen Sora, wie ueberall sonst. */
body .scm-vertrag h2,
body .scm-vertrag h3 {
    font-family: var(--wp--preset--font-family--sora);
}

/* Das Plugin setzt hier `.scm-kalender button.scm-buchen` (0,2,1) –
 * darum ebenfalls mit Typ und zusaetzlich mit `body`. */
body .scm-kalender button.scm-buchen,
body .scm-vertrag button.scm-buchen {
    font-family: var(--wp--preset--font-family--space-grotesk);
    font-weight: 500;
    border-radius: 0;
}


/* ── WooCommerce in die Marke holen ─────────────────────────────────── */

/* Der Hinweis unter dem Telefonfeld der Miete (class-checkout.php) –
 * ein schlichter, immer sichtbarer Satz statt der WooCommerce-Blase. */
.woocommerce .scm-feld-hinweis {
    margin: -0.25rem 0 1rem;
    font-size: var(--wp--preset--font-size--klein);
    color: var(--wp--preset--color--grau);
}

.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #place_order {
    background: var(--wp--preset--color--marine);
    color: var(--wp--preset--color--papier);
    border-radius: 0;
    font-family: var(--wp--preset--font-family--space-grotesk);
    font-weight: 500;
    font-size: var(--wp--preset--font-size--gross);
    min-height: 56px;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce #place_order:hover { background: var(--wp--preset--color--tinte); }

/* Eingabefelder an der Kasse: gross genug zum Tippen mit dem Daumen. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    min-height: 52px;
    padding: 0 0.875rem;
    font-family: inherit;
    font-size: var(--wp--preset--font-size--basis);
    border: 1px solid var(--wp--preset--color--linie);
    border-radius: 0;
    background: var(--wp--preset--color--papier);
}
.woocommerce form .form-row label { font-weight: 700; font-size: 1rem; }


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}