/* shared/theme/branding/colors.css
   PowerGEM brand colors and dark mode support.

   Color palette source: PowerGEM Brand Guidelines
   Contrast ratios verified for WCAG 2.1 AA compliance:
   - Body text: 4.5:1 minimum
   - Large text: 3:1 minimum
*/

/* ============================================================
   CSS CUSTOM PROPERTIES - LIGHT MODE (default)
   ============================================================ */
:root {
    /* Brand Colors */
    --pg-green: #338956;
    --pg-dark-green: #12493c;
    --pg-darker-green: #0d3329;
    --pg-metallic-blue: #275a74;
    --pg-white: #ffffff;
    --pg-bright-gray: #eae9e9;
    --pg-black: #231f20;

    /* Neutral Grays */
    --pg-gray-600: #555555;
    --pg-gray-400: #999999;
    --pg-gray-200: #444444;
    --pg-gray-100: #666666;
    --pg-code-bg-light: #f5f5f5;

    /* Admonition Colors */
    --pg-warning: #ff9800;
    --pg-danger: #f44336;

    /* Material Theme Overrides */
    --md-primary-fg-color: var(--pg-dark-green);
    --md-primary-fg-color--light: var(--pg-green);
    --md-primary-fg-color--dark: var(--pg-darker-green);
    --md-accent-fg-color: var(--pg-green);

    /* Text Colors */
    --md-default-fg-color: var(--pg-black);
    --md-default-fg-color--light: var(--pg-gray-600);
    --md-default-fg-color--lighter: var(--pg-gray-400);

    /* Background Colors */
    --md-default-bg-color: var(--pg-white);
    --md-default-bg-color--light: var(--pg-bright-gray);

    /* Code Blocks */
    --md-code-bg-color: var(--pg-code-bg-light);
    --md-code-fg-color: var(--pg-black);

    /* Links */
    --md-typeset-a-color: var(--pg-dark-green);

    /* Admonitions */
    --md-admonition-bg-color: var(--pg-bright-gray);
}

/* ============================================================
   CSS CUSTOM PROPERTIES - DARK MODE
   Material uses [data-md-color-scheme="slate"]
   ============================================================ */
[data-md-color-scheme="slate"] {
    /* Dark Mode Specific Colors */
    --pg-green-dark-mode: #4a9e6e;
    --pg-green-light-dark-mode: #5cb87a;
    --pg-bg-dark: #111416;
    --pg-bg-dark-light: #1a2220;
    --pg-code-bg-dark: #171d1e;

    /* Dark Mode Text Opacity Levels */
    --pg-text-primary-dark: rgba(255, 255, 255, 0.87);
    --pg-text-secondary-dark: rgba(255, 255, 255, 0.54);
    --pg-text-disabled-dark: rgba(255, 255, 255, 0.32);

    /* Material Theme Overrides */
    --md-primary-fg-color: var(--pg-green-dark-mode);
    --md-primary-fg-color--light: var(--pg-green-light-dark-mode);
    --md-primary-fg-color--dark: var(--pg-dark-green);
    --md-accent-fg-color: var(--pg-green-light-dark-mode);

    /* Text Colors */
    --md-default-fg-color: var(--pg-text-primary-dark);
    --md-default-fg-color--light: var(--pg-text-secondary-dark);
    --md-default-fg-color--lighter: var(--pg-text-disabled-dark);

    /* Background Colors */
    --md-default-bg-color: var(--pg-bg-dark);
    --md-default-bg-color--light: var(--pg-bg-dark-light);

    /* Code Blocks */
    --md-code-bg-color: var(--pg-code-bg-dark);
    --md-code-fg-color: var(--pg-text-primary-dark);

    /* Links */
    --md-typeset-a-color: var(--pg-green-light-dark-mode);

    /* Admonitions */
    --md-admonition-bg-color: var(--pg-bg-dark-light);
}

/* ============================================================
   HEADER STYLING
   ============================================================ */
.md-header {
    background-color: var(--md-primary-fg-color);
}

/* Disable header title scroll animation - keep stable */
.md-header__title {
  font-weight: 600;
}

