/* =====================================================
   WARM & COMFORTING DOCUMENT STYLE (Thrive Branded)
   Mobile-first + iPad/iOS Safari-safe watermark
   Background visible through "text bubbles"
   ===================================================== */

/* ---------- Root Theme Variables ---------- */
:root {
  --bg-page: #f6f3ee;
  --text-main: #2f2a25;
  --text-muted: #6f665c;

  --accent: #c47a3a;
  --accent-soft: #e7c7a3;

  --border-soft: #e4ddd4;
  --shadow-soft: 0 12px 30px rgba(0,0,0,0.10);

  --radius-lg: 18px;
  --radius-sm: 12px;

  --font-body: ui-serif, Georgia, "Times New Roman", serif;
  --font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans";

  /* Controls how much background shows through */
  --paper-alpha: 0.78;    /* page container translucency */
  --bubble-alpha: 0.74;   /* cards/callouts/badges translucency */

  /* Watermark strength */
  --wm-opacity: 0.28;
}

/* ---------- Base Page ---------- */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.75;
  background: var(--bg-page);
  -webkit-text-size-adjust: 100%;
}

body { position: relative; }

/* =====================================================
   FIXED THRIVE BACKGROUND (works on iOS)
   ===================================================== */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-color: var(--bg-page);
  background-image: url("https://thriveks.com/Thrive/Motherinlawguidance/Thrive_Logo_Transparent.png");
  background-repeat: no-repeat;
  background-position: center 120px;
  background-size: 760px auto;

  opacity: var(--wm-opacity);
  filter: saturate(1.05) contrast(1.05);
}

/* A soft vignette layer to make watermark “stand out” without ruining readability */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(60% 50% at 50% 10%, rgba(246,243,238,0.08) 0%, rgba(246,243,238,0.25) 55%, rgba(246,243,238,0.62) 100%),
    radial-gradient(75% 65% at 50% 70%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 70%, rgba(0,0,0,0.10) 100%);
}

/* ---------- Main Paper Container ---------- */
.page{
  position: relative;
  z-index: 1;

  max-width: 920px;
  margin: 18px 12px;
  padding: 18px;

  background: rgba(255,255,255,var(--paper-alpha));
  border: 1px solid rgba(228,221,212,0.85);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);

  /* helps “glass” look on Safari */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ---------- Header ---------- */
header{ margin-bottom: 1rem; }

.sub{
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4{
  font-family: var(--font-heading);
  font-weight: 650;
  line-height: 1.2;
  margin: 1.4rem 0 0.75rem;
}

h1{
  font-size: 1.55rem;     /* mobile first */
  margin-top: 0;
  letter-spacing: -0.01em;
}

h2{
  font-size: 1.15rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid rgba(231,199,163,0.85);
}

h3{ font-size: 1.05rem; }

h4{
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ---------- Text ---------- */
p{ margin: 0.9rem 0; }
strong{ color: #1f1b17; }

/* ---------- Lists ---------- */
ul, ol{ margin: 0.85rem 0 1.15rem 1.25rem; }
li{ margin-bottom: 0.55rem; }

/* ---------- Grid / Cards ---------- */
.grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.card{
  background: rgba(255,255,255,var(--bubble-alpha));
  border: 1px solid rgba(228,221,212,0.82);
  border-radius: var(--radius-sm);
  padding: 14px;

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.kicker{
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

/* ---------- Badges ---------- */
.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 10px;
}

.badge{
  font-size: 0.75rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(228,221,212,0.82);
  background: rgba(255,255,255,var(--bubble-alpha));
  color: var(--text-muted);

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.badge strong{ color: var(--text-main); }

/* ---------- Callouts ---------- */
.callout{
  background: rgba(250,247,242,0.78); /* slightly warmer tint */
  border: 1px solid rgba(228,221,212,0.82);
  border-left: 6px solid var(--accent);
  padding: 16px 16px;
  margin: 18px 0;
  border-radius: var(--radius-sm);

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.callout .title{
  font-family: var(--font-heading);
  font-weight: 750;
  margin-bottom: 6px;
}

.callout.ok{ border-left-color: #2f855a; }
.callout.warn{ border-left-color: #b7791f; }
.callout.danger{ border-left-color: #c53030; }

/* ---------- Tables (mobile safe) ---------- */
table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.1rem 0;
  font-size: 0.95rem;
  background: rgba(255,255,255,0.80);
  border-radius: 12px;
  overflow: hidden;
}

th, td{
  border: 1px solid rgba(228,221,212,0.82);
  padding: 10px;
  vertical-align: top;
}

th{
  background: rgba(250,247,242,0.95);
  font-family: var(--font-heading);
  font-weight: 650;
}

/* ---------- Misc ---------- */
.note{
  font-size: 0.85rem;
  color: var(--text-muted);
}

.pill{
  display:inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(228,221,212,0.82);
  font-size: 0.75rem;
  margin-left: 6px;
  background: rgba(255,255,255,var(--bubble-alpha));

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.divider{
  height: 1px;
  background: rgba(228,221,212,0.82);
  margin: 1.5rem 0;
}

/* ---------- Footer ---------- */
footer{
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(228,221,212,0.82);
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align:center;
}

.thrive-footer{
  margin-top: 10px;
  font-family: var(--font-heading);
}

/* ---------- Links ---------- */
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* =====================================================
   Desktop enhancements
   ===================================================== */
@media (min-width: 840px){
  .page{
    margin: 28px auto;
    padding: 24px;
  }

  h1{ font-size: 1.9rem; }
  h2{ font-size: 1.25rem; }

  .grid.two{ grid-template-columns: 1fr 1fr; }

  body::before{
    background-size: 880px auto;
    opacity: 0.26;
  }
}

/* =====================================================
   Very small phones
   ===================================================== */
@media (max-width: 390px){
  .page{ margin: 12px 10px; padding: 16px; }
  h1{ font-size: 1.45rem; }
  body::before{ background-size: 620px auto; }
}