/*
Theme Name: GHG - Portal - WP-Theme
Theme URI: https://gegen-häusliche-gewalt.de/
Author: maku
Author URI: https://hungerundkoch.com/
Description: Theme für WordPress
Tags: blog, theme, rest-api
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hundk-wp
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* Open Sans wie im Frontend, lokal eingebunden (kein Google Fonts).
   Nur die kursive Variante – sie reicht für Button und Impressum-Link.
   Lizenz: fonts/OFL.txt */
@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/OpenSans-Italic.woff2") format("woff2");
}

/* Farben, Radien und Abstände aus dem Frontend (src/styles/variables.scss) */
:root {
    --rosa: #f193bd;
    --rosa2: #ffe6f1;
    --rosa3: #cb1954;
    --petrol: #006884;

    --radius-m: 10px;
    --spacing-m: 50px;
    --spacing-s: 20px;

    --font-campaign: "Open Sans", sans-serif;
}

* {
    padding: 0;
    margin: 0;
}

html {
    margin-top: 0 !important;
}

/* Hintergrund wie die einfachen Seiten im Frontend (Theme „util-page“:
   Rechtstexte, 404). Ohne min-width: 100vw – das rechnete die Scrollleiste
   mit ein und erzeugte eine waagerechte Scrollleiste. */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;

    padding: var(--spacing-s);

    background: linear-gradient(180deg, var(--rosa) 70%, var(--petrol) 100%);
    background-color: var(--rosa);

    font-family: var(--font-campaign);

    color: var(--rosa3);
}

a {
    text-align: center;
    text-decoration: none;
}

/* Karte wie der Inhaltsbereich der Rechtstext-Seiten */
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--spacing-m);

    width: 100%;
    max-width: 600px;
    box-sizing: border-box;

    padding: var(--spacing-m);

    border-radius: var(--radius-m);
    background-color: var(--rosa2);
}

.logo {
    max-width: 400px;

    padding: 0.5rem;
}

.logo svg {
    display: block;

    max-width: 250px;
}

/* Logo als Link zur Kampagnen-Website. Blockelement, damit die ganze
   Logo-Fläche klickbar ist; Fokus wie bei Button und Impressum. Bewusst
   ohne Hover-Effekt. */
.logo a {
    display: block;

    border-radius: var(--radius-m);
}

.logo a:focus-visible {
    outline: 2px solid var(--rosa3);
    outline-offset: 4px;
}

.login,
.impressum {
    align-self: center;
}

/* Button wie im Frontend (components/ui/Button, Variante primary/active):
   gefüllt in Rosa 3, Hover kehrt die Farben um. */
.login a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;

    width: fit-content;
    max-height: 36px;

    padding: 5px 15px;

    border: 2px solid var(--rosa3);
    border-radius: 50px;
    background-color: var(--rosa3);

    font-family: var(--font-campaign);
    font-size: 18px;
    font-style: italic;
    font-weight: 700;
    line-height: normal;
    color: var(--rosa2);

    transition: all 0.3s ease-out;
}

/* Nur bei Geräten mit Hover – auf Touch bliebe der Zustand sonst hängen. */
@media (hover) {
    .login a:hover {
        background-color: var(--rosa2);

        color: var(--rosa3);
    }
}

.login a:focus-visible,
.impressum a:focus-visible {
    outline: 2px solid var(--rosa3);
    outline-offset: 2px;
}

.impressum a {
    font-family: var(--font-campaign);
    font-style: italic;
    font-weight: 700;
    color: var(--rosa3);

    transition: all 0.3s ease-out;
}

.impressum a:hover {
    text-decoration: underline;
}

/* Schmale Bildschirme: weniger Innenabstand (Frontend-Breakpoint $br-s) */
@media (max-width: 610px) {
    .content {
        padding: var(--spacing-m) var(--spacing-s);
    }
}

@media (prefers-reduced-motion: reduce) {
    .login a,
    .impressum a {
        transition: none;
    }
}