/* SchoolCMS – Shared content styles
   Styles used by more than one block or by blocks + templates together.
   Single-block styles belong in blocks/<slug>/<slug>.css instead. */

/* ── contentBlock wrapper (every block's root section) ───── */
/* House convention for vertical rhythm, in two halves:

   1. A block that shows the PAGE GROUND (text, gallery, staff, faq …)
      spaces itself with MARGIN top and bottom, so neighbouring blocks
      share one collapsed gap and no block adds root padding.

   2. A block that PAINTS ANYTHING full-bleed – a colour band, a photo,
      a gradient, a bleeding watermark – sets `margin: 0` in its own
      stylesheet and carries the whole rhythm in its own padding. Its
      paint must reach the block above and below it: a margin there
      leaves a white strip between two stacked bands, which the design
      never draws (callout-photo → callout-colour → quote abut at 0 in
      the inner template 10001:987). Same as the site chrome – the
      banner and footer sit flush against their neighbours. */
/* The inner-page H1 (.pageTitle, in the content column under the
   breadcrumbs) sits 24px above the first block in the design – tighter
   than the block rhythm. page.php only; the Sidebar template wraps
   .page-content in extra containers and keeps the rhythm. */
.pageTitle + .page-content > .contentBlock:first-child {
    margin-top: 24px;
}

.contentBlock {
    margin: var(--space-xl) 0;
}

/* The last block's clearance before the footer is .page-content's bottom
   pad (default.css) – which a BAND block as the last thing on the page
   does not want: its paint is meant to reach the footer the way the inner
   template draws the callout against it, and the pad left a strip of page
   ground between the two (Feedbucket #997711, #1003212). The band blocks
   are the ones whose stylesheets set margin: 0 – callout and quote on the
   inner pages; the home blocks live in front-page.php, which has no
   .page-content. */
.page-content:has(> .contentBlock.callout:last-child),
.page-content:has(> .contentBlock.quote:last-child) {
    padding-bottom: 0;
}

/* ── Page body: content that ISN'T blocks ─────────────────────
   House convention. The chrome – the header bar, the banner band, the
   footer – carries no vertical margin of its own, deliberately, so that a
   block which has to sit flush against it can. Everything that is NOT a
   block has to hold ITSELF clear, or it renders squashed against the bar
   above and the footer below: the 404 and the search results did exactly
   that (Feedbucket #986170, #983240 – the heading on the bar, the last
   link on the footer; found on Rokeby first, 2026-09-18, and ported here
   2026-09-22). So every template that puts bare markup in <main> – no
   banner above it, or no blocks to space themselves – wraps that markup in
   .pageBody. Blocks never need it: .contentBlock above is their rhythm,
   and .page-content adds the last one's clearance before the footer.
   .newsBody is the listing's own long-standing name for the same thing and
   shares the rule.

   Top and bottom only: the shorthand `padding: X 0` would wipe Bootstrap's
   .container side gutters and pull the whole body a gutter off the grid. */
.pageBody,
.newsBody {
    padding-top:    var(--space-xl);
    padding-bottom: var(--space-3xl);
}

/* ── Text columns (Text block, FAQ answers, Tabs content) ─────
   Every Full-toolbar wysiwyg carries Layout (Full Width / Columns) and
   Columns (2–4) fields, with Column 2–4 wysiwygs beside the block's own,
   which is column 1 – rendered by schoolcms_text_columns()
   (inc/utilities.php). They replace the classic theme's [column_divider]
   and [row_break] shortcodes.

   Equal columns 24px apart – the grid's gutter – so two, three and four
   columns land on the 12-column grid (6+6, 4+4+4, 3+3+3+3). Two sit side
   by side from 768px; three from 992px (stacked below, never 2 + 1); four
   go two by two at 768px and four across at 992px. Each column's own first
   and last margins are trimmed, so stacked or in rows the columns sit the
   same 24px apart – the gutter, and the space the Text block already puts
   above a heading that follows copy. The grid carries the copy's bottom
   margin itself, so a block in columns ends where its full-width copy
   would – 16px clear in the Text block and in a tab, flush in an FAQ
   answer, whose stylesheet trims its last child. */
