/*
Theme Name:  CO2ncentrate
Theme URI:   https://co2ncentrate.com
Description: Official theme for CO2ncentrate — all brand styles auto-applied to every page.
Version:     1.0
Author:      CO2ncentrate
Text Domain: co2ncentrate
*/

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS
   Change brand colors, fonts, and radius here — updates
   apply site-wide automatically.
══════════════════════════════════════════════════════════ */
:root {
  --violet-deep:  #3c2d6b;
  --violet-mid:   #6a4ea8;
  --violet-soft:  #a99bd8;
  --violet-mist:  #f6f3fb;
  --bg:           #ffffff;
  --fg:           #1f2937;
  --card:         #ffffff;
  --muted-bg:     #f9fafb;
  --muted-fg:     #6b7280;
  --border:       #e5e7eb;
  --danger:       #dc2626;

  --radius:       0.75rem;
  --radius-full:  9999px;

  --font: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --grad-violet:       linear-gradient(135deg, #3c2d6b 0%, #6a4ea8 50%, #a99bd8 100%);
  --grad-violet-soft:  linear-gradient(180deg, #ffffff 0%, #f6f3fb 100%);
  --shadow-soft:       0 10px 40px -12px rgba(60,45,107,0.18);
  --shadow-violet:     0 20px 60px -20px rgba(60,45,107,0.35);
}

/* ══════════════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
h1,h2,h3,h4,h5,h6 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
a   { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; height: auto; }
sub { vertical-align: sub;   font-size: 0.75em; }
sup { vertical-align: super; font-size: 0.65em; }
ul,ol { list-style: none; }
p { line-height: 1.7; }

/* ══════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════ */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 1024px) { .wrap { padding: 0 2.5rem; } }

/* Two-column grid used in Problem and Contact sections */
.col-2 { display: grid; gap: 4rem; }
@media (min-width: 1024px) { .col-2 { grid-template-columns: 1fr 1fr; align-items: center; } }

/* ══════════════════════════════════════════════════════════
   UTILITY / BRAND CLASSES
   These can be added to any block in the WordPress editor
══════════════════════════════════════════════════════════ */
.text-grad {
  background: var(--grad-violet);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-violet       { background: var(--grad-violet); }
.bg-violet-soft  { background: var(--grad-violet-soft); }
.bg-mist         { background: var(--violet-mist); }
.shadow-soft     { box-shadow: var(--shadow-soft); }
.shadow-violet   { box-shadow: var(--shadow-violet); }

.gridbg {
  background-image:
    linear-gradient(to right, rgba(60,45,107,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(60,45,107,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Section eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--violet-deep);
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--violet-deep);
  flex-shrink: 0;
}

/* Section headline + body defaults */
.section-h2 {
  margin-top: 1rem;
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: var(--fg);
}
.section-body {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  color: var(--muted-fg);
  line-height: 1.75;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */
.btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-full) !important;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
  padding: 0.9rem 1.75rem;
  text-decoration: none;
}
.btn-primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--violet-deep) !important;
  color: #fff !important;
  box-shadow: var(--shadow-violet);
}
.btn-primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { opacity: 0.88; }

.btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(8px);
  border: 1px solid var(--border) !important;
  color: var(--fg) !important;
}
.btn-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--violet-mist) !important; }

.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.875rem; }

/* ══════════════════════════════════════════════════════════
   CARD
══════════════════════════════════════════════════════════ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
}

/* ══════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════ */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
#site-header.scrolled {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px);
  border-color: var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
@media (min-width: 1024px) { .header-inner { height: 5rem; } }

.site-logo { font-size: 1.35rem; font-weight: 700; color: var(--violet-deep) !important; letter-spacing: -0.02em; }

.header-nav { display: none; align-items: center; gap: 2.5rem; }
@media (min-width: 768px) { .header-nav { display: flex; } }
.header-nav a { font-size: 0.875rem; font-weight: 600; color: rgba(31,41,55,0.8); transition: color 0.2s; }
.header-nav a:hover { color: var(--violet-deep); }

.hamburger { display: flex; background: none; border: none; cursor: pointer; color: var(--violet-deep); padding: 0.5rem; }
@media (min-width: 768px) { .hamburger { display: none; } }

.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 1rem 1.5rem 1.5rem;
  gap: 0.25rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 0.75rem 0; font-weight: 600; border-bottom: 1px solid var(--border); color: var(--fg); }
.mobile-nav a:last-of-type { border-bottom: none; }

/* ══════════════════════════════════════════════════════════
   PAGE CONTENT AREA
   Styles applied to all WordPress pages automatically
══════════════════════════════════════════════════════════ */
.site-main {
  padding-top: 5rem; /* clears the fixed header */
}

/* Default page layout (used by page.php) */
.page-section {
  padding: 5rem 0;
}
@media (min-width: 1024px) { .page-section { padding: 7rem 0; } }

