/*!
Theme Name: EaG Lausanne
Theme URI: eag-lausanne.ch
Author: Niels Wehrspann
Author URI: https://www.niels-wehrspann.cpm
Description: Thème pour le site Ensemble à Gauche Lausanne pour les élections communales 2021
Version: 1.0.0
Text Domain: eag-lausanne
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready */

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

html {box-sizing: border-box;font-size:0.5vw;-webkit-text-size-adjust: 100%;}

body {margin: 0; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s;}

main {display: block;}

hr {box-sizing: content-box;height: 0;overflow: visible;}
pre {font-family: monospace, monospace;font-size: 1em;}

a {background-color: transparent;}
abbr[title] {border-bottom: none;text-decoration: underline;text-decoration: underline dotted;}
b,strong {font-weight: bolder;}
code,kbd,samp {font-family: monospace, monospace;font-size: 1em;}
small {font-size: 80%;}
sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
img {border-style: none;}
button,input,optgroup,select,textarea {font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0;}
button,input {overflow: visible;}
button,select {text-transform: none;}
button,[type="button"],[type="reset"],[type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
fieldset {padding: 0.35em 0.75em 0.625em;}
legend {color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal;}
progress {vertical-align: baseline;}
textarea {overflow: auto;}
[type="checkbox"],[type="radio"] {padding: 0;}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield;outline-offset: -2px;}
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}
details {display: block;}
summary {display: list-item;}
template {display: none;}
[hidden] {display: none;}

@font-face {
	font-family: 'Monotalic';
	src: url('polices/Monotalic.woff2') format('woff2'), url('polices/Monotalic.woff') format('woff');
}

h1,h2,h3,h4,h5,h6 {clear: both;}

h1, h2 {font-size:13rem; font-family: 'Monotalic', monospace; line-height: 11rem; font-weight: normal; text-transform: uppercase; hyphens:manual; margin:0; padding:0;}
p, h3, ul {font-family: 'Vollkorn', serif; font-size:2.5rem; line-height: 3.25rem;}
p, li {margin: 0 0 1.5rem 0;}
dfn,cite,em,i {font-style: italic;}
ul {list-style-type: none; padding:0; margin:0;}
.revendications li {padding-left:6rem; text-indent: -6rem;}
.revendications li:before {content:"\2192\00a0\00a0\00a0\00a0\00a0\00a0";}


/* Header */
#masthead {display:flex; position: fixed; top:0; left:0; width:100vw; padding:1vh 1vw; z-index:100;}
#en-tete {width:25vw;}
#site-navigation {width:55vw;}
#primary-menu {display:flex; justify-content: space-between;}
#primary-menu li {width:auto;}
#site-navigation a, #site-navigation a:visited {text-decoration: none;}
li.current_page_item a {padding-bottom:5rem;}
nav li {padding-left:0; text-indent: 0;}
nav li:before {content:"";}
.page {margin: 0;}
.menu-toggle {display:none;}

/* Switch */
.switch {position: fixed; display: inline-block; width: 5vw; height: 3rem; right:1vw;}
.switch input { opacity: 0;width: 0;height: 0;}
.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(90deg, #222 0%, #ddd 100%);-webkit-transition: .4s;transition: .4s; border-radius: 1vw;}
.slider:before {position: absolute;content: "";height: 2rem;width: 2rem;right: .4vw;bottom: .5rem;background-color: red;-webkit-transition: .4s;transition: .4s;border-radius: 50%;}
input:checked + .slider:before {background-color: red;}
input:checked + .slider:before {-webkit-transform: translateX(-3.2vw);-ms-transform: translateX(-3.2vw);transform: translateX(-3.2vw);}

/* Accueil */
#primary {width:96vw; margin:25vh 0 10vh 1.5vw;}
.wrapper-s-r {margin-bottom:10vh;}
#intro div:first-child, .wrapper-s-r div:first-child {display: flex;}
#intro {margin-bottom:20vh;}
#intro p {font-size:3.5rem; line-height: 4.5rem;}
.slogans {width:50%; padding:0; margin:0; position:relative;}
.revendications {width:50%; padding-right:2vw;}
.slogans h2 > span {float:left; white-space: pre-wrap; transition: all 1s ease-out;}
.cache h2 > span {transform: rotateY(90deg) perspective(500em); }
.affiche h2 > span {transform: rotateY(0deg) perspective(0em); }
#logo-pop, #logo-solidarites, #logo-independantes {width:32%; fill:red;}
.logos {display: flex; justify-content: space-between; padding-right: 4vw;}

/* À propos */
#subpage h2 {font-size:5.5rem; line-height: 5rem; width:22%; float: left;}
#subpage p {width:50%; margin-left:25%; margin-bottom:5rem;}

#subpage h5, .wp-block-column>p {font-family: 'Monotalic', monospace; text-transform: uppercase; font-size: 3rem;}
#subpage .wp-block-column>p {width:auto; margin:0;}
#subpage h5 {width:25%; float:left; padding:0; margin: 15rem 0 5rem 0;}
#subpage>.wp-block-columns {width:75%; float:right; margin:15rem 0 5rem 0; padding:0;}
.wp-block-column a:after {content:"\00a0\2197";}
.wp-block-column a	{text-decoration: none; color:inherit;}


/* Candidat·e·s */
#titre-candidates {margin-bottom:8rem;}
#candidates {width:95vw; margin:20vh 0 10vh 2vw;}
#candidates-container {display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  grid-gap: 1vw; margin-top:2rem;}
.candidate figure {margin:0; padding:0;}
.candidate img {width:100%; height:auto;}
.candidate h2 {font-size:3rem; line-height: 3rem; margin:1rem 0 .25rem 0;}

/* Pied de page */
#liens-rs {border-top:0.5rem solid; width:96vw; margin:10rem 0 0 1.5vw; padding: 1rem 0; display: flex;}
#liens-rs p {margin-right:7rem; font-family: 'Monotalic', monospace; font-size:3rem; line-height: 3rem; text-transform: uppercase; padding:0;}
#liens-rs .wp-block-button {font-family: 'Monotalic', monospace; text-transform: uppercase;}
#liens-rs .wp-block-button__link {background-color: transparent; border:none; padding:0 4vw 0 0; font-size:3rem; line-height: 3rem; text-align: left;}
#liens-rs .wp-block-button a {transition: all 0.4s;}
#liens-rs .wp-block-button a::after {content:"\00a0\2197";}
#liens-rs .wp-block-button a:hover, #liens-rs .wp-block-button a:active {opacity:0.6;}

/* Bloc Municipalité */
.bloc-municipalite {width:100%; margin:10rem 0 0 0; padding: 5rem 1vw; text-transform: uppercase;}
.bloc-municipalite h3 {font-family: 'Monotalic', monospace; text-align: center; font-size:5rem; margin:0; color:red;}
#bloc-liste {display:flex; width:100%; justify-content: space-between;}
.bloc-liste {margin:0 2rem 0 0; min-width: 20%; transition: all 0.4s;}
.bloc-liste h4 {font-family: 'Monotalic', monospace; background-color:red; padding:1rem; font-size:1.5rem;}
.liste-candidates {display: flex; justify-content: space-between;}
.liste-candidates p {font-family: 'Monotalic', monospace; font-size:5rem; line-height: 4.5rem; margin:0; padding-right:1rem; min-width:10%; color:red;}
.liste-candidates p:first-of-type, .liste-candidates p:last-of-type {display:none;}
.bloc-liste:hover, .bloc-liste:active {cursor:pointer; opacity:0.6;}


/* Forms */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}


