/*
Theme Name: Maklin Bikes
Author: 
Description: Your description goes here
Version: 1.0
Template: generatepress

This is the child theme for GeneratePress theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/

/*
 * ============================================================
 * MAKLIN BIKES — GLOBAL STYLESHEET
 * maklinbikes.com
 * ============================================================
 *
 * HOW TO USE:
 * Paste this entire file into your GeneratePress child theme's
 * style.css file via Appearance → Theme File Editor → style.css
 *
 * TO CHANGE THE ACCENT COLOR SITE-WIDE:
 * Find --accent: #e8450a; below and change the hex value.
 * Every page and post that references this file updates instantly.
 *
 * TO CHANGE FONTS SITE-WIDE:
 * Update the @import line below and the font-family variables.
 * ============================================================
 */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@300;400;500;600&family=Playfair+Display:ital@1&display=swap');

/* ── CSS VARIABLES — CHANGE THESE TO RESTYLE THE WHOLE SITE ── */
:root {
  /* Colors */
  --mb-black:        #0d0d0d;
  --mb-off-black:    #141414;
  --mb-dark:         #1a1a1a;
  --mb-mid:          #2a2a2a;
  --mb-border:       #2f2f2f;
  --mb-muted:        #888888;
  --mb-light:        #c8c8c8;
  --mb-white:        #f4f2ee;
  --mb-accent:       #e8450a;   /* ← CHANGE THIS ONE LINE TO RECOLOR EVERYTHING */
  --mb-accent-muted: rgba(232, 69, 10, 0.12);
  --mb-accent-glow:  rgba(232, 69, 10, 0.25);

  /* Typography */
  --mb-font-display: 'Barlow Condensed', sans-serif;
  --mb-font-body:    'Barlow', sans-serif;
  --mb-font-italic:  'Playfair Display', serif;

  /* Spacing */
  --mb-pad-page:     64px;
  --mb-pad-section:  80px;
  --mb-gap:          2px;
}

/* ── GLOBAL RESET & BASE ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--mb-black);
  color: var(--mb-white);
  font-family: var(--mb-font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--mb-accent);
}

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

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--mb-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}

p {
  font-size: 0.97rem;
  color: var(--mb-light);
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 16px;
}

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

strong {
  color: var(--mb-white);
  font-weight: 600;
}

/* ── EYEBROW LABELS ── */
.mb-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.mb-eyebrow-line {
  width: 32px;
  height: 2px;
  background: var(--mb-accent);
  flex-shrink: 0;
}

.mb-eyebrow span {
  font-family: var(--mb-font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mb-accent);
}

/* ── PAGE HERO ── */
.mb-page-hero {
  padding: var(--mb-pad-section) var(--mb-pad-page) 80px;
  background: var(--mb-off-black);
  border-bottom: 1px solid var(--mb-border);
  position: relative;
  overflow: hidden;
}

.mb-page-title {
  font-family: var(--mb-font-display);
  font-weight: 900;
  font-size: clamp(3rem, 7vw, 6rem);
  text-transform: uppercase;
  line-height: 0.95;
  margin-bottom: 20px;
}

.mb-page-desc {
  font-size: 1rem;
  color: var(--mb-light);
  font-weight: 300;
  max-width: 560px;
  line-height: 1.7;
  margin-bottom: 28px;
}

/* ── SECTION LAYOUT ── */
.mb-section {
  padding: var(--mb-pad-section) var(--mb-pad-page);
}

.mb-section-alt {
  background: var(--mb-off-black);
}

.mb-section-dark {
  background: var(--mb-dark);
}

.mb-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
}

.mb-section-title {
  font-family: var(--mb-font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mb-section-link {
  font-family: var(--mb-font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mb-accent);
  border-bottom: 1px solid var(--mb-accent);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.mb-section-link:hover {
  opacity: 0.7;
  color: var(--mb-accent);
}

/* ── BUTTONS ── */
.mb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mb-accent);
  color: #fff;
  padding: 14px 28px;
  font-family: var(--mb-font-display);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.mb-btn:hover {
  background: #c73a08;
  color: #fff;
  transform: translateY(-1px);
}

.mb-btn-outline {
  background: transparent;
  border: 1px solid rgba(244, 242, 238, 0.25);
  color: var(--mb-light);
}

.mb-btn-outline:hover {
  border-color: var(--mb-accent);
  background: var(--mb-accent-muted);
  color: var(--mb-white);
  transform: translateY(-1px);
}

/* ── CARDS ── */
.mb-card {
  background: var(--mb-dark);
  overflow: hidden;
  transition: background 0.2s;
}

.mb-card-img {
  position: relative;
  overflow: hidden;
}

.mb-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mb-card:hover .mb-card-img img {
  transform: scale(1.05);
}

.mb-card-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--mb-accent);
  color: #fff;
  font-family: var(--mb-font-display);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 10px;
}

.mb-card-body {
  padding: 22px;
}

.mb-card-meta {
  font-family: var(--mb-font-display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mb-muted);
  margin-bottom: 8px;
}

