/*
Theme Name:   Divi Child — Life Science Connect
Theme URI:    https://lifescienceconnect.com
Description:  Child theme for Life Science Connect website. Built on Divi 4.x by Rhycom.
Author:       Rhycom / AKco.
Author URI:   https://rhycom.com
Template:     Divi
Version:      1.1.0
Tags:         life-science, b2b, divi-child
Text Domain:  divi-child-lsc
*/

/* ============================================================
   LSC DESIGN TOKENS
   Source: Updated_LSC_Homepage.html :root block — canonical reference
   Version 1.1.0 — verified March 2026
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --lsc-navy:         #0A1D51;   /* --midnight / --md: primary dark, nav, headlines */
  --lsc-navy-mid:     #1A2E62;   /* --ms: secondary navy, hover states */
  --lsc-orange:       #EE681D;   /* --orange: primary CTA, tags, highlights */
  --lsc-teal:         #27B6B6;   /* --teal: Connect pillar, accents */
  --lsc-teal-dark:    #008897;   /* --dark-teal: hover teal, borders */
  --lsc-cyan:         #009FE3;   /* --cyan: Collaborate pillar, links */
  --lsc-cherry:       #D42037;   /* --cherry: Contribute pillar, accent bar */
  --lsc-lemon:        #FFC400;   /* --lemon: awards, bottom color bar */

  /* ── Neutrals / Slate scale ── */
  --lsc-slate:        #24272A;   /* --slate: darkest text */
  --lsc-s60:          #403D3F;   /* body text default */
  --lsc-s40:          #6B666A;   /* muted body, subheads */
  --lsc-s20:          #C3C0C1;   /* borders, placeholders */
  --lsc-s10:          #DCD9D9;   /* dividers, light borders */
  --lsc-s5:           #EDECED;   /* very light borders */
  --lsc-s2:           #F7F6F7;   /* near-white surface */

  /* ── Background surfaces ── */
  --lsc-cream:        #FAF9F6;   /* --cream: default page bg */
  --lsc-warm:         #F3F1EC;   /* --warm: placeholder bg, card bg */
  --lsc-warmlt:       #F8F7F4;   /* --warmlt: lightest warm surface */
  --lsc-white:        #FFFFFF;

  /* ── Teal tint ── */
  --lsc-teal30:       #E2EBF0;   /* teal tint for backgrounds */

  /* ── Typography ── */
  --lsc-sans:         'Lato', -apple-system, sans-serif;
  --lsc-serif:        'Lato', -apple-system, sans-serif;  /* Lato-only confirmed */

  /* ── Line heights ── */
  --lsc-lh-tight:     1.1;       /* h1, h2 */
  --lsc-lh-sub:       1.6;       /* subheaders, lead paragraphs */
  --lsc-lh-body:      1.65;      /* body text, bullets */
  --lsc-lh-small:     1.45;      /* tags, labels, small text */

  /* ── Border radius ── */
  --lsc-r:            16px;      /* standard */
  --lsc-r-lg:         20px;      /* cards, large elements */
  --lsc-r-sm:         10px;      /* small elements, badges */
  --lsc-r-pill:       100px;     /* buttons */

  /* ── Max widths ── */
  --lsc-max-width:    1140px;

  /* ── Transitions ── */
  --lsc-ease:         0.25s;
}

/* ============================================================
   GLOBAL RESETS & BASE
   ============================================================ */

html {
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--lsc-sans);
  font-size: 16px;
  color: var(--lsc-s60);
  line-height: var(--lsc-lh-body);
  background: var(--lsc-cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   TYPOGRAPHY BASELINE
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lsc-sans);
  font-weight: 900;
  color: var(--lsc-navy);
  line-height: var(--lsc-lh-tight);
  letter-spacing: -0.02em;
  margin-top: 0;
}

p {
  line-height: var(--lsc-lh-body);
  margin-top: 0;
  color: var(--lsc-s40);
}

a {
  color: var(--lsc-cyan);
  text-decoration: none;
  transition: color var(--lsc-ease);
}

a:hover {
  color: var(--lsc-navy);
}

