/* ==========================================================================
   Nelson's Car Hire — Global base layer
   Low-risk, additive defaults applied site-wide. Loaded AFTER tokens.css and
   BEFORE each page's stylesheet, so page CSS keeps the final say on layout.
   Scope: typography smoothing, links, focus-visible, form-input baseline.
   ========================================================================== */

/* --- Rendering ---------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    /* Match the footer so the overscroll/rubber-band area at the very bottom
       shows navy instead of a thin pale line of the body background. */
    background: var(--teal-900);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* --- Accessible focus --------------------------------------------------- */
/* Restore a visible, on-brand focus ring for keyboard users everywhere.
   Mouse users are unaffected (:focus-visible only). The focus outline follows
   each element's own border-radius, so we don't override it here — forcing a
   radius would square off the rounded inputs and their focus ring. */
*:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
}

/* Don't show the ring for pointer interactions that some browsers still
   report as :focus on buttons. */
:focus:not(:focus-visible) {
    outline: none;
}

/* --- Links -------------------------------------------------------------- */
a {
    transition:
        color var(--dur) var(--ease),
        opacity var(--dur) var(--ease);
}

/* --- Tap targets -------------------------------------------------------- */
/* Ensure interactive controls meet the 44px guideline on touch without
   forcing a fixed height (min only, so existing layouts can grow). */
button,
[type="button"],
[type="submit"],
a[role="button"] {
    min-height: 44px;
    cursor: pointer;
}

/* --- Form-control baseline --------------------------------------------- */
/* Native inputs/selects/textareas currently fall back to browser defaults.
   Give them one consistent, modern resting + focus + validation state.
   Component CSS can still override per-page. */
/* `:where()` keeps the specificity at (0,0,1) so component classes such as
   `.lx-input` always win — the baseline only styles fields that opt out of a
   component. Values mirror `.lx-input` so a bare field still looks consistent. */
input:where(:not([type="radio"], [type="checkbox"], [type="file"])),
select,
textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background-color: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    padding: 0 0.95rem;
    min-height: 52px;
    transition:
        border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
    -webkit-appearance: none;
    appearance: none;
}

textarea {
    min-height: 84px;
    padding: 0.7rem 0.95rem;
    line-height: 1.55;
    resize: vertical;
}

/* Restore a dropdown affordance for selects (we removed the native one with
   appearance:none so the control matches text inputs). */
select {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b5b5b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    cursor: pointer;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: 1;
}

input:where(:not([type="radio"], [type="checkbox"], [type="file"])):focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--teal-500);
    box-shadow: 0 0 0 3px rgba(0, 171, 199, 0.18);
}

/* Validation states — shown only after the user has interacted, so pristine
   forms aren't painted red on load. */
input:where(:not(:placeholder-shown):invalid),
textarea:where(:not(:placeholder-shown):invalid) {
    border-color: var(--coral-text);
}

input:where(:not(:placeholder-shown):invalid):focus-visible,
textarea:where(:not(:placeholder-shown):invalid):focus-visible {
    box-shadow: 0 0 0 3px rgba(215, 39, 46, 0.35);
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   2. Base resets for the new pages
   -------------------------------------------------------------------------- */
.lx *,
.lx *::before,
.lx *::after {
    box-sizing: border-box;
}

.lx {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
}

.lx img {
    max-width: 100%;
    display: block;
}

.lx h1,
.lx h2,
.lx h3,
.lx h4,
.lx p,
.lx ul,
.lx figure {
    margin: 0;
}

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

.lx ::selection {
    background: var(--coral);
    color: #fff;
}

.lx-container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Keyboard bypass link: hidden off-screen until focused (z above modal: 110). */
.lx-skip {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 110;
    padding: 0.8rem 1.3rem;
    border-radius: var(--r-pill);
    background: var(--teal-900);
    color: #fff;
    font-weight: 700;
    box-shadow: var(--sh-lg);
    transform: translateY(-250%);
}

.lx-skip:focus {
    transform: none;
}

.lx main:focus {
    outline: none;
}

.lx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal-600);
}

.lx-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--coral);
}

.lx-display {
    font-family: var(--font-display);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* Typography polish: even heading line-lengths, fewer prose orphans. */
.lx h1,
.lx h2,
.lx h3 {
    text-wrap: balance;
}

.lx p {
    text-wrap: pretty;
}

.lx-section {
    padding-block: clamp(3.5rem, 2.2rem + 5vw, 7rem);
}

.lx-section--sand {
    background: var(--sand-band);
}

/* Dark brand band — Sixt-style light/dark alternation for statement sections. */
.lx-section--navy {
    background:
        radial-gradient(90% 130% at 85% -10%, rgba(0, 171, 199, 0.14), transparent 55%),
        var(--teal-900);
    color: #fff;
}

.lx-section--navy .lx-section-head h2,
.lx-section--navy .lx-feature h3 {
    color: #fff;
}

.lx-section--navy .lx-section-head p {
    color: rgba(255, 255, 255, 0.78);
}

.lx-section--navy .lx-feature p {
    color: rgba(255, 255, 255, 0.75);
}

.lx-section--navy .lx-feature__icon {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--teal-200);
    box-shadow: none;
}

