/* ==========================================================================
   Client Branding - Zulawinski / Arlington Dental Associates
   Client-specific colors, imagery, and overrides
   ========================================================================== */


/* Brand Palette
   ========================================================================== */

:root {
	--client-primary: #0172c2;        /* Main brand blue */
	--client-primary-dark: #015a9c;   /* Darker blue (inside headers) */
	--client-accent: #56cc76;         /* Green accent (buttons, icons) */
	--client-warm: #f5a623;           /* Warm amber accent (CTAs, highlights) */
	--client-dark: #404952;           /* Dark gray (footer) */
	--client-text-dark: #394149;      /* Dark blue text */
	--client-bg-light: #e6f2fb;       /* Light blue background */
	--client-sidebar-bg: rgba(1, 114, 194, 0.94);  /* Sidebar overlay */
}


/* Typography
   ========================================================================== */

h1, h2, h3, h4 {
	color: var(--client-primary);
	font-weight: 300;
}

.dark-blue {
	color: var(--client-text-dark);
}


/* Navigation
   ========================================================================== */

#top-header {
	background-color: var(--client-primary);
}

/* Curvy bottom on the main blue nav — desktop only. The wave extends
   BELOW the nav (not inside it) and uses blue fills that fade into
   transparent, so the hero shows through. */
#top-header.curvy-bottom::after {
	bottom: auto;
	top: 100%;
	height: 32px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 60' preserveAspectRatio='none'><path fill='%23ffffff' opacity='0.25' d='M0,38 C480,8 960,62 1920,26 L1920,0 L0,0 Z'/><path fill='%23ffffff' opacity='0.25' d='M0,28 C480,-6 960,52 1920,16 L1920,0 L0,0 Z'/><path fill='%230172c2' d='M0,18 C480,-10 960,42 1920,6 L1920,0 L0,0 Z'/></svg>");
}

@media (max-width: 767.98px) {
	#top-header.curvy-bottom::after {
		display: none;
	}
}


/* Mega Menu (Procedures)
   ========================================================================== */

.mega-menu-item {
	position: static !important;
}

.dropdown-menu.mega-menu {
	left: 0 !important;
	right: 0 !important;
	width: 100vw;
	max-width: 1400px;
	margin: 0 auto;
	padding: 1.5rem 2rem;
	border: none;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	background: #fff;
}

.mega-menu .mega-menu-header {
	color: var(--client-primary);
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--client-accent);
}

.mega-menu .mega-menu-header a {
	color: inherit;
	text-decoration: none;
}

.mega-menu .mega-menu-header a:hover {
	color: var(--client-accent);
}

.mega-menu .dropdown-item,
.mega-menu .dropdown-item:focus {
	padding: 0.35rem 0.5rem;
	font-size: 0.9rem;
	color: var(--client-text-dark);
	background-color: transparent;
	white-space: normal;
	border-radius: 4px;
}

.mega-menu .dropdown-item i {
	color: var(--client-accent);
	margin-right: 0.3rem;
	font-size: 0.8rem;
}

.mega-menu .dropdown-item:hover,
.mega-menu .dropdown-item:focus {
	background-color: var(--client-bg-light);
	color: var(--client-primary);
}

.mega-menu .dropdown-item:hover i,
.mega-menu .dropdown-item:focus i {
	color: var(--client-primary);
}

/* Mobile sidebar: grouped section headers */
.navbar-side .mobile-mega-header {
	color: #fff;
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0.75rem 0 0.25rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	opacity: 0.85;
}

.navbar-side .mobile-mega-header a {
	color: inherit;
	text-decoration: none;
}

a.text-dark:hover,
a.text-dark:focus {
	color: var(--client-accent) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
	color: white;
	background-color: var(--client-accent);
}

.navbar-side .navbar-side-content {
	background: var(--client-sidebar-bg);
}


/* Buttons
   ========================================================================== */

.btn-outline-primary {
	background-color: var(--client-accent);
	border-color: var(--client-accent);
	color: white;
}

.btn-outline-primary:hover {
	background-color: var(--client-primary);
	border-color: var(--client-primary);
	color: white;
}


/* Curvy Section Dividers (pure CSS via inline SVG)
   ========================================================================== */

/*
	Usage:
	• Add .curvy-top to a section for a wavy top edge
	• Add .curvy-bottom for a wavy bottom edge
	• Combine them on the same element for both
	• The wave fill = color of the ADJACENT section (default white).
	  Override with .curvy-fill-{color} modifiers if the adjacent
	  section isn't white.
*/

.curvy-top,
.curvy-bottom,
#inside-header,
#footer {
	position: relative;
}

.curvy-top::before,
.curvy-bottom::after,
#inside-header::after,
#footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 60px;
	pointer-events: none;
	z-index: 2;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 60' preserveAspectRatio='none'><path fill='%23ffffff' opacity='0.3' d='M0,22 C480,-6 960,50 1920,10 L1920,60 L0,60 Z'/><path fill='%230172c2' opacity='0.9' d='M0,34 C480,14 960,60 1920,22 L1920,60 L0,60 Z'/><path fill='%23ffffff' d='M0,44 C480,24 960,62 1920,32 L1920,60 L0,60 Z'/></svg>");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.curvy-top::before,
#footer::before {
	top: -1px;
	transform: scaleY(-1);
}

