/**
 * Accessibility Fixes CSS — Casa de las Campanas
 * WCAG 2.1 Level AA compliance.
 *
 * @package    CASA
 * @subpackage Accessibility
 * @since      1.0.0
 *
 * Index:
 *  0. Base
 *  1. Utilities
 *  2. Skip to content
 *  3. Focus indicators
 *  4. Color contrast
 *  5. Header
 *  6. Navigation
 *  7. Forms
 *  8. Content
 *  9. Link indicators
 * 10. Typography
 * 11. Images & Media
 * 12. Modals & Popups
 * 15. Trustindex Reviews
 * 13. Footer
 * 14. Reduced motion
 * 16. b-list Block — Semantic List Structure
 * 17. Image Feature Block — Button List
 */


/* =============================================================================
   0. Base
   ============================================================================= */

/* The theme's .pgMiddle has overflow:hidden which visually clips
   .heroFeatureHeadline (position:absolute, bottom:calc(100% - 100px)) above
   pgMiddle's top edge. On VoiceOver/Safari, overflow:hidden can remove clipped
   content from the accessibility tree entirely — causing the entire main landmark
   to appear "skipped" when navigating by landmarks or reading linearly.
   Override to overflow:visible so all content remains in the accessibility tree. */
.pgMiddle {
	overflow: visible !important;
}


/* =============================================================================
   1. Utilities
   ============================================================================= */

.cdc-visually-hidden,
.sr-only {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}


/* =============================================================================
   2. Skip to content
   ============================================================================= */

/* The Phoenix theme outputs: <a id="skip-nav" class="screenreader-text screen-reader-text" href="#pageContent"> */
a#skip-nav.screenreader-text,
a.cdc-skip-link, button#skip-chat.screenreader-text {
	position: absolute !important;
	left: -9999px !important;
	top: 0 !important;
	z-index: 999999 !important;
	padding: 0.75em 1em !important;
	background: #fff !important;
	color: #003853 !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border: 0 !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	overflow: hidden !important;
}
a#skip-nav.screenreader-text:focus,
a.cdc-skip-link:focus, button#skip-chat.screenreader-text:focus {
	position: fixed !important;
	left: 0.5em !important;
	top: 0.5em !important;
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
	outline: 2px solid #fff !important;
	outline-offset: 2px !important;
}


/* =============================================================================
   3. Focus indicators
   ============================================================================= */


html body *:focus,
html body *:focus-visible {
	outline: 2px solid;
	outline-offset: 2px;
}

html #topBar *:focus, html #topBar *:focus-visible {
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #000;
    outline: none;
}

#mobileNav  #anchorSearch form:has(input:is(:focus, :focus-visible)), #siteHeader #topBar #anchorSearch form#searchform input:is(:focus, :focus-visible) {
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #000;
    outline: none;
}

#anchorSearch button#searchToggle:is(:focus, :focus-visible) {
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #000;
    border-radius: 50%;
    outline: none;
}

/* Gradient dark-blue containers — rgb(0,56,82) is the unique token in that gradient */
[style*="rgb(0,56,82)"] a.btn-content:is(:focus, :focus-visible) {
	color: #fff;
}

body.cdlc #gd-icm-map .marker-icon .gdicm-popup:focus, body.cdlc #gd-icm-map .marker-icon .gdicm-zoom:focus {
	outline: 2px solid #000 !important;
	outline-offset: 2px;
}

/* Form fields */
.gform_wrapper .gfield input:is(:focus, :focus-visible),
.gform_wrapper .gfield select:is(:focus, :focus-visible),
.gform_wrapper .gfield textarea:is(:focus, :focus-visible),
.gform_wrapper .gform-footer input:is(:focus, :focus-visible) {
	outline: 2px solid #000 !important;
}


