/*
|--------------------------------------------------------------------------
| Qasion Full Dark Mode
|--------------------------------------------------------------------------
*/

:root {
    --qasion-dark-bg: #0f1418;
    --qasion-dark-bg-soft: #12191e;
    --qasion-dark-surface: #171f25;
    --qasion-dark-surface-2: #1c252c;
    --qasion-dark-surface-3: #222d35;
    --qasion-dark-border: #303b43;
    --qasion-dark-border-soft: #263139;
    --qasion-dark-text: #eef2f4;
    --qasion-dark-text-soft: #c3cdd3;
    --qasion-dark-muted: #98a5ad;
    --qasion-dark-primary: #ef554b;
    --qasion-dark-primary-hover: #ff675d;
    --qasion-dark-success: #2fb56b;
    --qasion-dark-danger: #ef625a;
    --qasion-dark-shadow:
        0 14px 36px
        rgba(0, 0, 0, .28);
}

html[data-theme="dark"] {
    color-scheme: dark;
    background: var(--qasion-dark-bg);
}

html[data-theme="dark"] body {
    background: var(--qasion-dark-bg) !important;
    color: var(--qasion-dark-text) !important;
}

/*
|--------------------------------------------------------------------------
| Header and navigation
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] .site-header {
    background: #0d1216 !important;
    border-color: var(--qasion-dark-border) !important;
    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, .2) !important;
}

html[data-theme="dark"] .top-bar {
    background: #090e11 !important;
    border-color: var(--qasion-dark-border-soft) !important;
    color: var(--qasion-dark-text-soft) !important;
}

html[data-theme="dark"] .top-bar a,
html[data-theme="dark"] .top-bar span,
html[data-theme="dark"] .top-message,
html[data-theme="dark"] .top-contact {
    color: var(--qasion-dark-text-soft) !important;
}

html[data-theme="dark"] .site-header :is(
    .header-inner,
    .main-header,
    .navbar,
    .navigation-wrapper,
    .mobile-menu
) {
    background: #11181d !important;
    border-color: var(--qasion-dark-border) !important;
}

html[data-theme="dark"] .site-header nav a,
html[data-theme="dark"] .mobile-menu a {
    color: var(--qasion-dark-text-soft) !important;
}

html[data-theme="dark"] .site-header nav a:hover,
html[data-theme="dark"] .site-header nav a.active,
html[data-theme="dark"] .mobile-menu a:hover,
html[data-theme="dark"] .mobile-menu a.active {
    color: #ffffff !important;
    background-color:
        rgba(239, 85, 75, .12) !important;
}

html[data-theme="dark"] :is(
    .menu-toggle,
    .mobile-menu-toggle,
    .language-button
) {
    background: var(--qasion-dark-surface) !important;
    color: var(--qasion-dark-text) !important;
    border-color: var(--qasion-dark-border) !important;
}

/*
|--------------------------------------------------------------------------
| Compact internal page headers
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] body :is(
    .inner-hero,
    .simple-page-hero,
    .qasion-page-hero,
    .qasion-simple-page-hero,
    .qasion-section-page-header,
    .qasion-contact-page-header,
    .qasion-about-hero,
    .qasion-contact-hero,
    .qasion-services-hero,
    .contact-hero,
    .about-hero,
    .page-hero,
    section[class*="page-header"],
    header[class*="page-header"]
) {
    background: #171f25 !important;
    background-color: #171f25 !important;
    background-image: none !important;
    border-color: var(--qasion-dark-border) !important;
    color: var(--qasion-dark-text) !important;
}

html[data-theme="dark"] body :is(
    .inner-hero,
    .simple-page-hero,
    .qasion-page-hero,
    .qasion-simple-page-hero,
    .qasion-section-page-header,
    .qasion-contact-page-header,
    .contact-hero,
    .about-hero,
    .page-hero
)::before,
html[data-theme="dark"] body :is(
    .inner-hero,
    .simple-page-hero,
    .qasion-page-hero,
    .qasion-simple-page-hero,
    .qasion-section-page-header,
    .qasion-contact-page-header,
    .contact-hero,
    .about-hero,
    .page-hero
)::after {
    display: none !important;
    content: none !important;
}

html[data-theme="dark"] body :is(
    .inner-hero,
    .simple-page-hero,
    .qasion-page-hero,
    .qasion-simple-page-hero,
    .qasion-section-page-header,
    .qasion-contact-page-header,
    .contact-hero,
    .about-hero,
    .page-hero
) h1 {
    color: #ffffff !important;
}

html[data-theme="dark"] body :is(
    .inner-hero,
    .simple-page-hero,
    .qasion-page-hero,
    .qasion-simple-page-hero,
    .qasion-section-page-header,
    .qasion-contact-page-header,
    .contact-hero,
    .about-hero,
    .page-hero
) p {
    color: var(--qasion-dark-text-soft) !important;
}

html[data-theme="dark"] body :is(
    .inner-hero,
    .simple-page-hero,
    .qasion-page-hero,
    .qasion-simple-page-hero,
    .qasion-section-page-header,
    .qasion-contact-page-header
) :is(
    .section-label,
    [class*="kicker"],
    [class*="eyebrow"]
) {
    color: #ff8179 !important;
}

/*
|--------------------------------------------------------------------------
| Main page backgrounds
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] body :is(
    .section,
    .simple-page,
    .qasion-contact-page,
    .qasion-about-section,
    .about-section,
    .contact-section,
    .qasion-contact-section,
    .qasion-page-content,
    .qasion-icon-services-page,
    .qasion-section-services,
    .qasion-service-details-section,
    .qasion-related-services,
    .qasion-request-section,
    .qasion-home-service-sections,
    .services-section,
    .features-section,
    .testimonials-section,
    .cta-section
) {
    background-color: var(--qasion-dark-bg) !important;
    color: var(--qasion-dark-text) !important;
}

/*
|--------------------------------------------------------------------------
| Cards and content containers
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] body :is(
    .simple-page-card,
    .card,
    .qasion-contact-method-card,
    .qasion-contact-form-card,
    .qasion-contact-info-card,
    .qasion-contact-map-card,
    .qasion-public-service-card,
    .qasion-compact-service-card,
    .qasion-category-card,
    .qasion-home-section-card,
    .qasion-service-action-card,
    .qasion-request-form-card,
    .qasion-request-info,
    .qasion-request-step,
    .qasion-related-card,
    .about-card,
    .feature-card,
    .vision-card,
    .mission-card,
    .value-card,
    .service-card,
    .client-card,
    .client-auth-card
) {
    background: var(--qasion-dark-surface) !important;
    background-color: var(--qasion-dark-surface) !important;
    border-color: var(--qasion-dark-border) !important;
    box-shadow: var(--qasion-dark-shadow) !important;
}

html[data-theme="dark"] body :is(
    .simple-page-card,
    .card,
    .qasion-contact-method-card,
    .qasion-contact-form-card,
    .qasion-contact-info-card,
    .qasion-public-service-card,
    .qasion-compact-service-card,
    .qasion-category-card,
    .qasion-home-section-card,
    .qasion-service-action-card,
    .qasion-request-form-card,
    .qasion-request-info,
    .qasion-request-step,
    .qasion-related-card,
    .about-card,
    .feature-card,
    .vision-card,
    .mission-card,
    .value-card,
    .service-card,
    .client-card,
    .client-auth-card
) :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    strong,
    label
) {
    color: var(--qasion-dark-text) !important;
}

html[data-theme="dark"] body :is(
    .simple-page-card,
    .card,
    .qasion-contact-method-card,
    .qasion-contact-form-card,
    .qasion-contact-info-card,
    .qasion-public-service-card,
    .qasion-compact-service-card,
    .qasion-category-card,
    .qasion-home-section-card,
    .qasion-service-action-card,
    .qasion-request-form-card,
    .qasion-request-info,
    .qasion-request-step,
    .qasion-related-card,
    .about-card,
    .feature-card,
    .vision-card,
    .mission-card,
    .value-card,
    .service-card,
    .client-card,
    .client-auth-card
) :is(
    p,
    span,
    small,
    li
) {
    color: var(--qasion-dark-text-soft) !important;
}

html[data-theme="dark"] body :is(
    .qasion-contact-method-icon,
    .qasion-category-icon,
    .qasion-section-page-icon,
    .qasion-compact-service-icon
) {
    background:
        rgba(239, 85, 75, .14) !important;
    color: #ff776f !important;
}

html[data-theme="dark"] body :is(
    .qasion-contact-working-hours,
    .qasion-contact-map-placeholder,
    .qasion-details-taxonomy,
    .qasion-action-card-note,
    .qasion-reference-number
) {
    background: var(--qasion-dark-surface-2) !important;
    color: var(--qasion-dark-text-soft) !important;
    border-color: var(--qasion-dark-border) !important;
}

/*
|--------------------------------------------------------------------------
| General text and links
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] body :is(
    .qasion-contact-page,
    .qasion-about-section,
    .about-section,
    .qasion-page-content,
    .qasion-section-services,
    .qasion-service-details-section,
    .qasion-related-services,
    .qasion-request-section,
    .qasion-home-service-sections
) :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
) {
    color: var(--qasion-dark-text) !important;
}

html[data-theme="dark"] body :is(
    .qasion-contact-page,
    .qasion-about-section,
    .about-section,
    .qasion-page-content,
    .qasion-section-services,
    .qasion-service-details-section,
    .qasion-related-services,
    .qasion-request-section,
    .qasion-home-service-sections
) p {
    color: var(--qasion-dark-text-soft) !important;
}

html[data-theme="dark"] body a {
    color: #ff8179;
}

html[data-theme="dark"] body a:hover {
    color: #ffaaa5;
}

/*
|--------------------------------------------------------------------------
| Forms
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] body :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
) {
    background: #11181d !important;
    color: var(--qasion-dark-text) !important;
    border-color: var(--qasion-dark-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body :is(
    input,
    textarea
)::placeholder {
    color: #7f8b93 !important;
    opacity: 1;
}

html[data-theme="dark"] body :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
):focus {
    border-color: var(--qasion-dark-primary) !important;
    box-shadow:
        0 0 0 3px
        rgba(239, 85, 75, .14) !important;
    outline: none !important;
}

html[data-theme="dark"] body label {
    color: var(--qasion-dark-text-soft);
}

html[data-theme="dark"] body input[type="checkbox"],
html[data-theme="dark"] body input[type="radio"] {
    accent-color: var(--qasion-dark-primary);
}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] body :is(
    .button-primary,
    .qasion-contact-submit,
    .qasion-details-primary-button,
    .qasion-submit-request
) {
    background: var(--qasion-dark-primary) !important;
    color: #ffffff !important;
    border-color: var(--qasion-dark-primary) !important;
}

html[data-theme="dark"] body :is(
    .button-primary,
    .qasion-contact-submit,
    .qasion-details-primary-button,
    .qasion-submit-request
):hover {
    background: var(--qasion-dark-primary-hover) !important;
    border-color: var(--qasion-dark-primary-hover) !important;
}

html[data-theme="dark"] body :is(
    .button-secondary,
    .qasion-details-secondary-button,
    .qasion-back-to-sections
) {
    background: var(--qasion-dark-surface-2) !important;
    color: var(--qasion-dark-text) !important;
    border-color: var(--qasion-dark-border) !important;
}

/*
|--------------------------------------------------------------------------
| Alerts and statuses
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] .qasion-contact-success,
html[data-theme="dark"] .qasion-request-success {
    background: #10271b !important;
    border-color: #235d3c !important;
    color: #92e2b1 !important;
}

html[data-theme="dark"] .qasion-contact-errors,
html[data-theme="dark"] .qasion-form-errors {
    background: #311716 !important;
    border-color: #68302c !important;
    color: #ffaaa5 !important;
}

html[data-theme="dark"] body :is(
    .alert,
    .notice,
    .status-box
) {
    border-color: var(--qasion-dark-border) !important;
}

/*
|--------------------------------------------------------------------------
| Tables
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] body table {
    background: var(--qasion-dark-surface) !important;
    color: var(--qasion-dark-text) !important;
    border-color: var(--qasion-dark-border) !important;
}

html[data-theme="dark"] body :is(
    th,
    td
) {
    border-color: var(--qasion-dark-border) !important;
}

html[data-theme="dark"] body th {
    background: var(--qasion-dark-surface-2) !important;
    color: var(--qasion-dark-text) !important;
}

html[data-theme="dark"] body tbody tr:hover {
    background:
        rgba(255, 255, 255, .025) !important;
}

/*
|--------------------------------------------------------------------------
| Client portal
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] body :is(
    .client-page,
    .client-layout,
    .client-shell,
    .client-content,
    .client-main,
    .client-auth-page
) {
    background: var(--qasion-dark-bg) !important;
    color: var(--qasion-dark-text) !important;
}

html[data-theme="dark"] body :is(
    .client-header,
    .client-sidebar,
    .client-navigation,
    .client-topbar,
    .client-footer
) {
    background: #11181d !important;
    border-color: var(--qasion-dark-border) !important;
    color: var(--qasion-dark-text-soft) !important;
}

html[data-theme="dark"] body :is(
    .client-header,
    .client-sidebar,
    .client-navigation,
    .client-topbar,
    .client-footer
) a {
    color: var(--qasion-dark-text-soft) !important;
}

html[data-theme="dark"] body :is(
    .client-header,
    .client-sidebar,
    .client-navigation,
    .client-topbar
) a:hover,
html[data-theme="dark"] body :is(
    .client-header,
    .client-sidebar,
    .client-navigation,
    .client-topbar
) a.active {
    background:
        rgba(239, 85, 75, .12) !important;
    color: #ffffff !important;
}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] .site-footer {
    background: #080c0f !important;
    border-color: var(--qasion-dark-border-soft) !important;
    color: var(--qasion-dark-text-soft) !important;
}

html[data-theme="dark"] .site-footer h3 {
    color: #ffffff !important;
}

html[data-theme="dark"] .site-footer :is(
    p,
    span,
    small,
    a
) {
    color: #b7c2c8 !important;
}

html[data-theme="dark"] .site-footer a:hover {
    color: #ffffff !important;
}

html[data-theme="dark"] .footer-bottom {
    background: #06090b !important;
    border-color: var(--qasion-dark-border-soft) !important;
}

/*
|--------------------------------------------------------------------------
| Images and maps
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] .qasion-contact-map-card iframe {
    filter:
        brightness(.86)
        contrast(1.08)
        saturate(.82);
}

html[data-theme="dark"] body :is(
    img,
    video
) {
    opacity: .96;
}

/*
|--------------------------------------------------------------------------
| Theme toggle
|--------------------------------------------------------------------------
*/

