/* ============================================================
 * Public site theme migration
 * Scoped public-site rules from the UI migration.
 * ============================================================ */

body:not(.panel) {
    font-family: var(--vl-font-sans);
    background: var(--vl-bg);
    color: var(--vl-text);
}

body:not(.panel) nav,
.page-header {
    background: color-mix(in srgb, var(--vl-surface) 88%, transparent);
    border-bottom: 1px solid var(--vl-line);
    box-shadow: var(--vl-shadow-sm);
}

body:not(.panel) nav.scrolled {
    background: color-mix(in srgb, var(--vl-surface) 96%, transparent);
    border-bottom-color: var(--vl-line);
}

body:not(.panel) .nav-links a,
.page-nav a {
    color: var(--vl-text-soft);
    font-weight: var(--vl-fw-medium);
}

body:not(.panel) .nav-links a:hover,
.page-nav a:hover,
.page-nav a.active {
    color: var(--vl-primary);
}

body:not(.panel) .logo,
.page-header .brand {
    border-radius: var(--vl-radius-md);
    background: var(--vl-surface-raised);
    border: 1px solid var(--vl-line);
    box-shadow: var(--vl-shadow-sm);
}

body:not(.panel) .hero {
    background: var(--vl-bg);
}

body:not(.panel) .hero-bg {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--vl-ink-700) 78%, transparent), color-mix(in srgb, var(--vl-ink-700) 24%, transparent)),
        image-set(url("/assets/images/prototypes/editorial-oceano-hero.png") 1x),
        linear-gradient(135deg, var(--vl-teal-700), var(--vl-teal-900));
    background-size: cover;
    background-position: center;
}

body:not(.panel) .hero h1,
.page-main .hero h1,
.section-title,
.featured-title,
.package-title,
.modal-title,
.card h1,
.card h2,
.card h3 {
    font-family: var(--vl-font-serif);
    color: var(--vl-ink-strong);
    font-weight: var(--vl-fw-medium);
    letter-spacing: var(--vl-ls-display);
}

body:not(.panel) .hero h1 em,
.section-title em,
.featured-title em {
    color: var(--vl-accent);
    font-style: italic;
}

body:not(.panel) .hero-subtitle,
.section-subtitle,
.page-main .hero p,
.package-description,
.featured-description,
.card p,
.card li,
.modal-subtitle {
    color: var(--vl-text-soft);
}

.eyebrow,
.section-label,
.modal-eyebrow,
.badge,
.card-subtitle {
    color: var(--vl-accent);
    letter-spacing: var(--vl-ls-eyebrow);
}

.search-card,
.filter-bar,
.package-card,
.featured-card,
.card,
.modal-content,
.policy-section,
.callout {
    background: var(--vl-surface);
    border: 1px solid var(--vl-line);
    border-radius: var(--vl-radius-lg);
    box-shadow: var(--vl-shadow-md);
}

.package-card,
.featured-card {
    overflow: hidden;
    transition: border-color var(--vl-dur-smooth), box-shadow var(--vl-dur-smooth), transform var(--vl-dur-smooth) var(--vl-ease-out);
}

.package-card:hover,
.featured-card:hover {
    border-color: color-mix(in srgb, var(--vl-primary) 38%, transparent);
    box-shadow: var(--vl-shadow-lg);
    transform: translateY(-2px);
}

.package-image,
.featured-image,
.package-card-image {
    background-color: var(--vl-surface-soft);
}

.search-field input,
.search-field select,
.filter-select,
.form-control,
.form-group input,
.form-group select,
.form-group textarea {
    background: var(--vl-surface);
    border-color: var(--vl-line-strong);
    color: var(--vl-text);
    border-radius: var(--vl-radius-md);
}

.search-field input:focus,
.search-field select:focus,
.filter-select:focus,
.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--vl-primary);
    box-shadow: 0 0 0 3px rgba(12, 84, 96, 0.12);
    outline: none;
}

.btn-primary,
.btn.primary,
.btn-submit,
.btn-card,
.alert-action,
.hero-cta .btn:first-child {
    background: var(--vl-accent);
    border-color: var(--vl-accent);
    color: var(--vl-on-accent);
}

.btn-primary:hover,
.btn.primary:hover,
.btn-submit:hover,
.btn-card:hover,
.alert-action:hover,
.hero-cta .btn:first-child:hover {
    background: var(--vl-accent-hover);
    border-color: var(--vl-accent-hover);
    color: var(--vl-on-accent);
}

