/*
Theme Name: Everest Child
Template: everest-parent
Version: 1.0.0
*/

/* =========================================================================
   Veterans Relief Committee
   Palette: coolors.co/36453b-596869-515751-f5f9e9-c2c1a5
     --color-1 #36453B  footer + mobile CTA bar
     --color-2 #515751  header, buttons, links, form band
     --color-3 #C2C1A5  hover text on dark surfaces
     --color-4 #F5F9E9  ivory — page/container background
     --color-5 #596869  (unused by the parent theme)
   ========================================================================= */

:root {
	--vrc-ivory: #F5F9E9;
}

/* -------------------------------------------------------------------------
   1. Ivory containers
   The parent leaves every content surface transparent over a white <body>,
   so recolouring the body carries the whole page. The banner's frosted copy
   panel and the form fields are the only hard-coded whites left over.
   ------------------------------------------------------------------------- */
body {
	background-color: var(--vrc-ivory);
}

/* functions.php emits `--color-text`, but base.css line 432 reads `--text-color` — a name
   that is never defined. The Customizer's "Text Color" control is therefore dead and body
   copy falls back to pure black. Re-point it at the variable the theme actually sets. */
body {
	color: var(--color-text);
}

.banner-section .content {
	background: rgba(245, 249, 233, 0.82);
}

body.home .banner-section .content {
	background: rgba(245, 249, 233, 0.86);
}

/* Ivory rather than pure white on the dark header / footer / form band. */
.primary-header,
.primary-footer,
.primary-footer a,
#form-section,
#form-section .gform_wrapper,
.mobile-header .mobile-nav a,
.mobile-header .nav-toggler {
	color: var(--vrc-ivory);
}

#form-section input[type="text"],
#form-section input[type="email"],
#form-section input[type="tel"],
#form-section textarea,
#form-section select {
	color: var(--color-1);
	background-color: var(--vrc-ivory);
	border: 1px solid rgba(54, 69, 59, 0.25);
}
.feature-section .feature{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.primary-footer .logo {
	margin-top: 0;
	margin-bottom: 0;
}
.primary-footer .copyright {
    text-align: center;
}
.primary-footer {
    padding: 80px 0;
}
/* -------------------------------------------------------------------------
   3. Header — parent-theme bugs
   header.php emits `.col.phone` while base.css only ever styles `.phone-col`,
   so the phone column is unstyled. And .logo-col / .phone-col are both
   `flex: 0 1 200px` inside a nowrap row, so a wide menu shrinks the logo to
   0px wide — present in the DOM, loaded, and invisible.
   ------------------------------------------------------------------------- */
.primary-header .logo-col {
	flex: 0 0 auto;
	min-width: 125px;
}

.primary-header .phone,
.primary-header .phone-col {
	flex: 0 0 auto;
	white-space: nowrap;
	font-weight: 500;
}

.primary-header .phone a {
	color: var(--vrc-ivory);
}

.primary-header .phone a:hover,
.primary-header .phone a:focus {
	color: var(--color-3);
}

.primary-header .nav-col {
	flex: 1 1 auto;
	min-width: 0;
}

/* -------------------------------------------------------------------------
   3b. Donate button
   Markup comes from the child's header.php override (the parent exposes no hook
   in header.php). Selectors carry three classes so they outrank the
   `.primary-header .phone a` colour rule above.
   ------------------------------------------------------------------------- */
.primary-header .phone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	line-height: 1.2;
}

.primary-header .phone .phone-number {
	font-weight: 500;
}

.primary-header .phone .donate-btn {
	display: inline-block;
	background-color: var(--color-3);
	color: var(--color-1);
	padding: 7px 22px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.primary-header .phone .donate-btn:hover,
.primary-header .phone .donate-btn:focus {
	background-color: var(--vrc-ivory);
	color: var(--color-1);
}

/* Mobile CTA bar: the desktop header is hidden under 992px, so the donate link rides
   along in the mobile bar instead. Four items in a 50px bar is tight — drop the label
   to an icon on narrow phones. */
.mobile-header .mobile-c2a .donate-link {
	flex: 1 0 auto;
	border-left: 1px solid rgba(245, 249, 233, 0.4);
}

@media screen and (max-width: 560px) {
	.mobile-header .mobile-c2a .donate-link {
		flex: 0 0 48px;
	}
	.mobile-header .mobile-c2a .donate-link .social-text {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   4. Content tweaks
   ------------------------------------------------------------------------- */
.banner-section .content .eyebrow {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 15px;
	margin-bottom: 8px;
}

.content-section .content-col ul {
	padding-left: 1.2em;
}

.content-section .content-col li {
	margin-bottom: 8px;
}

.small-print {
	font-size: 14px;
	line-height: 1.6;
	opacity: 0.8;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid rgba(54, 69, 59, 0.15);
}

/* Portrait workshop clip on the Gallery page. */
.video-embed {
	margin: 34px auto 0;
	max-width: 380px;
	text-align: center;
}

.video-embed video {
	width: 100%;
	height: auto;
	display: block;
	background: #36453B;
}

.video-embed .video-caption {
	font-size: 14px;
	margin-top: 10px;
	opacity: 0.8;
}

/* Event cards deep-link from the home page, so give the anchor somewhere to land. */
.service-section .service {
	scroll-margin-top: 170px;
}