/* Custom CSS for Fluids Docs branding */
:root {
    --primary-color: #ff88bd;
    --accent-color: #e6609d;
    --light-color: #fff;
    --dark-color: #333;
}

/* Header styling */
.md-header {
    background-color: var(--primary-color);
    color: var(--light-color);
}

.md-header-nav,
.md-header-nav__source {
    color: var(--light-color);
}

/* Top navigation tabs (navigation.tabs) */
.md-tabs {
    background-color: var(--accent-color);
    color: var(--light-color);
}

.md-tabs__link {
    color: var(--light-color);
    opacity: 0.85;
}

.md-tabs__link:hover,
.md-tabs__link--active {
    color: var(--light-color);
    opacity: 1;
}

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

.md-footer-nav {
    color: var(--light-color);
}

.md-footer-nav a {
    color: var(--light-color) !important;
}

.md-footer-nav a:hover {
    color: var(--light-color) !important;
    opacity: 0.8;
}

/* Navigation sidebar styling */
.md-nav {
    color: var(--dark-color);
}

.md-nav__link {
    color: var(--dark-color);
}

.md-nav__link:hover {
    color: var(--accent-color);
}

.md-nav__link--active {
    color: var(--accent-color);
}

/* Code blocks styling */
.highlight {
    background-color: #f8f8f8;
    border-radius: 4px;
    padding: 12px;
}

/* Button styling */
.md-button {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--light-color);
}

.md-button:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

/* Table styling */
.md-typeset table:not([class]) {
    border: 1px solid var(--primary-color);
}

.md-typeset table:not([class]) th {
    background-color: var(--primary-color);
    color: var(--light-color);
}

/* Links styling */
.md-typeset a {
    color: var(--accent-color);
}

.md-typeset a:hover {
    color: var(--primary-color);
}

/* Dark mode styling */
[data-md-color-scheme="slate"] .md-header {
    background-color: var(--primary-color);
}

[data-md-color-scheme="slate"] .md-tabs {
    background-color: var(--accent-color);
}

[data-md-color-scheme="slate"] .md-footer {
    background-color: var(--primary-color);
}

[data-md-color-scheme="slate"] .md-nav__link {
    color: var(--light-color);
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
    color: var(--accent-color);
}

[data-md-color-scheme="slate"] .md-nav__link--active {
    color: var(--accent-color);
}

/* Header control for content width toggle */
.ll-width-toggle {
    color: var(--light-color);
    opacity: 0.85;
    cursor: pointer;
}

.ll-width-toggle:hover {
    opacity: 1;
}

[data-md-color-scheme="slate"] .ll-width-toggle {
    color: var(--light-color);
}

/* Full-width mode (default remains Material width) */
body.ll-layout-full-width .md-grid {
    max-width: 100%;
}