/* =============================================================================
   Derived from Word SOLTECH_v1.0 theme (theme1.xml / styles.xml)
   Brand green:    #8DC63F / #A4D65E
   Dark blue:      #3C5BA8
   Light blue:     #3FA9F5
   Body text:      #515254
   Heading font:   "Arial Nova", Arial, sans-serif
   Body font:      "Arial Nova", Arial, sans-serif
   ============================================================================= */

/* --- CSS custom properties ------------------------------------------------- */

:root {
    /* Primary brand green */
    --md-primary-fg-color:        #8DC63F;
    --md-primary-fg-color--light: #A4D65E;
    --md-primary-fg-color--dark:  #8DC63F;
    --md-primary-bg-color:        #FFFFFF;
    --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

    /* Navigation Colors - Added by Thayer */
    --soltech-cantina-red:        #ee5e53;
    --soltech-deep-blue:          #3c5ba8;
    --soltech-accent-green:       #8dc63f;
    --soltech-light-blue:         #3fa9f5;
    --soltech-tangerine:          #fc9024;
    --soltech-dark-gray:          #6d6e71;

    /* Accent — Word accent4 light blue */
    --md-accent-fg-color:              #3FA9F5;
    --md-accent-fg-color--transparent: rgba(63, 169, 245, 0.1);
    --md-accent-bg-color:              #FFFFFF;
    --md-accent-bg-color--light:       rgba(255, 255, 255, 0.7);

    /* Typography */
    --soltech-heading-font: "Arial Nova", Arial, sans-serif;
    --md-text-font:         "Arial Nova", Arial, sans-serif;
    --md-code-font:         "Roboto Mono", "Courier New", monospace;

    /* Body text — Word Normal style #515254 */
    --md-typeset-color: #515254;

    /* Links — primary brand green, hover light blue */
    --md-typeset-a-color:        #8DC63F;
    --md-typeset-a-color--hover: #3FA9F5;
}

/* Widen overall content area */
.md-grid {
    max-width: 1800px;
}


/* Apply body font (Material reads --md-text-font but also needs the rule directly) */
body, .md-typeset {
    font-family: "Arial Nova", Arial, sans-serif;
}

/* Dark mode overrides */
[data-md-color-scheme="slate"] {
    --md-primary-fg-color:        #A4D65E;
    --md-primary-fg-color--light: #8DC63F;
    --md-primary-fg-color--dark:  #A4D65E;
    --md-typeset-color:           #d0d0d0;
    --md-typeset-a-color:         #3FA9F5;
}

/* --- Headings -------------------------------------------------------------- */
/* H1 — Word Heading1: Arial Nova, dark blue, all caps, orange left border, green bottom border */
.md-typeset h1 {
    font-family: "Arial Nova", Arial, sans-serif;
    font-weight: 300;
    color: #3C5BA8;
    font-size: 1.8em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-left: 7px solid #FC9024;
    border-bottom: 1px solid #A4D65E;
    padding-left: 0.5em;
    padding-bottom: 0.05em;
}

/* H2 — Word Heading2: Calibri Light, 16pt, #3FA9F5 light blue */
.md-typeset h2 {
    font-family: "Arial Nova", Arial, sans-serif;
    font-weight: 300;
    color: var(--soltech-cantina-red);
    font-size: 1.4em;
}

/* H3 — Word Heading3: Calibri Light, 14pt, #3C5BA8 dark blue */
.md-typeset h3 {
    font-family: "Arial Nova", Arial, sans-serif;
    font-weight: 300;
    color: var(--soltech-light-blue);
    font-size: 1.15em;
}

