@charset "UTF-8";
/*!
Theme Name: 	Institute of Education & Bruce College
Description: 	A Zesty Theme
Version: 		main 327e98a0b5cea979a83de2b7af05c8d88e9f6cfe
Author: 		Zesty x Granite
Author URI: 	https://www.simplyzesty.com
*/
/*
Gutenberg Content alignment widths
The width figures here need to correspond to whats in  theme.json

the outer container ID or class MUST be one that's ine th hardcoded twig for ALL templates
Otherwise, you need to set rules for each different page templates outer container.

That might be <div id="main-content">, <div class="wysiwyg">, <article> but it needs to be consistent.

YOU MUST CHANGE `#main-content  article` TO SUIT YOUR THEME MARKUP
*/
/* Set P tags to use contentWidth by default even though that's not the wordpress way */
#main-content > * {
  margin-left: auto;
  margin-right: auto;
}

/* .wrapper-title-sticky (FE-team sticky course-title bar, single-course.twig) is
   position:fixed + inset-inline:0 and must span the full viewport - the chopsite's
   own #main-content padding rule likewise excludes [class^=wrapper-] elements. */
#main-content > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.grid-container):not(.override-wp-width):not(.wrapper-title-sticky)) {
  max-width: var(--wp--style--global--content-size);
}

#main-content > .alignwide {
  max-width: var(--wp--style--global--wide-size);
}

#main-content > .alignfull {
  max-width: none;
}

/*#main-content  > .ztyalign {*/
/*    margin-left: auto !important;*/
/*    margin-right: auto !important;*/
/*}*/
/*#main-content  > .alignnone {*/
/*    max-width: 938px;*/
/*}*/
/* .sty.alignwide {*/
/*    max-width: 1408px;*/
/*}*/
/*body #main-content  > .alignfull {*/
/*    max-width: none;*/
/*}*/
@media screen and (width <= 39.9375em) {
  body #main-content > .alignwide {
    margin-left: 20px;
    margin-right: 20px;
  }
  body #main-content > .alignfull {
    max-width: none;
  }
}
#main-content > .alignleft {
  float: left;
  margin-right: 2em;
}

#main-content > .alignright {
  float: right;
  margin-right: 2em;
}

/** This rule removes a max-width (from above) for any of our custom ACF blocks that start with #block_ **/
body #main-content > [id^=block_] {
  max-width: none;
}

/* Override Subnav for Dyanmic In Page LInk */
.cell div.in_page_nav nav ul.in-page-nav > li {
  background-color: var(--nav-submenu-surface);
  border-bottom: 1px inset var(--nav-submenu-text);
}

.cell div.in_page_nav nav ul.in-page-nav > li a {
  /*background: #F8F9FA;*/
  background: var(--colour-brand-accent-light-grey);
}

.cell div.in_page_nav nav ul.in-page-nav > li a:hover,
.cell div.in_page_nav nav ul.in-page-nav > li:hover a {
  background: var(--colour-brand-accent-primary);
  color: var(--colour-brand-accent-light-grey);
}

hr.sep {
  border-top: 0;
  border-bottom-color: var(--colour-ui-divider);
}

hr.sep.wp-block-separator,
hr.wp-block-separator.sep {
  border-bottom: solid 1px var(--colour-ui-divider);
}

.m-t-neg6 {
  position: relative;
  z-index: 1;
  margin-top: -6rem;
}

/* Pill palette expansion -- accent-5/6/7 extend the 4 chopsite variants */
.pill--accent-5 {
  --pill-surface: #B3E4C3;
}

.pill--accent-6 {
  --pill-surface: #FFD4B3;
}

.pill--accent-7 {
  --pill-surface: #F5B8D0;
}

/* Share block starts hidden; JS reveals it once it has evaluated API support */
.article-share.sharetargets {
  display: none;
}

/* === Article body block alignment (single post templates) ===
 * .content-flow--article-body sits full-width inside .wrapper-section,
 * outside the FE column constraint. Child elements implement the
 * WordPress alignment model: default=contentSize, wide=wideSize, full=100%.
 */
