/*
Theme Name: 3D Development Delivery
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 3d-development-delivery
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts a margin-block-start equal to the block gap (24px unless
   theme.json sets styles.spacing.blockGap) between the template's top-level
   sections (header part, main, footer part) — a gap that exists even when no
   markup asks for it. Zero it so sections butt edge-to-edge and own their
   vertical rhythm via padding; this does not affect block gaps inside nested
   layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* With that gap gone, main carries its own vertical padding so templates this
   theme does not author (WooCommerce shop, product, cart…) still clear the
   header and footer. A descendant selector, not a child one: WooCommerce wraps
   the single-product main in an extra group. Templates built from full-bleed
   sections opt out with is-flush and let the sections own the rhythm. */
.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

/* === 3D SITE SYSTEM === */
:root {
	--navy: var(--wp--preset--color--primary);
	--gold: var(--wp--preset--color--accent);
	--ink: var(--wp--preset--color--text);
	--paper: #ffffff;
	--cool: #E9ECEF;
	--muted: #5a6472;
	--hair: rgba(22, 24, 29, 0.14);
	--hair-nav: rgba(255, 255, 255, 0.22);
	--navy-2: #12294a;
	--navy-deep: #060f1e;
}

body {
	background: var(--site-bg);
	color: var(--ink);
}

.wp-site-blocks.is-layout-flow {
	/* keep the full-page background clean */
	background: var(--site-bg);
}

/* === header === */
.site-header {
	background: var(--navy);
	color: #fff;
}
.site-header__inner {
	padding-block: 14px;
	gap: 20px;
}
.site-brand {
	gap: 12px;
}
.site-brand__mark {
	font-family: var(--wp--preset--font-family--black-ops-one);
	font-size: 1.35rem;
	line-height: 1;
	color: var(--gold);
	margin: 0;
	padding: 5px 10px 7px;
	border: 1px solid var(--gold);
	transform: skewX(-8deg);
}
.site-brand__mark a {
	color: inherit;
	text-decoration: none;
}
.site-brand__name {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}
.site-brand__name a {
	color: #fff;
	text-decoration: none;
}
.site-brand__tag {
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 3px 0 0;
}
.site-nav .wp-block-navigation-item a,
.site-nav a.wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}
.site-nav .wp-block-navigation-item a:hover {
	color: var(--gold);
}

