/*
 * Vintage Morocco page shell, navigation, footer and layout primitives.
 * Raw design values belong in tokens.css; breakpoint literals mirror the
 * approved token-layer media queries because custom properties cannot be used
 * in @media conditions.
 */

.vm-shell,
.vm-shell *,
.vm-shell *::before,
.vm-shell *::after {
    box-sizing: border-box;
}

:root {
    --vm-sticky-cta-block-size: calc(var(--space-3) + var(--control-height) + var(--space-3) + var(--border-hairline-width) + var(--safe-area-bottom));
}

.vm-shell {
    margin: var(--radius-none);
    padding-block-end: var(--vm-sticky-cta-block-size);
    background: var(--indigo-deep);
    color: var(--bone);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    -webkit-text-size-adjust: 100%;
}

.vm-shell.is-menu-locked {
    position: fixed;
    inset-block-start: var(--vm-scroll-lock-offset);
    inline-size: 100%;
    overflow: hidden;
    touch-action: none;
}

.vm-shell a {
    color: inherit;
    text-decoration: none;
}

.vm-shell button,
.vm-shell input,
.vm-shell select,
.vm-shell textarea {
    font: inherit;
}

.vm-shell button,
.vm-shell summary,
.vm-shell a {
    -webkit-tap-highlight-color: transparent;
}

.vm-shell :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.vm-shell [hidden] {
    display: none !important;
}

.vm-container {
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline-start: max(var(--gutter), env(safe-area-inset-left));
    padding-inline-end: max(var(--gutter), env(safe-area-inset-right));
}

.vm-section {
    padding-block: var(--section-space);
}

.vm-section--dark {
    background: var(--indigo-deep);
    color: var(--bone);
}

.vm-section--light {
    background: var(--tadelakt);
    color: var(--indigo-deep);
}

.vm-grid {
    display: grid;
    gap: var(--space-6);
}

.vm-skip-link {
    position: fixed;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--gutter);
    z-index: var(--z-menu);
    min-block-size: var(--tap-target-min);
    padding-inline: var(--space-4);
    display: flex;
    align-items: center;
    background: var(--saffron);
    color: var(--indigo-deep);
    font-weight: var(--weight-medium);
    transform: translateY(-200%);
}

.vm-skip-link:focus {
    transform: translateY(0);
}

.vm-wordmark {
    min-block-size: var(--tap-target-min);
    display: inline-flex;
    align-items: center;
    column-gap: var(--space-1);
    inline-size: var(--header-wordmark-max-width);
    max-inline-size: var(--header-wordmark-max-width);
    color: var(--bone);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wordmark);
    line-height: var(--leading-display);
    text-transform: uppercase;
    white-space: nowrap;
}

.vm-wordmark__secondary {
    opacity: var(--wordmark-secondary-opacity);
}

.vm-wordmark__graphic,
.vm-wordmark__svg {
    display: block;
    inline-size: 100%;
}

.vm-wordmark__svg {
    block-size: auto;
    overflow: visible;
}

.vm-button {
    box-sizing: border-box;
    min-block-size: var(--control-height);
    padding-inline: var(--space-5);
    border: var(--border-hairline-width) solid transparent;
    border-radius: var(--radius-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--indigo-deep);
    font-size: var(--step-0);
    font-weight: var(--weight-medium);
    line-height: var(--leading-display);
    text-align: center;
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.vm-button--primary {
    background: var(--button-primary-background);
    color: var(--indigo-deep);
}

@media (hover: hover) {
    .vm-button--primary:hover {
        background: var(--button-primary-background-hover);
    }
}

.vm-button--primary:active {
    background: var(--button-primary-background-pressed);
    transform: translateY(var(--button-pressed-offset));
}

.vm-button--ghost {
    border-color: var(--button-ghost-dark-border);
    background: transparent;
    color: var(--bone);
}

@media (hover: hover) {
    .vm-button--ghost:hover {
        border-color: var(--button-ghost-dark-border-hover);
    }
}

.vm-button--ghost:active {
    background: var(--button-ghost-dark-background-pressed);
}

/* Header */
.vm-site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-header);
    block-size: var(--header-height);
    border-block-end: var(--border-dark);
    background: color-mix(in srgb, var(--indigo-deep) var(--header-background-opacity), transparent);
    -webkit-backdrop-filter: blur(var(--header-backdrop-blur));
    backdrop-filter: blur(var(--header-backdrop-blur));
}

