/**
 * Theme Name: Today
 * Author: Gil Palma
 */

@import url("assets/style/header-footer.css");
@import url("assets/style/altcolor1.css");

@font-face {
	font-family: 'Franklin';
	src:
		url('assets/fonts/itc-franklin-gothic/ITCFranklinGothicStd-Med.eot') format("embedded-opentype"),
		url('assets/fonts/itc-franklin-gothic/ITCFranklinGothicStd-Med.ttf') format("opentype"),
		url('assets/fonts/itc-franklin-gothic/ITCFranklinGothicStd-Med.woff') format("woff"),
		url('assets/fonts/itc-franklin-gothic/ITCFranklinGothicStd-Med.woff2') format("woff2");
	font-weight: normal;
	font-style: normal;
}

:root {
	--primary-background-color: #461900;
	--secondary-background-color: #333333;
	--footer-background-color: #BBB;
	--primary-logo-color: #FF9900;
	--secondary-logo-color: #FFFFFF;
	--solid-logo-color: #EE5E21;
	--primary-text-color: #FFFFFF;
	--secondary-text-color: #8fbcf6;
	--inverse-text-color: #000000;
	--h-link-text-color: #f3c393;
	/* --primary-color: #006600; */
	--primary-color: #922;
	--button-background-color: #FFFFFF;
	--button-positive-background-color: #38921c;
	--button-negative-background-color: #e00606;
	--contact-block-background-color : #003366;
	--box-shadow-color: #999;
	--bright-link-color: #b2bbff;
	--h-link-highlight: #66333388;
	--content-width: 300px;
	--header-button-size: 80px;
	--mobile-menu-button-size: 40px;
	--home-link-width: 200px;
}

* {
	box-sizing: border-box;
}

body, html {
}

html {
	font-size: 20px;
}

body {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	background-color: var(--secondary-background-color);
	/* background: linear-gradient(0deg, var(--secondary-background-color) 0 90%, var(--footer-background-color) 90%); */
	color: var(--primary-text-color);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1rem;
	margin: 0;
	color-scheme: dark;
}

main, header, footer {
	width: 100%;
}

main {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
}

main > section,
main > section.full-width > * {
	width: var(--content-width);
}

main > section {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
}

main > section.full-width {
	width: 100%;
}

main > section.padded {
	padding: 20px 0;
}

main > section.intro,
main > section.first-paragraph {
	background-color: var(--secondary-background-color);
}

main > section.first-paragraph + section {
	background-color: var(--primary-background-color);
}

main > section .intro-subtitle,
main > section .intro-title + .content {
	margin-top: 30px;
}

main > section .content {
    white-space: pre-line;
}

main .banner-photo {
	width: 100%;
}

dialog:popover-open {
	display: flex;
}

a {
	display: block;
}

nav:not(.h-links) a {

}

/* Safety line to make sure menu link descriptions only appear
where intended and must be manually set */
a .menu-item-description {
	display: none;
	white-space: nowrap;
}

p {
	margin: 0;
}

svg {
    min-width: 20px;
	max-width: 100%;
	min-height: 20px;
	max-height: 100%;
	user-select: none;
}

ul, ol {
	list-style: none;
	list-style-position: inside;
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: normal;
}

h1 {
	font-size: 4rem;
}

h2 {
	font-size: 2.6rem;
}

h3 {
	font-size: 2rem;
}

h4 {
	font-size: 1.6rem;
}

h5 {
	font-size: 1.4rem;
}

h6 {
	font-size: 1.2rem;
}

p, div {
	font-size: 1rem;
}

ul.bullet {
	list-style: inside disc;
}

img {
	object-fit: contain;
}

img.color-filters-theme {
	filter: brightness(75%) grayscale(100%) sepia(100%) saturate(150%) hue-rotate(310deg) contrast(120%);
}

figure {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
}

figure figcaption {
	width: var(--content-width);
	margin-top: 10px;
	font-size: 1.1rem;
}

