/* /_v2/css/style.css (Corrected for Desktop Search and Mobile Menu) */
:root { --font-serif: "Merriweather", "Book Antiqua", Palatino, Georgia, serif; --font-sans: "Roboto", system-ui, -apple-system, sans-serif; --font-display: "Montserrat", var(--font-sans); --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 48px; --space-xxl: 64px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; --transition-base: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.light-mode { --color-bg-start: hsl(35, 70%, 90%); --color-bg-end: hsl(200, 70%, 90%); --color-surface: hsla(0, 0%, 100%, 0.7); --color-surface-solid: hsl(0, 0%, 100%); --color-text: #3D352E; --color-text-muted: #8A817C; --color-border: hsla(0, 0%, 80%, 0.5); --color-primary: #1F635C; --color-primary-hover: #174A44; --color-primary-contrast: #FFFFFF; --color-red-letter: #A02C2C; --color-danger: #c53030; --color-danger-hover: #a52a2a; --color-surface-hover: hsla(0,0%,0%,0.05); }
.dark-mode { --color-bg-start: hsl(220, 40%, 10%); --color-bg-end: hsl(270, 40%, 10%); --color-surface: hsla(220, 13%, 18%, 0.5); --color-surface-solid: hsl(220, 13%, 18%); --color-text: #F0EBE5; --color-text-muted: #918B85; --color-border: hsla(220, 10%, 40%, 0.5); --color-primary: #50C4B7; --color-primary-hover: #73D1C7; --color-primary-contrast: #1A1D24; --color-red-letter: #ff8787; --color-danger: #e57373; --color-danger-hover: #c53030; --color-surface-hover: hsla(0,0%,100%,0.08); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font-sans); color: var(--color-text); min-height: 100vh; overflow-x: hidden; position: relative; }
.ethereal-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: opacity 0.5s; }
.ethereal-wrapper::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, var(--color-bg-start), var(--color-bg-end)); background-size: 200% 200%; will-change: background-position; }
.page-content { display: flex; flex-direction: column; min-height: 100vh; }

/* --- Header & Navigation --- */
.site-header { padding: var(--space-sm) var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-shrink: 0; position: sticky; top: 0; background-color: var(--color-surface); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); z-index: 100; flex-wrap: wrap; }
.site-logo { height: 44px; flex-shrink: 0; display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--color-text); }
.site-logo .logo-full { height: 100%; width: auto; object-fit: contain; }
.logo-light, .logo-dark { display: none; }
.light-mode .logo-light, .dark-mode .logo-dark { display: block; }
.logo-mobile-icon, .logo-mobile-text { display: none; }
.site-nav { display: flex; align-items: center; gap: var(--space-md); margin-left: auto; }
.site-nav-links { display: flex; list-style: none; gap: var(--space-sm); }
.site-nav-links a { text-decoration: none; color: var(--color-text-muted); font-weight: 500; font-family: var(--font-sans); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); transition: color var(--transition-base), background-color var(--transition-base); }
.site-nav-links a:hover { background-color: var(--color-surface-hover); color: var(--color-text); }
.site-nav-links a.active { background-color: var(--color-primary); color: var(--color-primary-contrast); }
.header-actions { display: flex; align-items: center; gap: var(--space-sm); }
.mobile-nav-toggle { display: none; background: none; border: none; color: var(--color-text); font-size: 1.5rem; cursor: pointer; z-index: 102; padding: var(--space-sm); }
.tool-button { width: 44px; height: 44px; color: var(--color-text-muted); font-size: 1.2rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); border: none; background-color: transparent; cursor: pointer; transition: all var(--transition-base); }
.tool-button:hover { background-color: var(--color-surface-hover); color: var(--color-text); }

/*
 * =========================================================================
 * === FIX: Consolidated and Corrected Search Styles =======================
 * =========================================================================
 */

/* --- Base Search Component Styles (used by desktop and mobile) --- */
.passage-search-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; list-style: none; margin: 0; padding: var(--space-sm); background-color: var(--color-surface-solid); border: 1px solid var(--color-border); border-radius: var(--radius-md); max-height: 200px; overflow-y: auto; z-index: 1000; box-shadow: 0 8px 30px hsla(0,0%,0%,0.1); }
.passage-search-suggestions li { padding: var(--space-sm) var(--space-md); cursor: pointer; transition: background-color 0.2s; border-radius: var(--radius-md); }
.passage-search-suggestions li:hover, .passage-search-suggestions li.is-highlighted { background-color: var(--color-surface-hover); color: var(--color-primary); }
.passage-search-error { color: var(--color-danger); font-size: 0.9rem; text-align: center; display: none; width: 100%; }

