@charset "UTF-8";

/*
Theme Name: Sask Sailing
Theme URI: https://sasksailing.ca
Author: Ilia Rudnitskiy
Author URI: https://ilia.im
Description: SSCA website theme.
Version: 0.0.1
*/

/**
 * ############################################################################
 * ############################################################################
 * Colors
 * ############################################################################
 * ############################################################################
 */

:root {
  --green: #0D7B3E;
  --light-green: #15C564;
  --yellow: #FFAB0F;
  --dark-gray: #232323;
  --gray: #7E7E7E;
  --light-gray: #dedede;
  --orange: #E65902;
  --purple: #7422A3;
  --red: #C71300;
  --light-blue: #0CC3C9;
  --green-90: rgba(13,123,62,0.9);
  --green-gradient: linear-gradient(90deg, rgba(13,123,62,1) 15%, rgba(255,255,255,0.9) 40%);
}

/**
 * ############################################################################
 * ############################################################################
 * Fonts
 * ############################################################################
 * ############################################################################
 */

@font-face {
  font-family: 'urw_dinbold';
  src: url('assets/fonts/urwdin-bold-webfont.woff2') format('woff2'),
       url('assets/fonts/urwdin-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'urw_dinlight';
  src: url('assets/fonts/urwdin-light-webfont.woff2') format('woff2'),
       url('assets/fonts/urwdin-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'gibsonitalic';
  src: url('assets/fonts/gibson-italic-webfont.woff2') format('woff2'),
       url('assets/fonts/gibson-italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'gibsonlight';
  src: url('assets/fonts/gibson-light-webfont.woff2') format('woff2'),
       url('assets/fonts/gibson-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'gibsonlight_italic';
  src: url('assets/fonts/gibson-lightitalic-webfont.woff2') format('woff2'),
       url('assets/fonts/gibson-lightitalic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'gibsonbook';
  src: url('assets/fonts/gibson-book-webfont.woff2') format('woff2'),
       url('assets/fonts/gibson-book-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'gibsonsemibold';
  src: url('assets/fonts/gibson-semibold-webfont.woff2') format('woff2'),
       url('assets/fonts/gibson-semibold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'gibsonsemibold_italic';
  src: url('assets/fonts/gibson-semibolditalic-webfont.woff2') format('woff2'),
       url('assets/fonts/gibson-semibolditalic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/**
 * ############################################################################
 * ############################################################################
 * General styles
 * ############################################################################
 * ############################################################################
 */

* {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	font-family: "gibsonbook", "Arial", "Helvetica Neue", sans-serif;
	font-weight: 400;
	color: var(--dark-gray);
}

h1, h2, h3, h4 {
  font-family: "urw_dinbold";
  font-weight: 700;
}

h5, h6 {
  font-family: "urw_dinlight";
  font-weight: 300;
}

h1, h2 {
	line-height: 1;
}

h3 {
	text-transform: uppercase;
}

b, strong, a {
	font-family: "gibsonsemibold", "Arial", "Helvetica Neue", sans-serif;
	font-weight: 600;
}

a {
	text-decoration: none;
	position: relative;
	color: inherit;
	transition: filter 0.2s ease;
}

a:visited,
a:visited span {
	color: inherit;
	transition: none;
}

a:focus,
a:focus-visible {
	filter: brightness(130%);
	outline: none;
}

a:not(.button):hover {
	filter: brightness(130%);
}

button {
	cursor: pointer;
}

@media (min-width: 768px) {
	html {
		font-size: 17px;
	}
}

@media (min-width: 992px) {
	html {
		font-size: 18px;
	}
}

@media (min-width: 1200px) {
	html {
		font-size: 19px;
	}
}

/**
 * ############################################################################
 * ############################################################################
 * Helpers
 * ############################################################################
 * ############################################################################
 */

.text-center {
	text-align: center;
}

/**
 * ############################################################################
 * ############################################################################
 * Containers
 * ############################################################################
 * ############################################################################
 */

section {
	position: relative;
	padding: 1em 0;
}

.jumbo {
	font-size: 1.2em;
}

.container>*:last-child,
.container-fluid>*:last-child {
	margin-bottom: 0;
}

.container>*:first-child,
.container-fluid>*:first-child {
	margin-top: 0;
}

/*section .row {
	align-items: baseline;
}*/

.col {
	min-width: 12em;
}

.col-inner:not(.none):not(.stretch) {
	padding: 1em;
	margin-bottom: 1em;
	box-shadow: 0 0.1875em 0.625em 0 rgba(0,0,0,0.15);
}

.col-inner:not(.none):not(.stretch)>*:first-child {
	margin-top: 0;
}

.col-inner:not(.none):not(.stretch)>*:last-child {
	margin-bottom: 0;
}

.col-inner.image {
	height: 100%;
}

.white {
	background: #fff;
	color: var(--dark-gray);
}

.dark-gray {
	background: var(--dark-gray);
	color: #fff;
}

.gray {
	background: var(--gray);
	color: #fff;
}

.light-gray {
	background: var(--light-gray);
	color: var(--dark-gray);
}

.green {
	background: var(--green);
	color: #fff;
}

.yellow {
	background: var(--yellow);
	color: var(--dark-gray);
}

.red {
	background: var(--red);
	color: #fff;
}

.orange {
	background: var(--orange);
	color: #fff;
}

.purple {
	background: var(--purple);
	color: #fff;
}

.light-blue {
	background: var(--light-blue);
	color: var(--dark-gray);
}

.image {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

@media (max-width: 575px) {
	.col.image-wrapper {
		padding-left: 0;
		padding-right: 0;
	}

	.col-inner.image.stretch {
		padding-bottom: 60%;
	}

	.row>.col:first-child .stretch {
		margin-top: -1em;
	}

	.row>.col:last-child .stretch {
		margin-bottom: -1em;
	}
}

@media (min-width: 576px) {
	section {
		padding: 2em 1em;
	}

	.col-inner.image.stretch {
		position: absolute;
		top: 0;
		width: calc(50% - var(--bs-gutter-x)/ 2);
	}

	.col:first-child>.col-inner.image.stretch {
		left: 0;
	}
}

@media (min-width: 768px) {
	section {
		padding: 2em 2em;
	}
}

@media (min-width: 992px) {
	.row {
		--bs-gutter-x: 2rem;
	}
}

@media (min-width: 1200px) {
	section {
		padding: 3em 3em;
	}

	.col-inner:not(.none):not(.stretch) {
		padding: 2em;
	}
}

@media (min-width: 1400px) {
	.row {
		--bs-gutter-x: 3rem;
	}
	section {
		padding: 3em 5%;
	}
}

@media (min-width: 2000px) {
	section {
		padding: 3em 10%;
	}

	.container-fluid {
		max-width: 2500px;
	}
}

/**
 * ############################################################################
 * ############################################################################
 * Container-specific elements
 * ############################################################################
 * ############################################################################
 */

.dark-gray a {
	color: var(--light-green);
}

.dark-gray a svg {
	fill: var(--light-green);
}

.light-gray a,
.white a {
	color: var(--green);
}

.jumbo h1 {
	position: relative;
}

.jumbo h1::before {
	position: absolute;
	content: '';
	left: -0.75rem;
	top: 0;
	height: 100%;
	width: 0.2em;
	background-color: var(--yellow);
}

.yellow.jumbo h1::before {
	background-color: var(--red);
}

@media (min-width: 576px) {
	.jumbo h1::before {
		left: -0.4em;
	}
}

/**
 * ############################################################################
 * ############################################################################
 * Navigation
 * ############################################################################
 * ############################################################################
 */

#masthead {
	width: 100%;
	background: var(--green-90);
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	box-shadow: 0 0.1875em 0.625em 0 rgba(0,0,0,0.15);
}

#site-navigation {
	height: 3.5em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#site-navigation a,
#site-navigation button {
	transition-property: opacity, transform;
	transition-duration: 0.2s;
	transition-timing-function: ease;
}

#site-navigation a:hover,
#site-navigation button:hover {
	opacity: 0.8;
	transform: translateY(-0.05em);
}

#site-navigation .logo,
#site-navigation .menu-button-container {
	height: 60%;
	margin: 0.5em 1em;
}

#site-navigation .logo {
	display: block;
}

#site-navigation .logo svg,
#site-navigation .menu-button-container .button svg {
	fill: #fff;
	height: 100%;
}

#site-navigation .menu-button-container .button {
	background: transparent;
	border: 0;
	padding: 0;
	display: flex;
	height: 100%;
}

#site-navigation .button .line-top,
#site-navigation .button .line-bot {
	transition: transform 0.2s ease;
	transform-origin: center left;
}

#site-navigation .button .line-mid {
	transition: transform 0.2s ease;
	transform-origin: center right;
}

#site-navigation.in .button .line-top {
	transform: skewY(18deg);
}

