/* Split Hero Layout for Crow Lite Child */
.crow-hero {
  position: relative;
  min-height: 60vh;            /* slightly shorter since we're not doing a dramatic BG */
  display: grid;
  place-items: center;
  background: transparent;     /* <-- inherit page background */
  color: inherit;              /* <-- inherit page text color */
}

/* Kill the old overlay if the markup still exists */
.crow-hero-overlay { display: none !important; }

.crow-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  padding: 2.5rem 1.25rem;     /* tighter padding without the dark BG */
  display: grid;
  grid-template-columns: 1fr 420px; /* LEFT (Pieter) | RIGHT (Promo) */
  gap: 32px;
  align-items: center;
}

/* Left column */
.crow-hero-left .hero-text { margin-bottom: 1rem; }
.crow-hero-left .hero-text h1 {
  margin: 0 0 .25em;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.05;
}
.crow-hero-left .hero-text p {
  margin: 0 0 1rem;
  opacity: .9;
  font-size: clamp(16px, 1.8vw, 20px);
}

/* Right column (Promo) — blend with page background */
.crow-hero-right {
  background: transparent;     /* flat, no card */
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  color: inherit;
}
.crow-hero-right .widget,
.crow-hero-right .promo-placeholder {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 12px;
}
.crow-hero-right .widget-title,
.crow-hero-right h3 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
}

/* Links follow theme colors */
.crow-hero-right a { color: inherit; text-decoration: underline; }
.crow-hero-right a:hover { text-decoration: none; }

/* Mobile — just the avatar (promo + extra text hidden) */
@media (max-width: 768px) {
  .crow-hero { min-height: 50vh; }
  .crow-hero-inner { grid-template-columns: 1fr; gap: 0; }
  .crow-hero-left .hero-text,
  .crow-hero-right { display: none !important; }
}

/* OPTIONAL: If you want Pieter's static avatar visible on mobile (not only the slide-out), uncomment:
@media (max-width: 768px) {
  .pieter-avatar { display: block !important; }
}
*/
/* ===== Pieter layout tweaks (desktop only) ===== */
@media (min-width: 769px) {
  /* Put avatar + chat panel side-by-side inside the hero */
  .crow-hero .pieter-wrap {
    display: inline-flex;            /* avatar + panel in a row */
    align-items: flex-start;
    gap: 16px;
  }

  /* Enlarge avatar by ~25% (from 120 → 150px) */
  .crow-hero .pieter-avatar {
    width: 150px;
    height: 150px;
  }

  /* Keep the little speech bubble near the avatar; optional tweak */
  .crow-hero .pieter-speech {
    left: 50%;
    transform: translateX(-50%);
  }

  /* Re-anchor chat panel within the hero instead of fixed bottom-right */
  .crow-hero .pieter-panel {
    position: static !important;     /* override plugin's fixed positioning */
    right: auto !important;
    bottom: auto !important;
    width: 380px;                    /* a touch wider looks nicer beside the avatar */
    max-height: 60vh;                /* don't let it grow too tall */
    /* inherits display logic: shown when .pieter-wrap has .open */
  }

  /* Hide the mobile slide-out tab on desktop */
  .crow-hero .pieter-tab { display: none !important; }
}

/* Keep mobile behavior (slide-out) unchanged */

