/* =========================
   CATEGORIES — brand themed
   ========================= */

/* Fits between header/footer, uses same tokens as other pages */
.cat-wrap{
  --brand:  #800000;              /* maroon */
  --accent: #ffba08;              /* yellow */
  --text:   #1A1A1A;              /* off-black */
  --surface:#ffffff;              /* card bg (body is #FFFDF7) */
  --border: rgba(128,0,0,.14);    /* maroon-tinted border */
  --shadow: 0 6px 24px rgba(0,0,0,.06);

  margin-block: clamp(16px, 3vw, 40px) clamp(28px, 5vw, 64px);
  padding-inline: clamp(12px, 2vw, 20px);
}

/* Title (Bitter 900 + accent underline for consistency) */
.cat-title{
  margin: 0 0 clamp(10px, 1.8vw, 14px);
  font-family: var(--font-site, "Bitter", Georgia, serif);
  font-weight: 900;
  color: var(--brand);
  font-size: clamp(1.3rem, 1rem + 1.6vw, 1.9rem);
  line-height: 1.1;

  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: .25em;
  text-decoration-thickness: 3px;
  letter-spacing: .2px;
}

.cat-sub{
  margin: 0 0 clamp(14px, 2.2vw, 18px);
  color: #5b6472;
  font-family: var(--font-nav, Tahoma, Geneva, Verdana, sans-serif);
  font-size: .98rem;
}

/* Grid: same layout, just responsive gaps */
.cat-grid{
  display: grid !important;
  gap: clamp(14px, 2.2vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-content: start;      /* stick to top */
  justify-items: stretch;    /* left-aligned cards */
  width: 100%;
}
@media (min-width: 600px){  .cat-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){  .cat-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px){ .cat-grid{ grid-template-columns: repeat(4, 1fr); } }

/* Cards: brand surface, subtle border/shadow; no “card-in-card” look */
.cat-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(12px, 1.8vw, 14px);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cat-card:hover{
  transform: translateY(-3px);
  border-color: rgba(128,0,0,.22);
  box-shadow: 0 12px 34px rgba(128,0,0,.08), 0 4px 14px rgba(0,0,0,.06);
}

/* Top row (icon + name) */
.cat-top{ display:flex; align-items:center; gap:10px; min-height:40px; }

/* Initial tile: soft accent wash, readable text */
.cat-initial{
  width:40px; height:40px; flex:0 0 auto; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#7a3d00;
  background: #fff6d1;
  border: 1px solid #ffe089;
}

/* Category name: brand color with accent hover underline */
.cat-name{
  font-size:1.05rem; line-height:1.35;
  color: var(--brand);
  text-decoration: none;
}
.cat-name:hover{
  color:#5f0000;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

.cat-meta{
  color:#667085; font-size:.9rem;
}

/* Button: brand primary (same as other pages) */
.btn{
  align-self:flex-start;
  display:inline-block;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,186,8,.55);
  text-decoration: none;
  color: #4a2a00;
  background: var(--accent);
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(255,186,8,.25);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.btn:focus-visible{ outline: 3px solid rgba(255,186,8,.35); outline-offset: 2px; }

/* Empty state */
.empty{ color:#6b7280; }

/* Small screens niceties */
@media (max-width: 560px){
  .cat-name{ font-size: 1.02rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cat-card, .btn{ transition: none; }
}
