/* ========================================
   BioBrassica — Core Styles & Polish
   Tailwind CDN handles utility classes.
   This file handles fonts, typography,
   prose, SVG filters, navbar logo, and
   global conventions the CDN cannot provide.
   ======================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/lora-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lora-latin-italic.woff2") format("woff2");
}

/* ---------- Global ---------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background-color: #FBF9F6;
  color: #2C3F2D;
  font-weight: 300;
}

h1, h2, h3, h4 {
  font-family: "Lora", serif;
}

/* ---------- Navbar logo sizing ---------- */
#site-header nav > a img,
#site-header .bb-nav-logo {
  display: block;
  height: 52px !important;
  max-height: 52px !important;
  width: auto !important;
  max-width: 210px !important;
  object-fit: contain !important;
}

@media (max-width: 640px) {
  #site-header nav > a img,
  #site-header .bb-nav-logo {
    height: 42px !important;
    max-height: 42px !important;
    max-width: 170px !important;
  }
}

/* ---------- Prose content (blog, recipes, etc.) ---------- */
.prose h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: #2C3F2D;
  font-family: "Lora", serif;
  font-size: 1.5rem;
  line-height: 2rem;
}

.prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: #2C3F2D;
  font-family: "Lora", serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.prose p,
.prose ul,
.prose ol {
  margin-bottom: 1rem;
  color: #6B6B6B;
  line-height: 1.625;
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
}

.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }

.prose a {
  color: #2C3F2D;
  text-decoration: underline;
  transition: color 150ms ease;
}

.prose a:hover {
  color: #566557;
}

.prose img {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
}

.prose blockquote {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid #D1D1CC;
  padding-left: 1rem;
  color: #6B6B6B;
  font-style: italic;
}

/* ---------- SVG filters ---------- */
.svg-filter-hero {
  filter: brightness(0) saturate(100%) invert(49%) sepia(12%) saturate(643%) hue-rotate(73deg) brightness(95%) contrast(90%);
}

.svg-filter-cta {
  filter: brightness(0) saturate(100%) invert(18%) sepia(13%) saturate(1065%) hue-rotate(74deg) brightness(92%) contrast(93%);
}

/* ---------- Form / input refinements ---------- */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  -webkit-appearance: none;
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* ---------- Button styling: rounded, consistent ---------- */
/* Primary action buttons */
a[class*="bg-forest"],
a[class*="bg-paper"],
a[class*="bg-terracotta"],
button[class*="bg-forest"],
button[class*="bg-paper"],
button[class*="bg-terracotta"],
a[type="submit"],
button[type="submit"] {
  border-radius: 0.75rem !important;
}

/* Form inputs: slightly rounder than default */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
  border-radius: 0.5rem !important;
}

/* ---------- JS cloak ---------- */
[x-cloak] { display: none !important; }

/* ---------- Custom utility classes (not auto-generated by CDN) ---------- */
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }

.aspect-4\/3 { aspect-ratio: 4 / 3; }
.aspect-3\/4 { aspect-ratio: 3 / 4; }
.aspect-4\/5 { aspect-ratio: 4 / 5; }
.aspect-video { aspect-ratio: 16 / 9; }
.min-h-\[70vh\] { min-height: 70vh; }
.text-\[10px\] { font-size: 10px; }
.py-3\.5 { padding-top: .875rem; padding-bottom: .875rem; }

.opacity-\[0\.16\] { opacity: 0.16; }
.opacity-\[0\.18\] { opacity: 0.18; }
.opacity-\[0\.19\] { opacity: 0.19; }
.opacity-\[0\.20\] { opacity: 0.20; }
.opacity-\[0\.21\] { opacity: 0.21; }
.opacity-\[0\.22\] { opacity: 0.22; }

.top-\[6\%\] { top: 6%; } .top-\[8\%\] { top: 8%; }
.top-\[11\%\] { top: 11%; } .top-\[13\%\] { top: 13%; }
.top-\[27\%\] { top: 27%; } .top-\[36\%\] { top: 36%; }
.top-\[43\%\] { top: 43%; } .top-\[52\%\] { top: 52%; }
.top-\[53\%\] { top: 53%; } .top-\[60\%\] { top: 60%; }
.top-\[74\%\] { top: 74%; } .top-\[77\%\] { top: 77%; }
.top-\[78\%\] { top: 78%; } .top-\[82\%\] { top: 82%; }
.left-\[9\%\] { left: 9%; } .left-\[10\%\] { left: 10%; }
.left-\[14\%\] { left: 14%; } .left-\[15\%\] { left: 15%; }
.left-\[81\%\] { left: 81%; } .left-\[82\%\] { left: 82%; }
.left-\[83\%\] { left: 83%; } .left-\[85\%\] { left: 85%; }
.left-\[87\%\] { left: 87%; }

.tracking-\[0\.14em\] { letter-spacing: 0.14em; }
.tracking-\[0\.18em\] { letter-spacing: 0.18em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[0\.22em\] { letter-spacing: 0.22em; }
.tracking-\[0\.3em\] { letter-spacing: 0.3em; }

.max-w-384 { max-width: 96rem; }

/* Hover utilities */
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }

/* Radial gradient for shop hero */
.bg-\[radial-gradient\(circle_at_30\%_50\%\,rgba\(255\,255\,255\,0\.1\)\,transparent_60\%\)\] {
  background-image: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1), transparent 60%);
}