/* --- Desktop Nav Search Bar Styles --- */
.nav-search-desktop { position: relative; max-width: 280px; width: 100%; }
.nav-search-desktop .passage-search-form { position: relative; } /* Container for icon */
.nav-search-input {
    width: 100%;
    height: 40px;
    padding: 0 15px 0 40px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface-solid);
    color: var(--color-text);
    transition: all var(--transition-base);
    font-size: 0.9rem;
}
.nav-search-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
    outline: none;
}
.nav-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; z-index: 1; }
.nav-search-desktop .passage-search-error { position: absolute; top: 105%; left: 0; right: 0; }

/* --- Mobile Search Modal --- */
.mobile-search-toggle { display: none; }
.search-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: hsla(0, 0%, 0%, 0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); }
.search-modal-overlay.is-visible { opacity: 1; visibility: visible; }
.search-modal-content { position: relative; width: 90%; max-width: 500px; background-color: var(--color-surface-solid); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: 0 10px 40px hsla(0,0%,0%,0.2); transform: translateY(-20px); transition: transform var(--transition-base); }
.search-modal-overlay.is-visible .search-modal-content { transform: translateY(0); }
.search-modal-content h3 { font-family: var(--font-display); text-align: center; color: var(--color-text-muted); margin-bottom: var(--space-md); }
.search-modal-close { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 32px; height: 32px; border: none; background: transparent; font-size: 1.5rem; color: var(--color-text-muted); cursor: pointer; transition: color var(--transition-base); }
.search-modal-close:hover { color: var(--color-text); }
.search-modal-content .passage-search-form { display: flex; gap: var(--space-sm); align-items: center; }
.search-modal-content .passage-search-input-wrapper { position: relative; flex-grow: 1; }
.search-modal-content .passage-search-input { height: 52px; padding: 0 var(--space-md); border-radius: var(--radius-full); font-size: 16px; border: 1px solid var(--color-border); background-color: var(--color-surface-solid); color: var(--color-text); transition: all var(--transition-base); }
.search-modal-content .passage-search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent); outline: none; }
.search-modal-content .passage-search-submit { height: 52px; width: 52px; flex-shrink: 0; border-radius: var(--radius-full); border: none; background-color: var(--color-primary); color: var(--color-primary-contrast); font-size: 1.2rem; cursor: pointer; transition: background-color var(--transition-base); }
.search-modal-content .passage-search-submit:hover { background-color: var(--color-primary-hover); }
.search-modal-content .passage-search-error { margin-top: var(--space-sm); }

/* --- Main Content & Static Page Styling --- */
.page-main { flex-grow: 1; display: flex; flex-direction: column; align-items: center; padding: var(--space-xl) var(--space-md); gap: var(--space-lg); }
.static-page-container { background-color: var(--color-surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: var(--space-lg) var(--space-xl); width: 100%; max-width: 800px; }
.static-page-container h1, .static-page-container h2, .static-page-container h3 { font-family: var(--font-display); color: var(--color-text); margin-bottom: var(--space-md); }
.static-page-container h1 { font-size: 2.25rem; text-align: center; margin-bottom: var(--space-sm); }
.static-page-container .page-subtitle { font-size: 1.1rem; text-align: center; color: var(--color-text-muted); margin-bottom: var(--space-xl); font-style: italic; }
.static-page-container h2 { font-size: 1.75rem; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); margin-top: var(--space-xl); }
.static-page-container p, .static-page-container li { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.8; margin-bottom: var(--space-md); }
.static-page-container a { color: var(--color-primary); text-decoration: none; }
.static-page-container a:hover { text-decoration: underline; }
.static-page-container ul { list-style-position: inside; padding-left: var(--space-md); }
.static-page-container blockquote { border-left: 4px solid var(--color-primary); padding-left: var(--space-lg); margin: var(--space-lg) 0; font-style: italic; color: var(--color-text-muted); }
.static-page-container blockquote p { font-size: 1.2rem; }

