/* =========================================================================
 * custom.css — Global Payments Vega Design System theme overrides
 * =========================================================================
 *
 * This stylesheet maps exact Global Payments brand colors onto the
 * Material for MkDocs CSS custom properties.  It covers both light mode
 * (scheme: default) and dark mode (scheme: slate).
 *
 * Brand palette reference  (Vega Design System / gpbrandguide.com/color):
 *
 *   Global Blue    #262AFF   — primary brand / buttons / links
 *   Deep Blue      #1B1EC6   — hover states / secondary actions
 *   Pulse Blue     #1CABFF   — accent highlights / info callouts
 *   Black          #0C0C0C   — dark-mode background base
 *   Charcoal       #595959   — muted text / subtitles
 *   Smoke          #C4C4C4   — borders / dividers
 *   Fog            #EEEEEE   — light section backgrounds
 *   Haze           #F4F4F4   — alternate row / card backgrounds
 *   Mist           #F8F8F8   — page background tint
 *   Sunshine       #FFCC00   — warning callouts
 *   Raspberry      #F4364C   — error / danger callouts
 *   Creamsicle     #FDA052   — caution callouts
 *
 * ========================================================================= */

/* -----------------------------------------------------------------
 * LIGHT MODE  (scheme: default)
 * ----------------------------------------------------------------- */

[data-md-color-scheme="default"] {

  /* -- Primary brand color (nav bar, links, buttons) -- */
  --md-primary-fg-color:          #262AFF;    /* Global Blue */
  --md-primary-fg-color--light:   #4D50FF;    /* Lightened Global Blue */
  --md-primary-fg-color--dark:    #1B1EC6;    /* Deep Blue */
  --md-primary-bg-color:          #FFFFFF;
  --md-primary-bg-color--light:   #FFFFFF;

  /* -- Accent color (hover highlights, active states) -- */
  --md-accent-fg-color:           #1CABFF;    /* Pulse Blue */
  --md-accent-fg-color--transparent: rgba(28, 171, 255, 0.1);
  --md-accent-bg-color:           #FFFFFF;
  --md-accent-bg-color--light:    #FFFFFF;

  /* -- Default text and background -- */
  --md-default-fg-color:          #0C0C0C;    /* Near-black for readability */
  --md-default-fg-color--light:   #595959;    /* Charcoal for subtitles */
  --md-default-fg-color--lighter: #959595;    /* Lighter muted text */
  --md-default-fg-color--lightest: #C4C4C4;   /* Smoke — borders, hints */
  --md-default-bg-color:          #FFFFFF;
  --md-default-bg-color--light:   #F8F8F8;    /* Mist — subtle bg tint */
  --md-default-bg-color--lighter: #F4F4F4;    /* Haze */
  --md-default-bg-color--lightest: #EEEEEE;   /* Fog */

  /* -- Code blocks -- */
  --md-code-bg-color:             #F4F4F4;    /* Haze */
  --md-code-fg-color:             #0C0C0C;

  /* -- Typeset links -- */
  --md-typeset-a-color:           #262AFF;    /* Global Blue */

  /* -- Footer -- */
  --md-footer-bg-color:           #0C0C0C;    /* Black */
  --md-footer-bg-color--dark:     #060606;
  --md-footer-fg-color:           #FFFFFF;
  --md-footer-fg-color--light:    #C4C4C4;    /* Smoke */
  --md-footer-fg-color--lighter:  #959595;
}

/* -----------------------------------------------------------------
 * DARK MODE  (scheme: slate)
 * ----------------------------------------------------------------- */

