/* strecker.css — outdoor-pro design system.
 *
 * Audience: hunters and landowners. Not naturalists, not analysts,
 * not operators. People who are outside and who run cameras because
 * they want to know what's walking their ground. The visual
 * language borrows from outdoor sporting catalogs (Filson, Sitka,
 * Field & Stream) — big photography, warm earth palette, condensed
 * sporting display type, plainspoken copy.
 *
 * Scoped to body.strecker. Nothing here leaks to basal.eco.
 */

body.strecker {
  /* Dark-native palette. Strecker has no light mode. */
  --s-bg:       #121110;  /* page base — deepest */
  --s-surface:  #1c1b18;  /* section surface */
  --s-card:     #26241f;  /* card on surface */
  --s-card-up:  #302d27;  /* card hover / elevated */
  --s-rule:     #3a3730;  /* hairline on dark */
  --s-rule-up:  #4e4a40;

  --s-ink:      #f3ede0;  /* primary text — warm bone */
  --s-ink-soft: #d8cfb9;  /* secondary */
  --s-ink-mute: #9a9077;  /* tertiary / metadata */
  --s-kraft:    #d4b87a;  /* warm tan accent, brighter than before */

  /* Accents — earthy, restrained */
  --s-moss:     #4e6639;  /* deep pine/olive — primary action */
  --s-moss-up:  #63814a;
  --s-clay:     #c0551f;  /* iron oxide — blaze-adjacent accent */
  --s-clay-up:  #d76329;
  --s-brass:    #c89a3a;  /* warm metal — tertiary */

  /* Type */
  --s-disp: "Oswald", "Archivo Narrow", "Impact", "Helvetica Neue", sans-serif;
  --s-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --s-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  background: var(--s-bg) !important;
  color: var(--s-ink);
  font-family: var(--s-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide the dark-mode toggle on Strecker — there is no light mode. */
body.strecker #dark-toggle,
body.strecker button[title="Toggle dark mode"] { display: none !important; }

/* ──────────────────────────────────────────────────────────────
 * Tailwind-class overrides — make the shared chrome (header/
 * footer in base.html) match the Strecker look without touching
 * Basal's copy.
 * ────────────────────────────────────────────────────────────── */

body.strecker header {
  background: #0a0908 !important;
  border-bottom: 1px solid #000 !important;
}
body.strecker header a,
body.strecker header button,
body.strecker header nav a {
  color: var(--s-ink) !important;
  font-family: var(--s-disp);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
body.strecker header nav a:hover { color: var(--s-kraft) !important; }
body.strecker header a.text-xl {
  font-family: var(--s-disp);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 22px;
  color: var(--s-ink) !important;
}

body.strecker footer {
  background: #0a0908;
  color: var(--s-kraft);
  border-top: none !important;
}
body.strecker footer * {
  color: var(--s-kraft) !important;
  font-family: var(--s-disp);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px !important;
}

/* Home hero needs to escape main's Tailwind padding/max-width
   without affecting other pages. The home template applies the
   .h-fullbleed class to its root div. */
body.strecker .h-fullbleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -32px;   /* cancel main's py-8 top */
  margin-bottom: -32px;
}

/* Form inputs — underline-style, no boxed fields */
body.strecker input[type="text"],
body.strecker input[type="email"],
body.strecker input[type="password"],
body.strecker input[type="number"],
body.strecker input[type="search"],
body.strecker input[type="url"],
body.strecker input[type="tel"],
body.strecker input[type="date"],
body.strecker textarea,
body.strecker select {
  background: var(--s-card) !important;
  border: 1px solid var(--s-rule) !important;
  color: var(--s-ink) !important;
  border-radius: 2px;
  font-family: var(--s-sans);
  padding: 10px 12px;
}
body.strecker input:focus,
body.strecker textarea:focus,
body.strecker select:focus {
  outline: none;
  border-color: var(--s-moss) !important;
  box-shadow: 0 0 0 2px rgba(58,74,45,0.15);
}

/* ──────────────────────────────────────────────────────────────
 * Shared building blocks usable by non-home pages
 * ────────────────────────────────────────────────────────────── */

body.strecker h1, body.strecker h2, body.strecker h3 {
  font-family: var(--s-disp);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--s-ink);
}

body.strecker a { color: var(--s-kraft); text-decoration: underline; text-underline-offset: 3px; }
body.strecker a:hover { color: var(--s-clay-up); }

/* Anchors that are skinned as buttons (have a background utility) should
   not get the plain-link underline treatment. */
body.strecker a[class*="bg-teal"],
body.strecker a[class*="bg-gray"],
body.strecker a[class*="border-teal"],
body.strecker a.s-btn,
body.strecker button { text-decoration: none; }

/* ──────────────────────────────────────────────────────────────
 * Tailwind utility re-skins — map teal-branded pieces from the
 * dashboard / shared templates into the Strecker warm palette.
 * ────────────────────────────────────────────────────────────── */

/* Teal → moss (primary action) */
body.strecker .bg-teal-600 { background-color: var(--s-moss) !important; }
body.strecker .bg-teal-700,
body.strecker .hover\:bg-teal-700:hover { background-color: var(--s-moss-up) !important; }
body.strecker .border-teal-600,
body.strecker .border-teal-500 { border-color: var(--s-kraft) !important; }
body.strecker .text-teal-600,
body.strecker .text-teal-400,
body.strecker .hover\:text-teal-600:hover,
body.strecker .hover\:text-teal-700:hover { color: var(--s-kraft) !important; }
body.strecker .focus\:ring-teal-500:focus { --tw-ring-color: var(--s-kraft) !important; }
body.strecker .hover\:bg-teal-50:hover,
body.strecker .dark\:hover\:bg-gray-700:hover { background-color: var(--s-card-up) !important; }

/* Ensure any element with a teal background text reads white */
body.strecker .bg-teal-600, body.strecker .bg-teal-700 { color: #fff !important; }
body.strecker .bg-teal-600 *, body.strecker .bg-teal-700 * { color: #fff !important; }

/* Card/surface defaults */
body.strecker .bg-white { background-color: var(--s-surface) !important; }
body.strecker .dark\:bg-gray-800 { background-color: var(--s-card) !important; }
body.strecker .dark\:bg-gray-900 { background-color: var(--s-bg) !important; }
body.strecker .border-gray-200,
body.strecker .dark\:border-gray-700 { border-color: var(--s-rule) !important; }
body.strecker .bg-gray-100,
body.strecker .dark\:bg-gray-700 { background-color: var(--s-card) !important; }

/* Text utilities remap to warm ink tones */
body.strecker .text-slate-700,
body.strecker .text-gray-900,
body.strecker .dark\:text-gray-100,
body.strecker .dark\:text-white { color: var(--s-ink) !important; }
body.strecker .text-slate-500,
body.strecker .text-gray-500,
body.strecker .text-gray-600,
body.strecker .text-slate-600,
body.strecker .dark\:text-gray-300,
body.strecker .dark\:text-gray-400 { color: var(--s-ink-soft) !important; }
body.strecker .text-slate-400,
body.strecker .text-gray-400 { color: var(--s-ink-mute) !important; }

/* Dashboard page H1 / property name — make it match the hero voice */
body.strecker h1.text-2xl {
  font-family: var(--s-disp);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 34px !important;
  line-height: 1.02;
  color: #fff !important;
}

/* Tighten Tailwind's bubbly rounded corners for a less SaaS feel */
body.strecker .rounded-xl { border-radius: 4px !important; }
body.strecker .rounded-lg { border-radius: 3px !important; }

/* Dashboard primary-action buttons — moss, uppercase, sporting */
body.strecker .bg-teal-600 {
  font-family: var(--s-disp);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600 !important;
}

/* Outlined "My Deer" / secondary actions */
body.strecker .border-teal-600,
body.strecker .border-teal-500 {
  font-family: var(--s-disp);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600 !important;
  border-width: 1px !important;
}

/* Season select etc. */
body.strecker select {
  font-family: var(--s-disp);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  font-size: 13px;
}

/* Legible badges in species cards */
body.strecker .pattern-nocturnal { background: #1c1b18 !important; color: var(--s-kraft) !important; border: 1px solid var(--s-rule); }
body.strecker .pattern-diurnal   { background: #3a2c18 !important; color: var(--s-kraft) !important; }
body.strecker .pattern-crepuscular { background: #2a1f32 !important; color: #caa2d8 !important; }

body.strecker .s-btn {
  display: inline-block;
  font-family: var(--s-disp);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
  padding: 14px 26px;
  background: var(--s-moss);
  color: #fff !important;
  border: 1px solid var(--s-moss);
  text-decoration: none;
  transition: background 0.15s;
}
body.strecker .s-btn:hover { background: var(--s-moss-up); color: var(--s-ink-inv) !important; }

body.strecker .s-btn--ghost {
  background: transparent;
  color: var(--s-ink) !important;
  border-color: var(--s-ink);
}
body.strecker .s-btn--ghost:hover { background: var(--s-ink); color: var(--s-ink-inv) !important; }

body.strecker .s-btn--blaze {
  background: var(--s-clay);
  border-color: var(--s-clay);
}
body.strecker .s-btn--blaze:hover { background: #b3572d; border-color: #b3572d; }

/* Section rules */
body.strecker .s-kicker {
  font-family: var(--s-disp);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: var(--s-clay);
}