/*
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.2
Text Domain: teckel
*/

/* Cards: same image ratio everywhere, whole card clickable feel. */
.teckel-card .wp-block-post-featured-image img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: 6px; }
.teckel-card .wp-block-post-featured-image { margin: 0; overflow: hidden; border-radius: 6px; }
@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. */
.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 */
.wp-block-details { border-bottom: 1px solid var(--wp--preset--color--border-light); padding: 1rem 0; }
.wp-block-details summary { font-weight: 600; cursor: pointer; }

/* Header: keep the logo small and the join button tight. */
.site-header .wp-block-site-logo img { height: 44px; width: auto; }

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 */
}

/* Section titles: the wide cut of Mona Sans (page titles keep the normal width). */
h2.wp-block-heading, h3.wp-block-heading.has-large-font-size { font-stretch: 125%; font-weight: 760; letter-spacing: -.015em; }

/* 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$="/category/speleo/"] { --swatch: var(--wp--preset--color--speleo); }
.wp-block-post-terms a[href$="/category/canyoning/"] { --swatch: var(--wp--preset--color--canyon); }
.wp-block-post-terms a[href$="/category/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; }
@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; }
.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; }
@media (max-width: 781px) {
	/*
	 * Shrunk to phone width the section would be ~80px tall with hairlines. Instead it keeps at least 150px of height
	 * (vertical exaggeration, as on geological sections) and fixed-width lines; the overlap with the photo follows.
	 * .695 and .721 are the desktop overlaps (.16 and .166 of the width) expressed in heights (290/1260 of the width).
	 */
	:root { --topo-h: max(var(--topo-w) * 290 / 1260, 150px); }
	.teckel-home-hero { padding-bottom: calc(var(--topo-h) * .695 + 2rem) !important; }
	.teckel-topo { margin-top: calc(var(--topo-h) * -.721) !important; }
	.teckel-topo svg { height: var(--topo-h); }
	.teckel-topo svg path:not([filter]) { vector-effect: non-scaling-stroke; }
	.teckel-topo svg text { display: none; } /* survey notation is too small to read on phones */
	.teckel-topo-names { font-size: .85rem; gap: .75rem; }
	.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. */
.teckel-cta { position: relative; margin-top: clamp(4rem, 9vw, 7rem) !important; }
.teckel-cta .teckel-cta-dog {
	position: absolute; right: max(var(--wp--preset--spacing--medium), calc(50% - 640px)); bottom: calc(100% - 1.4rem);
	width: clamp(170px, 22vw, 300px); margin: 0; pointer-events: none;
}
.teckel-cta .teckel-cta-dog img { width: 100%; height: auto; }

/* 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; }