/* ═══════════════════════════════════════════════════════════════
   DIOCESE OF NOVALICHES — BRAND TOKENS
   Single source of truth for colour. Nothing else in the project
   should contain a raw hex value.

   Colours are stored as space-separated RGB channels so they work
   with Tailwind opacity modifiers (bg-brand/65) in both the CDN
   build and the compiled build. See resources/css/app.css.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Raw palette ────────────────────────────────────────────
       Straight from the approved palette board. Contrast figures
       are measured against white.                                */
    --dn-navy:    14 18 105;    /* #0E1269  16.04:1  deepest blue   */
    --dn-indigo:  31 50 125;    /* #1F327D  11.60:1  primary blue   */
    --dn-blue:    52 71 137;    /* #344789   8.72:1  mid blue       */
    --dn-sky:     0 113 188;    /* #0071BC   5.14:1  bright blue    */
    --dn-gold:    255 210 17;   /* #FFD211   1.45:1  ON DARK ONLY   */
    --dn-amber:   234 193 2;    /* #EAC102   1.73:1  ON DARK ONLY   */
    --dn-red:     216 0 30;     /* #D8001E   5.33:1  secondary      */
    --dn-maroon:  122 0 0;      /* #7A0000  11.49:1  secondary      */
    --dn-ink:     43 43 43;     /* #2B2B2B  14.16:1  neutral        */

    /* Derived, not on the palette board: gold is unreadable as text
       on light surfaces (1.45:1), so gold-toned labels on white use
       this darkened tone instead. Pending client sign-off.         */
    --dn-gold-deep: 138 109 0;  /* #8A6D00   4.92:1  passes AA body */

    /* ── Semantic tokens ────────────────────────────────────────
       What templates reference. Section themes remap these, so a
       page changes character without forking the markup.          */
    --brand:          var(--dn-indigo);     /* nav, buttons, links      */
    --brand-dark:     var(--dn-navy);       /* hover, mobile drawer     */
    --brand-soft:     var(--dn-blue);       /* secondary headings       */
    --brand-sky:      var(--dn-sky);        /* informational highlights */

    --accent:         var(--dn-gold);       /* gold — ON DARK only      */
    --accent-amber:   var(--dn-amber);      /* gold — ON DARK, subdued  */
    --accent-deep:    var(--dn-gold-deep);  /* gold-as-text ON LIGHT    */

    --surface-dark:   var(--dn-navy);       /* dark section backgrounds */
    --surface-deeper: 7 9 54;               /* #070936 masthead/footer  */
    --body:           var(--dn-ink);        /* body copy                */

    /* In plain CSS — page <style> blocks, inline styles — wrap the
       token: color: rgb(var(--brand)). Do NOT add pre-composed
       aliases like `--color-brand: rgb(var(--brand))` here: custom
       properties resolve where they are declared, so an alias
       declared on :root would stay blue inside a maroon section. */
}

/* ═══════════════════════════════════════════════════════════════
   SECTION THEMES
   Put data-theme on any wrapper (usually <body>); the semantic
   tokens are remapped and every descendant follows. Blue remains
   the site-wide default.
   ═══════════════════════════════════════════════════════════════ */

/* Cathedral + Social Action — the two sections the brief assigns to
   red/maroon. Gold accents are deliberately left untouched. */
[data-theme='maroon'] {
    --brand:          var(--dn-maroon);
    --brand-dark:     90 0 0;      /* #5A0000 */
    --brand-soft:     var(--dn-red);
    --surface-dark:   58 0 0;      /* #3A0000 */
    --surface-deeper: 36 0 0;      /* #240000 */
    --accent-deep:    138 42 0;    /* #8A2A00  5.11:1 on white */
}

/* ═══════════════════════════════════════════════════════════════
   BASE + COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

body {
    color: rgb(var(--body));
}

.font-serif {
    font-family: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
}

/* NOVA OMNIA FACIO — wide-tracked serif caps over a dark scrim.
   Gold on photography needs the scrim to stay legible; never place
   this on a light background. */
.motto {
    font-family: 'Instrument Serif', ui-serif, Georgia, serif;
    color: rgb(var(--accent));
    text-transform: uppercase;
    letter-spacing: 0.18em;
    line-height: 1.05;
    text-shadow: 0 2px 12px rgb(0 0 0 / 0.75), 0 0 40px rgb(0 0 0 / 0.5);
}

/* Small uppercase eyebrow above section headings */
.section-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(var(--brand));
    border-left: 3px solid rgb(var(--brand));
    padding-left: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   2026 REDESIGN — shared components
   Headings: Noto Serif · UI labels: Montserrat · body: Inter.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* The red → gold sweep used on section bars and the header rule. */
    --dn-sweep: linear-gradient(90deg, #D8001E 0%, #EE6A12 30%, #F2B31A 62%, #EBDD5A 100%);
}

.font-heading { font-family: 'Noto Serif', ui-serif, Georgia, serif; }
.font-ui      { font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif; }
.font-script  { font-family: 'Pinyon Script', 'Great Vibes', cursive; }

/* Section title bar — full-bleed gradient with centred white caps. */
.dn-bar {
    background: var(--dn-sweep);
    color: #fff;
    text-align: center;
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}

.dn-rule { height: 4px; background: var(--dn-sweep); }

/* Page hero tints, laid over the photograph. */
.dn-tint-sunset { background: linear-gradient(90deg, rgb(216 0 30 / 0.85), rgb(238 106 18 / 0.7) 40%, rgb(235 221 90 / 0.65)); }
.dn-tint-teal   { background: linear-gradient(90deg, rgb(31 50 125 / 0.75), rgb(0 170 200 / 0.6)); }
.dn-tint-maroon { background: linear-gradient(90deg, rgb(122 0 0 / 0.9), rgb(216 0 30 / 0.55)); }
.dn-tint-blue   { background: linear-gradient(90deg, rgb(14 18 105 / 0.8), rgb(31 50 125 / 0.45)); }

/* Rich text written by admins in the page editor. */
.dn-prose { line-height: 1.75; font-size: 0.95rem; }
.dn-prose > * + * { margin-top: 1em; }
.dn-prose h2 { font-family: 'Noto Serif', Georgia, serif; font-weight: 700; font-size: 1.6rem; line-height: 1.25; color: rgb(var(--brand)); margin-top: 1.6em; }
.dn-prose h3 { font-family: 'Noto Serif', Georgia, serif; font-weight: 700; font-size: 1.25rem; color: rgb(var(--brand)); margin-top: 1.4em; }
.dn-prose a  { color: rgb(var(--brand-sky)); text-decoration: underline; }
.dn-prose ul { list-style: disc; padding-left: 1.4em; }
.dn-prose ol { list-style: decimal; padding-left: 1.4em; }
.dn-prose blockquote { border-left: 4px solid rgb(var(--dn-gold)); padding-left: 1em; font-style: italic; }
.dn-prose img { max-width: 100%; height: auto; }

[x-cloak] { display: none !important; }

/* About → History: the editor's two heading levels (H2 title, H3 sub-heading)
   keep the launch look. */
.dn-about-history h2 { font-size: 1.5rem; color: rgb(var(--brand-dark)); margin-top: 0; }
.dn-about-history h3 { font-size: 1.25rem; color: rgb(var(--brand-dark)); }