/* Digital Media Design — main stylesheet (site chrome + teacher lesson pages).
   System fonts only, no external requests — the whole site works offline. */

:root{
	color-scheme:light; /* pins native UI (scrollbars, form controls, etc.) to light rendering too, matching the site's own light-by-default colors above */
	--primary:#0b3a63;        /* deep blue — headers, links, accents */
	--primary-dark:#062440;
	--primary-light:#e8f1fb;
	--ink:#132433;            /* body text */
	--muted:#4d6072;          /* secondary text */
	--bg:#f4f7fa;             /* page background */
	--surface:#ffffff;        /* card background */
	--border:#d6e0ea;
	--shadow:0 1px 2px rgba(11,58,99,.06), 0 6px 20px rgba(11,58,99,.07);
	--shadow-sm:0 1px 3px rgba(11,58,99,.08);
	--radius:18px;
	--radius-sm:12px;
	--max-width:1100px;
	--font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

	/* legacy aliases kept so any old inline reference still resolves */
	--secondary:#ffffff;

	/* Section-accent hues for teacher lesson pages -- decorative left
	   borders only, never used as text color, so light/dark contrast
	   requirements don't apply the way they do to --primary/--primary-dark. */
	--accent-goal:#0b3a63;    /* essential questions, objectives -- core learning */
	--accent-ref:#5b6b7d;     /* standards, resources -- reference/compliance */
	--accent-vocab:#7a4fc9;   /* vocabulary -- language */
	--accent-active:#b36a0e;  /* materials, do now, workshop -- hands-on */
	--accent-check:#1a7a4c;   /* assessment -- evaluation */
	--accent-support:#c23a5c; /* differentiation -- support */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	font-family:var(--font-sans); margin:0; padding:0;
	background:var(--bg); color:var(--ink); font-size:17px; line-height:1.65;
	-webkit-font-smoothing:antialiased;
}
a{color:var(--primary)}
/* Big, bold, rounded-feeling headings (heavier weight + tighter tracking
   reads as friendly/confident even on plain system fonts) with generous
   breathing room between sections -- one clear heading per idea, not a
   wall of same-weight text. */
h1,h2,h3{font-weight:800; letter-spacing:-.015em}
h1{font-size:36px; line-height:1.1; margin:0 0 .3em}
h2{font-size:22px; line-height:1.3; margin:0 0 .5em}
h3{font-size:17px; line-height:1.3}
p{margin:0 0 .8em}
p:last-child{margin-bottom:0}
ul,ol{margin-top:8px}

/* ---------- Header ---------- */
.site-header, .lesson-header{
	background:linear-gradient(160deg, var(--primary), var(--primary-dark));
	color:#fff; padding:32px 24px;
}
.site-header h1, .lesson-header h1{margin:0; font-size:32px; letter-spacing:-.02em}
.site-header nav, .lesson-header nav{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:14px}
.site-header nav a, .lesson-header nav a{
	color:#fff; text-decoration:none; font-weight:600; font-size:14px;
	padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.12);
	transition:background .15s ease, transform .1s ease;
}
.site-header nav a:hover, .lesson-header nav a:hover,
.site-header nav a:focus-visible, .lesson-header nav a:focus-visible{
	background:rgba(255,255,255,.26); outline:none;
}
/* Added by nav.js around every header's <h1> -- a guaranteed way back to
   Home (or Teacher Home, in teacher mode) from any page on the site. */
.dmd-home-link{color:inherit; text-decoration:none; display:inline-block; border-radius:8px}
.dmd-home-link:hover, .dmd-home-link:focus-visible{opacity:.85; outline:none}
.dmd-home-link:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.5)}
/* Added by nav.js as the first item in every header's nav -- a clearly
   labeled button, not just a clickable title, so it's obvious at a glance
   without needing to scroll to a footer link. */
.dmd-home-button{
	color:#fff !important; text-decoration:none; font-weight:700; font-size:14px;
	padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.22) !important;
	border:1px solid rgba(255,255,255,.4);
}
.dmd-home-button:hover, .dmd-home-button:focus-visible{
	background:rgba(255,255,255,.36) !important; outline:none;
}
/* Added by nav.js right after the home button, only while a teacher is
   unlocked (sessionStorage has no expiry of its own -- it stays unlocked
   for the rest of that browser tab's life until this is clicked, or the
   tab closes). Without a visible way back, browsing into a student-facing
   page like careers.html while still unlocked silently keeps showing the
   teacher lesson dropdown there too, which reads as a leak even though
   it's the same person who just unlocked it. */
