/* ============================================================
   v2.69 — Content overflow / mobile safety
   Fixes horizontal overflow on content pages (e.g. /about, where an
   imported <pre> officer-list was 1056px wide and would not wrap),
   plus any wide images/tables/iframes in imported prose. Targeted at
   prose containers only — deliberately NOT html/body overflow-x:hidden,
   which would disable the sticky header.
   ============================================================ */

body.theme-caleb-cudlc .article-prose,
body.theme-caleb-cudlc .about-prose,
body.theme-caleb-cudlc .deep-prose,
body.theme-caleb-cudlc .page-content {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Preformatted blocks: wrap instead of forcing a horizontal scrollbar */
body.theme-caleb-cudlc .article-prose pre,
body.theme-caleb-cudlc .deep-prose pre,
body.theme-caleb-cudlc .page-content pre {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    overflow-x: auto;
}

/* Media never exceeds its column */
body.theme-caleb-cudlc .article-prose img,
body.theme-caleb-cudlc .deep-prose img,
body.theme-caleb-cudlc .page-content img,
body.theme-caleb-cudlc .article-prose iframe,
body.theme-caleb-cudlc .deep-prose iframe {
    max-width: 100%;
    height: auto;
}

/* Wide tables scroll inside their own box rather than the page */
body.theme-caleb-cudlc .article-prose table,
body.theme-caleb-cudlc .deep-prose table,
body.theme-caleb-cudlc .page-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

/* ============================================================
   v2.73 — Justified body copy + "Caleb" watermark in blank spaces
   ============================================================ */

/* Justify prose so paragraphs are evenly aligned. Hyphenate to avoid
   large word-gaps; fall back to left-align on narrow phones where
   justification creates ugly rivers of whitespace. */
body.theme-caleb-cudlc .article-prose,
body.theme-caleb-cudlc .about-prose,
body.theme-caleb-cudlc .deep-prose,
body.theme-caleb-cudlc .page-content,
body.theme-caleb-cudlc .article-prose p,
body.theme-caleb-cudlc .deep-prose p,
body.theme-caleb-cudlc .page-content p {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}
@media (max-width: 560px) {
    body.theme-caleb-cudlc .article-prose,
    body.theme-caleb-cudlc .about-prose,
    body.theme-caleb-cudlc .deep-prose,
    body.theme-caleb-cudlc .page-content,
    body.theme-caleb-cudlc .article-prose p,
    body.theme-caleb-cudlc .deep-prose p,
    body.theme-caleb-cudlc .page-content p {
        text-align: left;
        -webkit-hyphens: manual;
        hyphens: manual;
    }
}

/* Large, faint serif "Caleb" watermark filling blank homepage areas.
   Reuses the editorial-page watermark treatment. Sections are given a
   stacking context so the mark sits behind the real content. */
body.theme-caleb-cudlc .voices.vc-section,
body.theme-caleb-cudlc .numbers,
body.theme-caleb-cudlc .hp-story {
    position: relative;
    overflow: hidden;
}
body.theme-caleb-cudlc .voices.vc-section > *,
body.theme-caleb-cudlc .numbers > *,
body.theme-caleb-cudlc .hp-story > * {
    position: relative;
    z-index: 1;
}
body.theme-caleb-cudlc .voices.vc-section::after,
body.theme-caleb-cudlc .numbers::after,
body.theme-caleb-cudlc .hp-story::after {
    content: "Caleb";
    position: absolute;
    bottom: -8%;
    right: -1%;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    font-size: clamp(120px, 20vw, 300px);
    line-height: 0.8;
    letter-spacing: -0.02em;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
/* Light sections: deep-gold mark. */
body.theme-caleb-cudlc .voices.vc-section::after,
body.theme-caleb-cudlc .numbers::after {
    color: var(--gold-deep, #876A11);
    opacity: 0.06;
}
/* Dark (navy) student-story band: warm-gold mark, lifted a touch. */
body.theme-caleb-cudlc .hp-story::after {
    color: var(--gold, #D4AF4F);
    opacity: 0.07;
    left: -1%;
    right: auto;
}

/* v2.74 — faint "Caleb" watermark in the editorial band directly under
   the quick-links row. */
body.theme-caleb-cudlc .editorial{position:relative;overflow:hidden}
body.theme-caleb-cudlc .editorial > *{position:relative;z-index:1}
body.theme-caleb-cudlc .editorial::after{
    content:"Caleb";
    position:absolute;
    bottom:-10%;
    left:-1%;
    font-family:"Cormorant Garamond",Georgia,serif;
    font-weight:500;
    font-size:clamp(120px,20vw,300px);
    line-height:.8;
    letter-spacing:-.02em;
    color:var(--gold-deep,#876A11);
    opacity:.05;
    pointer-events:none;
    user-select:none;
    z-index:0;
}

/* v2.75 — Study mega menu: the Colleges column now flows in two columns so the
   panel no longer runs off the bottom of the screen; panel is height-capped. */
body.theme-caleb-cudlc .mega-col--wide{flex:2.4 1 0}
body.theme-caleb-cudlc .mega-col--wide .mega-col__links{column-count:2;column-gap:4px}
body.theme-caleb-cudlc .mega-col--wide .mega-col__links a{break-inside:avoid}
body.theme-caleb-cudlc .public-nav__mega{max-height:82vh;overflow-y:auto}

/* ============================================================
   v2.99 — Friendlier framing for images embedded in page prose.
   Content authors paste raw <img> tags; without a cap/frame a tall
   portrait fills the whole column. Centre, cap, and frame them so
   every content page (centres, faculty, about, news…) looks tidy.
   Authors can opt a single image into full width with class="full".
   ============================================================ */
body.theme-caleb-cudlc .article-prose img,
body.theme-caleb-cudlc .deep-prose img,
body.theme-caleb-cudlc .page-content img {
    display: block;
    max-width: min(100%, 560px);
    height: auto;
    margin: 1.75rem auto;
    border-radius: 14px;
    border: 1px solid var(--rule-soft, rgba(7,23,58,.08));
    box-shadow: 0 10px 30px rgba(7,23,58,.12);
    background: #fff;
}
body.theme-caleb-cudlc .article-prose figure,
body.theme-caleb-cudlc .deep-prose figure,
body.theme-caleb-cudlc .page-content figure {
    margin: 1.75rem auto;
    max-width: min(100%, 560px);
    text-align: center;
}
body.theme-caleb-cudlc .article-prose figure img,
body.theme-caleb-cudlc .deep-prose figure img,
body.theme-caleb-cudlc .page-content figure img { margin: 0 auto; }
body.theme-caleb-cudlc .article-prose figcaption,
body.theme-caleb-cudlc .deep-prose figcaption,
body.theme-caleb-cudlc .page-content figcaption {
    margin-top: .6rem;
    font-size: 13px;
    color: var(--text-muted, #6b7280);
    font-style: italic;
}
/* Author opt-in: full content-width media */
body.theme-caleb-cudlc .article-prose img.full,
body.theme-caleb-cudlc .article-prose img.wide,
body.theme-caleb-cudlc .deep-prose img.full,
body.theme-caleb-cudlc .page-content img.full { max-width: 100%; }

@media (max-width: 600px){
    body.theme-caleb-cudlc .article-prose img,
    body.theme-caleb-cudlc .deep-prose img,
    body.theme-caleb-cudlc .page-content img {
        max-width: 100%;
        border-radius: 10px;
    }
}

/* =====================================================================
   v2.99.33 — Hero polish (loads last, overrides base theme.css)
   ===================================================================== */

/* Item 1: progress-bar dot synced to the admin slide-interval setting.
   Base theme.css hardcodes the fill animation to 7000ms; this longhand
   (declared later) overrides only the duration, driven by --hero-progress-ms
   set inline on .hero from $heroSlideMs. When autoplay is off or the
   interval is zero, .hero--noprogress shows the active dot statically
   filled instead of animating toward an advance that never happens. */
body.theme-caleb-cudlc .hero-dot.is-active::after { animation-duration: var(--hero-progress-ms, 7000ms); }
body.theme-caleb-cudlc .hero--noprogress .hero-dot.is-active::after { animation: none; width: 100%; }

/* Item 4: localized legibility scrim behind the hero text column.
   Guarantees white-text contrast even when an admin lowers a slide's
   overlay_opacity or uploads a bright/busy photo, without darkening the
   whole image. .hero-content is position:relative + z-index:4 (its own
   stacking context), so this absolutely-positioned ::before paints above
   the photo+overlay (z-index 1) and below the text (z-index:-1 within the
   context). position:absolute also keeps the pseudo out of the grid flow. */
body.theme-caleb-cudlc .hero-content { position: relative; }
body.theme-caleb-cudlc .hero-content::before {
    content: ''; position: absolute; inset: -6% -10% -6% -12%; z-index: -1;
    background: radial-gradient(120% 105% at 18% 68%,
        rgba(2, 8, 23, 0.45), rgba(2, 8, 23, 0.16) 46%, transparent 72%);
    pointer-events: none;
}
@media (max-width: 760px) {
    body.theme-caleb-cudlc .hero-content::before {
        inset: -4% -6%;
        background: linear-gradient(180deg, rgba(2, 8, 23, 0.10), rgba(2, 8, 23, 0.42));
    }
}

/* Item 5: scroll cue — subtle bobbing chevron at the bottom-centre of the
   hero. Sits below the pagination dots (dots at bottom:32px, cue at 6px, no
   overlap) and fades out via .hero.is-scrolled once the visitor scrolls.
   Hidden on mobile (tight space; natural scrolling makes it redundant). */
body.theme-caleb-cudlc .hero-scroll {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer; z-index: 5;
    opacity: 0.7; transition: opacity 400ms ease, transform 400ms ease;
}
body.theme-caleb-cudlc .hero-scroll:hover { opacity: 1; }
body.theme-caleb-cudlc .hero-scroll:focus-visible { outline: 3px solid #F5C557; outline-offset: 3px; border-radius: 50%; }
body.theme-caleb-cudlc .hero-scroll__chevron {
    width: 13px; height: 13px; margin-top: -5px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    filter: drop-shadow(0 1px 3px rgba(2, 8, 23, 0.5));
    animation: heroScrollBob 1.8s ease-in-out infinite;
}
body.theme-caleb-cudlc .hero.is-scrolled .hero-scroll {
    opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(10px);
}
@keyframes heroScrollBob {
    0%, 100% { transform: rotate(45deg) translate(0, 0); }
    50%      { transform: rotate(45deg) translate(3px, 3px); }
}
@media (max-width: 760px) { body.theme-caleb-cudlc .hero-scroll { display: none; } }
@media (prefers-reduced-motion: reduce) { body.theme-caleb-cudlc .hero-scroll__chevron { animation: none; } }

/* Item 6: single-source Ken-Burns. Base theme.css scales BOTH the slide
   (1.04, 8s) and the bg layer (1.08, 12s) at once — a compounded zoom that
   also scales the text. Neutralise the slide-level scale so only the photo
   layer drifts: calmer, lighter, and the headline no longer zooms. (Loads
   after base; identical specificity, so source order wins — no !important.) */
body.theme-caleb-cudlc .hero-slide,
body.theme-caleb-cudlc .hero-slide.is-active { transform: none; }

/* =====================================================================
   v2.99.37 — Imported-content image corrections (loads last)
   The v2.99 frame rule above frames EVERY <img>, which is right for real
   photos but wrong for the decorative emoji/icon images the WordPress
   import left behind (e.g. the "an1"/data-emoji arrows). Those were being
   inflated into large white framed blocks on pages such as the ICT,
   directorate, and centre pages. Keep them inline and unframed, and make
   inline-floated images behave on small screens.
   ===================================================================== */
body.theme-caleb-cudlc .article-prose img.an1,
body.theme-caleb-cudlc .article-prose img[data-emoji],
body.theme-caleb-cudlc .article-prose img.emoji,
body.theme-caleb-cudlc .deep-prose img.an1,
body.theme-caleb-cudlc .deep-prose img[data-emoji],
body.theme-caleb-cudlc .deep-prose img.emoji,
body.theme-caleb-cudlc .page-content img.an1,
body.theme-caleb-cudlc .page-content img[data-emoji],
body.theme-caleb-cudlc .page-content img.emoji {
    display: inline-block; width: 1.15em; height: 1.15em;
    min-width: 0; max-width: 1.15em; margin: 0 .08em;
    vertical-align: -.18em;
    border: 0; box-shadow: none; border-radius: 0; background: none;
}
/* Inline-floated content images: cap and un-float on phones so the
   surrounding text is not squeezed into a sliver. */
@media (max-width: 600px) {
    body.theme-caleb-cudlc .article-prose img[style*="float"],
    body.theme-caleb-cudlc .deep-prose img[style*="float"],
    body.theme-caleb-cudlc .page-content img[style*="float"] {
        float: none !important;
        margin: 1.25rem auto !important;
    }
}

/* =====================================================================
   v2.99.38 — Rebuild profile / welcome pages with a lead portrait.
   These imported pages (Vice-Chancellor, DVCs, Registrar, directorate &
   centre welcome pages such as ICT, etc.) are a heading + a portrait +
   biography text. Float that lead portrait beside the text — framed, like
   the homepage director block — instead of dumping a large centred square.
   Applies automatically to the FIRST image in any content page; decorative
   emoji and author-flagged full/wide images are excluded; stacks on phones.
   ===================================================================== */
body.theme-caleb-cudlc .article-prose > img:first-of-type:not(.an1):not([data-emoji]):not(.emoji):not(.full):not(.wide),
body.theme-caleb-cudlc .deep-prose   > img:first-of-type:not(.an1):not([data-emoji]):not(.emoji):not(.full):not(.wide),
body.theme-caleb-cudlc .page-content > img:first-of-type:not(.an1):not([data-emoji]):not(.emoji):not(.full):not(.wide) {
    float: left;
    width: min(38%, 300px);
    margin: .35rem 1.75rem 1rem 0;
}
/* contain the float so the breadcrumb / next section doesn't ride up beside it */
body.theme-caleb-cudlc .article-prose::after,
body.theme-caleb-cudlc .deep-prose::after,
body.theme-caleb-cudlc .page-content::after { content: ''; display: block; clear: both; }
/* phones: stack the portrait above the text, centred */
@media (max-width: 700px) {
    body.theme-caleb-cudlc .article-prose > img:first-of-type:not(.an1):not([data-emoji]):not(.emoji),
    body.theme-caleb-cudlc .deep-prose   > img:first-of-type:not(.an1):not([data-emoji]):not(.emoji),
    body.theme-caleb-cudlc .page-content > img:first-of-type:not(.an1):not([data-emoji]):not(.emoji) {
        float: none;
        width: min(100%, 360px);
        margin: 1.25rem auto;
    }
}

/* =====================================================================
   v2.99.40 — Separate, beautifully-framed content images (no slider).
   Each photo stays exactly where it is in the page; it just gets an
   elegant framed-print treatment — a soft white mat, a hairline border,
   a layered shadow, and a gentle lift on hover. Emoji/icons excluded;
   the lead portrait still floats beside the text (rule above).
   ===================================================================== */
body.theme-caleb-cudlc .article-prose img:not(.an1):not([data-emoji]):not(.emoji),
body.theme-caleb-cudlc .deep-prose   img:not(.an1):not([data-emoji]):not(.emoji),
body.theme-caleb-cudlc .page-content img:not(.an1):not([data-emoji]):not(.emoji) {
    padding: 7px;
    background: #fff;
    border: 1px solid rgba(7, 23, 58, .09);
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(7, 23, 58, .06),
        0 10px 24px rgba(7, 23, 58, .10),
        0 26px 60px rgba(7, 23, 58, .10);
    transition: transform .28s ease, box-shadow .28s ease;
}
body.theme-caleb-cudlc .article-prose img:not(.an1):not([data-emoji]):not(.emoji):hover,
body.theme-caleb-cudlc .deep-prose   img:not(.an1):not([data-emoji]):not(.emoji):hover,
body.theme-caleb-cudlc .page-content img:not(.an1):not([data-emoji]):not(.emoji):hover {
    transform: translateY(-4px);
    box-shadow:
        0 2px 4px rgba(7, 23, 58, .08),
        0 18px 36px rgba(7, 23, 58, .16),
        0 38px 80px rgba(7, 23, 58, .14);
}
@media (prefers-reduced-motion: reduce) {
    body.theme-caleb-cudlc .article-prose img:not(.an1):not([data-emoji]):not(.emoji),
    body.theme-caleb-cudlc .deep-prose   img:not(.an1):not([data-emoji]):not(.emoji),
    body.theme-caleb-cudlc .page-content img:not(.an1):not([data-emoji]):not(.emoji) { transition: none; }
    body.theme-caleb-cudlc .article-prose img:hover,
    body.theme-caleb-cudlc .deep-prose img:hover,
    body.theme-caleb-cudlc .page-content img:hover { transform: none; }
}