/* Educatodo storefront identity, September 2026.
   Loaded last by the shared shell. Do not recolor illustrations, manipulatives,
   answer states or per-song accent colors: those convey educational meaning. */
@font-face {
  font-family: Archivo; font-style: normal; font-weight: 400; font-display: swap;
  src: url('./archivo-regular.woff2') format('woff2');
}
@font-face {
  font-family: Archivo; font-style: normal; font-weight: 900; font-display: swap;
  src: url('./archivo-black.woff2') format('woff2');
}
:root {
  --edu-navy: #202a68; --edu-yellow: #ffcb3d; --edu-red: #d71932;
  --edu-ink: #17324d; --edu-teal: #007b7b; --edu-cream: #fffaf2;
  --edu-font: Archivo, Arial, sans-serif;
  --navy: var(--edu-navy); --deep: #17204f; --ink: var(--edu-ink);
  --cream: var(--edu-cream); --paper: #fff; --yellow: var(--edu-yellow);
  --red-action: var(--edu-red); --red-dark: #af1528; --red-text: var(--edu-navy);
  --cc-ink: var(--edu-ink); --cc-teal: var(--edu-navy);
  --cc-yellow: var(--edu-yellow); --cc-paper: var(--edu-cream);
}
/* Typography only: preserve sizes, wrapping, comfortable-reading and Braille symbols.
   Legacy resources have inline font shorthands, so this one property must win. */
body[data-aprende-shell],
[data-aprende-shell] :is(h1,h2,h3,h4,h5,h6,p,a,button,input,select,textarea,label,summary,li,dt,dd,small,strong,b,em,span,blockquote,figcaption) {
  font-family: var(--edu-font) !important;
}
[data-aprende-shell] :is(h1,h2,h3,h4) { font-weight: 900; }
[data-aprende-shell] .aprende-utility {
  background: #fff; color: var(--edu-navy); border-bottom: 3px solid var(--edu-yellow);
}
.aprende-utility :is(.aprende-brand,.aprende-location,.brand-nav a,.aprende-tools button,.aprende-switcher summary) {
  color: var(--edu-navy);
}
.aprende-utility :is(.aprende-tools button,.aprende-switcher summary) { border-color: #bdc5dc; }
.aprende-utility .aprende-tools button[aria-pressed="true"] { background: var(--edu-yellow); border-color: var(--edu-yellow); }
.aprende-utility .aprende-switcher nav { color: var(--edu-navy); border-color: #bdc5dc; }
.aprende-switcher nav a { color: var(--edu-navy); }
.aprende-switcher nav a:hover,.aprende-switcher nav a[aria-current] { background: #eef1fa; }
[data-aprende-shell] .resource-shortcuts a { color: var(--edu-navy); border-color: #bdc5dc; }
[data-aprende-shell] .resource-audio-controls { background: #eef1fa; color: var(--edu-ink); border-color: #bdc5dc; }
[data-aprende-shell] .resource-audio-controls :is(button,select) { color: var(--edu-navy); border-color: #9aa7c7; }
footer.aprende-site-footer { background: var(--edu-navy); border-top: 4px solid var(--edu-yellow); }
.aprende-site-footer .aprende-footer-copy small,.aprende-site-footer .aprende-footer-meta p { color: #e1e6f5; }
.aprende-site-footer .aprende-footer-store { color: var(--edu-yellow); text-decoration-color: var(--edu-yellow); }
.aprende-site-footer a:hover { color: var(--edu-yellow); }
/* Homepage keeps its layout, imagery and non-commercial PRONI routes intact. */
html:not([data-aprende-activity]) .hero-copy h1,
html:not([data-aprende-activity]) .hero-copy h1 em,
html:not([data-aprende-activity]) :is(.section-heading h2,.resource-copy h3,.audience-heading h2,.audience-card h3,.store-bridge h2,.growing-library h2) {
  color: var(--edu-navy);
}
.catalog-section { background: #f1f4fa; border-color: #d8dfed; }
.resource-card { box-shadow: 0 3px 0 var(--edu-navy); }
.brand-story { background: var(--edu-navy); border-color: var(--edu-navy); box-shadow: 0 16px 38px #202a681a; }
.brand-story::before { background: linear-gradient(90deg,var(--edu-red) 0 33.33%,var(--edu-yellow) 33.33% 66.66%,var(--edu-teal) 66.66%); }
.brand-story :is(.eyebrow,h2 span,.story-fact-label),.story-facts .story-fact-years > strong { color: var(--edu-yellow); }
.brand-story h2 { color: white; }
.story-brand-panel { background: var(--edu-yellow); color: var(--edu-navy); }
.story-brand-panel > p strong { color: var(--edu-navy); }
.brand-story .light-link:hover { background: var(--edu-yellow); color: var(--edu-navy); border-color: var(--edu-yellow); }
.family { background: #fffaf2; }
.school { background: #fff2c5; }
.government { background: #eaf0fa; }
/* White/light surfaces only; dark teaching sections retain white headings. */
.lesson-title h1,.single-title-row h1,.detail-title h2,.single-meaning,
.cc-page h1,.cc-page h2,.cc-page h3 { color: var(--edu-navy); }
.hero-copy h1 em { font-style: normal; }
@media (forced-colors: active) {
  .brand-story,footer.aprende-site-footer { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .brand-story h2,.brand-story h2 span { color: CanvasText; }
}