.ti-inner:has(span.ti-info-icon:is(:focus, :focus-visible)) {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* =============================================================================
   4. Color contrast
   ============================================================================= */

div.ti-widget.ti-goog .ti-read-more span {
	opacity: 1;
}

/* =============================================================================
   5. Header
   ============================================================================= */

/* Breakpoints:
     < 1200px  → mobile layout: hamburger + #mobileNav visible, desktop nav hidden
     ≥ 1200px  → desktop layout: desktop nav visible, hamburger hidden

   The theme's own CSS shows #mobileNavBtn below ~1200px already; we only need
   to hide it at ≥ 1200px and ensure the desktop nav is hidden below 1200px. */

body #headLogo a {
outline-color: #fff;
}

body.cdlc #mobileNavBtn {
	border: 3px solid #eec456;
    padding: 10px;
}


body.cdlc #mobileNavBtn:is(:hover, :focus, :focus-visible), body.cdlc #mobileNavBtn:is(:hover, :focus, :focus-visible) .text {
	background-color: transparent;
	color: #eec456;
}
body.cdlc #mobileNavBtn:is(:hover, :focus, :focus-visible) .icon-bar {
	background-color: #eec456;
}

/* Hide hamburger at full desktop width */
@media (min-width: 1200px) {
	#mobileNavBtn {
		display: none !important;
	}
}

/* Hide desktop nav list (not #featureLinkWrap) below 1200px */
@media (min-width: 1200px) and (max-width: 1599px) {
	body.cdlc #headLogo {
		align-items: center;	
		display: flex;
		max-width: 230px;
	}
	body #headLogo a {
		align-items: center;	
		display: flex;
		height: initial;
	}
	body #headLogo a img {
		max-height: 65px;
	}
}

@media (min-width: 1200px) and (max-width: 1499px) {
	body #headerMain nav {
		padding-left: 0;
	}
	body #headerMain:not(.center-menu) #headerMainWrap>nav>.menu-primary-navigation-container {
		flex-grow: 1;
		margin-left: 0;
	}
	#headerMain #menu-primary-navigation {
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	#headerMain #menu-primary-navigation > li {
		flex-grow: 0;
	}
	body.cdlc.megaMenu #headerMain .menu-primary-navigation-container ul#menu-primary-navigation > li > a {
		font-size: 16px;
		text-align: center;
		line-height: 1.2;
		max-width: min-content;

        align-items: center;
        display: inline-flex;
	}
}

@media (max-width: 1199px) {
    body.cdlc #headLogo {
        width: calc(100% - 200px);
        max-width: 200px;
    }
	body #headLogo a {
		display: inline-flex;
		width: initial;
	}
	body #headLogo a img {
		width: initial;
	}

	.menu-primary-navigation-container {
		display: none !important;
	}
	.menu-primary-navigation-container + #featureLinkWrap {
		align-items: center;
		display: flex !important;
	}
	#featureLinkWrap a {
		font-size: 18px;
	}
}

@media (max-width: 991px) {
	body #headerMain nav {
		flex-basis: auto;
	}

	body.cdlc #mobileNavBtn .text {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.menu-primary-navigation-container +#featureLinkWrap {
		display: none !important;
	}
}

@media (max-width: 340px) {
    body #mobileNav #mobileNavClose #anchorSearch {
        margin-right: 2px;
    }
}


/* =============================================================================
   6. Navigation
   ============================================================================= */

/* --- Desktop nav: flex layout so sub-arrow sits beside the link, not inside it --- */
#menu-primary-navigation .menu-item-has-children,
#anchorMenu .menu-item-has-children {
	display: flex;
	align-items: stretch;
	position: relative;
}
#menu-primary-navigation .menu-item-has-children > a,
#anchorMenu .menu-item-has-children > a {
	flex: 1 1 auto;
}

/* --- Sub-arrow button --- */
.cdc-sub-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	color: #fff; /* match nav link colour */
	opacity: 0.85;
	transition: opacity 0.15s ease;
}
.cdc-sub-arrow:hover,
.menu-item-has-children:hover > .cdc-sub-arrow {
	opacity: 1;
}
.cdc-sub-arrow svg {
	width: 12px;
	height: auto;
	fill: currentColor;
	transition: transform 0.2s ease;
}
.cdc-sub-arrow[aria-expanded="true"] svg {
	transform: rotate(180deg);
}
.cdc-sub-arrow:focus,
.cdc-sub-arrow:focus-visible {
	outline: 2px solid;
	outline-offset: -2px;
}

