/*
Theme Name: DevTactics
Theme URI: https://devtactics.net
Description: Custom lightweight theme for the DevTactics site. Content is driven by the DevTactics Core plugin (team members, services, testimonials, partners) and the Customizer (contact info). Design tokens extracted from the original Squarespace site.
Author: DevTactics
Version: 0.2.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: devtactics
*/

/* ----------------------------------------------------------------------------
   Design tokens — extracted from the original devtactics.net (Squarespace 7.1).
   Colors are the site's real HSL theme values; fonts use Mulish as a free
   stand-in for Adelle Sans (swap --font-body/--font-head to change).
---------------------------------------------------------------------------- */
:root {
	/* Palette */
	--color-indigo: hsl(245.81, 40.26%, 15.1%);   /* dark sections, hero, buttons, headings */
	--color-night: #0c0b1a;                        /* near-black "our partners" section */
	--color-lime: hsl(65.9, 68.54%, 82.55%);       /* accent — testimonial band, accent text on dark */
	--color-lavender: hsl(245, 40%, 94.12%);       /* light alternating sections */
	--color-ink: hsl(245.81, 40.26%, 15.1%);       /* body text */
	--color-white: #ffffff;

	/* Typography (Adelle Sans → Mulish; meta → Poppins, as on the original) */
	--font-head: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-body: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-meta: "Poppins", var(--font-head);

	--h1: clamp(2.4rem, 5.5vw, 4rem);
	--h2: clamp(2rem, 4vw, 2.8rem);
	--h3: clamp(1.5rem, 3vw, 2.2rem);
	--h4: 1.6rem;

	/* Layout */
	--maxw: 1400px;
	--gap: 2rem;
	--radius: 6.4px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;          /* original body weight */
	color: var(--color-ink);
	background: var(--color-white);
	line-height: 1.8;          /* original body line-height */
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-head);
	color: var(--color-indigo);
	line-height: 1.18;
	margin: 0 0 0.5em;
	font-weight: 800;
	letter-spacing: -0.01em;
}

h1 {
	font-size: var(--h1);
}

h2 {
	font-size: var(--h2);
}

h3 {
	font-size: var(--h3);
}

p {
	margin: 0 0 1rem;
}

a {
	color: var(--color-indigo);
	text-decoration: underline;
	text-underline-offset: 2px;
}

a:hover {
	opacity: 0.75;
}

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

/* ---------- Layout ---------- */
.container {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.section {
	padding: clamp(3.5rem, 9vw, 7rem) 0;
}

.section--lavender {
	background: var(--color-lavender);
}

.section--lime {
	background: var(--color-lime);
}

.section--indigo {
	background: var(--color-indigo);
	color: var(--color-white);
}

.section--night {
	background: var(--color-night);
	color: var(--color-white);
}

.section--indigo h1,
.section--indigo h2,
.section--indigo h3,
.section--night h1,
.section--night h2,
.section--night h3 {
	color: var(--color-white);
}

.section__lead {
	max-width: 48rem;
	font-size: 1.05rem;
}

.eyebrow {
	font-family: var(--font-meta);
	text-transform: lowercase;
	letter-spacing: 0.04em;
	font-size: 1rem;
	font-weight: 500;
	margin: 0 0 1rem;
}

.section--night .eyebrow,
.section--indigo .eyebrow {
	color: var(--color-lime);
}

/* ---------- Buttons (dark fill, as on the original) ---------- */
.btn {
	display: inline-block;
	background: var(--color-indigo);
	color: var(--color-white);
	padding: 0.7rem 1.2rem;
	border-radius: var(--radius);
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.btn:hover {
	opacity: 0.85;
	text-decoration: none;
}

.section--indigo .btn,
.section--night .btn {
	background: var(--color-white);
	color: var(--color-indigo);
}

.btn--ghost {
	background: transparent;
	border: 1px solid currentColor;
	color: var(--color-white);
}

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-indigo);
	color: #fff;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 88px;
}

.site-logo {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.4rem;
	color: #fff;
	text-decoration: none;
}

.site-logo img,
.custom-logo {
	max-height: 48px;
	width: auto;
}

.main-nav ul {
	list-style: none;
	display: flex;
	gap: 2rem;
	margin: 0;
	padding: 0;
	align-items: center;
}

.main-nav a {
	color: #fff;
	font-family: var(--font-meta);
	font-weight: 400;
	font-size: 0.95rem;
	text-decoration: none;
}

.header-phone {
	font-family: var(--font-meta);
	font-weight: 500;
	color: var(--color-lime);
	text-decoration: none;
}