#site-navigation.in .button .line-mid {
	transform: scaleX(0);
}

#site-navigation.in .button .line-bot {
	transform: skewY(-18deg);
}

#site-navigation .menu-items-container {
	position: absolute;
	top: 100%;
	right: 0;
	background: var(--dark-gray);
	padding: 1em;
	transition: transform 0.2s ease;
	transform: translateX(101%);
}

#site-navigation.in .menu-items-container {
	transform: translateX(0);
}

#site-navigation .menu-items-container .menu-wrapper {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#site-navigation .menu-items-container .menu-wrapper a {
	color: #fff;
	fill: #fff;
	text-decoration: none;
	font-family: urw_dinbold;
	font-weight: 700;
	font-size: 2em;
	padding: 0.5em;
	display: block;
	position: relative;
}

#site-navigation .menu-items-container .menu-wrapper .current-menu-item a {
	color: var(--yellow);
}

#site-navigation .menu-items-container .menu-wrapper .current-menu-item a:before {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffab0f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -0.45em;
	bottom: 48%;
	width: 1em;
	height: 1em;
	transform: translateY(50%) rotate(90deg);
}

#site-navigation .menu-items-container .social-menu-container-mobile .menu-wrapper {
	display: flex;
	margin-top: 1em;
	padding-top: 1em;
	border-top: 0.15em solid var(--green);
}

