/* CarMisto sitewide visual layer.
   Loaded last so the public SPA, full-page SEO routes and operational surfaces
   share one quiet set of tokens without changing their business contracts. */
:root {
    --nr-page-max: 1240px;
    --nr-page-gutter: clamp(16px, 3.5vw, 48px);
    --nr-surface-raised: #fff;
    --nr-surface-soft: #f7f8fa;
    --nr-border-soft: #e1e6ec;
    --nr-shadow-soft: 0 12px 34px rgba(26, 37, 50, .07);
    --nr-shadow-hover: 0 18px 42px rgba(26, 37, 50, .12);
    --nr-focus: rgba(201, 22, 29, .22);
}

[data-theme='dark'] {
    --nr-surface-raised: #1b232d;
    --nr-surface-soft: #141b23;
    --nr-border-soft: #354252;
    --nr-shadow-soft: 0 12px 34px rgba(0, 0, 0, .24);
    --nr-shadow-hover: 0 18px 42px rgba(0, 0, 0, .34);
    --nr-focus: rgba(255, 117, 124, .34);
}

html { scroll-behavior: smooth; }

body.site-shell,
body.standalone-page {
    min-width: 320px;
    overflow-x: hidden;
    color: var(--text-main, #202b3a);
    background: var(--bg-main, #f5f6f8);
}

body.not-found-page {
    display: block !important;
    min-height: 100vh;
    padding: 0 !important;
}

body.not-found-page > main {
    margin: clamp(28px, 7vw, 80px) auto;
}

body.site-shell :is(button, input, select, textarea),
body.standalone-page :is(button, input, select, textarea) {
    max-width: 100%;
}

body.site-shell :is(button, input, select, textarea):focus-visible,
body.standalone-page :is(button, input, select, textarea):focus-visible,
body.site-shell a:focus-visible,
body.standalone-page a:focus-visible {
    outline: 3px solid var(--nr-focus) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

body.site-shell :is(button, .btn, .cta, .public-page__hero-action, .public-page__lead-submit),
body.standalone-page :is(button, .btn, .cta) {
    min-height: 44px;
}

/* Shared shell for SEO pages which cannot extend base.html because they carry
   a separate data contract (vehicle detail, city landing and legal pages). */
.standalone-public-header {
    position: relative;
    z-index: 10;
    border-bottom: 2px solid var(--primary, #c9161d);
    background: #1d232b;
    color: #fff;
    box-shadow: 0 4px 18px rgba(20, 30, 44, .12);
}

.standalone-public-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(100%, var(--nr-page-max));
    min-height: 62px;
    margin: 0 auto;
    padding: 9px var(--nr-page-gutter);
}

.standalone-public-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.025em;
    text-decoration: none;
}

.standalone-public-header__mark {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary, #c9161d);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.standalone-public-header__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.standalone-public-header__nav::-webkit-scrollbar { display: none; }

.standalone-public-header__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: rgba(255, 255, 255, .84);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.standalone-public-header__nav a:hover,
.standalone-public-header__nav a[aria-current='page'] {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.standalone-public-header__language {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 4px;
    padding: 0 5px;
    white-space: nowrap;
}

.standalone-public-header__language a { padding-inline: 5px; }

.standalone-public-header__theme {
    display: inline-grid;
    place-items: center;
    min-width: 38px;
    min-height: 38px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.standalone-public-header__theme:hover { background: rgba(255, 255, 255, .16); }

.standalone-public-header__back {
    color: #fff !important;
    background: var(--primary, #c9161d);
}

.standalone-public-header__back:hover { background: var(--primary-hover, #a90f16) !important; }

/* The old standalone bar remains supported for transactional/legacy screens;
   it now inherits the same dimensions and contrast as the shared shell. */
body.standalone-page > header.bar,
body.standalone-page > header.header-top {
    border-bottom: 2px solid var(--primary, #c9161d);
    background: #1d232b;
    box-shadow: 0 4px 18px rgba(20, 30, 44, .12);
}

body.standalone-page > header.bar .bar-inner,
body.standalone-page > header.header-top {
    min-height: 62px;
}

body.standalone-page :is(.bar-inner, .header-top) a,
body.standalone-page :is(.bar-inner, .header-top) button {
    min-height: 38px;
}

/* Consistent page rhythm for public full-page surfaces. */
body.standalone-page > main,
body.standalone-page > section.page-context-hero,
body.site-shell #main-content > .public-page,
body.site-shell #main-content > .rental-guide,
body.site-shell #main-content > .marketplace-page {
    isolation: isolate;
}

body.standalone-page :is(.wrap, .legal-page, main.city-landing-page),
body.site-shell #main-content > :is(.public-page, .rental-guide, .marketplace-page) {
    position: relative;
}

body.site-shell :is(.public-page__hero, .marketplace-hero, .guide-heading, .news-hub__hero),
body.standalone-page .page-context-hero {
    border-color: var(--nr-border-soft) !important;
    box-shadow: var(--nr-shadow-soft);
}

body.site-shell :is(.public-page__card, .marketplace-panel, .partner-page__benefit-card, .partner-page__route-card, .affiliate-step),
body.standalone-page :is(.panel, .card, .booking, .stats > div, .city-discovery, .faq details, .empty, .gallery-empty) {
    border-color: var(--nr-border-soft) !important;
    box-shadow: var(--nr-shadow-soft);
}

body.site-shell :is(.public-page__card, .marketplace-panel, .partner-page__benefit-card, .partner-page__route-card, .affiliate-step):hover,
body.standalone-page :is(.card, .city-discovery, .faq details):hover {
    box-shadow: var(--nr-shadow-hover);
}

body.site-shell :is(.public-page__hero, .public-page__card, .marketplace-panel, .partner-page__benefit-card, .partner-page__route-card, .affiliate-step),
body.standalone-page :is(.panel, .card, .booking, .city-discovery, .faq details, .empty) {
    border-radius: 16px;
}

body.site-shell :is(.public-page__hero, .public-page__card, .marketplace-panel) :is(h1, h2, h3),
body.standalone-page :is(.wrap, .legal-page, .city-landing-page) :is(h1, h2, h3) {
    overflow-wrap: anywhere;
}

body.site-shell :is(.public-page__hero, .marketplace-hero, .guide-heading) p,
body.standalone-page :is(.page-context-hero, .lead) p {
    max-width: 780px;
}

body.site-shell img,
body.standalone-page img {
    max-width: 100%;
}

body.standalone-page :is(input, select, textarea) {
    min-height: 44px;
    border-color: var(--nr-border-soft, #e1e6ec);
    border-radius: 10px;
    color: var(--text-main, #202b3a);
    background: var(--nr-surface-raised, #fff);
}

body.standalone-page textarea { min-height: 100px; }

body.standalone-page :is(.wrap, .legal-page) a:not(.btn):not(.cta):not(.standalone-public-header__brand) {
    text-underline-offset: 3px;
}

.standalone-public-footer {
    border-top: 1px solid var(--nr-border-soft);
    background: var(--nr-surface-raised);
    color: var(--text-muted, #5c6879);
}

.standalone-public-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    width: min(100%, var(--nr-page-max));
    margin: 0 auto;
    padding: 24px var(--nr-page-gutter) 30px;
    font-size: 13px;
}

.standalone-public-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.standalone-public-footer a {
    color: var(--text-main, #202b3a);
    font-weight: 650;
    text-decoration: none;
}

.standalone-public-footer a:hover { color: var(--primary, #c9161d); }

body.site-shell .site-footer {
    gap: 8px 18px;
    border-top: 1px solid var(--nr-border-soft);
    background: var(--nr-surface-raised);
}

/* Standalone pages still contain a few legacy fixed-color rules. Keep the
   dark theme genuinely dark and preserve readable headings outside cards. */
[data-theme='dark'] body.standalone-page {
    background: #12161c !important;
    color: var(--cm-surface-text, #f4f7fb) !important;
}

[data-theme='dark'] body.standalone-page :is(.breadcrumbs, .lead p) {
    color: var(--cm-surface-muted, #c1cbd6) !important;
}

[data-theme='dark'] body.standalone-page :is(.lead > h1, .faq > h2) {
    color: var(--cm-surface-text, #f4f7fb) !important;
    -webkit-text-fill-color: var(--cm-surface-text, #f4f7fb);
}

[data-theme='dark'] body.standalone-page .card-cta,
[data-theme='dark'] body.standalone-page .city-discovery-guides a {
    color: #ff7b82;
}

/* Operational surfaces use denser layouts but keep the same readable controls. */
body.standalone-page.admin-page :is(.container, .panel, .section, .card),
body.standalone-page.staff-login-page .box,
body.standalone-page.inspection-page section,
body.standalone-page.voucher-page .panel {
    border-color: var(--nr-border-soft);
    border-radius: 16px;
    box-shadow: var(--nr-shadow-soft);
}

body.standalone-page.admin-page :is(input, select, textarea, .btn, button),
body.standalone-page.staff-login-page :is(input, button),
body.standalone-page.inspection-page :is(input, select, textarea, button),
body.standalone-page.voucher-page :is(input, select, textarea, button, .btn) {
    min-height: 44px;
    border-radius: 10px;
}

@media (max-width: 760px) {
    .standalone-public-header__inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        padding-block: 10px;
    }

    .standalone-public-header__nav {
        justify-content: flex-start;
        width: 100%;
        margin-inline: -4px;
        padding-inline: 4px;
    }

    .standalone-public-header__nav a { font-size: 11px; }

    body.site-shell #main-content > :is(.public-page, .rental-guide, .marketplace-page) {
        padding-inline: 0;
    }

    body.standalone-page :is(.wrap, .legal-page) {
        width: 100%;
        max-width: none;
    }

    body.standalone-page :is(.layout, .requirements, .grid, .stats) {
        min-width: 0;
    }

    .standalone-public-footer__inner { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.site-shell *, body.standalone-page * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}