/* ===================================================================
   Everyday Aquaponics — Main CSS
   Variables · Reset · Typography · Utilities
   =================================================================== */

:root {
  --color-primary:       #1a4a3a;
  --color-primary-light: #2d6b55;
  --color-accent:        #c8842a;
  --color-accent-light:  #e8a84a;
  --color-bg:            #f8f5f0;
  --color-bg-dark:       #1c2420;
  --color-text:          #2a2a2a;
  --color-text-muted:    #6b7069;
  --color-border:        #d8d4cc;
  --color-white:         #ffffff;
  --color-green-pale:    #edf6f0;
  --color-amber-pale:    #fdf4e7;

  --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius-sm:   0.25rem;
  --radius:      0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
  --shadow:    0 4px 12px rgba(0,0,0,0.09);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.11);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.14);

  --container-max:    1200px;
  --container-narrow: 780px;
  --container-wide:   1400px;
  --header-height:    72px;
  --transition:       0.2s ease;
}

/* -----------------------------------------------------------------------
   Reset
----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text);
  background: var(--color-bg);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-accent); }
ul, ol { padding-left: var(--space-6); }
input, textarea, select, button { font-family: inherit; font-size: inherit; }

/* -----------------------------------------------------------------------
   Typography
----------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.3;
  color: var(--color-text);
  font-weight: 700;
}
h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl),  2.5vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl); }
p + p { margin-top: var(--space-4); }
.lead { font-size: var(--text-lg); color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--space-8); }

/* -----------------------------------------------------------------------
   Layout
----------------------------------------------------------------------- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
.content-layout--narrow { max-width: var(--container-narrow); margin: 0 auto; }
.content-layout--wide   { max-width: var(--container-wide);   margin: 0 auto; }
.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; padding-top: var(--header-height); }
.skip-link { position: absolute; top: -100px; left: 1rem; padding: 0.5rem 1rem; background: var(--color-primary); color: #fff; border-radius: var(--radius); z-index: 9999; transition: top var(--transition); }
.skip-link:focus { top: 1rem; }

.section { padding: var(--space-16) 0; }
.section-header { margin-bottom: var(--space-10); }
.section-header--center { text-align: center; }
.section-header--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.section-eyebrow { display: inline-block; font-size: var(--text-sm); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-3); font-family: var(--font-body); }
.section-title { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); margin-bottom: var(--space-4); }
.section-subtitle { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 620px; }

/* -----------------------------------------------------------------------
   Buttons
----------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1.4;
}
.btn--primary      { background: var(--color-primary);      color: #fff; border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-light); border-color: var(--color-primary-light); color: #fff; }
.btn--accent       { background: var(--color-accent);       color: #fff; border-color: var(--color-accent); }
.btn--accent:hover  { background: var(--color-accent-light); border-color: var(--color-accent-light); color: #fff; }
.btn--outline      { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn--outline-light:hover { background: #fff; color: var(--color-primary); }
.btn--lg  { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }
.btn--sm  { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--full { width: 100%; justify-content: center; }

/* -----------------------------------------------------------------------
   Screen Reader / Accessibility
----------------------------------------------------------------------- */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }

/* -----------------------------------------------------------------------
   Utilities
----------------------------------------------------------------------- */
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.mt-auto { margin-top: auto; }