/*
Theme Name: Psephos
Author: Benjamin Kruse
Author URI: https://benjamninkruse.com/
Description: Custom Theme for Americans for Citizen Voting
Version: 1.0
Text Domain: psephos
*/

/* RESET */
@import 'reset.css?nocache';



/* RESPONSIVE STYLESHEETS */

@import 'width-320.css?nocache' (max-width: 479px);
@import 'width-480.css?nocache' (min-width: 480px) and (max-width: 739px);
@import 'width-740.css?nocache' (min-width: 740px) and (max-width: 979px);
@import 'width-980.css?nocache' (min-width: 980px) and (max-width: 1299px);
@import 'width-1300.css?nocache' (min-width: 1300px);



/* FONTS */
@font-face { font-family: Archivo; src: url('./assets/fonts/Archivo-Regular.ttf'); font-weight: 400; font-style: normal; }
@font-face { font-family: Archivo; src: url('./assets/fonts/Archivo-Italic.ttf'); font-weight: 400; font-style: italic; }
@font-face { font-family: Archivo; src: url('./assets/fonts/Archivo-Bold.ttf'); font-weight: 700; font-style: normal; }
@font-face { font-family: Archivo; src: url('./assets/fonts/Archivo-BoldItalic.ttf'); font-weight: 700; font-style: italic; }
@font-face { font-family: Archivo; src: url('./assets/fonts/Archivo-Black.ttf'); font-weight: 900; font-style: normal; }
@font-face { font-family: Archivo; src: url('./assets/fonts/Archivo-BlackItalic.ttf'); font-weight: 900; font-style: italic; }

@font-face { font-family: Bitter; src: url('./assets/fonts/Bitter-Regular.ttf'); font-weight: 400; font-style: normal; }
@font-face { font-family: Bitter; src: url('./assets/fonts/Bitter-Italic.ttf'); font-weight: 400; font-style: italic; }
@font-face { font-family: Bitter; src: url('./assets/fonts/Bitter-Bold.ttf'); font-weight: 700; font-style: normal; }
@font-face { font-family: Bitter; src: url('./assets/fonts/Bitter-BoldItalic.ttf'); font-weight: 700; font-style: italic; }
@font-face { font-family: Bitter; src: url('./assets/fonts/Bitter-Black.ttf'); font-weight: 900; font-style: normal; }
@font-face { font-family: Bitter; src: url('./assets/fonts/Bitter-BlackItalic.ttf'); font-weight: 900; font-style: italic; }


/* GLOBAL */
* {
	box-sizing: border-box;
	background-repeat: no-repeat;
}

html {
	background-color: rgba(13,26,79,1.0);
	font-family: Archivo; font-size: 16px;
}

strong { font-weight: 700; }
em { font-style: italic; }

hr { border: 5px solid rgba(153,204,255,0.5); margin: 2em 0 1.5em; }

.inner { width: auto; background-color: rgba(255,255,255,0.95); }
.clearfix { clear: both; }


/* HEADER */

body>header .inner { display: block; position: relative; height: 120px; }

#header-logo {
	width: 160px; height: 120px;
	position: absolute; top: 0px; right: 20px;
}
h1#sitename {
	display: block; width: 450px; height: 120px;
	position: absolute; top: 15px; left: 20px;
	background-image: url('./assets/images/acv-logotype-wide.svg');
	font-size: 0; overflow: hidden; 
}
p#sitetagline {
	display: block; width: 270px; height: 30px;
	position: absolute; bottom: 20px; left: 20px;
	background-image: url('./assets/images/acv-url-wide.svg');
	font-size: 0; overflow: hidden; 
}




/* HERO: CALL TO ACTION */

#hero .inner {
	position: relative;
	background-image: url('./assets/images/ballot.jpg');
	background-position: right center;
	background-size: 100%;
}

body.home #action {
	position: absolute; top: 20px; left: 20px; bottom: 20px; right: 50%;
	background: rgba(255,255,255,0.8); border: 20px solid rgba(255,255,255,0.6);
	padding: 20px; 
} 

body.home #action h1 {
	font-family: Bitter; font-size: 250%; font-weight: 700; color: rgb(17,35,105,1.0);
}
	#action h1 em { color: rgba(206,20,50,1.0); }

body.home #action a.button {
	position: absolute; left: 20px; bottom: 20px;
	background-color: rgb(17,35,105,1.0); padding: 16px 48px 15px 16px; border-radius: 16px;
	color: white; font-size: 160%; font-weight: 700; text-decoration: none; text-transform: uppercase;
	background-image: url('./assets/images/white-arrow.svg');
	background-position: right center;
}

