/* Replacements for WordPress runtime JS (layout that plugins computed in the browser). Loaded after legacy.css. */
.legacy .wp-grid-builder { opacity: 1 !important; }
.legacy .wpgb-masonry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.legacy .wpgb-masonry .wpgb-card { position: static !important; width: auto !important; transform: none !important; opacity: 1 !important; }
.legacy .wpgb-card-media-thumbnail .rocket-lazyload { position: absolute; inset: 0; background-size: cover; background-position: center; }
@media (max-width: 767px) { .legacy .wpgb-masonry { grid-template-columns: 1fr; } }
.legacy [data-island] { display: block; }
.legacy .vc_tta-panel:not(.vc_active) > .vc_tta-panel-body { display: none; }
.legacy .vc_tta-panel.vc_active > .vc_tta-panel-body { display: block; height: auto; }

/* WPBakery "stretch row" (was positioned by js_composer JS) */
.legacy [data-vc-full-width="true"] { position: relative; left: auto !important; width: 100vw !important; max-width: none; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; box-sizing: border-box; padding-left: calc(50vw - 50% - 15px); padding-right: calc(50vw - 50% - 15px); }
.legacy [data-vc-full-width="true"][data-vc-stretch-content="true"] { padding-left: 0; padding-right: 0; }
/* Ultimate Addons row backgrounds (applied by its JS on the live site) */
.legacy .upb-bg { position: relative; isolation: isolate; }
.legacy .upb-bg-layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; }
.legacy .upb-bg-layer.upb-bg-full { left: calc(50% - 50vw); right: calc(50% - 50vw); }
.legacy .upb-sep { position: absolute; left: calc(50% - 50vw); width: 100vw; line-height: 0; z-index: 1; pointer-events: none; }
.legacy .upb-sep-bottom { bottom: 0; }
.legacy .upb-sep-top { top: 0; transform: scaleY(-1); }
.legacy .upb-sep svg { width: 100%; height: 100%; display: block; }
/* The7 JS copied a wrapping span's colour onto links */
.legacy span[style*="color"] > a:not([class]) { color: inherit; }
/* Slider Revolution replacement spans the viewport like the original module */
.legacy .hero { position: relative; width: 100vw; left: 50%; margin-left: -50vw; }
.legacy .hero-title { font: 400 69px/80px "Oswald", Helvetica, Arial, Verdana, sans-serif; color: #fff; margin: 0; max-width: 640px; }
@media (max-width: 778px) { .legacy .hero-title { font-size: 34px; line-height: 40px; } }

/* The7 isotope/masonry grids (laid out by JS on live) */
.legacy .iso-container { display: grid; grid-template-columns: repeat(var(--iso-cols, 2), minmax(0, 1fr)); margin: -15px; height: auto !important; }
.legacy .iso-container > .wf-cell { position: static !important; width: auto !important; padding: 15px; opacity: 1 !important; transform: none !important; }
.legacy [data-desktop-columns-num="3"] .iso-container { --iso-cols: 3; }
.legacy [data-desktop-columns-num="4"] .iso-container { --iso-cols: 4; }
.legacy [data-desktop-columns-num="1"] .iso-container { --iso-cols: 1; }
@media (max-width: 767px) { .legacy .iso-container { --iso-cols: 1 !important; } }
/* WP Grid Builder scales card type to 3.2% of card width (JS on live) */
.legacy .wpgb-card { container-type: inline-size; }
.legacy .wp-grid-builder .wpgb-card .wpgb-card-wrapper { font-size: 3.2cqi !important; }
/* Ultimate Addons sticky row (JS on live) */
.legacy .ult-sticky { transform: none !important; }
.legacy .ult-sticky-anchor.is-stuck { position: fixed; top: 0; left: 15px; width: calc(100% - 30px); z-index: 99990; }
.legacy .stickyinner.is-stuck { position: fixed; top: 0; left: 0; right: 0; width: 100vw !important; margin: 0 !important; z-index: 99990; }
/* Gravity Forms submission states */
.legacy form[data-static-form] .gform-static-message { margin-top: 20px; padding: 14px 18px; border-radius: 3px; background: #e8f5e9; color: #1b5e20; }
.legacy form[data-static-form] .gform-static-message.is-error { background: #fdecea; color: #b71c1c; }
/* The7 owl carousels rendered statically (see Legacy.astro) */
.legacy .owl-static .owl-stage-outer { overflow: hidden; position: relative; }
.legacy .owl-static .owl-stage { display: flex; will-change: transform; }
/* carousel-shortcode items keep their own height (owl floats them); The7 stretches gallery / fixed-height carousels */
.legacy .owl-static:not(.gallery-carousel-shortcode):not([data-auto-height="false"]) .owl-stage { align-items: flex-start; }
.legacy .owl-static .dt-owl-item { flex: 0 0 auto; }
.legacy .owl-static .owl-nav div { cursor: pointer; }

/* WP Grid Builder wrappers are sized by JS on live; let them follow the laid-out grid */
.legacy .wp-grid-builder .wpgb-wrapper, .legacy .wp-grid-builder .wpgb-main { height: auto !important; min-height: 0 !important; }
.legacy .wp-grid-builder .wpgb-main { flex: 1 1 auto; }
/* Column + wrap flex collapses the grid wrapper on mobile (live JS pins heights instead) */
@media (max-width: 767px) { .legacy .wp-grid-builder .wpgb-wrapper { flex-wrap: nowrap; } }
/* owl.carousel.css: auto-height animates */
.legacy .owl-static .owl-stage-outer { transition: height .5s ease-in-out; }
/* The7 blog masonry (data-columns / data-width / data-padding): laid out by Legacy.astro like isotope masonry */
.legacy .iso-container[data-columns], .legacy .iso-container.iso-js { display: block; position: relative; }
.legacy .iso-container[data-columns] > .wf-cell, .legacy .iso-container.iso-js > .wf-cell { position: absolute !important; box-sizing: border-box; }
/* awsm-team bio popup: live runs mCustomScrollbar, which insets the content for the scrollbar rail */
@media (min-width: 993px) { .legacy .awsm-modal .mCSB_container { margin-right: 30px; } }
/* WP Grid Builder no-results card (live pins 16px/24px text with 48px padding) */
.legacy .wpgb-no-result { grid-column: 1 / -1; }
.legacy .wp-grid-builder .wpgb-no-result .wpgb-card-wrapper { font-size: 16px !important; line-height: 24px; padding: 48px; text-align: center; }

/* awsm-team-pro locks the page while a bio popup is open by adding a class to <html>; the captured
   rule was scoped to .legacy, which the plugin never touches, so it is restored here unscoped. */
html.awsm-popup-on { height: 100%; overflow: hidden; }
html.awsm-popup-on body { overflow-y: auto; }  /* the page keeps its overflow-x: hidden, as on live */

/* Elementor's lightbox is appended to <body>, outside .legacy, so the captured border-box rule
   (which live applies site-wide) has to be restored for that subtree. */
.dialog-widget, .dialog-widget *, .dialog-widget *::before, .dialog-widget *::after { box-sizing: border-box; }

/* WP Grid Builder ships a global [placeholder]{text-overflow:ellipsis}. WordPress only enqueues that
   stylesheet on pages that have a grid, while this bundle is loaded everywhere, so the rule is put
   back to its initial value — live clips an overflowing placeholder on every form page. */
.legacy:not(.has-wpgb) [placeholder] { text-overflow: clip; }

/* Event sidebar "Register Here" button. MEC's own booking box is not enabled on this site, so the
   link is added to the captured event info box and styled off the theme's button tokens. */
.legacy .mec-single-event-register { margin-top: 30px; }
.legacy a.mec-register-button { display: block; padding: 16px 20px; border-radius: var(--mec-secondary-border-radius, 3px); background: var(--the7-accent-bg-color, #194f90); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition: background .21s ease; }
.legacy a.mec-register-button:hover, .legacy a.mec-register-button:focus { background: var(--the7-btn-hover-bg-color, #063c7f); color: #fff; }

/* Building Rentals only. The lazy YouTube thumbnail is 4:3 (480x360) but .wpb_video_wrapper is a
   16:9 box, and the image is sized width:100%/height:auto between top:0 and bottom:0 with
   margin:auto — so it renders 0.75x the width inside a 0.5625x box and the surplus is centred,
   spilling ~9.4% of the width above and below, over the Audio Visual Equipment Pricing list. The
   player's own overflow:hidden cannot clip it: that element is position:static, so the image's
   containing block is the wrapper, not the player. Clip on the wrapper, and keep a fixed gap above
   the widget so the two areas never meet at any width. */
.legacy.page-id-6485 .wpb_video_widget .wpb_video_wrapper { overflow: hidden; }
.legacy.page-id-6485 .wpb_video_widget { margin-top: 30px; }

/* Building Rentals only. The testimonials below the video are an Ultimate Addons carousel whose
   slider script is not shipped. Ultimate ships the wrapper at visibility:hidden and reveals it once
   slick has initialised, so with no script the slides never appear at all — which is why that band
   read as a bare background image. Live is the same: it never initialises either. Reveal the
   wrapper, keep the first slide and drop the other eight, and hide the prev/next buttons, which
   have no slider behind them. The slides are the item wraps directly under the carousel's
   generated-class div; each nests another .ult-item-wrap inside its content box, which the child
   combinators leave alone. */
.legacy.page-id-6485 .ult-carousel-wrapper { visibility: visible; }
.legacy.page-id-6485 .ult-carousel-wrapper > div > .ult-item-wrap:not(:first-child) { display: none; }
.legacy.page-id-6485 .ult-carousel-wrapper .slick-prev,
.legacy.page-id-6485 .ult-carousel-wrapper .slick-next { display: none; }

/* The row carries margin-bottom:-70px so the footer tucks under a tall stack of slides. One slide
   leaves it far shorter than that was drawn for and the footer rides over it. !important is needed
   because the row's own rule uses it. */
.legacy.page-id-6485 .vc_custom_1711988739392 { margin-bottom: 0 !important; }

/* That row is also a stretched full-width row: [data-vc-full-width] makes it 100vw and
   [data-vc-stretch-content] strips its gutters, so the testimonial ran to the very edges — and 100vw
   counts the scrollbar, pushing the right edge past the viewport and clipping the end of each line.
   Hold the text to the theme's own container and gutters instead, so it lines up with the rest of
   the page and never reaches the overhang. */
.legacy.page-id-6485 .ult-carousel-wrapper .ult-content-box > .ult-item-wrap {
  box-sizing: border-box; max-width: var(--the7-box-width, 1340px);
  margin-left: auto; margin-right: auto; padding-left: 44px; padding-right: 44px;
}
@media screen and (max-width: 992px) {
  .legacy.page-id-6485 .ult-carousel-wrapper .ult-content-box > .ult-item-wrap { padding-left: 20px; padding-right: 20px; }
}

/* The stretched-row rule above pulls only the left side (margin-left:calc(50% - 50vw), margin-right:0)
   and fixes width to 100vw, so it lands centred only if the row's containing block is exactly the
   centred content column. Here it is not, and the band ends up inset on the left and flush right.
   Give it equal negative margins and let the width fall out of them instead: the box is then exactly
   the viewport wide and symmetric by construction, whatever its container measures. */
.legacy.page-id-6485 .vc_custom_1711988739392 {
  width: auto !important; max-width: none !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important; padding-right: 0 !important;
}

/* Events archive only. The Modern Events Calendar filter bar above the list (month/year picker,
   search, and the Yearly/Monthly/Weekly/Daily/List switch) does nothing: MEC's script is not
   shipped here, and on live it does not work either. The events are always shown as a list, so
   hide the bar. Hidden rather than removed from the capture — the list below is independent markup
   and renders without it. */
.legacy.post-type-archive-mec-events .mec-search-form.mec-totalcal-box { display: none; }

/* The main walshcollege.edu footer on every site (Base.astro). Foundation and CIE pages load their
   own theme stylesheet, whose footer settings still apply to it: a lighter blue with their old
   footer photo, 50px side padding, no -70px tuck under the last row, and regular-weight phone number
   and social links. These restate the main stylesheet's rules with its own selectors, so they
   match its weight and win by loading later; on the main site they repeat values it already has. */
.legacy #footer.solid-bg { background: #1b2e4b none no-repeat top; }
.legacy #footer #bottom-bar > .wf-wrap, .legacy #footer > .wf-wrap { padding: 0 75px; }
/* The main footer's own rules from main's theme custom CSS (90-inline-the7-custom-inline-css),
   which foundation and CIE swap for their own: the -70px tuck, and the small-screen rules that zero
   the row gaps, reset the -50px and -90px margins the footer's Elementor CSS sets, and centre the
   logo and social icons. One main declaration (margin-bottom: -20px !imortant) is a typo browsers
   drop, so it is left out to match what main actually renders. */
.legacy .elementor-199 .elementor-element.elementor-element-7dbb8459:not(.elementor-motion-effects-element-type-background) { margin-top: 0px; margin-bottom: -70px; }
@media (max-width: 1024px) {
  .legacy .elementor-199 .elementor-element.elementor-element-654753a6,
  .legacy .elementor-199 .elementor-element.elementor-element-7ec516d5,
  .legacy .elementor-199 .elementor-element.elementor-element-6c45a15a { width: 100%; }
}
@media (max-width: 767px) {
  .legacy .elementor-199 .elementor-element.elementor-element-24f1df97 { margin-top: -30px; }
}
@media (max-width: 600px) {
  .legacy .elementor-199 .elementor-element .elementor-element-300e86c3,
  .legacy .elementor-199 .elementor-element.elementor-element-53b3de4b,
  .legacy .elementor-199 .elementor-element.elementor-element-24f1df97,
  .legacy .elementor-199 .elementor-element.elementor-element-5fcc113 { --widgets-spacing-row: 0px !important; }
  .legacy .elementor-199 .elementor-element.elementor-element-1bdcf0c5 > .elementor-widget-container,
  .legacy .elementor-199 .elementor-element.elementor-element-57377597 > .elementor-widget-container { margin: 0px 0px 0px 0px !important; }
  .legacy .elementor-199 .elementor-element.elementor-element-387b81ee { text-align: center !important; margin-bottom: 8px !important; }
  .legacy .elementor-199 .elementor-element.elementor-element-31bd91fc .ekit_social_media { text-align: center !important; }
  .legacy .elementor-199 .elementor-element.elementor-element-53b3de4b .elementor-icon-list-item > a { margin-bottom: -80px !important; }
}
/* main bolds every a:link sitewide; here only the footer's, and the right-hand top-bar links the
   foundation, CIE and OIT headers copy from main (marked .main-top-links), not the rest of theirs.
   :where keeps it at main's specificity, so more specific link styles still win as they do there. */
.legacy :where(#footer, .masthead .top-bar .main-top-links) a:link { font-weight: 700; }

/* No underlines anywhere in the navy top bar, on any site's header (main, foundation, CIE,
   cybercenter): the plain text links (Contact Us, Building Rentals, IT Help, Visit
   www.walshcollege.edu, ...) are underlined by the theme, some through the <font> inside them, and
   none should be, hovered or not. The menu under the logo and the rest of the page are untouched.
   The theme's underline is .mini-widgets .text-area a:not(.dt-btn) (0,4,1), so the text-area
   selectors here carry one class more. */
.legacy .masthead .top-bar a,
.legacy .masthead .top-bar a:hover,
.legacy .masthead .top-bar a *,
.legacy .masthead .top-bar .mini-widgets .text-area a,
.legacy .masthead .top-bar .mini-widgets .text-area a:hover { text-decoration: none; }