/*
	(c)2021 - visuallizard.com

	General styles.
	Template, view, plugin and element specific, etc.
*/
:root {
    // primary palette
    --black: #000000;
    --dkgrey: #333333;
    --dkgreen: #006858;
    --green: #008353;
    --orange: #f7901d;
    --yellow: #fdb813;
    --white: #ffffff;
    // secondary palette
    --red: #ef463a;
    --pink: #f58f87;
    --ltgreen: #97d4c8;
    --ltgrey: #e3ecec;
}

.back {
    display: block;
    width: 100%;
    margin: 2rem 0 1rem;
}

body.schedule.viewGame hgroup h2 {
    margin-top: 0;

    font-size: 3.50rem;
    font-weight: 900;
}
body.schedule.viewGame hgroup h2 .h2-versus {
    font-weight: 700;
    font-size: 3rem;
    opacity: 0.5;
}
body.schedule.viewGame hgroup h2 + h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;

    font-size: 2.50rem;
    font-weight: 700;
}

h3 .team-side,
body.schedule.viewGame h3 .team-side {
    font-size: 1.50rem;
    font-weight: 600;

    opacity: 0.5;
}

dl.game-summary {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

    dl.game-summary dt:after {
        content: ":";
    }

    dl.game-summary dd {
        flex-grow: 1;
        margin-left: 0.5rem;
    }

img { display: block; position: relative; max-width: 100%; height: auto; }
.center > img { margin: 0 auto; }

/* ! [[custom styles for the schedule tables]] */
table{
    table-layout: fixed;
}
table td,
table th {
    line-height: 1.5;
}
table > caption,
div#schedule table > caption,
table#skills > caption {
    padding: 0.5rem 0;
}
table thead,
div#schedule table thead {
    background: var(--yellow);
    color: var(--black);
}
div#schedule table tfoot,
table#skills tbody {
    border-top: 2px solid var(--dkgreen);
    background: var(--ltgreen);
}
div#schedule table#finals thead {
    background: var(--green);
    color: var(--white);
}
table tbody tr:nth-child(even),
div#schedule table tbody tr:nth-child(even) {
    background: var(--ltgrey);
}
div#schedule table th.time-and-place {
    text-wrap: nowrap;
}
div#schedule table th.vs-or-score {
    width:10%;
    text-wrap: nowrap;
}
table.box-score th.team-name {
    width: 40%;
}
table.team-standings th.team-name {
    width: 30%;
}

table tr.highlight-game-winner th,
table tr.highlight-game-winner td {
    background: var(--ltgreen);
}

body.schedule.viewGame a.media-source,
div#schedule table td a.media-source,
body.schedule.viewGame .unavailable-link,
div#schedule table td .unavailable-link,
table#skills th a  {
    width: 100%;
    max-width: 80px;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background-color: var(--ltgreen);

    color: var(--black);
    font-size: 0.8em;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    transition: all 0.2s ease;
}
body.schedule.viewGame .unavailable-link,
div#schedule table td .unavailable-link {
    background: var(--ltgrey);

    cursor: not-allowed;
    opacity: 0.5;
}
div#schedule table tfoot th a,
table#skills tbody th a {
    background-color: var(--yellow);
}
div#schedule table th a:hover,
div#schedule table td a.media-source:hover {
    text-decoration: none;
    background-color: var(--yellow);
}
div#schedule table tfoot th a:hover,
table#skills tbody th a:hover {
    text-decoration: none;
    background-color: var(--dkgreen);
    color: var(--white);
}



/* ! Team Rosters page styles */
ul.jumplist {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    width: 100%;
    padding: 0;
    margin: 0 auto 2rem auto;
    font-size: 0.875rem;
}
ul.jumplist li {
    display: block;
    position: relative;
}
ul.jumplist li a {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    text-transform: uppercase;
    background-color: var(--ltgrey);
    color: var(--dkgreen);
    transition: all 0.2s ease;
}
ul.jumplist li a:hover {
    text-decoration: none;
    background-color: var(--yellow);
    color: var(--black);
}

div.team > h2 {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}
div.team h2 > .to-top {
    position: relative;

    display: block;
    padding: 0.25rem 0.5rem;
    border-radius: .25rem;
    background-color: var(--ltgreen);

    color: var(--dkgreen);
    font-size: 0.8rem;
    font-weight: 600;

    transition: all 0.2s ease;
}
div#team-3 > h2 > a { display: none; }
div.team h2 > a:hover {
    text-decoration: none;
    background-color: var(--dkgreen);
    color: var(--ltgrey);
}