.dmd-exit-teacher{
	color:#fff !important; text-decoration:none; font-weight:700; font-size:13px;
	padding:6px 12px; border-radius:999px; background:rgba(194,58,58,.28) !important;
	border:1px solid rgba(255,180,180,.5); margin-left:6px;
}
.dmd-exit-teacher:hover, .dmd-exit-teacher:focus-visible{
	background:rgba(194,58,58,.46) !important; outline:none;
}
a:focus-visible, button:focus-visible, input:focus-visible{outline:3px solid var(--primary); outline-offset:2px; border-radius:4px}

main{padding:36px 24px 64px; max-width:var(--max-width); margin:0 auto}
footer{padding:20px; background:var(--primary-dark); color:#fff; text-align:center; font-size:14px}
footer a{color:#cfe1f5}
.lesson-content{max-width:var(--max-width); margin:0 auto; padding:8px 24px 40px}

/* ---------- Cards ---------- */
.card{
	background:var(--surface); border:1px solid var(--border);
	padding:20px 22px; margin:16px 0; border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.card h2{color:var(--primary-dark); margin-bottom:10px}
.card h2:first-child{margin-top:0}

/* Teacher lesson pages: a colored left border per section, keyed to its
   real id (see render_lesson() in generate_site.py), so the eye can scan
   a page's structure at a glance instead of every card looking identical. */
#essential-questions, #objectives{border-left:5px solid var(--accent-goal)}
#standards, #resources{border-left:5px solid var(--accent-ref)}
#vocabulary{border-left:5px solid var(--accent-vocab)}
#materials, #do-now, #workshop{border-left:5px solid var(--accent-active)}
#assessment{border-left:5px solid var(--accent-check)}
#differentiation{border-left:5px solid var(--accent-support)}
@media print{#essential-questions, #objectives, #standards, #resources, #vocabulary, #materials, #do-now, #workshop, #assessment, #differentiation{border-left-width:3px}}

.btn, .download-btn{
	display:inline-block; background:var(--primary); color:#fff !important; padding:10px 18px;
	border-radius:999px; text-decoration:none; font-weight:700; border:none; font-size:15px;
	cursor:pointer; box-shadow:var(--shadow-sm);
	transition:background .15s ease, transform .1s ease, box-shadow .15s ease;
}
/* A glow ring, not just a background swap, is the primary hover/focus
   signal here -- deliberately, so a hovered button is never just "the
   background got a bit darker," which is easy to miss and (see the
   dark-mode override below) was actually landing as invisible black-on-
   black for a while: --primary-dark darkening the background collided
   with dark mode's own near-black button text. */
.btn:hover, .btn:focus-visible, .download-btn:hover, .download-btn:focus-visible{
	background:var(--primary-dark); transform:translateY(-1px);
	box-shadow:0 0 0 4px rgba(11,58,99,.25), var(--shadow); outline:none;
}
.high-contrast{background:var(--primary); color:#fff; padding:10px 14px; border-radius:var(--radius-sm)}

@media (max-width:700px){
	:root{--max-width:600px}
	body{font-size:16px}
	h1{font-size:26px}
	.site-header, .lesson-header{padding:22px 20px}
	.site-header h1, .lesson-header h1{font-size:24px}
	main, .lesson-content{padding-left:16px; padding-right:16px}
}

/* ---------- Nav dropdowns + mobile hamburger ---------- */
.nav-item{position:relative}
.nav-item .dropdown{
	display:none; position:absolute; background:var(--primary-dark); color:#fff; top:calc(100% + 6px); left:0;
	min-width:230px; max-width:300px; max-height:70vh; overflow-y:auto; border-radius:var(--radius-sm); padding:10px; box-shadow:var(--shadow); z-index:20;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{display:block}
.dropdown a{display:block; color:#fff; padding:7px 10px; text-decoration:none; border-radius:6px; background:none !important; font-weight:500;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dropdown a:hover{background:rgba(255,255,255,.12) !important}

.hamburger{display:none; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4); color:#fff; padding:8px 12px; border-radius:8px; font-weight:600}
@media (max-width:700px){
	.site-header nav{display:none; flex-direction:column; align-items:flex-start}
	.site-header nav.open{display:flex}
	.hamburger{display:inline-block; margin-top:10px}
}

/* ---------- Lesson details/download card ---------- */
.lesson-details{border-top:none; background:var(--primary-light); padding:18px 20px; margin-top:26px; border-radius:var(--radius); text-align:center}
.lesson-details h3{margin-top:0}

/* ---------- Table of contents (sticky) ---------- */
.lesson-toc{
	display:flex; flex-wrap:wrap; gap:4px 6px; position:sticky; top:0; z-index:5;
	background:rgba(244,247,250,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:12px 16px;
}
.lesson-toc a{color:var(--primary-dark); text-decoration:none; font-weight:600; font-size:13.5px; padding:5px 10px; border-radius:999px}
.lesson-toc a:hover{background:var(--primary-light)}

/* ---------- Vocabulary, standards, tables ---------- */
.vocab-list dt{font-weight:700; margin-top:14px; color:var(--primary-dark)}
.vocab-list dt:first-child{margin-top:0}
.vocab-list dd{margin:3px 0 0; color:var(--muted)}
.standards-list{list-style:none; padding-left:0}
.standards-list li{margin:8px 0}
.standards-list .code{
	display:inline-block; background:var(--primary); color:#fff; font-size:12px; font-weight:700;
	padding:3px 10px; border-radius:999px; margin-right:8px; white-space:nowrap;
}
.workshop-steps{padding-left:22px}
.workshop-steps li{margin:10px 0}
.pacing-table{width:100%; border-collapse:collapse; margin-top:10px; font-size:15px}
.pacing-table th, .pacing-table td{border:1px solid var(--border); padding:10px 12px; text-align:left; vertical-align:top}
.pacing-table th{background:var(--primary-light); color:var(--primary-dark); font-weight:700}
.pacing-table tr:nth-child(even) td{background:#fafcfe}

.lesson-pager{display:flex; justify-content:space-between; padding:14px 4px; font-weight:700}
.lesson-pager a{color:var(--primary); text-decoration:none}
.lesson-pager a:hover{text-decoration:underline}
.days-badge, .count-badge{
	display:inline-block; background:var(--primary-light); color:var(--primary-dark); font-size:12px;
	font-weight:700; padding:3px 10px; border-radius:999px; margin-left:8px;
}
.unit-icon{font-size:22px; margin-right:2px; vertical-align:-3px}
.unit-block{border-top:4px solid var(--primary); border-radius:var(--radius) var(--radius) var(--radius-sm) var(--radius-sm)}
.lesson-list{list-style:none; padding-left:0}
.lesson-list li{margin:2px 0; padding:10px 4px; border-bottom:1px solid var(--border); transition:background .12s ease}
.lesson-list li:hover{background:var(--primary-light)}
.lesson-list a{text-decoration:none; color:var(--ink); font-weight:600}
.lesson-list a:hover{color:var(--primary)}
#lesson-search{
	width:100%; box-sizing:border-box; padding:12px 14px; font-size:16px; border:1.5px solid var(--border);
	border-radius:var(--radius-sm); background:var(--surface);
}
#lesson-search:focus{border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-light)}
.unit-block h2, .unit-block h3{margin-top:0}
.eyebrow{margin:0 0 8px; opacity:.85; font-size:13px; letter-spacing:.04em; text-transform:uppercase; font-weight:600}

/* ---------- Callout cards -- one calm, shared style ---------- */
/* Every standing/contextual callout (teacher prep, notes, handouts,
   slides, ACP study links, sub-guides, notebook routine, portfolio,
   submission, resume, ACP catch-up) used to be its own saturated
   background/border color -- up to 5-6 of them can appear stacked on one
   lesson page at once, which reads as noisy no matter how good any single
   one looks alone. They now all share the exact same quiet surface as a
   plain .card, told apart by their own emoji + heading text (already
   plenty scannable) plus one thin accent bar in the single site accent
   color -- not a different hue per box. This also means none of them need
   their own dark-mode color overrides any more: they simply inherit the
   already dark-mode-safe .card / .card h2 / body-text colors. */
.prep-card, .note-card, .handouts-card, .slides-card, .acp-study-card, .subguide-card,
.routine-card, .portfolio-card, .submission-card, .resume-card, .acp-catchup-card, .extra-mile-card{
	border-left:4px solid var(--primary);
}
.prep-card h2, .handouts-card h2, .slides-card h2, .acp-study-card h2, .subguide-card h2{
	margin-top:0; font-size:15px;
}
.book-logo{height:34px; width:auto; vertical-align:middle; margin-right:10px}
.prep-card ul{margin:8px 0 0; padding-left:20px}
.prep-card li{margin:6px 0}
.note-card h2{font-size:14px; text-transform:uppercase; letter-spacing:.03em}
.handouts-list, .slides-list, .subguide-list{list-style:none; padding-left:0; margin:8px 0 0}
.handouts-list li, .slides-list li, .subguide-list li{margin:6px 0}
.handouts-list a, .slides-list a, .subguide-list a{color:var(--primary); font-weight:700; text-decoration:none; margin:0 2px}
.handouts-list a:hover, .slides-list a:hover, .subguide-list a:hover{text-decoration:underline}
.slide-embed{margin:14px 0}
.slide-embed h3{margin:0 0 6px; font-size:15px; color:var(--primary)}
.slide-embed-frame{width:100%; height:420px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#f4f6f9; display:block}
.slide-embed p{margin:6px 0 0; font-size:13px}
@media print{.slide-embed{display:none !important}}
.acp-study-link{background:var(--primary-light); border-left:4px solid var(--primary); padding:8px 12px; border-radius:0 8px 8px 0; margin-top:10px !important; font-size:14px}
.acp-study-link a, .acp-study-card a{color:var(--primary); font-weight:700; text-decoration:none}
.acp-study-link a:hover, .acp-study-card a:hover{text-decoration:underline}

.routine-card, .portfolio-card, .submission-card, .resume-card, .acp-catchup-card{padding:14px 20px}
.portfolio-card, .submission-card, .resume-card, .acp-catchup-card{margin-top:12px}
.routine-card h2, .portfolio-card h2, .submission-card h2, .resume-card h2, .acp-catchup-card h2{
	font-size:13px; text-transform:uppercase; letter-spacing:.03em; margin:0 0 5px;
}

.extra-mile-card{padding:18px 22px; margin-top:12px}
.extra-mile-card h2{margin-top:0}
.extra-mile-cross, .extra-mile-career{margin:8px 0; font-size:15px}
.extra-mile-label{margin:14px 0 6px; font-weight:700; font-size:14px}
.extra-mile-projects{margin:0; padding-left:20px}
.extra-mile-projects li{margin:8px 0}
.extra-mile-card a{color:var(--primary); font-weight:600}
.routine-card p, .portfolio-card p, .submission-card p, .resume-card p, .acp-catchup-card p{margin:0; font-size:14px}

.portfolio-desc-label{margin-top:10px !important; font-weight:700}
.portfolio-desc-example{
	margin-top:6px !important; background:var(--bg); border:1px dashed var(--primary); border-radius:8px;
	padding:10px 12px; font-style:italic; font-size:13.5px !important;
}
.portfolio-desc-example .blank{
	display:inline-block; border-bottom:2px solid var(--primary); color:transparent; min-width:80px;
	-webkit-user-select:none; user-select:none;
}
.resume-examples{margin:8px 0 0; padding-left:20px}
.resume-examples li{margin:6px 0; font-size:13.5px; font-style:italic}

/* ---------- Hub pages: big tile-grid navigation ---------- */
/* Used on the homepage, each grade hub, and other "find your way to
   something" pages -- a small number of big, obvious, evenly-weighted
   choices instead of a dense bullet list of links, so the very first
   thing a visitor sees is calm and scannable. Every token used here
   (surface/border/ink/muted/primary) is already dark-mode-aware, so this
   component needs no dark-mode rules of its own. */
.hero{padding:8px 4px 28px; text-align:center}
.hero h1{font-size:44px}
.hero p{max-width:640px; margin:14px auto 0; color:var(--muted); font-size:17px}
.tile-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:18px; margin:24px 0}
.tile{
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
	background:var(--surface); border:2px solid var(--border); border-radius:var(--radius);
	padding:30px 18px; text-decoration:none; color:var(--ink); text-align:center;
	box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tile:hover, .tile:focus-visible{
	transform:translateY(-3px); border-color:var(--primary); outline:none;
	box-shadow:0 0 0 3px rgba(11,58,99,.18), var(--shadow);
}
.tile-icon{font-size:38px; line-height:1}
.tile-label{font-weight:800; font-size:17px; letter-spacing:-.01em}
.tile-meta{font-size:13px; color:var(--muted); font-weight:600}
@media (max-width:700px){.hero h1{font-size:28px}}

/* ---------- Dark mode (opt-in, NOT automatic) ---------- */
/* Light mode is the site's default appearance for every visitor,
   regardless of their OS/browser color-scheme setting -- these rules
   only apply when something explicitly sets data-theme="dark" on
   <html> (nothing on the site does that yet; there's no toggle UI).
   Kept in place, rather than deleted, so a manual dark-mode toggle
   can be wired up later without rebuilding all of this. */
:root[data-theme="dark"]{
	--primary:#5ea6e6; --primary-dark:#0b1c2e; --primary-light:#12283c;
	--ink:#e9f1f8; --muted:#9fb4c6; --bg:#0a1723; --surface:#0f2233;
	--border:#22394d; --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35); --shadow-sm:0 1px 3px rgba(0,0,0,.35);
	--accent-goal:#5ea6e6; --accent-ref:#8a9bb0; --accent-vocab:#b39ce8;
	--accent-active:#e0a344; --accent-check:#4fc98a; --accent-support:#e56c8a;
}
[data-theme="dark"] .site-header, [data-theme="dark"] .lesson-header{background:linear-gradient(160deg, #123a5c, #071726)}
[data-theme="dark"] .card h2{color:#bcdcf7}
[data-theme="dark"] .download-btn, [data-theme="dark"] .btn, [data-theme="dark"] .landing-calendar{color:#04101c !important}
/* The button text above was switched to near-black so it reads against
   --primary's light-blue dark-mode background (white-on-#5ea6e6 was
   only ~2.6:1, below the 4.5:1 minimum -- .landing-calendar had this
   same under-contrast problem, just never an outright invisible one)
   -- but :hover (in the base rule above) darkens that same button to
   --primary-dark, which dark mode redefines to a near-black navy.
   Near-black text on a near-black button is what a student was
   actually seeing: hovering made the button look like it vanished.
   Hovering/focusing now LIGHTENS instead of darkens, so the forced
   near-black text stays readable, plus a brighter glow ring that
   doesn't depend on the background/text pairing at all. */
[data-theme="dark"] .btn:hover, [data-theme="dark"] .btn:focus-visible, [data-theme="dark"] .download-btn:hover, [data-theme="dark"] .download-btn:focus-visible, [data-theme="dark"] .landing-calendar:hover, [data-theme="dark"] .landing-calendar:focus-visible{
	background:#8cc3f2 !important;
	box-shadow:0 0 0 4px rgba(94,166,230,.45), 0 4px 16px rgba(94,166,230,.3);
}
/* Both used --primary-dark for text against a background that ALSO
   switches to a near-black shade in dark mode (the card surface /
   the badge's own light-blue pill background darkens too) -- so the
   vocabulary term itself, and every days/count badge sitewide, were
   landing at ~1.1:1 contrast, essentially invisible. */
[data-theme="dark"] .vocab-list dt{color:#bcdcf7}
[data-theme="dark"] .days-badge, [data-theme="dark"] .count-badge{color:#bcdcf7}
[data-theme="dark"] .pacing-table th{color:#bcdcf7}
[data-theme="dark"] .pacing-table tr:nth-child(even) td{background:#0c1e2e}
[data-theme="dark"] .lesson-toc{background:rgba(10,23,35,.92)}
[data-theme="dark"] .lesson-toc a{color:#bcdcf7}
[data-theme="dark"] .lesson-toc a:hover{background:var(--primary-light)}
[data-theme="dark"] .dropdown{background:#040d16}
/* The tile hover glow above is hardcoded to light mode's dark-navy
   --primary; on a dark background that reads as a dim smudge instead
   of a glow, so dark mode gets its own lighter-blue version. */
[data-theme="dark"] .tile:hover, [data-theme="dark"] .tile:focus-visible{box-shadow:0 0 0 3px rgba(94,166,230,.35), var(--shadow)}
[data-theme="dark"] #lesson-search{background:#0f2233; color:var(--ink)}
/* All the callout-card types (prep/note/handouts/slides/acp-study/
   subguide/routine/portfolio/submission/resume/acp-catchup) no longer
   need their own dark-mode color rules at all -- they now inherit the
   already-dark-mode-safe .card / .card h2 / body-text colors above,
   plus var(--primary) for their one shared accent bar, which is
   already redefined for dark mode in the :root block above. */

/* Small tweaks */
pre, code, kbd{white-space:pre-wrap; overflow-wrap:anywhere; word-wrap:break-word}
.card pre{background:var(--bg); padding:12px; border-radius:8px; border:1px solid var(--border)}
.card p, .card li{word-break:break-word}

/* ---------- Print ---------- */
@media print{
	:root{--primary:#000; --secondary:#fff; --bg:#fff; --surface:#fff; --border:#999; --shadow:none; --shadow-sm:none}
	body{background:#fff; color:#000; font-size:12pt}
	.site-header, footer, .hamburger, .site-header nav{display:none}
	.lesson-header nav, .lesson-toc, .handouts-card, .slides-card, .subguide-card, .lesson-pager, .lesson-details, #print-lesson{display:none !important}
	main, .lead, .lesson-content{max-width:180mm; margin:0; padding:0}
	#resources a:after{content:" (" attr(href) ")"}
	.card{border:1px solid #222; box-shadow:none; border-radius:0}
}