.content-flow--article-body > * {
  max-width: var(--wp--style--global--content-size, 938px);
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}

.content-flow--article-body > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.override-wp-width)) {
  max-width: var(--wp--style--global--content-size, 938px);
}

.content-flow--article-header {
  padding-bottom: var(--content-flow-spacing);
}

.content-flow--article-body > .alignwide {
  max-width: var(--wp--style--global--wide-size, 1408px);
}

.content-flow--article-body > .alignfull {
  max-width: 100%;
  width: 100%;
}

.content-flow--article-body > [id^=block_] {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}

.content-flow--article-body > .alignleft {
  float: left;
  margin-right: 2em;
}

.content-flow--article-body > .alignright {
  float: right;
  margin-left: 2em;
}

@media screen and (width <= 39.9375em) {
  .content-flow--article-body > .alignwide {
    margin-inline: 20px;
  }
}
/* === Video Embeds in HTML WYSIWYG controls added by customer =========== */
/* No max-width here: as a block element the container never exceeds its
 * parent, and an explicit 100% would override the equal-specificity
 * .content-flow--article-body > * contentSize cap declared above. */
.ioe-video-container {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.ioe-video-container iframe,
.ioe-video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* === Embed responsiveness =====================================================
 * WordPress's responsive-embed spacer mechanism:
 *   Inline CSS on <body.wp-embed-responsive>: sets ::before { padding-top: 56.25% }
 *   on .wp-embed-aspect-16-9 .wp-block-embed__wrapper, then absolutely-positions
 *   the iframe inside. The wrapper height = ::before padding = 16:9 of width.
 *
 * The chopsite main.min.css resets this with the same-specificity rule:
 *   .wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper::before
 *     { padding-top: unset }
 *   Because main.min.css loads after WordPress's inline styles, it wins the
 *   cascade and collapses the wrapper to 0 height.
 *
 * The chopsite instead uses .video-container (position:relative; aspect-ratio:16/9)
 * injected by main.min.js only for iframes inside .content-flow. Outside
 * .content-flow (e.g. Gutenberg Columns blocks on full-width pages) no
 * .video-container is injected and nothing provides height.
 *
 * Two-part fix applied here (style.css loads after main.min.css, so wins):
 *
 *  1. Restore ::before spacer for all wp-block-embed contexts.
 *     style.css loads after main.min.css so equal-specificity rules here win.
 *
 *  2. Inside .content-flow where JS injects .video-container, neutralise that
 *     wrapper so only WordPress's spacer controls height (no double-spacing).
 *     - aspect-ratio: auto  -> stop .video-container adding a second 16:9 box
 *     - position: static    -> iframe positions against the wrapper (whose
 *                              ::before spacer provides height), not .video-container
 */
.wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
  padding-top: 56.25%;
}

.content-flow .wp-block-embed__wrapper .video-container {
  position: static;
  aspect-ratio: auto;
}

/* === Pill size modifier =====================================================
 * pill--sm reduces font and padding; colour variants still apply alongside it
 */
