/* ===== site additions (safe) ===== */

/* Generic section styling for pages using .section */
.section{
  padding: 40px 20px;
  text-align: center;
}
.section-title{
  margin: 0 0 22px;
  font-size: 34px;
}

/* Center helper */
.center{ text-align: center; }

/* Keep hero more compact (override) */
.hero{
  padding: 52px 20px !important;
}
.hero h1{ font-size: 38px; }

/* Card content alignment */
.card{ text-align: center; }

/* Avoid image cropping if you prefer full preview */
.card img{
  object-fit: contain;
  background: #fff;
}

/* Ensure Load more button stays centered even if wrapper changes */
#loadMoreBtn{
  display: inline-block;
  margin: 0 auto;
}

/* ===== Categories collage covers ===== */
.category-card .cat-collage{
  height: 140px;
  border-radius: 18px;
  margin: 18px 18px 0 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: #eef2f4;
}
.category-card .cat-collage img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.category-card .cat-collage img:first-child{
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}
.category-card .cat-collage img:last-child{
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}
.category-card .cat-collage-empty{
  background: linear-gradient(135deg, rgba(0,124,95,.20), rgba(16,24,40,.12));
}

/* Make category Open button match site green style */
.category-card a{ display:block; text-align:center; }
.category-card button{
  border: 0;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  background: #00775f;
  color: #fff;
}
/* Hero disclaimer text */
.hero-disclaimer{
  margin: 12px auto 0;
  max-width: 900px;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.85;
}


/* Tag/category buttons keep site green */
.category-card a, .card a{display:block;text-align:center;}
.category-card button{border:0;padding:10px 18px;border-radius:10px;cursor:pointer;font-weight:700;background:#00775f;color:#fff;}

/* ===== Hero fantasy final test ===== */
.hero{
  padding: 16px 20px 14px !important;
  min-height: 0 !important;
  background:
    linear-gradient(rgba(10,12,18,0.12), rgba(10,12,18,0.12)),
    url("assets/hero-fantasy-full.png") center center / cover no-repeat !important;
  background-color: #1a1219 !important;
}

.hero h1,
.hero h2{
  margin: 0 0 8px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.hero p{
  margin: 0 auto 4px !important;
  max-width: 980px;
  line-height: 1.20;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.hero-disclaimer{
  margin: 0 auto 8px !important;
  max-width: 980px;
  line-height: 1.20;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.hero .hero-actions,
.hero .hero-buttons{
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.hero input[type="text"],
.hero input[type="search"],
.hero .search-box,
.hero #searchInput{
  margin-top: 4px !important;
  background: rgba(25, 26, 42, 0.66) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #fff !important;
  backdrop-filter: blur(2px);
}

.hero input::placeholder,
.hero #searchInput::placeholder{
  color: rgba(255,255,255,0.82) !important;
}

.hero .tip,
.hero small{
  margin-top: 2px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* ===== Button color override: dark gray to match search field ===== */
.btn-primary,
.card .btn,
.hero .btn,
.category-card .btn,
.category-card button,
#loadMoreBtn{
  background: #2b2636 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.card .btn:hover,
.hero .btn:hover,
.category-card .btn:hover,
.category-card button:hover,
#loadMoreBtn:hover{
  background: #383246 !important;
  color: #ffffff !important;
}

.btn-primary:visited,
.card .btn:visited,
.hero .btn:visited{
  color: #ffffff !important;
}


/* ===== Guides pages ===== */
.guides-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;}
.guide-card{background:#fff;border-radius:10px;padding:20px;width:280px;box-shadow:0 0 5px rgba(0,0,0,0.1);text-align:center;}
.guide-card h3{margin:0 0 10px;font-size:22px;line-height:1.2;}
.guide-card p{margin:0 0 12px;line-height:1.55;color:#374151;}
.guide-card .btn{display:inline-block;text-decoration:none;}
.section-lead{max-width:860px;margin:0 auto 22px;text-align:center;color:#4b5563;line-height:1.7;}
.guide-copy{max-width:960px;margin:0 auto 34px;background:#fff;border-radius:10px;padding:24px 24px 6px;box-shadow:0 0 5px rgba(0,0,0,0.06);}
.guide-copy p{color:#374151;line-height:1.75;margin:0 0 18px;}
.guide-copy h2{font-size:28px;margin:0 0 14px;color:#111827;}
.breadcrumbs{max-width:1100px;margin:20px auto 0;padding:0 20px;color:#6b7280;font-size:14px;}
.breadcrumbs a{text-decoration:none;color:#6b7280;}
.guide-note{max-width:960px;margin:20px auto 0;padding:0 20px;text-align:center;color:#6b7280;line-height:1.7;}
.related-guides-box{margin-top:20px;padding:16px 18px;background:#f5f7fb;border:1px solid #e5e7eb;border-radius:12px;}
.related-guides-box h2{font-size:20px;margin:0 0 10px;color:#111827;}
.related-guides-box ul{margin:0;padding-left:18px;}
.related-guides-box li{margin:0 0 8px;}
.related-guides-box a{text-decoration:none;color:#0f766e;font-weight:600;}
@media (max-width: 760px){.guide-copy{padding:20px 16px 4px;}.guide-copy h2{font-size:24px;}.guide-card{width:100%;max-width:340px;}}

/* Tighter spacing between About and Contact on homepage */
#about.section{padding-bottom: 12px;}
#contact.section{padding-top: 12px;}