/* stylelint-disable no-descending-specificity */

/*
Theme Name: Simple website
Author: Romain Fallet
Description: Thème personnalisé
Version: 1.0.0
Text Domain: simple-website
*/
@font-face {
	font-family: Comfortaa;
	font-weight: 500;
	src: url("/wp-content/themes/simple-website/assets/fonts/comfortaa-regular.woff2")
		format("woff2");
}

@font-face {
	font-family: Comfortaa;
	font-weight: 300;
	src: url("/wp-content/themes/simple-website/assets/fonts/comfortaa-thin.woff2")
		format("woff2");
}

@font-face {
	font-family: Comfortaa;
	font-weight: 800;
	src: url("/wp-content/themes/simple-website/assets/fonts/comfortaa-bold.woff2")
		format("woff2");
}

@font-face {
	font-family: JrHand;
	font-weight: 500;
	src: url("/wp-content/themes/simple-website/assets/fonts/jr-hand-regular.woff2")
		format("woff2");
}

@font-face {
	font-family: "Abaya Libre";
	font-weight: 500;
	src: url("/wp-content/themes/simple-website/assets/fonts/abhaya-libre-bold.woff2")
		format("woff2");
}

@font-face {
	font-family: "Abaya Libre";
	font-weight: 300;
	src: url("/wp-content/themes/simple-website/assets/fonts/abhaya-libre-regular.woff2")
		format("woff2");
}

