/* ============================================
   CDS Brand Overrides for Material for MkDocs

   Colour palette (CDS Brandbook v6):
     Teal (primary):  #1BA396  — Pantone 7473 C
     Charcoal:        #1B1B1B  — Pantone Neutral Black C
     Grey:            #EDEDED  — Pantone 663C
     White:           #FFFFFF
     Orange:          #F05222  — Pantone 1655 C
     Navy:            #1B345C  — Pantone 534 C
     Magenta:         #E6007D  — Pantone 219 C
   ============================================ */

/* ============================================
   Fonts — FS Industrie (self-hosted OTF)
   Paths are relative to this CSS file, so
   fonts must live at docs/assets/fonts/
   ============================================ */

@font-face {
  font-family: "FS Industrie";
  src: url("fonts/FSIndustrie-Book.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FS Industrie";
  src: url("fonts/FSIndustrie-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FS Industrie";
  src: url("fonts/FSIndustrie-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FS Industrie";
  src: url("fonts/FSIndustrie-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   CSS Custom Properties
   ============================================ */

:root {
  /* Primary brand colour — Teal */
  --md-primary-fg-color:        #1BA396;
  --md-primary-fg-color--light: #2CB9AB;
  --md-primary-fg-color--dark:  #138078;

  /* Accent colour (links, highlights) */
  --md-accent-fg-color:              #1BA396;
  --md-accent-fg-color--transparent: rgba(27, 163, 150, 0.1);

  /* Link colour */
  --md-typeset-a-color: #1BA396;

  /* Fonts */
  --md-text-font: "FS Industrie", "Calibri", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --md-code-font: "Consolas", "Cascadia Code", "Roboto Mono", "Courier New", monospace;

  /* Named brand palette — use these variables in any custom CSS below */
  --cds-teal:     #1BA396;
  --cds-charcoal: #1B1B1B;
  --cds-grey:     #EDEDED;
  --cds-navy:     #1B345C;
  --cds-orange:   #F05222;
  --cds-magenta:  #E6007D;
}

/* ============================================
   Header
   ============================================ */

.md-header {
  background-color: var(--cds-teal);
}

/* ============================================
   Navigation tabs (if enabled)
   Show tabs from 70em (~1120px) — lower than Material's
   default 76.25em to support typical laptop viewports.
   ============================================ */

.md-tabs {
  background-color: var(--md-primary-fg-color--dark);
}

@media screen and (min-width: 70em) {
  .md-tabs {
    display: block;
  }
}

/* ============================================
   Search bar
   ============================================ */

.md-search__input:focus {
  border-color: var(--cds-teal);
}

/* ============================================
   Headings
   h1/h2 — Navy (authoritative, professional)
   h3     — Teal (consistent with brand accent)
   ============================================ */

.md-typeset h1 {
  color: var(--cds-navy);
  font-weight: 900;
}

.md-typeset h2 {
  color: var(--cds-navy);
  font-weight: 700;
}

.md-typeset h3 {
  color: var(--cds-teal);
  font-weight: 700;
}

/* ============================================
   Admonitions
   tip     — Teal (on-brand positive callout)
   warning — Orange (draws attention, Pantone 1655 C)
   ============================================ */

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--cds-teal);
}

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: rgba(27, 163, 150, 0.1);
}

.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  color: var(--cds-teal);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--cds-orange);
}

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(240, 82, 34, 0.1);
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  color: var(--cds-orange);
}

/* ============================================
   Tags
   ============================================ */

.md-typeset .md-tag {
  background-color: rgba(27, 163, 150, 0.1);
  color: var(--md-primary-fg-color--dark);
}

/* ============================================
   Tables
   Navy header row; light grey on even rows
   ============================================ */

.md-typeset table:not([class]) th {
  background-color: var(--cds-navy);
  color: #FFFFFF;
}

.md-typeset table:not([class]) tr:nth-child(even) td {
  background-color: var(--cds-grey);
}

/* ============================================
   Footer
   ============================================ */

.md-footer {
  background-color: var(--cds-charcoal);
}

.md-footer-meta {
  background-color: var(--cds-charcoal);
}

.md-footer__link,
.md-footer-meta__inner a {
  color: rgba(255, 255, 255, 0.7);
}

.md-footer-meta__inner a:hover {
  color: #ffffff;
}

.md-social__link svg {
  fill: rgba(255, 255, 255, 0.7);
}

.md-social__link:hover svg {
  fill: #ffffff;
}

/* ============================================
   Logo sizing in header
   ============================================ */

.md-header__button.md-logo img {
  height: 1.8rem;
  width: auto;
}

/* ============================================
   Code blocks
   ============================================ */

.md-typeset code {
  border-radius: 4px;
}