/*
 Theme Name:   Smart Transit
 Theme URI:    https://github.com/happyprime/smarttransit
 Description:  A WordPress theme for Smart Transit.
 Author:       Happy Prime
 Author URI:   https://happyprime.co
 Version:      0.0.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/**
 * From https://github.com/hankchizljaw/modern-css-reset and https://github.com/csstools/normalize.css/blob/main/evergreen.css
 */

/* Correct the line height in all browsers */

:where(html) {
	line-height: 1.15; /* 1 */
}

/* Set core body defaults */

body {
	box-sizing: border-box;
	line-height: 1.55;
	min-height: 100vh;
	margin: 0;
	scroll-behavior: smooth;
	text-rendering: optimizespeed;
}

/* Box sizing rules */

*,
*::before,
*::after {
	box-sizing: inherit;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
	-webkit-text-decoration-skip: ink;
	        text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
	font: inherit;
}

/* Remove, if preference, all animations and transitions */

@media (prefers-reduced-motion: reduce) {

	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Wrap pre tag content */

pre {
	overflow-x: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}

:root {

	/*--------------------------------------------------------------
	  # Typography
	  # Font family and font sizes are set in ./theme.json
	--------------------------------------------------------------*/

	/* --- Letter spacing --- */
	--letter-spacing: 0.075em;

	/*--------------------------------------------------------------
	  # Colors
	  # Color variables are set in ./theme.json
	--------------------------------------------------------------*/

	/*
		"name": "Aqua",
		"slug": "aqua",
		"color": "#009bbd"

		"name": "Yellow",
		"slug": "yellow",
		"color": "#ffd600"

		"name": "Light Gray",
		"slug": "gray-light",
		"color": "#f9f9f9"

		"name": "Stone Gray",
		"slug": "stone",
		"color": "#e6e6e6"

		"name": "Black",
		"slug": "black",
		"color": "#2c2c2c"

		"name": "White",
		"slug": "white",
		"color": "#fff"
	*/

	/*--------------------------------------------------------------
	  # Layout
	--------------------------------------------------------------*/

	/* --- Spacing --- */
	--spacing: 1.25rem /* 20px */;
	--spacing-050: calc(var(--spacing) / 2);
	--spacing-1: var(--spacing);
	--spacing-150: calc(var(--spacing) * 1.5);
	--spacing-2: calc(var(--spacing) * 2);
	--spacing-3: calc(var(--spacing) * 3);
	--spacing-4: calc(var(--spacing) * 4);
	--spacing-6: calc(var(--spacing) * 6);
	--spacing-8: calc(var(--spacing) * 8);

	--gutter: var(--spacing);

	--spacing-s: var(--spacing);
	--spacing-m: var(--spacing-2);
	--spacing-l: var(--spacing-4);
	--spacing-xl: var(--spacing-8);
}

@media (max-width: 37.5em) {

:root {
		--spacing-m: var(--spacing-150);
		--spacing-l: var(--spacing-2);
		--spacing-xl: var(--spacing-4);
}
	}

:root {

	/* --- Max widths --- */
	--max-width: 77.5rem;
	--max-content: 53.75rem;

	/*--------------------------------------------------------------
	  # Transitions
	--------------------------------------------------------------*/

	/* --- Speed --- */
	--speed-fast: 0.15s;
	--speed: 0.3s;
}

/* 448px */

/* 600px */

/* 960px */

/* 1216px */

body {
	background-color: var(--wp--preset--color--beige);
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--6);
	font-weight: 300;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	line-height: 1.1;
}

h3,
h4,
h5 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	line-height: 1.1;
}

h1 {
	font-size: var(--wp--preset--font-size--hero);
}

h2 {
	font-size: var(--wp--preset--font-size--2);
}

h3 {
	font-size: var(--wp--preset--font-size--3);
}

h4 {
	font-size: var(--wp--preset--font-size--4);
}

h5 {
	font-size: var(--wp--preset--font-size--5);
}

strong {
	font-weight: 900;
}

figure  + ul {
		margin-top: 3em;
	}

