/* Warm orange palette shared by the navigation and its supporting pages. */
body {
    --nav-bg: #fff4e8;
    --nav-surface: #fffdfa;
    --nav-text: #3c2c22;
    --nav-muted: #80634f;
    --nav-border: #f0dac4;
    --nav-accent: #c6530a;
    --nav-accent-soft: #ffe7d2;
    --nav-action: #c6530a;
    --nav-sidebar: #fff9f1;
    --nav-toolbar: linear-gradient(110deg, #c6530a, #b94708);
    --nav-shadow: 0 4px 16px rgba(145, 73, 22, .045);
    background: var(--nav-bg);
    color: var(--nav-text);
}
body.io-black-mode {
    --nav-bg: #211a16;
    --nav-surface: #2e241e;
    --nav-text: #fff0e0;
    --nav-muted: #c4a58d;
    --nav-border: #503827;
    --nav-accent: #ffab64;
    --nav-accent-soft: #4a3020;
    --nav-sidebar: #281e18;
    --nav-toolbar: linear-gradient(110deg, #68351c, #4f2818);
    --nav-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}
::selection { background: var(--nav-accent-soft); color: var(--nav-text); }
body #content { padding-top: 24px; }
body #sidebar .sidebar-nav-inner { background: var(--nav-sidebar); }
body #sidebar .sidebar-item > a { color: var(--nav-muted); }
body #sidebar .sidebar-item > a > .nav-icon-holder { color: var(--nav-accent); }
body #sidebar .sidebar-item > a:hover { color: var(--nav-accent); background: var(--nav-accent-soft); }
body #sidebar .sidebar-item > a.is-current {
    background: var(--nav-action); color: #fff;
    box-shadow: 0 4px 12px rgba(198, 83, 10, .15);
}
body #sidebar .sidebar-item > a.is-current > .nav-icon-holder { color: #fff; }
.nav-brand-mark { background: var(--nav-action); }
.nav-brand-mark circle:last-child { fill: var(--nav-action); }
body #header.page-header {
    background: var(--nav-toolbar) !important;
    border-bottom: 1px solid rgba(105, 43, 8, .12);
    box-shadow: 0 4px 16px rgba(151, 68, 14, .1);
    color: #fff;
}
body .big-header-banner .page-header .header-mini-btn path { stroke: #fff; }
body #header .mobile-menu > a, body #header .navbar-brand { color: #fff; }
body #header .navbar-brand .nav-brand-mark { background: rgba(255, 255, 255, .16); }
.header-calendar time, .header-intro, .header-intro span { color: #fff; }
.header-calendar #nav-current-weekday {
    color: #fff; background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
}
.header-search { background: var(--nav-surface); border-color: transparent; box-shadow: 0 2px 8px rgba(100, 36, 0, .08); }
.header-search:focus-within { border-color: #ffd2a7; box-shadow: 0 0 0 3px rgba(255, 255, 255, .2); }
.header-search button { background: var(--nav-action); color: #fff; }
.header-search button:hover { background: #ac4205; }
.header-quicklink {
    color: #fff; background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .24);
}
.header-quicklink > i { color: #fff; }
.header-quicklink:hover { color: #fff; background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .6); }
#header a:focus-visible, #header button:focus-visible { outline-color: #fff1df; }
.category-dock a { color: var(--nav-muted); }
.category-dock a:hover { background: var(--nav-accent-soft); }
.category-dock a.is-current { color: #fff; background: var(--nav-action); border-color: var(--nav-action); }
.category-dock a.is-current span { color: #fff; opacity: .85; }
body .resource-section h4 > i { color: #fff; background: var(--nav-action); }
.section-heading::after { background: linear-gradient(to right, var(--nav-border), transparent); }
body #content .url-card .url-body:hover {
    border-color: var(--nav-accent);
    box-shadow: 0 7px 20px rgba(151, 68, 14, .12);
}
body #content .url-card .url-body:hover strong { color: var(--nav-accent); }
body #footer-tools .btn { color: var(--nav-accent); }
body #footer-tools .btn:hover { background: var(--nav-accent-soft); }
body .search-modal #search button { background: var(--nav-action); }
body footer.main-footer .footer-text {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px;
    text-align: center; font-size: 12px;
}
body footer.main-footer .footer-text > span,
body footer.main-footer .footer-text > a { white-space: nowrap; }
body footer.main-footer .footer-text > a:hover { color: var(--nav-accent); }

/* Standalone pages use the same palette without changing their forms. */
.about-container, .submit-container {
    background: var(--nav-surface); border: 1px solid var(--nav-border);
    border-radius: 14px; box-shadow: var(--nav-shadow);
}
.about-header { background: var(--nav-toolbar); }
.section-title, .submit-header h1, .form-group label,
.skill-item .skill-name, .contact-list li strong, .guidelines h3 { color: var(--nav-text); }
.section-title, .submit-header { border-bottom-color: var(--nav-border); }
.section-title i, .skill-item i, .contact-list li i,
.contact-list li a, .back-home a { color: var(--nav-accent); }
.contact-list li a:hover { color: var(--nav-accent); }
.section-content, .highlight-box p, .submit-header p,
.guidelines li, .char-count { color: var(--nav-muted); }
.skill-item, .contact-list li, .back-home, .guidelines { background: var(--nav-bg); }
.contact-list li:hover { background: var(--nav-accent-soft); }
.highlight-box { background: var(--nav-accent-soft); border-left-color: var(--nav-accent); }
.about-container .back-home a, .submit-btn { color: #fff; background: var(--nav-action); }
.about-container .back-home a:hover, .submit-btn:hover:not(:disabled) { background: #ac4205; }
.submit-btn:disabled { background: #ccc; }
.form-control { color: var(--nav-text); background: var(--nav-surface); border-color: var(--nav-border); }
.form-control:focus { border-color: var(--nav-accent); box-shadow: 0 0 0 3px var(--nav-accent-soft); }
.form-control.error { border-color: #ff4444; }