/**
 * Bricofix Design System
 * Defines variables, typography, and global resets.
 */

:root {
	/* Brand Colors — Brico Fix official palette (brand-kit/04_Brand_Assets/Brico_Fix_Couleurs.css) */
	--color-primary: #FE6908; /* Brico Fix Orange — buttons/accents only, fails WCAG AA as text on light bg */
	--color-primary-hover: #E45C05;
	--color-link-text: #B34A00; /* darker orange, ~4.6:1 on white — for link text/underlines */
	--color-secondary: #001D44; /* Brico Fix Navy */
	--color-secondary-light: #012A63;

	/* Backgrounds */
	--color-bg-body: #F5F7FA; /* Brico Fix Light */
	--color-bg-surface: #ffffff;

	/* Text */
	--color-text-main: #202A33; /* Brico Fix Anthracite */
	--color-text-muted: #5A6672;
	--color-text-inverse: #ffffff;

	/* Borders & Shadows */
	--color-border: #E3E7ED;
	--color-error: #C0392B;
	--color-success: #1E8E3E;
	--shadow-sm: 0 2px 8px rgba(0,29,68,0.06);
	--shadow-md: 0 4px 20px rgba(0,29,68,0.08);
	--shadow-lg: 0 8px 30px rgba(0,29,68,0.12);
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;

	/* Typography — Rubik (titres) + Nunito Sans (texte courant), brand-kit/01_Brand_Book §7 */
	--font-heading: 'Rubik', sans-serif;
	--font-body: 'Nunito Sans', sans-serif;

	/* Spacing scale */
	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 40px;
	--space-xl: 64px;
}

/* Generic focus ring for buttons/links without a dedicated focus style
   (form fields and dropdown menus already have their own, more specific
   rules elsewhere). :focus-visible only, so mouse clicks don't show a ring
   where that isn't already the site's convention. */
a:focus-visible,
button:focus-visible,
.bricofix-btn:focus-visible,
.bricofix-btn-secondary:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Shared reveal-on-scroll utility, activated by navigation.js via IntersectionObserver */
.reveal-on-scroll {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-on-scroll.is-visible {
	opacity: 1;
	transform: none;
}

@keyframes bricofix-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

html {
	overflow-x: hidden;
}

body, html {
	background-color: var(--color-bg-body);
	color: var(--color-text-main);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* Mobile gets its own bump rather than just inheriting the desktop base:
   at typical phone viewing distance 17px still reads small next to
   thumb-driven UI, so bump both the base and the heading scale further. */
@media (max-width: 768px) {
	body, html {
		font-size: 17.5px;
	}
}

body {
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-secondary);
	line-height: 1.25;
	margin: 0 0 0.6em;
}

h1 {
	font-size: 2.7em;
	font-weight: 800;
}

h2 {
	font-size: 2.05em;
	font-weight: 700;
}

h3 {
	font-size: 1.6em;
	font-weight: 700;
}

h4 {
	font-size: 1.3em;
	font-weight: 600;
}

@media (max-width: 768px) {
	h1 { font-size: 2.1em; }
	h2 { font-size: 1.7em; }
	h3 { font-size: 1.4em; }
	h4 { font-size: 1.2em; }
}

h5, h6 {
	font-size: 1.1em;
	font-weight: 700;
}

small, .small {
	font-size: 0.85em;
	color: var(--color-text-muted);
}

img {
	max-width: 100%;
	height: auto;
}

table {
	max-width: 100%;
}

select,
input,
textarea {
	max-width: 100%;
}

a {
	color: var(--color-link-text);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--color-primary-hover);
}

/* Richer hover for text links (nav, footer, breadcrumbs, page content):
   an animated underline reveal instead of a flat color swap. Card-style
   links (product/category/brand cards) keep their own lift+shadow hover
   and are intentionally not included here. */
.bricofix-mega-menu .primary-navigation a,
.bricofix-categories-dropdown .sub-menu a,
.bricofix-top-nav a,
.footer-widget a,
.woocommerce-breadcrumb a,
.bricofix-contact-page a,
.bricofix-about-page a,
.entry-content a,
.woocommerce-tabs .panel a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 2px;
	transition: background-size 0.3s ease, color 0.3s ease;
	padding-bottom: 2px;
}

.bricofix-mega-menu .primary-navigation a:hover,
.bricofix-categories-dropdown .sub-menu a:hover,
.bricofix-top-nav a:hover,
.footer-widget a:hover,
.woocommerce-breadcrumb a:hover,
.bricofix-contact-page a:hover,
.bricofix-about-page a:hover,
.entry-content a:hover,
.woocommerce-tabs .panel a:hover {
	background-size: 100% 2px;
}

/* Global Utility */
.col-full {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Remove Storefront default spacing anomalies */
.site-main {
	margin-top: 1em;
}

/* Storefront's breadcrumb block ships with a large 40px top padding that,
   stacked with .site-main's own margin, left a big empty gap before the
   page title (Panier, Commande reçue, etc.). */
.woocommerce-breadcrumb {
	padding-top: 14px;
	margin: 0 0 6px;
}