.nav-toggle {
	display: none;
	background: none;
	border: 0;
	font-size: 1.5rem;
	cursor: pointer;
	color: #fff;
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	background-color: var(--color-indigo);
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: clamp(3.5rem, 8vw, 6rem) 0 0;
	text-align: center;
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-indigo);
	opacity: 0.82;
	z-index: 0;
}

.hero .container {
	position: relative;
	z-index: 1;
}

.hero h1 {
	color: var(--color-lime);
}

.hero p {
	font-size: 1.8rem;
	color: rgba(255, 255, 255, 0.85);
}

.hero__actions {
	margin-top: 2rem;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
}

/* Partner logo strip inside the hero */
.hero__partners {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	padding: 1.5rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	align-items: center;
	justify-content: center;
}

.hero__partners img {
	max-height: 40px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

/* ---------- Testimonials (lime carousel band) ---------- */
.testimonials {
	text-align: center;
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

.testimonials__track {
	max-width: 50rem;
	margin: 0 auto;
	min-height: 9rem;
	display: grid;
}

.testimonial {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease;
}

.testimonial.is-active {
	opacity: 1;
	visibility: visible;
}

.testimonial__text {
	font-family: var(--font-head);
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-indigo);
	margin: 0 0 1.25rem;
}

.testimonial__cite {
	font-family: var(--font-meta);
	font-style: normal;
	font-size: 0.9rem;
	color: var(--color-indigo);
}

.testimonials__nav {
	margin-top: 2.5rem;
	display: flex;
	gap: 1rem;
	justify-content: center;
}

.testimonials__nav button {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: var(--color-indigo);
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.testimonials__nav button:hover {
	opacity: 0.8;
}

/* ---------- About band (image + offset white card) ---------- */
.about-band .container {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: center;
}

.about-band__image {
	position: relative;
	line-height: 0;
}

.about-band__image img {
	width: 100%;
	filter: grayscale(1);
}

.about-band__card {
	position: relative;
	background: var(--color-white);
	padding: clamp(2.25rem, 4vw, 3.5rem);
	padding-bottom: clamp(3.5rem, 6vw, 5rem); /* room above the overhanging button */
	margin-left: -4rem;
	font-size: 1.1rem;
	line-height: 1.7;
	box-shadow: 0 20px 50px rgba(12, 11, 26, 0.06);
}

.about-band__card p:last-of-type {
	margin-bottom: 0;
}

/* Sharp-cornered black button overhanging the card's bottom-right. */
.about-band__card .btn {
	position: absolute;
	right: clamp(2rem, 4vw, 3rem);
	bottom: 0;
	transform: translateY(50%);
	border-radius: 0;
	background: #000;
	color: #fff;
	padding: 0.95rem 2.25rem;
}

/* ---------- Partners (dark section) ---------- */
.partners {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem 3.5rem;
	align-items: center;
	justify-content: center;
}

.partners img {
	max-height: 61px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: 0.9;
	transition: opacity 0.15s ease;
}

.partners img:hover {
	opacity: 1;
}

/* ---------- Service cards ---------- */
.grid {
	display: grid;
	gap: var(--gap);
}

.grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.card {
	background: var(--color-white);
	border: 1px solid var(--color-lavender);
	border-radius: var(--radius);
	padding: 1.75rem;
	height: 100%;
}

.card h3 {
	margin-top: 0;
	font-size: 1.3rem;
}

/* ---------- Services page (lime title + accordion on indigo) ---------- */
.services-page__grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.services-page .services-title {
	color: var(--color-lime);
	font-size: clamp(2.5rem, 5vw, 4rem);
	margin: 0;
}

/* Accordion recoloured for the dark section. */
.section--indigo .accordion {
	border-top-color: rgba(255, 255, 255, 0.28);
}

.section--indigo .accordion__item {
	border-bottom-color: rgba(255, 255, 255, 0.28);
}

.section--indigo .accordion__trigger {
	color: var(--color-lime);
}

.section--indigo .accordion__icon::before,
.section--indigo .accordion__icon::after {
	background: var(--color-lime);
}

.section--indigo .accordion__panel-inner {
	color: rgba(255, 255, 255, 0.82);
}

/* ---------- Accordion (Services) ---------- */
.accordion {
	max-width: 56rem;
	border-top: 1px solid hsl(245, 22%, 86%);
}

.services-page .accordion {
	max-width: none;
}

.accordion__item {
	border-bottom: 1px solid hsl(245, 22%, 86%);
}

.accordion__heading {
	margin: 0;
	font-size: inherit;
}

.accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.25rem 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	color: var(--color-indigo);
}

/* Plus / minus icon built from two lines. */
.accordion__icon {
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}

.accordion__icon::before,
.accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	background: var(--color-indigo);
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.accordion__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.accordion__item.is-open .accordion__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

/* Smooth height animation via grid-template-rows (no magic numbers). */
.accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.accordion__item.is-open .accordion__panel {
	grid-template-rows: 1fr;
}

.accordion__panel-inner {
	overflow: hidden;
}

.accordion__panel-inner > * {
	margin-top: 0;
}

.accordion__item.is-open .accordion__panel-inner {
	padding-bottom: 1.75rem;
}

.accordion__panel-inner {
	max-width: 44rem;
	font-size: 1.05rem;
}

/* ---------- About hero (text + code image) ---------- */
.about-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.about-hero__text h1 {
	color: var(--color-lime);
}

.about-hero__image img {
	width: 100%;
	border-radius: 2px;
}

/* ---------- Methodology ---------- */
.methodology__title {
	text-align: center;
	margin-bottom: 2.5rem;
}

.methodology__accordion {
	max-width: 52rem;
	margin: 0 auto;
}

/* ---------- Team ---------- */
.team-member__photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 2px;
	margin-bottom: 1rem;
	background: var(--color-lavender);
}