:root {
	/**
   * Colors
   */

	/* Blue */
	--blue-color-50: oklch(97.7% 0.013 236.62deg);
	--blue-color-100: oklch(95.1% 0.026 236.824deg);
	--blue-color-200: oklch(90.1% 0.058 230.902deg);
	--blue-color-300: oklch(82.8% 0.111 230.318deg);
	--blue-color-400: oklch(74.6% 0.16 232.661deg);
	--blue-color-500: oklch(68.5% 0.169 237.323deg);
	--blue-color-600: oklch(58.8% 0.158 241.966deg);
	--blue-color-700: oklch(50% 0.134 242.749deg);
	--blue-color-800: oklch(44.3% 0.11 240.79deg);
	--blue-color-900: oklch(39.1% 0.09 240.876deg);
	--blue-color-950: oklch(29.3% 0.066 243.157deg);

	/* Red */
	--red-color-50: oklch(97.1% 0.013 17.38deg);
	--red-color-100: oklch(93.6% 0.032 17.717deg);
	--red-color-200: oklch(88.5% 0.062 18.334deg);
	--red-color-300: oklch(80.8% 0.114 19.571deg);
	--red-color-400: oklch(70.4% 0.191 22.216deg);
	--red-color-500: oklch(63.7% 0.237 25.331deg);
	--red-color-600: oklch(57.7% 0.245 27.325deg);
	--red-color-700: oklch(50.5% 0.213 27.518deg);
	--red-color-800: oklch(44.4% 0.177 26.899deg);
	--red-color-900: oklch(39.6% 0.141 25.723deg);
	--red-color-950: oklch(25.8% 0.092 26.042deg);

	/* Teal */
	--teal-color-50: oklch(98.4% 0.014 180.72deg);
	--teal-color-100: oklch(95.3% 0.051 180.801deg);
	--teal-color-200: oklch(91% 0.096 180.426deg);
	--teal-color-300: oklch(85.5% 0.138 181.071deg);
	--teal-color-400: oklch(77.7% 0.152 181.912deg);
	--teal-color-500: oklch(70.4% 0.14 182.503deg);
	--teal-color-600: oklch(60% 0.118 184.704deg);
	--teal-color-700: oklch(51.1% 0.096 186.391deg);
	--teal-color-800: oklch(43.7% 0.078 188.216deg);
	--teal-color-900: oklch(38.6% 0.063 188.416deg);
	--teal-color-950: oklch(27.7% 0.046 192.524deg);

	/* Emerald */
	--emerald-color-50: oklch(97.9% 0.021 166.113deg);
	--emerald-color-100: oklch(95% 0.052 163.051deg);
	--emerald-color-200: oklch(90.5% 0.093 164.15deg);
	--emerald-color-300: oklch(84.5% 0.143 164.978deg);
	--emerald-color-400: oklch(76.5% 0.177 163.223deg);
	--emerald-color-500: oklch(69.6% 0.17 162.48deg);
	--emerald-color-600: oklch(59.6% 0.145 163.225deg);
	--emerald-color-700: oklch(50.8% 0.118 165.612deg);
	--emerald-color-800: oklch(43.2% 0.095 166.913deg);
	--emerald-color-900: oklch(37.8% 0.077 168.94deg);
	--emerald-color-950: oklch(26.2% 0.051 172.552deg);

	/* Gray */
	--gray-color-50: oklch(98.5% 0.002 247.839deg);
	--gray-color-100: oklch(96.7% 0.003 264.542deg);
	--gray-color-200: oklch(92.8% 0.006 264.531deg);
	--gray-color-300: oklch(87.2% 0.01 258.338deg);
	--gray-color-400: oklch(70.7% 0.022 261.325deg);
	--gray-color-500: oklch(55.1% 0.027 264.364deg);
	--gray-color-600: oklch(44.6% 0.03 256.802deg);
	--gray-color-700: oklch(37.3% 0.034 259.733deg);
	--gray-color-800: oklch(27.8% 0.033 256.848deg);
	--gray-color-900: oklch(21% 0.034 264.665deg);
	--gray-color-950: oklch(13% 0.028 261.692deg);

	/**
   * Sizes
   */

	/* Negative medium */
	--size-n-32: -8rem;
	--size-n-28: -7rem;
	--size-n-24: -6rem;
	--size-n-20: -5rem;
	--size-n-16: -4rem;
	--size-n-12: -3rem;
	--size-n-10: -2.5rem;

	/* Negative small */
	--size-n-8: -2rem;
	--size-n-6: -1.5rem;
	--size-n-5: -1.25rem;
	--size-n-4-5: -1.125rem;
	--size-n-4: -1rem;
	--size-n-3-5: -0.875rem;
	--size-n-3: -0.75rem;
	--size-n-2-5: -0.625rem;
	--size-n-2: -0.5rem;
	--size-n-1-5: -0.375rem;
	--size-n-1: -0.25rem;

	/* Negative extra small */
	--size-n-0-5: -0.125rem;
	--size-n-0-25: -0.0625rem;

	/* Extra small */
	--size-0-25: 0.0625rem;
	--size-0-5: 0.125rem;

	/* Small */
	--size-1: 0.25rem;
	--size-1-5: 0.375rem;
	--size-2: 0.5rem;
	--size-2-5: 0.625rem;
	--size-3: 0.75rem;
	--size-3-5: 0.875rem;
	--size-4: 1rem;
	--size-4-5: 1.125rem;
	--size-5: 1.25rem;
	--size-6: 1.5rem;
	--size-7: 1.75rem;
	--size-8: 2rem;

	/* Medium */
	--size-10: 2.5rem;
	--size-12: 3rem;
	--size-14: 3.5rem;
	--size-16: 4rem;
	--size-20: 5rem;
	--size-24: 6rem;
	--size-28: 7rem;
	--size-32: 8rem;

	/* Large */
	--size-40: 10rem;
	--size-48: 12rem;
	--size-56: 14rem;
	--size-64: 16rem;
	--size-72: 18rem;
	--size-80: 20rem;
	--size-96: 24rem;

	/* Extra large */
	--size-112: 28rem;
	--size-128: 32rem;
	--size-144: 36rem;
	--size-160: 40rem;
	--size-192: 48rem;
	--size-224: 56rem;
	--size-256: 64rem;

	/* Extra-extra large */
	--size-288: 72rem;
	--size-320: 80rem;
	--size-352: 88rem;
	--size-384: 96rem;
	--size-416: 104rem;
	--size-448: 112rem;
	--size-480: 120rem;

	/**
   * Shadows
   */
	--shadow-s: 0 var(--size-0-25) var(--size-1) rgb(0 0 0 / 8%);
	--shadow-m:
		0 var(--size-0-5) var(--size-2) var(--size-n-0-5) rgb(0 0 0 / 10%),
		0 var(--size-1) var(--size-4) var(--size-n-1) rgb(0 0 0 / 6%);
	--shadow-l:
		0 var(--size-1) var(--size-4) var(--size-n-1) rgb(0 0 0 / 12%),
		0 var(--size-2) var(--size-8) var(--size-n-2) rgb(0 0 0 / 8%);
	--shadow-xl:
		0 var(--size-2) var(--size-8) var(--size-n-2) rgb(0 0 0 / 14%),
		0 var(--size-4) var(--size-16) var(--size-n-4) rgb(0 0 0 / 10%);
	--shadow-xxl:
		0 var(--size-4) var(--size-16) var(--size-n-4) rgb(0 0 0 / 16%),
		0 var(--size-8) var(--size-32) var(--size-n-8) rgb(0 0 0 / 12%);
}

/**
  * Themes
  */
