/* ==========================================================================
   wp-content.css — WordPress-specific content styling

   WHY THIS FILE IS SEPARATE
   style.css, home.css, program.css and academics.css are byte-for-byte copies
   of the mockup stylesheets, kept that way so the design can be re-synced from
   new-redesign/ without merge pain. Anything WordPress needs that the static
   mockup never did belongs here instead.

   THE PROBLEM THIS SOLVES
   Every UB block wraps its own content in .container (--measure wide, with
   --gutter side padding; both defined in style.css). Core blocks — headings, paragraphs, lists an editor adds between
   sections — do not. They render as bare children of .site-main, so with no
   rule of their own they stretch the full viewport width and sit flush against
   both edges. On a wide monitor that is an unreadable measure; on a phone the
   text touches the screen edge.
   ========================================================================== */

/* ------------------------------------------------------- flow constraint
   Give bare core blocks the same measure and gutters as .container. Scoped to
   direct children so a core block nested INSIDE a UB block (which already has
   its own container) is left alone. */
.site-main > h1,
.site-main > h2,
.site-main > h3,
.site-main > h4,
.site-main > h5,
.site-main > h6,
.site-main > p,
.site-main > ul,
.site-main > ol,
.site-main > dl,
.site-main > blockquote,
.site-main > pre,
.site-main > figure,
.site-main > table,
.site-main > hr,
.site-main > .wp-block-image,
.site-main > .wp-block-quote,
.site-main > .wp-block-table,
.site-main > .wp-block-embed,
.site-main > .wp-block-columns,
.site-main > .wp-block-group,
.site-main > .wp-block-buttons,
.site-main > .wp-block-separator {
    width: 100%;
    /* The same tokens .container uses, not a copy of its numbers. These were
       hardcoded 1280px/20px and silently fell out of step when the site
       measure changed, which put bare core blocks on a different grid from the
       UB blocks above and below them on the same page. */
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Prose wants a shorter measure than the full layout grid. Long lines are hard
   to track back to the next line; ~68 characters is comfortable. */
.site-main > p,
.site-main > ul,
.site-main > ol,
.site-main > dl,
.site-main > blockquote {
    max-width: 60rem;
    line-height: 1.7;
}

.site-main > h1,
.site-main > h2,
.site-main > h3,
.site-main > h4 {
    max-width: 60rem;
    line-height: 1.2;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

.site-main > h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; }
.site-main > h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; }

/* Blocks are full-bleed; a heading directly after one needs breathing room
   that its own margin cannot provide against a coloured band. */
.site-main > section + h2,
.site-main > div + h2,
.site-main > nav + h2 {
    margin-top: 3.5rem;
}

/* --------------------------------------------------------- overflow guards
   Long unbroken tokens — a URL, a block name, a class list — are the usual
   cause of a page scrolling sideways. Break them rather than let one string
   set the width of the document.

   Deliberately NO `overflow-x: hidden` on .site-main. Setting one axis to
   hidden makes the other compute to `auto`, which turns the element into a
   scroll container and breaks `position: sticky` on the jump bar inside it.
   .main-content-wrapper already clips the horizontal axis, so it would be
   redundant as well as harmful. */
.site-main > p,
.site-main > li,
.site-main > h1,
.site-main > h2,
.site-main > h3,
.site-main > h4 {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Wide content scrolls inside its own box instead of widening the page. */
.site-main > pre,
.site-main > table,
.site-main > .wp-block-table {
    overflow-x: auto;
    max-width: 100%;
}

/* -------------------------------------------- photographic hero legibility
   style.css gives `.hero-overlay` a purple gradient but never gives it
   position or size. `.college-page-hero` is a flex column, so the overlay
   becomes a zero-height flex item and the gradient never paints — text sits
   over the photograph at full brightness.

   In the static mockup that went unnoticed because each college hero used a
   hand-picked dark image. The UB Page Hero block lets an editor choose ANY
   image, so a bright one makes the heading unreadable. This applies the
   positioning the gradient always assumed.

   NOTE: this is a deliberate visual change from the mockup — the college hero
   now carries the purple wash the CSS intended all along. */
.college-page-hero {
    position: relative;
    isolation: isolate;
}

.college-page-hero > .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Keep the copy above the wash. */
.college-page-hero > .college-hero-inner {
    position: relative;
    z-index: 1;
}

/* A readable floor regardless of the image, without flattening the gradient. */
.college-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(20, 8, 34, 0.35) 0%, rgba(20, 8, 34, 0.55) 100%);
    pointer-events: none;
}

/* ------------------------------------------------------------ inline code
   Used throughout the element guides to name a block. Never styled by the
   mockup because the static pages had no need for it. */
.site-main code,
.eg-inline-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: #f1f3f5;
    color: var(--ub-purple-dark, #4a0a3d);
    padding: 0.15em 0.4em;
    border-radius: 2px;
    overflow-wrap: break-word;
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 768px) {
    .site-main > h1,
    .site-main > h2,
    .site-main > h3,
    .site-main > h4,
    .site-main > p,
    .site-main > ul,
    .site-main > ol {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    .site-main > h2 { margin-top: 2rem; }
    .site-main > section + h2,
    .site-main > div + h2,
    .site-main > nav + h2 { margin-top: 2.5rem; }
}