/*
Theme Name: AFACIAL
Theme URI: https://afacial.at
Author: Northstar Media
Description: Block Theme (FSE) für afacial.at – Fork des Northstar-Basisthemes. Design-Tokens in theme.json, Sections als ACF Blocks, Inhalte vollständig im Server-HTML.
Version: 0.6.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: northstar
Template-Basis: Northstar 0.7.27 (interne Präfixe northstar_ bleiben, damit Blocks zwischen den Projekten austauschbar sind)
*/

/*
 * Klickbare Content-Bilder (inc/content-image-links.php):
 * Zoom-Cursor signalisiert "groß ansehen"; die Lightbox selbst ist ein
 * natives <dialog> (assets/js/image-lightbox.js).
 */
.content-img-link {
	display: inline-block;
	line-height: 0;
}

.content-img-link img {
	cursor: zoom-in;
}

dialog.img-lightbox {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: none;
	max-height: none;
	overflow: visible;
}

dialog.img-lightbox::backdrop {
	/* Fallback für Browser, die Custom Properties nicht in ::backdrop
	   vererben (Wert = Token contrast #1A237E bei 90 %). */
	background: rgba(26, 35, 126, 0.9);
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #1A237E) 90%, transparent);
}

.img-lightbox__img {
	display: block;
	max-width: min(94vw, 75rem);
	max-height: 86vh;
	width: auto;
	height: auto;
	cursor: zoom-out;
	border-radius: 8px;
}

.img-lightbox__caption {
	margin: 0.75rem auto 0;
	max-width: min(94vw, 75rem);
	text-align: center;
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast-light, #FFFFFF);
}

.img-lightbox__close {
	position: absolute;
	top: -2.5rem;
	right: 0;
	border: 0;
	background: transparent;
	padding: 0.25rem;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--contrast-light, #FFFFFF);
	cursor: pointer;
}

.img-lightbox__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, currentColor);
	outline-offset: 2px;
}

/* Seite hinter offener Lightbox nicht mitscrollen. */
body:has(dialog.img-lightbox[open]) {
	overflow: hidden;
}