.theme--blue {
	--main-color-50: var(--blue-color-50);
	--main-color-100: var(--blue-color-100);
	--main-color-200: var(--blue-color-200);
	--main-color-300: var(--blue-color-300);
	--main-color-400: var(--blue-color-400);
	--main-color-500: var(--blue-color-500);
	--main-color-600: var(--blue-color-600);
	--main-color-700: var(--blue-color-700);
	--main-color-800: var(--blue-color-800);
	--main-color-900: var(--blue-color-900);
	--main-color-950: var(--blue-color-950);
	--action-color-50: var(--emerald-color-50);
	--action-color-100: var(--emerald-color-100);
	--action-color-200: var(--emerald-color-200);
	--action-color-300: var(--emerald-color-300);
	--action-color-400: var(--emerald-color-400);
	--action-color-500: var(--emerald-color-500);
	--action-color-600: var(--emerald-color-600);
	--action-color-700: var(--emerald-color-700);
	--action-color-800: var(--emerald-color-800);
	--action-color-900: var(--emerald-color-900);
	--action-color-950: var(--emerald-color-950);
	--accent-color-50: var(--red-color-50);
	--accent-color-100: var(--red-color-100);
	--accent-color-200: var(--red-color-200);
	--accent-color-300: var(--red-color-300);
	--accent-color-400: var(--red-color-400);
	--accent-color-500: var(--red-color-500);
	--accent-color-600: var(--red-color-600);
	--accent-color-700: var(--red-color-700);
	--accent-color-800: var(--red-color-800);
	--accent-color-900: var(--red-color-900);
	--accent-color-950: var(--red-color-950);
	--base-font-family: "Comfortaa", sans-serif;
}

body {
	margin: 0;
	background-color: var(--main-color-300);
}

/**
 * ================================================================
 * COMPONENTS
 * ================================================================
 */

/**************************
 * Page container
 **************************/

.page-container {
	display: flex;
	flex-direction: column;
	gap: var(--size-10);
	max-width: var(--size-352);
	margin: auto;
	background-color: var(--gray-color-50);
	box-shadow: var(--shadow-xl);
}

/**************************
 * Page content
 **************************/

.page-content {
	display: flex;
	flex-direction: column;
	gap: var(--size-10);
}

/**************************
 * Button
 **************************/

/**
 * Base styles
 */
.button {
	--button-color-border: var(--action-color-950);
	--button-color-text: var(--action-color-950);
	--button-color-background: var(--action-color-400);
	--button-color-hover: var(--action-color-300);
	--button-color-focus: var(--action-color-400);

	cursor: pointer;
	display: block;
	box-sizing: border-box;
	width: fit-content;
	padding: var(--size-2-5) var(--size-4);
	border: var(--size-0-5) solid var(--button-color-border);
	border-radius: var(--size-2);
	font-family: var(--base-font-family);
	font-size: var(--size-4);
	font-weight: 800;
	line-height: 1;
	color: var(--button-color-text);
	text-decoration: none;
	background-color: var(--button-color-background);
}

/**
 * Pseudo elements
 */
.button:hover {
	background-color: var(--button-color-hover);
}

.button:focus {
	outline: var(--size-0-5) solid var(--button-color-focus);
	outline-offset: var(--size-0-5);
}

/**
 * Modifiers
 */

/* full */
.button--full {
	width: 100%;
}

/* icon-left, icon-right */
.button--icon-left,
.button--icon-right {
	display: flex;
	gap: var(--size-1);
	align-items: center;
}

.button--icon-left {
	padding: var(--size-2-5) var(--size-4) var(--size-2-5) var(--size-3-5);
}

.button--icon-right {
	flex-direction: row-reverse;
	padding: var(--size-2-5) var(--size-3-5) var(--size-2-5) var(--size-4);
}

.button--icon-left .button__icon,
.button--icon-right .button__icon {
	width: var(--size-4);
	height: var(--size-4);
}

/* icon-only */
.button--icon-only {
	padding: var(--size-1) var(--size-1-5);
}

.button--icon-only .button__icon {
	display: block;
	width: var(--size-7);
	height: var(--size-7);
	stroke: var(--button-color-text);
}

.button--icon-only .button__text {
	position: absolute;
	width: 0;
	height: 0;
	visibility: hidden;
}

/* primary */
.button--primary {
	--button-color-border: var(--accent-color-950);
	--button-color-text: var(--accent-color-950);
	--button-color-background: var(--accent-color-400);
	--button-color-hover: var(--accent-color-300);
	--button-color-focus: var(--accent-color-400);
}

