/*
  Shared style sheet for the Blackwell BioSciences website.

  This file defines a cohesive design system with a consistent color palette,
  typography scale, spacing system, and reusable components. All pages on
  BlackWellBio.com import this stylesheet to ensure visual unity. When
  editing or extending the site, add new utilities and component classes here
  rather than using inline styles. This makes the site easier to maintain
  and scales better over time.

  Author: Agent
  Date: 2025-12-20
*/

/* Root design tokens */
:root {
  /* Colors */
  /* Dark theme colours */
  /* Base page background: nearly black for depth */
  --bg: #0B0D13;
  /* Surface backgrounds: deep graphite for cards and panels */
  --surface: #14181F;
  /* Section tint for alternating rows: slightly lighter graphite */
  --tint: #1A1F29;
  /* Primary text colour: warm off‑white for high contrast */
  --text: #F5F6FA;
  /* Secondary text colour: cool grey for subheads */
  --muted: #A4B0C4;
  /* Tertiary text colour: muted grey for captions */
  --muted2: #7D88A1;
  /* Border colour used for outlines and separators */
  --border: #1E222B;
  /* Primary accent (soft gold) for calls‑to‑action */
  --copper: #CBA474;
  /* Lighter gold for hover and badges */
  --copper-light: #D5B28E;
  /* Secondary accent (cool teal) reserved for trust signals */
  --teal: #3E8F8E;

  /* Background embellishments */
  /* Data URI for a subtle noise texture. This image is a 64x64 greyscale
     pattern generated at build time. It is repeated across the page at
     a small scale to add organic variation to the otherwise solid dark
     background. Keeping the noise extremely low opacity ensures it
     doesn’t distract from content. */
  --noise-data: url('data:image/png;base64,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');

  /* Sizing scale */
  --s8: 8px;
  --s12: 12px;
  --s16: 16px;
  --s24: 24px;
  --s32: 32px;
  --s48: 48px;
  --s64: 64px;
  --s96: 96px;

  /* Layout */
  --radius: 18px;
  --shadow: 0 10px 28px rgba(11, 18, 32, 0.08);
  --max-width: 1200px;
}

/* Base styles */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
}

/* Noise and glow overlays */
/*
  To subtly break up the flatness of a dark background we layer a low
  opacity noise texture across the entire viewport. This is applied via
  a pseudo‑element so it does not interfere with layout. A second
  pseudo‑element applies radial gradient glows anchored to the top right
  and bottom left corners. These glows are extremely soft and stay
  clear of content areas, adding depth without distraction.
*/
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--noise-data);
  background-size: 400px 400px;
  opacity: 0.04;
  pointer-events: none;
  z-index: -1;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(circle at 80% 20%, rgba(203, 164, 116, 0.15), transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(62, 143, 142, 0.10), transparent 60%);
}

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

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

a:focus {
  outline: 2px solid rgba(184, 107, 62, 0.6);
  outline-offset: 2px;
}

/* Utility containers */
.container {
  width: min(var(--max-width), 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--s24);
  padding-right: var(--s24);
}

@media (max-width: 720px) {
  .container {
    padding-left: var(--s16);
    padding-right: var(--s16);
  }
}

/* Accessible skip link */
.skipLink {
  position: absolute;
  left: -999px;
  top: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--s12) var(--s16);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 50;
}

.skipLink:focus {
  left: 12px;
}

/* Header */
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Dark semi‑transparent header background */
  background: rgba(11, 13, 19, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.headerInner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s24);
  padding-top: var(--s16);
  padding-bottom: var(--s16);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s12);
  font-weight: 700;
  letter-spacing: 0.3px;
}

.brandMark {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy), var(--copper));
  box-shadow: 0 10px 22px rgba(10, 27, 61, 0.15);
}

.brandText {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s24);
  font-weight: 500;
  color: var(--muted);
}

.nav a:hover {
  color: var(--text);
}

.navStrong {
  color: var(--text);
  font-weight: 700;
}

.headerCtas {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .headerInner {
    grid-template-columns: 1fr auto;
  }
  .nav {
    display: none;
  }
}

/* Typography scale */
.h1,
.h2,
.h3 {
  font-family: 'Fraunces', Georgia, serif;
  line-height: 1.15;
  margin: 0;
}

.h1 {
  font-size: 56px;
  letter-spacing: -0.6px;
}

.h2 {
  font-size: 36px;
  letter-spacing: -0.3px;
}

.h3 {
  font-size: 20px;
}

@media (max-width: 720px) {
  .h1 {
    font-size: 40px;
  }
  .h2 {
    font-size: 28px;
  }
}

.eyebrow {
  color: var(--teal);
  font-weight: 700;
  letter-spacing: 0.4px;
  margin: 0 0 var(--s12);
}

.lead {
  font-size: 18px;
  color: var(--muted);
  margin-top: var(--s16);
  max-width: 56ch;
}

.subhead {
  margin-top: var(--s12);
  color: var(--muted);
  font-size: 16px;
}

.muted {
  color: var(--muted);
}

