/* ============================================================
   mozivio.com — shared theme base.

   Implements the ENTIRE class/variable contract that the shared
   page-section views (resources/views/pages/sections/*.blade.php)
   depend on, with neutral defaults. Newer themes load this first and
   then a small "skin" file that only overrides personality —
   colours, type, corners, shadows, hero treatment.

   The four original themes (classic/modern/bold/elegant) are still
   fully self-contained and do NOT load this file, so nothing about
   them changes. New themes opt in, which is why they can be ~120
   lines instead of ~350 and cannot silently miss a contract class.

   A skin is expected to set: --green, --green-dark, --green-light,
   --dark, --text, --text-light, --page-bg. --serif/--sans are
   injected inline per-tenant by the layout (font pairing).
   ============================================================ */

:root {
    --green:       var(--brand-primary, #2F6F4F);
    --green-dark:  var(--brand-secondary, #1F4A34);
    /* A light tint of the band's own accent color — not a fixed hue — so
       every "boxed" section (Mail us, Join us, CTA, ...) always matches
       whatever color the band picked in Site Settings, on every theme. */
    --green-light: color-mix(in srgb, var(--green) 10%, white);
    --dark:        #14171A;
    --text:        #1F2429;
    --text-light:  #5B6670;
    --page-bg:     #FFFFFF;
    /* Background for "card" elements floating on a section (form cards,
       news/sponsor/gallery tiles) — deliberately its own variable rather
       than a literal #fff in each section template, so a theme whose
       page is busy or dark (see themes/vinyl.css) can swap it for
       something less stark without touching any shared blade file. */
    --card-bg:     #FFFFFF;
    --radius:      14px;
    --shadow:      0 10px 30px -12px rgba(15, 20, 25, 0.18);
    --maxw:        1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Quill (the CMS's rich-text editor, see admin/partials/html-editor.blade.php)
   saves BOTH bullet and numbered lists as <ol><li data-list="bullet|ordered">
   — telling the two apart visually is normally Quill's own editor CSS's job,
   which isn't loaded here on the public site, so every list fell back to
   the browser's plain <ol> numbering regardless of which type was actually
   picked. Minimal reproduction of just that part of Quill's own stylesheet. */
ol { padding-left: 0; counter-reset: ql-ordered; }
li[data-list] { list-style: none; padding-left: 1.5em; position: relative; }
li[data-list]::before { position: absolute; left: 0; }
li[data-list="bullet"]::before { content: "•"; }
li[data-list="ordered"]::before { content: counter(ql-ordered) "."; counter-increment: ql-ordered; }
.ql-ui { display: none; }

/* Canvas color, not the content area's — on a page shorter than the
   viewport (or during mobile overscroll bounce), the browser paints this
   past the document's actual end. Matches the footer's own --dark rather
   than the page's --page-bg, so that space reads as "the footer keeps
   going" instead of an abrupt cut back to the page background. */
html { scroll-behavior: smooth; background: var(--dark); }
body {
    font-family: var(--sans);
    color: var(--text);
    background: var(--page-bg);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
h1, h2, h3, h4, h5 { font-family: var(--serif); line-height: 1.15; color: var(--dark); }

.section p { margin-bottom: 0.9rem; }
.section ul, .section ol { padding-left: 1.75rem; margin-bottom: 0.9rem; }
.section li { margin-bottom: 0.3rem; }
.section a { color: var(--green-dark); }

/* ── Layout ─────────────────────────────────────────────── */
.section { padding: 5.5rem 0; }
.section-sm { padding: 3rem 0; }
.section-dark { background: var(--dark); color: #fff; }
.section-light { background: var(--green-light); }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.75rem; }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 1.75rem; }

/* ── Headings ───────────────────────────────────────────── */
.section-label {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 3px;
    color: var(--green); font-weight: 700; margin-bottom: 0.6rem;
}
.section-title {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -0.015em;
}
.section-dark .section-title, .section-dark h2, .section-dark h3 { color: #fff; }
.section-lead { font-size: 1.08rem; color: var(--text-light); max-width: 620px; }
.section-dark .section-lead { color: rgba(255,255,255,0.72); }

.divider { width: 62px; height: 4px; background: var(--green); border-radius: 99px; margin: 0.9rem 0 1.5rem; }
.divider-center { margin-left: auto; margin-right: auto; }
.divider-white { background: rgba(255,255,255,0.6); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.78rem 1.6rem; border-radius: 99px;
    font-family: var(--sans); font-weight: 650; font-size: 0.92rem;
    text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
/* .btn.btn-* (class repeated), not just .btn-* — `.section a { color:
   var(--green-dark) }` above outranks a single-class selector, which was
   silently recoloring every .btn-green/.btn-white/.btn-white-outline link's
   text to --green-dark (== .btn-green:hover's own background) the moment
   it sat inside a .section, leaving buttons with invisible/wrong-color text. */
.btn.btn-green { background: var(--green); color: #fff; box-shadow: 0 8px 20px -10px var(--green); }
.btn.btn-green:hover { background: var(--green-dark); }
.btn.btn-outline { background: transparent; color: var(--green-dark); border-color: currentColor; }
.btn.btn-outline:hover { background: var(--green); border-color: var(--green); color: #fff; }
.btn.btn-white { background: #fff; color: var(--dark); }
.btn.btn-white-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn.btn-white-outline:hover { background: #fff; color: var(--dark); }

/* ── Cards ──────────────────────────────────────────────── */
.card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card-body { padding: 1.5rem; }
.card-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; color: var(--green); font-weight: 700; }
.card-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; margin: 0.4rem 0; }
.card-text { color: var(--text-light); font-size: 0.92rem; }

/* ── Event cards ────────────────────────────────────────── */
.event-card {
    display: flex; gap: 1.5rem; padding: 1.35rem; background: #fff;
    border-radius: var(--radius); box-shadow: var(--shadow); align-items: flex-start;
}
.event-date-block {
    background: var(--green); color: #fff; text-align: center;
    padding: 0.65rem 0.85rem; min-width: 64px; flex-shrink: 0; border-radius: 10px;
}
.event-date-day  { font-family: var(--serif); font-size: 1.9rem; font-weight: 800; line-height: 1; }
.event-date-mon  { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.92; }
.event-date-year { font-size: 0.63rem; opacity: 0.75; }
.event-title     { font-family: var(--serif); font-size: 1.12rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--dark); }
.event-meta      { font-size: 0.84rem; color: var(--text-light); display: flex; flex-wrap: wrap; gap: 0.85rem; }
.event-meta i    { color: var(--green); }

/* ── Gallery album tiles (pages/sections/gallery.blade.php) ── */
.mz-album { border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; transition: transform 0.2s ease; }
.mz-album:hover { transform: translateY(-3px); }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.photo-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }

/* ── Grids & content rows ───────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.content-row { display: flex; gap: 3.5rem; align-items: center; }
.content-row > .col-text, .content-row > .col-img { flex: 1; min-width: 0; }
.content-row > .col-img img { width: 100%; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
.content-row--reverse { flex-direction: row-reverse; }

/* ── Forms ──────────────────────────────────────────────── */
.form-group { margin-bottom: 1.2rem; }
.form-label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.9rem; }
.form-control {
    width: 100%; padding: 0.75rem 1rem; border: 1.5px solid #DDE3E8; border-radius: 10px;
    font-family: var(--sans); font-size: 0.95rem; background: #fff; transition: border-color 0.18s, box-shadow 0.18s;
}
.form-control:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 130px; }
.alert-success-pub {
    background: var(--green-light); border-left: 4px solid var(--green);
    color: var(--dark); padding: 1rem 1.25rem; margin-bottom: 1.5rem; border-radius: 10px;
}

/* ── Footer ─────────────────────────────────────────────── */
.footer { background: var(--dark); color: rgba(255,255,255,0.7); padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; margin-bottom: 2rem; }
.footer-brand { font-family: var(--serif); font-size: 1.7rem; font-weight: 800; color: #fff; margin-bottom: 0.35rem; }
.footer-tagline { color: rgba(255,255,255,0.5); font-size: 0.85rem; }
.footer-title { color: #fff; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.9rem; }
/* Multi-column instead of one long vertical list — a band with 8+ pages
   was producing a tall, awkward single column next to the shorter brand
   column beside it. */
.footer-links { columns: 2; column-gap: 1.5rem; }
.footer-links a { color: rgba(255,255,255,0.62); text-decoration: none; display: block; margin-bottom: 0.4rem; font-size: 0.9rem; break-inside: avoid; }
.footer-links a:hover { color: var(--green); }
.footer-social { display: flex; gap: 0.75rem; margin-top: 1rem; }
.footer-social a {
    width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.8); text-decoration: none; transition: background 0.2s;
}
.footer-social a:hover { background: var(--green); color: #fff; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.14); margin-top: 2.5rem; padding-top: 1.4rem;
    font-size: 0.8rem; color: rgba(255,255,255,0.45);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}

/* ── Decorative music-note texture (hero overlays) ──────── */
/* Enable/opacity/size/randomness are tenant-editable (Site Settings > Hero);
   the layout injects --hero-pattern-* at :root. The literal defaults below
   are only the fallback for the (impossible in practice) case those vars
   are unset — var()'s third-argument-less two-arg form uses them whenever
   the custom property itself is missing, not merely falsy. */
.hero-texture {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-repeat: repeat;
    display: var(--hero-pattern-display, block);
    opacity: var(--hero-pattern-opacity, 0.14);
    background-size: var(--hero-pattern-size, 110px) var(--hero-pattern-size, 110px);
    background-image: var(--hero-pattern-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Ctext x='8' y='40' font-size='34' fill='white'%3E%E2%99%AA%3C/text%3E%3Ctext x='60' y='90' font-size='28' fill='white'%3E%E2%99%AB%3C/text%3E%3C/svg%3E"));
}

/* ── Scroll reveal (opt-in; skins add .reveal to sections) ─ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .btn:hover, .mz-album:hover { transform: none; }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .content-row, .content-row--reverse { flex-direction: column; gap: 2rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .section { padding: 3.5rem 0; }
    .event-card { flex-direction: column; gap: 1rem; }
}

/* The demo tenant renders a sticky banner at z-index 2000; themes whose nav
   is position:fixed would otherwise sit underneath it. Applied only when the
   layout detects demo mode, so real tenants are unaffected. The banner's
   own height varies (wraps to 2-3 lines on narrow screens/long
   translations), so this reads the actual measured height that
   partials.demo-banner sets at runtime rather than a fixed guess. */
.nav-demo-offset { top: var(--mz-demo-banner-h, 30px) !important; }