/**
 * Frontend-Styles fuer "Mein OG-Login (Dummy)".
 *
 * Naming: BEM (.jg-mol-* als Block, __element, --modifier).
 * Mobile-first. Farb- und Schriftpalette deckungsgleich mit der
 * angepassten wp-login.php des Welpentheme:
 *   - SV-Gruen (Primaer):  #5a9e33
 *   - Cyan-Akzent (Focus): #37AAE1
 *   - Body-BG der Karte:   #fff
 *   - Text:                #1d2327 / #555
 *   - Schrift Body:        Roboto, sans-serif
 *   - Schrift Buttons:     'Roboto Slab', serif (Bold)
 *
 * Schriftarten kommen vom aktiven Theme; das Plugin laedt selbst
 * keine Webfonts, damit kein zusaetzlicher HTTP-Request entsteht.
 *
 * Specificity-Hinweis:
 * GeneratePress (parent theme) stylet `input[type="submit"]`,
 * `input[type="text"]`, `button:not(.menu-toggle)` etc. mit
 * Specificity bis (0,2,1). Damit unsere Plugin-Styles zuverlaessig
 * gewinnen, sind alle interaktiven Selektoren mit `.jg-mol-overlay …`
 * gescoped (Specificity (0,2,0)+ bzw. (0,3,0) bei Pseudo-Klassen).
 *
 * @package Mein_OG_Login
 * @author  Joern Gorres
 * @version 1.0.2
 */


/* ==========================================================
 * Block: .jg-mol-overlay – Vollbild-Overlay mit Blur
 * ==========================================================
 *
 * Liegt UEBER allem (z-index 100001, also auch ueber dem
 * Trigger). backdrop-filter blurrt alles dahinter (also den
 * normalen Seiteninhalt). Der dunkle Halbtransparent-Layer
 * dunkelt zusaetzlich ab. -webkit-backdrop-filter zuerst fuer
 * Safari-Kompatibilitaet.
 *
 * Der Container nutzt Flex, um die Modal-Karte vertikal und
 * horizontal exakt zu zentrieren, bei zu hohem Modal-Inhalt
 * sorgt overflow-y:auto fuer scrollbares Modal.
 */
.jg-mol-overlay {
	position:                fixed;
	inset:                   0;
	z-index:                 100001;
	background:              rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter:         blur(8px);
	display:                 flex;
	align-items:             center;
	justify-content:         center;
	padding:                 16px;
	overflow-y:              auto;
}

/* Hidden-Attribut sticht display:flex, sobald JS das Overlay
 * schliesst – kein zusaetzlicher Class-Toggle noetig. */
.jg-mol-overlay[hidden] {
	display: none;
}


/* ==========================================================
 * Block: .jg-mol-modal – Login-Karte
 * ==========================================================
 *
 * Optisch identisch zu wp-login.php des Welpentheme: weisse
 * Karte, leichter Border, Rounded Corners, dezenter Schatten.
 * Etwas staerkerer Schatten als auf wp-login.php, damit sich
 * die Karte vor dem geblurrten Hintergrund klar abhebt.
 */
.jg-mol-modal {
	position:      relative;
	background:    #fff;
	border:        1px solid #c3c4c7;
	border-radius: 4px;
	box-shadow:    0 8px 32px rgba(0, 0, 0, 0.25);
	width:         100%;
	max-width:     380px;
	padding:       28px 26px 24px;
	font-family:   'Roboto', sans-serif;
	color:         #555;
	box-sizing:    border-box;
}


/* ==========================================================
 * Element: .jg-mol-modal__close – X-Schliessen-Button
 * ==========================================================
 *
 * Oben rechts in der Karte. Subtil, kein Hintergrund im
 * Ruhezustand; auf Hover/Fokus leichte Tinte fuer bessere
 * Sichtbarkeit.
 */
.jg-mol-overlay .jg-mol-modal__close {
	position:      absolute;
	top:           8px;
	right:         8px;
	width:         32px;
	height:        32px;
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	background:    transparent;
	border:        0;
	border-radius: 4px;
	color:         #555;
	font-size:     22px;
	line-height:   1;
	cursor:        pointer;
	transition:    background 0.15s ease, color 0.15s ease;
}

.jg-mol-overlay .jg-mol-modal__close:hover,
.jg-mol-overlay .jg-mol-modal__close:focus {
	background: rgba(0, 0, 0, 0.08);
	color:      #1d2327;
	outline:    none;
}

.jg-mol-overlay .jg-mol-modal__close:focus-visible {
	outline:        2px solid #37AAE1;
	outline-offset: 2px;
}


/* ==========================================================
 * Element: .jg-mol-modal__logo
 * ==========================================================
 *
 * Logo-Bereich oberhalb des Titels. Wird nur ausgegeben, wenn
 * im aktiven Theme die SVG-Datei existiert (PHP entscheidet).
 */
.jg-mol-modal__logo {
	text-align:    center;
	margin-bottom: 12px;
}

.jg-mol-modal__logo-img {
	display:   inline-block;
	max-width: 240px;
	width:     100%;
	height:    auto;
}


/* ==========================================================
 * Element: .jg-mol-modal__title – Karten-Ueberschrift
 * ==========================================================
 */
.jg-mol-modal__title {
	margin:        0 0 18px;
	text-align:    center;
	font-family:   'Roboto Slab', serif;
	font-weight:   700;
	font-size:     22px;
	letter-spacing: 0.02em;
	color:         #1d2327;
	line-height:   1.2;
}


/* ==========================================================
 * Element: .jg-mol-form – Login-Formular
 * ==========================================================
 *
 * Eingabefelder spiegeln das SV-Kontaktformular: helles BG,
 * grauer Border, sanfter Cyan-Glow auf Focus. Submit-Button
 * im selben Gruen-Bold-Stil wie auf wp-login.php.
 */