.vm-site-header__inner,
.vm-mobile-menu__header {
    block-size: var(--header-height);
    display: flex;
    align-items: center;
}

.vm-site-header__wordmark,
.vm-mobile-menu__wordmark {
    margin-inline-end: auto;
}

.vm-menu-button {
    inline-size: var(--menu-button-size);
    block-size: var(--menu-button-size);
    margin-inline-start: auto;
    padding: var(--space-3);
    border: var(--radius-none);
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--bone);
    cursor: pointer;
}

.vm-menu-button svg {
    inline-size: var(--space-5);
    block-size: var(--space-5);
    fill: none;
    stroke: currentColor;
    stroke-linecap: square;
    stroke-width: var(--border-hairline-width);
}

.vm-desktop-nav,
.vm-desktop-whatsapp {
    display: none;
}

/* Full-screen mobile menu */
.vm-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    block-size: var(--viewport-block-full);
    min-block-size: var(--viewport-block-full);
    display: grid;
    grid-template-rows: var(--header-height) minmax(0, 1fr) auto;
    background: var(--indigo-deep);
    color: var(--bone);
    opacity: 0;
    pointer-events: none;
    transform: translateY(var(--motion-menu-rise));
    transition: opacity var(--dur-nav) var(--ease), transform var(--dur-nav) var(--ease);
}

.vm-mobile-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.vm-mobile-menu__body {
    min-block-size: 0;
    overflow-y: hidden;
    overscroll-behavior: contain;
}

.vm-mobile-menu.is-scrollable .vm-mobile-menu__body {
    overflow-y: auto;
}

.vm-mobile-nav {
    padding-block: var(--space-1);
}

.vm-mobile-nav__eyebrow {
    margin-block: var(--space-6) var(--space-3);
    color: var(--saffron);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-eyebrow);
    line-height: var(--leading-display);
    text-transform: uppercase;
}

.vm-mobile-nav__list,
.vm-footer-group__links {
    margin: var(--radius-none);
    padding: var(--radius-none);
    list-style: none;
}

.vm-mobile-nav__item {
    opacity: 0;
    transition: opacity var(--dur-nav) var(--ease);
}

.vm-mobile-menu.is-open .vm-mobile-nav__item {
    opacity: 1;
    transition-delay: calc(var(--stagger-menu) * var(--vm-menu-index));
}

.vm-mobile-nav__link {
    min-block-size: var(--tap-target-min);
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
}

.vm-mobile-nav__link.is-active {
    text-decoration-color: var(--saffron);
    text-decoration-line: underline;
    text-decoration-thickness: var(--border-hairline-width);
    text-underline-offset: var(--nav-active-underline-offset);
}

.vm-mobile-menu__contact {
    padding-block-start: var(--space-6);
    padding-block-end: calc(var(--space-3) + var(--safe-area-bottom));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    background: var(--indigo-deep);
}

.vm-mobile-menu__phone {
    min-block-size: var(--tap-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--step-0);
    font-variant-numeric: tabular-nums;
}

/* Sticky mobile enquiry action */
.vm-sticky-cta {
    position: fixed;
    min-block-size: var(--vm-sticky-cta-block-size);
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-sticky-cta);
    padding-block-start: var(--space-3);
    padding-block-end: calc(var(--space-3) + var(--safe-area-bottom));
    border-block-start: var(--border-dark);
    background: var(--indigo-deep);
    pointer-events: none;
    transform: translateY(100%);
    transition: transform var(--dur-nav) var(--ease);
}

.vm-sticky-cta.is-visible:not(.is-field-focused):not(.is-menu-open) {
    pointer-events: auto;
    transform: translateY(0);
}

.vm-sticky-cta__button {
    inline-size: 100%;
}

/*
 * CookieAdmin owns consent, but its default blue fixed control otherwise sits
 * above the full-screen menu and covers the conversion bar or footer links.
 * navigation.js moves the same working button into the footer base; these
 * rules bring it into the approved token system without removing access.
 */
.vm-shell .cookieadmin_re_consent {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    inline-size: var(--tap-target-preferred) !important;
    block-size: var(--tap-target-preferred) !important;
    padding: var(--space-1) !important;
    border: var(--border-dark) !important;
    border-radius: var(--radius-control) !important;
    background: var(--indigo-raised) !important;
    box-shadow: var(--shadow-dark) !important;
    color: var(--bone) !important;
    transition: none !important;
}