a {
	color: var(--wp-preset-color-red);
	-webkit-text-decoration: underline;
	text-decoration: underline;
	text-underline-offset: 1px;
	text-decoration-thickness: 1px;
}

a:hover {
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--blue-dark);
		-webkit-text-decoration: none;
		text-decoration: none;
	}

a:focus {
		outline: 1px dotted var(--wp--preset--color--blue);
	}

/*--------------------------------------------------------------
  # Site layout
--------------------------------------------------------------*/

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: 0 var(--gutter);
}

.site-header,
.site-footer {
	background-color: var(--wp--preset--color--white);
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

:is(.site-header,.site-footer)::before {
		background-color: inherit;
		content: "";
		height: 100%;
		position: absolute;
		top: 0;
		left: calc(50% - 50vw);
		width: 100vw;
		z-index: -1;
	}

/*--------------------------------------------------------------
  # Site header
--------------------------------------------------------------*/

.site-header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 1rem 0;
	width: 100%;
	max-width: 90rem;
}

:is(.site-header .wp-block-navigation) li + li {
			margin-left: var(--spacing-150);
		}

.site-header .wp-block-site-logo {
		margin-left: calc(var(--gutter) * -0.5);
		margin-right: var(--gutter);
		width: 100%;
		max-width: 18rem;
	}

.wp-block-site-logo {
	width: 100%;
}

/*--------------------------------------------------------------
  # Site content
--------------------------------------------------------------*/

.main-content {
	flex: 1;
}

.wp-block-post-content  > * {
		margin-left: auto;
		margin-right: auto;
		max-width: var(--max-content);
	}

.wp-block-post-title {
	margin-top: var(--spacing-l);
	margin-left: auto;
	margin-right: auto;
	max-width: var(--max-content);
}

/*--------------------------------------------------------------
  # Site footer
--------------------------------------------------------------*/

.site-footer {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	margin-top: var(--spacing-l);
	padding: var(--spacing-3) 0 0;
	width: 100%;
	max-width: var(--max-width);
}

@media (min-width: 37.51em) {

.site-footer {
		display: grid;
		gap: var(--spacing-2);
		grid-template: "nav button" "nav social" 1fr "logo logo" "copy copy" / 1fr 1fr;
}
	}

@media (min-width: 60.001em) {

.site-footer {
		grid-template: "nav button logo" "nav social logo" 1fr "copy copy copy" / 1fr 1fr 2fr;
}
	}

.site-footer .footer-nav {
		grid-area: nav;
	}

.site-footer .footer-support {
		grid-area: button;
	}

.site-footer .footer-social {
		align-self: start;
		grid-area: social;
	}

:is(.site-footer .footer-social) a:hover {
			background-color: transparent;
		}

.site-footer .wp-block-site-logo {
		align-self: center;
		grid-area: logo;
		max-width: max-content;
	}

@media (min-width: 60.001em) {

.site-footer .wp-block-site-logo {
			margin-left: auto;
	}
		}

.site-footer .footer-copyright {
		background-color: var(--wp--preset--color--black);
		color: var(--wp--preset--color--white);
		grid-area: copy;
		margin: var(--spacing-2) 0 0;
		padding: 1rem 0;
		position: relative;
	}

:is(.site-footer .footer-copyright) a {
			color: inherit;
		}

:is(.site-footer .footer-copyright)::before {
			background-color: inherit;
			content: "";
			height: 100%;
			position: absolute;
			top: 0;
			left: calc(50% - 50vw);
			width: 100vw;
			z-index: -1;
		}

/*--------------------------------------------------------------
	# Archive styles
--------------------------------------------------------------*/

.archive-river {
	margin-top: var(--spacing-l);
}

.archive-river li + li {
		border-top: 2px solid var(--wp--preset--color--white);
		margin-top: var(--spacing-2);
		padding-top: var(--spacing-2);
	}

.archive-river .wp-block-post-title {
		font-size: var(--wp--preset--font-size--3);
		font-weight: 400;
		margin-top: 0;
	}

.archive-river .wp-block-post-date {
		font-size: var(--wp--preset--font-size--5);
	}

/*--------------------------------------------------------------
	# WP core blocks
--------------------------------------------------------------*/

/* --- Media text block --- */