/* ============================================================
   VERSION SELECTOR (file-structure versioning)
   Custom dropdown (button + menu) rendered server-side in partials/header.html
   from config.extra.versions, as a flex item in the header row (after the title,
   before the spacer). A custom control — not a native <select> — because native
   <select> popups don't allow author control of width/padding/row styling.
   version-switcher.js opens/closes it and navigates on choice. Present only for
   products with extra.versions.
   ============================================================ */
.pg-version-switch {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 1rem;
  position: relative; /* anchor for the absolutely-positioned menu */
}

/* The selector sits before the header's flex spacer, so its width would push the
   search / Ask AI / palette group rightward — on a full row it overflows the
   centered 61rem grid, collapsing the spacer and spilling the group past the edge.
   The search box reserves a wide fixed width (main.html) but only shows an 18rem
   bar right-aligned within it, so reclaim the selector's footprint from that empty
   reserved space (versioned products only). The visible search bar is unchanged;
   the right-hand group lands where it does on unversioned pages. */
.md-header:has(.pg-version-switch) .md-search {
  width: 28.4rem;
}

/* Closed pill — matches the header's other controls (search, Ask AI, palette):
   rounded, translucent-dark fill, subtle white border, white text, hover-darken. */
.pg-version-switch__button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start; /* left-align the label; chevron is positioned absolutely */
  position: relative; /* anchor the absolutely-positioned chevron */
  /* Fixed width (sized for the widest label) so the pill doesn't resize with the
     selected version; the menu's min-width:100% then matches it for a uniform
     rectangle. */
  width: 5rem;
  height: 1.75rem;
  /* Left padding matches the menu options' text inset (menu 0.2rem + option
     0.6rem = 0.8rem) so the button label and option labels start at the same x. */
  padding: 0 0.5rem 0 0.8rem;
  font-family: inherit;
  font-size: 0.75rem;
  color: var(--md-primary-bg-color);
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.pg-version-switch__button:hover {
  background: rgba(0, 0, 0, 0.45);
}

.pg-version-switch__chevron {
  position: absolute;
  right: 0.5rem;
  top: 0;
  bottom: 0;
  margin: auto 0; /* vertical-center without transform, leaving transform for the rotate */
  width: 0.6rem;
  height: 0.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s;
}
.pg-version-switch__button[aria-expanded="true"] .pg-version-switch__chevron {
  transform: rotate(180deg);
}

/* Open: the button + menu read as one taller rounded rectangle, split by a subtle
   divider at the seam (which also makes any slight button/menu width difference
   look intentional). The bottom corners square off; a 1px bottom border draws the
   divider; the fill already equals the menu's (both the header green under a 26%
   black overlay) so hover-darken is disabled to keep them identical; z-index keeps
   the button and its divider above the menu's drop shadow. */
.pg-version-switch__button[aria-expanded="true"] {
  position: relative;
  z-index: 101;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.pg-version-switch__button[aria-expanded="true"]:hover {
  background: rgba(0, 0, 0, 0.26);
}

/* Open menu — sits flush under the button and reads as the lower half of one
   rounded rectangle: same fill (the darkened header green, matching the button),
   same side border, no top border/rounding (it butts against the open button),
   and bottom corners share the button's radius. min-width matches the button so
   the rectangle is a uniform width. */
.pg-version-switch__list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  padding: 0.2rem;
  background: color-mix(in srgb, var(--md-primary-fg-color) 74%, black);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top: none;
  border-radius: 0 0 0.75rem 0.75rem;
  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.3);
}
.pg-version-switch__list[hidden] {
  display: none;
}

.pg-version-switch__option {
  padding: 0.3rem 0.6rem;
  font-family: inherit;
  font-size: 0.75rem;
  text-align: left;
  white-space: nowrap;
  color: var(--md-primary-bg-color);
  background: none;
  border: none;
  border-radius: 0.35rem;
  cursor: pointer;
}
.pg-version-switch__option:hover,
.pg-version-switch__option:focus-visible {
  background: var(--md-primary-fg-color--light);
  outline: none;
}

