/* Gavalas Ioannidou – custom styles on top of the Gavion theme */

/* Typeface: Open Sans Condensed everywhere (same look in English and Greek). */
body {
	font-family: "Open Sans", sans-serif;
	font-stretch: 75%;
}

/* Splash: full-screen photo with a greeting, first home visit per session. */
.splash {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background-color: #fff;
	cursor: pointer;
	transition: opacity 0.8s ease, visibility 0.8s;
}

.splash.is-leaving {
	opacity: 0;
	visibility: hidden;
}

.gic-splash-seen .splash {
	display: none;
}

.splash-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.splash-text {
	position: absolute;
	top: clamp(80px, 14vh, 160px);
	left: clamp(20px, 6vw, 90px);
	margin: 0;
	font-size: clamp(44px, 9vw, 130px);
	font-weight: 600;
	line-height: 1;
	color: #fff;
}

/* Logo at three quarters of the theme's size (theme: 200px + 50px left
   padding; 120px on phones). */
.header-logo-fig {
	width: 200px;
}

@media only screen and (max-width: 43.75em) {
	.header-logo-fig {
		width: 90px;
	}
}

/* Lower header to match the smaller logo (theme: 300 / 200 / 120px). The
   pages start below it through the same variable. */
:root {
	--header-height: 200px;
}

@media only screen and (max-width: 56.25em) {
	:root {
		--header-height: 150px;
	}
}

@media only screen and (max-width: 43.75em) {
	:root {
		--header-height: 100px;
	}
}

.splash-lang {
	color: inherit;
	text-decoration: none;
}

.splash-lang:hover,
.splash-lang:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 0.05em;
	text-underline-offset: 0.12em;
}

/* Header: logo and menu button only, on every screen size. The menu opens
   as a white full-screen panel with its links aligned right, under the button. */
.header-logo-link,
.header .header-btn {
	position: relative;
	z-index: 20;
}

.header .header-btn {
	display: block;
}

.header .header-nav-overlay {
	display: none;
}

.header .header-nav,
.ready .header .header-nav {
	position: fixed;
	inset: 0;
	z-index: 15;
	width: auto;
	transform: none;
	background-color: #fff;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap: clamp(40px, 6vw, 100px);
	padding: var(--gic-menu-top, 150px) var(--gic-menu-right, 30px) 60px 30px;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
	transition-delay: 0s;
}

.header .header-nav.show {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.header .header-nav-menu,
.header-cats {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-cats {
	text-transform: none;
}

.header-cats a,
.header .header-nav-menu a {
	color: inherit;
	text-decoration: none;
}

/* Language switcher, last item of the menu. */
.header .header-nav-menu .gic-langs {
	display: flex;
	gap: 0.6em;
	margin-top: 1em;
}

.header .header-nav-menu .gic-langs::after {
	display: none;
}

.gic-langs a {
	opacity: 0.4;
	transition: opacity 0.2s;
}

.gic-langs a:hover,
.gic-langs a.is-current {
	opacity: 1;
}

/* While the menu is open the theme fixes the body in place (body.fxd) but
   leaves its width to shrink to the content, which slid the header left on
   wide screens. Keep it full width so logo and button stay where they are. */
body.fxd {
	left: 0;
	right: 0;
	width: 100%;
}

/* While the menu is open the theme fixes the body in place; keep it below
   the WordPress admin bar (logged-in users only) so the header doesn't jump. */
.admin-bar.fxd {
	margin-top: 32px;
}

@media (max-width: 782px) {
	.admin-bar.fxd {
		margin-top: 46px;
	}
}

@media (max-width: 600px) {
	.header .header-nav,
	.ready .header .header-nav {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-end;
		gap: 40px;
	}

	.header .header-nav-menu,
	.header-cats {
		align-items: flex-end;
	}
}

/* Project page (the theme's layout: info on the left, photos on the right).
   Facts laid out like an invisible table: labels in the left column,
   values lined up in the right one. */
.proj-facts {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 8px 24px;
	align-items: baseline;
	margin: 0 0 30px;
}

.proj-fact {
	display: contents;
}

.proj-fact dt {
	font-weight: 600;
	white-space: nowrap;
}

.proj-fact dt::after {
	content: ":";
}

.proj-fact dd {
	margin: 0;
}

/* Photos one under the other (portrait pairs side by side). Our own row class,
   so the theme doesn't attach its full-screen viewer to them. */
.sport-gal .gic-row {
	margin-bottom: 30px;
}

.sport-gal .gic-row.double {
	display: flex;
	gap: var(--gap);
}

.sport-gal .sport-fig {
	cursor: auto;
}

/* Previous / next project at the two ends (no "all projects" link between). */
.sport .sport-nav {
	grid-template-columns: 1fr 1fr;
}

/* About: past members aligned left, with the text above them. */
.ab-past .ab-past-title,
.ab-past .ab-past-list {
	text-align: left;
}

.ab-past .ab-past-list {
	margin-left: 0;
}

/* Portfolio grid: images keep their own proportions, centred in equal cells,
   with plenty of white around them. On the home page it starts under the
   header, like on the portfolio page. */
.home .site-main {
	margin-top: var(--header-height);
}

.port .port-cont,
.home .port .port-cont {
	padding-top: clamp(20px, 4vw, 60px);
}

.port-list {
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: clamp(20px, 3vw, 60px);
	grid-row-gap: clamp(30px, 4vw, 70px);
	align-items: center;
}

.port-item-fig {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.port-item-fig img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.port-item-title {
	font-size: inherit; /* the theme sets 1rem = 10px */
	line-height: 1.3;
	text-transform: none;
}

.port-item.is-hidden {
	display: none;
}

/* When filtered, the theme's scroll-reveal may be waiting on a hidden item:
   show the remaining items straight away. */
.port-list.is-filtered .port-item {
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
}

@media (max-width: 1280px) {
	.port-list {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 1024px) {
	.port-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.port-list {
		grid-template-columns: repeat(2, 1fr);
	}
}