/*
Theme Name: SKNG Shotokan
Description: Thème de blocs du Shotokan Karate-do Noisy-le-Grand.
Version: 3.0.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: skng-shotokan
*/

:root {
	--skng-width: 96rem;
	--skng-gutter: clamp(1.25rem, 4.2vw, 5rem);
	--skng-section: clamp(3.75rem, 6.6vw, 7rem);
	--skng-navy: #060f23;
	--skng-royal: #0038a5;
	--skng-ice: #eef5ff;
	--skng-accent: #8bceff;
	--skng-line: #29416b;
}

.wp-site-blocks > *,
.wp-site-blocks > .skng-main,
.wp-site-blocks > .wp-block-template-part,
.skng-main > *,
.skng-main > .skng-section {
	margin-block-start: 0;
}

.skng-main [id] {
	scroll-margin-block-start: 1.5rem;
}

.skng-header-inner,
.skng-footer-inner,
.skng-wrap {
	box-sizing: border-box;
	width: min(calc(100% - 2 * var(--skng-gutter)), var(--skng-width));
	margin-inline: auto;
}

.skng-header {
	background: var(--skng-navy);
	border-block-end: 1px solid #29416b70;
	color: #fff;
}

.skng-header-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
	align-items: center;
	min-height: clamp(5.25rem, 6.8vw, 6.5rem);
	gap: clamp(1rem, 2.5vw, 2.5rem);
}

.skng-header-inner > *,
.skng-brand-lockup > *,
.skng-footer-inner > * {
	margin-block: 0;
}

.skng-brand-lockup {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.skng-brand {
	flex: 0 0 auto;
}

.skng-brand img {
	display: block;
	width: clamp(3.1rem, 4.3vw, 4.2rem);
	height: auto;
	border-radius: 0.2rem;
}

.skng-brand-name {
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.25;
}

.skng-brand-name strong {
	font-family: var(--wp--preset--font-family--barlow-condensed, sans-serif);
	font-size: clamp(1.3rem, 2.2vw, 1.95rem);
	line-height: 1;
}

.skng-navigation {
	color: #fff;
	font-size: 0.93rem;
	font-weight: 560;
}

.skng-navigation .wp-block-navigation__container {
	gap: clamp(0.9rem, 1.7vw, 1.75rem);
}

.skng-navigation a,
.skng-navigation a:visited {
	color: inherit;
	text-decoration: none;
}

.skng-navigation a:hover {
	color: var(--skng-accent);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.skng-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--skng-navy);
	color: #fff;
}

.skng-header-action {
	justify-self: end;
}

