/* ============================================================================
   AYP Wiki — brand styling to blend with https://www.aypinternational.com
   (OceanWP Pro + Elementor Pro). All colour/font values below were read from
   the live site's *computed* styles via browser devtools, not guessed.

   ALL brand tokens live in ONE place: the :root block right below. Everything
   else only references these variables — change a token here and it propagates.
   ============================================================================ */

/* AYP International uses Raleway for both body and headings (OceanWP typography).
   Raleway is loaded by Material via `theme.font.text: Raleway` in mkdocs.yml, so
   no @font-face / @import is needed here. */

:root {
  /* ---- AYP International brand tokens (source of truth) ------------------ */
  /* Verified against the live site's computed styles:
     #top-bar-wrap bg #0b6982 · .entry-title #3e0d0d · body #4a4a4a · a #1496aa */
  --ayp-teal:            #0b6982; /* brand primary: top bar, header accents, nav */
  --ayp-teal-deep:       #075260; /* darker teal: hover / footer anchor          */
  --ayp-teal-hover:      #054c58; /* header/nav hover state                       */
  --ayp-maroon:          #3e0d0d; /* AYP International page-title colour          */
  --ayp-link:            #1496aa; /* brand link accent (AYPI anchor / blockquote) */
  --ayp-link-text:       #0b6982; /* body-text links: deeper teal for AA contrast */
  --ayp-link-hover:      #054c58; /* link hover                                   */
  --ayp-button:          #338ea7; /* AYP International button colour (Tristan)    */
  --ayp-green:           #84c340; /* secondary accent (form focus on live site)  */

  --ayp-topbar-bg:       #0b6982; /* steel-teal utility bar (matches live site)  */
  --ayp-topbar-fg:       #ffffff; /* utility bar link colour                     */
  --ayp-topbar-fg-hover: #d3d3d3; /* utility bar link hover                      */

  --ayp-header-bg:       #ffffff; /* white logo header (mirrors the live site)   */
  --ayp-page-bg:         #ffffff; /* content background                          */

  /* Link banner (image + white panel), styled after the AYP Public Forum      */
  --ayp-banner-panel-bg: #ffffff; /* solid, like the Forum banner's box   */
  --ayp-banner-fg:       #2f4858; /* banner title/tagline: dark slate, as in
                                     Tristan's mockup                          */
  --ayp-heading:         #3e0d0d; /* page title (maroon, like AYPI .entry-title) */
  --ayp-heading-sub:     #333333; /* in-content h2-h6 (dark neutral)             */
  --ayp-body-text:       #4a4a4a; /* body text (matches AYPI body colour)        */

  --ayp-heading-font: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- Map brand tokens onto Material's CSS variables --------------------- */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--ayp-teal);
  --md-primary-fg-color--light: var(--ayp-teal-hover);
  --md-primary-fg-color--dark:  var(--ayp-teal-deep);

  --md-accent-fg-color:         var(--ayp-teal-hover);

  --md-typeset-a-color:         var(--ayp-link-text);

  --md-default-bg-color:        var(--ayp-page-bg);
  --md-typeset-color:           var(--ayp-body-text);
}

/* ============================================================================
   Row 1 — teal top bar: "Wiki" link + social icons (mirrors AYPI's blue bar).
   Rendered by overrides/main.html. Scrolls away on scroll (not sticky).
   ============================================================================ */
.ayp-topbar {
  background-color: var(--ayp-topbar-bg);
  color: var(--ayp-topbar-fg);
  font-family: var(--md-text-font-family, "Roboto", sans-serif);
  font-size: 0.72rem;
}
.ayp-topbar__inner {
  max-width: 61rem; /* matches Material's .md-grid width */
  margin: 0 auto;
  padding: 0.25rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ayp-topbar__home {
  color: var(--ayp-topbar-fg);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 125ms;
}
.ayp-topbar__home:hover,
.ayp-topbar__home:focus {
  color: var(--ayp-topbar-fg-hover);
}
.ayp-topbar__social {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ayp-topbar__social a {
  color: var(--ayp-topbar-fg);
  display: inline-flex;
  transition: color 125ms, opacity 125ms;
  opacity: 0.92;
}
.ayp-topbar__social a:hover,
.ayp-topbar__social a:focus {
  color: var(--ayp-topbar-fg);
  opacity: 1;
}
.ayp-topbar__social svg { display: block; }

/* ============================================================================
   Row 3 — AYP link banner: background image + white panel with five links,
   modelled on the banner of the AYP Public Forum. Replaces the old wide
   .ayp-menubar, which could not fit a phone screen. Rendered by main.html.

   It sits *below* Material's sticky header and is not sticky itself, so it
   scrolls away and the mobile drawer (which stacks above it) overlays it.
   ============================================================================ */
.ayp-banner {
  background-color: var(--ayp-teal-deep); /* shown while the image loads */
  background-image: url("../assets/ayp-banner.jpg");
  background-position: center 62%; /* keeps the oil lamps in frame when cropped */
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  padding: 1.4rem 0.8rem;
}
.ayp-banner__panel {
  width: 100%;
  max-width: 40rem;
  box-sizing: border-box;
  background-color: var(--ayp-banner-panel-bg);
  padding: 1.1rem 1.2rem 1.2rem;
  text-align: center;
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.18);
}
.ayp-banner__title,
.ayp-banner__tagline {
  font-family: var(--ayp-heading-font);
  color: var(--ayp-banner-fg);
  margin: 0;
  line-height: 1.3;
}
.ayp-banner__title {
  font-size: 1.5rem;
  font-weight: 700;
}
.ayp-banner__tagline {
  font-size: 0.85rem;
  font-weight: 400;
  margin-top: 0.35rem;
}
.ayp-banner__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.4rem;
  margin-top: 0.9rem;
}
.ayp-banner__link {
  color: var(--ayp-teal);
  font-family: var(--ayp-heading-font);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.25rem 0;
  white-space: nowrap;
  transition: color 125ms;
}
.ayp-banner__link:hover,
.ayp-banner__link:focus {
  color: var(--ayp-teal-hover);
  text-decoration: underline;
}

