/* main.css - bundled base styles to avoid @import waterfall */

/* design tokens */
/* design-tokens.css
   Global CSS custom properties (design tokens)
   Loaded before main.css in HTML: <link href="design-tokens.css"> then <link href="main.css">

   Notes:
   - Keep tokens limited to values (colors, spacing, sizes, tokens).
   - Motion and component rules belong in motion.css / components/*.css.
   - This file intentionally avoids any component rules; only tokens and theme overrides.
*/

:root {
  /* -----------------------------
     Base colors
     ----------------------------- */
  --primary: #0456e2;
  --primary-700: #0347ba;
  --bg: #f9fafb;
  --surface: #ffffff;
  --text: #122742;
  --muted: #4d6688;
  --success: #0b6020;
  --danger: #911b1b;

  /* -----------------------------
     Page background (lighter, moving, header-matching)
     - Use these tokens to drive the .site (page) background
     ----------------------------- */
  --page-bg: linear-gradient(120deg, #f2f6ff 0%, #e6fbff 45%, #fbfdff 100%);
  --page-bg-solid: #f9fafb;            /* fallback solid */
  --page-bg-duration: 18s;             /* animation duration for page background */
  --page-bg-overlay: rgba(255,255,255,0.55); /* subtle overlay for readability */

  /* Optional: slightly stronger overlay used on very busy pages */
  --page-bg-overlay-strong: rgba(255,255,255,0.72);

  /* -----------------------------
     Header (animated/mixed) — white text
     ----------------------------- */
  --header-bg: linear-gradient(120deg, #153a8a 0%, #1e5bd1 45%, #1d75d8 100%);
  --header-bg-solid: #1e5bd1;          /* solid fallback */
  --header-bg-duration: 10s;           /* header animation duration */
  --header-overlay: rgba(2,12,30,0.22);/* improves white text legibility */
  --header-text: #ffffff;              /* header text color */
  --header-cta: #0bbcd6;               /* header CTA color */
  --header-cta-hover: #08a8be;

  /* -----------------------------
     Borders / shadows
     ----------------------------- */
  --border: #e6e9ef;
  --shadow-1: 0 6px 20px rgba(16,24,40,0.06);

  /* -----------------------------
     Radii
     ----------------------------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* -----------------------------
     Spacing scale
     ----------------------------- */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;

  /* -----------------------------
     Typography
     ----------------------------- */
  --font-sans: "Manrope", "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Sora", "Manrope", "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --type-base: 16px;
  --line-height-tight: 1.25;
  --line-height: 1.5;
  --line-height-loose: 1.7;
  --font-size-50: 0.875rem;
  --font-size-100: 1rem;
  --font-size-200: 1.125rem;
  --font-size-300: 1.25rem;
  --font-size-400: 1.5rem;
  --font-size-500: 1.875rem;
  --font-size-600: 2.25rem;

  /* -----------------------------
     Layout
     ----------------------------- */
  --header-height: 64px;
  --max-width: 1100px;
  --main-max-width: 1400px;

  /* -----------------------------
     Z-index utilities
     ----------------------------- */
  --z-dropdown: 60;
  --z-header: 50;

  /* -----------------------------
     Semantic tokens
     ----------------------------- */
  --btn-bg: var(--primary);
  --primary-color: var(--primary);
  --color-primary: var(--primary);
  --btn-text: #ffffff;
  --btn-bg-hover: var(--primary-700);
  --btn-radius-sm: 8px;
  --btn-radius-md: 10px;
  --btn-height-sm: 36px;
  --btn-height-md: 42px;
  --btn-height-lg: 48px;
  --btn-pad-x-sm: 0.625rem;
  --btn-pad-x-md: 0.875rem;
  --btn-pad-x-lg: 1rem;
  --control-radius: var(--radius-md);
  --control-height-sm: 36px;
  --control-height-md: 42px;
  --control-height-lg: 48px;
  --control-pad-x: 0.75rem;
  --link: var(--primary);
  --focus-ring: rgba(11,92,255,0.24);
  --focus-ring-width: 3px;

  /* -----------------------------
     Accessibility helpers (tokens only)
     ----------------------------- */
  --reduced-motion-pref: 0; /* 0 = animations allowed; 1 = prefer-reduced-motion fallback — read by JS if needed */
}

/* =========================================
   Dark theme override (semantic & visual)
   Use body.theme-dark on the <body> to opt-in
   ========================================= */
body.theme-dark {
  --bg: #001028;
  --surface: #021126;
  --text: #f3f7ff;
  --muted: rgba(255,255,255,0.7);
  --border: rgba(255,255,255,0.04);

  /* deeper, cooler animated header */
  --header-bg: linear-gradient(120deg, #0f2f72 0%, #1a4eaf 45%, #1a66bf 100%);
  --header-bg-solid: #1a4eaf;
  --header-overlay: rgba(0,0,0,0.24);
  --header-text: #f3f7ff;
  --header-cta: #0bbcd6;
  --header-cta-hover: #08a8be;

  /* dark page background (muted, subtle motion) */
  --page-bg: linear-gradient(120deg, #021226 0%, #03344b 45%, #063a4a 100%);
  --page-bg-solid: #001028;
  --page-bg-overlay: rgba(0,0,0,0.18);
}

@media (min-width: 1200px) {
  :root {
    --main-max-width: 1520px;
  }
}

/* =========================================
   Notes / recommended usage
   - Keep this file purely tokens. Motion keyframes and component styles live in motion.css
   - Ensure design-tokens.css is loaded BEFORE main.css (so main.css can use the tokens)
   - To test quickly, add the debug class `.site.debug-bg-test` to your page wrapper
     and use the test rule in motion.css as described in documentation.
   ========================================= */


/* base */
/* base.css - resets, global rules, container */

/* box-sizing */
*, *::before, *::after { box-sizing: border-box; }

/* base html/body */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans, "Manrope", "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif);
  background-color: var(--bg);
  color: var(--text);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* media elements */
img, svg, video { max-width: 100%; height: auto; display: block; }

/* make images and picture elements easier to size */
.picture, picture, .logo { display: inline-block; }

/* links */
a { color: var(--primary); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; outline: none; }

/* container */
.container { max-width: var(--max-width); margin: 0 auto; padding: var(--space-md); }

/* -----------------------
   Global heading scale
   ----------------------- */
h1, h2, h3 {
  margin: 0 0 0.55em;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: var(--line-height-tight, 1.25);
  letter-spacing: -0.02em;
  color: var(--text);
}

h1 { font-size: clamp(1.65rem, 2.5vw, 2.2rem); }
h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }

/* Keep Bootstrap heading utility classes aligned with semantic headings */
.site-main .h1 { font-size: clamp(1.65rem, 2.5vw, 2.2rem); font-weight: 700; line-height: var(--line-height-tight, 1.25); }
.site-main .h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 700; line-height: var(--line-height-tight, 1.25); }
.site-main .h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 700; line-height: var(--line-height-tight, 1.25); }
.site-main .h1 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; }
.site-main .h2 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; }
.site-main .h3 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.015em; }