/* Mobile (below Material's secondary-sidebar/search breakpoint of 60em): the
   header row can't fit the logo, the full site name, the version picker, and the
   right-hand controls at once. For versioned products, drop the wordmark text
   (the gem logo still carries the brand) so the picker sits beside the logo,
   clear of search. Scoped with :has(.pg-version-switch) so non-versioned products
   keep their wordmark on mobile (they have no picker, so no crowding). */
@media screen and (max-width: 59.9844em) {
  /* Versioned products only: drop the wordmark text (the gem logo still carries
     the brand) so the version selector sits beside the logo, clear of search. */
  .md-header:has(.pg-version-switch) .md-header__title .md-ellipsis {
    display: none !important;
  }
  .md-header:has(.pg-version-switch) .md-header__button.md-logo {
    display: flex !important;
  }

  /* All products: main.html sets the search box to a fixed desktop width
     (34.4rem) with a left margin, which stays in the flex flow on mobile and
     pushes the Ask AI button and the theme toggle off-screen. The open search
     state is a fixed-position overlay, so collapse the in-flow box here. */
  .md-header__inner .md-search {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* Ask AI collapses to an icon on the cramped mobile row so it and the theme
     toggle both fit; the full "Ask AI" label returns at desktop widths. */
  #pgk-ask-btn span {
    display: none !important;
  }
  #pgk-ask-btn {
    width: 1.8rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
  }
}

.md-header__title .md-ellipsis,
.md-header__topic .md-ellipsis {
    font-weight: 600;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Logo sizing and alignment */
.md-header__button.md-logo img {
    height: 1.6rem;
    width: auto;
}

/* ============================================================
   LOGO NOTE
   White logo (logo-dark.svg) is used for both light and dark modes
   since the header background remains dark green in both schemes.
   ============================================================ */

/* ============================================================
   NAVIGATION ENHANCEMENTS
   ============================================================ */
.md-nav__link--active {
    font-weight: 600;
}

.md-tabs__link--active {
    font-weight: 600;
}

/* ============================================================
   FOOTER STYLING
   Neutral grey matching code block backgrounds
   !important needed to override Material's default footer colors
   ============================================================ */

/* Light mode - light grey like code blocks */
.md-footer,
.md-footer-meta {
    background: var(--pg-code-bg-light) !important;
    border: none !important;
}

.md-footer,
.md-footer-meta,
.md-copyright,
.md-copyright__highlight,
.md-social__link {
    color: var(--pg-gray-600) !important;
}

.md-footer a,
.md-footer-meta a {
    color: var(--pg-gray-600) !important;
}

.md-footer a:hover,
.md-footer-meta a:hover {
    color: var(--pg-dark-green) !important;
}

/* Material's .md-social__link is display:inline-block (NOT flex), so the text
   label and globe SVG are inline boxes whose vertical relationship is governed
   by vertical-align — flex properties here are inert. Material ships the globe
   at vertical-align:-25%; align both label and icon to middle so their centers
   sit on the same line. Width is widened from the default 1.6rem so the label
   doesn't clip. */
.md-social__link[title="PowerGEM Website"] {
    width: 400px;
    text-align: right;
}

.md-social__link[title="PowerGEM Website"]::before {
    content: "PowerGEM Website";
    font-size: 0.75rem;
    margin-right: 6px;
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
    top: 1px;
}

.md-social__link[title="PowerGEM Website"] svg {
    vertical-align: middle;
}

/* Dark mode - dark grey like code blocks */
[data-md-color-scheme="slate"] .md-footer,
[data-md-color-scheme="slate"] .md-footer-meta {
    background: var(--pg-code-bg-dark) !important;
}

[data-md-color-scheme="slate"] .md-footer,
[data-md-color-scheme="slate"] .md-footer-meta,
[data-md-color-scheme="slate"] .md-copyright,
[data-md-color-scheme="slate"] .md-copyright__highlight,
[data-md-color-scheme="slate"] .md-social__link {
    color: var(--pg-text-secondary-dark) !important;
}

[data-md-color-scheme="slate"] .md-footer a,
[data-md-color-scheme="slate"] .md-footer-meta a {
    color: var(--pg-text-secondary-dark) !important;
}

[data-md-color-scheme="slate"] .md-footer a:hover,
[data-md-color-scheme="slate"] .md-footer-meta a:hover {
    color: var(--pg-text-primary-dark) !important;
}

/* Support email bar in footer */
.md-footer-support {
    padding: 0.6rem 0;
    font-size: 0.75rem;
    text-align: center;
    background: var(--pg-bright-gray) !important;
    color: var(--pg-gray-600) !important;
}

.md-footer-support a {
    color: var(--pg-dark-green) !important;
    font-weight: 500;
}

.md-footer-support a:hover {
    text-decoration: underline;
}

[data-md-color-scheme="slate"] .md-footer-support {
    background: var(--pg-bg-dark-light) !important;
    color: var(--pg-text-secondary-dark) !important;
}

[data-md-color-scheme="slate"] .md-footer-support a {
    color: var(--pg-green-light-dark-mode) !important;
}

/* ============================================================
   HEADING COLORS
   ============================================================ */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    color: var(--md-default-fg-color);
    font-weight: 600;
}