/* Phones: tighter banner so it doesn't eat the first screen of content */
@media screen and (max-width: 44.9375em) {
  .ayp-banner {
    padding: 0.9rem 0.6rem;
  }
  .ayp-banner__panel {
    padding: 0.9rem 0.8rem 1rem;
  }
  .ayp-banner__title {
    font-size: 1.25rem;
  }
  .ayp-banner__tagline {
    font-size: 0.75rem;
  }
  .ayp-banner__links {
    gap: 0.2rem 1rem;
  }
  .ayp-banner__link {
    font-size: 0.72rem;
  }
}

/* The banner is decorative chrome — no need to print it */
@media print {
  .ayp-banner,
  .ayp-topbar {
    display: none;
  }
}

/* ----------------------------------------------------------------------------
   Phones/tablets — header and drawer, modelled on the AYP Public Forum:
     · AUM logo on the left (Material hides it below 76.25em by default),
     · search icon then hamburger on the right,
     · drawer sliding in from the left, over the header and banner.

   The stacking matters: the old sticky .ayp-headwrap sat above Material's
   drawer, so the drawer opened *underneath* the menu bar and clipped the logo.
   The header is plain Material sticky again (z-index 4) and the drawer/overlay
   are pinned above it.

   76.234375em is Material's own drawer breakpoint — keep it in sync so there
   is no gap where only half of these rules apply.
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 76.234375em) {
  /* Logo back in the header bar, sized for the 2.4rem-tall mobile header */
  .md-header__button.md-logo {
    display: inline-block;
  }
  /* .md-header prefix outranks the desktop 2rem rule further down the file */
  .md-header .md-header__button.md-logo img {
    height: 1.6rem;
  }
  /* Hamburger last in the flex row: logo … search, hamburger */
  .md-header__inner > [for="__drawer"] {
    order: 99;
  }

  /* The drawer itself stays on the LEFT (Material's default) — that is what the
     Public Forum does too: hamburger top-right, panel sliding in from the left.
     It only needs to sit above the sticky header + banner, which it now covers. */
  .md-sidebar--primary {
    z-index: 8;
  }
  .md-overlay {
    z-index: 7;
  }
}

/* ----------------------------------------------------------------------------
   Drawer depth. Material nests each page's table of contents inside the drawer,
   making it three levels deep (Experiences → Dark Night of the Soul → contents).
   The drawer is for moving between pages, so the TOC level is dropped: the
   drawer is now section → page. The desktop right-hand TOC is unaffected.
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 76.234375em) {
  /* the ≡ toggle beside the active page, and the TOC nav it opens. The real
     <a> for the page and the section chevrons are left alone. */
  .md-sidebar--primary .md-nav--primary .md-nav__link[for="__toc"],
  .md-sidebar--primary .md-nav--primary .md-nav__link[for="__toc"] ~ .md-nav {
    display: none;
  }
  /* Material hides the page's real <a> on phones because that ≡ label stood in
     for it — put it back, or the current page disappears from the list. */
  .md-sidebar--primary .md-nav--primary .md-nav__link[for="__toc"] + .md-nav__link {
    display: flex;
  }
}

