/* 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. */
.contentBlock a[target="_blank"]:not(.button) {
    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);
        }
    }
}