/*****************************************************************************************
*
*															GENERAL CSS for "Wedding Registration"
*
*															media queries:	css/responsive.css
*															HTML forms:			css/forms.css
*															modals:					css/modal.css
*
******************************************************************************************/

@charset "UTF-8"; 

/*
*	All files which are being preloaded in index.php must be called with the exactly same URL
* in the preloader as they are noted here, otherwise caching in the browser doesn't work!
*/

/***************************************************************************
*	CSS Variables
*	See https://www.w3schools.com/cssref/css_functions.asp
******************************************************************************************/
html {
	
	--lightOrange:	hsla(42, 90%, 65%, 1);
	--darkOrange:		hsla(37, 85%, 57%, 1);
	
	--cardBrown:		hsla(38, 57%, 82%, 1);		/*	background of the card	*/
	--cardBorder:		hsla(38, 57%, 70%, 1);		/*	border of the card, just a bit darker */

	--brown:	 			hsla(38, 43%, 20%, 1);		/*	the "basic" brown (text)	*/
	--lighterBrown: hsla(38, 67%, 60%, 1);		/*	lighter variant */
	
	--red:					hsla( 3, 74%, 40%, 1);
	
	--darkGreen:		hsla(78, 43%, 35%, 1);
	--lightGreen:		hsla(67, 29%, 46%, 1);

	--boxBrown:			hsla(40, 60%, 85%, 0.5);

	--boxShadow: 		3px 3px 7px #48381d;
	--pageShadow: 	10px 10px 12px #48381d;
	
	/* --debugBorder: 1px dotted purple; */
	--debugBorder: none;

}

/*****************************************************************************************
*	Fonts
******************************************************************************************/
@font-face {
    font-family: 'Great Vibes';
    src: url('/fonts/gvr.ttf');
}

/*****************************************************************************************
*	Defaults
******************************************************************************************/
* {
	margin: 0; 
	padding: 0;
	border: none;
	outline: none;
	box-sizing: border-box;		/* total width of an element includes border and padding */

	font-family: Verdana, serif, cursive;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	-webkit-appearance: none;	/* make webkit based browsers not use their own styles (e.g. form buttons) */
	-moz-appearance: none; 		/* make mozilla based browsers not use their own styles (e.g. form buttons) */
	appearance: none;					/* standard and others */
}

body  {
	background-color: white;
	color: var(--brown);
	font-size: 80%;			/* set the basis for em font-sizing in IE */
	height: 100%;
}

/*****************************************************************************************
*	Layout
******************************************************************************************/
#theCard {
	position: relative;
	min-width: 320px;		/* assure a minimum width to prevent absurd text wrap in small viewports */
	max-width: 98%;			/* take a maximum of 98% screen width on mobiles (mobile-first) */
	margin: 2% auto;		/* horizontally centered */
	padding: 1%;
	
	border: 1px solid var(--cardBorder);
	
	-moz-box-shadow: var(--pageShadow);
	-webkit-box-shadow: var(--pageShadow);
	box-shadow: var(--pageShadow);
	
	/*	stacked backgrounds:
	*	flowers top-right and left-bottom
	*	canvas behind
	*	a background color similar to canvas if canvas fails
	*	Note: some Safari's don't correctly interpret the background shorthand with multiple images.
	*	That's why the properties are noted separately...
	*/
	background-color: 		var(--cardBrown);
	background-image: 		url("/images/flowers-tr.png"),
												url("/images/flowers-bl.png"),
												url("/images/canvas.jpg");
	background-repeat:		no-repeat,
												no-repeat,
												repeat;
	background-position:	right top,
												left bottom;
	background-size: 			30%,
												30%,
												auto; /* flowers should scale with viewport, canvas shouldn't */	
}


header {
	clear: left;				/*	clear the language selector float */
	max-width: 67%;			/*	should never run into top-right flower */
	margin-left: 10%;		/*	space on the left side */
	
	/*	When <header> is NOT displayed, <main>'s margin-top must apply
	*	in order to position <main> so it fits the top-right flower.
	*	However, when <header> IS displayed, <main> should have some space to <header>,
	*	but much less than its margin-top.
	*	By defining <header>'s margin-bottom as negative value of 
	*	<main>'s top-margin minus the desired space between <header>
	*	and <main> when <header> is displayed, the margin-top of <main>
	*	can "slip" under <header> if <header> is present. */
	margin-bottom: -13%;
	display: block;					/* none | block: block needed to clear langSelector properly */
	white-space: nowrap;		/* only break at <br> to ensure nice word wrap */
	
	border: var(--debugBorder);		/* add a debugging border */
}