button,
nav:not(.h-links) a {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	min-width: var(--header-button-size);
	height: var(--header-button-size);
	border: 1px solid var(--primary-color);
	border-radius: 10px;
	padding: 6px;
	font-size: 1.2rem;
	font-weight: 600;
	position: relative;
	top: 0px;
	left: 0px;
	transition-property: background-color, color;
	transition-duration: 200ms;
	transition-timing-function: linear;
	color: var(--primary-color);
	background-color: var(--button-background-color);
}

button:where(.positive, .negative) {
	border: 0;
	transition: opacity 200ms ease-in-out;
}

button:where(.negative) {
	background-color: var(--button-negative-background-color);
	color: var(--primary-text-color);
}

button:where(.positive) {
	background-color: var(--button-positive-background-color);
	color: var(--primary-text-color);
}

button:not(.positive):not(.negative):hover,
.font-size-manager button:hover svg path,
nav:not(.h-links) a:hover {
	color: var(--button-background-color);
	background-color: var(--primary-color);
	fill: var(--primary-text-color);
	border: 1px solid #FFF;
}

button:where(.positive, .negative):hover {
	opacity: 0.7;
}

button:where(.negative):hover {
	/* background-color: var(--primary-color); */
}

button:where(.positive):hover {
	/* background-color: var(--primary-logo-color); */
}

.hidden {
	display: none;
}

.hero {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	font-size: 3rem;
}

.logo-wrapper.desktop {
	display: none;
}

.flex-break {
  flex-basis: 100%;
  height: 0;
}

.h-links ul {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	gap: 30px;
}

.h-links li a {
	width: 100%;
	height: 200px;
	position: relative;
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-color: var(--secondary-background-color);
	font-size: 0;
	border: 2px solid transparent;
	transition-property: box-shadow, top, left;
	transition-duration: 200ms;
	transition-timing-function: ease-in-out;
}

.h-links li:hover a {
	box-shadow: 3px 3px 20px var(--box-shadow-color);
}

.h-links li a:active {
	top: 4px;
	left: 4px;
}

.h-links li a .menu-item-description {
	display: block;
	font-size: 2rem;
	position: absolute;
	color: var(--h-link-text-color);
	background-color: var(--h-link-highlight);
	padding: 5px 15px;
	border-radius: 15px;
	box-shadow: 2px 2px 6px #7779;
}

.h-links li.about a {
	background-image: url('assets/images/page-elements/h-line-2-dark.svg'), url('assets/images/page-elements/dark-swoop-x-rotation.svg');
}

.h-links li.about a .menu-item-description {
	bottom: 10px;
	left: 20px;
}

.h-links li.activities a {
	background-image: url('assets/images/page-elements/h-line-1-dark.svg'), url('assets/images/page-elements/dark-swoop-y-rotation.svg');
}
.h-links li.activities a .menu-item-description {
	top: 20px;
	right: 120px;
}

.h-links li.theatre a {
	background-image: url('assets/images/page-elements/h-line-1-dark.svg'), url('assets/images/page-elements/dark-swoop-y-rotation.svg');
}
.h-links li.theatre a .menu-item-description {
	top: 30px;
	right: 45px;
}

.h-links li.writing a {
	background-image: url('assets/images/page-elements/h-line-2-dark.svg'), url('assets/images/page-elements/dark-swoop-x-rotation.svg');
}
.h-links li.writing a .menu-item-description {
	bottom: 20px;
	left: 30px;
}

.h-links li.radio a {
	background-image: url('assets/images/page-elements/h-line-4-dark.svg'), url('assets/images/page-elements/dark-swoop-xy-rotation.svg');
}
.h-links li.radio a .menu-item-description {
	top: 22px;
	right: 100px;
}

.h-links li.web a {
	background-image: url('assets/images/page-elements/h-line-3-dark.svg'), url('assets/images/page-elements/dark-swoop-natural.svg');
}
.h-links li.web a .menu-item-description {
	bottom: 20px;
	left: 85px;
}

.page .description .content > * {
	margin-bottom: 10px;
	font-weight: 400;
	font-size: 1.8rem;
	text-align: justify;
	/* This makes the text appear correctly in Samsung browser */
	/*display: flex; */
}

/* --------------- Homepage --------------- */

