/*
Theme Name: MB Traiteur
Description: Thème sur mesure pour MB Traiteur (Gutenberg, FR).
Author: Addedsense
Version: 1.0.2
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: mbtraiteur
*/

/* ==========================================================================
   1. FONTS (self-hosted, files in assets/fonts/)
   ========================================================================== */

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/roboto-v51-latin-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/roboto-v51-latin-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/roboto-v51-latin-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/roboto-v51-latin-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Grand Hotel';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/grand-hotel-v21-latin-regular.woff2') format('woff2');
}

/* ==========================================================================
   2. TOKENS
   ========================================================================== */

:root {
	/* Colors (measured on the maquette) */
	--as-color-primary: #e51a2d;
	--as-color-black: #000000;
	--as-color-white: #ffffff;
	--as-color-border: #919191; /* form field border, measured on the maquette */
	--as-color-primary-soft: #f2999f; /* thin line between reviews, measured on the maquette */
	--as-color-text: var(--as-color-black);
	--as-color-bg: var(--as-color-white);

	/* Fonts */
	--as-font-heading: 'Roboto', Arial, sans-serif;
	--as-font-body: 'Roboto', Arial, sans-serif;
	--as-font-script: 'Grand Hotel', cursive;

	/* Weights */
	--as-weight-regular: 400;
	--as-weight-medium: 500;
	--as-weight-bold: 700;

	/* Type scale */
	--as-text-base: 1.125rem;
	--as-text-sm: 1rem;
	--as-text-nav: 1.375rem;
	--as-text-btn: 0.9375rem;
	--as-text-h3: 2rem;
	--as-text-h2: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
	--as-leading-body: 1.65;
	--as-leading-heading: 1.25;

	/* Spacing */
	--as-space-1: 0.5rem;
	--as-space-2: 1rem;
	--as-space-3: 1.5rem;
	--as-space-4: 2rem;
	--as-space-5: 3rem;
	--as-space-6: 4rem;
	--as-space-7: 6rem;

	/* Layout */
	--as-container: 87.5rem; /* 1400px content */
	--as-container-wide: 100rem; /* 1600px footer */
	--as-gutter: 1.25rem;
	--as-radius: 0;
	--as-logo-size: 9.375rem; /* 150px on mobile (50% of desktop), 300px from 40rem */
	--as-frame-width: var(--as-container); /* red frame, "Nos menus": 1400px, decision of Patrick (maquette had 1340px) */
	--as-frame-x: 2rem;
	--as-frame-y: 2rem;
	--as-nav-gap: 5rem;

	/* Layers */
	--as-z-nav: 100;
}

/* ==========================================================================
   3. BASE / RESET / TYPOGRAPHY
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--as-color-bg);
	color: var(--as-color-text);
	font-family: var(--as-font-body);
	font-size: var(--as-text-base);
	font-weight: var(--as-weight-regular);
	line-height: var(--as-leading-body);
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--as-color-primary);
	outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--as-space-3);
	font-family: var(--as-font-heading);
	font-weight: var(--as-weight-regular);
	line-height: var(--as-leading-heading);
}

h1,
h2 {
	font-size: var(--as-text-h2);
}

h3 {
	font-size: var(--as-text-h3);
}

/* Bold inside a heading turns red: "Amour et <strong>partage</strong>" */
h1 strong,
h2 strong,
h3 strong {
	color: var(--as-color-primary);
	font-weight: var(--as-weight-bold);
}

p {
	margin: 0 0 var(--as-space-2);
}

/* Visually hidden, still read by search engines and screen readers (page H1). */
.as-sr-only,
.as-content > .as-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.as-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: calc(var(--as-z-nav) + 1);
	padding: var(--as-space-2) var(--as-space-3);
	background: var(--as-color-black);
	color: var(--as-color-white);
	transform: translateY(-100%);
}

.as-skip-link:focus {
	transform: translateY(0);
}

/* ==========================================================================
   4. SHARED COMPONENTS
   ========================================================================== */