/* Tag / label style — matches .tag in HTML */
.lsc-tag {
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lsc-orange);
  line-height: var(--lsc-lh-small);
}

/* ============================================================
   LAYOUT CONTAINER
   ============================================================ */

.lsc-w {
  max-width: var(--lsc-max-width);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

/* ============================================================
   BUTTONS — matches .btn system in HTML
   ============================================================ */

.lsc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.6rem;
  border-radius: var(--lsc-r-pill);
  font-family: var(--lsc-sans);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--lsc-ease);
  cursor: pointer;
  border: none;
}

/* Primary — orange filled (.bd) */
.lsc-btn--primary {
  background: var(--lsc-orange);
  color: var(--lsc-white);
}
.lsc-btn--primary:hover {
  background: #DA5220;
  color: var(--lsc-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(238, 104, 29, 0.2);
}

/* Ghost — outline dark (.bg) */
.lsc-btn--ghost {
  background: none;
  color: var(--lsc-navy);
  border: 1.5px solid var(--lsc-s10);
}
.lsc-btn--ghost:hover {
  border-color: var(--lsc-navy);
  color: var(--lsc-navy);
}

/* White — on dark backgrounds (.bw) */
.lsc-btn--white {
  background: var(--lsc-white);
  color: var(--lsc-navy);
}
.lsc-btn--white:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  color: var(--lsc-navy);
}

/* Ghost white — on dark bg */
.lsc-btn--ghost-white {
  background: none;
  color: var(--lsc-white);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
}
.lsc-btn--ghost-white:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--lsc-white);
}

/* ============================================================
   CARDS
   ============================================================ */

.lsc-card {
  background: var(--lsc-white);
  border-radius: var(--lsc-r);
  padding: 1.5rem;
  transition: box-shadow var(--lsc-ease), transform var(--lsc-ease);
}

.lsc-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   SECTION BACKGROUNDS
   ============================================================ */

.lsc-bg-cream     { background-color: var(--lsc-cream); }
.lsc-bg-white     { background-color: var(--lsc-white); }
.lsc-bg-warm      { background-color: var(--lsc-warm); }
.lsc-bg-navy      { background-color: var(--lsc-navy); }
.lsc-bg-navy h1,
.lsc-bg-navy h2,
.lsc-bg-navy h3   { color: var(--lsc-white); }

/* ============================================================
   LSC 5-COLOR ACCENT BAR
   Matches bottom of branded deck slides
   ============================================================ */

.lsc-color-bar {
  display: flex;
  height: 5px;
  width: 100%;
}
.lsc-color-bar span { flex: 1; }
.lsc-color-bar span:nth-child(1) { background: var(--lsc-teal); }
.lsc-color-bar span:nth-child(2) { background: var(--lsc-orange); }
.lsc-color-bar span:nth-child(3) { background: var(--lsc-cherry); }
.lsc-color-bar span:nth-child(4) { background: var(--lsc-cyan); }
.lsc-color-bar span:nth-child(5) { background: var(--lsc-lemon); }

/* ============================================================
   PLACEHOLDER BLOCKS (image/visual placeholders during build)
   ============================================================ */

.lsc-ph {
  background: var(--lsc-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lsc-s20);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1.5px dashed var(--lsc-s10);
  border-radius: var(--lsc-r-lg);
}

/* ============================================================
   DIVI OVERRIDES
   Surgical — only what Divi defaults conflict with LSC design
   ============================================================ */

/* Remove Divi bottom margin on last p in text modules */
.et_pb_text_inner p:last-child {
  margin-bottom: 0;
}

/* Normalize Divi button font */
.et_pb_button {
  font-family: var(--lsc-sans) !important;
  letter-spacing: 0.02em;
}

/* Divi sets a default page bg — override with LSC cream */
.et_pb_section {
  background-color: var(--lsc-cream);
}

/* Remove Divi image border-radius global override */
.et_pb_image img {
  border-radius: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 980px) {
  .lsc-btn--primary,
  .lsc-btn--ghost,
  .lsc-btn--white,
  .lsc-btn--ghost-white {
    padding: 0.65rem 1.35rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 767px) {
  h1 { font-size: 1.8rem; }
}