/*
Theme Name: Sacred Healing MBS
Theme URI: https://sacredhealingmbs.com/
Author: Sacred Healing MBS
Author URI: https://sacredhealingmbs.com/
Description: Lean, mobile-first block theme for Sacred Healing MBS — an elite transformational wellness and performance ecosystem. Editorial, luxurious, and minimal. No page builder, no bloat.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sacred-healing
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, wide-blocks
*/

/*
 * This is a block theme — global styles live in theme.json, not here.
 * Use this file only for the handful of things theme.json cannot express.
 */

/*
 * Active serif typeface — single source of truth.
 * The whole theme routes serif usage through this one variable (headings via
 * theme.json, plus the .MNDST quote and SHAPE numerals), so switching the
 * heading font — or rolling back to Playfair Display — is a one-line change.
 */
:root {
	--sh-serif: var(--wp--preset--font-family--cormorant-garamond);
	/* Rollback to previous scheme:
	   --sh-serif: var(--wp--preset--font-family--playfair-display); */
}

/*
 * Full-bleed sections sit flush. WordPress applies the root block-gap
 * between the top-level template sections (header, main, footer), which
 * leaves a seam of page background between adjacent full-width colored
 * bands. Zero it out so the bands meet edge to edge; spacing within each
 * section is handled by its own padding.
 */
.wp-site-blocks > * {
	margin-block: 0;
}

/*
 * Fixed header. position:sticky breaks silently when any ancestor has
 * overflow other than visible (WordPress sets this on .wp-site-blocks for
 * root-padding-aware alignments). position:fixed is viewport-relative and
 * immune to ancestor overflow. JS (sh-header-scroll.js) measures the header
 * height, writes --sh-header-height, and adds is-scrolled for the opaque state.
 */
.wp-site-blocks > header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 100;
}

/* Reserve space so content starts below the fixed header. */
.wp-site-blocks {
	padding-top: var(--sh-header-height, 80px);
}

.site-header {
	background-color: rgba(248, 247, 246, 0.82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.site-header.is-scrolled {
	background-color: rgba(248, 247, 246, 0.97);
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
	border-bottom-color: rgba(0, 0, 0, 0.10);
}

/* Logo lockup */
.site-logo-name a {
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
	transition: color 0.25s ease;
}
.site-logo-name a:hover {
	color: var(--wp--preset--color--gold);
}
.site-logo-sub {
	margin: 0;
}

/* Primary navigation: subtle gold hover */
.main-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
	transition: color 0.25s ease;
}
.main-nav .wp-block-navigation-item__content:hover,
.main-nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold);
}

/* Mobile nav overlay (hamburger). overlayBackgroundColor:charcoal +
   overlayTextColor:cream on the nav block make core render the open menu
   opaque; these rules theme the links and enlarge tap areas.
   NOTE: .site-header uses backdrop-filter, which establishes a containing
   block for fixed descendants — so core's inset:0 sizes the overlay to the
   header box, not the viewport. Force viewport-unit sizing so it covers the
   full screen (dvh accounts for mobile browser chrome). */
.main-nav .wp-block-navigation__responsive-container.is-menu-open {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	left: 0;
	top: 0;
}
/* Center the menu list in the full-screen overlay. The desktop nav right-
   justifies, and core prints align-items:flex-end inline in <head> (loads
   after this sheet), so !important is required to recentre for mobile. */
.main-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.main-nav .is-menu-open .wp-block-navigation__container {
	align-items: center !important;
	justify-content: center;
	text-align: center;
}
.main-nav .is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--cream);
	font-size: 1.35rem;
	padding-block: 0.65rem; /* ≥44px touch target */
}
.main-nav .is-menu-open .wp-block-navigation-item__content:hover,
.main-nav .is-menu-open .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold);
}
/* Open/close toggle icons inherit cream inside the overlay; gold on hover. */
.main-nav .wp-block-navigation__responsive-container-close,
.main-nav .wp-block-navigation__responsive-container-open {
	padding: 0.5rem; /* ≥44px touch target */
}
.main-nav .wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--gold);
}

/* ==========================================================================
   Ecosystem carousel — cycles the three sub-brands.
   ========================================================================== */
.sh-carousel {
	position: relative;
	background-color: var(--wp--preset--color--cream);
	min-height: 80vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(2rem, 4vw, 2.75rem);
	padding-inline: var(--wp--preset--spacing--40);
	overflow: hidden;
}
.sh-carousel__kicker {
	text-align: center;
	font-family: var(--sh-serif);
	color: var(--wp--preset--color--charcoal);
	letter-spacing: 0.01em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 var(--wp--preset--spacing--20);
}
.sh-carousel__viewport { overflow: hidden; }
.sh-carousel__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.sh-carousel__slide {
	flex: 0 0 100%;
	min-width: 100%;
	box-sizing: border-box;
	padding-inline: var(--wp--preset--spacing--40);
}
.sh-carousel__inner {
	max-width: 680px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 8.5rem;
	justify-content: center;
}
.sh-eyebrow {
	margin: 0;
	color: var(--wp--preset--color--gold);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}
