/* ==========================================================================
   PERSONAL SITE — ndbailey.com
   Topbar-only layout (no sidebars) with a custom brand palette.
   ========================================================================== */

/* 1. HIDE HAMBURGER MENU */
.md-header__button[for="__drawer"] {
  display: none !important;
}

/* 2. TOPBAR-ONLY — hide both sidebars on every page */
.md-sidebar--primary,
.md-sidebar--secondary {
  display: none !important;
}

/* 3. STICKY HEADER & TABS SETUP */
.md-header,
.md-header--shadow {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 40;
}
.md-header__inner {
  border-bottom: none !important;
  box-shadow: none !important;
}

.md-tabs {
  position: relative !important; /* scrolls with page */
  top: 0;
  z-index: 30;
  width: 100%;
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  background-color: transparent;
}

/* 4. FORCE TAB LINKS TO DISPLAY */
.md-tabs__list {
  display: flex !important;
  margin: 0 !important;
  padding: 0 16px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.md-tabs__list::-webkit-scrollbar { display: none; }
.md-tabs__item { display: block !important; }
.md-tabs__link { display: block !important; padding: 5px 16px; }

/* 5. CONTENT SPACING */
.md-main {
  padding-top: 10px !important;
}
@media screen and (max-width: 1220px) {
  .md-main__inner { padding-top: 0 !important; margin-top: 0 !important; }
}

/* 6. ACCESSIBILITY */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--brand-ink);
  color: #fff;
  padding: 10px 20px;
  z-index: 1000;
  font-weight: bold;
}
.skip-link:focus { top: 0; outline: 3px solid var(--brand-ocean); }

/* Universal focus ring */
:focus-visible {
  outline: 3px solid var(--brand-ocean) !important;
  outline-offset: 1px;
}
[data-md-color-scheme="slate"] :focus-visible {
  outline: 3px solid var(--brand-ocean-on-dark) !important;
}

/* ==========================================================================
   BRAND TOKENS
   cotton-bloom (magenta) · tuscan-sun (yellow) · bright-ocean (blue)
   ghost-white (light bg) · black (ink)
   ========================================================================== */
:root {
  /* Core palette */
  --brand-bloom:   #e951cf; /* cotton-bloom — accent / highlight */
  --brand-sun:     #f5c842; /* tuscan-sun — secondary accent */
  --brand-ocean:   #3c91e6; /* bright-ocean — primary / links */
  --brand-ghost:   #f2f1f9; /* ghost-white — light background */
  --brand-ink:     #08060e; /* black — primary text / dark background */

  /* Derived shades */
  --brand-ocean-dark:    #2a72bd; /* hover/active on primary (light) */
  --brand-ocean-light:   #6fb0ee; /* lighter accent */
  --brand-ocean-on-dark: #6fb0ee; /* ocean lightened for dark backgrounds */
  --brand-bloom-on-dark: #f178db; /* bloom lightened for dark backgrounds */

  /* Neutrals */
  --brand-gray-700: #3a3742;
  --brand-gray-500: #6f6b78;
  --brand-gray-300: #cdcbd6;
  --brand-gray-100: #e8e7f0;
  --brand-white:    #ffffff;
}