/* --- Footer & Utils --- */
.site-footer { margin-top: auto; flex-shrink: 0; padding: var(--space-lg); font-size: 0.9rem; color: var(--color-text-muted); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-md); }
.footer-copyright, .footer-links { text-align: center; width: 100%; }
.footer-links a { color: var(--color-text-muted); text-decoration: none; margin: 0 var(--space-sm); transition: color var(--transition-base); }
.footer-links a:hover { color: var(--color-text); }
.toast { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); padding: var(--space-md) var(--space-lg); background-color: var(--color-surface-solid); color: var(--color-text); border-radius: var(--radius-full); box-shadow: 0 8px 30px hsla(0,0%,0%,0.15); transition: bottom var(--transition-base); font-weight: 500; z-index: 2001; }
.toast.show { bottom: var(--space-lg); }
.footer-extra-content { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-xl); width: 100%; margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); }
.about-footer-v2, .social-links-v2 { display: flex; align-items: center; gap: var(--space-md); }
.about-logo-v2 { height: 40px; width: auto; object-fit: contain; }
.social-links-v2 .follow-prompt-v2 { font-weight: 500; }
.social-link-item-v2 { display: flex; }
.social-icon-v2 { height: 24px; width: 24px; transition: opacity var(--transition-base); }
.social-link-item-v2:hover .social-icon-v2 { opacity: 0.7; }
.social-icon-x-light, .social-icon-x-dark { display: none; }
.light-mode .social-icon-x-light { display: inline; }
.dark-mode .social-icon-x-dark { display: inline; }

/* --- PWA Install Banner Styles --- */
.pwa-install-banner { display: none; position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--color-surface-solid); color: var(--color-text); padding: var(--space-md); z-index: 2000; box-shadow: 0 -4px 15px hsla(0,0%,0%,0.1); border-top: 1px solid var(--color-border); flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-md); text-align: center; }
.pwa-install-button, .pwa-dismiss-button { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); border: 1px solid var(--color-border); font-weight: 600; cursor: pointer; transition: all var(--transition-base); }
.pwa-install-button { background-color: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.pwa-install-button:hover { background-color: var(--color-primary-hover); }
.pwa-dismiss-button { background-color: transparent; color: var(--color-text-muted); }
.pwa-dismiss-button:hover { background-color: var(--color-surface-hover); }

@media (min-width: 769px) {
    .footer-copyright, .footer-links { width: auto; }
    .footer-copyright { text-align: left; }
    .footer-links { text-align: right; }
    .footer-links a { margin: 0 0 0 var(--space-md); }
    .pwa-install-banner { justify-content: space-between; text-align: left; padding: var(--space-md) var(--space-lg); }
    .mobile-search-toggle { display: none; }
}

/* --- MOBILE STYLES --- */
@media (max-width: 768px) {
    .static-page-container { padding: var(--space-lg) var(--space-md); }
    .static-page-container h1 { font-size: 1.75rem; }
    .static-page-container p, .static-page-container li { font-size: 1rem; }

    .site-header { gap: var(--space-sm); }
    .mobile-nav-toggle { display: block; }
    .site-logo .logo-full { display: none; }
    .logo-mobile-icon, .logo-mobile-text { display: block; }
    .logo-mobile-icon { height: 32px; width: auto; }
    .logo-mobile-text { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 1px; }

    /* Reverted to the original dropdown menu style from index.php */
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        order: 3;
        width: 100%;
        background-color: var(--color-surface-solid);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 4px 10px hsla(0,0%,0%,0.1);
        max-height: calc(100vh - 65px); /* Adjust 65px if header height changes */
        overflow-y: auto;
        padding-bottom: var(--space-lg);
    }
    body.nav-open .site-nav {
        display: block;
    }
    .nav-overlay {
        display: none;
    }
    .site-nav-links {
        flex-direction: column;
        width: 100%;
        padding: var(--space-md);
        gap: var(--space-sm);
    }
    .site-nav-links a {
        display: block;
        text-align: left;
        width: 100%;
        padding: var(--space-md) var(--space-lg);
        border-radius: var(--radius-md);
    }
    .nav-search-desktop { display: none; }
    .mobile-search-toggle { display: block; }
}