/*
Theme Name: TECKEL
Template: ollie
Description: Thème du club T.E.C.K.E.L (enfant d'Ollie). Couleurs et typo : Apparence › Éditeur › Styles.
Version: 1.29
Text Domain: teckel
*/

/* Cards: same image ratio everywhere, whole card clickable feel. The hairline frames white scans and survey drawings. */
.teckel-card .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: 8px; outline: 1px solid rgb(0 0 0 / .1); outline-offset: -1px;
}
.teckel-card .wp-block-post-featured-image { width: 100%; margin: 0; overflow: hidden; border-radius: 8px; }
.wp-block-post-featured-image.is-small img { object-fit: contain !important; /* core sets cover inline */ padding: 1.5rem; box-sizing: border-box; background: #fff; }
@media (prefers-reduced-motion: no-preference) {
	.teckel-card .wp-block-post-featured-image img { transition: transform .3s ease; }
	.teckel-card:hover .wp-block-post-featured-image img { transform: scale(1.04); }
}
.teckel-card .wp-block-post-title a { text-decoration: none; }
.teckel-card .wp-block-post-title a:hover { text-decoration: underline; }

/* Rounded photos in text+image heroes. */
.teckel-hero .wp-block-media-text__media img { border-radius: 8px; aspect-ratio: 4 / 3; object-fit: cover; }

/* Round federation logos row. */
.teckel-logos img { height: 88px; width: auto; object-fit: contain; }

/* Activity filter: the category you're on. It sits inside the list it filters. */
.wp-block-query > .teckel-query-head { margin-bottom: var(--wp--preset--spacing--large); }
.teckel-filter .wp-block-button__link[aria-current] {
	background: var(--wp--preset--color--main); border-color: var(--wp--preset--color--main); color: var(--wp--preset--color--base);
}

/* FAQ: the question at reading size, a chevron on the right that turns when open. */
.wp-block-details { border-bottom: 1px solid var(--wp--preset--color--border-light); padding: 1rem 0; }
.wp-block-details summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	list-style: none; font-size: var(--wp--preset--font-size--medium); font-weight: 600; cursor: pointer;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: ""; flex: none; width: .55rem; height: .55rem; margin-right: .35rem;
	border-right: 2px solid; border-bottom: 2px solid; transform: translateY(-25%) rotate(45deg);
}
.wp-block-details[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
@media (prefers-reduced-motion: no-preference) { .wp-block-details summary::after { transition: transform .2s ease; } }
.wp-block-details > summary + * { margin-top: .75rem; }

/* Header: keep the logo small and the join button tight. */
.site-header .wp-block-site-logo img { height: 44px; width: auto; }
/* Search and (on phones) menu: square outline buttons, as tall as "Nous contacter". WordPress shows the menu button below 600px; the links only fit from ~950px, so it is shown up to 960px. */
.site-header .wp-block-site-logo { flex-shrink: 0; }
@media (max-width: 959px) {
	.site-header .wp-block-group:has(> .wp-block-navigation) { gap: .5rem; }
	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: grid; }
	/* Nous contacter, search, menu: the menu button at the edge, where phone menus usually are. */
	.site-header .wp-block-group:has(> .wp-block-navigation) > .wp-block-buttons { order: 1; }
	.site-header .wp-block-group:has(> .wp-block-navigation) > .wp-block-search { order: 2; }
	.site-header .wp-block-group:has(> .wp-block-navigation) > .wp-block-navigation { order: 3; }
}
.site-header .wp-block-navigation__responsive-container-open, .site-header .wp-block-search__button {
	place-items: center; width: 2.4rem; height: 2.4rem; min-width: 0; margin: 0; padding: 0;
	border: 1.5px solid var(--wp--preset--color--main); border-radius: 5px; background: transparent; color: var(--wp--preset--color--main);
}
.site-header .wp-block-search__button { display: grid; }
.site-header .wp-block-search__button svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.site-header .wp-block-search__button:hover, .site-header .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--main); color: var(--wp--preset--color--base);
}
.site-header .wp-block-search__inside-wrapper { gap: .4rem; padding: 0; border: 0; }
.site-header .wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper { gap: 0; } /* the hidden field would still add the gap */
.site-header .wp-block-search__input { height: 2.4rem; border: 1.5px solid var(--wp--preset--color--main); border-radius: 5px; }