.pill--sm {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

/* === Search results page ====================================================
 * Minimal rules only — layout uses existing ui-grid cells, pills, card-article
 */
.search-term {
  font-style: italic;
  color: var(--colour-brand-primary);
}

.search-result__img {
  aspect-ratio: 3/2;
  overflow: clip;
  border-radius: 0.25rem;
}
.search-result__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.search-noresults__icon {
  font-size: 3.5rem;
  line-height: 1;
  color: var(--colour-brand-tertiary);
}

/* === Teacher Single Page Header =====================================================
 * tick-list alignmenet
 */
.wrapper-hero .content ul.teacher-subjects.list-columns li {
  margin-block: 0;
}
.wrapper-hero .content .role {
  color: var(--colour-brand-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* === Checkbox/radio hover size glitch (Chrome) =======================================
 * Two separate Chrome-only issues stack on this native (appearance:auto) checkbox:
 *
 * 1. main.min.css sizes it via `.form-row input[type=checkbox]{transform:scale(1.25)}`.
 *    Scaling a native OS-themed widget with a CSS transform (rather than real width/height)
 *    is a known Chromium bug trigger: any style recalc (e.g. :hover/:focus-visible, which
 *    also toggles a box-shadow transition here) can cause the compositor to re-promote the
 *    native widget against its true unscaled paint before re-applying the transform.
 *
 * 2. Confirmed live in Chrome DevTools' Computed/box-model view: at rest the box is a clean
 *    20x20 content box with 0 padding, but forcing :hover collapses content to 0x0 with
 *    padding jumping to 10px (0.625rem) a side and border to 1px — i.e. on hover Chrome's
 *    native widget repaint picks up main.min.css's `padding:.625rem` and the :hover rule's
 *    `border-width:1px`, even though neither "wins" the normal cascade at rest. For
 *    appearance:auto controls, the browser's native paint size isn't always driven by the
 *    same box-model resolution getComputedStyle reports, so a rule that's merely overridden
 *    (not absent) can still resurface at native-widget repaint time.
 *
 * Firefox's checkbox theming doesn't hit either interaction, so neither shows there.
 * Fix: pin padding/border-width/transform to fixed values here so there is no non-zero
 * value anywhere for the native repaint to fall back to in either state. This selector's
 * specificity (class + attribute + element) beats both the base rule ([type=checkbox] alone)
 * and its :hover variant ([type=checkbox]:is(:hover,:focus-visible), no element), so it wins
 * regardless of hover state. box-shadow (from the existing :hover/:focus-visible and
 * .form-row:has(label:hover) rules) is untouched and still provides hover feedback, since
 * box-shadow never affects layout size.
 */
.form-row input[type=checkbox],
.form-row input[type=radio] {
  padding: 0;
  border-width: 0;
  transform: none;
  width: 1.25em;
  height: 1.25em;
}

/* === "All News" / "All Teachers" wrapping to 2 lines =================================
 * .results-info is a 2-child flex row (`.meta` label, `.options` control group) with
 * justify-content:space-between. `.options` has flex-shrink:0 but `.meta` doesn't, so
 * once `.options` grew wide enough (adding the accessibility-fix Apply button next to
 * the sort dropdown), `.meta` was squeezed below its text's natural width and the two
 * words wrapped onto separate lines. Keep it on one line instead of shrinking.
 */
.results-info .meta {
  white-space: nowrap;
}

/* === Apply button (accessibility fix for the auto-submitting sort select) misaligned
 * with the dropdown next to it =========================================================
 * Two separate problems stacked here, both only visible once the button existed to
 * compare against:
 * 1. .btn-main--xs's padding-block (0.6735rem) plus its line-height rendered taller than
 *    the select's own padding-block (5px), so the two boxes were different heights.
 * 2. Selects get a global `margin-bottom: 10px` from the base form styles. In a flex row
 *    with align-items:center, that margin counts toward the select's box for alignment
 *    purposes - so once the row's height (46px) was set by the taller button, the
 *    select's own margin box (36px content + 10px margin = 46px) exactly matched the row
 *    height and left no slack to center it with, pinning it to the top instead.
 * Fix both: give button and select the same height, and zero the select's margin-bottom
 * so its margin box matches its border box like the button's does.
 */
.results-info .options select,
.results-info .options .btn-main {
  height: 2.25rem;
}

.results-info .options select {
  margin-bottom: 0;
}

.results-info .options .btn-main {
  padding-block: 0;
}

/* === Apply button overflowing the viewport on narrow phones ===========================
 * .options has flex-shrink:0 (chopsite default) so on very narrow screens the combined
 * width of "All News"/"All Teachers" plus label+select+button no longer fits on one row
 * and the button's right edge ran past the viewport edge. Below Foundation's small
 * breakpoint, let .options drop to its own full-width row instead of fighting for space
 * on the same line as the meta label.
 */
@media screen and (max-width: 39.99875em) {
  .results-info {
    flex-wrap: wrap;
  }
  .results-info .options {
    flex-basis: 100%;
  }
}
/* === CardGrid no-image ("card-info") title overlaps on longer text ====================
 * The chopsite's own source (components/_cards.scss) sets .card-info .title with a
 * fixed line-height: 2.25rem against a font-size that clamps 3rem-4.5rem across
 * viewport width. That's fine for a single short stat like "+15" (one line, so
 * line-height barely matters), but any longer title (e.g. "The Institute Edge")
 * wraps to 2-3 lines and each line only gets 36px of box height for 48-72px glyphs,
 * so lines visually collide. The chopsite's own docs example only ever shows a
 * one-word stat, so this was never exercised against real editor content.
 *
 * Fix: use a unitless (proportional) line-height instead of a fixed rem value, so it
 * scales together with the font-size's clamp() at every breakpoint rather than only
 * being correct at one viewport width. Ratio calibrated from a 3.95rem line-height
 * looking right against the clamp's 4.5rem desktop max (3.95 / 4.5 = 0.878).
 */
.card-info .title {
  line-height: 0.878;
}

/* === Long plain-text titles don't fit the stat-sized font =============================
 * .card-info .title's font-size clamps 3rem-4.5rem, sized for a short stat like "+15"
 * (2-4 characters). A longer title (e.g. "The Institute Edge") needs far more vertical
 * room than that budget allows: with padding, the paragraph, and the button all sharing
 * the same box, a multi-line stat-sized title doesn't fit within .card-image's
 * aspect-ratio-derived height, and since .card-info has overflow:visible (no image to
 * clip), the box just grows past the intended aspect ratio to fit the content, ending up
 * visibly taller than the photo cards next to it. Text length can't be measured in pure
 * CSS, so CardGrid/block.js adds this modifier class at render time for titles over 10
 * characters, shrinking them down to the site's existing .text-xl/.text-lg heading scale
 * - small enough to actually fit the same box a short stat gets.
 */
.card-info .title.title--long {
  font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  line-height: 1.15;
}

/* === CardGrid photo cards forced taller than intended by the text card's content ======
 * .card-image has a fixed aspect-ratio: 5/6 (chopsite _cards.scss). .card-info only has
 * height: 100%, so it has always depended entirely on flex stretch from its siblings for
 * height - fine while its title was always a short one-line stat, but now that titles can
 * wrap to 2-3 lines (see the line-height fix above), .card-info's own content can be
 * taller than what .card-image's aspect-ratio would naturally produce. Flexbox computes
 * a wrapped line's cross size from the tallest item's hypothetical (unstretched) size
 * before stretching everything to match - so a long title inflates the whole row,
 * stretching the photo cards away from their intended 5:6 shape.
 *
 * Fix: give .card-info the same aspect-ratio and let it size itself from its own width
 * instead of stretching to match siblings. Both card types then derive height from the
 * same ratio at the same cell width, so they're always equal by construction - not
 * dependent on flex stretch, and not at the mercy of how much text an editor enters.
 *
 * Only below min-width: 40em (chopsite's own medium-up-2 breakpoint, where CardGrid
 * cells actually start sharing a row with a photo card - see ui-grid's tablet-up-2/
 * medium-up-2/large-up-4 classes). Below that, .card-info is alone in its own row with
 * nothing to match, so forcing the same aspect-ratio just left a large empty gap above
 * the (now much shorter, thanks to the long-title font shrink) content. Below 40em it
 * falls back to the chopsite's original height: 100%, which - alone in its own flex
 * line - simply sizes to its own content, no gap.
 */
@media screen and (min-width: 40em) {
  .card-info {
    height: auto;
    aspect-ratio: 5/6;
    align-self: flex-start;
  }
}
/* === CardGrid/CardCarousel: "Find out more" CTA offscreen on long card teasers =========
 * .card-image .teaser reveals on hover via a single-property max-block-size animation
 * (0 -> 10rem) with overflow:hidden - the chopsite pattern only budgets that 10rem for a
 * short teaser sentence. A longer teaser (real CMS copy easily runs to 3-4 lines) pushes
 * the "Find out more" CTA below the 10rem cutoff, clipping it fully or partially out of
 * view. Clamp the teaser paragraph to 3 lines so its height is bounded and the CTA that
 * follows it in the same flex column always has room within the existing budget.
 */
.card-image .teaser-inner p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}