/* light */
.button--light {
	--button-color-border: var(--gray-color-600);
	--button-color-text: var(--gray-color-600);
	--button-color-background: var(--gray-color-50);
	--button-color-hover: var(--gray-color-300);
	--button-color-focus: var(--gray-color-200);
}

/* outlined */
.button--outlined {
	--button-color-border: var(--action-color-700);
	--button-color-text: var(--action-color-700);
	--button-color-background: transparent;
	--button-color-hover: var(--action-color-100);
	--button-color-focus: var(--action-color-400);
}

/**
 * Modifiers combinations
 */

.button--outlined.button--primary {
	--button-color-border: var(--accent-color-600);
	--button-color-text: var(--accent-color-600);
	--button-color-background: transparent;
	--button-color-hover: var(--accent-color-100);
	--button-color-focus: var(--accent-color-400);
}

.button--outlined.button--light {
	--button-color-border: var(--gray-color-50);
	--button-color-text: var(--gray-color-50);
	--button-color-background: transparent;
	--button-color-hover: var(--gray-color-300);
	--button-color-focus: var(--gray-color-200);
}

/**************************
 * Navigation menu
 **************************/

/**
 * Base styles
 */
.navigation-menu {
	display: flex;
	flex-direction: column;
	gap: var(--size-2);
	padding: var(--size-2) var(--size-2) 0 var(--size-2);
	border-top: var(--size-4) solid var(--main-color-600);
}

/**
 * Children
 */
.navigation-menu__mobile-menu-toggle {
	display: flex;
	justify-content: flex-end;
}

.navigation-menu__quick-access-menu,
.navigation-menu__mobile-menu-checkbox,
.navigation-menu__main-menu {
	position: absolute;
	width: 0;
	height: 0;
	visibility: hidden;
}

.navigation-menu:has(.navigation-menu__mobile-menu-checkbox:checked)
	.navigation-menu__main-menu {
	position: initial;
	width: initial;
	height: initial;
	visibility: visible;
}

.navigation-menu__items {
	display: flex;
	flex-direction: column;
	gap: var(--size-2);
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.navigation-menu__item .button--outlined,
.navigation-menu__mobile-menu-button {
	--button-color-border: var(--main-color-700);
	--button-color-text: var(--main-color-700);
	--button-color-background: transparent;
	--button-color-hover: var(--main-color-100);
	--button-color-focus: var(--main-color-400);
}

.navigation-menu__item .button--outlined[aria-current="page"] {
	--button-color-border: var(--main-color-950);
	--button-color-text: var(--main-color-50);
	--button-color-background: var(--main-color-600);
	--button-color-hover: var(--main-color-400);
	--button-color-focus: var(--main-color-500);
}

/**
 * Media queries
 */
@media screen and (width >= 1024px) {
	.navigation-menu__mobile-menu-toggle {
		display: none;
	}

	.navigation-menu__main-menu {
		position: initial;
		width: initial;
		height: initial;
		visibility: visible;
	}

	.navigation-menu__items {
		flex-direction: row;
		justify-content: flex-end;
	}

	.navigation-menu__item {
		width: initial;
	}
}

/**************************
 * Intro
 **************************/

/**
 * Base styles
 */
.intro {
	display: flex;
	justify-content: center;
	padding: 0 var(--size-4);
}

/**
 * Children
 */
.intro__content {
	display: flex;
	flex-direction: column;
	gap: var(--size-4);
	align-items: center;
	max-width: var(--size-128);
}

.intro__title {
	display: flex;
	flex-direction: column;
	gap: var(--size-2);
	margin: 0;
	font-family: var(--base-font-family);
	font-size: var(--size-7);
	font-weight: 800;
	color: var(--main-color-600);
	text-align: center;
}

.intro__accentuated-title {
	font-size: var(--size-8);
	color: var(--main-color-950);
}

.intro__description {
	margin: 0;
	font-family: var(--base-font-family);
	font-size: var(--size-5);
	font-weight: 800;
	color: var(--main-color-950);
	text-align: center;
}

/**************************
 * Section
 **************************/

/**
 * Base styles
 */
.section {
	display: flex;
	justify-content: center;
	padding: 0 var(--size-4);
}

/**
 * Children
 */
.section__content {
	display: flex;
	flex-direction: column;
	gap: var(--size-4);
	width: 100%;
	max-width: var(--size-256);
}

.section__title {
	margin: 0;
	font-family: var(--base-font-family);
	font-size: var(--size-6);
	color: var(--main-color-600);
}

.section__texts > p {
	margin: 0;
	font-family: var(--base-font-family);
	font-size: var(--size-4-5);
	color: var(--main-color-950);
}

.section__texts > p > a {
	font-weight: 800;
	color: var(--action-color-500);
	text-decoration: underline;
}

.section__texts > p > a:hover {
	color: var(--action-color-400);
}

.section__texts > p > a:focus {
	border-radius: var(--size-1);
	outline: var(--size-0-5) solid var(--action-color-400);
	outline-offset: var(--size-0-5);
}

.section__cards,
.section__texts,
.section__list {
	display: flex;
	flex-direction: column;
	gap: var(--size-3);
}

.section__list {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.section__list-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--size-2);
	padding-left: var(--size-8);
	font-family: var(--base-font-family);
	font-size: var(--size-4-5);
	color: var(--main-color-950);
}

