/*! PrepSphere — Lovable Design System CSS */

/* ─── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ─── Tailwind CDN ──────────────────────────────────────────────────────────── */
/* We embed a Tailwind-compatible reset + utilities via CDN */

/* ─── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Brand Colors */
  --coffee-deep: #3d2314;   /* darkest brown – top bar, sections */
  --coffee:      #6b3a2a;   /* primary brown – buttons, accents */
  --cream:       #fdf8f3;   /* warm off-white – backgrounds */
  --gold:        #d4a853;   /* warm gold – stat icons */
  --accent:      #f0e6d6;   /* soft warm beige – icon bg */
  --ash:         #f5f5f5;   /* light grey */

  /* Tailwind semantic aliases */
  --background:         var(--cream);
  --foreground:         var(--coffee-deep);
  --card:               #ffffff;
  --card-foreground:    var(--coffee-deep);
  --primary:            var(--coffee);
  --primary-foreground: #ffffff;
  --muted:              #f4ede4;
  --muted-foreground:   #7c5c4b;
  --border:             rgba(90, 62, 43, 0.15);

  /* Shadows */
  --shadow-soft:    0 2px 12px -2px rgba(61, 35, 20, 0.08), 0 1px 3px -1px rgba(61, 35, 20, 0.04);
  --shadow-elegant: 0 8px 30px -6px rgba(61, 35, 20, 0.18), 0 2px 8px -2px rgba(61, 35, 20, 0.08);
}

/* ─── Tailwind Base Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--cream);
  color: var(--coffee-deep);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }

/* ─── Custom Utilities ───────────────────────────────────────────────────────── */
.font-display       { font-family: 'Poppins', sans-serif; }
.font-700           { font-weight: 700; }
.font-800           { font-weight: 800; }

.gradient-coffee {
  background: linear-gradient(135deg, var(--coffee-deep) 0%, var(--coffee) 100%);
}

.surface-cream {
  background-color: var(--cream);
}

.container-prose {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 640px) {
  .container-prose { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1024px) {
  .container-prose { padding-left: 3rem; padding-right: 3rem; }
}

.shadow-soft    { box-shadow: var(--shadow-soft); }
.shadow-elegant { box-shadow: var(--shadow-elegant); }

/* ─── Full Tailwind CDN ──────────────────────────────────────────────────────── */
/* All standard Tailwind utilities come from the CDN script in <head>. 
   The classes below are direct overrides / helpers for Lovable-specific patterns */

/* Backdrop blur polyfill support */
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.backdrop-blur-sm  { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px); }

/* Ring / focus utilities */
.focus\:outline-none:focus { outline: none; }

/* Text size aliases */
.text-\[12px\] { font-size: 12px; }
.text-\[10px\] { font-size: 10px; }

/* h-9, h-11, h-16 */
.h-9  { height: 2.25rem; }
.h-10 { height: 2.5rem;  }
.h-11 { height: 2.75rem; }
.h-16 { height: 4rem;    }

/* Tracking overrides */
.tracking-\[0\.18em\] { letter-spacing: 0.18em; }
.tracking-\[0\.2em\]  { letter-spacing: 0.2em; }
.tracking-wider       { letter-spacing: 0.05em; }

/* Leading */
.leading-\[1\.05\] { line-height: 1.05; }

/* Aspect ratio */
.aspect-\[4\/5\]  { aspect-ratio: 4/5; }
.aspect-\[16\/9\] { aspect-ratio: 16/9; }

/* Grid place-items-center */
.place-items-center { place-items: center; }

/* Custom max-w */
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }

/* Prose heading sizes */
.text-4xl { font-size: 2.25rem;  line-height: 1.1; }
.text-5xl { font-size: 3rem;     line-height: 1.05; }
.text-6xl { font-size: 3.75rem;  line-height: 1; }

/* Overflow hidden */
.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }

/* Rounded */
.rounded-\[2rem\]  { border-radius: 2rem; }
.rounded-\[2\.5rem\] { border-radius: 2.5rem; }

/* Border color */
.border-border { border-color: var(--border); }
.border-border\/60 { border-color: rgba(90, 62, 43, 0.1); }
.border-border\/50 { border-color: rgba(90, 62, 43, 0.08); }

/* BG opacity variants */
.bg-background { background-color: var(--background); }
.bg-background\/85 { background-color: rgba(253, 248, 243, 0.85); }
.bg-card { background-color: var(--card); }
.bg-muted { background-color: var(--muted); }

/* Text colors */
.text-foreground      { color: var(--foreground); }
.text-foreground\/75  { color: rgba(61, 35, 20, 0.75); }
.text-foreground\/80  { color: rgba(61, 35, 20, 0.80); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary         { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }

/* Hover text foreground */
.hover\:text-foreground:hover { color: var(--foreground); }
.hover\:text-white:hover      { color: #ffffff; }

/* BG hover */
.hover\:opacity-95:hover { opacity: 0.95; }

/* Transition */
.transition { transition: all 150ms ease; }
.transition-colors { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
.transition-transform { transition: transform 150ms ease; }
.hover\:scale-105:hover { transform: scale(1.05); }

/* Shrink-0 */
.shrink-0 { flex-shrink: 0; }

/* ─── Ping animation ─────────────────────────────────────────────────────────── */
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping {
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ─── Mobile menu slide ──────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ─── Alpine x-collapse ─────────────────────────────────────────────────────── */
[x-collapse] {
  overflow: hidden;
}

/* ─── Sticky header ──────────────────────────────────────────────────────────── */
header.sticky {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* ─── WhatsApp button ────────────────────────────────────────────────────────── */
.shadow-\[0_10px_30px_-8px_rgba\(37\,211\,102\,0\.6\)\] {
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.6);
}

/* ─── Star rating yellow ─────────────────────────────────────────────────────── */
.text-\[\#f59e0b\] { color: #f59e0b; }

/* ─── Blog card image aspect ─────────────────────────────────────────────────── */
.aspect-\[16\/9\] { aspect-ratio: 16/9; }

/* ─── Responsive: hide on mobile ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .hidden { display: none; }
  .md\:block { display: none; }
}
@media (min-width: 768px) {
  .hidden { display: none; }
  .md\:block { display: block !important; }
  .md\:flex  { display: flex  !important; }
  .md\:grid  { display: grid  !important; }
  .md\:inline { display: inline !important; }
  .md\:hidden { display: none !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:col-span-1 { grid-column: span 1; }
  .md\:pt-20 { padding-top: 5rem; }
  .md\:pb-28 { padding-bottom: 7rem; }
  .md\:flex-row { flex-direction: row; }
  .md\:text-4xl { font-size: 2.25rem; }
  .md\:text-5xl { font-size: 3rem; }
  .md\:text-6xl { font-size: 3.75rem; }
  .md\:w-auto { width: auto; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:gap-12 { gap: 3rem; }
  .md\:-translate-y-4 { transform: translateY(-1rem); }
  .md\:flex-row { flex-direction: row; }
}
@media (min-width: 1024px) {
  .lg\:hidden { display: none !important; }
  .lg\:flex   { display: flex  !important; }
  .lg\:block  { display: block !important; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:col-span-1 { grid-column: span 1; }
  .lg\:gap-12  { gap: 3rem; }
  .lg\:items-center { align-items: center; }
  .lg\:order-last { order: 9999; }
}
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-end { align-items: flex-end; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:gap-3   { gap: 0.75rem; }
  .sm\:inline  { display: inline; }
  .sm\:text-5xl { font-size: 3rem; }
  .sm\:hidden  { display: none; }
}