/* Apply Roboto Slab */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;700&display=swap');

/* ══════════════════════════════════════════
   isp6 Brand Palette
   ──────────────────────────────────────────
   Dark blue:  #19467f  (primary)
   Baby blue:  #79c2e9  (secondary accent)
   Orange:     #f7941d  (CTA / highlight)
   Dark grey:  #414042  (body text)
   White:      #f9f9f9  (page background)
   ══════════════════════════════════════════ */

/* ── Light mode ── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:              #eaeaea;
  --md-primary-fg-color--light:       #f2f2f2;
  --md-primary-fg-color--dark:        #d4d4d4;
  --md-primary-bg-color:              #414042;
  --md-primary-bg-color--light:       #9c9c9c;

  --md-accent-fg-color:               #79c2e9;
  --md-accent-fg-color--transparent:  rgba(121, 194, 233, 0.1);

  --md-default-fg-color:              #414042;
  --md-default-fg-color--light:       #9c9c9c;
  --md-default-fg-color--lighter:     rgba(65, 64, 66, 0.32);
  --md-default-fg-color--lightest:    rgba(65, 64, 66, 0.07);
  --md-default-bg-color:              #f9f9f9;

  --md-typeset-a-color:               #19467f;
}

/* ── Dark mode ── */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:              #19467f;
  --md-primary-fg-color--light:       #50749f;
  --md-primary-fg-color--dark:        #0f2d52;
  --md-primary-bg-color:              #f9f9f9;
  --md-primary-bg-color--light:       #eaeaea;

  --md-accent-fg-color:               #f7941d;
  --md-accent-fg-color--transparent:  rgba(247, 148, 29, 0.1);

  --md-default-fg-color:              #eaeaea;
  --md-default-fg-color--light:       #bac7d8;
  --md-default-fg-color--lighter:     rgba(234, 234, 234, 0.32);
  --md-default-fg-color--lightest:    rgba(234, 234, 234, 0.12);

  --md-typeset-a-color:               #79c2e9;
  --md-typeset-color:                 #eaeaea;
}

[data-md-color-scheme="slate"] .md-typeset blockquote {
  color: #eaeaea;
}

body, h1, h2, h3, h4 {
  font-family: 'Roboto Slab', serif !important;
}


/* ── Feint watermark ──────────────────────────────────────── */

.md-content::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  background-image: url('../assets/logo.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40%;
  opacity: 0.03;
  pointer-events: none;
  z-index: -1;
}

[data-md-color-scheme="slate"] .md-content::before {
  opacity: 0.04;
}


/* ── Hero banner (landing page) ───────────────────────────── */

.hero {
  text-align: center;
}

.hero-logo {
  max-width: 340px;
  width: 100%;
  height: 120px; /* Fixed height for consistent mode swapping */
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 2px 8px rgba(25, 70, 127, 0.12));
}

/* Swap the hero logo when dark mode is active */
[data-md-color-scheme="slate"] .hero-logo {
    content: url("../assets/logo-wide-dark.png"); /* Update to .svg if your dark logo is an SVG */
}

.hero-tagline {
  font-family: 'Roboto Slab', serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: #50749f;
  margin-top: 0.6rem;
  letter-spacing: 0.02em;
}

[data-md-color-scheme="slate"] .hero-tagline {
  color: #bac7d8;
}


/* ── Header bar ───────────────────────────────────────────── */

.md-header {
  border-bottom: 3px solid #19467f;
}

[data-md-color-scheme="slate"] .md-header {
  border-bottom-color: #79c2e9;
}

/* 1. Size specifically for LIGHT mode logo */
.md-header .md-logo img {
    height: 3.2rem !important; /* Increased to make the light logo bigger */
    width: auto !important;
    object-fit: contain;
}

/* 2. Swap the image AND set a specific size for DARK mode logo */
[data-md-color-scheme="slate"] .md-logo img {
    content: url("../assets/logo-wide-dark.png"); /* Update to .svg if necessary */
    height: 2.2rem !important; /* Kept smaller so it doesn't overpower the light one */
}


/* ── Horizontal rules (brand gradient) ────────────────────── */

