/* Home hero — extracted verbatim from index.html's inline <style> block so
   brand/model pages can reuse the exact same "separate cards" hero (reg-plate
   card + Make&Model/Engine-Code card side by side) instead of the hero-2
   3-tab widget. Loaded alongside ef-manual-search.v11.css/.v5.js. */

/* ========== Flip Cards / hero card base ========== */
.animated-box-left,
.animated-box-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    overflow: visible;
    /* NOTE: no padding here on purpose. .animated-box-left gets its padding
       from Tailwind utility classes directly in the markup (pt-[6px]
       px-[20px] pb-[20px] ...). .animated-box-right (= .ef-manual-search)
       gets its own padding from ef-manual-search.v11.css. On index.html
       (where this stylesheet doesn't exist) that padding:0 was harmless
       because of load order; on these swapped-hero pages this stylesheet
       loads AFTER ef-manual-search.v11.css, so a padding:0 here would
       silently override every padding value set there, at every width. */
}

/* ========== Hero Section ========== */
#hero-section {
    position: relative;
    /* Self-contained stacking context for the -1 z-index bg/overlay layers
       below, so they render correctly regardless of whether the page wraps
       this hero in an `.isolate` ancestor (index.html does; other page
       templates may not). */
    isolation: isolate;
    min-height: 510px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1e3a8a;
    opacity: 0.7;
    z-index: -1;
}

.hero-content {
    max-width: 1200px;
    width: 90%;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    box-sizing: border-box;
}

.hero-title {
    font-size: 1.875rem !important;
    margin: 12px 0 24px;
    color: white;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 3.5rem !important;
        margin-bottom: 32px;
    }
}

/* Mobile hero spacing tightening: match the gap above the reg input
   to the gap already used between the Get Free Quote button and the
   reg input (16px), and trim the gap above the ticker slightly. */
@media (max-width: 767px) {
    .animated-box-left > div:first-child {
        margin-bottom: 0 !important;
    }
    .animated-box-left .mt-4 {
        margin-top: 4px !important;
    }
}

/* ========== Ticker ========== */
.ticker-container {
    min-height: 24px;
    overflow: hidden;
    position: relative;
    margin-top: 16px;
}

.ticker-inner {
    display: inline-block;
    white-space: nowrap;
    animation: ticker 25s linear infinite;
}

@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ========== Input & Button Styles ========== */
.vehicle-inp::placeholder {
    color: black !important;
    opacity: 1;
    font-weight: bold;
}

#fetch-button,
#custom-quote-btn,
#engine-code-btn {
    background-color: #1E3A8A;
    transition: background-color 150ms ease;
    border: none;
    cursor: pointer;
    color: white;
}

#fetch-button:hover,
#custom-quote-btn:hover,
#engine-code-btn:hover {
    background-color: #1E3A8A;
}

/* NOTE: .vehicle-inp's box model (width/height/border/font-size/padding/
   border-radius) is intentionally NOT set here — it's fully covered by the
   element's own Tailwind classes (w-full h-20 p-3 pl-12 border-[4px]
   rounded-md text-[40px] ...) plus its inline style. A plain-CSS rule here
   used to duplicate those values (width:280px etc.), and since it has the
   same specificity as the Tailwind utilities, it was a coin-flip which one
   won the cascade — on some pages the fixed 280px width won, shrinking the
   input and leaving a gap after the UK flag. Do not re-add box-model
   properties to .vehicle-inp here. */

@media (max-width: 360px) {
    .vehicle-inp {
        font-size: 26px !important;
        padding-left: 42px !important;
    }
}

@media (max-width: 640px) {
    .hero-content {
        width: 97% !important;
    }
    .hero-content-panel {
        padding: 12px 4px !important;
    }
    .animated-box-left {
        padding: 8px !important;
    }
}

/* ========== Desktop: Side-by-side layout (≥1024px) ========== */
@media (min-width: 1024px) {
    .animated-box-left,
    .animated-box-right {
        flex: 1;
        min-width: 0;
    }

    .or-divider {
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 1.25rem;
        margin: 0 8px;
    }
}