/*
Theme Name:   IG Grevenbroich
Description:  Block theme for the IG Schiesssport Grevenbroich: colours of the IG coat of arms (target green, shield red), clear structure, easy to maintain in the block editor, made for phones first.
Version:      0.2.0
Requires at least: 6.6
Requires PHP: 8.0
Author:       Marius Kolschefsky
Text Domain:  ig-grevenbroich
License:      GPL-2.0-or-later
Fonts:        Archivo and Atkinson Hyperlegible, both SIL Open Font License 1.1 (assets/fonts)
*/

/* ------------------------------------------------------------------
   Basics
   ------------------------------------------------------------------ */
html { scroll-padding-top: 5.5rem; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--wp--preset--color--gold); outline-offset: 2px; }
img { height: auto; }
.ig-inhalt { padding-block: var(--wp--preset--spacing--l); }
.ig-inhalt.is-ohne-titel { padding-block-start: 0; }
.ig-inhalt > :last-child { margin-block-end: 0; }

/* ------------------------------------------------------------------
   Header: logo, name, navigation; sticks to the top
   ------------------------------------------------------------------ */
.ig-kopf-rahmen { position: sticky; top: 0; z-index: 50; }
.admin-bar .ig-kopf-rahmen { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .ig-kopf-rahmen { top: 0; } }
.ig-kopf { border-bottom: 1px solid var(--wp--preset--color--linie); padding-block: .6rem; }
.ig-kopf-innen { gap: 1rem; }
.ig-marke { gap: .75rem; min-width: 0; }
.ig-marke .wp-block-site-logo img { width: 48px; height: auto; }
.ig-marke-text { gap: 0 !important; min-width: 0; }
.ig-marke .wp-block-site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--titel);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
}
.ig-marke .wp-block-site-title a { color: var(--wp--preset--color--tannengruen); text-decoration: none; }
.ig-unterzeile { margin: 0; font-size: .78rem; line-height: 1.3; color: var(--wp--preset--color--grau); max-width: 26rem; }

.ig-menue .wp-block-navigation-item__content { padding: .45rem .7rem; border-radius: 999px; color: var(--wp--preset--color--tinte); }
.ig-menue .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--gruen-hell); color: var(--wp--preset--color--tannengruen); }
.ig-menue .current-menu-item > .wp-block-navigation-item__content,
.ig-menue [aria-current="page"] { background: var(--wp--preset--color--tannengruen); color: var(--wp--preset--color--weiss); }
.ig-menue .wp-block-navigation__container { gap: .15rem; }
.ig-menue .wp-block-navigation__responsive-container-open {
	padding: .55rem;
	border-radius: 10px;
	background: var(--wp--preset--color--tannengruen);
	color: var(--wp--preset--color--weiss);
}
/* Phone menu (overlay) */
.ig-menue .wp-block-navigation__responsive-container.is-menu-open { padding: 1.25rem; }
.ig-menue .is-menu-open .wp-block-navigation__container { gap: .35rem; font-size: 1.35rem; }
.ig-menue .is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--weiss); padding: .5rem .25rem; }
.ig-menue .is-menu-open .wp-block-navigation-item__content:hover,
.ig-menue .is-menu-open [aria-current="page"] { background: none; color: var(--wp--preset--color--gold); }

@media (max-width: 1099px) { .ig-unterzeile { display: none; } }
@media (max-width: 420px) { .ig-marke .wp-block-site-title { font-size: 1rem; } .ig-marke .wp-block-site-logo img { width: 40px; } }

/* ------------------------------------------------------------------
   Page header and "dark with rings" style: the target of the IG emblem
   ------------------------------------------------------------------ */
.is-style-ig-ringe {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--wp--preset--color--tannengruen);
	color: var(--wp--preset--color--weiss);
}
.is-style-ig-ringe::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: min(70vw, 760px);
	aspect-ratio: 1;
	right: -12%;
	top: 50%;
	translate: 0 -50%;
	border-radius: 50%;
	background:
		radial-gradient(circle, rgba(255,255,255,.10) 0 9%, transparent 9.4%),
		repeating-radial-gradient(circle, transparent 0 calc(10% - 2px), rgba(255,255,255,.075) calc(10% - 2px) 10%);
	-webkit-mask-image: radial-gradient(circle, #000 55%, transparent 71%);
	mask-image: radial-gradient(circle, #000 55%, transparent 71%);
	pointer-events: none;
}
.is-style-ig-ringe :where(h1, h2, h3, h4, a:not(.wp-element-button)) { color: inherit; }
.is-style-ig-ringe .wp-block-button.is-style-outline .wp-block-button__link { color: var(--wp--preset--color--weiss); border-color: rgba(255,255,255,.7); }
.is-style-ig-ringe .wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgba(255,255,255,.12); }

