/* PyNTLP site style: the PhD deck palette (navy, orange, slate, grey) and Arial, for the whole site,
   plus the components of the home page (classes prefixed ntlp-). No JavaScript, no theme overrides. */

:root {
  --ntlp-navy: #223041;
  --ntlp-orange: #f39a24;
  --ntlp-slate: #566272;
  --ntlp-grey: #7c858f;
  --ntlp-rule: #e3e1e1;
  --ntlp-panel: #f4f5f6;
  --ntlp-tint: #f6e5d0;

  /* Material's own variables, mapped to the deck */
  --md-primary-fg-color: var(--ntlp-navy);
  --md-primary-fg-color--light: var(--ntlp-slate);
  --md-primary-fg-color--dark: #18222e;
  --md-accent-fg-color: var(--ntlp-orange);
  --md-accent-fg-color--transparent: rgba(243, 154, 36, 0.12);
  --md-typeset-a-color: var(--ntlp-navy);
  --md-text-font: "Arial";
  --md-code-font: "Consolas";
}

body,
.md-typeset {
  font-family: Arial, Helvetica, sans-serif;
}

/* Headings in navy and bold, as on the deck's slides */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--ntlp-navy);
  font-weight: 700;
}

.md-typeset a {
  text-decoration: underline;
  text-decoration-color: rgba(34, 48, 65, 0.35);
  text-underline-offset: 0.15em;
}

.md-typeset a:hover {
  color: var(--ntlp-orange);
  text-decoration-color: var(--ntlp-orange);
}

/* The thin orange rule under the header, echoing the deck's footer rule */
.md-header {
  border-bottom: 3px solid var(--ntlp-orange);
}

/* ------------------------------------------------------------------ documentation pages */

/* The collapsed "Show details" block at the foot of each page (pymdownx.blocks.details, type more):
   a navy frame and a panel-grey bar, with the orange chevron as the only accent */
.md-typeset details.more {
  border: 1px solid var(--ntlp-navy);
  border-radius: 3px;
  box-shadow: none;
  font-size: inherit;
}

.md-typeset details.more > summary {
  padding-left: 0.9rem;
  background-color: var(--ntlp-panel);
  color: var(--ntlp-navy);
  font-weight: 700;
}

.md-typeset details.more > summary::before {
  display: none;
}

.md-typeset details.more > summary::after {
  background-color: var(--ntlp-orange);
}

.md-typeset details.more[open] > summary {
  border-bottom: 1px solid var(--ntlp-rule);
}

/* ------------------------------------------------------------------ home page */

.ntlp-landing {
  color: var(--ntlp-slate);
  font-size: 0.9rem;
  line-height: 1.6;
}

.ntlp-landing a.ntlp-button {
  text-decoration: none;
}

.ntlp-eyebrow {
  margin: 0 0 0.6rem;
  color: var(--ntlp-orange);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ntlp-hero {
  padding: 2.5rem 0 1.5rem;
}

.md-typeset .ntlp-hero h1 {
  max-width: 24ch;
  margin: 0 0 1.2rem;
  color: var(--ntlp-navy);
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.ntlp-lead {
  max-width: 46rem;
  margin: 0 0 1.6rem;
  font-size: 1.08rem;
  line-height: 1.55;
}

.ntlp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.ntlp-button {
  display: inline-block;
  padding: 0.62rem 1.25rem;
  border: 2px solid var(--ntlp-navy);
  border-radius: 3px;
  color: var(--ntlp-navy) !important;
  font-size: 0.82rem;
  font-weight: 700;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.ntlp-button--primary {
  background: var(--ntlp-navy);
  color: #ffffff !important;
}

.ntlp-button:hover {
  border-color: var(--ntlp-orange);
  background: var(--ntlp-orange);
  color: #ffffff !important;
}

.ntlp-section {
  margin-top: 3.6rem;
}

.md-typeset .ntlp-section h2 {
  margin: 0 0 1rem;
  font-size: 1.55rem;
  line-height: 1.25;
}

.md-typeset .ntlp-section h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}

.ntlp-section p {
  margin: 0 0 0.9rem;
}

/* Text beside a figure */
.ntlp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: center;
}

.ntlp-figure {
  margin: 0;
}

.ntlp-figure img {
  display: block;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
}

.ntlp-figure figcaption {
  max-width: 34rem;
  margin: 0.6rem auto 0;
  color: var(--ntlp-grey);
  font-size: 0.74rem;
  font-style: normal;
  line-height: 1.45;
  text-align: left;
}

/* Key facts: the one warm block on the page */
.ntlp-facts {
  padding: 1.8rem 1.6rem 1.4rem;
  border-radius: 4px;
  background: var(--ntlp-tint);
}

.ntlp-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 1.2rem;
}

.ntlp-stat {
  padding-top: 0.7rem;
  border-top: 3px solid var(--ntlp-navy);
}

.ntlp-stat strong {
  display: block;
  color: var(--ntlp-navy);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.1;
}

.ntlp-stat > span {
  display: block;
  margin-top: 0.45rem;
  color: var(--ntlp-slate);
  font-size: 0.78rem;
  line-height: 1.45;
}

.ntlp-ref {
  color: var(--ntlp-grey);
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
}

.ntlp-note {
  margin-top: 1.1rem !important;
  color: var(--ntlp-grey);
  font-size: 0.74rem;
}

/* Cards */
.ntlp-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
}

