/*
Theme Name: JetteGarn
Theme URI: https://jettegarn.dk
Author: JetteGarn
Description: Bloktema til JetteGarn i Bække. Ugebladets håndarbejdsside: blomme farvefelter, Bitter og Lexend, store fotos med billedtekster.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jettegarn
*/

/* Kun det theme.json ikke kan udtrykke. Alle værdier er tokens fra theme.json. */

/* Sticky header (template part) med blomme underkant */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 10;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0px); }
.jg-header { border-bottom: var(--wp--custom--border--width-thick) solid var(--wp--preset--color--primary); }
.jg-header .wp-block-site-logo img { height: auto; }

/* Farvebånd ligger kant i kant: ingen blockGap mellem header, sektioner og footer */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull + * { margin-block-start: 0; }

/* Synligt fokus: blomme på lys bund, sennep på blomme */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: var(--wp--custom--border--width-thick) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--border--width);
}
.has-primary-background-color :where(a, button, input, textarea):focus-visible { outline-color: var(--wp--preset--color--accent); }
::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); }

/* Links og knapper */
a { text-underline-offset: 0.22em; text-decoration-thickness: var(--wp--custom--border--width); }
.wp-element-button { min-height: var(--wp--custom--touch-target); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }

/* Hero: fotoet fylder kolonnen */
.jg-hero > .wp-block-column:first-child { display: flex; }
.jg-hero .wp-block-cover { flex: 1 1 auto; min-height: clamp(30rem, 22rem + 22vw, 44rem) !important; }
.jg-hero-text h1 { max-width: 11em; }

/* Billedtekster på blomme bund */
.has-primary-background-color figcaption { color: var(--wp--preset--color--secondary); }

/* Kort markørstreg */
.wp-block-separator.jg-marker { width: var(--wp--preset--spacing--60); height: var(--wp--custom--border--width-thick); margin-inline: 0; }

/* Lead-tekst med læsbar linjelængde */
.jg-lead { max-width: var(--wp--custom--measure); }
.wp-block-post-content > .jg-lead { margin-left: 0 !important; }

/* Kontaktpanel: lilla felt med blomme ramme */
.jg-contact-panel { border: var(--wp--custom--border--width) solid var(--wp--preset--color--primary); }
.jg-phone a { text-decoration: none; }

/* Galleri: ens 3:4 beskæring */
.jg-gallery.wp-block-gallery .wp-block-image img { aspect-ratio: 3 / 4; object-fit: cover; }
/* Billedtekst under fotoet, som i et blad (ikke oven på) */
.jg-gallery.wp-block-gallery.has-nested-images figure.wp-block-image { flex-direction: column; }
.jg-gallery.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	background: none;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: start;
	padding: var(--wp--preset--spacing--20) 0 0;
	max-height: none;
	overflow: visible;
	text-shadow: none;
}
.jg-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before { display: none; }

