/* ==========================================================================
   Site Builder — frontend styles for the Menu Builder and Page Builder.
   Additive only: builds on the Oxford 2026 tokens (app.css) and components.
   ========================================================================== */

/* ---------- Menu: third level and deeper (desktop fly-outs) ---------- */
.ox-submenu li { position: relative; }
.ox-submenu .ox-submenu {
    top: -8px;
    inset-inline-start: calc(100% - 4px);
}
.ox-submenu li:hover > .ox-submenu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.ox-submenu .ox-has-sub > a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ox-s-2);
}
.ox-submenu .ox-subcaret { font-size: 12px; opacity: .55; }
.ox-menu a i:not(.ox-caret):not(.ox-subcaret) { margin-inline-end: 4px; }

/* Mobile drawer: nested accordions can be taller than the first-level cap */
.ox-drawer__menu ul li.is-open > ul { max-height: 1600px; }

/* ---------- Page: shared ---------- */
.pb-page { overflow-x: clip; }
.pb-actions { display: flex; flex-wrap: wrap; gap: var(--ox-s-3); margin-top: var(--ox-s-6); }
.pb-section-head { text-align: center; max-width: 680px; margin: 0 auto var(--ox-s-12); }
.pb-section-head .ox-lead { margin-inline: auto; }

.pb-preview-bar {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--ox-s-4);
    padding: 10px var(--ox-s-4);
    background: var(--ox-accent-050); color: var(--ox-gray-800);
    border-bottom: 1px solid var(--ox-accent);
    font-size: var(--ox-fs-sm); font-weight: 600;
}
.pb-preview-bar a { color: var(--ox-primary); text-decoration: underline; }

/* ---------- Default page banner (no hero block) ---------- */
.pb-pagehero--default { background-image: url('../oxford/img/banner/1.jpg'); }

/* ---------- Hero ---------- */
/* Uploaded background: an <img> under the brand overlay, so no inline style is needed. */
.pb-hero::before { z-index: 1; }
.pb-hero .ox-pagehero__shapes { z-index: 1; }
/* Scoped to .ox-scope so it outranks the site-wide `.ox-scope img { height: auto }`;
   the image then always fills the banner box (cropped, never stretched). */
.ox-scope .pb-hero__bg {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: center;
}
.pb-hero--compact { min-height: 260px; }
.pb-hero--normal  { min-height: 420px; }
.pb-hero--tall    { min-height: 620px; }
.pb-hero .pb-hero__title {
    color: #fff; font-size: var(--ox-fs-4xl); line-height: var(--ox-lh-tight);
    margin: 0 0 var(--ox-s-3); text-shadow: 0 8px 30px rgba(0,0,0,.25); max-width: 22ch;
}
.pb-hero__eyebrow {
    display: inline-block; margin-bottom: var(--ox-s-3);
    padding: 6px 14px; border-radius: var(--ox-radius-pill);
    background: rgba(255,255,255,.14); color: var(--ox-accent);
    font-size: var(--ox-fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.pb-hero__subtitle {
    color: rgba(255,255,255,.9); font-size: var(--ox-fs-lg); line-height: var(--ox-lh-base);
    max-width: 60ch; margin: 0;
}
.pb-hero__breadcrumb { margin-top: var(--ox-s-6); }
.pb-hero--center .ox-pagehero__inner,
.pb-hero--center .pb-hero__title { text-align: center; margin-inline: auto; }
.pb-hero--center .pb-hero__subtitle { margin-inline: auto; }
.pb-hero--center .pb-actions,
.pb-hero--center .ox-breadcrumb { justify-content: center; }

/* ---------- Text ---------- */
.pb-text--narrow { max-width: 820px; }
.pb-text--center { margin-inline: auto; text-align: center; }
.pb-text--narrow.pb-text--center .ox-prose { text-align: left; }
.pb-text--center .ox-eyebrow { display: flex; }
.pb-eyebrow--center { justify-content: center; }

/* ---------- Image + text ---------- */
.pb-split--image-left .pb-split__media { order: -1; }
.pb-split .ox-media { aspect-ratio: auto; }
@media (max-width: 992px) {
    .pb-split--image-left .pb-split__media { order: 0; }
}

/* ---------- Features ---------- */
/* Scoped to .ox-scope so it outranks the site-wide `.ox-scope a` link colour. */
.ox-scope .pb-feature__link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: var(--ox-s-4);
    color: var(--ox-primary); font-weight: 700; font-size: var(--ox-fs-sm);
}
.ox-scope .pb-feature__link:hover { color: var(--ox-secondary); }

/* ---------- Gallery ---------- */
.pb-gallery { gap: var(--ox-s-4); }
.pb-gallery__item {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 4 / 3; border-radius: var(--ox-radius);
    background: var(--ox-gray-100); box-shadow: var(--ox-shadow-xs);
}
.pb-gallery__item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--ox-dur) var(--ox-ease);
}
.pb-gallery__item:hover img { transform: scale(1.06); }
.pb-gallery__caption {
    position: absolute; inset-inline: 0; bottom: 0;
    padding: 28px 14px 10px;
    background: linear-gradient(transparent, rgba(8,39,66,.85));
    color: #fff; font-size: var(--ox-fs-sm); font-weight: 600;
}
@media (max-width: 768px) {
    .pb-gallery.ox-grid--3, .pb-gallery.ox-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Stats ---------- */
.pb-stats__heading { color: #fff !important; text-align: center; margin: 0 0 var(--ox-s-8); font-size: var(--ox-fs-2xl); }
.pb-stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ---------- Call to action ---------- */
.pb-cta {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: var(--ox-s-6);
    padding: var(--ox-s-12) var(--ox-s-12);
    border-radius: var(--ox-radius-xl);
    position: relative; overflow: hidden;
}
.pb-cta .pb-actions { margin-top: 0; }
.pb-cta__text { flex: 1 1 380px; }
.pb-cta .pb-cta__title { margin: 0 0 var(--ox-s-2); font-size: var(--ox-fs-2xl); line-height: var(--ox-lh-snug); }
.pb-cta p { margin: 0; font-size: var(--ox-fs-lg); }

.pb-cta--brand  { background: var(--ox-gradient-deep); color: #fff; }
.pb-cta--brand .pb-cta__title { color: #fff !important; }
.pb-cta--brand p  { color: rgba(255,255,255,.88); }
.pb-cta--accent { background: var(--ox-gradient-accent); color: var(--ox-gray-900); }
.pb-cta--accent .pb-cta__title { color: var(--ox-primary-800) !important; }
.pb-cta--light  { background: var(--ox-primary-050); border: 1px solid var(--ox-border); }
.pb-cta--light p { color: var(--ox-text-soft); }

@media (max-width: 768px) {
    .pb-cta { padding: var(--ox-s-8) var(--ox-s-6); }
    .pb-hero .pb-hero__title { font-size: var(--ox-fs-3xl); }
    .pb-hero--normal { min-height: 340px; }
    .pb-hero--tall { min-height: 480px; }
}