/* ==========================================================================
   POTCH LAYING HENS — stylesheet
   Apple Human Interface Guidelines (HIG) Updated Version
   ========================================================================== */

:root {
  /* --- Apple HIG Palette (Dark Mode) --- */
  --bg-app: #0B0C0E;
  --bg-panel: #1C1C1E;
  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.55);
  --accent: #0A84FF; /* Apple Blue */
  --border: 1px solid rgba(255, 255, 255, 0.08);

  /* --- Type --- */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", sans-serif;
  --mono: "SF Mono", monospace;

  /* --- Geometry --- */
  --radius-window: 20px;
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-badge: 9999px;

  /* --- Motion --- */
  --transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --press: scale(0.98);

  /* --- Layout --- */
  --header-h: 64px;
}

html {
  font-family: var(--sans);
  font-size: 62.5%; /* Keeps 1rem = 10px */
  background: var(--bg-app);
  color: var(--text-primary);
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: -0.02em; /* Tight tracking */
}

h1, h2, h3, h4 {
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
}

a { color: var(--accent); }

/* Apply blur to elevated panels/nav */
.site-header, .breed-card, .enquiry, .batch, .faq details {
  backdrop-filter: blur(20px) saturate(180%);
  background: var(--bg-panel);
  border: var(--border);
}

.btn {
  padding: 10px 20px;
  border-radius: var(--radius-button);
  border: var(--border);
  background: var(--bg-panel);
  color: var(--text-primary);
  transition: var(--transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}

.btn:active { transform: var(--press); }

img { max-width: 100%; height: auto; border-radius: var(--radius-card); }