/* --- Show submenu on keyboard open (alongside existing :hover rule) ---
   The theme hides sub-menus with opacity:0 + transform:scaleY(0); both must
   be overridden to match the :hover open state. */
#menu-primary-navigation .menu-item-has-children.cdc-a11y-submenu-open > .sub-menu,
#anchorMenu .menu-item-has-children.cdc-a11y-submenu-open > .sub-menu {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: translate(-50%) scale(1) !important;
}

/* --- Mobile: desktop nav inert — no extra CSS needed (JS handles inert attr).
       Mobile open: JS removes inert from #mobileNav — no CSS needed here.   --- */

@media (prefers-reduced-motion: reduce) {
	.cdc-sub-arrow svg {
		transition: none;
	}
}


/* =============================================================================
   7. Forms
   ============================================================================= */
p.cdc-gf-required-notice {
    padding: 0 0 10px;
}
label.gfield_label.gform-field-label {
    display: inline-block;
    padding-bottom: 6px;
}

.gfield_checkbox .gchoice [type="checkbox"] + label:is(:hover, :focus, :focus-viisble):before {
	border: 2px solid #000 !important;
}
.gfield_checkbox .gchoice [type=checkbox]:is(:hover, :focus, :focus-viisble) + label:before{
	border: 2px solid #000 !important;
}


body .gform_wrapper .gform_body .gfield_description.validation_message {
	background-color: #CD322D;
    bottom: initial;
	color: #fff !important;
    left: 0;
    margin-top: 6px;
    position: relative;
    top: initial;
    transform: none;
}
body .gform_wrapper .gform_body .gfield_description.validation_message:after {
    top: -7px;
    bottom: initial;
    border-top: none;
    border-bottom: 7px solid #CD322D;
}



/*
 * Gravity Forms validation summary — demote <h2> to <p> (WCAG SC 1.3.1).
 *
 * fixGravityFormsValidationHeading() in accessibility__forms.js replaces
 * <h2 class="gform_submission_error"> with <p class="gform_submission_error">.
 * GF's own CSS targets the class, so most styles carry over. The only loss
 * is the browser's default h2 bold/size rendering, which we restore here so
 * the notice remains visually prominent without carrying heading semantics.
 */
p.gform_submission_error {
	display: block;
    font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}


/* =============================================================================
   8. Content
   ============================================================================= */





#sidebar .sidebarContainer {
    z-index: 9;
}


.b-floors-container .b-floor .image-box {
	height: 15vw;
}
main#mainContent .b-floors-container .b-floor .title-box .button-box .show-button:after {
    content: '✕' / '';
}


/* Tiled-link arrow: the CSS ::after pseudo-element cannot receive aria-hidden,
   but the content property accepts an alt-text slot (content: value / alt).
   Setting alt to '' removes the character from the accessibility tree while
   keeping it visible. Overrides the rule that sets content: '→'. */
body.cdlc .b-tlinks.b-tlinks-title-over .b-tlinks-headline::after,
body.cdlc .b-tlink-single.b-tlinks-title-over .b-tlinks-headline::after {
	content: '→' / '';
}

/* Cover-link / b-text-tiles card arrow icon (→ \2192).
   The ::before pseudo-element cannot receive aria-hidden, so we use the
   CSS alt-text slot to suppress it from the accessibility tree.
   JS (fixCoverLinks) also adds aria-hidden to the parent <span> for
   browsers that do not yet support the content / alt syntax. */
.gd-icon-RightArrow::before {
	content: "\2192" / "";
}


.wp-element-caption span {
	display: block;
	margin: 0 auto;
	text-align: center;
}
.wp-element-caption span.headSeo.has-text-color {
    margin-bottom: 0;
}
.wp-element-caption span:last-child {
    margin-bottom: 30px;
}


