/* ==========================================================================
   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 left and right edges as .container, so prose
   runs the full container width like the blocks around it (no reading-measure
   cap: the site owner wants no unused width). Scoped to direct
   children so a core block nested INSIDE a UB block (which already has its
   own container) is left alone. */
:root {
    --content-left: max(var(--gutter), calc((100% - var(--measure)) / 2 + var(--gutter)));
    --content-measure: calc(100% - 2 * var(--content-left));
}

.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%;
    max-width: var(--content-measure);
    margin-left: var(--content-left);
    margin-right: auto;
    /* No inline padding: --content-measure already leaves a gutter on both
       sides, and a padding-right on top of it stopped phone text 44px short of
       the right edge while it started 22px from the left. */
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* Wider core blocks that can use the full container grid if needed.
   Their box runs from --content-left to the same distance from the right, so
   the right edge is the .container content edge at every width (1380 at 1440).
   The old min(--measure, 100% - 2 * gutter) box started at --content-left but
   was sized as if it started at the gutter, so it ended 56px past the
   container at 1440, and a wide table widened the page. */
.site-main > table,
.site-main > .wp-block-table,
.site-main > .wp-block-columns,
.site-main > .wp-block-group {
    max-width: calc(100% - 2 * var(--content-left));
}

/* Prose typography */
.site-main > p,
.site-main > ul,
.site-main > ol,
.site-main > dl,
.site-main > blockquote {
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.site-main > ul,
.site-main > ol {
    padding-left: 1.5rem;
    margin-bottom: 2rem;
}

.site-main > h1,
.site-main > h2,
.site-main > h3,
.site-main > h4 {
    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;
}

/* Breathing room when bare prose, lists, columns, or tables precede a section, callout, or container */
.site-main > p + section,
.site-main > p + div,
.site-main > ul + section,
.site-main > ul + div,
.site-main > ol + section,
.site-main > ol + div,
.site-main > figure + section,
.site-main > figure + div,
.site-main > .wp-block-columns + section,
.site-main > .wp-block-columns + div,
.site-main > .wp-block-table + section,
.site-main > .wp-block-table + div {
    margin-top: 4rem;
}

/* Multi-column layout breathing room and gap */
.site-main > .wp-block-columns {
    display: flex;
    gap: 48px;
    margin-top: 3rem;
    margin-bottom: 4rem;
    align-items: flex-start;
}

@media (max-width: 782px) {
    .site-main > .wp-block-columns {
        flex-direction: column;
        gap: 24px;
        margin-top: 2rem;
        margin-bottom: 2.5rem;
    }
}

/* ------------------------------------------------------------ content lists
   style.css strips markers from every ul (navigation lists are the common
   case). Lists that are CONTENT get them back: core list blocks anywhere in
   the page. The class-less lists in split-layout columns, accordion bodies and
   callouts are styled with those blocks, in content-blocks.css. Square markers
   in UB Purple: square to match the 0px-radius form language, purple because
   UB Blue is under 3:1 on white.
   `main`, not .site-main: program pages render into main.page-program-detail. */
main ul.wp-block-list {
    list-style: square outside;
}
main ol.wp-block-list {
    list-style: decimal outside;
}
/* Room for the marker inside the column. `* { padding: 0 }` left these flush,
   so markers and two-digit numbers hung outside the text edge. */
main .wp-block-list {
    padding-left: 1.5rem;
}
main .wp-block-list li::marker {
    color: var(--ub-purple);
}
main .wp-block-list li + li {
    margin-top: 6px;
}
.college-details__body .member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 1.25rem;
    margin-bottom: 1.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.
   No max-width here: 100% plus the --content-left margin was itself wider
   than the page. The width comes from the "wider core blocks" rule above. */
.site-main > pre,
.site-main > table,
.site-main > .wp-block-table {
    overflow-x: auto;
}

/* --------------------------------------------------------- core/button
   No theme rule existed, so every core button was WordPress's #32373C 9999px
   pill. These restate the .btn / .btn-primary / .btn-outline tokens from
   style.css, so the Theme Design button settings reach them too. Scoped to
   `main` (not .site-main) so program pages, main.page-program-detail, get them. */
main .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(12px * var(--btn-pad-scale)) calc(28px * var(--btn-pad-scale));
    border: var(--btn-border-width) solid var(--ub-purple);
    border-radius: var(--btn-radius);
    background-color: var(--ub-purple);
    color: var(--white);
    font-family: inherit;
    font-size: calc(1rem * var(--btn-font-scale));
    font-weight: var(--btn-weight);
    letter-spacing: var(--btn-tracking);
    text-transform: var(--btn-transform);
    line-height: 1.3;
    text-decoration: none;
    transition: var(--transition);
}

