/* Send A Song Heritage theme
 * A quiet archival palette with modern, accessible controls.
 */

:root {
    --heritage-paper: #f3efe6;
    --heritage-paper-deep: #e6dfd2;
    --heritage-surface: #fbf8f1;
    --heritage-ink: #312f2b;
    --heritage-muted: #68665f;
    --heritage-line: #c9bfaf;
    --heritage-sage: #637b6b;
    --heritage-sage-dark: #465d50;
    --heritage-blue: #667b86;
    --heritage-rose: #9a6f69;
    --heritage-gold: #a6834f;
    --heritage-shadow: 0 16px 38px rgba(67, 57, 43, 0.11);
    --bg-primary: var(--heritage-paper);
    --bg-secondary: var(--heritage-surface);
    --bg-tertiary: var(--heritage-paper-deep);
    --text-primary: var(--heritage-ink);
    --text-secondary: #57564f;
    --text-tertiary: #77736b;
    --border-color: rgba(87, 75, 58, 0.22);
    --primary: var(--heritage-sage);
    --primary-dark: var(--heritage-sage-dark);
    --primary-light: #8fa395;
    --secondary: var(--heritage-blue);
    --accent: var(--heritage-gold);
    --accent-dark: #765d37;
    --gray-900: var(--heritage-ink);
    --gray-800: #45433e;
    --gray-700: #5b5953;
    --gray-600: #6c6962;
    --gray-500: #7e7a72;
    --gray-400: #9a948a;
    --gray-300: #c9bfaf;
    --gray-200: #ded6c8;
    --gray-100: #f3efe6;
    --white: #ffffff;
    --glass-bg: rgba(251, 248, 241, 0.94);
    --glass-bg-strong: #fbf8f1;
    --glass-border: rgba(87, 75, 58, 0.22);
}

html {
    color-scheme: light;
    background: var(--heritage-paper);
}

body,
body[data-theme="dark"],
[data-theme="dark"] body {
    color: var(--heritage-ink) !important;
    background-color: var(--heritage-paper) !important;
    background-image:
        repeating-linear-gradient(0deg, rgba(81, 68, 50, 0.018) 0, rgba(81, 68, 50, 0.018) 1px, transparent 1px, transparent 5px),
        linear-gradient(115deg, rgba(255, 255, 255, 0.46), transparent 42%, rgba(100, 123, 107, 0.055)) !important;
    font-family: Inter, Avenir, "Segoe UI", sans-serif !important;
    font-size: 17px;
}

body::before {
    background:
        linear-gradient(90deg, transparent 0, rgba(154, 111, 105, 0.045) 52%, transparent 100%),
        repeating-linear-gradient(90deg, transparent 0, transparent 23px, rgba(49, 47, 43, 0.018) 24px) !important;
    animation: none !important;
}

body::after {
    display: none !important;
}

