/* Thuto Tutorials — shared styles. DM Sans is self-hosted (latin, 400/500/700). */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }

/* Accent colours are sampled from the Thuto logo: circle orange, its lighter
   gradient stop and the yellow check. Navy is kept for the footer, the
   "Why Thuto" panel and the sign-up panel only. */
:root {
  --navy: #0A1120;
  --navy-raised: #101A2E;
  --orange: #E68626;        /* logo circle; buttons and accents */
  --orange-hover: #CC7015;
  --orange-light: #F2A951;  /* logo gradient; glows, labels on navy */
  --orange-ink: #A35A14;    /* orange text on light grounds (AA) */
  --yellow: #F2D434;        /* logo check; live dots only */
  --surface: #FFFFFF;
  --surface-warm: #FFF9F2;
  --tint: #FFF6EA;
  --chip: #FFF1DF;
  --badge-bg: #FDEFD9;
  --badge-ink: #8A4B0F;
  --container: #F5F3F6;
  --border: rgba(10, 17, 32, 0.15);
  --text-heading: #0A1120;
  --text-body: #4A5468;
  --text-on-dark: #B9C2D6;
  --error: #B3261E;
  --success: #1E7653;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Scroll reveal: fade-up 16px once, 60ms stagger (set by js/site.js) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .3s ease-out, transform .3s ease-out; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
}

/* Reserve room for inline form errors so the submit button never jumps under the pointer */
form p[id$="-err"] { min-height: 20px; }

/* ---- Base rules shared by every page ---- */
body { margin: 0; background: var(--surface); color: var(--text-body); font-family: "DM Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--orange-ink); }
a:hover { color: var(--text-heading); }

.skip { position: absolute; left: -9999px; top: 12px; z-index: 10; background: var(--navy); color: var(--surface); padding: 12px 16px; border-radius: 8px; }
.skip:focus { left: 16px; }

/* ---- Buttons and links ---- */
.btn { transition: transform .2s ease-out, background-color .2s ease-out, border-color .2s ease-out; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn-primary:hover { background-color: var(--orange-hover) !important; }
.btn-light:hover { border-color: rgba(10, 17, 32, 0.4) !important; }
.arr { display: inline-block; transition: transform .2s ease-out; }
.btn:hover .arr, .tlink:hover .arr { transform: translateX(4px); }
.nl:hover { color: var(--text-heading) !important; background: var(--container); }
.fl:hover { color: var(--surface) !important; }

/* Footer links meet the 44px touch-target minimum */
.fl { min-height: 44px; display: flex; align-items: center; }

/* ---- Header and navigation ---- */
.site-header { background: var(--surface); border-bottom: 1px solid rgba(10, 17, 32, 0.08); }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 14px clamp(16px, 4vw, 32px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.brand img { height: 40px; width: auto; display: block; }
.tagline { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-body); border-left: 1px solid var(--border); padding-left: 14px; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.nl { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--text-body); text-decoration: none; }
.nl[aria-current="page"] { color: var(--text-heading); box-shadow: inset 0 -2px 0 var(--orange); }
.account-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin-left: 8px; padding: 0 18px; border-radius: 12px; background: var(--orange); color: var(--navy); font-size: 15px; font-weight: 500; text-decoration: none; }

/* Focus visibility: --orange-ink is AA on both light grounds and the navy footer */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }

/* ---- Responsive / motion ---- */
@media (max-width: 700px) { .tagline { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover, .btn:active { transform: none; }
}

/* ---- Adaptation: device sizes, input method, safe areas ---- */
html { -webkit-text-size-adjust: 100%; }

/* Keep content clear of notches, rounded corners and the home indicator */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
footer { padding-bottom: env(safe-area-inset-bottom); }

/* Touch has no hover, so hover-only affordances must not stick */
@media (hover: none) {
  .btn:hover { transform: none; }
  .btn:hover .arr, .tlink:hover .arr { transform: none; }
  .nl:hover { background: none; color: var(--text-body) !important; }
  .fl:hover { color: var(--text-on-dark) !important; }
}

/* Coarse pointers get a roomier nav target */
@media (pointer: coarse) {
  .nl { padding: 0 14px; }
}

/* Small phones: tighten the nav and stack the header deliberately */
@media (max-width: 560px) {
  .nl { padding: 0 8px; font-size: 14px; }
  .header-inner { flex-direction: column; align-items: stretch; gap: 6px; }
  .site-nav { justify-content: space-between; gap: 0; }
}

/* Account CTA: labelled on wide screens, a compact account icon on phones */
.account-cta__icon { display: none; }
@media (max-width: 700px) {
  .account-cta__label { display: none; }
  .account-cta__icon { display: block; }
  .account-cta { padding: 0 13px; }
}

/* Contact: the info panel's divider follows the stacking axis */
@media (max-width: 768px) {
  .panel-info { border-left: 0 !important; border-top: 1px solid rgba(230, 134, 38, 0.18); }
}

/* Legal contents list scrolls horizontally instead of stacking above the text */
@media (max-width: 768px) {
  .toc-nav { flex-direction: row !important; align-items: center; overflow-x: auto; max-width: none !important;
    padding: 10px 12px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .toc-nav::-webkit-scrollbar { display: none; }
  .toc-nav h2 { display: none; }
  .toc { white-space: nowrap; }
}