/* Site header, phone menu and footer for the prerendered blog and curriculum pages
   (scripts/static-shell.ts). The rules are copied from client/src/marketing.css, so
   keep the two in step. These pages do not load Tailwind; the first block stands in
   for the parts of its base reset that the header and footer rely on. */
:where(.site-header,.site-footer),:where(.site-header,.site-footer) * {
  box-sizing:border-box
}
:where(.site-header,.site-footer) :where(p,h2) {
  margin:0
}
html :where(.site-header,.site-footer) a {
  color:inherit;
  text-decoration:none
}
.site-header .brand:hover,.m-button:hover {
  text-decoration:none
}

/* border-box everywhere, as Tailwind's reset gives the React buttons, so min-height is the full height. */
.m-button {
  box-sizing:border-box;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  min-height:48px;
  padding:13px 24px;
  border-radius:9px;
  background:#e4a436;
  color:#1a2e1c;
  font-weight:700;
  white-space:nowrap
}
.m-button:hover {
  background:#f0b64e
}
.m-button.small {
  padding:10px 18px;
  font-size:.85rem;
  min-height:44px
}

/* Not sticky here: curriculum pages keep their own sticky context bar (z-index 50)
   at the top, and the open phone menu has to sit above it. */
.site-header {
  background:#fffdf7;
  border-bottom:1px solid #dbe1d4;
  position:relative;
  z-index:60;
  color:#1a2e1c
}
.header-inner {
  max-width:1260px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 24px
}
.brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:700;
  font-size:1.45rem;
  letter-spacing:-.05em;
  color:#315539
}
.brand>span>span {
  color:#8a5b08
}
.brand img {
  object-fit:contain
}
.desktop-nav {
  display:flex;
  gap:23px;
  font-size:.86rem;
  font-weight:600
}
.desktop-nav a:hover {
  text-decoration:underline
}
.site-header a[aria-current] {
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:6px
}
.header-actions {
  display:flex;
  align-items:center;
  gap:8px
}

/* Phone menu: a <details>, so it opens and closes without JavaScript. */
.static-menu {
  display:none
}
.static-menu>summary {
  display:flex;
  align-items:center;
  min-width:44px;
  min-height:44px;
  padding:8px 12px;
  border:1px solid #dbe1d4;
  border-radius:9px;
  font-size:.86rem;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  list-style:none
}
.static-menu>summary::-webkit-details-marker {
  display:none
}
.static-menu>nav {
  position:absolute;
  top:100%;
  left:0;
  right:0;
  display:grid;
  gap:4px;
  padding:10px 24px 20px;
  background:#fffdf7;
  border-bottom:1px solid #dbe1d4;
  box-shadow:0 12px 24px rgba(26,46,28,.12);
  max-height:calc(100dvh - 80px);
  overflow-y:auto;
  overscroll-behavior:contain
}
.static-menu>nav a {
  padding:10px;
  min-height:44px;
  display:flex;
  align-items:center
}

.site-footer {
  background:#1e2d21;
  color:#d9e0d7;
  padding:60px 28px 28px
}
.footer-grid {
  max-width:1180px;
  margin:auto;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:50px;
  font-size:.86rem;
  line-height:1.7
}
.site-footer .brand {
  color:#fffdf7;
  margin-bottom:18px
}
.footer-grid p {
  margin-bottom:15px
}
.footer-grid nav {
  display:flex;
  flex-direction:column;
  gap:10px
}
.footer-grid h2 {
  font-size:.85rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#f7d799;
  margin-bottom:10px
}
.site-footer a:hover {
  text-decoration:underline
}
.footer-bottom {
  max-width:1180px;
  margin:38px auto 0;
  border-top:1px solid #465642;
  padding-top:25px;
  font-size:.73rem;
  line-height:1.7;
  color:#b6c3b1
}
.footer-bottom p+p {
  margin-top:20px
}
/* The ACARA notice links carry Tailwind's underline and hover:text-gray-400. */
.footer-bottom a {
  text-decoration:underline
}
.footer-bottom a:hover {
  color:#9ca3af
}

@media(max-width:1023px) {
  .desktop-nav {
    display:none
  }
  .static-menu {
    display:block
  }
}

@media(max-width:760px) {
  .footer-grid {
    grid-template-columns:1fr;
    gap:30px
  }
  .brand {
    font-size:1.2rem
  }
  .brand img {
    width:28px;
    height:28px
  }
  .header-inner {
    padding:12px;
    gap:8px
  }
  .header-actions .m-button {
    padding:10px 13px
  }
}

/* Print the ACARA notice in black on white; the footer links stay off paper. */
@media print {
  .footer-grid {
    display:none
  }
  .site-footer {
    background:none;
    color:#000;
    padding:0 28px
  }
  .footer-bottom {
    color:#000;
    border-color:#999
  }
}

/* The "☰ Menu" label is wider than the React icon button, so tighten the spacing
   to keep 320px screens from scrolling sideways. */
@media(max-width:360px) {
  .header-inner,.header-actions,.brand {
    gap:6px
  }
  .header-inner {
    padding-inline:10px
  }
  .header-actions .m-button,.static-menu>summary {
    padding-inline:9px
  }
}

/* Achievement standard and content descriptor pages (scripts/prerender-all.ts).
   The curriculum text comes straight after the heading, with a compact intro box
   below it. The article and heading shrink on phones so the text keeps its width. */
.tc-article {
  padding:2rem;
  background:white;
  border-radius:.5rem;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
  margin-bottom:2rem
}
.tc-page-title {
  font-size:clamp(1.5rem,6vw,2rem);
  font-weight:bold;
  color:#111827;
  margin-bottom:1.5rem;
  line-height:1.2
}
.tc-intro {
  background:#eff6ff;
  border:1px solid #bfdbfe;
  border-radius:.375rem;
  padding:0.75rem 1rem;
  margin:1.5rem 0;
  font-size:0.9375rem
}
.tc-intro p {
  margin:0;
  color:#1e40af
}
/* Level cards show the first three lines of the neighbouring standard or descriptor;
   the "Read ..." line under them opens the rest. */
.tc-clamp-3 {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden
}
/* One-line prompt after the elaborations on a content descriptor page. */
.tc-inline-cta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem 1rem;
  margin-top:2rem;
  padding:1rem;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  border-radius:.375rem
}
.tc-inline-cta p {
  margin:0;
  font-weight:600;
  color:#14532d
}
@media(max-width:480px) {
  .tc-article {
    padding:1rem
  }
}

/* The achievement standard statement styles (.standard-paragraph, details.statement, .supported-statement) are in standard-statements.css. */