/*
Theme Name: MoleculR
Theme URI: https://moleculr.ai
Description: Single-page scrollable website for MoleculR — AI-powered synthesis planning.
Version: 1.0
Author: MoleculR
*/

/* ─── TOKENS ───────────────────────────────────────────────────── */
:root {
  --teal:        #598496;
  --teal-dark:   #3d6070;
  --teal-light:  #7aa5b5;
  --teal-faint:  #eef4f7;
  --gold:        #AEA823;
  --white:       #ffffff;
  --off-white:   #f7fafb;
  --ink:         #1a2830;
  --ink-mid:     #3d5460;
  --ink-light:   #7a9aaa;
  --border:      #dde8ed;

  --font-display: 'Funnel Display', 'Arial', sans-serif;
  --font-body:    'Poppins', 'Arial', sans-serif;

  --max-w: 1100px;
  --section-pad: 100px 5vw;
}

/* ─── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ─── TYPOGRAPHY ────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.8rem, 6vw, 5rem); color: var(--white); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); color: var(--ink); }
p  { line-height: 1.7; color: var(--ink-mid); }

/* ─── GOOGLE FONTS ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@600;700;800&family=Poppins:wght@300;400;500;600&display=swap');

/* ─── BUTTONS ───────────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  background: var(--white);
  color: var(--teal-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 32px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  letter-spacing: 0.01em;
}
.btn-primary:hover { background: var(--teal-faint); transform: translateY(-1px); }

.btn-ghost {
  display: inline-block;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 14px 24px;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { border-color: white; color: white; }

/* ─── LABELS ────────────────────────────────────────────────────── */
.block-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 18px;
}
.block-label--light { color: var(--teal-light); }

/* ─── NAV ───────────────────────────────────────────────────────── */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 5vw;
  z-index: 10;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-icon { width: 32px; height: 32px; flex-shrink: 0; }
.logo-text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  transition: color 0.2s;
}
.nav-links a:hover { color: white; }
.nav-cta {
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.3);
  padding: 9px 20px;
  border-radius: 4px;
  color: white !important;
  transition: background 0.2s !important;
}
.nav-cta:hover { background: rgba(255,255,255,0.25) !important; }

/* ─── HERO ──────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(145deg, #3d6070 0%, var(--teal) 45%, #4a7a8e 100%);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 120px 5vw 80px;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}
.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 22px;
}
.hero-headline {
  margin-bottom: 28px;
}
.hero-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  margin-bottom: 42px;
  max-width: 540px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-bg-nodes {
  position: absolute;
  right: -2%;
  top: 0;
  width: 55%;
  height: 100%;
  opacity: 0.8;
  pointer-events: none;
}
.hero-bg-nodes svg { width: 100%; height: 100%; }

/* ─── SOLUTION ──────────────────────────────────────────────────── */
.solution {
  background: var(--white);
}
.solution-block {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-pad);
}
.solution-block h2 { margin-bottom: 20px; }

.section-divider { padding: 0 5vw; }
.section-divider svg { width: 100%; }

/* Problem grid */
.problem-intro { font-size: 1.05rem; margin-bottom: 48px; max-width: 600px; }
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.problem-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px 28px;
}
.problem-card p { font-size: 0.95rem; color: var(--ink-mid); }

/* Solution layers */
.solution-intro { font-size: 1.05rem; max-width: 600px; margin-bottom: 48px; }
.solution-layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.layer-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 36px 28px;
  background: var(--white);
  transition: box-shadow 0.2s;
}
.layer-card:hover { box-shadow: 0 8px 32px rgba(89,132,150,0.12); }
.layer-card--accent {
  background: var(--teal);
  border-color: var(--teal);
}
.layer-card--accent .layer-name,
.layer-card--accent .layer-type,
.layer-card--accent p { color: white !important; }
.layer-card--accent p { opacity: 0.85; }
.layer-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.layer-type {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 20px;
}
.layer-status {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--teal-light);
  background: var(--teal-faint);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 18px;
}
.layer-card--accent .layer-status {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
}
.layer-card p { font-size: 0.95rem; }

