/* Design Tokens and Base Styles for Livestock Technologies
   This file defines CSS variables referenced across the legacy CSS and
   provides a consistent visual foundation. It also normalizes base elements.
   Served from /static via Vite publicDir config.
*/

/* 1) Root tokens */
:root {
  /* Brand palette */
  --primitives-color-fern-frond: #40722b; /* Primary brand green */
  --primitives-color-fern-frond-600: #335b22;
  --primitives-color-fern-frond-500: #3a6726;
  --primitives-color-fern-frond-400: #4a7c59;

  --primitives-color-metallic-bronze-light: #c3a878; /* Supporting bronze */
  --primitives-color-black-lighter: #1f1f1f; /* Dark section bg */
  --primitives-color-neutral-darkest: #1a1a1a;
  --primitives-color-neutral-darker: #2b2b2b;
  --primitives-color-neutral-dark: #3f3f3f;
  --primitives-color-neutral: #666666;
  --primitives-color-neutral-light: #999999;
  --primitives-color-neutral-lighter: #e5e5e5;
  --primitives-color-neutral-lightest: #f5f5f5;

  --primitives-opacity-transparent: rgba(0, 0, 0, 0);

  /* Color scheme 1 (light) */
  --color-schemes-color-scheme-1-background: #faf6eb; /* Warm background */
  --color-schemes-color-scheme-1-text: #213547; /* Readable dark text */

  /* Typography (Heebo / Archivo from index.html Google Fonts import) */
  --heading-h1-font-family: "Archivo", system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --heading-h1-font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  --heading-h1-font-weight: 700;
  --heading-h1-letter-spacing: -0.02em;
  --heading-h1-line-height: 1.12;
  --heading-h1-font-style: normal;

  --heading-h2-font-family: var(--heading-h1-font-family);
  --heading-h2-font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
  --heading-h2-font-weight: 700;
  --heading-h2-letter-spacing: -0.015em;
  --heading-h2-line-height: 1.15;
  --heading-h2-font-style: normal;

  --heading-h3-font-family: var(--heading-h1-font-family);
  --heading-h3-font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --heading-h3-font-weight: 700;
  --heading-h3-letter-spacing: -0.01em;
  --heading-h3-line-height: 1.2;
  --heading-h3-font-style: normal;

  --heading-h4-font-family: var(--heading-h1-font-family);
  --heading-h4-font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --heading-h4-font-weight: 700;
  --heading-h4-letter-spacing: -0.005em;
  --heading-h4-line-height: 1.25;
  --heading-h4-font-style: normal;

  --heading-h5-font-family: var(--heading-h1-font-family);
  --heading-h5-font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --heading-h5-font-weight: 700;
  --heading-h5-letter-spacing: 0;
  --heading-h5-line-height: 1.3;
  --heading-h5-font-style: normal;

  --heading-h6-font-family: var(--heading-h1-font-family);
  --heading-h6-font-size: 1rem;
  --heading-h6-font-weight: 700;
  --heading-h6-letter-spacing: 0;
  --heading-h6-line-height: 1.35;
  --heading-h6-font-style: normal;

  --heading-tagline-font-family: "Heebo", system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --heading-tagline-font-size: 0.875rem;
  --heading-tagline-font-weight: 600;
  --heading-tagline-letter-spacing: 0.08em;
  --heading-tagline-line-height: 1;
  --heading-tagline-font-style: normal;

  --text-regular-normal-font-family: "Heebo", system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --text-regular-normal-font-size: 1rem;
  --text-regular-normal-font-weight: 400;
  --text-regular-normal-letter-spacing: 0;
  --text-regular-normal-line-height: 1.6;
  --text-regular-normal-font-style: normal;

  --text-regular-medium-font-family: var(--text-regular-normal-font-family);
  --text-regular-medium-font-size: 1rem;
  --text-regular-medium-font-weight: 600;
  --text-regular-medium-letter-spacing: 0.01em;
  --text-regular-medium-line-height: 1.5;
  --text-regular-medium-font-style: normal;

  --text-regular-link-font-family: var(--text-regular-normal-font-family);
  --text-regular-link-font-size: 1rem;
  --text-regular-link-font-weight: 600;
  --text-regular-link-letter-spacing: 0.01em;
  --text-regular-link-line-height: 1.5;
  --text-regular-link-font-style: normal;

  --text-small-semi-bold-font-family: var(--text-regular-normal-font-family);
  --text-small-semi-bold-font-size: 0.875rem;
  --text-small-semi-bold-font-weight: 600;
  --text-small-semi-bold-letter-spacing: 0.01em;
  --text-small-semi-bold-line-height: 1.4;
  --text-small-semi-bold-font-style: normal;

  --text-small-link-font-family: var(--text-regular-normal-font-family);
  --text-small-link-font-size: 0.875rem;
  --text-small-link-font-weight: 600;
  --text-small-link-letter-spacing: 0.01em;
  --text-small-link-line-height: 1.4;
  --text-small-link-font-style: normal;

  --text-small-normal-font-family: var(--text-regular-normal-font-family);
  --text-small-normal-font-size: 0.875rem;
  --text-small-normal-font-weight: 400;
  --text-small-normal-letter-spacing: 0;
  --text-small-normal-line-height: 1.4;
  --text-small-normal-font-style: normal;

  --text-medium-normal-font-family: var(--text-regular-normal-font-family);
  --text-medium-normal-font-size: 1.125rem;
  --text-medium-normal-font-weight: 400;
  --text-medium-normal-letter-spacing: 0;
  --text-medium-normal-line-height: 1.6;
  --text-medium-normal-font-style: normal;

  --single-line-body-base-font-family: var(--text-regular-normal-font-family);
  --single-line-body-base-font-size: 1rem;
  --single-line-body-base-font-weight: 600;
  --single-line-body-base-letter-spacing: 0.01em;
  --single-line-body-base-line-height: 1;

  /* Spacing scales (section/page/container) */
  --spacing-sizing-page-padding-padding-global: clamp(16px, 2vw, 40px);
  --spacing-sizing-section-padding-padding-section-large: clamp(
    48px,
    6vw,
    96px
  );
  --spacing-sizing-section-padding-padding-section-medium: clamp(
    32px,
    4vw,
    64px
  );
  --spacing-sizing-container-container-large: min(1200px, 100%);
  --spacing-sizing-max-width-max-width-large: min(800px, 100%);

  /* Radii */
  --size-radius-200: 12px;

  /* Elevation */
  --elevation-soft: 0 1px 2px rgba(0, 0, 0, 0.06);
  --elevation-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
  --elevation-strong: 0 10px 24px rgba(0, 0, 0, 0.12);

  /* Helpful semantic tokens */
  --color-text-default-default: var(--color-schemes-color-scheme-1-text);
  --color-text-brand-on-brand-secondary: #ffffff;
}

