/* ============================================================
   Theme tokens — dark mode (default)
   Bootstrap 5.3 sets base colours via data-bs-theme="dark".
   Custom tokens extend / override as needed.
   ============================================================ */

:root,
[data-bs-theme="dark"] {
    --ru4-bg:          #0d0d0d;
    --ru4-surface:     #1a1a2e;
    --ru4-surface-alt: #16213e;
    --ru4-border:      #2a2a4a;
    --ru4-text:        #e0e0e0;
    --ru4-text-muted:  #888aaa;
    --ru4-accent:      #7c3aed;        /* primary brand colour */
    --ru4-accent-hover:#6d28d9;
    --ru4-danger:      #ef4444;
    --ru4-success:     #22c55e;
}

[data-bs-theme="light"] {
    --ru4-bg:          #f5f5f5;
    --ru4-surface:     #ffffff;
    --ru4-surface-alt: #eef0f8;
    --ru4-border:      #d1d5db;
    --ru4-text:        #111827;
    --ru4-text-muted:  #6b7280;
    --ru4-accent:      #7c3aed;
    --ru4-accent-hover:#6d28d9;
    --ru4-danger:      #dc2626;
    --ru4-success:     #16a34a;
}

/* ============================================================
   Base
   ============================================================ */

html,
body {
    height: 100%;
}

