/* ---- wpex-slider arrows: reveal on keyboard focus ----------------------- */
/* The .sp-arrows container collapses to height:0 until hover, which paints the
   arrows but drops them from the tab order. Restore height on focus-within so
   they become tabbable. NOT `display` on the arrow itself, so the engine's
   display:none on a genuinely unavailable arrow (e.g. Previous on slide 1) is
   preserved. Owl arrows are native buttons and are unaffected by these rules. */
.slider-pro:focus-within .sp-arrows {
	height: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}
.slider-pro:focus-within .sp-arrow {
	visibility: visible !important;
	pointer-events: auto !important;
}
.sp-arrow:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.85);
}

/* ---- YouTube facade (WPBakery video blocks) ----------------------------- */
.wpb_video_wrapper .yt-facade {
	position: absolute; inset: 0; width: 100%; height: 100%;
	padding: 0; border: 0; cursor: pointer; background: #000; display: block;
}
.yt-facade__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-facade__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 68px; height: 48px; border-radius: 12px; background: rgba(0, 0, 0, 0.75);
}
.yt-facade__play::before {
	content: ""; position: absolute; top: 50%; left: 52%;
	transform: translate(-50%, -50%);
	border-style: solid; border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}
.yt-facade:hover .yt-facade__play { background: #cc0000; }
.yt-facade:focus-visible {
	outline: 3px solid #fff; outline-offset: -6px;
	box-shadow: 0 0 0 6px #000, 0 0 0 9px #fff;
}

/* ---- Carousel rotation (stop/start) control ----------------------------- */
.aum-carousel-region { position: relative; }
/* z-index has to clear the slider's own slides, not just its container.
   Slider Pro (`wpex-slider`, used by the vcex-image-slider next to "Choosing a
   college doesn't have to be hard") stacks its slides at z-index 10 and the
   selected slide at 20, both absolutely positioned inside the same region we
   put this button in. At the original z-index: 6 the button rendered correctly
   in every respect — right size, right position, white glyph on a dark disc,
   opacity 1 — and was simply painted behind the slide image, which is why it
   looked like it had disappeared rather than broken. Owl carousels do not do
   this, so their controls were unaffected and the fault looked selective. */
.aum-rotation-control {
	position: absolute;
	z-index: 40;
	top: 8px;
	left: 8px;
	box-sizing: border-box; /* the border below must not grow the 36px target */
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.72);
	/* A 72%-black disc over dark photography is close to invisible, which is
	   how this button kept getting reported as "missing" while measuring
	   correctly — present, 36x36, topmost, simply not perceivable. The light
	   ring gives it an edge against dark slides; the outer dark shadow keeps
	   that ring readable against light ones. Non-text contrast, 1.4.11. */
	border: 2px solid rgba(255, 255, 255, 0.92);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* Slider Pro's region is the theme's padded wrapper, so the 8px inset has to
   clear that padding or the button lands in the decorative frame margin rather
   than on the slide. The JS publishes the measured padding; the fallback of 0
   degrades to the plain top-left corner. */
.aum-rotation-control--inset {
	top: calc(var(--aum-pad-t, 0px) + 8px);
	left: calc(var(--aum-pad-l, 0px) + 8px);
}
.aum-rotation-control::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Pause glyph (two bars) while rotating */
	width: 8px;
	height: 11px;
	border-left: 3px solid #fff;
	border-right: 3px solid #fff;
}
.aum-rotation-control.is-stopped::before {
	/* Play glyph (triangle) while stopped */
	width: 0; height: 0;
	border: 7px solid transparent;
	border-left: 12px solid #fff;
	border-right: 0;
}
.aum-rotation-control:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.85);
}
/* ============================================================
   AUM — Hero banner focus visibility (2.4.7 / 2.4.11)
   Scope: Slider Revolution hero module ONLY.

   Replace #rev_slider_1_wrapper with the real wrapper ID.
   Find it in view-source as:  <rs-module-wrap id="rev_slider_X_wrapper">
   or the shortcode alias in the page builder.

   Overrides SR's own suppression:
     .rev-btn, .rev-btn:visited { outline: none !important; }
   The ID-scoped :focus-visible selectors below are higher
   specificity AND !important, so they win the cascade.
   ============================================================ */

