/*
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 ----------------------------------------------------- */
:root {
	--fb-black:        #000000;
	--fb-white:        #ffffff;
	--fb-green:        #32cd33;
	--fb-green-dark:   #28a629;
	--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", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fb-font-mono:    Menlo, Consolas, monaco, monospace;

	--fb-container:    1430px;
	--fb-content:      1288px;
	--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(50, 205, 51, .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;
	}
}