/* ============================================
   BRAND COLORS & MATERIAL OVERRIDES
   See: docs/extending/mkdocs/design-system.md
   ============================================ */

:root {
  /* Brand colors - light theme */
  --brand-primary: #087EA4;
  --brand-primary-bg: #E6F7FF;
  --brand-text: #404756;
  --brand-text-secondary: #6b7280;

  /* MkDocs Material overrides */
  --md-primary-fg-color: var(--brand-primary);
  --md-primary-fg-color--light: #5BB0C9;
  --md-primary-fg-color--dark: #065A75;
  --md-accent-fg-color: var(--brand-primary);
  --md-typeset-a-color: var(--brand-primary);

  /* Background colors */
  --md-default-bg-color: #ffffff;
  --md-default-bg-color--light: #F6F7F9;
  --md-default-bg-color--lighter: #F6F7F9;
  --md-default-bg-color--lightest: #ffffff;

  /* Code block background */
  --md-code-bg-color: #F6F7F9;

  /* Typography - system font stack */
  --md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --md-code-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                  Consolas, "Liberation Mono", monospace;
}

[data-md-color-scheme="slate"] {
  /* Brand colors - dark theme */
  --brand-primary: #58C4DC;
  --brand-primary-bg: #283542;
  --brand-text: #f6f7f9;
  --brand-text-secondary: #99a1b3;

  /* MkDocs Material overrides */
  --md-primary-fg-color: var(--brand-primary);
  --md-primary-fg-color--light: #7DD3E8;
  --md-primary-fg-color--dark: #3998B6;
  --md-accent-fg-color: var(--brand-primary);
  --md-typeset-a-color: var(--brand-primary);

  /* Dark background */
  --md-default-bg-color: #23272F;
}

/* ============================================
   SCROLLBAR STABILITY
   Prevent layout shift when scrollbar appears/disappears
   ============================================ */

html {
  scrollbar-gutter: stable;
}

/* ============================================
   HEADER LAYOUT
   Order: Logo | Menu | ...spacer... | Search | Theme | GitHub
   ============================================ */

.md-header {
  background-color: #ffffff;
  color: var(--brand-text);
  box-shadow: none; /* No shadow until scrolled */
  transition: none !important; /* Prevent flicker */
  position: sticky;
  top: 0;
  z-index: 4;
}

/* Stronger shadow on scroll - Material uses .md-header--shadow class */
/* No transition to prevent flicker during navigation */
.md-header--shadow {
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1),
              0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
  transition: none !important;
}

[data-md-color-scheme="slate"] .md-header {
  background-color: #23272F;
}

/* Header inner - flex container */
.md-header__inner {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.4rem;
  margin-left: 1.5rem !important; /* Consistent margin regardless of sidebar */
  margin-right: 1.5rem !important;
}

/* Hide mobile hamburger on desktop */
@media (min-width: 76.25em) {
  .md-header__button[for="__drawer"] {
    display: none;
  }
}

/* Hide header title completely */
.md-header__title {
  display: none;
}

/* ============================================
   LOGO
   ============================================ */

.md-header__button.md-logo {
  order: 1;
  margin-right: 1rem;
  padding: 0.4rem;
  display: flex;
  align-items: center;
}

.md-header__button.md-logo img {
  opacity: 0;
  position: absolute;
}

.md-header__button.md-logo {
  background-color: var(--brand-primary);
  -webkit-mask: url("../assets/logo.svg") no-repeat center / contain;
  mask: url("../assets/logo.svg") no-repeat center / contain;
  width: 1.6rem;
  height: 1.6rem;
}

/* ============================================
   NAVIGATION TABS - OVERLAID ON HEADER
   Tabs are fixed-positioned to appear inline with header controls.
   ============================================ */

/* Spacer to push header controls to the right */
.md-header__inner::after {
  content: "";
  flex-grow: 1;
  order: 10;
}

/* Search */
.md-search {
  order: 20;
  margin-left: 0.5rem;
}

/* Theme toggle */
.md-header__option {
  order: 21;
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}

/* Source/GitHub link */
.md-header__source {
  order: 22;
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
}

/* Position tabs as overlay on header */
.md-tabs {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 68px !important; /* Match header height exactly */
  background: transparent;
  pointer-events: none;
  z-index: 5;
  overflow: hidden !important; /* Prevent scrollbar */
}

/* Target .md-grid inside tabs - keep pointer-events none to not block header */
.md-tabs .md-grid {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 0 5rem; /* Space for logo */
  pointer-events: none; /* Don't block clicks to header controls */
}

/* Enable pointer-events only on the nav list itself */
.md-tabs__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  height: 68px;
  overflow: hidden;
  pointer-events: auto; /* Only this element captures clicks */
}

.md-tabs__item {
  height: auto;
  padding: 0;
}

.md-tabs__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-text);
  opacity: 1;
  margin: 0 !important; /* Remove default margin for alignment */
  padding: 0.4rem 0.875rem;
  border-radius: 2rem;
  transition: color 0.15s, background-color 0.15s;
  white-space: nowrap;
}

/* Hover: subtle background pill (React.dev style)
   !important needed to override Material's "color: inherit" which inherits white */
.md-tabs__link:hover,
.md-tabs__link:focus {
  color: var(--brand-text) !important;
  background-color: rgba(64, 71, 86, 0.08) !important;
  opacity: 1 !important;
}

/* Active/selected: filled pill background */
.md-tabs__item--active .md-tabs__link,
.md-tabs__item--active .md-tabs__link:hover,
.md-tabs__item--active .md-tabs__link:focus {
  color: var(--brand-primary) !important;
  background-color: var(--brand-primary-bg) !important;
}

