/* You can add global styles to this file, and also import other style files */

:root{  
  --linen:#FDFBF7;            /* base background */
  --taupe:#D2B9A3;
  --moss:#A8BCA1;
  --ever:#556B5B;             /* deep evergreen */
  --indigo:#645C84;           /* twilight */
  --blush:#E9C9D1;            /* pastel whimsy */
  --lavender:#CBBBEA;         /* pastel whimsy */
  --ink:#2F3B2F;
  --radius:18px;
  --shadow:0 12px 28px rgba(0,0,0,.08);
  --card: color-mix(in oklab, var(--linen) 92%, white);
}
  .prose{
      width:100%;
      padding: 4em !important;
      margin-inline:auto; color:#3a3a3a;
      background: var(--card);
      padding: clamp(18px, 3.5vw, 28px);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .prose p{ margin: .6rem 0; }
  .content-blog .blog-title{
    font-family: "Playfair Display", ui-serif, Georgia, serif;
      color: var(--ever);
      margin-bottom:1em !important;
      font-size: 2em !important; 
      font-weight:bold;
      margin: 0 0 1rem;
  }
 .hero{
      position: relative;
      isolation: isolate;
      min-height: 420px;
      display: grid;
      align-items: center;
      padding: clamp(24px, 5vw, 48px) 0;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
    }
    .hero__bg{
      position:absolute; inset:0; z-index:-1; opacity:.7;
      background:
        url("/img/hero-fairy-1600x500.png") center/cover no-repeat;
      filter: saturate(.95);
    }
    .hero__grid{
      display:grid;
      grid-template-columns: 1.2fr 1fr;
      gap: clamp(16px, 4vw, 40px);
      align-items: center;
    }
    .hero__card{
      background: var(--card);
      padding: clamp(18px, 3.5vw, 28px);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(2px);
    }
    .eyebrow{
      letter-spacing:.12em;
      text-transform: uppercase;
      color: var(--indigo);
      font-weight:700;
      font-size:.9rem;
    }
    h1{
      font-family: "Playfair Display", ui-serif, Georgia, serif;
      font-size: clamp(28px, 4vw, 44px);
      line-height:1.1;
      color: var(--ever);
      margin:.25rem 0 0.6rem;
    }

    .hero__image{
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      background: #fff5; 
    }

    section{ padding: clamp(32px, 6vw, 72px) 0; }
    .section-title{
      font-family: "Playfair Display", ui-serif, Georgia, serif;
      color: var(--ever);
      font-size: clamp(24px, 3vw, 36px);
      margin: 0 0 1rem;
      text-align:center;
    }
    .blog-img{ max-width:100%; height:auto; display:block; }
  
     @media (max-width: 980px){
      .hero__grid{ grid-template-columns: 1fr; }
      .values{ grid-template-columns: repeat(3, 1fr); }
      .cards{ grid-template-columns: 1fr; }
    }
    @media (max-width: 640px){
      .values{ grid-template-columns: 1fr 1fr; }
      .icon{ width:34px; height:34px; }
    }
    @media (prefers-reduced-motion: reduce){
      *{ scroll-behavior: auto; transition:none; }
    }


    .abn-hero{
  position: relative;
  isolation: isolate;
  background: url("/assets/banner_crafty.png") center/cover no-repeat;
  /* keep the banner feeling slim but flexible */
  min-height: clamp(260px, 28vw, 380px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Soft watercolor wash to improve text contrast (no harsh overlay) */
.abn-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(80% 120% at 50% 40%, rgba(253,251,247,.80), rgba(253,251,247,.35) 60%, transparent 90%);
  z-index:0;
}

/* ----- Content card ----- */
.abn-hero__overlay{
  z-index:1;
  width:min(920px, 92vw);
  margin-inline:auto;
  background: color-mix(in oklab, var(--linen) 88%, white);
  padding: clamp(18px, 3.5vw, 28px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(2px);
  text-align: left;
}

/* Typography */
.abn-hero__eyebrow{
  margin:0 0 .25rem;
  font: 700 .9rem/1 "Nunito", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  color:#2f2f2f;
  opacity:.85;
}
.abn-hero__title{
  margin:.1rem 0 .5rem;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  color: var(--ever);
}
.abn-hero__lead{
  margin:0 0 1rem;
  color: var(--indigo);
  font-size: clamp(16px, 1.5vw, 18px);
  max-width: 70ch;
}

/* Pastel gradient button */
.abn-hero__btn{
  display:inline-block;
  padding: .85rem 1.25rem;
  border-radius: 10px;
  background: var(--blush);
  color: var(--ink);
  font: 700 1rem/1 "Nunito", system-ui, sans-serif;
  text-decoration:none;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.abn-hero__btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

/* Layout tweaks for small screens */
@media (max-width: 640px){
  .abn-hero{ place-items: end center; padding-bottom: 16px; }
  .abn-hero__overlay{ text-align:left; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .abn-hero__btn{ transition:none; }
}

.footer {
  background: linear-gradient(135deg, #f9f5f1, #f1f7f5);
  padding: 2rem 1rem;
  font-family: 'Georgia', serif;
  color: #2f3d2c;
  border-top: 2px solid rgba(160, 190, 160, 0.2);
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-brand h2 {
  font-size: 1.5rem;
  color: var(--ink); /* Indigo accent */
  margin-bottom: 0.5rem;
}

.footer-brand p {
  font-size: 0.9rem;
  color: #4d5d4b;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links a {
  text-decoration: none;
  color: #2f3d2c;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #2070A1;
}

.footer-social {
  display: flex;
  gap: 1rem;
  font-size: 1.3rem;
}

.footer-social a {
  text-decoration: none;
  transition: transform 0.3s ease, color 0.3s ease;
  color: #2f3d2c;
}

.footer-social a:hover {
  color: #2070A1;
  transform: scale(1.1);
}

.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.85rem;
  color: #6b7a68;
  border-top: 1px dashed rgba(120, 150, 120, 0.3);
  padding-top: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-links {
    flex-direction: row;
    gap: 1.5rem;
    margin-top: 1rem;
  }
}

.gratitude-tracker {
  max-width: 500px;
  margin: 2rem auto;
  padding: 2rem;
  background: linear-gradient(135deg, #fdfbf7, #f9f6fb);
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  font-family: "Nunito", sans-serif;
  text-align: center;
}

.tracker-title {
  font-family: "Playfair Display", serif;
  color: #556B5B;
  font-size: 1.8rem;
  margin-bottom: 0.3rem;
}

.tracker-subtitle {
  font-size: 1rem;
  color: #645C84;
  margin-bottom: 1.5rem;
}

.tracker-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.thanks-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.thanks-item label {
  font-weight: bold;
  color: #2070A1;
}

.thanks-item input, .mood-box {
  flex: 1;
  padding: 0.7rem 1rem;
  border: 2px solid #E9C9D1;
  border-radius: 12px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.thanks-item input:focus {
  border-color: #CBBBEA;
}

.thanks-btn {
  margin-top: 1rem;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 999px;
  font-weight: bold;
  font-size: 1rem;
  color: #2f3b2f;
  background: linear-gradient(90deg, #E9C9D1, #CBBBEA);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.thanks-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

/* Responsive */
@media (max-width: 480px) {
  .gratitude-tracker {
    padding: 1.5rem;
  }
  .thanks-item input {
    font-size: 0.9rem;
  }
}


*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Nunito", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--ink);
  background:
    radial-gradient(120% 100% at 0% 100%, rgba(233,201,209,.25), transparent 60%),
    radial-gradient(120% 100% at 100% 0%, rgba(203,187,234,.22), transparent 60%),
    var(--linen);
  line-height:1.6;
}

/* Header */
.header{
  width:min(var(--maxw), 92vw);
  margin: 22px auto 8px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family:"Playfair Display", ui-serif, Georgia, serif;
  color:var(--ever);
  font-size: clamp(22px, 3vw, 34px);
}
.header small{ color:var(--indigo) }

/* Grid layout */
.grid{
  width:min(var(--maxw), 92vw);
  margin: 12px auto 54px;
  display:grid;
  gap: clamp(14px, 2vw, 22px);
  grid-template-columns: 1.1fr 1fr 1fr; /* Left: grounding; Center: inspiration; Right: action/connection */
}
@media (max-width: 980px){ .grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .grid{ grid-template-columns: 1fr; } }

/* Cards */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding: clamp(16px, 2.6vw, 22px) !important;
  backdrop-filter: blur(2px);
  margin-top: 2em !important;
}
.card h3{
  font-family:"Playfair Display", ui-serif, Georgia, serif;
  color:var(--ever);
  margin:.25rem 0 .5rem;
  font-size: clamp(18px, 2vw, 22px);
  display:flex; align-items:center; gap:.5rem;
}
.sub{ color:var(--indigo); margin:.25rem 0 1rem; font-size:.95rem }

/* Inputs & buttons */
input[type="text"]{
  width:100%; padding:.7rem .9rem;
  border:2px solid var(--blush);
  border-radius:12px; font-size:1rem; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input[type="text"]:focus{
  border-color:var(--lavender);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--lav) 25%, transparent);
}
.btn{
  display:inline-block; margin-top:.6rem;
  padding:.75rem 1.15rem; border-radius:999px; border:none;
  background:linear-gradient(90deg, var(--blush), var(--lavender));
  color:var(--ink); font-weight:700; text-decoration:none; cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 14px 30px rgba(0,0,0,.12); }

/* Lists */
.ul-clean{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.seed{ display:flex; align-items:center; gap:.65rem; }
.seed input[type="checkbox"]{
  width:1.1rem; height:1.1rem; accent-color: var(--moss);
}

/* Badges / chips */
.mood-chip{
  text-align:center;
  padding:.5rem .75rem; border-radius:999px; cursor:pointer;
  background:linear-gradient(90deg, #f0f7f3, #f7f0f8);
  border:1px solid color-mix(in oklab, var(--moss) 25%, transparent);
  transition:transform .15s ease;
}
.mood-chip:hover{ transform:translateY(-1px); }

/* Compact rows */

/* Small helper */
.muted{ color:#5a5a5a; font-size:.9rem }

/* Library tiles */
.tiles{ display:grid; gap:.6rem; grid-template-columns:1fr 1fr; }
.tile{
  display:grid; place-items:center; text-align:center;
  padding:1rem; border-radius:14px; text-decoration:none; color:var(--ever);
  background: linear-gradient(135deg, #fdfbf7, #f6f3fb);
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
  font-family:"Playfair Display", ui-serif, Georgia, serif;
}
.tile:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.08); }

.journal-card{
  width:100%;
  position:relative;
  background:
    radial-gradient(120% 100% at 0% 100%, rgba(233,201,209,.22), transparent 60%),
    radial-gradient(120% 100% at 100% 0%, rgba(203,187,234,.20), transparent 60%),
    color-mix(in oklab, var(--linen) 92%, white);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 2.6vw, 24px);
  margin: 14px auto;
  max-width: 860px;
  border: 1px solid color-mix(in oklab, var(--moss) 22%, transparent);
  backdrop-filter: blur(2px);
}

/* ===== Header (date + mood chip) ===== */
.jc-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; margin-bottom: 12px;
}
.jc-date{
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  color: var(--ever);
  font-size: clamp(18px, 2.2vw, 22px);
  padding:.35rem .8rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--linen) 92%, white);
  border: 1px solid color-mix(in oklab, var(--moss) 25%, transparent);
}

/* Mood chip */
.jc-mood{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .8rem;
  border-radius: 999px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  border: 1px solid color-mix(in oklab, var(--moss) 25%, transparent);
  background: linear-gradient(90deg, var(--blush), var(--lavender));
}
.jc-mood .emoji{ font-size: 1.1rem; }
.jc-mood .label{ white-space: nowrap; }
.jc-mood .score{ opacity:.75; font-weight:600; }

/* Optional mood color variants (soft tints) */
.mood--1{ background: linear-gradient(90deg, #f8d9de, #eadde6); }
.mood--2{ background: linear-gradient(90deg, #f5e0e5, #e7e2ef); }
.mood--3{ background: linear-gradient(90deg, #f2e9ef, #e8e6f3); }
.mood--4{ background: linear-gradient(90deg, var(--blush), var(--lavender)); }
.mood--5{ background: linear-gradient(90deg, #ead7f6, #d7f0e6); }

/* ===== Body ===== */
.jc-body{
  display:grid; gap: clamp(12px, 2vw, 18px);
  grid-template-columns: 1fr;
}
@media (max-width: 720px){
  .jc-body{ grid-template-columns: 1fr; }
}

.jc-title{
  margin: 1rem .5rem;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  color: var(--ever);
  font-size: clamp(18px, 2vw, 22px);
}

/* Gratitude list with cute markers */
.jc-gratitude{
  list-style:none; padding:0; margin:0 1rem;
  display:grid; gap:.45rem;
}
.jc-gratitude li{
  position:relative; padding-left:1.6rem; color: var(--indigo);
}
.jc-gratitude li::before{
  content:"✿";
  position:absolute; left:0; top:.05rem;
  font-size:1rem; line-height:1;
  background: linear-gradient(90deg, var(--blush), var(--lavender));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Mood note */
.jc-note{
  margin:0;
  color: var(--indigo);
  background: color-mix(in oklab, var(--linen) 92%, white);
  border: 1px solid color-mix(in oklab, var(--lavender) 28%, transparent);
  border-radius: 14px;
  padding: .8rem .9rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.04);
}