/* Shared premium surfaces across pages */
.site-main :where(.card, .panel, .surface-card) {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, #d5deeb);
  box-shadow: 0 10px 24px rgba(10, 28, 58, 0.08);
}

.site-main :where(input, select, textarea) {
  border-radius: 10px;
}

/* skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: 8px 16px;
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top 0.25s ease;
}
.skip-link:focus { top: 0; }

/* focus / keyboard visuals */
:focus { outline: none; }
a:focus, button:focus, input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: var(--radius-sm);
}


/* layout */
/* layout.css - site-level layout & page structure
   Default behavior: header / main / footer are full-bleed (edge-to-edge).
   Use .inner (or .container--constrained) inside those elements to constrain content.
*/

/* ---- Site root helpers ---- */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  /* Page-level background */
  background: var(--page-bg, var(--page-bg-solid, var(--bg)));
  background-size: 300% 300%;
  animation: pageBgMove var(--page-bg-duration, 40s) ease infinite;

  color: var(--text);
  position: relative;

  /* 🔑 Prevents overlay + animation compositing bugs */
  isolation: isolate;
  will-change: background-position;
}

/* ---- Safe background overlay layer ----
   IMPORTANT:
   - Must NOT use negative z-index
   - Must NOT sit in same paint layer as content
*/
.site::before {
  content: "";
  position: absolute;
  inset: 0;

  /* Controlled via token */
  background: var(--page-bg-overlay, transparent);

  pointer-events: none;

  /* Layer order:
     background < overlay < content */
  z-index: 0;
}

/* Ensure ALL site content paints above overlay */
.site > * {
  position: relative;
  z-index: 1;
}

/* ---- Main area grows to take available space ---- */
.site-main {
  flex: 1 0 auto;
  width: 100%;

  /* Safety: content-heavy pages never blend with overlay */
  background: transparent;
}

.site-main > .inner {
  max-width: var(--main-max-width, var(--max-width));
}

/* Force top-level page wrappers to use full available main width */
.site-main > .inner > :where(main, section, article, div, form) {
  width: 100%;
  max-width: 100% !important;
  margin-left: 0;
  margin-right: 0;
}