.ig-seitenkopf { padding-block: clamp(2.25rem, 7vw, 4.5rem) clamp(2rem, 6vw, 3.75rem); }
.ig-seitenkopf .wp-block-post-title, .ig-seitenkopf h1 { margin: 0; color: var(--wp--preset--color--weiss); }
.ig-seitenkopf::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--wp--preset--color--rot) 0 33%, var(--wp--preset--color--gold) 33% 40%, transparent 40%);
}

/* Start page hero */
.ig-hero { padding-block: clamp(2.5rem, 8vw, 5.5rem); }
.ig-hero .ig-hero-spalten { align-items: center !important; gap: clamp(1.5rem, 5vw, 4rem); }
.ig-hero h1 { font-size: clamp(2.1rem, 5.6vw, 3.6rem); margin: .25rem 0 1rem; text-wrap: balance; }
.ig-hero .ig-hero-text { font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 34rem; opacity: .92; }
.ig-hero .wp-block-image img { filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.ig-dachzeile {
	display: inline-block;
	margin: 0;
	padding: .3rem .8rem;
	border-radius: 999px;
	background: rgba(255,255,255,.12);
	font-family: var(--wp--preset--font-family--titel);
	font-size: .8rem;
	font-weight: 650;
	letter-spacing: .08em;
	text-transform: uppercase;
}
:where(.ig-inhalt) .ig-dachzeile:not(.is-style-ig-ringe .ig-dachzeile) { background: var(--wp--preset--color--gruen-hell); color: var(--wp--preset--color--gruen); }
@media (max-width: 781px) {
	.ig-hero .ig-hero-bild { order: -1; }
	.ig-hero .ig-hero-bild .wp-block-image { max-width: 150px; margin-inline: auto 0; }
	.ig-hero .ig-hero-bild { margin-bottom: -1rem; }
}

/* ------------------------------------------------------------------
   Sections, cards, bands
   ------------------------------------------------------------------ */
.ig-abschnitt { padding-block: var(--wp--preset--spacing--l); }
.ig-abschnitt + .ig-abschnitt { padding-block-start: 0; }
.ig-abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.25rem; }
.ig-abschnitt-kopf > * { margin: 0 !important; }

.is-style-ig-karte {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--wp--preset--color--weiss);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 16px;
}
.is-style-ig-karte > :first-child { margin-top: 0; }
.is-style-ig-karte > :last-child { margin-bottom: 0; }
.is-style-ig-karte h2, .is-style-ig-karte h3 { font-size: var(--wp--preset--font-size--gross); }
.wp-block-column > .is-style-ig-karte:only-child { height: 100%; box-sizing: border-box; }
.wp-block-column > .is-style-ig-karte + .is-style-ig-karte { margin-top: 1rem; }

/* Rows of cards (grid group with "Karte" children): centred, so a short last row does not
   stick to the left. 1 card per row on phones, 2 on tablets, 3 on wide screens (exactly 4 cards: 4 in a row). */
