/* Achievement standard statements: the styles for every page that shows them. One file serves the static pages
   (linked by createHtmlDocument in scripts/prerender-all.ts) and the React pages (loaded by
   client/src/components/curriculum/StandardStatements.tsx), so the two cannot drift. It is plain CSS, without Tailwind.
   The shell styles (header, footer, article, buttons) stay in static-shell.css, which the static pages load first. */

/* Kind tags: the coloured word label that says what each curriculum item is (markup from renderKindTagHtml in
   scripts/standard-statements-html.ts and KindTag in StandardStatements.tsx). A light tint with dark text, each pair at
   least 4.5:1 (WCAG AA; scripts/standard-statements.test.ts checks the colours declared here). An inline block no wider
   than its line moves to the next line whole, and wraps inside itself only on a line too narrow for it, so a phone never
   scrolls sideways; a link's underline does not reach into it either. */
.kind-tag {
  display:inline-block;
  max-width:100%;
  padding:1px 7px;
  border-radius:4px;
  font-size:.75rem;
  font-weight:600;
  line-height:1.5
}
.kind-tag--standard {
  background:#dcfce7;
  color:#14532d
}
.kind-tag--descriptor {
  background:#dbeafe;
  color:#1e3a8a
}
.kind-tag--elaboration {
  background:#fef3c7;
  color:#78350f
}
/* The one tag that starts an achievement standard's official paragraph block, on its own line above the hint. */
.standard-kind {
  margin:0 0 .375rem;
  line-height:1.5
}

/* Achievement standard pages: the official paragraph with a link on every sentence, then one card per ACARA statement
   (markup from scripts/standard-statements-html.ts, jump behaviour in public/statement-jump.js). The cards are
   <details>, so closed ones cost no layout and everything works without JavaScript. */
.standard-aligned {
  margin:-1rem 0 1.25rem;
  color:#4b5563;
  font-size:.9375rem
}
.standard-hint {
  margin:0 0 .5rem;
  color:#4b5563;
  font-size:.875rem
}
.standard-paragraph {
  margin:0 0 .75rem;
  color:#374151;
  line-height:1.7;
  overflow-wrap:anywhere
}
/* Sentences read as text with a dotted underline. The selector is long enough to beat the page's own link underline. */
html main p.standard-paragraph a[data-statement-link][href^="#"] {
  color:inherit;
  text-decoration:underline dotted #6b7280;
  text-underline-offset:3px
}
html main p.standard-paragraph a[data-statement-link][href^="#"]:hover {
  text-decoration:underline solid #4E7B53
}

/* The paragraph on a dark band (the combined curriculum hubs add class standard-on-dark): light text, and a dotted
   underline and hover colour that read on dark green. These selectors are longer than the ones above, so they win. */
.standard-on-dark .standard-hint,
.standard-on-dark .standard-paragraph {
  color:#ecfdf5
}
html main .standard-on-dark p.standard-paragraph a[data-statement-link][href^="#"] {
  text-decoration-color:#a7f3d0
}
html main .standard-on-dark p.standard-paragraph a[data-statement-link][href^="#"]:hover {
  text-decoration:underline solid #fcd34d
}

