/* === index stylesheet (Enhanced for Feel & Fluidity) === */

:root {
    /* --- FONTS --- */
    --font-serif: "Merriweather", "Book Antiqua", Palatino, Georgia, serif;
    --font-sans: "Roboto", system-ui, -apple-system, sans-serif;
    --font-display: "Montserrat", var(--font-sans);

    /* --- SPACING & RADII --- */
    --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;

    /* --- TRANSITIONS (REFINED) --- */
    /* A more elegant ease-in-out for primary animations */
    --transition-base: 0.35s cubic-bezier(0.65, 0, 0.35, 1);
    --transition-fast: 0.2s cubic-bezier(0.65, 0, 0.35, 1);

    /* --- SHADOWS --- */
    --shadow-sm: 0 2px 8px hsla(0, 0%, 0%, 0.07);
    --shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.1), 0 1px 3px hsla(0, 0%, 0%, 0.05);
    --shadow-lg: 0 15px 35px hsla(0, 0%, 0%, 0.1), 0 5px 15px hsla(0, 0%, 0%, 0.07);
    --shadow-interactive: 0 6px 20px hsla(0, 0%, 0%, 0.12); /* NEW: For lifting interactive elements */


    /* --- COLORS (Light Theme is Default) --- */
    --color-bg-start: hsl(35, 70%, 90%);
    --color-bg-end: hsl(200, 70%, 90%);
    --color-surface: hsla(0, 0%, 100%, 0.65); /* Increased transparency for better glassmorphism */
    --color-surface-solid: hsl(0, 0%, 100%);
    --color-text: #3D352E;
    --color-text-muted: #8A817C;
    /* NEW: Harmonious borders derived from text color */
    --color-border: color-mix(in srgb, var(--color-text) 8%, transparent);
    --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: color-mix(in srgb, var(--color-text) 5%, transparent);
    /* NEW: Centralized focus ring variable */
    --focus-ring: 0 0 0 4px hsla(174, 53%, 25%, 0.4);
}

.dark-mode {
    --color-bg-start: hsl(220, 40%, 10%);
    --color-bg-end: hsl(270, 40%, 10%);
    --color-surface: hsla(220, 13%, 18%, 0.6); /* Increased transparency */
    --color-surface-solid: hsl(220, 13%, 18%);
    --color-text: #F0EBE5;
    --color-text-muted: #918B85;
    --color-border: color-mix(in srgb, var(--color-text) 10%, transparent);
    --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: color-mix(in srgb, var(--color-text) 8%, transparent);
    --focus-ring: 0 0 0 4px hsla(174, 51%, 56%, 0.4);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* NEW: Progressive enhancement for better paragraph wrapping */
    text-wrap: pretty;
}

.ethereal-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.ethereal-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
      /* Top-left glow (A nice complementary purple) */
      radial-gradient(1200px 600px at 10% -10%, hsla(247, 100%, 71%, 0.18), transparent 60%),
      /* Top-right glow (Derived from your primary color) */
      radial-gradient(900px 500px at 90% 10%, color-mix(in srgb, var(--color-primary) 20%, transparent), transparent 60%),
      /* Base linear gradient (Using your existing bg colors) */
      linear-gradient(180deg, var(--color-bg-start), var(--color-bg-end));
}
    
@keyframes ethereal-breathing {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(1.08); opacity: 1; }
}

.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);
    position: sticky; top: 0;
    background-color: var(--color-surface);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); /* Increased blur for depth */
    border-bottom: 1px solid var(--color-border);
    z-index: 100; flex-wrap: wrap;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.site-logo { height: 44px; flex-shrink: 0; display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--color-text); transition: opacity var(--transition-fast), transform var(--transition-fast); }
.site-logo:hover { opacity: 0.8; transform: scale(1.02); }
.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-inline-start: 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; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); transition: color var(--transition-fast), background-color var(--transition-fast); }
.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); font-weight: 600; }
.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); }