h1, h2, h3,
.page-title,
.section-title,
.plan-name,
.song-title,
.auth-side h1,
.auth-side h2 {
    color: var(--heritage-ink) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

h4, h5, h6, p, li, label, small,
.text-muted,
.text-secondary,
.helper-text,
.help-text {
    letter-spacing: 0 !important;
}

p,
.text-secondary,
.helper-text,
.help-text,
small {
    color: var(--heritage-muted) !important;
}

a:not(.btn):not(.nav-link):not(.sd-btn):not(.social-btn) {
    color: var(--heritage-sage-dark) !important;
    text-underline-offset: 3px;
}

a:not(.btn):not(.nav-link):not(.sd-btn):not(.social-btn):hover {
    color: #2f463a !important;
}

.xmla-company-attribution {
    margin: 14px 0 0 !important;
    color: var(--heritage-muted) !important;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
}

.xmla-company-attribution a {
    color: var(--heritage-sage-dark) !important;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.xmla-company-attribution a:hover {
    color: #2f463a !important;
}

.footer-bottom .xmla-company-attribution--footer {
    margin-top: 8px !important;
}

.footer-bottom .xmla-company-attribution--footer a {
    color: #e8e1d5 !important;
}

.footer-bottom .xmla-company-attribution--footer a:hover {
    color: #ffffff !important;
}

::selection {
    color: #fff;
    background: var(--heritage-sage-dark);
}

:focus-visible {
    outline: 3px solid #7d6542 !important;
    outline-offset: 3px !important;
}

.container {
    max-width: 1180px;
}

/* Navigation */
.navbar,
.navbar.scrolled,
[data-theme="dark"] .navbar.scrolled {
    min-height: 76px;
    background: rgba(247, 243, 234, 0.96) !important;
    border-bottom: 1px solid var(--heritage-line) !important;
    box-shadow: 0 7px 24px rgba(67, 57, 43, 0.08) !important;
    backdrop-filter: blur(14px) saturate(0.8) !important;
}

.navbar .container {
    min-height: 76px;
}

.nav-brand:hover,
.footer-logo:hover {
    transform: none !important;
}

.nav-logo-wordmark {
    height: 48px;
    max-width: 224px;
    filter: none;
}

.nav-links,
.nav-links a:not(.btn),
.navbar.scrolled .nav-links a:not(.btn),
.navbar .nav-link:not(.btn) {
    color: var(--heritage-ink) !important;
}

.nav-links a:not(.btn):hover,
.navbar.scrolled .nav-links a:not(.btn):hover {
    color: var(--heritage-sage-dark) !important;
    transform: none !important;
}

.nav-links a:not(.btn)::after {
    height: 1px !important;
    background: var(--heritage-gold) !important;
}

.navbar .nav-links a.btn-primary,
.navbar.scrolled .nav-links a.btn-primary {
    color: #fff !important;
}

.navbar .nav-dropdown-menu {
    background: rgba(251, 248, 241, 0.99) !important;
    border: 1px solid var(--heritage-line) !important;
    box-shadow: var(--heritage-shadow) !important;
    backdrop-filter: blur(14px) !important;
}

.navbar .nav-dropdown-item {
    color: var(--heritage-ink) !important;
    border-bottom-color: rgba(87, 75, 58, 0.12) !important;
}

.navbar .nav-dropdown-item:hover {
    color: var(--heritage-sage-dark) !important;
    background: rgba(99, 123, 107, 0.1) !important;
}

.account-dropdown .nav-link > span:first-child {
    background: var(--heritage-sage-dark) !important;
}

.mobile-menu-toggle span {
    background: var(--heritage-ink) !important;
}

/* Buttons: calm, clear, and touch friendly */
.btn,
.sample-btn,
.coupon-button,
button:not(.mobile-menu-toggle):not(.themed-audio-player button) {
    min-height: 46px;
    border-radius: 6px !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    box-shadow: 0 7px 16px rgba(67, 57, 43, 0.14) !important;
}

.btn::before {
    display: none !important;
}

.btn-primary,
.pricing-card .btn-primary,
.pricing-card .btn-secondary,
.sample-btn-play,
.coupon-button,
.billing-toggle button.active {
    color: #fff !important;
    background: var(--heritage-sage-dark) !important;
    border: 1px solid #3d5147 !important;
}

.btn-secondary,
.btn-glass,
.btn-secondary-auth,
.clear-filters {
    color: var(--heritage-ink) !important;
    background: rgba(251, 248, 241, 0.94) !important;
    border: 1px solid var(--heritage-line) !important;
}

.btn:hover,
.sample-btn:hover,
.coupon-button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px rgba(67, 57, 43, 0.18) !important;
}

.btn:disabled,
button:disabled,
.btn.disabled {
    color: #817d75 !important;
    background: #d8d1c4 !important;
    border-color: #c5bcad !important;
    box-shadow: none !important;
}

/* Hero: archival photograph with a subtle digital waveform */
.site-hero-image {
    min-height: min(720px, calc(100vh - 76px)) !important;
    background:
        linear-gradient(90deg, rgba(45, 39, 32, 0.94) 0%, rgba(54, 47, 39, 0.8) 43%, rgba(54, 47, 39, 0.2) 78%),
        url('/assets/images/site/heritage-song-hero-v2.webp') center right / cover no-repeat !important;
    border-bottom: 8px solid rgba(166, 131, 79, 0.34);
    filter: saturate(0.82) sepia(0.1);
}

.site-hero-image::before {
    background:
        linear-gradient(180deg, rgba(90, 76, 57, 0.04), rgba(37, 33, 29, 0.56)),
        repeating-linear-gradient(0deg, transparent 0, transparent 4px, rgba(255, 247, 230, 0.018) 5px) !important;
}

.site-hero-image h1,
.site-hero-image h2,
.site-hero-image p {
    color: #fffaf0 !important;
    text-shadow: 0 2px 18px rgba(18, 15, 12, 0.48) !important;
}

.site-hero-image h1 {
    max-width: 720px;
    font-size: clamp(3rem, 6vw, 5.15rem) !important;
    line-height: 1.02 !important;
}

.site-hero-image p {
    max-width: 650px !important;
    font-size: clamp(1.08rem, 2vw, 1.3rem) !important;
    line-height: 1.68 !important;
}

.gradient-text {
    color: #e8d8b8 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    animation: none !important;
}

.site-hero-image .btn-primary {
    color: #fff !important;
    background: var(--heritage-sage-dark) !important;
    border-color: #91a597 !important;
}

.site-hero-image .btn-secondary {
    color: #fffaf0 !important;
    background: rgba(43, 39, 34, 0.78) !important;
    border-color: rgba(230, 216, 190, 0.62) !important;
}

#soundWaves {
    opacity: 0.28 !important;
    mix-blend-mode: screen;
}