main .wp-block-button__link:hover,
main .wp-block-button__link:focus-visible {
    background-color: var(--ub-purple-dark);
    border-color: var(--ub-purple-dark);
    color: var(--white);
    transform: translateY(calc(var(--btn-lift) * -1));
    box-shadow: var(--shadow-md);
}

main .wp-block-button.is-style-outline > .wp-block-button__link {
    background-color: transparent;
    border-color: var(--ub-purple);
    color: var(--ub-purple);
}

main .wp-block-button.is-style-outline > .wp-block-button__link:hover,
main .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
    background-color: var(--ub-purple);
    color: var(--white);
}

/* -------------------------------------------------- core/image: logo mark
   Registered in functions.php (ubridgeport_block_styles). max-height rather
   than height, so a mark smaller than the cap keeps its own size instead of
   being upscaled; object-fit keeps the proportions if an editor also set a
   width in the block. */
.wp-block-image.is-style-ub-mark {
    margin-top: 0;
    margin-bottom: 20px;
}

.wp-block-image.is-style-ub-mark img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
    object-position: left center;
    border-radius: 0;
}

@media (max-width: 768px) {
    .wp-block-image.is-style-ub-mark img {
        max-height: 48px;
    }

    main .wp-block-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    main .wp-block-button,
    main .wp-block-button__link {
        width: 100%;
    }
}

/* A logo mark with a column to itself beside a column of text (UB Votes on
   Civic Engagement). Left alone it floats at 64px in the top corner of a
   half-width column. Here the mark column narrows to a tinted tile as tall as
   the text, the mark is centred on it, and the text centres beside it. Rows of
   marks only (no heading or paragraph in any column) keep the plain mark. */
.wp-block-columns:has(> .wp-block-column > :is(h2, h3, p)) > .wp-block-column:has(> .wp-block-image.is-style-ub-mark:only-child) {
    flex: 0 0 clamp(200px, 32%, 300px);
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: #F7F5FA;
    border: 1px solid rgba(89, 45, 130, .12);
    box-sizing: border-box;
}

.wp-block-columns:has(> .wp-block-column > :is(h2, h3, p)) > .wp-block-column:has(> .wp-block-image.is-style-ub-mark:only-child) > .wp-block-image {
    margin: 0;
}

.wp-block-columns:has(> .wp-block-column > :is(h2, h3, p)) > .wp-block-column:has(> .wp-block-image.is-style-ub-mark:only-child) img {
    max-height: 88px;
    object-position: center;
}

.wp-block-columns:has(> .wp-block-column > .wp-block-image.is-style-ub-mark:only-child) > .wp-block-column:has(> :is(h2, h3, p)) {
    align-self: center;
}

@media (max-width: 781px) {
    .wp-block-columns:has(> .wp-block-column > :is(h2, h3, p)) > .wp-block-column:has(> .wp-block-image.is-style-ub-mark:only-child) {
        padding: 24px;
    }

    .wp-block-columns:has(> .wp-block-column > :is(h2, h3, p)) > .wp-block-column:has(> .wp-block-image.is-style-ub-mark:only-child) img {
        max-height: 64px;
    }
}

/* ------------------------------------------------------------ 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) {
    /* No extra padding-left here: --content-left already resolves to the
       gutter at this width, so padding on top of it started bare text at 44px
       while every block and image started at 22px. */
    .site-main > h2 { margin-top: 2rem; }
    .site-main > section + h2,
    .site-main > div + h2,
    .site-main > nav + h2 { margin-top: 2.5rem; }
}

