/* Feelings and Faith (was "Mood Verses") -- site-matched redesign (Vinci, 2026-10-18).
   Replaces assets/css/mood-verses.css. Uses the site's own tokens from style.css and
   seasons.css: --surface, --edge, --ink, --soft, --accent, --btn-bg, --sr-line, the
   .wrap column (760px), the header, the season strip, .lede / .lede-sub, .hero-image,
   button.primary and .ghost. Always light. Fallbacks after each var()
   keep the usual cream look when no season is set. Text is 18px or more inside the
   page body, taps are 56px or more (the site header and footer keep their own sizes). */

.mv{ position:relative; z-index:1; }
/* links and text buttons: the season accent, darkened 18% so they pass 7:1 on cream in every season */
body[data-page="mood-verses"]{ --mv-link:color-mix(in srgb, var(--accent, #7A5A14) 82%, #000); }

/* hero: a drawn sky in the same slot and shape as the home page photo (.hero-image--banner) */
.mv-hero{
  --sk1: color-mix(in srgb, var(--accent, #2D6A3E) 12%, #FFFDF7);
  --sk2: color-mix(in srgb, var(--accent, #2D6A3E) 7%, #FFF4D2);
  --sk3: #FFEBB4;
  --glow: #FFE9A6;
  --h1: color-mix(in srgb, var(--accent, #2D6A3E) 22%, #FFFCF7);
  --h2: color-mix(in srgb, var(--accent, #2D6A3E) 36%, #FFFCF7);
  --h3: color-mix(in srgb, var(--accent, #2D6A3E) 52%, #FFFCF7);
  --lf1: var(--d-leaf1, #5FA06C);
  --lf2: var(--d-leaf2, #3F7F50);
}
.mv-hero .mv-l1{ fill:var(--lf1); } .mv-hero .mv-l2{ fill:var(--lf2); }
.mv-hero .mv-star{ display:none; }
html[data-season="advent"] .mv-hero .mv-sun, html[data-season="christmas"] .mv-hero .mv-sun{ display:none; }
html[data-season="advent"] .mv-hero .mv-star, html[data-season="christmas"] .mv-hero .mv-star{ display:inline; }
.mv-h1{ max-width:none; margin-top:8px; }
.mv-hero + .mv-h1{ margin-top:0; }
.mv-sub{ font-size:1.125rem; line-height:1.65; max-width:52ch; margin-bottom:30px; }

/* section heading and count */
.mv-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 16px; }
.mv-h2{ font-family:'Fraunces', serif; font-weight:600; font-size:1.5rem; line-height:1.25; margin:0; color:var(--ink, #4A3D1F); }
.mv-count{ font-size:1.125rem; color:var(--soft, #665638); }

/* fifteen feeling tiles: site cards (cream, 1.5px edge, 18px radius) with a soft tint */
.mv-moods{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
@media (min-width:480px){ .mv-moods{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; } }
@media (min-width:640px){ .mv-moods{ grid-template-columns:repeat(5, minmax(0, 1fr)); } }
@media (max-width:479px){ .mv-moods li:last-child:nth-child(odd){ grid-column:1 / -1; width:calc(50% - 6px); margin-inline:auto; } }
.mv-moods li{ display:flex; }
.mv-mood{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; min-height:148px;
  padding:16px 8px 14px; cursor:pointer; font-family:inherit; color:var(--ink, #3A3220);
  background:linear-gradient(180deg, var(--surface, #FFFEFA) 35%, var(--mt, #FBF3DE) 100%);
  border:1.5px solid var(--edge, #EADFC0); border-radius:18px; box-shadow:0 6px 20px rgba(40,30,20,.12);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:rgba(143,106,31,.15);
}
.mv-mood:hover{ transform:translateY(-3px); border-color:var(--mc, var(--accent, #8F6A1F)); box-shadow:0 14px 30px rgba(40,30,20,.16); }
.mv-mood:focus-visible{ outline:3px solid var(--accent, #7A5A14); outline-offset:2px; }
.mv-mood.is-picked{ border-color:var(--mc, #8F6A1F); }
.mv-medal{
  width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;
  color:var(--mc, #8F6A1F);
  background:radial-gradient(circle at 35% 28%, #FFFEFA 0%, var(--mt2, #F7EABE) 82%);
  border:1.5px solid var(--mc, #C9A227); box-shadow:inset 0 0 0 4px rgba(255,254,250,.85), 0 4px 12px rgba(40,30,20,.10);
}
.mv-medal svg{ width:46px; height:46px; display:block; }
.mv-name{ font-family:'Fraunces', serif; font-weight:500; font-size:1.125rem; line-height:1.2; text-align:center; overflow-wrap:break-word; max-width:100%; }

/* the keepsake dialog: bottom sheet on a phone, centred card on a larger screen.
   The layer sits outside .wrap, so .wrap can be made inert while it is open. */
.mv-layer{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; }
.mv-scrim{ position:absolute; inset:0; background:rgba(58,50,32,.35); opacity:0; transition:opacity .28s ease; }
.mv-layer.shown .mv-scrim{ opacity:1; }
.mv-sheet{
  position:relative; width:100%; max-width:560px; max-height:94vh; max-height:94dvh; display:flex; flex-direction:column;
  background:var(--surface, #FFFDF7); color:var(--ink, #3A3220);
  border:1.5px solid var(--edge, #EADFC0); border-bottom:0; border-radius:24px 24px 0 0;
  box-shadow:0 -12px 40px rgba(90,70,20,.18);
  transform:translateY(100%); transition:transform .28s ease;
}
.mv-layer.shown .mv-sheet{ transform:none; }
.mv-sheet:focus{ outline:none; }
.mv-grab{ width:44px; height:5px; border-radius:3px; background:var(--edge, #D4C4A0); margin:10px auto 0; flex:none; }
.mv-sh-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px 8px 18px; flex:none; }
.mv-chip{ display:flex; align-items:center; gap:12px; min-width:0; }
.mv-chip .mv-medal{ width:52px; height:52px; box-shadow:inset 0 0 0 3px rgba(255,254,250,.85); }
.mv-chip .mv-medal svg{ width:34px; height:34px; }
.mv-chip-name{ font-family:'Fraunces', serif; font-weight:600; font-size:1.375rem; line-height:1.2; color:var(--ink, #3A3220); overflow-wrap:anywhere; }
.mv-x{
  flex:none; width:56px; height:56px; padding:0; border-radius:12px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface, #FFFEF9); border:1.5px solid var(--edge, #EADFC0); color:var(--ink, #6B5A2E);
}
.mv-x svg{ width:24px; height:24px; }
.mv-x:focus-visible, .mv-return:focus-visible{ outline:3px solid var(--accent, #7A5A14); outline-offset:2px; }
.mv-sh-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:6px 18px 8px; }

/* the holy card (kept from the live page: arch top, cross, double line, tint, reference with a rule) */
.mv-card{
  padding:8px; border-radius:200px 200px 18px 18px;
  background:linear-gradient(180deg, #FFFEFA 0%, var(--mt, #FBF3DE) 100%);
  border:1.5px solid var(--mc, #C9A227);
  box-shadow:inset 0 0 0 6px #FFFEFA, inset 0 0 0 7px var(--mc, #C9A227), 0 10px 26px rgba(40,30,20,.12);
}
.mv-card-in{ padding:40px 22px 30px; text-align:center; }
.mv-orn{ color:var(--mc, #B8862E); margin:0 auto 14px; width:14px; }
.mv-orn svg{ display:block; width:14px; height:18px; }
.mv-fade{ transition:opacity .26s ease; }
.mv-fade.mv-out{ opacity:0; }
.mv-verse{ font-family:'Fraunces', serif; font-size:1.375rem; line-height:1.6; color:#2A2618; margin:0 0 18px; overflow-wrap:break-word; }
.mv-ref{ font-family:'Fraunces', serif; font-weight:600; font-size:1.125rem; letter-spacing:.04em; color:var(--mi, #5B4400); margin:0; }
.mv-ref::before{ content:''; display:block; width:44px; height:1.5px; background:var(--mc, #D9BE73); margin:0 auto 14px; }
.mv-return{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:56px; margin:14px 0 4px; padding:0 12px;
  background:none; border:0; cursor:pointer; font-family:'Inter', sans-serif; font-size:1.125rem; font-weight:600;
  color:var(--mv-link, #6A4C0C); text-decoration:underline; text-underline-offset:3px;
}
.mv-return svg{ width:22px; height:22px; flex:none; }
.mv-sh-foot{
  flex:none; display:flex; flex-wrap:wrap; gap:10px; padding:12px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--sr-line, #EADFC0); background:var(--surface, #FFFDF7);
}
.mv-sh-foot .mv-act{ min-height:56px; padding:12px 20px; border-radius:11px; font-size:1.125rem; }
.mv-sh-foot .mv-act svg{ width:22px; height:22px; flex:none; margin-right:8px; }
.mv-sh-foot .mv-another{ flex:1 1 100%; display:inline-flex; align-items:center; justify-content:center; }
.mv-sh-foot .ghost{ flex:1 1 auto; padding-left:14px; padding-right:14px; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; }
.mv-sh-foot .mv-share{ flex:0 1 auto; min-width:128px; }
.mv-shared{ flex:1 1 100%; margin:0; text-align:center; font-size:1.125rem; line-height:1.5; color:#4A4229; overflow-wrap:anywhere; }

html.mv-lock, html.mv-lock body{ overflow:hidden; }

/* this page only (the same way the live novena page scopes its larger text): the footer is 18px with 56px taps. The shared header is left exactly as on every page. */
body[data-page="mood-verses"] .site-footer{ font-size:1.125rem; line-height:1.4; }
body[data-page="mood-verses"] .site-footer a{ padding:18px 6px; color:var(--mv-link, #6A4C0C); }

@media (min-width:700px){
  .mv-layer{ align-items:center; padding:24px; }
  .mv-sheet{ max-height:min(90vh, 780px); border-bottom:1.5px solid var(--edge, #EADFC0); border-radius:20px; box-shadow:0 18px 44px rgba(40,30,20,.22);
    transform:translateY(14px) scale(.985); opacity:0; transition:transform .28s ease, opacity .28s ease; }
  .mv-layer.shown .mv-sheet{ opacity:1; }
  .mv-grab{ display:none; }
  .mv-sh-top{ padding-top:14px; }
  .mv-sh-body{ padding:8px 24px 8px; }
  .mv-sh-foot{ padding:14px 24px 22px; }
  .mv-card-in{ padding:46px 34px 36px; }
  .mv-verse{ font-size:1.5rem; }
}
@media (max-width:380px){
  .mv-medal{ width:64px; height:64px; } .mv-medal svg{ width:40px; height:40px; }
  .mv-mood{ min-height:136px; }
  .mv-card-in{ padding:36px 14px 28px; }
  .mv-verse{ font-size:1.25rem; }
  .mv-sh-body{ padding:6px 12px 8px; } .mv-sh-foot{ padding-left:12px; padding-right:12px; }
  .mv-sh-top{ padding-left:12px; }
}
@media (max-width:340px){
  .mv-sh-foot .mv-act svg{ display:none; }
  .mv-sh-foot .ghost{ padding-left:10px; padding-right:10px; }
  .mv-sh-foot .mv-share{ min-width:0; }
}
@media (hover:none){ .mv-mood:hover{ transform:none; box-shadow:0 6px 20px rgba(40,30,20,.12); border-color:var(--edge, #EADFC0); } }
@media (prefers-reduced-motion:reduce){
  .mv-mood, .mv-scrim, .mv-sheet, .mv-fade{ transition:none !important; }
  .mv-mood:hover{ transform:none; }
}

/* the chapter page (bible/chapter.html also loads this file): unchanged from the live page */
.mv-back{ display:inline-flex; align-items:center; min-height:44px; margin-top:0; font-size:16px; }
.mv-chapter-text{ font-family:'Fraunces', serif; font-size:18px; line-height:1.75; color:#2A2618; }
.mv-chapter-text p{ margin:0 0 10px; padding:4px 8px; border-radius:8px; }
.mv-vn{ font-family:'Inter', sans-serif; font-size:16px; color:#A99B72; margin-right:6px; }
.mv-here{ background:#F7E8BF; }