.gdicm-popup.gdicm-hidden, .gdicm-zoom.gdicm-hidden, .leaflet-marker-icon:has(>.gdicm-hidden) {
    display: none !important;
}



@media (min-width: 992px) {
	ul#resize {
		align-items: stretch;
		display: flex;
		flex-direction: column;
		gap: 2px;
		overflow: hidden;
	}
	ul#resize li button {
		height: 40px;
		line-height: 40px;
		width: 34px
	}
	ul#resize li button#fontDefault {
		align-items: center;
		display: flex;
		justify-content: center;
		height: 34px;
		padding: 0;
	}
	ul#resize li button:is(:hover, :focus, :focus-visible) {
		box-shadow: inset 0 0 0 2px #000, inset 0 0 0 3px #fff;
	}
}

@media (max-width: 1599px) {
	body.cdlc .gd-icm-wrapper {
		max-height: 100dvh;
		max-width: calc(100% - 40px);
	}
	body.cdlc .gd-icm-wrapper.gd-icm-desktop {
		height: 769px;
	}
	body.cdlc .gd-icm-wrapper.gd-icm-tablet {
		height: 577px;
	}
	body.cdlc .gd-icm-wrapper.gd-icm-mobile {
		height: 425px;
	}
}
@media (max-width: 767px) {
	.b-floors-container .b-floor .image-box {
		height: 55vw;
	}
}


/* =============================================================================
   9. Link indicators
   ============================================================================= */

/* Placeholder — link type indicators (new tab, PDF, external, etc.) added here. */


/* =============================================================================
   10. Typography
   ============================================================================= */

/* Placeholder — heading order, font size, and text spacing fixes added here. */


/* =============================================================================
   11. Images & Media
   ============================================================================= */

/* Placeholder — image alt, decorative media, and video caption fixes added here. */


/* =============================================================================
   12. Modals & Popups
   ============================================================================= */

/* Placeholder — modal focus trap, close button, and overlay styles added here. */


/* =============================================================================
   15. Trustindex Reviews
   ============================================================================= */

/* --- Navigation arrows — visible at ≤1024px ---
   TI's stylesheet hides .ti-controls (the container for prev/next buttons)
   via an @media query at ≤1023px. We restore the container at those
   breakpoints so keyboard users always have prev/next controls.
   IMPORTANT: We target only the container, NOT the individual .ti-next /
   .ti-prev elements. TI's toggleNavigation() hides each arrow at the
   first/last slide by setting inline style.display = "none" — overriding
   those would break the first/last-slide boundary behaviour. */
@media (max-width: 1024px) {
	.ti-widget .ti-controls {
		display: flex !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}
}

/* --- Play/pause button ---
   Injected by accessibility__reviews.js into .ti-reviews-container.
   Uses currentColor so it inherits the widget's text colour automatically. */
.cdc-ti-autoplay-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px 0 4px;
}
.cdc-ti-play-pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 2px solid currentColor;
	border-radius: 50%;
	cursor: pointer;
	color: inherit;
	opacity: 0.7;
	transition: opacity 0.15s ease;
}
.cdc-ti-play-pause:hover {
	opacity: 1;
}
.cdc-ti-play-pause:focus,
.cdc-ti-play-pause:focus-visible {
	opacity: 1;
	outline: 2px solid;
	outline-offset: 3px;
}

/* --- Per-review "Verified by Trustindex" badge tooltip ---
   JS gives each .ti-verified-review span tabindex="0". Show the tooltip
   on keyboard focus so the text is accessible without a mouse hover.
   ESC hides it via blur() in the delegation keydown handler. */
