/* ==========================================================================
   Arnold Julian - main stylesheet

   Colour and type tokens come from theme.json. This file holds the two
   things theme.json cannot express: the gallery grid, and the dark theme.

   Measured from the Elementor build so the layout is reproduced exactly:
     container      1140px
     grid           full-bleed, 3 columns, 20px gaps, 10px outer padding
     breakpoint     3 columns above 767px, 1 column at or below
     header         80px desktop, 67px mobile
   ========================================================================== */

:root {
	--aj-canvas:  #ffffff;
	--aj-ink:     #000000;
	--aj-body:    #4a4a4a;
	--aj-muted:   #a8a8a8;
	--aj-chip:    transparent;
	--aj-active:  #000000;
	--aj-hover:   #800000;

	--aj-gap:     20px;
	--aj-edge:    10px;
	--aj-header:  80px;
}

html.aj-dark {
	/* theme.json colours resolve to --wp--preset--* variables, which are static.
	   Redefining them here is what makes headings, links and body copy follow
	   dark mode; without this they stay #000 and vanish against the page. */
	--wp--preset--color--canvas: #0f0f0f;
	--wp--preset--color--ink:    #f2f2f2;
	--wp--preset--color--body:   #b4b4b4;
	--wp--preset--color--muted:  #8f8f8f;

	--aj-canvas: #0f0f0f;
	--aj-ink:    #f2f2f2;
	--aj-body:   #b4b4b4;
	--aj-muted:  #8f8f8f;
	/* Client logos are dark-on-light artwork; give them a chip so they
	   stay legible against a dark page. Photographs are never touched. */
	--aj-chip:   #ffffff;
	--aj-active: #ffffff;
	--aj-hover:  #800000;
	color-scheme: dark;
}

body {
	background-color: var(--aj-canvas);
	color: var(--aj-body);
}

@media (prefers-reduced-motion: no-preference) {
	body,
	.aj-header {
		transition: background-color .25s ease, color .25s ease;
	}
}

/* --------------------------------------------------------------- header  */

.aj-header {
	background-color: var(--aj-canvas);
}

/* The template part is what sticks, not .aj-header. A sticky element can only
   travel inside its parent's box, and .aj-header's parent is exactly its own
   height, so sticking it there does nothing. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--aj-canvas);
}

.admin-bar header.wp-block-template-part { top: 32px; }

@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part { top: 46px; }
}

@media (max-width: 600px) {
	.admin-bar header.wp-block-template-part { top: 0; }
}

.aj-header__inner {
	max-width: 1140px;
	margin-inline: auto;
	min-height: var(--aj-header);
	padding-inline: var(--aj-edge);
}

.aj-site-title a {
	color: var(--aj-ink);
}

.aj-nav a {
	color: var(--aj-muted);
	transition: color .2s ease;
}

.aj-nav a:hover,
.aj-nav .current-menu-item > a {
	color: var(--aj-ink);
}

@media (max-width: 767px) {
	:root { --aj-header: 67px; }

	/* Phone: name centred, burger kept on the right. The empty first track
	   mirrors the burger's width so the title is centred on the screen, not
	   on the space left beside the burger. Desktop and tablet keep the
	   left/right flex layout above. */
	.aj-header__inner.wp-block-group {
		display: grid;
		grid-template-columns: 44px 1fr 44px;
		align-items: center;
		justify-content: initial;
		gap: 0;
	}

	.aj-header__inner .wp-block-site-title {
		grid-column: 2;
		text-align: center;
		justify-self: center;
	}

	.aj-header__inner .wp-block-navigation {
		grid-column: 3;
		justify-self: end;
	}
}

/* ---------------------------------------------------------------- grid  */

/* Full-bleed three-column gallery.
   The break-out uses the margin technique rather than WordPress alignfull,
   because alignfull cannot escape a constrained post-content wrapper.
   overflow-x:clip on body absorbs the scrollbar-width overflow that 100vw
   introduces; clip rather than hidden keeps sticky positioning usable.

   The :not(#individual-image) is not decoration - core's own gallery rules
   use it to borrow ID-level specificity, so anything overriding them has to
   match. Without it core's flex sizing wins and the images collapse. */

