/* The main site's brand (issue #3006): acevoz.com's header and footer,
   and the shared components the redesigned pages (#3005) build on.
   Loaded by templates/base.html after output.css, so it reaches every
   main-site page and nothing on a teacher site or in the hub.

   Values are the acevoz-design skill's tokens, copied from
   static/teachersites/hub-brand.css (.claude/skills/acevoz-design/tokens/),
   not re-derived. Fonts are the self-hosted ones under static/fonts/.

   Tailwind's own theme variables are deliberately not redeclared here:
   output.css defines --radius-sm/-md/-lg, --shadow-sm/-md/-lg and the
   --text-* scale, and an unlayered :root declaration would win over its
   theme layer and restyle every page body still on Tailwind classes.
   The brand's versions of those take a --brand- prefix instead. */

@font-face{font-family:"Unbounded";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/unbounded/unbounded-latin-400-normal.d03cd3f8eefd.woff2") format("woff2");}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/unbounded/unbounded-latin-500-normal.51f5c98b19e8.woff2") format("woff2");}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/unbounded/unbounded-latin-600-normal.b7d1ea512372.woff2") format("woff2");}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/unbounded/unbounded-latin-700-normal.6547c9c92dc8.woff2") format("woff2");}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/unbounded/unbounded-latin-800-normal.93124fd30a72.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-400-normal.503e7cbdb484.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-400-italic.118315ee0579.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-500-normal.e5e6761eaecb.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-600-normal.79e62f3332cd.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-700-normal.5b629bd8abb4.woff2") format("woff2");}

:root {
  --color-bg: #FAF8EC;              /* surface-page */
  --color-bg-alt: #FFFFFF;          /* surface-card */
  --color-text: #1C1926;            /* text-primary (neutral-900) */
  --color-text-lede: #453F57;       /* neutral-700 */
  --color-text-secondary: #5F5773;  /* text-secondary (neutral-600) */
  --color-text-muted: #7E7595;      /* text-muted (neutral-500) */
  --color-line: #E6E2EF;            /* border-default (neutral-200) */
  --color-line-strong: #D1CADD;     /* border-strong (neutral-300) */
  --color-inset: #F3F1F8;           /* surface-inset (neutral-100) */
  --color-ink-line: #2E2A3B;        /* neutral-800: rules on the ink footer */
  --color-accent: #FF5E78;          /* color-pink-base -- carries ink text only */
  --color-accent-soft: #FFE3E8;     /* color-pink-light */
  --color-accent-strong: #E14364;   /* color-pink-dark */
  /* The Strategy board's button pink: darker than pink-base so white
     text on it passes contrast (4.6:1). */
  --color-button: #D6365A;
  --color-button-hover: #A32636;    /* color-danger-dark */
  --color-secondary: #845EC2;       /* color-purple-base */
  --color-secondary-soft: #EDE4F8;  /* color-purple-light */
  --color-secondary-strong: #6B449E;/* color-purple-dark */
  --color-warm-soft: #FFF1D9;       /* color-orange-light */
  --color-warm-strong: #A66A12;     /* color-warning-dark */
  --color-warm-bright: #FFC75F;     /* color-orange-base */
  --color-success: #2F9E5C;         /* color-success-base */
  --color-success-soft: #DDF4E4;    /* color-success-light */
  --color-success-strong: #1F7A45;  /* color-success-dark */
  --color-error-strong: #A32636;    /* color-danger-dark */
  --font-heading: "Unbounded", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --radius: 12px;                   /* radius-md */
  --radius-pill: 999px;
  --focus-ring: 0 0 0 3px rgba(255, 94, 120, 0.35); /* focus-ring */
}

/* ---- Buttons ------------------------------------------------------- */

.brand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-button);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
}

.brand-button:hover { background: var(--color-button-hover); color: #FFFFFF; }
.brand-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- Header -------------------------------------------------------- */

.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-body);
  color: var(--color-text-lede);
}

.site-header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.site-logo { display: inline-flex; align-items: center; margin-right: auto; }
.site-logo img { height: 32px; width: auto; display: block; mix-blend-mode: multiply; } /* the PNG has a white ground */

/* On a phone Start free stays beside the Menu button, as the phone board
   draws it; the copy inside the menu takes over from md up. */
.site-header-start { padding: 11px 16px; font-size: 14px; }

.site-menu-button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  min-height: 44px;
  padding: 0 16px;
  cursor: pointer;
}

.site-menu-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.site-menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  font-size: 15px;
  font-weight: 600;
}

.site-menu a { color: var(--color-text-lede); text-decoration: none; padding: 10px 0; }
.site-menu a:hover { color: var(--color-text); }
.site-menu a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.site-menu .site-menu-start { display: none; }

/* #2129's toggle hides the menu with Tailwind's max-md:hidden, which sits
   in a cascade layer; the display above is unlayered and would beat it,
   leaving the phone menu open for good. */
@media (max-width: 767.98px) {
  .site-menu.max-md\:hidden { display: none; }
}

@media (min-width: 768px) {
  .site-header-inner { padding: 20px clamp(16px, 4vw, 40px); gap: 16px; }
  .site-logo img { height: 36px; }
  .site-header-start { display: none; }
  .site-menu {
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: clamp(14px, 2.4vw, 32px);
    padding-top: 0;
  }
  .site-menu a { padding: 12px 0; }
  .site-menu .site-menu-start { display: inline-flex; padding: 12px 22px; color: #FFFFFF; }
}

/* ---- Footer -------------------------------------------------------- */

.site-footer {
  background: var(--color-text);
  color: var(--color-line-strong);
  font-family: var(--font-body);
  font-size: 15px;
}

.site-footer a { color: var(--color-line-strong); text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.site-footer a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

.site-footer-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 16px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
  justify-content: space-between;
}

.site-footer-about { flex: 1 1 260px; min-width: 0; }

.site-footer-logo {
  display: inline-flex;
  background: var(--color-bg-alt);
  border-radius: 16px;
  padding: 10px 16px;
}

.site-footer-logo img { height: 26px; width: auto; display: block; }

.site-footer-tagline { line-height: 1.6; margin: 18px 0 0; max-width: 300px; }

.site-footer-columns { display: flex; flex-wrap: wrap; gap: 32px 56px; }

.site-footer-column { display: flex; flex-direction: column; gap: 10px; }
.site-footer-column h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
}

.site-footer-bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 16px 32px;
  border-top: 1px solid var(--color-ink-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.site-footer-bottom p { margin: 0; }
.site-footer-staff { display: flex; gap: 16px; }

.site-footer .language-picker-trigger {
  background: transparent;
  color: var(--color-line-strong);
  border-color: var(--color-text-lede);
  border-radius: var(--radius-pill);
}

.site-footer .language-picker-trigger:hover,
.site-footer .language-picker-trigger:focus-visible { border-color: var(--color-line-strong); }

@media (min-width: 768px) {
  .site-footer-main { padding: 56px clamp(16px, 4vw, 40px) 40px; }
  .site-footer-bottom { padding: 20px clamp(16px, 4vw, 40px) 32px; }
}