/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}


/* Accessibility */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	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;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

@media all and (orientation:portrait) and (max-width:600px) {
	html {font-size:0.99vw;}
}

@media all and (orientation:portrait) and (min-width:601px) {
	html {font-size:0.66vw;}
}

@media all and (orientation:portrait) {
	p, li, h3 {font-size:4rem; line-height: 5rem;}
	#intro div:first-child, .wrapper-s-r div:first-child {display: block;}
	.slogans, .revendications {width:100%;}
	#intro {margin-bottom:18rem;}
	#intro p {font-size:5rem; line-height: 6rem; margin-bottom:5rem;}
	.revendications {margin-top:5rem;}
	.revendications li:before {content:"\2192\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";}
	.revendications li {padding-left:11rem; text-indent: -11rem;}
	
	/* En-tête */
	#en-tete {width: 33vw;}
	#masthead {justify-content: space-between;}
	#site-navigation {width: 75%; padding-right: 2vw;}
	li.current_page_item a {padding-bottom:2.25rem;}
	
	/* Switch */
	.switch {display: inline-block; position:fixed; right:2vw; top: 5rem; transform: rotateZ(-90deg); width: 9rem; height: 5vw;  transform-origin: bottom right;}
	.switch input { opacity: 0;width: 0;height: 0;}
	.slider {position: absolute;top: 0;right: 0; border-radius: 5vw;}
	.slider:before {height: 4vw;width: 4vw;right: .5rem;}
	input:checked + .slider:before {background-color: red;}
	input:checked + .slider:before {-webkit-transform: translateX(-4rem);-ms-transform: translateX(-4rem);transform: translateX(-4rem);}
	
	/* À propos */
	#subpage h5, .wp-block-column p {}
	#subpage .wp-block-column {flex-basis:100% !important;}
	#subpage>.wp-block-columns p {font-size:3rem; line-height: 4rem;}
	#subpage h5 {width:40%;}
	#subpage>.wp-block-columns {width:59%;}
	.wp-block-column:not(:only-child) {padding:0 !important; margin-left:0 !important;}
	
	/* Candidates */
	#candidates {width:96vw;}
	#candidates h1 {font-size:10rem; line-height: 9rem;}
	.candidate {margin-top:5rem;}
	.candidate h2 {font-size:5.25rem; line-height: 5rem; margin: 3rem 0 2rem 0;}
	.candidate p {font-size:5rem; line-height: 6rem;}

	#liens-rs {padding-top:2rem;}
	#liens-rs p {margin-right:1%; width:40%;}
	.wp-block-buttons {width:59%;}
	.wp-block-buttons .wp-block-button {margin-bottom:2rem; padding-bottom:1rem; border-bottom:0.5rem solid; width:100%;}
	
	/* Bloc Municipalité */
.bloc-municipalite h3 {font-size:6rem; line-height: 6rem; margin-bottom:2rem;}
	.bloc-liste {margin:0;}
#bloc-liste {display:block;}
.bloc-liste h4 {font-size:1.75rem; margin:0;}
.liste-candidates {display: block;}
.liste-candidates p {font-size:6rem; line-height: 5rem; padding:2rem 0; border-bottom:0.5rem solid;}
}

@media all and (orientation:portrait) and (max-width:600px) {
	html {font-size:0.99vw;}
	
	/* À propos */
	#subpage h2, #subpage p {width:100%; clear:both; margin: 5rem 0;}
	
}