/* Kyle’s Karate shared base styles.
   Linked from every page before that page's own inline <style> block,
   so page-specific rules still override what's here.
   Anything in this file applies site-wide: change it once, not ten times. */

/* FONT. Self-hosted so no page load depends on Google, and no visitor data
   is sent to a third party. Inter ships as a variable font, so this single
   48KB file covers every weight the site uses.
   Inter is licensed under the SIL Open Font License 1.1.
   The unicode-range is Google's "latin" subset, which covers every character
   this site actually uses (curly quotes, en/em dashes, ©, ↑). */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('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;
}

/* COLOR SYSTEM
   Every colour on the site resolves to one of these. To change the accent,
   edit --accent in both blocks below and nothing else. */
:root{
  color-scheme:light;   /* dark mode is off; see the note below */
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --bg:#fff;
  --surface:#fff;          /* cards */
  --surface-alt:#f5f5f5;   /* tinted panels: quote boxes, books strip */
  --border:#e2e2e2;
  --text:#37352F;
  --muted:#555;
  --accent:#C1121F;        /* primary CTAs only, so they outrank everything else */
  --accent-hover:#9E0E19;
  --btn:#000;              /* secondary buttons */
  --btn-hover:#222;
  --btn-text:#fff;
  --footer-bg:#000;
  --footer-text:#fff;
  --footer-rule:#333;
}
/* DARK MODE. Built and working, but deliberately OFF.
   To turn it back on, change the selector below to:
       @media (prefers-color-scheme: dark){ :root{ ... } }
   and restore color-scheme:light dark above, plus the dark theme-color
   meta tag in each page head. As written it only applies if something sets
   <html data-theme="dark">, which nothing does. */
:root[data-theme="dark"]{
    --bg:#16161A;
    --surface:#1F1F25;
    --surface-alt:#1C1C22;
    --border:#33333D;
    --text:#ECECEC;
    --muted:#A9A9B2;
    --accent:#E23B45;      /* lifted so it still reads against a dark ground */
    --accent-hover:#F2545D;
    --btn:#ECECEC;         /* black buttons would disappear here */
    --btn-hover:#fff;
    --btn-text:#16161A;
    --footer-bg:#0E0E11;
    --footer-rule:#2A2A33;
  }


/* BASE */
html,body{max-width:100%;overflow-x:hidden;}
*{box-sizing:border-box;margin:0;padding:0;scroll-behavior:smooth;}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6;}

/* Images carry width/height attributes so the browser can reserve space before
   they load. Those attributes also act as presentational hints, so without this
   height:auto any image whose CSS sets only a width renders vertically stretched.
   More specific rules (.logo img, .service img) still set their own height. */
img{max-width:100%;height:auto;}

/* Respect the OS "reduce motion" setting: no transitions, no transforms. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* Visible keyboard focus. Only shows for keyboard users, not mouse clicks. */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px;}

/* BUTTONS
   One definition for every button-shaped thing on the site. Primary actions
   (Register) take .btn-primary and pick up the accent colour. */
.cta,.btn-row a,.service a,.service-links a{
  display:inline-block;
  background:var(--btn);
  color:var(--btn-text);
  padding:1rem 2rem;
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
  transition:background .2s,transform .2s;
}
.cta:hover,.btn-row a:hover,.service a:hover,.service-links a:hover{background:var(--btn-hover);}
.service-links a{padding:0.8rem 1.6rem;}
/* Listed against each base selector so it wins on specificity, because ".service a"
   and ".btn-row a" are (0,1,1) and would otherwise outrank a bare .btn-primary. */
.btn-primary,.service a.btn-primary,.btn-row a.btn-primary,.service-links a.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover,.service a.btn-primary:hover,.btn-row a.btn-primary:hover,.service-links a.btn-primary:hover{background:var(--accent-hover);color:#fff;}

/* CTA row. Gap keeps the buttons apart when they wrap on mobile */
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:0.8rem;margin-top:1.8rem;}