.section__list-item-icon {
	position: absolute;
	left: var(--size-n-1);
	display: block;
	width: var(--size-7);
	height: var(--size-7);
}

.section__list-item-title {
	margin: 0;
	color: var(--main-color-900);
}

/**
 * Media queries
 */
@media screen and (width >= 1024px) {
	.section__cards {
		flex-flow: row wrap;
		justify-content: center;
	}

	.section__card {
		flex-grow: 1;
		width: var(--size-56);
	}

	.section__card.card--with-link {
		width: calc(var(--size-56) - var(--size-6));
	}
}

/**************************
 * Card
 **************************/

/**
 * Base styles
 */
.card {
	--card-color-title: var(--main-color-900);
	--card-color-description: var(--main-color-800);
	--card-color-border: var(--main-color-900);
	--card-color-background: var(--main-color-50);
	--card-color-hover: var(--main-color-100);
	--card-color-focus: var(--main-color-800);

	display: flex;
	flex-direction: column;
	gap: var(--size-2);
	padding: var(--size-4);
	border: var(--size-0-5) solid var(--card-color-border);
	border-radius: var(--size-2);
	background-color: var(--card-color-background);
	box-shadow: var(--shadow-xl);
}

/**
 * Children
 */
.card__title {
	font-family: var(--base-font-family);
	font-size: var(--size-5);
	font-weight: 800;
	color: var(--card-color-title);
}

.card__description {
	font-family: var(--base-font-family);
	font-size: var(--size-4-5);
	font-weight: 500;
	color: var(--card-color-description);
}

/**
 * Modifiers
 */
.card--with-link {
	--card-color-title: var(--action-color-900);
	--card-color-description: var(--action-color-800);
	--card-color-border: var(--action-color-900);
	--card-color-background: var(--action-color-50);
	--card-color-hover: var(--action-color-100);
	--card-color-focus: var(--action-color-500);

	cursor: pointer;
	position: relative;
	padding-right: var(--size-10);
	text-decoration: none;
}

.card--with-link:hover {
	background-color: var(--card-color-hover);
}

.card--with-link:focus {
	outline: var(--size-0-5) solid var(--card-color-focus);
	outline-offset: var(--size-0-5);
}

.card__icon {
	position: absolute;
	right: var(--size-3);
	bottom: var(--size-3);
	width: var(--size-6);
	height: var(--size-6);
	stroke: var(--card-color-title);
}

/**************************
 * Footer
 **************************/

.footer {
	display: flex;
	justify-content: center;
	padding: var(--size-16);
	background-color: var(--main-color-600);
}

.footer__content {
	max-width: var(--size-256);
}

.footer__text {
	margin: 0;
	font-family: var(--base-font-family);
	color: var(--gray-color-50);
}

/**************************
 * Sideblock
 **************************/
.sideblock {
	display: flex;
	flex-direction: column;
	gap: var(--size-6);
	align-items: center;
	padding: var(--size-6);
	border: var(--size-0-5) solid var(--main-color-900);
	border-radius: var(--size-2);
	background-color: var(--main-color-50);
	box-shadow: var(--shadow-xl);
}

.sideblock__image-container {
	display: flex;
}

.sideblock__image {
	width: var(--size-24);
	height: var(--size-24);
	border: var(--size-1) solid var(--main-color-900);
	border-radius: 50%;
}

.sideblock__content {
	display: flex;
	flex-direction: column;
	gap: var(--size-2);
	text-align: center;
}

.sideblock__title {
	margin: 0;
	font-family: var(--base-font-family);
	font-size: var(--size-5);
	color: var(--main-color-800);
}

.sideblock__description {
	margin: 0;
	font-family: var(--base-font-family);
	font-size: var(--size-4-5);
	color: var(--main-color-800);
}

.sideblock__button {
	white-space: nowrap;
}

@media screen and (width >= 1024px) {
	.sideblock {
		flex-direction: row;
	}

	.sideblock__content {
		text-align: initial;
	}
}