/*
 * WordPress additions to the Halftone stylesheet (assets/css/halftone.css, the template's own CSS as it is).
 * 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, <main> and the patterns follow each other with no gap, as in the original. */
.wp-site-blocks > * { margin-block-start: 0; }
.ht-part { display: contents; }
.ht-main.ht-main > *, .top.top > * { margin-block: 0; }
.ht-page: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; }

/* WordPress locks the page while its menu overlay is open; the original drop-down menu leaves the page as it is
   (no scroll lock, the scrollbar stays). */
html.has-modal-open.has-modal-open { overflow: visible; }

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

/* ---------- Header: the "Menu" cell holds the Navigation block ---------- */
/* The cell is the original button.t-menu (white, padding 0 24 units); the block's button fills it and reads "Menu"
   with the two-line icon after it, as the original. */
.ht-menu-cell .ht-nav { position: static; width: 100%; height: 100%; gap: 0; }
.ht-nav .wp-block-navigation__responsive-container-open,
.ht-nav.wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	font-stretch: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}
.ht-nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) svg { display: none; }
.ht-nav .wp-block-navigation__responsive-container-open::before { content: "Menu"; }
.ht-nav .wp-block-navigation__responsive-container-close::before { content: "Close"; }
.ht-nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close)::after {
	content: "";
	display: inline-block;
	box-sizing: border-box;
	width: 14px;
	height: 6px;
	border-top: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
}
/* While the menu is open "Close" (in the overlay) takes the cell's place; the cell's own button steps aside. */
/* The overlay sits below the cell (see below), so the cell turns see-through and shows "Close" in its place. */
.ht-menu-cell:has(.is-menu-open) { background: transparent; }
.ht-menu-cell:has(.is-menu-open) .wp-block-navigation__responsive-container-open { visibility: hidden; }

/* ---------- The open menu = the original nav.menu.open ----------
   Measured on halftone.formgong.com (2026-10-15) at 390x844 and 1440x900. A white panel from the top of the screen,
   under the header bar (which stays), with a hairline at its foot: padding (bar + 12 units + 40px) gutter 40px. Wide:
   two columns 1fr 1fr with a 40px gap, the five big links left (36px at 1440, rows of 44px), the studio line and the
   legal links right. Narrow (<= 760px): one column, first link at (16, 82.4), links 30px with rows of 38px, no
   underline, then the line (15px) at y 312 and the legal links (11px, #555) at y 388; panel 442px high. "Close" is
   in the "Menu" cell. The overlay sits in the header's stacking context below the three cells (z-index -1), as the
   original menu (z 55) below the header (z 60). The doubled classes beat WordPress's own overlay rules. */
