/* NHS identity palette */
:root {
  --nhs-blue: #005EB8;
  --nhs-dark-blue: #003087;
  --nhs-bright-blue: #0072CE;
  --nhs-light-blue: #41B6E6;
  --nhs-aqua-blue: #00A9CE;
  --nhs-green: #009639;
  --nhs-light-green: #78BE20;
  --nhs-orange: #ED8B00;
  --nhs-warm-yellow: #FFB81C;
  --nhs-purple: #330072;
  --nhs-pink: #AE2573;
  --nhs-dark-grey: #425563;
  --nhs-mid-grey: #768692;
  --nhs-pale-grey: #E8EDEE;

  /* Baseline is NHS Blue rather than the mid grey used elsewhere for this
     tier: at badge size mid grey is hard to tell apart from Silver. */
  --tier-baseline: #005EB8;
  --tier-bronze: #CD7F32;
  --tier-silver: #9EA8B3;
  --tier-gold: #D4AC0D;

  /* Material theme overrides */
  --md-primary-fg-color: var(--nhs-blue);
  --md-primary-fg-color--light: var(--nhs-bright-blue);
  --md-primary-fg-color--dark: var(--nhs-dark-blue);
  --md-accent-fg-color: var(--nhs-bright-blue);
  --md-typeset-a-color: var(--nhs-blue);

  /* Clearance kept below the catalogue's sticky sidebar for the fixed demo
     bar; raised at narrow widths in the media queries below, where its text
     wraps to more lines. */
  --nrcl-bar-height: 3rem;

  /* Semantic colours, overridden for the dark scheme below */
  --nrcl-surface: var(--nhs-pale-grey);
  --nrcl-card-bg: #fff;
  --nrcl-border: var(--nhs-pale-grey);
  --nrcl-muted: var(--nhs-mid-grey);
  --nrcl-heading: var(--nhs-dark-grey);
}

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--nhs-light-blue);
  --md-accent-fg-color: var(--nhs-light-blue);
  --nrcl-surface: #2b313a;
  --nrcl-card-bg: #1e242c;
  --nrcl-border: #3c4550;
  --nrcl-muted: #9eaab4;
  --nrcl-heading: #cdd6dd;
}

body,
input,
button,
select {
  font-family: Frutiger, "Frutiger W01", Arial, sans-serif;
}

/* Demo disclaimer, rendered by overrides/main.html. Pinned to the bottom of the
   viewport while there is content above it, then docked into normal flow just
   above the footer once the foot of the page is reached, so it never covers
   the footer and leaves no gap. --nrcl-bar-height keeps the catalogue's sticky
   sidebar clear of the bar while it is pinned. */
.nrcl-demo-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  background: var(--nhs-warm-yellow);
  color: #212b32;
  border-top: 3px solid var(--nhs-orange);
}

.nrcl-demo-bar p {
  max-width: 61rem;
  margin: 0 auto;
  padding: 0.55rem 1rem;
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: center;
}

.nrcl-demo-bar--docked {
  position: static;
}

@media (max-width: 900px) {
  :root {
    --nrcl-bar-height: 4.5rem;
  }
}

@media (max-width: 600px) {
  :root {
    --nrcl-bar-height: 6rem;
  }
}

@media print {
  .nrcl-demo-bar {
    display: none;
  }
}