ul.teckel-plain { list-style: none; padding-left: 0; margin: 0; }

/* Linked headings and footer links: underline on hover only. */
.wp-block-heading a, .site-footer a { text-decoration: none; }
.wp-block-heading a:hover, .site-footer a:hover { text-decoration: underline; }
.wp-block-heading a { color: inherit; }

/* Text+photo heroes: text lines up with the logo, gap only on the photo side. */
.teckel-hero.has-media-on-the-right .wp-block-media-text__content { padding-left: 0; }
.teckel-hero:not(.has-media-on-the-right) .wp-block-media-text__content { padding-right: 0; }
@media (max-width: 600px) { .teckel-hero .wp-block-media-text__content { padding: var(--wp--preset--spacing--medium) 0 0; } }
.site-header .wp-block-button__link { white-space: nowrap; }
@media (max-width: 480px) {
	.site-header .wp-block-site-title { display: none; } /* the logo is enough on phones */
}

/* Page and section titles: the wide cut of Mona Sans. Lines of similar length, no word alone on the last line. */
h1, h2.wp-block-heading, h3.wp-block-heading.has-large-font-size { font-stretch: 125%; font-weight: 760; letter-spacing: -.015em; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* One stripe colour of the logo per activity, shown before its name. */
.wp-block-post-terms a, .teckel-topo-names a { color: var(--wp--preset--color--main); }
.wp-block-post-terms a::before, .teckel-topo-names a::before {
	content: ""; display: inline-block; width: .85em; height: .85em; margin-right: .4em; border-radius: 2px;
	vertical-align: -.08em; background: var(--swatch, var(--wp--preset--color--main-accent));
}
.wp-block-post-terms a[href$="activite=speleo"] { --swatch: var(--wp--preset--color--speleo); }
.wp-block-post-terms a[href$="activite=canyoning"] { --swatch: var(--wp--preset--color--canyon); }
.wp-block-post-terms a[href$="activite=plongee"] { --swatch: var(--wp--preset--color--plongee); }

/* Numbered steps are survey stations joined by the centre line. */
.teckel-station {
	display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0; border: 2px solid currentColor; border-radius: 50%;
	background: var(--section-bg, var(--wp--preset--color--base)); font-size: 1.15rem; font-weight: 700; font-stretch: 125%; line-height: 1;
}
.has-tertiary-background-color { --section-bg: var(--wp--preset--color--tertiary); } /* the circle hides the line behind it */
.wp-block-columns:has(.teckel-station) { position: relative; }
.wp-block-columns:has(.teckel-station)::before {
	content: ""; position: absolute; top: 1.5rem; left: 1.5rem; right: 30%; border-top: 1.5px dashed var(--wp--preset--color--primary);
}
.teckel-station { position: relative; }
@media (max-width: 781px) { .wp-block-columns:has(.teckel-station)::before { display: none; } }

/*
 * Homepage: portrait photo on the right half, text on the dark left (the photo fades into it).
 * The survey map below is as wide as the card grid (--topo-w); its ground line is the bottom of the photo,
 * and the lake (y=200 of 1260) sets how far it overlaps. The ground and the lake run on to the screen edges.
 */
:root { --topo-w: min(var(--wp--style--global--wide-size), 100vw - 2 * var(--wp--preset--spacing--medium)); }
/* The dark side turns to deep water-teal towards the ground: the canyon runs in a valley, not in a black mass. */
.teckel-home-hero { background: linear-gradient(180deg, var(--wp--preset--color--main) 45%, #1A4E5D 100%); padding-bottom: calc(var(--topo-w) * .16 + 2rem) !important; }
/* Phones: no room beside the text, so the photo is a band above it, fading into the hero colour (as on desktop). */
@media (max-width: 781px) {
	.teckel-home-hero { padding-top: 36svh !important; }
	.teckel-home-hero .wp-block-cover__image-background {
		height: 44svh; bottom: auto; object-position: 50% 40%;
		-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent);
	}
	.teckel-home-hero .wp-block-cover__background { display: none; }
}
@media (min-width: 782px) {
	.teckel-home-hero .wp-block-cover__image-background {
		left: auto; width: 58%; object-position: 50% 45%;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%);
	}
	.teckel-home-hero .wp-block-cover__background { display: none; }
}
.teckel-topo {
	position: relative; z-index: 2; overflow-x: clip; margin-top: calc(var(--topo-w) * -.166) !important;
	padding: 0 var(--wp--preset--spacing--medium);
}
.teckel-topo svg { display: block; width: 100%; max-width: var(--wp--style--global--wide-size); height: auto; margin: 0 auto; overflow: visible; }
.teckel-topo + * { padding-top: var(--wp--preset--spacing--large) !important; }
/* Survey labels explain themselves on hover (dotted underline drawn in the SVG, as under <abbr>). */
.teckel-topo svg text { cursor: help; }
.teckel-topo svg text:hover { fill: var(--wp--preset--color--primary); }
.teckel-topo-names {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--large);
	max-width: var(--wp--style--global--wide-size); margin: .25rem auto 0; font-weight: 600; text-align: center;
}
.teckel-topo-names a { text-decoration: none; }
.teckel-topo-names a:hover { text-decoration: underline; }
/* Each name sits in the rock above its photo card (same 3 columns), stepping down with the water: equal steps, so the three are on one diagonal. */
.teckel-topo-names {
	position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin: 0; pointer-events: none;
	width: min(100% - 2 * var(--wp--preset--spacing--medium), var(--wp--style--global--wide-size)); aspect-ratio: 1260 / 320; /* = the svg */
}
.teckel-topo-names a { position: relative; top: var(--y); align-self: start; justify-self: center; transform: translateY(-50%); white-space: nowrap; pointer-events: auto; }
.teckel-topo-names a:nth-child(1) { --y: 58%; }
.teckel-topo-names a:nth-child(2) { --y: 78%; }
.teckel-topo-names a:nth-child(3) { --y: 98%; }
@media (max-width: 781px) {
	/*
	 * Shrunk to phone width the section would be ~90px tall with hairlines. Instead it keeps at least 165px of height
	 * (vertical exaggeration, as on geological sections) and fixed-width lines; the overlap with the photo follows.
	 * .63 and .6536 are the desktop overlaps (.16 and .166 of the width) expressed in heights (320/1260 of the width).
	 */
	:root { --topo-h: max(var(--topo-w) * 320 / 1260, 165px); }
	.teckel-home-hero { padding-bottom: calc(var(--topo-h) * .63 + 2rem) !important; }
	.teckel-topo { margin-top: calc(var(--topo-h) * -.6536) !important; }
	.teckel-topo svg { height: var(--topo-h); }
	.teckel-topo svg path:not([filter]) { vector-effect: non-scaling-stroke; }
	.teckel-topo svg text, .teckel-topo .topo-hint { display: none; } /* survey notation is too small to read on phones */
	.teckel-topo-names { font-size: .85rem; gap: .75rem; aspect-ratio: auto; height: var(--topo-h); } /* the svg is stretched taller */
	.teckel-topo-names span { display: none; } /* Canyon · Spéléo · Plongée: one line each, under its third of the map */
}

