/* =========================================================
   SELF-HOSTED FONTS
   Both are variable fonts — one file covers the full weight
   range used across the site. Paths resolve from style.css
   location, same convention as the background image below.
========================================================= */
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    /* Latin-only range: tells the browser in advance (no download needed)
       that this font never applies to CJK text, so Chinese/Japanese runs
       go straight to the OS font regardless of Inter's load state. */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('assets/fonts/EBGaramond-Variable.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   DREAM ARX - DESIGN SYSTEM
========================================================= */
:root {
    /* Color Palette (Strictly limited to official specs) */
    --color-1-bg: rgb(24, 24, 24);         /* Color 1: Base background */
    --color-2-bg: rgb(38, 38, 38);         /* Color 2: Lighter background / Menu hover state */
    --color-3-active: rgb(51, 51, 51);     /* Color 3: Active selected language state */
    --color-4-muted: rgb(115, 115, 115);   /* Color 4: Standard muted text */
    --color-5-secondary: rgb(191, 191, 191); /* Color 5: Secondary text on black */
    --color-9-text-headings: rgb(255, 255, 255); /* Color 9: Pure White */
    --color-line: rgb(60, 60, 60);
    --download-bg-overlay: rgba(0, 0, 0, 0.35); /* Subtle dark overlay */

    /* Font Families */
    --font-brand: 'EB Garamond', serif;
    --font-ui: 'Inter', sans-serif;

    /* Font Size Tokens */
    --text-brand-display: 53px;
    --text-brand-title: 35px;
    
    --text-ui-display: 48px;
    --text-ui-title-1: 32px;
    --text-ui-title-2: 28px;
    --text-ui-subheading: 19px;
    --text-ui-body: 16px;
    --text-ui-subtext: 14px;
    --text-ui-micro: 12px;
}

/* =========================================================
   GLOBAL RESET & BASE STYLES
========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-1-bg);
    background-image: url('assets/images/background.png'); /* Paths resolve from style.css location */
    background-repeat: repeat;
    color: var(--color-5-secondary);               
    font-family: var(--font-ui);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-width: 50em; /* Scales header and body unified on desktop zoom */
}

.container {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
}

a {
    color: var(--color-5-secondary);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

a:hover {
    color: var(--color-9-text-headings);
}

/* =========================================================
   HEADER (TWO-ROW: QUIET UTILITY STRIP + BRAND ROW)
========================================================= */
.site-header {
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 10px;
    width: 95%; 
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 0 25px;
}

.lang-switcher {
    grid-row: 1;
    justify-self: end;
    z-index: 100;
}

.logo-centered {
    grid-row: 2;
    justify-self: center;
    font-family: var(--font-brand);
    font-size: var(--text-brand-display);
    font-weight: 600;
    color: var(--color-9-text-headings);
    letter-spacing: 0.05em;
    text-align: center;
    opacity: 1;
    transition: opacity 0.25s ease;
}

/* Set by an early inline script in <head>; removed once EB Garamond is
   confirmed loaded (or after a safety timeout). No-JS visitors simply
   never get this class, so the logo just renders normally for them. */
html.fonts-pending .logo-centered {
    opacity: 0;
}

/* =========================================================
   LANGUAGE SWITCHER DROPDOWN
========================================================= */
.lang-switcher details {
    position: relative;
}

.lang-switcher summary {
    display: flex;
    align-items: baseline;
    gap: 2px;
    padding: 6px 2px;
    cursor: pointer;
    list-style: none;
    color: var(--color-5-secondary);
    transition: color 0.3s;
}

.lang-switcher summary .lang-mark-cjk {
    font-family: var(--font-ui);
    font-size: var(--text-ui-micro);
    position: relative;
    top: -1.5px; /* corrects CJK glyphs sitting lower than Latin caps on a shared baseline */
}

.lang-switcher summary .lang-mark-latin {
    font-family: var(--font-ui);
    font-size: var(--text-ui-subtext);
}

.lang-switcher summary .lang-mark-sep {
    font-family: var(--font-ui);
    font-size: var(--text-ui-subtext);
}

.lang-switcher summary:hover,
.lang-switcher details[open] summary {
    color: var(--color-9-text-headings);
}

.lang-switcher summary::-webkit-details-marker { display: none; }
.lang-switcher summary::marker { display: none; }

.lang-switcher ul {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background-color: var(--color-2-bg); /* Solid fill, not the page texture -- this is what reads as an elevated surface without a border */
    border-radius: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: max-content;
    z-index: 20;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    overflow: hidden; /* keeps item highlight backgrounds clipped to the menu's rounded corners */
}

.lang-switcher ul li a {
    display: block;
    padding: 10px 18px;
    font-family: var(--font-ui);
    font-size: var(--text-ui-subtext);
    color: var(--color-5-secondary); /* Equal weight & color (off-white) */
    white-space: nowrap;
    font-weight: 400;                /* Both languages are regular weight */
}

.lang-switcher ul li a:hover {
    background-color: var(--color-2-bg);     /* Color 2 Hover Background */
    color: var(--color-9-text-headings);     /* Color 9 Text Hover */
    text-decoration: none;
}

.lang-switcher ul li a.active {
    background-color: var(--color-3-active); /* Color 3 Active Background */
    color: var(--color-9-text-headings);     /* Color 9 Text Active */
}

/* =========================================================
   HERO SECTION 
========================================================= */
.hero {
    text-align: center;
    padding: 60px 0;
    max-width: 700px;
    margin: 0 auto;
}

.hero-subtitle {
    font-size: var(--text-ui-subheading);
    color: var(--color-5-secondary);
    font-weight: 400;
    line-height: 1.65;
}

/* =========================================================
   FEATURE SECTIONS (ORIGINAL TWO-COLUMN LAYOUT)
========================================================= */
.feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 0;
    gap: 40px;
    min-height: 350px; /* Establishes a baseline visual rhythm so short sections don't look cluttered */
}