/* Badges */
.tier-badge {
  display: inline-block;
  padding: 0.1em 0.7em;
  border-radius: 1em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.tier-baseline { background: var(--tier-baseline); }
.tier-bronze { background: var(--tier-bronze); }
.tier-silver { background: var(--tier-silver); color: #212b32; }
.tier-gold { background: var(--tier-gold); color: #212b32; }

.quality-badge {
  display: inline-block;
  padding: 0.1em 0.6em;
  border-radius: 1em;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: help;
}
.quality-high { background: var(--nhs-green); color: #fff; }
.quality-medium { background: var(--nhs-warm-yellow); color: #212b32; }
.quality-low { background: var(--nhs-mid-grey); color: #fff; }

.lang-badge,
.platform-badge,
.category-tag,
.visibility-badge {
  display: inline-block;
  padding: 0.1em 0.6em;
  border-radius: 0.25em;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.lang-badge { background: var(--nhs-dark-blue); color: #fff; }
.platform-badge { background: var(--nrcl-surface); color: var(--nrcl-heading); }
.category-tag { background: var(--nhs-aqua-blue); color: #fff; }
.visibility-badge { background: var(--nrcl-surface); color: var(--nrcl-heading); }
.visibility-private,
.visibility-internal { background: var(--nhs-warm-yellow); color: #212b32; }

.atlas-badge,
a.atlas-badge {
  display: inline-block;
  padding: 0.1em 0.6em;
  border-radius: 0.25em;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--nhs-purple);
  color: #fff;
  white-space: nowrap;
}
a.atlas-badge:hover { color: #fff; opacity: 0.85; }
[data-md-color-scheme="slate"] .atlas-badge { background: #6b46a8; }

.entry-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  align-items: center;
}

.entry-logo { max-width: 320px; }

/* Tag chips */
.tag-chip,
a.tag-chip {
  display: inline-block;
  padding: 0.05em 0.6em;
  border-radius: 1em;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--nrcl-surface);
  color: var(--nrcl-heading);
  white-space: nowrap;
}
a.tag-chip:hover {
  background: var(--nhs-blue);
  color: #fff;
}
.tag-chip-active,
a.tag-chip-active {
  background: var(--nhs-blue);
  color: #fff;
}
.tag-more {
  font-size: 0.72rem;
  color: var(--nrcl-muted);
}
.active-tags {
  font-size: 0.8rem;
  color: var(--nrcl-muted);
  margin: 0.5rem 0 0;
}

/* Entry list rows */
.entry-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.entry-row {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--nrcl-border);
  border-left: 4px solid var(--nhs-blue);
  border-radius: 0.4rem;
  background: var(--nrcl-card-bg);
  box-shadow: 0 1px 3px rgba(66, 85, 99, 0.15);
}
.entry-row:hover {
  box-shadow: 0 3px 9px rgba(66, 85, 99, 0.3);
}
.entry-row-main {
  flex: 1 1 auto;
  min-width: 0;
}
.entry-row-title,
.entry-row h3 {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  line-height: 1.3;
}
.entry-row-title a { color: var(--md-typeset-a-color); }
.entry-row-meta {
  font-size: 0.78rem;
  color: var(--nrcl-muted);
  margin: 0 0 0.35rem;
}
.entry-row-desc {
  font-size: 0.82rem;
  margin: 0;
}
.entry-row-tags {
  margin: 0.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}
.entry-row-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3em;
  flex: 0 0 auto;
}
@media (max-width: 700px) {
  .entry-row { flex-direction: column; gap: 0.5rem; }
  .entry-row-aside { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* Catalogue layout: filter sidebar + list */
.catalog-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .catalog-layout { grid-template-columns: 1fr; }
}

.catalog-filters {
  border: 1px solid var(--nrcl-border);
  border-radius: 0.4rem;
  padding: 1rem;
  background: var(--nrcl-surface);
  font-size: 0.8rem;
  position: sticky;
  top: 4.5rem;
  max-height: calc(100vh - 6rem - var(--nrcl-bar-height));
  overflow-y: auto;
}
@media (max-width: 900px) {
  .catalog-filters { position: static; max-height: none; }
}
.catalog-filters fieldset {
  border: none;
  margin: 0 0 0.9rem;
  padding: 0;
}
.catalog-filters legend {
  font-weight: 700;
  color: var(--nrcl-heading);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}
.catalog-filters label {
  display: flex;
  align-items: center;
  gap: 0.4em;
  cursor: pointer;
  padding: 0.1rem 0;
}
.catalog-filters .filter-count {
  color: var(--nrcl-muted);
  font-weight: 400;
}
.catalog-filters input[type="checkbox"],
.catalog-filters input[type="radio"] {
  accent-color: var(--nhs-blue);
}
.catalog-filters button {
  width: 100%;
  padding: 0.4rem;
  border: none;
  border-radius: 0.25rem;
  background: var(--nhs-blue);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.catalog-filters button:hover { background: var(--nhs-dark-blue); }

.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.catalog-toolbar input[type="search"] {
  flex: 1 1 14rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--nrcl-heading);
  border-radius: 0.25rem;
  font-size: 0.9rem;
  background: var(--nrcl-card-bg);
  color: inherit;
}
.catalog-toolbar input[type="search"]:focus {
  outline: 3px solid var(--nhs-warm-yellow);
  border-color: #212b32;
}
.catalog-toolbar select {
  padding: 0.5rem;
  border: 2px solid var(--nrcl-heading);
  border-radius: 0.25rem;
  font-size: 0.85rem;
  background: var(--nrcl-card-bg);
  color: inherit;
}
.catalog-count {
  font-size: 0.85rem;
  color: var(--nrcl-muted);
  margin: 0.5rem 0 0;
}
.catalog-empty {
  padding: 2rem;
  text-align: center;
  color: var(--nrcl-muted);
  border: 1px dashed var(--nrcl-muted);
  border-radius: 0.4rem;
}

/* Home page */
.hero {
  background: linear-gradient(135deg, var(--nhs-dark-blue), var(--nhs-blue) 60%, var(--nhs-bright-blue));
  color: #fff;
  border-radius: 0.5rem;
  padding: 3rem 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.hero h1 {
  color: #fff;
  margin: 0 0 0.5rem;
  font-size: 2.2rem;
}
.hero p {
  font-size: 1.1rem;
  margin: 0 auto 1.5rem;
  max-width: 38rem;
  opacity: 0.95;
}
.hero p:last-child { margin-bottom: 0; }
.hero-cta,
a.hero-cta {
  display: inline-block;
  background: var(--nhs-green);
  color: #fff;
  font-weight: 700;
  padding: 0.7rem 1.6rem;
  border-radius: 0.3rem;
  font-size: 1rem;
  margin: 0 0.3rem;
}
a.hero-cta:hover { background: #007a2f; color: #fff; }
a.hero-cta-secondary {
  background: transparent;
  border: 2px solid #fff;
}
a.hero-cta-secondary:hover { background: rgba(255, 255, 255, 0.15); }

.stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (max-width: 700px) {
  .stats-bar { grid-template-columns: 1fr; }
}
.stat,
a.stat {
  text-align: center;
  padding: 1rem;
  border-radius: 0.4rem;
  background: var(--nrcl-surface);
  color: inherit;
}
a.stat:hover { outline: 2px solid var(--nhs-blue); }
.stat .stat-number {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--md-typeset-a-color);
  line-height: 1.1;
}
.stat .stat-label {
  font-size: 0.85rem;
  color: var(--nrcl-heading);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.success-story {
  border-left: 5px solid var(--nhs-green);
  background: var(--nrcl-surface);
  border-radius: 0 0.4rem 0.4rem 0;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.success-story h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.success-story h3 a { color: var(--md-typeset-a-color); }
.success-story p { margin: 0; font-size: 0.9rem; }
.success-story .story-org {
  font-size: 0.78rem;
  color: var(--nrcl-muted);
  display: block;
  margin-top: 0.4rem;
}

.tier-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0;
}
.tier-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr 2rem;
  gap: 0.75rem;
  align-items: center;
}
.tier-row .tier-bar-track {
  background: var(--nrcl-surface);
  border-radius: 1em;
  height: 1.1rem;
  overflow: hidden;
}
.tier-row .tier-bar {
  height: 100%;
  border-radius: 1em;
  min-width: 2px;
}
.tier-bar-gold { background: var(--tier-gold); }
.tier-bar-silver { background: var(--tier-silver); }
.tier-bar-bronze { background: var(--tier-bronze); }
.tier-bar-baseline { background: var(--tier-baseline); }
.tier-row .tier-count {
  font-weight: 700;
  color: var(--nrcl-heading);
  text-align: right;
}

/* Self-assessment wizard (framework page) */
.assess-wizard {
  border: 1px solid var(--nrcl-border);
  border-left: 4px solid var(--nhs-blue);
  border-radius: 0.4rem;
  background: var(--nrcl-surface);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.assess-wizard fieldset {
  border: none;
  margin: 0 0 0.75rem;
  padding: 0;
}
.assess-wizard legend {
  font-weight: 700;
  color: var(--nrcl-heading);
  margin-bottom: 0.25rem;
}
.assess-wizard label {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.15rem 0;
  cursor: pointer;
  font-size: 0.9rem;
}
.assess-wizard input[type="checkbox"] { accent-color: var(--nhs-blue); }
.assess-result {
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.3rem;
  background: var(--nrcl-card-bg);
  font-size: 0.95rem;
}