/* --------------------------------------------------------------------------
   LIGHT SCHEME (default)
   -------------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--brand-ocean);
  --md-primary-fg-color--light: var(--brand-ocean-light);
  --md-primary-fg-color--dark:  var(--brand-ocean-dark);
  --md-primary-bg-color:        var(--brand-white);

  --md-accent-fg-color:              var(--brand-bloom);
  --md-accent-fg-color--transparent: rgba(60, 145, 230, 0.1);

  --md-default-bg-color:           var(--brand-ghost);
  --md-default-fg-color:           var(--brand-ink);
  --md-default-fg-color--light:    var(--brand-gray-700);
  --md-default-fg-color--lighter:  var(--brand-gray-500);
  --md-default-fg-color--lightest: var(--brand-gray-300);

  --md-typeset-a-color:    var(--brand-ocean);
  --md-typeset-mark-color: rgba(233, 81, 207, 0.25);
}

/* --------------------------------------------------------------------------
   DARK SCHEME (slate)
   -------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-hue: 255; /* retint slate toward the ink hue */

  --md-primary-fg-color:        var(--brand-ocean-on-dark);
  --md-primary-fg-color--light: var(--brand-ocean-light);
  --md-primary-fg-color--dark:  var(--brand-ocean);
  --md-primary-bg-color:        var(--brand-ghost);

  --md-accent-fg-color:              var(--brand-bloom-on-dark);
  --md-accent-fg-color--transparent: rgba(111, 176, 238, 0.14);

  --md-default-bg-color:        var(--brand-ink);
  --md-default-fg-color:        var(--brand-ghost);

  --md-typeset-a-color:    var(--brand-ocean-on-dark);
  --md-typeset-mark-color: rgba(241, 120, 219, 0.3);
}

/* ==========================================================================
   HEADER & TABS — translucent frosted glass, brand accents
   ========================================================================== */
.md-header,
.md-tabs {
  background-color: color-mix(in srgb, var(--md-default-bg-color) 20%, transparent) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Keep tooltips above the sticky header/tabs */
.md-tooltip,
.md-tooltip2 {
  z-index: 50 !important;
}

[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-tabs {
  color: var(--brand-ink) !important;
}
[data-md-color-scheme="default"] .md-tabs__link {
  color: var(--brand-gray-700) !important;
}
[data-md-color-scheme="default"] .md-tabs__link:hover {
  color: var(--brand-ink) !important;
}
[data-md-color-scheme="default"] .md-tabs__item--active .md-tabs__link {
  color: var(--brand-ink) !important;
  font-weight: 700;
}
[data-md-color-scheme="default"] .md-tabs__item--active {
  border-bottom-color: var(--brand-ink) !important;
}

[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  color: var(--brand-ghost) !important;
}
[data-md-color-scheme="slate"] .md-tabs__link {
  color: rgba(242, 241, 249, 0.7) !important;
}
[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: var(--brand-ghost) !important;
}
[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link {
  color: var(--brand-ghost) !important;
  font-weight: 700;
}
[data-md-color-scheme="slate"] .md-tabs__item--active {
  border-bottom-color: var(--brand-ghost) !important;
}

/* ==========================================================================
   ADMONITIONS — only two types are used site-wide:
   info → ocean (blue) · abstract → bloom (pink)
   ========================================================================== */
.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  background-color: transparent;
}

/* info → ocean (blue) */
.md-typeset .admonition.info,
.md-typeset details.info {
  border-color: var(--brand-ocean);
  background-color: rgba(60, 145, 230, 0.1);
}
.md-typeset .admonition.info > .admonition-title,
.md-typeset details.info > summary {
  color: var(--brand-ocean);
}
.md-typeset .admonition.info > .admonition-title::before,
.md-typeset details.info > summary::before {
  background-color: var(--brand-ocean);
}

/* abstract → bloom (pink) */
.md-typeset .admonition.abstract,
.md-typeset details.abstract {
  border-color: var(--brand-bloom);
  background-color: rgba(233, 81, 207, 0.1);
}
.md-typeset .admonition.abstract > .admonition-title,
.md-typeset details.abstract > summary {
  color: var(--brand-bloom);
}
.md-typeset .admonition.abstract > .admonition-title::before,
.md-typeset details.abstract > summary::before {
  background-color: var(--brand-bloom);
}

/* ==========================================================================
   CARD GRIDS — opt-in two-column layout (collapses to one on narrow screens)
   ========================================================================== */
@media screen and (min-width: 48em) {
  .md-typeset .grid.two-up {
    grid-template-columns: 1fr 1fr;
  }
}