/*
 * WordPress additions to the Lattice stylesheet (assets/css/lattice.css).
 * Lattice's CSS is plain (no layers); this file styles what WordPress renders itself (the Navigation block, the
 * Formgong plugin form, pages, posts, lists, search and 404) and resets the gaps WordPress adds between blocks.
 */

/* Template parts and <main> follow each other with no gap, as in the original. */
.wp-site-blocks > * { margin-block-start: 0; }
.lt-part { display: contents; }
.lt-main > * { margin-block: 0; }
.lt-main:focus { outline: none; }

/* WordPress's global link style underlines links; the template's links have no underline. */
body a:where(:not(.wp-element-button)) { color: inherit; text-decoration: none; }

/* ---------- Header: the bar of the original (logo, menu button, clock) ---------- */

/* The admin bar pushes the fixed bar down for signed-in editors. */
.admin-bar .bar { top: var(--wp-admin--admin-bar--height, 32px); }

/* The bar's boxes keep the template's -1px right and bottom margins (WordPress's block-gap reset would undo them). */
.bar > .b { margin: 0 -1px -1px 0; }

/* The logo and the clock stay above the open menu, as the original bar (z-index 25) over its menu (20). */
.bar > .logo, .bar > .clock { z-index: 1; }

/* The menu box holds the Navigation block; its button fills the box and shows the original "M". It is not a .b box
   (the slide-in would give it a transform, and WordPress's fixed overlay would open inside it), so it draws the same
   frame itself: the .b border and lines, drawn in with the template's "draw" animation, without the slide. */
.bar > .lt-menu-cell { position: relative; padding: 0; border: 1px solid transparent; border-top: 0; margin: 0 -1px -1px 0; min-width: 0; }
.bar > .lt-menu-cell::after {
	content: "";
	position: absolute;
	inset: -1px;
	pointer-events: none;
	background:
		linear-gradient(var(--line), var(--line)) 0 0 / 100% 1px no-repeat,
		linear-gradient(var(--line), var(--line)) 0 0 / 1px 100% no-repeat,
		linear-gradient(var(--line), var(--line)) 100% 0 / 1px 100% no-repeat,
		linear-gradient(var(--line), var(--line)) 0 100% / 100% 1px no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
	html.lines .bar > .lt-menu-cell { animation: lt-fade 1s var(--ease) both; }
	html.lines .bar > .lt-menu-cell::after { animation: draw 1.1s cubic-bezier(.65, 0, .35, 1) 0.35s both; }
}
@keyframes lt-fade { from { opacity: 0; } }
.bar .lt-nav { width: 100%; height: 100%; }
.bar .lt-nav .wp-block-navigation__responsive-container-open {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted);
	font: 400 18.5px/1.5 var(--font);
	cursor: pointer;
	transition: color 0.3s;
}
.bar .lt-nav .wp-block-navigation__responsive-container-open:hover { color: var(--text); }
.bar .lt-nav .wp-block-navigation__responsive-container-open svg { display: none; }
.bar .lt-nav .wp-block-navigation__responsive-container-open::before { content: "M"; }

/* The open menu = the original .menu.open, measured at 390x844 (2026-10-15): the whole screen, the page grid behind,
   the first link at (gut + one cell, mt cells from the top) = (83, 280), one link per cell row (56 px phones, 75 px
   wide screens), 0.74 cell font size at weight 100, uppercase, no underline, the number in front at 14 px from the
   top of its row. --u, --gut and --mt come from the template's script, as in the original.
   .wp-block-navigation doubles the specificity: WordPress's own overlay rules tie with a single class and load later. */
.bar .lt-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	padding: calc(var(--u) * var(--mt, 3)) 0 0 calc(var(--gut) + var(--u));
	background-color: var(--bg);
	background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
	background-size: var(--u) var(--u);
	background-position: var(--gut) 0;
	color: var(--text);
	font: 200 16.5px/1.5 var(--font);
	animation: lt-menu-open 0.8s var(--ease) both;
}
.admin-bar .bar .lt-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { top: var(--wp-admin--admin-bar--height, 32px); }
@keyframes lt-menu-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.bar .lt-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-close,
.bar .lt-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-dialog {
	position: static;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}