.is-layout-grid:has(> .is-style-ig-karte) { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.is-layout-grid:has(> .is-style-ig-karte) > * { flex: 0 0 100%; box-sizing: border-box; margin: 0 !important; }
@media (min-width: 600px) {
	.is-layout-grid:has(> .is-style-ig-karte) > * { flex-basis: calc((100% - 1.25rem) / 2); }
}
@media (min-width: 1000px) {
	.is-layout-grid:has(> .is-style-ig-karte) > * { flex-basis: calc((100% - 2 * 1.25rem) / 3); }
	.is-layout-grid:has(> .is-style-ig-karte:nth-child(4):last-child) > * { flex-basis: calc((100% - 3 * 1.25rem) / 4); }
}

.is-style-ig-band {
	background: var(--wp--preset--color--gruen-hell);
	padding-block: var(--wp--preset--spacing--l);
}

.ig-symbol {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 0 .75rem !important;
	border-radius: 50%;
	background: var(--wp--preset--color--gruen-hell);
	color: var(--wp--preset--color--gruen);
	font-family: var(--wp--preset--font-family--titel);
	font-size: 1.15rem;
	font-weight: 800;
}

/* Facts: big numbers */
.wp-block-columns.is-style-ig-fakten { gap: 0; border-radius: 16px; overflow: hidden; background: var(--wp--preset--color--weiss); border: 1px solid var(--wp--preset--color--linie); }
.is-style-ig-fakten > .wp-block-column { padding: 1.25rem 1.25rem 1.1rem; border-left: 1px solid var(--wp--preset--color--linie); }
.is-style-ig-fakten > .wp-block-column:first-child { border-left: 0; }
.is-style-ig-fakten p { margin: 0; }
.is-style-ig-fakten .ig-zahl {
	font-family: var(--wp--preset--font-family--titel);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 850;
	line-height: 1;
	color: var(--wp--preset--color--rot);
	margin-bottom: .35rem;
}
.is-style-ig-fakten .ig-zahl-text { color: var(--wp--preset--color--grau); font-size: .95rem; line-height: 1.35; }
@media (max-width: 781px) {
	.wp-block-columns.is-style-ig-fakten { display: grid !important; grid-template-columns: 1fr 1fr; }
	.is-style-ig-fakten > .wp-block-column { border-left: 0; border-top: 1px solid var(--wp--preset--color--linie); }
	.is-style-ig-fakten > .wp-block-column:nth-child(-n+2) { border-top: 0; }
	.is-style-ig-fakten > .wp-block-column:nth-child(even) { border-left: 1px solid var(--wp--preset--color--linie); }
}

/* Lists */
.is-style-ig-haken { list-style: none; padding-left: 0; }
.is-style-ig-haken li { position: relative; padding-left: 1.9rem; margin-bottom: .55rem; }
.is-style-ig-haken li::before {
	content: "";
	position: absolute;
	left: 0; top: .2em;
	width: 1.2rem; height: 1.2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}

.is-style-ig-chronik { list-style: none; padding: 0; margin-left: .4rem; border-left: 3px solid var(--wp--preset--color--linie); }
.is-style-ig-chronik > li { position: relative; padding: 0 0 1.5rem 1.6rem; }
.is-style-ig-chronik > li:last-child { padding-bottom: 0; }
.is-style-ig-chronik > li::before {
	content: "";
	position: absolute;
	left: -.62rem; top: .3rem;
	width: .95rem; height: .95rem;
	border-radius: 50%;
	background: var(--wp--preset--color--weiss);
	border: 3px solid var(--wp--preset--color--rot);
	box-sizing: border-box;
}
.is-style-ig-chronik > li > strong:first-child {
	display: block;
	font-family: var(--wp--preset--font-family--titel);
	font-size: 1.15rem;
	color: var(--wp--preset--color--rot);
}

/* Images */
.is-style-ig-rund img { border-radius: 16px; }
.wp-block-image figcaption { margin-top: .5rem; }

/* Details (collapsible) */
.wp-block-details { border: 1px solid var(--wp--preset--color--linie); border-radius: 12px; padding: .9rem 1.1rem; background: var(--wp--preset--color--weiss); }
.wp-block-details + .wp-block-details { margin-top: .6rem; }
.wp-block-details summary { cursor: pointer; font-family: var(--wp--preset--font-family--titel); font-weight: 700; font-size: 1.05rem; }
.wp-block-details[open] summary { margin-bottom: .75rem; }

/* Link lists */
.ig-linkliste { list-style: none; padding: 0; columns: 15rem 2; column-gap: 2rem; }
.ig-linkliste li { break-inside: avoid; padding: .35rem 0; border-bottom: 1px solid var(--wp--preset--color--linie); }
.ig-linkliste a { text-decoration: none; font-weight: 700; }
.ig-linkliste a:hover { text-decoration: underline; }

/* Contact cards */
.ig-person { margin: 0; }
.ig-rolle { margin: 0 0 .15rem !important; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--rot); }

/* Tables */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table td, .wp-block-table th { border: 0; border-bottom: 1px solid var(--wp--preset--color--linie); padding: .6rem .5rem; text-align: left; vertical-align: top; }
.wp-block-table thead th { border-bottom: 2px solid var(--wp--preset--color--tannengruen); font-family: var(--wp--preset--font-family--titel); }

/* File block (PDF) */
.wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: 1rem 1.25rem; border-radius: 14px; background: var(--wp--preset--color--weiss); border: 1px solid var(--wp--preset--color--linie); }
.wp-block-file:not(.wp-element-button) { font-size: 1rem; }
.wp-block-file > a:first-child { font-weight: 700; flex: 1 1 14rem; font-size: 1.05rem; }
.wp-block-file .wp-block-file__button { margin: 0; border-radius: 999px; background: var(--wp--preset--color--tannengruen); padding: .5rem 1.1rem; font-family: var(--wp--preset--font-family--titel); font-weight: 650; }