/* Full-width sections and memory imagery */
.features,
.memory-story,
.how-story,
.pricing,
.samples-container,
.content-section,
.faq-section {
    color: var(--heritage-ink) !important;
}

.features:nth-of-type(even),
.memory-story,
.filters-section {
    background: rgba(222, 214, 200, 0.44) !important;
}

.section-header h2,
.section-header p,
.memory-story-card h2,
.memory-story-card p,
.memory-checklist li {
    color: var(--heritage-ink) !important;
}

.section-header h2 {
    font-size: clamp(2.2rem, 4vw, 3.4rem) !important;
}

.memory-story-grid {
    gap: clamp(2rem, 5vw, 5rem) !important;
}

.memory-photo,
.lifestyle-image-frame,
.how-story-image,
.faq-intro-card {
    padding: 9px !important;
    border: 1px solid #b9ad9c !important;
    border-radius: 4px !important;
    background: #fdfaf4 !important;
    box-shadow: 0 20px 42px rgba(67, 57, 43, 0.16) !important;
}

.memory-photo img,
.lifestyle-image-frame img,
.how-story-image img,
.faq-intro-image {
    filter: sepia(0.15) saturate(0.72) contrast(0.96) !important;
}

.memory-story-card,
.how-story-copy,
.faq-intro-copy {
    padding: clamp(1.5rem, 3vw, 2.75rem) !important;
    color: var(--heritage-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 3px solid var(--heritage-gold) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.memory-kicker {
    color: #765d37 !important;
}

.memory-checklist li::before,
.plan-features li::before,
.step-list li::before {
    color: #fff !important;
    background: var(--heritage-sage-dark) !important;
}

/* Repeated cards */
.feature-card,
.card,
.pricing-card,
.storage-card,
.faq-item,
.sample-card,
.song-card,
.stat-card,
.option-card,
.included-feature-card,
.settings-card,
.security-panel,
.privacy-panel,
.step-card,
.review-summary,
.quality-upgrade-banner,
.credits-banner,
.wizard-container,
.auth-side,
.auth-container,
.glass-card,
.panel,
.box,
.container-card {
    color: var(--heritage-ink) !important;
    background: rgba(251, 248, 241, 0.94) !important;
    border: 1px solid var(--heritage-line) !important;
    border-radius: 7px !important;
    box-shadow: var(--heritage-shadow) !important;
    backdrop-filter: none !important;
}

.feature-card:hover,
.card:hover,
.pricing-card:hover,
.storage-card:hover,
.faq-item:hover,
.sample-card:hover,
.song-card:hover,
.step-card:hover {
    transform: translateY(-3px) !important;
    color: var(--heritage-ink) !important;
    background: var(--heritage-surface) !important;
    border-color: #9f917e !important;
    box-shadow: 0 20px 42px rgba(67, 57, 43, 0.16) !important;
}

.feature-card h3,
.feature-card p,
.card h1,
.card h2,
.card h3,
.card h4,
.card p,
.pricing-card h3,
.pricing-card p,
.faq-item h4,
.faq-question,
.faq-answer,
.sample-title,
.sample-description,
.song-title,
.song-meta,
.stat-label,
.stat-value,
.option-card-title,
.option-card-description,
.step-card h3,
.step-card p,
.step-list li {
    color: var(--heritage-ink) !important;
}

.feature-icon,
.step-icon,
.empty-state-icon {
    filter: sepia(0.22) saturate(0.78);
    animation: none !important;
}

.feature-card {
    text-align: left !important;
}

.feature-card .feature-icon {
    font-size: 2.7rem !important;
}

.pricing-card.featured,
.storage-card.featured {
    border: 2px solid var(--heritage-sage) !important;
    background: #f7f4eb !important;
}

.pricing-card.featured:hover {
    transform: translateY(-3px) !important;
}

.plan-badge {
    color: #fff !important;
    background: var(--heritage-rose) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.plan-name,
.plan-price,
.storage-card h3,
.storage-card .price {
    color: var(--heritage-ink) !important;
}

.plan-features li {
    color: #504e48 !important;
    border-bottom-color: rgba(87, 75, 58, 0.13) !important;
}

.billing-toggle {
    background: #e6dfd2 !important;
    border-color: var(--heritage-line) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

.billing-toggle button {
    color: var(--heritage-ink) !important;
    border-radius: 5px !important;
}

.billing-save,
.plan-billing-note {
    color: var(--heritage-sage-dark) !important;
}

.coupon-section,
.cta-section {
    color: #fffaf0 !important;
    background: #465d50 !important;
}

.coupon-section h2,
.coupon-section p,
.cta-section h2,
.cta-section p,
.cta-card h2,
.cta-card p {
    color: #fffaf0 !important;
}

.cta-card,
.cta-content {
    max-width: 900px !important;
    color: #fffaf0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 250, 240, 0.4) !important;
    border-bottom: 1px solid rgba(255, 250, 240, 0.4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.cta-section .btn {
    color: var(--heritage-ink) !important;
    background: #fff8e7 !important;
    border-color: rgba(255, 248, 231, 0.8) !important;
}

/* Forms and guided creation */
.page-hero,
.samples-hero,
.hero-section,
.memory-how-hero {
    color: #fffaf0 !important;
    background-color: #465d50 !important;
    border-bottom: 6px solid rgba(166, 131, 79, 0.34) !important;
}

.page-hero {
    background: #465d50 !important;
}

.samples-hero {
    background: #4f5f58 !important;
}

.page-hero::before {
    background: repeating-linear-gradient(0deg, transparent 0, transparent 6px, rgba(255, 250, 240, 0.025) 7px) !important;
}

.page-hero h1,
.page-hero p,
.samples-hero h1,
.samples-hero p,
.hero-section h1,
.hero-section p,
.memory-how-hero h1,
.memory-how-hero p {
    color: #fffaf0 !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    text-shadow: 0 2px 16px rgba(25, 22, 18, 0.35) !important;
}

.wizard-progress {
    background: #dfd7ca !important;
    border: 1px solid var(--heritage-line) !important;
}

.wizard-progress-fill,
.wizard-step.active .wizard-step-circle {
    background: var(--heritage-sage-dark) !important;
}

.wizard-step-circle {
    color: var(--heritage-ink) !important;
    background: #e2dbcf !important;
    border-color: var(--heritage-line) !important;
}

.wizard-step-label,
.step-title,
.step-description,
.review-summary,
.total-cost-label,
.total-cost-note {
    color: var(--heritage-ink) !important;
}

.form-group label,
label,
[data-theme="dark"] .form-group label {
    color: #46443f !important;
}

.form-control,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
[data-theme="dark"] .form-control {
    color: var(--heritage-ink) !important;
    background-color: #fffdf8 !important;
    border: 1px solid #aaa091 !important;
    border-radius: 5px !important;
    box-shadow: inset 0 1px 3px rgba(67, 57, 43, 0.07) !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus,
[data-theme="dark"] .form-control:focus {
    border-color: var(--heritage-sage-dark) !important;
    box-shadow: 0 0 0 3px rgba(70, 93, 80, 0.18) !important;
}

select.form-control option,
.filter-select option,
[data-theme="dark"] .filter-select option {
    color: var(--heritage-ink) !important;
    background: #fffdf8 !important;
}

.filter-label,
.filter-select,
.clear-filters {
    color: var(--heritage-ink) !important;
}

.filters-section {
    top: 76px !important;
    border-color: var(--heritage-line) !important;
    box-shadow: 0 5px 16px rgba(67, 57, 43, 0.08) !important;
}

.sample-artwork,
.sample-artwork-trigger {
    background: #d7d0c4 !important;
}

.sample-artwork-trigger .sample-artwork {
    filter: sepia(0.12) saturate(0.78) !important;
}

.sample-artwork-fallback {
    color: #fffaf0 !important;
    background: #667b86 !important;
}

.sample-artwork-fallback::after {
    background: repeating-linear-gradient(0deg, transparent 0, transparent 7px, rgba(255,255,255,0.04) 8px) !important;
}

.sample-tag {
    color: #45433e !important;
    background: #e3dbcf !important;
}

.sample-tag.genre { background: #d6e0df !important; color: #354d4b !important; }
.sample-tag.mood { background: #e5d7d3 !important; color: #694943 !important; }
.sample-tag.occasion { background: #dce2d6 !important; color: #435640 !important; }

.samples-pagination a,
.samples-pagination span {
    color: var(--heritage-ink) !important;
    background: #fbf8f1 !important;
    border-color: var(--heritage-line) !important;
    border-radius: 5px !important;
}

.samples-pagination a:hover,
.samples-pagination .active {
    color: #fff !important;
    background: var(--heritage-sage-dark) !important;
    border-color: var(--heritage-sage-dark) !important;
}

/* Authentication and account pages */
.auth-split {
    background: var(--heritage-surface) !important;
    border: 1px solid var(--heritage-line) !important;
    border-radius: 7px !important;
    box-shadow: var(--heritage-shadow) !important;
}

.auth-split .auth-side {
    color: var(--heritage-ink) !important;
    background: var(--heritage-surface) !important;
}

.auth-side.primary {
    background: #edf0e8 !important;
    border-top: 4px solid var(--heritage-gold) !important;
}

[data-theme="dark"] .auth-split .auth-side h2,
[data-theme="dark"] .auth-split .auth-side label {
    color: var(--heritage-ink) !important;
}

[data-theme="dark"] .auth-split .auth-side p,
[data-theme="dark"] .auth-split .auth-side small {
    color: var(--heritage-muted) !important;
}

.auth-side:not(.primary) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 360px;
    text-align: center;
    background: #e7e1d6 !important;
}

.auth-side:not(.primary) form {
    display: none !important;
}

[data-theme="dark"] .auth-side.primary .btn-primary,
[data-theme="dark"] .auth-side:not(.primary) .switch-link a {
    color: #fff !important;
    background: var(--heritage-sage-dark) !important;
    border-color: #3d5147 !important;
    text-shadow: none !important;
}

.auth-side.primary .forgot-password-link {
    padding: 0 !important;
    color: var(--heritage-sage-dark) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.oauth-divider,
.forgot-password-link,
.switch-link,
.auth-secondary-actions {
    color: var(--heritage-muted) !important;
}

.btn-google-auth {
    color: var(--heritage-ink) !important;
    background: #fffdf8 !important;
    border-color: var(--heritage-line) !important;
}

.settings-container,
.dashboard-container,
.wizard-container {
    max-width: 1120px !important;
}

.status-badge,
.quality-badge,
.sample-tag {
    border-radius: 999px !important;
}

/* Alerts retain meaning without neon colors */
.alert {
    border-radius: 5px !important;
    box-shadow: none !important;
}

.alert-success { color: #355141 !important; background: #e1e9df !important; border-color: #89a08c !important; }
.alert-info { color: #40545f !important; background: #e1e7e9 !important; border-color: #8c9ea6 !important; }
.alert-warning { color: #6b552f !important; background: #eee5d4 !important; border-color: #b79a67 !important; }
.alert-danger,
.alert-error { color: #6d3f3c !important; background: #eee0dc !important; border-color: #b68179 !important; }

/* Footer */
.footer {
    color: #eee8dc !important;
    background: #343a36 !important;
    border-top: 6px solid #a6834f !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.footer h4,
.footer p,
.footer a,
.footer-bottom p {
    color: #e9e3d8 !important;
}

.footer a:hover {
    color: #fff !important;
    transform: none !important;
}

.footer .footer-content .footer-section a:not(.btn) {
    color: #e9e3d8 !important;
}

.footer-logo {
    padding: 6px 10px !important;
    background: #f3efe6 !important;
    border-radius: 4px !important;
}

.footer-logo img {
    filter: none !important;
}

.footer-bottom {
    border-top-color: rgba(238, 232, 220, 0.2) !important;
}

@media (max-width: 968px) {
    .navbar .nav-links {
        display: none !important;
        top: 76px !important;
        height: calc(100vh - 76px) !important;
        color: var(--heritage-ink) !important;
        background: #f7f3ea !important;
        border-left-color: var(--heritage-line) !important;
    }

    .navbar .nav-links.active {
        display: flex !important;
    }

    .navbar .nav-links a:not(.btn) {
        color: var(--heritage-ink) !important;
    }

    .navbar .nav-links a:not(.btn) {
        display: flex !important;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    .site-hero-image {
        min-height: 650px !important;
        background:
            linear-gradient(180deg, rgba(42, 37, 31, 0.67), rgba(42, 37, 31, 0.9)),
            url('/assets/images/site/heritage-song-hero-v2.webp') 64% center / cover no-repeat !important;
    }

    .site-hero-image .container {
        text-align: left !important;
    }

    .site-hero-image h1 {
        font-size: clamp(2rem, 9vw, 3.2rem) !important;
    }

    .site-hero-image .hero-buttons {
        align-items: stretch !important;
    }

    .site-hero-image .btn {
        width: 100%;
    }

    .memory-story-card,
    .how-story-copy,
    .faq-intro-copy {
        border-top: 3px solid var(--heritage-gold) !important;
        border-left: 0 !important;
    }

    .feature-card {
        min-height: auto !important;
    }

    .auth-side:not(.primary) {
        min-height: 230px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}