/* ev2 design shared by all SEO pages (includes/seo-pages). Homepage-only layout lives in home.css.
   Pages other than the homepage get body.ev-seo, which re-themes the Tailwind brand utilities they use. */

:root {
    --hp-font: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --hp-text: #111a33;
    --hp-text-2: #334155;
    --hp-muted: #64748b;
    --hp-faint: #94a3b8;
    --hp-border: #edf0f5;
    --hp-soft: #f5f7fa;
    --hp-accent: #ec4320;
    --hp-accent-2: #f6582a;
    --hp-accent-dark: #d63a1a;
    --hp-grad: linear-gradient(135deg, #f6582a 0%, #ea3d1f 100%);
    --hp-tint: #fdeee8;
    --hp-ok: #16a34a;
    --hp-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 26px rgba(31, 58, 110, .07);
    --hp-shadow-lg: 0 2px 4px rgba(16, 24, 40, .04), 0 16px 36px rgba(31, 58, 110, .11);
}

.hp-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Nav: orange actions ---------- */

.hp-page nav .bg-brand,
.ev-seo nav .bg-brand { background-color: var(--hp-accent); background-image: var(--hp-grad); border-radius: 10px; }
.hp-page nav .border-brand,
.ev-seo nav .border-brand { border-color: var(--hp-accent); border-width: 1.5px; border-radius: 10px; }
.hp-page nav .text-brand,
.ev-seo nav .text-brand,
.ev-seo nav .hover\:text-brand:hover { color: var(--hp-accent); }
.ev-seo nav .site-nav-item.bg-brand,
.ev-seo nav .md\:hidden .bg-brand { background: var(--hp-tint); color: var(--hp-accent); }
.ev-seo nav .bg-brand\/10 { background-color: var(--hp-tint); }

/* ---------- Buttons ---------- */

.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.hp-btn svg { width: 18px; height: 18px; }
.hp-btn:hover { transform: translateY(-1px); }
.hp-btn-block { width: 100%; }

.hp-btn-primary {
    background: var(--hp-grad);
    color: #fff;
    box-shadow: 0 10px 22px rgba(236, 67, 32, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.hp-btn-primary:hover { filter: brightness(1.05); color: #fff; }

.hp-btn-light {
    background: #fff;
    color: var(--hp-accent);
    box-shadow: 0 8px 20px rgba(120, 30, 10, .18);
}

.hp-btn-light:hover { color: var(--hp-accent-dark); }

/* ---------- FAQ item ---------- */

.hp-faq-item {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 14px;
}

.hp-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 16px 20px;
    text-align: left;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--hp-text);
    transition: background-color .2s ease;
}

.hp-faq-q:hover { background: #fafbfc; }
.hp-faq-q .faq-arrow { flex: none; width: 18px; height: 18px; color: var(--hp-faint); transition: transform .25s ease; }
.hp-faq-a { padding: 0 20px 18px; font-size: 14.5px; line-height: 1.65; color: var(--hp-muted); }

/* ---------- CTA band ---------- */

.hp-cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;
    overflow: hidden;
    padding: 28px 36px;
    border-radius: 22px;
    background: linear-gradient(100deg, #f6582a 0%, #ec4320 60%, #e2391b 100%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(236, 67, 32, .25);
}

.hp-cta::after {
    content: "";
    position: absolute;
    top: -60%;
    right: -6%;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.hp-cta-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 66px;
    height: 66px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
}

.hp-cta-ic svg { width: 32px; height: 32px; }

.hp-cta-copy {
    padding-left: 28px;
    border-left: 1px solid rgba(255, 255, 255, .3);
}

.hp-cta h2 { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.2; font-weight: 800; letter-spacing: -.015em; color: #fff; }
.hp-cta p { margin-top: 6px; font-size: 14.5px; color: rgba(255, 255, 255, .9); }
.hp-cta p i { margin: 0 6px; font-style: normal; opacity: .7; }
.hp-cta .hp-btn { position: relative; z-index: 1; flex: none; margin-left: auto; }

/* ---------- Closing block above the footer (footer.php) ---------- */

.ev-closing { padding: 44px 0 56px; background: #fff; border-top: 1px solid var(--hp-border); font-family: var(--hp-font); }

.ev-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 30px;
}

.ev-trust li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--hp-muted);
}

.ev-trust li + li { border-left: 1px solid #e8ecf2; }
.ev-trust svg { flex: none; width: 28px; height: 28px; stroke-width: 1.7; color: var(--hp-ok); }
.ev-trust strong { display: block; font-size: 15.5px; font-weight: 800; color: var(--hp-text); }

/* ---------- Page body: ev2 theme over the Tailwind markup ---------- */

.ev-seo { font-family: var(--hp-font); color: var(--hp-text-2); background-color: #f7f8fb; }
.ev-seo .bg-surface { background-color: #f7f8fb; }
.ev-seo .to-surface { --tw-gradient-to: #f7f8fb var(--tw-gradient-to-position); }

.ev-seo .text-brand,
.ev-seo .hover\:text-brand:hover,
.ev-seo .group:hover .group-hover\:text-brand { color: var(--hp-accent); }
.ev-seo .hover\:text-brand-dark:hover { color: var(--hp-accent-dark); }
.ev-seo .text-brand\/30 { color: rgba(236, 67, 32, .3); }

.ev-seo .bg-brand { background-color: var(--hp-accent); background-image: var(--hp-grad); }
.ev-seo .hover\:bg-brand:hover { background-color: var(--hp-accent); }
.ev-seo .hover\:bg-brand-dark:hover { background-color: var(--hp-accent-dark); filter: brightness(1.05); }
.ev-seo .bg-brand\/10,
.ev-seo .hover\:bg-brand\/10:hover { background-color: var(--hp-tint); }
.ev-seo .bg-brand\/5,
.ev-seo .hover\:bg-brand\/5:hover { background-color: rgba(236, 67, 32, .05); }
.ev-seo .hover\:bg-brand\/20:hover { background-color: rgba(236, 67, 32, .16); }

.ev-seo .border-brand,
.ev-seo .hover\:border-brand:hover,
.ev-seo .focus\:border-brand:focus,
.ev-seo .focus-within\:border-brand:focus-within { border-color: var(--hp-accent); }
.ev-seo .border-brand\/20 { border-color: rgba(236, 67, 32, .2); }
.ev-seo .hover\:border-brand\/30:hover { border-color: rgba(236, 67, 32, .35); }
.ev-seo .focus\:ring-brand\/20:focus,
.ev-seo .focus\:ring-brand\/30:focus,
.ev-seo .focus-within\:ring-brand\/20:focus-within { --tw-ring-color: rgba(236, 67, 32, .14); }

.ev-seo .from-brand { --tw-gradient-from: #f6582a var(--tw-gradient-from-position); }
.ev-seo .from-brand\/10 { --tw-gradient-from: rgba(236, 67, 32, .1) var(--tw-gradient-from-position); }
.ev-seo .from-brand.to-red-700,
.ev-seo .from-brand.to-brand-dark { --tw-gradient-to: #e2391b var(--tw-gradient-to-position); }
.ev-seo .to-brand\/5 { --tw-gradient-to: rgba(236, 67, 32, .05) var(--tw-gradient-to-position); }

/* Type */
.ev-seo main h1 {
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.03em;
}

.ev-seo main h2 { font-weight: 800; letter-spacing: -.022em; }
.ev-seo main h2.text-2xl { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2; }
.ev-seo main h3 { letter-spacing: -.01em; }

/* Heading colour at zero specificity, so colour utilities on a heading or a white-text parent still win */
:where(.ev-seo main) :where(h1, h2, h3) { color: var(--hp-text); }
:where(.ev-seo main .text-white) :where(h1, h2, h3) { color: inherit; }
.ev-seo main .text-gray-900,
.ev-seo main :is(h1, h2, h3).text-gray-800 { color: var(--hp-text); }
.ev-seo main .prose { color: var(--hp-text-2); }
.ev-seo main .prose > p + p { margin-top: .9em; }
.ev-seo main .prose > p + :is(div, table, ul, ol) { margin-top: 1em; }
.ev-seo main .prose a.text-brand,
.ev-seo main p a.text-brand { text-underline-offset: 3px; }

/* Hero: first section of every page */
.ev-seo main > section:first-child {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 46% 60% at 92% 0%, rgba(246, 88, 42, .13) 0%, rgba(246, 88, 42, 0) 70%),
        radial-gradient(ellipse 40% 50% at 0% 100%, rgba(236, 67, 32, .06) 0%, rgba(236, 67, 32, 0) 70%),
        linear-gradient(180deg, #fff 0%, #f7f8fb 100%);
}

.ev-seo main > section:first-child > :last-child { padding-bottom: 44px; }

.ev-seo main > section:first-child > * { position: relative; }
.ev-seo main > section:first-child h1 + p { color: #475569; }
.ev-seo main nav[aria-label="Breadcrumb"] { color: var(--hp-faint); }
.ev-seo main nav[aria-label="Breadcrumb"] a:hover { color: var(--hp-accent); }

/* Plate form (plate-form.php / plate-form-multi.php) as the ev2 form card */
.ev-seo #plateForm,
.ev-seo #rcaCalcForm {
    max-width: 560px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .08);
}

.ev-seo #plateForm > .border-2,
.ev-seo #rcaCalcForm > .border-2 { border-width: 1.5px; border-color: #e2e7ef; border-radius: 12px; }
.ev-seo #plateForm > .border-2:focus-within,
.ev-seo #rcaCalcForm > .border-2:focus-within { border-color: var(--hp-accent); box-shadow: 0 0 0 4px rgba(236, 67, 32, .12); }
.ev-seo #plateForm .plate-badge,
.ev-seo #rcaCalcForm .plate-badge { border-radius: 10px 0 0 10px; }
.ev-seo #plateInput,
.ev-seo #rcaPlateInput { letter-spacing: .04em; }

/* Solid CTA buttons in the page body */
.ev-seo main a.bg-brand,
.ev-seo main button.bg-brand {
    border-radius: 12px;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(236, 67, 32, .26), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.ev-seo main a.bg-brand:hover { color: #fff; }
.ev-seo main .check-tab.bg-brand,
.ev-seo main .rounded-full.bg-brand { border-radius: 999px; box-shadow: 0 6px 14px rgba(236, 67, 32, .25); }

.ev-seo #plateSubmitBtn {
    border-radius: 12px;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(236, 67, 32, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.ev-seo #plateSubmitBtn:disabled { background-image: none; background-color: #d1d5db; box-shadow: none; filter: none; }
.ev-seo .check-tab { border-width: 1.5px; }

.ev-seo #vinConfirmSection > div,
.ev-seo #resultCard { border-color: var(--hp-border); border-radius: 18px; box-shadow: 0 12px 34px rgba(15, 23, 42, .08); }
.ev-seo #accountSection .from-brand { border-radius: 22px; box-shadow: 0 18px 40px rgba(236, 67, 32, .25); }

/* Cards (zero specificity so coloured borders such as .border-green-200 still apply) */
:where(.ev-seo main .border) { border-color: var(--hp-border); }
.ev-seo main .rounded-xl { border-radius: 16px; }
.ev-seo main .rounded-2xl { border-radius: 20px; }

.ev-seo main a.border,
.ev-seo main .bg-white.border { background-color: #fff; }

.ev-seo main a.border.rounded-xl,
.ev-seo main a.border.rounded-2xl { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }

.ev-seo main a.border.rounded-xl:hover,
.ev-seo main a.border.rounded-2xl:hover { transform: translateY(-2px); border-color: rgba(236, 67, 32, .35); }

.ev-seo main .hover\:shadow-lg:hover,
.ev-seo main .hover\:shadow-md:hover { box-shadow: var(--hp-shadow-lg); }
.ev-seo main .shadow-sm { box-shadow: var(--hp-shadow); }

/* Step / feature tiles (grey boxes inside white sections) */
.ev-seo main section.bg-white .rounded-xl.bg-surface {
    background: #fff;
    border: 1px solid var(--hp-border);
    box-shadow: var(--hp-shadow);
}

.ev-seo main .rounded-full.bg-brand\/10.text-brand {
    border-radius: 14px;
    background: var(--hp-grad);
    color: #fff;
    box-shadow: 0 8px 18px rgba(236, 67, 32, .25);
}

/* Tables */
.ev-seo main table thead { background: var(--hp-soft); }
.ev-seo main table th { color: var(--hp-text); font-weight: 700; }
.ev-seo main table tbody tr:hover { background: #fafbfc; }
.ev-seo main .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--hp-border); }

/* FAQ blocks written with the shared .faq-toggle / .faq-answer markup */
.ev-seo main .border:has(> .faq-toggle) {
    background: #fff;
    border-color: var(--hp-border);
    border-radius: 14px;
    transition: box-shadow .2s ease;
}

.ev-seo main .border:has(> .faq-answer.open) { box-shadow: var(--hp-shadow); }
.ev-seo main .faq-toggle span { font-weight: 700; color: var(--hp-text); }
.ev-seo main .faq-toggle:hover { background: #fafbfc; }
.ev-seo main .faq-answer > div { color: var(--hp-muted); line-height: 1.65; }

/* In-page gradient CTA boxes, in the CTA band look */
.ev-seo main .rounded-2xl.from-brand {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background-image: linear-gradient(100deg, #f6582a 0%, #ec4320 60%, #e2391b 100%);
    box-shadow: 0 18px 40px rgba(236, 67, 32, .25);
}

.ev-seo main .rounded-2xl.from-brand::after {
    content: "";
    position: absolute;
    top: -60%;
    right: -6%;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.ev-seo main .rounded-2xl.from-brand > * { position: relative; z-index: 1; }
.ev-seo main .rounded-2xl.from-brand a.bg-white { border-radius: 12px; box-shadow: 0 8px 20px rgba(120, 30, 10, .18); }

/* Code samples */
.ev-seo main .bg-gray-900.font-mono { background-color: #0f172a; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }

/* Video embed */
.ev-seo .ea-yt { border-radius: 20px; box-shadow: 0 18px 40px rgba(15, 23, 42, .14); }

/* ---------- Light footer (footer-light.php) ---------- */

.hp-footer {
    background: #fff;
    border-top: 1px solid var(--hp-border);
    font-family: var(--hp-font);
    font-size: 14px;
    color: #475569;
}

.hp-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
    gap: 32px;
    padding-top: 46px;
    padding-bottom: 30px;
}

.hp-footer-brand img { width: auto; height: 36px; }
.hp-footer-brand p { max-width: 280px; margin: 12px 0 18px; line-height: 1.55; color: var(--hp-muted); }
.hp-footer-brand .app-badges { justify-content: flex-start; }
.hp-footer-brand .app-badge { border-color: #000; }

.hp-footer-title { margin-bottom: 12px; font-size: 14.5px; font-weight: 800; color: var(--hp-text); }
.hp-footer-col li + li { margin-top: 8px; }
.hp-footer a { transition: color .2s ease; }
.hp-footer-col a:hover,
.hp-footer-bottom a:hover,
.hp-footer-legal a:hover,
.hp-footer-company a:hover { color: var(--hp-accent); }

.hp-social { display: flex; gap: 10px; }

.hp-social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f1f4f9;
    color: var(--hp-text-2);
}

.hp-social a:hover { background: var(--hp-tint); color: var(--hp-accent); }
.hp-social svg { width: 17px; height: 17px; }

.hp-footer-company { margin-top: 18px; font-size: 12.5px; font-style: normal; line-height: 1.65; color: var(--hp-muted); }

.hp-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding-top: 18px;
    padding-bottom: 16px;
    border-top: 1px solid var(--hp-border);
    font-size: 13px;
    color: var(--hp-muted);
}

.hp-footer-trust { display: flex; align-items: center; gap: 7px; }
.hp-footer-trust svg { flex: none; width: 17px; height: 17px; color: var(--hp-ok); }

.hp-footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding-bottom: 26px;
    font-size: 12px;
    color: var(--hp-faint);
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
    .hp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
    .hp-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .hp-wrap { padding: 0 16px; }

    .hp-faq-q { padding: 14px 16px; font-size: 15px; }
    .hp-faq-a { padding: 0 16px 16px; }

    .hp-cta { flex-direction: column; gap: 16px; padding: 26px 20px; text-align: center; }
    .hp-cta-copy { padding-left: 0; border-left: 0; }
    .hp-cta .hp-btn { width: 100%; margin-left: 0; }

    .ev-closing { padding: 32px 0 40px; }
    .ev-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; margin-bottom: 24px; }
    .ev-trust li { justify-content: flex-start; padding: 0 8px; font-size: 13px; }
    .ev-trust li + li { border-left: 0; }
    .ev-trust svg { width: 24px; height: 24px; }
    .ev-trust strong { font-size: 14.5px; }

    .ev-seo #plateForm,
    .ev-seo #rcaCalcForm { padding: 12px; border-radius: 16px; }

    .hp-footer-grid { padding-top: 36px; }
    .hp-footer-bottom, .hp-footer-legal { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .hp-btn:hover,
    .ev-seo main a.border.rounded-xl:hover,
    .ev-seo main a.border.rounded-2xl:hover { transform: none; }
}