.home .hero {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	color: var(--primary-text-color);
	font-size: 6rem;
	padding-top: 20px;
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-image: url('assets/images/page-elements/dark-swoop-mobile-natural.svg');
	background-color: var(--secondary-background-color)
}

.home .hero .soir {
	align-self: flex-start;
	width: 10%;
	min-width: 100px;
	max-width: 125px;
	height: 90px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	top: 30px;
	left: 3%;
}

.home .hero .soir img {
	width: 100%;
	object-fit: contain;
}

.home:not(.altcolor1) .hero .soir svg path {
	fill:  var(--primary-text-color);
}

.home .hero .logo-wrapper {
	width: 100%;
	margin-bottom: 15px;
	padding: 0 20px;
}

.home .hero .logo-wrapper svg.main-logo {
	width: 100%;
	max-height: 300px;
}

.home .hero .logo-wrapper svg.main-logo .circle path {
	fill: var(--primary-logo-color);
}

.home .hero .logo-wrapper svg.main-logo .text path {
	fill: var(--secondary-logo-color);
}

body:not(.altcolor1) .hero svg.logos2030 > g > g > :is(path, polygon, rect) {
	fill:  var(--primary-text-color);
}

.home .hero svg.logos2030 {
	height: 135px;
	max-width: 100%;
}

.home .banner-wrapper .banner-photo {
	width: 100%;
}

.home .intro {
	text-align: left;
	letter-spacing: 2px;
	background-color:  var(--secondary-background-color);
	background-size: cover;
}

.home .intro .title {

}

.home .intro .subtitle {
	font-style: italic;
}

.home .quick-about {
	background-color: var(--primary-background-color);
	/* text-shadow:
		-1px -1px 2px #000,
		-1px 1px 2px #000,
		1px -1px 2px #000,
		1px 1px 2px #000; */
	padding: 30px 0 60px 0;
}

.home .quick-about .summary {
	margin-bottom: 30px;
}

.home .quick-about .summary > * {
	text-align: justify;
	margin-bottom: 25px;
}

.home .sticky-logos {
	display: none;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 100px;
	background-color: var(--footer-background-color);
	padding: 5px;
}

.home .sticky-logos.show {
	display: flex;
}

.home .sticky-logos .logos {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
	max-width: 80%;
	height: 100%;
}