/* --- Dropdown CSS (IMPROVED for Feel) --- */
.site-nav-links .has-dropdown { position: relative; }
.dropdown-menu {
    list-style: none;
    background-color: var(--color-surface-solid);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    min-width: 220px;
    z-index: 101;
    box-shadow: var(--shadow-lg);
    position: absolute;
    top: 100%; right: 0;
    /* FEEL: Animate appearance with scale for a "growing" effect */
    opacity: 0;
    visibility: hidden;
    transform-origin: top right;
    transform: translateY(8px) scale(0.98);
    transition: transform var(--transition-base), opacity var(--transition-fast), visibility 0s var(--transition-base);
}
.site-nav-links > li.has-dropdown:hover > .dropdown-menu,
.site-nav-links > li.has-dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px) scale(1);
    transition-delay: 0s;
}
.dropdown-toggle { cursor: default; }
.dropdown-toggle::after { content: '▾'; font-size: 0.8em; margin-inline-start: var(--space-sm); display: inline-block; opacity: 0.6; }
.dropdown-menu a { display: block; width: 100%; padding: var(--space-sm) var(--space-md); white-space: nowrap; border-radius: var(--radius-md); color: var(--color-text-muted); }
.dropdown-menu a:hover { background-color: var(--color-surface-hover); color: var(--color-text); }
.site-nav-links li.has-dropdown.active-parent > a { background-color: var(--color-primary); color: var(--color-primary-contrast); }

