/* Global Resets & Base Styles */
body, h1, h2, h3, h4, p, a, ul, li, figure, figcaption, blockquote, dl, dd {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", "Noto Sans SC", sans-serif;
    line-height: 1.7;
    color: #333; /* Dark Gray for text */
    background-color: #ffffff; /* White background */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 全局禁用移动设备上的点击高亮效果 */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.container {
    width: 90%;
    max-width: 960px; /* Max width for content */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Links */
a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    -webkit-tap-highlight-color: transparent; /* 禁用移动设备上的点击高亮效果 */
}

a:hover, a:focus {
    color: #000; /* Black on hover/focus */
}

/* Header */
.site-header {
    padding: 20px 0;
    border-bottom: 1px solid #eee; /* Light gray border */
    background-color: #f9f9f9; /* Very light gray background for nav */
}

.main-nav {
    display: flex;
    justify-content: center; /* Center the logo */
    align-items: center;
}

.logo a {
    display: block;
    -webkit-tap-highlight-color: transparent; /* 确保在iOS设备上禁用点击高亮 */
    outline: none; /* 移除点击时的轮廓 */
}

.logo-image {
    display: block; /* Remove extra space below image */
    height: 64px; /* Increased height */
    width: auto; /* Maintain aspect ratio */
    -webkit-user-select: none; /* 防止用户选择图片 */
    user-select: none; /* 标准语法 */
}

.nav-links {
    display: flex;
    align-items: center;
}

.nav-links a, .language-selector {
    margin-left: 20px;
    font-size: 0.95em;
    color: #555; /* Medium gray for nav links */
}
.nav-links a:hover, .nav-links a:focus {
    color: #000;
}

.language-selector select {
    border: 1px solid #ddd;
    padding: 5px 8px;
    border-radius: 4px;
    background-color: #fff;
    color: #555;
    font-size: 0.9em;
    margin-left: 5px; /* Space between icon and select */
}
.language-selector svg {
    vertical-align: middle;
}


/* Hero Section */
.hero-section {
    padding: 80px 0;
    text-align: center;
    background-color: #ffffff; /* White background for hero */
}

.app-title {
    font-size: 2.8em;
    font-weight: 700;
    color: #000; /* Black for main title */
    margin-bottom: 0.5em;
}

.tagline {
    font-size: 1.4em;
    color: #555; /* Medium gray */
    margin-bottom: 1em;
    font-weight: 300;
}

.description {
    font-size: 1.1em;
    color: #444; /* Slightly darker gray for description */
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    line-height: 1.8;
}

.app-store-badge-placeholder {
    margin-top: 20px;
    padding: 15px 30px;
    border: 1px dashed #ccc; /* Dashed border for placeholder */
    display: inline-block;
    color: #777;
}

.download-buttons {
    margin-top: 30px; /* Add space above buttons */
}

.download-button {
    display: inline-block; /* Allow multiple buttons side-by-side */
    margin: 0 10px; /* Space between buttons */
    vertical-align: middle;
    line-height: 0; /* Minimize extra vertical space within the link */
    font-size: 0; /* Minimize extra horizontal space if any text nodes exist */
    pointer-events: none; /* Link itself ignores clicks */
}

.download-button img {
    pointer-events: auto; /* Image inside responds to clicks */
    height: 40px; /* Match original SVG height */
    width: auto;
    /* display: block; Removed to allow text-align: center to work */
    vertical-align: middle; /* Ensure proper vertical alignment */
}

/* Styles for content pages (Privacy, Support, 404) */
.legal-content { /* Re-using this class for content area */
    max-width: 720px; /* Narrower content width for readability */
    margin-top: 40px; /* Add space below header */
    margin-bottom: 60px;
}

.page-title-placeholder { /* Style for the re-added H1 */
    font-size: 2.2em; /* Adjust size as needed */
    font-weight: 600;
    color: #000;
    text-align: center;
    margin-bottom: 1.5em;
}

.legal-content h2 { /* Keep styles for subheadings */
    font-size: 1.6em;
    font-weight: 600;
    color: #000;
    margin-top: 2.5em;
    margin-bottom: 1em;
}
.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content h3 {
    font-size: 1.3em;
    font-weight: 600;
    color: #111;
    margin-top: 2em;
    margin-bottom: 0.8em;
}

.legal-content p, .legal-content ul, .legal-content ol {
    margin-bottom: 1.5em;
    color: #444;
    line-height: 1.8;
}

.legal-content ul, .legal-content ol {
    padding-left: 1.5em;
}

.legal-content li {
    margin-bottom: 0.5em;
}

.legal-content strong {
    font-weight: 600;
    color: #000;
}

.legal-content a {
    color: #007aff; /* Apple blue for links */
    text-decoration: underline;
}
.legal-content a:hover {
    color: #0056b3;
}

.update-date {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 2em;
}


/* Features Section (for Spaces, Experience, Privacy) */
.features-section {
    padding: 60px 0;
}

.features-section.alt-bg {
    background-color: #ffffff; /* Alternating background color - now white */
}