/* Focusable layers inside the hero: links, buttons, and any
   layer explicitly made focusable. Add selectors if SR emits
   something other than <a>/<button> for these controls. */
#rev_slider_2_1_wrapper a:focus-visible,
#rev_slider_2_1_wrapper .rev-btn:focus-visible,
#rev_slider_2_1_wrapper button:focus-visible,
#rev_slider_2_1_wrapper rs-layer[tabindex]:focus-visible {
  /* Two-tone ring: white reads on dark video frames,
     navy backing reads on light frames. */
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px #03244d !important; /* AUM navy */
  border-radius: 2px;

  /* Lift the focused layer above sibling layers + overlay so
     the ring is never painted underneath them. */
  position: relative !important;
  z-index: 60 !important;
}

/* Optional: only needed if you must support browsers without
   :focus-visible. Draws the ring on any :focus, then removes it
   for non-keyboard focus where :focus-visible IS supported.
   Safe to delete on an evergreen-only audience. */
#rev_slider_2_1_wrapper a:focus,
#rev_slider_2_1_wrapper .rev-btn:focus,
#rev_slider_2_1_wrapper button:focus {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}
#rev_slider_2_1_wrapper a:focus:not(:focus-visible),
#rev_slider_2_1_wrapper .rev-btn:focus:not(:focus-visible),
#rev_slider_2_1_wrapper button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ---- TablePress reflow + horizontal scroll (Module K) ------------------- */
/* html has overflow-x:hidden and body has overflow-x:clip, so a table wider
   than its column is CUT OFF rather than scrollable — content the user cannot
   reach at all (1.4.10 Reflow). Measured on /admissions/tuition-and-fees/:
   9 of 22 tables overhang their column by 70–152px.

   Two bands are affected. Below 768px a stacked column is ~271px. Between
   768px and ~950px WPBakery has already stopped stacking vc_col-sm-6 but a
   half column is only ~329px, against a widest min-content table width of
   423px — so the 992px breakpoint below is deliberately wider than
   WPBakery's own. .aum-table-col is applied by the JS, so this never touches
   a column that holds no table. */
@media (max-width: 991.98px) {
	.vc_row .wpb_column.aum-table-col {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
	}
	.vc_row .wpb_column.aum-table-col + .wpb_column.aum-table-col {
		margin-top: 1.5em;
	}
}

/* No min-width is set on the table: an auto-layout table already refuses to
   shrink below its min-content width, which is exactly the width worth
   preserving. The wrapper alone turns clipping into scrolling. */
.aum-table-scroll {
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1em;
}
.aum-table-scroll > table.tablepress {
	margin-bottom: 0;
}

/* tabindex is present only while the region actually scrolls (see Module K),
   so these only ever apply to a genuinely operable scroll container. */
.aum-table-scroll[tabindex]:focus-visible {
	outline: 3px solid #03244d;
	outline-offset: 2px;
}
.aum-table-scroll[tabindex]:focus:not(:focus-visible) {
	outline: none;
}
.aum-table-scroll.is-scrollable {
	border-right: 1px solid rgba(0, 0, 0, 0.18);
}

/* ---- Module M — navigation disclosure buttons --------------------------- */
/* The sibling toggle beside a parent link. Sized to the chevron it sits next
   to, transparent so the skin shows through. */
.ubermenu .aum-nav-disclosure {
	background: none;
	border: 0;
	padding: 0 6px;
	margin: 0;
	font: inherit;
	color: inherit;
	line-height: 1;
	cursor: pointer;
	align-self: center;
}
.ubermenu .aum-nav-disclosure::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	vertical-align: middle;
}
.ubermenu .aum-nav-disclosure[aria-expanded="true"]::before {
	border-top: 0;
	border-bottom: 5px solid currentColor;
}

