/* css/base.css — HBS Farm Global Styles */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-cream);
  padding-top: var(--nav-height);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  color: var(--color-primary);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

@media (min-width: 768px) {
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
}

@media (min-width: 1024px) {
  h1 { font-size: var(--text-6xl); }
}

p { line-height: var(--leading-loose); margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-primary); transition: color var(--transition); }
a:hover { color: var(--color-warm); }

strong { font-weight: 700; }
em { font-style: italic; }

/* ── Layout Containers ──────────────────────────────── */
.hbs-container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.hbs-container--sm {
  max-width: var(--max-width-sm);
}

/* ── Sections ───────────────────────────────────────── */
.hbs-section {
  padding-block: var(--section-pad-mob);
}
@media (min-width: 768px) {
  .hbs-section {
    padding-block: var(--section-pad-v);
  }
}

.hbs-section--cream   { background: var(--color-cream); }
.hbs-section--sand    { background: var(--color-sand); }
.hbs-section--white   { background: var(--color-white); }
.hbs-section--primary { background: var(--color-primary); }
.hbs-section--green-light { background: #EBF2E3; }

.hbs-section__eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  color: var(--color-wine);
  display: block;
  margin-bottom: var(--space-3);
  letter-spacing: 0.02em;
}

.hbs-section__title {
  font-family: var(--font-display);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.hbs-section--primary .hbs-section__title,
.hbs-section--primary .hbs-section__sub,
.hbs-section--primary p {
  color: var(--color-white);
}

.hbs-section__sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 600px;
  line-height: var(--leading-loose);
  margin-inline: auto;
}

.hbs-section__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

/* ── Divider ─────────────────────────────────────────── */
.hbs-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  border: none;
  margin: 0;
}

/* ── Scroll Animation ───────────────────────────────── */
.hbs-animate {
  opacity: 1;
  transform: none;
}
.hbs-animate.is-visible {
  opacity: 1;
  transform: none;
}
.hbs-animate--delay-1 { transition-delay: 0.1s; }
.hbs-animate--delay-2 { transition-delay: 0.2s; }
.hbs-animate--delay-3 { transition-delay: 0.3s; }
.hbs-animate--delay-4 { transition-delay: 0.4s; }

/* ── Utility ─────────────────────────────────────────── */
.text-center { text-align: center; }
.text-white  { color: var(--color-white) !important; }
.text-muted  { color: var(--color-text-muted); }
.font-accent { font-family: var(--font-accent); }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ── Flower Watercolor Accents ───────────────────────── */
.hbs-flower-border {
  width: 100%;
  max-width: 600px;
  display: block;
  margin-inline: auto;
  pointer-events: none;
}
.hbs-flower-wreath {
  width: 220px;
  height: 220px;
  object-fit: contain;
  pointer-events: none;
}