.section-title {
    font-size: 2.2em;
    font-weight: 600;
    color: #000;
    text-align: center;
    margin-bottom: 1.5em;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

.feature-item {
    text-align: center; /* Or left, depending on icon placement if any */
}

.feature-item h3 {
    font-size: 1.5em;
    font-weight: 500;
    color: #000;
    margin-bottom: 0.5em;
}

.feature-item p {
    font-size: 1em;
    color: #444;
    line-height: 1.7;
}

.features-list .feature-item-list {
    margin-bottom: 30px;
}
.features-list .feature-item-list:last-child {
    margin-bottom: 0;
}

.features-list h4 {
    font-size: 1.3em;
    font-weight: 500;
    color: #000;
    margin-bottom: 0.3em;
}
.features-list p {
    font-size: 1em;
    color: #444;
}


/* Screenshots Section */
.screenshots-section {
    padding: 60px 0;
}

.screenshots-grid {
    display: flex; /* Changed from grid to flex */
    overflow-x: auto; /* Allow horizontal scrolling */
    white-space: nowrap; /* Prevent images from wrapping to the next line */
    padding-bottom: 20px; /* Add some padding for the scrollbar */
    gap: 30px; /* Keep the gap between images */
}

.screenshot-image {
    max-width: none; /* Allow images to exceed container width for scrolling */
    width: 200px; /* Set a fixed width for each screenshot, adjust as needed */
    height: auto;
    border-radius: 8px; /* Optional: rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
}


/* Footer */
.site-footer {
    padding: 25px 0; /* Slightly reduced padding */
    border-top: 1px solid #eee; /* Light gray border */
    font-size: 0.85em; /* Slightly smaller font size */
    color: #777; /* Light gray for footer text */
}

.footer-content {
    display: flex;
    justify-content: space-between; /* Push copyright/links left and language right */
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.footer-copyright {
    margin-right: 15px; /* Space between copyright and the first link */
    margin-bottom: 10px; /* Margin for wrap scenario */
    white-space: nowrap; /* Prevent copyright text from wrapping */
    order: 1; /* Ensure copyright comes first */
}

.footer-links {
    display: flex;
    flex-wrap: wrap; /* Allow links to wrap */
    align-items: center; /* Align items vertically in case of wrap */
    margin-bottom: 10px; /* Margin for wrap scenario */
    order: 2; /* Links come after copyright */
    margin-right: auto; /* Push language selector to the right */
}

.footer-language-selector {
    order: 3; /* Language selector comes last */
    margin-left: 20px; /* Space between links and language selector */
    margin-bottom: 10px; /* Margin for wrap scenario */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center icon and select */
}

/* Simplify footer language selector */
.footer-language-selector select {
    border: none; /* Remove border */
    background-color: transparent; /* Remove background */
    padding: 0 5px 0 0; /* Adjust padding, remove left padding if icon stays */
    font-size: 1em; /* Match surrounding text size */
    color: #555; /* Match link color */
    margin-left: 3px; /* Adjust space after icon */
    cursor: pointer;
    appearance: none; /* Remove default browser appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
}
/* Remove focus outline */
.footer-language-selector select:focus {
    outline: none;
    box-shadow: none; /* Also remove potential box-shadow on focus */
}
.footer-language-selector svg {
     /* vertical-align: middle; No longer needed with flexbox */
     margin-right: 2px; /* Space between icon and select */
     color: #777; /* Match footer text color */
     flex-shrink: 0; /* Prevent icon from shrinking */
}


.footer-links a, .footer-links span[data-lang] { /* Apply to links and copyright span */
    color: #555;
    margin: 0 8px; /* Space around links and separators */
    white-space: nowrap; /* Prevent links from breaking mid-word */
}
.footer-links a:hover {
    color: #000;
}

.footer-link-separator {
    color: #bbb; /* Slightly darker separator */
    margin: 0 8px; /* Match link horizontal margin */
    display: inline-block; /* Use inline-block for spacing */
}

/* Remove complex CSS hiding logic for separators based on active links. */
/* Rely on the HTML structure and JS to show only one set of links per language. */
/* Ensure active links are displayed correctly (redundant but safe) */
.footer-links a.active {
    display: inline;
}


/* Language display logic (from lang-nowist.js, but basic visibility) */
[data-lang] {
    display: none;
}
[data-lang].active {
    display: inherit; /* Or block, inline, etc., depending on element */
}
/* Ensure specific elements like h1, p inside a data-lang.active container are displayed correctly */
[data-lang].active > h1,
[data-lang].active > h2,
[data-lang].active > h3,
[data-lang].active > h4,
[data-lang].active > p,
[data-lang].active > div,
[data-lang].active > a {
    display: block; /* Adjust as needed, e.g. inline-block for some */
}
.nav-links [data-lang].active, .logo [data-lang].active {
    display: inline; /* For nav links and logo text */
}
.app-store-badge-placeholder[data-lang].active {
    display: inline-block;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .app-title {
        font-size: 2.2em;
    }
    .tagline {
        font-size: 1.2em;
    }
    .description {
        font-size: 1em;
    }
    .section-title {
        font-size: 1.8em;
    }
    .features-grid {
        grid-template-columns: 1fr; /* Stack on smaller screens */
        gap: 30px;
    }
    .main-nav {
        flex-direction: column;
    }
    .logo {
        margin-bottom: 15px;
    }
    .nav-links {
        flex-direction: column;
        align-items: center;
    }
    .nav-links a, .language-selector {
        margin-left: 0;
        margin-bottom: 10px;
    }
    .nav-links a:last-child, .language-selector:last-child {
        margin-bottom: 0;
    }
    .footer-content {
        flex-direction: column; /* Stack footer items vertically */
        align-items: center; /* Center items */
        text-align: center;
    }
    .footer-copyright {
        margin-right: 0; /* Remove right margin */
        margin-bottom: 15px; /* Add space below copyright */
    }
    .footer-links {
         justify-content: center; /* Center links when wrapped */
         margin-right: 0; /* Reset margin */
         margin-bottom: 15px; /* Space below links */
         order: 2; /* Keep order */
    }
    .footer-language-selector {
        margin-left: 0; /* Reset margin */
        margin-bottom: 0; /* No margin below language selector */
        order: 3; /* Keep order */
    }
    .footer-copyright {
        order: 1; /* Keep order */
    }
    .footer-links a, .footer-links span[data-lang], .footer-link-separator {
        margin-bottom: 8px; /* Add space below each link/separator when wrapped */
    }
}