.wp-block-media-text {
	gap: var(--gutter);
}

.wp-block-media-text .wp-block-media-text__content {
		padding: 0;
	}

:is(.wp-block-media-text .wp-block-media-text__content)  > * {
			margin: 1rem 0;
		}

/* --- Hero styles // Media-text --- */

.is-style-hero {
	font-weight: 400;
	padding: var(--spacing-m) 0;
	max-width: 90rem;
}

.is-style-hero h2 {
		font-weight: 400;
	}

/* --- Icon styles // Media-text --- */

.is-style-icon {
	gap: var(--spacing);
}

.is-style-icon .wp-block-media-text__media {
		margin-left: auto;
		margin-right: auto;
		max-width: 15rem;
	}

@media (max-width: 37.5em) {

.is-style-icon .wp-block-media-text__media {
			max-width: 10rem;
	}
		}

@media (max-width: 37.5em) {

.is-style-icon .wp-block-media-text__content {
			margin-left: auto;
			margin-right: auto;
			text-align: center;
	}
		}

/* --- wp-block-columns --- */

.wp-block-column  > *:first-child {
		margin-top: 0;
	}

/* --- Navigation block --- */

.wp-block-navigation {
	font-size: var(--wp--preset--font-size--5);
	font-weight: 600;
}

:is(.wp-block-navigation .wp-block-social-links) .wp-block-social-link {
			background-color: var(--wp--preset--color--blue-light);
			color: var(--wp--preset--color--black);
			height: 3.5rem;
			padding: 0.25rem;
			width: 3.5rem;
		}

:is(:is(.wp-block-navigation .wp-block-social-links) .wp-block-social-link) svg {
				height: 100%;
				width: 100%;
			}

/* --- Button block --- */

.wp-block-button.is-style-outline .wp-block-button__link {
			background-color: var(--wp--preset--color--white);
			border: 4px solid var(--wp--preset--color--black);
			font-family: var(--wp--preset--font-family--heading);
			font-size: var(--wp--preset--font-size--5);
			font-weight: 600;
			line-height: 1;
			padding: 0.75em 2em 0.65em;
			-webkit-text-decoration: none;
			text-decoration: none;
			text-transform: uppercase;
		}

:is(.wp-block-button.is-style-outline .wp-block-button__link):hover {
				background-color: var(--wp--preset--color--black);
				color: var(--wp--preset--color--white);
			}

/* --- Card styles // columns --- */

.is-style-cards .wp-block-column {
		background-color: var(--wp--preset--color--white);
		border: 4px solid var(--wp--preset--color--black);
		border-radius: 1.25rem;
		padding: var(--spacing-150);
	}

/* --- Sidebar style // column --- */

.is-style-sidebar {
	background-color: rgba(255, 255, 255, 0.5);
	border-left: 2px solid var(--wp--preset--color--white);
	border-radius: 0.25rem;
	padding: var(--spacing);
}

/* --- Center gallery logos --- */

.wp-block-gallery.is-style-center-icons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 1.5rem;
}

.wp-block-gallery.is-style-center-icons.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
		margin-bottom: 0;
		width: 100%;
	}

/* --- Inline icon position block style --- */

.is-style-inline-icon {
	align-items: center;
	display: flex;
	gap: 1rem;
}

/*--------------------------------------------------------------
  # Alert banner styles
--------------------------------------------------------------*/

:is(.alert-banner .wp-block-query):empty {
			display: none;
		}

:is(.alert-banner .wp-block-query):not(:empty) + .wp-block-query {
			border-top: 1px solid #c88f00;
		}

.alert-banner li {
		font-weight: 300;
		padding: 0.5em var(--gutter);
	}

.alert_level-high-alert:is(.alert-banner li) {
			background-color: var(--wp--preset--color--red);
			color: var(--wp--preset--color--white);
			font-size: var(--wp--preset--font-size--5);
			font-weight: 400;
		}

.alert_level-high-alert:is(.alert-banner li) .wp-block-post-title {
				align-items: center;
				display: flex;
				gap: 0.5em;
				justify-content: center;
			}