body {
    position: relative;
    background-color: var(--ru4-bg);  /* fallback while image loads */
    background-image: url('/images/bg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;   /* fixed breaks on iOS Safari */
    color: var(--ru4-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

/* Black overlay — sits above bg image, below all page content */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
    pointer-events: none;
}

/* ============================================================
   Scrollbar (dark-mode friendly, Webkit)
   ============================================================ */

::-webkit-scrollbar               { width: 6px; }
::-webkit-scrollbar-track         { background: var(--ru4-bg); }
::-webkit-scrollbar-thumb         { background: var(--ru4-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover   { background: var(--ru4-text-muted); }

/* ============================================================
   Bootstrap overrides
   ============================================================ */

/* Cards */
.card {
    background-color: var(--ru4-surface);
    border-color: var(--ru4-border);
}

.card-header,
.card-footer {
    background-color: var(--ru4-surface-alt);
    border-color: var(--ru4-border);
}

/* Buttons — primary mapped to brand accent */
.btn-primary {
    --bs-btn-bg:           var(--ru4-accent);
    --bs-btn-border-color: var(--ru4-accent);
    --bs-btn-hover-bg:     var(--ru4-accent-hover);
    --bs-btn-hover-border-color: var(--ru4-accent-hover);
    --bs-btn-active-bg:    var(--ru4-accent-hover);
}

.btn-outline-primary {
    --bs-btn-color:        var(--ru4-accent);
    --bs-btn-border-color: var(--ru4-accent);
    --bs-btn-hover-bg:     var(--ru4-accent);
    --bs-btn-hover-border-color: var(--ru4-accent);
}

/* Links */
a {
    color: var(--ru4-accent);
}

a:hover {
    color: var(--ru4-accent-hover);
}

/* Muted text */
.text-muted {
    color: var(--ru4-text-muted) !important;
}

/* ============================================================
   Home page
   ============================================================ */

.ru4-home {
    max-width: 480px;            /* comfortable reading width on large screens     */
    margin-inline: auto;
    padding-block: 3rem;
    gap: 0;                      /* sections manage their own spacing              */
}

/* Shared section wrapper */
.ru4-section {
    width: 100%;
}

/* ── Title section ── */

.ru4-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    color: var(--ru4-text);
    letter-spacing: -0.02em;
}

.ru4-subtitle {
    font-size: clamp(1rem, 4vw, 1.15rem);
    color: var(--ru4-text-muted);
}

.ru4-how-link {
    font-size: 1.2rem;
    color: var(--ru4-text-muted) !important;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
    padding-block: 0.25rem;
}

.ru4-how-link:hover {
    color: var(--ru4-text) !important;
    text-decoration-color: currentColor;
}

/* Language bar */
.ru4-lang-bar {
    flex-wrap: wrap;
}

.ru4-lang-btn {
    border-radius: 2rem;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding-inline: 0.9rem;
    transition: box-shadow 0.15s ease;
}

.ru4-lang-btn.active {
    box-shadow: 0 0 0 2px var(--ru4-accent);
}

/* Divider */
.ru4-divider {
    border-color: var(--ru4-border);
    opacity: 1;
    width: 50%;
    margin-inline: auto;
}

/* ── CTA section ── */

.ru4-cta-question {
    color: var(--ru4-text-muted);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ru4-cta .btn {
    border-radius: 0.85rem;
    font-weight: 500;
    padding-block: 0.75rem;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.ru4-cta .btn:active {
    transform: scale(0.98);
}

.ru4-cta .btn-link {
    color: var(--ru4-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.ru4-cta .btn-link:hover {
    color: var(--ru4-text);
    text-decoration: underline;
}

.ru4-photo-credit {
    color: var(--ru4-text-muted) !important;
    font-size: 0.75rem;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.ru4-photo-credit:hover {
    opacity: 1;
}

/* ============================================================
   Generic inner page (how, etc.)
   ============================================================ */

.ru4-page {
    min-height: 100svh;
    max-width: 480px;
    margin-inline: auto;
    padding-block: 3rem;
}

.ru4-page-inner {
    width: 100%;
}

.ru4-back-link {
    color: var(--ru4-text-muted);
    font-size: 0.85rem;
}

.ru4-back-link:hover {
    color: var(--ru4-text);
}

/* ============================================================
   Profile — full-screen card flow
   ============================================================ */

/* Container covers the whole viewport.
   overflow: clip (not hidden) is required — it clips CSS-transformed
   absolute children, which overflow: hidden does not guarantee. */
.ru4-cards-wrap {
    position: fixed;
    inset: 0;
    overflow: clip;
    background-color: transparent;
}

/* Each card sits in the same position; only the active one is visible */
.ru4-card {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Cards waiting their turn — pushed below the viewport */
.ru4-card[data-state="next"] {
    transform: translateY(100%);
    pointer-events: none;
}

/* Active card — centre-stage */
.ru4-card[data-state="active"] {
    transform: translateY(0);
}

/* Cards already seen — pushed above the viewport */
.ru4-card[data-state="prev"] {
    transform: translateY(-100%);
    pointer-events: none;
}

/* Card content — centred column, max-width for readability */
.ru4-card-body {
    min-height: 100%;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    padding-block: 3rem;
    padding-inline: 1.75rem;
    box-sizing: border-box;
}

/* Back navigation block — home link + prev question, stacked top-left */
.ru4-card-nav {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 1.5rem;
}

.ru4-back-home {
    color: var(--ru4-text-muted);
    font-size: 0.85rem;
    text-decoration: none;
    line-height: 1.4;
}

.ru4-back-home:hover {
    color: var(--ru4-text);
}

.ru4-back-home-emoji {
    font-size: 1.2rem;
}

/* Back link inside a card */
.ru4-card-back {
    background: none;
    border: none;
    padding: 0;
    color: var(--ru4-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    line-height: 1.4;
}

.ru4-card-back:hover {
    color: var(--ru4-text);
}

/* Small uppercase label above inputs / selects */
.ru4-card-label {
    display: block;
    color: #fff;
    font-size: 1.25rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ✕ overlay shown when name input is invalid */
.ru4-invalid-icon {
    display: none;
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ru4-danger);
    font-size: 1rem;
    pointer-events: none;
}

/* Tighten select appearance in dark mode */
.ru4-card select.form-select {
    background-color: var(--ru4-surface);
    border-color: var(--ru4-border);
    color: var(--ru4-text);
}

/* Card buttons */
.ru4-card .btn {
    border-radius: 0.85rem;
    font-weight: 500;
    padding-block: 0.75rem;
    transition: transform 0.1s ease;
}

.ru4-card .btn:active {
    transform: scale(0.98);
}

/* On touch devices, :hover is sticky after a tap (iOS/Android).
   Reset btn-outline-primary hover fill so tapped option buttons
   don't appear pre-selected when the card slides back into view. */
@media (hover: none) {
    .ru4-card .btn-outline-primary:hover:not(.active) {
        background-color: transparent;
        border-color: var(--ru4-accent);
        color: var(--ru4-accent);
    }
}

/* ============================================================
   Couple Map — CSS donut chart
   ============================================================ */

.ru4-donut {
    --pct: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(
        var(--ru4-accent) calc(var(--pct) * 1%),
        var(--ru4-border) calc(var(--pct) * 1%)
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.ru4-donut-inner {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--ru4-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ru4-donut-count {
    font-size: 0.7rem;
}

/* Accordion skin for map page */
#mapAccordion .accordion-item {
    background-color: transparent;
    border: none;
}

#mapAccordion .accordion-button {
    background-color: transparent;
    color: var(--ru4-text);
    font-size: 1.1rem;
    font-weight: 600;
}

#mapAccordion .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--ru4-text);
    box-shadow: none;
}

#mapAccordion .accordion-button::after {
    filter: invert(1) brightness(0.7);
}

/* FAQ accordion theming */
#howFaq .accordion-item {
    background-color: var(--ru4-surface);
    border-color: var(--ru4-border);
}

#howFaq .accordion-button {
    background-color: var(--ru4-surface);
    color: var(--ru4-text);
}

#howFaq .accordion-button:not(.collapsed) {
    background-color: var(--ru4-surface);
    color: var(--ru4-text);
    box-shadow: none;
}

/* Modal content theming */
.ru4-modal-content {
    background-color: var(--ru4-surface);
    border-color: var(--ru4-border);
}

.ru4-page .list-group-item {
    background-color: transparent;
    border: none;
    color: var(--ru4-text);
}

.ru4-page .list-group-item:hover {
    background-color: var(--ru4-surface-alt);
    color: var(--ru4-text);
}

/* ============================================================
   Footer
   ============================================================ */

.ru4-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    position: relative;
    z-index: 1;
}

.ru4-footer-link {
    font-size: 0.78rem;
    color: var(--ru4-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.ru4-footer-link:hover {
    color: var(--ru4-text);
    text-decoration: underline;
}

.ru4-footer-sep {
    font-size: 0.78rem;
    color: var(--ru4-border);
    user-select: none;
}

.ru4-footer-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ============================================================
   Utility overrides
   ============================================================ */

.ru4-table-transparent {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    color: inherit;
}

.ru4-max-320 { max-width: 320px; }
.ru4-col-64  { width: 64px; }