/*
Theme Name: AE Drafting
Theme URI: https://www.aedrafting.com/
Author: AE Drafting / The 5X Company
Description: Custom block theme for the AE Drafting landing pages. Core blocks only; every page section ships as a block pattern. Design tokens from tokens/design-tokens.json (2026-08-14 export). Colors, fonts and layout widths live in theme.json; this stylesheet carries the component styling that core block attributes cannot express (scroll-driven step animation, graph-paper panel, glass form card, exact type scale).
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ae-drafting
*/

/* ==========================================================================
   Base — mirrors css/ae-drafting.css from the export
   ========================================================================== */

::selection { background: #FFC20E; color: #2B2F36; }

/* Jump targets must not land under the sticky header (BUILD-NOTES > Anchors). */
[id] { scroll-margin-top: 58px; }

/* Shared centered column. Source: max-width 1080/1000 (content-box) +
   padding 0 22px. Unified at 1080px content width per BUILD-NOTES
   "pick one before building patterns — 1080px recommended". */
.ae-in {
	box-sizing: content-box;
	max-width: 1080px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 22px;
	padding-right: 22px;
}

/* Grids (breakpoints are the tokens' recommendation; source has none) */
.ae-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ae-grid-3.ae-gap-18 { gap: 18px; }
.ae-grid-3.ae-gap-22 { gap: 22px; }
.ae-grid-3.ae-gap-28 { gap: 28px; }
.ae-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

/* Buttons — two styles cover the whole site (COMPONENTS.md) */
.ae-btn .wp-block-button__link {
	background: #FFC20E;
	color: #2B2F36;
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	border-radius: 0;
	text-decoration: none;
	line-height: normal;
}
.ae-btn--h .wp-block-button__link    { font-size: 13px; padding: 9px 14px; }
.ae-btn--hero .wp-block-button__link { font-size: 17px; padding: 16px 24px; }
.ae-btn--hero-p .wp-block-button__link { font-size: 16px; padding: 15px 24px; }
.ae-btn--mid .wp-block-button__link  { font-size: 17px; padding: 16px 26px; }
.ae-btn--row .wp-block-button__link  { font-size: 15px; padding: 12px 20px; white-space: nowrap; }
.ae-btn--ft .wp-block-button__link   { font-size: 14px; padding: 12px 18px; }

.cta-outline .wp-block-button__link {
	background: transparent;
	color: #FFFFFF;
	border: 2px solid #FFFFFF;
	border-radius: 0;
	padding: 16px 22px;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	line-height: normal;
}
.cta-outline .wp-block-button__link:hover { background: #FFFFFF; color: #1B2A41; }
.cta-outline--p .wp-block-button__link { padding: 15px 22px; }

/* The source button rows are flex containers whose anchor children stretch
   to equal height; core button links are inline-block and would not. */
.wp-block-buttons .wp-block-button { display: flex; }
.wp-block-buttons .wp-block-button__link { display: flex; align-items: center; }

/* ==========================================================================
   Header
   ========================================================================== */

.ae-header { z-index: 20; }
.ae-header-in {
	padding-top: 12px;
	padding-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.ae-header-right { display: flex; align-items: center; gap: 14px; }
.ae-wordmark { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 18px; letter-spacing: .01em; line-height: normal; }
.ae-header-mail { margin: 0; line-height: normal; }
.ae-header-mail a { color: #FFFFFF; font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 600; }

/* ==========================================================================
   Hero
   ========================================================================== */

.ae-hero-in { padding-top: 104px; padding-bottom: 112px; }
.ae-hero--portfolio .ae-hero-in { padding-top: 96px; padding-bottom: 96px; }

.ae-hero h1 {
	margin: 14px 0 0;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 900;
	font-size: 38px;
	line-height: 1.06;
	letter-spacing: -.02em;
	max-width: 600px;
	color: #FFFFFF;
}
.ae-hero--asbuilt h1 { font-size: 40px; }
.ae-hero--local h1 { font-size: 47px; line-height: 1.02; max-width: 640px; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.ae-hero--portfolio h1 { font-size: 46px; line-height: 1.02; max-width: 760px; }

.ae-hero-sub { margin: 20px 0 0; font-size: 20px; line-height: 1.45; color: rgba(255,255,255,.92); max-width: 600px; }
.ae-hero--asbuilt .ae-hero-sub { max-width: 560px; }
.ae-hero--local .ae-hero-sub { margin: 18px 0 0; font-size: 19px; max-width: 520px; color: #FFFFFF; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.ae-hero--portfolio .ae-hero-sub { margin: 16px 0 0; font-size: 18px; color: rgba(255,255,255,.9); max-width: 640px; }

.ae-hero-ctas { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.ae-hero--local .ae-hero-ctas { margin-top: 26px; }
.ae-hero--portfolio .ae-hero-ctas { margin-top: 24px; }

/* WP's layout CSS zeroes margin-block-start on a flow container's first
   child at (0,2,0) specificity; these two margins are design-intent, so
   they are restated at higher specificity. */
.wp-block-cover .ae-hero-in > h1:first-child { margin-block-start: 14px; }
.ae-hero-ctas-wrap > .ae-hero-ctas:first-child { margin-block-start: 28px; }
.ae-hero--local .ae-hero-ctas-wrap > .ae-hero-ctas:first-child { margin-block-start: 26px; }

.ae-hero-proof {
	margin: 26px 0 0;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 15px;
	line-height: 1.7;
	color: #FFC20E;
	font-weight: 600;
}
.ae-hero--asbuilt .ae-hero-proof { font-size: 12px; line-height: 1.6; letter-spacing: .06em; }
.ae-hero--local .ae-hero-proof { margin-top: 24px; font-size: 12px; line-height: 1.6; font-weight: 400; letter-spacing: 0; text-shadow: 0 1px 8px rgba(0,0,0,.7); }

.ae-jumpnav {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
}
.ae-jumpnav p { margin: 0; }
.ae-jumpnav a { color: #FFC20E; text-decoration: none; }

/* ADU hero parallax headroom (source: top -12%, height 124% on #hero-media) */
.ae-hero-parallax img.wp-block-cover__image-background { top: -12%; height: 124%; will-change: transform; }

/* Core gives .wp-block-cover 1em padding; the source sections have none —
   all spacing comes from the inner .ae-in wrappers. */
.wp-block-cover { padding: 0; }

/* Covers whose height is content- or ratio-driven, not the 430px default */
.ae-cover-auto.wp-block-cover { min-height: 0; }
/* ADU mid CTA: source image is in-flow, section height = image natural ratio (743x667) */
.ae-cover-adu-mid.wp-block-cover { aspect-ratio: 743 / 667; }

/* ==========================================================================
   "What you get" graph-paper panel
   ========================================================================== */

.ae-wyg-in { padding-top: 64px; padding-bottom: 64px; }
.ae-wyg h2 { margin: 0 0 8px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -.01em; text-align: center; }
.ae-sect-sub { margin: 0 auto 34px; font-size: 16px; max-width: 760px; text-align: center; }

.ae-graph-panel {
	border: 1px solid #C7CBD1;
	background-color: #FBFCFD;
	background-image: linear-gradient(#E4E9EF 1px, transparent 1px), linear-gradient(90deg, #E4E9EF 1px, transparent 1px);
	background-size: 22px 22px;
	padding: 44px 40px;
	display: flex;
	flex-direction: column;
	gap: 34px;
}
.ae-wyg-item p:first-child { margin: 0 0 11px; font-size: 17px; line-height: 1.45; text-align: center; }

/* Dimension-line label: end ticks + centered rule, drawn with pseudo-elements */
.ae-rule {
	display: flex;
	align-items: center;
	column-gap: 12px;
	margin: 0;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	color: #1B2A41;
	line-height: normal;
}
.ae-rule::before,
.ae-rule::after { content: ""; flex: 1 1 0%; height: 18px; }
.ae-rule::before {
	background:
		linear-gradient(#1B2A41, #1B2A41) left center / 2px 18px no-repeat,
		linear-gradient(#1B2A41, #1B2A41) 0 center / 100% 2px no-repeat;
}
.ae-rule::after {
	background:
		linear-gradient(#1B2A41, #1B2A41) right center / 2px 18px no-repeat,
		linear-gradient(#1B2A41, #1B2A41) 0 center / 100% 2px no-repeat;
}

/* ==========================================================================
   "How it works" — scroll-driven, CSS only (classes match the export)
   ========================================================================== */

.ae-hiw-in { padding-top: 64px; padding-bottom: 64px; }
.ae-hiw h2 { margin: 0 0 40px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -.01em; text-align: center; }
.ae-steps { max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
.ae-steps-inner { position: relative; padding-left: 58px; counter-reset: aestep; }
.ae-steps-inner::before { content: ""; position: absolute; left: 18px; top: 8px; bottom: 8px; width: 2px; background: #D5D9DE; }

@keyframes aeGrow { from { height: 0 } to { height: 100% } }
@keyframes aeMove { from { top: 0% } to { top: 97% } }
@keyframes aeReveal { from { opacity: 0; transform: translateX(-12px) } to { opacity: 1; transform: translateX(0) } }

.ae-sd-line {
	position: absolute; left: 18px; top: 8px; width: 2px; background: #1B2A41;
	height: 0; animation: aeGrow linear both; animation-timeline: view(); animation-range: entry 65% contain 30%;
}
.ae-sd-pen {
	position: absolute; left: 12px; width: 14px; height: 14px; background: #1B2A41; transform: rotate(45deg); z-index: 2;
	top: 0; animation: aeMove linear both; animation-timeline: view(); animation-range: entry 65% contain 30%;
}
.ae-sd-step { position: relative; padding-bottom: 48px; opacity: 0; animation: aeReveal linear both; animation-timeline: view(); }
.ae-sd-step.s1 { opacity: 1; animation: none; }
.ae-sd-step.s2 { animation-range: entry 81% entry 97%; }
.ae-sd-step.s3 { animation-range: entry 95% contain 13%; }
.ae-sd-step.s4 { animation-range: contain 11% contain 30%; padding-bottom: 0; }
@supports not (animation-timeline: view()) {
	.ae-sd-line { height: 100%; }
	.ae-sd-pen { top: 97%; }
	.ae-sd-step { opacity: 1; }
}

.ae-sd-step::before {
	counter-increment: aestep;
	content: "0" counter(aestep);
	position: absolute; left: -58px; top: -2px;
	width: 34px; height: 34px;
	background: #1B2A41; color: #FFFFFF;
	font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 13px;
	line-height: 34px; text-align: center;
}
.ae-sd-step.s4::before { background: #FFC20E; color: #2B2F36; }
.ae-sd-step h3 { margin: 0 0 5px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 20px; }
.ae-sd-step p { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(43, 47, 54, .85); }

/* ==========================================================================
   Project cards
   ========================================================================== */

.ae-cards-in { padding-top: 64px; padding-bottom: 64px; }
.ae-cards-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 28px; }
.ae-cards-head h2 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -.01em; }
.ae-cards-head p { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; }

.ae-card { border: 1px solid #2B2F36; display: flex; flex-direction: column; background: #FFFFFF; }
.ae-card .wp-block-image { margin: 0; }
.ae-card img { display: block; width: 100%; }
.ae-card-body { padding: 14px 16px; }
.ae-card--center .ae-card-body { text-align: center; }
.ae-card-body h3 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.2; }
.ae-card-body p { margin: 6px 0 0; font-size: 13.5px; }
.ae-card-body p.ae-card-more { margin: 6px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 10px; }
.ae-card-body p.ae-card-more a { color: rgba(43, 47, 54, .65); }

/* Portfolio category sections */
.ae-pcat h2 { margin: 0 0 4px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -.01em; }
.ae-pcat-sub { margin: 0 0 26px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: rgba(43, 47, 54, .7); }
.ae-pt-58 { padding-top: 58px; } .ae-pt-38 { padding-top: 38px; }
.ae-pb-20 { padding-bottom: 20px; } .ae-pb-58 { padding-bottom: 58px; }

/* Portfolio project detail sections */
.ae-detail-in { padding-top: 58px; padding-bottom: 58px; }
.ae-detail-head { text-align: center; max-width: 680px; margin: 0 auto 30px !important; }
.ae-eyebrow { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: #1B2A41; text-transform: uppercase; }
.ae-detail-head h2 { margin: 10px 0 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -.01em; }
.ae-detail-head p.ae-detail-intro { margin: 12px 0 0; font-size: 16px; line-height: 1.5; }
.ae-detail-cover { margin: 0 0 22px; }
.ae-detail-cover img { display: block; width: 100%; border: 1px solid #2B2F36; }
.ae-sheet { margin: 0; border: 1px solid #2B2F36; background: #FFFFFF; }
.ae-sheet img { display: block; width: 100%; }
.ae-sheet figcaption { margin: 0; padding: 10px 14px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #1B2A41; text-align: left; }

/* ==========================================================================
   Mid-page CTAs
   ========================================================================== */

.ae-cta-mid h2 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -.01em; color: #FFFFFF; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.ae-cta-mid .ae-cta-mid-p { margin: 16px 0 0; font-size: 17px; line-height: 1.5; max-width: 520px; color: #FFFFFF; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.ae-cta-mid .wp-block-buttons { margin-top: 24px; }

.ae-cta-row-in { padding-top: 80px; padding-bottom: 80px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.ae-cta-mid2 h2 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.05; letter-spacing: -.01em; color: #FFFFFF; }
.ae-cta-mid2 .ae-cta-sub { margin: 12px 0 0; font-size: 16px; line-height: 1.5; max-width: 560px; color: rgba(255,255,255,.9); }
.ae-cta-mid2--local .ae-cta-sub { color: rgba(255,255,255,.92); }

/* ==========================================================================
   FAQ — native details/summary, marker via CSS (replaces js/faq-accordion.js)
   ========================================================================== */

.ae-faq-in { padding-top: 0; padding-bottom: 64px; }
.ae-faq h2 { margin: 0 0 24px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -.01em; text-align: center; }
.ae-faq .wp-block-details { border: 1px solid #2B2F36; margin-bottom: 12px; padding: 0 18px; }
.ae-faq summary {
	padding: 18px 0;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 18px;
	list-style: none;
	cursor: pointer;
}
.ae-faq summary::-webkit-details-marker { display: none; }
.ae-faq summary::after { content: "+"; color: #1B2A41; flex: none; }
.ae-faq details[open] > summary::after { content: "\2212"; }
.ae-faq details p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.5; }

/* ==========================================================================
   "Where we work"
   ========================================================================== */

.ae-areas-in { padding-top: 56px; padding-bottom: 56px; }
.ae-areas h2 { margin: 0 0 28px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -.01em; text-align: center; }
.ae-areas .ae-grid-3 { text-align: center; }
.ae-area-label { margin: 0; font-family: 'Archivo', sans-serif; font-size: 17px; font-weight: 700; color: #1B2A41; letter-spacing: .01em; line-height: normal; }
.ae-area-label::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 6px;
	vertical-align: -2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231B2A41'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ae-area-cities { margin: 10px 0 0; font-size: 15.5px; line-height: 1.7; }

/* ==========================================================================
   Bottom CTA + consultation form
   ========================================================================== */

.ae-book-in { padding-top: 64px; padding-bottom: 64px; }
.ae-book-in--p { padding-top: 60px; padding-bottom: 60px; }
.ae-book-copy h2 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -.01em; color: #FFFFFF; }
.ae-book-copy h2.ae-book-h2--plex { font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; line-height: 1.1; }
.ae-book-copy p { margin: 16px 0 0; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.92); }
.ae-book-copy p.ae-book-mail { margin: 20px 0 0; }
.ae-book-copy p.ae-book-mail a {
	display: inline-block;
	font-family: 'Archivo', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #FFFFFF;
	border-bottom: 2px solid #FFC20E;
	padding-bottom: 2px;
}

/* Validation message (js/consult-form.js toggles [hidden]) — from the export CSS */
.ae-form-error[hidden] { display: none; }

/* ==========================================================================
   Footer
   ========================================================================== */

.ae-footer-in { padding-top: 52px; padding-bottom: 40px; }
.ae-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; align-items: start; }
.ae-ft-name { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; line-height: normal; }
.ae-ft-blurb { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.85); }
.ae-ft-mail { margin: 4px 0 0; }
.ae-ft-mail a { display: inline-block; font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 600; color: #FFFFFF; }
.ae-ft-head { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.55); text-transform: uppercase; line-height: normal; }
.ae-ft-links { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.ae-ft-links p { margin: 0; }
.ae-ft-links a { color: #FFFFFF; }
.ae-ft-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 36px;
	padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,.18);
}
.ae-ft-copy { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: rgba(255,255,255,.7); }

/* ==========================================================================
   Responsive — the tokens' recommended breakpoints (source is desktop-first,
   no media queries; recorded as an intentional deviation in PARITY-REPORT.md)
   ========================================================================== */

@media (max-width: 719.98px) {
	.ae-grid-3, .ae-grid-3.ae-gap-18, .ae-grid-3.ae-gap-22, .ae-grid-3.ae-gap-28 { grid-template-columns: 1fr; }
	.ae-grid-2 { grid-template-columns: 1fr; }
	.ae-footer-grid { grid-template-columns: 1fr; }

	.ae-hero .ae-hero-in h1 { font-size: 30px; }
	.ae-hero-in { padding-top: 72px; padding-bottom: 80px; }

	/* ADU mid CTA: drop the fixed image ratio, let content set the height */
	.ae-cover-adu-mid.wp-block-cover { aspect-ratio: auto; }
	.ae-cta-mid-in { padding-top: 56px; padding-bottom: 56px; }

	/* Form rows stack (tokens: "two-column CTA sections stack, form last") */
	.ae-consult-form > div[style*="grid"] { grid-template-columns: 1fr !important; }

	/* Tap targets at least 44px (tokens recommendation) */
	.ae-btn--h .wp-block-button__link { padding-top: 13px; padding-bottom: 13px; }
	.ae-jumpnav a { display: inline-block; padding: 8px 0; }
}