.home .sticky-logos .logos .logo-group {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.home .sticky-logos .logos .logo-group .group-title {
	font-size: 0;
}

.home .sticky-logos .logos .logo-group .logo-sequence {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	height: 100%;
}

.home .sticky-logos .logos .logo-group .logo-sequence :is(img, svg) {
	height: 100%;
	max-width: 105px;
}

/* Might be needed in the future */
/* body:not(.altcolor1).home .sticky-logos .logos svg > g > g > :is(path, polygon, rect) {
	fill: var(--primary-text-color);
} */

/* --------------- About --------------- */

.page-template-page-about main {
	font-size: 1.5rem;
}

.page-template-page-about section.description {

}

.page-template-page-about section.description .content {
	text-align: justify;
}

.page-template-page-about section.description .content p:not(:last-child) {
	margin-bottom: 20px;
}

.page-template-page-about section.activity-jump {
	background-color: var(--primary-background-color);
}

.page-template-page-about section.activity-jump nav {
	padding: 30px 0 60px 0;
}

.page-template-page-about section.activity-jump nav ul li a {
	background-image: url('assets/images/page-elements/h-line-1-dark.svg'), url('assets/images/page-elements/dark-swoop-y-rotation.svg');
}

.page-template-page-about section.activity-jump nav ul li a .menu-item-description {
	top: 20px;
  right: 120px;
}

/* --------------- Activities --------------- */

.page-template-page-activities main {

}

.page-template-page-activities .intro {
	color: var(--primary-text-color);
}

.page-template-page-activities .intro img {
	width: 100%;
}

.page-template-page-activities .intro .intro-title {

}

.page-template-page-activities .activities {
	padding: 30px 0 60px 0;
	background-color: var(--primary-background-color);
}

/* --------------- Single Activity --------------- */

.page-template-page-single-activity .banner img {
	/* width: 100%; */
}

.page-template-page-single-activity .intro .intro-title {
	text-transform: lowercase;
}

.page-template-page-single-activity .description {
	font-size: 1.8rem;
	gap: 40px;
}

.page-template-page-single-activity .activities {
	background-color: var(--primary-background-color);
	padding: 30px 0 60px 0;
}

.page-template-page-single-activity .activities nav ul li.current_page_item {
	display: none;
}

@media only screen and (inverted-colors) {
  img, video {
    filter: invert(100%);
  }
}

/* It's commented out since it is the smallest/default */
/* @media only screen and (min-width: 320px) {
} */

@media only screen and (min-width: 375px) {
	:root {
		--content-width: 350px;
	}
}

@media only screen and (min-width: 425px) {
	:root {
		--content-width: 400px;
	}
}

@media only screen and (min-width: 480px) {
	:root {
		--content-width: 450px;
	}
}

@media only screen and (min-width: 600px) {
	:root {
		--content-width: 550px;
	}
}

@media only screen and (min-width: 768px) {
	:root {
		--content-width: 600px;
	}

}

@media only screen and (min-width: 840px) {
	:root {
		--content-width: 750px;
	}
}

@media only screen and (min-width: 1024px) {
	:root {
		--content-width: 900px;
		--header-button-size: 40px;
		--home-link-width: 140px;
	}
	h1 {
		font-size: 3rem;
	}
	h2 {
		font-size: 2rem;
	}
	h3 {
		font-size: 1.8rem;
	}
	h4 {
		font-size: 1.5rem;
	}
	h5 {
		font-size: 1.2rem;
	}
	h6 {
		font-size: 1.1rem;
	}
	p, div {
		font-size: 1.1rem;
	}
	.logo-wrapper.mobile {
		display: none;
	}
	.logo-wrapper.desktop {
		display: block;
	}
	figure figcaption {
		font-size: 0.7rem;
	}
	button,
	nav:not(.h-links) a {
		border-radius: 0px;
	}
	header .navigation-wrapper nav ul.menu {
		display: flex;
	}
	header .navigation-wrapper .mobile-menu-button {
		display: none;
	}
	footer .contacts .contacts-wrapper {
		flex-direction: row;
		align-items: flex-start;
		gap: 90px;
	}
	footer .contacts .contacts-wrapper address {
		width: 60%;
	}
	footer .contacts .contacts-wrapper address > :not(:first-child) {
		margin-left: 30px;
	}
	footer .contacts .contacts-wrapper address > :is(span, a) {
		font-size: 1.2rem;
	}
	footer .contacts .contacts-wrapper address > span:first-child {
		font-size: 1.3rem;
	}
	footer .logos {
		flex-direction: row;
		align-items: stretch;
	}
	footer .logos .logo-group {
		align-items: flex-start;
	}
	footer .logos .logo-group .group-title {
		font-size: 1rem;
	}
	footer .logos .logo-group .logo-sequence img {
		max-width: 100px;
		max-height: 100px;
	}
	footer .logos .logo-group.soir .logo-sequence svg {
		width: 80px;
		height: 100px;
	}
	footer .cookie-consent form .actions {
		flex-direction: row;
	}
	.home .hero {
		background-size: 100% 80%;
		background-position: center 22%;
		background-image: url('assets/images/page-elements/dark-swoop-xy-rotation.svg');
	}
	.home .hero .soir {
		top: 33px;
	}
	.home .intro nav ul.hero-navigation li {
		width: calc(30% - 10px);
	}
	.page .description .content > * {
		font-size: 1.5rem;
	}
}

@media only screen and (min-width: 1280px) {
	:root {
		--content-width: 1100px;
	}
}

@media only screen and (min-width: 1440px) {
	:root {
		--content-width: 1200px;
	}
}

@media only screen and (min-width: 1920px) {
	:root {
		--content-width: 1400px;
	}
}

@media only screen and (min-width: 2560px) {
	:root {
		--content-width: 2000px;
	}
}

@media only screen and (min-width: 3840px) {
	:root {
		--content-width: 3500px;
	}
}