/* ----------------------------------------------------------------------------
   Phones only — the drawer opens full width. Material's default 12.1rem panel
   leaves a sliver of dimmed page on a phone; full width gives the long section
   lists (Topics has 46 entries) the whole screen. Tablets keep the narrow panel.

   Because nothing of the page is left to tap, the drawer title — already a
   <label for="__drawer">, i.e. a close button — gets a visible ✕.
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 44.9375em) {
  .md-sidebar--primary {
    width: 100%;
  }
  [dir="ltr"] .md-sidebar--primary {
    left: -100%;
  }
  [dir="ltr"] [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    transform: translateX(100%);
  }

  /* Close affordance, clear of the full-width logo band above it */
  .md-nav--primary .md-nav__title[for="__drawer"] {
    position: relative;
  }
  .md-nav--primary .md-nav__title[for="__drawer"]::after {
    content: "✕";
    position: absolute;
    right: 0.8rem;
    bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1;
    color: var(--ayp-teal);
    opacity: 0.75;
  }
}

/* ============================================================================
   Header — white logo bar with teal text/icons (mirrors the live site)
   ============================================================================ */
.md-header {
  background-color: var(--ayp-header-bg);
  color: var(--ayp-teal);
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
}
.md-header__title {
  color: var(--ayp-teal);
  font-family: var(--ayp-heading-font);
  font-weight: 600;
}
/* The header bar is just logo + search: the site name would only repeat the
   "AYP Wiki" in the banner below. Hide the site-name topic but keep the second
   topic, which Material fades in with the *page* title once the h1 scrolls off. */
.md-header__topic:first-child {
  visibility: hidden;
}
.md-header__topic + .md-header__topic {
  visibility: visible;
}
/* icons + buttons in the header */
.md-header__button,
.md-header .md-icon {
  color: var(--ayp-teal);
}
.md-header__button:hover {
  opacity: 0.7;
}
.md-header__button.md-logo img {
  height: 2rem; /* round AUM brand mark, alone on the left of the header bar */
  width: auto;
}

/* Mobile navigation drawer header: Material defaults this to the teal primary
   colour, which boxes the white-background logo. Make it white with teal text
   so it matches the desktop logo header and the logo blends in cleanly. */
.md-nav--primary .md-nav__title[for="__drawer"] {
  background-color: var(--ayp-header-bg);
  color: var(--ayp-teal);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.md-nav--primary .md-nav__title[for="__drawer"] .md-nav__button.md-logo img {
  height: 2.4rem; /* round AUM mark in the mobile drawer header */
}

/* Search box: subtle grey field on the white header instead of the default
   translucent-white-on-colour treatment */
.md-search__form {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--ayp-body-text);
}
.md-search__form:hover {
  background-color: rgba(0, 0, 0, 0.09);
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: #ffffff;
}
.md-search__input,
.md-search__input::placeholder,
.md-search__icon {
  color: var(--ayp-body-text);
}
.md-search__input::placeholder { opacity: 0.6; }

/* ============================================================================
   Typography — Raleway headings; maroon page title, neutral sub-headings
   (mirrors AYP International: .entry-title #3e0d0d, content h2 dark neutral)
   ============================================================================ */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--ayp-heading-font);
  color: var(--ayp-heading-sub);
  font-weight: 600;
}
.md-typeset h1 {
  color: var(--ayp-heading);
  font-weight: 700;
}

/* ============================================================================
   Content links + accents
   Links are a deeper teal (AA contrast on white) and underlined so they read as
   clickable in body text — the default teal-no-underline looked like plain text.
   ============================================================================ */
.md-typeset a {
  color: var(--ayp-link-text);
  text-decoration: underline;
  text-decoration-color: rgba(11, 105, 130, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color 100ms, text-decoration-color 100ms;
}
.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--ayp-link-hover);
  text-decoration-color: currentColor;
}
/* Keep chrome links (sidebar nav, header bars, footer, TOC) free of underlines —
   only body-content links get them. */
.md-nav a,
.md-footer a,
.ayp-topbar a,
.ayp-banner a,
.md-typeset .md-nav a,
.md-typeset .headerlink {
  text-decoration: none;
}

/* Buttons pick up AYP International's button colour (#338EA7) */
.md-typeset .md-button--primary,
.md-typeset .md-button:focus,
.md-typeset .md-button:hover {
  background-color: var(--ayp-button);
  border-color: var(--ayp-button);
  color: #ffffff;
}
.md-typeset .md-button {
  color: var(--ayp-button);
  border-color: var(--ayp-button);
  text-decoration: none;
}

/* Left border on blockquotes / admonitions picks up the brand teal */
.md-typeset blockquote {
  border-left-color: var(--ayp-link);
}

/* Active item in the navigation + TOC */
.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--ayp-teal);
}

/* Footer to match the deep-teal band feel of the live site */
.md-footer {
  background-color: var(--ayp-teal-deep);
}
.md-footer-meta {
  background-color: var(--ayp-teal-deep);
}