:is(.alert_level-high-alert:is(.alert-banner li) .wp-block-post-title)::before {
					background-color: currentcolor;
					content: "";
					height: 1.5em;
					-webkit-mask-image: url(./images/icon-alert-simple.svg);
					        mask-image: url(./images/icon-alert-simple.svg);
					-webkit-mask-repeat: no-repeat;
					        mask-repeat: no-repeat;
					-webkit-mask-size: contain;
					        mask-size: contain;
					width: 1.5em;
				}

:is(.alert-banner li)  + .alert_level-high-alert {
			border-top: 1px solid #730021;
		}

.alert_level-alert:is(.alert-banner li) {
			background-color: var(--wp--preset--color--yellow);
		}

.alert_level-alert:is(.alert-banner li) .wp-block-post-title {
				align-items: center;
				display: flex;
				gap: 0.5em;
				justify-content: center;
			}

:is(.alert_level-alert:is(.alert-banner li) .wp-block-post-title)::before {
					background-color: currentcolor;
					content: "";
					height: 1em;
					-webkit-mask-image: url(./images/icon-megaphone-simple.svg);
					        mask-image: url(./images/icon-megaphone-simple.svg);
					-webkit-mask-repeat: no-repeat;
					        mask-repeat: no-repeat;
					-webkit-mask-size: contain;
					        mask-size: contain;
					width: 1em;
				}

.alert_level-alert:is(.alert-banner li)  + .alert_level-alert {
				border-top: 1px solid #c88f00;
			}

:is(.alert-banner li) a {
			color: inherit;
			-webkit-text-decoration: none;
			text-decoration: none;
		}

:is(:is(.alert-banner li) a):hover {
				-webkit-text-decoration: underline;
				text-decoration: underline;
				text-decoration-thickness: 1px;
				text-underline-offset: 0.1em;
			}

.alert-banner .wp-block-post-title {
		font-size: inherit;
		font-weight: inherit;
		margin: 0 auto;
		text-align: center;
	}

/*--------------------------------------------------------------
  # Content aggregator
--------------------------------------------------------------*/

.wp-block-happyprime-content-aggregator {
	list-style: none;
	padding: 0;
}

.wp-block-happyprime-content-aggregator.happyprime-content-aggregator-block_no-posts {
		display: none;
	}

.wp-block-happyprime-content-aggregator.happyprime-content-aggregator-block_no-posts  + .happyprime-content-aggregator-block_no-posts + .no-current {
			display: block;
		}

.wp-block-happyprime-content-aggregator li {
		align-items: center;
		background-color: var(--wp--preset--color--white);
		display: flex;
		gap: 1rem;
		padding: var(--spacing-050);
	}

:is(.wp-block-happyprime-content-aggregator li)::before {
			background-image: url(./images/icon-bell.svg);
			background-repeat: no-repeat;
			background-size: contain;
			content: "";
			grid-area: icon;
			height: 28px;
			width: 28px;
		}

.cab-alert_level-high-alert:is(.wp-block-happyprime-content-aggregator li) {
			background-color: var(--wp--preset--color--red);
			color: var(--wp--preset--color--white);
		}

.cab-alert_level-high-alert:is(.wp-block-happyprime-content-aggregator li)::before {
				background-image: url(./images/icon-alert.svg);
			}

.cab-alert_level-alert:is(.wp-block-happyprime-content-aggregator li) {
			background-color: var(--wp--preset--color--yellow);
		}

.cab-alert_level-alert:is(.wp-block-happyprime-content-aggregator li)::before {
				background-image: url(./images/icon-megaphone.svg);
			}

:is(.wp-block-happyprime-content-aggregator li)  + li {
			margin-top: 1rem;
		}

:is(.wp-block-happyprime-content-aggregator li) a {
			color: inherit;
			-webkit-text-decoration: none;
			text-decoration: none;
		}

:is(:is(.wp-block-happyprime-content-aggregator li) a):hover {
				background-color: transparent;
				color: inherit;
				-webkit-text-decoration: underline;
				text-decoration: underline;
			}

.no-current {
	display: none;
	margin: 0 0 var(--spacing-m);
}