/* === hero === */
.hero {
	color: #fff;
}
.hero-bg {
	background:
		linear-gradient(105deg, rgba(7, 16, 30, 0.92) 5%, rgba(11, 31, 58, 0.6) 55%, rgba(6, 15, 30, 0.76) 100%),
		url('/wp-content/uploads/2026/10/hero-rig.png') center / cover no-repeat;
	min-height: 82vh;
	padding-block: clamp(5rem, 18vh, 9rem);
}
.rally-bg {
	background:
		linear-gradient(90deg, rgba(6, 15, 30, 0.9) 0%, rgba(6, 15, 30, 0.52) 72%),
		url('/wp-content/uploads/2026/10/rallypoint-highway.png') center / cover no-repeat;
	padding-block: clamp(4rem, 12vh, 7rem);
}
.hero-inner {
	max-width: 640px;
}
.hero-eyebrow {
	font-family: var(--wp--preset--font-family--black-ops-one);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
}
.hero-title {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: clamp(2.7rem, 6.5vw, 4.8rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: 0.004em;
	text-transform: uppercase;
	margin: 0;
}
.hero-title .gold {
	color: var(--gold);
}
.gold {
	color: var(--gold);
}
.hero-goldline {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: clamp(1.2rem, 2.5vw, 1.7rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--gold);
	margin: 0;
}
.hero-sub {
	font-size: 1.08rem;
	color: rgba(255, 255, 255, 0.88);
	max-width: 54ch;
}
.hero-seal {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	color: var(--gold);
}

/* === eyebrows & labels === */
.eyebrow {
	font-family: var(--wp--preset--font-family--black-ops-one);
	font-size: 0.76rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0;
}
.section-title {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: clamp(2.1rem, 4vw, 3.2rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.008em;
	text-transform: uppercase;
	margin: 0;
}
.section-title .gold {
	color: var(--gold);
}
.gold-rule {
	height: 3px;
	background: var(--gold);
	width: 3.5rem;
}
.gold-rule--full {
	width: 100%;
	background: linear-gradient(90deg, var(--gold), rgba(201, 162, 39, 0));
}

/* === pillars === */
.pillar-card {
	background: #fff;
	border: 1px solid var(--hair);
	border-top: 3px solid var(--navy);
	border-radius: 6px;
	padding: 0;
	overflow: hidden;
	height: 100%;
	box-shadow: 0 1px 3px rgba(11, 31, 58, 0.06);
}
.pillar-card img {
	border-radius: 5px 5px 0 0;
	width: 100%;
	object-fit: cover;
}
.pillar-card__pad {
	padding: 1.4rem 1.5rem 1.6rem;
}
.pillar-card--gold {
	border-top-color: var(--gold);
}
.pillar-num {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	color: var(--gold);
	margin: 0 0 0.25rem;
}
.pillar-title {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 1.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.05;
	margin: 0.4rem 0 0.6rem;
}

/* === cards === */
.is-style-card {
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 6px;
	padding: 1.5rem;
	box-shadow: 0 1px 3px rgba(11, 31, 58, 0.06);
}
.is-style-accent-btn .wp-element-button {
	background-color: var(--gold);
	color: var(--navy);
	border: 1px solid transparent;
}
.is-style-accent-btn .wp-element-button:hover {
	background-color: #b3851f;
	color: var(--navy);
}
.is-style-outline-btn .wp-element-button {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.85);
}
.is-style-outline-btn .wp-element-button:hover {
	background: rgba(255, 255, 255, 0.14);
}
/* === sections / bands === */
.navy-band {
	background: var(--navy);
	color: #fff;
}
.navy-band a {
	color: #fff;
}
.navy-band .eyebrow {
	color: var(--gold);
}
.navy-2-band {
	background: var(--navy-2);
	color: #fff;
}
.gold-band {
	background: linear-gradient(135deg, #b0831d, var(--gold) 55%, #ddb94b);
	color: var(--navy);
}
.gold-band .eyebrow {
	color: var(--navy);
}
.cool-band {
	background: var(--cool);
}
.white-band {
	background: #fff;
}
.section-pad {
	padding-block: clamp(3rem, 8vw, 6.5rem);
}
.lead {
	font-size: 1.12rem;
	color: #3a4350;
}
.navy-band .lead,
.navy-2-band .lead,
.hero .lead {
	color: rgba(255, 255, 255, 0.88);
}
.quote-block {
	padding: 2rem 2.2rem;
	border-left: 4px solid var(--gold);
}
/* === code of conduct === */
.standing-num {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--gold);
	line-height: 1;
}
.sop-block {
	background: #fff;
	border: 1px dashed var(--hair);
	border-left: 3px solid var(--navy);
	padding: 1rem 1.2rem;
}
.sop-block .sop-tag {
	font-family: var(--wp--preset--font-family--black-ops-one);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	color: var(--gold);
	text-transform: uppercase;
}

/* === rally point === */
.rally-point {
	color: #fff;
}
.rally-point .eyebrow {
	color: var(--gold);
}
.rally-title {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: clamp(1.9rem, 3.8vw, 3rem);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}

/* === footer === */
.site-footer {
	background: var(--navy-deep);
	color: rgba(255, 255, 255, 0.82);
}
.site-footer a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}
.site-footer a:hover {
	color: var(--gold);
}
.footer-title {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 1.3rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #fff;
	line-height: 1.1;
}
.footer-mark {
	font-family: var(--wp--preset--font-family--black-ops-one);
	font-size: 1.2rem;
	letter-spacing: 0.02em;
	color: var(--gold);
}
.footer-rule {
	border: 0;
	border-top: 1px solid var(--hair-nav);
	margin: 0;
}
.footer-credits {
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.6);
}
/* === checklists === */
.checklist {
	background: #fff;
	border: 1px solid var(--hair);
	padding: 1.2rem 1.6rem;
}
.checklist ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.checklist li {
	padding-left: 1.7rem;
	position: relative;
	margin-block: 0.5rem;
}
.checklist li::before {
	content: "\2610";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--navy);
	font-size: 1.1rem;
}
.checklist .ck-title {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--navy);
}

/* === blog === */
.blog-row {
	gap: 1.5rem;
}
.blog-card {
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 6px;
	overflow: hidden;
	height: 100%;
}
.blog-card .blog-card__body {
	padding: 1.2rem;
}

/* === motion === */
@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.rise {
	animation: rise 0.7s ease both;
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* === responsive === */
@media (max-width: 900px) {
	.site-header__inner {
		gap: 14px;
	}
}
@media (max-width: 600px) {
	.site-brand__name {
		font-size: 1rem;
	}
	.site-header__inner {
		padding-block: 12px;
	}
}