/* ==========================================================================
   Ramesh Nair Photography — main stylesheet
   Fonts per the client's reference: Fira Sans
     Bold  30px #000000  -> site title
     Reg   16px #000000  -> category nav
     Reg   14px #000000  -> utility nav / labels
     Reg   14px #4B4B4B  -> PREV/NEXT, SHOW THUMBNAILS, captions
   ========================================================================== */

:root {
	--rn-black: #000000;
	--rn-gray: #4b4b4b;
	--rn-gray-light: #bdbdbd;
	--rn-border: #eaeaea;
	--rn-page-bg: #ffffff;
	--rn-font: 'Fira Sans', -apple-system, BlinkMacSystemFont, sans-serif;

	--rn-sidebar-width: 300px;
	--rn-sidebar-pad-left: 5.5rem;
	--rn-content-gap: 5rem;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	background: var(--rn-page-bg);
	font-family: var(--rn-font);
	color: var(--rn-black);
}

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

img {
	max-width: 100%;
	display: block;
}

figure {
	margin: 0;
}

button {
	font-family: inherit;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

/* Custom scrollbar look (Chromium only) — removes any classic step-arrow
   buttons some Windows/browser configs show. */
::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-button {
	display: none;
	height: 0;
	width: 0;
}

::-webkit-scrollbar-track {
	background: var(--rn-page-bg);
}

::-webkit-scrollbar-thumb {
	background: var(--rn-gray-light);
	border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--rn-gray);
}

/* ---------------------------------------------------------------------- */
/* Page shell — sidebar + content, side by side on desktop, stacked on    */
/* mobile. No fixed/viewport-height tricks — everything just sizes to    */
/* its own content, which is the simplest thing that can't break.         */
/* ---------------------------------------------------------------------- */

.rn-page {
	display: flex;
	max-width: 1920px;
	min-height: 100vh;
	margin: 0 auto;
	background: #ffffff;
	padding: 3.5rem 3.5rem 3.5rem 0;
	gap: var(--rn-content-gap);
}

.rn-sidebar {
	display: flex;
	flex-direction: column;
	flex: 0 0 var(--rn-sidebar-width);
	padding-left: var(--rn-sidebar-pad-left);
	position: sticky;
	top: 2rem;
	align-self: flex-start;
	max-height: 100vh;
	overflow-y: auto;
}

.rn-sidebar-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 1rem;
}

.rn-site-title {
	font-weight: 400;
	font-size: 32px;
	line-height: 1.2;
	margin: 0 0 3rem;
	white-space: nowrap;
}

/* Hamburger toggle — a plain checkbox + label, no JavaScript needed.
   Hidden entirely on desktop; only appears and does anything below the
   900px breakpoint (see the media query near the end of this file). */
.rn-menu-check {
	display: none;
}

.rn-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 6px;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	cursor: pointer;
}

.rn-menu-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--rn-black);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Turn the hamburger into an X while the menu is open. Uses :has() so
   this works with pure CSS — no JavaScript needed for the icon swap. */
.rn-sidebar:has(.rn-menu-check:checked) .rn-menu-toggle span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
	width: 100%;
}

.rn-sidebar:has(.rn-menu-check:checked) .rn-menu-toggle span:nth-child(2) {
	opacity: 0;
}

.rn-sidebar:has(.rn-menu-check:checked) .rn-menu-toggle span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
	width: 100%;
}

.rn-category-nav ul,
.rn-utility-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rn-category-nav li {
	margin-bottom: 0.25rem;
}

.rn-category-nav a {
	font-size: 16px;
	line-height: 1.6;
}

.rn-category-nav a.is-current {
	color: var(--rn-gray-light);
}

.rn-utility-nav {
	margin-top: 2.5rem;
}

.rn-utility-nav a {
	font-size: 14px;
	line-height: 2;
}

.rn-utility-nav a.is-current {
	color: var(--rn-gray-light);
}

.rn-social-icons {
	margin-top: 2rem;
	display: flex;
	gap: 0.75rem;
}

.rn-social-icon {
	display: inline-flex;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	overflow: hidden;
}

