/*
Theme Name: OWC Child
Theme URI: https://optimumwellnesscentres.com
Description: Child theme for the Optimum Wellness Centres Divi site. Houses site-specific CSS so it lives in version control instead of Divi's database-stored Theme Options.
Author: Optimum Wellness Centres
Template: Divi
Version: 1.0.0
Text Domain: owc-child
*/

/* ==========================================================================
   Site header nav — Divi's Menu Module (.et_pb_menu_0_tb_header) is the
   visible desktop/tablet nav (the Max Mega Menu code module in the second
   header row is display:none above 767px, so it isn't what renders here).

   Two fixes, confirmed against the live computed styles (getBoundingClientRect
   + getComputedStyle via CDP), not guessed from static CSS:
   1. The logo/nav content inside the menu module is already centered fine —
      logo and nav fill the module's box edge-to-edge. The "extends down too
      low" look is Divi's default .et_pb_module margin-bottom (33px) on
      .et_pb_menu_0_tb_header itself: since it's the last module in its
      column, that margin isn't collapsed by anything below it, so it just
      adds 33px of dead space under the nav with nothing balancing it above.
      Zeroing it removes exactly that dead strip.
   2. Hover swaps text to white (menu.css critical CSS: `ul li:hover>a{
      color:#FFFFFF}`) with no background to go with it except on the
      current page, so a plain hover went white-on-white and disappeared.
      Two different treatments, deliberately different selectors:

      a) Top-level items get a thin underline that scales in from the
         center, text color left unchanged (just cancelling Divi's white
         swap back to the normal maroon). Scoped with the `> nav > ul > li`
         direct-child chain so it only ever matches the seven top-level
         items, never the dropdown/sub-menu links. That scoping is
         load-bearing: a bare descendant `li > a` selector also matches
         the nested sub-menu links, whose boxes use much shallower padding
         than the top-level links, so the same underline bottom-offset
         badly overshoots their shorter boxes and draws the line through
         the text instead of under it. The underline is on ::before rather
         than ::after because Divi's own menu.css already puts the
         dropdown-caret pseudo-element on ::after with `top:50%!important`
         plus a transform, which fights an ::after here for both position
         and the scale transform.
      b) Dropdown/sub-menu links (Services' dropdown, Call Us' phone
         numbers) get a lighter-text hover instead — no underline, per
         feedback that the list that drops down doesn't need one. #a8a8a8
         is lighter than the sub-menu's default #767676 (a darker version
         was tried first but kept flickering at the item's edge even after
         the fix below, so reverted to lightening per feedback — not worth
         more time chasing it). Scoped to `.sub-menu`, can't collide with (a).
         The selector repeats Divi's own `.nav li ul.sub-menu ... a` shape
         (its default-color rule for these links) rather than a shorter
         version: a first attempt using just `.sub-menu li:hover>a` had
         fewer element-type selectors than Divi's rule and lost on
         specificity's element-count tiebreaker despite both having
         !important and the same class count — confirmed by checking the
         forced-:hover computed color, which came back unchanged.
         It's `a:hover` directly, not `li:hover>a`: measured via CDP that
         each sub-menu <li> renders ~100px wider than its own <a> (li
         412–712px, a only 412–612px in one sample) — an unexplained gap
         inherited from Divi's default list layout. Keying off the <li>'s
         hover state meant the "hover zone" included that dead strip,
         which is what caused the reported flicker right at the edge of
         the visible link as the pointer crossed in/out of the mismatched
         box. Hovering the link's own box directly removes that mismatch.
         Also drops the inherited 300ms color transition (menu.css:
         `ul li a{transition:color 300ms ease}`) to an instant swap, so
         there's nothing left mid-fade for a fast pointer to catch.
   ========================================================================== */

.et_pb_menu_0_tb_header.et_pb_menu {
	margin-bottom: 0 !important;
}

.et_pb_menu_0_tb_header.et_pb_menu .et_pb_menu__menu > nav > ul > li > a {
	position: relative;
}

