/*
 * common.css > basic shared rules: design tokens, reset, nav, footer,
 * loading screen and the SPA page transition classes.
 * Monochrome look: black / white / grey, Open Sans.
 */

:root{
	--black:#111;
	--accent:#a93830;
	--ink:#333;
	--grey:#888;
	--light_grey: #a7a7a7;
	--top-bg: #b5706d;
	--line:#e5e5e5;
	--white:#fff;
	--nav_h:64px;
	--ease:cubic-bezier(.25,.1,.25,1);
}

*,*::before,*::after{
	box-sizing:border-box;
	margin:0;
	padding:0;
}

html{
	-webkit-text-size-adjust:100%;
	height: 100%;
}

body{
	--max-width: 1440px;
	--pin-h: 62px;
	--pin-w: 36px;
	font-family:"Open Sans",Helvetica,Arial,sans-serif;
	font-weight: 400;
	color:var(--ink);
	background:var(--white);
	height: 100%;
	min-height: 100%;
	display:flex;
	flex-direction:column;
	/* clears the fixed nav for whatever comes first (hero, bar or main) */
	padding-top:var(--nav_h);
}

img{
	max-width:100%;
}

a{
	color:inherit;
	text-decoration:none;
}

ul{
	list-style:none;
}

h1{
	font-weight:300;
	letter-spacing:.14em;
	text-transform:uppercase;
}


/* ------------------------------------------------------- loading screen -- */

#loading_screen{
	position:fixed;
	inset:0;
	z-index:1000;
	background:var(--white);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:24px;
	opacity:1;
	visibility:visible;
	transition:opacity .45s var(--ease),visibility 0s linear .45s;
}

#loading_screen img{
	width:84px;
	animation:logo_pulse 1.4s ease-in-out infinite;
}

/* Once the app is ready, app.js adds .done and the screen fades away. */
#loading_screen.done{
	opacity:0;
	visibility:hidden;
}

#no_connection{
	font-size:13px;
	letter-spacing:.2em;
	text-transform:uppercase;
	color:var(--grey);
	opacity:0;
	transition:opacity .3s var(--ease);
}

/* Shown when the boot connection check fails. */
#loading_screen.offline #no_connection{
	opacity:1;
}

#loading_screen.offline img{
	animation:none;
	opacity:.25;
}

@keyframes logo_pulse{
	0%,100%{opacity:1;transform:scale(1);}
	50%{opacity:.35;transform:scale(.94);}
}


/* ------------------------------------------------------------------ nav -- */

/* The stripe is always black and full width; its content (logo + menu) is
   capped to the same centered 1440px area as the page content. */
#top_nav{
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:900;
	height:var(--nav_h);
	background:var(--black);
}

#nav_inner{
	position:relative;
	max-width: var(--max-width);
	height:100%;
	margin:0 auto;
	display:flex;
	align-items:center;
	padding:0 28px;
}

#nav_logo{
	position:absolute;
	left:28px;
	top:50%;
	transform:translateY(-50%);
	z-index:1;
}

#nav_logo img{
	height:38px;
	display:block;
}

/* The three buttons spread evenly: same space between them and the borders
   of the centered area, vertically centered in the stripe. */
#nav_menu{
	position:relative;
	flex:1;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:space-evenly;
}

/* The colored box that slides behind the selected menu button.
   app.js sets its left/width (wider than the text); CSS animates the rest:
   it slides between buttons, and slides + fades away when deselected. */
#nav_box{
	position:absolute;
	top:50%;
	height:36px;
	height: 100%;
	background:var(--accent);
	opacity:0;
	visibility:hidden;
	transform:translateY(-50%) translateX(28px);
	transition:
		left .35s var(--ease),
		width .35s var(--ease),
		opacity .35s var(--ease),
		transform .35s var(--ease),
		visibility 0s linear .35s;
}

#nav_box.on{
	opacity:1;
	visibility:visible;
	transform:translateY(-50%) translateX(0);
	transition:
		left .35s var(--ease),
		width .35s var(--ease),
		opacity .35s var(--ease),
		transform .35s var(--ease);
}

#nav_menu a{
	font-size:13px;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--white);
	position:relative;
	z-index:1;
	padding:6px 0;
	transition:color .35s var(--ease);
}

/* Underline slide-in on hover. */
#nav_menu a::after{
	/* content:""; */
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	background:currentColor;
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .3s var(--ease);
}

#nav_menu a:hover::after{
	transform:scaleX(1);
}

