/*
Theme Name: MS Services & Drafting
Theme URI: https://msservicesdrafting.com
Author: MS Services & Drafting Company
Author URI: https://msservicesdrafting.com
Description: Custom WordPress theme for MS Services & Drafting Company. CAD drafting, Civil 3D drafting, permit drafting, and architectural design support. Built for use with the Advanced Custom Fields PRO plugin so every section of the site can be edited from the WordPress admin.
Version: 1.0.0
Requires at least: 5.5
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ms-drafting
Tags: business, one-column, custom-menu, sticky-header
*/

:root {
	--navy: #11304e;
	--navy-dark: #0b2238;
	--blue: #1d6fd1;
	--blue-dark: #155cb0;
	--amber: #f5a623;
	--ink: #22303e;
	--muted: #5a6b7c;
	--line: #dde5ec;
	--bg: #f5f8fb;
	--white: #ffffff;
	--radius: 10px;
	--shadow: 0 2px 12px rgba(17, 48, 78, 0.08);
	--font:
		"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
		sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font);
	color: var(--ink);
	background: var(--white);
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex: 1;
}

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

h1,
h2,
h3,
h4 {
	color: var(--navy);
	line-height: 1.25;
	margin: 0 0 0.5em;
}

h1 {
	font-size: clamp(1.9rem, 4vw, 2.8rem);
}

h2 {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
}

h3 {
	font-size: 1.2rem;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--blue);
}

.container {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

.section {
	padding: 4rem 0;
}

.section--alt {
	background: var(--bg);
}

.section--navy {
	background: var(--navy);
}

.section--navy h2,
.section--navy h3 {
	color: var(--white);
}

.section--navy p {
	color: #c8d6e4;
}

.section-intro {
	max-width: 760px;
	color: var(--muted);
	font-size: 1.05rem;
}

.eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--blue);
	margin-bottom: 0.5rem;
}

.eyebrow--light {
	color: var(--amber);
}

/* Buttons */
.btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	text-align: center;
	border: 2px solid transparent;
	cursor: pointer;
	transition:
		background 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease;
}

.btn--primary {
	background: var(--amber);
	color: var(--navy-dark);
}

.btn--primary:hover {
	background: #e09612;
}

.btn--blue {
	background: var(--blue);
	color: var(--white);
}

.btn--blue:hover {
	background: var(--blue-dark);
}

.btn--outline {
	border-color: var(--blue);
	color: var(--blue);
	background: transparent;
}

.btn--outline:hover {
	background: var(--blue);
	color: var(--white);
}

.btn--outline-light {
	border-color: #ffffff99;
	color: var(--white);
	background: transparent;
}

.btn--outline-light:hover {
	background: var(--white);
	color: var(--navy);
}

.btn--small {
	padding: 0.45rem 1rem;
	font-size: 0.9rem;
	margin-top: 0.25rem;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* Cards & grids */
.grid {
	display: grid;
	gap: 1.5rem;
}

.grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.75rem;
	box-shadow: var(--shadow);
}

.card h3 {
	margin-top: 0;
}

.card p:last-child {
	margin-bottom: 0;
}

.card--media {
	padding: 0;
	overflow: hidden;
}

.card--media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.card--media .card-body {
	padding: 1.25rem 1.5rem 1.5rem;
}

.card-body p {
	font-size: 0.95rem;
}

.card-body p:last-child {
	margin-bottom: 0;
}

.tag {
	display: inline-block;
	background: #e7f0fb;
	color: var(--blue-dark);
	font-size: 0.78rem;
	font-weight: 600;
	border-radius: 999px;
	padding: 0.2rem 0.75rem;
	margin: 0 0.35rem 0.5rem 0;
}

/* Check list */
.check-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.65rem;
}

.check-list li {
	padding-left: 1.75rem;
	position: relative;
}

.check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--blue);
	font-weight: 700;
}

.check-list--columns {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	column-gap: 2.5rem;
}

.section--navy .check-list li::before {
	color: var(--amber);
}

.section--navy .check-list li {
	color: #c8d6e4;
}

/* Topbar */
.topbar {
	background: var(--navy-dark);
	color: #c8d6e4;
	font-size: 0.88rem;
	padding: 0.4rem 0;
}

.topbar a {
	color: var(--amber);
	font-weight: 600;
	text-decoration: none;
}

/* Header */
.site-header {
	background: var(--white);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 50;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
	flex-wrap: wrap;
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--navy);
	margin-right: auto;
}

.brand__mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 8px;
	background: var(--navy);
	color: var(--white);
	font-weight: 800;
	letter-spacing: 0.02em;
}

.brand__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	line-height: 1.2;
}

.brand__text small {
	color: var(--muted);
	font-size: 0.72rem;
	line-height: 1.3;
}

.nav {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.1rem;
}

.nav a {
	text-decoration: none;
	color: var(--ink);
	font-weight: 500;
	font-size: 0.95rem;
}

.nav ul a:hover,
.nav ul .current-menu-item > a,
.nav ul .current_page_item > a {
	color: var(--blue);
}

.nav__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.nav__actions .btn {
	white-space: nowrap;
	padding: 0.6rem 1.25rem;
}