.et_pb_menu_0_tb_header.et_pb_menu .et_pb_menu__menu > nav > ul > li > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	height: 2px;
	background-color: #511439;
	transform: scaleX(0);
	transition: transform 0.25s ease;
}

.et_pb_menu_0_tb_header.et_pb_menu .et_pb_menu__menu > nav > ul > li:hover > a {
	color: #5e033e !important;
}

.et_pb_menu_0_tb_header.et_pb_menu .et_pb_menu__menu > nav > ul > li:hover > a::before {
	transform: scaleX(1);
}

.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu a:hover {
	color: #a8a8a8 !important;
	transition: none;
}

/* Current-page indicator: reuses the hover underline above instead of
   Divi's own default — a solid, full-height background block behind the
   active item's text (its own menu.css sets this via the Divi Theme
   Builder's "active link" colour option). That read as a heavy, dated
   slab against this nav's otherwise flat/text-based style, and taking it
   over the ::before underline already used for hover keeps "you're here"
   and "hovering this" visually related instead of two unrelated
   treatments. Text colour is reset alongside it — Divi's white swap for
   this state assumed the background would still be there to read
   against. */
.et_pb_menu_0_tb_header.et_pb_menu .et_pb_menu__menu > nav > ul > li.current-menu-item > a,
.et_pb_menu_0_tb_header.et_pb_menu .et_pb_menu__menu > nav > ul > li.current_page_item > a {
	background-color: transparent !important;
	color: #5e033e !important;
}

/* Divi's own auto-generated rule for this (Theme Builder header colour
   settings, injected as an inline <style> — not this file, so not
   editable at the source) is `.et-menu-nav li.current-menu-item a`, with
   no direct-child combinator. That means it matches every link *nested
   inside* the current top-level item too, not just its own — so on a
   mega-menu item (Services, About Us, Call Us all have one), whichever
   one is the current page painted its entire dropdown with this same
   solid background, not just its own top-level link. The override above
   only ever matched the top-level `> a`, so it never touched these.
   Confirmed via computed style on a live sub-menu link before/after. */
.et_pb_menu_0_tb_header.et_pb_menu .et-menu-nav li.current-menu-item .sub-menu a,
.et_pb_menu_0_tb_header.et_pb_menu .et-menu-nav li.current_page_item .sub-menu a {
	background-color: transparent !important;
}

/* Services' (and any other mega-menu item's) dropdown: 24 flat <li>s laid
   out with Divi's default float:left + fixed 300px width, wrapping every
   4 into what reads as a grid. Floats don't equalize row height though —
   a single two-line title (e.g. "Active Release Technique") in one column
   pushes only *that* column's next item down, while its row-neighbours in
   other columns stay put. The result is a different amount of drift after
   almost every row, which is what actually read as "disorganized"/hard to
   scan, not the (now-fixed) background colour. Grid fixes this natively:
   each row-track sizes to its tallest item and stretches every item in
   that row to match, so all 4 columns stay aligned regardless of which
   titles happen to wrap. */
.et_pb_menu_0_tb_header.et_pb_menu .et-menu-nav li.mega-menu > ul.sub-menu {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 40px;
	row-gap: 6px;
	padding: 24px 32px !important;
}

.et_pb_menu_0_tb_header.et_pb_menu .et-menu-nav li.mega-menu > ul.sub-menu > li {
	float: none !important;
	width: auto !important;
}

.et_pb_menu_0_tb_header.et_pb_menu .et-menu-nav li.mega-menu > ul.sub-menu > li > a {
	display: block;
	padding: 10px 0 !important;
	border-bottom: 1px solid #eee2ea;
}

.et_pb_menu_0_tb_header.et_pb_menu .et_pb_menu__menu > nav > ul > li.current-menu-item > a::before,
.et_pb_menu_0_tb_header.et_pb_menu .et_pb_menu__menu > nav > ul > li.current_page_item > a::before {
	transform: scaleX(1);
}