/* --- Language Selector --- */
.language-selector { position: relative; }
.language-selector-trigger { display: flex; align-items: center; gap: var(--space-sm); background: none; border: none; font-family: inherit; font-size: 1rem; color: var(--color-text-muted); cursor: pointer; padding: var(--space-sm); border-radius: var(--radius-md); transition: color var(--transition-fast), background-color var(--transition-fast); }
.language-selector-trigger:hover { background-color: var(--color-surface-hover); color: var(--color-text); }
.language-selector-trigger .icon { font-size: 1.2rem; }
.language-selector-trigger .lang-text { font-weight: 500; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.language-select-dropdown {
    position: absolute; right: 0; top: calc(100% + 4px);
    background-color: var(--color-surface-solid);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    width: 250px;
    box-shadow: var(--shadow-lg);
    z-index: 101;
    /* FEEL: Same animation as dropdown */
    visibility: hidden; opacity: 0; transform: translateY(8px) scale(0.98);
    transform-origin: top right;
    transition: transform var(--transition-base), opacity var(--transition-fast);
}
.language-selector.is-open .language-select-dropdown { visibility: visible; opacity: 1; transform: translateY(0) scale(1); }
.language-select-dropdown-list { list-style: none; max-height: 300px; overflow-y: auto; }
.language-select-dropdown-list a { display: block; padding: var(--space-sm) var(--space-md); text-decoration: none; color: var(--color-text); border-radius: var(--radius-md); transition: background-color var(--transition-fast); }
.language-select-dropdown-list a:hover, .language-select-dropdown-list a.selected { background-color: var(--color-surface-hover); }
.language-select-dropdown-list a.selected { font-weight: 700; color: var(--color-primary); }

/* --- Main Content & Verse Card --- */
.page-main { flex-grow: 1; display: flex; flex-direction: column; align-items: center; padding: var(--space-xl) var(--space-md); gap: var(--space-lg); }
.lectern-card {
    position: relative;
    display: flex; flex-direction: column; width: 100%; max-width: 900px;
    background-color: var(--color-surface);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.verse-content { flex-grow: 1; padding: var(--space-xl); display: flex; flex-direction: column; justify-content: center; text-align: center; min-height: 200px; transition: opacity var(--transition-fast); }
.verse-reference { font-size: 1.1rem; font-family: var(--font-display); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-lg); letter-spacing: 0.05em; text-transform: uppercase; text-wrap: balance; }
.verse-reference-link { color: inherit; text-decoration: none; display: inline-block; padding-inline-end: 28px; position: relative; transition: color var(--transition-fast); }
.verse-reference-link:hover { color: var(--color-primary); }
.verse-reference-link-icon { 
    position: absolute; 
    top: 50%; 
    right: 0;
    transform: translateY(-50%); /* <-- Add this line */
    opacity: 0.4; 
    transition: opacity var(--transition-fast), transform var(--transition-fast); 
}
.verse-reference-link:hover .verse-reference-link-icon { opacity: 1; }
.verse-text { font-family: var(--font-serif); line-height: 1.85; margin: 0 auto; transition: font-size var(--transition-base), line-height var(--transition-base); }

/* --- FONT SIZING LOGIC --- */
html[data-font-size="small"] .verse-text { font-size: 1.0rem; }
html[data-font-size="default"] .verse-text { font-size: 1.25rem; }
html[data-font-size="large"] .verse-text { font-size: 1.5rem; }
.text--red-letter { color: var(--color-red-letter); }

/* --- Search Module --- */
.main-search-container { width: 100%; max-width: 750px; position: relative; opacity: 0.6; transition: opacity var(--transition-base); }
.main-search-container:hover, .main-search-container:focus-within { opacity: 1; }
.passage-search-form { display: flex; gap: var(--space-sm); align-items: center; }
.passage-search-input-wrapper { position: relative; flex-grow: 1; }
.passage-search-input { width: 100%; height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: 1rem; background-color: var(--color-surface-solid); color: var(--color-text); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
@media (min-width: 768px) { .passage-search-input { font-size: 1.25rem; } }
.passage-search-input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.passage-search-submit { height: 52px; flex-shrink: 0; width: 52px; 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-fast), transform var(--transition-fast), box-shadow var(--transition-base); }
.passage-search-submit:hover { background-color: var(--color-primary-hover); transform: scale(1.05); box-shadow: var(--shadow-md); }
.passage-search-suggestions { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; inset-inline-end: 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: var(--shadow-lg); }
.passage-search-suggestions li { padding: var(--space-sm) var(--space-md); cursor: pointer; transition: background-color var(--transition-fast); 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; position: absolute; top: 105%; left: 0; width: 100%; text-align: center; display: none; }

/* --- Interactions & Toolbar --- */
.verse-interactions { padding: var(--space-md) var(--space-lg); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-md); width: 100%; }
.reaction-button { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); cursor: pointer; border: 1px solid var(--color-border); background-color: var(--color-surface-solid); transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.reaction-button.active { background-color: hsla(140, 50%, 50%, 0.2); border-color: hsla(140, 50%, 50%, 0.4); }
.reaction-button__icon { filter: grayscale(0.5); opacity: 0.7; transition: filter var(--transition-fast), opacity var(--transition-fast); font-size: 1.2rem; }
.reaction-button:hover .reaction-button__icon, .reaction-button.active .reaction-button__icon { filter: grayscale(0); opacity: 1; }
.reaction-button__count { font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); }
.verse-toolbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: var(--space-md); border-top: 1px solid var(--color-border); flex-shrink: 0; gap: var(--space-sm); }
.tool-button, .next-verse-button, .auto-generate-button { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); border: none; background-color: transparent; cursor: pointer; transition: all var(--transition-fast); }
.tool-button { width: 44px; height: 44px; color: var(--color-text-muted); font-size: 1.2rem; flex-shrink: 0; }
.tool-button:hover:not([disabled]), .tool-button.is-favorite { background-color: var(--color-surface-hover); color: var(--color-text); transform: scale(1.1); }
.tool-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tool-button:disabled { opacity: 0.5; cursor: not-allowed; }
.next-verse-button, .auto-generate-button { gap: var(--space-sm); height: 52px; padding: 0 var(--space-lg); font-size: 1rem; font-weight: 700; text-decoration: none; flex-shrink: 0; }
.next-verse-button { background-color: var(--color-primary); color: var(--color-primary-contrast); }
.next-verse-button:hover { background-color: var(--color-primary-hover); transform: scale(1.03); box-shadow: var(--shadow-md); }
.auto-generate-button { background-color: var(--color-surface-solid); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.auto-generate-button:hover { background-color: var(--color-surface-hover); border-color: color-mix(in srgb, var(--color-border) 50%, var(--color-text)); }
.tool-button-group { display: flex; align-items: center; gap: var(--space-sm); }

/* --- Content Modules --- */
.content-modules-container { padding: var(--space-xl) var(--space-md); display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); width: 100%; }
.content-module { background-color: var(--color-surface); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: var(--space-lg); width: 100%; max-width: 750px; }
.content-module-title { font-size: 1rem; font-family: var(--font-display); font-weight: 700; color: var(--color-text-muted); margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); text-align: center; text-transform: uppercase; letter-spacing: 0.05em; }
.recommended-articles-list, .randomness-details-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.recommended-article-link { display: block; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); transition: background-color var(--transition-fast); font-size: 0.9rem; }
.recommended-article-link:hover { background-color: var(--color-surface-hover); }
.history-list { display: flex; flex-direction: column; gap: var(--space-md); }
.history-item-link { display: block; padding: var(--space-md); background-color: var(--color-surface-hover); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); font-family: var(--font-serif); font-size: 0.95rem; transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
.history-item-link:hover { background-color: var(--color-surface-hover); box-shadow: var(--shadow-sm); }
.history-item-ref { display: block; font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-sm); font-size: 0.85rem; font-family: var(--font-sans); }
.history-item-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; }
.history-placeholder, .randomness-info-p { text-align: center; color: var(--color-text-muted); padding: var(--space-md) 0; }
.randomness-info-p { text-align: left; }
.randomness-info-p a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.randomness-info-p a:hover { color: var(--color-primary-hover); text-decoration: underline; }
.randomness-details-list { list-style: none; padding-left: 0; }

