/*
Theme Name: Nineteen65
Theme URI: https://nineteen65.com
Author: Martin Seraphin
Author URI: https://nineteen65.com
Description: Custom block theme for nineteen65.com – the portfolio of award-winning competition photographer Martin Seraphin. Built around the Magnesium design system: dark-only surface palette inspired by the Leica camera body, restrained red accent, generous spacing, image-first layouts. Optimised for Lighthouse 100/100/100/100 and WCAG 2.2 AA.
Version: 0.5.2
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nineteen65
Tags: photography, portfolio, dark-mode, full-site-editing, block-styles, accessibility-ready
*/

/* All styles are managed via theme.json and patterns. This file is for selective custom CSS that theme.json cannot express. */

/* === STICKY HEADER ===
   Multiple selectors to handle WP template-part double-wrapping:
   the inner <header class="site-header"> from header.html AND
   the outer <header class="wp-block-template-part"> generated by WP.
   Either can be targeted depending on which one becomes the scroll context. */
header.site-header,
.site-header,
.wp-site-blocks > .wp-block-template-part:first-child,
.wp-site-blocks > header:first-child {
	position: sticky !important;
	top: 0 !important;
	z-index: 100 !important;
}

/* Ensure no overflow on root containers blocks sticky positioning */
html,
body,
.wp-site-blocks {
	overflow: visible;
}

/* === HERO GLASS CARD === */
.n65-hero-glass {
	background: rgba( 21, 23, 26, 0.55 );
	-webkit-backdrop-filter: blur( 16px ) saturate( 140% );
	backdrop-filter: blur( 16px ) saturate( 140% );
	border: 1px solid rgba( 232, 230, 226, 0.12 );
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.25 );
	border-radius: 3px;
}

/* === N65 BRAND (Logo + Wortmarke) === */
.n65-brand {
	display: inline-flex;
	align-items: center;
	gap: var( --wp--preset--spacing--m );
	text-decoration: none;
	color: inherit;
	line-height: 1;
}

.n65-logo {
	--n65-circle: var( --wp--preset--color--text );
	--n65-inner: var( --wp--preset--color--surface );
	width: 52px;
	height: 52px;
	display: block;
	flex-shrink: 0;
}

.n65-logo .n65-circle {
	fill: var( --n65-circle );
	transition: fill 200ms ease;
}

.n65-logo .n65-marks {
	stroke: var( --n65-inner );
	transition: stroke 200ms ease;
}

.n65-logo .n65-letters {
	fill: var( --n65-inner );
	transition: fill 200ms ease;
}

.n65-wordmark {
	font-family: var( --wp--preset--font-family--serif );
	font-size: 1.85rem;
	font-weight: 400;
	letter-spacing: 0.005em;
	color: var( --wp--preset--color--text );
	line-height: 1;
	white-space: nowrap;
}

.n65-brand:hover .n65-logo,
.n65-brand:focus-visible .n65-logo {
	--n65-circle: var( --wp--preset--color--accent );
	--n65-inner: var( --wp--preset--color--text );
}

@media ( prefers-reduced-motion: reduce ) {
	.n65-logo .n65-circle,
	.n65-logo .n65-marks,
	.n65-logo .n65-letters {
		transition: none;
	}
}

/* === NATIVE GALLERY AS MASONRY === */
/* Hard override of WordPress core's flexbox layout for galleries. We need
   maximum specificity (`html body`) plus !important on layout-critical
   properties because the core block stylesheet is loaded last and uses the
   same `.wp-block-gallery.has-nested-images` selector. */

html body .wp-block-gallery.has-nested-images,
html body .wp-block-gallery.has-nested-images.is-cropped {
	display: block !important;
	column-count: 3 !important;
	column-gap: 12px !important;
	width: 100% !important;
	max-width: 100% !important;
}

html body .wp-block-gallery.has-nested-images figure.wp-block-image,
html body .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 0 12px 0 !important;
	flex-basis: auto !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	break-inside: avoid;
	page-break-inside: avoid;
}

/* The inner <a> wrapper (added by our PHP filter) must be a block-level box
   that fills the column; otherwise it stays inline and the image collapses
   to its intrinsic pixel size. */
html body .wp-block-gallery.has-nested-images figure.wp-block-image > a {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	line-height: 0;
}

/* Cancel the "is-cropped" object-fit: cover that makes images uniform-height
   squares — that's the opposite of what we want for masonry. */