.statement-list {
  margin-top:2rem
}
.statement-list-heading {
  margin:0 0 .25rem;
  font-size:1.5rem;
  font-weight:bold
}
.statement-list-hint {
  margin:0 0 .75rem;
  color:#4b5563;
  font-size:.875rem
}
/* scroll-margin-top clears the sticky context bar when a sentence link or a #<statement> address lands here. */
details.statement {
  margin:.5rem 0;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#fff;
  scroll-margin-top:100px
}
details.statement[open] {
  border-color:#4E7B53;
  background:#f6faf6
}
.statement-summary {
  display:block;
  min-height:44px;
  padding:12px 14px;
  cursor:pointer;
  list-style:none
}
.statement-summary::-webkit-details-marker {
  display:none
}
.statement-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  margin-bottom:6px
}
.statement-code {
  padding:2px 8px;
  border-radius:4px;
  background:#047857;
  color:#fff;
  font-family:Menlo,Consolas,monospace;
  font-size:.75rem;
  font-weight:700;
  overflow-wrap:anywhere
}
.statement-strand {
  padding:1px 8px;
  border:1px solid #e5e7eb;
  border-radius:999px;
  background:#f3f4f6;
  color:#374151;
  font-size:.75rem;
  font-weight:600
}
.statement-count {
  margin-left:auto;
  color:#4b5563;
  font-size:.8125rem
}
/* The arrow is decoration: the second declaration gives it empty alt text where that is supported. */
.statement-count::after {
  content:"▸";
  content:"▸" / "";
  margin-left:.35rem
}
details.statement[open]>.statement-summary .statement-count::after {
  content:"▾";
  content:"▾" / ""
}
.statement-text {
  margin:0;
  color:#111827;
  font-size:.9375rem;
  font-weight:400;
  line-height:1.5;
  overflow-wrap:anywhere
}
.statement-body {
  padding:0 14px 12px
}
.statement-descriptor {
  margin:8px 0;
  padding:10px 12px;
  border-left:3px solid #4E7B53;
  border-radius:0 6px 6px 0;
  background:#fff
}
.statement-descriptor-head {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
  margin:0 0 4px
}
.statement-descriptor-code {
  color:#047857;
  font-family:Menlo,Consolas,monospace;
  font-weight:700;
  overflow-wrap:anywhere
}
.statement-descriptor-text {
  margin:0;
  color:#111827;
  overflow-wrap:anywhere
}
.statement-elaborations {
  margin-top:6px
}
.statement-elaborations>summary {
  display:flex;
  align-items:center;
  min-height:44px;
  color:#92400e;
  font-size:.8125rem;
  font-weight:600;
  cursor:pointer;
  list-style:none
}
.statement-elaborations>summary::-webkit-details-marker {
  display:none
}
.statement-elaborations>summary::before {
  content:"▸";
  content:"▸" / "";
  margin-right:.4rem
}
.statement-elaborations[open]>summary::before {
  content:"▾";
  content:"▾" / ""
}
/* list-style is explicit because the React pages load Tailwind's reset, which removes list bullets. */
.statement-elaboration-list {
  margin:0 0 4px 1.25rem;
  padding:0;
  list-style:disc;
  color:#374151;
  font-size:.875rem;
  overflow-wrap:anywhere
}
.statement-elaboration-list li {
  margin:4px 0
}
.statement-elaboration-topic {
  margin:10px 0 2px;
  color:#111827;
  font-size:.875rem;
  font-weight:700
}
/* The site's focus ring (see the page style block), kept close to the summary so the card edge does not clip it. */
.statement-summary:focus-visible,.statement-elaborations>summary:focus-visible {
  outline:3px solid #976b18;
  outline-offset:2px
}
/* The statement a sentence link or address just opened (public/statement-jump.js removes the class after 2 seconds). */
.tc-statement-highlight {
  box-shadow:0 0 0 3px #e4a436;
  transition:box-shadow .3s
}
@media(max-width:480px) {
  .statement-summary {
    padding:10px
  }
  .statement-body {
    padding:0 8px 8px
  }
  .statement-descriptor {
    padding:8px 10px
  }
  .statement-count {
    flex-basis:100%;
    margin-left:0
  }
}

/* Content descriptor pages: the achievement standard statements a descriptor supports (markup from
   renderSupportedStatementsHtml in scripts/standard-statements-html.ts). Each card is one link to its statement on the
   standard page. The long selector beats the page's own text-link underline: the card is a link as a whole, and its
   "See it on the standard page" line carries the underline. */
.supported-statements {
  margin-top:2rem;
  padding-top:2rem;
  border-top:2px solid #e5e7eb
}
.supported-statements>h2 {
  margin:0 0 .75rem;
  font-size:1.5rem;
  font-weight:bold
}
.supported-statement-list {
  display:grid;
  gap:.75rem;
  margin:0;
  padding:0;
  list-style:none
}
.supported-statement {
  margin:0
}
html main ul.supported-statement-list li.supported-statement a.supported-statement-link {
  display:block;
  min-height:44px;
  padding:12px 14px;
  border:1px solid #bbf7d0;
  border-radius:8px;
  background:#f0fdf4;
  color:#111827;
  text-decoration:none
}
html main ul.supported-statement-list li.supported-statement a.supported-statement-link:hover {
  border-color:#4E7B53;
  text-decoration:none
}
.supported-statement-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  margin-bottom:6px
}
.supported-statement-standard {
  padding:1px 8px;
  border:1px solid #e5e7eb;
  border-radius:999px;
  background:#fff;
  color:#374151;
  font-size:.75rem;
  font-weight:600;
  overflow-wrap:anywhere
}
.supported-statement-text {
  display:block;
  color:#111827;
  font-size:.9375rem;
  line-height:1.5;
  overflow-wrap:anywhere
}
.supported-statement-cta {
  display:block;
  margin-top:6px;
  color:#065f46;
  font-size:.875rem;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px
}
.supported-standard-links {
  margin:.5rem 0 0
}
.supported-standard-link {
  display:inline-block;
  padding:10px 0;
  overflow-wrap:anywhere
}
@media(max-width:480px) {
  html main ul.supported-statement-list li.supported-statement a.supported-statement-link {
    padding:10px
  }
}