.as-btn,
.wp-block-button__link {
	display: inline-block;
	padding: 1.6rem 2.5rem;
	border: 0;
	border-radius: var(--as-radius);
	background: var(--as-color-primary);
	color: var(--as-color-white);
	font-family: var(--as-font-body);
	font-size: var(--as-text-btn);
	font-weight: var(--as-weight-bold);
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s;
}

.as-btn:hover,
.wp-block-button__link:hover {
	background: var(--as-color-black);
	color: var(--as-color-white);
}

/* ==========================================================================
   5. SECTIONS
   ========================================================================== */

/* === SECTION: HEADER === */

.as-header {
	padding-block: var(--as-space-5);
	background: var(--as-color-white);
	text-align: center;
}

.as-header__logo {
	display: inline-block;
	line-height: 0;
}

.as-header__logo-img {
	width: var(--as-logo-size);
	max-width: 100%;
	height: auto;
}

/* === SECTION: HERO === */

.as-hero {
	line-height: 0;
}

.as-hero__img {
	width: 100%;
	height: auto;
}

/* === SECTION: NAV === */

.as-nav {
	position: sticky;
	top: 0;
	z-index: var(--as-z-nav);
	background: var(--as-color-black);
	color: var(--as-color-white);
}

.admin-bar .as-nav {
	top: 32px;
}

/* Without JavaScript the list is simply visible. */
.as-nav__toggle {
	display: none;
}

.as-nav__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--as-space-2);
	margin: 0;
	padding: var(--as-space-3) var(--as-gutter);
	list-style: none;
}

.as-nav__list a {
	color: inherit;
	font-size: var(--as-text-nav);
	text-decoration: none;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.as-nav__list a:hover {
	text-decoration-line: underline;
}

.as-nav__list .current-menu-item > a,
.as-nav__list .current_page_item > a {
	font-weight: var(--as-weight-bold);
	text-decoration-line: underline;
}

/* With JavaScript: burger bar + dropdown panel. */
.js .as-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--as-space-2);
	width: 100%;
	padding: var(--as-space-2) var(--as-gutter);
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--as-text-nav);
	cursor: pointer;
}

.js .as-nav__panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--as-color-black);
}

.js .as-nav.is-open .as-nav__panel {
	display: block;
}

.as-nav__burger {
	position: relative;
	display: block;
	width: 1.5rem;
	height: 2px;
	background: currentColor;
	transition: background-color 0.2s;
}

.as-nav__burger::before,
.as-nav__burger::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s;
}

.as-nav__burger::before {
	top: -0.45rem;
}

.as-nav__burger::after {
	top: 0.45rem;
}

.as-nav.is-open .as-nav__burger {
	background: transparent;
}

.as-nav.is-open .as-nav__burger::before {
	transform: translateY(0.45rem) rotate(45deg);
}

.as-nav.is-open .as-nav__burger::after {
	transform: translateY(-0.45rem) rotate(-45deg);
}

/* === SECTION: CONTENT === */

.as-main {
	display: block;
}

/* Content is 1400px wide, with a side gutter on top. */
.as-content > * {
	width: min(100% - 2 * var(--as-gutter), var(--as-container));
	margin-block: var(--as-space-7);
	margin-inline: auto;
}

.as-content > .alignfull {
	width: 100%;
	max-width: none;
}

/* A full-width band with a background colour touches its neighbours
   (for example the black "Nos menus" area under the black menu bar). */
.as-content > .alignfull.has-background {
	margin-block: 0;
}

.wp-block-group.alignfull {
	padding-inline: var(--as-gutter);
}

/* === SECTION: FRAME ===
   Red frame of the "Nos menus" page. Add the class "as-frame" to a Group block;
   the PDF plugin goes inside it. No white block: the plugin brings its own. */

.as-frame {
	width: min(100%, var(--as-frame-width));
	margin-inline: auto;
	padding: var(--as-frame-y) var(--as-frame-x);
	background: var(--as-color-primary);
}

.wp-block-group.as-frame {
	padding: var(--as-frame-y) var(--as-frame-x);
}

/* === SECTION: HOME ===
   Home page: about block, ornament + titles, 3 cards, reviews. */

.wp-block-columns.as-about {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--as-space-5);
	align-items: center;
}

.as-fleuron {
	margin-bottom: var(--as-space-4);
	text-align: center;
}

