/* GPCN Docs — Custom Scalar Overrides */

/* ── Brand Theme — Light Mode ────────────────────────────────────────────────
 * GPCN brand palette applied to Scalar's CSS variable system.
 *
 * Blues:  #153170 (darkest) · #1B4388 (primary) · #2D72D9 (medium) · #7CB9FF (light)
 * Accent: #4DD0E1 (cyan)
 * Neutral: #1A282C (dark bg) · #505A64 (mid-grey) · #F5F7FA (near-white)
 * Status: #68D391 (success) · #FC8181 (error)
 */
.light-mode {
  --scalar-header-background-1: #1B4388;  /* header bar — GPCN primary blue */
  --scalar-header-border-color: #153170;  /* header bottom border — darker blue */
  --scalar-header-color-1: #F5F7FA;       /* header primary text */
  --scalar-header-color-2: rgba(245, 247, 250, 0.7); /* header secondary text */
  --scalar-color-1: #1A282C;          /* primary text — near-black with blue undertone */
  --scalar-color-2: #505A64;          /* secondary text — mid-grey */
  --scalar-color-3: #7a8a96;          /* tertiary / muted text */
  --scalar-color-accent: #2D72D9;     /* accent / link color — GPCN medium blue */
  --scalar-background-1: #ffffff;     /* primary background */
  --scalar-background-2: #F5F7FA;     /* secondary background — near-white */
  --scalar-background-3: #e8edf5;     /* tertiary background — light blue-grey */
  --scalar-background-accent: #dbeafe; /* accent tint — pale blue */
  --scalar-border-color: rgba(45, 114, 217, 0.15); /* subtle blue-tinted border */
}

/* Apply subtle blue tint to sidebar to connect it visually with the header */
.light-mode aside.sidebar {
  background: #D9E4F5 !important;
}

/* Dark mode sidebar — sidebar level, slightly darker than main background */
.dark-mode aside.sidebar {
  background: oklch(0.15 0.02 260) !important;
}


/* ── Header & Tabs — Override Scalar component background ────────────────────
 * Use stable class selectors (not Vue scoped data-v-* attributes, which change
 * whenever Scalar rebuilds their platform).
 */
.light-mode header.header,
.light-mode header.t-header,
.light-mode .header.t-header {
  background: #1B4388 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.light-mode .header .tabs,
.light-mode .t-header .tabs,
.light-mode .tabs {
  background: #1B4388 !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* ── Tab nav — text colors and active state ──────────────────────────────────*/
.light-mode .header .tabs a h1,
.light-mode .t-header .tabs a h1,
.light-mode .tabs a h1 {
  color: rgba(245, 247, 250, 0.75) !important;
}

.light-mode .header .tabs a:hover,
.light-mode .t-header .tabs a:hover,
.light-mode .tabs a:hover {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}

.light-mode .header .tabs a:hover h1,
.light-mode .t-header .tabs a:hover h1,
.light-mode .tabs a:hover h1 {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 255, 255, 0.5) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}

/* Active tab */
.light-mode .header .tabs a.link-active,
.light-mode .t-header .tabs a.link-active,
.light-mode .tabs a.link-active {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  position: relative !important;
}

.light-mode .header .tabs a.link-active h1,
.light-mode .t-header .tabs a.link-active h1,
.light-mode .tabs a.link-active h1 {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: #7CB9FF !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}

/* ── Brand Theme — Dark Mode ─────────────────────────────────────────────────
 * Dark mode uses the GPCN blue-gray hue-260 oklch palette (three-tone surface
 * strategy) shared across all GPCN portals.
 *
 * Surface tones:  background (0.17) → card (0.20) → muted (0.24)
 * Hue 260:        cohesive cool blue-gray throughout
 */
.dark-mode {
  --scalar-header-background-1: oklch(0.24 0.02 260);   /* header bar — muted level */
  --scalar-header-border-color: oklch(0.2 0.025 260);   /* header bottom border — card level */
  --scalar-header-color-1: oklch(0.95 0.005 260);       /* header primary text */
  --scalar-header-color-2: oklch(0.95 0.005 260 / 70%); /* header secondary text */
  --scalar-color-1: oklch(0.95 0.005 260);       /* primary text — foreground */
  --scalar-color-2: oklch(0.65 0.015 260);       /* secondary text — muted-foreground */
  --scalar-color-3: oklch(0.45 0.015 260);       /* tertiary / placeholder text */
  --scalar-color-accent: oklch(0.62 0.18 255);   /* accent / link — readable blue (chart-1 level) */
  --scalar-background-1: oklch(0.17 0.02 260);   /* primary background — darkest */
  --scalar-background-2: oklch(0.2 0.025 260);   /* secondary background — card level */
  --scalar-background-3: oklch(0.24 0.02 260);   /* tertiary background — muted level */
  --scalar-background-accent: oklch(0.62 0.18 255 / 8%); /* accent tint — faint blue glow */
  --scalar-border-color: oklch(0.3 0.025 260 / 50%);    /* subtle blue-gray border */
}

.dark-mode header.header,
.dark-mode header.t-header,
.dark-mode .header.t-header {
  background: oklch(0.24 0.02 260) !important;
  border-bottom: 1px solid oklch(1 0 0 / 8%) !important;
}

.dark-mode .header .tabs,
.dark-mode .t-header .tabs,
.dark-mode .tabs {
  background: oklch(0.24 0.02 260) !important;
  border-bottom-color: oklch(0.2 0.025 260) !important;
}

/* ── Dark mode — Tab nav text colors and active state ────────────────────────*/
.dark-mode .header .tabs a h1,
.dark-mode .t-header .tabs a h1,
.dark-mode .tabs a h1 {
  color: rgba(245, 247, 250, 0.75) !important;
}

.dark-mode .header .tabs a:hover,
.dark-mode .t-header .tabs a:hover,
.dark-mode .tabs a:hover {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}

.dark-mode .header .tabs a:hover h1,
.dark-mode .t-header .tabs a:hover h1,
.dark-mode .tabs a:hover h1 {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 255, 255, 0.5) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}

.dark-mode .header .tabs a.link-active,
.dark-mode .t-header .tabs a.link-active,
.dark-mode .tabs a.link-active {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  position: relative !important;
}

.dark-mode .header .tabs a.link-active h1,
.dark-mode .t-header .tabs a.link-active h1,
.dark-mode .tabs a.link-active h1 {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: oklch(0.62 0.18 255) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}

/* ── Hero Card — full-width card with icon left, text right ──────────────────*/
.hero-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--scalar-border-color);
  border-radius: 8px;
  background: var(--scalar-background-1);
  text-decoration: none !important;
  color: var(--scalar-color-1) !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  margin-top: 16px;
}