/* LAYOUT — the sibling toggle must share the line with its link.
   `.ubermenu-target` is display:block, so a static inline-block button placed
   after it is pushed onto the next line: the arrow renders *below* the menu
   item and the bar grows ~16px taller. Found on production, www.aum.edu.

   The link becomes inline-block so the two can sit side by side, and the button
   is pulled back over the 30px of right padding the anchor already reserves for
   UberMenu's chevron (`i.ubermenu-sub-indicator`, absolute at right:10px). The
   negative margin exactly cancels the button's width, so item widths, bar
   height and mega-panel offsets are byte-identical to the pre-Module-M
   baseline — verified against production at 1440px.

   UberMenu's chevron is left visible and the button draws nothing of its own,
   so there is no visual change at all; the button is a transparent 30px hit
   area over the chevron, full item height. `li` is deliberately NOT made
   position:relative — the mega submenu resolves against the menu bar, and
   positioning the li would re-anchor an 850px panel to a 125px item.

   Not scoped to a breakpoint: below the responsive cut the whole UberMenu
   wrapper is display:none and ShiftNav takes over, so there is nothing to
   affect. */
/* `.ubermenu-target`, not `a.ubermenu-target`: "Student Life" is a <span>, and
   it needs the same inline-block treatment or its arrow wraps below the item. */
.ubermenu li.ubermenu-item-level-0.ubermenu-item-has-children > .ubermenu-target {
	display: inline-block;
	vertical-align: middle;
}
.ubermenu li.ubermenu-item-level-0.ubermenu-item-has-children
	> button.aum-nav-disclosure {
	position: relative;
	/* Must clear the link it overlaps. ubermenu.min.css sets
	   `.ubermenu .ubermenu-target { z-index: 10 }` unconditionally, and the
	   target has an opaque white background, so at the original z-index: 2 the
	   button was painted BEHIND the link it sits on top of: its focus ring was
	   invisible and elementsFromPoint at the button's centre returned the
	   chevron and the anchor above it, meaning mouse clicks on the arrow hit
	   the link instead of the toggle. Keyboard activation still worked, which
	   is why the button appeared to work but show nothing. */
	z-index: 20;
	vertical-align: middle;
	width: 30px;
	height: 52px;
	margin-left: -30px;
	padding: 0;
}
/* The chevron is the affordance; the button must not draw a second one. */
.ubermenu li.ubermenu-item-level-0.ubermenu-item-has-children
	> button.aum-nav-disclosure::before {
	content: none;
}
/* Expanded state, since the button no longer supplies its own flip. Keyed off
   UberMenu's own class on the ancestor li, which navSync already tracks. */
.ubermenu li.ubermenu-item-level-0.ubermenu-active > a.ubermenu-target > i.ubermenu-sub-indicator {
	transform: rotate(180deg);
}


/* UberMenu's own focus ring ships with its accessibility feature, which this
   module replaces — so supply one.

   OUTLINE ONLY, and drawn INSIDE. Both constraints are load-bearing:

   1. No box-shadow. The earlier ring put the visible colour in a box-shadow
      and the outline in white, which vanished against the white menu items.
      "AUM Overview" then had no ring at all, because the grey-white skin
      (blackwhite.css) carries
        body:not(.rtl) .ubermenu-skin-grey-white.ubermenu-horizontal
        .ubermenu-item-level-0:first-child > .ubermenu-target { box-shadow: none }
      — a :first-child rule at roughly (0,6,1) that only ever hits the first
      item and kills any shadow we set. That rule does not touch `outline`.

   2. outline-offset is negative. `nav.ubermenu` computes `overflow: hidden`,
      so a ring drawn outside the element is clipped at the ends of the bar.

   Colour matches the site's existing focus convention — wp-custom-css already
   uses `outline: 3px solid #005fcc` on links — so keyboard focus looks the
   same in the nav as everywhere else. */
.ubermenu .aum-nav-disclosure:focus-visible,
.ubermenu .ubermenu-target:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: -3px;
}

/* Label items ("Student Life"): the toggle is the item's only control, so its
   ring spans the whole item instead of just the 30px arrow — otherwise the
   item reads as skipped next to neighbours that ring their full width.

   Drawn by a pseudo-element of the button because the button is the only thing
   here that paints above the target (z-index 20 vs the target's 10, and the
   target has an opaque background). `--aum-item-w` is published by the JS;
   without it the width falls back to the button's own, which is exactly
   today's arrow-only ring — so an older browser or a cached button degrades to
   a smaller ring, never to none. */
