/*
Theme Name: Nay
Theme URI: https://example.com/nay
Author: Nay
Author URI: https://example.com
Description: A clean, modern and elegant WordPress block theme for 2D animators and illustrators. Features a fixed left-hand navigation, a full-screen portfolio hero on the homepage (image or video), a portfolio grid, and refined single-portfolio layouts. Built for the block editor (Full Site Editing).
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nay
Tags: portfolio, full-site-editing, block-patterns, two-columns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, block-styles, wide-blocks
*/

/* =================================================================
   Nay — base layout & components
   Most visual styling (color, typography, spacing) is defined in
   theme.json. This stylesheet handles the structural left-sidebar
   layout and a handful of bespoke components that block markup
   alone cannot express.
   ================================================================= */

:root {
	--nay-sidebar-width: 17rem;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
}

/* ---- Overall shell: fixed left nav + scrolling main column ---- */
.site-layout {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	min-height: 100vh;
	gap: 0;
}

.site-sidebar {
	flex: 0 0 var(--nay-sidebar-width);
	width: var(--nay-sidebar-width);
	position: sticky;
	top: 0;
	align-self: flex-start;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	padding: 2.25rem 1.75rem;
	box-sizing: border-box;
	border-right: 1px solid var(--wp--preset--color--hairline, #e7e2d8);
	background-color: var(--wp--preset--color--base, #fbfaf7);
	overflow-y: auto;
}

.site-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* The site footer / page content should grow to fill */
.site-main > .entry-content,
.site-main > .page-content {
	flex: 1 0 auto;
}

/* ---- Brand block at the top of the sidebar ---- */
.sidebar-brand {
	margin: 0;
}

.sidebar-brand .wp-block-site-title {
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: 1.6rem;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0;
}

.sidebar-brand .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast, #17150f);
}

.sidebar-brand .wp-block-site-logo img {
	height: auto;
}

.sidebar-tagline {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary, #6f6657);
}

/* ---- Vertical navigation in the sidebar ---- */
.site-sidebar .wp-block-navigation {
	width: 100%;
}

.site-sidebar .wp-block-navigation ul.wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	width: 100%;
}

.site-sidebar .wp-block-navigation .wp-block-navigation-item {
	width: 100%;
}

.site-sidebar .wp-block-navigation .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.35rem 0;
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: 1.35rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast, #17150f);
	text-decoration: none;
	transition: color 0.18s ease, padding-left 0.18s ease;
}

.site-sidebar .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-sidebar .wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary, #b5482e);
	padding-left: 0.4rem;
}

/* ---- Small print / socials pinned to bottom of sidebar ---- */
.sidebar-meta {
	font-size: 0.78rem;
	color: var(--wp--preset--color--secondary, #6f6657);
}

.sidebar-meta .wp-block-social-links {
	margin-bottom: 0.75rem;
}

/* ---- Homepage hero ---- */
.hero-cover {
	min-height: 100vh;
}

.hero-cover .wp-block-cover__inner-container {
	width: 100%;
	max-width: none;
	padding: clamp(2rem, 5vw, 4.5rem);
	box-sizing: border-box;
}

.hero-kicker {
	font-size: 0.82rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
	opacity: 0.85;
}

.hero-title {
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: clamp(2.75rem, 7vw, 6rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
	max-width: 16ch;
}

.hero-description {
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.5;
	max-width: 48ch;
	margin: 0 0 1.75rem;
}

/* ---- Portfolio grid (archive) ---- */
.portfolio-grid .wp-block-post-template,
ul.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 1200px) {
	.portfolio-grid .wp-block-post-template,
	ul.portfolio-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.portfolio-card {
	margin: 0;
}

.portfolio-card .portfolio-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 4px;
	background-color: var(--wp--preset--color--tertiary, #eee9df);
	aspect-ratio: 4 / 3;
}

.portfolio-card .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}

.portfolio-card .wp-block-post-featured-image a,
.portfolio-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
}

.portfolio-card .wp-block-post-featured-image img {
	object-fit: cover;
	transition: transform 0.6s ease;
}

.portfolio-card:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

/* Placeholder shown when an item has no cover image yet. */
.portfolio-card .portfolio-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, var(--wp--preset--color--tertiary, #eee9df), var(--wp--preset--color--tertiary, #eee9df) 12px, #e6e0d4 12px, #e6e0d4 24px);
	z-index: -1;
}

.portfolio-card__caption {
	padding: 0.85rem 0.1rem 0;
}

.portfolio-card__caption .wp-block-post-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: 1.3rem;
	line-height: 1.15;
}

.portfolio-card__caption .wp-block-post-title a {
	color: var(--wp--preset--color--contrast, #17150f);
	text-decoration: none;
	transition: color 0.18s ease;
}

.portfolio-card__caption .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary, #b5482e);
}

.portfolio-card__caption .portfolio-card__type {
	margin: 0.2rem 0 0;
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary, #6f6657);
}

/* ---- Single portfolio item ---- */
.portfolio-hero-image {
	margin: 0 0 clamp(1.5rem, 4vw, 3rem);
}

.portfolio-hero-image img {
	width: 100%;
	max-height: 78vh;
	object-fit: cover;
	display: block;
	border-radius: 4px;
}

.portfolio-back-link a {
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--secondary, #6f6657);
}

.portfolio-back-link a:hover {
	color: var(--wp--preset--color--primary, #b5482e);
}

/* ---- Generic page header ---- */
.page-lede {
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	line-height: 1.55;
	color: var(--wp--preset--color--secondary, #6f6657);
	max-width: 54ch;
}

/* ---- Responsive: sidebar collapses to a top bar on small screens ---- */
@media (max-width: 781px) {
	.site-layout {
		flex-direction: column;
	}

	.site-sidebar {
		position: static;
		width: 100%;
		flex-basis: auto;
		height: auto;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1rem 1.25rem;
		border-right: none;
		border-bottom: 1px solid var(--wp--preset--color--hairline, #e7e2d8);
	}

	.site-sidebar .sidebar-meta {
		display: none;
	}

	.site-sidebar .wp-block-navigation ul.wp-block-navigation__container {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.25rem 1.25rem;
	}

	.site-sidebar .wp-block-navigation .wp-block-navigation-item__content {
		font-size: 1rem;
		padding: 0.25rem 0;
	}

	.sidebar-brand .wp-block-site-title {
		font-size: 1.25rem;
	}

	.portfolio-grid .wp-block-post-template,
	ul.portfolio-grid {
		grid-template-columns: 1fr;
	}

	.hero-cover {
		min-height: 70vh;
	}
}