/*
Theme Name:   Twenty Twenty-Five Child – SKT Eschle
Theme URI:    https://skt-eschle.de
Description:  Child theme of Twenty Twenty-Five for SKT Schönwald e.V. Holds the site's
              custom styling and an older-audience legibility baseline (larger type,
              generous line spacing, high contrast) so theme updates stay safe.
Template:     twentytwentyfive
Author:       SKT Schönwald e.V.
Version:      1.2.3
Text Domain:  twentytwentyfive-child
*/

/* ============================================================
   SKT Schönwald e.V. — "Eschles Treffpunkt"
   Colours come from the logo: Black-Forest firs (green),
   the warm sun (orange), sky-blue ripples. Brand palette lives
   in theme.json; this file only handles header/footer chrome and
   a few things the Site Editor can't express cleanly.
   Palette reference (slugs match theme.json):
     accent-1 #2f5d3a Tannengrün   accent-2 #e0801b Sonnen-Orange
     accent-3 #2f80b8 Himmelblau    accent-4 #faf4e8 Creme
     accent-5 #1f3f29 Tannenwald    accent-6 #8a5414 Holzbraun
   ============================================================ */


/* === Header ================================================ */
.skt-header {
	border-bottom: 3px solid var(--wp--preset--color--accent-2);
	box-shadow: 0 1px 0 var(--wp--preset--color--accent-4);
	/* Small gutter so the header content isn't flush against the screen edges.
	   The plugin's members sub-header (.skt-subnav) mirrors this value. */
	padding-inline: var(--wp--preset--spacing--20);
}

/* Keep the logo and the nav on one row instead of letting the whole nav drop to a
   second, left-aligned line when the menu is wider than the space beside the logo.
   The nav is allowed to shrink (min-width:0) so its own items wrap within it while it
   stays right-justified — so the last item ("Mitgliederbereich") keeps sitting at the
   right gutter, lining up with the members sub-header's "Abmelden". */
.skt-header .wp-block-group.alignwide {
	flex-wrap: nowrap;
}
.skt-nav {
	min-width: 0;
}

/* Brand lockup: logo + wordmark sit on one line, vertically centred. */
.skt-brand .wp-block-site-title {
	line-height: 1.1;
}

.skt-brand .wp-block-site-title a {
	color: var(--wp--preset--color--accent-1);
	font-weight: 800;
	text-decoration: none;
	letter-spacing: -0.01em;
}

/* Logo on a round white disc. The disc is drawn on the link around the image, never on
   the image itself: a browser clips a rounded image's content to the circle *inside its
   padding*, so rounding the img always cut into "ESCHLES" and "TREFF" (the artwork is a
   343×310 rectangle with lettering out to its corners), however much padding it had.
   The img stays an unclipped rectangle at 80% of the disc's width, which keeps every
   letter inside the circle with a white margin (the mark needs a circle ~7% wider than
   itself). --skt-logo-disc sets the size per placement. */
.skt-brand .wp-block-site-logo,
.skt-footer-logo {
	--skt-logo-disc: 68px;
}
.skt-brand .wp-block-site-logo a,
.skt-footer-logo a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--skt-logo-disc);
	height: var(--skt-logo-disc);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
}
.skt-brand .wp-block-site-logo img,
.skt-footer-logo img {
	width: calc(var(--skt-logo-disc) * 0.8) !important; /* beats WP's generated block width */
	height: auto;
	border-radius: 0; /* core makes it inherit the link's radius — that is the clip */
}

/* Main navigation — clear tap targets, amber hover/active for older eyes. */
.skt-nav .wp-block-navigation-item__content {
	font-weight: 700;
	padding: 10px 4px;
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
}

.skt-nav .wp-block-navigation-item__content:hover,
.skt-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-2);
}

/* Underline-on-hover affordance without shifting layout. */
.skt-nav .wp-block-navigation-item__content {
	border-bottom: 2px solid transparent;
}
.skt-nav .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--wp--preset--color--accent-2);
}

/* "Mitgliederbereich" call-to-action item — a small filled pill. */
.skt-nav .skt-nav-cta .wp-block-navigation-item__content {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 10px 18px;
	border-bottom: 0;
}
.skt-nav .skt-nav-cta .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--base);
}

/* Mobile overlay menu — a small card pinned to the top-right corner (≈ half the
   screen each way), so the green no longer swallows the whole viewport and the
   logo + page stay visible around it. A faint fir-tree texture (Black-Forest
   motif) sits over the green. Rows are compacted and the type slightly reduced
   so the long German labels fit one line in the narrow panel. Dismiss via the
   close (X) button (top right). */
