/* Advent App — website stylesheet (2026)
   Palette inherits from the original advent-app.com:
     mint  #BFDCCE  — header / footer
     beige #E8E8DD  — body / hero
     tan   #C2A487  — feature section accent
     wine  #720030  — headlines + primary CTA
*/

:root {
    --aapp-mint: #BFDCCE;
    --aapp-mint-translucent: rgba(191, 220, 206, 0.92);
    --aapp-tan: #C2A487;
    --aapp-tan-soft: #E8D8C7;
    --aapp-beige: #E8E8DD;
    --aapp-pastel: #F2ECE6;
    --aapp-wine: #720030;
    --aapp-rose: #F29B8A;
    --aapp-text: #4C4C4C;
    --aapp-ink: #1D1110;
    --aapp-muted: #8A7363;
    --aapp-link: #720030;
    --aapp-border: rgba(29, 17, 16, 0.08);
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 96px;
    --radius: 14px;
    --shadow-card: 0 8px 32px rgba(29, 17, 16, 0.08);
}

/* If you have the original Avenir.ttf in /assets/fonts/, uncomment the
   @font-face block below and the family will be picked up automatically.
   Without it the site falls back to the system stack (San Francisco on
   Apple, Segoe UI on Windows, Roboto on Android).

@font-face {
    font-family: "Avenir";
    src: url("/assets/fonts/Avenir.ttf") format("truetype");
    font-display: swap;
}
*/

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    color: var(--aapp-text);
    background: var(--aapp-beige);
    font-family: "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    scroll-behavior: smooth;
}

a { color: var(--aapp-link); text-decoration: none; transition: opacity 200ms; }
a:hover { opacity: 0.6; }

img { max-width: 100%; height: auto; }

h1, h2, h3 {
    font-family: "Avenir", "Helvetica Neue", -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--aapp-wine);
    margin: 0 0 var(--space-sm);
    line-height: 1.2;
    letter-spacing: 0.02em;
}
h1 { font-size: clamp(2.2rem, 5vw + .5rem, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 2vw + .8rem, 2.2rem); font-weight: 500; }
h3 { font-size: 1.15rem; font-weight: 700; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-md); }

/* HEADER — mint, sticky, translucent */
header.site {
    position: sticky;
    top: 0;
    background: var(--aapp-mint-translucent);
    backdrop-filter: saturate(150%) blur(8px);
    -webkit-backdrop-filter: saturate(150%) blur(8px);
    border-bottom: 1px solid var(--aapp-border);
    z-index: 50;
}
header.site .container {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}
header.site .logo { display: flex; align-items: center; gap: var(--space-xs); }
header.site .logo img { height: 32px; padding: 0; }
header.site .logo span { font-weight: 700; color: var(--aapp-wine); }
header.site nav { margin-left: auto; }
header.site nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-md); }
header.site nav a { color: var(--aapp-wine); font-weight: 500; font-size: .95rem; }
.lang-switcher { display: flex; gap: 4px; margin-left: var(--space-md); }
.lang-switcher a {
    color: var(--aapp-wine);
    opacity: 0.55;
    font-size: .85rem;
    text-transform: uppercase;
    padding: 4px 6px;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.lang-switcher a.active { opacity: 1; background: rgba(114, 0, 48, 0.1); }
.lang-switcher a:hover { opacity: 1; }

/* HERO — beige, big bold display */
section.hero {
    padding: var(--space-xl) 0 var(--space-lg);
    text-align: center;
    background: var(--aapp-beige);
}
section.hero .brand-mark {
    color: var(--aapp-wine);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    margin: 0 0 var(--space-sm);
    padding-left: 0.4em;
}
section.hero .brand-divider {
    color: var(--aapp-wine);
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.5;
    margin: 0 0 var(--space-md);
    user-select: none;
}
section.hero h1 { color: var(--aapp-wine); margin-top: 0; }
section.hero p.tagline {
    font-size: 1.25rem;
    color: var(--aapp-text);
    max-width: 38em;
    margin: 0 auto var(--space-md);
}
section.hero .device {
    margin-top: var(--space-md);
    max-width: 280px;
    filter: drop-shadow(0 24px 48px rgba(29, 17, 16, 0.18));
}

/* STORE BADGES */
.stores { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-md) 0; }
.stores a { display: inline-flex; }
.stores img { height: 52px; padding: 0; }
.stores a:hover { opacity: 0.7; }