.qasion-theme-toggle {
    position: fixed;
    z-index: 9998;
    bottom: 22px;
    left: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    padding: 0;

    background: #ffffff;
    border: 1px solid #d8dde0;
    border-radius: 50%;

    color: #27323a;

    box-shadow:
        0 10px 28px
        rgba(15, 20, 24, .18);

    cursor: pointer;

    transition:
        transform .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.header-actions .qasion-theme-toggle {
    position: static;
    width: 40px;
    height: 40px;
    box-shadow: none;
}

.qasion-theme-toggle:hover {
    transform: translateY(-2px);
}

.qasion-theme-toggle svg {
    display: block;
    width: 20px;
    height: 20px;
}

.qasion-theme-toggle-sun,
.qasion-theme-toggle-moon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.qasion-theme-toggle-sun {
    display: none;
}

html[data-theme="dark"]
.qasion-theme-toggle {
    background: #1a2329;
    border-color: #36434c;
    color: #f5d061;
}

html[data-theme="dark"]
.qasion-theme-toggle-sun {
    display: inline-flex;
}

html[data-theme="dark"]
.qasion-theme-toggle-moon {
    display: none;
}

/*
|--------------------------------------------------------------------------
| Scrollbar
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] {
    scrollbar-color:
        #47555e
        #11181d;
}

html[data-theme="dark"] ::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #11181d;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #47555e;
    border: 3px solid #11181d;
    border-radius: 20px;
}

html[data-theme="dark"] ::selection {
    background:
        rgba(239, 85, 75, .42);
    color: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {
    .header-actions .qasion-theme-toggle {
        position: fixed;
        bottom: 18px;
        left: 18px;
        width: 43px;
        height: 43px;
        box-shadow:
            0 10px 28px
            rgba(0, 0, 0, .28);
    }

    .qasion-theme-toggle {
        bottom: 18px;
        left: 18px;
    }
}

/*
|--------------------------------------------------------------------------
| Printing must remain light
|--------------------------------------------------------------------------
*/

@media print {
    html,
    html[data-theme="dark"],
    html[data-theme="dark"] body {
        color-scheme: light !important;
        background: #ffffff !important;
        color: #000000 !important;
    }

    .qasion-theme-toggle {
        display: none !important;
    }
}