/* Roadmap */
.roadmap {
  margin-top: 56px;
  position: relative;
  padding-left: 32px;
}
.roadmap::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 1.5px;
  background: linear-gradient(to bottom, var(--teal) 30%, var(--border) 100%);
}
.roadmap-item {
  display: flex;
  gap: 28px;
  margin-bottom: 44px;
  position: relative;
}
.roadmap-item:last-child { margin-bottom: 0; }
.roadmap-dot {
  position: absolute;
  left: -28px;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  background: var(--white);
  flex-shrink: 0;
}
.roadmap-done .roadmap-dot { background: var(--teal); }
.roadmap-active .roadmap-dot {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(174,168,35,0.18);
}
.roadmap-future .roadmap-dot { border-color: var(--border); }
.roadmap-date {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 6px;
}
.roadmap-active .roadmap-date { color: var(--gold); }
.roadmap-future .roadmap-date { color: var(--ink-light); }
.roadmap-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.roadmap-future .roadmap-title { color: var(--ink-light); }
.roadmap-desc { font-size: 0.93rem; color: var(--ink-mid); }
.roadmap-future .roadmap-desc { color: var(--ink-light); }

/* ─── CONTACT ───────────────────────────────────────────────────── */
.contact {
  background: linear-gradient(145deg, #3d6070 0%, var(--teal) 60%, #4a7a8e 100%);
  padding: 100px 5vw;
}
.contact-inner {
  max-width: 700px;
  margin: 0 auto;
}
.contact h2 { color: white; margin-bottom: 18px; }
.contact-sub {
  color: rgba(255,255,255,0.75);
  font-size: 1.05rem;
  margin-bottom: 48px;
}
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: white;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255,255,255,0.45); }
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.15);
}
.contact-form textarea { resize: vertical; }
.btn-submit {
  align-self: flex-start;
  margin-top: 8px;
}
/* Disabled only while the captcha is still working (see the inline script in functions.php), so it
   must read as "not yet" rather than "broken" -- hence dimmed and not-allowed, not hidden. */
.btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn-submit:disabled:hover { background: var(--white); transform: none; }
/* Spinner while the form is in flight. The reduced-motion block below stops the animation, which
   is why the button also says "Sending…" rather than relying on the spinner alone. */
.btn-submit.is-sending::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.6em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: moleculr-spin 0.7s linear infinite;
}
.btn-submit.is-sending { opacity: 0.8; }
@keyframes moleculr-spin {
  to { transform: rotate(360deg); }
}
/* Reserves the widget's height so the button does not jump when it renders. */
.contact-captcha { min-height: 60px; }
.contact-alt {
  margin-top: 28px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
}
.contact-alt a {
  color: rgba(255,255,255,0.8);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-alt a:hover { color: white; }

/* ─── FOOTER ────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  padding: 32px 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-logo { font-family: var(--font-display); font-weight: 700; color: white; font-size: 1.1rem; letter-spacing: -0.02em; }
.footer-copy { font-size: 0.8rem; color: rgba(255,255,255,0.35); }
.footer-email a { font-size: 0.85rem; color: rgba(255,255,255,0.5); transition: color 0.2s; }
.footer-email a:hover { color: white; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --section-pad: 72px 5vw; }
  .nav-links a:not(.nav-cta) { display: none; }
  h1 { font-size: 2.6rem; }
  h2 { font-size: 1.7rem; }
  .problem-grid,
  .solution-layers { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero-bg-nodes { display: none; }
  .site-footer { flex-direction: column; gap: 12px; text-align: center; }
}

/* ── Standalone pages (page.php) ──────────────────────────────────────────────────────────── */
/* The same gradient as .contact, deliberately: /thanks/ is reached by submitting the form on that
   panel, so staying on its background makes the send feel like one continuous step rather than a
   jump to a different site. The percentage stop matches .contact, not .hero -- the two differ. */
.page-main {
  min-height: 100vh;
  background: linear-gradient(145deg, #3d6070 0%, var(--teal) 60%, #4a7a8e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 5vw 80px;
  text-align: center;
}
.page-inner { max-width: 560px; }
/* h1 is already --font-display and --white globally; only the hero-sized scale needs reining in. */
.page-inner h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  margin-bottom: 18px;
}
.page-inner p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 14px;
}
/* The block editor leaves an empty paragraph behind whenever someone presses Enter at the end of
   the content. It carries no text but still takes its margin, so the page gains a gap nobody put
   there and nobody can see in the editor. */
.page-inner p:empty { display: none; }
.page-back { margin-top: 40px; font-size: 0.9rem; }
.page-back a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
  transition: color 0.2s;
}
.page-back a:hover { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}