/* SV Page Override Styles */

/* Fix horizontal overflow.
   overflow-x: clip hard-clips without creating a new block formatting context
   (unlike overflow-x: hidden), so it does not interfere with sticky/fixed elements. */
html {
    overflow-x: clip;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

.header {
    background-color: white;
    color: #1f2937;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.header a {
    color: #1f2937;
}

.header a:hover {
    color: #3b82f6;
}

.header a.hover\:text-primary-light {
    color: #1f2937;
}

.header a.hover\:text-primary-light:hover {
    color: #3b82f6;
}

.header a[data-active] {
    color: #3b82f6;
}

.header .lang-icon {
    color: #1f2937;
}

.header .menu-icon {
    color: #1f2937;
}

.header .rounded-custom {
    border-radius: 0;
    padding: 0 1.5rem;
}

.header .container-base {
    padding: 0;
    max-width: 100%;
}

@media (min-width: 1024px) {
    .header .rounded-custom {
        gap: 1rem;
    }
}

/* ─── Mobile menu ────────────────────────────────────────────────────────── */

.mobile-menu {
    background-color: white;
    color: #1f2937;
}

.mobile-menu a {
    color: #1f2937;
}

.mobile-menu a:hover {
    color: #3b82f6;
}

/* ─── Language menu ──────────────────────────────────────────────────────── */

.lang-menu {
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.lang-menu a {
    background-color: white;
    color: #1f2937;
}

.lang-menu a:hover {
    background-color: #f3f4f6;
}

/* ─── Content container centering ───────────────────────────────────────── */
/* container-base centering relies on --spacing-container CSS variable defined
   inside @layer theme in tailwind.min.css. Because all.min.css is unlayered
   CSS it wins the cascade, potentially preventing the layered variable from
   resolving correctly. Supply explicit pixel values here as unlayered rules
   that are guaranteed to win. Scoped to <main> so the header override
   (.header .container-base) still takes effect. */

main .container-base {
    max-width: 1248px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    main .container-base {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 768px) {
    main .container-base {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media (min-width: 1024px) {
    main .container-base {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

@media (min-width: 1280px) {
    main .container-base {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

/* ─── Contact page form centering ────────────────────────────────────────── */
/* max-w-[608px] is an arbitrary Tailwind value not in the pre-built CSS. */

.contact-page .top-plug-bg-g .mx-auto {
    justify-self: center;
    width: min(608px, 100%);
}

/* ─── intl-tel-input ─────────────────────────────────────────────────────── */

.iti {
    width: 100%;
    display: block;
}

/* 3. Country container — full height (all.min.css uses top: 0.75rem which misaligns the flag) */
.iti__country-container {
    top: 0;
    bottom: 0;
}

/* 4. Arrow — replace icon-font glyph with the standard CSS border triangle */
.iti__arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: var(--iti-arrow-padding);
    border-left: var(--iti-triangle-border) solid transparent;
    border-right: var(--iti-triangle-border) solid transparent;
    border-top: var(--iti-arrow-height) solid var(--iti-arrow-color);
    /* Undo the flex layout set by all.min.css */
    -webkit-box-pack: unset;
    -ms-flex-pack: unset;
    justify-content: unset;
    -webkit-box-align: unset;
    -ms-flex-align: unset;
    align-items: unset;
}

/* 5. Suppress the icon-font pseudo-element entirely */
.iti__arrow::before {
    content: none !important;
    display: none !important;
}

/* 6. Restore up-arrow state */
.iti__arrow--up {
    border-top: none;
    border-bottom: var(--iti-arrow-height) solid var(--iti-arrow-color);
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
}