/*
Theme Name: add.black
Theme URI: https://add.black
Author: add.black
Author URI: https://add.black
Description: Block theme for the add.black AI-native web studio. Brutalist-meets-terminal design: mono display type, hard edges, acid accent. Pairs with the "add.black Blocks" plugin, which provides the hero, marquee, section, pillars, compare, timeline, process and journal blocks used by the templates.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.3.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: addblack-theme
Tags: block-theme, full-site-editing, dark, one-column, blog, portfolio
*/

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
	font-feature-settings: 'ss01', 'ss02';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-ink); }

img { max-width: 100%; height: auto; }

/* Top-level template regions sit flush: sections draw their own borders. */
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.wp-site-blocks > main { flex: 1 0 auto; }
.ab-canvas > *,
.ab-canvas > .wp-block-post-content > * { margin-block: 0; }

/* ---------- Header / nav ---------- */
.wp-site-blocks > header.wp-block-template-part,
.editor-styles-wrapper header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; }
}
.ab-nav {
	background: color-mix(in oklab, var(--wp--preset--color--base) 88%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.ab-nav .nav-inner {
	min-height: 64px;
	gap: 24px;
}
.ab-nav .nav-links { flex: 1 1 auto; }
.ab-nav .nav-links .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	transition: color .15s ease;
}
.ab-nav .nav-links .wp-block-navigation-item__content:hover,
.ab-nav .nav-links .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast); }
.ab-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px var(--ab-gutter, 20px);
}
.ab-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 28px;
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--contrast);
}
.ab-nav .wp-block-navigation__responsive-container-open,
.ab-nav .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--contrast); }
.ab-nav .nav-cta-wrap { flex: 0 0 auto; }
@media (max-width: 600px) {
	.ab-nav .nav-cta-wrap { display: none; }
	.ab-nav .nav-links { flex: 0 0 auto; }
}