/* --- 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-fast); }
.footer-links a:hover { color: var(--color-text); text-decoration: underline; }
.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: var(--shadow-lg); transition: bottom var(--transition-base), transform var(--transition-base); font-weight: 500; z-index: 1001; }
.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-fast), transform var(--transition-fast); }
.social-link-item-v2:hover .social-icon-v2 { opacity: 0.7; transform: scale(1.1) rotate(-5deg); }
.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; }

/* --- Search Explainer Link & Popup --- */
.search-explainer-container { position: relative; text-align: center; margin-top: var(--space-sm); max-width: 750px; width: 100%; }
.search-explainer-link { font-size: 0.85rem; color: var(--color-text-muted); text-decoration: none; border-bottom: 1px dotted var(--color-text-muted); cursor: pointer; transition: color var(--transition-fast), border-bottom-style var(--transition-fast); }
.search-explainer-link:hover { color: var(--color-primary); border-bottom-style: solid; }
.search-explainer-popup {
    position: absolute; top: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) scale(0.95);
    width: 95%; max-width: 450px;
    background-color: var(--color-surface-solid);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1001; text-align: left;
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.search-explainer-popup.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); }
.search-explainer-popup h3 { font-family: var(--font-display); font-size: 1.2rem; margin-top: 0; margin-bottom: var(--space-md); color: var(--color-text); }
.search-explainer-popup p { font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-lg); }
.search-explainer-popup ul { list-style: none; padding-left: 0; font-size: 0.9rem; }
.search-explainer-popup li { margin-bottom: var(--space-sm); color: var(--color-text-muted); }
.search-explainer-popup li strong { color: var(--color-text); font-family: monospace; background-color: var(--color-surface-hover); padding: 2px 6px; border-radius: 4px; margin-inline-end: var(--space-sm); }
.search-explainer-close-btn { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--color-text-muted); cursor: pointer; transition: color var(--transition-fast), transform var(--transition-fast); }
.search-explainer-close-btn:hover { color: var(--color-text); transform: rotate(90deg); }

/* --- PWA Install Banner --- */
.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-fast); }
.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); transform: scale(1.03); box-shadow: var(--shadow-sm); }
.pwa-dismiss-button { background-color: transparent; color: var(--color-text-muted); }
.pwa-dismiss-button:hover { background-color: var(--color-surface-hover); }

/* --- Other --- */
.lang-flag-mobile { display: none; font-size: 1.2rem; line-height: 1; }

