/* ==========================================================================
   Wiki content styles — ClearFrost brand
   --------------------------------------------------------------------------
   Single source of truth for how page content looks. Loaded by:
     • the public page layout  (src/Views/public/layouts/header.php)
     • the TinyMCE editor iframe (src/Views/admin/pages/edit.php, content_css,
       with body_class 'page-body')
   so the editor preview always matches the published page.

   Styles target plain tags (h1, p, table …) inside .page-body, so existing
   content picks them up automatically with no re-editing.

   Colours marked "branding" come from Admin → Branding → Content Typography.
   header.php / edit.php set the --wc-* variables from those DB settings;
   the fallbacks below are the brand defaults.
   ========================================================================== */

.page-body {
    /* Branding-controlled (overridden inline from DB settings) */
    --wc-h1:   var(--wc-color-h1,   #0D1B2A);
    --wc-h2:   var(--wc-color-h2,   #0D1B2A);
    --wc-h3:   var(--wc-color-h3,   #0D1B2A);
    --wc-h4:   var(--wc-color-h4,   #0F6E80);
    --wc-h5:   var(--wc-color-h5,   #4A5D6E);
    --wc-h6:   var(--wc-color-h6,   #4A5D6E);
    --wc-body: var(--wc-color-body, #1F2D3A);
    --wc-link: var(--wc-color-link, #0F6E80);

    /* Fixed brand palette */
    --wc-navy:   #0D1B2A;
    --wc-ice:    #E8F4F8;
    --wc-teal:   #3BBFDA;
    --wc-mint:   #5BE8C8;
    --wc-rule:   #D3E3EA;
    --wc-stripe: #F4F9FB;

    --wc-font-body: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
    --wc-font-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --wc-font-mono: 'Share Tech Mono', 'Courier New', monospace;

    font-family: var(--wc-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--wc-body);
}

.page-body > *:first-child { margin-top: 0; }

/* ── 01–06 Headings ──────────────────────────────────────────────────────── */
.page-body h1, .page-body h2, .page-body h3, .page-body h4 {
    font-family: var(--wc-font-head);
    font-weight: 600;
}

/* 01 · Heading 1 — 36px, navy, short mint→teal bar underneath */
.page-body h1 {
    font-size: 2.25rem; line-height: 1.15; letter-spacing: .01em;
    color: var(--wc-h1);
    margin: 1.4em 0 .6em;
    padding: 0 0 .35em;
    position: relative;
}
.page-body h1::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 64px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--wc-mint), var(--wc-teal));
}

/* 02 · Heading 2 — 28px, navy, full-width hairline */
.page-body h2 {
    font-size: 1.75rem; line-height: 1.2;
    color: var(--wc-h2);
    margin: 1.6em 0 .6em;
    padding: 0 0 .3em;
    border-bottom: 1px solid var(--wc-rule);
}

/* 03 · Heading 3 — 22px, navy, teal left bar */
.page-body h3 {
    font-size: 1.375rem; line-height: 1.25;
    color: var(--wc-h3);
    margin: 1.4em 0 .5em;
    padding: 0 0 0 10px;
    border-left: 3px solid var(--wc-teal);
}

/* 04 · Heading 4 — 18px, deep teal, uppercase */
.page-body h4 {
    font-size: 1.125rem; line-height: 1.3;
    color: var(--wc-h4);
    text-transform: uppercase; letter-spacing: .04em;
    margin: 1.3em 0 .4em;
}

/* 05 · Heading 5 — 14px mono label */
.page-body h5 {
    font-family: var(--wc-font-mono); font-weight: 400;
    font-size: .875rem; line-height: 1.4;
    color: var(--wc-h5);
    text-transform: uppercase; letter-spacing: .08em;
    margin: 1.2em 0 .4em;
}

/* 06 · Heading 6 — 12px mono label */
.page-body h6 {
    font-family: var(--wc-font-mono); font-weight: 400;
    font-size: .75rem; line-height: 1.4;
    color: var(--wc-h6);
    text-transform: uppercase; letter-spacing: .1em;
    margin: 1.2em 0 .4em;
}

/* ── 07 Paragraph ────────────────────────────────────────────────────────── */
.page-body p { margin: 0 0 1em; }

/* ── 08 Links & bold ─────────────────────────────────────────────────────── */
.page-body a {
    color: var(--wc-link);
    text-decoration: underline;
    text-decoration-color: var(--wc-teal);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.page-body a:hover {
    color: var(--wc-navy);
    text-decoration-thickness: 2px;
}
.page-body strong, .page-body b { font-weight: 600; color: var(--wc-navy); }

/* ── 09 Lists ────────────────────────────────────────────────────────────── */
.page-body ul, .page-body ol { margin: 0 0 1em; padding-left: 1.5em; }
.page-body li { margin: .25em 0; }
.page-body li::marker { color: var(--wc-teal); font-weight: 600; }
.page-body ul ul, .page-body ol ol,
.page-body ul ol, .page-body ol ul { margin: .25em 0 0; }

/* ── 10 Blockquote ───────────────────────────────────────────────────────── */
.page-body blockquote {
    margin: 1.2em 0;
    padding: .8em 1.1em;
    background: var(--wc-ice);
    border-left: 4px solid var(--wc-teal);
    border-radius: 0 6px 6px 0;
    color: var(--wc-navy);
    font-style: normal;
}
.page-body blockquote p:last-child { margin-bottom: 0; }

/* ── 11 Inline code ──────────────────────────────────────────────────────── */
.page-body code {
    font-family: var(--wc-font-mono);
    font-size: .9em;
    background: var(--wc-ice);
    color: var(--wc-navy);
    padding: .1em .4em;
    border: 1px solid var(--wc-rule);
    border-radius: 3px;
}

/* ── 12 Preformatted / code blocks ───────────────────────────────────────── */
.page-body pre,
.page-body pre.ql-syntax {
    font-family: var(--wc-font-mono);
    font-size: .875rem; line-height: 1.55;
    background: var(--wc-navy);
    color: var(--wc-ice);
    padding: 1em 1.2em;
    margin: 1.2em 0;
    border-top: 3px solid var(--wc-teal);
    border-radius: 6px;
    overflow-x: auto;
    white-space: pre;
}
.page-body pre code,
.page-body pre.ql-syntax code {
    background: none; border: 0; padding: 0; border-radius: 0;
    color: inherit; font-size: inherit;
}

/* TinyMCE's codesample plugin injects Prism's light theme into the editor
   iframe. Override it so code blocks look the same in the editor as on the
   public page (navy block, ice text, no token colouring). */
.page-body pre[class*="language-"],
.page-body code[class*="language-"] {
    background: var(--wc-navy);
    color: var(--wc-ice);
    text-shadow: none;
    font-family: var(--wc-font-mono);
}
.page-body pre[class*="language-"] code[class*="language-"] { background: none; }
.page-body pre[class*="language-"] .token {
    color: inherit; background: none; opacity: 1;
}

/* ── 13 Tables ───────────────────────────────────────────────────────────── */
.page-body table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 1.2em 0;
    font-size: .95rem;
}
.page-body th {
    font-family: var(--wc-font-head);
    font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    background: var(--wc-navy);
    color: var(--wc-ice);
    text-align: left;
    padding: .6em .8em;
    border: 0;
}
.page-body td {
    padding: .55em .8em;
    border: 0;
    border-bottom: 1px solid var(--wc-rule);
    vertical-align: top;
}
.page-body tbody tr:nth-child(even) td { background: var(--wc-stripe); }
/* Tables saved with border="1" (TinyMCE default) — beat TinyMCE's editor
   grid styling and the browser's attribute borders so they match the design. */
.page-body table[border]:not([border="0"]) th { border: 0; }
.page-body table[border]:not([border="0"]) td {
    border-style: solid; border-color: var(--wc-rule);
    border-width: 0 0 1px 0;
}
.page-body th p:last-child, .page-body td p:last-child { margin-bottom: 0; }

/* ── 14 Horizontal rule ──────────────────────────────────────────────────── */
.page-body hr {
    border: 0;
    height: 2px;
    margin: 2em 0;
    background: linear-gradient(90deg, var(--wc-teal), rgba(59, 191, 218, 0));
}

/* ── Images & misc ───────────────────────────────────────────────────────── */
.page-body img { max-width: 100%; height: auto; border-radius: 4px; }
.page-body sub { vertical-align: sub;   font-size: .75em; }
.page-body sup { vertical-align: super; font-size: .75em; }

/* Legacy Quill alignment / indent classes (older content) */
.page-body .ql-align-center  { text-align: center; }
.page-body .ql-align-right   { text-align: right; }
.page-body .ql-align-justify { text-align: justify; }
.page-body .ql-indent-1 { padding-left:  3em; }
.page-body .ql-indent-2 { padding-left:  6em; }
.page-body .ql-indent-3 { padding-left:  9em; }
.page-body .ql-indent-4 { padding-left: 12em; }
.page-body .ql-indent-5 { padding-left: 15em; }

/* ── Brand font enforcement ──────────────────────────────────────────────── */
/* Force Barlow on body content, overriding off-brand inline font-family in
   stored HTML (pasted Word/Docs content, pre-restriction font picks).
   Exempt: code/pre, headings and table headers (they get their own brand
   font below), and text where an editor deliberately picked another
   approved brand font. */
/* NB: keep this selector on ONE line — a line break between the :not()s
   would become a descendant combinator and change its meaning. */
.page-body *:not(code):not(pre):not(pre *):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(th):not(:is(h1, h2, h3, h4, h5, h6, th) *):not([style*="Barlow Condensed"]):not([style*="Share Tech Mono"]):not([style*="Cascadia Code"]) {
    font-family: var(--wc-font-body) !important;
}

/* Headings / table headers keep their brand font even if stored HTML has
   an inline font-family on them or on spans inside them. */
.page-body :is(h1, h2, h3, h4, th),
.page-body :is(h1, h2, h3, h4, th) *:not(code) {
    font-family: var(--wc-font-head) !important;
}
.page-body :is(h5, h6),
.page-body :is(h5, h6) *:not(code) {
    font-family: var(--wc-font-mono) !important;
}