/*
Theme Name: RO MWF
Theme URI: http://www.ronline.com/
Author: Resources Online
Author URI: http://www.ronline.com/
Description: MWF-compliant theme, now with locally hosted MWF assets. Requires Advanced Custom Fields PRO.
Version: 9.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: romwf
Tags:

RO MWF requires use of Microsoft MWF, and Advanced Custom Fields PRO.

NO SITE-SPECIFIC CUSTOM STYLES IN THIS FILE.  Use a child theme.

Microsoft MWF requires jQuery 1.9 or later (v3.3+ is supported).

URLs (and versioning) for MWF's required CSS and JS assets are set inline within header.php.
For Microsoft MWF documentation, including latest required markup for all modules, see https://www.rarnonalumber.com/en-us/mwf/

For integrating Microsoft UHF, use the RO UHF plugin.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# MWF Global Overrides
# General Additions
# Blog Styles
--------------------------------------------------------------*/


html { scroll-behavior: smooth; }

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


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

/*--------------------------------------------------------------
# MWF Global Overrides and fixes
--------------------------------------------------------------*/

.c-list .c-list { margin-bottom: 0; }
.page-template-mwf-article-with-banner-left-sidebar [data-grid~="container"] [data-grid~="container"] { padding-left: 0; padding-right: 0; }
#content .c-menu { z-index: 701; }
.theme-dark abbr, .theme-light abbr, .theme-light .theme-dark abbr, .theme-dark dfn, .theme-light .theme-dark dfn, abbr { border-bottom: 0; }

.x-type-center img.c-image, .x-type-center picture.c-image img { display: inline-block; }
img.c-image.aligncenter { margin-left: auto; margin-right: auto; }

/* MWF links styles within a paragraph are different from other contexts (e.g. in list item). This made it consistent. */
[class^="c-paragraph"] a.c-hyperlink, [class^="c-caption"] a.c-hyperlink { text-decoration: none; }
[class^="c-paragraph"] a.c-hyperlink:hover, [class^="c-caption"] a.c-hyperlink:hover { text-decoration: underline; }