[data-md-color-scheme="slate"] {

  /* -- Primary brand color — brighter in dark mode for contrast -- */
  --md-primary-fg-color:          #4D50FF;    /* Lightened Global Blue */
  --md-primary-fg-color--light:   #6E71FF;
  --md-primary-fg-color--dark:    #262AFF;    /* Global Blue */
  --md-primary-bg-color:          #151520;    /* Dark navy base */
  --md-primary-bg-color--light:   #1C1C2E;

  /* -- Accent — Pulse Blue works well in dark mode as-is -- */
  --md-accent-fg-color:           #1CABFF;    /* Pulse Blue */
  --md-accent-fg-color--transparent: rgba(28, 171, 255, 0.15);
  --md-accent-bg-color:           #1C1C2E;
  --md-accent-bg-color--light:    #1C1C2E;

  /* -- Default text and background -- */
  --md-default-fg-color:          #FFFFFF;    /* Pure white for max contrast */
  --md-default-fg-color--light:   #D0D0D8;   /* Bright secondary text */
  --md-default-fg-color--lighter: #A0A0B0;   /* Muted but readable */
  --md-default-fg-color--lightest: #6A6A7A;   /* Subtle hints/borders */
  --md-default-bg-color:          #151520;    /* Dark navy — softer than black */
  --md-default-bg-color--light:   #1C1C2E;
  --md-default-bg-color--lighter: #232338;
  --md-default-bg-color--lightest: #2A2A40;

  /* -- Code blocks — slightly lighter than page bg -- */
  --md-code-bg-color:             #1C1C2E;
  --md-code-fg-color:             #FFFFFF;

  /* -- Typeset links — bright enough to read on dark bg -- */
  --md-typeset-a-color:           #6E71FF;    /* Brighter link blue */

  /* -- Footer -- */
  --md-footer-bg-color:           #0E0E18;
  --md-footer-bg-color--dark:     #08080F;
  --md-footer-fg-color:           #FFFFFF;
  --md-footer-fg-color--light:    #D0D0D8;
  --md-footer-fg-color--lighter:  #A0A0B0;
}

/* -----------------------------------------------------------------
 * ADMONITION COLORS — match GP palette for callout boxes
 * ----------------------------------------------------------------- */

/* Info / Note — Pulse Blue */
:root {
  --md-admonition-fg-color--note:    #1CABFF;
  --md-admonition-bg-color--note:    rgba(28, 171, 255, 0.08);
}

/* Warning — Sunshine */
:root {
  --md-admonition-fg-color--warning: #FFCC00;
  --md-admonition-bg-color--warning: rgba(255, 204, 0, 0.08);
}

/* Danger / Error — Raspberry */
:root {
  --md-admonition-fg-color--danger:  #F4364C;
  --md-admonition-bg-color--danger:  rgba(244, 54, 76, 0.08);
}

/* -----------------------------------------------------------------
 * LOGO — GP Developers Partner logo in header
 * -----------------------------------------------------------------
 * Light mode uses OnLight (dark) logo on white header.
 * Dark mode uses OnDark (white) logo on dark header.
 * The logo is wider than a typical icon, so we override the default
 * sizing to show the full wordmark similar to the GP partner portal.
 * ----------------------------------------------------------------- */

/* Make the logo area wider to fit the full wordmark */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;          /* Let the SVG aspect ratio dictate width */
  max-width: 12rem;     /* Cap so it doesn't overflow on mobile */
}

/* Dark mode header — swap to white (OnDark) logo */
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  content: url("../assets/images/logo_Logo_Developers_Partner_OnDark.svg");
}

/* Sidebar logo — use OnLight variant (sidebar is always light-ish) */
.md-nav--primary .md-nav__title .md-logo img {
  content: url("../assets/images/logo_Logo_Developers_Partner_OnLight.svg");
  height: 1.6rem;
  width: auto;
  max-width: 12rem;
}

/* Dark mode sidebar — switch to OnDark variant */
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title .md-logo img {
  content: url("../assets/images/logo_Logo_Developers_Partner_OnDark.svg");
}

/* -----------------------------------------------------------------
 * NAV & HEADER REFINEMENTS
 * ----------------------------------------------------------------- */

/* ---- Light mode header — white bg, dark text like parent site ---- */
.md-header {
  background-color: #FFFFFF;
  color: #0C0C0C;
  box-shadow: 0 1px 0 0 #EEEEEE;       /* subtle bottom border */
}

/* Site title in header */
.md-header__title {
  color: #0C0C0C;
}

/* Header icons (search, toggle) */
.md-header .md-icon,
.md-header .md-search__icon {
  color: #595959;
}