/* Mobile burger (CSS lines, morphs into an X). */
#nav_burger{
	display:none;
	width:30px;
	height:22px;
	position:relative;
	cursor:pointer;
	z-index:920;
}

#nav_burger span{
	position:absolute;
	left:0;
	width:100%;
	height:2px;
	background:var(--white);
	transition:transform .3s var(--ease),opacity .3s var(--ease);
}

#nav_burger span:nth-child(1){top:0;}
#nav_burger span:nth-child(2){top:10px;}
#nav_burger span:nth-child(3){top:20px;}

body.menu_open #nav_burger span:nth-child(1){transform:translateY(10px) rotate(45deg);}
body.menu_open #nav_burger span:nth-child(2){opacity:0;}
body.menu_open #nav_burger span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}

@media (max-width:760px){
	#nav_burger{
		display:block;
		margin-left:auto;
	}
	#nav_menu{
		position:fixed;
		inset:0;
		z-index:910;
		background:var(--black);
		flex-direction:column;
		align-items:center;
		justify-content:center;
		gap:42px;
		opacity:0;
		visibility:hidden;
		transition:opacity .35s var(--ease),visibility 0s linear .35s;
	}
	body.menu_open #nav_menu{
		opacity:1;
		visibility:visible;
		transition:opacity .35s var(--ease);
	}
	#nav_menu a{
		color:var(--white) !important;
		font-size:17px;
	}
	/* No sliding box in the fullscreen mobile menu. */
	#nav_box{
		display:none;
	}
}


/* ----------------------------------------------------------------- main -- */

/*
 * Two content sections share the page in a fixed order (#main_top above the
 * city bar, #main_bottom below it). Only one holds the page content: the one
 * carrying the data-page attribute behaves like the classic main; the other
 * is empty and collapsed to height 0.
 */
#main_top,#main_bottom{
	width:100%;
	opacity:1;
	transform:translateY(0);
	transition: all .28s var(--ease);
}

main[data-page]{
	flex:1;
	background:#e6e6e6;
}

main:not([data-page]){
	flex:none;
	/* height:0; */
	overflow:hidden;
}

/* SPA transition: app.js hides the old page, swaps the HTML, shows the new one. */
#main_top.pg_hide,#main_bottom.pg_hide{
	opacity:0;
	transform:translateY(14px);
}



/* ------------------------------------------------- city hero + pins bar -- */

/*
 * #city_hero sits right below the nav and #city_bar between #main_top and
 * #main_bottom — the order never changes. On plain pages the hero is hidden
 * and the bar reads as the footer (the empty #main_bottom is 0 high); when a
 * city or a profile is selected the content fills #main_bottom instead, so
 * the bar slides up right below the hero (chrome_in) with the content beneath.
 */

#city_hero{
	position: relative;
	display:none;
	align-items:center;
	justify-content:center;
	height:clamp(90px,10vw,150px);
	background-color: var(--top-bg);
	/*
	background-color: var(--top-bg);
	background-image:var(--hero_bg);
	background-size:cover;
	background-position:center;
	*/
	overflow: hidden;
}
/* One <picture> panel per city, stacked; every panel waits below the band
   and the current one (.on) sits in place. Switching city releases the new
   panel (.on.above) to slide up over the old one — a pure transform
   transition on an already-loaded <img>. */
#city_hero .bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display:block;
	z-index:0;
	transform:translateY(100%);
	transition:transform .55s var(--ease);
}

#city_hero .bg img{
	position: relative;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

#city_hero .bg.on{
	transform:translateY(0);
	z-index:1;
}

/* The incoming panel rides over the still-visible previous one. */
#city_hero .bg.above{
	z-index:2;
}

/* The wordmark, above every panel. */
#city_hero > img{
	position: relative;
	z-index:3;
	height:clamp(15px,2.1vw,28px);
	width:auto;
	max-width: 90%;
}

body.page_models #city_hero,
body.page_profile #city_hero{
	display:flex;
	animation:chrome_in .55s var(--ease);
}


#city_bar{
	display: block;
	width: 100%;
	position:relative;
	padding:0 16px 16px;
	background: #fff;
	overflow: visible;
	z-index: 2;
}
#city_bar .bg {
	position:absolute;
	bottom: 0;
	width: 100%;
	height: 83%;
	background: #fff;
}
#city_bar .inner {
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
}

/* Back button inside the cities bar: only on the profile page (page-name),
   calls history.back() via app.js. */