.curvy-bottom::after,
#inside-header::after {
	bottom: -1px;
}


/* Homepage Hero (microsite-style, full-bleed video)
   ========================================================================== */

#home-hero {
	min-height: 75vh;
	background-color: var(--client-primary);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Curvy-divider stacking: keep section bg below the waves */
#promo-banner.curvy-top,
#promo-banner.curvy-bottom,
#second-banner.curvy-top,
#second-banner.curvy-bottom,
#contact-gallery.curvy-top,
#contact-gallery.curvy-bottom {
	overflow: hidden;
}

/* Extra vertical breathing room when curvy dividers are present */
#second-banner.curvy-top,
#contact-gallery.curvy-top {
	padding-top: 4rem;
}

#second-banner.curvy-bottom,
#contact-gallery.curvy-bottom {
	padding-bottom: 4rem;
}

#home-hero .background-video-container-overlay {
	background: rgba(20, 40, 60, 0.55);
}

#home-hero .hero-content {
	position: relative;
	z-index: 1;
}

#home-hero h1 {
	color: white;
	font-weight: 300;
	font-size: 2.5rem;
}

#home-hero p.lead {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.35rem;
	line-height: 1.5;
}

@media (min-width: 768px) {
	#home-hero p.lead {
		font-size: 1.75rem;
	}
}

@media (min-width: 768px) {
	#home-hero .hero-content {
		padding-top: 6rem !important;
		padding-bottom: 6rem !important;
	}

	#home-hero h1 {
		font-size: 3.25rem;
	}
}


/* Homepage Cover
   ========================================================================== */

#homepage-cover {
	background-color: var(--client-bg-light);
	background-image: url("../vid/home-2021.jpg");
}

#homepage-cover .btn-outline-primary {
	background-color: var(--client-accent);
	border-color: var(--client-accent);
	color: white !important;
}

#homepage-cover .btn-outline-primary:hover {
	background-color: var(--client-primary);
	border-color: var(--client-primary);
	color: white !important;
}


/* Homepage Slideshow
   ========================================================================== */

#homepage-slideshow {
	background-color: var(--client-bg-light);
}

#content .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: var(--client-primary) !important;
}


/* Mobile Top Banner
   ========================================================================== */

#mobile-top-banner {
	background-image: url("../img/request-background.svg");
}

#mobile-top-banner .btn-outline-primary:hover {
	background-color: var(--client-primary);
	border-color: var(--client-primary);
	color: white !important;
}


/* Promo Banner
   ========================================================================== */

@media (min-width: 1200px) {
	#promo-banner {
		background-image: url("../img/homepage-implants-left.jpg");
	}
}


/* Second Banner
   ========================================================================== */

@media (min-width: 1200px) {
	#second-banner {
		background-image: url("../img/sleep-background.jpg");
	}
}


/* Reviews
   ========================================================================== */

#reviews-banner .fa {
	color: var(--client-primary);
}


/* Split Video
   ========================================================================== */

#split-video .picture {
	background-image: url("../img/logo-bg.png");
}


/* Split Screen
   ========================================================================== */

#split-first .picture {
	background-image: url("../img/arlington-bg-2.jpg");
}


/* Request Consultation Banner
   ========================================================================== */

#request-banner {
	background-image: url("../img/request-background.svg");
}

#request-banner .btn-outline-primary:hover {
	background-color: var(--client-primary);
	border-color: var(--client-primary);
	color: white !important;
}


/* Links Section
   ========================================================================== */

#links {
	background-image: url("../img/background-banner.svg");
}


/* Footer
   ========================================================================== */

#footer {
	background-color: var(--client-dark);
	padding-top: 2.5rem;
}

#footer .fa {
	color: var(--client-accent);
}

#footer .btn-outline-primary {
	background-color: var(--client-accent);
	border-color: var(--client-accent);
	color: white !important;
}

#footer .btn-outline-primary:hover {
	background-color: var(--client-primary);
	border-color: var(--client-primary);
	color: white !important;
}


/* Sitemap
   ========================================================================== */

#sitemap {
	background-color: var(--client-primary);
}


/* Inside Pages
   ========================================================================== */

#inside-header {
	background:
		radial-gradient(ellipse at top left, rgba(86, 204, 118, 0.5), transparent 45%),
		radial-gradient(ellipse at bottom right, rgba(86, 204, 118, 0.5), transparent 45%),
		linear-gradient(to bottom, var(--client-primary) 0%, var(--client-primary-dark) 100%);
	padding-top: 3rem;
	padding-bottom: 5rem;
	overflow: hidden;
}

#inside-header h1 {
	color: white;
	margin-bottom: 0;
}

/* When #inside-header is followed by a microsite-subnav, the subnav handles
   the wavy transition via its own mask — drop the inside-header's curvy-bottom
   wave so we don't get a white band sandwiched between blue sections. */
#inside-header:has(+ .microsite-subnav)::after {
	display: none;
}

#inside-header:has(+ .microsite-subnav) {
	padding-bottom: 2rem;
}

.table th {
	color: white;
	background-color: var(--client-primary);
}

.table .closed {
	color: rgb(216, 0, 0);
}


/* Hover Gallery / Meet the Team
   ========================================================================== */

#hover-gallery .text {
	background-color: var(--client-primary);
}

#hover-gallery .modal-body h2 {
	color: var(--client-primary);
}