#site-navigation .menu-items-container .social-menu-container-mobile a {
	width: 2em;
	height: 2em;
}

#site-navigation .social-menu-container-desktop {
	display: none;
}

@media (min-width: 992px) {
	#masthead {
		background: var(--green-gradient);
	}

	#site-navigation .menu-button-container {
		display: none;
	}

	#site-navigation .menu-items-container {
		position: relative;
		display: flex;
		top: auto;
		right: auto;
		background: transparent;
		padding: 0;
		transform: translateX(0);
	}

	#site-navigation .menu-items-container .menu-wrapper {
		display: flex;
	}

	#site-navigation .menu-items-container .menu-wrapper .menu-item {
		margin: 0 0.8em;
	}

	#site-navigation .menu-items-container .menu-wrapper a {
		padding: 0.2em;
	}

	#site-navigation .menu-items-container .menu-wrapper a,
	#site-navigation .social-menu-container-desktop .menu-wrapper a {
		color: var(--green);
		fill: var(--green);
		font-size: 1.1em;
	}

	#site-navigation .menu-items-container .menu-wrapper .current-menu-item a {
		color: var(--dark-gray);
	}

	#site-navigation .menu-items-container .menu-wrapper .current-menu-item a:before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
		left: 50%;
		bottom: -0.7em;
		transform: translateX(-50%);
	}

	#site-navigation .menu-items-container .social-menu-container-mobile {
		display: none;
	}

	#site-navigation .social-menu-container-desktop {
		display: block;
	}

	#site-navigation .social-menu-container-desktop .menu-wrapper {
		display: flex;
		list-style-type: none;
		padding: 0;
		margin: 0.5em 1em;
		width: 9.589em;
		justify-content: flex-end;
	}

	#site-navigation .social-menu-container-desktop .menu-wrapper .menu-item {
		margin: 0 0 0 1em;
	}

	#site-navigation .social-menu-container-desktop .menu-wrapper a {
		display: block;
		width: 1.2em;
		height: 1.2em;
	}
}