.bar .lt-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
	display: block;
	padding: 0;
}
.bar .lt-nav.wp-block-navigation .is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin: 0;
	padding: 0;
	counter-reset: lt-menu;
}
.bar .lt-nav.wp-block-navigation .is-menu-open .wp-block-navigation-item { counter-increment: lt-menu; }
.bar .lt-nav.wp-block-navigation .is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 14px;
	width: fit-content;
	height: var(--u);
	padding: 0;
	font-size: calc(var(--u) * 0.74);
	font-weight: 100;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text);
	transition: color 0.3s;
	animation: lt-menu-link 0.8s var(--ease) both;
	animation-delay: calc(0.15s + var(--i, 0) * 0.06s);
}
.bar .lt-nav.wp-block-navigation .is-menu-open .wp-block-navigation-item__content:hover { color: var(--accent); }
/* The number in front of each link (the original <b>01</b>). */
.bar .lt-nav.wp-block-navigation .is-menu-open .wp-block-navigation-item__content::before {
	content: counter(lt-menu, decimal-leading-zero);
	align-self: flex-start;
	margin-top: 14px;
	font-size: 12.5px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--dim);
}
.bar .lt-nav .is-menu-open .wp-block-navigation-item:nth-child(2) > a { --i: 1; }
.bar .lt-nav .is-menu-open .wp-block-navigation-item:nth-child(3) > a { --i: 2; }
.bar .lt-nav .is-menu-open .wp-block-navigation-item:nth-child(4) > a { --i: 3; }
.bar .lt-nav .is-menu-open .wp-block-navigation-item:nth-child(5) > a { --i: 4; }
.bar .lt-nav .is-menu-open .wp-block-navigation-item:nth-child(6) > a { --i: 5; }
.bar .lt-nav .is-menu-open .wp-block-navigation-item:nth-child(n+7) > a { --i: 6; }
@keyframes lt-menu-link { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
/* The current page (a menu link to another page; the demo menu's section links get none, as in the original). */
.bar .lt-nav.wp-block-navigation .is-menu-open [aria-current="page"] { color: var(--accent); }

/* Close button: the original's menu button showing "×", in the same box of the bar (57 x 57 px at 390 px). */
.bar .lt-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: 0;
	left: calc(var(--gut) + 3 * var(--u));
	right: auto;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--u) + 1px);
	height: calc(var(--u) + 1px);
	padding: 0;
	border: 1px solid var(--line);
	border-top: 0;
	background: rgba(28, 28, 28, 0.88);
	color: var(--muted);
	font: 400 18.5px/1.5 var(--font);
	cursor: pointer;
	transition: color 0.3s;
}
.admin-bar .bar .lt-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close { top: var(--wp-admin--admin-bar--height, 32px); }
.bar .lt-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close:hover { color: var(--text); }
.bar .lt-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close svg { display: none; }
.bar .lt-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close::before { content: "×"; }

/* ---------- The Formgong plugin form, set like the original fields (contact section) ---------- */
/* The original form is a column of boxes on grid rows; the plugin's form keeps that look: a mono label in each box,
   the field below it, and a full-width "send" row. */
.c-form.lt-form { display: block; margin: 0 -1px -1px 0; overflow-y: auto; scrollbar-width: none; }
html.F .c-form.lt-form { overflow: visible; }
.lt-form .formgong-form.formgong-form {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	gap: 0;
	border: 0;
	background: transparent;
	color: var(--text);
	font: 200 16.5px/1.5 var(--font);
}
/* The section already has its heading, so the form's own heading is visually hidden. */
.lt-form .formgong-form.formgong-form > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lt-form .formgong-form.formgong-form label {
	display: grid;
	gap: 4px;
	margin: 0 -1px -1px 0;
	padding: 9px 14px 0;
	border: 1px solid var(--line);
	font: 11px/1.4 var(--mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dim);
	transition: color 0.3s, border-color 0.3s;
}
.lt-form .formgong-form.formgong-form label:focus-within { position: relative; z-index: 1; border-color: rgba(250, 250, 250, 0.6); color: var(--accent); }
.lt-form .formgong-form.formgong-form input:not([type="hidden"]):not([type="checkbox"]),
.lt-form .formgong-form.formgong-form select,
.lt-form .formgong-form.formgong-form textarea {
	display: block;
	width: 100%;
	min-height: 40px;
	padding: 4px 0 10px;
	border: 0;
	border-radius: 0;
	outline: none;
	background: transparent;
	color: var(--text);
	font: 200 16.5px/1.5 var(--font);
	letter-spacing: 0;
	text-transform: none;
	appearance: none;
}
.lt-form .formgong-form.formgong-form textarea { min-height: calc(var(--u) * 1.6); resize: none; }
.lt-form .formgong-form.formgong-form ::placeholder { color: rgba(176, 176, 183, 0.45); }
.lt-form .formgong-form.formgong-form button[type="submit"] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: calc(var(--u) + 1px);
	margin: 0 -1px -1px 0;
	padding: 0 24px;
	border: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	color: var(--text);
	font: 300 16.5px/1.5 var(--font);
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}
.lt-form .formgong-form.formgong-form button[type="submit"]::after { content: "→"; transition: transform 0.4s var(--ease); }
.lt-form .formgong-form.formgong-form button[type="submit"]:hover { background: var(--soft); color: var(--bg); }
.lt-form .formgong-form.formgong-form button[type="submit"]:hover::after { transform: translateX(6px); }
.lt-form .formgong-form.formgong-form .formgong-note { padding: 10px 0 0; font-size: 13px; color: var(--muted); }
.lt-form .formgong-missing { padding: 18px 20px; border: 1px solid var(--line); font-size: 15px; color: var(--muted); }

/* ---------- Pages, posts, lists, search, 404: the template's grid, type and colours ---------- */

