/*
Theme Name: RO Moray Blocks
Theme URI: https://www.ronline.com/
Author: Resources Online
Author URI: https://www.ronline.com/
Description: MS Moray (MWF v2) parent block theme, with partial customizations to resemble the Reimagine design framework. Requires Advanced Custom Fields PRO.
Version: 1.32.0
Requires at least: 6.0
Tested up to: 6.9.4
License: None. For approved Microsoft use only.
Text Domain: romwf
*/

:root {
    --moray-text-small: 0.875rem;
    --moray-text-default: 1rem;
    --moray-text-large: 1.125rem; /* s/b >= 1084px, else 1rem */
    --moray-vw: 100vw;
    --moray-container-padding: 1.5rem;
    --moray-cta-radius: 0.5rem;
    --moray-cta-pill-radius: 50rem;
    --moray-card-image-radius: 1.25rem;
    --moray-color-primary: #0067b8;
}
@media (min-width: 1084px) {
    :root { --moray-container-padding: calc(var(--moray-vw) * 0.1); }
}
@media (min-width: 1777.77778px) {
    :root { --moray-container-padding: calc(var(--moray-vw) - 1600px); }
}

html { scroll-behavior: smooth; }

/* Fix Moray bad override of critical UHF style */
uhf-promo-banner a[href]:focus { outline: none; }
uhf-promo-banner a[href].uhf-promo-banner__action:focus-visible { outline: 2px solid var(--moray-color-primary); }

/**
 * Responsive BR tags, corresponding to Moray's breakpoints.
 * Sample usage: <br class="br-md">
 */
br[class^='br-'] { display: none }
@media screen and (max-width: 539px) { br.br-xs { display: inline } }
@media screen and (min-width: 540px) and (max-width: 859px) { br.br-sm { display: inline } }
@media screen and (min-width: 860px) and (max-width: 1083px) { br.br-md { display: inline } }
@media screen and (min-width: 1084px) and (max-width: 1399px) { br.br-lg { display: inline } }
@media screen and (min-width: 1400px) { br.br-xl { display: inline } }

/* fix WP CSS bugs that can't be overridden during render */
.wp-block-image.aligncenter { margin-left: auto; margin-right: auto; }
main blockquote { border-style: solid; border-width: 0 0 0 .125rem; border-color: #757575; margin: 0 0 1rem; padding: .75rem 1.5rem; background: #f2f2f2; }
figure.wp-block-image.alignleft { float: left; margin: 0 1.25rem 1.25rem 0; }
figure.wp-block-image.alignright { float: right; margin: 0 0 1.25rem 1.25rem; }
figure.wp-block-image { display: table; }
figure.wp-block-image figcaption { display: table-caption; caption-side: bottom; }

/* WP's default SR class */
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; }

/* Clearfix (alias: .cf) - legacy, but JIC */
.cf::before, .cf::after, .clearfix::before, .clearfix::after { content: " "; display: table; }
.cf::after, .clearfix::after { clear: both; }

body.error404 #headerUniversalHeader #meControl { display: none !important; }

/* Obvious utility classes & styles missing from Moray */
img { max-width: 100%; height: auto; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; } .gap-4 { gap: 1.5rem; } .gap-5 { gap: 3rem; } .gap-g { gap: 0.75rem; }
.column-gap-1 { column-gap: .25rem; } .column-gap-2 { column-gap: .5rem; } .column-gap-3 { column-gap: 1rem; } .column-gap-4 { column-gap: 1.5rem; } .column-gap-5 { column-gap: 3rem; } .column-gap-g { column-gap: 0.75rem; }
.row-gap-1 { row-gap: .25rem; } .row-gap-2 { row-gap: .5rem; } .row-gap-3 { row-gap: 1rem; } .row-gap-4 { row-gap: 1.5rem; } .row-gap-5 { row-gap: 3rem; } .row-gap-g { row-gap: 0.75rem; }
img[class*='border-radius-'], [class*='border-radius-'] { overflow: hidden; }
.border-radius-image { border-radius: var(--moray-card-image-radius) !important; }
h5, .h5 { margin-bottom: 1rem; }
figure .figure-caption { font-weight: 600; font-size: 1em; text-align: left; }


