/*
 * Ferrotec Lifesciences — Base Stylesheet
 * Source of truth: docs/lifesciences.txt
 *
 * Breakpoints defined in specs:
 *   480px  — large smartphones (portrait)
 *   768px  — tablets (portrait)
 *   1280px — standard laptops/desktops
 *   1536px — large/wide desktop screens
 *
 * Fluid typography uses clamp() spanning 480px → 1536px.
 * Formula: slope = (max_px - min_px) / (1536 - 480) * 100  →  vw coefficient
 *          intercept = min_px - slope/100 * 480              →  converted to rem (/16)
 */

/* ============================================================
   1. GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&display=swap');


/* ============================================================
   2. DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* --- Brand colors --- */
  --ls-blue:        #0D224B;
  --ls-bright-blue: #5182E1;
  --ls-grey:        #F0F0F0;
  --ls-white:       #FFFFFF;

  /* --- Navigation colors --- */
  --ls-nav-bg:      #5182E1;
  --ls-nav-link-bg: #2259C4;
  --ls-nav-hover:   #D4E0F7;

  /* --- Font family --- */
  --ls-font: 'Roboto', sans-serif;

  /* --- Font weights --- */
  --ls-fw-regular:    400;
  --ls-fw-semibold:   600;
  --ls-fw-bold:       700;

  /* -------------------------------------------------------
     Fluid typography — clamp(min, preferred, max)
     min  = 480px spec value
     max  = 1536px spec value
     preferred = intercept(rem) + slope(vw)
     ------------------------------------------------------- */

  /* h1 — 600 weight */
  /* 480→31.5px | 1536→46px  |  slope=1.373vw  intercept=1.557rem */
  --ls-h1-size:        clamp(1.96875rem, 1.557rem + 1.373vw, 2.875rem);
  /* 480→35px   | 1536→50px  |  slope=1.420vw  intercept=1.761rem */
  --ls-h1-lh:          clamp(2.1875rem,  1.761rem + 1.420vw, 3.125rem);

  /* h1.subhead — 400 weight */
  /* 480→25.2px | 1536→36px  |  slope=1.023vw  intercept=1.268rem */
  --ls-h1-sub-size:    clamp(1.575rem,   1.268rem + 1.023vw, 2.25rem);
  /* 480→26.6px | 1536→38px  |  slope=1.080vw  intercept=1.339rem */
  --ls-h1-sub-lh:      clamp(1.6625rem,  1.339rem + 1.080vw, 2.375rem);

  /* h2 — 600 weight */
  /* 480→26.9px | 1536→37px  |  slope=0.956vw  intercept=1.394rem */
  --ls-h2-size:        clamp(1.68125rem, 1.394rem + 0.956vw, 2.3125rem);
  /* 480→28px   | 1536→40px  |  slope=1.136vw  intercept=1.409rem */
  --ls-h2-lh:          clamp(1.75rem,    1.409rem + 1.136vw, 2.5rem);

  /* h3 — 400 weight */
  /* 480→21px   | 1536→30px  |  slope=0.852vw  intercept=1.057rem */
  --ls-h3-size:        clamp(1.3125rem,  1.057rem + 0.852vw, 1.875rem);
  /* 480→23.1px | 1536→33px  |  slope=0.938vw  intercept=1.163rem */
  --ls-h3-lh:          clamp(1.44375rem, 1.163rem + 0.938vw, 2.0625rem);

  /* h4 — 700 weight */
  /* 480→18px   | 1536→24px  |  slope=0.568vw  intercept=0.955rem */
  --ls-h4-size:        clamp(1.125rem,   0.955rem + 0.568vw, 1.5rem);
  /* 480→21px   | 1536→30px  |  slope=0.852vw  intercept=1.057rem */
  --ls-h4-lh:          clamp(1.3125rem,  1.057rem + 0.852vw, 1.875rem);

  /* p — 400 weight */
  /* 480→15px   | 1536→16px  |  slope=0.095vw  intercept=0.909rem */
  --ls-p-size:         clamp(0.9375rem,  0.909rem + 0.095vw, 1rem);
  /* 480→16.8px | 1536→24px  |  slope=0.682vw  intercept=0.845rem */
  --ls-p-lh:           clamp(1.05rem,    0.845rem + 0.682vw, 1.5rem);

  /* --- Navigation typography (fixed, per specs) --- */
  --ls-nav-size:        1rem;
  --ls-nav-lh:          normal;
  --ls-drop-title-size: 1rem;
  --ls-drop-desc-size:  0.875rem;

  /* --- Button typography (fixed, per specs) --- */
  --ls-btn-size:   1rem;
  --ls-btn-lh:     1.5rem;
  --ls-btn-weight: var(--ls-fw-semibold);

  /* --- Section padding (fluid) --- */
  /* Horizontal: 480→30px | 1536→80px  |  slope=4.735vw  intercept=0.455rem */
  --ls-section-px: clamp(1.875rem, 0.455rem + 4.735vw, 5rem);
  /* Vertical:   480→30px | 1536→45px  |  slope=1.420vw  intercept=1.449rem */
  --ls-section-py: clamp(1.875rem, 1.449rem + 1.420vw, 2.8125rem);
}
.wp-block-group.ls-section {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ============================================================
   3. BASE TYPOGRAPHY
   ============================================================ */
body {
  font-family: var(--ls-font);
  font-size: var(--ls-p-size);
  font-weight: var(--ls-fw-regular);
  line-height: var(--ls-p-lh);
  color: var(--ls-blue);
}

h1 {
  font-family: var(--ls-font);
  font-size: var(--ls-h1-size);
  font-weight: var(--ls-fw-semibold);
  line-height: var(--ls-h1-lh);
}

h1.subhead,
.ls-h1-subhead {
  font-size: var(--ls-h1-sub-size);
  font-weight: var(--ls-fw-regular);
  line-height: var(--ls-h1-sub-lh);
}

h2 {
  font-family: var(--ls-font);
  font-size: var(--ls-h2-size);
  font-weight: var(--ls-fw-semibold);
  line-height: var(--ls-h2-lh);
}

h3 {
  font-family: var(--ls-font);
  font-size: var(--ls-h3-size);
  font-weight: var(--ls-fw-regular);
  line-height: var(--ls-h3-lh);
}

h4 {
  font-family: var(--ls-font);
  font-size: var(--ls-h4-size);
  font-weight: var(--ls-fw-bold);
  line-height: var(--ls-h4-lh);
}

p {
  font-size: var(--ls-p-size);
  font-weight: var(--ls-fw-regular);
  line-height: var(--ls-p-lh);
}


/* ============================================================
   4. BUTTON BASE
   ============================================================ */
.ls-btn,
.wp-block-button__link {
  font-family: var(--ls-font);
  font-size: var(--ls-btn-size);
  font-weight: var(--ls-btn-weight);
  line-height: var(--ls-btn-lh);
}

.ls-btn--primary  .wp-block-button__link,  .wp-block-button__link {
  background-color: var(--ls-bright-blue);
  color: var(--ls-white);
}

.ls-btn--secondary .wp-block-button__link {
  background-color: var(--ls-white);
  color: var(--ls-bright-blue);
}

.ls-hero-simple .wp-block-button .wp-block-button__link, .ls-hero-home .wp-block-button .wp-block-button__link {
  background-color: #FFF9F9;
}
/* ============================================================
   5. SECTION PADDING UTILITIES
   ============================================================ */

/* Full section padding (horizontal + vertical) */
.ls-section {
  padding-inline: var(--ls-section-px);
  padding-block:  var(--ls-section-py);
}

/* Horizontal padding only */
.ls-section-px {
  padding-inline: var(--ls-section-px);
}

/* Vertical padding only */
.ls-section-py {
  padding-block: var(--ls-section-py);
}

/* Full-width section wrapper (used on group blocks) */
.ls-section--full {
  width: 100%;
  box-sizing: border-box;
  padding-inline: var(--ls-section-px);
  padding-block:  var(--ls-section-py);
}

/* Dark background variant */
.ls-section--dark {
  background-color: var(--ls-blue);
  color: var(--ls-white);
}

/* Grey background variant */
.ls-section--grey {
  background-color: var(--ls-grey);
  color: var(--ls-blue);
}

/* Grey background variant */
.ls-section--blue {
  background-color: var(--ls-bright-blue);
  color: var(--ls-white);
}

/* ============================================================
   6. NAVIGATION TYPOGRAPHY
   (Variables only; nav structure is not rebuilt here)
   ============================================================ */
.ls-nav-primary {
  font-family: var(--ls-font);
  font-size: var(--ls-nav-size);
  font-weight: var(--ls-fw-regular);
  line-height: var(--ls-nav-lh);
}

.ls-nav-drop-title {
  font-family: var(--ls-font);
  font-size: var(--ls-drop-title-size);
  font-weight: var(--ls-fw-bold);
}

.ls-nav-drop-desc {
  font-family: var(--ls-font);
  font-size: var(--ls-drop-desc-size);
  font-weight: var(--ls-fw-regular);
}


/* ============================================================
   7. PATTERN — TWO-COLUMN PRODUCT OVERVIEW (layer-two-column)
   ============================================================ */

.ls-two-col__row {
  gap: 60px;
  align-items: flex-start;
}


/* ============================================================
   8. PATTERN — CTA BAND (layer-cta-band)
   ============================================================ */

/* Column gap between body copy and form card */
.ls-cta-band .ls-cta-band__row {
  gap: 40px;
  align-items: flex-start;
}

/* Frosted glass form card */
.ls-cta-band__form-card {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 30px;
}

/* Form placeholder (remove when real form is embedded) */
.ls-cta-band__form-placeholder {
  color: var(--ls-white);
  font-family: var(--ls-font, 'Roboto', sans-serif);
  font-size: var(--ls-p-size);
}


/* ============================================================
   9. PATTERN — CARDS (layer-cards)
   ============================================================ */

/* Individual card — applies to each wp:column child */
.ls-card {
  padding: 0.9375rem; /* 15px — Figma spec */
  text-align: center;
}

/* Card background variants */
.ls-card--white { background-color: var(--ls-white); }
.ls-card--grey  { background-color: var(--ls-grey); }

/* Card title (h4) — ensure bold weight & centred */
.ls-card .wp-block-heading {
  font-weight: var(--ls-fw-bold);
  text-align: center;
}

/* Card body (p) — centred */
.ls-card .wp-block-paragraph {
  text-align: center;
}

/* ≤768px — 2-column grid
   Overrides WP core's own stacking breakpoint (782px). */
@media (max-width: 768px) {
  .ls-cards .wp-block-columns {
    flex-wrap: wrap;
  }
  .ls-cards .wp-block-column {
    flex-basis: calc(50% - 0.625rem) !important; /* 50% minus half of 20px card gap */
    flex-grow: 0;
  }
}

/* ≤480px — single column */
@media (max-width: 480px) {
  .ls-cards .wp-block-column {
    flex-basis: 100% !important;
  }
}


/* ============================================================
   10. PATTERN — FEATURES ICON (layer-features-icon)
   ============================================================ */

/* Each feature row — horizontal flex: icon | text */
.ls-feature-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;                    /* 20px between icon and text */
  padding-block: 1.875rem;         /* 30px V — Figma spec */
  /* border-bottom: 1px solid var(--ls-grey); */
}