/* Deep page-level width normalization across all public pages */
.site-main :is(
  .profile-container,
  .contact-page,
  .payouts-page,
  .invoices-page,
  .home-container,
  .resources-shell,
  .reviews-page,
  .fa-container,
  .bt-container,
  .signup-wrap,
  .auth-shell,
  .tutor-profile-page,
  .tp-availability-standalone.container,
  #create-booking
) {
  width: 100% !important;
  max-width: var(--main-max-width, var(--max-width)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.site-main .prices-section .container {
  max-width: var(--main-max-width, var(--max-width)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- Container / inner content helpers ---- */
.container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.container--constrained,
.inner {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  width: 100%;
}

.container--fluid {
  width: 100%;
  max-width: none;
  margin: 0 10px;
  padding: 0;
}

/* ---- Page & section spacing helpers ---- */
.page {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  width: 100%;
}

.page-header {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) 0;
}

.page-title {
  margin: 0 0 var(--space-xs) 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

/* ---- Grid / column helpers ---- */
.row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.col {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- Content + sidebar ---- */
.content-sidebar {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}

.content-sidebar .content {
  flex: 1 1 640px;
  min-width: 280px;
}

.content-sidebar .sidebar {
  flex: 0 0 280px;
  max-width: 320px;
}

/* ---- Two column utility ---- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ---- Sections ---- */
.section--fluid {
  width: 100%;
  background: transparent;
}

.section {
  padding: var(--space-lg) 0;
  width: 100%;
}

.section--sm { padding: var(--space-md) 0; }
.section--lg { padding: calc(var(--space-lg) * 1.5) 0; }

/* ---- Hero ---- */
.hero {
  padding: var(--space-lg) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%;
}

.hero .hero-inner {
  width: 100%;
  max-width: var(--max-width);
}

/* ---- Header ---- */
.site-header,
.header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
  min-height: var(--header-height);
  background: transparent;
}

/* Constrained inner */
.site-header .inner,
.header .inner,
.site-footer .inner,
.footer .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  flex-wrap: wrap;
}

/* ---- Footer ---- */
.site-footer,
.footer {
  width: 100%;
  background: var(--surface);
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding: 2rem 0;
}

/* ---- Sticky footer helper ---- */
.site--sticky-footer {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site--sticky-footer > main { flex: 1 0 auto; }
.site--sticky-footer > footer { flex-shrink: 0; }

/* ---- Logo sizing ---- */
.logo,
.logo--full {
  display: block;
  width: auto;
  height: auto;
  max-height: 150px;
}

@media (min-width: 1200px) {
  .logo, .logo--full { max-height: 100px; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .logo, .logo--full { max-height: 80px; }
}

@media (max-width: 900px) {
  .logo, .logo--full { max-height: 56px; }
}

@media (max-width: 360px) {
  .logo, .logo--full { max-height: 52px; }
}

/* ---- Small screens ---- */
@media (max-width: 768px) {
  .content-sidebar {
    flex-direction: column;
  }

  .content-sidebar .sidebar {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .site-header .inner,
  .site-footer .inner {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

/* ---- Utility ---- */
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width);
  padding: 0 var(--space-md);
}


/* foundation */
/* components/foundation.css
   Shared visual baseline for typography and standard UI primitives.
*/

html {
  font-size: var(--type-base);
}

body {
  font-size: var(--font-size-100);
  line-height: var(--line-height);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-sm) 0;
  font-family: var(--font-heading);
  line-height: var(--line-height-tight);
  color: var(--text);
}

h1 { font-size: var(--font-size-600); }
h2 { font-size: var(--font-size-500); }
h3 { font-size: var(--font-size-400); }
h4 { font-size: var(--font-size-300); }
h5 { font-size: var(--font-size-200); }
h6 { font-size: var(--font-size-100); }

p,
ul,
ol {
  margin: 0 0 var(--space-md) 0;
}

small,
.text-small {
  font-size: var(--font-size-50);
}

.text-muted {
  color: var(--muted);
}

.ui-page-title {
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-500);
  line-height: var(--line-height-tight);
}

.ui-page-subtitle {
  margin-bottom: var(--space-lg);
  color: var(--muted);
  font-size: var(--font-size-100);
}

.ui-stack-xs > * + * { margin-top: var(--space-xs); }
.ui-stack-sm > * + * { margin-top: var(--space-sm); }
.ui-stack-md > * + * { margin-top: var(--space-md); }
.ui-stack-lg > * + * { margin-top: var(--space-lg); }

.ui-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--space-lg);
}

.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.ui-control {
  min-height: var(--control-height-md);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  padding: 0 var(--control-pad-x);
  background: var(--surface);
  color: var(--text);
}

.ui-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}


/* button */
/* static/css/components/button.css
   Centralised button styles for the whole site
*/

:root {
  --btn-radius: 12px;
  --btn-padding: 10px 16px;
  --btn-font-size: 1rem;
  --btn-primary-bg: var(--primary-color, #0456e2);
  --btn-primary-hover: #0347ba;
  --btn-shadow: 0 10px 22px rgba(4, 86, 226, 0.18);
  --btn-outline-border: 1.5px;
  --btn-outline-color: var(--primary-color, #0456e2);
}

/* Generic helper class used in some places */
.button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  border: 0;
  cursor: pointer;
  font-size: var(--btn-font-size);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.18s ease, color 0.18s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Primary filled button */
.button.primary,
.btn-primary {
  background: var(--btn-primary-bg);
  color: #fff;
  box-shadow: var(--btn-shadow);
}
.button.primary:hover,
.btn-primary:hover {
  background: var(--btn-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(4, 86, 226, 0.24);
}
.button.primary:active,
.btn-primary:active { transform: translateY(0); }

/* Outline / secondary */
.button.secondary,
.btn-outline,
.button.outline {
  background: transparent;
  border: var(--btn-outline-border) solid var(--btn-outline-color);
  color: var(--btn-outline-color);
}
.button.secondary:hover,
.btn-outline:hover,
.button.outline:hover {
  background: color-mix(in srgb, var(--btn-outline-color) 10%, #ffffff);
  color: var(--btn-outline-color);
  box-shadow: 0 8px 18px rgba(4, 86, 226, 0.14);
  transform: translateY(-1px);
}

/* Small / large variations */
.btn-lg { padding: 12px 18px; font-size: 1.05rem; border-radius: 14px; }
.btn-sm, .button.sm { padding: 7px 11px; font-size: 0.9rem; border-radius: 10px; }

/* Link-style (no heavy styling) */
.btn-link,
.button.link {
  background: transparent;
  border: 0;
  color: var(--btn-primary-bg);
  text-decoration: none;
  font-weight: 600;
  padding: 0;
}
.btn-link:hover, .button.link:hover { text-decoration: underline; color: var(--btn-primary-hover); }

/* Accessibility focus */
.button:focus-visible, .btn:focus-visible {
  outline: 3px solid rgba(11,93,215,0.16);
  outline-offset: 2px;
}

/* Defensive: ensure high specificity for any overrides if needed */


/* flash */
/* components/flash.css — unified flash/alert styles */

/* Base wrapper (covers both .flash and .alert) */
.flash,
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
}

/* Success */
.flash.success,
.flash-success,
.alert.success,
.alert-success,
.alert.alert-success {
  background: #e6f9ed;
  color: var(--success);
  border: 1px solid #9ce3b7;
}

/* Danger / Error */
.flash.error,
.flash-error,
.alert.error,
.alert-error,
.alert.alert-danger,
.alert-danger {
  background: #fde8e8;
  color: var(--danger);
  border: 1px solid #f5bcbc;
}

/* Info */
.flash.info,
.flash-info,
.alert.info,
.alert-info {
  background: #e8f0fe;
  color: var(--primary-700);
  border: 1px solid #a6c0ff;
}

/* Close button spacing (for .alert-dismissible) */
.alert .btn-close { margin-left: .75rem; }


/* components/flash.css — unified flash/alert styles */

/* Base wrapper (covers both .flash and .alert) */
.flash,
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm, 6px);
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.25;
}

.flash-container {
  max-width: var(--max-width, 1100px);
  margin: 0.65rem auto 0;
  padding: 0 1rem;
  display: grid;
  gap: 0.55rem;
}

.flash-container .flash {
  width: min(760px, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* Success */
.flash.success,
.flash-success,
.flash-success,    /* redundant but explicit */
.alert.success,
.alert-success,
.alert.alert-success {
  background: #e6f9ed;
  color: var(--success, #1b5e20);
  border: 1px solid #9ce3b7;
}

/* Danger / Error (supports multiple class name styles) */
.flash.error,
.flash-error,
.flash-danger,         /* new: handles class="flash flash-danger" */
.flash.danger,         /* new: handles class="flash danger" */
.alert.error,
.alert-error,
.alert.alert-danger,
.alert-danger {
  background: #fde8e8;
  color: var(--danger, #8a1f2a);
  border: 1px solid #f5bcbc;
}

/* Warning */
.flash.warning,
.flash-warning,
.alert.warning,
.alert-warning {
  background: #fff4e5;
  color: var(--warning, #7a4f00);
  border: 1px solid #ffe2b3;
}

/* Info */
.flash.info,
.flash-info,
.flash-info,         /* explicit */
.alert.info,
.alert-info {
  background: #e8f0fe;
  color: var(--primary-700, #0b5cff);
  border: 1px solid #a6c0ff;
}

/* Small utilities */
.alert .btn-close { margin-left: .75rem; }

.flash.fade-out,
.alert.fade-out {
  opacity: 0;
  transition: opacity 0.6s ease;
}


/* Ensure Bootstrap-style form error text appears red */
.form-text.text-danger {
    color: #dc3545 !important; /* Bootstrap danger red */
    font-size: 0.875rem;
}



/* header */
/* components/header.css
   Header and navigation layout styles
   Rely on tokens in design-tokens.css (loaded before main.css)

   Changes in this iteration:
   - Header text and nav links use white (overrides tokens locally for header scope)
   - Header gradient animation enabled by default (moving, mixed color) — still respects reduced-motion
   - Keeps overlay pseudo-element for legibility
   - Keeps token-driven colors for dropdowns and other elements
*/

/* Base header: positioned so absolute children (dropdowns) align correctly
   and ensure it sits above other content (so dropdowns are not covered). */
.site-header,
.header {
  position: relative;
  z-index: var(--z-header);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(var(--space-sm)) 0;
  border-bottom: 1px solid var(--border);
  min-height: var(--header-height);
  padding-left: 20px;
  padding-right: 20px;
  background: var(--header-bg, transparent);
  -webkit-font-smoothing: antialiased;
  /* header-specific color scope: white text for improved contrast on colorful backgrounds */
  color: var(--header-text, #ffffff);
}

/* Animated movement enabled by default for a mixed, moving header background.
   Keep this in the header component so it's easy to opt-out by removing the token
   or overriding the animation if needed. */
.site-header {
  background: var(--header-bg, var(--header-bg-solid));
  background-size: 420% 420%;                /* stronger visible movement */
  animation: headerGradientMove var(--header-bg-duration, 10s) cubic-bezier(.42, 0, .2, 1) infinite;
}

/* overlay for improving legibility of header content */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--header-overlay, rgba(0,0,0,0.14));
  animation: headerOverlayPulse 4.6s ease-in-out infinite;
  pointer-events: none;
  z-index: calc(var(--z-header) - 1);
}

/* .inner: allow full-bleed layout while keeping internal control */
.site-header .inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Container for left area: logo + nav */
.header-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1 1 auto;
  margin-left: 0;
}

/* Brand / logo */
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 20px;
}
.brand-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit; /* inherits header's white color */
}

/* Logo sizing: prefer responsive caps with sensible max-heights */
.logo {
  margin-left: 10px;
  display: block;
  height: auto;
  max-height: 96px;
  width: auto;
}
.logo--full { display: block; }
.logo--mark { display: none; width: auto; height: 40px; }

/* Navigation */
.main-nav, nav.main-nav { display: flex; gap: 1.25rem; align-items: center; }
.nav-list, .main-nav ul {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.nav-link {
  /* make nav text white by default (inherits header color) */
  color: inherit;
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
  transition: color 160ms ease, opacity 120ms ease;
  text-decoration: none;
}

/* Hover: switch to header CTA (contrasting color) so links remain discoverable */
.nav-link:hover,
.nav-link:focus,
.nav-link:focus-visible {
  color: var(--header-cta, var(--primary));
  outline: none;
}

/* Active underline / indicator */
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 3px;
  width: 100%;
  border-radius: 2px;
  background: var(--header-cta, var(--primary));
}

/* Auth area (right-hand side) */
.auth-area,
.user-area {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 1rem;
  margin-right: 20px;
  position: relative; /* anchor for dropdowns */
  z-index: calc(var(--z-dropdown) + 10);      /* sits above header content */
}

/* Grouping for auth buttons */
.auth-buttons { display: flex; gap: 0.5rem; align-items: center; margin-right: 20px; }

/* Menu containers */
.user-menu, .auth-dropdown { position: relative; display: inline-flex; align-items: center; }

/* Message count badge */
.msg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 700;
}

.msg-badge--danger {
  background: #dc3545;
}

/* Unread conversations highlight */
.list-group-item.unread {
  background: rgba(11, 92, 255, 0.12);
  border-left: 4px solid rgba(11, 92, 255, 0.65);
}
.list-group-item.unread .fw-semibold {
  font-weight: 700;
}

.attachment-count {
  color: #dc3545;
  font-weight: 700;
}

.missing-field {
  color: #dc3545;
  font-weight: 700;
}

.missing-row {
  background: rgba(220, 53, 69, 0.08);
  border-left: 3px solid rgba(220, 53, 69, 0.6);
  padding-left: 6px;
}

/* Buttons (toggles) */
.user-btn, .button.secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
  color: inherit; /* keep toggles white */
}

/* Guarantee toggle is keyboard focus visible (use :focus-visible where supported) */
.user-btn:focus-visible, .button.secondary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--header-cta, var(--primary)) 18%, transparent);
  outline-offset: 2px;
}

