/* =============================================================
   7Edition Design Tokens — mirrors design-system/MASTER.md
   ============================================================= */
:root {
    /* Surface */
    --bg: #0A0A0A;
    --surface: #141414;
    --surface-2: #1F1F1F;
    --border: #2A2A2A;

    /* Text */
    --text: #F5F5F5;
    --text-muted: #A1A1AA;

    /* Brand — orange replaces previous gold accent */
    --accent: #F97316;
    --accent-hover: #FB923C;
    --logo-orange: #F97316;

    /* Action pills */
    --success: #22C55E;
    --call: #1E40AF;

    /* Typography — Poppins for everything (display + UI) */
    --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-ui:      "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Radius */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-pill: 999px;

    /* Elevation */
    --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-md: 0 8px 24px rgba(0, 0, 0, .45);
    --sh-lg: 0 20px 48px rgba(0, 0, 0, .55);

    /* Container */
    --container-max: 1280px;
    --gutter: 24px;

    /* Motion */
    --t-fast: 200ms cubic-bezier(.2, .8, .2, 1);
    --t-med: 350ms cubic-bezier(.2, .8, .2, 1);
}

@media (max-width: 640px) {
    :root {
        --gutter: 16px;
    }
}

/* =============================================================
   Base
   ============================================================= */
html {
    scroll-behavior: smooth;
    background: #0A0A0A;
}

/* Astra's parent CSS sets body{background:#fff} with .ast-* selectors that
   sometimes win on specificity. Explicit selector + !important on the bg
   only — colour/typography are still tokenisable. */
html body,
html.ast-desktop body,
body.rentacar-theme-luxury {
    background: #0A0A0A !important;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Astra's content wrappers default to light. Keep them transparent on the
   homepage so our token shell shows through. */
.home #page,
.home .site-content,
.home .ast-container,
.home .entry-content,
.home #primary,
.home article {
    background: transparent !important;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--text);
}

h4, h5, h6 {
    font-family: var(--font-ui);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--t-fast);
}

a:hover {
    color: var(--accent-hover);
}

p {
    color: var(--text-muted);
}

/* =============================================================
   Container
   ============================================================= */
.re-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* =============================================================
   Buttons
   ============================================================= */
.re-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--r-md);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
    min-height: 44px;
    min-width: 44px;
}

.re-btn--primary {
    background: var(--accent);
    color: #0A0A0A;
}

.re-btn--primary:hover {
    background: var(--accent-hover);
    color: #0A0A0A;
}

.re-btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}

.re-btn--ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.re-btn--whatsapp {
    background: var(--success);
    color: #fff;
}

.re-btn--call {
    background: var(--call);
    color: #fff;
}

/* =============================================================
   Card baseline (used by fleet cards, offer cards, USP tiles)
   ============================================================= */
.re-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

.re-card:hover {
    border-color: var(--accent);
    box-shadow: var(--sh-lg);
}

.re-card__media {
    display: block; /* anchor defaults to inline — aspect-ratio is ignored on inline */
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--surface-2);
    position: relative;
}

.re-card__media img {
    display: block; /* kills 4px inline-image whitespace gap */
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-med);
}

.re-card:hover .re-card__media img {
    transform: scale(1.04);
}

.re-card__body {
    padding: 16px;
}

/* =============================================================
   Focus ring (a11y)
   ============================================================= */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

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