/* Legal pages: compact */
.ig-rechtstext { font-size: .97rem; }
.ig-rechtstext h2 { font-size: var(--wp--preset--font-size--xl); margin-top: 2.25rem; }
.ig-rechtstext h3 { font-size: var(--wp--preset--font-size--gross); margin-top: 1.75rem; }

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.ig-fuss { padding-block: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m); font-size: .95rem; }
.ig-fuss a { color: var(--wp--preset--color--weiss); }
.ig-fuss a:hover { color: var(--wp--preset--color--gold); }
.ig-fuss p { margin: 0 0 .75rem; opacity: .9; }
.ig-fuss-name { font-family: var(--wp--preset--font-family--titel); font-weight: 700; opacity: 1 !important; line-height: 1.35; }
.ig-fuss-titel { font-size: .8rem !important; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--gold) !important; margin: 0 0 .75rem; }
.ig-fuss-links { list-style: none; padding: 0; margin: 0; }
.ig-fuss-links li { margin-bottom: .4rem; }
.ig-fuss .wp-block-site-logo { margin-bottom: .75rem; }
.ig-fuss-spalten { gap: 2rem 2.5rem; }

/* More air above section headings inside page content */
.ig-inhalt > :where(h2.wp-block-heading) { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
.ig-inhalt > :where(h3.wp-block-heading) { margin-top: 2rem; }

/* Phone menu: left aligned, large touch targets */
.ig-menue .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start !important; padding-top: 2.5rem; }
.ig-menue .is-menu-open .wp-block-navigation__container { align-items: flex-start !important; }
.ig-menue .is-menu-open .wp-block-navigation-item { font-size: 1.5rem; font-weight: 700; }
.ig-menue .wp-block-navigation__responsive-container-close { padding: .5rem; }

/* Coats of arms row: three per line on phones */
@media (max-width: 600px) {
	.igv-vereine.is-wappen .igv-vereine-liste { grid-template-columns: repeat(3, 1fr); }
	.igv-verein-kurz { font-size: .75rem; padding: .6rem .25rem; }
	.igv-verein-kurz .igv-wappen { width: 52px; height: 52px; }
}

/* ------------------------------------------------------------------
   Contact cards (group "Karte" + class ig-kontakt) and the address band (ig-infoband)
   ------------------------------------------------------------------ */
.is-style-ig-karte.ig-kontakt { display: flex; flex-direction: column; gap: 1rem; }
.is-style-ig-karte.ig-kontakt > * { margin: 0 !important; }
.ig-kontakt-kopf { display: flex; align-items: center; gap: .9rem; }
/* Same header height in a row of cards, so the lines under the names line up (function may take two lines) */
@media (min-width: 600px) { .ig-kontakt-kopf { min-height: 4.75rem; } }
.ig-kontakt-name { min-width: 0; }
.ig-monogramm {
	flex: none;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--tannengruen);
	color: var(--wp--preset--color--weiss);
	font-family: var(--wp--preset--font-family--titel);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: .04em;
	/* Target rings: white gap, red ring */
	box-shadow: 0 0 0 3px var(--wp--preset--color--weiss), 0 0 0 5px var(--wp--preset--color--rot);
}
.ig-kontakt .ig-aktionen {
	padding-top: .9rem;
	border-top: 1px solid var(--wp--preset--color--linie);
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.ig-kontakt .ig-aktionen br { display: none; }
.ig-aktion {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	width: fit-content;
	padding: .35rem .1rem;
	color: var(--wp--preset--color--gruen);
	font-weight: 700;
	text-decoration: none;
}
.ig-aktion:hover, .ig-aktion:focus-visible { color: var(--wp--preset--color--tannengruen); text-decoration: underline; text-underline-offset: .2em; }
.ig-aktion-symbol { flex: none; }

.ig-infoband { margin-top: 1.25rem !important; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)) !important; }
.ig-info {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: 0 .9rem;
	padding: 1.1rem 1.25rem;
	border-radius: 16px;
	background: var(--wp--preset--color--gruen-hell);
}
.ig-info::before {
	content: "";
	grid-row: span 3;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--weiss);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.3rem;
}
.ig-info-post::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23156b3b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.ig-info-stand::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23156b3b' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23156b3b'/%3E%3C/svg%3E"); }
.ig-info > * { margin: 0 !important; grid-column: 2; }
.ig-info strong { color: var(--wp--preset--color--tinte); }