.muted2 {
  color: var(--muted2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(184, 107, 62, 0.1);
  color: var(--copper);
  border: 1px solid rgba(184, 107, 62, 0.25);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  margin-bottom: var(--s12);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 700;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(11, 18, 32, 0.1);
}

.btnPrimary {
  /* Copper primary CTA on dark background */
  background: var(--copper);
  color: var(--bg);
}

.btnPrimary:hover {
  background: var(--copper-light);
}

.btnSecondary {
  /* Secondary buttons have a dark surface and copper border */
  background: var(--surface);
  border-color: var(--copper);
  color: var(--copper);
}

.btnSecondary:hover {
  background: var(--copper);
  color: var(--bg);
}

.btnSmall {
  padding: 10px 14px;
  font-size: 14px;
}

.btnFull {
  width: 100%;
}

.linkStrong {
  color: var(--copper);
  font-weight: 800;
}

.linkMuted {
  color: var(--muted2);
  font-weight: 700;
}

.linkMuted:hover {
  color: var(--text);
}

/* Section spacing */
.section {
  padding-top: var(--s64);
  padding-bottom: var(--s64);
}

@media (max-width: 720px) {
  .section {
    padding-top: var(--s48);
    padding-bottom: var(--s48);
  }
}

.sectionTint {
  background: var(--tint);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.sectionHead {
  max-width: 70ch;
  margin-bottom: var(--s32);
}

.splitHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s24);
}

@media (max-width: 720px) {
  .splitHead {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Grid utilities */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s24);
}

@media (max-width: 980px) {
  .grid3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .grid3 {
    grid-template-columns: 1fr;
  }
}

.productGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s24);
}

@media (max-width: 980px) {
  .productGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .productGrid {
    grid-template-columns: 1fr;
  }
}

.tileGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s24);
}

@media (max-width: 980px) {
  .tileGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .tileGrid {
    grid-template-columns: 1fr;
  }
}

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s24);
  display: flex;
  flex-direction: column;
}

/* Product cards */
.productCard {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.productMedia {
  background: linear-gradient(180deg, rgba(10, 27, 61, 0.06), rgba(184, 107, 62, 0.05));
  border-bottom: 1px solid var(--border);
  padding: var(--s24);
  display: grid;
  place-items: center;
}

.productMedia img {
  width: min(220px, 100%);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(11, 18, 32, 0.1));
}

.productBody {
  padding: var(--s24);
  display: flex;
  flex-direction: column;
  gap: var(--s12);
  height: 100%;
}

.productBody .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Tiles for goals/categories */
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(11, 18, 32, 0.1);
}

.tileMedia {
  background: linear-gradient(180deg, rgba(10, 27, 61, 0.06), rgba(184, 107, 62, 0.05));
  border-bottom: 1px solid var(--border);
}

.tileMedia img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.tileBody {
  padding: var(--s24);
}

/* Step cards */
.stepCard {
  position: relative;
}

.stepNum {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(10, 27, 61, 0.08);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  margin-bottom: var(--s12);
}

/* Education cards */
.eduCard {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.eduMedia {
  background: linear-gradient(180deg, rgba(10, 27, 61, 0.06), rgba(184, 107, 62, 0.05));
  border-bottom: 1px solid var(--border);
}

.eduMedia img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.eduCard .h3,
.eduCard .p,
.eduCard .cardLinks {
  padding-left: var(--s24);
  padding-right: var(--s24);
}

.eduCard .h3 {
  margin-top: var(--s24);
}

.eduCard .cardLinks {
  padding-bottom: var(--s24);
  margin-top: var(--s16);
  display: flex;
  gap: var(--s16);
}

/* Email form */
.emailGrid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s32);
  align-items: center;
}

@media (max-width: 980px) {
  .emailGrid {
    grid-template-columns: 1fr;
  }
}

.label {
  display: block;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}

.input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 16px;
  margin-bottom: var(--s16);
  background: var(--surface);
}

.input:focus {
  outline: 2px solid rgba(184, 107, 62, 0.35);
  outline-offset: 2px;
  border-color: rgba(184, 107, 62, 0.45);
}

/* Footer */
.siteFooter {
  border-top: 1px solid var(--border);
  padding-top: var(--s48);
  padding-bottom: var(--s48);
  /* Dark footer background */
  background: var(--tint);
}

.footerGrid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: var(--s24);
}

@media (max-width: 980px) {
  .footerGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .footerGrid {
    grid-template-columns: 1fr;
  }
}

.footerBrand {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.footerTitle {
  margin: 0 0 var(--s12);
  font-weight: 900;
}

.footerLink {
  display: block;
  color: var(--muted);
  margin: 10px 0;
  font-weight: 600;
}

.footerLink:hover {
  color: var(--text);
}

.footerText {
  margin-top: var(--s12);
  color: var(--muted);
}

.footerFine {
  margin-top: var(--s12);
  color: var(--muted2);
  font-size: 13px;
}

/* Tags for reading time or difficulty */
.tag {
  display: inline-block;
  background: rgba(203, 164, 116, 0.15);
  color: var(--copper);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 12px;
  margin-bottom: var(--s12);
}

/* FAQ card styling to avoid inline styles */
.faqCard {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Micro trust row used in hero
   This appears under the primary CTA to reinforce credibility. The items
   wrap on small screens and are separated by subtle bullets. */
.microTrust {
  margin-top: var(--s16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s12);
  color: var(--muted2);
  font-size: 14px;
  font-weight: 600;
  align-items: center;
}

.microTrust .dot {
  margin: 0 var(--s8);
}