/*
Theme Name: ALL THAT ARCHITECTURE
Theme URI: http://example.com/
Author: Your Name
Author URI: http://example.com/
Description: A blank WordPress theme
Version: 1.0.2
License: GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blank-theme
Tags: blank, minimal, starter
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

div,
li {
	font-family: "Inter", sans-serif;
}

body {
	background-color: #FDFDFD;
}

body div.container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: "Inter", sans-serif;
}

body div.container main {
	flex: 1;
}

/* Header */
header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
}

header .menu[data-layout="desktop"] {
	display: none;
}

header .logo {
	width: 8.375rem;
}

header .menu[data-layout="mobile"] {
	background: none;
	border: none;
	height: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.27rem;
	margin: 0;
	padding: 0.36rem 0;
	position: relative;
}

header .menu[data-layout="mobile"] div {
	height: 0.0625rem;
	background: #363636;
}

header .menu[data-layout="mobile"] div:first-child,
header .menu[data-layout="mobile"] div.innerMenu {
	width: 1.5rem;
}

header .menu[data-layout="mobile"] div:last-child {
	width: 1rem;
}

header .menu[data-layout="mobile"] ul.innerMenu {
	position: absolute;
	top: 0.36rem;
	right: 0;
	background: #363636;
	list-style: none;
	width: 1.5rem;
	height: 0.0625rem;
	overflow: hidden;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	justify-content: center;
}

header .menu[data-layout="mobile"] ul.innerMenu li {
	height: 0;
}

header .menu[data-layout="mobile"] ul.innerMenu li a {
	color: white;
	text-decoration: none;
	white-space: nowrap;
	opacity: 0;
	padding-left: 0.5rem;
	pointer-events: none;
}

@media (width>=64rem) {
	header {
		padding: 2rem 3rem;
	}

	header .menu[data-layout="desktop"] {
		display: flex;
		list-style: none;
		gap: 3rem;
	}

	header ul li a {
		color: #363636;
		font-size: 1.5rem;
		font-style: normal;
		font-weight: 500;
		line-height: 120%;
		letter-spacing: -0.015rem;
		text-decoration: none;
	}

	header .menu[data-layout="mobile"] {
		display: none;
	}

	header .logo {
		height: 1.875rem;
		width: auto;
	}
}

/* Footer */
footer .contact-info {
	margin: 2rem 1rem;
	text-align: right;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

footer .contact-info span,
footer .contact-info span a {
	color: #6C6C6C;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: -0.0075rem;
	text-decoration: none;
}

footer .contact-info .spacer {
	display: none;
}

footer img,
footer video {
	height: 4.625rem;
	width: 100vw;
	object-fit: cover;
	display: block;
}

@media (width>=64rem) {
	footer .contact-info {
		margin: 2rem 3rem;
		flex-direction: row;
		justify-items: end;
		align-items: end;
		text-align: right;
		gap: 0.75rem;
	}

	footer .contact-info span,
	footer .contact-info span a {
		font-size: 1.25rem;
	}

	footer .contact-info .spacer {
		display: block;
		flex: 1;
	}
}

/* home: body */
main.home {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 1rem;
	gap: 2rem;
}

main.home .branding {
	display: flex;
	flex-direction: column;
	text-transform: uppercase;
	font-size: 2.5rem;
}

@media(width>=24rem) {
	main.home .branding {
		font-size: 3rem;
	}
}

main.home .branding .main {
	color: #363636;
	font-weight: 700;
	line-height: 94%;
	letter-spacing: -0.12rem;
}

main.home .branding .secondary {
	color: #5E5E5E;
	font-weight: 400;
	line-height: 94%;
	letter-spacing: -0.12rem;
}

main.home .explain {
	text-align: right;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;

	color: #6C6C6C;
	font-size: 0.4rem;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: -0.00625rem;
}

@media (width>=22rem) {
	main.home .explain {
		font-size: 0.5rem;
	}
}

main.home .explain .item {
	display: flex;
}

main.home .explain .item .word {
	width: 4rem;
}

main.home .explain .item .definition {
	flex: 1;
}

@media (width>=64rem) {
	main.home {
		margin: 3rem;
		gap: 5.5rem;
	}

	main.home .branding {
		font-size: 6.25rem;
	}

	main.home .explain {
		gap: 1rem;
	}

	main.home .explain .item {
		gap: 5.5rem;
		color: #6C6C6C;
		text-align: right;
		font-size: 1.2rem;
		font-style: normal;
		font-weight: 400;
		line-height: 120%;
		/* 2.4rem */
		letter-spacing: -0.02rem;
	}

	main.home .explain .item .word {
		width: 14rem;
	}
}

@media (width>=80rem) {
	main.home .branding {
		flex-direction: row;
		gap: 1.2rem;
	}

	main.home .explain {
		justify-content: end;
		align-items: end;
	}

	main.home .explain .item .word {
		width: 20rem;
		text-align: right;
	}

	main.home .explain .item {
		width: 80vw;
	}
}

/* Category */
main.category {
	display: flex;
	flex-direction: column;
}

main.category div.spacer {
	flex: 1;
	min-height: 0;
}

main.category div.grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.5rem;
}