.feature.reverse {
    flex-direction: row-reverse;
}

.feature-text, .feature-visual {
    flex: 1;
    min-width: 0;
}

.feature-text h2 {
    font-family: var(--font-ui); 
    font-size: var(--text-ui-title-2);
    font-weight: 400;            /* Regular 400 weight prevents titles from "shouting" */
    margin-bottom: 16px;
    color: var(--color-9-text-headings);
}

.feature-text p {
    font-size: var(--text-ui-body);
    color: var(--color-5-secondary);
    line-height: 1.6;
    margin-bottom: 8px; /* Adds a bit of breathing room if there are multiple paragraphs */
}

.feature-text p:last-child {
    margin-bottom: 0;
}

.feature-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0; 
}

/* Bulletproof Image Constraints */
.feature-visual img {
    max-width: 100%;
    height: auto;
    max-height: 70vh; 
    object-fit: contain;
}

/* Keeps wide UI elements (sliders, filters) from getting oversized */
.feature-visual img.ui-snippet {
    width: 100%;
    max-width: 350px; /* Ensures UI elements feel premium, not blown up */
}

/* Applies the same comfortable width ceiling to the full-screenshot images
   (Match with Intent, Find Dream Arx Venues) that the ui-snippet images
   already have. These were previously only height-capped (70vh), which let
   them demand more horizontal space than the other feature images as the
   window narrows -- causing them to visually cramp before the shared 900px
   breakpoint, while the already-capped images still had room to spare.
   Excludes the climax image, which is deliberately uncapped/large. */
.feature-visual:not(.climax-visual) img:not(.ui-snippet) {
    max-width: 350px;
}

.feature-visual.stacked {
    flex-direction: column;
    gap: 30px;
}

/* Climax Visual Styling */
.feature.climax {
    flex-direction: column;
    padding-top: 80px;
    padding-bottom: 80px; /* was inheriting 60px from .feature; matched to padding-top so the image gets equal breathing room before the footer's darker overlay begins */
    height: auto;
}

.feature-visual.climax-visual {
    width: 100%;
    max-width: 600px; 
}

.feature-visual.climax-visual img {
    max-height: none; 
}

/* =========================================================
   PRINCIPLES 
========================================================= */
.principles {
    padding: 80px 0;
    text-align: left;
}

.principles h2 {
    font-family: var(--font-ui); /* Strict Inter 400 alignment to protect brand EB Garamond */
    font-size: var(--text-ui-title-2);
    font-weight: 400;
    color: var(--color-9-text-headings);
    text-align: center;
    margin-bottom: 35px;
}

.principles-list {
    list-style-type: disc;
    padding-left: 25px;
    font-family: var(--font-ui);
    font-size: var(--text-ui-body);
    line-height: 1.65;
    color: var(--color-5-secondary);
    max-width: 700px;
    margin: 0 auto;
}