/* More space options plz */
/* 72px */
.m-6 { margin: 4.5rem !important; } .mt-6, .my-6 { margin-top: 4.5rem !important; } .mr-6, .my-6 { margin-right: 4.5rem !important; }
.mb-6, .my-6 { margin-bottom: 4.5rem !important; } .ml-6, .my-6 { margin-left: 4.5rem !important; }
.p-6 { padding: 4.5rem !important; } .pt-6, .py-6 { padding-top: 4.5rem !important; } .pr-6, .py-6 { padding-right: 4.5rem !important; }
.pb-6, .py-6 { padding-bottom: 4.5rem !important; } .pl-6, .py-6 { padding-left: 4.5rem !important; }

/* 108px */
.m-7 { margin: 6.75rem !important; } .mt-7, .my-7 { margin-top: 6.75rem !important; } .mr-7, .my-7 { margin-right: 6.75rem !important; }
.mb-7, .my-7 { margin-bottom: 6.75rem !important; } .ml-7, .my-7 { margin-left: 6.75rem !important; }
.p-7 { padding: 6.75rem !important; } .pt-7, .py-7 { padding-top: 6.75rem !important; } .pr-7, .py-7 { padding-right: 6.75rem !important; }
.pb-7, .py-7 { padding-bottom: 6.75rem !important; } .pl-7, .py-7 { padding-left: 6.75rem !important; }

/* 128px */
.m-8 { margin: 8rem !important; } .mt-8, .my-8 { margin-top: 8rem !important; } .mr-8, .my-8 { margin-right: 8rem !important; }
.mb-8, .my-8 { margin-bottom: 8rem !important; } .ml-8, .my-8 { margin-left: 8rem !important; }
.p-8 { padding: 8rem !important; } .pt-8, .py-8 { padding-top: 8rem !important; } .pr-8, .py-8 { padding-right: 8rem !important; }
.pb-8, .py-8 { padding-bottom: 8rem !important; } .pl-8, .py-8 { padding-left: 8rem !important; }

/* fix Moray goofs */
html:not([dir=rtl]) .cta.cta-reverse { padding-right: 0; }
.area-heading>:last-child>:last-child p + p { margin-top: 1rem; }