/* CONTENT PAGES
   Applied as <main class="page">. Scoped to the class rather than bare `main`
   so the vertically-centred pages (register, contact, 404) keep their own layout. */
.page{max-width:900px;margin:2.5rem auto 4rem;padding:0 1rem;}
.page h1{text-align:center;font-size:2.3rem;margin-bottom:2rem;}
.page section{margin-bottom:4rem;}
.page h2{font-size:1.6rem;margin-top:2rem;margin-bottom:.8rem;}
.page h3{font-size:1.3rem;margin-top:1.5rem;margin-bottom:.6rem;}
.page p{color:var(--muted);margin-bottom:1rem;}
.page ul{margin-left:1.5rem;color:var(--muted);}
.page li{margin-bottom:.7rem;}

/* In-page section jump links */
.service-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:2rem 0;}

/* SERVICE CARDS, homepage and the services hub.
   Hairline border plus a soft shadow reads as current; a 2px black outline
   is what dated these. Base button styling comes from the button block above. */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.8rem;margin-top:2rem;}
.service{border:1px solid var(--border);border-radius:14px;padding:1.8rem;text-align:center;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px rgba(0,0,0,.06);transition:transform .2s,box-shadow .2s;}
.service:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(0,0,0,.06),0 14px 32px rgba(0,0,0,.10);}
.service h3{color:var(--text);margin-bottom:.9rem;font-size:1.1rem;margin-top:0;}
.service p{color:var(--muted);}
.service a{margin-top:1.2rem;padding:.7rem 1.4rem;}
.service img{width:100%;height:180px;object-fit:cover;border-radius:6px;margin-bottom:1rem;}

/* EMBEDDED FORMS (register, contact)
   The Tally embed needs two third-party round trips before anything can paint:
   our inline script fetches embed.js from tally.so, and only then does that
   script set the iframe src. The wrapper is blank for that whole stretch, which
   reads as a broken page. This placeholder fills the gap; preconnect hints in
   each page head shorten it. min-height reserves the space so nothing jumps. */
.form-wrapper{position:relative;min-height:520px;}
/* Sits near the top of the reserved area rather than centred in it, so it
   appears where the form itself will start and the eye does not have to move. */
.form-status{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.9rem;text-align:center;color:var(--muted);padding:2.5rem 1rem 2rem;}
.form-wrapper.loaded .form-status{display:none;}
.form-status p{margin:0;}
.form-spinner{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:form-spin .9s linear infinite;}
@keyframes form-spin{to{transform:rotate(360deg);}}
/* The global reduced-motion rule freezes the spin, leaving a static ring that
   looks like a rendering fault. Hide it; the text carries the meaning. */
@media (prefers-reduced-motion: reduce){.form-spinner{display:none;}}
/* Only surface the direct link once the wait is genuinely unusual. */
.form-fallback{display:none;font-size:.95rem;}
.form-wrapper.slow .form-fallback{display:block;}

/* Alternating image + text rows */
.img-row{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin:2rem 0;}
.img-row img{width:45%;border-radius:12px;height:auto;}
.img-row p{width:55%;}
.img-row.reverse{flex-direction:row-reverse;}

/* Full-width feature image */
.img-large{display:block;max-width:900px;width:100%;height:auto;border-radius:12px;margin:1.5rem auto;}

/* Pull quotes and testimonials */
.quote-box{background:var(--surface-alt);border-left:5px solid var(--accent);padding:1.5rem;margin:2rem 0;font-style:italic;color:var(--muted);border-radius:6px;}
.quote-box em,.quote-box strong{font-style:normal;color:var(--text);}
.quote-box em{display:block;text-align:right;margin-top:0.8rem;font-weight:600;}

/* Accordion. Native <details>/<summary>: keyboard and screen-reader
   support come free, and it needs no JavaScript at all. */