/* FEATURES — tan accent */
section.features {
    padding: var(--space-xl) 0;
    background: var(--aapp-tan);
    color: #fff;
}
section.features h2 { color: #fff; text-align: center; }
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
}
.feature {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius);
    padding: var(--space-md);
    box-shadow: var(--shadow-card);
}
.feature .icon { font-size: 2rem; line-height: 1; margin-bottom: var(--space-xs); }
.feature h3 { color: var(--aapp-wine); margin-bottom: 6px; }
.feature p { color: var(--aapp-text); margin: 0; font-size: .95rem; text-align: left; }

/* HOW IT WORKS — soft beige */
section.steps {
    padding: var(--space-xl) 0;
    background: var(--aapp-beige);
}
section.steps h2 { text-align: center; }
.step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}
.step { text-align: center; }
.step .num {
    display: inline-block;
    width: 44px; height: 44px; line-height: 44px;
    border-radius: 50%;
    background: var(--aapp-wine);
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: var(--space-sm);
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--aapp-text); margin: 0; }

/* FAQ — pastel */
section.faq { padding: var(--space-xl) 0; background: var(--aapp-pastel); }
section.faq h2 { text-align: center; margin-bottom: var(--space-lg); }
.faq-item {
    border-bottom: 1px solid var(--aapp-border);
    padding: var(--space-md) 0;
}
.faq-item summary {
    font-weight: 700;
    cursor: pointer;
    color: var(--aapp-wine);
    list-style: none;
    position: relative;
    padding-right: 32px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0; top: 0;
    font-size: 1.4rem;
    color: var(--aapp-wine);
    transition: transform .2s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { color: var(--aapp-text); margin: var(--space-xs) 0 0; text-align: left; }

/* CTA — wine, dramatic */
section.cta {
    padding: var(--space-xl) 0;
    text-align: center;
    background: var(--aapp-wine);
    color: #fff;
}
section.cta h2 { color: #fff; }
section.cta p { color: rgba(255, 255, 255, 0.85); }

/* FOOTER — mint, matches header */
footer.site {
    padding: var(--space-lg) 0 var(--space-md);
    color: var(--aapp-wine);
    background: var(--aapp-mint);
    font-size: .9rem;
    text-align: center;
}
footer.site nav { margin: var(--space-sm) 0; }
footer.site nav a {
    color: var(--aapp-wine);
    text-decoration: underline;
    margin: 0 var(--space-xs);
    padding: 0 4px;
}
footer.site .lang-switcher { justify-content: center; }
footer.site p { color: rgba(114, 0, 48, 0.7); margin-top: var(--space-sm); }

/* LEGAL PAGES — keep readable on white */
.legal-page {
    padding: var(--space-lg) 0 var(--space-xl);
    background: #fff;
}
.legal-page .container { max-width: 740px; }
.legal-page h1 { color: var(--aapp-wine); }
.legal-page h2 {
    font-size: 1.2rem;
    margin-top: var(--space-lg);
    color: var(--aapp-wine);
    font-weight: 700;
}
.legal-page p { text-align: left; }
.legal-page ul { padding-left: 1.2em; }
.legal-page li { margin: 4px 0; }
.legal-page table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    margin: var(--space-sm) 0;
}
.legal-page th, .legal-page td {
    border-bottom: 1px solid var(--aapp-border);
    text-align: left;
    padding: var(--space-xs) var(--space-sm);
    vertical-align: top;
}
.legal-page .meta { color: var(--aapp-muted); font-size: .9rem; }

@media (max-width: 600px) {
    header.site nav ul { gap: var(--space-sm); }
    .lang-switcher { margin-left: var(--space-xs); gap: 0; }
    .lang-switcher a { font-size: .75rem; padding: 4px; }
    section.hero { padding: var(--space-lg) 0 var(--space-md); }
    section.hero p.tagline { font-size: 1.1rem; }
}