.mb-card-title {
  font-family: var(--mb-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  margin-bottom: 10px;
  color: var(--mb-white);
  transition: color 0.2s;
  text-transform: uppercase;
}

.mb-card:hover .mb-card-title {
  color: var(--mb-accent);
}

.mb-card-excerpt {
  font-size: 0.84rem;
  color: var(--mb-light);
  line-height: 1.6;
  font-weight: 300;
}

/* ── SPEC TABLE ── */
.mb-specs {
  background: var(--mb-dark);
  border: 1px solid var(--mb-border);
  margin-bottom: 48px;
}

.mb-specs-header {
  padding: 14px 24px;
  border-bottom: 1px solid var(--mb-border);
  font-family: var(--mb-font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mb-accent);
}

.mb-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mb-spec-label,
.mb-spec-value {
  padding: 11px 24px;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--mb-border);
}

.mb-spec-label {
  font-family: var(--mb-font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mb-muted);
  background: rgba(255, 255, 255, 0.02);
}

.mb-spec-value {
  color: var(--mb-white);
}

/* ── VERDICT / CALLOUT BOXES ── */
.mb-verdict {
  background: var(--mb-dark);
  border: 1px solid var(--mb-border);
  border-top: 3px solid var(--mb-accent);
  padding: 32px;
  margin: 48px 0;
}

.mb-verdict-label {
  font-family: var(--mb-font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mb-accent);
  margin-bottom: 10px;
}

.mb-callout {
  background: var(--mb-accent);
  padding: 20px 24px;
  margin: 32px 0;
}

.mb-callout p {
  color: #fff;
  font-weight: 500;
  margin: 0;
}

/* ── CTA STRIP ── */
.mb-cta-strip {
  padding: var(--mb-pad-page);
  background: var(--mb-dark);
  border-top: 1px solid var(--mb-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.mb-cta-strip h3 {
  font-family: var(--mb-font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.mb-cta-strip p {
  font-size: 0.9rem;
  color: var(--mb-muted);
  max-width: 420px;
  line-height: 1.6;
  margin: 0;
}

/* ── TICKER ── */
.mb-ticker {
  background: var(--mb-accent);
  padding: 10px 0;
  overflow: hidden;
  white-space: nowrap;
}

.mb-ticker-inner {
  display: inline-flex;
  animation: mb-ticker-move 30s linear infinite;
}

.mb-ticker-item {
  font-family: var(--mb-font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  padding: 0 32px;
}

@keyframes mb-ticker-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── COMING SOON BANNER ── */
.mb-coming-banner {
  background: var(--mb-accent);
  padding: 16px var(--mb-pad-page);
  display: flex;
  align-items: center;
  gap: 16px;
}

.mb-coming-banner-label {
  font-family: var(--mb-font-display);
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}

.mb-coming-banner-text {
  font-family: var(--mb-font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
}

/* ── BRAND TAGS ── */
.mb-brand-tag {
  display: inline-block;
  background: var(--mb-dark);
  border: 1px solid var(--mb-border);
  padding: 6px 16px;
  font-family: var(--mb-font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mb-light);
}

/* ── FOOTER ── */
.mb-footer {
  background: var(--mb-off-black);
  border-top: 1px solid var(--mb-border);
  padding: 60px var(--mb-pad-page) 32px;
}

.mb-footer-logo {
  font-family: var(--mb-font-display);
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.mb-footer-logo span {
  color: var(--mb-accent);
}

.mb-footer-col h4 {
  font-family: var(--mb-font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mb-accent);
  margin-bottom: 14px;
}

.mb-footer-col a {
  font-size: 0.88rem;
  color: var(--mb-muted);
  display: block;
  margin-bottom: 8px;
  transition: color 0.2s;
}

.mb-footer-col a:hover {
  color: var(--mb-white);
}

/* ── SCROLL FADE-IN ANIMATION ── */
.mb-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.mb-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── DIVIDERS ── */
.mb-divider {
  border: none;
  border-top: 1px solid var(--mb-border);
  margin: 48px 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  :root {
    --mb-pad-page:    32px;
    --mb-pad-section: 64px;
  }
}

@media (max-width: 640px) {
  :root {
    --mb-pad-page:    20px;
    --mb-pad-section: 48px;
  }

  .mb-specs-grid {
    grid-template-columns: 1fr;
  }

  .mb-spec-label {
    border-bottom: none;
    padding-bottom: 4px;
  }

  .mb-cta-strip {
    flex-direction: column;
  }

  .mb-coming-banner {
    flex-direction: column;
    gap: 8px;
  }
}

/* ── SCROLL ANIMATION SCRIPT HELPER ── */
/*
   Add this script once to your WordPress footer
   (Appearance → Theme File Editor → footer.php)
   or use a plugin like "Insert Headers and Footers":

   <script>
   const observer = new IntersectionObserver((entries) => {
     entries.forEach((entry, i) => {
       if (entry.isIntersecting) {
         setTimeout(() => entry.target.classList.add('visible'), i * 80);
         observer.unobserve(entry.target);
       }
     });
   }, { threshold: 0.08 });
   document.querySelectorAll('.mb-fade-up').forEach(el => observer.observe(el));
   </script>
*/