body.home #action a.button:hover {
	background-color: rgba(206,20,50,1.0);
}

/* PAGE */

body>main .inner { position: relative; }

body>main header {
	background: rgba(182,212,242,1.0);
	background: linear-gradient(0deg, rgba(153,204,255,0.6) 0%, rgba(153,204,255,0.3) 100%) ;
	padding: 40px 20px 20px; position: relative; min-height: 120px;
}
	body>main header h2 {
		position: absolute; left: 20px; bottom: 12px;
		font-size: 300%; font-weight: 900; color: rgb(17,35,105,1.0); text-shadow: 0 0 10px white;
	}



body>main article { padding: 20px 0 40px; margin: 0 20px; position: relative; }
body>main aside { padding: 20px 0 40px; margin: 0 20px; }

	article p, aside p { margin-bottom: 1.5em; line-height: 1.5em; }
	article h1, article h2, article h3, article h4, article h5, article h6,
	aside h1, aside h2, aside h3, aside h4, aside h5, aside h6 {
		font-weight: 700; color: rgb(17,35,105,1.0); line-height: 1.1em;
	}

	article ul, aside ul { list-style: inside; }
	article li, aside li { line-height: 1.5em; }

	article h1, aside h1 { font-size: 240%; margin-bottom: 0.4em; }
	article h2, aside h2 { font-size: 200%; margin-bottom: 0.4em; }
	article h3, aside h3 { font-size: 150%; margin-bottom: 0.4em; }
	article h4, aside h4 { font-size: 125%; margin-bottom: 1.0em; }
	article h5, aside h5 { font-size: 110%; margin-bottom: 1.25em; }
	article h6, aside h6 { font-size: 100%; margin-bottom: 1.5em; }

	article ul, article ol, article table, article iframe, article object, article figure, article .fluid-width-video-wrapper { margin-bottom: 1.5em; }

	article table { border-top: 1px solid grey; }
	article th, article td { border-bottom: 1px solid grey; padding: 0.25em; }














/* FOOTER */


body>footer .inner { background-color: rgba(153,204,255,1.0); padding: 20px 0 80px; }
	body>footer p { color: rgb(17,35,105,1.0); }
		#footer_legal { text-align: center; }












/* STATE FLAGS */

.stateflag { display: none; }

aside#statelist { display: none; }
	body.flag aside#statelist { display: block; }
		ul.states { list-style: none; }

body.flag>main header h2 { right: 160px; }

body.flag .stateflag {
	display: block; position: absolute; right: 20px; bottom: 20px; width: 120px; height: 80px;
}

.stateflag img {
	display: block; width: 120px; height: 80px;
}

