/* ============================================================
   GlobalBases.com — Material for MkDocs brand theme
   Brand orange sampled from logo: #F7A600 (RGB 247, 166, 0)

   How the colors are chosen:
   - #F7A600 is a bright, luminous orange. White text on it only
     reaches ~2:1 contrast (fails WCAG), so the header/nav use
     DARK text on the orange instead (~10:1 — very readable).
   - Body links use a slightly deeper orange (#A85F00) so link
     text stays >=4.5:1 on white. In dark mode links go bright
     (#FFC24D), which reads well on the dark background.

   These overrides are scoped to the color scheme, so the light/
   dark toggle keeps working. Tweak the hex values below to taste.
   ============================================================ */

/* ---- Brand palette as reusable tokens ---------------------- */
:root {
  --gb-orange:        #F7A600;  /* primary brand */
  --gb-orange-light:  #FFC24D;  /* lighter tint  */
  --gb-orange-dark:   #C97E00;  /* deeper shade  */
  --gb-orange-link:   #A85F00;  /* accessible link on white (~4.7:1) */
  --gb-ink:           #1A1A1A;  /* dark text used on the orange header */
}

/* ============================================================
   LIGHT MODE  (scheme: default)
   ============================================================ */
[data-md-color-scheme="default"] {
  /* Primary = header bar, nav highlights, primary buttons */
  --md-primary-fg-color:        var(--gb-orange);
  --md-primary-fg-color--light: var(--gb-orange-light);
  --md-primary-fg-color--dark:  var(--gb-orange-dark);

  /* Foreground drawn ON the orange primary (title, icons, hamburger).
     Kept dark for contrast against the bright orange. */
  --md-primary-bg-color:        var(--gb-ink);
  --md-primary-bg-color--light: rgba(26, 26, 26, 0.7);

  /* Accent = hover / focus / active states */
  --md-accent-fg-color:             var(--gb-orange-dark);
  --md-accent-fg-color--transparent: rgba(201, 126, 0, 0.1);

  /* Body link color — the accessible deeper orange */
  --md-typeset-a-color: var(--gb-orange-link);
}

/* ============================================================
   DARK MODE  (scheme: slate)
   ============================================================ */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        var(--gb-orange);
  --md-primary-fg-color--light: var(--gb-orange-light);
  --md-primary-fg-color--dark:  var(--gb-orange-dark);

  /* Dark text still reads well on the orange header in dark mode */
  --md-primary-bg-color:        var(--gb-ink);
  --md-primary-bg-color--light: rgba(26, 26, 26, 0.7);

  --md-accent-fg-color:             var(--gb-orange-light);
  --md-accent-fg-color--transparent: rgba(255, 194, 77, 0.1);

  /* Bright orange links pop against the dark background */
  --md-typeset-a-color: var(--gb-orange-light);

  /* OPTIONAL: warm the default blue-grey dark background toward a
     neutral/warm tone that suits an orange brand. Uncomment to try. */
  /* --md-hue: 30; */
}

/* ============================================================
   Small polish (optional — delete any you don't want)
   ============================================================ */

/* Search box focus ring picks up the brand accent */
.md-search__form:focus-within {
  box-shadow: 0 0 0 2px var(--gb-orange);
}

/* Make the "primary" call-to-action button unmistakably branded */
.md-typeset .md-button--primary {
  background-color: var(--gb-orange);
  border-color: var(--gb-orange);
  color: var(--gb-ink);
}
.md-typeset .md-button--primary:hover {
  background-color: var(--gb-orange-dark);
  border-color: var(--gb-orange-dark);
  color: #fff;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   Legal / attribution footer (partials/copyright.html)
   Impressum + "Made by GlobalBases" — shown on the Portal and
   every Module page. Uses Material's own footer variables so it
   stays legible on the dark footer bar in both light and dark
   scheme; no hard-coded colours.
   ============================================================ */
/* Span the full footer-inner width so the attribution can travel to the far
   (inline) end instead of hugging the Impressum link. */
.gb-footer { width: 100%; }
.gb-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .5rem;
}
/* Impressum stays at the inline start; the attribution is pushed to the inline
   END with a logical auto margin — RTL-safe, no fixed pixel offset, no float.
   With flex-wrap on, a narrow viewport drops the attribution to its own line
   where the auto margin keeps it end-aligned. */
.gb-footer__made {
  margin-inline-start: auto;
  text-align: end;
}
.gb-footer .gb-footer__link {
  color: currentcolor;              /* inherits the footer's light-on-dark text */
  text-decoration: underline;
  text-underline-offset: .15em;
}
.gb-footer .gb-footer__link:hover,
.gb-footer .gb-footer__link:focus-visible {
  color: var(--gb-orange-light);    /* brand tint reads on the dark footer bar */
}
/* Keyboard focus stays visible on the dark footer background. */
.gb-footer .gb-footer__link:focus-visible {
  outline: 2px solid var(--gb-orange-light);
  outline-offset: 2px;
  border-radius: 2px;
}