/*
Theme Name:   Sky City Developers (Astra Child)
Theme URI:    https://skycitydevelopers.com
Description:  Child theme for Astra. On activation it creates the Sky City Developers pages (Home, Services, service pages, Projects, Areas, About, Free Quote, Privacy), sets the home page and builds the main menu. Business details are edited under Appearance > Customize > Sky City Business Details.
Author:       Sky City Developers
Template:     astra
Version:      1.1.1
Requires at least: 6.3
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  skycity
*/

/* ---------- Brand tokens ---------- */
:root {
	--sc-navy: #0f2a44;
	--sc-navy-deep: #0a1d30;
	--sc-amber: #f2a900;
	--sc-amber-dark: #c98c00;
	--sc-ink: #1d2733;
	--sc-muted: #5b6776;
	--sc-line: #e3e7ec;
	--sc-bg: #f5f7f9;
	--sc-white: #ffffff;
	--sc-radius: 10px;
	--sc-font-head: "Barlow", "Helvetica Neue", Arial, sans-serif;
	--sc-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

	/* Map onto Astra's global palette so Astra elements pick up the brand */
	--ast-global-color-0: #0f2a44;
	--ast-global-color-1: #c98c00;
	--ast-global-color-2: #0f2a44;
	--ast-global-color-3: #1d2733;
	--ast-global-color-4: #f5f7f9;
	--ast-global-color-5: #ffffff;
}

/* ---------- Base typography ---------- */
body,
button,
input,
select,
textarea {
	font-family: var(--sc-font-body);
	color: var(--sc-ink);
}
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--sc-font-head);
	font-weight: 700;
	color: var(--sc-navy);
	letter-spacing: -0.01em;
}
.entry-content h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); margin-top: 0.4em; }
.entry-content h3 { font-size: 1.3rem; }
a { color: var(--sc-navy); }
a:hover { color: var(--sc-amber-dark); }