body.alabama        .stateflag img { content: url('./assets/flags/alabama.svg'); }
body.alaska         .stateflag img { content: url('./assets/flags/alaska.svg'); }
body.arizona        .stateflag img { content: url('./assets/flags/arizona.svg'); }
body.arkansas       .stateflag img { content: url('./assets/flags/arkansas.svg'); }
body.california     .stateflag img { content: url('./assets/flags/california.svg'); }
body.colorado       .stateflag img { content: url('./assets/flags/colorado.svg'); }
body.connecticut    .stateflag img { content: url('./assets/flags/connecticut.svg'); }
body.delaware       .stateflag img { content: url('./assets/flags/delaware.svg'); }
body.florida        .stateflag img { content: url('./assets/flags/florida.svg'); }
body.georgia        .stateflag img { content: url('./assets/flags/georgia.svg'); }
body.hawaii         .stateflag img { content: url('./assets/flags/hawaii.svg'); }
body.idaho          .stateflag img { content: url('./assets/flags/idaho.svg'); }
body.illinois       .stateflag img { content: url('./assets/flags/illinois.svg'); }
body.indiana        .stateflag img { content: url('./assets/flags/indiana.svg'); }
body.iowa           .stateflag img { content: url('./assets/flags/iowa.svg'); }
body.kansas         .stateflag img { content: url('./assets/flags/kansas.svg'); }
body.kentucky       .stateflag img { content: url('./assets/flags/kentucky.svg'); }
body.louisiana      .stateflag img { content: url('./assets/flags/louisiana.svg'); }
body.maine          .stateflag img { content: url('./assets/flags/maine.svg'); }
body.maryland       .stateflag img { content: url('./assets/flags/maryland.svg'); }
body.massachusetts  .stateflag img { content: url('./assets/flags/massachusetts.svg'); }
body.michigan       .stateflag img { content: url('./assets/flags/michigan.svg'); }
body.minnesota      .stateflag img { content: url('./assets/flags/minnesota.svg'); }
body.mississippi    .stateflag img { content: url('./assets/flags/mississippi.svg'); }
body.missouri       .stateflag img { content: url('./assets/flags/missouri.svg'); }
body.montana        .stateflag img { content: url('./assets/flags/montana.svg'); }
body.nebraska       .stateflag img { content: url('./assets/flags/nebraska.svg'); }
body.nevada         .stateflag img { content: url('./assets/flags/nevada.svg'); }
body.new-hampshire  .stateflag img { content: url('./assets/flags/new-hampshire.svg'); }
body.new-jersey     .stateflag img { content: url('./assets/flags/new-jersey.svg'); }
body.new-mexico     .stateflag img { content: url('./assets/flags/new-mexico.svg'); }
body.new-york       .stateflag img { content: url('./assets/flags/new-york.svg'); }
body.north-carolina .stateflag img { content: url('./assets/flags/north-carolina.svg'); }
body.north-dakota   .stateflag img { content: url('./assets/flags/north-dakota.svg'); }
body.ohio           .stateflag img { content: url('./assets/flags/ohio.svg'); }
body.oklahoma       .stateflag img { content: url('./assets/flags/oklahoma.svg'); }
body.oregon         .stateflag img { content: url('./assets/flags/oregon.svg'); }
body.pennsylvania   .stateflag img { content: url('./assets/flags/pennsylvania.svg'); }
body.rhode-island   .stateflag img { content: url('./assets/flags/rhode-island.svg'); }
body.south-carolina .stateflag img { content: url('./assets/flags/south-carolina.svg'); }
body.south-dakota   .stateflag img { content: url('./assets/flags/south-dakota.svg'); }
body.tennessee      .stateflag img { content: url('./assets/flags/tennessee.svg'); }
body.texas          .stateflag img { content: url('./assets/flags/texas.svg'); }
body.utah           .stateflag img { content: url('./assets/flags/utah.svg'); }
body.vermont        .stateflag img { content: url('./assets/flags/vermont.svg'); }
body.virginia       .stateflag img { content: url('./assets/flags/virginia.svg'); }
body.washington     .stateflag img { content: url('./assets/flags/washington.svg'); }
body.washington-dc  .stateflag img { content: url('./assets/flags/washington-dc.svg'); }
body.west-virginia  .stateflag img { content: url('./assets/flags/west-virginia.svg'); }
body.wisconsin      .stateflag img { content: url('./assets/flags/wisconsin.svg'); }
body.wyoming        .stateflag img { content: url('./assets/flags/wyoming.svg'); }


/* STATE CALL TO ACTION */

body.flag #action { position: relative; background-color:rgba(153,204,255,0.4); border: 5px solid rgba(153,204,255,1.0); padding: 20px 20px 25px; margin-bottom: 1.5em; }
body.flag #action h3 { margin-bottom: 20px; }
body.flag #action p { margin: 0; }
body.flag #action .button {
	display: inline-block;
	padding: 10px 50px 10px 16px; border-radius: 10px;
	color: white; font-size: 125%; font-weight: 700; text-decoration: none; text-transform: uppercase;
	background-color: rgba(13,26,79,1.0);
	background-image: url('./assets/images/white-arrow.svg');
	background-position: right center;
}




/* NEWS BLOG */

.posthead { padding-top: 5px; border-bottom: 2px solid rgba(153,204,255,1.0); margin-bottom: 20px; }
	.posthead h1 { margin-bottom: 20px; }
		.posthead h1 a { color: rgba(13,26,79,1.0); text-decoration: none; }
	.posthead h6 { margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.05em; }
		.posthead h6 span { background-color: rgba(206,20,50,1.0); padding: 6px 10px 4px; }
		.posthead h6 a { color: rgb(245,245,245); text-decoration: none; }
			.posthead h6 a:hover { color: rgb(255,204,0); text-decoration: none; }

.postfoot { border-top: 2px solid rgba(153,204,255,1.0); padding-top: 20px; }
	.postfoot p { margin-bottom: 10px; }

.cards { border-top: 2px solid rgba(153,204,255,1.0); padding-top: 20px; }
	.card { padding-bottom: 20px; border-bottom: 2px solid rgba(153,204,255,1.0); margin-bottom: 20px; }
		.card h3 { margin-bottom: 0; }
		.card p { margin-bottom: 0; }

section { margin-bottom: 2em; }
aside section h4 { margin-bottom: 0; }


#statenews { margin-top: 2em; border-top: 2px solid rgba(153,204,255,1.0); padding-top: 4em; }