/* The teckel walks along the top of the "Envie d'essayer ?" band. */
/* The space above the card is the dog's height (image is 300×142) plus a gap, so it never reaches the section above. */
.teckel-cta {
	--dog-w: clamp(170px, 22vw, 300px);
	position: relative; margin-top: calc(var(--dog-w) * 142 / 300 - 1.4rem + clamp(1.5rem, 4vw, 3rem)) !important;
}
.teckel-cta .teckel-cta-dog {
	position: absolute; right: max(var(--wp--preset--spacing--medium), calc(50% - 640px)); bottom: calc(100% - 1.4rem);
	width: var(--dog-w); margin: 0; pointer-events: none;
}
.teckel-cta .teckel-cta-dog img { width: 100%; height: auto; }

/* "Envie d'essayer ?": a card inside the page, not a band glued to the footer. */
.teckel-cta {
	width: min(var(--wp--style--global--wide-size), calc(100% - 2 * var(--wp--preset--spacing--medium))) !important; margin-inline: auto !important;
	margin-bottom: var(--wp--preset--spacing--x-large) !important; border-radius: 16px;
	padding: var(--wp--preset--spacing--large) !important;
}
.teckel-cta h2 { font-size: var(--wp--preset--font-size--large) !important; }

/* Contact form */
.wpcf7 label { display: block; font-weight: 500; }
.wpcf7 input:not([type="submit"]), .wpcf7 select, .wpcf7 textarea {
	box-sizing: border-box; width: 100%; margin-top: .3rem; padding: .6rem .75rem;
	border: 1px solid var(--wp--preset--color--main-accent); border-radius: 6px; font: inherit; background: var(--wp--preset--color--base);
}
.wpcf7 textarea { height: 10rem; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px; }