.lx-section-head {
    max-width: 640px;
    margin-bottom: clamp(2rem, 1.2rem + 2vw, 3.25rem);
}

.lx-section-head h2 {
    font-size: var(--t-h2);
    margin-top: 0.7rem;
}

.lx-section-head p {
    margin-top: 0.9rem;
    color: var(--muted);
    font-size: var(--t-lead);
}

.lx-section-head--center {
    margin-inline: auto;
    text-align: center;
}

.lx-section-head--center .lx-eyebrow {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.lx-btn {
    --btn-bg: var(--coral-cta);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 52px;
    padding: 0 1.6rem;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    line-height: 1;
    text-align: center;
    transition:
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        background-color var(--dur) var(--ease);
    box-shadow: 0 8px 22px rgba(215, 39, 46, 0.32);
}

/* When the button is an <a>, beat `.lx a { color: inherit }` so the label keeps
   the variant's intended colour (white on solid/teal, ink on ghost). */
.lx a.lx-btn {
    color: var(--btn-fg);
}

.lx-btn svg {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

.lx-btn:hover {
    background: var(--coral-cta-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(215, 39, 46, 0.4);
}

.lx-btn:active {
    transform: translateY(0);
}

.lx-btn--block {
    width: 100%;
}

.lx-btn--lg {
    min-height: 58px;
    font-size: 1.125rem;
    padding-inline: 2rem;
}

.lx-btn--teal {
    --btn-bg: var(--teal-700);
    box-shadow: 0 8px 22px rgba(26, 54, 104, 0.28);
}

.lx-btn--teal:hover {
    --btn-bg: var(--teal-800);
    box-shadow: 0 14px 30px rgba(26, 54, 104, 0.36);
}

.lx-btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    border: 1.5px solid var(--line);
    box-shadow: none;
}

.lx-btn--ghost:hover {
    background: var(--surface);
    border-color: var(--teal-600);
    color: var(--teal-700);
    box-shadow: var(--sh-sm);
}

.lx-btn--whatsapp {
    --btn-bg: #1faf54;
    box-shadow: 0 8px 22px rgba(31, 175, 84, 0.28);
}

.lx-btn--whatsapp:hover {
    --btn-bg: #1a9a49;
    box-shadow: 0 14px 30px rgba(31, 175, 84, 0.36);
}

/* On dark / photo backgrounds */
.lx-btn--on-dark.lx-btn--ghost {
    --btn-fg: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
}

.lx-btn--on-dark.lx-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
    color: #fff;
}

.lx-textlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--coral-text);
    transition: gap var(--dur) var(--ease);
}

.lx-textlink svg {
    width: 1.1em;
    height: 1.1em;
    transition: transform var(--dur) var(--ease);
}

.lx-textlink:hover svg {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   4. Trust pills / badges
   -------------------------------------------------------------------------- */
.lx-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--r-pill);
    background: var(--teal-50);
    color: var(--teal-700);
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--teal-100);
}

.lx-pill svg {
    width: 1.05em;
    height: 1.05em;
    color: var(--teal-600);
    flex: none;
}

.lx-pill--solid {
    background: var(--coral-50);
    color: var(--coral-text);
    border-color: #ffd9cd;
}

.lx-pill--solid svg {
    color: var(--coral-text);
}

.lx-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--star);
}

.lx-stars svg {
    width: 1.05em;
    height: 1.05em;
}

/* --------------------------------------------------------------------------
   5. Sticky navigation
   -------------------------------------------------------------------------- */
.lx-nav {
    /* How much the logo grows over the hero, relative to its solid bar size.
       Driven by transform (not height) so the bar height never changes between
       states — see .lx-nav__logo img. Tuned down on small screens (responsive). */
    --lx-logo-scale: 1.3;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem var(--gutter);
    transition:
        background-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        padding var(--dur) var(--ease);
}

.lx-nav__logo {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.lx-nav__logo img {
    /* Solid (shrunk) size. Matches the Book now CTA height so the logo is never
       smaller than the button on the opposite side. The CTA already governs the
       bar height (same 42px), so the logo's layout box doesn't grow the bar. */
    height: 42px;
    width: auto;
    /* The size change rides on transform, not height, so the logo's layout box
       stays a constant 42px — the bar height never moves, which keeps the links
       and CTA in the same position across the over-hero and solid states. The
       SVG stays crisp at any scale. transform-origin pins the left edge so the
       logo grows toward the bar, never away from the gutter. */
    transform: scale(1);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease);
}