/* ===== Put Pieter + chat panel INSIDE the hero, always visible on desktop ===== */
@media (min-width: 769px) {
  /* Stop the mount from being absolutely positioned by the plugin presets */
  .crow-hero .pieter-avatar-mount {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  /* Lay out avatar and panel side-by-side in the hero's left column */
  .crow-hero .pieter-wrap {
    display: inline-flex;
    align-items: flex-start;
    gap: 16px;
  }

  /* Make the avatar ~25% bigger (120px -> 150px) */
  .crow-hero .pieter-avatar {
    width: 150px !important;
    height: 150px !important;
  }

  /* Keep things tidy: optional—hide the little speech bubble on desktop */
  .crow-hero .pieter-speech { display: none !important; }

  /* RELOCATE the chat panel: from fixed corner -> inline beside avatar */
  .crow-hero .pieter-panel {
    position: static !important;        /* override fixed */
    right: auto !important;
    bottom: auto !important;
    width: 380px;                        /* tweak as you like */
    max-height: 60vh;
    display: flex !important;            /* always visible (no click needed) */
    box-shadow: 0 10px 24px rgba(0,0,0,.08); /* softer shadow for inline look */
  }

  /* Kill the desktop-only UI bits we don't need */
  .crow-hero .pieter-close,
  .crow-hero .pieter-tab {               /* tab is the mobile slide-out control */
    display: none !important;
  }

  /* OPTIONAL: if clicking the avatar toggles the class and annoys you */
  /* .crow-hero .pieter-avatar { pointer-events: none; cursor: default; } */
}

/* Mobile stays as-is: avatar + slide-out panel from the edge */
/* Always readable text inside the chat */
.crow-hero .pieter-panel { color: inherit; background: #fff; }

/* Style the first greeting bubble (the one we inject) */
.crow-hero .pieter-messages .msg-bot:first-child .bubble {
  font-weight: 600;
  border-color: #ddd;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* (We’re no longer showing that header bar, but if any remnants exist) */
.crow-hero .pieter-header,
.crow-hero .pieter-header * { color: inherit !important; background: transparent !important; }

/* === Force readable (dark) text in Pieter chat === */

/* Desktop: panel lives inside the hero */
@media (min-width: 769px) {
  .crow-hero .pieter-panel {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #e5e7eb !important;
  }
  .crow-hero .pieter-messages,
  .crow-hero .pieter-messages .bubble,
  .crow-hero .pieter-options .opt {
    color: #111 !important;
  }
  .crow-hero .msg-user .bubble,
  .crow-hero .msg-bot .bubble {
    background: #f8f8f8;           /* tidy neutral bubbles */
    border-color: #e5e7eb;
  }
  .crow-hero .pieter-input {
    color: #111 !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
  }
  .crow-hero .pieter-input::placeholder { color: #666 !important; }
  .crow-hero .pieter-send { color: #fff !important; } /* keep button legible */
}

/* Mobile: the panel slides out (outside the hero), so force it globally too */
@media (max-width: 768px) {
  .pieter-panel {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #e5e7eb !important;
  }
  .pieter-messages,
  .pieter-messages .bubble,
  .pieter-options .opt {
    color: #111 !important;
  }
  .pieter-input {
    color: #111 !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
  }
  .pieter-input::placeholder { color: #666 !important; }
}

/* Temporarily blank out the right promo column but keep its width */
@media (min-width: 769px){
  .crow-hero-right { visibility: hidden; }  /* reserves space, hides content */
}

/* === MOBILE FIXES (≤768px) ================================================ */
@media (max-width: 768px){

  /* 1) Kill the big empty hero gap */
  .crow-hero {
    min-height: 0 !important;
    padding: 0.75rem 1rem !important;
  }
  .crow-hero-inner {
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* 2) Show the avatar on mobile (plugin hid it) */
  .crow-hero .pieter-avatar { 
    display: block !important; 
    width: 120px !important; 
    height: 120px !important; 
    margin: 0.5rem auto 0 !important; 
  }
  /* Keep mount in normal flow */
  .crow-hero .pieter-avatar-mount {
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  }
  /* Hide the little speech nub if it crowds the layout */
  .crow-hero .pieter-speech { display: none !important; }

  /* 3) Make slide-out panel readable on white and above other UI */
  .pieter-panel {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #e5e7eb !important;
    z-index: 99999 !important;
  }
  .pieter-messages,
  .pieter-messages .bubble,
  .pieter-options .opt {
    color: #111 !important;
  }
  .msg-user .bubble,
  .msg-bot  .bubble {
    background: #f8f8f8 !important;
    border-color: #e5e7eb !important;
  }
  .pieter-input {
    color: #111 !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
  }
  .pieter-input::placeholder { color: #666 !important; }
  .pieter-send { color: #fff !important; } /* keep button legible */

  /* 4) Make sure promo column + any leftover hero text are gone on mobile */
  .crow-hero-right,
  .crow-hero-left .hero-text { display: none !important; }
}
/* ===== Desktop slide-out beside avatar ===== */
@media (min-width: 769px){
  /* Put avatar + panel in a relative container so panel can anchor to it */
  .crow-hero .pieter-avatar-mount { position: static !important; }
  .crow-hero .pieter-wrap {
    --pieter-size: 150px;   /* avatar size */
    --pieter-gap: 16px;     /* space between avatar and panel */
    position: relative; 
    display: inline-block; 
  }

  /* Bigger avatar (and keep it above hero background) */
  .crow-hero .pieter-avatar { 
    width: var(--pieter-size) !important; 
    height: var(--pieter-size) !important; 
    z-index: 2; 
  }

  /* Show the tab/button on desktop too */
  .crow-hero .pieter-tab {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: .45rem .75rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #111;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
  }
  .crow-hero .pieter-tab:hover { transform: translateY(-1px); }

  /* Panel: anchored to the right of the avatar; starts CLOSED (hidden) */
  .crow-hero .pieter-panel {
    position: absolute !important;
    left: calc(var(--pieter-size) + var(--pieter-gap));
    top: 0;
    width: clamp(300px, 32vw, 420px);
    max-height: 60vh;
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
    border-radius: 16px;
    overflow: hidden;

    /* closed state */
    opacity: 0;
    transform: translateX(-12px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 3;  /* above avatar, but we positioned it BESIDE so no overlap */
  }

  /* OPEN state: when JS toggles .open on wrap */
  .crow-hero .pieter-wrap.open .pieter-panel {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease, transform .18s ease;
  }

  /* We removed the header earlier; keep bubbles tidy & readable */
  .crow-hero .pieter-messages .bubble { 
    background: #f8f8f8; 
    border: 1px solid #e5e7eb; 
    color:#111; 
  }
  .crow-hero .pieter-input {
    color:#111 !important; background:#fff !important; border:1px solid #ddd !important;
  }
  .crow-hero .pieter-input::placeholder { color:#666 !important; }
}

/* ===== Mobile keeps slide-out from screen edge (and readable) ===== */
@media (max-width: 768px){
  .pieter-panel {
    background:#fff !important; color:#111 !important; border:1px solid #e5e7eb !important;
  }
  .pieter-messages .bubble { background:#f8f8f8 !important; border-color:#e5e7eb !important; color:#111 !important; }
  .pieter-input { color:#111 !important; background:#fff !important; border:1px solid #ddd !important; }
  .pieter-input::placeholder { color:#666 !important; }
}
/* ==== TEMP: disable Pieter on mobile (<=768px) ==== */
@media (max-width: 768px){
  /* hide everything related to the assistant */
  .pieter-avatar-mount,
  .pieter-wrap,
  .pieter-panel,
  .pieter-tab { display: none !important; }

  /* collapse the hero so there’s no big blank gap */
  .crow-hero { min-height: 0 !important; padding: 0 !important; }
  .crow-hero-inner { display: block !important; padding: 0 !important; gap: 0 !important; }
}