.btn,
.filter-chip,
.btn-secondary,
.btn-ghost {
    border-radius: var(--vl-radius-md);
}

.filter-chip {
    background: var(--vl-surface);
    border-color: var(--vl-line);
    color: var(--vl-text-soft);
}

.filter-chip:hover {
    border-color: var(--vl-primary);
    color: var(--vl-primary);
}

.filter-chip.active,
.filter-chip.is-active {
    background: var(--vl-primary);
    border-color: var(--vl-primary);
    color: var(--vl-on-primary);
}

.featured-section,
footer,
.page-footer {
    background: var(--vl-footer-bg);
    color: var(--vl-on-footer);
}

body:not(.panel) .hero h1,
body:not(.panel) .hero .stat-num {
    color: var(--vl-on-footer);
}

body:not(.panel) .featured-section .section-title,
body:not(.panel) .featured-section .featured-title,
footer .footer-column h4,
footer .footer-col h4,
footer .foot__col-t,
.page-footer h4 {
    color: var(--vl-on-footer);
}

body:not(.panel) .hero h1 em {
    color: var(--vl-coral-200);
}

body:not(.panel) .hero .hero-subtitle,
body:not(.panel) .hero .stat-label,
body:not(.panel) .featured-section .section-subtitle,
body:not(.panel) .featured-section .featured-description {
    color: rgba(250, 248, 244, 0.78);
}

body:not(.panel) .hero .hero-eyebrow,
body:not(.panel) .featured-section .section-eyebrow,
body:not(.panel) .featured-section .featured-category {
    color: var(--vl-coral-200);
}

body:not(.panel) .hero .hero-stats {
    border-top-color: rgba(250, 248, 244, 0.22);
}

body:not(.panel) .hero .stat:not(:last-child) {
    border-right-color: rgba(250, 248, 244, 0.16);
}

.footer-column a,
.footer-col a,
.footer-desc,
.footer-tagline,
.footer-bottom,
.footer-brand,
.page-footer p {
    color: var(--vl-footer-text);
}

:root[data-theme="dark"] body:not(.panel) .featured-section .section-title,
:root[data-theme="dark"] body:not(.panel) .featured-section .featured-title,
:root[data-theme="dark"] footer .footer-column h4,
:root[data-theme="dark"] footer .footer-col h4,
:root[data-theme="dark"] .page-footer h4 {
    color: var(--vl-on-footer);
}

:root[data-theme="dark"] body:not(.panel) .featured-section .section-subtitle,
:root[data-theme="dark"] body:not(.panel) .featured-section .featured-description,
:root[data-theme="dark"] footer .footer-column a,
:root[data-theme="dark"] footer .footer-col a,
:root[data-theme="dark"] footer .footer-desc,
:root[data-theme="dark"] footer .footer-tagline,
:root[data-theme="dark"] footer .footer-bottom,
:root[data-theme="dark"] footer .footer-brand {
    color: var(--vl-footer-text);
}

:root[data-theme="dark"] body:not(.panel) .hero h1,
:root[data-theme="dark"] body:not(.panel) .hero .stat-num {
    color: var(--vl-on-footer);
}

.modal {
    background: var(--vl-overlay);
}

.modal-content {
    color: var(--vl-text);
}

.confirmation {
    background: var(--vl-success-soft);
    border-color: color-mix(in srgb, var(--vl-success) 28%, transparent);
    color: var(--vl-success-700);
}

body.site-page .site-hero h1,
body.site-page .site-hero .stat-num,
:root[data-theme="dark"] body.site-page .site-hero h1,
:root[data-theme="dark"] body.site-page .site-hero .stat-num {
    color: var(--vl-text);
}

body.site-page .site-hero h1 em,
:root[data-theme="dark"] body.site-page .site-hero h1 em {
    color: var(--vl-accent);
}

body.site-page .site-hero .hero-subtitle,
:root[data-theme="dark"] body.site-page .site-hero .hero-subtitle {
    color: var(--vl-text-soft);
}

body.site-page .site-hero .stat-label,
:root[data-theme="dark"] body.site-page .site-hero .stat-label {
    color: var(--vl-text-muted);
}

body:not(.panel) .page-main .hero h1,
:root[data-theme="dark"] body:not(.panel) .page-main .hero h1 {
    color: var(--vl-text);
}

body:not(.panel) .page-main .hero p,
:root[data-theme="dark"] body:not(.panel) .page-main .hero p {
    color: var(--vl-text-soft);
}