.ubermenu .aum-nav-disclosure--label:focus-visible {
	outline: none;
}
.ubermenu .aum-nav-disclosure--label:focus-visible::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: var(--aum-item-w, 100%);
	outline: 3px solid #005fcc;
	outline-offset: -3px;
	pointer-events: none;
}

/* =====================================================================
   MODULE N — Fancybox inline-content dialogs: reflow at 320 CSS px (1.4.10)
   =====================================================================
   Audit item: "Average U.S. Salaries" modal requires side scrolling at 400%
   zoom from 1280x1024 (i.e. a 320x256 viewport), and the "Job/Career
   References" accordion inside it has no readable text.

   TWO SEPARATE CAUSES, both fixed here.

   1. THE DIALOG IS SIZED BY A FIXED ASPECT RATIO.
      The trigger is a vcex button carrying data-width="700" data-height="950",
      which Total hands to Fancybox. Fancybox keeps that 700:950 ratio and
      scales it to fit whichever axis is tighter. At 320x256 the HEIGHT is the
      constraint: 244px of usable height scales the box to 0.257, so the dialog
      renders 179.8px wide inside a 320px viewport — barely half the available
      width. Everything inside then lays out in ~92px columns, which is what
      crushes the accordion heading (measured: 52px box holding text needing
      102px, overflowing its container because overflow is visible).
      Note this is NOT a page-level horizontal scrollbar — Fancybox shrinks the
      box rather than overflowing the document, so the failure is loss of
      readable content, not a sideways page. Below the breakpoint we drop the
      fixed ratio: full width, natural height, vertical scroll.

   2. BARE URLS IN THE CITATIONS CANNOT WRAP.
      With the accordion open, the reference list holds unlinkified URLs up to
      363px wide at `overflow-wrap: normal`. Those genuinely do overflow and
      genuinely do require side scrolling — measured 578px of content in a
      180px column, 7 elements past the dialog's right edge. `overflow-wrap:
      anywhere` lets them break. This half is the auditor's "side scrolling".

   SCOPE: `.fancybox-slide--html` only, so image lightboxes are untouched — they
   are the exempt "images" case in the criterion and must keep their ratio. The
   `!important` flags are required: Fancybox writes width/height as INLINE
   styles, and inline loses only to !important.

   Verified on staging at 320x256: dialog 179.8px -> 308px, accordion heading
   text fits (scrollWidth == clientWidth), zero elements past the right edge,
   no scrolling in either axis. At 1280x1024 the dialog is still 700x950 — the
   media query does not apply, so desktop presentation is unchanged. */
@media (max-width: 600px) {
	.fancybox-slide--html > .fancybox-content {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: calc(100vh - 40px) !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
	}
	/* Long URLs and other unbreakable strings in dialog content. */
	.fancybox-slide--html > .fancybox-content,
	.fancybox-slide--html > .fancybox-content * {
		overflow-wrap: anywhere !important;
	}
}

/* =====================================================================
   MODULE O — in-page unbreakable strings: reflow at 320 CSS px (1.4.10)
   =====================================================================
   Audit item: on /admissions/campus-tours-and-events/, the "Graduate Preview
   Night" accordion cuts off the link https://www.aum.edu/gradpr... at 400%
   zoom.

   Same root cause as Module N's second half — a bare URL used as its own link
   text, which has no break opportunity — but a DIFFERENT surface. Module N is
   deliberately scoped to `.fancybox-slide--html`, so it does not reach content
   sitting in the page. This rule covers WPBakery accordion bodies and text
   columns, which is where editors paste URLs.

   WHY `anywhere` AND NOT `break-word`. Measured on staging: the link computes
   `display: inline-block`. `overflow-wrap: break-word` breaks a word only to
   fit a LINE BOX; it does not change intrinsic sizing, so an inline-block still
   sizes itself to the full unbreakable URL and overflows regardless. Tried it
   first and the element did not move: 288.5px wide, right edge at 344.5px in a
   320px viewport. `anywhere` also reduces min-content width, which is what lets
   the inline-block shrink to the available space. `max-width: 100%` is belt and
   braces for any element that sizes itself some other way.

   NOTE THE FAILURE MODE: the page does NOT scroll sideways here — an ancestor
   clips the overflow — so the URL is silently truncated on screen. That fails
   1.4.10 on "loss of information", not on two-dimensional scrolling. Testing
   for a horizontal scrollbar alone would have missed it.

   SCOPE: the breakpoint keeps this away from desktop, and it is limited to
   accordion bodies and text columns rather than applied site-wide. `anywhere`
   affects intrinsic sizing, and a blanket rule could collapse a flex or grid
   column somewhere unrelated — the kind of regression the UberMenu submenu
   width rule already cost us once.

   Verified on staging at 320x256 with desktop markup: link wraps to two lines,
   208px wide, full text intact, panel body scrollWidth == clientWidth. All 13
   accordions on that page opened, zero clipped elements. At 1280x1024 the media
   query is inactive and the computed value returns to `normal`. */
