/* Home styles for MarijuanaTravelGuide */
:root{
  --brand-primary: #2d6ff7;
  --brand-primary-dark: #1a5ae0;
  --text-dark: #000000;
  --text-body: #212529;
  --gray-50: #f9fafb;
}

/* Typography helpers */
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text-body); }
.lead{ font-size: 1.125rem; line-height: 1.75rem; }
.section-title{ color: var(--text-dark); font-size: 1.875rem; font-weight: 800; }
@media (min-width: 768px){ .section-title{ font-size: 2.25rem; } }

/* Hero gradient */
.hero-gradient{
  background-image: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
}

/* Cards */
.card{ background:#fff; padding:1.5rem; border-radius:0.5rem; }
.card-title{ font-size:1.25rem; font-weight:700; margin-bottom:0.75rem; color: var(--brand-primary); }
.card-text{ line-height:1.6; }
.card-thumb{ height:12rem; }
.card-shadow{ box-shadow: 0 5px 20px 0 rgba(45, 111, 247, 0.12); }

/* Buttons & links */
.btn-primary{ background: var(--brand-primary); color:#fff; transition: all .3s ease; text-decoration:none; display:inline-block; }
.btn-primary:hover{ background: var(--brand-primary-dark); box-shadow: 0 5px 20px 0 rgba(45, 111, 247, 0.3); }
.link-primary{ color: var(--brand-primary); text-decoration:none; }
.link-primary:hover{ text-decoration:underline; }
.text-white-90{ color: rgba(255,255,255,.9); }

/* Icons & index items */
.index-item{ display:flex; align-items:center; padding:1rem; background:#f3f4f6; border-radius:.5rem; }
.index-icon{ width:3rem; height:3rem; background: var(--brand-primary); color:#fff; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:700; margin-right:1rem; }

/* FAQ */
.faq{ background:#fff; border-radius:.5rem; box-shadow: 0 5px 20px 0 rgba(45, 111, 247, 0.12); padding:1.5rem; }
.faq-summary{ font-weight:700; font-size:1.125rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.faq-text{ margin-top:1rem; line-height:1.6; }
.arrow{ font-size:1.25rem; color: var(--brand-primary); }

/* Simple grid fallbacks (if no utility CSS present) */
.grid{ display:grid; gap:1.5rem; }
@media (min-width:768px){ .md\:grid-cols-2{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .lg\:grid-cols-3{ grid-template-columns: repeat(3,minmax(0,1fr)); } }

/* Helpers */
.container{ width:100%; margin-left:auto; margin-right:auto; }
.max-w-6xl{ max-width:72rem; }
.max-w-5xl{ max-width:64rem; }
.max-w-4xl{ max-width:56rem; }
.max-w-3xl{ max-width:48rem; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.p-6{ padding:1.5rem; }
.py-8{ padding-top:2rem; padding-bottom:2rem; }
.py-16{ padding-top:4rem; padding-bottom:4rem; }
.py-20{ padding-top:5rem; padding-bottom:5rem; }
.py-24{ padding-top:6rem; padding-bottom:6rem; }