/*
 * Holyfy "Liquid Glass" theme layer (iOS-inspired)
 * Loaded after every other stylesheet. It works mostly by redefining the theme tokens
 * (so existing components become translucent) plus two materials:
 *  - liquid edge: a 1px light-catching rim drawn only on the border (::after + mask), no fill gradient
 *  - frosted glass: backdrop blur for elements that float over content (nav, sidebar, modals, buttons)
 *
 * Blur note: backdrop-filter only sees what is behind it *inside the nearest ancestor that also has
 * a backdrop-filter*. So containers (nav, modal overlays) must NOT blur themselves directly, otherwise
 * their children (mobile menu, modal panels) show the page behind them un-blurred.
 */

/* ---------------------------------------------------------------- tokens */
:root[data-theme="dark"] {
    --bg-primary: #07090F;
    --bg-secondary: rgba(255, 255, 255, 0.05);
    --bg-tertiary: rgba(255, 255, 255, 0.08);
    --bg-elevated: rgba(30, 34, 45, 0.88);
    --border: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.12);

    --glass-bg: rgba(22, 25, 34, 0.72);
    --glass-bg-strong: rgba(20, 23, 31, 0.86);
    --glass-blur: blur(24px) saturate(170%);
    --rim-strong: rgba(255, 255, 255, 0.50);
    --rim-mid: rgba(255, 255, 255, 0.18);
    --rim-soft: rgba(255, 255, 255, 0.04);
    --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    --surface-solid: #151821;
    --ambient-1: rgba(212, 175, 55, 0.20);
    --ambient-2: rgba(94, 92, 230, 0.20);
    --ambient-3: rgba(48, 176, 199, 0.12);
    --scrollbar-track: transparent;
}

:root[data-theme="light"] {
    --bg-primary: #F2F2F7;
    --bg-secondary: rgba(255, 255, 255, 0.60);
    --bg-tertiary: rgba(120, 120, 128, 0.10);
    --bg-elevated: rgba(255, 255, 255, 0.90);
    --border: rgba(60, 60, 67, 0.10);
    --border-light: rgba(60, 60, 67, 0.07);

    --glass-bg: rgba(250, 250, 252, 0.74);
    --glass-bg-strong: rgba(252, 252, 254, 0.88);
    --glass-blur: blur(24px) saturate(180%);
    --rim-strong: rgba(255, 255, 255, 1);
    --rim-mid: rgba(255, 255, 255, 0.75);
    --rim-soft: rgba(255, 255, 255, 0.25);
    --glass-shadow: 0 12px 32px rgba(31, 38, 64, 0.12);
    --surface-solid: #FFFFFF;
    --ambient-1: rgba(236, 196, 90, 0.30);
    --ambient-2: rgba(175, 160, 255, 0.28);
    --ambient-3: rgba(120, 200, 235, 0.24);
    --scrollbar-track: transparent;
}

/* ---------------------------------------------------------------- ambient background */
html {
    background-color: var(--bg-primary);
}

body {
    background-color: transparent !important;
}

body::before {
    content: '';
    position: fixed;
    inset: -10vmax;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40vmax 40vmax at 12% 8%, var(--ambient-1), transparent 70%),
        radial-gradient(45vmax 45vmax at 92% 30%, var(--ambient-2), transparent 70%),
        radial-gradient(50vmax 50vmax at 30% 100%, var(--ambient-3), transparent 70%);
    animation: ambient-drift 40s ease-in-out infinite alternate;
}

@keyframes ambient-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-3vmax, 2vmax, 0) scale(1.06); }
}

/* Page containers that painted an opaque background over everything */
.bible-content,
.admin-content,
footer {
    background-color: transparent !important;
}

footer {
    border-color: var(--border) !important;
}

/* ---------------------------------------------------------------- shapes (iOS radii) */
.rounded-lg { border-radius: 14px; }
.rounded-xl { border-radius: 18px; }
.rounded-2xl { border-radius: 24px; }

/* ---------------------------------------------------------------- liquid edge (rim only) */
/* Elements that need a positioning context for the rim (the rest are already fixed/absolute/sticky) */
.hero-card,
.install-bar,
.gospel-row,
.card,
.character-card,
.sermon-card,
.section,
.division-header,
.testament-header,
.era-header,
.note-card,
.story-chapter,
.info-item,
.lesson-item,
.outline-item,
.point-item,
.verse-block,
.character-item,
.book-reference,
.estimation-box,
.summary-box,
.email-template,
.reset-link-box,
.verse-box,
.modal-content,
.floating-btn,
.chapter-nav-link,
.chapter-action,
.popup-button {
    position: relative;
}

