:root{
  --bg:#bccfc3;        /* noticeably deep sage */
  --card:#ffffff;     /* clean white cards */
  --text:#1f2a24;     /* deep green-charcoal text */
  --muted:#55665d;    /* muted sage text */
  --line:#aebfb4;     /* soft sage borders */
  --accent:#5f7f6b;   /* primary sage accent */
  --accent2:#3f5f4f;  /* darker sage for hover */
}



*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.55}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--max);margin:0 auto;padding:0 18px}

header{
  position:sticky;
  top:0;
  z-index:50;
  background:#c6d6cc; /* slightly lighter than page bg */
  border-bottom:1px solid var(--line);
}


.navbar{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:42px;height:42px;border-radius:14px;background:var(--accent)}
.brand h1{margin:0;font-size:16px}
.brand small{color:var(--muted);font-size:12px}

.navlinks{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.navlinks a{padding:8px 12px;border-radius:12px;color:var(--muted)}
.navlinks a.cta{background:var(--accent);color:#fff}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: 0 10px 30px rgba(31, 42, 36, 0.12);
}

.hero{padding:28px 0}
.heroMain{padding:22px}
.heroMain h2{font-size:32px;margin:10px 0}
.heroMain p{color:var(--muted)}

.btn{padding:10px 14px;border-radius:14px;border:1px solid var(--line);display:inline-block}
.btnPrimary{background:var(--accent);color:#fff;border:none}
.btnPrimary:hover{
  background:var(--accent2);
  transform: translateY(-1px);
  transition: all 0.2s ease;
}


.form{display:grid;gap:12px;margin-top:16px}
input,textarea,select{padding:12px;border-radius:12px;border:1px solid var(--line);font:inherit}

footer{border-top:1px solid var(--line);margin-top:30px;padding:22px 0;color:var(--muted)}
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials a{border:1px solid var(--line);padding:8px 12px;border-radius:12px}

/* Homepage hero */
.home-hero{
  text-align:center;
}

.home-logo{
  width:140px;       /* adjust if you want bigger/smaller */
  height:auto;
  margin: 10px auto 14px auto;
  display:block;
}

.home-hero h2{
  margin-top:6px;
}

/* Homepage section links */
.home-sections{
  margin-top:40px;
}

.home-section{
  text-align:center;
  margin:36px 0;
}

.home-section a{
  text-decoration:none;
  color:var(--text);
}

.home-section h3{
  font-size:22px;
  letter-spacing:2px;
  text-transform:uppercase;
  border-bottom:2px solid var(--accent);
  display:inline-block;
  padding-bottom:6px;
  margin-bottom:10px;
}

.home-section p{
  font-style:italic;
  color:var(--muted);
  margin:0;
}

.about-section{
  max-width:700px;
  margin:0 auto;
}

.about-section h2{
  text-align:center;
  margin-bottom:20px;
}

.about-section p{
  line-height:1.7;
  margin-bottom:16px;
}

/* Compact readable content (use on About/Policy pages) */
.content{
  max-width: 720px;
  margin: 0 auto;
}

.content h2{
  text-align:center;
  margin-bottom: 18px;
}

.content h3{
  margin-top: 18px;
  margin-bottom: 8px;
}

.content p{
  line-height: 1.7;
  margin: 0 0 14px 0;
}

.content ul{
  margin: 0 0 14px 22px;
}

.content li{
  margin: 6px 0;
}

/* Available rabbits listing cards */
.listing{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  margin: 16px 0;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 22px rgba(31, 42, 36, 0.08);
}

.listingTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.listingTop h3{
  margin:0;
}

.pill{
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
  background:#fff;
}

.listingMeta{
  color:var(--muted);
  margin: 8px 0 12px 0;
}

.listingDetails{
  margin: 0 0 10px 20px;
}

.listingNotes{
  margin: 10px 0 0 0;
}

.listingActions{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
/* Form layout that matches the "About" page vibe */
.formWrap{
  max-width: 720px;
  margin: 0 auto;
}

.formCard{
  margin-top: 10px;
}

.formGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}

@media (min-width: 760px){
  .formGrid.twoCol{
    grid-template-columns: 1fr 1fr;
  }
}

.field label{
  display:block;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 6px;
}

.field input,
.field textarea,
.field select{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  outline: none;
}

.field textarea{
  min-height: 130px;
  resize: vertical;
}

.helperText{
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

.actionsRow{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.actionsRow .btn{
  margin:0;
}

.smallNote{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 10px;
}
.checkRow{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top: 12px;
}

.checkRow input{
  margin-top: 4px;
  width: 18px;
  height: 18px;
}

.linkRow{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.linkRow a{
  text-decoration:none;
}

.pdfLink{
  display:inline-block;
  margin-top: 12px;
}
.actionsRow .btn{
  padding: 12px 18px;
  font-size: 15px;
}
.actionsRow{
  margin-top: 18px;
}
/* Available Rabbits - clean listing cards */
.listing{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin: 16px 0;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 22px rgba(31, 42, 36, 0.08);
}

.listingTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.listingTop h3{
  margin:0;
}

.pill{
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  color: var(--muted);
  background:#fff;
  white-space: nowrap;
}

.listingMeta{
  color: var(--muted);
  margin: 8px 0 12px 0;
  line-height: 1.6;
}

.listingDetails{
  margin: 0 0 10px 20px;
}

.listingDetails li{
  margin: 6px 0;
}

.listingNotes{
  margin: 10px 0 0 0;
  line-height: 1.7;
}

.listingActions{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.listingImage{
  width: 100%;
  max-width: 420px;
  border-radius: 14px;
  margin: 12px 0;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  display: block;
}
.sectionBubble {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  display: block;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  border: 4px solid #f5f7f4;
}
/* Upcoming Litters cards */
.litterCard{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  margin: 16px 0;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 22px rgba(31, 42, 36, 0.08);
}

.litterTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.litterTop h3{
  margin:0;
}

.litterImage{
  width:100%;
  max-width: 420px;
  border-radius:14px;
  margin:12px auto;
  display:block;
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}



.litterMeta{
  color: var(--muted);
  margin: 6px 0 12px 0;
}

.litterDetails{
  margin: 0 0 10px 20px;
}

.litterActions{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
/* Litter image wrapper for ribbon overlay */
.litterImageWrap{
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 520px;
  margin: 12px auto;
}

.litterRibbon{
  position: absolute;
  top: 14px;
  left: -8px;
  background: #5f7f6b; /* deep sage */
  color: #fff;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 0 18px 18px 0;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  letter-spacing: 0.4px;
}