/* A button to the page you are on leads nowhere (the activity filter shows it as selected instead; the header keeps its layout). */
.wp-block-buttons:not(.teckel-filter, header *) > .wp-block-button:has(> a[aria-current]) { display: none; }

/* Footer: the same gap under every column title, links close together. */
.site-footer .wp-block-column > * { margin-block: 0; }
.site-footer .wp-block-column > * + * { margin-block-start: .6rem; }
.site-footer .wp-block-column > .wp-block-social-links { margin-block-start: 1.25rem; }
.site-footer p:empty { display: none; } /* e-mail or phone not filled in (Infos du club) */

/* Galleries: same crop and corners as the other photos. */
.wp-block-gallery.is-cropped .wp-block-image img { aspect-ratio: 4 / 3; }
.wp-block-gallery .wp-block-image img { border-radius: 8px; }
/* Click a photo: core lightbox (theme.json). Core sizes it on the grid's 4:3 crop; show the whole photo instead, fading in rather than zooming. */
.wp-lightbox-overlay .lightbox-image-container { width: calc(100vw - 32px) !important; height: calc(100dvh - 160px) !important; animation: none !important; }
@media (min-width: 961px) { .wp-lightbox-overlay .lightbox-image-container { width: calc(100vw - 320px) !important; height: calc(100dvh - 80px) !important; } }
.wp-lightbox-overlay .wp-block-image img { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; object-fit: contain !important; }
/* A short last row keeps the size of the others instead of stretching. */
.wp-block-gallery.has-nested-images figure.wp-block-image { flex-grow: 0; }

/* Outing report: no cover photo, the title takes the whole header band. */
.teckel-post-hero .wp-block-columns:not(:has(img)) > .wp-block-column { flex-basis: 100% !important; }
.teckel-post-hero .wp-block-column:not(:has(*)) { display: none; }
/* The fact sheet the report outline starts with (Participants, Massif…) reads as a card. */
.single .wp-block-post-content > ul:first-child:has(> li:first-child > strong:first-child) {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem 2rem;
	list-style: none; padding: var(--wp--preset--spacing--medium); margin-block-end: var(--wp--preset--spacing--large);
	border: 1px solid var(--wp--preset--color--border-light); border-left: 4px solid var(--wp--preset--color--primary); border-radius: 12px;
}
.single .wp-block-post-content > ul:first-child:has(> li:first-child > strong:first-child) > li { margin: 0; }
.single .wp-block-post-content > ul:first-child:has(> li:first-child > strong:first-child) > li:first-child { grid-column: 1 / -1; }
.single .wp-block-post-content > .wp-block-gallery { margin-block: var(--wp--preset--spacing--large); }
@media (min-width: 782px) { .single .wp-block-post-content > .wp-block-gallery.columns-default figure.wp-block-image { width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * .75) !important; } }

/*
 * Pagination: newer on the left, older on the right, page numbers always in the middle,
 * so they stay put on the first and last pages (where one of the two links is missing).
 */
.wp-block-query-pagination { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; }
.wp-block-query-pagination > * { grid-row: 1; margin: 0 !important; }
.wp-block-query-pagination-previous { grid-column: 1; justify-self: start; }
.wp-block-query-pagination-numbers { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.wp-block-query-pagination-next { grid-column: 3; justify-self: end; }
.wp-block-query-pagination .page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next {
	display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .8rem; box-sizing: border-box;
	border: 1.5px solid var(--wp--preset--color--border-light); border-radius: 5px;
	color: var(--wp--preset--color--main); font-size: var(--wp--preset--font-size--small); font-weight: 600; text-decoration: none;
}
.wp-block-query-pagination a:hover { border-color: var(--wp--preset--color--main); }
.wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--main); border-color: var(--wp--preset--color--main); color: var(--wp--preset--color--base); }
.wp-block-query-pagination .page-numbers.dots { min-width: 0; padding: 0; border-color: transparent; }
@media (max-width: 600px) {
	.wp-block-query-pagination { grid-template-columns: 1fr 1fr; }
	.wp-block-query-pagination-numbers { grid-column: 1 / -1; }
	.wp-block-query-pagination-previous, .wp-block-query-pagination-next { grid-row: 2; }
	.wp-block-query-pagination-next { grid-column: 2; }
}