.rn-photo-controls {
	position: fixed;
	left: calc((100vw - min(100vw, 1920px)) / 2 + var(--rn-sidebar-pad-left));
	bottom: 2.5rem;
	font-size: 14px;
	color: var(--rn-gray);
}

.rn-photo-controls p {
	margin: 0 0 0.4rem;
	font-size: 14px;
	color: var(--rn-gray);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.rn-prev-next a:hover,
.rn-show-thumbnails a:hover {
	color: var(--rn-black);
}

/* ---------------------------------------------------------------------- */
/* Main content                                                            */
/* ---------------------------------------------------------------------- */

.rn-main {
	flex: 1 1 0;
	min-width: 0;
	padding-top: 5.25rem;
}

/* Homepage fade banner ----------------------------------------------------
   aspect-ratio scales naturally at every screen size with zero media
   queries needed — no vh/dvh, no separate mobile override. */

.rn-banner {
	position: relative;
	width: 100%;
	max-width: calc(85vh * 8 / 5);
	aspect-ratio: 8 / 5;
	margin: 0 auto;
	overflow: hidden;
	background: #111;
}

/* The 5.25rem top padding on .rn-main exists to align content with
   "Street" on category pages — the homepage has no such nav item to
   align with, and removing it here frees up the vertical space needed
   to keep the banner fully visible without scrolling. */
body.home .rn-main {
	padding-top: 2rem;
}

.rn-banner-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s ease-in-out;
}

.rn-banner-slide.is-active {
	pointer-events: auto;
}

.rn-banner-slide.is-active {
	opacity: 1;
}

.rn-banner-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.rn-banner-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rn-gray);
	text-align: center;
	padding: 2rem;
}

/* Gallery overview — category tile grid ---------------------------------- */

.rn-category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem 1rem;
}

.rn-category-tile {
	display: block;
}

.rn-category-tile-image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 280px;
	margin: 0 auto;
	overflow: hidden;
	background: #f1f1f1;
	border: 1px solid var(--rn-border);
}

.rn-category-tile-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rn-category-tile-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 13px;
	color: var(--rn-gray);
	text-align: center;
	padding: 1rem;
}

.rn-category-tile-label {
	display: block;
	text-align: center;
	font-size: 16px;
	margin-top: 0.75rem;
}

/* Category detail — mosaic tile grid -------------------------------------- */

.rn-archive-header {
	text-align: center;
	margin-bottom: 2.5rem;
}

.rn-archive-header h1 {
	font-size: 40px;
	font-weight: 300;
	margin: 0 0 0.75rem;
}

.rn-archive-intro {
	font-size: 16px;
	color: #000;
	max-width: 680px;
	margin: 0 auto;
	line-height: 1.7;
	font-weight: 200;
}

.rn-mosaic-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: auto;
	gap: 0.75rem;
}

/* Ratios taken directly from the XD design spec (308x200 for a normal
   tile, 308x410 for the tall/portrait one) — using aspect-ratio instead
   of a fixed pixel height means tiles keep the same proportions the
   design intended no matter how wide the actual browser window is. */
.rn-mosaic-tile {
	display: block;
	width: 100%;
	aspect-ratio: 308 / 200;
	overflow: hidden;
	background: #f1f1f1;
}

.rn-mosaic-tile.is-tall {
	grid-row: span 2;
	aspect-ratio: 308 / 410;
}

.rn-mosaic-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.rn-mosaic-tile:hover img {
	transform: scale(1.04);
}

/* Single photo view -------------------------------------------------------- */