.sh-carousel__name {
	margin: 0;
	font-family: var(--sh-serif);
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--xx-large);
}
.sh-carousel__desc {
	margin: 0;
	color: var(--wp--preset--color--neutral-dark);
	line-height: 1.6;
	font-size: var(--wp--preset--font-size--medium);
}
/* Carousel CTA — mirrors the theme button (charcoal pill). */
.sh-btn {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--cream);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.875rem 1.9rem;
	border-radius: 9999px;
	transition: color 0.25s ease, background-color 0.25s ease;
}
.sh-btn:hover { color: var(--wp--preset--color--gold); }
/* button element reset so <button> inherits pill styles cleanly */
button.sh-btn {
	border: none;
	cursor: pointer;
	font-family: inherit;
}
/* Explicit charcoal variant (alias of base; useful when both variants appear side-by-side) */
.sh-btn--charcoal {
	background-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--cream);
}
.sh-btn--charcoal:hover { background-color: #1a1a1a; color: var(--wp--preset--color--gold); }
/* Outline variant — gold border, transparent fill.
   button.sh-btn--outline matches the specificity of button.sh-btn so the
   border and charcoal text both win cleanly on <button> elements. */
.sh-btn--outline,
button.sh-btn--outline {
	background-color: transparent;
	color: var(--wp--preset--color--charcoal);
	border: 2px solid var(--wp--preset--color--gold);
}
.sh-btn--outline:hover,
button.sh-btn--outline:hover {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--gold);
}
/* Arrows */
.sh-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	color: var(--wp--preset--color--charcoal);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.25s ease, color 0.25s ease;
}
.sh-carousel__arrow:hover { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); }
.sh-carousel__arrow--prev { left: clamp(0.5rem, 3vw, 2.5rem); }
.sh-carousel__arrow--next { right: clamp(0.5rem, 3vw, 2.5rem); }
/* Dots */
.sh-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: var(--wp--preset--spacing--30);
}
.sh-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--charcoal);
	background: transparent;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}
.sh-carousel__dot.is-active {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
}
@media (max-width: 600px) {
	.sh-carousel__arrow { display: none; }
}

/* ==========================================================================
   Sub-brand category pills ("button tags") — used on cards and single posts.
   Per-brand colour keyed off the category slug in the link href.
   ========================================================================== */
.wp-block-post-terms a,
.sh-tag {
	display: inline-block;
	min-width: 9.5rem;       /* uniform width; fits the longest term without wrapping */
	text-align: center;
	white-space: nowrap;     /* never wrap a sub-brand name */
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
	padding: 4px 12px;
	border-radius: 9999px;
	text-decoration: none;
	background-color: var(--wp--preset--color--neutral-light);
	color: var(--wp--preset--color--charcoal);
	transition: opacity 0.25s ease;
}
.wp-block-post-terms a:hover { opacity: 0.8; }
/* Warm tonal ramp, light -> dark: .MNDST (lightest, the old "Uncategorized"
   sand) -> The SHAPE Method (mid) -> She Sheds Fit (gold). Charcoal text. */
.wp-block-post-terms a[href*="/category/mndst"] {
	background-color: hsl(36, 22%, 90%);
}
.wp-block-post-terms a[href*="/category/shape-method"] {
	background-color: hsl(37, 19%, 74%);
}
.wp-block-post-terms a[href*="/category/she-sheds-fit"] {
	background-color: hsl(38, 16%, 58%);
}
/* Hide the comma separators the post-terms block inserts between terms. */
.wp-block-post-terms__separator { display: none; }
.wp-block-post-terms a { margin-right: 6px; }

/* ==========================================================================
   About page — founder photo column.
   Gives the photo column visible height before an image is uploaded, and
   ensures the image fills the column edge-to-edge once it is.
   ========================================================================== */
.sh-about-photo-col .wp-block-image {
	min-height: 480px;
	background: linear-gradient(160deg, var(--wp--preset--color--neutral-light) 0%, hsl(36, 10%, 74%) 100%);
	border-radius: 4px;
}
.sh-about-photo-col .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 480px;
	object-fit: cover;
	border-radius: 4px;
}
@media (max-width: 599px) {
	.sh-about-cols { flex-direction: column; }
	.sh-about-photo-col .wp-block-image { min-height: 300px; }
	.sh-about-photo-col .wp-block-image img { min-height: 300px; }
}