body { overflow-x: clip; }

.wp-block-gallery.has-nested-images.alignfull,
.wp-block-gallery.has-nested-images.alignwide {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--aj-gap);
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-block: 0;
	padding-inline: var(--aj-edge);
}

.wp-block-gallery.has-nested-images.alignfull figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.alignwide figure.wp-block-image:not(#individual-image) {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	flex: none;
}

.wp-block-gallery.has-nested-images.alignfull figure.wp-block-image:not(#individual-image) img,
.wp-block-gallery.has-nested-images.alignwide figure.wp-block-image:not(#individual-image) img {
	display: block;
	width: 100% !important;
	height: auto;
	max-width: 100% !important;
}

/* Events runs edge to edge with no gutters, as it did in the original.
   Add .aj-flush to the gallery block, or rely on the page id. */
.page-id-20 .wp-block-gallery.has-nested-images.alignfull,
.wp-block-gallery.aj-flush.has-nested-images.alignfull {
	gap: 0;
}

/* The client logo wall sits in the same 740px column as the About hero
   image rather than running full width. */
.wp-block-gallery.aj-logo-wall.has-nested-images.alignfull {
	width: auto;
	max-width: 740px;
	margin-inline: auto;
	padding-inline: 0;
	gap: 0;
}

@media (max-width: 767px) {
	.wp-block-gallery.has-nested-images.alignfull,
	.wp-block-gallery.has-nested-images.alignwide {
		grid-template-columns: 1fr;
	}

	.wp-block-gallery.aj-logo-wall.has-nested-images.alignfull {
		max-width: 100%;
		padding-inline: var(--aj-edge);
	}
}

/* Client logo wall keeps its chip only in dark mode. */
.aj-logo-wall img {
	background: var(--aj-chip);
	padding: var(--aj-chip-pad, 0);
	border-radius: 6px;
}

html.aj-dark .aj-logo-wall img {
	--aj-chip-pad: 10px;
}

/* ---------------------------------------------------------------- prose  */

.aj-main {
	padding-inline: var(--aj-edge);
}

.aj-prose p {
	font-family: var(--wp--preset--font-family--prose);
	font-size: var(--wp--preset--font-size--prose);
	line-height: 1.8;
	color: var(--aj-ink);
	text-align: center;
}

/* --------------------------------------------------------------- footer  */

.aj-footer {
	padding-block: 40px 60px;
}

.aj-footer__text {
	color: var(--aj-body);
}


/* --------------------------------------------------- mobile overlay menu  */

/* Core renders the responsive overlay as a white sheet with the items pushed
   against one edge, which ignores the theme entirely. Follow the palette and
   centre the list instead. */

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--aj-canvas) !important;
	color: var(--aj-body) !important;
	padding: 24px;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	align-items: center;
	justify-content: center;
	gap: 26px;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--aj-muted) !important;
	font-size: 18px;
	text-align: center;
}

.wp-block-navigation__responsive-container.is-menu-open a:hover {
	color: var(--aj-ink) !important;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--aj-ink) !important;
}

/* The close control sits exactly where the burger was (44px box, 12px from
   the top, 10px from the right), so opening and closing feel like one
   control rather than the X being jammed into the corner. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 12px;
	right: 10px;
	width: 44px;
	height: 44px;
	padding: 0;
	display: grid;
	place-items: center;
}

.wp-block-navigation__responsive-container-close:hover { color: var(--aj-hover) !important; }

/* --------------------------------------------------------- theme toggle  */

.aj-theme-li { display: flex; align-items: center; }

/* 44x44 is the minimum comfortable pointer target. The icon stays 16px;
   the button around it is what you actually have to hit. */