.ti-stars .ti-verified-review[tabindex="0"]:focus .ti-verified-tooltip,
.ti-stars .ti-verified-review[tabindex="0"]:focus-visible .ti-verified-tooltip {
	display: block !important;
}
.ti-stars .ti-verified-review[tabindex="0"]:is(:focus, :focus-visible) {
	outline: 2px solid;
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- "Verified by Trustindex" info-icon disclosure button ---
   JS promotes .ti-info-icon to a disclosure button (role="button",
   tabindex="0", aria-expanded). Show a focus ring to match. */
.ti-info-icon[tabindex="0"]:is(:focus, :focus-visible) {
	outline: 2px solid;
	outline-offset: 3px;
	border-radius: 50%;
}

/* --- Disclaimer disclosure panel — open state ---
   TI's base CSS hides .ti-disclaimer via visibility:hidden + opacity:0 (not
   display:none), so toggling display alone does not make the panel visible.
   Using display:none to hide/show the panel also breaks TI's CSS hover
   transitions. Instead, JS toggles .cdc-ti-disclaimer-open which overrides
   TI's visibility/opacity with !important, making the panel visually shown.
   AT access is controlled separately via aria-hidden on the element itself. */
.ti-disclaimer.cdc-ti-disclaimer-open {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	transition-delay: 0ms !important;
	position: relative; /* allows close button absolute positioning */
}

/* --- Disclaimer close button (injected by JS) ---
   Positioned in the top-right corner of the panel.
   Uses currentColor to inherit the panel's text colour automatically. */
.ti-disclaimer .cdc-ti-disclaimer-close {
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background: transparent;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	cursor: pointer;
	color: inherit;
	opacity: 0.65;
	transition: opacity 0.15s ease;
	line-height: 1;
}
.ti-disclaimer .cdc-ti-disclaimer-close:hover {
	opacity: 1;
}
.ti-disclaimer .cdc-ti-disclaimer-close:focus,
.ti-disclaimer .cdc-ti-disclaimer-close:focus-visible {
	opacity: 1;
	outline: 2px solid;
	outline-offset: 2px;
}

/* --- Fix F: Star icon color — WCAG 1.4.11 Non-text Contrast (3:1) ---
   Convert yellow stars to the brand color #003853 (dark teal/navy).
   Stars are SVG <img> elements; the filter chain converts any source color
   to a specific target without modifying the SVG files.
   Pipeline:
     brightness(0)   → pure black
     invert(50%)     → mid-gray (128,128,128)
     sepia(90%)      → warm brownish
     hue-rotate(164°)→ shifts hue ~164° toward teal
     saturate(600%)  → intensifies to vivid dark teal
     brightness(32%) → darkens to match L≈16% of #003853
   Verified output: ~RGB(3, 57, 82) ≈ #003853. */
.ti-widget .ti-star {
	filter: brightness(0) invert(50%) sepia(90%) hue-rotate(164deg) saturate(600%) brightness(32%);
}

.ti-verified-by .ti-inner {
    cursor: pointer;
}
.ti-disclaimer:not(.cdc-ti-disclaimer-open) {
	display: none;
    visibility: hidden;
    opacity: 0;
}


/* =============================================================================
   5b. Phone Directory
   ============================================================================= */

/* Show .dropdown-menu when our JS has opened it. We stop propagation on the
   button so neither the theme's .open class nor Bootstrap's .show is ever
   added — this rule is the sole trigger for the open state. */
#phoneDir.cdc-open .dropdown-menu {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: translate(0) scaleY(1) !important;
}


/* =============================================================================
   13. Footer
   ============================================================================= */

footer #footerInfo #footerAddress a {
	cursor: pointer;
	text-decoration: underline;
}
footer #footerInfo #footerAddress a:is(:hover, :focus, :focus-viisble) {
	text-decoration: none;
}

.non_discrimination a:is(:hover, :focus, :focus-visible) {
	color: #4F6482;
	text-decoration: none;
}


/* =============================================================================
   14. Reduced motion (WCAG 2.3.3 AAA)
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}


/* =============================================================================
   16. b-list Block — Semantic List Structure
   ============================================================================= */

/*
 * The plugin renders one logical list split into <div class="b_list_col">
 * column wrappers as direct children of <ul>, which is invalid HTML
 * (WCAG SC 1.3.1 / H48). A render_block filter in custom.php collapses the
 * output into a single <ul data-columns="N"> with all <li> as direct children.
 *
 * CSS column-count provides the visual multi-column layout so the semantic
 * structure is correct and the appearance is unchanged.
 *
 * The plugin's bList.css applies `display:flex` to `.width-wrapper ul`;
 * we override that here so the column flow works correctly.
 */

