/*
 * syi-chrome/style.css sets `body { background: linear-gradient(... red/orange); }`.
 * Toyota global.css only adds `background-color: #fff`, which does not clear `background-image`,
 * so the gradient appears in any uncovered strip (e.g. below `#cpl--footer`).
 */
body {
    background-image: none;
    background-color: #fff;
}

/*
 * Sticky footer: Toyota header is position:fixed; shell stacks spacer + main + footer and
 * grows main so the black footer meets the bottom of the viewport on short pages.
 */
.site-public-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-public-shell > #cpl--footer {
    flex-shrink: 0;
}

/*
 * Bootstrap reboot sets ul/ol { padding-left: 2rem } and margins — that breaks Toyota’s
 * horizontal nav and mega-menus. Reset lists inside the AEM header only.
 */
#cpl--nav ul,
#cpl--nav ol {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
}

#cpl--nav .cpl-header li::before {
    content: none;
}

/*
 * Mobile nav FOUC: header.html embeds the full Models tree in #cpl-nav--mobile with mm-spn--open
 * on the root ul, so it paints in document flow until global.js runs MmenuLight and reparents the
 * node into .mm-ocd__content. Hide it only while it remains inside #cpl--nav.
 */
#cpl--nav #cpl-nav--mobile {
    display: none !important;
}

/*
 * Bootstrap + registration pages use bare `a { color: … }` in @stack — it paints the fixed Toyota header too.
 * Lock header chrome to Toyota neutrals / hover red.
 */
#cpl--nav .cpl-header a {
    text-decoration: none;
    color: #101010;
}

#cpl--nav .cpl-header--nav-main > ul > li > a:hover {
    color: #eb0a1e;
}

/*
 * Registration / status pages push unscoped `p { margin; color }`, etc. via @stack('styles').
 * Do not touch `.cpl-txt-promo` here — it needs Toyota red + small caps (global.css).
 */
#cpl--nav p:not(.cpl-txt-promo) {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Model cards: promo line — red, compact, normal flow (syi head used absolute on nav-main and broke mega layout) */
#cpl--nav p.cpl-txt-promo {
    position: static;
    margin: 0 0 6px;
    padding: 0;
    color: #eb0a1e;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Mega HVA row: space between icon and label */
#cpl--nav nav.cpl-mega--hva .cpl-hva li > a {
    gap: 12px;
}

/*
 * Model mega cards: snapshot HTML uses <div style="height:53px"> around promo + h5.
 * Two-line titles overflow that box and visually overlap <picture> below — match Toyota reference spacing.
 */
#cpl--nav a.cpl-tab-item--model > div:first-child {
    height: auto !important;
    max-height: none !important;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 22px;
}

/* No promo line: keep title baseline aligned with cards that show PROMOTION AVAILABLE (~13px line + 8px gap) */
#cpl--nav a.cpl-tab-item--model > div:first-child:not(:has(> p.cpl-txt-promo)) {
    padding-top: 21px;
}

#cpl--nav a.cpl-tab-item--model > div:first-child > h5 {
    margin: 0;
    padding: 0;
    line-height: 1.25;
    /* Same vertical slot whether the title wraps once or twice (matches .cpl-txt-promo line-height). */
    min-height: 2.5em;
}

#cpl--nav a.cpl-tab-item--model > div:first-child > p.cpl-txt-promo {
    margin-bottom: 0;
}

#cpl--nav a.cpl-tab-item--model > picture.cpl-tab-item--thumb {
    display: block;
    margin-bottom: 14px;
}

/* Category (h6) + price (p): reduce Toyota’s loose margins / line-height so the block isn’t tall */
#cpl--nav a.cpl-tab-item--model .cpl-tab-item--txt {
    width: 100%;
    max-width: 100%;
    margin-top: 8px !important;
    padding: 0 !important;
}

#cpl--nav a.cpl-tab-item--model .cpl-tab-item--txt > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

#cpl--nav a.cpl-tab-item--model .cpl-tab-item--txt h6 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-size: 1rem !important;
}

#cpl--nav a.cpl-tab-item--model .cpl-tab-item--txt p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-size: 0.875rem !important;
}

#cpl--nav .cpl-mega--cont {
    box-sizing: border-box;
}

/* Model selector: strip shows a horizontal scrollbar when --scroll is on; hide like Toyota webkit rule */
#cpl--nav .mdc-tab-scroller__scroll-area::-webkit-scrollbar {
    display: none;
}
#cpl--nav .mdc-tab-scroller__test::-webkit-scrollbar {
    display: none;
}
#cpl--nav .mdc-tab-scroller__scroll-area {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Laravel public pages: content band + optional pickle tour gradient */
.site-public-main {
    flex: 1 1 auto;
    min-height: 42vh;
}

.site-public-main--gradient {
    background: linear-gradient(155deg, #0d7377 0%, #14a3a8 45%, #5eead4 100%);
    padding: 2rem 1rem 3rem;
}

.site-public-main--gradient .reg-flow-page {
    margin-bottom: 0;
}

/* Registration form: abstract campaign backdrop, practical across long responsive pages. */
.site-public-main--register-bg {
    background-color: #0d8f93;
    background-image:
        linear-gradient(180deg, rgba(0, 118, 124, 0.08), rgba(0, 128, 132, 0.18)),
        url('/images/register/pickle-tour-register-background-abstract-v2.png'),
        linear-gradient(155deg, #0d7377 0%, #14a3a8 45%, #5eead4 100%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center top, center center, center top;
    background-size: cover, cover, cover;
    background-attachment: scroll, fixed, scroll;
    padding: 2rem 1rem 3rem;
}

.site-public-main--register-bg .reg-flow-page {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .site-public-main--register-bg {
        background-position: center top, center center, center top;
        background-size: cover, auto 100vh, cover;
        background-attachment: scroll, fixed, scroll;
    }
}

/*
 * Toyota global.css contains component `table` / `th` rules that collide with our summary tables.
 */
.site-public-main table.registration-summary {
    width: 100%;
    border-collapse: collapse;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    color: #334155;
    cursor: default;
    border: none !important;
}

.site-public-main table.registration-summary th {
    text-align: left;
    font-weight: 600;
    color: #1e293b;
    padding: 0.55rem 0.75rem 0.55rem 0;
    width: 42%;
    vertical-align: top;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0;
    flex: unset !important;
}

.site-public-main table.registration-summary td {
    padding: 0.55rem 0;
    vertical-align: top;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0;
    word-break: break-word;
}

.site-public-main table.registration-summary td strong {
    font-weight: 700;
}

.site-public-main table.registration-summary tr:last-child th,
.site-public-main table.registration-summary tr:last-child td {
    border-bottom: none;
}

/*
 * Toyota: `a:not(.cpl-unstyled)` gets a #101010 gradient “underline”. `.back` is not cpl-unstyled → black bar.
 */
.site-public-main a.back {
    background-image: none !important;
    background-size: 0 !important;
}

.site-public-main a.reg-flow-page-foot-link {
    background-image: none !important;
    background-size: 0 !important;
}

/*
 * Toyota: same gradient underline on `a:not(.cpl-unstyled)` affects `.reg-btn` links.
 * Registration pages scope body-link colour with `.reg-flow-page .card a:not(.reg-btn)` so CTAs keep `.reg-btn-primary` / `.reg-btn-secondary` colours.
 */
.site-public-main a.reg-btn {
    background-image: none !important;
    background-size: 0 !important;
}

/* Logo colour comes from syi-chrome global.css (.cpl-header--logo-my { color: #101010 }) — do not force Toyota red here */