main {
	max-width: 62%;							/* fit content between flowers horizontally */
	margin: 17% auto 17% auto;	/* fit content between flowers vertically */
	min-height: 10em;						/* left-bottom flower should never touch <header> or #langSelect */
	border: var(--debugBorder);	/* add a debugging border */
}


section, article {
	margin-bottom: 2.5em;
}


p {
	line-height: 1.45;
	margin-bottom: 0.8em;
	border: var(--debugBorder);
}

h1 {
	/*	Calculate <font-size> as reasonable mix of static enlargement and viewport width.
	*	The bigger the viewport-dependent part is, the more the font reacts to the viewport size.
	*	HMTL5 CSS units:	https://www.w3schools.com/cssref/css_units.asp
	*	CSS functions:		https://www.w3schools.com/cssref/css_functions.asp
	*/
	font-family: "Great Vibes", serif, cursive;
	font-size: calc(140% + 6vw);
	font-weight: semi-bold;
	line-height: 0.9;
	margin-bottom: 1.6em;
}

h2 {
	font-family: "Great Vibes", serif, cursive;
	font-size: calc(120% + 1.6vw);
	margin: 1.4em 0 0	 0;
}

h3 {
	font-family: "Great Vibes", serif, cursive;
	font-size: calc(110% + 0.8vw);
	margin: 0.3em 0 0.5em 0;	
}

em {
	color: var(--red);
}

sup, sub {
	font-family: inherit;
}

strong {
	font-weight: bolder;
}

i {
	font-style: italic;
}

ul.list, ol.list {
	list-style-position: outside;
	margin: 1em 2em;
}

ul.list li, ol.list li {
	margin: 1em 0;
}

div {
	border: var(--debugBorder);
}

span {
	font:	inherit;
}

main a:link {
	border-bottom: 1px dotted;
	color: inherit;
}

main a:hover {
	border-bottom: 1px solid;
}


.centered {
	text-align: center;
}




/*****************************************************************************************
*	Special Styles
******************************************************************************************/

.boxed {
	border: 1px solid var(--brown);
	padding: 1.5em 2.5em;
	border-radius: 2px;
	background-color: var(--boxBrown);
}

.shadow {
	box-shadow: var(--boxShadow);
}

a.pointer:link, a.pointer:visited {
	font-size: 8em;
	border-bottom: 0px;
	color: var(--brown);
	line-height: 0.5em;
}

a.pointer:hover, a.pointer:active {
	color: var(--red);
}


/* Language Selector */
ul#langSelect {
	
	/* use float instead of inline so that it can grow to the right with more languages */
	float: left;
	position: -webkit-sticky;
	position: sticky;
	top: 2em;

	font-size: 0.8em;
	list-style-type: none;
	background-color: var(--brown);
	border-radius: 5px;
	padding: 3px;
	
	margin-bottom: calc(1em + 3vw);	/* push down the following elements */
}

ul#langSelect li {
	display: inline;
}

ul#langSelect li a {
	padding: 0.3em;
	display: inline-block;
	color: var(--cardBrown);
	background-color: var(--brown);
	border-radius: 3px;
	text-transform: uppercase;
	font-weight: bold;
}

ul#langSelect li a.active, ul#langSelect li a.active:hover {
	background-color: var(--cardBrown);
	color: var(--brown);
}

ul#langSelect li a:hover {
	color: var(--lightOrange);
}

/*	Add margin-left to every <li> element which is placed DIRECTLY after a <li> element.
*	Effectively, that's every <li> except the last one. This way, we get equal distance 
*	between all <li> elements. ( https://www.w3schools.com/css/css_combinators.asp ).
*	Once you assign the same space as padding to the respective container, all <li>'s
*	have same space all around.
*/
ul#langSelect li+li {
	margin-left: 3px;	
}



/* company list */
ul#companyList {	
	list-style-type: none;
	margin-bottom: 1em;
}

ul#companyList li {
	margin: 7px;
	padding: 12px;
	
	font-weight: bold;
	
	background: var(--lightOrange);
	border: 2px solid var(--darkOrange);
	border-radius: 2px
}

ul#companyList li:after {
	clear: both;
	display: table;
	content: '';
}

ul#companyList li span.name {
	float: left;
	padding: 5px;
	margin-top: 3px;
	border: 1px solid transparent;
}

ul#companyList li span.buttons {
	float: right;
}