/* =========================================================================
   moondragon-pages.css
   Inner content pages and the shared footer.
   Loaded after moondragon-hero.css on every page, so it reuses the same
   tokens, palette and buttons. The hero stylesheet is left untouched, and
   nothing here changes the home page except the shared footer, which is
   intentionally site wide. Inner page rules are scoped to body.inner so the
   hero pages cannot be affected.
   ========================================================================= */

/* ---------------- Inner page header: solid bar, not over a photo ---------- */
body.inner .nav{
  position:static;
  background:var(--cream);
  border-bottom:1px solid var(--rule);
}

/* ---------------- Inner page shell ---------------- */
body.inner main{ padding:0 0 3.5rem; }

.page{
  width:min(100%, 64rem);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.page-narrow{ max-width:46rem; }   /* healings and other single column pages */

.page-head{ padding:3.4rem 0 1.4rem; }
.page-head h1{
  font-size:clamp(2.2rem, 4.4vw, 3.4rem);
  letter-spacing:-.01em; margin-bottom:.6rem;
}
.page-head .lede{
  font-size:clamp(1.1rem,1.5vw,1.3rem);
  color:var(--ink-soft); max-width:48ch; margin:0;
}

/* ---------------- Prose ---------------- */
.prose{ max-width:42rem; }
.prose p{ margin:0 0 1.1rem; }
.prose h2{
  font-family:var(--display); font-variation-settings:var(--wonk); font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2rem); margin:2.6rem 0 1rem; line-height:1.1;
}
.prose h3{ font-size:1.2rem; margin:1.8rem 0 .5rem; }
.prose ul{ margin:0 0 1.2rem; padding-left:1.2rem; }
.prose li{ margin:.3rem 0; }

/* A soft display quotation used to open a page, such as the Gibran line. */
.epigraph{
  font-family:var(--display); font-variation-settings:var(--wonk); font-style:italic;
  font-size:clamp(1.15rem,1.8vw,1.5rem); color:var(--hedge-near);
  max-width:38ch; margin:1.4rem 0 2rem; line-height:1.32;
}
.epigraph cite{
  display:block; font-style:normal; font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:.6rem;
}

/* Full width divider for the content column. */
.page-rule{ width:100%; height:1px; background:var(--rule); border:0; margin:2.6rem 0; }

/* ---------------- Price list: a vertical stack of cards ---------------- */
.prices{ display:flex; flex-direction:column; gap:1.2rem; margin:1.4rem 0 0; max-width:46rem; }
.price{
  background:var(--cream); border:1px solid var(--rule);
  border-radius:14px; padding:1.4rem 1.6rem;
}
.price h3{
  font-family:var(--display); font-variation-settings:var(--wonk); font-weight:400;
  font-size:1.35rem; margin:0 0 .35rem; line-height:1.15;
}
.price .meta{
  display:flex; flex-wrap:wrap; gap:.35rem 1.2rem;
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--hedge-near); margin:0 0 .7rem;
}
.price .meta .cost{ color:var(--accent); font-weight:500; }
.price p{ margin:0 0 .6rem; }
.price p:last-child{ margin-bottom:0; }
.price ul{ margin:.5rem 0 0; padding-left:1.2rem; }
.price li{ margin:.25rem 0; }