.skt-nav .wp-block-navigation__responsive-container.is-menu-open {
	box-sizing: border-box;
	top: 0;
	left: auto;
	right: 0;
	bottom: auto;          /* release the default inset:0 */
	width: 50vw;
	min-width: 200px;      /* don't get unusably narrow on very small phones */
	height: 50vh;
	padding: 16px;         /* was 16px 30px — reclaim side space for the labels */
	overflow-y: auto;      /* safety on very short screens */
	border-bottom-left-radius: 14px;
	box-shadow: -6px 8px 24px rgba(0, 0, 0, 0.25);
	/* Faint repeating firs layered over the green (background-color stays, set by
	   WP's .has-accent-5-background-color). */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='%23ffffff' fill-opacity='0.055'%3E%3Cpath d='M16 38l-7 0 4-7-2 0 5-8 5 8-2 0 4 7-7 0 0 5-2 0z'/%3E%3Cpath d='M44 24l-7 0 4-7-2 0 5-8 5 8-2 0 4 7-7 0 0 5-2 0z'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 56px 56px;
}
/* Less top padding above the first row (default leaves room for the X button). */
.skt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 36px;
}
/* Drop the vertical gap between items so the compacted rows pack into the half. */
.skt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
}
.skt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
	font-size: 1rem;       /* was 1.25rem — keeps long labels on one line */
	padding: 6px 0;
	border-bottom: 0;
}
/* "Mitgliederbereich" CTA — sun-orange on the green panel so it stands out
   instead of green-on-green. Overlay only; the desktop header keeps its green
   pill on the white bar. */
.skt-nav .wp-block-navigation__responsive-container.is-menu-open .skt-nav-cta .wp-block-navigation-item__content {
	display: inline-block;
	padding: 8px 12px;     /* tighter pill so it fits the half-width panel */
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
}


/* === Footer ================================================ */
/* The footer band is dark green, so force light text on everything
   inside it — this overrides theme.json's green heading colour. */
.skt-footer,
.skt-footer p,
.skt-footer li,
.skt-footer h1,
.skt-footer h2,
.skt-footer h3,
.skt-footer address {
	color: var(--wp--preset--color--base);
}

.skt-footer-brand {
	align-items: flex-start;
}

/* Logo sits on a white disc so the multi-colour mark stays legible on the dark
   green footer band; mirrors the circular logo treatment in the header. */
.skt-footer-logo {
	flex: 0 0 auto;
}
.skt-footer-logo {
	--skt-logo-disc: 88px; /* base disc styles live with the header logo above */
}

.skt-footer-title {
	margin-top: 0;
}

.skt-footer a {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.skt-footer a:hover {
	color: var(--wp--preset--color--accent-2);
}

.skt-footer-rule {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.skt-footer-bottom {
	opacity: 0.92;
}
.skt-legal-nav .wp-block-navigation-item__content {
	text-decoration: none;
}
.skt-legal-nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/* "Einfache Ansicht" toggle — a small, quiet control in the footer bottom row that
   switches to the plain/high-readability view (plain.css). Kept light and bordered
   so it sits unobtrusively on the dark green band. The plain view restyles it for
   the white background. The JS lives in assets/js/plain-toggle.js. */
.skt-plain-toggle {
	flex: 0 0 auto;
	margin: 0;
	padding: 4px 12px;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--wp--preset--color--base);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	cursor: pointer;
}
.skt-plain-toggle:hover {
	border-color: var(--wp--preset--color--base);
}
/* Default (normal view) shows the "switch to plain" label; plain.css flips this. */
.skt-plain-toggle__to-normal {
	display: none;
}
.skt-plain-toggle__to-plain {
	display: inline;
}


/* === Section rhythm & heritage headings ==================== */
/* A short orange "stamp" under content section headings — a consistent heritage
   motif that gives every section a little identity. Scoped to page/post content
   so it never touches the hero (white heading on the cover) or the footer. */
.entry-content h2.wp-block-heading,
.skt-album__title,
.skt-events__title {
	position: relative;
}
.entry-content > h2.wp-block-heading::after,
.wp-block-group:not(.skt-hero):not(.skt-footer) > h2.wp-block-heading::after,
.skt-album__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 0.4em;
	border-radius: 3px;
	background: var(--wp--preset--color--accent-2);
}

/* Full-width Creme bands (e.g. the homepage "Nächste Termine" group) get a touch
   of warmth and hairline rules so they read as a distinct, cosy section. */
.wp-block-group.has-accent-4-background-color {
	border-top: 1px solid rgba(31, 63, 41, 0.10);
	border-bottom: 1px solid rgba(31, 63, 41, 0.10);
}


/* === Mobile layout ========================================= */
@media (max-width: 600px) {
	/* The "Veranstaltungskalender" page title is a single long German compound
	   word with no space to wrap on. On narrow phones it would otherwise run off
	   the screen, so let the browser hyphenate it (lang="de" is set on <html>)
	   and break it onto two lines. */
	.wp-block-post-title {
		overflow-wrap: break-word;
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	/* Slimmer header on phones: smaller logo + less vertical padding so it stops
	   eating the top of every screen (~104px → ~64px). The padding is set as an
	   inline style on the group (theme.json spacing), so !important is needed. */
	.skt-header .wp-block-group.alignwide {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	.skt-brand .wp-block-site-logo {
		--skt-logo-disc: 44px;
		width: 44px !important;   /* WP sizes the logo block to 68px via generated CSS */
	}

	/* Trim oversized fixed spacers and collapse empty headings in page content
	   so phones don't scroll through big chunks of dead space. */
	.entry-content .wp-block-spacer {
		height: 24px !important;  /* inline height:60px/30px is too tall on phones */
	}
	.entry-content h2.wp-block-heading:empty {
		display: none;
	}
}


/* === Accessibility ========================================= */
/* Visible keyboard focus everywhere (required for older / keyboard users). */
:where(a, button, input, select, textarea, .wp-block-navigation-item__content):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-2);
	outline-offset: 2px;
	border-radius: 2px;
}

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