@font-face {
    font-family: "HyundaiRegular";
    src: url("../fonts/HyundaiSansHead-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Hyundai Sans Head";
    src: url("../fonts/HyundaiSansHead-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Hyundai Sans Text";
    src: url("../fonts/HyundaiSansHead-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "HyundaiMedium";
    src: url("../fonts/HyundaiSansHead-Medium.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Hyundai Sans Head";
    src: url("../fonts/HyundaiSansHead-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "HyundaiBold";
    src: url("../fonts/HyundaiSansHead-Bold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Hyundai Sans Head";
    src: url("../fonts/HyundaiSansHead-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

.hpd-model-media {
    background: #fff;
}

.hpd-model-image {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    object-fit: contain;
    padding: clamp(0.75rem, 2vw, 1.25rem);
    transform: scale(1);
    transition: transform 500ms ease;
}

.hpd-model-card:hover .hpd-model-image {
    transform: scale(1.03);
}

/* Hyundai brand alignment overrides. Kept here because this stylesheet loads after the Tailwind bundle. */
:root {
    --radius: 1.75rem;
    --background: #f6f3f3;
    --foreground: #13264c;
    --card: #ffffff;
    --card-foreground: #13264c;
    --primary: #1b305d;
    --primary-foreground: #ffffff;
    --secondary: #ffffff;
    --secondary-foreground: #13264c;
    --muted: #eef5fb;
    --muted-foreground: #53627d;
    --accent: #aacae5;
    --accent-foreground: #1b305d;
    --hyundai-blue: #1b305d;
    --hyundai-active-blue: #00aad3;
    --hyundai-blue-dark: #007fa0;
    --hyundai-sky-blue: #aacae5;
    --hyundai-red: #e53725;
    --hyundai-brown: #a36c50;
    --hyundai-sand: #e4dcd3;
    --hyundai-light-sand: #f6f3f3;
    --border: #d8e4ef;
    --input: #d8e4ef;
    --ring: #007fa0;
}

body.hpd-site {
    font-family: "Hyundai Sans Text", "HyundaiRegular", "Montserrat", "Aptos", "Segoe UI", Arial, sans-serif;
    background: var(--hyundai-light-sand);
    color: var(--foreground);
}

.hpd-site h1,
.hpd-site h2,
.hpd-site h3,
.hpd-site .font-bold,
.hpd-site .font-semibold {
    font-family: "Hyundai Sans Head", "HyundaiMedium", "Montserrat", "Aptos", "Segoe UI", Arial, sans-serif;
    font-weight: 500;
}

.hpd-site .font-bold {
    font-family: "Hyundai Sans Head", "HyundaiBold", "Montserrat", "Aptos", "Segoe UI", Arial, sans-serif;
    font-weight: 700;
}

.hpd-site .tracking-tight {
    letter-spacing: -0.025em;
}

.hpd-site .bg-background {
    background-color: #ffffff;
}

.hpd-site .bg-muted\/40,
.hpd-site .from-muted\/40 {
    background-color: var(--hyundai-light-sand);
}

.hpd-site .bg-gradient-to-br {
    background-image: none;
    background-color: #ffffff;
}

.hpd-site .bg-gradient-to-b {
    background-image: none;
    background-color: var(--hyundai-light-sand);
}

.hpd-site .bg-primary {
    background-color: var(--primary);
}

.hpd-site .text-primary {
    color: var(--primary);
}

.hpd-site .border-primary\/20 {
    border-color: rgba(27, 48, 93, 0.2);
}

.hpd-site .bg-primary\/5 {
    background-color: rgba(27, 48, 93, 0.05);
}

.hpd-site .bg-primary\/10 {
    background-color: rgba(27, 48, 93, 0.1);
}

.hpd-site .shadow-primary\/20,
.hpd-site .hover\:shadow-primary\/5:hover {
    box-shadow: none;
}

.hpd-site .rounded-3xl {
    border-radius: 1.75rem;
}

.hpd-site .rounded-2xl {
    border-radius: 1.5rem;
}

.hpd-site .rounded-xl,
.hpd-site .rounded-lg,
.hpd-site .rounded-md {
    border-radius: 0.5rem;
}

.hpd-site h1 {
    line-height: 1.1;
}

.hpd-site h2 {
    line-height: 1.1;
}

.hpd-site p {
    line-height: 1.6;
}

.hpd-site a.bg-primary,
.hpd-site button.bg-primary {
    min-height: 3.125rem;
    min-width: 8.75rem;
    border: 2px solid var(--primary);
    background-color: var(--primary);
    color: #ffffff;
    font-family: "Hyundai Sans Head", "HyundaiMedium", "Montserrat", "Aptos", "Segoe UI", Arial, sans-serif;
    font-weight: 500;
    box-shadow: none;
    border-radius: 999px;
}

.hpd-site a.bg-primary:hover,
.hpd-site button.bg-primary:hover {
    background-color: #102447;
    border-color: #102447;
}

.hpd-site a.bg-background {
    min-height: 3.125rem;
    min-width: 8.75rem;
    border: 2px solid var(--primary);
    background-color: #ffffff;
    color: var(--primary);
    box-shadow: none;
    border-radius: 999px;
}

.hpd-site a.bg-background:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.hpd-site input,
.hpd-site select,
.hpd-site textarea {
    min-height: 3.5rem;
    border-width: 2px;
    border-color: var(--border);
    background: #ffffff;
    color: var(--foreground);
    box-shadow: none;
}

.hpd-site textarea {
    min-height: 7rem;
}

.hpd-site input:focus,
.hpd-site select:focus,
.hpd-site textarea:focus,
.hpd-site input:focus-visible,
.hpd-site select:focus-visible,
.hpd-site textarea:focus-visible {
    border-color: var(--primary);
    outline: 0;
    box-shadow: 0 0 0 1px var(--primary);
}

.hpd-site .hpd-model-card {
    border-color: var(--border);
    box-shadow: 0 6px 18px rgb(27 48 93 / 8%);
}

.hpd-site .hpd-model-card:hover,
.hpd-site .hpd-model-card:focus-within {
    border-color: var(--hyundai-sky-blue);
    box-shadow: 0 22px 58px rgb(27 48 93 / 14%);
}

.hpd-site .hpd-model-media {
    background: #ffffff;
}

.hpd-site details summary:hover {
    color: var(--primary);
}