.cab-has-post-excerpt li {
		background-color: var(--wp--preset--color--white);
		display: grid;
		gap: 0 1rem;
		grid-template: "icon date" max-content "icon header" "icon content" 1fr / max-content 1fr;
		padding: var(--spacing);
	}

:is(.cab-has-post-excerpt li)::before {
			align-self: flex-start;
			background-image: url(./images/icon-bell.svg);
			background-repeat: no-repeat;
			background-size: contain;
			content: "";
			grid-area: icon;
			height: 60px;
			width: 60px;
		}

:is(.cab-has-post-excerpt li) a {
			color: inherit;
			font-size: 1.25rem;
			font-weight: 600;
			grid-area: header;
			-webkit-text-decoration: none;
			text-decoration: none;
		}

:is(:is(.cab-has-post-excerpt li) a):hover {
				background-color: transparent;
				color: inherit;
				-webkit-text-decoration: underline;
				text-decoration: underline;
			}

:is(.cab-has-post-excerpt li) time {
			font-size: 0.85rem;
			grid-area: date;
			text-transform: uppercase;
		}

:is(.cab-has-post-excerpt li) .wp-block-latest-posts__post-excerpt {
			grid-area: content;
		}

:is(.cab-has-post-excerpt li)  + li {
			margin-top: var(--spacing);
		}

.cab-category-alert:is(.cab-has-post-excerpt li) {
			background-color: var(--wp--preset--color--red);
			color: var(--wp--preset--color--white);
		}

.cab-category-alert:is(.cab-has-post-excerpt li)::before {
				background-image: url(./images/icon-alert.svg);
			}

.cab-category-high:is(.cab-has-post-excerpt li) {
			background-color: var(--wp--preset--color--yellow);
		}

.cab-category-high:is(.cab-has-post-excerpt li)::before {
				background-image: url(./images/icon-megaphone.svg);
			}

/*--------------------------------------------------------------
  # Accessibility
--------------------------------------------------------------*/

/* --- Text meant only for screen readers. --- */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	-webkit-text-decoration: none;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.hide-visually {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}

/* --- Skip Link --- */

.skip-link {
	left: 0;
	top: 0;
}

.skip-link:focus {
	background: #f1f1f1;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	color: #0073aa;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Segoe UI Symbol";
	font-size: 14px;
	font-weight: 700;
	left: 6px;
	line-height: normal;
	padding: 15px 23px 14px;
	-webkit-text-decoration: none;
	text-decoration: none;
	top: 7px;
	z-index: 100000;
}

/* --- SVG symbols --- */

svg[hidden] {
	display: none;
}

/*--------------------------------------------------------------
  # Alignments
--------------------------------------------------------------*/

.wp-site-blocks .alignwide {
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		max-width: var(--max-width);
	}

.wp-site-blocks .alignfull {
		margin-left: calc(var(--gutter) * -1);
		margin-right: calc(var(--gutter) * -1);
		width: 100vw;
		max-width: 100vw;
	}

/*--------------------------------------------------------------
  # Typography
--------------------------------------------------------------*/

.uppercase,
.is-style-uppercase {
	text-transform: uppercase;
}

/* --- font sizes --- */

.has-font-normal,
.has-body-font-size {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
}

.has-5-font-size {
	font-size: var(--wp--preset--font-size--5);
	line-height: 1.5;
}

.has-4-font-size {
	font-size: var(--wp--preset--font-size--4);
	line-height: 1.4;
}

.has-3-font-size {
	font-size: var(--wp--preset--font-size--3);
	line-height: 1.375;
}

.has-2-font-size {
	font-size: var(--wp--preset--font-size--2);
	line-height: 1.1;
}

.has-1-font-size {
	font-size: var(--wp--preset--font-size--1);
	line-height: 1.1;
}

/*--------------------------------------------------------------
  # Top margins
--------------------------------------------------------------*/

.has-zero-margin-top {
	margin-top: 0;
}

.has-small-margin-top {
	margin-top: var(--spacing-s);
}

.has-medium-margin-top {
	margin-top: var(--spacing-m);
}

.has-large-margin-top {
	margin-top: var(--spacing-l);
}

.has-larger-margin-top {
	margin-top: var(--spacing-xl);
}