/**
 * DNB theme-shell CSS. Loaded last.
 *
 * Page content is styled ONLY by Elementor widget settings - it sits outside
 * the legacy `#c5` wrapper (see header.php), so none of the ported app.min.css
 * text rules reach it. This file therefore only covers (1) the ported header
 * and footer, and (2) the look of the Slick carousels' generated arrows/dots,
 * which are created by the theme's own scripts and can't be styled from an
 * Elementor widget.
 */

/* Elementor prints global heading typography as bare element selectors
   (h1, h2, ...). The ported header/footer markup expects the original site's
   fonts from app.min.css, so re-assert them here. */
.dnb-legacy h1,
.dnb-legacy h2,
.dnb-legacy h3,
.dnb-legacy h4,
.dnb-legacy h5,
.dnb-legacy h6,
.dnb-legacy p,
.dnb-legacy a,
.dnb-legacy ul,
.dnb-legacy ol {
	font-family: inherit;
}

/* The site's `header` is `position:fixed;top:0` (from app.min.css, ported
   as-is). WordPress's own admin toolbar is also fixed at top:0 (32px tall,
   46px on mobile widths) for logged-in users, so it sits directly on top of
   our fixed header - visible only to logged-in admins/editors. Push our
   header down explicitly. `!important` is required: Bluehost's Newfold
   plugin injects `header:has(.nfd-absolute-header){top:0!important}`. */
body.admin-bar #c5 header {
	top: 32px !important;
}
@media screen and (max-width: 782px) {
	body.admin-bar #c5 header {
		top: 46px !important;
	}
}

/* At the 992px+ desktop tier, app.min.css sets `#c5 header .logo img{
   width:100%}` with no fixed width on the `.logo` anchor itself, which
   makes the percentage non-resolvable; the source logo.png is a 5720x1364
   retina export, so pin it to its intended desktop display size. */
@media screen and (min-width: 992px) {
	#c5 header .logo img {
		width: 239px;
		height: 57px;
	}
}

/* Slick carousels on Home (initialised by the theme's slider.js / app.min.js
   on the `.facility-slider-block .slider` and `.news-block .items` hook
   classes). Their prev/next arrows and numbered dots are generated by Slick,
   so they're styled here, exactly as the original site drew them. */
.facility-slider-block,
.news-block {
	position: relative;
	overflow: hidden;
}
.facility-slider-block .slick-next,
.facility-slider-block .slick-prev {
	width: 26px;
	height: 60px;
	z-index: 60;
}
.news-block .slick-next,
.news-block .slick-prev {
	width: 28px;
	height: 60px;
	z-index: 80;
}
.facility-slider-block .slick-next::before,
.facility-slider-block .slick-prev::before,
.news-block .slick-next::before,
.news-block .slick-prev::before {
	content: '';
	width: 28px;
	height: 60px;
	display: inline-block;
	background: url(../images/slider-arrw.png) center center no-repeat;
}
.facility-slider-block .slick-next::before,
.news-block .slick-next::before {
	transform: rotate(180deg);
}
.facility-slider-block .slick-next {
	right: 20px;
}
.facility-slider-block .slick-prev {
	left: 20px;
}
.news-block .slick-next {
	right: 15px;
}
.news-block .slick-prev {
	left: 15px;
}
.facility-slider-block .slick-dots {
	bottom: auto;
	top: -130px;
	text-align: left;
	margin-bottom: 0;
	width: auto;
}
.facility-slider-block .slick-dots li {
	width: 36px;
	height: 36px;
	margin: 0 3px;
}
.facility-slider-block .slick-dots li button {
	color: #fff;
	font-size: 23px;
	font-weight: 600;
	border: 2px solid #fff;
	border-radius: 50%;
	width: 36px;
	height: 36px;
}
.facility-slider-block .slick-dots li button::before {
	display: none;
}
.facility-slider-block .slick-dots li.slick-active button {
	background-color: #fff;
	color: #1c37be;
}

/* Hello Elementor's reset.css (loaded after Bootstrap) turns b/strong into
   `bolder`, which from a weight-200 widget is only 400 - Bootstrap's 700 is what
   the original site showed. */
body b,
body strong {
	font-weight: 700;
}