/*
Theme Name: Just Kids Dental Child
Theme URI: https://justkidsdentalnj.com
Template: astra
Author: Presentation Multimedia — OrthoMarketing.com
Author URI: https://www.presentationmultimedia.com/
Description: Astra child theme for Just Kids Dental (justkidsdentalnj.com), Belleville, NJ.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: just-kids-dental-child
*/

/* ==========================================================================
   1. Base overrides
   ========================================================================== */
:root {
	--jk-primary: #2E7EF5;        /* bright blue — stats band, footer */
	--jk-primary-dark: #1E5FC4;
	--jk-cta: #F5B942;            /* yellow-gold — "Book Appointment" buttons */
	--jk-cta-dark: #E0A429;
	--jk-underline: #F4801F;      /* orange — headline underline accents */
	--jk-text: #262626;
	--jk-bg-light: #F5FBFD;
}

body {
	color: var(--jk-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.jk-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(--jk-cta);
	color: #1a1a1a;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: background-color 0.2s ease, transform 0.15s ease;
}
.elementor-button:hover,
.ast-button:hover {
	background-color: var(--jk-cta-dark);
	transform: translateY(-1px);
}

/* Secondary/blue button variant (e.g. header "Book Appointment" on white bg) */
.elementor-button.jk-button-primary,
.ast-button.jk-button-primary {
	background-color: var(--jk-primary);
	color: #ffffff;
}
.elementor-button.jk-button-primary:hover,
.ast-button.jk-button-primary:hover {
	background-color: var(--jk-primary-dark);
}

/* Headline underline accent — e.g. "Beautiful Smiles", "Healthy Smile" */
.jk-underline-accent {
	text-decoration: underline;
	text-decoration-color: var(--jk-underline);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

/* Stats band (5,000 Happy Smiles / 3 Expert Doctors / etc.) */
.jk-stats-band {
	background-color: var(--jk-primary);
	color: #ffffff;
}
.jk-stats-band .stat-number {
	font-weight: 800;
	font-size: 2.5rem;
}

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

/* ==========================================================================
   5. Two-location selector (Belleville + second location)
   ========================================================================== */
.jk-location-tabs {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.jk-location-tabs button {
	background: var(--jk-bg-light);
	color: var(--jk-primary);
	border: 2px solid var(--jk-primary);
}
.jk-location-tabs button.active {
	background: var(--jk-primary);
	color: #ffffff;
}

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

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

/* ==========================================================================
   8. Gravity Forms polish
   ========================================================================== */
.gform_wrapper .gfield input,
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea {
	border-radius: 8px;
}