[data-md-color-scheme="slate"] .md-tabs__link {
  color: var(--brand-text);
}

/* Dark mode: subtle background pill on hover */
[data-md-color-scheme="slate"] .md-tabs__link:hover,
[data-md-color-scheme="slate"] .md-tabs__link:focus {
  color: var(--brand-text) !important;
  background-color: rgba(246, 247, 249, 0.08) !important;
}

/* Dark mode: active has filled background */
[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link,
[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link:hover,
[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link:focus {
  color: var(--brand-primary) !important;
  background-color: var(--brand-primary-bg) !important;
}

/* ============================================
   MOBILE: Hide tabs, no scrollbar
   ============================================ */

@media (max-width: 76.1875em) {
  .md-tabs {
    display: none !important;
  }

  /* Hide logo on mobile - hamburger replaces it */
  .md-header__button.md-logo {
    display: none !important;
  }

  /* Prevent horizontal scroll */
  .md-header__inner {
    overflow-x: hidden;
  }

  /* Show hamburger with rounded style */
  .md-header__button[for="__drawer"] {
    display: flex;
    order: 0;
    border-radius: 9999px;
    transition: background-color 0.15s;
  }

  .md-header__button[for="__drawer"]:hover {
    background-color: var(--brand-primary-bg);
  }
}

/* ============================================
   SEARCH STYLING
   ============================================ */

.md-search__form {
  background-color: #EBECF0;
  border-radius: 2rem;
}

[data-md-color-scheme="slate"] .md-search__form {
  background-color: #343a46;
}

.md-search__input {
  background-color: transparent;
}

.md-search__input::placeholder {
  color: var(--brand-text-secondary);
}

/* Search expanded modal - higher z-index to appear above tabs */
.md-search[data-md-component="search"] {
  z-index: 10 !important;
}

/* Search modal - round all corners with offset for scrollbar */
@media screen and (min-width: 60em) {
  /* Expanded search form - rounded top corners only when focused/active */
  .md-search:focus-within .md-search__form {
    border-radius: 0.75rem 0.75rem 0 0 !important;
  }

  .md-search__output {
    border-radius: 0 0 0.75rem 0.75rem !important;
    overflow: hidden;
    margin-top: 0;
  }

  /* Scrollwrap - rounded bottom corners to match parent */
  .md-search__scrollwrap {
    margin: 0 0.25rem 0.25rem 0;
    border-radius: 0 0 0.75rem 0.75rem;
  }

  /* No results message - rounded bottom corners */
  .md-search-result__meta {
    border-radius: 0 0 0.5rem 0.5rem;
  }
}

/* Search input hover - consistent background */
.md-search__form:hover,
.md-search__form:focus-within {
  background-color: #E0E1E5;
}

[data-md-color-scheme="slate"] .md-search__form:hover,
[data-md-color-scheme="slate"] .md-search__form:focus-within {
  background-color: #3d444d;
}

.md-search-result {
  border-radius: 0;
}

.md-search-result__meta {
  background-color: var(--md-default-bg-color--light);
}

/* ============================================
   LINK STYLING
   ============================================ */

.md-typeset a {
  text-decoration: underline;
}

.md-nav a,
.md-header a,
.md-footer a,
.md-tabs a,
.btn,
.md-typeset .btn {
  text-decoration: none;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
}

.hero__logo {
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
  background-color: var(--brand-primary);
  -webkit-mask: url("../assets/logo.svg") no-repeat center / contain;
  mask: url("../assets/logo.svg") no-repeat center / contain;
}

.hero__title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--brand-text);
}

.hero__tagline {
  font-size: 1.25rem;
  color: var(--brand-text-secondary);
  margin: 0.5rem 0 1.5rem;
}

.hero__buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active {
  transform: translateY(0);
}

.btn.btn--primary,
.md-typeset .btn.btn--primary {
  background: var(--brand-primary);
  color: #fff;
}

.btn.btn--primary:hover,
.md-typeset .btn.btn--primary:hover {
  background: var(--md-primary-fg-color--dark);
  color: #fff;
}

.btn.btn--secondary,
.md-typeset .btn.btn--secondary {
  border: 1px solid var(--brand-text-secondary);
  color: var(--brand-text);
  background: transparent;
}

.btn.btn--secondary:hover,
.md-typeset .btn.btn--secondary:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: var(--brand-primary-bg);
}

/* ============================================
   BENTO GRID
   ============================================ */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.tall { grid-row: span 2; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .span-2, .span-3, .span-4 { grid-column: span 2; }
}

@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .span-2, .span-3, .span-4 { grid-column: span 1; }
  .tall { grid-row: span 1; }
}

/* ============================================
   CARDS (Bento Box Style)
   ============================================ */

.card {
  background: var(--md-default-bg-color);
  border: 1px solid #e1e4e8;
  border-radius: 1rem;
  padding: 1.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-bg);
}

[data-md-color-scheme="slate"] .card {
  background: var(--md-default-bg-color);
  border-color: #3d444d;
}

[data-md-color-scheme="slate"] .card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-bg);
}

/* Card headings */
.card h3 {
  margin-top: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Card links */
.card a {
  color: var(--brand-primary);
  font-weight: 500;
}

/* Card code blocks */
.card pre {
  margin: 1rem 0 0;
  border-radius: 0.5rem;
}

/* ============================================
   LEFT SIDEBAR NAVIGATION
   ============================================ */

.md-sidebar--primary .md-nav {
  font-size: 1rem;
}

/* ============================================
   HIDE TOC (Desktop sidebar + Mobile drawer)
   ============================================ */

.md-sidebar--secondary,
.md-nav--secondary {
  display: none !important;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