/* ---------- Top bar (call / email / quote) ---------- */
.sc-topbar {
	background: var(--sc-navy-deep);
	color: #dfe6ee;
	font-size: 0.9rem;
}
.sc-topbar__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 8px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.sc-topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.sc-topbar a:hover { color: var(--sc-amber); }
.sc-topbar__contact { display: flex; gap: 20px; flex-wrap: wrap; }
.sc-topbar__cta {
	background: var(--sc-amber);
	color: var(--sc-navy-deep) !important;
	padding: 6px 14px;
	border-radius: 6px;
}
.sc-topbar__cta:hover { background: #ffc233; }
@media (max-width: 640px) {
	.sc-topbar__areas { display: none; }
}

/* ---------- Buttons ---------- */
.wp-block-button .wp-block-button__link,
.sc-form button {
	border-radius: 8px;
	font-weight: 700;
	padding: 14px 26px;
	font-family: var(--sc-font-head);
	font-size: 1.05rem;
	letter-spacing: 0.01em;
}
.sc-btn-primary .wp-block-button__link {
	background: var(--sc-amber);
	color: var(--sc-navy-deep);
}
.sc-btn-primary .wp-block-button__link:hover { background: #ffc233; color: var(--sc-navy-deep); }
.sc-btn-ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.7);
}
.sc-btn-ghost .wp-block-button__link:hover { background: #fff; color: var(--sc-navy); }
.sc-btn-dark .wp-block-button__link { background: var(--sc-navy); color: #fff; }
.sc-btn-dark .wp-block-button__link:hover { background: var(--sc-navy-deep); color: #fff; }

/* ---------- Sections ---------- */
.sc-section {
	padding: clamp(48px, 6vw, 88px) 20px;
}
.sc-section > * { max-width: 1140px; margin-left: auto; margin-right: auto; }
.sc-section--alt { background: var(--sc-bg); }
.sc-section--dark { background: var(--sc-navy); color: #e6edf4; }
.sc-section--dark h2,
.sc-section--dark h3 { color: #fff; }
.sc-section--dark a { color: var(--sc-amber); }

.sc-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--sc-amber-dark);
	margin-bottom: 0.4em;
}
.sc-section--dark .sc-eyebrow,
.sc-hero .sc-eyebrow { color: var(--sc-amber); }
.sc-lead { font-size: 1.15rem; color: var(--sc-muted); max-width: 720px; }

/* ---------- Hero ---------- */
.sc-hero {
	background:
		linear-gradient(115deg, rgba(10, 29, 48, 0.94) 0%, rgba(15, 42, 68, 0.86) 55%, rgba(15, 42, 68, 0.55) 100%),
		var(--sc-hero-image, linear-gradient(135deg, #16385a, #0a1d30));
	background-size: cover;
	background-position: center;
	color: #e6edf4;
	padding: clamp(64px, 9vw, 130px) 20px;
}
.sc-hero > * { max-width: 1140px; margin-left: auto; margin-right: auto; }
.sc-hero h1 {
	color: #fff;
	font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
	line-height: 1.08;
	max-width: 820px;
	margin-bottom: 0.4em;
}
.sc-hero .sc-lead { color: #c9d5e2; }
.sc-hero .wp-block-buttons { margin-top: 1.6em; }
.sc-page-hero { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.sc-page-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }

/* ---------- Trust strip ---------- */
.sc-trust {
	background: var(--sc-amber);
	padding: 18px 20px;
}
.sc-trust ul {
	max-width: 1140px;
	margin: 0 auto !important;
	padding: 0 !important;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 24px;
	font-weight: 700;
	color: var(--sc-navy-deep);
	font-family: var(--sc-font-head);
	font-size: 1.02rem;
}
.sc-trust li::before { content: "✓ "; }

/* ---------- Cards ---------- */
.sc-cards { gap: 22px !important; }
.sc-cards > .wp-block-column {
	background: var(--sc-white);
	border: 1px solid var(--sc-line);
	border-top: 4px solid var(--sc-amber);
	border-radius: var(--sc-radius);
	padding: 26px 24px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sc-cards > .wp-block-column:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(15, 42, 68, 0.1);
}
.sc-cards h3 { margin-top: 0; }
.sc-cards p:last-child { margin-bottom: 0; }
.sc-cards a { font-weight: 700; text-decoration: none; }

/* ---------- Steps ---------- */
.sc-steps { counter-reset: scstep; }
.sc-steps > .wp-block-column { position: relative; padding-top: 54px; }
.sc-steps > .wp-block-column::before {
	counter-increment: scstep;
	content: counter(scstep);
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sc-amber);
	color: var(--sc-navy-deep);
	font-weight: 800;
	font-family: var(--sc-font-head);
	display: grid;
	place-items: center;
}

/* ---------- Lists ---------- */
.sc-ticks { list-style: none; padding-left: 0 !important; margin-left: 0 !important; }
.sc-ticks li { padding-left: 1.7em; position: relative; margin-bottom: 0.5em; }
.sc-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.95em;
	height: 0.55em;
	border-left: 3px solid var(--sc-amber-dark);
	border-bottom: 3px solid var(--sc-amber-dark);
	transform: rotate(-45deg);
}
.sc-areas-list {
	columns: 3 180px;
	column-gap: 28px;
}

/* ---------- Project placeholders ---------- */
.sc-project {
	aspect-ratio: 4 / 3;
	background: repeating-linear-gradient(45deg, #e9edf2, #e9edf2 12px, #f3f5f8 12px, #f3f5f8 24px);
	border-radius: var(--sc-radius);
	display: grid;
	place-items: center;
	color: var(--sc-muted);
	font-weight: 600;
	text-align: center;
	padding: 16px;
}

/* ---------- CTA band ---------- */
.sc-cta {
	background: linear-gradient(120deg, var(--sc-navy) 0%, var(--sc-navy-deep) 100%);
	color: #e6edf4;
	text-align: center;
	padding: clamp(48px, 6vw, 80px) 20px;
}
.sc-cta h2 { color: #fff; }
.sc-cta .wp-block-buttons { justify-content: center; }

/* ---------- Quote form ---------- */
.sc-form {
	background: var(--sc-white);
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius);
	padding: clamp(20px, 3vw, 34px);
	box-shadow: 0 10px 30px rgba(15, 42, 68, 0.06);
}
.sc-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 18px;
}
.sc-form__full { grid-column: 1 / -1; }
.sc-form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; }
.sc-form input[type="text"],
.sc-form input[type="email"],
.sc-form input[type="tel"],
.sc-form select,
.sc-form textarea {
	width: 100%;
	border: 1px solid #cdd5de;
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 1rem;
	background: #fff;
}
.sc-form input:focus,
.sc-form select:focus,
.sc-form textarea:focus {
	outline: 3px solid rgba(242, 169, 0, 0.35);
	border-color: var(--sc-amber-dark);
}
.sc-form textarea { min-height: 140px; }
.sc-form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--sc-muted); }
.sc-form__consent input { margin-top: 4px; }
.sc-form button {
	background: var(--sc-amber);
	color: var(--sc-navy-deep);
	border: 0;
	cursor: pointer;
	width: 100%;
}
.sc-form button:hover { background: #ffc233; }
.sc-hp { position: absolute !important; left: -9999px !important; height: 1px; overflow: hidden; }
.sc-notice {
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 18px;
	font-weight: 600;
}
.sc-notice--ok { background: #e7f6ec; color: #165c2f; border: 1px solid #b8e2c6; }
.sc-notice--err { background: #fdecec; color: #8a1c1c; border: 1px solid #f3c2c2; }
@media (max-width: 640px) {
	.sc-form__grid { grid-template-columns: 1fr; }
}

/* ---------- Company band (above footer) ---------- */
.sc-company {
	background: var(--sc-navy-deep);
	color: #b9c6d3;
	font-size: 0.92rem;
	padding: 40px 20px 28px;
}
.sc-company__inner {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 28px;
}
.sc-company h4 { color: #fff; font-size: 1.05rem; margin-bottom: 0.6em; }
.sc-company a { color: #fff; text-decoration: none; }
.sc-company a:hover { color: var(--sc-amber); }
.sc-company ul { list-style: none; margin: 0; padding: 0; }
.sc-company li { margin-bottom: 6px; }
.sc-company__legal {
	max-width: 1140px;
	margin: 26px auto 0;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.82rem;
	color: #8fa0b2;
}
@media (max-width: 820px) {
	.sc-company__inner { grid-template-columns: 1fr; }
}

/* ---------- Sticky mobile call bar ---------- */
.sc-mobilebar { display: none; }
@media (max-width: 768px) {
	.sc-mobilebar {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
	}
	.sc-mobilebar a {
		text-align: center;
		padding: 14px 6px;
		font-weight: 700;
		text-decoration: none;
		font-family: var(--sc-font-head);
		font-size: 1rem;
	}
	.sc-mobilebar__call { background: var(--sc-navy); color: #fff; }
	.sc-mobilebar__wa { background: #1f9d55; color: #fff; }
	.sc-mobilebar__quote { background: var(--sc-amber); color: var(--sc-navy-deep); }
	body { padding-bottom: 52px; }
}

/* ---------- Astra tweaks ---------- */
.ast-primary-header-bar { border-bottom: 1px solid var(--sc-line); }
.main-header-menu .menu-link { font-weight: 600; }
.page .entry-content > .sc-hero:first-child,
.page .entry-content > .sc-section:first-child { margin-top: 0; }
.ast-page-builder-template .entry-content > * { margin-bottom: 0; }

/* CTA / dark section lead text */
.sc-cta .sc-lead,
.sc-section--dark .sc-lead { color: #c9d5e2; margin-left: auto; margin-right: auto; }
.sc-cta > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.sc-form *, .sc-form *::before, .sc-form *::after { box-sizing: border-box; }
@media (max-width: 640px) {
	.sc-topbar__email { display: none; }
	.sc-topbar__inner { flex-wrap: nowrap; padding: 6px 16px; }
	.sc-topbar__cta { padding: 5px 10px; font-size: 0.85rem; }
}

/* ---------- Project cards ---------- */
.sc-project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 28px;
}
.sc-project-card {
	display: flex;
	flex-direction: column;
	background: var(--sc-white);
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius);
	overflow: hidden;
	text-decoration: none !important;
	color: var(--sc-ink) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sc-project-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 42, 68, 0.12); }
.sc-project-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; height: auto; }
.sc-project-card__img--empty { background: repeating-linear-gradient(45deg, #e9edf2, #e9edf2 12px, #f3f5f8 12px, #f3f5f8 24px); }
.sc-project-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sc-project-card__type { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--sc-amber-dark); }
.sc-project-card h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.sc-project-card p { margin: 0; color: var(--sc-muted); font-size: 0.95rem; }
.sc-project-card__more { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--sc-navy); }

/* ---------- Single project ---------- */
.single-sc_project .entry-content { max-width: 1000px; margin-left: auto; margin-right: auto; }
.sc-project-meta { color: var(--sc-muted); border-left: 4px solid var(--sc-amber); padding-left: 12px; }
.single-sc_project .wp-block-gallery img { border-radius: 6px; }
.single-sc_project .wp-block-video video { border-radius: 8px; width: 100%; }
.sc-cta--inline { border-radius: var(--sc-radius); margin: 40px auto 20px; max-width: 1000px; }

/* ---------- Lightbox ---------- */
.sc-lightbox { position: fixed; inset: 0; background: rgba(5, 14, 24, 0.94); display: none; align-items: center; justify-content: center; z-index: 100000; padding: 40px 56px; }
.sc-lightbox.is-open { display: flex; }
.sc-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.sc-lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; padding: 8px 14px; }
.sc-lightbox__close { top: 10px; right: 12px; }
.sc-lightbox__prev { left: 6px; top: 50%; transform: translateY(-50%); }
.sc-lightbox__next { right: 6px; top: 50%; transform: translateY(-50%); }

/* ---------- CTA buttons on project pages (independent of WP block CSS) ---------- */
.sc-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px 14px;
	margin-top: 1.4em;
}
.sc-btn {
	display: inline-block;
	padding: 14px 26px;
	border-radius: 8px;
	font-family: var(--sc-font-head);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.2;
	text-decoration: none !important;
	border: 2px solid transparent;
	transition: background 0.15s ease, color 0.15s ease;
}
.sc-btn--primary { background: var(--sc-amber); color: var(--sc-navy-deep) !important; }
.sc-btn--primary:hover { background: #ffc233; }
.sc-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, 0.7); }
.sc-btn--ghost:hover { background: #fff; color: var(--sc-navy) !important; }
@media (max-width: 480px) {
	.sc-cta-actions { flex-direction: column; align-items: stretch; }
	.sc-btn { text-align: center; }
}