.rn-single-photo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.rn-single-photo-frame {
	position: relative;
	width: 100%;
	height: 85vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Fixed frame height (above) means landscape and portrait photos both
   display at the exact same height, with width scaling naturally to
   match each photo's own aspect ratio — no cropping either way. */
.rn-single-photo-frame img {
	width: auto;
	height: 100%;
	max-width: 100%;
}

/* Hover arrows over the image itself — hidden until you mouse over
   the photo, then fade in on whichever side you're near (same pattern
   as the reference site). Keyboard Left/Right also navigates via
   assets/js/single-photo-nav.js. */
.rn-single-photo-nav {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
}

.rn-single-photo-nav-prev {
	left: 0;
	cursor: w-resize;
}

.rn-single-photo-nav-next {
	right: 0;
	cursor: e-resize;
}

/* About page --------------------------------------------------------------- */

.rn-about {
	display: flex;
	gap: 3rem;
	align-items: flex-start;
}

.rn-about-photo {
	flex: 0 0 340px;
}

.rn-about-photo img {
	width: 100%;
	height: auto;
}

.rn-about-content {
	flex: 1 1 0;
	min-width: 0;
	max-width: 480px;
}

/* Whatever heading level WordPress actually rendered (h1/h2/h3
   depending on what was chosen in the editor), make sure its top
   sits flush with the photo instead of picking up WordPress's own
   default block spacing above it. */
.rn-about-content > *:first-child {
	margin-top: 0;
}

.rn-about-content h1,
.rn-about-content h2,
.rn-about-content h3 {
	font-size: 24px;
	font-weight: 300;
	margin-top: 0;
}

.rn-about-content p {
	font-size: 16px;
	line-height: 1.7;
	color: #000000;
	font-weight: 200;
}

.rn-about-content a {
	text-decoration: underline;
}

/* 404 page ------------------------------------------------------------- */

.rn-404 {
	padding-top: 4rem;
}

.rn-404 h1 {
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 0.75rem;
}

.rn-404 p {
	font-size: 16px;
	color: var(--rn-gray);
	margin: 0 0 1.5rem;
}

.rn-404-link a {
	font-size: 15px;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------- */
/* Mobile — one breakpoint, everything just stacks                        */
/* ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	.rn-page {
		flex-direction: column;
		padding: 1.5rem;
		gap: 1.5rem;
	}

	.rn-sidebar {
		width: 100%;
		flex-basis: auto;
		padding-left: 0;
		position: static;
		max-height: none;
		overflow-y: visible;
	}

	.rn-site-title {
		font-size: 24px;
		margin: 0;
	}

	.rn-main,
	body.home .rn-main {
		padding-top: 0;
	}

	/* Hamburger appears; nav is collapsed by default and only shows
	   once the (invisible) checkbox is checked by clicking the label. */
	.rn-menu-toggle {
		display: flex;
	}

	/* Bigger, more spread-out menu items once the mobile nav is open. */
	.rn-category-nav a {
		font-size: 20px;
		line-height: 2.2;
	}

	.rn-utility-nav a {
		font-size: 18px;
		line-height: 2.2;
	}

	/* Homepage banner on mobile: no more fade carousel — just stack every
	   featured photo full-width, one below another, at its natural
	   proportions (matches how the category listing already works). */
	.rn-banner {
		position: static;
		aspect-ratio: auto;
		max-height: none;
		background: none;
		overflow: visible;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.rn-banner-slide {
		position: static;
		opacity: 1;
		pointer-events: auto;
		transition: none;
	}

	.rn-banner-slide img {
		width: 100%;
		height: auto;
		object-fit: unset;
	}

	.rn-nav-wrapper {
		display: none;
		margin-top: 1.5rem;
	}

	.rn-menu-check:checked ~ .rn-nav-wrapper {
		display: block;
	}

	/* Category overview tiles: one per row on mobile, fluid width
	   (not the fixed 308px desktop uses, which wouldn't fit). */
	.rn-category-grid {
		grid-template-columns: 1fr;
	}

	.rn-category-tile-image {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	/* Category photo listing: one photo per row, full width, natural
	   proportions — not cropped into a fixed-height square. */
	.rn-mosaic-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}

	.rn-mosaic-tile {
		aspect-ratio: auto;
		height: auto;
		pointer-events: none;
		cursor: default;
	}

	.rn-mosaic-tile.is-tall {
		grid-row: auto;
		aspect-ratio: auto;
	}

	.rn-mosaic-tile img {
		height: auto;
		object-fit: contain;
	}

	.rn-about {
		flex-direction: column;
	}

	.rn-about-photo {
		flex-basis: auto;
	}

	.rn-photo-controls {
		position: static;
		margin-top: 1.5rem;
	}

	.rn-single-photo-nav {
		display: none;
	}

	.rn-about-content {
		max-width: none;
	}
}