/* Hardek — Iron palette site styles. Colors come from theme.json presets. */

:root {
	--hk-orange: var(--wp--preset--color--orange, #FF5F00);
	--hk-gunmetal: var(--wp--preset--color--gunmetal, #2E3439);
	--hk-black: var(--wp--preset--color--black, #111315);
	--hk-steel: var(--wp--preset--color--steel, #6B747C);
	--hk-concrete: var(--wp--preset--color--concrete, #F5F4F1);
	--hk-rebar: var(--wp--preset--color--rebar, #D8DADC);
	--hk-mono: var(--wp--preset--font-family--mono);
	--hk-display: var(--wp--preset--font-family--display);
	--hk-radius: 6px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 5rem; }

/* Remove the gap block themes put between header / main / footer */
.wp-site-blocks > * + * { margin-block-start: 0; }
.hk-main > .entry-content > .alignfull:first-child,
.hk-main .wp-block-post-content > .alignfull:first-child { margin-top: 0; }
.wp-block-post-content > .alignfull + .alignfull { margin-top: 0; }

/* ---------- Header ---------- */
.hk-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(245, 244, 241, .08); }
body.admin-bar .hk-header { top: var(--wp-admin--admin-bar--height, 32px); }

/* Logo kit lockups. The SVG viewBox already carries the kit's clear space. */
p:has(> .hk-logo) { margin: 0; line-height: 0; }
.hk-logo { display: inline-flex; line-height: 0; }
.hk-logo img { display: block; width: auto; max-width: none; }
.hk-logo-header img { height: 56px; margin-inline-start: -10px; }
.hk-logo-footer img { height: 96px; margin-inline-start: -18px; }

.hk-header-nav { gap: 1.75rem; align-items: center; }
.hk-anchors { display: flex; gap: 1.5rem; }
.hk-anchors a { color: inherit; text-decoration: none; font-weight: 600; font-size: .9375rem; opacity: .85; }
.hk-anchors a:hover { opacity: 1; color: var(--hk-orange); }
.hk-btn-sm .wp-block-button__link { padding: .6rem 1rem; font-size: .9375rem; }

@media (max-width: 720px) {
	.hk-anchors { display: none; }
	.hk-logo-header img { height: 46px; margin-inline-start: -8px; }
}

/* ---------- Buttons ---------- */
.wp-element-button, .wp-block-button__link { transition: background-color .15s, color .15s, border-color .15s; }
.hk-btn-ghost .wp-block-button__link,
.wp-block-button.is-style-outline.hk-btn-ghost > .wp-block-button__link {
	background: transparent; color: var(--hk-concrete); border: 1px solid rgba(245, 244, 241, .5);
}
.hk-btn-ghost .wp-block-button__link:hover { border-color: var(--hk-orange); color: var(--hk-orange); background: transparent; }

/* ---------- Signature diagonal rule under titles ---------- */
.hk-rule { position: relative; padding-bottom: 1.1rem; }
.hk-rule::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 5.5rem; height: 5px; background: var(--hk-orange);
	transform: skewX(-28deg); transform-origin: left bottom;
}
.has-text-align-center.hk-rule::after { left: 50%; margin-left: -2.75rem; }

/* ---------- Hero ---------- */
.hk-hero { position: relative; overflow: hidden; isolation: isolate; }
.hk-hero::before {
	/* faint survey grid */
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image:
		linear-gradient(rgba(245, 244, 241, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(245, 244, 241, .045) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.hk-hero::after {
	/* moldboard sweep */
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	right: -10%; bottom: 14%; width: 70%; height: 10px; background: var(--hk-orange);
	transform: rotate(-11deg); opacity: .9;
}
.hk-eyebrow {
	font-family: var(--hk-mono); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--hk-orange); margin: 0 0 1rem;
}
.hk-hero-title { margin: 0; }
.hk-accent { color: var(--hk-orange); }
.hk-lede { max-width: 34rem; color: rgba(245, 244, 241, .82); margin-top: 1.5rem; }

/* Bid grid mock */
.hk-grid-card {
	background: #fff; color: var(--hk-black); border-radius: 10px; overflow: hidden;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
	font-size: .875rem;
}
.hk-grid-head {
	display: flex; gap: .75rem; align-items: center; padding: .8rem 1rem;
	background: var(--hk-gunmetal); color: var(--hk-concrete); font-weight: 700;
}
.hk-grid-head span:first-child { font-family: var(--hk-mono); font-weight: 400; color: var(--hk-orange); }
.hk-chip {
	margin-left: auto; font-family: var(--hk-display); text-transform: uppercase; letter-spacing: .06em;
	font-size: .8rem; padding: .15rem .5rem; border-radius: 4px; background: rgba(245, 244, 241, .14);
}
.hk-grid { width: 100%; border-collapse: collapse; }
.hk-grid th {
	text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--hk-steel); font-weight: 600; padding: .6rem 1rem; border-bottom: 1px solid var(--hk-rebar);
}
.hk-grid td { padding: .55rem 1rem; border-bottom: 1px solid #eceded; vertical-align: top; }
.hk-grid tbody tr:nth-child(even) td { background: var(--hk-concrete); }
.hk-grid td:nth-child(2), .hk-grid td:nth-child(3), .hk-grid th:nth-child(2), .hk-grid th:nth-child(3) {
	text-align: right; white-space: nowrap;
}
.hk-grid td:nth-child(2), .hk-grid td:nth-child(3) { font-family: var(--hk-mono); font-size: .8125rem; }
.hk-grid tr.hk-open td:first-child { font-weight: 700; box-shadow: inset 3px 0 0 var(--hk-orange); }
.hk-grid tr.hk-sub td { color: var(--hk-steel); font-size: .8125rem; padding-top: .35rem; padding-bottom: .35rem; }
.hk-grid tr.hk-sub td:first-child { padding-left: 1.9rem; }
.hk-grid tfoot td {
	background: var(--hk-black); color: var(--hk-concrete); font-weight: 700; border: 0; padding: .8rem 1rem;
}
.hk-grid tfoot td:last-child { color: var(--hk-orange); font-size: 1rem; }
.hk-grid-foot {
	display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; font-size: .8rem; color: var(--hk-steel);
}
.hk-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--wp--preset--color--survey-green, #2F9E5B); flex: none; }

@media (max-width: 781px) {
	.hk-hero::after { bottom: 4%; width: 90%; }
	.hk-grid-card { margin-top: 1rem; }
	.hk-grid td, .hk-grid th { padding-left: .7rem; padding-right: .7rem; }
	.hk-grid tr.hk-sub td:first-child { padding-left: 1.3rem; }
}

/* ---------- Proof strip ---------- */
.hk-proof p { margin: 0; font-size: .9375rem; color: rgba(245, 244, 241, .78); }
.hk-proof strong { color: var(--hk-concrete); display: block; font-size: 1rem; margin-bottom: .2rem; }
.hk-proof .wp-block-column { border-left: 3px solid var(--hk-orange); padding-left: 1rem; }

/* ---------- Sections ---------- */
.hk-section-lede { max-width: 40rem; color: var(--hk-gunmetal); margin-top: 1.5rem; }
.hk-cards { gap: 1.25rem; margin-top: var(--wp--preset--spacing--50); }
.hk-card {
	background: #fff; border: 1px solid var(--hk-rebar); border-radius: 8px;
	padding: 1.5rem 1.5rem 1.6rem; position: relative;
}
.hk-card h3 { margin: .4rem 0 .5rem; }
.hk-card p { margin: 0; color: var(--hk-gunmetal); font-size: .9375rem; }
.hk-card .hk-num { font-family: var(--hk-mono); color: var(--hk-orange); font-size: .8125rem; letter-spacing: .06em; }
.hk-card::before {
	content: ""; position: absolute; top: -1px; left: 1.5rem; width: 2.5rem; height: 3px;
	background: var(--hk-orange); transform: skewX(-28deg);
}

/* How it works */
.hk-steps { counter-reset: hkstep; }
.hk-step { font-family: var(--hk-display); text-transform: uppercase; font-size: var(--wp--preset--font-size--x-large); letter-spacing: .02em; }
.hk-step::before {
	counter-increment: hkstep; content: "0" counter(hkstep);
	display: block; font-family: var(--hk-mono); font-size: .8125rem; color: var(--hk-orange); margin-bottom: .5rem; letter-spacing: .06em;
}
.hk-how p { color: rgba(245, 244, 241, .78); }
.hk-how .wp-block-column { border-top: 1px solid rgba(245, 244, 241, .18); padding-top: 1.25rem; }

/* ---------- Waitlist ---------- */
.hk-fine { font-size: .875rem; color: rgba(245, 244, 241, .65); }

.hk-form {
	background: #fff; color: var(--hk-black); border-radius: 10px; padding: clamp(1.25rem, 3vw, 2rem);
}
.hk-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.hk-field { display: flex; flex-direction: column; gap: .35rem; font-size: .8125rem; font-weight: 600; color: var(--hk-gunmetal); }
.hk-field em { font-style: normal; font-weight: 400; color: var(--hk-steel); }
.hk-span { grid-column: 1 / -1; }
.hk-field input, .hk-field select, .hk-field textarea {
	font: inherit; font-size: 1rem; font-weight: 400; color: var(--hk-black);
	background: #fff; border: 1px solid var(--hk-rebar); border-radius: var(--hk-radius);
	padding: .7rem .8rem; width: 100%; box-sizing: border-box;
}
.hk-field textarea { resize: vertical; min-height: 5.5rem; }
.hk-field input:focus, .hk-field select:focus, .hk-field textarea:focus {
	outline: 2px solid var(--hk-orange); outline-offset: 0; border-color: var(--hk-orange);
}
.hk-field [aria-invalid="true"] { border-color: var(--wp--preset--color--hazard-red, #D2342B); box-shadow: 0 0 0 1px var(--wp--preset--color--hazard-red, #D2342B); }
.hk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.hk-form-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; flex-wrap: wrap; }
.hk-form-actions button { cursor: pointer; }
.hk-form-actions button:hover { background: var(--hk-black); color: #fff; }
.hk-form-actions button[disabled] { opacity: .6; cursor: wait; }
.hk-form-status { margin: 0; font-size: .875rem; color: var(--hk-steel); }
.hk-form-status.is-error { color: var(--wp--preset--color--hazard-red, #D2342B); font-weight: 600; }
.hk-form-done { padding: 1rem 0; }
.hk-form-done p { margin: 0; color: var(--hk-gunmetal); }
.hk-done-title {
	font-family: var(--hk-display); font-weight: 700; text-transform: uppercase;
	font-size: 2rem; color: var(--hk-black) !important; margin-bottom: .4rem !important;
}
@media (max-width: 600px) { .hk-form-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.hk-footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.hk-footer-links a { color: inherit; text-decoration: none; opacity: .8; font-weight: 600; font-size: .9375rem; }
.hk-footer-links a:hover { opacity: 1; color: var(--hk-orange); }
.hk-legal { color: var(--hk-steel); margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(245, 244, 241, .1); }