:root {
	--nittany: 4, 30, 66;
	--beaver: 30, 64, 124;
	--sky: 0, 156, 222;
	--sky-max-light: 230, 247, 255;
	--discovery: 242, 102, 94;
	--coaly: 84, 88, 90;
	--signage-header-height: 10vh;
	--signage-news-height: 24vh;
}

html {
	font-size: clamp(16px, 0.833333vw, 32px);
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

body {
	font-family: "Roboto", sans-serif;
	color: #111;
	background: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Libre Caslon Text", serif;
	font-weight: 400;
	line-height: 1.1;
}

h1 {
	font-size: 3rem;
}

h2 {
	font-size: 2.25rem;
}

h3 {
	font-size: 2rem;
}

h4 {
	font-size: 1.5rem;
}

h5 {
	font-size: 1.25rem;
}

h6 {
	font-size: 1rem;
}

a {
	color: rgba(var(--sky), 1);
}

a:hover {
	color: rgba(var(--beaver), 1);
}

a:focus-visible {
	outline: 0.2rem solid rgba(var(--sky), 1);
	outline-offset: 0.2rem;
}

.bg-nittany {
	background-color: rgba(var(--nittany), 1) !important;
}

.text-nittany {
	color: rgba(var(--nittany), 1) !important;
}

.text-beaver {
	color: rgba(var(--beaver), 1) !important;
}

.text-sky {
	color: rgba(var(--sky), 1) !important;
}

.text-sky-max-light {
	color: rgba(var(--sky-max-light), 1) !important;
}

.text-coaly {
	color: rgba(var(--coaly), 1) !important;
}

.badge-discovery {
	color: #fff;
	background-color: rgba(var(--discovery), 1) !important;
}

.container-fluid {
	padding-right: 4rem;
	padding-left: 4rem;
}

header {
	height: var(--signage-header-height);
	padding-top: 1rem;
	padding-bottom: 1rem;
	background-color: rgba(var(--nittany), 1);
}

header h1#logo {
	display: block;
	width: 20.5rem;
	height: 4.6875rem;
	margin: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	background: url("/digital-signage/img/psu_shc.svg") no-repeat left center;
	background-size: contain;
}

header h1#logo a {
	display: block;
	width: 100%;
	height: 100%;
}

header #datetime,
header #wx_temp {
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
}

header #weather ul li {
	vertical-align: middle;
}

header #wx_icon {
	font-size: 2rem;
}

#content {
	display: grid;
	grid-template-rows: minmax(0, 1fr) var(--signage-news-height);
	height: calc(100vh - var(--signage-header-height));
}

#content > .row,
#main,
#sidebar,
#main-carousel,
#sidebar-carousel,
#main-carousel > .carousel-inner,
#sidebar-carousel > .carousel-inner {
	min-height: 0;
}

#main,
#sidebar {
	height: 100%;
	overflow: hidden;
}

#main-carousel .carousel-item,
#sidebar-carousel .carousel-item,
#news-ticker .carousel-item {
	height: 100%;
}

#main-carousel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#sidebar {
	padding: 2rem;
}

#sidebar h3 {
	color: rgba(var(--nittany), 1);
}

#sidebar .event-time {
	color: rgba(var(--nittany), 1);
	font-weight: 800;
}

.carousel.carousel-fade .carousel-item {
	transition: opacity 1s ease-out;
}

#news-list {
	height: var(--signage-news-height);
	min-height: var(--signage-news-height);
	max-height: var(--signage-news-height);
	padding-top: 2rem;
	padding-bottom: 2rem;
	overflow: hidden;
}

#news-ticker,
#news-ticker > .carousel-inner {
	width: 100%;
	height: 100%;
}

#news-ticker .carousel-item {
	overflow: hidden;
}

#news-ticker .carousel-item.active,
#news-ticker .carousel-item-next,
#news-ticker .carousel-item-prev {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
}

#news-ticker p.lead {
	font-weight: 400;
}

#news-list h3#news-logo {
	display: block;
	width: 35.8125rem;
	height: 3.3125rem;
	margin: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	background: url("/digital-signage/img/news.svg") no-repeat left center;
	background-size: contain;
}

#emergency-alert {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(227, 0, 0);
}

#emergency-alert h3 {
	font-family: "Roboto", sans-serif;
	font-size: 5rem;
	font-weight: 700;
}

#emergency-alert p.lead {
	font-size: 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.carousel.carousel-fade .carousel-item {
		transition: none;
	}
}

/* Legacy-compatible carousel layout */

.carousel {
    position: relative;
    overflow: hidden;
}

.carousel > .carousel-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carousel > .carousel-inner > .carousel-item {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 1;

    -webkit-transition: none;
    transition: none;
}

.carousel > .carousel-inner > .carousel-item.active {
    display: block;
}

/* Main image carousel */

#main-carousel {
    width: 100%;
    height: 100%;
}

#main-carousel .carousel-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Image crossfade: incoming slide overlays outgoing slide */

#main-carousel .carousel-item.crossfade-next {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Text transitions: keep the carousel container stable */

#sidebar-carousel,
#news-ticker {
    height: 100%;
}

#sidebar-carousel > .carousel-inner,
#news-ticker > .carousel-inner {
    height: 100%;
}