/* ==========================================================================
   Journal post cards.
   ========================================================================== */
.sh-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--neutral-light);
	border-radius: 4px;
	height: 100%;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.sh-card:hover {
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
	transform: translateY(-3px);
}
.sh-card .wp-block-post-title {
	margin: 0;
}
.sh-card .wp-block-post-title a {
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
	transition: color 0.25s ease;
}
.sh-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--gold);
}
.sh-card .wp-block-post-excerpt {
	margin: 0;
}
/* "Read Article →" more link */
.sh-card .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--gold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	font-weight: 700;
	text-decoration: none;
}
.sh-card .wp-block-post-excerpt__more-link:hover { text-decoration: underline; }

/* ==========================================================================
   Journal layout — desktop: 74/26 cards + rail (visually identical to the
   former columns). Mobile (≤781px, where WP columns would stack): reflow to
   Search → Cards → Archive. The rail uses display:contents so its two
   sections become direct flex items that can be ordered around the cards.
   ========================================================================== */
.sh-journal-layout {
	display: grid;
	grid-template-columns: minmax(0, 74fr) minmax(0, 26fr);
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	align-items: start;
}

@media (max-width: 781px) {
	.sh-journal-layout {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--50);
	}
	.sh-journal-layout .sh-rail { display: contents; }
	.sh-journal-layout .sh-rail__section:first-child { order: 1; } /* Search  */
	.sh-journal-cards                                 { order: 2; } /* Cards   */
	.sh-journal-layout .sh-rail__section:last-child   { order: 3; } /* Archive */
	/* Card grid fills the full width now — let columns flow responsively
	   (overrides core's inline 3-column template). */
	.sh-card-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important;
	}
}

/* ==========================================================================
   Journal right rail — search + chronological archive tree.
   ========================================================================== */
.sh-rail { position: sticky; top: 6.5rem; }
.sh-rail__title {
	font-family: var(--sh-serif);
	font-weight: 600;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wp--preset--color--neutral-light);
}

/* Search field */
.sh-rail .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--neutral-light);
	border-radius: 9999px;
	background-color: var(--wp--preset--color--white);
	overflow: hidden;
	padding: 4px 4px 4px 8px;
}
.sh-rail .wp-block-search__input {
	border: none;
	background: transparent;
	padding: 0.5rem 0.6rem;
}
.sh-rail .wp-block-search__input:focus { outline: none; box-shadow: none; }
.sh-rail .wp-block-search__button {
	background-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--cream);
	border: none;
	border-radius: 9999px;
	margin: 0;
}
.sh-rail .wp-block-search__button:hover { color: var(--wp--preset--color--gold); }

/* Archive tree (native <details> expand/collapse) */
.sh-archive-tree,
.sh-archive-tree ul { list-style: none; margin: 0; padding: 0; }
.sh-archive-tree ul { padding-left: 1.1rem; }
.sh-archive-tree summary {
	cursor: pointer;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 6px 0;
	list-style: none;
}
.sh-archive-tree summary::-webkit-details-marker { display: none; }
.sh-archive-tree summary::before {
	content: "\25B8"; /* ▸ */
	display: inline-block;
	width: 1em;
	margin-right: 6px;
	color: var(--wp--preset--color--gold);
	transition: transform 0.2s ease;
}
.sh-archive-tree details[open] > summary::before { transform: rotate(90deg); }
.sh-archive-tree a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--wp--preset--color--neutral-dark);
	padding: 4px 0;
}
.sh-archive-tree a:hover { color: var(--wp--preset--color--gold); }
.sh-archive-tree__count {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--wp--preset--color--gold);
}

/* Arrow-bullet list (barre3-style) — used in the Feature Split sage panel. */
.sh-arrow-list {
	list-style: none;
	margin: 1.25rem 0;
	padding-left: 0;
}
.sh-arrow-list li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: 0.6em;
}
.sh-arrow-list li::before {
	content: "\2192"; /* → */
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--gold);
	font-weight: 600;
}
/* Feature Split: the media side is a Cover block, so its focal point (crop),
   min-height, and image are all editable in the Block Editor. It fills the
   column height; the sage panel stretches to match. */
.sh-media-col { padding: 0; }
.sh-media-col > .wp-block-cover { width: 100%; height: 100%; }
/* Row height comes from the Cover block's (editable) min-height — no CSS override. */
/* Sage panel fills the full row height, content vertically centered. */
.sh-panel-col { display: flex; flex-direction: column; justify-content: center; }

/* On a sage panel, use pure white markers (matches barre3's white-on-sage). */
.has-sage-background-color .sh-arrow-list li::before {
	color: var(--wp--preset--color--white);
}