/* 2) Base reset adjustments (complementing meyer-reset from index.html) */
html,
body {
  background: var(--color-schemes-color-scheme-1-background);
  color: var(--color-schemes-color-scheme-1-text);
  font-family: var(--text-regular-normal-font-family);
  font-size: 16px;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* 3) Buttons baseline */
.button,
button,
[role="button"] {
  cursor: pointer;
}

.btn-primary {
  background: var(--primitives-color-fern-frond);
  color: #faf6eb;
  border-radius: var(--size-radius-200);
  padding: 10px 20px;
  box-shadow: 0px 1px 2px #0000000d, inset 0px -2px 1px #00000033,
    inset 0px 0px 0px 1px #00000026, inset 0px 2px 1px #ffffff40,
    inset 0px 32px 24px #ffffff0d;
  transition: transform 0.06s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary:hover {
  background: var(--primitives-color-fern-frond-500);
}

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: var(--elevation-soft);
}

/* 4) Utility helpers for layout consistency (non-Tailwind, legacy-friendly) */
.container-lg {
  width: 100%;
  max-width: var(--spacing-sizing-container-container-large);
  margin-inline: auto;
  padding-inline: var(--spacing-sizing-page-padding-padding-global);
}

.section {
  padding-block: var(--spacing-sizing-section-padding-padding-section-large);
}

