/*
Theme Name:   Repair Café Gembloux
Template:     astra
Version:      1.0.0
Text Domain:  rcg
*/

/* ---------------------------------------------------------------
   Design tokens.

   Colours that have a slot in Astra's Global palette READ FROM IT
   rather than repeating the hex here — so the Customizer is the single
   source of truth and this file follows whatever you set there.

   Astra exposes its nine palette slots as CSS variables, numbered in
   the order they appear in Customize → Global → Colors:

     --ast-global-color-0  Brand
     --ast-global-color-1  Alt Brand
     --ast-global-color-2  Heading
     --ast-global-color-3  Text
     --ast-global-color-4  Primary     (page background)
     --ast-global-color-5  Secondary   (tinted section background)
     --ast-global-color-6  Border
     --ast-global-color-7  Subtle BG
     --ast-global-color-8  Extra       (safety red)

   Each falls back to the prototype's own hex, so the design still
   renders correctly if a slot is empty or Astra is ever swapped out.

   Colours with NO palette slot (green, amber, and the tints derived
   from blue and red) stay as literals below. Nine slots cannot hold
   ten colours — see the note on green.
   --------------------------------------------------------------- */
:root {
	/* --- Mapped to Astra's Global palette --------------------- */
	--rcg-ink:        var(--ast-global-color-2, #23201c); /* Heading   */
	--rcg-body:       var(--ast-global-color-3, #4a453d); /* Text      */
	--rcg-paper:      var(--ast-global-color-4, #faf7f2); /* Primary   */
	--rcg-blue-pale:  var(--ast-global-color-5, #eaf1f9); /* Secondary */
	--rcg-rule:       var(--ast-global-color-6, #e3ddd2); /* Border    */
	--rcg-blue:       var(--ast-global-color-0, #1f5fa8); /* Brand     */
	--rcg-blue-dark:  var(--ast-global-color-1, #16457a); /* Alt Brand */
	--rcg-red:        var(--ast-global-color-8, #a8401f); /* Extra     */

	/* --- No palette slot: fixed values ------------------------ */

	/* Neutrals derived from the ink/paper pair */
	--rcg-ink-soft:   #33302a;
	--rcg-muted:      #5c564e;
	--rcg-canvas:     #efece6;
	--rcg-cream:      #f3efe8; /* text on dark sections */
	--rcg-rule-firm:  #d5cec1;
	--rcg-subtle:     var(--ast-global-color-7, #f1eee7); /* Subtle BG */

	/* Blue tints — shades of Brand, too specific for a slot */
	--rcg-blue-rule:  #cfdcec;
	--rcg-blue-edge:  #d3e0ee;
	--rcg-blue-tint:  #f5f8fc;
	--rcg-blue-light: #9fc4ea; /* links on dark ground */

	/* Red tints — shades of Extra */
	--rcg-red-deep:   #7d2f14;
	--rcg-red-pale:   #fbeee8;
	--rcg-red-rule:   #e8c9ba;

	/*
	 * Green — RepairVélo. No palette slot: the design carries two
	 * independent accents (safety red, bike green) and Astra has one
	 * Extra slot. Red took it, because it marks a block warning about
	 * a lethal hazard. Green appears in one section a few times a year,
	 * so it lives here. To change it, edit this file — not the Customizer.
	 */
	--rcg-green:      #2f6b45;
	--rcg-green-deep: #245537;
	--rcg-green-pale: #e8f2eb;

	/* Amber — "by appointment only" notices */
	--rcg-amber-bg:   #fdf6e9;
	--rcg-amber-rule: #e6d3ab;
	--rcg-amber-text: #6b4c12;

	/*
	 * Type. Archivo/Karla/DM Mono are the prototype's faces, kept first in
	 * each stack so they're used IF present — via Astra's "Load Google Fonts
	 * Locally" setting or the Custom Fonts plugin. Nothing here loads them,
	 * so with no fonts installed the page falls back to the system stack and
	 * still renders correctly. Astra's own typography settings override these
	 * anyway; treat them as the fallback, not the source of truth.
	 */
	--rcg-display: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--rcg-text:    Karla, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--rcg-mono:    'DM Mono', ui-monospace, Menlo, Consolas, monospace;
}

body {
	background: var(--rcg-paper);
	color: var(--rcg-ink);
	font-family: var(--rcg-text);
}

h1, h2, h3, .rcg-display {
	font-family: var(--rcg-display);
	letter-spacing: -0.025em;
	text-wrap: pretty;
}

/* --- Eyebrow / label chips ------------------------------------ */
.rcg-eyebrow {
	display: inline-block;
	padding: 5px 10px;
	font: 500 11px/1 var(--rcg-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 4px;
}
.rcg-eyebrow--blue  { background: var(--rcg-blue); color: #fff; }
.rcg-eyebrow--red   { background: var(--rcg-red);  color: #fff; }
.rcg-eyebrow--ink   { background: var(--rcg-ink);  color: #fff; }
.rcg-eyebrow--green { border: 1.5px solid var(--rcg-green); color: var(--rcg-green); }

/* --- Buttons --------------------------------------------------- */
.rcg-btn {
	display: block;
	padding: 15px 18px;
	font: 700 16px/1.2 var(--rcg-display);
	text-align: center;
	text-decoration: none;
	border-radius: 8px;
}
.rcg-btn--primary { background: var(--rcg-blue); color: #fff; }
.rcg-btn--bike    { background: var(--rcg-green-pale); color: var(--rcg-green-deep); border: 2px solid var(--rcg-green); }
.rcg-btn--ghost   { background: var(--rcg-paper); color: var(--rcg-ink); border: 2px solid var(--rcg-ink); }

/* --- Hero ------------------------------------------------------ */
.rcg-hero { display: grid; background: var(--rcg-ink); }
.rcg-hero__copy {
	display: flex; flex-direction: column; justify-content: center;
	gap: 18px; padding: 48px;
}
.rcg-hero__title {
	font: 800 64px/0.95 var(--rcg-display);
	letter-spacing: -0.04em; color: #fff; margin: 0;
}
.rcg-hero__sub {
	font: 500 19px/1.55 var(--rcg-text);
	color: #ded7cc; max-width: 420px;
}
.rcg-hero__media { min-height: 420px; background: #e4dfd5; }
.rcg-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 922px) {
	.rcg-hero { grid-template-columns: 1fr 1.25fr; }
}
@media (max-width: 921px) {
	.rcg-hero__copy  { padding: 20px 18px 22px; }
	.rcg-hero__title { font-size: 32px; line-height: 1.02; letter-spacing: -0.03em; }
	.rcg-hero__sub   { font-size: 14.5px; max-width: 300px; }
	.rcg-hero__media { min-height: 260px; order: -1; } /* photo above copy on mobile */
}

/* --- Agenda ---------------------------------------------------- */
.rcg-agenda {
	background: var(--rcg-blue-pale);
	border-bottom: 1px solid var(--rcg-blue-edge);
	padding: 48px 48px 52px;
}
.rcg-agenda__date {
	font: 800 96px/0.92 var(--rcg-display);
	letter-spacing: -0.04em; margin: 10px 0 0;
}
.rcg-agenda__time { font: 600 26px/1.2 var(--rcg-display); color: var(--rcg-body); margin-top: 12px; }
.rcg-agenda__place { font: 400 19px/1.5 var(--rcg-text); color: var(--rcg-ink-soft); margin-top: 18px; }

.rcg-chip {
	padding: 7px 12px;
	background: var(--rcg-blue-tint);
	border: 1px solid var(--rcg-blue-rule);
	border-radius: 20px;
	font: 500 14px/1 var(--rcg-text);
}

@media (min-width: 922px) {
	.rcg-agenda--filled { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
}
@media (max-width: 921px) {
	.rcg-agenda { padding: 24px 18px 28px; }
	.rcg-agenda__date { font-size: 44px; line-height: 0.95; letter-spacing: -0.035em; }
	.rcg-agenda__time { font-size: 17px; }
	.rcg-agenda__place { font-size: 15px; }
}

/* --- Safety block (never edit the copy without care) ----------- */
.rcg-safety {
	background: var(--rcg-red-pale);
	border-top: 2px solid var(--rcg-red);
	border-bottom: 1px solid var(--rcg-red-rule);
	padding: 44px 48px 48px;
}
.rcg-safety h2 { color: var(--rcg-red-deep); font: 700 38px/1.06 var(--rcg-display); margin: 16px 0 0; }
.rcg-safety__card {
	padding: 22px 20px 24px; background: #fff;
	border: 1px solid var(--rcg-red-rule); border-radius: 10px;
}
.rcg-safety__card h3 { font: 700 22px/1.15 var(--rcg-display); color: var(--rcg-red-deep); margin: 0; }
.rcg-safety__why { margin-top: 10px; font: 600 15.5px/1.5 var(--rcg-text); color: var(--rcg-ink-soft); }
.rcg-safety__alt {
	margin-top: 14px; padding-top: 14px;
	border-top: 1px solid #f0e2da;
	font: 400 15px/1.5 var(--rcg-text); color: var(--rcg-body);
}
.rcg-safety__alt a { color: var(--rcg-red); font-weight: 700; }

@media (min-width: 922px) {
	.rcg-safety__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
	.rcg-safety__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 921px) {
	.rcg-safety { padding: 24px 18px 26px; }
	.rcg-safety h2 { font-size: 24px; line-height: 1.12; }
	.rcg-safety__cards > * + * { margin-top: 10px; }
}

/* --- Workshops grid -------------------------------------------- */
.rcg-workshops { padding: 44px 48px 48px; border-bottom: 1px solid var(--rcg-rule); }
.rcg-workshops__grid { display: grid; gap: 14px; margin-top: 26px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rcg-workshop {
	padding: 20px 18px 22px; background: #fff;
	border: 1px solid var(--rcg-rule); border-radius: 10px;
}
.rcg-workshop__icon {
	width: 34px; height: 34px; border-radius: 7px;
	background: var(--rcg-blue-pale); border: 1px solid var(--rcg-blue-rule);
}
.rcg-workshop__name { margin-top: 14px; font: 700 18px/1.2 var(--rcg-display); }
.rcg-workshop__desc { margin-top: 7px; font: 400 14.5px/1.45 var(--rcg-text); color: var(--rcg-muted); }
.rcg-note {
	margin-top: 12px; padding: 9px 11px;
	background: var(--rcg-amber-bg); border: 1px solid var(--rcg-amber-rule);
	border-radius: 6px; font: 600 13px/1.4 var(--rcg-text); color: var(--rcg-amber-text);
}

@media (max-width: 921px) {
	.rcg-workshops { padding: 24px 18px 26px; }
	.rcg-workshops__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.rcg-workshop__name { font-size: 15px; }
	.rcg-workshop__desc { font-size: 13px; }
}

/* --- RepairBox -------------------------------------------------- */
.rcg-repairbox { padding: 44px 48px 48px; border-bottom: 1px solid var(--rcg-rule); }
.rcg-repairbox__steps { display: grid; gap: 12px; }
.rcg-step {
	display: flex; gap: 16px; align-items: baseline;
	padding: 18px 20px; background: #fff;
	border: 1px solid var(--rcg-rule); border-radius: 10px;
}
.rcg-step__num { flex: none; font: 500 15px/1.3 var(--rcg-mono); color: var(--rcg-blue); }
.rcg-step__text { font: 400 16.5px/1.45 var(--rcg-text); color: var(--rcg-ink-soft); }
.rcg-pullquote {
	margin-top: 20px; padding: 14px 16px;
	background: #f1eee7; border-left: 3px solid var(--rcg-ink);
	font: 600 15px/1.5 var(--rcg-text); color: var(--rcg-ink-soft);
}

@media (min-width: 922px) {
	.rcg-repairbox__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
}
@media (max-width: 921px) {
	.rcg-repairbox { padding: 24px 18px 26px; }
}