.jg-mol-form__row {
	margin-bottom: 14px;
}

.jg-mol-form__row:last-child {
	margin-bottom: 0;
}

.jg-mol-form__label {
	display:       block;
	margin-bottom: 4px;
	color:         #1d2327;
	font-size:     14px;
	font-weight:   400;
}

.jg-mol-overlay .jg-mol-form__input {
	display:       block;
	width:         100%;
	box-sizing:    border-box;
	background:    #fafafa;
	border:        1px solid #898989;
	border-radius: 3px;
	padding:       0.65rem 0.85rem;
	font-size:     16px;
	font-family:   inherit;
	color:         #1d2327;
	line-height:   1.4;
	transition:    border-color 0.2s ease, box-shadow 0.2s ease;
}

.jg-mol-overlay .jg-mol-form__input:focus {
	outline:      none;
	border-color: #37AAE1;
	box-shadow:    -3px  0 5px -2px rgba(55, 170, 225, 0.4),
	                3px  0 5px -2px rgba(55, 170, 225, 0.4),
	                0   -3px 5px -2px rgba(55, 170, 225, 0.4),
	                0    3px 5px -2px rgba(55, 170, 225, 0.4);
}


/* "Angemeldet bleiben"-Reihe */
.jg-mol-form__row--remember {
	margin-bottom: 18px;
}

.jg-mol-form__remember {
	display:     inline-flex;
	align-items: center;
	gap:         8px;
	font-size:   14px;
	color:       #1d2327;
	cursor:      pointer;
}


/* Submit-Button – SV-Gruen, Roboto Slab Bold, full-width.
 *
 * Mit `.jg-mol-overlay`-Scope, damit die Specificity GeneratePress-
 * eigene `input[type="submit"]`-Regeln (sowohl statisch in
 * main.css als auch dynamisch ueber inc/css-output.php) zuverlaessig
 * schlaegt. Ohne dieses Scoping zeigt sich der Button im GP-
 * Standardgrau (#55555e), nicht im SV-Gruen.
 */
.jg-mol-overlay .jg-mol-form__submit {
	display:        block;
	width:          100%;
	box-sizing:     border-box;
	background:     #5a9e33;
	border:         1px solid transparent;
	border-radius:  4px;
	color:          #fff;
	padding:        0.85rem 1.5rem;
	font-family:    'Roboto Slab', serif;
	font-weight:    700;
	font-size:      20px;
	letter-spacing: 0.03em;
	text-shadow:    none;
	box-shadow:     none;
	cursor:         pointer;
	transition:     background 0.2s ease;
}

.jg-mol-overlay .jg-mol-form__submit:hover,
.jg-mol-overlay .jg-mol-form__submit:focus {
	background: #4a8528;
	color:      #fff;
	outline:    none;
}

.jg-mol-overlay .jg-mol-form__submit:focus-visible {
	outline:        2px solid #37AAE1;
	outline-offset: 2px;
}


/* Links unter dem Formular. */
.jg-mol-form__links {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: space-between;
	gap:             8px;
	margin-top:      14px;
	padding:         0 4px;
}

.jg-mol-overlay .jg-mol-form__link {
	background:      transparent;
	border:          0;
	padding:         0;
	color:           #555;
	font-family:     inherit;
	font-size:       14px;
	text-decoration: none;
	cursor:          pointer;
	transition:      color 0.2s ease;
}

.jg-mol-overlay .jg-mol-form__link:hover,
.jg-mol-overlay .jg-mol-form__link:focus {
	color:           #5a9e33;
	text-decoration: underline;
	outline:         none;
}

.jg-mol-overlay .jg-mol-form__link:focus-visible {
	outline:        2px solid #37AAE1;
	outline-offset: 2px;
	border-radius:  2px;
}

.jg-mol-overlay .jg-mol-form__link--button {
	cursor: pointer;
}


/* ==========================================================
 * Element: .jg-mol-modal__panel – Panel-Wechsel im Modal
 * ==========================================================
 *
 * Das Modal enthaelt zwei Panels: das Login-Panel und das
 * Hinweis-Panel (nach Submit). Beim Panelwechsel wird das
 * jeweils inaktive Panel via [hidden] aus dem Layout genommen.
 */
.jg-mol-modal__panel[hidden] {
	display: none;
}

.jg-mol-modal__message {
	margin:    0 0 16px;
	font-size: 16px;
	color:     #1d2327;
	line-height: 1.5;
}


/* ==========================================================
 * Reduzierte Bewegung respektieren
 * ==========================================================
 *
 * Hover-/Focus-Transitions deaktivieren, damit Nutzer mit
 * "prefers-reduced-motion" weder unerwartete Farbwechsel-
 * Animationen noch Cyan-Glow-Aufblenden bekommen.
 */
@media (prefers-reduced-motion: reduce) {

	.jg-mol-overlay .jg-mol-modal__close,
	.jg-mol-overlay .jg-mol-form__input,
	.jg-mol-overlay .jg-mol-form__submit,
	.jg-mol-overlay .jg-mol-form__link {
		transition: none;
	}
}


/* ==========================================================
 * Mobile (<= 480px)
 * ==========================================================
 *
 * Modal-Karte etwas knapper, Logo kleiner. Werte spiegeln den
 * Login-CSS-Breakpoint.
 */
@media (max-width: 480px) {

	.jg-mol-modal {
		padding: 22px 18px 18px;
	}

	.jg-mol-modal__logo-img {
		max-width: 200px;
	}

	.jg-mol-modal__title {
		font-size: 20px;
	}

	.jg-mol-overlay .jg-mol-form__submit {
		font-size: 18px;
		padding:   0.75rem 1.2rem;
	}
}