/* Custom Styling for FITIZENS Support Center using official brand colors */

:root {
  /* Brand Colors */
  --ftz-primary: #aac941;      /* Primary: FTZ Green 400 */
  --ftz-secondary: #90c4df;    /* Secondary: FTZ Sky 300 */
  --ftz-tertiary: #60abd0;     /* Tertiary */
  --ftz-alternate: #b0b0b0;    /* Alternate */
  
  /* Utility Colors */
  --ftz-text-primary: #f6f6f6;    /* Primary Text */
  --ftz-text-secondary: #e6f1f8;  /* Secondary Text */
  --ftz-bg-primary: #262626;      /* Primary Background */
  --ftz-bg-secondary: #333333;    /* Secondary Background */
}

/* Global Font Settings */
body {
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Header Background */
.md-header {
    background-color: var(--ftz-primary);
    color: var(--ftz-bg-primary);
}

.md-header__title {
    color: var(--ftz-bg-primary);
}

/* Left Sidebar Navigation */
.md-nav--primary {
    background-color: var(--ftz-bg-primary);
    color: var(--ftz-text-primary);
}

.md-nav__title {
    background-color: var(--ftz-bg-primary) !important;
    color: var(--ftz-text-primary) !important;
}

/* Navigation Items */
.md-nav__item {
    color: var(--ftz-text-primary);
}

.md-nav__link {
    color: var(--ftz-text-primary) !important;
}

.md-nav__link:hover {
    color: var(--ftz-secondary) !important;
}

.md-nav__link--active {
    color: var(--ftz-primary) !important;
    font-weight: 500;
}

/* Right Sidebar (Table of Contents) */
.md-sidebar--secondary {
    background-color: var(--ftz-bg-primary);
}

.md-sidebar--secondary .md-sidebar__scrollwrap {
    background-color: var(--ftz-bg-primary);
}

.md-nav--secondary {
    background-color: var(--ftz-bg-primary);
}

.md-nav--secondary .md-nav__title {
    color: var(--ftz-text-primary) !important;
    background-color: var(--ftz-bg-primary) !important;
}

.md-nav--secondary .md-nav__list {
    background-color: var(--ftz-bg-primary);
}

.md-nav--secondary .md-nav__link {
    color: var(--ftz-text-secondary) !important;
}

/* Main Content Links */
.md-content a:not(.md-button) {
    color: var(--ftz-secondary);
    text-decoration: none;
}

.md-content a:not(.md-button):hover {
    color: var(--ftz-tertiary);
}

/* Footer */
.md-footer {
    background-color: var(--ftz-bg-primary);
}

.md-footer-nav {
    background-color: var(--ftz-bg-secondary);
}

/* Search Box */
.md-search__input {
    background-color: rgba(0,0,0,0.2);
    color: var(--ftz-text-primary);
}

.md-search__input::placeholder {
    color: var(--ftz-bg-primary);
}

/* Main Content Area */
.md-main {
    background-color: var(--ftz-bg-primary);
}

.md-content {
    background-color: var(--ftz-bg-secondary);
    margin: 1rem;
    padding: 2rem;
    border-radius: 4px;
}

/* Typography - Header Styles with correct weight hierarchy */
h1 {
    color: #c8de78;  /* FTZ Green 300 - lighter than links */
    font-weight: 700; /* Extra Bold */
    font-size: 2.5em;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--ftz-primary);
    padding-bottom: 0.5rem;
}

h2 {
    color: #3c92bb;  /* FTZ Sky 500 - darker blue */
    font-weight: 600;  /* Semi Bold */
    font-size: 1.8em;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

h3 {
    color: #3c92bb;  /* Same as h2 */
    font-weight: 500;  /* Medium */
    font-size: 1.4em;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}

h4 {
    color: #3c92bb;  /* Same as h2 */
    font-weight: 400;  /* Regular */
    font-size: 1.1em;
    margin-top: 1.2rem;
    margin-bottom: 0.6rem;
    letter-spacing: 0.01em;
}

h5, h6 {
    color: #3c92bb;  /* Same as h2 */
    font-weight: 300;  /* Light */
    font-size: 1.0em;
    margin-top: 1.2rem;
    margin-bottom: 0.6rem;
}

/* Bold text styling to ensure contrast with headers */
strong {
    color: var(--ftz-text-primary);
    font-weight: 600;
}

/* Content text */
p {
    color: var(--ftz-text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

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

/* Fix for white backgrounds */
[data-md-color-scheme="default"] {
    --md-default-bg-color: var(--ftz-bg-primary);
    --md-default-fg-color: var(--ftz-text-primary);
    --md-default-fg-color--light: var(--ftz-text-secondary);
}

[data-md-color-scheme="slate"] {
    --md-default-bg-color: var(--ftz-bg-primary);
    --md-default-fg-color: var(--ftz-text-primary);
    --md-default-fg-color--light: var(--ftz-text-secondary);
}

/* Responsive images */
.md-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1rem 0;
}

/* Optional: Add a subtle shadow to images */
.md-content img:not(.emojione) {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Optional: Center images */
.md-content p:has(img) {
    text-align: center;
}

/* Logo sizing in header */
.md-header__button.md-logo img {
    height: 2rem;
    width: auto;
}

/* Logo sizing and color in header - Updated size */
.md-header__button.md-logo {
    padding: 0.2rem;
    margin: 0.2rem;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 1.8rem;  /* Reduced from 2.4rem */
    width: auto;
}

/* Make sure the SVG logo is white when needed */
.md-header__button.md-logo svg {
    fill: var(--ftz-bg-primary);
}

/* Search box styling - Added icon color */
.md-search__icon {
    color: var(--ftz-bg-primary) !important;  /* Dark color for the icon */
}

/* Inline code styling */
code {
    background-color: var(--ftz-bg-primary);  /* Darker background */
    color: var(--ftz-primary);                /* Green text */
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
    border: 1px solid rgba(170, 201, 65, 0.2); /* FTZ Green with low opacity */
    font-family: 'Roboto Mono', monospace;
    margin: 0 0.2rem;
}

/* Code block styling (for multi-line code) */
pre code {
    background-color: var(--ftz-bg-primary);
    border: 1px solid rgba(170, 201, 65, 0.1);
    padding: 1rem;
    display: block;
    overflow-x: auto;
    margin: 1rem 0;
}