.b-list .width-wrapper ul[data-columns] {
	display: block;
	padding-left: 20px;
	column-gap: 40px;
}

.b-list .width-wrapper ul[data-columns="1"] { column-count: 1; }
.b-list .width-wrapper ul[data-columns="2"] { column-count: 2; }
.b-list .width-wrapper ul[data-columns="3"] { column-count: 3; }

/* Prevent list items from breaking across column boundaries. */
.b-list .width-wrapper ul[data-columns] li {
	break-inside: avoid;
	line-height: 1.4;
	margin: 0;
	margin-top: 0 !important;
	padding: 7.5px 0;
}

/* When list-style-type is none/empty, remove the left indent. */
.b-list .width-wrapper ul[data-columns][style*="list-style-type:none;"],
.b-list .width-wrapper ul[data-columns][style*="list-style-type:;"] {
	padding-left: 0;
}
@media (max-width: 991px) {
	.b-list .width-wrapper ul[data-columns] {
		column-count: 1;
	}
}


/* =============================================================================
   17. Breadcrumbs
   ============================================================================= */

/*
 * Yoast SEO outputs breadcrumbs as <span> elements separated by a visible »
 * character. A wpseo_breadcrumb_output filter in filters.php rebuilds the
 * output as a proper <ol>/<li> list (WCAG 1.3.1 / H48) and removes the »
 * separator from the accessibility tree (WCAG 4.1.2).
 *
 * This reset ensures the <ol> matches the original visual appearance:
 * no bullets, no extra margin/padding, items displayed inline.
 */
#breadcrumbs ol {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    inline; /* match Yoast's inline <span> flow */
}

#breadcrumbs li {
    display: inline;
}

/* Re-inject the visual separator between crumbs.
   The  / ''  alt-text syntax (CSS Content Level 4) gives the generated
   content an empty accessible name so VoiceOver/NVDA skip it entirely
   while sighted users still see the » character. */
#breadcrumbs li + li::before {
    content: ' \00BB ' / ''; /* visible » — silent to screen readers */
    color:   inherit;
}


/* =============================================================================
   17. Image Feature Block — Button List
   ============================================================================= */

/*
 * fixBtnWrapList() in accessibility__content.js replaces <div class="btnWrap">
 * with <ul class="btnWrap"> and wraps each <a> in a <li> so screen readers
 * announce the group as a proper list (WCAG SC 1.3.1).
 *
 * The plugin's bImageFeature.css targets .btnWrap with display:flex and targets
 * .btnWrap a for flex-item sizing. With <li> now between .btnWrap and <a>, the
 * <a> is no longer a direct flex child, so those flex-item rules stop applying.
 *
 * Reset browser ul/li defaults and re-establish the flex layout on <li>.
 */

#mainContent.main #pageContent ul.btnWrap {
    list-style: none;
    padding: 0;
}

#mainContent.main ul.btnWrap li {
    flex-basis: auto;
    flex-grow: 1;
    margin: 0;
    max-width: 75%;
}

#mainContent.main ul.btnWrap li a {
    max-width: 100%;
    width: stretch;
}

@media (max-width: 767px) {
	#mainContent.main #pageContent ul.btnWrap  {
		flex-wrap: wrap;
	}
	#mainContent.main ul.btnWrap li {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* =============================================================================
   15b. Roobrik Widget
   ============================================================================= */

/* --- Fix G: Roobrik info button focus ring — WCAG 2.4.7 / 2.1.1 ---
   JS (fixRoobrikWidget) adds tabindex="0" and role="button" to the button
   element that TI's theme leaves non-interactive. Provide a visible focus
   indicator to match WCAG 2.4.11 (AA). */
#roobrikWidgetInfoButton:focus,
#roobrikWidgetInfoButton:focus-visible,
.roobrik-widget-info-icon[tabindex="0"]:focus,
.roobrik-widget-info-icon[tabindex="0"]:focus-visible {
	outline: 3px solid #005FCC;
	outline-offset: 2px;
	border-radius: 50%;
}