.vm-shell .cookieadmin_reconsent_img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
}

.vm-shell .cookieadmin_btn {
    min-block-size: var(--tap-target-min) !important;
}

.vm-shell .cookieadmin-poweredby a {
    min-block-size: var(--tap-target-min) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Footer SEO surface */
.vm-site-footer {
    padding-block-start: var(--section-space);
    padding-block-end: calc(var(--section-space) + var(--control-height) + var(--space-6) + var(--safe-area-bottom));
    background: var(--indigo-deep);
    color: var(--bone);
}

.vm-footer-nav {
    border-block-start: var(--border-dark);
}

.vm-footer-group {
    border-block-end: var(--border-dark);
}

.vm-footer-group__summary {
    min-block-size: var(--menu-row-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    color: var(--saffron);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-eyebrow);
    list-style: none;
    text-transform: uppercase;
}


.vm-footer-group__heading-link {
    color: inherit;
    text-decoration-color: transparent;
    text-decoration-line: underline;
    text-decoration-thickness: var(--border-hairline-width);
    text-underline-offset: var(--nav-active-underline-offset);
    transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.vm-footer-group__heading-link:hover,
.vm-footer-group__heading-link:focus-visible {
    color: var(--saffron);
    text-decoration-color: currentColor;
}

.vm-footer-group__summary::-webkit-details-marker {
    display: none;
}

.vm-footer-group__indicator::before {
    content: "+";
}

.vm-footer-group[open] .vm-footer-group__indicator::before {
    content: "−";
}

.vm-footer-group__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-block-end: var(--space-4);
}

.vm-footer-group__links a {
    min-block-size: var(--tap-target-min);
    display: flex;
    align-items: center;
    color: color-mix(in srgb, var(--bone) var(--footer-link-opacity), transparent);
    font-family: var(--font-body);
    font-size: var(--step--1);
    line-height: var(--leading-body);
    transition: color var(--dur-fast) var(--ease);
}

@media (hover: hover) {
    .vm-footer-group__links a:hover,
    .vm-desktop-nav__link:hover {
        text-decoration-color: var(--saffron);
        text-decoration-line: underline;
        text-decoration-thickness: var(--border-hairline-width);
        text-underline-offset: var(--nav-active-underline-offset);
    }

    .vm-footer-group__links a:hover {
        color: var(--bone);
    }
}

.vm-footer-group__links a:focus-visible {
    color: var(--bone);
}

.vm-site-footer__base {
    padding-block-start: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--step--1);
}

.vm-site-footer__meta {
    min-inline-size: 0;
    display: grid;
    gap: var(--space-3);
}

.vm-site-footer__contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.vm-site-footer__phone,
.vm-site-footer__email {
    min-block-size: var(--tap-target-min);
    display: inline-flex;
    align-items: center;
}

.vm-shell .vm-site-footer__email,
.vm-site-footer__copyright {
    color: color-mix(in srgb, var(--bone) var(--footer-meta-opacity), transparent);
}

.vm-site-footer__copyright {
    margin-block: var(--radius-none);
}

/* TASK 05 diagnostic content: shell surface only, not the TASK 07 hero. */
.vm-route-shell {
    padding-block-start: var(--header-height);
}

.vm-route-shell-intro {
    min-block-size: calc(var(--viewport-block-full) - var(--header-height));
    display: flex;
    align-items: flex-end;
}

.vm-route-shell-intro .vm-container {
    padding-block: var(--section-space);
}