.skng-header-action .wp-block-button__link,
.skng-hero-actions .wp-block-button__link,
.skng-club-actions .wp-block-button__link,
.skng-contact .wp-block-button__link {
	display: inline-flex;
	min-height: 3.1rem;
	align-items: center;
	justify-content: center;
	padding: 0.83rem 1.45rem;
	border: 1px solid var(--skng-accent);
	border-radius: 0.3rem;
	background: linear-gradient(135deg, #a6deff, #74bfff);
	color: var(--skng-navy);
	font-size: 0.91rem;
	font-weight: 740;
	line-height: 1.25;
	text-decoration: none;
}

.skng-header-action .wp-block-button__link:hover,
.skng-hero-actions .wp-block-button__link:hover,
.skng-club-actions .wp-block-button__link:hover,
.skng-contact .wp-block-button__link:hover {
	border-color: #fff;
	background: #eff8ff;
}

.skng-hero {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	min-height: clamp(32.5rem, 43vw, 46.5rem);
	padding: clamp(3rem, 7vw, 6rem) 0;
	background: var(--skng-navy);
	color: #fff;
}

.skng-hero.wp-block-cover .wp-block-cover__image-background {
	inset: 0 0 0 auto;
	width: min(85%, 109rem);
	object-position: right 18%;
}

.skng-hero .wp-block-cover__background.has-background-dim {
	opacity: 1;
	background-color: transparent !important;
	background-image:
		linear-gradient(90deg, #060f23 0%, #060f23 17%, #060f23e8 30%, #060f2385 47%, #060f2326 63%, transparent 86%),
		linear-gradient(0deg, #060f236e, transparent 42%);
}

.skng-hero .wp-block-cover__inner-container {
	width: 100%;
	color: #fff;
}

.skng-hero-title {
	max-width: 49rem;
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--inter, system-ui, sans-serif);
	font-size: clamp(2.75rem, 4.4vw, 5.4rem);
	font-weight: 450;
	letter-spacing: -0.055em;
	line-height: 1.06;
}

.skng-hero-title strong {
	font-weight: 820;
}

.skng-hero-title::after {
	display: block;
	width: min(78%, 29rem);
	height: clamp(0.36rem, 0.65vw, 0.68rem);
	margin-block-start: 0.95rem;
	background: linear-gradient(90deg, #2877f0, #8dceff);
	clip-path: polygon(0 60%, 7% 37%, 22% 25%, 38% 28%, 58% 10%, 81% 14%, 96% 0, 100% 17%, 96% 33%, 99% 44%, 90% 66%, 73% 67%, 55% 78%, 34% 77%, 14% 96%, 0 100%, 3% 79%);
	content: "";
}

.skng-hero-slogan {
	max-width: 28rem;
	margin: 1.25rem 0 1.65rem;
	color: #eef6ff;
	font-size: clamp(1.05rem, 1.65vw, 1.32rem);
	font-weight: 580;
}

.skng-section {
	padding-block: var(--skng-section);
}

.skng-section h2,
.skng-reading h1 {
	margin-block: 0 1.2rem;
	font-family: var(--wp--preset--font-family--inter, system-ui, sans-serif);
	font-size: clamp(2.15rem, 4.7vw, 4.05rem);
	font-weight: 820;
	letter-spacing: -0.045em;
	line-height: 1.08;
}

.skng-club {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block-end: calc(var(--skng-section) + clamp(1.9rem, 4vw, 4rem));
	background: radial-gradient(ellipse at 50% 38%, #101f3e, #070f22 76%);
	color: #fff;
	text-align: center;
}

/* Les contours polygonaux servent de repli aux navigateurs sans courbes CSS. */
.skng-club::before {
	position: absolute;
	z-index: -1;
	inset: -12% -7%;
	background: radial-gradient(ellipse at 50% 40%, #1a2d50 7%, #254c83 70%, #3563a4 100%);
	clip-path: polygon(
		0 0, 5% 0, 9% 24%, 12% 42%, 19% 62%, 26% 74%, 15% 68%, 8% 54%, 0 35%, 0 0,
		11% 0, 19% 0, 22% 24%, 25% 41%, 33% 62%, 43% 88%, 32% 76%, 24% 59%, 17% 34%, 11% 0,
		28% 0, 32% 0, 35% 15%, 38% 31%, 44% 51%, 49% 64%, 43% 59%, 36% 42%, 32% 26%, 28% 0,
		39% 0, 46% 0, 50% 24%, 54% 43%, 62% 66%, 73% 98%, 60% 85%, 52% 65%, 45% 40%, 39% 0,
		54% 0, 60% 0, 66% 29%, 75% 48%, 82% 61%, 74% 58%, 66% 45%, 59% 27%, 54% 0,
		67% 0, 74% 0, 78% 21%, 84% 40%, 91% 55%, 100% 65%, 100% 77%, 90% 69%, 81% 52%, 75% 34%, 67% 0,
		83% 0, 88% 0, 91% 17%, 100% 35%, 100% 47%, 91% 34%, 83% 0
	);
	content: "";
	pointer-events: none;
}

@supports (clip-path: shape(from 0 0, line to 100% 100%, close)) {
	.skng-club::before {
		clip-path: shape(
			from 0 0, line to 5% 0,
			curve to 13% 46% with 8% 12% / 9% 32%,
			curve to 26% 74% with 17% 58% / 21% 68%,
			curve to 8% 54% with 19% 73% / 13% 66%,
			curve to 0 34% with 5% 47% / 2% 40%, close,
			move to 11% 0, line to 19% 0,
			curve to 28% 51% with 23% 16% / 20% 32%,
			curve to 43% 88% with 32% 64% / 38% 73%,
			curve to 23% 58% with 35% 85% / 27% 68%,
			curve to 11% 0 with 15% 41% / 16% 20%, close,
			move to 28% 0, line to 32% 0,
			curve to 39% 39% with 35% 12% / 34% 24%,
			curve to 49% 64% with 41% 48% / 46% 57%,
			curve to 35% 41% with 44% 62% / 38% 52%,
			curve to 28% 0 with 32% 29% / 30% 14%, close,
			move to 39% 0, line to 46% 0,
			curve to 57% 52% with 50% 12% / 48% 29%,
			curve to 73% 98% with 60% 66% / 68% 79%,
			curve to 53% 69% with 64% 95% / 58% 83%,
			curve to 39% 0 with 47% 51% / 43% 28%, close,
			move to 54% 0, line to 60% 0,
			curve to 70% 37% with 64% 13% / 64% 27%,
			curve to 82% 61% with 73% 45% / 80% 53%,
			curve to 65% 43% with 77% 64% / 69% 52%,
			curve to 54% 0 with 60% 31% / 57% 15%, close,
			move to 67% 0, line to 74% 0,
			curve to 84% 40% with 79% 14% / 77% 29%,
			curve to 100% 65% with 89% 51% / 95% 60%,
			line to 100% 77%,
			curve to 81% 52% with 93% 75% / 86% 64%,
			curve to 67% 0 with 76% 42% / 70% 19%, close,
			move to 83% 0, line to 88% 0,
			curve to 100% 35% with 92% 11% / 94% 25%,
			line to 100% 47%,
			curve to 83% 0 with 90% 40% / 85% 18%, close,
			move to 0 76%,
			curve to 17% 91% with 5% 82% / 11% 85%,
			curve to 0 86% with 10% 91% / 4% 89%, close,
			move to 83% 83%,
			curve to 100% 93% with 89% 87% / 94% 88%,
			line to 100% 100%,
			curve to 83% 83% with 92% 96% / 88% 90%, close
		);
	}
}

.skng-club::after {
	position: absolute;
	inset: auto 0 -1px;
	height: clamp(1.6rem, 4.5vw, 4.4rem);
	background: #fff;
	clip-path: polygon(0 96%, 100% 0, 100% 100%, 0 100%);
	content: "";
	pointer-events: none;
}

.skng-club h2 {
	color: #fff;
}

.skng-club-inner {
	max-width: 58rem;
}

.skng-club-inner p {
	max-width: 45rem;
	margin: 0 auto 1.75rem;
	color: #e0edff;
	font-size: clamp(1rem, 1.65vw, 1.18rem);
}

.skng-club-actions {
	justify-content: center;
	gap: 0.65rem;
}

.skng-club-actions .is-style-outline .wp-block-button__link {
	border-color: #9bccff;
	background: #07152f66;
	color: #fff;
}

.skng-club-actions .is-style-outline .wp-block-button__link:hover {
	background: #fff;
	color: var(--skng-navy);
}

.skng-courses h2,
.skng-values h2 {
	text-align: center;
}

.skng-course-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.2rem, 3vw, 2.75rem);
	margin-block-start: clamp(1.8rem, 3vw, 2.8rem);
}

.skng-course-card {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border: 1px solid #dbe6f5;
	border-radius: 0.75rem;
	background: #fff;
	box-shadow: 0 12px 34px #122d5010;
}

.skng-course-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	margin: 0;
	background: var(--skng-royal);
	border-block-end: 3px solid #318cf0;
}

.skng-course-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.skng-course-image img[src*="/assets/images/banniere-skng.webp"] {
	transform: scale(2.45);
	transform-origin: 32% 23%;
}

.skng-course-image--competition img[src*="/assets/images/banniere-skng.webp"] {
	transform: scale(3.15);
	transform-origin: 100% 15%;
}

.skng-course-card .skng-course-body {
	margin: 0;
	padding: clamp(1.15rem, 2.8vw, 2.45rem);
}

.skng-course-body h3 {
	margin-block: 0 0.55rem;
	font-size: clamp(2rem, 3.2vw, 3rem);
}

.skng-course-body p,
.skng-contact p {
	margin-block: 0;
}

.skng-course-body .skng-course-list {
	display: grid;
	gap: 0.5rem;
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
}

.skng-course-list li {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	font-weight: 650;
}

.skng-course-list li::before {
	flex: 0 0 0.6rem;
	height: 0.37rem;
	border: solid #0057c5;
	border-width: 0 0 2px 2px;
	transform: translateY(-0.14em) rotate(-45deg);
	content: "";
}

.skng-values {
	border-block-start: 1px solid #dce9f8;
	background: linear-gradient(155deg, #f7faff, var(--skng-ice));
}

.skng-values .skng-values-list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(0.6rem, 1.5vw, 1.2rem);
	margin: clamp(1.6rem, 3vw, 2.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.skng-values-list li {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 0.65rem;
	min-height: 5.7rem;
	padding: 1rem 0.5rem;
	border: 1px solid #d5e4f8;
	border-radius: 0.55rem;
	background: #fff;
	font-size: clamp(0.88rem, 1.35vw, 1.15rem);
	font-weight: 720;
	line-height: 1.3;
	text-align: center;
}

.skng-values-list li::before {
	width: 1.65rem;
	height: 0.62rem;
	background: linear-gradient(115deg, #1257bd, #5fb3fc);
	clip-path: polygon(0 100%, 27% 10%, 49% 0, 27% 91%, 42% 83%, 66% 10%, 100% 0, 72% 90%);
	content: "";
}

.skng-contact {
	background: #08162f;
	color: #fff;
}

.skng-contact-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	align-items: center;
	gap: clamp(1.5rem, 5vw, 4.5rem);
}

.skng-contact-inner > * {
	margin-block: 0;
}

.skng-contact h2 {
	color: #fff;
}

.skng-contact p + p {
	margin-block-start: 0.75rem;
}

.skng-contact-details {
	padding-inline-start: 1.5rem;
	border-inline-start: 1px solid var(--skng-line);
}

.skng-contact-details a,
.skng-footer a {
	color: #d5ebff;
	overflow-wrap: anywhere;
	text-underline-offset: 0.2em;
}

.skng-footer {
	padding-block: 1.45rem;
	border-top: 1px solid var(--skng-line);
	background: var(--skng-navy);
	color: #ecf4ff;
}

.skng-footer-inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.65rem 1.5rem;
	font-size: 0.85rem;
}

.skng-reading {
	box-sizing: border-box;
	min-height: 60vh;
	padding: var(--skng-section) var(--skng-gutter);
}

.skng-header a:focus-visible,
.skng-header button:focus-visible,
.skng-main a:focus-visible,
.skng-footer a:focus-visible {
	outline: 3px solid #58a9ff;
	outline-offset: 4px;
}

@media (max-width: 940px) {
	.skng-header-inner {
		display: flex;
		justify-content: space-between;
		min-height: 4.85rem;
	}

	.skng-header-inner > .skng-header-action {
		display: none;
	}
}

@media (max-width: 840px) {
	.skng-hero {
		min-height: 0;
		align-items: flex-start;
		padding-block: 2.8rem calc(clamp(14rem, 62vw, 25rem) + 1rem);
	}

	.skng-hero.wp-block-cover .wp-block-cover__image-background {
		inset: auto 0 0 auto;
		width: 145%;
		max-width: none;
		height: clamp(14rem, 62vw, 25rem);
		object-position: right 18%;
	}

	.skng-hero .wp-block-cover__background.has-background-dim {
		inset: auto 0 0;
		height: clamp(14rem, 62vw, 25rem);
		background-image: linear-gradient(180deg, #060f23 0%, #060f2312 30%, transparent 48%);
	}

	.skng-hero-title {
		font-size: clamp(1.98rem, 8.2vw, 3.95rem);
	}

	.skng-club::before {
		inset-inline: -38%;
	}

	.skng-contact-inner {
		grid-template-columns: 1fr;
	}

	.skng-contact-details {
		padding-block-start: 1.4rem;
		padding-inline-start: 0;
		border-block-start: 1px solid var(--skng-line);
		border-inline-start: 0;
	}
}

@media (max-width: 680px) {
	.skng-course-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.skng-values .skng-values-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.skng-values-list li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: min(100%, 15rem);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.skng-course-card {
		transition: box-shadow 220ms ease, transform 220ms ease;
	}

	@media (hover: hover) {
		.skng-course-card:hover {
			transform: translateY(-4px);
			box-shadow: 0 18px 48px #12345f23;
		}
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.skng-club {
			view-timeline-name: --skng-club-view;
		}

		.skng-club::before {
			animation: skng-stripe-drift linear both;
			animation-timeline: --skng-club-view;
			animation-range: entry 0% exit 100%;
		}
	}
}

@keyframes skng-stripe-drift {
	from {
		transform: translate3d(-1.2%, -4%, 0) scale(1.025);
	}

	to {
		transform: translate3d(1.2%, 4%, 0) scale(1.025);
	}
}