/* =============================================================================
   18. Floor Plans Block — Focus Styles
   ============================================================================= */

/*
 * fixFloorPlans() in accessibility__content.js adds role="button" + tabindex="0"
 * to .show-button and keeps .link-box hidden from AT when closed.
 * These rules provide the visible focus indicators required by WCAG 2.4.7 / 2.4.11.
 */

/* Expand/collapse toggle button */
.b-floor .show-button:focus,
.b-floor .show-button:focus-visible {
	outline: 3px solid #005FCC;
	outline-offset: 3px;
	border-radius: 50%;
}

/* Links inside the revealed link-box (Interactive Floor Plan, Download PDF).
   White outline for contrast against the dark image-box overlay. */
.b-floor .b-floor-link:focus,
.b-floor .b-floor-link:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
	border-radius: 2px;
}

/* Silence the ::after "✕" character from AT before JS adds aria-label.
   CSS Level 4 content alt-text (the / '' part) gives the generated content
   an empty accessible name so VoiceOver/NVDA skip it entirely.
   JS (fixFloorPlans) sets aria-label on the button which takes precedence
   afterwards; this rule covers the window before JS fires. */
.b-floors .b-floors-container .b-floor .title-box .button-box .show-button::after,
.b-floor-single .b-floors-container .b-floor .title-box .button-box .show-button::after {
	content: "✕" / "";
}

/* =============================================================================
   19. Staff Block — Button Overlay & Focus Styles
   ============================================================================= */

/*
 * fixStaffAccordion() injects <button class="cdc-staff-trigger"> as an
 * absolutely-positioned overlay inside each .staff-head so that Safari/VoiceOver
 * reliably exposes it as role="button" (role="button" on <header> is overridden
 * by WebKit's implicit "group" mapping, causing double announcements).
 *
 * The overlay covers the full header so mouse clicks reach .staff-head and
 * trigger the plugin's jQuery handler via event bubbling.
 */

/* Make .staff-head the positioning context for the overlay button. */
.b-staff .staff-head {
	position: relative;
}

/* Transparent full-cover button — invisible to sighted users, focusable by keyboard. */
.b-staff .cdc-staff-trigger {
	position: absolute;
	inset: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 1;
}

/* Focus ring on the overlay button (WCAG 2.4.7 / 2.4.11).
   outline-offset is negative so the ring appears inside the header border. */
.b-staff .cdc-staff-trigger:focus,
.b-staff .cdc-staff-trigger:focus-visible {
	outline: 3px solid #005FCC;
	outline-offset: -3px;
	border-radius: 2px;
}

/* =============================================================================
   20. Galleria Popup Gallery — Keyboard / ARIA Focus Styles
   =============================================================================

   fixGalleriaPopup() in accessibility__gallery.js promotes the nav arrows,
   thumbnail strip scrollers, and thumbnail items to keyboard-interactive
   elements (role="button", tabindex="0"). These rules provide visible focus
   rings and pointer cursors for those controls.

   All selectors are scoped to .galleria-container so they never bleed outside
   the popup.
   ============================================================================= */

/* Cursor for all promoted button-role divs. */
.galleria-container .galleria-image-nav-right,
.galleria-container .galleria-image-nav-left,
.galleria-container .galleria-thumb-nav-right,
.galleria-container .galleria-thumb-nav-left,
.galleria-container .galleria-thumbnails .galleria-image {
	cursor: pointer;
}

/* Focus rings on nav arrows (WCAG 2.4.7 / 2.4.11). */
.galleria-container .galleria-image-nav-right:focus,
.galleria-container .galleria-image-nav-right:focus-visible,
.galleria-container .galleria-image-nav-left:focus,
.galleria-container .galleria-image-nav-left:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Focus ring on thumbnail strip scrollers. */
.galleria-container .galleria-thumb-nav-right:focus,
.galleria-container .galleria-thumb-nav-right:focus-visible,
.galleria-container .galleria-thumb-nav-left:focus,
.galleria-container .galleria-thumb-nav-left:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Focus ring on individual thumbnail items. */
.galleria-container .galleria-thumbnails .galleria-image:focus,
.galleria-container .galleria-thumbnails .galleria-image:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Focus ring on the active (main) stage image. */
.galleria-container .galleria-stage .galleria-image:focus,
.galleria-container .galleria-stage .galleria-image:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

