/*
Theme Name: Fatbikes.be
Theme URI: https://www.fatbikes.be/
Author: MMGroup
Author URI: https://mmgroup.web.id/
Description: Custom WooCommerce theme for Fatbikes.be — the Belgian fatbike specialist. Hand-coded, no page builder. Plain CSS with design tokens, ACF-driven homepage sections.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fatbikesbe
Tags: e-commerce, woocommerce, custom-menu, custom-logo, translation-ready
WC requires at least: 8.0
WC tested up to: 11.1
*/

/* -------------------------------------------------------------------------
   This file holds the design tokens, the reset and the shared base layer.
   Everything else lives in assets/css/ and is enqueued per context:
     header.css  - site header, navigation, drawers
     front.css   - homepage sections
     content.css - pages, blog, comments, 404
     woocommerce.css - shop, product, cart, checkout, account
     footer.css  - site footer
   ---------------------------------------------------------------------- */

/* --- Design tokens ----------------------------------------------------- */
/* Inter, self-hosted: one variable woff2 carries every weight from 100 to 900,
   replacing the Google Fonts stylesheet and its second-domain font request. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Arial stretched to Inter's metrics. Until the woff2 arrives, text is set in
   this, so swapping to Inter barely moves anything (Lighthouse's largest layout
   shift was the hero copy reflowing on the font swap). */
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("ArialMT"), local("Helvetica");
	size-adjust: 107.12%;
	ascent-override: 90.44%;
	descent-override: 22.52%;
	line-gap-override: 0%;
}

:root {
	--fb-black:        #000000;
	--fb-white:        #ffffff;
	--fb-green:        #2cb42d;
	--fb-green-dark:   #228d23;
	--fb-green-bright: #41fc74;
	--fb-orange:       #fe5b03;
	--fb-grey-50:      #fbfbfb;
	--fb-grey-100:     #f9f9f9;
	--fb-grey-200:     #f6f6f6;
	--fb-grey-300:     #ececec;
	--fb-grey-400:     #e5e5e5;
	--fb-grey-500:     #aaaaaa;
	--fb-grey-600:     #8c8c8c;
	--fb-grey-700:     #7a7a7a;
	--fb-grey-800:     #3c3c3c;

	--fb-text:         var(--fb-black);
	--fb-text-muted:   var(--fb-grey-700);
	--fb-border:       var(--fb-grey-400);
	--fb-bg:           var(--fb-white);
	--fb-bg-alt:       var(--fb-grey-200);

	--fb-font:         "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fb-font-mono:    Menlo, Consolas, monaco, monospace;

	--fb-container:    1430px;
	--fb-content:      1288px;
	--fb-shop:         1100px;
	--fb-narrow:       842px;
	--fb-gutter:       15px;

	--fb-radius:       6px;
	--fb-radius-lg:    12px;
	--fb-radius-pill:  100px;

	--fb-shadow-sm:    0 1px 3px rgba(0, 0, 0, .06);
	--fb-shadow:       0 2px 13px rgba(0, 0, 0, .1);
	--fb-shadow-lg:    0 12px 34px rgba(0, 0, 0, .12);

	--fb-transition:   .25s ease;

	--fb-header-h:     100px;
	--fb-section-y:    clamp(48px, 6vw, 90px);
}

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

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

body {
	margin: 0;
	background: var(--fb-bg);
	color: var(--fb-text);
	font-family: var(--fb-font);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

iframe { max-width: 100%; border: 0; }

a {
	color: var(--fb-black);
	text-decoration: none;
	transition: color var(--fb-transition);
}

a:hover,
a:focus { color: var(--fb-green); }

:focus-visible {
	outline: 2px solid var(--fb-green);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--fb-black);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.375rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: .9375rem; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.25em; }

blockquote {
	margin: 1.6em 0;
	padding: .2em 0 .2em 1.4em;
	border-left: 4px solid var(--fb-green);
	color: var(--fb-grey-800);
	font-size: 1.0625rem;
}

code, kbd, pre { font-family: var(--fb-font-mono); font-size: .9em; }

pre {
	padding: 1.2em;
	overflow-x: auto;
	background: var(--fb-grey-200);
	border-radius: var(--fb-radius);
}

table {
	width: 100%;
	margin-bottom: 1.5em;
	border-collapse: collapse;
}

th, td {
	padding: .75em 1em;
	border: 1px solid var(--fb-border);
	text-align: left;
}

th { background: var(--fb-grey-200); font-weight: 600; }

hr {
	height: 1px;
	margin: 2.5em 0;
	border: 0;
	background: var(--fb-border);
}

/* --- Layout helpers ---------------------------------------------------- */
.fb-container {
	width: 100%;
	max-width: calc(var(--fb-container) + (var(--fb-gutter) * 2));
	margin: 0 auto;
	padding: 0 var(--fb-gutter);
}

.fb-container--content { max-width: calc(var(--fb-content) + (var(--fb-gutter) * 2)); }
.fb-container--narrow  { max-width: calc(var(--fb-narrow)  + (var(--fb-gutter) * 2)); }

.fb-section { padding: var(--fb-section-y) 0; }
.fb-section--tight { padding: clamp(30px, 3.5vw, 50px) 0; }
.fb-section--grey { background: var(--fb-grey-200); }

.site-content { min-height: 45vh; }

/* --- Section heading with flanking rules -------------------------------- */
.fb-section-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin-bottom: 38px;
	text-align: center;
}