.as-fleuron img {
	width: 8.5rem;
	margin-inline: auto;
}

.as-content > .as-fleuron + .as-section-title {
	margin-top: 0;
}

.as-section-title {
	margin-bottom: var(--as-space-6);
	text-align: center;
}

.as-cards .wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.as-cards .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--as-space-3);
	justify-content: center;
}

/* Card titles are H2 for the outline but keep the H3 size. */
.as-card-title {
	font-size: var(--as-text-h3);
}

.as-icon--card img {
	width: 9rem;
	margin-inline: auto;
}

.as-review {
	padding-block: var(--as-space-3);
	border-bottom: 1px solid var(--as-color-primary-soft);
}

.as-review p {
	margin: 0 0 var(--as-space-1);
}

.as-review__title {
	font-weight: var(--as-weight-bold);
}

.as-reviews .wp-block-details summary {
	margin-top: var(--as-space-3);
	color: var(--as-color-primary);
	font-weight: var(--as-weight-medium);
	list-style: none;
	cursor: pointer;
}

.as-reviews .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.as-reviews .wp-block-details summary::after {
	content: '';
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-left: 0.6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.2em) rotate(45deg);
}

.as-reviews .wp-block-details[open] summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}

/* === SECTION: SPLIT ===
   Media & Text block with the class "as-split": the photo touches the screen edge,
   the text stays inside the 1400px content width. */

.as-split {
	--as-edge: max(var(--as-gutter), (100vw - var(--as-container)) / 2);
}

.as-split .wp-block-media-text__content {
	padding: var(--as-space-4) var(--as-gutter);
}

.as-split .wp-block-heading {
	margin-bottom: var(--as-space-4);
}

/* Heading + icon on one line (Nos prestations) */
.as-split__head {
	align-items: flex-start;
	gap: var(--as-space-3);
	margin-bottom: var(--as-space-4);
}

.as-split__head .wp-block-heading {
	margin: 0;
}

.as-icon {
	flex-shrink: 0;
	margin: 0;
}

.as-icon img {
	width: 5rem;
	height: auto;
}

.as-split .wp-block-buttons {
	margin-top: var(--as-space-4);
}

/* === SECTION: MENUS ===
   Black band of the "Nos menus" page, it holds the red frame. */

.as-menus {
	padding-top: var(--as-space-5);
	padding-bottom: var(--as-space-7);
}

/* === SECTION: CONTACT === */

.as-content > .as-contact {
	margin-top: 0;
	margin-bottom: var(--as-space-6);
}

.wp-block-columns.as-contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--as-space-5);
}

.as-contact__form {
	padding-top: var(--as-space-5);
}

.as-contact__sign {
	margin-bottom: var(--as-space-5);
	font-size: var(--as-text-sm);
}

.as-contact__side {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-2);
}

.as-contact__side .wp-block-image {
	margin: 0;
}

.as-map {
	display: block;
	width: 100%;
	aspect-ratio: 1200 / 1165;
	border: 0;
}

/* === SECTION: FORMS (WPForms) === */

div.wpforms-container-full .wpforms-form .wpforms-field-label {
	color: inherit;
	font-size: var(--as-text-sm);
	font-weight: var(--as-weight-regular);
}

div.wpforms-container-full .wpforms-form .wpforms-required-label {
	color: inherit;
}

div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
	color: inherit;
	font-size: 0.875rem;
}

div.wpforms-container-full .wpforms-form input[type='text'],
div.wpforms-container-full .wpforms-form input[type='email'],
div.wpforms-container-full .wpforms-form input[type='tel'],
div.wpforms-container-full .wpforms-form textarea,
div.wpforms-container-full .wpforms-form select {
	max-width: 100%;
	border: 1px solid var(--as-color-border);
	border-radius: var(--as-radius);
	background: var(--as-color-white);
	color: inherit;
	font-family: var(--as-font-body);
	font-size: var(--as-text-sm);
}

div.wpforms-container-full .wpforms-form button[type='submit']:not(:hover):not(:active) {
	padding: 1.6rem 2.5rem;
	height: auto;
	border: 0;
	border-radius: var(--as-radius);
	background: var(--as-color-primary);
	color: var(--as-color-white);
	font-family: var(--as-font-body);
	font-size: var(--as-text-btn);
	font-weight: var(--as-weight-bold);
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: uppercase;
}