/* H4 — Word Heading4: Calibri Light, 13pt, #2D447D darker blue */
.md-typeset h4 {
    font-family: "Arial Nova", Arial, sans-serif;
    font-weight: 300;
    color: #2D447D;
    font-size: 1.0em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* H5 — Word Heading5: Calibri Light, 12pt, #EE5E53 red/coral */
.md-typeset h5 {
    font-family: "Arial Nova", Arial, sans-serif;
    font-weight: 300;
    color: #EE5E53;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* H6 — Word Heading6: bold, underline */
.md-typeset h6 {
    font-family: "Arial Nova", Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-decoration: underline;
    font-size: 0.85em;
}

/* Dark mode heading adjustments */
[data-md-color-scheme="slate"] .md-typeset h1 { color: #7B9FD4; }
[data-md-color-scheme="slate"] .md-typeset h2 { color: #3FA9F5; }
[data-md-color-scheme="slate"] .md-typeset h3 { color: #7B9FD4; }
[data-md-color-scheme="slate"] .md-typeset h4 { color: #8aaa50; }
[data-md-color-scheme="slate"] .md-typeset h5 { color: #EE5E53; }

/* --- Links ----------------------------------------------------------------- */
.md-typeset a {
    color: #8DC63F;
}

.md-typeset a:hover {
    color: #3FA9F5;
}

.md-typeset a:visited {
    color: #800080;
}

[data-md-color-scheme="slate"] .md-typeset a       { color: #3FA9F5; }
[data-md-color-scheme="slate"] .md-typeset a:hover { color: #A4D65E; }
[data-md-color-scheme="slate"] .md-typeset a:visited { color: #b06ab3; }

/* --- Navigation header ----------------------------------------------------- */
.md-header {
    background-color: #f5f5f5;
    color: var(--md-primary-fg-color);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.md-header__title {
    color: var(--md-primary-fg-color);
    padding-left: 5rem;
    font-size: 1.2rem;
}

.md-header__button {
    color: var(--md-primary-fg-color);
}

/* st.webp logo — no white circle needed */
.md-header__button.md-logo img {
    height: 60px;
    width: auto;
    object-fit: contain;
    background: none;
    border-radius: 0;
    padding: 0;
}

.md-header {
    min-height: 80px;
}

.md-header__inner {
    min-height: 80px;
}


/* Hide light/dark mode toggle */
.md-header__option {
    display: none;
}

/* --- Search ---------------------------------------------------------------- */
.md-search__form {
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.md-search__form:hover,
.md-search__form:focus-within {
    background-color: #ffffff;
    border-color: var(--md-primary-fg-color);
}

.md-search__input {
    color: #515254;
}

.md-search__input::placeholder {
    color: #9e9e9e;
}

.md-search__input + .md-search__icon {
        color: var(--soltech-dark-gray);
}

.md-search__icon {
    color: var(--soltech-dark-gray);
}

/* Search results dropdown */
.md-search__output {
    border-top: 2px solid var(--md-primary-fg-color);
}

.md-search-result__meta {
    background-color: var(--md-primary-fg-color);
    color: #ffffff;
}

.md-search-result__link:hover,
.md-search-result__link:focus {
    background-color: rgba(141, 198, 63, 0.08);
}

/* --- SOLTECH logo — right-justified flex child inside md-header__inner */
.md-header__soltech-logo {
    display: none !important; /* Hidden by default, shown only if logo is configured */
    margin-left: auto;
    padding-left: 1.5rem;
    display: flex;
    align-items: center;
}

.md-header__soltech-logo img {
    height: 30px;
    width: auto;
}

/* Navigation styling */

/* Align primary navigation with content without clipping */
.md-sidebar--primary .md-sidebar__scrollwrap {
    padding-top: 0.25rem;
}

.md-sidebar--primary .md-sidebar__inner {
      transform: translateY(-0.5rem);
}

/* Home nav item only */
.md-nav--primary > .md-nav__list > .md-nav__item:first-child > a.md-nav__link {
    background-color: var(--soltech-deep-blue);
    color: white !important;
    font-weight: 500;
    font-size: 0.7rem;
    border-radius: 4px;
    padding: 0.25rem 0.25rem;
    margin-bottom: 1rem;

    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Hide the duplicate Home TOC toggle that Material renders on the Home page */
.md-nav--primary > .md-nav__list > .md-nav__item:first-child.md-nav__item--active > label.md-nav__link[for="__toc"] {
    display: none;
}

/* Home icon */
.md-nav--primary > .md-nav__list > .md-nav__item:first-child > a.md-nav__link .md-ellipsis::before {
    content: "⌂";
    margin-right: 0.25rem;
    font-size: 1rem;
}

/* Remove the site title block and logo from the sidebar */
.md-nav--primary > .md-nav__title {
    display: none;
}

/* Default nav links */
.md-nav--primary .md-nav__link {
    color: var(--soltech-deep-blue);
}

/* Top-level section headers are always Cantina Red */
.md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__container > .md-nav__link {
    color: var(--soltech-deep-blue) !important;
    font-family: "Arial Nova", Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    opacity: 1;
    background-color: transparent;
}

/* Active top-level section */
.md-nav--primary > .md-nav__list > .md-nav__item--active.md-nav__item--section > .md-nav__container > .md-nav__link {
    color: var(--soltech-deep-blue) !important;
    background-color: transparent;
    border-left: 5px solid var(--soltech-tangerine);
    padding-left: calc(0.6rem - 5px);
}

/* Sub-section links */
.md-nav--primary .md-nav__item--section .md-nav .md-nav__link {
    color: var(--soltech-deep-blue);
    font-weight: 400;
    background-color: transparent;
    text-decoration: none;
}

/* Selected sub-section*/
.md-nav--primary .md-nav__item--section .md-nav .md-nav__link--active {
    color: var(--soltech-tangerine) !important;
    font-weight: 700;
    background-color: transparent;
}

/* Right sidebar TOC title */
.md-nav--secondary .md-nav__title {
    color: var(--soltech-tangerine);
    font-size: 0rem;
    text-decoration: underline;
}

/* Replace with custom text */
.md-nav--secondary .md-nav__title::after {
    color: var(--soltech-tangerine);
    content: "On This Page";
    font-size: 0.8rem;
    font-weight: 700;
}

/* Adjust link colors */
.md-nav--secondary .md-nav__link {
    color: var(--soltech-deep-blue);
    font-weight: 500;
    background-color: transparent;
    text-decoration: none;
    font-size: 0.65rem;
}

/* --- Tables ---------------------------------------------------------------- */
.md-typeset table:not([class]) {
    font-size: 0.85rem;
    font-family: "Arial Nova", Arial, sans-serif;
}

.md-typeset table:not([class]) td:first-child {
    white-space: nowrap;
}

/* Override on tables where first-column wrapping is intentional */
.md-typeset .wrap-first-col table:not([class]) td:first-child {
    white-space: normal;
}

.md-typeset table:not([class]) th {
    white-space: nowrap;
    background-color: #3C5BA8;
    color: #FFFFFF;
    font-family: "Arial Nova", Arial, sans-serif;
    font-weight: 700;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
    background-color: #3C5BA8;
}

.md-typeset table:not([class]) tr:nth-child(even) td {
    background-color: rgba(63, 169, 245, 0.06);
}

/* --- Code blocks ----------------------------------------------------------- */
.md-typeset pre > code {
    font-size: 0.72rem;
    line-height: 1.6;
}

/* Inline code */
.md-typeset code {
    font-size: 0.72rem;
}

/* --- Admonitions ----------------------------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
    border-left-color: var(--md-primary-fg-color);
}

.md-typeset .admonition.note,
.md-typeset details.note {
    border-left-color: #3FA9F5;
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
    border-left-color: #F79646;
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
    border-left-color: #EE5E53;
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
    border-left-color: #A4D65E;
}

/* --- Mermaid diagrams ------------------------------------------------------ */
.mermaid {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
    overflow-x: auto;
}

.mermaid svg {
    max-width: 100%;
    height: auto;
}

.md-content .mermaid {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}


/* --- Footer ---------------------------------------------------------------- */
.md-footer {
    background-color: #3C5BA8;
}

/* --- Tabs (navigation.tabs) ------------------------------------------------ */
.md-tabs {
    background-color: var(--md-primary-fg-color);
}

.md-tabs__link--active,
.md-tabs__link:hover {
    color: #FFFFFF;
    opacity: 1;
}

/* --- Screen capture gallery ------------------------------------------------- */
.screen-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.screen-gallery figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.screen-gallery figure img {
    width: 100%;
    max-width: 260px;
    height: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.screen-gallery figcaption {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--soltech-deep-blue);
    font-weight: 500;
}

.screen-gallery figcaption .screen-number {
    color: var(--soltech-tangerine);
    font-weight: 700;
    margin-right: 0.3rem;
}

[data-md-color-scheme="slate"] .screen-gallery figure img {
    border-color: #444;
}
