/*
Theme Name: Gloria World Vision
Theme URI: https://gloriawv.com/
Description: Child theme of BlankSlate for the Gloria World Vision experiential / BTL marketing agency site. Converts the custom Gloria static template (home, about, services) into a WordPress theme.
Author: Gloria World Vision
Version: 1.0.6
Template: blankslate
Text Domain: gloria-child
*/

/* All visual styling ships from the template stylesheets enqueued in functions.php
   (assets/css/style.css, about.css, services.css). This file only carries the
   required child-theme header plus a few page-specific additions. */

/* ── Contact page ──
   Small hero: reuses the site's own .container / .sec-head / .eyebrow / .sec-title
   components so it matches every other section. Only adds top padding to clear the
   fixed nav (it's the first thing on the page). Light, like the rest of the site. */
/* The nav is white by default (built for the dark home hero). This page is
   light top-to-bottom, so paint the nav dark like its scrolled ".solid" state. */
.page-ct #nav {
	color: var(--text);
}
.page-ct .n-logo img {
	filter: none;
}

/* When contact page reuses the dark services hero, force white nav */
.page-ct #nav.hero-dark,
#nav.hero-dark {
    color: var(--white);
}
.page-ct #nav.hero-dark .n-logo img,
#nav.hero-dark .n-logo img {
    filter: brightness(0) invert(1);
}

/* For pages that start with a dark hero (services/contact) we want the
   NAV to appear white initially, but switch to the site's normal light
   solid background when the user scrolls. Keep the same solid rules. */
#nav.hero-dark.solid,
.page-sv #nav.solid,
.page-ct #nav.solid,
.page-wk #nav.solid {
	background: rgba(249, 249, 247, .92);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	color: var(--text);
}
#nav.hero-dark.solid .n-logo img,
.page-sv #nav.solid .n-logo img,
.page-ct #nav.solid .n-logo img,
.page-wk #nav.solid .n-logo img {
	filter: none;
}
#nav.hero-dark.solid .n-cta,
.page-sv #nav.solid .n-cta,
.page-ct #nav.solid .n-cta,
.page-wk #nav.solid .n-cta {
	background: var(--text);
	color: var(--white);
}

.ct-hero {
	padding: 11rem 0 2rem;
}
.ct-hero .sec-head {
	margin-bottom: 0;
}

/* Contact section: use the light site background instead of the home page's dark
   band, and flip the text/form colours that were tuned for the dark version. */
.page-ct #contact {
	background: var(--off);
	color: var(--text);
}
.page-ct .contact-wrap {
	min-height: auto;
	grid-template-columns: 1fr 1.1fr;
	gap: 5rem;
	align-items: start;
	padding: 1rem 0 5rem;
}
.page-ct .ct-left {
	padding: 0;
}
.page-ct .ct-right {
	padding: 0;
}
.page-ct .eyebrow.light {
	color: var(--text);
}
.page-ct .ct-title {
	color: var(--text);
}
.page-ct .ct-info h4 {
	color: var(--text);
}
.page-ct .ct-info p,
.page-ct .ct-info a {
	color: var(--muted);
}
/* Form fields were tuned for the dark band — repaint for the light background. */
.page-ct .cf-f input,
.page-ct .cf-f select,
.page-ct .cf-f textarea {
	color: var(--text);
	border-bottom: 1px solid rgba(14, 29, 82, .18);
}
.page-ct .cf-f input::placeholder,
.page-ct .cf-f textarea::placeholder {
	color: rgba(14, 29, 82, .4);
}
.page-ct .cf-f select option {
	background: #fff;
}
.page-ct .ct-social .cs {
	color: var(--text);
	border-color: rgba(14, 29, 82, .2);
}

@media (max-width: 900px) {
	.page-ct .contact-wrap {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.page-ct .ct-left {
		border-bottom: 1px solid rgba(14, 29, 82, .1);
		padding-bottom: 3rem;
		margin-bottom: 3rem;
	}
}
@media (max-width: 768px) {
	.ct-hero {
		padding: 9rem 0 1rem;
	}
}