.ht-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	position: fixed;
	inset: 0 0 auto;
	z-index: -1;
	display: block;
	height: auto;
	padding: calc(var(--bar) + 12 * var(--u) + 40px) var(--gutter) 40px;
	overflow: visible;
	background: var(--paper);
	color: var(--ink);
	border-bottom: 1px solid var(--rule);
	font: 400 var(--fs-ui)/1.4 var(--body);
	font-stretch: normal;
	letter-spacing: normal;
	text-transform: none;
	animation: ht-menu-open .7s var(--ease) both;
}
@keyframes ht-menu-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.ht-nav.wp-block-navigation .is-menu-open.is-menu-open :is(.wp-block-navigation__responsive-close, .wp-block-navigation__responsive-dialog, .wp-block-navigation__responsive-container-content) {
	position: static;
	display: block;
	width: auto;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0;
}
.ht-nav.wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation__container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: auto;
	align-items: start;
	gap: 0 40px;
	width: 100%;
	margin: 0;
	padding: 0;
}
.ht-nav.wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation-item { display: block; margin: 0; padding: 0; color: inherit; }
.ht-nav.wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation-item__content { padding: 0; color: inherit; text-decoration: none; }
.ht-nav.wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation__submenu-icon { display: none; }
.ht-nav.wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation__submenu-container {
	position: static;
	display: flex;
	flex-direction: row;
	gap: 20px;
	width: auto;
	min-width: 0;
	height: auto;
	margin: 24px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: #555;
	font-size: var(--fs-small);
	line-height: 1.15;
	opacity: 1;
	visibility: visible;
	overflow: visible;
}
/* The five big links: the original <ul class="d"> links (display face, 125% wide, uppercase, line-height 1). */
.ht-nav.wp-block-navigation .is-menu-open.is-menu-open li.ht-mlink { grid-column: 1; }
.ht-nav.wp-block-navigation .is-menu-open.is-menu-open li.ht-mlink > .wp-block-navigation-item__content {
	display: block;
	padding: 4px 0;
	font-family: var(--display);
	font-stretch: 125%;
	font-weight: 600;
	font-size: var(--fs-h2);
	line-height: 1;
	text-transform: uppercase;
	transition: color .3s;
}
.ht-nav.wp-block-navigation .is-menu-open.is-menu-open li.ht-mlink > .wp-block-navigation-item__content:hover { color: var(--accent); }
/* The studio line and the legal links (the original's right column), only in the open menu. */
.ht-nav.wp-block-navigation .is-menu-open.is-menu-open li.ht-mside { grid-column: 2; grid-row: 1 / span 5; }
.ht-nav.wp-block-navigation .is-menu-open.is-menu-open li.ht-mside > .wp-block-navigation-item__content {
	display: block;
	max-width: 26em;
	font-size: var(--fs-lead);
	line-height: 1.15;
	cursor: text;
	pointer-events: none;
}
.ht-nav.wp-block-navigation .is-menu-open.is-menu-open li.ht-mside li > .wp-block-navigation-item__content { display: block; color: #555 !important; }
/* Without the overlay (never shown: the menu is "always" an overlay) nothing but the button would show. */
.ht-nav .wp-block-navigation__responsive-container:not(.is-menu-open) li.ht-mside { display: none; }

/* "Close": where "Menu" was, in the same white cell (top 12 units, the gutter, a third of the bar). */
.ht-nav.wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: calc(12 * var(--u));
	left: var(--gutter);
	right: auto;
	width: calc((100% - 2 * var(--gutter)) / 3);
	height: var(--bar);
	padding: 0 calc(24 * var(--u));
	background: var(--paper);
	font-size: var(--fs-small);
	font-family: var(--display);
	font-stretch: 125%;
	font-weight: 600;
	text-transform: uppercase;
}
.admin-bar .ht-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { top: var(--wp-admin--admin-bar--height, 32px); }
.admin-bar .ht-nav.wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close { top: calc(var(--wp-admin--admin-bar--height, 32px) + 12 * var(--u)); }

@media (max-width: 760px) {
	.admin-bar .top { top: calc(var(--wp-admin--admin-bar--height, 46px) + 10px); }
	.ht-nav.wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation__container { grid-template-columns: 1fr; }
	.ht-nav.wp-block-navigation .is-menu-open.is-menu-open li.ht-mside { grid-column: 1; grid-row: auto; margin-top: 40px; }
	.ht-nav.wp-block-navigation .is-menu-open.is-menu-open li.ht-mlink > .wp-block-navigation-item__content { font-size: 30px; }
	.ht-nav.wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close { top: 10px; padding: 0 12px; font-size: 11px; }
	.admin-bar .ht-nav.wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close { top: calc(var(--wp-admin--admin-bar--height, 46px) + 10px); }
}

/* ---------- The Formgong plugin form, set like the original card form ---------- */
/* The original: fields under a 1.5px ink line, the placeholder ("your name*") in the body size, a "*required" line,
   the black "Submit" bar and a status line. The plugin's labels carry the field name where the placeholder was. */
