/* ==========================================================================
   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-gap:     20px;
	--aj-edge:    10px;
	--aj-header:  80px;
}

html.aj-dark {
	--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;
	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);
	position: relative;
	z-index: 10;
}

.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; }
}

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

/* Full-bleed three-column gallery. Core's Gallery block is flex-based by
   default; grid gives us exact, equal columns without percentage rounding. */
.wp-block-gallery.alignfull,
.wp-block-gallery.alignwide {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--aj-gap);
	padding-inline: var(--aj-edge);
	margin-block: 0;
}

.wp-block-gallery.alignfull .wp-block-image,
.wp-block-gallery.alignwide .wp-block-image {
	margin: 0;
	width: 100%;
}

.wp-block-gallery.alignfull .wp-block-image img,
.wp-block-gallery.alignwide .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Uniform tiles when "Crop images" is enabled on the block. */
.wp-block-gallery.is-cropped .wp-block-image img {
	height: 100%;
	object-fit: cover;
}

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

/* 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);
}

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

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

.aj-theme-toggle {
	background: none;
	border: 0;
	padding: 0 0 0 26px;
	cursor: pointer;
	color: var(--aj-muted);
	display: inline-flex;
	align-items: center;
	line-height: 1;
	transition: color .2s ease;
}

.aj-theme-toggle:hover { color: var(--aj-ink); }
.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; }

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