/* --- AJAX Features --- */
.fa-spin { animation: fa-spin 1s infinite linear; }
@keyframes fa-spin { to { transform: rotate(360deg); } }
.passage-search-suggestions .live-suggestion-item { padding: var(--space-sm) var(--space-md); cursor: pointer; transition: background-color var(--transition-fast); border-radius: var(--radius-md); line-height: 1.4; }
.passage-search-suggestions .live-suggestion-item:hover,
.passage-search-suggestions .live-suggestion-item.is-highlighted { background-color: var(--color-surface-hover); color: var(--color-primary); }
.live-suggestion-item strong { display: block; font-family: var(--font-sans); font-size: 1rem; margin-bottom: var(--space-xs); }
.live-suggestion-item p { font-family: var(--font-serif); font-size: 0.9rem; opacity: 0.8; color: var(--color-text-muted); }

/* --- RESPONSIVE STYLES --- */

@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); }
}

@media (max-width: 820px) {
    .verse-toolbar { flex-direction: column; align-items: center; gap: var(--space-md); }
}

/* --- MOBILE STYLES (max-width: 768px) --- */
@media (max-width: 768px) {
    html { scroll-padding-top: 80px; }

    /* --- Mobile Font Sizes --- */
    .verse-text { line-height: 1.7; }
    html[data-font-size="small"] .verse-text { font-size: 0.85rem; }
    html[data-font-size="default"] .verse-text { font-size: 1.0rem; }
    html[data-font-size="large"] .verse-text { font-size: 1.25rem; }
    .verse-text.verse-text--long { font-size: 0.9rem; line-height: 1.5; }
    html[data-font-size="small"] .verse-text.verse-text--long { font-size: 0.8rem; }
    html[data-font-size="large"] .verse-text.verse-text--long { font-size: 1.0rem; }
    .verse-text.verse-text--very-long { font-size: 0.8rem; line-height: 1.45; }
    html[data-font-size="small"] .verse-text.verse-text--very-long { font-size: 0.75rem; }
    html[data-font-size="large"] .verse-text.verse-text--very-long { font-size: 0.9rem; }

    /* --- Other Mobile Styles --- */
    .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; }

    .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: var(--shadow-md); max-height: calc(100vh - 65px); overflow-y: auto; padding-bottom: var(--space-lg); }
    body.nav-open .site-nav { display: block; }
    .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); }

    /* --- Mobile Dropdown CSS --- */
    .dropdown-menu { display: block; position: static; border: none; box-shadow: none; padding: 0; margin-top: var(--space-sm); margin-inline-start: var(--space-md); background-color: transparent; min-width: unset; opacity: 1; visibility: visible; transform: none; transition: none; }
    .site-nav-links li.has-dropdown:hover > .dropdown-menu { transform: none; }
    .site-nav-links .has-dropdown { padding: 0; }
    .dropdown-toggle { font-weight: 700; color: var(--color-text); padding: var(--space-md) var(--space-lg); }
    .dropdown-toggle::after { display: none; }
    .site-nav-links li.has-dropdown:hover { background: none; }
    .dropdown-menu a { padding-inline-start: var(--space-lg); }

    .language-selector-trigger .lang-text { display: none; }
    .language-selector { position: static; }
    .language-select-dropdown { right: var(--space-md); left: auto; max-width: calc(100vw - (var(--space-md) * 2)); }
    .page-main { padding-top: var(--space-md); gap: var(--space-md); }
    .verse-content { padding: var(--space-lg) var(--space-md); }
    .verse-reference { margin-bottom: var(--space-md); }
    .content-modules-container { padding-left: 0; padding-right: 0; }
    .verse-interactions { gap: var(--space-md); justify-content: center; flex-wrap: wrap; overflow-x: hidden; padding: var(--space-md); max-width: 350px; }
    .reaction-button { flex-shrink: 0; padding: var(--space-xs) var(--space-sm); gap: var(--space-xs); }
    .reaction-button__icon { font-size: 1rem; }
    .reaction-button__count { font-size: 0.8rem; min-width: 1.5ch; text-align: left; }
    .lang-flag-mobile { display: inline; margin-inline-start: var(--space-xs); }
}