.hero-card:hover {
  border-color: var(--scalar-color-accent);
  box-shadow: 0 4px 12px oklch(0.62 0.18 255 / 12%);
}

.hero-card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: var(--scalar-color-accent);
}

.hero-card__icon svg {
  width: 100%;
  height: 100%;
}

.hero-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--scalar-color-1);
}

.hero-card__desc {
  font-size: 14px;
  color: var(--scalar-color-2);
  line-height: 1.5;
}

.hero-card__cta {
  font-size: 13px;
  color: var(--scalar-color-accent);
  margin-top: 4px;
  font-weight: 500;
}

/* ── Topic Grid — 3-column card layout for Explore by Topic ─────────────────*/
.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.topic-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 20px;
  border: 1px solid var(--scalar-border-color);
  border-radius: 8px;
  background: var(--scalar-background-1);
  text-decoration: none !important;
  color: var(--scalar-color-1) !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.topic-card:hover {
  border-color: var(--scalar-color-accent);
  box-shadow: 0 4px 12px oklch(0.62 0.18 255 / 12%);
}

.topic-card__icon {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  color: var(--scalar-color-accent);
}

.topic-card__icon svg {
  width: 100%;
  height: 100%;
}

.topic-card__title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--scalar-color-1);
}

.topic-card__desc {
  font-size: 13px;
  color: var(--scalar-color-2);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .topic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .topic-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Section Spacing — Tighten H2 gaps ───────────────────────────────────────
 * Scalar's default H2 top margin creates large vertical gaps between endpoint
 * sections. Reduce to a tighter value scoped to the page content area.
 */
.page > .content h2,
.page-node h2 {
  margin-top: 2rem;
}

/* ── Content Width ────────────────────────────────────────────────────────────
 * Increase the main content column width from the default (~720px).
 * --scalar-container-width controls the max-width of the content area.
 */
:root {
  --scalar-container-width: 1120px;
  --scalar-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}


.full-container-constrained {
  max-width: 1120px;
}

/* The default content column is hard-capped at 680px by .page > .content and
   .page-node.  Override both to ~1020px (50 % wider than 680px).
   Selector is scoped to avoid hitting the outer main.content wrapper. */
.page > .content {
  max-width: 1020px !important;
}

.page-node {
  max-width: min(100%, 1020px) !important;
}

/* ── Search Bar — Move to Header (right side) ────────────────────────────────
 * Visually reposition the search button from sidebar into the top header bar,
 * anchored to the right edge of the viewport.
 * Sidebar z-index is raised above the header so the button escapes
 * Chrome's implicit stacking context on position:fixed elements.
 */
aside.sidebar > button[role="search"] {
  position: fixed;
  top: -4px;
  right: 16px;
  left: auto;
  transform: none;
  width: 220px;
  background-color: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: rgba(245, 247, 250, 0.8) !important;
}

aside.sidebar {
  z-index: 1000;
  padding-top: 0;
}

/* ── Search Bar — Ctrl+K Hint ─────────────────────────────────────────────────
 * Hide the default placeholder text and show a "Ctrl+K" shortcut hint.
 */
aside.sidebar > button[role="search"] .search-placeholder,
aside.sidebar > button[role="search"] [class*="generic"],
aside.sidebar > button[role="search"] > :last-child:not(svg):not([class*="icon"]) {
  font-size: 0;
}

aside.sidebar > button[role="search"]::after {
  content: "Ctrl+K";
  font-size: 0.75rem;
  opacity: 0.45;
  position: absolute;
  right: 10px;
  pointer-events: none;
}

/* ── Search Popup — Raise to Nav Bar Level ───────────────────────────────────
 * Bring the search results modal up so it aligns with the tab navigation bar.
 */
.scalar-modal-layout .scalar-modal {
  margin-top: 55px !important;
  margin-left: auto !important;
  margin-right: 16px !important;
}

/* ── Search Modal — Tighten Typography ───────────────────────────────────────
 * Scale down font sizes inside the search results for a calmer feel.
 */
.scalar-modal input[type="search"],
.scalar-modal input[placeholder*="earch"] {
  font-size: 14px !important;
}

.scalar-modal .search-result__title {
  font-size: 12.5px !important;
}

.scalar-modal .search-result__content {
  font-size: 11.5px !important;
}

.scalar-modal .breadcrumbs,
.scalar-modal [class*="breadcrum"] {
  font-size: 10.5px !important;
}