/* ---------------------------------------------------------------------------
   Theme 7 (Cedar Grove Family Health) utility CSS.

   Divi 5 native module settings cover essentially the whole design: colours,
   typography, spacing, radii, shadows, and the CSS Grid and Flex layouts are
   all set per module in the builder. Only the rules below have no native
   equivalent, and each one states why it has to live here.
   --------------------------------------------------------------------------- */

/* Sticky header.
   Divi's Position option accepts relative, absolute and fixed only, and its
   separate Sticky option is JavaScript driven with its own offset arithmetic.
   SiteHeader.dc.html uses plain CSS position:sticky with top:0, so that is what
   is reproduced here. The z-index of 60 is set natively on the section. */
.t7-header.et_pb_section {
	position: sticky;
	top: 0;
}

/* Header paint on first frame.
   These four values are already set as native module settings, but Divi's Critical CSS
   splits module CSS into a small inline block plus a file that JavaScript loads after
   paint, and its heuristic does not treat the Theme Builder header as above the fold.
   The utility bar therefore rendered with no background until the deferred file arrived,
   which made the tinted strip look like plain white and the header read as one oversized
   block of dead space beneath the demo bar. Turning the split off is not an option here:
   Divi's static CSS generation on this install then drops every per-module rule. So the
   handful of header surfaces are repeated in this head stylesheet. If the header design
   changes, change it in the builder and mirror it here. */
.t7-topbar.et_pb_section {
	background-color: #F4F9FB;
	border-bottom: 1px solid #E2EEF4;
}

.t7-header.et_pb_section {
	background-color: #FFFFFF;
	border-bottom: 1px solid #EAF2F6;
}

/* Utility strip hidden while the network demo bar is on screen.
   The demo bar is a fixed 46px band the design never had, so the page opened with two
   stacked bars of secondary chrome above the menu. The body class is added by
   theme7-assets.php only while the demo bar actually renders, so on a real deployment,
   and inside the Divi builder, the strip returns and the header matches the design. */
body.t7-has-demobar .t7-topbar.et_pb_section {
	display: none;
}

/* Mobile menu drop panel.
   Divi positions .et_mobile_menu absolutely with width:100% against
   .et_pb_menu_inner_container, which is position:relative. In this header the Menu module
   is a flex item sized to just the hamburger, so that container is only as wide as the
   icon and the drop panel inherited that width, which cut the menu items off. Making the
   container static hands positioning to the sticky header section, so the panel spans the
   full header width and sits directly beneath it. Divi exposes no setting for this. */
@media (max-width: 980px) {
	/* Divi gives every .et_pb_module position:relative, so the Menu module and the flex
	   groups wrapping it are all containing blocks. Each has to be neutralised or the
	   panel resolves against the nearest one and stays narrow. With these static, the
	   nearest positioned ancestor is the header section itself. */
	.t7-header .et_pb_group,
	.t7-header .et_pb_menu.et_pb_module,
	.t7-header .et_pb_menu_inner_container,
	.t7-header .et_pb_menu__wrap {
		position: static;
	}

	.t7-header .et_mobile_menu {
		left: 0;
		right: 0;
		width: auto;
		top: 100%;
		border-top-color: #2C8CBB;
	}
}

/* Cover-fitted photos.
   The aspect ratio, radius and clipping are native Group settings on .t7-cover.
   Divi's Image module exposes no object-fit control and ignores sizing on the
   module, so these two properties make the <img> fill its ratio box the way the
   reference's cover-fitted image slots do. A real <img> is kept rather than a CSS
   background so the photo keeps its alt text and native lazy loading. */
.t7-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Current page nav pill.
   The desktop nav is built from Button modules so each link is a real <a>. Divi has
   no current-page state for Button modules, and the header is a single Theme Builder
   template shared by all five pages, so the active pill is keyed off WordPress's own
   page-id body class. The resting and hover states are native module settings; only
   this one state needs CSS. !important is required to beat Divi's own button rule,
   which is itself scoped to 'body #page-container .et_pb_section'. */
body.page-id-19 .t7-nav-home,
body.page-id-20 .t7-nav-about,
body.page-id-21 .t7-nav-services,
body.page-id-22 .t7-nav-patients,
body.page-id-23 .t7-nav-contact {
	background-color: #F4F9FB !important;
	color: #1E6E92 !important;
}