/* "Today in Irvine": weather, alerts and air quality. */

.eplex-today,
.eplex-today * {
	box-sizing: border-box;
}

.eplex-section.eplex-section--today {
	padding-bottom: 0;
	padding-top: clamp(28px, 4vw, 48px);
}

.eplex-today__title {
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	font-weight: 800;
	margin: 0 0 14px;
}

/* ---------- Alerts ---------- */

.eplex-alert {
	align-items: baseline;
	background: #fff4d6;
	border-left: 5px solid #b7791f;
	border-radius: 10px;
	color: #3d2a00;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0 0 12px;
	padding: 12px 16px;
}

.eplex-alert--severe {
	background: #fde8e4;
	border-left-color: #b42318;
	color: #55160c;
}

.eplex-alert__tag {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.eplex-alert__name {
	font-size: 1.05rem;
	font-weight: 800;
}

.eplex-alert__link {
	color: inherit;
	font-weight: 600;
	margin-left: auto;
}

/* ---------- Cards ---------- */

.eplex-today__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.eplex-today__card {
	background: #fff;
	border: 1px solid rgba(22, 38, 76, 0.14);
	border-radius: 14px;
	padding: 18px 20px;
}

.eplex-today__label {
	color: #525b70;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.eplex-today__temp {
	align-items: center;
	color: #16264c;
	display: flex;
	gap: 10px;
	margin: 0;
}

.eplex-wx-icon {
	color: #12707c;
	flex: none;
}

.eplex-today__deg {
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
}

.eplex-today__degc {
	color: #525b70;
	font-size: 1.1rem;
	font-weight: 600;
}

.eplex-today__cond {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 6px 0 12px;
}

.eplex-today__facts {
	display: grid;
	gap: 8px 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
}

.eplex-today__facts dt {
	color: #525b70;
	font-size: 0.8rem;
}

.eplex-today__facts dd {
	font-weight: 700;
	margin: 0;
}

.eplex-today__hours {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.eplex-today__hours li {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
}

.eplex-today__hour {
	color: #525b70;
	font-size: 0.8rem;
	white-space: nowrap;
}

.eplex-today__hourtemp {
	font-weight: 700;
}

/* ---------- Air quality ---------- */

.eplex-today__aqi {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 10px;
}

.eplex-aqi {
	border-radius: 10px;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	padding: 8px 12px;
}

.eplex-aqi__k {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* U.S. EPA Air Quality Index colours, with text chosen for contrast. */
.eplex-aqi--1 {
	background: #00e400;
	color: #06330a;
}

.eplex-aqi--2 {
	background: #ffff00;
	color: #3a3300;
}

.eplex-aqi--3 {
	background: #ff7e00;
	color: #2e1500;
}

.eplex-aqi--4 {
	background: #ff0000;
	color: #fff;
}

.eplex-aqi--5 {
	background: #8f3f97;
	color: #fff;
}

.eplex-aqi--6 {
	background: #7e0023;
	color: #fff;
}

.eplex-today__aqicat {
	font-size: 1.1rem;
	font-weight: 700;
}

.eplex-today__guide {
	font-size: 0.98rem;
	margin: 0 0 8px;
}

.eplex-today__small {
	color: #525b70;
	font-size: 0.88rem;
	margin: 0;
}

.eplex-today__empty {
	color: #525b70;
	margin: 0;
}

.eplex-today__source {
	color: #525b70;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.82rem;
	gap: 4px 16px;
	margin: 10px 0 0;
}

.eplex-today__source a {
	color: inherit;
}

@media (max-width: 420px) {
	.eplex-today__hours {
		gap: 2px;
	}

	.eplex-today__hour {
		font-size: 0.72rem;
	}
}