/* ! [[custom styles for the team tables]] */
table.team {
    table-layout: fixed;
    width: 100%;
}
table.team thead {
    background: var(--yellow);
    color: var(--black);
}
table.team tbody tr:nth-child(even) {
    background: var(--ltgrey);
}

div.team td:empty:after{
    content: '-';
}



/* ! Sponsors */
div.sponsor-set {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 2%;
    row-gap: 1.25rem;
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
}
    div.sponsor-set > h2 {
        flex: 0 0 80%;
        max-width: 80%;
        margin: 2rem auto 0.5rem auto;
    }
    div.sponsor-set > h2:first-child {
        margin-top: 0;
    }
    div.sponsor-set div.sponsor {
        display: block;
        position: relative;
        flex: 0 0 32%;
        max-width: 32%;
        padding: 1rem;
        border: 1px solid transparent;
        border-radius: 0.625rem;
        box-shadow: 0 0 10px var(--ltgrey);
        transition: all 0.2s ease-out;
    }
    div.sponsor-set div.sponsor:has(a):hover {
        border: 1px solid var(--ltgreen);
    }



.metagrid {
	display: grid;
	grid-template-columns: max-content;
	grid-template-rows: 1fr;
	row-gap: .5rem;
	column-gap: 1rem;
	margin-block: 0;
}
.metagrid dd + dt,
.metagrid dt + dd,
.metagrid dd + dd {
	margin-top: 0;
}
.metagrid dt {
	grid-column-start: 1;
	grid-column-end: 2;
}
.metagrid dd {
	grid-column-start: 2;
	grid-column-end: 3;

	font-weight: normal;
}


/* ! [[ Bulletin Module ]] */

/* ! [ Articles - general ] */
.articles-block {
	padding: 1rem 0;
	margin-bottom: 2rem;
}
.articles-block .articles-heading {
	text-align: center;
	margin-bottom: 0;
}
.articles-block .more-all {
	text-align: center;
}

.article-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-gap: 1rem;
	align-items: stretch;
}
	.article-item {
		position: relative;
		padding: 0;
		margin: 1rem 0 2rem;

		display: flex;
		flex-direction: column;
	}
		.article-title {
			margin: 0 0 .5rem 0;
			font-size: 1rem;
			font-weight: normal;
		}
		.article-item .article-title a {
			text-decoration: none;
		}
		.article-item .article-title a:hover {
			text-decoration: underline;
		}
		.article-date {
			display: block;
			margin-bottom: .5rem;
			font-weight: 600;
			order: -1;
		}
	.article-figure {
		margin: 0;
		overflow: hidden;
		position: relative;
	}
		.article-img {
			display: block;
			width: 100%;
			height: auto;

			transition: transform .2s ease-in;
		}
		.article-item:hover .article-img {
			transform: scale(1.05);
		}
		.article-figure figcaption {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: .5rem .75rem .3rem;
			background: hsla(0, 0%, 0%, .5);
			color: #fff;
			font-size: .75rem;
		}
	.article-details {
		display: flex;
		flex-direction: column;
		padding: .5rem 0 0;
		flex-grow: 1;
	}
	.article-details > :last-child {
		margin-bottom: 0;
	}
		.article-brief {
			margin-bottom: auto;
		}
		.article-brief p {

		}
	.article-item .more {

	}

/* ! [ Articles - Index ] */
	.articles-index .more-all {
		display: none;
	}

/* ! [ Articles - Latest ] */
	.articles-latest {

	}
	.articles-latest .article-items {

	}
	.articles-latest .article-item {

	}
	.articles-latest .pagination-links {
		display: none;
	}

/* ! [ Articles - Single article (Bulletin view) ] */
	.article-view {
		padding-top: 1rem;
	}
	.article-view .article-headline {

	}
	.article-view .article-figure {
		max-width: 1200px;
		margin-bottom: 1rem;
	}
	.article-view .article-img {
		max-width: 100%;
	}
	.article-view .article-date {
		margin-bottom: 1rem;
	}

/* ! [ Archive List ] */
	.archive-list {
		list-style: none;
		margin: 0;
		padding-left: 1rem;
	}
	.archive-list.year {
		margin-top: 1rem;
	}
		.archive-list.month {

		}
			.archive-articles {
				padding-left: 1rem
			}





/* ! [[ Event Module ]] */

/* ! [ Events - general ] */
.events-block {

}
.events-block .events-heading {
	text-align: center;
	margin-bottom: 0;
}
.events-block .more-all {
	text-align: center;
	margin-bottom: 0;
}