.ht-form .formgong-form.formgong-form { display: block; max-width: none; margin: 0; padding: 0 0 calc(10px + 1.4 * var(--fs-small)); border: 0; background: transparent; color: var(--ink); font: 400 var(--fs-body)/1.3 var(--body); }
.ht-form .formgong-form.formgong-form > * { margin: 0; }
/* The card already has its heading, so the form's own heading is visually hidden. */
.ht-form .formgong-form.formgong-form > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ht-form .formgong-form.formgong-form .formgong-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ht-form .formgong-form.formgong-form > label {
	display: flex;
	align-items: center;
	gap: .4em;
	padding: 12px 0 8px;
	border-bottom: 1.5px solid var(--ink);
	font: 400 var(--fs-body)/1.3 var(--body);
	color: var(--ink);
}
.ht-form .formgong-form.formgong-form > label + label { margin-top: 6px; }
.ht-form .formgong-form.formgong-form > label:focus-within { border-color: var(--paper); }
.ht-form .formgong-form.formgong-form > label:has(:user-invalid) { border-color: var(--error); color: var(--error); }
.ht-form .formgong-form.formgong-form :is(input:not([type="hidden"]):not([type="checkbox"]), select, textarea) {
	flex: 1;
	display: block;
	min-width: 0;
	width: 100%;
	height: 1.3em;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: none;
	background: transparent;
	color: var(--ink);
	font: inherit;
	box-shadow: none;
	resize: none;
}
/* The message row is as high as the original 5.5em textarea with its line. */
.ht-form .formgong-form.formgong-form > label:has(textarea) { flex-direction: column; align-items: stretch; gap: 0; height: calc(5.5em + 1px); }
.ht-form .formgong-form.formgong-form textarea { flex: 1; height: auto; }
.ht-form .formgong-form.formgong-form button[type="submit"] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: calc(var(--bar) + 6px);
	margin-top: calc(26px + 1.4 * var(--fs-small));
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--display);
	font-stretch: 125%;
	font-weight: 600;
	font-size: max(11px, calc(16 * var(--u)));
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .3s, color .3s;
}
.ht-form .formgong-form.formgong-form button[type="submit"]:hover { background: var(--paper); color: var(--ink); }
.ht-form .formgong-form.formgong-form .formgong-note { margin-bottom: 12px; font-size: var(--fs-small); }
.ht-form .formgong-missing { margin: 0; padding: 12px 0; border-bottom: 1.5px solid var(--ink); font-size: var(--fs-small); }

/* ---------- Pages, posts, lists, search, 404: the template's type, gutter and colours ---------- */
/* A big orange title in the display face (as the footer studios and the project titles), then a row: the small meta
   cell (date, categories) in the first quarter, the text in the body face across the rest. The header bar floats over the top, as on the home page. */
.ht-page { padding-top: calc(var(--bar) + 12 * var(--u) + 80px); }
.ht-title { margin: 0; padding: 0 var(--gutter) calc(60 * var(--u) + 20px); color: var(--accent); font-size: max(32px, var(--fs-h1)); line-height: .95; overflow-wrap: anywhere; }
.ht-title a:hover { color: var(--ink); }
.ht-body { display: grid; grid-template-columns: 1fr 3fr; gap: 24px; margin: 0 var(--gutter); padding: 24px 0 calc(80 * var(--u) + 20px); border-top: 1.5px solid var(--ink); }
.ht-meta { font-family: var(--display); font-stretch: 125%; font-weight: 600; text-transform: uppercase; font-size: var(--fs-small); line-height: 1.5; }
.ht-meta > * { margin: 0; }
.ht-meta a:hover { color: var(--accent); }
.ht-content { min-width: 0; }
.ht-content > * { margin-block: 0; }
.ht-img { margin: 0 0 30px; }
.ht-img img { display: block; width: 100%; height: auto; }

