/* Copyright © 2019 Martin Tournoij <martin@arp242.net>
   This file is part of GoatCounter and published under the terms of the EUPL
   v1.2, which can be found in the LICENSE file or at http://eupl12.zgo.at */

.page, .center { max-width: 60em; }
hr             { margin: 1em 0; }
u              { text-decoration: none; box-shadow: inset 0 -.175em yellow, inset 0 -.2em #eee; }

.cbox { box-shadow: 0 0 4px #cdc8a4; background-color: #f6f3da; color: #252525; }

footer   { padding: 1em; text-align: center; display: flex; justify-content: space-between; }
footer a { font-weight: bold; color: #252525; margin: 0 .5em; }

@media (max-width: 54em) {
	footer      { text-align: left; justify-content: space-around; }
	footer a    { display: block; padding: .5em 0; }
	footer span { display: none; }
}

/* TODO: bit of a temporary solution to make sure all links are visible with the
 * "chat bubble" from intergram. I'd like to redesign that entire thing, but ...
 * right now also a lot of other stuff to do, so this will have to do. */
footer                   { display: block; }
footer > div:first-child { margin-bottom: 1em; }

.page { position: relative; }

/*** Home page ***/
.page-home          { padding: 0; box-shadow: none; background-color: transparent; }
.page-home h1       { margin-top: 2em; font-size: 2em; }
.page-home *:target { background-color: inherit; }
.page-home h2       { border-bottom: 0; text-align: center; font-size: 2rem; margin-top: 5rem; }

.hlink       { font-weight: bold; }
.hlink:hover { text-decoration: none; background-color: #fffded; color: #252525; }
.hlink img   { vertical-align: middle; margin: 0 5px; height: 1.1em; }

/*** Home top ***/
#home-top        { padding: 0 1em; }
#home-intro      { margin: 1em 0; text-align: center; font-size: 1.8em; line-height: 1.5em; }
#home-intro span { box-shadow: inset 0 -.175em yellow, inset 0 -.2em #eee; }

#home-demo   { text-align: center; margin: 2.5em 0; }
#home-demo a { padding: 1em 3em; }
#home-login  { text-align: center }

@media (min-width: 45rem) {
	#home-screens           { display: flex; justify-content: space-between; align-items: center; }
	#home-screens.two > div { width: 49%; }
	#home-screens.one > div { width: 100%; text-align: center; }
}
@media (max-width: 45rem) {
	#home-screens > div { margin-bottom: 1em; }
}
#home-screens img { box-shadow: 0 0 4px #cdc8a4; }

/*
.iframe { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
iframe  { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
*/
img.imgzoom-loading { cursor: wait !important; }
.imgzoom-large { cursor: pointer; box-shadow: 0 0 8px rgba(0, 0, 0, .3); transition: all .4s; }

/*** Home pricing ***/
#home-pricing        { display: flex; justify-content: space-between; text-align: center; align-items: flex-start; }
#home-pricing > div  { width: 30%; box-shadow: 0 0 4px #cdc8a4; background-color: #fff; }
#home-pricing h3     { margin: .5em 0; }
#home-pricing ul     { list-style: none; padding: 0; line-height: 2.5em; }
#home-signup         { text-align: center; margin-top: 2em; }
#home-signup a       { padding: 1em; display: block; width: 30%; margin: auto; }
#home-pricing-custom { text-align: center; margin-top: 1em; }

@media (max-width: 45rem) {
	#home-pricing > div        { width: 32.5%; }
	#home-pricing > div .empty { display: none; }
	#home-signup a             { width: 50%; }
}
@media (max-width: 40rem) {
	#home-pricing       { display: block; }
	#home-pricing > div { margin-bottom: 1em; width: auto; }
	#home-pricing ul    { line-height: 2em; }
	#home-pricing h3    { padding-top: .5em; }
}

/*** Home newsletter ***/
#home-newsletter        { padding: 2em 1em; text-align: center; background-color: #fff; box-shadow: 0 0 4px #cdc8a4; }
#nl-turing-test         { display: none; }
#home-newsletter p      { font-size: 14px; margin-bottom: 0; }
#home-newsletter input  { width: 13em; }
#home-newsletter button { display: inline; line-height: 1.5em; margin-left: .5em; }

/*** Home features ***/
#home-features div { display: flex; justify-content: space-between; }
#home-features p   { width: 49%; padding: .5em 1em; background-color: #fff; box-shadow: 0 0 4px #cdc8a4; }
#home-features div:first-child p { margin-top: 0; }
#home-features strong { box-shadow: inset 0 -.175em yellow, inset 0 -.2em #eee; }

@media (max-width: 45rem) {
	#home-features div { flex-wrap: wrap; }
	#home-features p   { width: 100%; margin-top: .5em; }
	#home-features div:first-child p { margin-top: .5em; }
}


/*** Signup page ******/
#signup-intro {
	text-align: center;
	font-size: 1em;
}
#signup-form {
	background-color: #f7f7f7;
	padding: 1em;
	box-shadow: 0 0 4px #cdc8a4;
}

#signup-form fieldset.two {
	margin: 0;
	padding: 0;
	border: none;
	margin-bottom: 1em;
}
/* Extra div needed because Chrome doesn't support flexbox on fieldsets :-/ */
#signup-form fieldset.two > div       { display: flex; justify-content: space-between; }
#signup-form fieldset.two > div > div { width: 50%; }

form.vertical .err  { color: red; display: block; }
form.vertical .help { font-size: 14px; margin-bottom: 1.2em; }

/*** Help page ***/
dt { font-weight: bold; margin-top: 1em; }

.flash {
	text-align: center;
	padding: 10px;
	border-radius: 2px;
	border: 2px solid #fff;
	margin-bottom: 1em;
}
.flash p   { max-width: none !important; }
.flash pre { text-align: left; margin: 0 auto; display: inline-block; }
.flash-i {
	background-color: #c9f0ff;
	border-color: #a1a1ff;
}
.flash-e {
	background-color: #fff0f0;
	border-color: #f00;
}