/* =========================
   Raccoon Light Palette
   ========================= */
:root{
  --bg: #F6F0E6; 
  --card: hsl(35deg 45% 62% / 60%); 
  --elev:#F2E8DA; 
  --border:#E6DCCD; 

  --text:#2B2118; 
  --muted:#7A6A5B; 

  --primary: #8B5E34; 
  --primary-2: #6F4929; 
  --primary-3: #F4A261; 

  --ok:        #2F7D32; 
  --warn:      #B5882C; 
  --danger:    #B34A36; 

  --radius: 14px;
  --shadow: 0 8px 24px rgba(111, 73, 41, 0.12);
  --focus:  0 0 0 3px rgba(139, 94, 52, 0.25);
  
  --field:  hsl(35deg 45% 62% / 26%); 
  --primary-soft: #E9D8C7;
}

body.dark{
  --bg: #F6F0E6;
    --card: #caa674;
    --elev: #F2E8DA;
    --border: #E6DCCD;
    --text: #c6bbb0;
    --muted: #7A6A5B;
    --primary: #424e5b;
    --primary-2: #c6bbb0;
    --ok: #2F7D32;
    --warn: #B5882C;
    --danger: #B34A36;
    --radius: 14px;
    --shadow: 0 8px 24px rgba(111, 73, 41, 0.12);
    --focus: 0 0 0 3px rgba(139, 94, 52, 0.25);
    --field: hsl(35deg 45% 62% / 26%);
    --primary-soft: #E9D8C7;
}

/* Global helpers */
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--text); }

/* =============== Layout =============== */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
  box-sizing: border-box;
}

.searchContainer { width: 100%; }

.buttons-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: inherit;
}

/* =============== Hero =============== */
.hero-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
    1200px 600px at 50% 10%,
    #F6F0E6 0%, #F2E8DA 40%, #E6DCCD 70%, #E9D8C7 100%
  );
  padding: 100px 20px 50px;
  text-align: center;
  color: var(--text);
  width: 100%;
  min-height: 420px;
}

.hero-animated { max-width: 820px; margin: 0 auto 40px; z-index: 1; }

.hero-title {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: 800;
  font-family: 'Sora', sans-serif !important;
  color: var(--text);
}

.hero-sub {
  font-size: 1.2rem;
  color: var(--muted);
  margin-bottom: 2rem;
  font-family: 'Sora', sans-serif !important;
}

.hero-cta {
  font-size: 1.1rem;
  padding: 14px 32px;
  background-color: var(--primary);
  border: 1px solid var(--primary-2);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: filter .2s ease, transform .06s ease;
}
.hero-cta:hover { filter: brightness(1.06); transform: translateY(1px); }

/* Simple fade-up animation */
.animate-fade { opacity: 0; transform: translateY(20px); animation: fadeUp .8s ease forwards; }
.animate-fade:nth-child(1){ animation-delay:.2s; }
.animate-fade:nth-child(2){ animation-delay:.4s; }
.animate-fade:nth-child(3){ animation-delay:.6s; }
@keyframes fadeUp { to { opacity:1; transform: translateY(0); } }

/* =============== Wave Divider =============== */
.wave-divider { line-height: 0; position: relative; margin-top: -5rem; z-index: 99; }
.wave-divider svg { position: relative; display: block; width: 100%; height: 80px; z-index: 99; pointer-events: none; }
.wave-divider path { fill: var(--bg); }