.ntlp-cards--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ntlp-card {
  padding: 1.1rem 1.1rem 0.9rem;
  border: 1px solid var(--ntlp-rule);
  border-top: 3px solid var(--ntlp-orange);
  border-radius: 3px;
  background: var(--ntlp-panel);
}

.ntlp-card p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* How it works: three steps, then three outcomes */
.ntlp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.4rem 0 0;
  counter-reset: ntlp-step;
}

.ntlp-step {
  position: relative;
  padding: 1.1rem 1.1rem 1rem 3.4rem;
  border: 1px solid var(--ntlp-rule);
  border-radius: 3px;
  background: #ffffff;
  counter-increment: ntlp-step;
}

.ntlp-step::before {
  content: counter(ntlp-step);
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--ntlp-orange);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
}

.ntlp-step p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
}

.ntlp-flow-arrow {
  margin: 0.7rem 0;
  color: var(--ntlp-orange);
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
}

.ntlp-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.ntlp-outcome {
  padding: 1rem 1.1rem;
  border-radius: 3px;
}

.ntlp-outcome p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
}

.md-typeset .ntlp-outcome h3 {
  margin-bottom: 0.3rem;
}

.ntlp-outcome--correct {
  background: var(--ntlp-navy);
  color: #ffffff;
}

.md-typeset .ntlp-outcome--correct h3 {
  color: #ffffff;
}

.ntlp-outcome--keep {
  border: 1px solid var(--ntlp-rule);
  background: var(--ntlp-panel);
}

.ntlp-outcome--review {
  border: 1px solid #ecd2b0;
  background: var(--ntlp-tint);
}

/* Research, team and references */
.ntlp-team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.ntlp-team p {
  margin: 0;
  font-size: 0.82rem;
}

.ntlp-small {
  color: var(--ntlp-grey);
  font-size: 0.76rem;
  line-height: 1.5;
}

.ntlp-references {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--ntlp-grey);
  font-size: 0.74rem;
  line-height: 1.5;
}

.ntlp-references li {
  margin-bottom: 0.45rem;
}

.ntlp-references a {
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ narrow screens */

@media screen and (max-width: 1020px) {
  .ntlp-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ntlp-cards--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 820px) {
  .ntlp-split,
  .ntlp-cards,
  .ntlp-steps,
  .ntlp-outcomes,
  .ntlp-team {
    grid-template-columns: minmax(0, 1fr);
  }

  .ntlp-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 560px) {
  .ntlp-cards--four,
  .ntlp-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ PyNTLP additions */

/* One day as a 24-hour bar with the free window marked. Positions are fractions of the day,
   so the diagram stays true at any width. It draws no load curve, so it implies no shape. */
/* Material centres figures, shrinks them to fit and italicises captions; this one is a layout block */
.md-typeset .ntlp-day {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  text-align: left;
}

.ntlp-day-label {
  position: relative;
  height: 1.5rem;
}

.ntlp-day-label span {
  position: absolute;
  left: calc(12.5 / 24 * 100%);
  transform: translateX(-50%);
  color: var(--ntlp-orange);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.ntlp-day-track {
  position: relative;
  height: 3.2rem;
  border: 1px solid var(--ntlp-rule);
  border-radius: 3px;
  background: repeating-linear-gradient(
    to right,
    var(--ntlp-panel) 0,
    var(--ntlp-panel) calc(100% / 24 - 1px),
    var(--ntlp-rule) calc(100% / 24 - 1px),
    var(--ntlp-rule) calc(100% / 24)
  );
}

.ntlp-day-window {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: calc(11 / 24 * 100%);
  width: calc(3 / 24 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ntlp-orange);
  border-radius: 3px;
  background: var(--ntlp-tint);
  color: var(--ntlp-navy);
  font-size: 1.4rem;
  font-weight: 700;
}

.ntlp-day-scale {
  position: relative;
  height: 1.3rem;
  margin-top: 0.3rem;
  color: var(--ntlp-grey);
  font-size: 0.7rem;
}

.ntlp-day-scale span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.ntlp-day-scale span:first-child {
  transform: none;
}

.ntlp-day-scale span:last-child {
  transform: translateX(-100%);
}

/* Material's ".md-typeset ul:not([hidden])" sets display: flow-root, so this needs the extra class
   to win; one column at every width, because the figure sits in half the page */
.md-typeset .ntlp-day .ntlp-day-questions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.md-typeset .ntlp-day-questions li {
  margin: 0;
  list-style: none;
  padding: 0.7rem 0.8rem;
  border-left: 3px solid var(--ntlp-orange);
  background: var(--ntlp-panel);
  color: var(--ntlp-navy);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
}

.md-typeset .ntlp-day figcaption {
  max-width: none;
  margin: 0.8rem 0 0;
  font-style: normal;
  text-align: left;
  color: var(--ntlp-grey);
  font-size: 0.74rem;
  line-height: 1.45;
}

/* The research question, set apart from the body text */
.ntlp-question {
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 4px solid var(--ntlp-orange);
  color: var(--ntlp-navy);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
}

/* AQF: a separate study, framed apart from the package story */
.ntlp-aside {
  padding: 1.6rem 1.6rem 1.2rem;
  border: 1px solid var(--ntlp-rule);
  border-left: 4px solid var(--ntlp-slate);
  border-radius: 3px;
  background: var(--ntlp-panel);
}

@media screen and (max-width: 820px) {
  .ntlp-aside {
    padding: 1.2rem 1.1rem 1rem;
  }
}