.md-typeset hr {
  border: none;
  height: 3px;
  background: linear-gradient(90deg, #79c2e9 0%, #19467f 50%, #f7941d 100%);
  opacity: 0.5;
  margin: 2em 0;
}

[data-md-color-scheme="slate"] .md-typeset hr {
  opacity: 0.7;
}


/* ── Headings ─────────────────────────────────────────────── */

.md-typeset h1 {
  border-bottom: 3px solid #79c2e9;
  padding-bottom: 0.4em;
}

.md-typeset h2 {
  border-bottom: 1px solid #bac7d8;
  padding-bottom: 0.3em;
}

[data-md-color-scheme="slate"] .md-typeset h2 {
  border-bottom-color: #50749f;
}


/* ── Blockquotes ──────────────────────────────────────────── */

.md-typeset blockquote {
  border-left: 4px solid #19467f;
  background: rgba(25, 70, 127, 0.03);
  padding: 0.6em 1em;
  border-radius: 0 5px 5px 0;
  color: #414042;
}

[data-md-color-scheme="slate"] .md-typeset blockquote {
  border-left-color: #79c2e9;
  background: rgba(121, 194, 233, 0.06);
}


/* ── Tables ───────────────────────────────────────────────── */

.md-typeset table:not([class]) th {
  background-color: #19467f;
  color: #f9f9f9;
  font-weight: 700;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: #50749f;
}

.md-typeset table:not([class]) tr:nth-child(even) td {
  background-color: rgba(186, 199, 216, 0.12);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:nth-child(even) td {
  background-color: rgba(121, 194, 233, 0.05);
}


/* ── Address anatomy diagram ──────────────────────────────── */

.md-typeset table.address-anatomy {
  border-collapse: collapse;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.9em;
  width: 100%;
  margin: 1em 0;
}

.md-typeset table.address-anatomy th,
.md-typeset table.address-anatomy td {
  border: 1px solid #9c9c9c;
  text-align: center;
  padding: 6px 12px;
}

.md-typeset table.address-anatomy th {
  background-color: #19467f;
  color: #f9f9f9;
  font-weight: normal;
}

[data-md-color-scheme="slate"] .md-typeset table.address-anatomy th {
  background-color: #50749f;
}


/* ── Links ────────────────────────────────────────────────── */

.md-typeset a:hover {
  color: #79c2e9;
  text-decoration: underline;
}


/* ── Code blocks ──────────────────────────────────────────── */

.md-typeset pre > code {
  border-left: 3px solid #79c2e9;
  border-radius: 0 5px 5px 0;
}

[data-md-color-scheme="slate"] .md-typeset pre > code {
  border-left-color: #f7941d;
}

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


/* ── Footer ───────────────────────────────────────────────── */

.md-footer {
  border-top: 3px solid #19467f;
}

[data-md-color-scheme="slate"] .md-footer {
  border-top-color: #79c2e9;
}


/* ── Navigation tabs (active state) ───────────────────────── */

.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
}


/* ── Always use hamburger drawer, hide permanent sidebar ─── */

/* On wide screens Material shows the sidebar permanently and
   hides the hamburger. Override both so the sidebar only
   appears as a slide-out drawer triggered by the burger icon. */

@media screen and (min-width: 76.25em) {
  /* Keep the hamburger visible on desktop */
  .md-header__button[for="__drawer"] {
    display: block;
  }

  /* Reclaim the left gutter space taken by the nav */
  .md-content {
    margin-left: 0;
  }
}

/* ── Off-canvas Drawer Styles ─────────────────────────────── */

/* 1. The dark backdrop (scrim) */
.scrim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), visibility 250ms;
}

/* 2. The navigation drawer itself */
.md-sidebar--primary {
  position: fixed;
  top: 0;
  left: 0;
  width: 18.8rem; /* Adjust width as needed */
  height: 100%;
  z-index: 10000;
  transform: translateX(-100%);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 1rem rgba(0,0,0,0.2);
  background-color: var(--md-default-bg-color);
}

/* 3. The "open" state, controlled by a class on the body */
body.is-drawer-open .md-sidebar--primary {
  transform: translateX(0);
}

body.is-drawer-open .scrim {
  visibility: visible;
  opacity: 1;
}

/* 4. A close button inside the drawer */
.close-drawer-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 10001; /* Ensure it's on top of nav content */
  color: var(--md-default-fg-color);
  background-color: var(--md-default-bg-color);
  border-radius: 50%;
  line-height: 0;
}
.close-drawer-button:hover {
    color: var(--md-accent-fg-color);
}

/* ── Hide navigation tabs (top horizontal links) ────────── */

.md-tabs {
  display: none;
}


/* ── Orange CTA (vibrant) ─────────────────────────────────── */

.cta-orange {
  display: block;
  margin: 2em 0;
  padding: 1.4em 1.6em;
  background: rgba(247, 148, 29, 0.08);
  border-left: 6px solid #f7941d;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(247, 148, 29, 0.25);
  color: #414042;
}

.cta-orange h3,
.cta-orange p {
  color: #414042;
  margin: 0 0 0.4em 0;
}

.cta-orange h3 {
  font-weight: 700;
  font-size: 1.15rem;
}

.cta-orange .cta-button {
  display: inline-block;
  margin-top: 0.8em;
  padding: 0.7em 1.4em;
  background-color: #19467f;
  color: #f9f9f9 !important;
  font-weight: 700;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(25, 70, 127, 0.3);
  transition: background-color 150ms ease, transform 150ms ease;
}

.cta-orange .cta-button:hover {
  background-color: #0f2d52;
  color: #f9f9f9 !important;
  text-decoration: none;
  transform: translateY(-1px);
}

[data-md-color-scheme="slate"] .cta-orange {
  background: linear-gradient(135deg, #f7941d 0%, #c77714 100%);
  border-left-color: #fabe79;
  box-shadow: 0 4px 14px rgba(247, 148, 29, 0.35);
}

[data-md-color-scheme="slate"] .cta-orange h3,
[data-md-color-scheme="slate"] .cta-orange p {
  color: #f9f9f9;
}

[data-md-color-scheme="slate"] .cta-orange .cta-button {
  background-color: #f9f9f9;
  color: #19467f !important;
}

[data-md-color-scheme="slate"] .cta-orange .cta-button:hover {
  background-color: #eaeaea;
  color: #19467f !important;
}


/* ── Orange callout (inline highlight) ────────────────────── */

.callout-orange {
  margin: 1.5em 0;
  padding: 0.9em 1.2em;
  background: rgba(247, 148, 29, 0.08);
  border-left: 4px solid #f7941d;
  border-radius: 0 5px 5px 0;
  color: #414042;
}

[data-md-color-scheme="slate"] .callout-orange {
  background: rgba(247, 148, 29, 0.12);
  color: #eaeaea;
}