.section--medium {
  padding-block: var(--spacing-sizing-section-padding-padding-section-medium);
}

.text-center {
  text-align: center;
}
.text-balance {
  text-wrap: balance;
}
.text-pretty {
  text-wrap: pretty;
}

/* 5) Header/Footer defaults */
.site-header,
.site-footer {
  background: var(--color-schemes-color-scheme-1-background);
  color: var(--color-schemes-color-scheme-1-text);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--primitives-color-neutral-lighter);
  backdrop-filter: saturate(180%) blur(6px);
}

.site-footer {
  border-top: 1px solid var(--primitives-color-neutral-lighter);
}

/* 6) Image defaults */
img {
  max-width: 100%;
  height: auto;
}

/* 7) Link styles for header/footer navs */
.nav-link {
  font-family: var(--text-regular-normal-font-family);
  font-size: var(--text-regular-link-font-size, 1rem);
  font-weight: var(--text-regular-link-font-weight);
  line-height: var(--text-regular-link-line-height);
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
  color: var(--primitives-color-fern-frond);
  background: rgba(64, 114, 43, 0.08);
}

/* 8) Card surface */
.surface {
  background: white;
  border: 1px solid #00000014;
  border-radius: 16px;
  box-shadow: var(--elevation-medium);
}

/* 9) Media queries for legacy fixed sections to improve responsiveness a bit */
@media (max-width: 1440px) {
  /* Legacy sections use fixed width: 1440px; help them be responsive */
  .home-desktop .navbar-7,
  .home-desktop .header-4,
  .home-desktop .layout-4,
  .home-desktop .layout-5,
  .home-desktop .layout-6,
  .home-desktop .layout-7,
  .home-desktop .layout-8,
  .home-desktop .layout-9,
  .home-desktop .CTA-2,
  .home-desktop .footer-7 {
    width: 100% !important;
    left: 0 !important;
  }

  /* Our Technology */
  .our-technology .navbar-6,
  .our-technology .container-wrapper-5,
  .our-technology .footer-6 {
    width: 100% !important;
    left: 0 !important;
  }

  /* Continuous Pen */
  .continuous-pen .navbar-5,
  .continuous-pen .container-wrapper-4 {
    width: 100% !important;
    left: 0 !important;
  }

  /* Individual Feed */
  .individual-feed .navbar,
  .individual-feed .container-wrapper,
  .individual-feed .layout {
    width: 100% !important;
    left: 0 !important;
  }

  /* Cow Nose ID */
  .cow-nose-ID-desktop .navbar-3,
  .cow-nose-ID-desktop .container-wrapper-2,
  .cow-nose-ID-desktop .footer-3 {
    width: 100% !important;
    left: 0 !important;
  }

  /* For Investors */
  .for-investors .navbar-4,
  .for-investors .container-wrapper-3,
  .for-investors .layout-3,
  .for-investors .footer-4 {
    width: 100% !important;
    left: 0 !important;
  }

  /* Contact page */
  .contact-us-desktop .header,
  .contact-us-desktop .contact,
  .contact-us-desktop .footer-2 {
    width: 100% !important;
    left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Generic, branded FAQ styles usable on any page */
.faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .faq-list {
    grid-template-columns: 1fr 1fr;
  }
}

.faq-list details {
  background: #ffffff;
  border: 1px solid #00000014;
  border-radius: 12px;
  box-shadow: var(--elevation-soft);
  padding: 14px 16px;
}

.faq-list details[open] {
  box-shadow: var(--elevation-medium);
}

.faq-list summary {
  font-family: var(--text-regular-medium-font-family);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-schemes-color-scheme-1-text);
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list details p {
  margin: 10px 0 0 0;
  line-height: 1.6;
}

/* Responsive auto-layout overrides for legacy fixed rows/columns */
@media (max-width: 1024px) {
  .component-16,
  .component-14,
  .component-15,
  .component-11,
  .component-12,
  .component-5,
  .component-6,
  .component-7,
  .component-8,
  .component-9,
  .content-18,
  .content-19,
  .content-20,
  .content-21,
  .content-22,
  .content-23,
  .content-24,
  .content-25,
  .content-26 {
    flex-direction: column !important;
    gap: 32px !important;
    height: auto !important;
  }

  .row-18,
  .row-19,
  .row-13,
  .row-2,
  .row-3,
  .row-7,
  .row-10,
  .row-11,
  .row-12,
  .row-14,
  .row-15,
  .row-16 {
    flex-direction: column !important;
    gap: 24px !important;
    height: auto !important;
  }

  /* Make prominent images scale within their containers */
  .img-8,
  .placeholder-image-16,
  .placeholder-image-17,
  .placeholder-image-18,
  .placeholder-image-10,
  .placeholder-image-11,
  .placeholder-image-12,
  .placeholder-image-13,
  .placeholder-image-14,
  .placeholder-image-15,
  .placeholder-image,
  .placeholder-image-2,
  .placeholder-image-3,
  .placeholder-image-4,
  .placeholder-image-5,
  .placeholder-image-6,
  .placeholder-image-7,
  .placeholder-image-8,
  .placeholder-image-9 {
    width: 100% !important;
    height: auto !important;
  }
}

/* Mobile comfort tweaks */
@media (max-width: 640px) {
  .container-lg { padding-inline: 16px !important; }
  .section { padding-block: clamp(24px, 8vw, 40px) !important; }
  .faq-list { grid-template-columns: 1fr !important; }
  .site-header .navbar { padding-block: 8px !important; }
  .nav-link { padding: 8px 10px !important; }
  .btn { padding: 10px 16px !important; }
}

/* 10) Accessibility helpers */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip link visible on focus */
.skip-link:focus {
  position: fixed !important;
  left: 16px !important;
  top: 16px !important;
  width: auto !important;
  height: auto !important;
  padding: 10px 14px !important;
  background: #1f2937 !important; /* dark */
  color: #fff !important;
  border-radius: 8px !important;
  z-index: 1000 !important;
}

/* 11) Subtle link underline utilities for content blocks */
.link-underline {
  text-decoration: underline;
  text-decoration-color: rgba(64, 114, 43, 0.6);
  text-underline-offset: 3px;
}

.link-underline:hover {
  text-decoration-color: rgba(64, 114, 43, 0.9);
}

/* 12) Divider helper */
.hr-soft {
  border: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 0.12),
    transparent
  );
}