/* Avatar — normal header avatar size (tight, consistent) */
.avatar {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--btn-bg, var(--primary));
  color: var(--btn-text, #fff);
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
}

/* Constrain header avatar images specifically — used in header only */
.header-avatar, .avatar-img {
  width: 60px;
  height: 60px;
  max-width: 60px;
  max-height: 60px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-1);
  display: block;
  flex-shrink: 0;
}

/* Fallback larger avatar styles (for other contexts) */
.avatar-placeholder {
  width: 70px;
  max-width: 22vw;
  max-height: 100px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-1);
  display: block;
  flex-shrink: 0;
}

/* DROPDOWN: positioned popover with improved stacking and animation handling */
.user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(16,24,40,0.08);
  border-radius: 10px;
  padding: 6px 0;
  display: none;                  /* default hidden — JS toggles classes/aria */
  opacity: 0;
  transform: translateY(-6px);
  transform-origin: top right;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: var(--z-dropdown);                  /* above most header pieces */
  pointer-events: none;           /* disabled while hidden to avoid accidental hover */
  will-change: transform, opacity;
  overflow: hidden;
  max-height: 60vh;               /* avoid overflowing viewport */
}

/* Ensure header dropdowns (including Account) are positioned as overlays */
.site-header .auth-dropdown .dropdown,
.site-header .user-menu .dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(16,24,40,0.08);
  border-radius: 10px;
  padding: 6px 0;
  display: none;                  /* hidden by default */
  opacity: 0;
  transform: translateY(-6px);
  transform-origin: top right;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: var(--z-dropdown);
  pointer-events: none;
  will-change: transform, opacity;
  overflow: hidden;
  max-height: 60vh;
}