/* ---------------- Testimonial ---------------- */
.quote{
  background:var(--page-alt); border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0; padding:1.4rem 1.6rem;
  max-width:44rem; margin:2.4rem 0;
}
.quote p{
  font-family:var(--display); font-variation-settings:var(--wonk); font-style:italic;
  font-size:1.15rem; margin:0 0 .6rem; color:var(--ink); line-height:1.4;
}
.quote cite{
  font-style:normal; font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* Small muted note line, for example the disclaimer reminder. */
.note{ font-size:.9rem; color:var(--ink-soft); }

/* Call to action row at the foot of a page. Buttons reuse the hero .btn set. */
.page-cta{ margin:2.6rem 0 0; display:flex; flex-wrap:wrap; gap:.85rem; }

/* ---------------- Shared footer (every page) ----------------
   Kept a light warm bar so the coloured logo reads. No black, no dark slab. */
.site-footer{
  background:var(--page-alt); color:var(--ink);
  border-top:1px solid var(--rule);
}
body.inner .site-footer{ margin-top:1.5rem; }
.site-footer .foot-inner{
  width:min(100%, 1180px); margin-inline:auto;
  padding:3rem var(--gutter);
  display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:2rem;
}
.foot-brand img{ height:60px; width:auto; display:block; margin-bottom:.9rem; }
.foot-brand p{ margin:0; color:var(--ink-soft); max-width:36ch; font-size:.95rem; }
.site-footer h4{
  font-family:var(--display); font-variation-settings:var(--wonk); font-weight:400;
  font-size:1.05rem; margin:0 0 .8rem; color:var(--ink);
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin:.35rem 0; }
.site-footer a{ color:var(--ink-soft); text-decoration:none; font-size:.92rem; }
.site-footer a:hover{ color:var(--accent); text-decoration:underline; }
.foot-contact p{ margin:.3rem 0; color:var(--ink-soft); font-size:.92rem; }
.foot-secondary{ margin-top:.9rem; }
.foot-bar{
  border-top:1px solid var(--rule);
  padding:1.1rem var(--gutter); text-align:center;
  font-size:.8rem; color:var(--ink-soft);
}
.foot-bar a{ color:var(--ink-soft); }

@media (max-width:760px){
  .site-footer .foot-inner{ grid-template-columns:1fr; gap:1.6rem; }
  .page-head{ padding-top:2.4rem; }
}

/* ---------------- Contact form ---------------- */
.contact-form{ max-width:38rem; margin-top:1.5rem; }
.field{ margin:0 0 1.1rem; }
.field label{ display:block; font-size:.85rem; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 .35rem; }
.field input, .field textarea{
  width:100%; font:inherit; color:var(--ink);
  background:var(--cream); border:1px solid var(--rule); border-radius:10px;
  padding:.7rem .85rem;
}
.field textarea{ resize:vertical; }
.field input:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent); }
.contact-form .btn{ cursor:pointer; }

/* =========================================================================
   Richer inner page styling: banner header, drop cap, benefit grid, session
   cards, moon divider and pull quote. Adds warmth and rhythm to content pages
   while staying inside the locked palette and type. Used by the *.php pages.
   ========================================================================= */

/* Banner header: the page's own photo under the nav, title over a soft veil. */
.page-banner{
  position:relative; isolation:isolate;
  min-height:clamp(210px, 32vh, 340px);
  display:flex; align-items:flex-end; padding:var(--gutter);
  overflow:hidden;
}
.page-banner::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--img) center/cover no-repeat; background-color:#cdd2b4;
}
.page-banner::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(95deg, rgba(244,240,227,.94) 0%, rgba(244,240,227,.6) 46%, rgba(244,240,227,.12) 100%),
    linear-gradient(0deg, rgba(44,59,40,.22) 0%, rgba(44,59,40,0) 55%);
}
.page-banner .banner-inner{ width:min(100%,64rem); margin-inline:auto; position:relative; z-index:1; }
.page-banner.narrow .banner-inner{ max-width:46rem; }
.page-banner h1{ font-size:clamp(2.3rem,4.8vw,3.7rem); letter-spacing:-.01em; margin:0 0 .35rem; }
.page-banner .lede{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--ink-soft); max-width:46ch; margin:0; }

/* Space below the banner before the content column starts. */
body.inner main > .page:first-of-type{ padding-top:2.6rem; }

/* Drop cap on the first paragraph of an intro. */
.prose.lead > p:first-of-type::first-letter{
  font-family:var(--display); font-variation-settings:var(--wonk);
  float:left; font-size:3.6rem; line-height:.72; padding:.35rem .5rem 0 0; color:var(--accent);
}

/* Benefits: a scannable two column list with a small leaf marker. */
.benefits{
  --leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7 6 4 10 4 15a8 8 0 0016 0c0-5-3-9-8-13z'/%3E%3C/svg%3E");
  list-style:none; margin:1rem 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1.6rem; max-width:44rem;
}
.benefits li{ position:relative; padding-left:1.7rem; }
.benefits li::before{
  content:""; position:absolute; left:0; top:.42em; width:.85rem; height:.85rem;
  background:var(--hedge-mid);
  -webkit-mask:var(--leaf) center/contain no-repeat; mask:var(--leaf) center/contain no-repeat;
}