/* ==========================================================================
   Location header — replaces what used to be a hand-authored raw HTML/CSS
   blob duplicated independently on all 18 location pages (own inline
   <style>, own button markup, a bare <table> for the services list, and a
   redundant lead-in sentence restating the H1). Now driven entirely by
   owc_location_* / owc_hours_* post meta through the shared
   owc_location_header module — same editorial, no-card-chrome language as
   the practitioner panel: labels are small/uppercase/muted, content is
   plain text or a plain list, nothing boxed.
   ========================================================================== */

.owc-location-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
	gap: 64px;
	margin: 56px 0;
	align-items: start;
}

@media (max-width: 850px) {
	.owc-location-header {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* Same oversized/tight-tracked treatment as the "Our Team" heading, and
   the same rem + !important reasoning: a global Divi rule
   (`h1, h2 { font-size: 28px !important }`) otherwise wins regardless of
   this class's specificity, and em would be at the mercy of whatever
   ambient font-size this element happens to inherit. */
.owc-location-heading {
	margin: 0 0 20px;
	font-size: 3.25rem !important;
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.015em;
	color: #1a1a1a;
	text-align: left;
}

@media (max-width: 640px) {
	.owc-location-heading {
		font-size: 2.25rem !important;
	}
}

.owc-location-body {
	font-size: 1.05em;
	line-height: 1.6;
	color: #333333;
	max-width: 640px;
}

.owc-location-body p {
	margin: 0 0 16px;
}

.owc-location-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 28px;
}

.owc-location-cta-call,
.owc-location-cta-book {
	display: inline-block;
	padding: 14px 30px;
	border-radius: 999px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.9em;
	text-decoration: none;
	text-align: center;
}

.owc-location-cta-call {
	background: #ffffff;
	color: #511439;
	border: 1.5px solid #511439;
}

.owc-location-cta-call:hover {
	background: #f7f2f5;
	color: #511439;
}

.owc-location-cta-book {
	background: #511439;
	color: #ffffff;
	border: 1.5px solid #511439;
}

.owc-location-cta-book:hover {
	background: #3d0f2b;
	color: #ffffff;
}

.owc-location-header-aside {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.owc-location-aside-label {
	margin: 0 0 8px;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9a8f95;
}

.owc-location-address-text {
	margin: 0 0 4px;
	font-size: 0.95em;
	line-height: 1.4;
	color: #333333;
}

.owc-location-map-link {
	display: inline-block;
	margin-top: 6px;
	font-size: 0.9em;
	font-weight: 600;
	color: #511439;
	text-decoration: underline;
}

.owc-location-hours-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.owc-location-hours-list li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 4px 0;
	font-size: 0.92em;
	line-height: 1.4;
	border-bottom: 1px solid #efeaec;
}

.owc-location-hours-list li:last-child {
	border-bottom: none;
}

.owc-location-hours-day {
	color: #9a8f95;
}

.owc-location-hours-time {
	color: #333333;
	font-weight: 500;
}

/* Full-width row below the two-column header block: label on its own
   line, then the services flowing horizontally across the page rather
   than stacked in the narrow aside column. */
.owc-location-services {
	margin: 40px 0 0;
}

.owc-location-services-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	column-gap: 28px;
	row-gap: 6px;
}

.owc-location-services-list li {
	flex: 0 0 auto;
}

.owc-location-services-list a {
	font-size: 0.95em;
	color: #511439;
	text-decoration: none;
}

