/* ============================================================
   DECORATIONS.CSS — Traditional visual elements
   Lotus dividers, side mandalas, content borders
   ============================================================ */

/* ── LOTUS SECTION DIVIDER ── */

.lotus-divider {
    text-align: center;
    margin: var(--space-lg, 1.5rem) 0;
    line-height: 0;
}

.lotus-divider svg {
    display: inline-block;
    width: min(80%, 300px);
    height: auto;
    opacity: 0.25;
}

.lotus-divider--compact {
    margin: var(--space-sm, 0.5rem) 0;
}

.lotus-divider--compact svg {
    width: min(60%, 200px);
}

/* ── SIDE MANDALA BACKGROUND PATTERN ──
   Repeating mandala SVG in body margins, hidden behind the content column.
   Content column gets solid bg to mask; mandala peeks through side margins only.
   NO inline SVGs — this is the only mandala source. */

body {
    position: relative;
    background: #C58128;
}


.page-container {
    position: relative;
    z-index: 1;
    background: #FDF3E4;
}

.page-container::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1.5px solid #C8932A;
    pointer-events: none;
    z-index: 100;
}

.page-container::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 0.5px solid rgba(186, 117, 23, 0.35);
    pointer-events: none;
    z-index: 100;
}

/* ── CONTENT BORDER (optional per page) ── */

.content-bordered {
    position: relative;
}

@media (min-width: 1200px) {
    .content-bordered::before,
    .content-bordered::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        background: linear-gradient(
            to bottom,
            transparent,
            var(--border-subtle) 10%,
            var(--border-subtle) 90%,
            transparent
        );
        opacity: 0.4;
    }

    .content-bordered::before { left: -20px; }
    .content-bordered::after { right: -20px; }
}

/* ── TRADITIONAL DOUBLE BORDER (page wrapper option) ── */

.page-frame {
    border: 1.5px solid var(--border-subtle);
    outline: 1px solid var(--border-subtle);
    outline-offset: 3px;
    border-radius: var(--card-radius, 8px);
    padding: var(--space-md, 1rem);
}