.tile::after,
.hero-card::after,
.install-bar::after,
.gospel-row::after,
.card::after,
.book-card::after,
.character-card::after,
.sermon-card::after,
.feature-card::after,
.feature-card-modern::after,
.pricing-card::after,
.section::after,
.division-header::after,
.testament-header::after,
.era-header::after,
.note-card::after,
.story-chapter::after,
.info-item::after,
.lesson-item::after,
.outline-item::after,
.point-item::after,
.verse-block::after,
.character-item::after,
.book-reference::after,
.estimation-box::after,
.summary-box::after,
.email-template::after,
.reset-link-box::after,
.verse-box::after,
nav::after,
.mobile-menu::after,
.modal-content::after,
.popup-card::after,
#iosInstallModal > div::after,
.color-picker::after,
.bible-toast::after,
.floating-btn::after,
.bible-mobile-toggle::after,
.chapter-nav-link::after,
.chapter-action::after,
.popup-button::after,
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    /* Light catches the top-left edge strongly, fades along the sides, returns softly at the bottom-right */
    background: linear-gradient(150deg,
        var(--rim-strong) 0%,
        var(--rim-mid) 18%,
        var(--rim-soft) 42%,
        var(--rim-soft) 62%,
        var(--rim-mid) 88%,
        var(--rim-strong) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* The nav is a full-width bar: only its bottom edge should catch light */
nav::after {
    padding: 0 0 1px 0;
    border-radius: 0;
    background: linear-gradient(90deg, var(--rim-soft), var(--rim-mid) 50%, var(--rim-soft));
}

/* ---------------------------------------------------------------- surfaces (translucent, no blur) */
.card,
.book-card,
.character-card,
.sermon-card,
.feature-card,
.feature-card-modern,
.pricing-card,
.section,
.division-header,
.testament-header,
.era-header,
.search-box,
.note-card,
.story-chapter,
.info-item,
.lesson-item,
.outline-item,
.point-item,
.verse-block,
.character-item,
.book-reference,
.estimation-box,
.summary-box,
.email-template,
.reset-link-box,
.verse-box {
    border: 1px solid var(--border) !important;
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
}

.card:hover,
.book-card:hover,
.character-card:hover,
.sermon-card:hover,
.feature-card:hover,
.feature-card-modern:hover {
    box-shadow: var(--glass-shadow);
}

/* ---------------------------------------------------------------- frosted glass (over content) */
/* Nav: blur lives on a layer behind its content, so the nav is not a backdrop root for the mobile menu */
nav {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

nav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

.mobile-menu,
.bible-sidebar,
.admin-sidebar,
.modal-content,
.popup-card,
.color-picker,
.bible-toast,
#iosInstallModal > div {
    background-color: var(--glass-bg-strong) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-color: transparent !important;
    box-shadow: var(--glass-shadow);
}

.public-header {
    background-color: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

.mobile-menu {
    border-radius: 20px;
}

.user-menu-button {
    background-color: var(--glass-bg);
    border: 1px solid var(--border);
}

.bible-sidebar,
.admin-sidebar {
    border-right: 1px solid var(--border) !important;
    box-shadow: none;
}

.modal-content,
.popup-card {
    border-radius: 28px !important;
}

/* Overlays dim the page but must not blur themselves: their panel does the blurring (see note on top) */
.modal,
.response-modal,
#dailyPlanPopup,
#iosInstallModal {
    background-color: rgba(0, 0, 0, 0.45) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* The sidebar overlay is a sibling of the sidebar, so it can blur the reading area behind it */
.bible-overlay,
.admin-overlay {
    background-color: rgba(0, 0, 0, 0.30) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.bible-toast {
    border-radius: 999px;
    border-left-width: 0 !important;
    padding: 0.75rem 1.5rem;
}

.color-picker {
    border-radius: 999px;
    padding: 0.5rem 0.625rem;
}

/* ---------------------------------------------------------------- controls */
.chapter-nav-link,
.floating-btn,
.bible-mobile-toggle {
    background-color: var(--glass-bg) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid transparent !important;
    box-shadow: var(--shadow-md);
    color: var(--text-primary) !important;
}

.chapter-nav-link {
    border-radius: 999px;
}

.chapter-select {
    border-radius: 999px;
}

.floating-btn,
.bible-mobile-toggle {
    color: var(--accent) !important;
}

/* Tinted (colored) buttons keep their color; the liquid rim gives them the glass edge */
.btn-primary,
.chapter-action,
.popup-button,
.cta-button {
    background-image: none;
    border: 1px solid transparent;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.btn-primary,
.cta-button {
    border-radius: 999px;
}

.chapter-action,
.popup-button {
    border-radius: 16px;
}

.chapter-action {
    gap: 0.45rem;
}

.btn-secondary {
    border-radius: 999px;
    background-color: var(--glass-bg);
    border-color: var(--border);
}

/* Springy press feedback, like iOS */
button,
.btn-primary,
.btn-secondary,
.chapter-action,
.chapter-nav-link,
.floating-btn,
.book-item,
a.card {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

button:active,
.btn-primary:active,
.btn-secondary:active,
.chapter-action:active,
.chapter-nav-link:active,
.floating-btn:active,
.book-item:active {
    transform: scale(0.96);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border) !important;
    border-radius: 14px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px var(--accent-glow);
}

select option {
    background-color: var(--surface-solid);
    color: var(--text-primary);
}

/* ---------------------------------------------------------------- Bible reader details */
.book-item {
    border-radius: 12px;
}

.book-item.current {
    box-shadow: 0 4px 14px var(--accent-glow);
}

.radial-progress::before {
    background-color: var(--surface-solid);
}

.verse {
    border-radius: 14px;
}

.verse.selected {
    background-color: var(--accent-glow);
}

.note-icon {
    border-radius: 999px;
}

/* ---------------------------------------------------------------- mobile & accessibility */
@media (max-width: 768px) {
    :root[data-theme="dark"],
    :root[data-theme="light"] {
        --glass-blur: blur(18px) saturate(170%);
    }

    .bible-sidebar {
        border-radius: 0 24px 24px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
    button:active, .btn-primary:active, .chapter-action:active, .floating-btn:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
    :root[data-theme="dark"] { --bg-secondary: #151821; --bg-tertiary: #1D212C; --glass-bg: #151821; --glass-bg-strong: #151821; }
    :root[data-theme="light"] { --bg-secondary: #FFFFFF; --bg-tertiary: #E9E9EE; --glass-bg: #FFFFFF; --glass-bg-strong: #FFFFFF; }
    body::before { display: none; }
}