.team-member__role {
	font-family: var(--font-meta);
	color: var(--color-indigo);
	font-weight: 500;
	font-size: 0.9rem;
	margin: 0 0 0.5rem;
}

/* ---------- CTA band ---------- */
.cta-band {
	text-align: center;
}

.cta-band h2 {
	margin-bottom: 1.5rem;
	max-width: 24ch;
	margin-inline: auto;
}

/* ---------- Contact ---------- */
.contact-hero {
	text-align: center;
	padding-block: clamp(5rem, 13vw, 10rem);
}

.contact-hero h1 {
	color: var(--color-lime);
}

.contact-hero__email {
	margin: 0;
}

.contact-hero__email a {
	color: var(--color-lime);
	font-family: var(--font-meta);
	text-decoration: none;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: clamp(2rem, 5vw, 4rem);
}

.contact-info h2,
.contact-form h2 {
	margin-bottom: 1.5rem;
}

.contact-info p {
	margin: 0 0 0.75rem;
}

/* Contact Form 7 — square, bordered fields with the brand palette. */
.contact-form label {
	display: block;
	font-family: var(--font-meta);
	font-size: 0.9rem;
	color: var(--color-ink);
	margin-bottom: 0.4rem;
}

.contact-form .dt-field__group {
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.contact-form .dt-field__req {
	color: var(--color-ink-soft, #6b6b85);
	font-weight: 400;
}

.contact-form .dt-field__row {
	display: flex;
	gap: 1rem;
}

.contact-form .dt-field__half {
	flex: 1;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid hsl(245, 22%, 78%);
	border-radius: 0;
	background: #fff;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-ink);
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline: 2px solid var(--color-indigo);
	outline-offset: 0;
	border-color: var(--color-indigo);
}

.contact-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.contact-form .wpcf7-submit {
	background: #000;
	color: #fff;
	border: 0;
	border-radius: 0;
	padding: 0.85rem 2.25rem;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.02em;
	cursor: pointer;
}

.contact-form .wpcf7-submit:hover {
	opacity: 0.85;
}

/* ---------- Footer ---------- */
.site-footer {
	background: var(--color-night);
	color: rgba(255, 255, 255, 0.75);
	padding: 3.5rem 0 2rem;
}

.site-footer a {
	color: rgba(255, 255, 255, 0.85);
}

.site-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2rem;
	margin-bottom: 2rem;
	align-items: center;
}

.site-footer .custom-logo {
	max-height: 64px;
	width: auto;
}

.site-footer__cta {
	text-align: right;
}

.site-footer__cta .btn {
	background: var(--color-lime);
	color: var(--color-indigo);
	border-radius: 0;
	padding: 1.1rem 2.5rem;
	font-weight: 600;
}

.site-footer h4 {
	color: #fff;
	font-size: 1rem;
}

.site-footer__social {
	display: flex;
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 0;
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 1.5rem;
	font-size: 0.85rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.grid--3,
	.grid--2,
	.contact-grid,
	.services-page__grid,
	.about-hero__grid,
	.site-footer__cols {
		grid-template-columns: 1fr;
	}

	.about-band .container {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.about-band__card {
		margin-left: 0;
		margin-top: -2rem;
	}

	.nav-toggle {
		display: block;
	}

	.main-nav {
		display: none;
		position: absolute;
		top: 88px;
		left: 0;
		right: 0;
		background: var(--color-indigo);
		padding: 1rem 1.5rem;
	}

	.main-nav.is-open {
		display: block;
	}

	.main-nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
}