/* ---------- Footer ---------- */
.ab-footer {
	padding: 64px 0 40px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	color: var(--wp--preset--color--contrast-2);
	border-top: 1px solid var(--wp--preset--color--line);
}
.ab-footer .footer-top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 48px;
	margin-bottom: 64px;
}
@media (max-width: 720px) {
	.ab-footer .footer-top { grid-template-columns: 1fr 1fr; }
	.ab-footer .footer-top > :first-child { grid-column: 1 / -1; }
}
.ab-footer .footer-top > * { margin: 0; }
.ab-footer .footer-col > * { margin: 0; }
.ab-footer .footer-col h6, .ab-footer .footer-col .footer-title { margin-bottom: 16px; }
.ab-footer .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ab-footer .footer-col ul li { margin: 0; }
.ab-footer a { color: var(--wp--preset--color--contrast-2); }
.ab-footer a:hover { color: var(--wp--preset--color--contrast); }
.ab-footer .footer-manifesto {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.ab-footer .footer-bot {
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--line);
	gap: 16px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.ab-footer .footer-bot p { margin: 0; }

/* ---------- Template regions built from core groups ---------- */
.ab-template-hero {
	padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 64px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.ab-template-hero .wp-block-query-title,
.ab-template-hero .wp-block-post-title { margin: 0; }
.ab-template-hero .page-sub,
.ab-template-hero .wp-block-term-description { margin-top: 24px; color: var(--wp--preset--color--contrast-2); max-width: 54ch; font-size: clamp(16px, 1.4vw, 20px); }
.ab-template-hero .wp-block-term-description p { margin: 0; }
.ab-template-hero .is-style-ab-eyebrow { margin: 0 0 20px; }
.ab-template-hero .blog-filters { margin-top: 40px; }
.ab-template-section {
	padding: clamp(64px, 9vw, 120px) 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.ab-template-section.no-divider { border-bottom: 0; }
.wrap > .wp-block-post-featured-image.post-cover { margin: 48px 0 0; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Single post ---------- */
.post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 64px;
}
.post-layout:has(> .post-toc) { grid-template-columns: 200px minmax(0, 1fr); }
@media (max-width: 880px) {
	.post-layout:has(> .post-toc) { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
.post-layout > * { margin: 0; }
.related-strip { margin-top: 96px; }
.related-strip > * { margin: 0; }

/* Post body typography (also used for normal page content) */
.post-body-copy,
.ab-prose {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(17px, 1.6vw, 19px);
	line-height: 1.7;
	color: var(--wp--preset--color--contrast-2);
}
.post-body-copy { max-width: 68ch; }
.post-body-copy > *,
.ab-prose > * { margin-block: 0 22px; }
.post-body-copy h2,
.ab-prose h2 {
	font-weight: 500;
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
	margin: 56px 0 20px;
	scroll-margin-top: 96px;
}
.post-body-copy h3,
.ab-prose h3 { color: var(--wp--preset--color--contrast); margin: 40px 0 16px; line-height: 1.15; }
.post-body-copy > :first-child,
.ab-prose > :first-child { margin-top: 0; }
.post-body-copy strong,
.ab-prose strong { color: var(--wp--preset--color--contrast); font-weight: 500; }
.post-body-copy a:not(.wp-element-button),
.ab-prose a:not(.wp-element-button) {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: 3px;
}
.post-body-copy a:not(.wp-element-button):hover,
.ab-prose a:not(.wp-element-button):hover { color: var(--wp--preset--color--accent); }
.post-body-copy ul:not([class*='is-style-']),
.ab-prose ul:not([class*='is-style-']) {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.post-body-copy ul:not([class*='is-style-']) li,
.ab-prose ul:not([class*='is-style-']) li { padding-left: 22px; position: relative; }
.post-body-copy ul:not([class*='is-style-']) li::before,
.ab-prose ul:not([class*='is-style-']) li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
}
.post-body-copy ol,
.ab-prose ol { padding-left: 1.4em; }
.post-body-copy ol li::marker,
.ab-prose ol li::marker { color: var(--wp--preset--color--accent); font-family: var(--wp--preset--font-family--mono); }
.post-body-copy :not(pre) > code,
.ab-prose :not(pre) > code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85em;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--line-2);
	padding: 2px 6px;
}
.post-body-copy blockquote,
.ab-prose blockquote,
.post-body-copy .wp-block-pullquote,
.ab-prose .wp-block-pullquote {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	border: 0;
	border-left: 2px solid var(--wp--preset--color--accent);
	padding: 0 0 0 28px;
	margin: 44px 0;
	text-align: left;
}
.post-body-copy .wp-block-pullquote blockquote,
.ab-prose .wp-block-pullquote blockquote { border: 0; padding: 0; margin: 0; }
.post-body-copy blockquote p,
.ab-prose blockquote p { margin: 0; }
.post-body-copy blockquote cite,
.ab-prose blockquote cite,
.post-body-copy .wp-block-pullquote cite,
.ab-prose .wp-block-pullquote cite {
	display: block;
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--mono);
	font-style: normal;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
}
.post-body-copy figure,
.ab-prose figure { margin: 40px 0; }
.post-body-copy figcaption,
.ab-prose figcaption { margin-top: 10px; }
.post-body-copy hr,
.ab-prose hr { border: 0; border-top: 1px solid var(--wp--preset--color--line); margin: 48px 0; }
.post-body-copy table,
.ab-prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.post-body-copy th, .post-body-copy td,
.ab-prose th, .ab-prose td { border: 1px solid var(--wp--preset--color--line-2); padding: 10px 14px; text-align: left; }

/* Normal pages: prose column with gutters */
.ab-prose { padding-inline: var(--ab-gutter, 20px); }
.ab-prose > .alignfull { margin-inline: calc(-1 * var(--ab-gutter, 20px)); }

/* ---------- 404 / search ---------- */
.ab-404 .bigword { margin-bottom: 32px; }
.wp-block-search__input {
	background: transparent;
	border: 1px solid var(--wp--preset--color--line-2);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	padding: 14px 16px;
	border-radius: 0;
}
.wp-block-search__button { margin-left: 8px; }

/* ---------- Editor ---------- */
.editor-styles-wrapper .reveal { animation: none; opacity: 1; transform: none; }

/* ---------- Anchors under the sticky header ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: calc(72px + var(--wp-admin--admin-bar--height, 0px)); }

/* CTA columns inside the inverse section */
.ab-cta-columns { margin: 0; }
.ab-cta-columns .section-header { margin-bottom: 40px; }
.ab-cta-columns .wp-block-buttons { margin-top: 0; }

/* CTA at the end of posts: no landing-page section number. */
.ab-single .section.is-inverse .section-tag .num { display: none; }

/* ==========================================================================
   Contact Form 7
   ========================================================================== */
.wpcf7 { max-width: 720px; }
.wpcf7-form { display: flex; flex-direction: column; gap: 22px; }
.wpcf7-form > p { margin: 0; }
.wpcf7-form label {
	display: block;
	font-family: var(--ab-font-mono, monospace);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ab-ink-dim, #a8a59c);
}
.wpcf7-form label br { display: none; }
.wpcf7-form-control-wrap { display: block; margin-top: 10px; }
.wpcf7 input[type='text'],
.wpcf7 input[type='email'],
.wpcf7 input[type='tel'],
.wpcf7 input[type='url'],
.wpcf7 input[type='number'],
.wpcf7 input[type='date'],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	color: var(--ab-ink, #f3f1ea);
	border: 1px solid var(--ab-ink-faint, #8a867c);
	border-radius: 0;
	padding: 15px 16px;
	font-family: var(--ab-font-display, sans-serif);
	font-size: 17px;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
	transition: border-color .15s ease, background .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.wpcf7 textarea { min-height: 170px; resize: vertical; }
.wpcf7 select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
	background-size: 6px 6px;
	background-repeat: no-repeat;
	padding-right: 44px;
}
.wpcf7 select option { background: var(--ab-bg, #0a0a0a); color: var(--ab-ink, #f3f1ea); }
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: var(--ab-ink-faint, #5a574f); text-transform: none; }
.wpcf7 input:hover,
.wpcf7 select:hover,
.wpcf7 textarea:hover { border-color: var(--ab-ink-dim, #a8a59c); }
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--ab-accent, #c8ff00);
	background: color-mix(in oklab, var(--ab-accent, #c8ff00) 4%, transparent);
}

/* Checkboxes, radios, acceptance */
.wpcf7-checkbox,
.wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.wpcf7-list-item { margin: 0; }
.wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--ab-ink, #f3f1ea);
	border: 1px solid var(--ab-line-2, #2a2823);
	padding: 10px 14px;
	cursor: pointer;
}
.wpcf7-acceptance .wpcf7-list-item label { border: 0; padding: 0; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ab-ink-dim, #a8a59c); }
.wpcf7 input[type='checkbox'],
.wpcf7 input[type='radio'] { accent-color: var(--ab-accent, #c8ff00); width: 16px; height: 16px; margin: 0; }

/* Submit */
.wpcf7 input[type='submit'],
.wpcf7 button[type='submit'] {
	font-family: var(--ab-font-mono, monospace);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
	padding: 17px 28px;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--ab-accent, #c8ff00);
	color: var(--ab-accent-ink, #0a0a0a);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .12s ease;
	-webkit-appearance: none;
	appearance: none;
}
.wpcf7 input[type='submit']:hover,
.wpcf7 button[type='submit']:hover { background: var(--ab-ink, #f3f1ea); color: var(--ab-bg, #0a0a0a); }
.wpcf7 input[type='submit']:active { transform: translateY(1px); }
.wpcf7 input[type='submit']:disabled { opacity: .5; cursor: not-allowed; }
.wpcf7 .wpcf7-spinner { background-color: var(--ab-ink-faint, #5a574f); margin: 0 0 0 16px; vertical-align: middle; }

/* Validation + response */
.wpcf7 .wpcf7-not-valid { border-color: #ff5a4e !important; }
.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 8px;
	font-family: var(--ab-font-mono, monospace);
	font-size: 12px;
	letter-spacing: .02em;
	text-transform: none;
	color: #ff7a70;
}
.wpcf7 form .wpcf7-response-output {
	margin: 4px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--ab-line-2, #2a2823);
	font-family: var(--ab-font-mono, monospace);
	font-size: 13px;
	color: var(--ab-ink, #f3f1ea);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--ab-accent, #c8ff00); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { border-color: #ffb800; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { border-color: #ff5a4e; }

/* Two fields side by side: wrap them in <div class="ab-form-row">...</div> in the form template */
.wpcf7 .ab-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .wpcf7 .ab-form-row { grid-template-columns: 1fr; } }

/* Inside light (inverse) sections the variables flip, so the form adapts automatically. */

/* Contact page */
.ab-contact-columns .section-header { margin-bottom: 28px; }
.ab-contact-columns .cta-side + .is-style-ab-sub { margin-top: 28px; font-size: 15px; }

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */
.ab-skip-link {
	position: absolute;
	left: 12px;
	top: -100px;
	z-index: 100000;
	padding: 12px 18px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.ab-skip-link:focus { top: calc(12px + var(--wp-admin--admin-bar--height, 0px)); outline: 2px solid var(--wp--preset--color--contrast); outline-offset: 2px; }
main#main:focus { outline: none; }

/* Visible focus everywhere: 2px+, 3:1 against dark and light surfaces. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--wp--preset--color--base);
}
.is-inverse :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.synergy :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--base);
	box-shadow: 0 0 0 5px var(--wp--preset--color--accent);
}

/* Comfortable touch targets in nav + footer */
.ab-nav .nav-links .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 44px; }
.ab-footer .footer-col ul a,
.ab-legal-links a { display: inline-flex; align-items: center; min-height: 28px; }

/* Footer column titles are h2 for a correct heading outline */
.ab-footer .footer-title {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .15em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast-3);
	margin: 0 0 12px;
}
.ab-legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
.ab-legal-links a { color: var(--wp--preset--color--contrast-2); text-decoration: underline; text-underline-offset: 3px; }
.ab-legal-links a:hover { color: var(--wp--preset--color--contrast); }