/*
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
*/

/* ==========================================================================
   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;
}