/*
Theme Name: Tasrif
Theme URI: https://tasrif.health
Author: Tasrif
Description: Marketing site theme for Tasrif, an ambient AI clinical scribe. Ships with Home, Contact/Book-a-demo, and Blog templates matching the product's own brand tokens.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tasrif
*/

/* ---- Design tokens (mirrors the Tasrif product's own palette) ---- */
:root {
  --bg: #fdfefc;
  --surface: #ffffff;
  --surface-2: #f1f5f1;
  --ink: #151b24;
  --muted: #616978;
  --border: #e3e8e3;
  --accent: #00724c;
  --accent-ink: #fcfcfc;
  --accent-wash: #eaf5ed;
  --danger: #e7000b;
  --radius: 14px;
  --radius-sm: 8px;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", ui-serif, serif;
  --sans: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --max: 1120px;
  --measure: 62ch;
  --shadow-sm: 0 1px 2px rgba(21, 27, 36, 0.04), 0 1px 1px rgba(21, 27, 36, 0.03);
  --shadow-md: 0 12px 28px -8px rgba(21, 27, 36, 0.14), 0 2px 8px rgba(21, 27, 36, 0.05);
  --shadow-accent: 0 14px 30px -10px rgba(0, 114, 76, 0.35);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 90px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  margin: 0 0 0.4em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(34px, 5vw, 52px); }
h2 { font-size: clamp(24px, 3.4vw, 32px); }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}
.measure { max-width: var(--measure); }
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent-wash);
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.hero-block .eyebrow, .section-head .eyebrow { margin-left: auto; margin-right: auto; }
.lede {
  font-size: 18px;
  color: var(--muted);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-accent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -10px rgba(0, 114, 76, 0.42); }
.btn-primary:active { transform: translateY(0); }
.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn-outline:hover { background: var(--surface-2); border-color: var(--accent); transform: translateY(-2px); }

/* ---- Block-editor content (the_content()) ----
   Every page/post body is normal WordPress block content, editable from
   Pages/Posts like any other WP site — nothing below is theme-specific
   markup. Styling the core blocks directly (rather than requiring custom
   CSS classes) means anything added later through the block editor picks
   up the Tasrif look automatically, with zero extra steps. */
.entry-content .wp-block-button__link {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.entry-content .wp-block-button__link:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -10px rgba(0, 114, 76, 0.42);
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: none;
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}
.entry-content .wp-block-buttons { gap: 14px; }

.entry-content ul, .entry-content ol { padding-left: 1.3em; color: var(--ink); }
.entry-content li { margin-bottom: 0.5em; }
.entry-content .wp-block-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  margin: 32px 0;
}
.entry-content .wp-block-columns { gap: 24px; }
.entry-content hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; }

/* One reusable "card" look for any Group block — the seed content uses it
   for benefit cards, steps, and pricing tiers alike. Add the CSS class
   "content-card" to a Group block (Advanced panel, in the block editor)
   to get this on any new section. */
.content-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  height: 100%;
}
.content-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #d3dcd3;
}
.content-card h3 { font-size: 17px; margin-bottom: 6px; }
.content-card p:last-child { margin-bottom: 0; color: var(--muted); font-size: 14.5px; }
.content-card.is-featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-wash) 0%, var(--surface) 140px);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);
  position: relative;
}
.content-card.is-featured:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); }

/* Full-bleed colored section wrappers — apply "hero-block" or "cta-band"
   as a Group block's CSS class. */