.collapsible{background:var(--surface-alt);border:1px solid var(--border);border-radius:8px;margin-top:1rem;overflow:hidden;}
.collapsible summary{padding:1rem 3rem 1rem 1rem;cursor:pointer;font-weight:600;position:relative;list-style:none;}
.collapsible summary::-webkit-details-marker{display:none;}
.collapsible summary::after{content:'+';position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);font-size:1.4rem;font-weight:700;}
.collapsible[open] summary::after{content:'−';}
.collapsible ul{margin:0 1rem 1rem 2.5rem;}

/* SCROLL TO TOP */
#scrollTopBtn{position:fixed;bottom:2rem;right:2rem;background:var(--btn);color:var(--btn-text);border:1px solid var(--border);width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:99;}
#scrollTopBtn.show{opacity:.9;visibility:visible;}
#scrollTopBtn:hover{background:var(--btn-hover);}

/* HEADER */
header{background:var(--bg);padding:0.8rem 1rem;position:relative;z-index:10;}
.header-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;}
.logo img{height:52px;display:block;}
/* align-items:center is load-bearing. A flex container defaults to `stretch`,
   which makes the plain text links stretch to the height of the taller Register
   button and pins their text to the top of that stretched box. */
nav{display:flex;gap:1.6rem;align-items:center;}
nav a{color:var(--text);text-decoration:none;font-weight:600;transition:opacity .2s;}
nav a:hover{opacity:.6;}
/* Register is the conversion action, so it reads as a button rather than
   competing as one of five equal-weight links. */
nav a.nav-cta{background:var(--accent);color:#fff;padding:.5rem 1.1rem;border-radius:8px;}
nav a.nav-cta:hover{background:var(--accent-hover);opacity:1;}
.mobile-nav a.nav-cta{display:inline-block;background:var(--accent);color:#fff;border-radius:8px;padding:.6rem 1.4rem;margin:.4rem auto;width:fit-content;}

/* HAMBURGER
   A real <button>, so it is focusable and works with Enter/Space for free. */
.hamburger{display:none;flex-direction:column;justify-content:space-between;width:22px;height:16px;cursor:pointer;background:none;border:0;padding:0;}
.hamburger span{display:block;height:2px;width:100%;background:var(--text);border-radius:3px;transition:all .3s ease;}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{display:none;flex-direction:column;background:var(--surface);position:absolute;top:100%;left:0;width:100%;border-top:1px solid var(--border);padding:1rem 0;text-align:center;opacity:0;transform:translateY(-10px);transition:opacity .25s,transform .25s;}
.mobile-nav.show{display:flex;opacity:1;transform:translateY(0);}
.mobile-nav a{color:var(--text);text-decoration:none;font-weight:600;padding:.7rem 0;display:block;}

/* FOOTER */
footer{background:var(--footer-bg);color:var(--footer-text);padding:3.5rem 1rem;margin-top:3rem;}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;max-width:1000px;margin:0 auto 2rem;}
.footer-logo{flex-shrink:0;}
.footer-logo a img{height:85px;display:block;margin-bottom:1.5rem;}
.footer-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:2.3rem;max-width:640px;}
.footer-column h2{font-size:1.2rem;margin-bottom:0.8rem;font-weight:700;}
.footer-column a{display:block;color:var(--footer-text);text-decoration:none;margin:0.3rem 0;transition:opacity 0.2s;}
.footer-column a:hover{opacity:0.7;}
.footer-bottom{text-align:center;font-size:0.9rem;border-top:1px solid var(--footer-rule);padding-top:1.5rem;}
.footer-bottom p{margin:0.3rem 0;}

/* MOBILE */
@media(max-width:900px){
  nav{display:none;}
  .hamburger{display:flex;}
  .logo img{height:36px;}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:2rem;}
  .footer-columns{grid-template-columns:1fr;gap:1.5rem;max-width:100%;}
  .page{margin-top:1.25rem;}
  .img-row,.img-row.reverse{flex-direction:column;}
  .img-row img,.img-row p{width:100%;}
}