/* Moray does not handle link colors on non-white backgrounds b/c "too hard" */
.bg-primary a, .bg-brand a, .bg-brand-dark a, .bg-dark a,  .bg-y a,  .bg-inverse a,  .bg-neutral-300 a, .bg-neutral-400 a,  .bg-black a, .bg-dark-purple a, .bg-blue a, .bg-dark-blue a, .bg-orange a, .bg-dark-orange a, .bg-dark-yellow a, .bg-green a, .bg-dark-green a, .bg-teal a, .bg-dark-teal a, .bg-purple a, .bg-dark-purple a, .bg-gray-500 a, .bg-gray-600 a, .bg-gray-700 a, .bg-gray-800 a, .bg-gray-900 a { color: #fff; }


.social-links { --social-icon-width: 32px; }
.social-links li { position: relative; }
.social-links a { display: block; border-radius: 100%; overflow: hidden; }
.social-links img { width: var(--social-icon-width);  } 
.social-links [data-social-site='x'] img { filter: invert(100%); }
.social-links [data-social-site='bluesky'] { filter: invert(20%) sepia(100%) saturate(3000%) hue-rotate(180deg); padding: 0; width: var(--social-icon-width); }
.social-links [data-social-site='link'] { position: relative; width: var(--social-icon-width); padding: 2px; }
.social-links [data-social-site='link'] img { width: calc(var(--social-icon-width) - 2px); }

.social-links .social-share__copy-notice {
    position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 10;
    visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility .3s ease;
    border-radius: var(--moray-cta-radius); margin-bottom: 4px; padding: 4px 8px;
    font-size: 0.75rem; color: #fff; background-color: #000; white-space: nowrap; pointer-events: none;
}
.social-links .social-share__copy-notice.visible { opacity: 1; visibility: visible; pointer-events: auto; }


/* Fix quirk in FEATURES */
.card-offset > div.row { flex-grow: 1; }

/* Prevent authors from marring heading styles with bad HTML */
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong, h1 b, h2 b, h3 b, h4 b, h5 b, h6 b { font-weight: inherit; }


/**
 * .add-ellipsis
 * Support at-will ellipses on arbitrary elements (even blocks) via standard CSS class and inline CSS vars.
 * See: https://css-tricks.com/line-clampin/#the-standardized-way
 * Default number of lines: 3
 * To customize: on the element, add an inline STYLE attribute, with CSS var "--ellipsis-max-lines: X", where X = how many lines you want.
 */
.add-ellipsis { display: -webkit-box; -webkit-line-clamp: var(--ellipsis-max-lines, 3); -webkit-box-orient: vertical; overflow: hidden; }


/* Misc Moray customizations */

.eyebrow { font-size: var(--moray-text-small); }

a.btn.btn-learnmore { gap: 0.5rem; padding: 0; }
a.btn.btn-learnmore .glyph::before { position: relative; left: 1px; font-weight: 400 !important; }
a.btn.btn-learnmore:hover span:not(.glyph) { text-decoration: underline; }
.bg-inverse a.btn.btn-learnmore .glyph, .bg-secondary a.btn.btn-learnmore .glyph, .bg-dark a.btn.btn-learnmore .glyph, .bg-gray-700 a.btn.btn-learnmore .glyph, .bg-gray-800 a.btn.btn-learnmore .glyph, .bg-gray-900 a.btn.btn-learnmore .glyph, .bg-black a.btn.btn-learnmore .glyph { filter: invert(1); }

.btn { border-radius: var(--moray-cta-radius); }
.btn-pill { border-radius: var(--moray-cta-pill-radius); }

button.cta {
    position: relative; display: inline-flex; justify-content: center; align-items: center; gap: .4375em;
    border: .125rem solid transparent; border-radius: .125rem; outline: none; background-color: transparent; text-decoration: none; padding: .625rem .75rem;
    font-size: 1rem; line-height: 1; font-weight: 600; color: var(--moray-color-primary);
}

.badge { border-radius: 0.25rem; font-size: 0.75rem; }
.bg-primary .badge.text-neutral-400, .bg-inverse .badge.text-neutral-400 { color: #fff !important; }

.moray-feature.card picture img { border-radius: var(--moray-card-image-radius); overflow: hidden; }

.card.format-default picture, .card.blog-card picture, .blog-hero-feature .moray-feature picture { 
    aspect-ratio: 85/48; display: flex; justify-content: center; align-items: center; overflow: hidden; 
}
.blog-hero-feature .moray-feature picture { aspect-ratio: 3/2; } /* yes, intentional */

.card.format-default picture img, .card.blog-card picture img,
.blog-hero-feature .moray-feature picture img {
    object-fit: cover; min-width: 100%; min-height: 100%;
}
.card.blog-card .card-body p,
.blog-hero-feature .moray-feature .moray-feature-body-copy p { 
    display: -webkit-box; -webkit-line-clamp: var(--ellipsis-max-lines, 3); -webkit-box-orient: vertical; overflow: hidden; 
}

/* Custom round elements */
.material-card, .material-md-card { border-radius: var(--moray-card-image-radius); overflow: hidden; }
.material-card picture, .material-md-card picture { position: relative; border-radius: 1rem; margin: 0.5rem 0.5rem 0; overflow: hidden; }
.card-horizontal picture, .material-card.card-horizontal picture { margin: 0.5rem; display: block; }

/* Card hover FX */
.material-card img, .material-md-cardimg { object-fit: cover; }
.material-card[data-mount='click-group'] img, .material-md-card[data-mount='click-group'] img { transition: transform 150ms; will-change: scale; object-fit: cover; }
.material-card[data-mount='click-group']:hover img, .material-md-card[data-mount='click-group']:hover img { transform: scale(1.05); }
/* .material-card, .material-md-card { box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12); }
.material-card:hover, .material-md-card:hover { box-shadow:  0px 4px 8px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12); } */


/* Ala material-card: */
.blog-hero-feature .moray-feature {
    overflow: hidden; border-radius: 1rem; background-color: #fff;
    box-shadow: 0 .0625rem .25rem 0 rgba(0, 0, 0, .12), 0 .125rem .5rem 0 rgba(0, 0, 0, .12);
}

@media screen and (min-width: 860px) {
    .blog-hero-feature .moray-feature .card-body { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; }
    .blog-hero-feature .moray-feature .badge { position: absolute; top: 2rem; } 
    .blog-hero-feature .moray-feature .link-group { position: absolute; bottom: 2rem; }
    .blog-hero-feature .moray-feature .text-right .badge { right: 3rem; }
    .blog-hero-feature .moray-feature .text-right .link-group { right: 3rem; }
}


/* Moray inexplicably disables true here state on first and last ACTIVE ('here') elements. Fix that: */
.pagination .page-item.active:first-child .page-link,
.pagination .page-item.active:last-child .page-link { 
    color: inherit; cursor: default;
}
/* Moray also lets you click ACTIVE paging links, so let's not */
.pagination .page-item.active .page-link { pointer-events: none; }


/* Customize in-page navigation to mimic Reimagine lib */
.nav-in-page { --indicator-height: 0.25rem; --indicator-color: #004275; --label-text-color: #17253d; }
.nav-in-page::before { background-color: transparent; }
.nav-in-page-item .nav-in-page-link { z-index: 1; }
.nav-in-page-bar.nav-in-page-horizontal .nav-in-page::before { bottom: calc(var(--indicator-height) * -1); }
.nav-in-page-item .nav-in-page-link, .nav-in-page-item .nav-in-page-link.active { font-weight: 600; font-size: var(--moray-text-small); color: var(--label-text-color); }
.nav-in-page-item .nav-in-page-link::before { content: ''; position: absolute; display: block; width: 100%; height: var(--indicator-height); border-radius: 0.25rem;  bottom: calc(var(--indicator-height) * -1); opacity: 0; transition: opacity .2s ease; z-index: 0; }
.nav-in-page-item .nav-in-page-link.active::before { opacity: 1; background-color: var(--indicator-color); }
.nav-in-page-bar.nav-in-page-horizontal .nav-in-page-item .nav-in-page-link.active::before { bottom: calc(var(--indicator-height) * -1); } 
@media screen and (min-width: 720px) {   

    /**
     * !! Moray's JS lib gets utterly confused by this CSS. It can't determine when to add the .sticky class...but will after a couple window resizes...sometimes.
     * This also causes problems in the responsive (low-res) view, parts of which key off the .sticky class.
     * Probably can re-engineer all of that, but tabling for another day.
     */
    /* .romoray-in-page-nav-wrapper.sticky:not(.stuck) {
        padding-right: calc(var(--container-padding)/ 2); padding-left: calc(var(--container-padding)/ 2);
        margin-left: calc(var(--container-padding)/ -2); margin-right: calc(var(--container-padding)/ -2);
        background-color: #fff !important;
        box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .45), 0 .1875rem .4375rem rgba(0, 0, 0, .3);
    } */

    .sticky.stuck .nav-in-page-container .combobox-divider, .sticky.stuck .nav-in-page-container .combobox-item:not(.nav-in-page-item) { background-color: var(--indicator-color); opacity: 1; }

    .nav-in-page-bar.nav-in-page-horizontal .nav-in-page { column-gap: 1.5rem; }
    .nav-in-page-bar.nav-in-page-horizontal .nav-in-page-item { margin-left: 0; margin-right: 0; }
}
@media screen and (max-width: 719px) {
    .nav-in-page-bar .btn { font-weight: 600; font-size: var(--moray-text-small); padding-left: 0;  }
    .nav-in-page-bar .btn-faint-secondary, .nav-in-page-bar .btn-faint-secondary.active { color: #17253d !important; background-image: none; background-color: #fff; }
    .sticky.stuck.sticky-direction-top.stuck-depth { box-shadow: none; border-bottom: 0.25rem solid #004275; }
    .theme-dark .combobox .combobox-item[aria-selected=true] { background-color: yellow; }
    .sticky.stuck .nav-in-page-container .combobox-item:not(.nav-in-page-item) { display: none; }
}
.nav-in-page-container label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; }
.sticky.stuck .nav-in-page-bar { margin-top: 0; margin-bottom: 0; }
.nav-in-page-bar.nav-in-page-horizontal .nav-in-page { margin-bottom: var(--indicator-height); }
.nav-in-page-bar.nav-in-page-horizontal .nav-in-page-item { margin-top: 1rem; margin-bottom: 0; }
.nav-in-page-item .nav-in-page-link, .nav-in-page-item .nav-in-page-link.active { padding-block-end: 1rem; }


/* Carousel: images fit to width (same as Highlight customization) */
.carousel .card-img-overlay > .card-background picture { width: 100%; }
@media (min-width: 1400px) {
    .carousel .card-img-overlay > .card-background .card-img, .carousel .card-img-overlay > .card-background img { width: 100% !important; object-fit: cover; }
}

/* Carousel: custom pause/play buttons for autoplay use case */
button.carousel-control-pause { position: relative; width: 2rem; height: 2rem; padding: 0; margin: 0; background: transparent; border: 0; }
button.carousel-control-pause::after {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    content: ''; display: block; width: 20px; height: 20px;
    background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24"><path d="M5.746 3a1.75 1.75 0 0 0-1.75 1.75v14.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 0 0 1.75-1.75V4.75A1.75 1.75 0 0 0 9.246 3zm9 0a1.75 1.75 0 0 0-1.75 1.75v14.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 0 0 1.75-1.75V4.75A1.75 1.75 0 0 0 18.246 3z"/></svg>') center no-repeat;
    background-size: contain;
}
button.carousel-control-pause[data-action="play"]::after { 
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24"><path d="M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.727c1.566.852 1.566 3.1 0 3.952L8.325 20.702C6.826 21.518 5 20.432 5 18.726z"/></svg>');
}

/* Multi feature */
.multi-feature-feature { display: flex; justify-content: center; }
.multi-feature-feature img { border-radius: var(--moray-card-image-radius); }
.multi-feature ul.accordion[style] { overflow-y: unset !important; }

/* Alert / Banner custom overrides */
html:not([dir=rtl]) .alert-dismissible { padding-right: 0; }
.alert { width: 100%; padding-top: 0.5rem; padding-bottom: 0.5rem; min-height: auto; }
.alert-full-bleed { padding-left: 0; padding-right: 0; }
.alert .close { position: relative; }
html:not([dir=rtl]) .alert .close { top: auto; right: auto; }

/* Allow full-bleed bg colors when nested inside a container (for sticky stuff) */
.container .full-bleed-contained {
    margin-left: calc(var(--moray-container-padding)/ -2); margin-right: calc(var(--moray-container-padding)/ -2);
    max-width: calc(100vw - 8px); overflow-x: hidden;
}
.container .full-bleed-contained .container {
    padding-right: calc(var(--moray-container-padding)/ 2); padding-left: calc(var(--moray-container-padding)/ 2);
}

/* section options: support custom BG images */
div.romoray-container-bg-image {
    background-size: var(--bgi-size, 'cover'); background-repeat: var(--bgi-repeat, 'no-repeat'); background-position: var(--bgi-position, 'center');
}
@media screen and (min-width: 0) {
    div.romoray-container-bg-image.bgi-0 { background-image: var(--bgi-0); }
}
@media screen and (min-width: 540px) {
    div.romoray-container-bg-image.bgi-560 { background-image: var(--bgi-540); }
}
@media screen and (min-width: 860px) {
    div.romoray-container-bg-image.bgi-860 { background-image: var(--bgi-860); }
}
@media screen and (min-width: 1084px) {
    div.romoray-container-bg-image.bgi-1084 { background-image: var(--bgi-1084); }
}
@media screen and (min-width: 1400px) {
    div.romoray-container-bg-image.bgi-1400 { background-image: var(--bgi-1400); }
}

.carousel .card-body .h1,
.moray-highlight .card-body .h1 { text-wrap: balance; }
/* Highlight: scale "background" images when specified, esp. in full-bleed mode (just like Carousel) */
.romoray-bg-img-cover picture { width: 100%; }
.romoray-bg-img-cover img, .card-img-overlay > .card-background.romoray-bg-img-cover img.card-img { width: 100% !important; object-fit: cover;  }


/* Round corners of contained hero images in Highlights and Highlight Carousels, for consistency w/ WOF profiles, etc. */
/* June 2026: handle via rendering code */
/* .full-bleed-contained .carousel-item .card-background img, .full-bleed-contained .moray-highlight .card-background img { 
    border-radius: var(--moray-card-image-radius);
} */