.principles-list li {
    margin-bottom: 12px;
}

.principles-list li:last-child {
    margin-bottom: 0;
}

/* =========================================================
   FOOTER & DOWNLOAD
========================================================= */
.site-footer {
    text-align: center;
    padding: 80px 0 40px 0;
    /* Uses linear-gradient to overlay transparent black on top of the textured background */
    background: linear-gradient(var(--download-bg-overlay), var(--download-bg-overlay)), url('assets/images/background.png') repeat;
}

.download-title {
    font-family: var(--font-ui); /* Strict Inter 400 alignment to protect brand EB Garamond */
    font-size: var(--text-ui-title-2);
    font-weight: 400;
    color: var(--color-9-text-headings);
    margin-bottom: 30px;
}

.store-badges {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
}

.store-badges img {
    height: 50px;
    width: auto;
    transition: transform 0.2s ease-out;
}

.store-badges a:hover img {
    transform: translateY(-2px);
}

/* Symmetrical and color-cohesive footer links */
.footer-links {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 24px;
    font-size: var(--text-ui-subtext);
}

.footer-contact {
    display: block;
    margin-bottom: 24px;
}

.contact-text {
    font-size: var(--text-ui-subtext);
    color: var(--color-5-secondary);
}

.copyright {
    font-size: var(--text-ui-micro);
    color: var(--color-4-muted); /* Strictly Color 4 from your palette */
}

/* =========================================================
   RESPONSIVE DESIGN (MOBILE ADJUSTMENTS)
========================================================= */
@media (max-width: 900px) {
    body {
        min-width: auto; /* Frees layout for native mobile screens */
    }

    .site-header {
        min-width: auto; 
        width: 95%;
    }

    .feature-text p {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .feature,
    .feature.reverse {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 40px 0; 
        gap: 40px;
        min-height: auto; /* Removes the tall stage on mobile, keeping flow tight */
    }

    .feature-visual img {
        max-height: 55vh; 
    }

    .principles-list {
        max-width: 90% !important;
        font-size: var(--text-ui-subtext);
    }

    .store-badges {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}

/* =========================================================
   LEGAL DOCUMENTS (Terms of Service / Privacy Policy)
========================================================= */
.legal-content {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
    padding: 80px 0 100px;
}

.legal-content h1 {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: var(--text-ui-title-1);
    color: var(--color-9-text-headings);
    margin-bottom: 12px;
}

.legal-content .legal-meta {
    font-size: var(--text-ui-subtext);
    color: var(--color-5-secondary);
    margin-bottom: 32px;
}

.legal-content .legal-intro p {
    font-size: var(--text-ui-body);
    color: var(--color-5-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.legal-content h2 {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: var(--text-ui-title-2);
    color: var(--color-9-text-headings);
    margin-top: 48px;
    margin-bottom: 16px;
}

.legal-content h3 {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-ui-body);
    color: var(--color-9-text-headings);
    margin-top: 24px;
    margin-bottom: 8px;
}

.legal-content p {
    font-size: var(--text-ui-body);
    color: var(--color-5-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.legal-content ul {
    list-style: none;
    padding-left: 0;
    margin: 4px 0 20px 0;
}

.legal-content li {
    position: relative;
    padding-left: 22px;
    font-size: var(--text-ui-body);
    color: var(--color-5-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
}

.legal-content li::before {
    content: "\2022";
    position: absolute;
    left: 4px;
    color: var(--color-5-secondary);
}

.legal-content .legal-subtitle {
    font-size: var(--text-ui-body);
    color: var(--color-5-secondary);
    margin-bottom: 16px;
}

.legal-content .legal-closing {
    margin-top: 40px;
    font-size: var(--text-ui-body);
    color: var(--color-5-secondary);
    line-height: 1.6;
}

/* Italics are a Latin-script emphasis convention with no equivalent
   in CJK typefaces (most CJK fonts have no true italic design, so
   browsers just mechanically slant the upright glyphs). Used only
   on the English version's closing/subtitle lines. */
.legal-content .en-italic {
    font-style: italic;
}

.legal-content .legal-back-link {
    margin-top: 56px;
    margin-bottom: 80px;
}

@media (max-width: 900px) {
    .legal-content {
        padding: 60px 0 80px;
    }
    .legal-content h1 {
        font-size: var(--text-ui-title-2);
    }
}