.hero-block {
  position: relative;
  padding: 96px 24px 76px;
  text-align: center;
  overflow: hidden;
}
.hero-block::before {
  content: "";
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 560px;
  background: radial-gradient(closest-side, var(--accent-wash), transparent 72%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.hero-block > * { position: relative; z-index: 1; }
.hero-block .wp-block-heading { text-wrap: balance; letter-spacing: -0.01em; }
.cta-band {
  background: linear-gradient(155deg, #182720 0%, var(--ink) 60%);
  color: var(--bg);
  text-align: center;
  padding: 76px 24px;
  border-radius: var(--radius);
}
.cta-band .wp-block-heading { color: var(--bg); }
.cta-band p { color: #c7cdc9; }
.cta-band .wp-block-button__link { box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5); }

/* ---- Site header ---- */
.site-header {
  border-bottom: 1px solid transparent;
  background: rgba(253, 254, 252, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 40;
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 8px 24px -12px rgba(21, 27, 36, 0.18);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
}
.brand img { width: 32px; height: 32px; }
.brand:hover { text-decoration: none; }
.primary-nav ul {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.25s var(--ease), color 0.25s var(--ease);
}
.primary-nav a:hover { color: var(--accent); text-decoration: none; background-size: 100% 2px; }
.header-cta { display: flex; align-items: center; gap: 20px; }
.header-login { color: var(--ink); font-weight: 600; font-size: 15px; }
.header-login:hover { color: var(--accent); }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
}

@media (max-width: 780px) {
  .primary-nav { display: none; width: 100%; order: 3; }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; gap: 4px; padding: 16px 0; }
  .primary-nav a { display: block; padding: 10px 0; }
  .site-header .container { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .header-login { display: none; }
}

/* ---- Trust strip ---- (className "trust-strip" on a Group block) */
.trust-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  padding: 16px 24px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
}
.trust-strip strong { color: var(--ink); }

/* ---- Section spacing utilities ---- (className on a Group block) */
.section { padding: 72px 24px; }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-alt { background: var(--surface-2); }

/* A numbered step in a 3-across "how it works" row — pair with
   wp-block-columns, one .step per column. */
.step .step-num {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--accent);
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15px; margin: 0; }

/* A single row in a "feature list" (text, not cards) — pair rows inside
   one Group with className "feature-list". */
.feature-list .feature-row {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
}
.feature-list .feature-row:last-child { border-bottom: 1px solid var(--border); }
.feature-row h3 { font-size: 17px; margin-bottom: 4px; flex: 0 0 260px; }
.feature-row p { color: var(--muted); margin: 0; font-size: 15px; }

@media (max-width: 860px) {
  .feature-list .feature-row { flex-direction: column; gap: 4px; }
  .feature-row h3 { flex: none; }
}

/* ---- Pricing add-ons ---- (used inside a .content-card) */
.content-card.is-featured { padding-top: 34px; }
.pricing-badge {
  position: absolute;
  top: -13px;
  left: 26px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
}
.pricing-price {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  margin: 4px 0 16px;
}
.pricing-features {
  list-style: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}
.pricing-features li {
  font-size: 14.5px;
  color: var(--muted);
  padding: 9px 0 9px 22px;
  border-top: 1px solid var(--border);
  position: relative;
  margin-bottom: 0 !important;
}
.pricing-features li:first-child { border-top: none; }
.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ---- Contact page ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input, .field select, .field textarea {
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
  outline: none;
}
.form-note { font-size: 13.5px; color: var(--muted); margin-top: 14px; }
.form-success {
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 14.5px;
}
.form-error {
  background: #fdeceb;
  border: 1px solid var(--danger);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 14.5px;
}
.calendly-inline-widget { border-radius: var(--radius); overflow: hidden; }

@media (max-width: 860px) {
  .steps, .cards, .contact-grid { grid-template-columns: 1fr; }
  .feature-row { flex-direction: column; gap: 4px; }
  .feature-row h3 { flex: none; }
}

/* ---- Blog ---- */
.post-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 40px;
}
.post-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: 6px;
  padding: 3px 9px;
  margin-bottom: 10px;
}
.post-meta { font-size: 13px; color: var(--muted); }
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.post-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card h3 a { color: var(--ink); }
.post-featured { transition: box-shadow 0.25s var(--ease); }
.post-featured:hover { box-shadow: var(--shadow-md); }
.post-card h3 { font-size: 17px; margin-bottom: 8px; }
.post-card p { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.category-filter {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  font-size: 14px;
}
.category-filter a { color: var(--muted); font-weight: 600; }
.category-filter a.active, .category-filter a:hover { color: var(--accent); }
.newsletter-strip {
  border-top: 1px solid var(--border);
  margin-top: 56px;
  padding-top: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 14.5px;
}

/* Single post */
.post-header { max-width: var(--measure); margin: 0 auto 40px; text-align: left; }
.post-content { max-width: var(--measure); margin: 0 auto; font-size: 17px; }
.post-content p { margin-bottom: 1.3em; }
.post-content blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  margin: 32px 0;
}
.post-content h2, .post-content h3 { margin-top: 1.6em; }
.post-footer {
  max-width: var(--measure);
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
}

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

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding: 48px 0 28px;
  margin-top: 40px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; font-size: 17px; }
.footer-brand img { width: 26px; height: 26px; }
.footer-tagline { color: var(--muted); font-size: 14px; margin-top: 6px; }
.footer-links { display: flex; gap: 40px; flex-wrap: wrap; }
.footer-links h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 12px; }
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: var(--ink); font-size: 14.5px; }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.screen-reader-text { position: absolute; left: -9999px; }

/* ---- Scroll reveal ---- applied by assets/js/main.js to top-level
   sections as they enter the viewport; degrades to always-visible if JS
   is off or the visitor prefers reduced motion. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}