/* Borders on tables INSIDE Confluence-imported content only.
 *
 * Two specificity hurdles to clear:
 *   1. Divi's `.entry-content table:not(.variations)` rule (specificity 0,2,1)
 *      otherwise wins over `.confluence-content tr/td/th` (0,1,1), leaving
 *      table borders at 1px solid #eee instead of the grey we want.
 *   2. With border-collapse: collapse, when adjacent borders tie on width
 *      and style, the "closer to the root" element wins — i.e. the <table>
 *      element beats <td>/<th>. So we ALSO set the border on `table` to
 *      sidestep that priority.
 *
 * Selector includes body.confluencePage (added to single confluence_page_link
 * posts via the body_class filter at confluencePageLinks.php) so total
 * specificity is (0,2,2) — beats Divi's (0,2,1) outright, no !important needed.
 *
 * The previous form of this rule was unscoped (`tr, td`) and used !important,
 * which leaked into every admin page and stomped WP-native + plugin styles.
 * Scoped here so frontend Confluence pages get bordered tables and nothing
 * else is affected.
 *
 * Escalation if this still loses on a future deploy: add !important to the
 * declaration below — the selector itself stays the same, comment + git
 * history make the override deliberate. */
body.confluencePage .confluence-content table,
body.confluencePage .confluence-content tr,
body.confluencePage .confluence-content td,
body.confluencePage .confluence-content th {
    border: 1px solid grey;
}


/* Base styling for any columnLayout block */
.columnLayout {
    --gap: 1.25rem;       /* tweak spacing between columns */
    --pad-block: 1.25rem; /* vertical padding */
    --pad-inline: 1rem;   /* horizontal padding on narrow screens */

    display: grid;
    gap: var(--gap);
    padding: var(--pad-block) var(--pad-inline);
}

/* Two equal columns: stacks on small screens, 2 cols ≥768px */
.columnLayout[data-layout="two-equal"],
.columnLayout.two-equal {
    grid-template-columns: 1fr;             /* mobile */
}

@media (min-width: 768px) {
    .columnLayout[data-layout="two-equal"],
    .columnLayout.two-equal {
        grid-template-columns: 1fr 1fr;       /* two equal columns */
        align-items: start;
    }
}

/* Fixed-width wrapper centered, with fluid content inside */
.columnLayout[data-layout="fixed-width"],
.columnLayout.fixed-width {
    /* Often a “band” that constrains inner content; two choices:
       A) Constrain the block itself:
    */
    max-width: 1200px;    /* adjust to your design */
    margin-inline: auto;
}

/* If you nest columns inside the fixed-width band, you can style them too */
.columnLayout[data-layout="fixed-width"] > .columns,
.columnLayout.fixed-width > .columns {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr;             /* mobile single column */
}

@media (min-width: 768px) {
    .columnLayout[data-layout="fixed-width"] > .columns,
    .columnLayout.fixed-width > .columns {
        grid-auto-flow: dense;                /* nicer packing if heights vary */
        grid-template-columns: repeat(12, 1fr);
    }

    /* Example: split inner children 6/6 inside a fixed-width band */
    .columnLayout.fixed-width > .columns > * {
        grid-column: span 12;
    }
}


/* Base: keep embedded images responsive and crisp */
.confluence-embedded-image {
    display: block;            /* makes centering predictable */
    max-width: 100%;           /* never overflow the container */
    height: auto;              /* preserve aspect ratio */
    -ms-interpolation-mode: bicubic; /* IE fallback for better scaling */
    image-rendering: auto;     /* crisp scaling for most browsers */
}


/* If the class is on the <img> itself */
.confluence-embedded-image.image-center {
    margin-inline: auto;   /* centers block-level image */
    text-align: center;    /* harmless; useful if image is inline */
}

/* If the class is on a wrapping element (common in editors) */
.image-center > .confluence-embedded-image,
.image-center.confluence-embedded-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* Bullet/number hangs outside the text block so wrapped lines align cleanly */
ol, ul {
    list-style-position: outside;
    padding-left: 1.5rem;     /* room for the marker */
    margin-left: 0;
}

/* Tighten paragraph spacing inside list items */
ol li p,
ul li p {
    margin: 0;
}