@media (max-width: 600px) {
	.vc_tta-panel-body, .vc_tta-panel-body *,
	.wpb_text_column, .wpb_text_column * {
		overflow-wrap: anywhere;
	}
	.vc_tta-panel-body a,
	.wpb_text_column a {
		max-width: 100%;
	}
}

/* Module V — accent colour on dark/mid backgrounds (1.4.3 / 1.4.11). The JS measures each
   orange-coloured text/icon against its real background and, only where it fails, sets
   --aum-acc on the element plus one of these classes. -self recolours the element's own
   text; -pseudo recolours an icon glyph drawn by ::before/::after (e.g. Total ticons). */
/* Text colour is ALSO set inline with !important by the JS — page-level CSS on this site uses
   `!important` on its own accent classes (e.g. Dual Enrollment's .first-pre-size), which a
   class rule can only tie. Pseudo-element glyphs can't take inline styles, so their rule is
   raised in specificity instead. */
.aum-acc-self { color: var(--aum-acc) !important; }
html body .aum-acc-pseudo.aum-acc-pseudo::before,
html body .aum-acc-pseudo.aum-acc-pseudo::after { color: var(--aum-acc) !important; }
.aum-acc-ul { text-decoration-line: underline !important; }
/* Orange-over-photo → white with a soft drop shadow (down-right) plus a faint 1px edge, so the
   glyphs keep a dark side over bright spots without reading as an outline (Module V, v1.10.4).
   Page banners don't rely on it: their overlay is raised until the text passes without it. */
html body .aum-acc-shadow,
html body .aum-acc-shadow.aum-acc-pseudo::before,
html body .aum-acc-shadow.aum-acc-pseudo::after {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .85), 1px 1px 1px rgba(0, 0, 0, .6) !important;
}

/* NOTE: the 2.2.2 remediation for the MyStickyMenu welcome bar CTA (infinite
   `msb-tada` loop on the "Register Today!" link) is NOT here — it ships in the
   child theme's css/a11y.css, since it is pure CSS with no module behaviour.
   Look there before adding a duplicate rule. */

/* Module X (v1.13.0) — MEC organizer name, formerly <h6> (RAMP "Events: Headings: Usage").
   Same look as MEC's `.mec-single-event .mec-event-meta h6`; cancels MEC's `dd span` block/indent/gray. */
.mec-single-event .mec-organizer .aum-mec-org-name {
	display: inline;
	padding: 0 0 5px 0;
	font-family: var(--wpex-heading-font-family);
	font-size: 13px;
	font-weight: 300;
	font-style: inherit;
	line-height: 1.3;
	letter-spacing: normal;
	color: #222;
	text-transform: uppercase;
}

/* Module X (v1.14.0) — MEC month view day panel, formerly <h6>/<h3> (RAMP "Events: Headings: Usage").
   Restores what the heading tags contributed (MEC `.mec-wrap h6/h3` + theme heading rules); MEC's own
   class rules (centering, circle etc. in other calendar styles) still apply on top. */
html .mec-wrap div.aum-mec-side-title { /* beats MEC's `.mec-wrap div` font rule */
	display: inline-block;
	font-family: Catamaran, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	color: #171c24;
	margin: 0 0 15px;
}
html .mec-wrap div.aum-mec-side-day {
	display: inline-block;
	font-family: Inter, sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	margin: 0 0 15px 4px;
}