/* =============== Buttons Grid =============== */
.home-button {
  width: 220px;
  text-align: center;
  border-radius: 16px;
  padding: 12px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.home-button:hover { transform: translateY(-3px); filter: brightness(1.03); }
.home-button span,
.home-button p { color: var(--text); }
.home-button img { width: 100%; border-radius: 10px; }
.home-button p { margin-top: 10px; font-size: 16px; font-weight: 700; }

/* =============== Search + Categories =============== */
.search-bar {
  width: 100%;
  max-width: 650px;
  padding: 12px 14px;
  margin: 20px auto;
  font-size: 1.05rem;
  border-radius: 10px;
  background: var(--field);
  color: var(--text);
  border: 1px solid var(--border);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.search-bar:focus { border-color: var(--primary); box-shadow: var(--focus); }

.category-buttons {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-bottom: 30px; width: 80%;
}
.category-buttons button {
  padding: 10px 18px;
  border: 1px solid var(--primary-2);
  background-color: var(--primary-3);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  transition: filter .2s ease, transform .06s ease;
}
.category-buttons button:hover { filter: brightness(1.06); transform: translateY(1px); }

/* =============== Ads Grid + Cards =============== */
.ads-grid {
  display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: center; align-items: stretch;
}

/* Card container */
.ad-card {
  display: flex; flex-direction: column; justify-content: flex-start;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 16px;
  border-radius: 12px;
  width: 300px;
  min-height: 350px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ad-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(111,73,41,.18); }

.cardImage { margin-bottom: 12px; display:flex; justify-content:center; align-items:center; }
.cardImage img { max-height: 100px; min-height: 100px; object-fit: cover; border-radius: 10px; }

.ad-card h3 { min-height: 1.5em; font-size: 1.1rem; margin: 0 0 8px; color: var(--text); }

.cardDesc {
  margin-top: 8px;
  min-height: 80px;
  flex-grow: 1;
  display: block; width: 100%;
  padding: 0;
  border: none; border-radius: 8px;
  overflow-wrap: break-word; white-space: pre-wrap; word-break: break-word;
  outline: none; text-align: left;
  background: transparent; color: var(--text);
  max-height: 7rem; overflow: auto;
}

.cardKeywords { min-height: 30px; margin-bottom: 8px; }
.cardKeywords span {
  background-color: var(--primary-soft);
  color: var(--primary-2);
  font-weight: 600;
  padding: 6px 10px;
  margin: 0 6px 6px 0;
  border-radius: 999px;
  font-size: 0.85rem;
  display: inline-block;
  cursor: pointer;
}

/* Action buttons on cards */
.card-buttons { display: flex; width: 100%; margin-top: auto; gap: 10px; }
.join-btn {
  flex: 4;
  background-color: var(--ok);
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  text-align: center; text-decoration: none; font-weight: 800;
  transition: filter .2s ease;
}
.join-btn:hover { filter: brightness(1.06); }
.more-btn {
  flex: 1;
  background-color: var(--primary);
  border: 1px solid var(--primary-2);
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  text-align: center; text-decoration: none; font-weight: 800;
  transition: filter .2s ease;
}
.more-btn:hover { filter: brightness(1.06); }

/* “View More” full-width anchor in some cards */
.ad-card a {
  padding: .9rem;
  background-color: var(--primary);
  border: 1px solid var(--primary-2);
  border-radius: 12px;
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  margin-top: auto;
  color: #fff;
  transition: filter .2s ease;
}
.ad-card a:hover { filter: brightness(1.06); }

/* Section heading */
.section-heading {
  font-size: 2rem;
  color: var(--primary-2);
  font-weight: 800;
  text-align: center;
  margin: 40px 0 20px;
  position: relative;
}
.section-heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background-color: var(--primary);
  margin: 10px auto 0;
  border-radius: 2px;
}

.tranding-card { height: unset !important; }

/* =============== Header Nav Buttons / Menu =============== */
.nav-buttons { display: flex; gap: 15px; }

.nav-btn {
  background-color: var(--primary);
  color: #fff;
  padding: 10px 20px;
  border: 1px solid var(--primary-2);
  font-size: 1rem; border-radius: 10px; cursor: pointer;
  transition: filter .2s ease;
}
.nav-btn:hover { filter: brightness(1.06); }

.menu-toggle {
  background: var(--primary);
  color: #fff;
  font-size: 1.5rem;
  border: 1px solid var(--primary-2);
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
}

/* Dropdown */
.dropdown-menu {
  display: none; flex-direction: column;
  background-color: var(--card);
  border: 1px solid var(--border);
  position: absolute; right: 10px; top: 45px; z-index: 999; width: 180px;
  border-radius: 12px; box-shadow: var(--shadow);
}
.dropdown-menu .nav-btn {
  background: transparent; color: var(--text);
  text-align: left; padding: 12px 16px; font-size: 1rem; border: none; border-bottom: 1px solid var(--border);
}
.dropdown-menu .nav-btn:hover { background-color: var(--elev); }
.desktop-only { display: flex; }
.mobile-only  { display: none; }

/* Responsive menu */
@media (max-width: 768px) {
  .desktop-only { display: none; }
  .mobile-only  { display: block; position: relative; }
  .dropdown-menu { display: none; }
  .dropdown-menu.show { display: flex; }
}

/* Centered buttons override */
.centered-buttons-container button {
  font-family: monospace !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  background: none !important;
  color: var(--text) !important;
}
.centered-buttons-container button:hover { filter: brightness(1.05); }

/* Mobile tweaks */
@media (max-width: 768px) {
  .container { width: 95%; margin: 20px auto; }
  .buttons-container { flex-direction: column; gap: 15px; align-items: center; }
  .home-button { width: 100%; max-width: 320px; padding: 12px; }
  .home-button p { font-size: 14px; }
}