.events-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-gap: 1rem;
	align-items: stretch;
}
	.event-item {
		position: relative;
		padding: 0;
		margin: 1rem 0 2rem;

		display: flex;
		flex-direction: column;
	}
		.event-title {
			margin: 0 0 .5rem 0;
			font-size: 1rem;
			font-weight: normal;
			text-wrap: balance;
		}
		.event-item .event-title a {
			text-decoration: none;
		}
		.event-item .event-title a:hover {
			text-decoration: underline;
		}
		.event-meta {
			margin-bottom: .5rem;
			font-weight: 600;
		}
			.event-meta > * {
				margin-bottom: .25rem;
			}
			.event-dates {
				font-size: inherit;
			}
			.event-dates .event-range {

			}
			.event-dates .event-date {

			}
			.event-location {
				margin: 0;
				font-size: inherit;
			}
	.event-figure {
		margin: 0;
		overflow: hidden;
		position: relative;
	}
		.event-img {
			display: block;
			width: 100%;
			height: auto;

			transition: transform .2s ease-in;
		}
		.event-item:hover .event-img {
			transform: scale(1.05);
		}
		.event-figure figcaption {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: .5rem .75rem .3rem;
			background: hsla(0, 0%, 0%, .5);
			color: #fff;
			font-size: .75rem;
		}
	.event-details {
		display: flex;
		flex-direction: column;
		padding: .5rem 0 0;
		flex-grow: 1;
	}
	.event-details > :last-child {
		margin-bottom: 0;
	}
		.event-brief {
			margin-bottom: auto;
		}
		.event-brief p {
			margin-bottom: .5rem;
			font-size: inherit;
		}
	.event-item .more {
		margin-block: 1rem;
	}
		.event-item .more a {

		}


/* ! Events - Filter */
	.events-filter {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 1rem;

		margin: 1rem auto;
		padding: 1rem;

		background-color: #eee;
	}
		.events-filter [class^="input-"] {
			margin-bottom: 0;
		}
		.events-filter .input-daterange {
			display: flex;
			column-gap: .25rem;
		}
		.events-filter .button {
			margin-top: auto;
		}


/* ! [ Events - Index ] */
	.events-index .more-all {
		display: none;
	}
	.events-index .events-heading {
		/* display: none; */
	}
	.events-index.event-items {

	}
		.events-index .event-item {
			display: flex;
			/* flex-direction: row; */
			gap: 1rem;
		}
		.events-index .event-figure {
			max-width: 300px;
			/* flex-basis: 20%; */
			align-self: flex-start;
		}
		.events-index .event-img {
			/* aspect-ratio: 1/1; */
			object-fit: cover;
		}
		.events-index .event-details {
			/* flex-basis: 75%; */
			flex-grow: 0;
		}
		.events-index .event-title {

		}
		.events-index .event-meta {
			order: -1;
		}
		.events-index .more {

		}
		.events-index .more a {

		}


/* ! [ Events - Featured ] */
	.events-featured {

	}
	.events-featured .events-items {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
		grid-column-gap: 4rem;
		grid-row-gap: 0;
	}
		.events-featured .event-item {
			border-radius: var(--border-radius);
			background-color: #fff;
			overflow: hidden;
		}
		.events-featured .event-details {
			padding: 1rem 2rem;
		}
		.events-featured .event-title {
			font-size: 32px;
			margin-bottom: 1rem;
		}
		.events-featured .event-img  {
			aspect-ratio: 2/1;
			object-fit: cover;
		}


	.events-upcoming .event-item:nth-child(n+4) {
		display: none; /* limit to first 3 items */
	}

	.events-featured {
		margin-bottom: 4rem;
		padding: 2rem 4rem;

		background-color: #eee;
	}
		.events-featured .event-item:nth-child(n+5) {
			/* Optionally limit number of Featured event items by CSS */
			/* display: none;  limit to first 4 items */
		}


/* ! [ Events - Single event (view) ] */
	.event-view {

		margin-bottom: 2rem;
		display: flex;
		flex-wrap: wrap;
		column-gap: 2rem;
	}
	.event-view .event-content {
		flex-grow: 1;

	}
	.event-view .event-headline {
		width: 100%;
	}
	.event-view .event-figure {
		max-width: 1200px;
		margin-bottom: 1rem;
	}
	.event-view .event-img {
		max-width: 100%;
	}

	.event-view .event-meta {
		flex-basis: 100%;

		padding: 1rem;
		margin-bottom: 1rem;

		background-color: #eee;
		color: var(--primary);

		font-weight: normal;
	}
		.event-view .event-date {
			display: inline;
		}

	@media (min-width: 1200px) {
		.event-view {
			margin-top: 2rem;
		}
		.event-view .event-content {
			flex-basis: 70%;
		}
		.event-view .event-meta {
			flex-basis: calc(30% - 2rem);
			order: 1;
			margin-bottom: auto;
		}
	}