/* ============================================================
   ADMONITION CUSTOMIZATION
   Clean, Docker-style callouts with left border accent
   ============================================================ */
.md-typeset .admonition,
.md-typeset details {
    border: none;
    border-left: 4px solid;
    border-radius: 4px;
    box-shadow: none;
}

.md-typeset .admonition.note,
.md-typeset details.note {
    border-left-color: var(--pg-metallic-blue);
    background-color: rgb(from var(--pg-metallic-blue) r g b / 0.1);
}

.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.hint,
.md-typeset details.hint {
    border-left-color: var(--pg-green);
    background-color: rgb(from var(--pg-green) r g b / 0.1);
}

.md-typeset .admonition.warning,
.md-typeset details.warning,
.md-typeset .admonition.caution,
.md-typeset details.caution {
    border-left-color: var(--pg-warning);
    background-color: rgb(from var(--pg-warning) r g b / 0.1);
}

.md-typeset .admonition.danger,
.md-typeset details.danger,
.md-typeset .admonition.error,
.md-typeset details.error {
    border-left-color: var(--pg-danger);
    background-color: rgb(from var(--pg-danger) r g b / 0.1);
}

.md-typeset .admonition.info,
.md-typeset details.info {
    border-left-color: var(--pg-metallic-blue);
    background-color: rgb(from var(--pg-metallic-blue) r g b / 0.1);
}

/* Dark mode admonition backgrounds */
[data-md-color-scheme="slate"] .md-typeset .admonition.note,
[data-md-color-scheme="slate"] .md-typeset details.note,
[data-md-color-scheme="slate"] .md-typeset .admonition.info,
[data-md-color-scheme="slate"] .md-typeset details.info {
    background-color: rgb(from var(--pg-metallic-blue) r g b / 0.2);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.tip,
[data-md-color-scheme="slate"] .md-typeset details.tip,
[data-md-color-scheme="slate"] .md-typeset .admonition.hint,
[data-md-color-scheme="slate"] .md-typeset details.hint {
    background-color: rgb(from var(--pg-green) r g b / 0.2);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.warning,
[data-md-color-scheme="slate"] .md-typeset details.warning,
[data-md-color-scheme="slate"] .md-typeset .admonition.caution,
[data-md-color-scheme="slate"] .md-typeset details.caution {
    background-color: rgb(from var(--pg-warning) r g b / 0.15);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.danger,
[data-md-color-scheme="slate"] .md-typeset details.danger,
[data-md-color-scheme="slate"] .md-typeset .admonition.error,
[data-md-color-scheme="slate"] .md-typeset details.error {
    background-color: rgb(from var(--pg-danger) r g b / 0.15);
}

/* ============================================================
   TABLE OF CONTENTS
   ============================================================ */
.md-nav--secondary .md-nav__link {
    font-size: 0.7rem;
}

.md-nav--secondary .md-nav__item {
    padding: 0;
}