/* Search form on the search results and 404 pages. */
.teckel-search-page { max-width: 34rem; }
.teckel-search-page .wp-block-search__input {
	padding: .6rem .75rem; border: 1px solid var(--wp--preset--color--main-accent); border-radius: 5px; background: var(--wp--preset--color--base);
}

/* Footer: compact, so it closes the page without weighing on it. */
.site-footer .has-main-background-color { padding-top: var(--wp--preset--spacing--large) !important; padding-bottom: var(--wp--preset--spacing--medium) !important; }
.site-footer .has-main-background-color > * + * { margin-block-start: var(--wp--preset--spacing--medium) !important; }
.site-footer .has-main-background-color > .wp-block-group:last-child { padding-top: var(--wp--preset--spacing--small) !important; }
.site-footer .teckel-plain { line-height: 1.7 !important; }
.site-footer .teckel-plain li { margin-block: 0; }
.site-footer .wp-block-column > * + * { margin-block-start: .4rem; }
.site-footer .wp-block-column > .wp-block-social-links { margin-block-start: .8rem; }

/* Search box of the Sorties page, under the activity buttons (looks like the search page's, .teckel-search-page). */
.teckel-search { max-width: 28rem; margin-top: var(--wp--preset--spacing--small); }
.teckel-search-status { margin-top: .5rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--secondary); }

/* « Prochaines sorties »: a row of cards (swipe, or the ‹ › arrows), swapped for a month view by « Voir le calendrier ». */
.teckel-agenda-box { position: relative; }
.teckel-agenda-tools { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--wp--preset--font-size--small); }
@media (hover: none) { .teckel-scroll { display: none; } }
.teckel-agenda-cal > summary {
	display: inline-block; margin-bottom: var(--wp--preset--spacing--small); padding: .45rem 1rem; border: 1px solid currentColor; border-radius: 6px;
	color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--small); font-weight: 600; list-style: none; cursor: pointer;
}
.teckel-agenda-cal > summary::-webkit-details-marker { display: none; }
.teckel-agenda-cal > summary span + span, .teckel-agenda-cal[open] > summary span:first-child { display: none; }
.teckel-agenda-cal[open] > summary span + span { display: inline; }
.teckel-agenda-box:has(.teckel-agenda-cal[open]) :is(.teckel-events, .teckel-scroll) { display: none; }
.teckel-events {
	display: grid; grid-auto-flow: column; grid-auto-columns: min(18rem, 82%); gap: var(--wp--preset--spacing--small);
	margin: 0; padding: 0 0 .75rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
#prochaines-sorties .teckel-event { /* the id beats the theme's .entry-content :not(.wp-block-group) > li:first-child { padding-top: 0 } */
	display: flex; flex-direction: column; gap: .35rem; scroll-snap-align: start; padding: 1rem 1.1rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border-light); border-top: 5px solid var(--c); border-radius: 8px; background: var(--wp--preset--color--base);
}
.teckel-event > * { margin: 0 !important; }
.teckel-event-date { font-weight: 700; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--main); }
.teckel-event h3 { font-size: var(--wp--preset--font-size--medium); line-height: 1.25; }
.teckel-event-cat { order: -1; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; color: var(--wp--preset--color--secondary); }
.teckel-event-cat::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .4em; border-radius: 2px; background: var(--c); }
.teckel-event-meta, .teckel-event-desc { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--secondary); }
.teckel-event-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.teckel-events-none { color: var(--wp--preset--color--secondary); }

/* Home page hero: the next outing, under the buttons */
.teckel-next { margin-top: var(--wp--preset--spacing--small) !important; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--base); opacity: .9; }
.teckel-next a { color: inherit; font-weight: 600; text-underline-offset: .2em; }

/* Cards open their popup (the title button covers the card) */
.teckel-event { position: relative; transition: box-shadow .15s; }
.teckel-event:hover, .teckel-event:has(.teckel-event-open:focus-visible) { box-shadow: 0 4px 16px rgba(31, 37, 40, .12); }
.teckel-event:has(.teckel-event-open:focus-visible) { outline: 2px solid var(--c); outline-offset: 2px; }
.teckel-event-open { all: unset; cursor: pointer; }
.teckel-event-open::after { content: ""; position: absolute; inset: 0; }
.teckel-event-more { margin-top: auto !important; padding-top: .3rem; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; color: var(--wp--preset--color--primary); }
.teckel-nav {
	width: 2.25rem; height: 2.25rem; border: 1px solid var(--wp--preset--color--border-dark); border-radius: 50%;
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--main); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.teckel-nav:hover:not([disabled]) { background: var(--wp--preset--color--tertiary); }
.teckel-nav[disabled] { opacity: .3; cursor: default; }