main.category div.grid a.item {
	max-width: 100vw;
	text-decoration: none;
	height: fit-content;
}

main.category div.grid a.item img.thumbnail {
	max-width: 100%;
	aspect-ratio: 3/2;
	object-fit: cover;
}

main.category div.grid a.item div.page_title {
	text-transform: uppercase;
	text-align: center;
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	padding: 0.75rem;
	color: black;
}

@media (width >=64rem) {
	main.category div.grid {
		max-width: 73rem;
		margin: 0 auto;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Single */
main.single {
	width: 100vw;
}

main.single .entry-content {
	line-height: 1.6;
	color: #363636;
}

/* Gallery Slideshow */
.slideshow-wrapper {
	position: relative;
	margin: 2rem 0;
	user-select: none;
}

.slideshow-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	cursor: grab;
	min-height: 40vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slideshow-container:active {
	cursor: grabbing;
}

.slideshow-container .slide {
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.slideshow-container .slide img {
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	pointer-events: none;
}

.slideshow-container .slide figcaption {
	position: absolute;
	bottom: 0;
	padding: 1rem 1.5rem;
	text-align: center;
	color: #6C6C6C;
	font-size: 0.875rem;
	width: 100%;
	background: linear-gradient(to top, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9));
	backdrop-filter: blur(10px);
}

/* Navigation buttons */
.slideshow-prev,
.slideshow-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	color: #363636;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 1rem 1.25rem;
	cursor: pointer;
	font-size: 1.5rem;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 2;
	border-radius: 50%;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.slideshow-prev:hover,
.slideshow-next:hover {
	background: rgba(255, 255, 255, 1);
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.slideshow-prev:disabled,
.slideshow-next:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.slideshow-prev {
	left: 1rem;
}

.slideshow-next {
	right: 1rem;
}

/* Dots indicator */
.slideshow-dots {
	text-align: center;
	padding: 1.5rem 0;
	display: flex;
	justify-content: center;
	gap: 0.75rem;
}

.slideshow-dots .dot {
	height: 0.625rem;
	width: 0.625rem;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	display: inline-block;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transform-origin: center;
}

.slideshow-dots .dot.active {
	background: #363636;
	transform: scale(1.2);
}

.slideshow-dots .dot:hover:not(.active) {
	background: rgba(0, 0, 0, 0.4);
	transform: scale(1.1);
}

/* Touch/swipe indication */
@media (hover: none) and (pointer: coarse) {

	.slideshow-prev,
	.slideshow-next {
		width: 2.5rem;
		height: 2.5rem;
		background: rgba(255, 255, 255, 0.8);
	}

	.slideshow-container {
		cursor: default;
	}
}

/* Desktop adjustments */
@media (width >=64rem) {
	main.single {
		margin: 2rem 0;
	}

	main.single .entry-title {
		font-size: 3rem;
	}

	.slideshow-wrapper {
		margin: 2rem 3rem;
	}

	.slideshow-container {
		height: 60vh;
	}

}

/* Fullscreen Modal */
.fullscreen-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(1rem);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	cursor: zoom-out;
}

.fullscreen-modal img {
	max-width: 90%;
	max-height: 90%;
	object-fit: contain;
}

.fullscreen-modal .close-fullscreen {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: none;
	border: none;
	color: white;
	font-size: 2rem;
	cursor: pointer;
}