/*
Theme Name: Goldkind Family Ortho Child
Theme URI: https://goldkindfamilyortho.com
Template: astra
Author: Presentation Multimedia — OrthoMarketing.com
Author URI: https://www.presentationmultimedia.com/
Description: Astra child theme for Goldkind Family Orthodontics (goldkindfamilyortho.com), Morristown, NJ. Built for use with Elementor Pro.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: goldkind-ortho-child
*/

/* ==========================================================================
   1. Base overrides
   ========================================================================== */
:root {
	--gk-primary: #1A2B6B;        /* deep navy — headings, numbered badges, footer */
	--gk-primary-dark: #0F1D4D;
	--gk-accent: #F5C518;         /* gold/yellow — all CTA buttons, star ratings */
	--gk-text: #222222;
	--gk-bg-light: #F7F9FC;
}

body {
	color: var(--gk-text);
}

/* ==========================================================================
   2. Header / Navigation
   ========================================================================== */
.site-header,
.ast-primary-header-bar {
	background-color: #ffffff;
}

.main-header-menu .menu-item > a {
	font-weight: 600;
}

/* Sticky header shadow on scroll (see js/scripts.js) */
.site-header.gk-scrolled {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   3. Buttons / CTAs (Elementor buttons + Astra buttons both targeted)
   ========================================================================== */
.elementor-button,
.ast-button,
button,
input[type="submit"] {
	background-color: var(--gk-accent);
	color: var(--gk-primary-dark);
	border-radius: 4px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transition: background-color 0.2s ease, transform 0.15s ease;
}
.elementor-button:hover,
.ast-button:hover {
	background-color: var(--gk-primary);
	color: #ffffff;
	transform: translateY(-1px);
}

/* Secondary/dark button variant — e.g. "CALL US" in header, navy-on-yellow sections */
.elementor-button.gk-button-dark,
.ast-button.gk-button-dark {
	background-color: var(--gk-primary);
	color: #ffffff;
}
.elementor-button.gk-button-dark:hover,
.ast-button.gk-button-dark:hover {
	background-color: var(--gk-primary-dark);
}

/* ==========================================================================
   3b. Numbered step badges ("01" "02" "03" "04" large outline numerals)
   ========================================================================== */
.gk-step-number {
	font-size: 4rem;
	font-weight: 800;
	color: transparent;
	-webkit-text-stroke: 2px var(--gk-primary);
	line-height: 1;
}

/* Full-width CTA banner (e.g. "STOP Scrolling... START Smiling") */
.gk-cta-banner {
	background-color: var(--gk-accent);
}
.gk-cta-banner h2,
.gk-cta-banner h3 {
	color: var(--gk-primary);
}

/* ==========================================================================
   4. Testimonial cards
   ========================================================================== */
.gk-testimonial-card {
	background: #ffffff;
	border-radius: 10px;
	padding: 24px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gk-testimonial-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.09);
}
.gk-testimonial-card .stars {
	color: var(--gk-accent);
}

/* ==========================================================================
   5. Areas Served footer list (matches existing footer column pattern)
   ========================================================================== */
.gk-areas-served-list {
	columns: 2;
	list-style: none;
	padding: 0;
	margin: 0;
}
.gk-areas-served-list li {
	margin-bottom: 6px;
}

/* ==========================================================================
   5b. Footer (dark navy band matching live site)
   ========================================================================== */
.site-footer,
footer.site-footer,
.ast-small-footer {
	background-color: var(--gk-primary-dark);
	color: #ffffff;
}
.site-footer a,
.ast-small-footer a {
	color: #ffffff;
}

/* ==========================================================================
   6. Sticky mobile call bar
   ========================================================================== */
.gk-mobile-call-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	display: none;
	background: var(--gk-primary);
}
@media (max-width: 782px) {
	.gk-mobile-call-bar {
		display: flex;
	}
}
.gk-mobile-call-bar a {
	flex: 1;
	text-align: center;
	padding: 0.85rem 0;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

/* ==========================================================================
   7. Gravity Forms polish (Astra + Elementor sites commonly pair with GF)
   ========================================================================== */
.gform_wrapper .gfield input,
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea {
	border-radius: 6px;
}