/*
Theme Name: ASGB Escalade
Theme URI: https://escalade-bagnolet-asgb.fr
Description: Thème du site de la section escalade et montagne de l'ASGB (Bagnolet, FSGT). Thème enfant de Twenty Twenty-Five : hérite de ses gabarits de blocs, et ne redéfinit que l'identité visuelle (couleurs, typographie, espacements) via theme.json.
Author: ASGB Escalade
Template: twentytwentyfive
Version: 0.3.6
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: asgb
*/

/* L'identité visuelle passe par theme.json, pas par ce fichier.
   Ne mettre ici que le CSS qui ne peut pas être exprimé en theme.json. */

/* Mobile browsers (Chrome/Safari on Android/iOS) flash a translucent blue
   overlay on any tapped link or button while the finger is down, separate
   from :active/:focus styling. Disable it site-wide. */
a, button {
	-webkit-tap-highlight-color: transparent;
}

/* Le bloc Site Logo a une largeur fixe (200px, définie dans parts/header.html),
   theme.json n'a pas de media query. Rétréci sur petit écran pour ne pas
   écraser la navigation. */
@media (max-width: 600px) {
	.wp-block-site-logo img {
		width: 90px !important;
		height: auto !important;
	}
}

/* Header links (logo, nav items) showed the browser's default focus
   outline on every mouse click, not just keyboard navigation.
   :focus-visible keeps the outline for keyboard users (accessibility)
   while removing it for mouse clicks. */
header.wp-block-template-part a:focus {
	outline: none;
}
header.wp-block-template-part a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* WordPress applies the global block gap as a margin between the top-level
   children of .wp-site-blocks, which puts a ~19px strip of page background
   between the last content section and the footer. Sections that carry their
   own background colour need to butt straight up against the footer, so the
   gap is removed here rather than per page.

   Core sets it with the *logical* `margin-block-start`, so a physical
   `margin-top` here would not override it however specific the selector is,
   the two are separate properties in the cascade. Match the property core
   uses. */
footer.wp-block-template-part {
	margin-block-start: 0;
}

/* The FSGT logo is red + royal blue. Measured against the footer's #102005,
   that blue lands at 1.75:1, well under any legibility threshold, so the mark
   half-disappears when placed directly on the footer. A white plaque keeps the
   federation's colours untouched and readable. The 96px image plus 12px of
   vertical padding totals 120px, the height of the ASGB logo next to it, so
   the pair still reads as one balanced lockup. */
.asgb-footer-fsgt {
	margin: 0;
	background: #FFFFFF;
	padding: 12px 16px;
	border-radius: 8px;
}
.asgb-footer-fsgt img {
	display: block;
}

/* Post category badge (Vie du club grid): a plain visual label, not a link
   — deliberately muted/discrete rather than styled like clickable text. */
.asgb-post-badge,
.asgb-post-badge a {
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	opacity: 0.6;
	background-color: var(--wp--preset--color--accent-6);
	padding: 2px 10px;
	border-radius: 999px;
	text-decoration: none !important;
	pointer-events: none;
}

/* Highlight the current page in the header navigation with the accent
   color, so it's visible which page you're on. */
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--accent-1);
}

/* Anchor targets (any heading with an "anchor" block attribute): landing
   exactly at the viewport's top edge on click feels harsh. A small
   scroll-margin leaves natural breathing room above the heading instead. */
h2[id],
h3[id] {
	scroll-margin-top: 8px;
}

/* Link-card grid: used by the Ressources and Vie du club hub pages. Defined
   once here so both stay visually identical and only need one edit. */
.asgb-link-card-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--30);
}
.asgb-link-card {
	flex: 1 1 260px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--accent-7);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 8px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.asgb-link-card:hover,
.asgb-link-card:focus-visible {
	border-color: var(--wp--preset--color--accent-1);
}
.asgb-link-card__icon {
	font-size: 2rem;
	line-height: 1;
}
.asgb-link-card__title {
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 20px;
}
.asgb-link-card__desc {
	font-size: 16px;
}

/* Homepage hero carousel (post_content for the Accueil page carries only the
   markup; the component's styling lives here so it follows the same design
   tokens as the rest of the site instead of one-off hardcoded values). */
.asgb-hero-carousel {
	position: relative;
	height: 620px;
	overflow: hidden;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.asgb-hero-carousel__track { position: absolute; inset: 0; }
.asgb-hero-carousel__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.asgb-hero-carousel__img.is-active { opacity: 1; }
.asgb-hero-carousel__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}
.asgb-hero-carousel__content {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 40px;
}
.asgb-hero-carousel__content h1 {
	font-family: var(--wp--preset--font-family--fira-code, inherit);
	font-size: var(--wp--preset--font-size--xxx-large);
	color: var(--wp--preset--color--base);
	max-width: 720px;
	margin: 0 0 var(--wp--preset--spacing--20);
	line-height: 1.15;
}
.asgb-hero-carousel__content p {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--large);
	opacity: 0.95;
	max-width: 560px;
	margin: 0 0 var(--wp--preset--spacing--60);
}
.asgb-hero-carousel__cta {
	display: inline-block;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--manrope, inherit);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--large);
	padding: 16px 30px;
	border-radius: 999px;
	text-decoration: none;
}
.asgb-hero-carousel__cta:hover { opacity: 0.9; }
.asgb-hero-carousel__dots {
	position: absolute;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}
.asgb-hero-carousel__dots button {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.45);
}
.asgb-hero-carousel__dots button.is-active { background: #FFFFFF; }
@media (max-width: 782px) {
	.asgb-hero-carousel { height: 480px; }
	.asgb-hero-carousel__content h1,
	h1.has-xxx-large-font-size { font-size: 1.9rem; }
}

/* Homepage "Infos pratiques" section. Paragraph/heading sizes now reference
   the same font-size tokens as the rest of the site (they previously used
   one-off rem values that landed 1px under the sitewide scale). */
.asgb-section {
	padding-top: 3rem;
	padding-bottom: 3rem;
	padding-left: 24px;
	padding-right: 24px;
}
@media (min-width: 783px) {
	.asgb-section {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
}

.asgb-infos__inner { max-width: 1000px; margin: 0 auto; }
.asgb-infos__title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 2rem;
}
.asgb-infos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 2.5rem;
}
.asgb-infos__item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.asgb-infos__icon {
	color: var(--wp--preset--color--accent-1);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	height: 1.61rem;
	position: relative;
	top: 1px;
}
.asgb-infos__icon svg { display: block; width: 22px; height: 22px; }
@media (max-width: 600px) {
	/* On narrow screens the Infos pratiques pictos (Horaires, Où nous
	   trouver, Nous contacter) sit a bit low next to their title text;
	   nudge them up 5px from the desktop baseline offset. */
	.asgb-infos__icon {
		top: -4px;
	}
}
.asgb-infos__item h3 {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	margin: 0 0 8px;
}
.asgb-infos__item p {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	margin: 0;
}
.asgb-infos__item a { text-decoration: underline; }
.asgb-infos__item strong { font-weight: 700; }
.asgb-map { margin-top: 12px; }