/**
 * ############################################################################
 * ############################################################################
 * Buttons
 * ############################################################################
 * ############################################################################
 */

.buttons {
	margin: 1.5em 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.text-center .buttons {
	justify-content: center;
}

.buttons .button {
	position: relative;
	font-family: 'urw_dinbold';
	font-weight: 700;
	font-size: 1.1em;
	padding: 0.5em 1em;
}

.buttons .button span {
	position: relative;
	z-index: 10;
	transition: color 0.2s ease;
}

.buttons .button::after {
	content: '';
	position: absolute;
	left: 0.2222222em;
	top: 0.2222222em;
	bottom: 0.2222222em;
	right: 0.2222222em;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.buttons .button:hover::after {
	transform: scaleX(1);
}

.buttons .button.primary {
	background: var(--green);
	color: #fff;
}

.buttons .button.primary:hover span {
	color: var(--green);
}

.yellow .buttons .button.primary {
	background: var(--red);
	color: #fff;
}

.yellow .buttons .button.primary:hover span {
	color: var(--red);
}

.red .buttons .button.primary {
	background: var(--yellow);
	color: var(--dark-gray);
}

.red .buttons .button.primary::after {
	background: var(--dark-gray);
}

.red .buttons .button.primary:hover span {
	color: var(--yellow);
}

.green .buttons .button.primary {
	background: var(--yellow);
	color: var(--dark-gray);
}

.green .buttons .button.primary::after {
	background: var(--dark-gray);
}

.green .buttons .button.primary:hover span {
	color: var(--yellow);
}

.buttons .button.secondary {
	background: #fff;
	color: var(--dark-gray); 
}

.buttons .button.secondary::after {
	background: var(--dark-gray);
}

.buttons .button.secondary:hover span {
	color: #fff;
}

.none .buttons .button.secondary,
.white .buttons .button.secondary {
	background: var(--light-gray);
	color: var(--dark-gray);
}

.none .buttons .button.secondary:hover span,
.white .buttons .button.secondary:hover span {
	color: var(--light-gray);
}

.light-gray .buttons .button.secondary {
	background: #fff;
	color: var(--dark-gray); 
}

.light-gray .buttons .button.secondary:hover span {
	color: #fff; 
}

/**
 * ############################################################################
 * ############################################################################
 * Page header
 * ############################################################################
 * ############################################################################
 */

.page-header {
	position: relative;
	min-height: 50vh;
	padding: 5.5em 0 2em;
	overflow: hidden;
}

.page-header .header-video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	object-fit: cover;
	background-size: cover;
}

.page-header .header-overlay {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

.page-header .event-date {
	color: var(--light-gray);
	text-transform: uppercase;
}

.page-header.photo {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

@media (min-width: 576px) {

}

@media (min-width: 992px) {
	.page-header {
		padding: 6.5em 0 3em;
	}
}

@media (min-width: 1400px) {
	.page-header {
		padding: 7.5em 0 4em;
	}
}

/**
 * ############################################################################
 * ############################################################################
 * Posts
 * ############################################################################
 * ############################################################################
 */
.post-title {
	margin-bottom: 0.5em;
}

.post-date {
	color: var(--gray);
	text-transform: uppercase;
	margin-top: 1em;
}

.post-excerpt {
	margin: 1em 0;
}

.post-excerpt>*:first-child {
	margin-top: 0;
}

.post-excerpt>*:last-child {
	margin-bottom: 0;
}

.post-feed {
	font-size: 0.9em;
	text-align: left;
	list-style-type: none;
	padding: 0;
}

.post-feed li {
	display: flex;
	align-items: baseline;
	margin-bottom: 1em;
}

.post-feed .post-date {
	position: relative;
	min-width: 30%;
	text-transform: none;
	padding-right: 0.8em;
	margin-right: 0.5em;
	margin-top: 0;
}

.post-feed .post-date::after {
	content: '';
	position: absolute;
	width: 0.2em;
	height: 100%;
	right: 0;
	top: 0;
	background: var(--yellow);
}

@media (min-width: 992px) {
	.post-excerpt {
		column-count: 2;
		column-gap: 2em;
	}
}

/**
 * ############################################################################
 * ############################################################################
 * Clubs
 * ############################################################################
 * ############################################################################
 */

#clubs-map {
	width: 100%;
	height: 30em;
}

.ol-control button {
	background-color: rgba(13, 123, 62, .5);
}

.ol-control button:focus, .ol-control button:hover {
	background-color: rgba(13, 123, 62, .8);
}

.club-listing {
	list-style-type: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.club-listing li {
	width: calc(50% - 1em);
	display: flex;
	align-items: center;
	margin-bottom: 1em;
}

.club-listing li a {
	font-family: 'urw_dinbold';
	font-weight: 700;
}

.club-icon {
	width: 3em;
	height: 3em;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8em;
	font-family: 'urw_dinbold';
	font-weight: 700;
	margin-right: 0.5em;
	flex-shrink: 0;
}

@media (min-width: 768px) {
	#clubs-map {
		height: 100%;
		position: absolute;
		top: 0;
		width: calc(50% - var(--bs-gutter-x)/ 2);
	}

	.club-listing li {
		width: 100%;
	}
}

@media (min-width: 1200px) {
	.club-listing li {
		width: calc(50% - 1em);
	}
}

/**
 * ############################################################################
 * ############################################################################
 * Sponsors
 * ############################################################################
 * ############################################################################
 */

#sponsors {
	padding: 2em 0;
}

#sponsors .row {
	align-items: center;
}