/* Month view */
.teckel-month > header { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: .6rem; }
.teckel-month h3 { min-width: 9em; margin: 0; font-size: var(--wp--preset--font-size--large); text-align: center; }
.teckel-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--wp--preset--color--border-light); border-left: 1px solid var(--wp--preset--color--border-light); }
.teckel-grid > b, .teckel-day { border-right: 1px solid var(--wp--preset--color--border-light); border-bottom: 1px solid var(--wp--preset--color--border-light); }
.teckel-grid > b { padding: .35rem; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; text-align: center; color: var(--wp--preset--color--secondary); }
.teckel-day { display: flex; flex-direction: column; gap: .2rem; min-height: 6.5rem; padding: .3rem; }
.teckel-day > span { align-self: flex-start; min-width: 1.6em; font-size: var(--wp--preset--font-size--small); font-weight: 600; text-align: center; border-radius: 1em; }
.teckel-day.out { background: var(--wp--preset--color--tertiary); }
.teckel-day.out > span { opacity: .4; }
.teckel-day.today > span { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }
.teckel-chip {
	box-sizing: border-box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; width: 100%; padding: .15rem .35rem;
	border: 0; border-left: 3px solid var(--c); border-radius: 3px; background: color-mix(in srgb, var(--c) 15%, #fff);
	color: var(--wp--preset--color--main); font: inherit; font-size: .75rem; line-height: 1.3; text-align: left; cursor: pointer;
}
.teckel-chip:hover, .teckel-chip:focus-visible { background: color-mix(in srgb, var(--c) 30%, #fff); }
@media (max-width: 600px) {
	.teckel-day { min-height: 3.75rem; padding: .15rem; }
	.teckel-grid > b { padding: .3rem 0; font-size: .65rem; }
	.teckel-chip { height: .55rem; padding: 0; border-left: 0; background: var(--c); font-size: 0; } /* a colour bar; tap it for the popup */
}

/* Popup of an event */
.teckel-event-dialog {
	width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.5rem 1.75rem 1.75rem;
	border: 0; border-top: 6px solid var(--c); border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); color: var(--wp--preset--color--main);
}
.teckel-event-dialog::backdrop { background: rgba(31, 37, 40, .55); }
.teckel-event-dialog > * { margin: 0 0 .75rem; }
.teckel-event-dialog h3 { margin-top: .3rem; padding-right: 2rem; font-size: var(--wp--preset--font-size--x-large); line-height: 1.2; }
.teckel-dialog-close {
	position: absolute; top: .75rem; right: .75rem; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%;
	background: var(--wp--preset--color--tertiary); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.teckel-dialog-when { font-weight: 600; }
.teckel-dialog-where, .teckel-dialog-desc { color: var(--wp--preset--color--secondary); }
.teckel-dialog-desc p, .teckel-dialog-desc ul { margin: .5em 0; }
.teckel-dialog-desc ul { padding-left: 1.3em; }
.teckel-dialog-actions { margin: 1.25rem 0 0 !important; display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.teckel-dialog-ask { font-size: var(--wp--preset--font-size--small); }
html:has(.teckel-event-dialog[open]) { overflow: hidden; }

/* Page headers (the grey band opening every page but the home page) and the gap after them: compact. !important beats the blocks' own padding. */
.wp-block-post-content > .alignfull.has-tertiary-background-color:first-child { padding-top: var(--wp--preset--spacing--large) !important; padding-bottom: var(--wp--preset--spacing--large) !important; }
.wp-block-post-content > .alignfull.has-tertiary-background-color:first-child + .alignfull { padding-top: var(--wp--preset--spacing--large) !important; }
.wp-block-post-content > .alignfull.has-tertiary-background-color:first-child .wp-block-media-text__media img { max-height: 22rem; object-fit: cover; }

/* Short pages (Contact…): the footer stays at the bottom of the window instead of leaving a blank band under it. */
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > main { flex: 1; }