:root {
    --primary: #1e3a5f;
    --primary-dark: #152c4a;
    --primary-light: #e8eef6;
    --accent: #c8963e;
    --accent-dark: #a87a2f;
    --accent-light: #fdf4e3;
    --bg: #faf8f5;
    --card-bg: #ffffff;
    --text: #2d3748;
    --text-light: #5a6577;
    --success: #2d8659;
    --danger: #c53030;
    --border-warm: #e8e4de;
}

body {
    font-family: "DM Sans", sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg);
    color: var(--text);
}

body > .section {
    flex-grow: 1;
}

/* Fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.section > .container {
    animation: fadeIn 0.4s ease both;
}

.section > .container.is-loaded {
    animation: fadeIn 0.4s ease both;
}

/* Navbar */
.navbar.is-primary {
    background-color: var(--primary);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.15);
}
.navbar.is-primary .navbar-item,
.navbar.is-primary .navbar-link {
    color: #fff;
    transition: background-color 0.2s ease;
}
.navbar.is-primary .navbar-item:hover,
.navbar.is-primary .navbar-link:hover {
    background-color: var(--primary-dark);
    color: #fff;
}
.navbar.is-primary .navbar-burger span {
    background-color: #fff;
}
.navbar.is-primary .navbar-dropdown .navbar-item {
    color: #4a4a4a;
}
.navbar.is-primary .navbar-dropdown .navbar-item:hover {
    background-color: var(--primary-light);
    color: var(--primary);
}
.navbar.is-primary .navbar-menu.is-active {
    background-color: var(--primary);
}
.navbar.is-primary .navbar-menu.is-active .navbar-item,
.navbar.is-primary .navbar-menu.is-active .navbar-link {
    color: #fff;
}
.navbar.is-primary .navbar-menu.is-active .navbar-item:hover,
.navbar.is-primary .navbar-menu.is-active .navbar-link:hover {
    background-color: var(--primary-dark);
    color: #fff;
}
.navbar.is-primary .navbar-menu.is-active .navbar-dropdown {
    background-color: var(--primary-dark);
}
.navbar.is-primary .navbar-menu.is-active .navbar-dropdown .navbar-item {
    color: #fff;
}
.navbar.is-primary .navbar-menu.is-active .navbar-dropdown .navbar-item:hover {
    background-color: var(--primary);
}
.navbar.is-primary .navbar-menu.is-active .navbar-divider {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Logo */
.brand-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
}
.brand-logo-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(180deg, #2a4d73, var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}
.brand-logo-icon i {
    font-size: 2rem;
    color: #fff;
}
.brand-logo-title {
    font-family: "DM Serif Display", serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--primary);
}
.brand-logo-subtitle {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Cards e boxes */
.auth-card {
    background: var(--card-bg);
    border-radius: 1.25rem;
    padding: 2rem;
    border: 1px solid var(--border-warm);
    box-shadow: 0 2px 16px rgba(30, 58, 95, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    max-width: 400px;
    margin: 0 auto;
}

/* Home menu options */
.menu-option {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-warm);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    margin-bottom: 0.75rem;
    text-decoration: none;
    color: var(--text);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.menu-option:hover {
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.1);
    transform: translateY(-1px);
    color: var(--text);
    border-left: 3px solid var(--accent);
}
.menu-option .icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}
.menu-option .icon.is-blue { background-color: var(--primary-light); color: var(--primary); }
.menu-option .icon.is-green { background-color: #d6f0e2; color: var(--success); }
.menu-option .icon.is-purple { background-color: #ede9fe; color: #7c3aed; }
.menu-option .icon.is-amber { background-color: var(--accent-light); color: var(--accent-dark); }
.menu-option .icon.is-red { background-color: #fee2e2; color: var(--danger); }
.menu-option .menu-option-text {
    flex: 1;
}
.menu-option .menu-option-text strong {
    display: block;
    font-size: 1rem;
}
.menu-option .menu-option-text span {
    font-size: 0.85rem;
    color: var(--text-light);
}
.menu-option .chevron {
    color: #9ca3af;
    margin-left: 0.5rem;
}

/* Test question */
.question-card {
    background: var(--card-bg);
    border-radius: 1.25rem;
    padding: 1.5rem;
    border: 1px solid var(--border-warm);
    box-shadow: 0 2px 16px rgba(30, 58, 95, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    max-width: 600px;
    margin: 0 auto;
}

.answer-option {
    display: block;
    cursor: pointer;
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    border: 2px solid var(--border-warm);
    transition: all 0.2s ease;
    background: var(--card-bg);
}
.answer-option:hover {
    border-color: var(--primary);
}
.answer-option:active {
    transform: scale(0.98);
    border-color: var(--primary);
}
.answer-option.is-selected {
    border-color: var(--primary);
    background-color: var(--primary-light);
}
.answer-option input[type="radio"] {
    margin-right: 0.5rem;
    accent-color: var(--primary);
}

/* Answer color variants */
.answer-option[data-value="0"] { border-left: 4px solid #d9736b; }
.answer-option[data-value="1"] { border-left: 4px solid var(--accent); }
.answer-option[data-value="2"] { border-left: 4px solid #5b8db8; }
.answer-option[data-value="3"] { border-left: 4px solid #4aa87a; }

/* Progress bar */
progress.progress.is-brand {
    border-radius: 999px;
    height: 0.5rem;
}
progress.progress.is-brand::-webkit-progress-value { background-color: var(--accent); }
progress.progress.is-brand::-moz-progress-bar { background-color: var(--accent); }

/* Result bars */
.result-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-warm);
}
.result-item:last-child {
    border-bottom: none;
}
.result-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    margin-right: 0.75rem;
    flex-shrink: 0;
}
.result-rank.is-top { background: var(--primary); color: #fff; }
.result-rank.is-mid { background: var(--primary-light); color: var(--primary); }
.result-rank.is-low { background: #f0eeeb; color: var(--text-light); }

.result-bar {
    height: 6px;
    border-radius: 999px;
    background: #e8e4de;
    margin-top: 0.4rem;
    overflow: hidden;
}
.result-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s ease;
}
.result-bar-fill.is-top { background: var(--primary); }
.result-bar-fill.is-mid { background: #5b8db8; }
.result-bar-fill.is-low { background: #d5d1cc; }

/* Result description (top 3) */
.result-description {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* Buttons override to brand gold */
.button.is-brand {
    background: linear-gradient(180deg, #d4a44e, var(--accent));
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    transition: all 0.2s ease;
}
.button.is-brand:hover {
    background: linear-gradient(180deg, var(--accent), var(--accent-dark));
    color: #fff;
}
.button.is-brand:active {
    transform: scale(0.98);
}

/* Toast notifications */
.notification-container {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 90%;
    max-width: 500px;
}

/* Notification tweaks */
.notification {
    transition: opacity 0.4s ease;
    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.12);
    border-radius: 0.75rem;
}
.notification.is-fading {
    opacity: 0;
}

/* Footer slim */
.footer {
    padding: 1.5rem;
    background-color: var(--bg);
    border-top: 1px solid var(--border-warm);
}
.footer .content p {
    color: var(--text-light);
    font-size: 0.85rem;
}

/* Hero instruction image */
.instruction-hero {
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.instruction-hero img {
    width: 100%;
    height: auto;
    display: block;
}

/* Pastor cards */
.church-card {
    background: var(--card-bg);
    border-radius: 1.25rem;
    padding: 1.5rem;
    border: 1px solid var(--border-warm);
    box-shadow: 0 2px 16px rgba(30, 58, 95, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}
.church-card:hover {
    box-shadow: 0 4px 20px rgba(30, 58, 95, 0.1);
}

/* QR code */
.qr-container img {
    border-radius: 1rem;
    box-shadow: 0 2px 12px rgba(30, 58, 95, 0.1);
}

/* Member list */
.member-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-warm);
    transition: background-color 0.2s ease;
}
.member-row:hover {
    background-color: var(--accent-light);
}
.member-row:last-child { border-bottom: none; }
.member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

/* Contrast fixes — override Bulma's light grays */
.label {
    color: var(--text);
}
.has-text-grey {
    color: var(--text-light) !important;
}
.has-text-grey-light {
    color: #7a7a7a !important;
}
.title, .subtitle {
    color: var(--text);
}
h1.title, h2.title, h3.title, h4.title {
    font-family: "DM Serif Display", serif;
}
.content li, .content p {
    color: var(--text);
}
strong {
    color: #1a1a1a;
}
.checkbox {
    color: var(--text);
}

/* Smooth transitions on interactive elements */
a, .button, input, select, textarea {
    transition: all 0.2s ease;
}