/* Visible state for header dropdowns */
.site-header .auth-dropdown .dropdown.open,
.site-header .auth-dropdown .dropdown[aria-hidden="false"],
.site-header .user-menu .dropdown.open,
.site-header .user-menu .dropdown[aria-hidden="false"] {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* When visible, enable interaction and show fully */
.user-dropdown.open,
.dropdown[aria-hidden="false"] {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* If you want the anonymous auth dropdown to align slightly differently, keep right:0 */
.auth-dropdown .dropdown { right: 0; }

/* Menu content scrolling and visual spacing */
.dropdown > .dropdown-section,
.dropdown > a,
.dropdown form,
.dropdown > .dropdown-item { box-sizing: border-box; }

/* Limit inner scroll area if menu grows */
.dropdown-inner { max-height: calc(60vh - 40px); overflow: auto; -webkit-overflow-scrolling: touch; }

/* Dropdown items / buttons */
.dropdown .dropdown-item,
.dropdown form .dropdown-item,
.dropdown .link-button {
  display: block;
  padding: 8px 12px;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 0.95rem;
}

/* Hover / focus states */
.dropdown .dropdown-item:hover,
.dropdown .link-button:hover,
.dropdown .dropdown-item:focus,
.dropdown .link-button:focus {
  background: rgba(11,92,255,0.04);
  outline: none;
}

/* Divider */
.dropdown-divider {
  height: 1px;
  margin: 6px 8px;
  background: var(--border);
  border-radius: 1px;
}

/* Make menu items keyboard-focusable when they are anchors */
.dropdown a[role="menuitem"] { display: block; }

/* Mobile toggle (hamburger) */
.mobile-toggle {
  display: none;
  margin-left: 8px;
  color: white;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  z-index: calc(var(--z-dropdown) + 10);
}
.mobile-toggle svg { display: block; width: 22px; height: 22px; }

/* Mobile menu (hidden on desktop) */
.mobile-menu {
  display: none;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(16,24,40,0.04);
  z-index: calc(var(--z-header) - 1);
}
.mobile-menu ul { list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 0.5rem; }
.mobile-menu a { display: block; padding: 10px 8px; border-radius: 6px; color: var(--text); }
.mobile-menu a:hover { background: #f5f7ff; }

/* Mobile submenu */
.mobile-submenu { display: none; list-style: none; margin: 6px 0 0 8px; padding: 0; flex-direction: column; gap: 0.25rem; }
.mobile-submenu li a { padding: 8px 6px; border-radius: 6px; display: block; }
.mobile-submenu.is-open,
.mobile-submenu[aria-hidden="false"] { display: block; }

/* Visible mobile menu class (set by JS) */
.mobile-menu.is-open { display: block; animation: slideDown 200ms ease both; }

/* Slide down animation */
@keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Strong mobile collapse override - put at the very end of the file ===== */
@media (max-width: 1157px) {
  /* Hide desktop nav and auth area */
  header.site-header .main-nav,
  header.site-header .main-nav .nav-list,
  header.site-header .auth-area,
  .main-nav,
  .nav-list,
  .auth-area,
  .user-area { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }

  /* Ensure the hamburger is visible */
  .mobile-toggle { display: inline-flex !important; }
}

/* When mobile menu open, force-hide leftover header parts */
body.menu-open .main-nav,
body.menu-open .auth-area,
body.menu-open .nav-list { display: none !important; visibility: hidden !important; }

/* Center logo on mobile */
@media (max-width: 1157px) {
  .site-header { position: relative; align-items: center; padding-left: 44px; padding-right: 16px; }

  .brand { margin: 0 auto; justify-content: center; width: auto; }

  .logo, .logo--full { max-height: 76px; width: auto; height: auto; }

  .mobile-toggle { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: calc(var(--z-dropdown) + 10); display: inline-flex !important; }

  .main-nav, .nav-list, .auth-area, .user-area { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }
}

/* Anonymous mobile header: keep both Account dropdown and hamburger visible */
@media (max-width: 1157px) {
  /* Show right-side auth/user dropdown on mobile for all users */
  .site-header .auth-area {
    display: inline-flex !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: calc(var(--z-dropdown) + 10);
  }

  /* Compact authenticated trigger on mobile */
  .site-header .user-btn {
    padding: 4px 6px;
    border-radius: 7px;
    gap: 0.3rem;
  }

  .site-header .user-btn .greeting {
    display: none;
  }

  .site-header .header-avatar,
  .site-header .avatar-img,
  .site-header .avatar {
    width: 34px;
    height: 34px;
    max-width: 34px;
    max-height: 34px;
  }

  .site-header .avatar {
    font-size: 0.82rem;
  }

  .site-header .user-menu .dropdown,
  .site-header .auth-dropdown .dropdown {
    min-width: 200px;
    max-width: min(82vw, 230px);
  }

  .site-header.site-header--anon {
    padding-left: 16px;
    padding-right: 16px;
  }

  .site-header.site-header--anon .brand { margin: 0 auto; justify-content: center; width: auto; }

  .site-header.site-header--anon .auth-area.auth-area--guest {
    display: inline-flex !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: calc(var(--z-dropdown) + 10);
  }

  /* Keep hamburger visible for anonymous users too */
  .site-header.site-header--anon .mobile-toggle {
    display: inline-flex !important;
  }

  /* Smaller account trigger for mobile */
  .site-header.site-header--anon #account-menu-toggle {
    padding: 4px 6px;
    border-radius: 7px;
    font-size: 0.84rem;
    gap: 0.25rem;
  }

  /* Compact account menu content on mobile */
  .site-header.site-header--anon .auth-dropdown--combined .dropdown {
    min-width: 200px;
    max-width: min(82vw, 230px);
    right: 0;
    padding: 6px;
  }

  .site-header.site-header--anon .auth-dropdown--combined .dropdown-section {
    padding: 2px 5px;
  }

  .site-header.site-header--anon .auth-dropdown--combined .dropdown-section-title {
    font-size: 0.72rem;
    margin: 4px 6px;
  }

  .site-header.site-header--anon .auth-dropdown--combined .dropdown .dropdown-item {
    font-size: 0.83rem;
    padding: 6px 8px;
    line-height: 1.25;
    white-space: normal;
  }
}

/* Very small phones adjustments */
@media (max-width: 360px) {
  .logo, .logo--full { max-height: 52px; }
  .mobile-toggle { left: 8px; }
  .site-header { padding-left: 40px; }
}

/* Mobile submenu distinct backgrounds */
@media (max-width: 1157px) {
  .mobile-submenu { margin: 6px 0 0 8px; padding: 6px; border-radius: 8px; }

  .mobile-submenu--student { background-color: #f0f8ff; border: 1px solid rgba(16,24,40,0.04); }
  .mobile-submenu--student li a { color: var(--text); display:block; padding:8px 6px; border-radius:6px; }
  .mobile-submenu--student li a:hover { background-color: rgba(0,100,200,0.06); }

  .mobile-submenu--tutor { background-color: #fff7ed; border: 1px solid rgba(16,24,40,0.04); }
  .mobile-submenu--tutor li a { color: var(--text); display:block; padding:8px 6px; border-radius:6px; }
  .mobile-submenu--tutor li a:hover { background-color: rgba(255,140,0,0.06); }

  .mobile-submenu.is-open,
  .mobile-submenu[aria-hidden="false"] { display: block; }
}

/* Profile warning banner */
.profile-warning-banner { background: #fff4e5; border-bottom: 1px solid #ffd8a8; font-size: 0.95rem; }

.profile-warning-banner .inner { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 1rem; }

.profile-warning-banner strong { white-space: nowrap; }

.profile-warning-banner .warning-list { margin: 0; padding-left: 1rem; }

.profile-warning-banner a { margin-left: 0.5rem; font-weight: 600; }

/* Combined account dropdown styles */
.auth-dropdown--combined .dropdown { min-width: 240px; padding: 8px; }
.auth-dropdown--combined .dropdown-section { padding: 4px 8px; }
.auth-dropdown--combined .dropdown-section-title { font-size: 0.78rem; font-weight: 700; color: var(--muted, #475569); margin: 6px 8px; padding: 2px 0; letter-spacing: 0.01em; }
.auth-dropdown--combined .dropdown-divider { height: 1px; margin: 6px 8px; background: var(--border); border-radius: 1px; }

/* Account chevron spacing */
#account-menu-toggle .chev { margin-left: 6px; font-size: 0.9em; line-height: 1; opacity: 0.85; }

/* Accessibility helpers */
[role="menu"] { outline: none; }
[role="menuitem"]:focus { outline: none; }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .dropdown,
  .mobile-menu.is-open,
  .mobile-menu,
  .nav-link,
  .site-header.animate { transition: none !important; animation: none !important; }
}


/* footer */
/* components/footer.css
   Works with .site flex layout for proper sticky footer behavior
*/

/* Base footer wrapper */
.site-footer,
.footer {
  width: 100%;
  background: var(--surface);
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  text-align: center;

  /* CRITICAL: use min-height, never height */
  min-height: 100px;

  /* required so padding does not inflate height */
  box-sizing: border-box;

  /* prevent flexbox from shrinking it */
  flex-shrink: 0;
}

/* Inner layout */
.site-footer .footer-inner,
.footer .footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 0 var(--space-md);
  box-sizing: border-box;
}

/* Top section */
.footer-top {
  font-weight: 700;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.2;
}

/* Bottom section */
.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-bottom a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.footer-bottom a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* Optional footer info blocks */
.footer-info p {
  color: red;
  margin: 0;
}

/* Dark variant */
.footer--dark {
  background: var(--surface-dark, #021126);
  color: var(--text-dark, #f3f7ff);
  border-top-color: rgba(255, 255, 255, 0.04);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .site-footer,
  .footer {
    min-height: 110px;
    padding: 1.25rem 0;
  }

  .site-footer .footer-inner,
  .footer .footer-inner {
    gap: 0.75rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
  }
}


/* utilities */
/* utilities.css - small helpers */

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* legacy alias used in some templates */
.sr-only {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* width / spacing helpers */
.mw-460 { max-width: 460px; }
.mw-600 { max-width: 600px; }
.mw-640 { max-width: 640px; }
.mw-700 { max-width: 700px; }
.mw-800 { max-width: 800px; }
.mt-6 { margin-top: 6px; }
.mt-12 { margin-top: 12px; }

/* small link-button used in dropdowns/forms */
.link-button {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* touch target helper */
.nav-link, .mobile-toggle, .user-btn, .button { touch-action: manipulation; }


/* motion */
/* motion.css
   Motion keyframes and minimal motion-related utility rules.
   Keep component animation rules light here and prefer tokens from design-tokens.css.

   This file expects design-tokens.css to be loaded first so it can use
   --header-bg-duration and --page-bg-duration tokens.
*/

/* ---------- Header gradient movement ----------
   Use the token --header-bg-duration to control speed from design-tokens.css
   Apply by adding the .animate class to the header element (header.site-header)
*/
@keyframes headerGradientMove {
  0%   { background-position: 0% 42%; }
  25%  { background-position: 100% 58%; }
  50%  { background-position: 82% 0%; }
  75%  { background-position: 18% 100%; }
  100% { background-position: 0% 42%; }
}

@keyframes headerOverlayPulse {
  0%   { opacity: 0.9; }
  50%  { opacity: 0.58; }
  100% { opacity: 0.9; }
}

@keyframes logoRollUpOnce {
  0% {
    transform: scaleY(1);
    opacity: 1;
  }
  12% {
    transform: scaleY(0);
    opacity: 0;
  }
  84% {
    transform: scaleY(0);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes logoRollLeftOnce {
  0% {
    transform: scaleX(1);
    opacity: 1;
  }
  12% {
    transform: scaleX(0);
    opacity: 0;
  }
  84% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* Default header animation helper. Keep this class small so components may toggle it. */
.site-header.animate {
  background-size: 420% 420%;
  animation: headerGradientMove var(--header-bg-duration, 10s) cubic-bezier(.42, 0, .2, 1) infinite;
}

/* ---------- Page / site background movement ----------
   Use the token --page-bg-duration to control speed from design-tokens.css
   The .site element is expected to use var(--page-bg) from design-tokens.css
*/
@keyframes pageBgMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Default site animation helper */
.site.animate {
  background-size: 300% 300%;
  animation: pageBgMove var(--page-bg-duration, 40s) ease infinite;
}

.site-header .logo--full {
  will-change: transform, opacity;
}

.site-header .logo--full.logo-roll-up {
  transform-origin: top center;
  animation: logoRollUpOnce 2.8s cubic-bezier(.4, 0, .2, 1) 1;
}

.site-header .logo--full.logo-roll-left {
  transform-origin: left center;
  animation: logoRollLeftOnce 2.8s cubic-bezier(.4, 0, .2, 1) 1;
}

/* ---------- Debug / quick-test helpers ----------
   Use .debug-bg-test on the same element as .site to force a faster, obvious animation
   while debugging. Remove it in production.
*/
.site.debug-bg-test {
  animation: pageBgMove 6s linear infinite !important;
  background-size: 600% 100% !important;
}

/* ---------- Reduced-motion accessibility ----------
   Respect user OS/browser setting. When reduced-motion is requested we remove
   non-essential animations and fallback to static backgrounds.
*/
@media (prefers-reduced-motion: reduce) {
  /* Disable header & page moving backgrounds */
  .site-header.animate,
  .site.animate,
  .site.debug-bg-test {
    animation: none !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Also disable CSS transitions that are not crucial for functionality */
  * {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }
}

/* ---------- Notes ----------
 - Keep this file focused on keyframes and tiny helper classes. Component-specific
   motion timing should be declared within the component CSS files and reference
   tokens where appropriate.
 - If you need to temporarily test animation on pages where .site isn't present,
   you can place .site.animate on <body> for quick validation.
*/