/* 13) Legacy class compatibility tweaks (safe no-ops if unused) */
.title-3,
.title-4 {
  font-family: var(--single-line-body-base-font-family);
  font-size: var(--single-line-body-base-font-size);
  font-weight: var(--single-line-body-base-font-weight);
  letter-spacing: var(--single-line-body-base-letter-spacing);
  line-height: var(--single-line-body-base-line-height);
}

.title-4 {
  color: var(--color-text-brand-on-brand-secondary);
}

/* End of tokens */

/* 14) Hide legacy per-page headers/footers now that global components exist */
.home-desktop .navbar-7,
.our-technology .navbar-6,
.cow-nose-ID-desktop .navbar-3,
.individual-feed .navbar,
.continuous-pen .navbar-5,
.for-investors .navbar-4,
.contact-us-desktop .navbar-2,
.home-desktop .footer-7,
.our-technology .footer-6,
.cow-nose-ID-desktop .footer-3,
.individual-feed .footer,
.continuous-pen .footer-5,
.for-investors .footer-4,
.contact-us-desktop .footer-2 {
  display: none !important;
}

/* Defensive hide in case class numbers change */
.home-desktop [class^="navbar-"],
.our-technology [class^="navbar-"],
.cow-nose-ID-desktop [class^="navbar-"],
.individual-feed [class^="navbar-"],
.continuous-pen [class^="navbar-"],
.for-investors [class^="navbar-"],
.contact-us-desktop [class^="navbar-"],
.home-desktop [class^="footer-"],
.our-technology [class^="footer-"],
.cow-nose-ID-desktop [class^="footer-"],
.individual-feed [class^="footer-"],
.continuous-pen [class^="footer-"],
.for-investors [class^="footer-"],
.contact-us-desktop [class^="footer-"] {
  display: none !important;
}