/* Fix Edge and Firefox Quantum fatal issues with sizing responsive child DIVs inside dialogs: */
.c-dialog [role="dialog"] [role="document"] { display: block; }
/* Fix rendering bug in some older versions of Chrome (2017.11.28) */
strong, b { font-family: "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* Fix bad UHF CSS for the MS Edge promo banner */
#headerUniversalHeader #epb, #epb.m-alert[role="alert"] { margin-top: 0; }
/* Eliminate link-y cursor for content placement items that DON'T have any CTA */
.m-content-placement-item:not([data-js-href]) { cursor: text; }
.c-content-placement:not([data-js-href]):hover picture img, .m-content-placement-item:not([data-js-href]):hover picture img { opacity: 1; }

.m-video-trigger { margin-top: 48px; }
.m-video-trigger.f-lean { margin-top: 0; }

.m-hero-item .c-heading-1, .m-hero-item .c-heading-2, .m-hero-item .c-heading-3, .m-hero-item .c-heading-4 { padding-top: 0; }

.m-rich-heading .c-paragraph-3 { padding: 6px 0 0; }

blockquote.c-blockquote .c-paragraph-3:first-child, 
blockquote.c-blockquote + .c-paragraph-3, 
blockquote + .c-paragraph-3 { 
	padding-top: 0; 
}

.c-drawer .f-toggle, .c-drawer>button, .c-drawer>header .f-toggle, .c-drawer>header>button {
	font-size: 15px; line-height: 1.25em; font-weight: 600;
}
.c-drawer .c-drawer-panel { padding-bottom: 2em; }

/* This may get fixed in v1.22.x */
[class*="m-persona-"] >div+div [class*="c-heading"] .c-hyperlink { padding: 0; }

/* Fix broken theme styles in Highlight Feature */
.m-highlight-feature.theme-dark > div { background: #000; color: #fff; }

.m-highlight-feature.theme-dark > div .c-call-to-action,
.m-highlight-feature.theme-dark > div .c-call-to-action:focus:not(.x-hidden-focus), 
.m-highlight-feature.theme-dark > div .c-call-to-action:hover { color: #fff; }

.m-highlight-feature.theme-dark > div .c-call-to-action:not(.f-primary):not(.f-secondary):focus:not(.x-hidden-focus), .m-highlight-feature.theme-dark > div .c-call-to-action:not(.f-primary):not(.f-secondary):hover {
	color: #e6e6e6;
}

nav.c-in-page-navigation .c-heading-4 { padding: 38px 0 12px; margin: 0 24px; }

/* Fix text color values incorrectly missing from MWF CSS */
.m-typographic-intro.f-background-msft-green, .m-typographic-intro.f-background-purple, 
.m-typographic-intro.f-background-msft-orange, .m-typographic-intro.f-background-teal,
.m-typographic-intro.f-background-msft-red { color: #fff; }

/* Fix mobile display issues for wide tables */
.c-table { overflow-x: auto; }

/* fix pagination "here" highlight when in high contrast mode */
@media screen and (-ms-high-contrast: active) {
	.m-pagination li.f-active > a, 
	.m-pagination li.f-active > span, 
	.c-pagination li.f-active > a, 
	.c-pagination li.f-active > span {
		border: 1px solid #000 !important;
	}
}
/* same but w/ modern standard media query */
@media (prefers-contrast: more) {
	.m-pagination li.f-active > a, 
	.m-pagination li.f-active > span, 
	.c-pagination li.f-active > a, 
	.c-pagination li.f-active > span {
		border: 1px solid #000 !important;
	}
}

/* Override to address fringe use case w/ forced user text style override, per a11y review */
.m-hero-item .c-heading, .c-hero .c-heading { max-height: 100%; }
@media only screen and (max-width: 1399px) {
	.m-hero-item .c-heading, .c-hero .c-heading { max-height: 100%; }
}


/* fix opacity effect bad for usability + a11y */
.m-social.f-share>a>img, .m-social.f-share ul>li>a>img, .m-social.f-follow>a>img, .m-social.f-follow ul>li>a>img, 
.c-social.f-share>a>img, .c-social.f-share ul>li>a>img, .c-social.f-follow>a>img, .c-social.f-follow ul>li>a>img {
	opacity: 1;
}


/* Hide duplicative HOME link in UHF mobile nav */
@media screen and (max-width: 859px) {
	/* .c-uhfh>div:first-child nav>ul>li:first-child */
	.c-uhfh>div:first-child nav>ul>li.x-hidden-none-mobile-vp { display: none !important; }	
}



/**
 * Social Toolbar
 */
.page-social-toolbar { border-top: 2px solid #ddd; margin: 2em 0 0; padding: 0; }
.page-social-toolbar .m-social { margin: 1.25em 0 0; }
.page-social-toolbar div[data-grid~="col-6"]:nth-of-type(2) .m-social { float: right; }
[dir="rtl"] .page-social-toolbar div[data-grid~="col-6"]:nth-of-type(2) .m-social { float: left; }

/* customize social spacing when in sidebar */
.widget-area .m-social { margin-top: 1em; }

.m-pagination .c-glyph.pagination-ellipsis:before { content: "\E712"; vertical-align: bottom; margin-right: 8px; }
/* Fix MWF bug: missing required UI style for first pagination link */
.m-pagination li:nth-of-type(2) .c-glyph:before, .c-pagination li:nth-of-type(2) .c-glyph:before {
    content: "\E76B"; vertical-align: -2px; margin-right: 8px;
}
/* Fix weird margining w/ 1.57.7 a11y fix: */
.m-pagination li:nth-of-type(1) { margin: 0; padding: 0; }


/*--------------------------------------------------------------
# General Additions
--------------------------------------------------------------*/

.ro-flex-row { display: flex;}
.ro-flex-justify-center { justify-content: center; }
.ro-flex-col {}


.m-area-heading.mwf-area-heading-ctas .mwf-area-heading-ctas-wrapper a { display: inline-block; }
.m-area-heading.mwf-area-heading-ctas .mwf-area-heading-ctas-wrapper a + a { margin-left: 24px; }
[dir="rtl"] .m-area-heading.mwf-area-heading-ctas .mwf-area-heading-ctas-wrapper a + a { margin-right: 24px; margin-left: 0; }

.mwf-glyph-checkmark { overflow: hidden; font-size: 1px; text-indent: -999em; color: #fff; }
.mwf-glyph-checkmark:before { margin: 0; font-family: "MWF-MDL2"; font-size: 26px; color: #000; content: "\E73E"; }

.mwf-cta-standalone-centered { padding-top: 24px; }

.page-mwf-article-text-banner aside, .page-mwf-article-text-banner .aside { padding-top: 35px !important; }

.context-glyph-tile .c-glyph { font-size: 46px; font-family: "MWF-MDL2"; }
img.rwd-img, .rwd-img img { margin: 0; width: 100%; max-width: 100%; height: auto; }

.mwf-blog-preview-header h1, .mwf-blog-preview-header h2 { margin-bottom: 0.3em; }

@media screen and (max-width: 540px) {
	.mwf-blog-latest-posts [data-grid~="col-8"] { width: 100%; }
}
@media screen and (min-width:541px) and (max-width:768px) {
	.mwf-blog-latest-posts [data-grid~="col-8"] { width: 490px; }
}
@media screen and (max-width:768px) {
	.mwf-blog-latest-posts { text-align: center; }
	.mwf-blog-latest-posts [data-grid~="col-8"] { float: none; margin: 0 auto; padding: 0 24px 24px; }
}
@media screen and (min-width:769px) {
	.mwf-blog-latest-posts [data-grid~="col-8"] { padding: 0 36px 36px; }
}

.c-feature>div .c-group .c-call-to-action + .c-call-to-action { margin-left: 24px; }

.mwf-c-feature-yt {}
.youtube-wrap, .ro-mwf-video-iframe-wrapper, .mwf-c-feature-yt-iframe-wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
.youtube-wrap iframe, .ro-mwf-video-iframe-wrapper iframe, .ro-mwf-video-iframe, .mwf-c-feature-yt-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.youtube-wrap { margin-top: 32px; }


/* Download module */
.mwf-c-download-module-wrapper { margin-top: 48px; }
.mwf-c-download-module [data-grid*=col-] { float: none; }
.mwf-c-download-module .mwf-c-download-module-ctas, .mwf-c-download-module .c-table { margin-top: 24px; }
.mwf-c-download-module .mwf-cta-standalone + .mwf-cta-standalone { margin-left: 16px; }
[data-grid~=col-4] .mwf-c-download-module .mwf-cta-standalone + .mwf-cta-standalone { margin-left: 0; clear: both; }

@media screen and (max-width: 767px) {
	.mwf-c-download-module-wrapper[data-grid~="stack-2"] [data-grid] + [data-grid] {
		padding-top: 2.5em;
	}
}
@media screen and (min-width: 768px) {
	.mwf-c-download-module-wrapper[data-grid~="stack-2"] .mwf-cta-standalone + .mwf-cta-standalone {
		 clear: both; 
		 margin-top: 12px; 
		 margin-left: 0; 
	}
}

/* RO-IFRAME */
.ro-iframe-heading + .romwf-iframe-row { margin-top: 1.5em; }
.romwf-iframe-wrapper { position: relative; width: 100%; }
.romwf-iframe-wrapper iframe { width: 100%; border: 0; }
.romwf-iframe-16x9 { height: 0; padding-bottom: 60%; }
.romwf-iframe-4x3 { height: 0; padding-bottom: 75%; }
.romwf-iframe-16x9 iframe, .romwf-iframe-4x3 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* see: mwf-video-trigger */
.romwf-video-iframe-wrapper { position: relative; width: 100%; height: 0; margin: 0; padding: 0 0 56.25%; overflow: hidden; }
.romwf-video-iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; } 


/*--------------------------------------------------------------
# Blog Styles
--------------------------------------------------------------*/

.screen-reader-text {
	/* clone of MWF's .x-screen-reader */
    border: 0!important; clip: rect(1px, 1px, 1px, 1px)!important; position: absolute!important; overflow: hidden!important;
	width: 1px!important; height: 1px!important; padding: 0!important; margin: 0!important
}

.page-mwf-blog, .page-mwf-article aside { padding-top: 65px; }

/* Blog augmentations: */

.page-mwf-blog article .c-heading-1 { padding-top: 0; }

#content .page-mwf-blog .entry-title a.c-hyperlink { color: inherit; }
#content .page-mwf-blog .entry-title a.c-hyperlink:hover,
#content .page-mwf-blog .entry-title a.c-hyperlink:focus { color: #006cc2; }

.page-mwf-blog .alignleft { display: inline; float: left; margin-right: 1.5em; }
.page-mwf-blog .alignright { display: inline; float: right; margin-left: 1.5em; }
.page-mwf-blog .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }

.page-mwf-blog .entry-meta, 
.page-mwf-blog .entry-meta time, 
.page-mwf-blog .entry-footer,
body.search-results .entry-meta { font-style: italic; }
body.search-results article .entry-content { padding-top: 24px; }

.page-mwf-blog .entry-footer .edit-link, .page-mwf-blog .entry-footer .comments-link, .page-mwf-blog .comment-metadata .edit-link { 
	margin-left: 1em; padding-left: 1em; border-left: 1px solid #ccc;
}

.page-mwf-blog .comments-area, .page-mwf-blog .comment-list, .page-mwf-blog .comment-respond { margin-top: 1.5em;}
.page-mwf-blog .comment-body .reply { margin-top: 1em; }
.page-mwf-blog .comment-content { padding-left: 1.5em; }
.page-mwf-blog .comment-metadata { padding-left: 36px; }
.page-mwf-blog .comment-form-comment label { display: block; margin: 1em 0 0.5em; }
.page-mwf-blog .form-submit { margin-top: 0.5em; }
.page-mwf-blog-single .post-navigation, .page-mwf-blog .entry-meta .updated:not(.published), body.search-results .entry-meta .updated:not(.published) { display: none; }
.page-mwf-blog .posts-navigation, .page-mwf-blog .post-navigation { margin-top: 2.5em;}

.page-mwf-blog-single .post-navigation { display: block; margin-top: 2.5em; }
.page-mwf-blog-single .post-navigation .nav-links { display: flex; justify-content: space-between; }
.page-mwf-blog-single .post-navigation .nav-previous + .nav-next { margin-left: 2em; }
.page-mwf-blog-single .post-navigation .nav-previous { text-align: left; margin-right: 2em; }
[dir="rtl"] .page-mwf-blog-single .post-navigation .nav-previous { text-align: right; margin-right: 0; margin-left: 2em; }
.page-mwf-blog-single .post-navigation .nav-next { text-align: right; margin-right: 2em; margin-left: 0;}
[dir="rtl"] .page-mwf-blog-single .post-navigation .nav-next { text-align: left; }
.page-mwf-blog-single .post-navigation .nav-previous > a:before {
	display: inline-block; margin-right: 8px; vertical-align: -2px; font-family: "MWF-MDL2"; content: "\E76B";
}
[dir="rtl"] .page-mwf-blog-single .post-navigation .nav-previous > a:before { margin-right: 0; margin-left: 8px; content: "\E76C"; }
.page-mwf-blog-single .post-navigation .nav-next > a:after {
	display: inline-block; margin-left: 8px; vertical-align: -2px; font-family: "MWF-MDL2"; content: "\E76C";
}
[dir="rtl"] .page-mwf-blog-single .post-navigation .nav-next > a:after { margin-left: 0; margin-right: 8px; content: "\E76B"; }


.read-more-link, .c-paragraph-3.read-more-link { padding-top: 0.5em; }

.page-mwf-blog figure { padding-bottom: 1.1em; }
.page-mwf-blog figure img { display: block; margin: 0; max-width: 100%; height: auto; }