.aj-theme-toggle {
	background: none;
	border: 0;
	padding: 0;
	margin-left: 12px;
	width: 44px;
	height: 44px;
	cursor: pointer;
	color: var(--aj-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: color .2s ease;
}

.aj-theme-toggle:hover { color: var(--aj-hover); }
.aj-theme-toggle svg   { width: 16px; height: 16px; display: block; }

.aj-theme-toggle .aj-moon { display: none; }
html.aj-dark .aj-theme-toggle .aj-moon { display: block; }
html.aj-dark .aj-theme-toggle .aj-sun  { display: none; }

/* ------------------------------------------------------- menu link states  */

/* Current page reads as fully black on light, fully white on dark. */
.wp-block-navigation a[aria-current="page"],
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation__responsive-container.is-menu-open a[aria-current="page"] {
	color: var(--aj-active) !important;
}

/* Hover is the house maroon, on every surface. */
.wp-block-navigation a:hover,
.wp-block-navigation a:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open a:hover {
	color: var(--aj-hover) !important;
}

/* ----------------------------------------------------------- hamburger  */

/* Core ships a single-bar glyph. Draw three bars instead, using gradients so
   no extra markup is needed, and give the button a real 44px target. */
.wp-block-navigation__responsive-container-open svg { display: none; }

.wp-block-navigation__responsive-container-open {
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--aj-ink);
	background:
		linear-gradient(currentColor, currentColor) center 15px / 24px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center 21px / 24px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center 27px / 24px 2px no-repeat;
}

.wp-block-navigation__responsive-container-open:hover { color: var(--aj-hover); }

/* ------------------------------------------------------- portrait media  */

/* Shorts and vertical clips should stand tall rather than be letterboxed
   into a 16:9 slot. Height is capped so the whole frame fits the screen. */
.aj-portrait {
	max-width: calc(82vh * 9 / 16);
	margin-inline: auto;
}

.aj-portrait .wp-block-embed__wrapper { aspect-ratio: 9 / 16; }

.aj-portrait .wp-block-embed__wrapper::before { padding-top: 0 !important; }

.aj-portrait .wp-block-embed__wrapper iframe {
	position: static;
	width: 100%;
	height: 100%;
}

.wp-block-video.aj-portrait video {
	width: 100%;
	height: auto;
	/* preload="none" leaves the element with no intrinsic size, so the box has
	   to be reserved explicitly or it collapses to the 150px default. */
	aspect-ratio: 9 / 16;
	max-height: 82vh;
	object-fit: contain;
	background: #000;
	display: block;
}

::selection { background: var(--aj-ink); color: var(--aj-canvas); }

/* ------------------------------------------------------- scroll reveal  */

/* Media rises into place as it scrolls into view. Where the browser supports
   scroll-driven animations the effect is tied to scroll position; elsewhere
   theme-toggle.js falls back to a one-shot transition via .aj-reveal. */

@keyframes aj-rise {
	from { opacity: 0; transform: translateY(34px); }
	to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.wp-block-gallery figure.wp-block-image,
		.wp-block-embed,
		.wp-block-video {
			animation: aj-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
	}
}

/* JavaScript fallback path. */
.aj-reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity .6s ease, transform .6s ease;
}

.aj-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------- back to top  */

/* Appears once the visitor has scrolled roughly a screen; sits above the
   content but below the header and the mobile menu overlay. */
.aj-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--aj-muted);
	background: var(--aj-canvas);
	color: var(--aj-ink);
	display: grid;
	place-items: center;
	padding: 0;
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease, color .2s ease, border-color .2s ease;
}

.aj-top.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.aj-top:hover,
.aj-top:focus-visible {
	color: var(--aj-hover);
	border-color: var(--aj-hover);
}

.aj-top:focus-visible { outline: 2px solid var(--aj-hover); outline-offset: 3px; }

.aj-top svg { width: 18px; height: 18px; display: block; }

@media (max-width: 767px) {
	.aj-top { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.aj-top { transition: none; transform: none; }
}