/* 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: a block WITHOUT a solid background
   (the page ground shows through – text, gallery, staff, faq …) spaces
   itself with MARGIN top and bottom, so neighbouring blocks share one gap
   (margins collapse) and a block never adds padding of its own at the
   root. A block that paints a full-bleed band (callout) sets `margin: 0`
   in its own stylesheet and lets the band's padding carry the rhythm – like
   the site chrome (banner, footer), bands sit flush against what is above
   and below them. */
.contentBlock {
    margin: var(--space-xl) 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 (found on Rokeby, 2026-09-18). 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);
}

/* ── External-link marker, theme-wide ─────────────────────────
   Any block item whose link opens a new tab carries an external-link
   icon chip 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 chip pins to the item's own corner.

   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 chip sat on the words beside it (found on
   Burlington, Feedbucket #1029443; ported 2026-10-19). Cards and tiles
   are never inside text elements, so they keep it. The exclusion sits in
   :where() so it adds no specificity: the Google-map opt-out below wins
   only on source order at this rule's weight, and would lose to a
   heavier one. */
.contentBlock a[target="_blank"]:not(.button):where(: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:         0;
        right:       0;
        padding:     8px 10px;
        background:  var(--color-black);
        color:       var(--color-white);
    }
}

/* Google's own links inside a map – the logo, Terms, Report a map error –
   open new tabs too, but they are Google's chrome, not a block item, so
   the chip stays off them (it was stamping the map's corners, 2026-09-25). */
.contentBlock .googleMap a[target="_blank"]::after {
    content: none;
}

/* ── 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);
        border-radius: var(--border-radius-sm);
    }

    .searchSubmit {
        padding: 8px 16px;
        border: none;
        border-radius: var(--border-radius-sm);
        background: var(--color-black);
        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-black);
            color:           var(--color-white);
            font-size:       24px;
            line-height:     1;
            transition:      background var(--transition-base);

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

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

    .owl-dots {
        display:         flex;
        justify-content: center;
        align-items:     center;
        gap:             var(--space-sm);
        margin-top:      var(--space-lg);

        .owl-dot span {
            display:       block;
            width:         11px;
            height:        11px;
            border-radius: 50%;
            background:    var(--color-grey);
        }
        .owl-dot.active span {
            background: var(--color-orange);
        }
    }
}

/* ── Text columns (the Text block, each FAQ answer, each tab) ─────
   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));
        }
    }
}