.vm-route-shell__eyebrow {
    margin-block: var(--radius-none) var(--space-4);
    color: var(--saffron);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

.vm-route-shell h1,
.vm-route-shell h2 {
    max-inline-size: var(--measure-body);
    margin-block: var(--radius-none) var(--space-5);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
}

.vm-route-shell h1 {
    font-size: var(--step-4);
}

.vm-route-shell h2 {
    font-size: var(--step-2);
}

.vm-route-shell p {
    max-inline-size: var(--measure-body);
}

.vm-roadbook-status {
    max-inline-size: var(--measure-body);
    margin-block: var(--space-6);
    padding-block: var(--space-4);
    padding-inline: var(--space-5);
    border-inline-start: var(--border-success-rule);
    background: var(--indigo-raised);
    color: var(--bone);
}

@media (min-width: 1024px) {
    .vm-site-header {
        border-block-end: var(--border-hairline-width) solid transparent;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
    }

    .vm-site-header.is-solid {
        border-block-end: var(--border-dark);
        background: var(--indigo-deep);
    }

    .vm-menu-button,
    .vm-mobile-menu,
    .vm-sticky-cta {
        display: none !important;
    }

    .vm-desktop-nav {
        margin-inline-start: auto;
        display: flex;
        align-items: center;
        gap: var(--space-5);
    }

    .vm-desktop-nav__link {
        min-block-size: var(--tap-target-min);
        display: flex;
        align-items: center;
        font-family: var(--font-mono);
        font-size: var(--step--1);
        letter-spacing: var(--tracking-eyebrow);
        text-transform: uppercase;
    }

    .vm-desktop-nav__link.is-active {
        text-decoration-color: var(--saffron);
        text-decoration-line: underline;
        text-decoration-thickness: var(--border-hairline-width);
        text-underline-offset: var(--nav-active-underline-offset);
    }

    .vm-desktop-whatsapp {
        margin-inline-start: var(--space-5);
        display: inline-flex;
    }

    .vm-shell {
        padding-block-end: var(--radius-none);
    }

    .vm-site-footer {
        padding-block-end: var(--section-space);
    }

    .vm-footer-nav {
        border-block-start: var(--radius-none);
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--space-5);
    }

    .vm-footer-group {
        border-block-end: var(--radius-none);
    }

    .vm-footer-group__summary {
        pointer-events: auto;
    }

    .vm-footer-group__indicator {
        display: none;
    }

    .vm-footer-group__links {
        display: flex;
        padding-block-end: var(--radius-none);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-shell *,
    .vm-shell *::before,
    .vm-shell *::after {
        animation-duration: var(--dur-reduced-motion) !important;
        scroll-behavior: auto !important;
        transition-duration: var(--dur-reduced-motion) !important;
    }
}

/* TASK 31 follow-up: info-page CTA rhythm.
 * Booking terms has its own final WhatsApp CTA immediately before the shared
 * footer. On mobile, without a clear separator, that button reads as if it is
 * inside the footer accordion. Keep it visually attached to the page instead.
 */
.vm-info-cta {
    border-block-end: var(--border-dark);
}

.vm-info-cta + .vm-sticky-cta + .vm-site-footer,
.vm-info-page + .vm-sticky-cta + .vm-site-footer {
    border-block-start: var(--radius-none);
}

.vm-info-cta__inner {
    display: grid;
    gap: var(--space-6);
}

@media (max-width: 1023px) {
    .vm-info-cta {
        padding-block-end: var(--space-9);
    }

    .vm-info-cta .vm-button {
        inline-size: 100%;
        justify-content: center;
    }

    .vm-info-page + .vm-sticky-cta + .vm-site-footer {
        padding-block-start: var(--space-8);
    }
}

@media (min-width: 1024px) {
    .vm-info-cta__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}
/* TASK 32: real 404 page.
 * Prevent missing WordPress URLs from falling through to the parent static
 * export index.php, whose wp_die() fallback returned HTTP 500.
 */
.vm-not-found {
    padding-block-start: var(--header-height);
    background: var(--indigo-deep);
    color: var(--bone);
}

.vm-not-found__hero {
    min-block-size: calc(var(--viewport-block-full) - var(--header-height));
    display: flex;
    align-items: center;
}

.vm-not-found__inner {
    display: grid;
    gap: var(--space-6);
}

.vm-not-found__eyebrow {
    margin: var(--radius-none);
    color: var(--saffron);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

.vm-not-found h1 {
    max-inline-size: 10ch;
    margin: var(--radius-none);
    font-family: var(--font-display);
    font-size: var(--step-5);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
}

.vm-not-found__copy {
    max-inline-size: var(--measure-hero-copy);
    margin: var(--radius-none);
    color: color-mix(in srgb, var(--bone) 78%, transparent);
    font-size: var(--step-1);
}

.vm-not-found__links {
    max-inline-size: 46rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.vm-not-found__links a {
    min-block-size: var(--tap-target-min);
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    border: var(--border-dark);
    border-radius: var(--radius-control);
    display: inline-flex;
    align-items: center;
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

@media (hover: hover) {
    .vm-not-found__links a:hover {
        border-color: var(--saffron);
    }
}