/*
Theme Name: Toubkal Bricks Child
Theme URI: https://toubkal-maroc.local
Description: Child theme for TOUBKAL-MAROC (Bricks parent). Checkout / cart / booking UI.
Author: TOUBKAL-MAROC
Template: bricks
Version: 2.20.17
Text Domain: toubkal
*/

/* =========================================================================
   Units: the Bricks theme style "Site" sets the root font size to 80%,
   so 1rem = 12.8px (not 16px); body text is set to 16px separately.
   Size new rules in px, or in rem with that in mind. Changing the root size
   would rescale every rem value on the site, so it is kept as is.
   ========================================================================= */

/* =========================================================================
   Brand colours — single source of truth.
   Everything else (theme CSS, Bricks element styles, custom CSS) references
   these variables; change a value here to re-skin the whole site.
   ========================================================================= */
:root {
	/* Palette modelled on agafayexperience.com (16 Oct 2026): terracotta
	   accent, deep terracotta for hover, saffron highlight, charcoal text on
	   sand. White text on --tbk-primary is 5.2:1, --tbk-primary on --tbk-bg
	   4.8:1 (WCAG AA). */
	--tbk-primary: #b14e3e;        /* terracotta, rgb(177, 78, 62) */
	--tbk-primary-rgb: 177, 78, 62;
	--tbk-primary-light: #c4614f;  /* lighter stop (gradients) */
	--tbk-primary-dark: #7f2718;   /* deep terracotta (hover) */
	--tbk-secondary: #ffc768;      /* saffron, rgb(255, 199, 104) */
	--tbk-secondary-rgb: 255, 199, 104;

	/* Section headings (h1/h2 outside cards). */
	--tbk-heading: var(--tbk-primary);

	/* Vertical rhythm shared by the home sections + footer. */
	--tbk-section-space: 5rem;

	/* Website background. */
	--tbk-bg: #f9f5f2;             /* sand, rgb(249, 245, 242) */
	/* Shared UI tokens (previously repeated in each section stylesheet). */
	--tbk-ink: #292929;            /* charcoal, rgb(41, 41, 41) */
	--tbk-ink-rgb: 41, 41, 41;
	--tbk-ink-soft: rgba(var(--tbk-ink-rgb), 0.68);
	--tbk-line: rgba(var(--tbk-ink-rgb), 0.12);
	--tbk-cream: #f7f3ee;
	--tbk-accent: var(--tbk-primary);
	--tbk-accent-dark: var(--tbk-primary-dark);
	--tbk-accent-soft: rgba(var(--tbk-primary-rgb), 0.12);
	--tbk-chip: #f1f0ee;
	--tbk-field-border: #dcd6cd;

	/* Corner radius shared by every content card. Anything inset in a card
	   closer than this radius uses
	   max(0px, calc(var(--tbk-r-card) - <padding> - <border>)),
	   so the inner and outer corners stay concentric. Boxes inset further
	   than the radius are cards of their own and use --tbk-r-card. */
	--tbk-r-card: 16px;
}

/* Website background colour. */
body {
	background-color: var(--tbk-bg);
}

/* Page and section headings in terracotta (card titles stay charcoal).
   #brx-content / #brx-footer outrank the Bricks element-ID styles. */
#brx-content .tbk-home__title,
#brx-content .tbk-passion-title,      /* home: "Conçu avec passion" */
#brx-content #shop-head h1,
#brx-content .tour-h2,
#brx-content .tbk-tour-title,         /* tour: product title (h1) */
#brx-content .tbk-tour-info__title,
#brx-content .tbk-tour-reviews__title,
#brx-content .tbk-contact__title,
#brx-content .tbk-legal__title,
#brx-content .tbk-legal__h2,
#brx-content .tbk-thanks__title,
#brx-content .tbk-thanks__next-title {
	color: var(--tbk-heading);
}

/* Hero: saffron title; the eyebrow reads white over the photo
   (terracotta is too dark there). */
#brx-content #hero-title {
	color: var(--tbk-secondary);
}

#brx-content #hero-eyebrow {
	color: #fff;
}

@media (max-width: 600px) {
	:root {
		--tbk-section-space: 3.5rem;
	}
}

/* Footer: same vertical rhythm as the sections (both languages), plus room
   for the wave divider (#footer-wave, 119px; 80px below 768px) at its top. */
#site-footer {
	--tbk-footer-wave: 119px;
	padding-block: var(--tbk-section-space) !important;
	padding-top: calc(var(--tbk-section-space) + var(--tbk-footer-wave)) !important;
}

@media (max-width: 767px) {
	#site-footer {
		--tbk-footer-wave: 80px;
	}
}

/* Start the wave 1px above the footer so the footer's own top edge never
   shows as a hairline at fractional zoom levels. */
#site-footer #footer-wave {
	top: -1px;
}

/* Secondary brand colour: the footer email button and the hero social
   buttons (Facebook / WhatsApp). The icons are external SVGs, so they are
   rendered through a CSS mask so their colour also follows the variable. */
#footer-email {
	background-color: var(--tbk-secondary) !important;
}

#social-fb,
#social-wa {
	border-color: var(--tbk-secondary) !important;
	background-image: none !important;
}

#social-fb::before,
#social-wa::before {
	content: "";
	display: block;
	background-color: var(--tbk-secondary);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

#social-fb::before {
	width: 1.15rem;
	aspect-ratio: 320 / 512;
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon-facebook.svg");
	mask-image: url("/wp-content/uploads/2026/09/icon-facebook.svg");
}

#social-wa::before {
	width: 1.9rem;
	aspect-ratio: 448 / 512;
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon-whatsapp.svg");
	mask-image: url("/wp-content/uploads/2026/09/icon-whatsapp.svg");
}

@media (max-width: 767px) {
	#social-fb::before {
		width: 0.95rem;
	}

	#social-wa::before {
		width: 1.55rem;
	}
}