/* Tablet og mobil */
@media (max-width: 781px) {
	.jg-hero > .wp-block-column:first-child { display: block; }
	.jg-hero .wp-block-cover { min-height: 0 !important; width: 100%; aspect-ratio: 4 / 3 !important; }
	.jg-hero-text, .jg-contact-panel { padding-left: var(--wp--preset--spacing--30) !important; padding-right: var(--wp--preset--spacing--30) !important; }
	.jg-hero-text .wp-block-buttons,
	.jg-contact-panel .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.jg-hero-text .wp-block-button,
	.jg-contact-panel .wp-block-button,
	.jg-hero-text .wp-element-button,
	.jg-contact-panel .wp-element-button { width: 100%; }
	.jg-header .wp-block-site-logo img { width: 150px !important; }
	.jg-header .wp-element-button { padding-inline: var(--wp--preset--spacing--40); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* WPForms: felter og knap i temaets tokens. !important fordi WPForms-blokken skriver sine standardværdier på #wpforms-ID. */
.wpforms-container.wpforms-container-full {
	--wpforms-field-border-radius: var(--wp--custom--radius--button) !important;
	--wpforms-field-border-size: var(--wp--custom--border--width) !important;
	--wpforms-field-border-color: var(--wp--preset--color--contrast) !important;
	--wpforms-field-text-color: var(--wp--preset--color--contrast) !important;
	--wpforms-field-background-color: var(--wp--preset--color--base) !important;
	--wpforms-field-size-font-size: var(--wp--preset--font-size--medium) !important;
	--wpforms-field-size-input-height: var(--wp--custom--touch-target) !important;
	--wpforms-label-color: var(--wp--preset--color--contrast) !important;
	--wpforms-label-sublabel-color: var(--wp--preset--color--muted) !important;
	--wpforms-label-size-font-size: var(--wp--preset--font-size--medium) !important;
	--wpforms-label-size-sublabel-font-size: var(--wp--preset--font-size--small) !important;
	--wpforms-button-background-color: var(--wp--preset--color--accent) !important;
	--wpforms-button-text-color: var(--wp--preset--color--contrast) !important;
	--wpforms-button-border-radius: var(--wp--custom--radius--button) !important;
	--wpforms-button-size-font-size: var(--wp--preset--font-size--medium) !important;
	--wpforms-button-size-height: var(--wp--custom--touch-target) !important;
	margin: 0;
}
.wpforms-container .wpforms-field-label { font-family: var(--wp--preset--font-family--heading); font-weight: 700; }
.wpforms-container input, .wpforms-container textarea, .wpforms-container button { font-family: var(--wp--preset--font-family--body); }
.wpforms-container button[type=submit] { font-weight: 600; box-shadow: var(--wp--preset--shadow--button); padding-inline: var(--wp--preset--spacing--50); }
.wpforms-container button[type=submit]:hover { background: var(--wp--preset--color--on-primary); }
.wpforms-container :where(input, textarea):focus { outline: var(--wp--custom--border--width-thick) solid var(--wp--preset--color--primary); outline-offset: 0; }

/* WPForms takkebesked: lilla felt med blomme ramme i stedet for standardgrøn */
.wp-site-blocks .wpforms-confirmation-container-full,
.wp-site-blocks div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
	background: var(--wp--preset--color--secondary);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--button);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--body);
	padding: var(--wp--preset--spacing--50);
}
.wp-site-blocks .wpforms-confirmation-container-full p { margin: 0; }

/* Sociale ikoner i footeren: mindst 48px trykflade */
.wp-block-social-links.is-style-logos-only .wp-social-link a { min-width: var(--wp--custom--touch-target); min-height: var(--wp--custom--touch-target); justify-content: center; }

/* "Det finder du hos Jette": kategoriliste med skiftende billede */
.jg-range-item {
	border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--primary);
	padding: var(--wp--preset--spacing--30);
	margin-block-start: 0 !important;
}
.jg-range-item:last-of-type { border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--primary); }
.jg-range-item > * { margin-block: 0; }
.jg-range-item > * + * { margin-block-start: var(--wp--preset--spacing--20); }
.jg-range-hint { display: none; }

/* Kun ét billede ad gangen på siden (ikke i editoren, hvor alle skal kunne redigeres) */
.wp-site-blocks .jg-range-img ~ .jg-range-img { display: none; }
.wp-site-blocks .jg-range.is-interactive .jg-range-img { display: none; }
.wp-site-blocks .jg-range.is-interactive .jg-range-img.is-active { display: block; animation: jg-fade 200ms cubic-bezier(0.16, 1, 0.3, 1); }

/* Indikation: hint-linje, fanelignende markering af den valgte kategori og hover */
.jg-range.is-interactive .jg-range-hint { display: block; }
.jg-range.is-interactive .jg-range-item { cursor: pointer; transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1); }
.jg-range.is-interactive .jg-range-item:hover { background: color-mix(in srgb, var(--wp--preset--color--secondary) 55%, transparent); }
.jg-range.is-interactive .jg-range-item.is-active { background: var(--wp--preset--color--secondary); }
.jg-range.is-interactive .jg-range-item.is-active h3 { color: var(--wp--preset--color--primary); }
.jg-range.is-interactive .jg-range-item:focus-visible { outline-offset: calc(var(--wp--custom--border--width) * -1); }

@keyframes jg-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks .jg-range.is-interactive .jg-range-img.is-active { animation: none; }
}