.nav-toggle {
	display: none;
}

.nav-toggle__btn {
	display: none;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	padding: 0.5rem;
}

.nav-toggle__btn span {
	width: 24px;
	height: 3px;
	background: var(--navy);
	border-radius: 2px;
}

@media (max-width: 980px) {
	.nav-toggle__btn {
		display: flex;
	}

	.nav {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		padding: 1rem 0 1.25rem;
	}

	.nav ul {
		flex-direction: column;
		gap: 0.75rem;
		width: 100%;
	}

	.nav__actions {
		margin-top: 1rem;
		flex-wrap: wrap;
	}

	.nav-toggle:checked ~ .nav {
		display: flex;
	}
}

/* Page hero (inner pages) */
.page-hero {
	background: linear-gradient(135deg, var(--navy-dark), var(--navy) 60%, #1a4368);
	color: var(--white);
	padding: 4.5rem 0 3.5rem;
}

.page-hero h1 {
	color: var(--white);
	margin-bottom: 0.5rem;
}

.page-hero p {
	color: #c8d6e4;
	max-width: 760px;
	font-size: 1.1rem;
	margin-bottom: 0;
}

/* Section header block */
.section-head {
	margin-bottom: 2.25rem;
}

/* Quote / review */
.quote {
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 4px solid var(--amber);
	border-radius: var(--radius);
	padding: 1.5rem 1.75rem;
	box-shadow: var(--shadow);
}

.quote blockquote {
	margin: 0 0 0.75rem;
	font-size: 1.02rem;
	color: var(--ink);
}

.quote blockquote p {
	margin: 0.5rem 0 0;
	font-weight: 400;
	color: var(--muted);
}

.quote cite {
	font-style: normal;
	font-weight: 600;
	color: var(--muted);
	font-size: 0.9rem;
}

/* CTA band */
.cta-band {
	background: linear-gradient(135deg, var(--navy-dark), var(--navy));
	color: var(--white);
	text-align: center;
	padding: 4rem 0;
}

.cta-band h2 {
	color: var(--white);
}

.cta-band p {
	color: #c8d6e4;
	max-width: 720px;
	margin: 0 auto 1rem;
}

.cta-band .btn-row {
	justify-content: center;
}

/* Home hero */
.hero {
	background: linear-gradient(135deg, var(--navy-dark), var(--navy) 55%, #1a4368);
	color: var(--white);
	padding: 4.5rem 0;
}

.hero__inner {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 3rem;
	align-items: center;
}

.hero__eyebrow {
	color: var(--amber);
}

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

.hero p {
	color: #c8d6e4;
	font-size: 1.1rem;
}

.hero__media img {
	border-radius: var(--radius);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.card--cta {
	background: var(--navy);
	border-color: var(--navy);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}

.card--cta h3 {
	color: var(--white);
}

.card--cta p {
	color: #c8d6e4;
}

.card--cta .btn {
	margin-top: auto;
}

.portfolio-card {
	text-decoration: none;
}

.portfolio-card h3 {
	font-size: 1.05rem;
	margin: 0;
}

.tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.tag-cloud .tag {
	font-size: 0.92rem;
	padding: 0.4rem 1rem;
}

/* Services page */
.service__inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 3rem;
	align-items: center;
}

.service__copy--flip {
	order: 2;
}

.service__media img {
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--line);
}

.service__copy .check-list {
	margin: 1.25rem 0;
}

section[id] {
	scroll-margin-top: 90px;
}

/* About page */
.about__inner {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 3rem;
	align-items: start;
}

.about__media img {
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--line);
}

.process-list {
	padding-left: 1.25rem;
	display: grid;
	gap: 0.65rem;
	margin: 0;
}

/* Portfolio page */
.project-meta {
	color: var(--muted);
	font-size: 0.88rem;
	margin: 0 0 0.75rem;
}

/* Contact page */
.contact__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.contact__card p {
	color: var(--muted);
}

.contact__card .btn {
	margin-top: auto;
}

/* Default page content */
.page-content {
	max-width: 820px;
}

.page-content img {
	border-radius: var(--radius);
}

/* Footer */
.site-footer {
	background: var(--navy-dark);
	color: #c8d6e4;
	margin-top: auto;
}

.site-footer h3 {
	color: var(--white);
	font-size: 1.05rem;
	margin-bottom: 0.85rem;
}

.site-footer__grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	padding-top: 3.5rem;
	padding-bottom: 2.5rem;
}

.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.45rem;
}

.site-footer a {
	color: #c8d6e4;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--amber);
}

.site-footer__bottom {
	border-top: 1px solid #ffffff1f;
	padding: 1.25rem 0;
	font-size: 0.88rem;
}

.site-footer__seo {
	margin: 0 0 0.35rem;
	color: #9db2c6;
}

.site-footer__copy {
	margin: 0;
	color: #7d93a9;
}

@media (max-width: 880px) {
	.hero__inner,
	.service__inner,
	.about__inner {
		grid-template-columns: 1fr;
	}

	.service__copy--flip {
		order: 0;
	}
}

@media (max-width: 640px) {
	.section {
		padding: 3rem 0;
	}
}