/* One column of whole cells, under the bar, on the same grid lines as the home page. */
.lt-page {
	width: calc(var(--cols) * var(--u));
	margin-left: var(--gut);
	padding-top: calc(var(--u) * 2);
	min-height: calc(100vh - var(--u) * 3);
}
.lt-page .lt-head { min-height: calc(var(--u) * 2); }
.lt-page .lt-head > * { margin: 0; }
.lt-title { margin-top: 6px; font-size: clamp(28px, 2.7vw, 39px); font-weight: 200; line-height: 1; text-transform: uppercase; color: var(--soft); }
.lt-sub { gap: 0.4em; }
.lt-sub a:hover { color: var(--text); }

/* The content box: a bordered box like the home's text boxes, its text in the template's light weight. */
.lt-page .b { margin: 0 -1px -1px 0; }
.lt-box { padding: 28px 32px; }
.lt-img { margin: -28px -32px 28px; }
.lt-img img { display: block; width: 100%; height: auto; }
.lt-prose { max-width: 70ch; font-size: 16.5px; font-weight: 300; line-height: 1.6; color: var(--soft); }
.lt-prose > * + * { margin-block-start: 1em; }
.lt-prose > :first-child { margin-top: 0; }
.lt-prose h2, .lt-prose h3, .lt-prose h4 { margin-block: 1.6em 0.5em; font-weight: 300; line-height: 1.2; text-transform: uppercase; color: var(--text); }
.lt-prose h2 { font-size: 24px; }
.lt-prose h3 { font-size: 19px; }
.lt-prose ul, .lt-prose ol { padding-left: 1.2em; }
.lt-prose ul { list-style: square; }
.lt-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.lt-prose blockquote { padding-left: 20px; border-left: 1px solid var(--line); color: var(--muted); }
.lt-prose figure { margin: 0; }
.lt-prose img { max-width: 100%; height: auto; }
.lt-prose code, .lt-prose pre { font: 13px/1.6 var(--mono); }

/* Comments: under the box; the group renders empty when comments are closed, then it must keep no margin. */
.lt-page > .lt-comments { margin-top: var(--u); }
.lt-comments { font-weight: 300; color: var(--soft); }
.lt-comments:empty { display: none; }
.lt-comments input, .lt-comments textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--line); background: transparent; color: var(--text); font: 200 16.5px/1.5 var(--font); }
.lt-comments .wp-block-post-comments-form input[type="submit"] { width: auto; padding: 0 24px; height: var(--u); cursor: pointer; }

/* Lists: one box per post, four cells wide and three tall on wide screens, the full width on phones. */
.lt-posts { display: grid; grid-template-columns: repeat(var(--cols), var(--u)); grid-auto-rows: var(--u); margin: 0; padding: 0; list-style: none; }
.lt-posts > li { grid-column: span 4; grid-row: span 3; margin: 0; }
html.F .lt-posts > li { grid-column: 1 / -1; }
.lt-card { display: flex; flex-direction: column; gap: 8px; height: calc(100% + 1px); padding: 20px 24px; overflow: hidden; }
.lt-card-date { margin: 0; }
.lt-card-title { margin: 0; font-size: 20px; font-weight: 300; line-height: 1.25; text-transform: lowercase; }
.lt-card-title a:hover { color: var(--accent); }
.lt-card-sum { margin: 0; font-size: 15px; color: var(--muted); }
.lt-card-sum p { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lt-card-sum .wp-block-post-excerpt__more-text { display: none; }
.lt-pagination { gap: 1rem; margin-top: var(--u); font-weight: 300; color: var(--muted); }
.lt-pagination a:hover, .lt-pagination .current { color: var(--accent); }
.lt-empty { color: var(--muted); }

/* Search box: a field and a button on the grid, like the form. */
.lt-search { margin-top: 20px; max-width: calc(var(--u) * 6); }
.lt-search .wp-block-search__inside-wrapper { border: 1px solid var(--line); padding: 0; }
.lt-search input { height: var(--u); padding: 0 14px; border: 0; background: transparent; color: var(--text); font: 200 16.5px/1.5 var(--font); }
.lt-search button { margin: 0; padding: 0 20px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); font: 300 15px/1.5 var(--font); transition: background-color 0.3s, color 0.3s; }
.lt-search button:hover { background: var(--soft); color: var(--bg); }

/* Footer of pages and posts: the home's footer row, on the grid (on the home page it sits inside the contact section). */
html .foot.lt-foot { display: grid; grid-template-columns: repeat(var(--cols), var(--u)); grid-auto-rows: var(--u); margin: calc(var(--u) * 2) 0 calc(var(--u) * 2) var(--gut); }
.lt-foot > * { grid-column: span 3; }
html.L .lt-foot > [data-lt="f-priv"], html.L .lt-foot > [data-lt="f-terms"] { grid-column: span 2; }
html.L .lt-foot > [data-lt="f-credit"] { grid-column: -4 / -1; }
html.F .lt-foot > * { grid-column: span 3; }