/* Search input in light mode */
.md-search__input {
  background-color: #F4F4F4;
  color: #0C0C0C;
}

.md-search__input::placeholder {
  color: #959595;
}

/* ---- Light mode tabs — white bg, dark text, blue active underline ---- */
.md-tabs {
  background-color: #FFFFFF;
  border-bottom: 1px solid #EEEEEE;
}

[data-md-color-scheme="default"] .md-tabs__link {
  color: #595959 !important;
  opacity: 1 !important;
}

[data-md-color-scheme="default"] .md-tabs__link--active,
[data-md-color-scheme="default"] .md-tabs__link:hover {
  color: #262AFF !important;   /* Global Blue for active/hover */
  opacity: 1 !important;
}

[data-md-color-scheme="default"] .md-tabs__link--active {
  border-bottom: 2px solid #262AFF;
}

/* ---- Dark mode header — dark bg matching page ---- */
[data-md-color-scheme="slate"] .md-header {
  background-color: #151520;
  color: #FFFFFF;
  box-shadow: none;
  border-bottom: 1px solid #2A2A40;
}

[data-md-color-scheme="slate"] .md-header__title {
  color: #FFFFFF;
}

[data-md-color-scheme="slate"] .md-header .md-icon,
[data-md-color-scheme="slate"] .md-header .md-search__icon {
  color: #D0D0D8;
}

[data-md-color-scheme="slate"] .md-search__input {
  background-color: #232338;
  color: #FFFFFF;
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: #6A6A7A;
}

/* ---- Dark mode tabs ---- */
[data-md-color-scheme="slate"] .md-tabs {
  background-color: #151520;
  border-bottom: 1px solid #2A2A40;
}

[data-md-color-scheme="slate"] .md-tabs__link {
  color: #A0A0B0;
  opacity: 1;
}

[data-md-color-scheme="slate"] .md-tabs__link--active,
[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: #FFFFFF;
}

[data-md-color-scheme="slate"] .md-tabs__link--active {
  border-bottom: 2px solid #4D50FF;
}

/* -----------------------------------------------------------------
 * LINK HOVER — Deep Blue
 * ----------------------------------------------------------------- */

.md-typeset a:hover {
  color: #1B1EC6;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #1CABFF;    /* Pulse Blue for dark mode hover */
}

/* -----------------------------------------------------------------
 * DARK MODE — TABLES, HEADINGS, & READABILITY FIXES
 * ----------------------------------------------------------------- */

/* Headings — full white for max contrast */
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
  color: #FFFFFF;
}

/* Body text — bright white for readability */
[data-md-color-scheme="slate"] .md-typeset {
  color: #E8E8F0;
}

/* Table styling — visible borders and alternating rows */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border: 1px solid #2A2A40;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: #232338;
  color: #FFFFFF;
  border-bottom: 2px solid #4D50FF;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  border-top: 1px solid #2A2A40;
  color: #E8E8F0;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:nth-child(even) td {
  background-color: #1C1C2E;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:nth-child(odd) td {
  background-color: #151520;
}

/* Sidebar nav — brighter text */
[data-md-color-scheme="slate"] .md-nav__link {
  color: #D0D0D8;
}

[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #FFFFFF;
}

/* TOC (right sidebar) — brighter text */
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link {
  color: #D0D0D8;
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
  color: #FFFFFF;
}

/* -----------------------------------------------------------------
 * BUTTON OVERRIDES — match GP portal buttons
 * ----------------------------------------------------------------- */

.md-typeset .md-button--primary {
  background-color: #262AFF;
  border-color: #262AFF;
  color: #FFFFFF;
}

.md-typeset .md-button--primary:hover {
  background-color: #1B1EC6;
  border-color: #1B1EC6;
}

/* -----------------------------------------------------------------
 * SCROLLBAR — subtle GP-tinted scrollbar (WebKit)
 * ----------------------------------------------------------------- */

::-webkit-scrollbar-thumb {
  background-color: #C4C4C4;   /* Smoke */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #959595;
}