/* Session cards: a coloured edge and a prominent price pill. */
.sessions{ display:flex; flex-direction:column; gap:1.2rem; margin:1.4rem 0 0; max-width:47rem; }
.session{
  position:relative; background:var(--cream); border:1px solid var(--rule);
  border-radius:16px; padding:1.5rem 1.6rem 1.5rem 1.9rem; overflow:hidden;
}
.session::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--hedge-mid); }
.session .price-tag{
  float:right; margin:.1rem 0 .5rem 1rem;
  background:var(--accent); color:var(--cream);
  font-family:var(--display); font-variation-settings:var(--wonk); font-size:1.1rem;
  padding:.3rem .85rem; border-radius:999px; white-space:nowrap;
}
.session h3{ font-family:var(--display); font-variation-settings:var(--wonk); font-weight:400; font-size:1.4rem; margin:0 0 .3rem; line-height:1.12; }
.session .meta{ font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:var(--hedge-near); margin:0 0 .85rem; display:flex; gap:1rem; flex-wrap:wrap; }
.session p{ margin:0 0 .6rem; } .session p:last-child{ margin-bottom:0; }
.session ul{ margin:.5rem 0 0; padding-left:1.2rem; } .session li{ margin:.25rem 0; }

/* A quiet section aside, e.g. "what a session is like". */
.aside-card{
  background:var(--page-alt); border-radius:14px; padding:1.5rem 1.7rem;
  max-width:44rem; margin:1.6rem 0;
}
.aside-card h2{ margin-top:0; }

/* Moon divider between sections. */
.divider{ display:flex; align-items:center; gap:1.1rem; margin:2.6rem 0; max-width:47rem; }
.divider::before, .divider::after{ content:""; height:1px; background:var(--rule); flex:1; }
.divider svg{ width:20px; height:20px; color:var(--hedge-mid); flex:0 0 auto; }

/* Pull quote testimonial. */
.pullquote{
  position:relative; max-width:44rem; margin:2.8rem 0;
  padding:1.7rem 1.8rem 1.5rem 3.3rem; background:var(--page-alt); border-radius:14px;
}
.pullquote::before{
  content:"\201C"; position:absolute; left:.7rem; top:.05rem;
  font-family:var(--display); font-size:4rem; line-height:1; color:var(--accent); opacity:.5;
}
.pullquote p{ font-family:var(--display); font-variation-settings:var(--wonk); font-style:italic; font-size:1.2rem; line-height:1.4; margin:0 0 .6rem; color:var(--ink); }
.pullquote cite{ font-style:normal; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }

@media (max-width:760px){
  .benefits{ grid-template-columns:1fr; }
}

/* =========================================================================
   Atmosphere on inner pages: a soft hedgerow wash behind the content and the
   dragon large on the right, half off the page. Applied to every inner page
   via the .page-atmos layer injected by inc-hero-head.php. Tune the two
   opacities below to taste. The home page is untouched.
   ========================================================================= */
html{ background:var(--page); }
body.inner{ background:transparent; }

.page-atmos{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.page-atmos::before{           /* the hedgerow photo, very faint */
  content:""; position:absolute; inset:0;
  background:var(--hero-image) center/cover no-repeat;
  opacity:.09;
}
.page-atmos::after{            /* the dragon, ghosted, hanging off the right */
  content:""; position:absolute; top:50%; right:-7vw; transform:translateY(-50%);
  width:50vw; height:94vh;
  background:var(--mark-image) right center/contain no-repeat;
  filter:brightness(0); opacity:.11;
}
@media (max-width:760px){
  .page-atmos::after{ right:-26vw; width:88vw; opacity:.07; }
}

/* Let the faint wash show through the content column and cards sit on cream. */
body.inner .page{ position:relative; z-index:1; }

/* =========================================================================
   Navigation tweaks: white highlight on hover; the logo graphic carries the
   name, so the separate wordmark is dropped and the mark is doubled in size.
   Placed here so moondragon-hero.css stays untouched; these load after it and
   win. Applies to every page. To keep the larger logo to the HOME page only,
   change the two ".nav-logo" selectors below to ".hero-page .nav-logo".
   ========================================================================= */
.nav-links a{
  padding-inline:.6rem; border-radius:7px;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.nav-links a:hover{ background:#fff; color:var(--ink); border-color:transparent; }

.nav-logo .wordmark{ display:none; }   /* the logo already says the name */
.nav-logo img{ height:84px; }          /* twice the original 42px */