html body .wp-block-gallery.has-nested-images .wp-block-image img,
html body .wp-block-gallery.has-nested-images.is-cropped .wp-block-image img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	object-fit: initial !important;
	border-radius: 2px;
	transition: opacity 200ms ease, transform 400ms ease;
}

/* Tab focus ring for keyboard navigation (A11y, WCAG 2.4.7) */
html body .wp-block-gallery.has-nested-images .wp-block-image a:focus-visible {
	outline: 2px solid var( --wp--preset--color--text );
	outline-offset: 3px;
	border-radius: 2px;
}

html body .wp-block-gallery.has-nested-images .wp-block-image a:hover img {
	opacity: 0.88;
	transform: scale( 1.01 );
}

@media ( max-width: 1023px ) {
	html body .wp-block-gallery.has-nested-images,
	html body .wp-block-gallery.has-nested-images.is-cropped {
		column-count: 2 !important;
	}
}

@media ( max-width: 599px ) {
	html body .wp-block-gallery.has-nested-images,
	html body .wp-block-gallery.has-nested-images.is-cropped {
		column-count: 1 !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html body .wp-block-gallery.has-nested-images .wp-block-image img {
		transition: none;
	}
	html body .wp-block-gallery.has-nested-images .wp-block-image a:hover img {
		transform: none;
	}
}

/* === BRAND ACCENT SYSTEM (red) === */
/* Briefing 5.6: red lives in exactly three places. This block implements two
   of them — the hairline under section headings, and the small red tick used
   as list marker on the honors chronology. */

/* Hairline under section headings inside the main content. Only H2 — H3 stays
   clean so year markers inside the chronology don't get a line each. */
main h2 {
	border-bottom: 1px solid #e41500;
	padding-bottom: 0.4em;
}

/* Red tick markers for the honors list */
ul.n65-honors-list {
	list-style: none;
	padding-left: 0;
	margin: 0 0 var( --wp--preset--spacing--m ) 0;
}

ul.n65-honors-list li {
	position: relative;
	padding-left: 1.4em;
	margin-bottom: 0.55em;
	line-height: 1.55;
}

ul.n65-honors-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.58em;
	width: 0.45em;
	height: 0.45em;
	background: #e41500;
}

/* === GALLERY HUB GRID === */
/* 4-column grid for the gallery overview page. Each card is a wp:cover block
   that can later receive a real cover image; the magnesium background colour
   is the empty-state. */
.wp-block-group.n65-gallery-grid {
	display: grid !important;
	grid-template-columns: repeat( 4, 1fr );
	gap: 14px;
}

@media ( max-width: 1023px ) {
	.wp-block-group.n65-gallery-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 599px ) {
	.wp-block-group.n65-gallery-grid {
		grid-template-columns: 1fr;
	}
}

/* Gallery card: cover block override */
.wp-block-cover.n65-gallery-card {
	overflow: hidden;
	transition: transform 300ms ease;
	color: var( --wp--preset--color--text );
}

.wp-block-cover.n65-gallery-card:hover {
	transform: translateY( -3px );
}

.wp-block-cover.n65-gallery-card .wp-block-cover__background {
	transition: opacity 300ms ease;
}

.wp-block-cover.n65-gallery-card:hover .wp-block-cover__background {
	opacity: 0.78;
}

.wp-block-cover.n65-gallery-card h3 a {
	color: var( --wp--preset--color--text );
	text-decoration: none;
	display: block;
}

.wp-block-cover.n65-gallery-card h3 a:focus-visible {
	outline: 2px solid var( --wp--preset--color--text );
	outline-offset: 4px;
	border-radius: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-cover.n65-gallery-card,
	.wp-block-cover.n65-gallery-card .wp-block-cover__background {
		transition: none;
	}
	.wp-block-cover.n65-gallery-card:hover {
		transform: none;
	}
}

/* === PHOTOSWIPE THEME OVERRIDE === */
/* Match the lightbox to the Magnesium dark palette. */
.pswp {
	--pswp-bg: #15171A;
	--pswp-placeholder-bg: #1F2226;
	--pswp-icon-color: #E8E6E2;
	--pswp-icon-color-secondary: #15171A;
	--pswp-icon-stroke-color: rgba( 21, 23, 26, 0.5 );
	--pswp-icon-stroke-width: 1.5px;
}

.pswp__bg {
	background: #15171A;
}