.owc-location-services-list a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Practitioner grid — modeled on Myodetox's team page: full-bleed photo
   tiles with name/role overlaid directly on the image, nothing else
   visible until a "+" opens a detail panel. Deliberately sparse — this is
   the point, not an oversight (see project notes on this redesign). Brand
   maroon (#511439) stands in for their navy throughout.
   ========================================================================== */

/* Deliberately oversized heading — Myodetox runs its section titles
   unusually large, which is the specific effect being borrowed here:
   scale and tight tracking do the work, no eyebrow label needed.
   `rem` + `!important` because a global Divi rule (`h1, h2 { font-size:
   28px !important }`) otherwise wins on both counts — em would also be
   at the mercy of this element's ambient parent font-size (14px here,
   not the 16px root), the same class of bug fixed earlier for the bio
   paragraphs. */
.owc-practitioner-grid-heading {
	margin: 64px 0 24px;
	font-size: 4.25rem !important;
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: #1a1a1a;
	text-align: left;
}

@media (max-width: 640px) {
	.owc-practitioner-grid-heading {
		font-size: 2.5rem !important;
	}
}

.owc-practitioner-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin: 0 0 48px;
}

@media (min-width: 640px) {
	.owc-practitioner-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 14px;
	}
}

@media (min-width: 981px) {
	.owc-practitioner-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 18px;
	}
}

/* Square corners (deliberately un-rounded per later feedback). overflow
   is still hidden so the gradient overlay stays clipped to the tile box;
   the hover lift + shadow give a bit of depth without any card chrome. */
.owc-practitioner-tile-trigger {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.owc-practitioner-tile-trigger:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(20, 8, 15, 0.2);
}

/* Portrait crop, not square — closer to how a real portrait photo is
   framed, and it's what leaves room for the name/title overlay to sit on
   solid image rather than a cramped sliver at the bottom. */
.owc-practitioner-photo {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #f2f0f1;
}

.owc-practitioner-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.owc-practitioner-photo-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: #f2f0f1;
}

/* Name + title sit directly on the photo — the gradient is what keeps
   white text legible over photos of wildly varying brightness. Extra
   right padding keeps text clear of the circular expand button sharing
   this same bottom corner. */
.owc-practitioner-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 44px 16px 16px;
	background: linear-gradient(
		to top,
		rgba(20, 8, 15, 0.82) 0%,
		rgba(20, 8, 15, 0.62) 30%,
		rgba(20, 8, 15, 0.38) 55%,
		rgba(20, 8, 15, 0.16) 78%,
		rgba(20, 8, 15, 0) 100%
	);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.owc-practitioner-name {
	margin: 0;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.25;
	color: #ffffff;
}

.owc-practitioner-title {
	margin: 0;
	font-size: 0.85em;
	font-weight: 500;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.85);
}

.owc-practitioner-expand {
	position: absolute;
	bottom: 12px;
	right: 12px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #ffffff;
	color: #511439;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2em;
	line-height: 1;
	font-weight: 400;
	transition: background 0.2s ease;
}

.owc-practitioner-tile-trigger:hover .owc-practitioner-expand {
	background: #ffffff;
}

/* ==========================================================================
   Detail panel — expands inline as a full-width row directly below
   whichever grid row the clicked tile is in. This works with ZERO row/
   column math in JS: each panel is a normal DOM sibling right after its
   own tile with grid-column: 1/-1, but display:none while closed, so it
   never occupies a grid cell — CSS Grid's own auto-placement algorithm is
   what puts it on a fresh full-width row the instant it becomes visible,
   regardless of how many columns are active at the current breakpoint.

   The open/close animation is the "grid-template-rows: 0fr → 1fr" trick:
   animating a max-height would require knowing the content's height in
   advance (it varies a lot — bios range from a sentence to several
   paragraphs), which grid-template-rows with fr units sidesteps entirely
   while still transitioning smoothly. .is-open switches display so the
   panel joins grid layout; .is-expanded (added a frame later, see the
   module's inline script) is what actually animates it open. */

.owc-practitioner-panel {
	display: none;
	grid-column: 1 / -1;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s ease;
}

.owc-practitioner-panel.is-open {
	display: grid;
}

.owc-practitioner-panel.is-expanded {
	grid-template-rows: 1fr;
}

.owc-practitioner-panel-inner {
	overflow: hidden;
	min-height: 0;
}