div.wpforms-container-full .wpforms-form button[type='submit']:hover,
div.wpforms-container-full .wpforms-form button[type='submit']:active {
	padding: 1.6rem 2.5rem;
	height: auto;
	border: 0;
	border-radius: var(--as-radius);
	background: var(--as-color-black);
	color: var(--as-color-white);
	font-family: var(--as-font-body);
	font-size: var(--as-text-btn);
	font-weight: var(--as-weight-bold);
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* === SECTION: FOOTER === */

.as-footer {
	padding: var(--as-space-5) var(--as-gutter);
	background: var(--as-color-black);
	color: var(--as-color-white);
	font-size: var(--as-text-sm);
	line-height: 1.5;
}

.as-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-4);
	width: 100%;
	/* Decision of Patrick (10 Nov 2026): footer aligned with the content (1400px)
	   for this project. The 1600px token --as-container-wide stays available. */
	max-width: var(--as-container);
	margin-inline: auto;
}

.as-footer p {
	margin: 0;
}

.as-footer a {
	color: inherit;
}

.as-footer__name {
	font-weight: var(--as-weight-bold);
}

.as-footer__sep {
	display: inline-block;
	width: 1px;
	height: 1em;
	margin-inline: 0.6rem;
	background: var(--as-color-primary);
	vertical-align: middle;
}

.as-footer__social {
	display: inline-block;
	margin-top: var(--as-space-2);
	line-height: 0;
}

.as-footer__menu {
	margin: 0 0 var(--as-space-2);
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

@media (min-width: 40rem) {
	:root {
		--as-gutter: 2rem;
		--as-logo-size: 18.75rem; /* 300px */
	}
}

@media (min-width: 56.25rem) {
	:root {
		--as-frame-x: 6.375rem; /* 102px on the maquette */
		--as-frame-y: 5.25rem; /* 83px on the maquette */
	}
}

@media (min-width: 37.5625rem) and (max-width: 48.875rem) {
	.admin-bar .as-nav {
		top: 46px;
	}
}

/* The admin bar scrolls away on very small screens. */
@media (max-width: 37.5rem) {
	.admin-bar .as-nav {
		top: 0;
	}
}

/* Desktop menu: 4 entries on one centred line, no burger. */
@media (min-width: 56.25rem) {
	.js .as-nav__toggle {
		display: none;
	}

	.js .as-nav__panel {
		display: block;
		position: static;
	}

	.as-nav__list {
		flex-direction: row;
		justify-content: center;
		gap: var(--as-space-3) var(--as-nav-gap);
		padding-block: var(--as-space-4);
	}

	.as-footer__inner {
		flex-direction: row;
		justify-content: space-between;
	}
}

/* Image + text side by side (the block stacks itself under 601px). */
@media (min-width: 37.5625rem) {
	.as-split .wp-block-media-text__content {
		padding: 0 var(--as-edge) 0 var(--as-space-6);
	}

	.as-split.has-media-on-the-right .wp-block-media-text__content {
		padding: 0 var(--as-space-6) 0 var(--as-edge);
	}

	.as-icon img {
		width: 8rem;
	}
}

@media (min-width: 56.25rem) {
	.wp-block-columns.as-about {
		grid-template-columns: 24.4rem minmax(0, 30rem); /* photo 391px, text 480px */
		justify-content: start;
		gap: 8.25rem;
		padding-left: 6.5rem;
	}

	.as-menus {
		padding-top: var(--as-space-7); /* 96px, decision of Patrick (maquette had 326px) */
	}

	.wp-block-columns.as-contact {
		grid-template-columns: 41% 43%;
		justify-content: space-between;
		gap: 0;
	}

	.as-contact__form {
		padding-top: var(--as-space-7);
	}
}

@media (prefers-reduced-motion: reduce) {
	.as-nav__burger,
	.as-nav__burger::before,
	.as-nav__burger::after,
	.as-btn,
	.wp-block-button__link {
		transition: none;
	}
}