/* Inline the wrapping <p> that Confluence's editor always puts inside <li>, so
   the marker (1., •) sits on the same line as the item text rather than alone
   on a line above it. Subsequent siblings (rare) still render as blocks. */
.confluence-content li > p:first-child {
    display: inline;
}

/* Slight indent on lists inside Confluence content — improves readability vs
   the default flush-left position the global ol,ul rule above would otherwise
   give it. */
.confluence-content ul,
.confluence-content ol {
    margin-left: 1.5em;
}

/* Indent body paragraphs inside Confluence content so they sit visually under
   the section heading (which is rendered flush-left as a heading-shape OL).
   Excluded: special styled paragraphs (page-meta, attachment notices),
   table-cell paragraphs (already padded by the cell), and list-item paragraphs
   (already indented by the list). */
.confluence-content p:not(.confluence-page-meta):not(.confluence-attachment) {
    padding-left: 1.5em;
}
.confluence-content td p,
.confluence-content th p,
.confluence-content li p {
    padding-left: 0;
}

/* Confluence file attachment notice (PDF/file refs that can't be linked directly) */
.confluence-attachment {
    background: #f4f5f7;
    border-left: 3px solid #aaa;
    padding: 0.4em 0.75em;
    font-size: 0.9em;
    color: #555;
    margin: 0.5em 0;
}

/* Headings within Confluence content — breathing room above/below */
.confluence-content h1,
.confluence-content h2,
.confluence-content h3,
.confluence-content h4,
.confluence-content h5,
.confluence-content h6 {
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}

/* Heading-shape ordered lists. Confluence emits section headings as
   <ol start="N"><li><p><strong>Text</strong></p></li></ol>; render them as
   "N. Text" prominent headings via :has() so the HTML stays unchanged.
   Modern browsers only (Chrome 105+, Safari 15.4+, Firefox 121+).
   Size lives on the <li> so the marker scales; inner <p>/<strong> use
   !important to defeat Divi's default p font-size rule. */
.confluence-content ol:has(> li:only-child > p:only-child > strong:only-child) {
    list-style-position: inside;
    padding-left: 0;
    margin: 1em 0 0.4em;
}
.confluence-content ol:has(> li:only-child > p:only-child > strong:only-child) > li {
    font-size: 2em;
    font-weight: 700;
    line-height: 1.2;
    color: #2c7030;
}
.confluence-content ol:has(> li:only-child > p:only-child > strong:only-child) > li > p {
    display: inline;            /* keep number and heading text on one line */
    margin: 0;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}
.confluence-content ol:has(> li:only-child > p:only-child > strong:only-child) > li > p > strong {
    font-size: inherit !important;
    color: inherit !important;
}

/* Generic styling for any native h2/h3 elements that come through unchanged */
.confluence-content h2 {
    font-size: 2em;
    font-weight: 700;
    line-height: 1.2;
}
.confluence-content h3 {
    font-size: 1.4em;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0.8em;
    margin-bottom: 0.4em;
}
.confluence-content h4,
.confluence-content h5,
.confluence-content h6 {
    line-height: 1.3;
}

/* Section number prefix (e.g. "3.1" in "3.1 Integrity") */
.confluence-content .section-num {
    margin-right: 0.4em;   /* gap between number and heading text — adjust freely */
    /* Optional extras:
    font-weight: normal;   un-bold the number if the heading is bold
    color: #666;           mute the number colour
    font-size: 0.9em;      slightly smaller than the heading text
    */
}

/* Page metadata: "Version N" + "Effective Date: ..." rendered on one line */
.confluence-page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    font-size: 0.9em;
    color: #666;
    margin: 0.5em 0 1em;
}
.confluence-meta-version {
    font-weight: 600;
}

/* Confluence-emitted tables — borders are already covered by the global tr,td rule
   above; this adds the missing layout/padding so cells aren't cramped */
table.confluenceTable {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}
table.confluenceTable td.confluenceTd,
table.confluenceTable th.confluenceTh {
    padding: 0.5em 0.75em;
    vertical-align: top;
}

/* Bootstrap-style header background for any <th> cells */
table.confluenceTable th.confluenceTh {
    background-color: #f8f9fa;
    font-weight: 600;
    text-align: left;
}

/* Bootstrap-style striped rows — subtle alternating background */
table.confluenceTable tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Bootstrap-style hover */
table.confluenceTable tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
}