/* WordPress block editor defaults — make content look on-brand */
.entry-content h1 { font-size: clamp(2rem, 4vw, 3.5rem); color: var(--fg); margin-bottom: 1rem; }
.entry-content h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); color: var(--fg); margin-bottom: 0.75rem; margin-top: 2.5rem; }
.entry-content h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); color: var(--fg); margin-bottom: 0.5rem; margin-top: 2rem; }
.entry-content p  { color: var(--muted-fg); margin-bottom: 1.25rem; font-size: 1.05rem; }
.entry-content a  { color: var(--violet-deep); text-decoration: underline; }
.entry-content a:hover { opacity: 0.75; }
.entry-content ul, .entry-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; color: var(--muted-fg); }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 0.4rem; }
.entry-content blockquote {
  border-left: 3px solid var(--violet-soft);
  padding-left: 1.25rem;
  color: var(--muted-fg);
  font-style: italic;
  margin: 1.5rem 0;
}
.entry-content img { border-radius: var(--radius); }
.entry-content hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

/* WordPress group block with brand bg */
.wp-block-group.has-violet-background-color { background: var(--violet-deep); color: #fff; }
.wp-block-group.has-mist-background-color   { background: var(--violet-mist); }

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
#site-footer { border-top: 1px solid var(--border); background: var(--card); }
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 3rem 0;
}
@media (min-width: 768px) {
  .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer-logo    { font-size: 1.1rem; font-weight: 700; color: var(--violet-deep); }
.footer-tagline { margin-top: 0.4rem; font-size: 0.875rem; color: var(--muted-fg); }
.footer-links   { display: flex; align-items: center; gap: 1.5rem; font-size: 0.875rem; color: var(--muted-fg); flex-wrap: wrap; }
.footer-links a:hover { color: var(--violet-deep); }

/* ══════════════════════════════════════════════════════════
   HOMEPAGE-SPECIFIC SECTIONS
   (used only by front-page.php)
══════════════════════════════════════════════════════════ */

/* — Hero — */
#hero { position: relative; overflow: hidden; padding: 8rem 0 6rem; }
@media (min-width: 1024px) { #hero { padding: 11rem 0 8rem; } }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.72), rgba(255,255,255,0.45), #fff);
}
.hero-content { position: relative; z-index: 1; max-width: 56rem; animation: fadeUp 0.8s ease-out both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }

.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(60,45,107,0.22);
  background: rgba(60,45,107,0.05);
  padding: 0.375rem 1rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet-deep);
}
.badge-dot { width:6px; height:6px; border-radius:50%; background:var(--violet-deep); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }

.hero-h1    { margin-top: 1.5rem; font-size: clamp(2.4rem, 6vw, 4.5rem); }
.hero-sub   { margin-top: 2rem; font-size: 1.1rem; color: var(--muted-fg); line-height: 1.75; max-width: 40rem; }
@media (min-width: 768px) { .hero-sub { font-size: 1.25rem; } }
.hero-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.stat-ribbon {
  margin-top: 5rem; position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 1px; background: var(--border);
  border-radius: 1rem; border: 1px solid var(--border);
  overflow: hidden; box-shadow: var(--shadow-soft);
}
@media (min-width: 768px) { .stat-ribbon { grid-template-columns: repeat(4,1fr); } }
.stat-cell  { background: var(--card); padding: 1.5rem; }
@media (min-width: 1024px) { .stat-cell { padding: 2rem; } }
.stat-value { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; color: var(--violet-deep); letter-spacing: -0.02em; }
.stat-label { margin-top: 0.25rem; font-size: 0.78rem; color: var(--muted-fg); line-height: 1.4; }

/* — Problem — */
.energy-card { padding: 2rem; }
.energy-card-eyebrow { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-fg); margin-bottom: 1rem; }
.energy-bars { display: flex; gap: 0.75rem; height: 17rem; align-items: flex-end; }
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar { width: 100%; border-radius: 0.5rem 0.5rem 0 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.75rem; font-weight: 700; }
.bar.useful { background: var(--grad-violet); color: #fff; height: 33%; flex: 0 0 38%; }
.bar.wasted { background: var(--muted-bg); color: var(--muted-fg); height: 100%; flex: 0 0 58%; border: 2px dashed rgba(107,114,128,0.28); }
.bar-lbl    { margin-top: 0.5rem; font-size: 0.74rem; font-weight: 600; text-align: center; color: var(--muted-fg); }
.energy-note { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--muted-fg); }