/* Focus ring on the MFP close button. */
.mfp-close:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 2px !important;
}

body #galTitle h3 {
	color: #fff;
}
body .galleria-theme-classic .galleria-info-description {
	color: #fff;
}
body .galleria-container .galleria-counter {
	color: #fff;
	z-index: 9;
}

body .galleria-theme-classic .galleria-carousel .galleria-thumb-nav-left, body .galleria-theme-classic .galleria-carousel .galleria-thumb-nav-right {
    opacity: 1;
}
body .galleria-theme-classic .galleria-carousel .galleria-thumb-nav-left.disabled, body .galleria-theme-classic .galleria-carousel .galleria-thumb-nav-right.disabled {
    opacity: 0.2;
    filter: alpha(opacity=20);
    cursor: default;
}
body .galleria-thumb-nav-right:after {
    border-left: 12px solid #fff;
    border-bottom: 12px solid transparent;
    border-top: 12px solid transparent;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
body .galleria-thumb-nav-left:after {
    border-right: 12px solid #fff;
    border-bottom: 12px solid transparent;
    border-top: 12px solid transparent;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


/*
 * Galleria counter — force visible.
 * Galleria sets opacity:0 via inline style. fixCounter() in
 * accessibility__gallery.js overrides it with style.opacity='1', but this
 * CSS !important rule acts as a belt-and-suspenders fallback.
 * aria-hidden="true" is set by JS so AT does not announce the counter
 * (position is already announced via the aria-live region).
 */
.galleria-container .galleria-counter {
	opacity: 1 !important;
}

/*
 * Galleria info title — hidden.
 * The title comes from the WordPress attachment title field (e.g.
 * "Casa-De-Las-Campanas-131") which is the raw filename and not useful
 * to display. The description (.galleria-info-description) contains the
 * meaningful alt text and is already used as the stage image's aria-label
 * by accessibility__gallery.js, so displaying the title is redundant.
 */
.galleria-container .galleria-info-title {
	display: none !important;
}


@media (max-width: 991px) {
	body .mfp-wrap .galleria-image-nav {
		display: block;
	}

	body .mfp-wrap .galleria-image-nav .galleria-image-nav-right {
		width: 60px;
		height: 60px;
		opacity: 0.9;
	}
	body .mfp-wrap .galleria-image-nav .galleria-image-nav-right:after {
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin-left: 5%;
	}
	body .mfp-wrap .galleria-image-nav .galleria-image-nav-left {
		width: 60px;
		height: 60px;
		opacity: 0.9;
	}
	body .mfp-wrap .galleria-image-nav .galleria-image-nav-left:after {
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin-left: -5%;
	}
}

/* =============================================================================
 * Section 14 — Campus Map interactive element focus styles
 *
 * The gd-interactive-campus-map plugin sets style="outline: none;" inline on
 * .lSPrev, .lSNext, .mfp-close, and map pin/zoom elements, suppressing the
 * browser's default focus ring. Override with !important so keyboard users
 * always see a visible focus indicator (WCAG SC 2.4.7).
 * =========================================================================== */
.gdicm-popup:focus-visible,
.gdicm-zoom:focus-visible,
.lSPrev:focus-visible,
.lSNext:focus-visible,
.gd-icm-modal-buttons button:focus-visible,
.pan-control:focus-visible,
.leaflet-control-zoom a:focus-visible {
	outline: 3px solid currentColor !important;
	outline-offset: 3px;
}

/* Close button — Magnific Popup sets outline:none inline in the map context. */
.mfp-wrap[role="dialog"] button.mfp-close:focus-visible {
	outline: 3px solid currentColor !important;
	outline-offset: 3px;
}