/* Bigger, prominent logo over the hero; shrinks into place once the nav goes
   solid (on scroll). */
.lx-nav:not(.is-solid) .lx-nav__logo img {
    transform: scale(var(--lx-logo-scale));
}

/* Page-change intro: a nav that loads already solid (inner pages) plays the
   same shrink once on load, so navigating between pages mirrors the home-page
   scroll instead of snapping the logo straight to its small size. */
.lx-nav.is-solid[data-intro] .lx-nav__logo img {
    animation: lx-logo-settle var(--dur-slow) var(--ease);
}

/* Arrived from a page that already showed the small logo — skip the intro so
   the logo stays put instead of jumping big to shrink again (set pre-paint). */
.lx-logo-stay-small .lx-nav.is-solid[data-intro] .lx-nav__logo img {
    animation: none;
}

@keyframes lx-logo-settle {
    from {
        transform: scale(var(--lx-logo-scale));
    }
}

.lx-nav__links {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
}

.lx-nav__links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 0.85rem;
    border-radius: var(--r-pill);
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    opacity: 0.92;
    transition:
        background-color var(--dur) var(--ease),
        color var(--dur) var(--ease),
        opacity var(--dur) var(--ease);
}

.lx-nav__links a:hover,
.lx-nav__links a:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    opacity: 1;
}

.lx-nav__links a.is-active {
    color: #fff;
    opacity: 1;
}

.lx-nav__links a.is-active::after {
    content: "";
    width: 5px;
    height: 5px;
    margin-left: 0.45rem;
    border-radius: 50%;
    background: var(--coral);
}

.lx-nav__right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.lx-nav .lx-nav__cta {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 1.1rem;
    border-radius: var(--r-pill);
    background: var(--coral-cta);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    box-shadow: 0 6px 16px rgba(215, 39, 46, 0.34);
    transition:
        transform var(--dur) var(--ease),
        background-color var(--dur) var(--ease);
}

.lx-nav__cta:hover {
    background: var(--coral-cta-dark);
    transform: translateY(-1px);
}

.lx-nav__burger {
    display: none;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    cursor: pointer;
}

.lx-nav__burger svg {
    width: 22px;
    height: 22px;
}

/* Scrolled / solid state (also used on inner pages without a hero) */
.lx-nav.is-solid {
    background: var(--cream);
    box-shadow:
        0 1px 0 var(--line),
        var(--sh-sm);
}

.lx-nav.is-solid .lx-nav__links a {
    color: var(--ink);
    opacity: 0.85;
}

.lx-nav.is-solid .lx-nav__links a:hover,
.lx-nav.is-solid .lx-nav__links a:focus-visible {
    background: rgba(11, 122, 140, 0.1);
    color: var(--teal-700);
    opacity: 1;
}

.lx-nav.is-solid .lx-nav__links a.is-active {
    color: var(--teal-700);
}

.lx-nav.is-solid .lx-nav__burger {
    background: rgba(11, 122, 140, 0.12);
    color: var(--teal-700);
}

/* Mobile drawer */
.lx-drawer {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    grid-template-rows: 1fr;
    background: rgba(18, 36, 70, 0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    /* Visibility flips after the fade on close, instantly on open, so the
       panel is focusable the moment it starts appearing. */
    transition:
        opacity var(--dur) var(--ease),
        visibility 0s var(--ease) var(--dur);
}

.lx-drawer[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transition:
        opacity var(--dur) var(--ease),
        visibility 0s;
}

.lx-drawer__panel {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(86vw, 360px);
    background: var(--cream);
    padding: 1.5rem 1.4rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease);
    box-shadow: var(--sh-lg);
}

.lx-drawer[data-open="true"] .lx-drawer__panel {
    transform: translateX(0);
}

.lx-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.lx-drawer__top img {
    height: 28px;
}

.lx-drawer__close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--sand);
    color: var(--ink);
    font-size: 1.4rem;
    cursor: pointer;
}

.lx-drawer a.lx-drawer__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 0.6rem;
    font-size: 1.15rem;
    font-weight: 600;
    border-bottom: 1px solid var(--line-soft);
}

.lx-drawer a.lx-drawer__link:hover {
    color: var(--teal-700);
}

.lx-drawer .lx-btn {
    margin-top: 1.2rem;
}

.lx-drawer__contact {
    margin-top: auto;
    padding-top: 1.2rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.lx-drawer__contact a {
    color: var(--teal-700);
    font-weight: 600;
}