/* — Diagram cards — */
.diagram-grid { margin-top: 4rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .diagram-grid { grid-template-columns: 1fr 1fr; } }
.diagram-card { border-radius: 1rem; padding: 2.25rem; border: 1px solid var(--border); background: var(--card); }
.diagram-card.hot { background: var(--grad-violet); border-color: rgba(60,45,107,0.3); }
.card-badge { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-full); padding: 0.25rem 0.85rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.diagram-card:not(.hot) .card-badge { background: var(--violet-mist); color: var(--violet-deep); }
.diagram-card.hot .card-badge { background: rgba(255,255,255,0.15); color: #fff; }
.card-title { margin-top: 1.5rem; font-size: 3rem; font-weight: 700; }
.diagram-card:not(.hot) .card-title { color: var(--fg); }
.diagram-card.hot .card-title { color: #fff; }
.card-temp { margin-top: 0.4rem; font-family: monospace; font-size: 0.875rem; }
.diagram-card:not(.hot) .card-temp { color: var(--muted-fg); }
.diagram-card.hot .card-temp { color: rgba(255,255,255,0.8); }
.card-desc { margin-top: 1.5rem; font-size: 1rem; line-height: 1.65; }
.diagram-card:not(.hot) .card-desc { color: var(--muted-fg); }
.diagram-card.hot .card-desc { color: rgba(255,255,255,0.9); }

/* — Outcome cards — */
.outcome-grid { margin-top: 4rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .outcome-grid { grid-template-columns: repeat(3,1fr); } }
.outcome-card { border-radius: 1rem; border: 1px solid var(--border); background: var(--card); padding: 2rem; transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s; }
.outcome-card:hover { box-shadow: var(--shadow-violet); transform: translateY(-4px); border-color: rgba(60,45,107,0.3); }
.outcome-icon { width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; background: rgba(60,45,107,0.08); color: var(--violet-deep); display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; }
.outcome-card:hover .outcome-icon { background: var(--violet-deep); color: #fff; }
.outcome-title { margin-top: 1.5rem; font-size: 1.2rem; font-weight: 700; }
.outcome-body  { margin-top: 0.6rem; font-size: 0.95rem; color: var(--muted-fg); line-height: 1.65; }

/* — Steps — */
.steps { margin-top: 4rem; display: grid; gap: 1.5rem; list-style: none; }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4,1fr); } }
.step { border-radius: 1rem; border: 1px solid var(--border); background: var(--card); padding: 1.75rem; transition: border-color 0.2s; }
.step:hover { border-color: rgba(60,45,107,0.35); }
.step-head  { display: flex; align-items: center; justify-content: space-between; }
.step-num   { font-family: monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; color: var(--muted-fg); }
.step-icon  { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(60,45,107,0.08); color: var(--violet-deep); display: flex; align-items: center; justify-content: center; }
.step-title { margin-top: 1.5rem; font-size: 1.2rem; font-weight: 700; }
.step-body  { margin-top: 0.4rem; font-size: 0.875rem; color: var(--muted-fg); line-height: 1.65; }

/* — Team — */
.team-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .team-grid { grid-template-columns: 5fr 7fr; align-items: start; } }
.team-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.affiliations-card { background: rgba(255,255,255,0.82); backdrop-filter: blur(8px); padding: 2rem; }
.aff-eyebrow { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-fg); }
.aff-grid { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
@media (min-width: 768px) { .aff-grid { grid-template-columns: repeat(3,1fr); } }
.aff-item { border: 1px dashed var(--border); background: var(--bg); border-radius: 0.75rem; padding: 1.5rem 1rem; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--muted-fg); }
.aff-note { margin-top: 1.5rem; font-size: 0.75rem; color: var(--muted-fg); }

/* — Contact — */
.contact-grid { display: grid; gap: 4rem; align-items: start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } .contact-sticky { position: sticky; top: 8rem; } }
.contact-email { display: block; margin-top: 2rem; color: var(--violet-deep); font-weight: 600; font-size: 0.95rem; }
.contact-email:hover { text-decoration: underline; }
.form-card { padding: 2rem; }
.form-row { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
@media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; }
.form-label { font-size: 0.875rem; font-weight: 600; }
.form-input, .form-select, .form-textarea { width: 100%; border: 1px solid var(--border); background: var(--bg); border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 1rem; font-family: var(--font); color: var(--fg); outline: none; transition: box-shadow 0.2s, border-color 0.2s; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--violet-soft); box-shadow: 0 0 0 3px rgba(169,155,216,0.25); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--muted-fg); }
.form-textarea { resize: vertical; min-height: 130px; }
.form-submit { width: 100%; margin-top: 0.25rem; }
.form-error { margin-top: 0.25rem; font-size: 0.8rem; color: var(--danger); display: none; }
.form-success { text-align: center; padding: 3rem 1rem; }
.form-success-icon  { font-size: 3rem; margin-bottom: 1rem; }
.form-success-title { font-size: 1.5rem; font-weight: 700; }
.form-success-sub   { margin-top: 0.5rem; color: var(--muted-fg); }