/* Shared day/night theme controls */

.header-inner > .theme-toggle {
    margin-left: auto;
}

.primary-nav {
    margin-left: 10px;
}

.theme-toggle {
    position: relative;
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 7px 20px rgba(7, 22, 38, 0.06);
    color: #9a650e;
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.theme-toggle:hover {
    border-color: #abc9d6;
    background: var(--surface-blue);
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 3px solid rgba(8, 127, 174, 0.32);
    outline-offset: 3px;
}

.theme-toggle-glyph {
    position: relative;
    display: block;
    width: 23px;
    height: 23px;
}

.theme-icon {
    position: absolute;
    inset: 0;
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: opacity 180ms ease, transform 220ms ease;
}

.theme-icon-moon {
    opacity: 0;
    transform: rotate(-24deg) scale(0.72);
}

html[data-theme="dark"] {
    color-scheme: dark;
    background: #05090e;
    --ink-950: #f5f8fa;
    --ink-900: #e8eff3;
    --ink-800: #d4e0e6;
    --slate-700: #c5d0d8;
    --slate-600: #aebdc7;
    --slate-400: #879aa8;
    --line: #293d4c;
    --surface: #091119;
    --surface-soft: #0d1822;
    --surface-blue: #0d2936;
    --brand: #168eb7;
    --brand-dark: #76d2e7;
    --brand-light: #6fd5e9;
    --accent: #ff6268;
    --shadow-sm: 0 14px 38px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 30px 76px rgba(0, 0, 0, 0.52);
    --night-page: #05090e;
    --night-panel: #091119;
    --night-elevated: #101c27;
    --night-elevated-strong: #142431;
    --night-deep: #071626;
    --night-deep-alt: #12304c;
    --night-text: #f5f8fa;
    --night-muted: #aebdc7;
}

html[data-theme="dark"] body {
    background: var(--night-page);
    color: var(--night-text);
}

/* These components intentionally remain deep navy while ordinary ink tokens invert for readable text. */
html[data-theme="dark"] :where(
    .skip-link,
    .visual-frame,
    .approach,
    .cta-panel,
    .about-image-frame,
    .values-section,
    .systems-visual,
    .delivery-card[aria-current="location"],
    .sidebar-assist,
    .reference-visual,
    .resource-sidebar-assist,
    .reference-table thead,
    .return-to-top,
    .mail-console,
    .guide-picker-card[aria-current="true"],
    .current-checklist,
    .screenshot-dialog,
    .enquiry-console,
    .contact-details,
    .form-switch button.active,
    .form-switch button[aria-pressed="true"]
) {
    --ink-950: #071626;
    --ink-900: #0b1f33;
    --ink-800: #12304c;
}

html[data-theme="dark"] .theme-toggle {
    border-color: #345062;
    background: #0d1923;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    color: #a2e5f3;
}

html[data-theme="dark"] .theme-toggle:hover {
    border-color: #5f9eb5;
    background: #112631;
}

html[data-theme="dark"] .theme-icon-sun {
    opacity: 0;
    transform: rotate(30deg) scale(0.72);
}

html[data-theme="dark"] .theme-icon-moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

html[data-theme="dark"] .site-header {
    border-bottom-color: rgba(83, 116, 137, 0.46);
    background: rgba(5, 9, 14, 0.95);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] .brand-logo {
    filter: invert(1) hue-rotate(180deg);
}

html[data-theme="dark"] .nav-banner {
    border-bottom-color: var(--line);
    background: rgba(7, 13, 19, 0.99);
    box-shadow: var(--shadow-sm);
}

html[data-theme="dark"] .nav-links .nav-contact {
    background: #147b9f;
    color: #ffffff;
}

html[data-theme="dark"] .nav-links .nav-contact:hover {
    background: #0d6d91;
    color: #ffffff;
}

html[data-theme="dark"] .hamburger {
    border-color: var(--line);
    background: var(--night-panel);
}

html[data-theme="dark"] :where(
    .hero,
    .about-hero,
    .services-hero,
    .resources-hero,
    .email-hero,
    .contact-hero
) {
    background:
        radial-gradient(circle at 4% 8%, rgba(51, 160, 194, 0.17), transparent 28%),
        radial-gradient(circle at 96% 91%, rgba(16, 83, 112, 0.2), transparent 28%),
        linear-gradient(135deg, #07111a 0%, #05090e 55%, #081720 100%);
}

html[data-theme="dark"] :where(
    .hero,
    .about-hero,
    .services-hero,
    .resources-hero,
    .email-hero,
    .contact-hero
)::before {
    background-image:
        linear-gradient(rgba(114, 208, 228, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(114, 208, 228, 0.045) 1px, transparent 1px);
}

html[data-theme="dark"] .button-primary {
    background: #147b9f;
    color: #ffffff;
}

html[data-theme="dark"] .button-primary:hover {
    background: #0f769b;
}

html[data-theme="dark"] .button-secondary {
    border-color: #385064;
    background: rgba(16, 28, 39, 0.84);
    color: var(--night-text);
}

html[data-theme="dark"] .button-secondary:hover {
    border-color: #587489;
    background: var(--night-elevated-strong);
}

html[data-theme="dark"] .proof-strip {
    background: #080f16;
}

html[data-theme="dark"] :where(
    .support-card,
    .work-card,
    .service-card,
    .library-tools,
    .resource-sidebar,
    .resource-empty,
    .foundation-card,
    .settings-rule,
    .guide-picker-card,
    .email-guide-sidebar,
    .email-guide,
    .setup-prerequisites,
    .legacy-archive,
    .guide-step,
    .contact-process-card,
    .form-container
) {
    border-color: var(--line);
    background: var(--night-elevated);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16);
}

html[data-theme="dark"] :where(.solution-card, .delivery-card, .resource-overview-card, .choice-panel) {
    border-color: var(--line);
}

html[data-theme="dark"] :where(.support-card, .work-card, .service-card, .resource-overview-card, .guide-picker-card):hover {
    border-color: #4b7185;
}

html[data-theme="dark"] :where(.services-intro, .resources-intro, .email-intro, .email-cta) {
    background: var(--night-page);
}

html[data-theme="dark"] :where(.catalog-section, .resource-library) {
    border-color: var(--line);
    background:
        linear-gradient(180deg, rgba(14, 26, 36, 0.96), rgba(5, 9, 14, 0.99) 38%),
        var(--night-page);
}

html[data-theme="dark"] .email-library {
    border-color: var(--line);
    background: #0a131c;
}

html[data-theme="dark"] :where(.service-sidebar, .resource-sidebar, .email-guide-sidebar) {
    background: rgba(14, 25, 35, 0.98);
}

html[data-theme="dark"] :where(.category, .resource-category) {
    color: var(--night-text);
}

html[data-theme="dark"] :where(.subcategory a, .resource-subcategory a) {
    color: var(--night-muted);
}

html[data-theme="dark"] :where(.subcategory a, .resource-subcategory a):hover {
    background: #152532;
    color: var(--night-text);
}

html[data-theme="dark"] :where(
    .subcategory a.active,
    .subcategory a[aria-current="true"],
    .subcategory a[aria-current="location"],
    .resource-subcategory a.active,
    .resource-subcategory a[aria-current="location"]
) {
    background: #0e3343;
    color: #8ce0ef;
}

html[data-theme="dark"] .capability-list li {
    border-color: #304958;
    background: #111f2a;
    color: #c6d3da;
}

html[data-theme="dark"] :where(.sidebar-toggle, .resource-directory-toggle, .guide-directory-toggle) {
    border-color: var(--line);
    background: rgba(14, 25, 35, 0.99);
    color: var(--night-text);
}

html[data-theme="dark"] :where(.service-sidebar.open, .resource-sidebar.open, .email-guide-sidebar.open) {
    border-color: var(--line);
    background: #0e1923;
}

html[data-theme="dark"] .search-control {
    border-color: #385164;
    background: #0b151e;
    color: var(--slate-400);
}

html[data-theme="dark"] .search-control:focus-within {
    border-color: #65c7df;
    box-shadow: 0 0 0 4px rgba(101, 199, 223, 0.14);
}

html[data-theme="dark"] .search-control button {
    background: #132632;
    color: #86d9eb;
}

html[data-theme="dark"] .section-entry-count {
    border-color: var(--line);
    background: #101c27;
}

html[data-theme="dark"] .resource-note {
    border-left-color: #4ab8d3;
    background: #0c2b38;
}

html[data-theme="dark"] .resource-note-security {
    border-left-color: #ff7378;
    background: #2a151b;
}

html[data-theme="dark"] .reference-table-wrap {
    border-color: var(--line);
    background: var(--night-panel);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .reference-table tbody :where(th, td) {
    border-bottom-color: var(--line);
    background: #0f1b25;
}

html[data-theme="dark"] .reference-table tbody tr:nth-child(even) :where(th, td) {
    background: #12212c;
}

html[data-theme="dark"] .reference-table tbody tr:hover :where(th, td) {
    background: #123342;
}

html[data-theme="dark"] .foundation-note {
    background:
        radial-gradient(circle at 100% 100%, rgba(71, 189, 216, 0.1), transparent 35%),
        #0d1a24;
}

html[data-theme="dark"] .guide-picker-card.legacy::after {
    background: #1c2b36;
    color: #b8c7cf;
}

html[data-theme="dark"] :where(.guide-notice, .settings-caution) {
    border-color: #28566a;
    background: #0b2a37;
}

html[data-theme="dark"] .guide-notice-cloud {
    border-color: #4b436c;
    background: #211d31;
}

html[data-theme="dark"] .guide-notice-cloud strong {
    color: #c6b9ff;
}

html[data-theme="dark"] :where(.support-warning, .legacy-banner) {
    border-color: #6c512f;
    background: #2a2116;
}

html[data-theme="dark"] :where(.support-warning strong, .legacy-banner strong, .legacy-archive > summary small) {
    color: #f2bc76;
}

html[data-theme="dark"] :where(.table-scroll, .email-guide table) {
    border-color: var(--line);
    background: #0d1822;
}

html[data-theme="dark"] .email-guide thead th {
    background: #142431;
    color: var(--night-text);
}

html[data-theme="dark"] .email-guide :where(th, td) {
    border-color: var(--line);
}

html[data-theme="dark"] .email-guide tbody tr:nth-child(even) {
    background: #111f2a;
}

html[data-theme="dark"] .guide-subnav {
    border-color: var(--line);
    background: #0d1923;
}

html[data-theme="dark"] :where(.guide-subnav a, .faq-nav-btn) {
    border-color: var(--line);
    background: #14232f;
    color: #83d8ea;
}

html[data-theme="dark"] :where(.guide-subnav a, .faq-nav-btn):hover {
    border-color: #4d7386;
    background: #17303d;
}

html[data-theme="dark"] .guide-step p + p {
    border-left-color: #4a849a;
    background: #111f2a;
}

html[data-theme="dark"] .screenshot-button {
    border-color: var(--line);
    background:
        linear-gradient(45deg, #121f29 25%, transparent 25%),
        linear-gradient(-45deg, #121f29 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #121f29 75%),
        linear-gradient(-45deg, transparent 75%, #121f29 75%),
        #0b151e;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

html[data-theme="dark"] .screenshot-button::after {
    border-top-color: var(--line);
    background: rgba(10, 20, 29, 0.94);
    color: var(--night-muted);
}

html[data-theme="dark"] .contact-section {
    border-color: var(--line);
    background: #0a131c;
}

html[data-theme="dark"] .verification-note {
    border-color: #28566a;
    background: #0b2a37;
}

html[data-theme="dark"] .form-switch {
    border-color: var(--line);
    background: #0b151e;
}

html[data-theme="dark"] .form-switch button {
    color: var(--night-muted);
}

html[data-theme="dark"] .form-switch button:hover {
    color: var(--night-text);
}

html[data-theme="dark"] .form-switch button.active,
html[data-theme="dark"] .form-switch button[aria-pressed="true"] {
    background: #153247;
    color: #ffffff;
}

html[data-theme="dark"] .form-container :where(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
    border-color: #385164;
    background: #0b151e;
    color: var(--night-text);
}

html[data-theme="dark"] .form-container :where(input, textarea)::placeholder {
    color: #8498a7;
}

html[data-theme="dark"] .form-container :where(input[type="text"], input[type="email"], input[type="tel"], textarea, select):hover {
    border-color: #587489;
}

html[data-theme="dark"] .form-container :where(input[type="text"], input[type="email"], input[type="tel"], textarea, select):focus {
    border-color: #65c7df;
    box-shadow: 0 0 0 4px rgba(101, 199, 223, 0.14);
}

html[data-theme="dark"] .form-container :where(input, textarea, select):disabled {
    border-color: #293a46;
    background: #101820;
    color: #788a97;
}

html[data-theme="dark"] .form-container option {
    background: #0b151e;
    color: var(--night-text);
}

html[data-theme="dark"] .form-container :where(input, textarea):-webkit-autofill,
html[data-theme="dark"] .form-container :where(input, textarea):-webkit-autofill:hover,
html[data-theme="dark"] .form-container :where(input, textarea):-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0b151e inset;
    -webkit-text-fill-color: var(--night-text);
    caret-color: var(--night-text);
}

html[data-theme="dark"] .tax-group.box {
    border-color: var(--line);
    background: #0d1923;
}

html[data-theme="dark"] .g-recaptcha {
    border-color: #c8d2d9;
    background: #f4f7f9;
    color-scheme: light;
}

html[data-theme="dark"] .form-container button[type="submit"] {
    background: #147b9f;
    color: #ffffff;
}

html[data-theme="dark"] .form-container button[type="submit"]:hover {
    background: #0f769b;
}

@media (max-width: 720px) {
    .primary-nav {
        margin-left: 8px;
    }

    .theme-toggle {
        width: 44px;
        height: 44px;
        border-radius: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .theme-icon {
        transition: none;
    }
}