/*
Theme Name: FMBI
Theme URI: https://fmbi.fi
Author: FMBI
Author URI: https://fmbi.fi
Description: FMBI on bike park- ja alamakiopetukseen erikoistunut yhden sivun WordPress-teema kahdelle FMBIA-sertifioidulle opettajalle. Sisaltaa erillisen ohjaajakoulutus-osion ja kaksikielisen (FI/EN) sisallonvaihdon. Konseptiversio.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fmbi
*/

  /* ===== Design tokens — modern gravity palette ===== */
  :root{
    --graphite-950:#13141A;
    --graphite-800:#1E2027;
    --graphite-700:#262932;
    --steel-500:#5C6470;
    --steel-300:#C2C8CE;
    --mist-50:#FAFAFB;
    --mist-100:#F2F3F4;
    --mist-200:#E4E6E8;
    --cloud-300:#CCD0D4;
    --ink-900:#15161B;
    --magenta-500:#F0176E;
    --magenta-600:#C20F58;
    --magenta-700:#9C0C49;
    --white:#FFFFFF;

    --green-500:#B0C54E;

    --rate-green:var(--green-500);
    --rate-blue:#2E7FE0;
    --rate-red:#E4392E;
    --rate-black:#15161B;

    --font-display:'Bebas Neue', sans-serif;
    --font-body:'Lora', Georgia, serif;

    --space-1:.4rem; --space-2:.8rem; --space-3:1.6rem;
    --space-4:2.6rem; --space-5:4.2rem; --space-6:6.8rem;

    --maxw:1180px;
    --radius:6px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  body{margin:0; background:var(--mist-50); color:var(--ink-900); font-family:var(--font-body); font-size:16px; line-height:1.6;}

  h1,h2,h3{font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.03em; line-height:1.0; margin:0;}

  a{color:inherit;}
  img,svg{display:block; max-width:100%;}

  .skip-link{position:absolute; left:-999px; top:0; background:var(--magenta-600); color:var(--white); padding:.6rem 1rem; z-index:200;}
  .skip-link:focus{left:0;}
  *:focus-visible{outline:3px solid var(--magenta-500); outline-offset:2px;}

  .wrap{max-width:var(--maxw); margin:0 auto; padding-left:1.5rem; padding-right:1.5rem;}

  .eyebrow{font-family:var(--font-body); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--magenta-600); margin:0 0 var(--space-2);}
  .eyebrow.on-dark{color:var(--steel-300);}

  .btn{
    display:inline-flex; align-items:center; gap:.5rem;
    font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:1rem;
    text-decoration:none; padding:.85rem 1.5rem; border-radius:var(--radius);
    border:1px solid transparent; cursor:pointer;
    transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--magenta-600); color:var(--white);}
  .btn-primary:hover{background:var(--magenta-700);}
  .btn-ghost{background:transparent; color:var(--white); border-color:rgba(255,255,255,.35);}
  .btn-ghost:hover{border-color:var(--white);}
  .btn-outline{background:transparent; color:var(--white); border-color:var(--white);}
  .btn-outline:hover{background:var(--white); color:var(--ink-900);}

  /* ===== Logo ===== */
  .logo-icon{width:38px; height:auto; flex-shrink:0; color:var(--green-500);}
  .logo-icon path{fill:currentColor;}
  .logo-wordmark{height:24px; width:auto; display:block; color:var(--ink-900);}
  .logo-wordmark path{fill:currentColor;}
  .logo-wordmark.on-dark{color:var(--white);}
  .logo-lockup{display:flex; align-items:center; gap:.7rem; text-decoration:none;}

  /* ===== Header ===== */
  header{position:sticky; top:0; z-index:100; background:var(--graphite-950); border-bottom:none;}
  header::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--magenta-500);}
  .header-inner{position:relative; display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.5rem; max-width:var(--maxw); margin:0 auto; gap:1rem;}

  nav.main-nav{display:flex; align-items:center; gap:1.8rem;}
  nav.main-nav a{font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:1.02rem; text-decoration:none; color:var(--white);}
  nav.main-nav a:not(.btn):not(.lang-link){position:relative; padding-bottom:.2rem;}
  nav.main-nav a:not(.btn):not(.lang-link)::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--magenta-500); transform:scaleX(0); transform-origin:left;
    transition:transform .2s ease;
  }
  nav.main-nav a:not(.btn):not(.lang-link):hover::after,
  nav.main-nav a:not(.btn):not(.lang-link):focus-visible::after{transform:scaleX(1);}
  nav.main-nav a:not(.btn):hover{color:var(--steel-300);}

  .lang-link{
    font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:1.02rem;
    background:none; border:none; padding:0 0 0 1.4rem; margin-left:.2rem;
    border-left:1px solid rgba(255,255,255,.18); cursor:pointer; color:var(--white);
  }
  .lang-link:hover, .lang-link:focus-visible{color:var(--steel-300);}

  #navToggle{display:none; background:transparent; border:1px solid var(--white); border-radius:var(--radius); padding:.5rem .7rem; cursor:pointer;}
  #navToggle span{display:block; width:18px; height:2px; background:var(--white); margin:3px 0;}

  @media (max-width: 880px){
    nav.main-nav{position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:1rem; background:var(--graphite-950); border-bottom:1px solid rgba(255,255,255,.12); padding:1.2rem 1.5rem; display:none;}
    nav.main-nav.open{display:flex;}
    #navToggle{display:block;}
    .lang-link{border-left:none; padding:.6rem 0 0; margin-left:0; border-top:1px solid rgba(255,255,255,.18); width:100%;}
  }

  /* ===== Hero ===== */
  .hero{background:var(--graphite-950); color:var(--white); position:relative; overflow:hidden;}
  .hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden;}
  .hero-bg img{position:absolute; top:-20%; left:0; width:100%; height:140%; object-fit:cover; object-position:center 38%; opacity:.82; will-change:transform;}
  .hero-bg::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(100deg, rgba(19,20,26,.85) 0%, rgba(19,20,26,.48) 42%, rgba(19,20,26,.06) 100%),
      linear-gradient(180deg, rgba(19,20,26,.3) 0%, rgba(19,20,26,.55) 78%, var(--graphite-950) 100%);
  }
  .hero-inner{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:var(--space-6) 1.5rem var(--space-6);}
  .hero h1{font-size:clamp(3.2rem, 7vw, 5.6rem); margin-bottom:var(--space-3); max-width:17ch;}
  .hero p.lead{font-size:1.1rem; max-width:38ch; color:var(--steel-300); margin-bottom:var(--space-4);}
  .hero .eyebrow{background:var(--graphite-950); padding:.6rem;}
  .hero-ctas{display:flex; flex-direction:column; gap:.9rem; align-items:flex-start;}
  .secondary-link{font-family:var(--font-body); font-weight:600; font-size:.92rem; color:var(--steel-300); text-decoration:none; border-bottom:1px solid rgba(194,200,206,.5); padding-bottom:.1rem;}
  .secondary-link:hover{color:var(--white); border-color:var(--white);}

  /* ===== Trust strip ===== */
  .trust{background:var(--mist-200); border-bottom:1px solid var(--cloud-300);}
  .trust-inner{max-width:var(--maxw); margin:0 auto; padding:var(--space-3) 1.5rem; display:flex; flex-wrap:wrap; gap:1.8rem 3rem; justify-content:center; align-items:center;}
  .trust-badge{font-family:var(--font-body); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite-800); display:flex; align-items:center; gap:.6rem;}
  .trust-badge::before{content:""; width:8px; height:8px; background:var(--magenta-500); transform:rotate(45deg); display:inline-block;}
  .stat-block{display:flex; flex-direction:column; align-items:center; gap:.1rem; line-height:1;}
  .stat-num{font-family:var(--font-display); font-size:2.6rem; letter-spacing:.02em; color:var(--graphite-800);}
  .stat-label{font-family:var(--font-body); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-500);}

  /* ===== Section base ===== */
  section{padding:var(--space-6) 0;}
  .section-head{max-width:640px; margin-bottom:var(--space-5);}
  .section-head h2{font-size:clamp(2rem,3.8vw,3rem);}
  .on-dark{background:var(--graphite-950); color:var(--white);}

  /* ===== Teaching (primary service) ===== */
  .teach-lede{max-width:64ch; font-size:1.05rem; margin-bottom:var(--space-4);}
  .teach-banner-wrap{position:relative; width:100%; aspect-ratio:16/6; border-radius:10px; overflow:hidden; margin-bottom:var(--space-4);}
  .teach-banner{position:absolute; top:-20%; left:0; width:100%; height:140%; object-fit:cover; display:block; will-change:transform;}
  .offer-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:1.2rem;}
  .offer-item{border-top:2px solid var(--magenta-500); padding-top:.9rem; font-family:var(--font-body); font-weight:700; font-size:.96rem;}
  .offer-note{font-family:var(--font-body); font-style:italic; font-size:.85rem; color:var(--steel-500); margin:.9rem 0 var(--space-3);}

  .rating-row{display:flex; align-items:center; gap:.5rem; margin-bottom:var(--space-4); font-family:var(--font-body); font-size:.78rem; color:var(--steel-500);}
  .diamond{width:11px; height:11px; transform:rotate(45deg); display:inline-block; flex-shrink:0; border:1px solid rgba(21,22,27,.3);}
  .diamond.green{background:var(--rate-green);}
  .diamond.blue{background:var(--rate-blue);}
  .diamond.red{background:var(--rate-red);}
  .diamond.black{background:var(--rate-black);}

  /* ===== Training (separate, secondary service) ===== */
  .train-section{background:var(--mist-100);}
  .train-panel{max-width:640px; margin:0 auto; background:var(--graphite-950); color:var(--white); border-radius:14px; padding:var(--space-5); text-align:left;}
  .train-panel .eyebrow{color:var(--steel-300); text-align:left;}
  .train-panel h2{font-size:clamp(1.5rem,2.8vw,2rem); margin-bottom:.9rem;}
  .train-panel p{color:var(--steel-300); margin-bottom:1.2rem;}
  .train-panel ul{list-style:none; margin:0 0 1.6rem; padding:0; display:flex; flex-direction:column; gap:.5rem;}
  .train-panel li{font-size:.92rem; padding-left:1.1rem; position:relative; color:var(--steel-300);}
  .train-panel li::before{content:""; position:absolute; left:0; top:.45em; width:6px; height:6px; background:var(--magenta-500); transform:rotate(45deg);}

  /* ===== Teachers ===== */
  .coaches-grid{display:grid; grid-template-columns:1fr 1fr; gap:2rem;}
  .coach-card{display:flex; flex-direction:column; gap:1rem;}
  .coach-photo{aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.1); background:var(--graphite-800);}
  .coach-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .coach-name{font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:1.9rem; letter-spacing:.03em;}
  .coach-role{font-family:var(--font-body); font-size:.72rem; color:var(--steel-300); letter-spacing:.04em;}
  .coach-quote{font-family:var(--font-body); font-style:italic; font-weight:500; font-size:1.35rem; color:var(--mist-100); border-left:3px solid var(--magenta-500); padding-left:1rem; margin:.4rem 0;}
  .coach-bio{font-size:.92rem; color:var(--steel-300);}
  @media (max-width:800px){.coaches-grid{grid-template-columns:1fr;}}

  /* ===== Photo break ===== */
  .photo-break{position:relative; height:340px; overflow:hidden;}
  .photo-break img{position:absolute; top:-20%; left:0; width:100%; height:140%; object-fit:cover; object-position:center 40%; display:block; will-change:transform;}
  .photo-break .caption{
    position:absolute; left:1.5rem; bottom:1.5rem; color:var(--white);
    font-family:var(--font-body); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
    background:rgba(19,20,26,.82); padding:.55rem 1rem; border-radius:4px;
  }

  /* ===== Process ===== */
  .process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;}
  .step{border-top:3px solid var(--magenta-500); padding-top:1rem;}
  .step .km{font-family:var(--font-display); font-size:2.8rem; line-height:1; letter-spacing:.03em; text-transform:uppercase; color:var(--magenta-600); display:block;}
  .step h3{font-size:1.3rem; margin:.3rem 0 .5rem; font-weight:400;}
  .step p{font-size:.92rem; color:var(--graphite-800);}
  @media (max-width:900px){.process-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.process-grid{grid-template-columns:1fr;}}

  /* ===== Testimonials ===== */
  .testi-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem;}
  .testi-card{background:var(--mist-200); border-radius:var(--radius); padding:var(--space-4);}
  .testi-card p.quote{font-family:var(--font-body); font-style:italic; font-weight:500; font-size:1.3rem; margin:0 0 .8rem;}
  .testi-card p.attr{font-family:var(--font-body); font-size:.78rem; color:var(--steel-500);}
  .testi-note{font-family:var(--font-body); font-size:.7rem; color:var(--steel-500); margin-top:1rem; letter-spacing:.03em;}
  @media (max-width:800px){.testi-grid{grid-template-columns:1fr;}}

  /* ===== Service area ===== */
  .location-inner{display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; align-items:center;}
  .location-text p:not(.eyebrow){font-size:1.02rem;}
  .map-block{aspect-ratio:5/4; border-radius:var(--radius); background:var(--mist-200); border:1px solid var(--cloud-300); position:relative; overflow:hidden;}
  .map-block svg{position:absolute; inset:0; width:100%; height:100%;}
  .loc-chip-list{list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0 0; padding:0;}
  .loc-chip{font-family:var(--font-body); font-size:.78rem; letter-spacing:.03em; background:var(--mist-200); border:1px solid var(--cloud-300); border-radius:var(--radius); padding:.4rem .9rem; color:var(--graphite-800);}
  @media (max-width:880px){.location-inner{grid-template-columns:1fr;}}

  /* ===== CTA banner ===== */
  .cta-banner{background:var(--magenta-600); color:var(--white); text-align:center; padding:var(--space-5) 0;}
  .cta-banner h2{font-size:clamp(2.4rem,5vw,3.6rem); margin-bottom:.6rem;}
  .cta-banner p{margin:0 0 1.6rem; font-size:1.05rem;}
  .cta-banner .btn-primary{background:var(--ink-900);}
  .cta-banner .btn-primary:hover{background:#000;}
  .cta-secondary{display:inline-block; margin-top:1rem; font-family:var(--font-body); font-weight:600; font-size:.9rem; text-decoration:underline;}

  /* ===== Booking / contact ===== */
  .booking{background:var(--mist-100); border-top:1px solid var(--cloud-300);}
  .booking-inner{display:grid; grid-template-columns:0.82fr 1.18fr; gap:3.2rem; align-items:start;}
  .booking-text h2{font-size:clamp(2rem,3.8vw,3rem); margin-bottom:1rem;}
  .booking-text p:not(.eyebrow){font-size:1.02rem; margin-bottom:1.2rem; max-width:42ch;}
  .booking-contacts{list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:.7rem;}
  .booking-contacts li{display:flex; align-items:center; gap:.7rem; font-family:var(--font-body); font-size:.95rem; color:var(--graphite-800);}
  .booking-contacts li::before{content:""; width:8px; height:8px; background:var(--magenta-500); transform:rotate(45deg); flex-shrink:0;}
  .booking-contacts a{text-decoration:none; border-bottom:1px solid var(--cloud-300);}
  .booking-contacts a:hover{border-color:var(--magenta-600);}

  .booking-form{background:var(--white); border:1px solid var(--cloud-300); border-radius:14px; padding:var(--space-4); box-shadow:0 22px 50px -34px rgba(19,20,26,.55);}
  .form-row{display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.1rem;}
  .form-row.two{display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start;}
  .form-row.two .form-row{margin-bottom:0;}
  .form-label{font-family:var(--font-body); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--steel-500); font-weight:600;}
  .form-label .req{color:var(--magenta-600);}
  .field{font-family:var(--font-body); font-size:1rem; color:var(--ink-900); background:var(--mist-50); border:1px solid var(--cloud-300); border-radius:var(--radius); padding:.7rem .85rem; width:100%; transition:border-color .15s ease, box-shadow .15s ease;}
  .field::placeholder{color:var(--steel-500); opacity:.7;}
  .field:focus{outline:none; border-color:var(--magenta-600); box-shadow:0 0 0 3px rgba(240,23,110,.12);}
  textarea.field{resize:vertical; min-height:104px;}
  .field.field-error{border-color:var(--rate-red);}
  .err-msg{display:none; font-family:var(--font-body); font-size:.74rem; color:var(--rate-red);}
  .err-msg.show{display:block;}

  .service-choice{display:grid; grid-template-columns:1fr 1fr; gap:.7rem;}
  .service-opt{position:relative;}
  .service-opt input{position:absolute; inset:0; opacity:0; cursor:pointer; margin:0;}
  .service-opt label{display:block; cursor:pointer; border:1px solid var(--cloud-300); border-radius:var(--radius); padding:.75rem .9rem; background:var(--mist-50); transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;}
  .service-opt .so-title{display:block; font-family:var(--font-display); letter-spacing:.03em; font-size:1.15rem; line-height:1; text-transform:uppercase;}
  .service-opt .so-sub{display:block; font-family:var(--font-body); font-size:.74rem; color:var(--steel-500); margin-top:.3rem;}
  .service-opt input:checked + label{border-color:var(--magenta-600); background:var(--white); box-shadow:0 0 0 2px rgba(240,23,110,.2) inset;}
  .service-opt input:focus-visible + label{outline:3px solid var(--magenta-500); outline-offset:2px;}

  .form-submit{width:100%; justify-content:center; border:none; font-size:1.1rem; padding:1rem 1.5rem; margin-top:.3rem;}
  .form-fineprint{font-family:var(--font-body); font-size:.74rem; color:var(--steel-500); margin:.9rem 0 0; line-height:1.5;}
  .form-error{display:none; font-family:var(--font-body); font-size:.85rem; color:var(--rate-red); margin:.8rem 0 0; padding:.7rem .85rem; background:rgba(228,57,46,.08); border:1px solid rgba(228,57,46,.35); border-radius:var(--radius);}
  .form-error.show{display:block;}
  .btn:disabled, .btn[disabled]{opacity:.6; cursor:progress; transform:none;}
  .hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

  .form-success{display:none; text-align:center; padding:var(--space-3) 0;}
  .booking-form.sent .form-body{display:none;}
  .booking-form.sent .form-success{display:block;}
  .success-mark{width:56px; height:56px; border-radius:50%; background:var(--magenta-600); margin:0 auto 1.2rem; position:relative;}
  .success-mark::after{content:""; position:absolute; left:20px; top:12px; width:11px; height:22px; border:solid var(--white); border-width:0 3px 3px 0; transform:rotate(45deg);}
  .form-success h3{font-size:1.7rem; margin-bottom:.5rem;}
  .form-success p{font-family:var(--font-body); font-size:.95rem; color:var(--steel-500); max-width:36ch; margin:0 auto;}

  @media (max-width:880px){
    .booking-inner{grid-template-columns:1fr; gap:2rem;}
    .form-row.two, .service-choice{grid-template-columns:1fr;}
  }

  /* ===== Footer ===== */
  footer{background:var(--graphite-950); color:var(--steel-300); padding:var(--space-5) 0 var(--space-3);}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; margin-bottom:var(--space-4);}
  .footer-col h4{font-family:var(--font-body); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-300); margin:0 0 .8rem;}
  .footer-col a{display:block; text-decoration:none; font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:1rem; margin-bottom:.5rem; color:var(--white);}
  .footer-col a:hover{color:var(--steel-300);}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:1.2rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-family:var(--font-body); font-size:.72rem; color:var(--steel-300);}
  @media (max-width:800px){.footer-grid{grid-template-columns:1fr; gap:1.6rem;}}

  /* ===== Basic page/post fallback templates ===== */
  .page-content{font-size:1.02rem; line-height:1.7;}
  .page-content p{margin:0 0 1.2rem;}