.ls-feature-row:last-child {
  border-bottom: none;
}

/* Icon slot — fixed narrow width, centred */
.ls-feature-row__icon {
  flex: 0 0 5rem;                  /* 80px fixed */
  display: flex;
  align-items: center;
  justify-content: center;
}

.ls-feature-row__icon .wp-block-image {
  margin: 0;
  width: 100%;
}

.ls-feature-row__icon .wp-block-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Text slot — grows to fill remaining width */
.ls-feature-row__text {
  flex: 1 1 0;
  min-width: 0;
}

/* ≤768px — stack icon above text */
@media (max-width: 768px) {
  .ls-feature-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .ls-feature-row__icon {
    flex: 0 0 auto;
  }
}

/* ≤480px — tighten vertical padding */
@media (max-width: 480px) {
  .ls-feature-row {
    padding-block: 1.25rem;
  }
}


/* ============================================================
   11. PATTERN — INFO LEFT (layer-info-left)
   ============================================================ */

/* Shared row styles for both info variants */
.ls-info-left__row,
.ls-info-right__row {
  gap: 30px;
  align-items: flex-start;
}

/* ≤768px — collapse to single column */
@media (max-width: 768px) {
  .ls-info-left__row.wp-block-columns,
  .ls-info-right__row.wp-block-columns {
    flex-wrap: wrap;
  }
  .ls-info-left__row .wp-block-column,
  .ls-info-right__row .wp-block-column {
    flex-basis: 100% !important;
  }
}