.text-columns {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    gap:                   24px;
    margin-bottom:         16px;

    .text-column {
        > :first-child {
            margin-top: 0;
        }

        > :last-child {
            margin-bottom: 0;
        }
    }

    &.text-columns-2 {
        @media (min-width: 768px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    &.text-columns-3 {
        @media (min-width: 992px) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    &.text-columns-4 {
        @media (min-width: 768px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @media (min-width: 992px) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }
}

/* An iframe pasted into copy – a Google map, a video – keeps to its
   column. The width the editor gave it stands wherever it fits; anywhere
   narrower it shrinks with the column instead of running off the page,
   which a 600px map beside an address did from 768 to 1199 and on every
   phone (Contact Us, Feedbucket #1039058). */
.body-text iframe {
    max-width: 100%;
}

/* ── External-link marker, theme-wide ─────────────────────────
   Any block item whose link opens a new tab carries an external-link
   glyph in its top-right corner so visitors know they are leaving the
   site. Applies to card/tile anchors in every block; .button is
   excluded – buttons carry their own styling. The anchor is made
   position: relative so the marker pins to the item's own corner.

   The marker is the bare glyph, 14px in from the corner, with no chip
   and no fade behind it (Charlie's call, 2026-09-22 – the solid purple
   square squared off rounded cards and a corner fade tried after it
   looked messy). It takes the card's own ink – purple on the gold POI
   card, white on the rest, following the card's hover recolour – and is
   white over a photograph (an anchor holding an img) whatever the
   anchor's ink. It is the anchor's ::after; ::before is left to the
   components (the POI photo tile's scrim lives there).

   NOT A LINK IN RUNNING COPY. A link typed into a wysiwyg sits inside a
   paragraph, list item, table cell or heading, and pinned to the corner
   of an inline anchor the glyph floated over the line above – Leanne
   asked for it to go (Feedbucket #1029443, 2026-10-13). Cards and tiles
   are never inside text elements, so they keep it. */
.contentBlock a[target="_blank"]:not(.button):not(:is(p, li, td, th, h2, h3, h4, h5, h6, blockquote, figcaption, dd, dt) a) {
    position: relative;

    &::after {
        content:     '\f08e';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size:   14px;
        line-height: 1;
        position:    absolute;
        z-index:     3;
        top:         14px;
        right:       14px;
        color:       inherit;
    }

    &:has(img)::after {
        color: var(--color-white);
    }
}

/* ── Carousel base (carousel + link-carousel blocks) ─────── */
.schoolcms-carousel {
    .item img {
        width: 100%;
        height: auto;
    }
}

/* ── Staff (staff block + single-staff.php) ──────────────── */
.staffMember, .staffContent {
    margin-bottom: var(--space-lg);
}

.staff-meta {
    margin-bottom: var(--space-sm);

    .meta-label {
        font-weight: 700;
    }
    .email-value {
        word-break: break-all;
    }
}

/* ── Search form (searchform.php – search.php, 404, news-none) */
.searchform {
    display: flex;
    gap: var(--space-xs);
    max-width: 480px;
    margin-block: var(--space-md);

    .searchInput {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid var(--color-grey-300);
        border-radius: var(--border-radius-sm);
    }

    .searchSubmit {
        padding: 8px 16px;
        border: none;
        border-radius: var(--border-radius-sm);
        background: var(--color-purple);
        color: var(--color-white);
        cursor: pointer;

        &:hover {
            opacity: 0.85;
        }
    }
}

/* Owl carousels, theme-wide: always the hand cursor over items so visitors
   know they can drag/swipe (the quote block's cycle slideshow applies the
   same via quote.css), and brand-styled nav arrows + dots (arrow markup
   comes from js/utilities/carousel.js navText) */
.owl-carousel {
    cursor: pointer;

    .owl-item {
        cursor: pointer;
    }

    .owl-nav {
        button.owl-prev,
        button.owl-next {
            position:        absolute;
            top:             50%;
            transform:       translateY(-50%);
            width:           44px;
            height:          44px;
            display:         flex;
            align-items:     center;
            justify-content: center;
            border-radius:   var(--border-radius-pill);
            background:      var(--color-purple);
            color:           var(--color-white);
            font-size:       24px;
            line-height:     1;
            transition:      background var(--transition-base);

            &:hover {
                background: var(--color-plum);
            }
        }

        button.owl-prev {
            left:  var(--space-sm);
        }
        button.owl-next {
            right: var(--space-sm);
        }
    }

    /* Dot rail – measured off the flattened rail the design repeats at
       every carousel (POI 10001:1234, gallery 10001:1187, image/video
       10001:1326): four r=8 circles on 32px centres, i.e. 16px dots with
       a 16px gap, 24px clear of the items, #51284f active over #a7a9ac. */
    .owl-dots {
        display:         flex;
        justify-content: center;
        align-items:     center;
        gap:             var(--space-md);
        margin-top:      24px;

        .owl-dot span {
            display:       block;
            width:         16px;
            height:        16px;
            border-radius: 50%;
            background:    var(--color-grey-600b);
            transition:    background var(--transition-base);
        }
        .owl-dot.active span {
            background: var(--color-purple);
        }
    }
}