/*
Theme Name: Release Healing Meridian
Theme URI: https://releasehealing.life
Author: Release Healing
Description: "The Meridian Draw" is a bone-paper block theme for Release Healing: warm paper ground, deep-ink masthead, a faint governing-meridian spine down the left margin, and one authored moment - the release line that draws itself and fades.
Version: 1.2.1
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: release-healing-meridian
*/

/* ---------- The Governing Meridian spine (faint ink on paper) ---------- */
.wp-site-blocks { position: relative; }
.wp-site-blocks::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(1.25rem, 5vw, 4.5rem);
  width: 1px;
  background: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
  z-index: 0;
  pointer-events: none;
}
.rh-header, .rh-footer, .rh-main { position: relative; z-index: 1; }
@media (max-width: 560px) {
  .wp-site-blocks::before { display: none; }
}

/* ---------- Masthead: the ink bar (the map's poche) ---------- */
.rh-header {
  position: relative;
  z-index: 2;
  margin-left: calc(-1 * clamp(1.5rem, 6vw, 6.5rem));
  margin-right: calc(-1 * clamp(1rem, 4vw, 3rem));
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 16%, transparent);
}
.rh-bar {
  padding-left: clamp(1.5rem, 6vw, 6.5rem);
  padding-right: clamp(1rem, 4vw, 3rem);
  gap: 1rem;
}
.rh-brandmark { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.rh-brandmark svg, .rh-brandmark img { display: block; }
.rh-brandmark:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 3px; border-radius: 4px; }
.rh-nav, .rh-nav ul, .rh-nav li { margin: 0; padding: 0; list-style: none; }
.rh-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; }
.rh-nav a {
  display: inline-block;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  color: var(--wp--preset--color--base);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--fira-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
.rh-nav a:hover, .rh-nav a:focus {
  background: color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent);
  color: var(--wp--preset--color--accent-1);
  text-decoration: none;
}

/* ---------- Footer ---------- */
.rh-footer {
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
}
.rh-footer .rh-mark { margin-bottom: 0.9rem; }
.rh-footer p { margin: 0; }

/* ---------- Hero: text beside the body map ---------- */
.rh-hero-flex {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.rh-hero-text { flex: 1 1 0; min-width: 0; }
.rh-heromap { flex: 0 0 auto; display: flex; justify-content: center; }
.rh-bodymap { width: clamp(150px, 20vw, 225px); height: auto; display: block; }
@media (max-width: 760px) {
  .rh-hero-flex { flex-direction: column; align-items: flex-start; }
  .rh-heromap { width: 100%; }
  .rh-bodymap { width: 150px; }
}

/* ---------- The authored moment: the release line inside the map ---------- */
#rhReleaseLine {
  transform-box: fill-box;
  transform-origin: left center;
  animation: rh-draw 2.4s cubic-bezier(0.6, 0.05, 0.3, 1) 0.45s both,
             rh-fade 1.6s ease-in-out 2.9s both;
}
@keyframes rh-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes rh-fade {
  from { opacity: 1; }
  to { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  #rhReleaseLine { animation: none; opacity: 0.3; }
}

/* ---------- Article headings (unnumbered) ---------- */
.rh-article .wp-block-post-content h2 {
  margin-top: 2.75rem;
  margin-bottom: 1rem;
}
.rh-article .wp-block-post-content h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* ---------- Listing / meta ---------- */
.rh-meta { text-transform: uppercase; letter-spacing: 0.14em; }
.rh-posts li + li { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent); }
.rh-posts h2 a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.rh-posts h2 a:hover, .rh-posts h2 a:focus { color: var(--wp--preset--color--accent-1); text-decoration: underline; }
.rh-pagination, .rh-postnav { font-family: var(--wp--preset--font-family--fira-sans); }
.rh-pagination a, .rh-postnav a { text-decoration: none; }
.rh-pagination a:hover, .rh-postnav a:hover { text-decoration: underline; }
.rh-postnav { display: flex; flex-direction: column; gap: 0.6rem; }
.rh-postnav .wp-block-post-navigation-link__content a { font-family: var(--wp--preset--font-family--vollkorn); font-size: 1.2rem; }

/* ---------- Heading scale (tamed) ---------- */
.rh-article .wp-block-post-title { font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1.18; }
.rh-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.15; }
.rh-article h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.rh-article h2 { font-size: clamp(1.3rem, 2.2vw, 1.55rem); line-height: 1.25; }
.rh-article h3 { font-size: 1.12rem; line-height: 1.35; }
.rh-posts h2 { font-size: 1.25rem; line-height: 1.3; }

/* ---------- Sales page (post 7): product page, not a blog post ---------- */
.postid-7 .rh-meta, .postid-8 .rh-meta, .postid-10 .rh-meta { display: none; }
.postid-7 .rh-postnav { display: none; }

/* ---------- Header bar: keep brand + nav + account + cart on one line (v1.2.1) ---------- */
.rh-header .rh-bar{
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  flex-wrap: nowrap !important;
}
/* ---------- Footer: brand mark + tagline inline ---------- */
.rh-footer .wp-block-group.is-layout-flex{flex-wrap:nowrap !important;align-items:center !important;}
.rh-footer .wp-block-group.is-layout-flex .wp-block-group.is-layout-flex{flex-wrap:nowrap !important;}
.rh-footer .wp-block-group.is-layout-flex .wp-block-group.is-layout-flex .wp-block-paragraph{flex:1 1 0 !important;min-width:0 !important;}
/* ---------- Mobile: allow wrapping again on narrow viewports ---------- */
@media (max-width: 560px){
  .rh-header .rh-bar{flex-wrap:wrap !important;}
  .rh-footer .wp-block-group.is-layout-flex{flex-wrap:wrap !important;}
  .rh-footer .wp-block-group.is-layout-flex .wp-block-group.is-layout-flex{flex-wrap:wrap !important;}
}