.ht-prose { max-width: 40em; font-size: var(--fs-body); line-height: 1.5; }
.ht-prose > * + * { margin-block-start: 1em; }
.ht-prose > :first-child { margin-top: 0; }
.ht-prose :is(h2, h3, h4) { margin-block: 1.6em .5em; font-family: var(--display); font-stretch: 125%; font-weight: 600; text-transform: uppercase; line-height: 1.05; }
.ht-prose h2 { font-size: max(20px, calc(32 * var(--u))); }
.ht-prose h3 { font-size: max(16px, calc(24 * var(--u))); }
.ht-prose :is(ul, ol) { padding-left: 1.2em; }
.ht-prose ul { list-style: square; }
.ht-prose a { border-bottom: 1px solid currentColor; }
.ht-prose a:hover { color: var(--accent); }
.ht-prose blockquote { margin-inline: 0; padding-left: 20px; border-left: 4px solid var(--accent); font-size: var(--fs-lead); line-height: 1.15; }
.ht-prose figure { margin: 0; }
.ht-prose img { max-width: 100%; height: auto; }
.ht-prose :is(code, pre) { font-size: .875em; }

/* Comments under the row; the group renders empty when comments are closed, then it keeps no margin. */
.ht-page > .ht-comments { margin: 0 var(--gutter); padding: 0 0 calc(80 * var(--u) + 20px); }
.ht-comments:empty { display: none; }
.ht-comments :is(input:not([type="submit"]), textarea) { width: 100%; padding: 12px 0 8px; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 400 var(--fs-body)/1.3 var(--body); }
.ht-comments .wp-block-post-comments-form input[type="submit"] { height: calc(var(--bar) + 6px); padding: 0 40px; border: 0; border-radius: 0; background: var(--ink); color: var(--paper); font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: max(11px, calc(16 * var(--u))); text-transform: uppercase; cursor: pointer; }
.ht-comments .wp-block-post-comments-form input[type="submit"]:hover { background: var(--accent); color: var(--ink); }

/* Lists: one row per post (date | title and summary). */
.ht-posts { margin: 0; padding: 0; list-style: none; }
.ht-posts > li { margin: 0; }
.ht-posts .ht-body { padding-bottom: 24px; }
.ht-card-title { margin: 0; font-size: max(16px, calc(32 * var(--u))); line-height: 1.05; }
.ht-card-title a:hover { color: var(--accent); }
.ht-card-sum { margin: 10px 0 0; max-width: 46em; font-size: var(--fs-body); line-height: 1.4; }
.ht-card-sum p { margin: 0; }
.ht-card-sum .wp-block-post-excerpt__more-text { display: none; }
.ht-pagination { gap: 20px; margin: 0 var(--gutter); padding: 24px 0 calc(80 * var(--u) + 20px); border-top: 1.5px solid var(--ink); font-family: var(--display); font-stretch: 125%; font-weight: 600; text-transform: uppercase; font-size: var(--fs-small); }
.ht-pagination a:hover, .ht-pagination .current { color: var(--accent); }
.ht-empty { margin: 0; padding: 0 var(--gutter) calc(80 * var(--u) + 20px); font-size: var(--fs-body); }

/* Search: a field under the ink line and the black bar, like the card form. */
.ht-searchbar { padding: 0 var(--gutter) calc(60 * var(--u) + 20px); }
.ht-search { max-width: 640px; margin: 0; }
.ht-content .ht-search { margin-top: 30px; }
.ht-search .wp-block-search__inside-wrapper { gap: 12px; padding: 0; border: 0; background: none; }
.ht-search input { min-width: 0; padding: 12px 0 8px; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 400 var(--fs-body)/1.3 var(--body); }
.ht-search input:focus { outline: none; border-color: var(--accent); }
.ht-search button { min-height: calc(var(--bar) + 6px); margin: 0; padding: 0 30px; border: 0; border-radius: 0; background: var(--ink); color: var(--paper); font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: max(11px, calc(16 * var(--u))); text-transform: uppercase; }
.ht-search button:hover { background: var(--accent); color: var(--ink); }

@media (max-width: 760px) {
	.ht-page { padding-top: 110px; }
	.ht-body { grid-template-columns: 1fr; gap: 12px; padding-bottom: 50px; }
	.ht-page > .ht-comments, .ht-pagination, .ht-empty { padding-bottom: 50px; }
}