/* ============================================================
   12. PATTERN — GENEFAST ORDERING INFO (layer-genefast)
   ============================================================ */

/* Eyebrow label above the main heading */
.ls-eyebrow {
  font-size: var(--ls-p-size);
  font-weight: var(--ls-fw-regular);
  line-height: var(--ls-p-lh);
  margin-block-end: 0.5rem;
}

/* Bold lead paragraph */
.ls-genefast__lead {
  margin-block-end: 0.25rem;
}

/* Resources bar — sits below the main content, slightly darker grey */
.ls-genefast__resources {
  background-color: #e8e8e8;
  margin-block-start: 1.875rem;  /* 30px separation */
  padding: 1.25rem 1.875rem;     /* 20px 30px — matches Figma */
}

/* Resources row — vertically centred columns */
.ls-genefast__resources-row.wp-block-columns {
  align-items: center;
  gap: 1.875rem;                 /* 30px gap — matches Figma */
  margin-block-end: 0;
}

/* "Resources" label column */
.ls-genefast__resources-label {
  font-size: var(--ls-h3-size);
  line-height: var(--ls-h3-lh);
}

/* White pill items */
.ls-genefast__resources-item {
  background-color: var(--ls-white);
  padding: 1.3125rem 2rem;       /* 21px vertical, fluid horizontal */
  text-align: center;
}