/* ------------------------------------------------------------ standard content pages & glossary */
body.page-template-default .site-main {
    background-color: var(--white, #ffffff);
    padding-top: 0;
    padding-bottom: 5rem;
    min-height: 70vh;
}

/* Remove bottom padding when the page concludes with a full-width block or section (e.g. CTA band) */
body.page-template-default .site-main:has(> section:last-child),
body.page-template-default .site-main:has(> .cta-section:last-child),
body.page-template-default .site-main:has(> .alignfull:last-child),
body.page-template-default .site-main:has(> .wp-block-group.alignfull:last-child) {
    padding-bottom: 0;
}

.site-main > section:first-child,
.site-main > .college-page-hero,
.site-main > .ub-formpanel,
.site-main > .hero,
.site-main > .slider,
.site-main > .pg-hero,
.site-main > .hero-carousel {
    margin-top: 0;
}

.site-main > p.breadcrumbs,
.site-main > .breadcrumbs {
    max-width: var(--content-measure);
    margin-left: var(--content-left);
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-light, #6b7280);
    line-height: 1.5;
}

.site-main > h1:first-child,
.site-main > h1.wp-block-heading:first-child {
    margin-top: 2.5rem;
}

.site-main > p:first-child {
    margin-top: 2rem;
}

.site-main > p.breadcrumbs a,
.site-main > .breadcrumbs a {
    color: var(--ub-purple, #592d82);
    text-decoration: none;
    font-weight: 500;
}

.site-main > p.breadcrumbs a:hover,
.site-main > .breadcrumbs a:hover {
    text-decoration: underline;
}

.site-main > p.breadcrumbs strong,
.site-main > .breadcrumbs strong {
    color: var(--text-main, #1d2430);
    font-weight: 600;
}

.site-main > h1:first-of-type,
.site-main > h1.wp-block-heading {
    max-width: var(--content-measure);
    margin-left: var(--content-left);
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: var(--ub-purple-dark, #2d1445);
    line-height: 1.15;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.site-main > p.lead {
    max-width: var(--content-measure);
    margin-left: var(--content-left);
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    font-size: 1.15rem;
    color: var(--text-light, #4b5563);
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.glossary-container {
    gap: 2.5rem;
    margin-top: 0.5rem;
    margin-bottom: 3rem;
}

.glossary-pathway-callout {
    background: #fbf9fd !important;
    border-left: 4px solid var(--ub-purple, #592d82) !important;
    border-radius: 0 !important;
    padding: 1.25rem 1.5rem !important;
    margin: 2rem 0 !important;
}

.glossary-pathway-callout p {
    color: var(--ub-purple-dark, #2d1445) !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

.glossary-cta-box {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    padding: 1.75rem 2rem !important;
    margin: 2.5rem 0 !important;
}

.glossary-cta-box h3 {
    margin-top: 0 !important;
    color: var(--ub-purple-dark, #2d1445) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
}

.glossary-cta-box p {
    color: var(--text-light, #4b5563) !important;
    line-height: 1.6 !important;
    margin-bottom: 1.25rem !important;
}

.glossary-related-panel {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    padding: 1.5rem !important;
    position: sticky !important;
    top: 90px !important;
}

.glossary-related-panel h3 {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    color: var(--ub-purple-dark, #2d1445) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #e9d8fd !important;
    padding-bottom: 0.5rem !important;
}

.glossary-related-links {
    font-size: 0.92rem !important;
    line-height: 1.8 !important;
    color: var(--text-light, #4b5563) !important;
}

.glossary-related-links a {
    color: var(--ub-purple, #592d82) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.glossary-related-links a:hover {
    text-decoration: underline !important;
    color: var(--ub-purple-dark, #2d1445) !important;
}

.glossary-all-link {
    margin-top: 1.25rem !important;
    margin-bottom: 0 !important;
    font-size: 0.88rem !important;
}

.glossary-all-link a {
    color: var(--ub-purple, #592d82) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.glossary-all-link a:hover {
    text-decoration: underline !important;
}

/* ------------------------------------------------------------ policy & legal document pages */
.site-main > p.policy-meta {
    max-width: var(--content-measure);
    margin-left: var(--content-left);
    margin-right: auto;
    font-size: 0.92rem;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--ub-purple, #592d82);
    border-radius: 0;
    padding: 10px 16px;
    margin-top: -1rem;
    margin-bottom: 1.5rem;
    box-sizing: border-box;
}

.site-main > p.policy-toc {
    max-width: var(--content-measure);
    margin-left: var(--content-left);
    margin-right: auto;
    font-size: 0.9rem;
    color: #4b5563;
    background: #faf8fc;
    border: 1px solid #eae2f2;
    border-radius: 0;
    padding: 14px 18px;
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
    line-height: 1.8;
    box-sizing: border-box;
}

.site-main > p.policy-toc a {
    color: var(--ub-purple, #592d82);
    font-weight: 600;
    text-decoration: none;
}

.site-main > p.policy-toc a:hover {
    text-decoration: underline;
}

.site-main > p.policy-notice {
    max-width: var(--content-measure);
    margin-left: var(--content-left);
    margin-right: auto;
    background: #fdf4f6;
    border: 1px solid #fecdd3;
    border-left: 4px solid #be123c;
    border-radius: 0;
    padding: 14px 18px;
    color: #9f1239;
    font-size: 0.98rem;
    margin-top: 1.25rem;
    margin-bottom: 1.5rem;
    box-sizing: border-box;
}

.site-main > p.policy-contact-box {
    max-width: var(--content-measure);
    margin-left: var(--content-left);
    margin-right: auto;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--ub-purple, #592d82);
    border-radius: 0;
    padding: 18px 22px;
    margin-top: 1.25rem;
    margin-bottom: 2.5rem;
    box-sizing: border-box;
}


/* ------------------------------------------------- links inside running text
   WCAG 1.4.1: a link in a block of text cannot be told from the text by colour
   alone (the text-safe blue is only 3.3:1 against body copy). Underline plain
   links in paragraphs and lists. `a:not([class])` leaves buttons, cards, pills
   and nav lists, which carry a class, un-underlined. Breadcrumbs and the
   glossary link rows keep their own treatment. */
.site-main > :is(p:not(.breadcrumbs), ul, ol) a:not([class]),
.wp-block-paragraph a:not([class]),
.ub-page-title-desc p a:not([class]),
.ub-split-sec .split-content :is(p, li) a:not([class]) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.site-main > :is(p:not(.breadcrumbs), ul, ol) a:not([class]):hover,
.wp-block-paragraph a:not([class]):hover,
.ub-page-title-desc p a:not([class]):hover,
.ub-split-sec .split-content :is(p, li) a:not([class]):hover {
    text-decoration-thickness: 2px;
}


/* ------------------------------------------------ media never outgrow a column
   Content images and video can be wider than the column they sit in: an image
   inserted at "Full size" carries width="2560", and a classic-editor caption
   ([caption] shortcode) prints its wrapper with an inline width copied from the
   image (style="width: 2038px"), so even img { max-width: 100% } resolves
   against a 2038px box. Cap both, everywhere content renders.
   :where() keeps this at zero specificity: any block that sizes its own media
   (covers, logo walls, galleries) still wins with a plain class rule. Iframes
   get the width cap only - height: auto would collapse an embed to 150px. */
:where(.site-main) :where(img, video) {
    max-width: 100%;
    height: auto;
}
:where(.site-main) :where(iframe, embed, object, table) {
    max-width: 100%;
}
.wp-caption {
    max-width: 100%;
    box-sizing: border-box;
}
.wp-caption img {
    display: block;
    max-width: 100%;
    height: auto;
}
.wp-caption-text {
    margin: 0.6rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted, #5b6470);
}
/* Classic alignment classes. Floats only while there is room for text beside
   them; on a phone the image takes the column. */
.alignleft  { float: left;  margin: 0.35em 1.6em 1em 0; }
.alignright { float: right; margin: 0.35em 0 1em 1.6em; }
.aligncenter { display: block; margin-inline: auto; }
@media (max-width: 640px) {
    .alignleft,
    .alignright { float: none; margin: 1.6em 0; }
}