#sponsors .logo-container {
	display: block;
	margin: 2em;
}

@media (min-width: 576px) {
	#sponsors {
		padding: 1em 0;
	}

	#sponsors .logo-container {
		margin: 1em;
	}
}

@media (min-width: 992px) {
	#sponsors {
		padding: 2em 0;
	}

	#sponsors .logo-container {
		margin: 2em;
	}
}

@media (min-width: 1400px) {
	#sponsors {
		padding: 3em 0;
	}

	#sponsors .logo-container {
		margin: 3em;
	}
}

/**
 * ############################################################################
 * ############################################################################
 * Footer
 * ############################################################################
 * ############################################################################
 */

#colophon {
	padding-top: 4em;
	padding-bottom: 4em;
}

#colophon .logo-container {
	display: flex;
	align-items: center;
}

#colophon .logo-container .logo {
	display: block;
	margin: 0 auto 2em;
	width: 50%;
}

#colophon .logo-container .logo svg {
	width: 100%;
	fill: #fff;
}

#colophon .site-info {
	text-align: center;
}

#colophon .social-menu-container-footer .menu-wrapper {
	display: flex;
	list-style-type: none;
	padding: 0;
	justify-content: center;
}

#colophon .social-menu-container-footer .menu-wrapper .menu-item {
	margin: 0 0.5em;
}

#colophon .social-menu-container-footer .menu-wrapper a {
	display: block;
	width: 1.2em;
	height: 1.2em;
}

@media (min-width: 576px) {
	#colophon {
		padding-top: 2em;
		padding-bottom: 2em;
	}
	#colophon .logo-container .logo {
		margin: 0;
		width: 100%;
	}

	#colophon .site-info {
		text-align: left;
	}

	#colophon .social-menu-container-footer .menu-wrapper {
		justify-content: flex-start;
	}

	#colophon .social-menu-container-footer .menu-wrapper .menu-item {
		margin: 0 1em 0 0;
	}
}

@media (min-width: 768px) {
	#colophon .site-info {
		text-align: left;
		padding-left: 2em;
	}
}

@media (min-width: 992px) {
	#colophon {
		padding-top: 4em;
		padding-bottom: 4em;
	}
}

@media (min-width: 1400px) {
	#colophon {
		padding-top: 6em;
		padding-bottom: 6em;
	}
}