.fb-section-head::before,
.fb-section-head::after {
	content: "";
	flex: 0 1 130px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--fb-grey-500));
}

.fb-section-head::after { background: linear-gradient(270deg, transparent, var(--fb-grey-500)); }

.fb-section-head__title {
	margin: 0;
	font-size: clamp(1.35rem, 2.4vw, 1.875rem);
	font-weight: 700;
}

.fb-section-head--left { justify-content: flex-start; }
.fb-section-head--left::before,
.fb-section-head--left::after { display: none; }

/* Dividers flanking the section title — the hero's hairline in black,
   mirrored on the right so both point at the heading. */
.fb-section-head--marked::before,
.fb-section-head--marked::after { display: none; }

.fb-section-head--marked { gap: 20px; }

.fb-section-rule {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fb-section-rule::after {
	content: "";
	width: 130px;
	max-width: 22vw;
	height: 1px;
	background: linear-gradient(90deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
	animation: fb-divider-glow-dark 2.6s ease-in-out infinite;
}

/* Right-hand mark: gradient mirrored so it fades away from the title. */
.fb-section-rule--right { flex-direction: row-reverse; }

.fb-section-rule--right::after {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
}

/* On a narrow phone the two rules plus the heading no longer fit on a line. */
@media (max-width: 480px) {
	.fb-section-head--marked { gap: 14px; }

	.fb-section-rule::after { max-width: 13vw; }
}

@keyframes fb-divider-glow-dark {
	0%, 100% { box-shadow: 0 0 8px rgba(0, 0, 0, .18); }
	50%      { box-shadow: 0 0 16px rgba(0, 0, 0, .35); }
}

/* Stacked heading: left-aligned, bullet beside it, divider beneath — no
   flanking rules. Used by the FAQ and top-picks sections. */
/* Dot variant: centred title with a bullet on its left, no flanking rules. */
.fb-section-head--dot::before,
.fb-section-head--dot::after { display: none; }

.fb-section-head--dot .fb-section-rule { display: none; }

.fb-section-head--dot .fb-section-head__title::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	margin: -.1em 10px 0 0;
	border-radius: 50%;
	background: var(--fb-black);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .12);
}

.fb-section-head--stacked {
	justify-content: flex-start;
	text-align: left;
}

.fb-section-head--stacked::before,
.fb-section-head--stacked::after { display: none; }

.fb-section-head--stacked .fb-section-rule { display: none; }

.fb-section-head--stacked .fb-section-head__title::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	margin: -.1em 10px 0 0;
	border-radius: 50%;
	background: var(--fb-black);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .12);
}

.fb-section-head--stacked .fb-section-head__title::after {
	content: "";
	display: block;
	width: 190px;
	max-width: 100%;
	height: 1px;
	margin-top: .45em;
	background: linear-gradient(90deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
	animation: fb-divider-glow-dark 2.6s ease-in-out infinite;
}

/* --- Buttons ----------------------------------------------------------- */
.fb-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: .85em 1.7em;
	border: 2px solid var(--fb-green);
	border-radius: var(--fb-radius);
	background: var(--fb-green);
	color: var(--fb-white);
	font-family: inherit;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--fb-transition), border-color var(--fb-transition), color var(--fb-transition);
}

.fb-btn:hover,
.fb-btn:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background: var(--fb-black);
	border-color: var(--fb-black);
	color: var(--fb-white);
}

.fb-btn--outline {
	background: transparent;
	border-color: var(--fb-black);
	color: var(--fb-black);
}

.fb-btn--outline:hover {
	background: var(--fb-black);
	border-color: var(--fb-black);
	color: var(--fb-white);
}

.fb-btn--ghost {
	background: var(--fb-white);
	border-color: var(--fb-white);
	color: var(--fb-black);
}

.fb-btn--ghost:hover {
	background: var(--fb-green);
	border-color: var(--fb-green);
	color: var(--fb-white);
}

.fb-btn__icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex: none;
}

/* --- Forms ------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: .8em 1em;
	border: 1px solid var(--fb-border);
	border-radius: var(--fb-radius);
	background: var(--fb-white);
	color: var(--fb-text);
	font-family: inherit;
	font-size: .9375rem;
	line-height: 1.5;
	transition: border-color var(--fb-transition), box-shadow var(--fb-transition);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--fb-green);
	box-shadow: 0 0 0 3px rgba(44, 180, 45, .15);
	outline: none;
}

textarea { min-height: 150px; resize: vertical; }

label { display: block; margin-bottom: .35em; font-size: .875rem; font-weight: 600; }

/* --- WordPress core classes -------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -60px;
	left: 15px;
	z-index: 9999;
	padding: .7em 1.2em;
	background: var(--fb-black);
	color: var(--fb-white);
	border-radius: 0 0 var(--fb-radius) var(--fb-radius);
	transition: top .2s ease;
}

.skip-link:focus { top: 0; color: var(--fb-white); }

.alignleft  { float: left;  margin: .35em 1.6em 1.2em 0; }
.alignright { float: right; margin: .35em 0 1.2em 1.6em; }
.aligncenter { display: block; margin: 1.2em auto; }
.alignwide, .alignfull { margin: 1.6em 0; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-block-image figcaption {
	margin-top: .6em;
	color: var(--fb-text-muted);
	font-size: .8125rem;
	text-align: center;
}

.sticky { position: relative; }

/* --- Utilities --------------------------------------------------------- */
.fb-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fb-text-center { text-align: center; }
.fb-mb-0 { margin-bottom: 0; }
.fb-no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}