.ls-genefast__resources-item .wp-block-paragraph {
  margin-block-end: 0;
  font-size: var(--ls-h3-size);
  line-height: var(--ls-h3-lh);
}

/* ≤768px — stack resources vertically */
@media (max-width: 768px) {
  .ls-genefast__resources-row.wp-block-columns {
    flex-wrap: wrap;
  }
  .ls-genefast__resources-row .wp-block-column {
    flex-basis: 100% !important;
  }
}


/* ============================================================
   13. PATTERN — HERO CAROUSEL (home-hero-carousel)
   ============================================================ */

/* Outer carousel wrapper — remove WP group max-width constraint */
.ls-hero-carousel.wp-block-group {
  max-width: 100%;
  overflow: hidden;
}

/* carousel-inner fills its parent */
.ls-hero-carousel .carousel-inner {
  width: 100%;
}

/* Each slide (wp:cover with .ls-carousel-slide) — tall banner proportions */
.ls-hero-carousel .ls-carousel-slide {
  min-height: 30rem;             /* ~480px — matches Figma proportions */
  width: 100%;
}

/* Centre the inner content block of wp:cover */
.ls-hero-carousel .wp-block-cover__inner-container {
  padding-inline: var(--ls-section-px);
  padding-block:  var(--ls-section-py);
  text-align: center;
}

/* Ensure WP cover's own min-height doesn't override ours */
.ls-hero-carousel .wp-block-cover {
  min-height: unset;
}

/* ≤768px — shorten slide height on tablet */
@media (max-width: 768px) {
  .ls-hero-carousel .ls-carousel-slide {
    min-height: 22rem;
  }
}

/* ≤480px — shorten slide height on mobile */
@media (max-width: 480px) {
  .ls-hero-carousel .ls-carousel-slide {
    min-height: 16rem;
  }
}