/* Back from a profile: fixed in the bottom left corner of the viewport,
   over the content; app.js calls history.back(). */
#prfl_back{
	display:none;
	position:fixed;
	left:0;
	bottom:0;
	width: 20vw;
	max-width: 100px;
	aspect-ratio: 9/10;
	z-index:850;
	align-items:center;
	justify-content:center;
	background:rgba(169,56,48,.45);
	color:var(--white);
	font-size:56px;
	font-weight:300;
	cursor:pointer;
	transition:background-color .3s var(--ease);
}

body[page-name='profile'] #prfl_back{
	display:flex;
}

#prfl_back:hover{
	background:var(--accent);
}

/* The thin tinted band the pins hang from. */
#city_bar::before{
	/* content:""; */
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:15px;
	background:var(--accent);
	opacity:.75;
}

body.page_models #city_bar,
body.page_profile #city_bar{
	animation:chrome_in .55s var(--ease);
}

body.page_models #city_bar{
	padding-bottom: 0;
}

@keyframes chrome_in{
	from{opacity:0;transform:translateY(26px);}
	to{opacity:1;transform:translateY(0);}
}

.city_cell{
	position:relative;
	top: -18px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:11px;
	padding:0 30px;
}

/* Hover veil sliding down behind the pin. */
.city_cell::before{
	content:"";
	position:absolute;
	top:0;
	left: calc(50% - var(--pin-w) * 0.5);
	width: var(--pin-w);
	height: var(--pin-h);
	background: var(--white);
	-webkit-mask: url(/img/pointer-black-out.png) center / contain no-repeat;
	mask: url(/img/pointer-black-out.png) center / contain no-repeat;
	transform: scale(0.9);
	transition: all .2s var(--ease);
	/* opacity: 0; */
	transform-origin:50% 30%;
}

.city_cell:hover::before,
.city_cell.active::before{
	transform: scale(1.2);
	opacity: 1;
}

/* The pin is the provided pointer png used as a mask, so it can take any
   color (black; accent when its city is the selected one). */
.city_pin{
	position:relative;
	width: var(--pin-w);
	height: var(--pin-h);
	background:var(--black);
	-webkit-mask:url("/img/pointer-black.png") center/contain no-repeat;
	mask:url("/img/pointer-black.png") center/contain no-repeat;
	transition:background-color .3s var(--ease);
}

.city_lbl{
	position:relative;
	font-size: 12px;
	letter-spacing:.22em;
	text-transform:uppercase;
	color:var(--ink);
	transition:color .3s var(--ease);
}

.city_cell.active .city_pin{
	background:var(--accent);
}

.city_cell.active .city_lbl{
	color:var(--accent);
}

/* No profiles in this city for the current division: gray, not clickable. */
.city_cell.disabled{
	pointer-events:none;
	cursor:default;
}

.city_cell.disabled .city_pin{
	background:var(--light_grey);
}

.city_cell.disabled .city_lbl{
	color:var(--light_grey);
}

@media (max-width:760px){
	body{
		--pin-w: 26px;
        --pin-h: 44px;
	}
	#city_bar .inner{
		flex-wrap:wrap;
		justify-content:center;
		gap: 0px;
	}
	.city_cell{
		padding: 0 0;
		width: 18vw;
	}
	.city_pin{
		/* width:26px; */
		/* height:44px; */
	}
	.city_lbl {
		font-size: 9px;
		letter-spacing: .15em;
	}
	#city_bar {
	padding: 0;
	}
	#prfl_back{
		font-size:46px;
	}
}


/* --------------------------------------------------------------- footer -- */

#page_footer{
	background:var(--black);
	text-align:center;
	padding:14px 20px;
	opacity: 0;
	cursor: default;
}

#footer_note{
	font-size:11px;
	letter-spacing:.14em;
	color:var(--grey);
}

/* The home page is a full-viewport hero: no footer, no hero band. The city
   pins bar stays at the bottom, tinted and with white labels over the collage. */
body.page_index #page_footer,
body.page_index #city_hero{
	display:none;
}
/*
body:is(
	.page_index,
	.page_contacts,
	.page_join,
	.page_about
) #city_bar{
	background: var(--top-bg);
}
*/
body.page_index #city_bar{
	/* background: var(--top-bg); */
}

body.page_index #city_bar .bg{
	background:rgba(169,56,48,.6);
}

body.page_index .city_lbl{
	/* color:var(--white); */
}