.owc-practitioner-panel-content {
	position: relative;
	padding: 16px 40px 20px 8px;
	border-bottom: 1px solid #e5e0e2;
}

.owc-practitioner-panel-body {
	text-align: left;
}

/* Name/title and the Languages/Location/Joined facts share one row across
   the top — there's plenty of width for both once the panel spans the
   full grid, so there's no reason to spend a whole row on the name alone.
   Modalities and Bio each get their own full-width row below that. */
.owc-practitioner-panel-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 48px;
	row-gap: 8px;
}

.owc-practitioner-panel-namewrap {
	flex: 0 0 auto;
}

.owc-practitioner-panel-facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 32px;
	flex: 1 1 auto;
}

.owc-practitioner-panel-fact {
	min-width: 140px;
}

.owc-practitioner-panel-modalities {
	margin-top: 14px;
	max-width: 1200px;
}


.owc-practitioner-panel-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #e5e0e2;
	background: #ffffff;
	font-size: 1.3em;
	line-height: 1;
	color: #511439;
	cursor: pointer;
}

.owc-practitioner-panel-close:hover {
	background: #f7f2f5;
}

.owc-practitioner-panel-name {
	margin: 0;
	font-size: 1.85em;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #1a1a1a;
	text-align: left;
}

.owc-practitioner-panel-title {
	margin: 4px 0 0;
	font-size: 0.95em;
	font-weight: 600;
	color: #511439;
	text-align: left;
}

.owc-practitioner-panel-label {
	margin: 0 0 3px;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9a8f95;
}

.owc-practitioner-panel-text {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.4;
	color: #333333;
}

/* Flows and wraps by content width instead of forcing equal-width
   columns — a rigid column split leaves big dead gaps between short items
   once the panel (and this list) is the full grid width. */
.owc-practitioner-panel-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	column-gap: 28px;
	row-gap: 2px;
}

.owc-practitioner-panel-list li {
	flex: 0 0 auto;
	font-size: 0.95em;
	line-height: 1.6;
	color: #333333;
}

.owc-practitioner-panel-bio {
	margin-top: 10px;
}

.owc-practitioner-panel-bio p {
	font-size: 0.95em !important;
	line-height: 1.45 !important;
	color: #333333;
	margin: 0 0 8px;
	max-width: none !important;
}

.owc-practitioner-panel-book {
	display: inline-block;
	margin-top: 14px;
	padding: 12px 28px;
	border-radius: 999px;
	background: #511439;
	color: #ffffff;
	text-align: center;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.9em;
	text-decoration: none;
}

.owc-practitioner-panel-book:hover {
	background: #3d0f2b;
	color: #ffffff;
}

.owc-practitioner-grid-empty {
	font-style: italic;
	opacity: 0.7;
}

/* ==========================================================================
   Mega Menu dropdown sub-items (the "Max Mega Menu" plugin — the mobile/
   narrow-viewport nav, separate from Divi's own .et_pb_menu module fixed
   above; #mega-menu-wrap-primary-menu is its own DOM tree with no shared
   ancestor with that one). Its sub-menu links render in the site's dark
   accent colour (#5e033e) as their *resting* state with no hover change at
   all — confirmed via computed styles that this is constant regardless of
   whether that top-level item's own page is the one currently being
   viewed (not page-conditional, despite how it read). Reads as "always
   highlighted" rather than a neutral default. Bringing it in line with
   Divi's own sub-menu treatment elsewhere on the site: neutral grey at
   rest, the accent colour reserved for hover.
   One item (id 135-0, "Call Us") has its own black-text override
   configured in the plugin's per-item settings — that's an ID selector,
   so it keeps winning over this class-based rule regardless.
   ========================================================================== */
#mega-menu-wrap-primary-menu .mega-sub-menu a.mega-menu-link {
	color: #767676 !important;
	transition: color 0.2s ease;
}

#mega-menu-wrap-primary-menu .mega-sub-menu a.mega-menu-link:hover {
	color: #5e033e !important;
}