/* ==========================================================
   DLPI Assistant Homepage Styling
   Full replacement script
   - Hides Drupal homepage title block
   - Creates polished intro/hero area above chat
   - Centers chatbot in page
   - Removes slide-up/popup behavior
   - Hides sender labels and timestamps
   - Uses one divider line between chat exchanges
   - Styles six dissertation-aligned framework cards below chat
   ========================================================== */


/* ==========================================================
   1. Homepage background and page-title cleanup
   ========================================================== */

body.path-frontpage,
body.path-home,
body.path-frontpage main,
body.path-home main,
body.path-frontpage .layout-container,
body.path-home .layout-container,
body.path-frontpage .main-content,
body.path-home .main-content,
body.path-frontpage .region-content,
body.path-home .region-content,
body.path-frontpage .page-wrapper,
body.path-home .page-wrapper {
  background: #ffffff !important;
}

/* Hide Drupal's page title block on the homepage if it appears */
body.path-frontpage .block-page-title-block,
body.path-home .block-page-title-block,
body.path-frontpage #block-basecore-page-title,
body.path-home #block-basecore-page-title {
  display: none !important;
}

/* Hide default starter homepage hero if JS marks it */
body.path-frontpage .dlpi-hidden-default-hero,
body.path-home .dlpi-hidden-default-hero,
body.path-frontpage .dlpi-hide-default-hero,
body.path-home .dlpi-hide-default-hero {
  display: none !important;
}


/* ==========================================================
   2. Chatbot block wrapper
   ========================================================== */

/* Move chatbot block into the page instead of fixed slide-up */
body.path-frontpage .block-ai-chat-form,
body.path-frontpage .block-ai-chat-form.contextual-region,
body.path-home .block-ai-chat-form,
body.path-home .block-ai-chat-form.contextual-region {
  position: static !important;
  z-index: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: min(980px, 92vw) !important;
  max-width: 980px !important;
  margin: 2rem auto 5rem auto !important;
  overflow: visible !important;
  resize: none !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* ==========================================================
   3. Intro / hero area above the chat
   Uses the existing DLPI Assistant block title.
   ========================================================== */

body.path-frontpage .block-ai-chat-form > h2,
body.path-home .block-ai-chat-form > h2,
body.path-frontpage .block-ai-chat-form .block__title,
body.path-home .block-ai-chat-form .block__title,
body.path-frontpage .block-ai-chat-form .block-title,
body.path-home .block-ai-chat-form .block-title,
body.path-frontpage #block-basecore-aichatbot > h2,
body.path-home #block-basecore-aichatbot > h2,
body.path-frontpage [id*="aichatbot"] > h2,
body.path-home [id*="aichatbot"] > h2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(980px, 92vw) !important;
  margin: 2.25rem auto 1.5rem auto !important;
  padding: 2.25rem 2rem 2.15rem 2rem !important;
  text-align: center !important;
  color: #1f2937 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
  font-size: clamp(2.35rem, 4.6vw, 3.85rem) !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* Small label above DLPI Assistant */
body.path-frontpage .block-ai-chat-form > h2::before,
body.path-home .block-ai-chat-form > h2::before,
body.path-frontpage .block-ai-chat-form .block__title::before,
body.path-home .block-ai-chat-form .block__title::before,
body.path-frontpage .block-ai-chat-form .block-title::before,
body.path-home .block-ai-chat-form .block-title::before,
body.path-frontpage #block-basecore-aichatbot > h2::before,
body.path-home #block-basecore-aichatbot > h2::before,
body.path-frontpage [id*="aichatbot"] > h2::before,
body.path-home [id*="aichatbot"] > h2::before {
  content: "Dual-Language Program Integrity" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 90% !important;
  margin: 0 auto 1rem auto !important;
  padding: 0.45rem 0.95rem !important;
  border-radius: 999px !important;
  background: #eef2f7 !important;
  color: #26323a !important;
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Description below DLPI Assistant */
body.path-frontpage .block-ai-chat-form > h2::after,
body.path-home .block-ai-chat-form > h2::after,
body.path-frontpage .block-ai-chat-form .block__title::after,
body.path-home .block-ai-chat-form .block__title::after,
body.path-frontpage .block-ai-chat-form .block-title::after,
body.path-home .block-ai-chat-form .block-title::after,
body.path-frontpage #block-basecore-aichatbot > h2::after,
body.path-home #block-basecore-aichatbot > h2::after,
body.path-frontpage [id*="aichatbot"] > h2::after,
body.path-home [id*="aichatbot"] > h2::after {
  content: "AI-supported guidance for dual-language program integrity. Explore equity, implementation, leadership, monitoring, and multilingual learner support through a framework developed from the doctoral research of Dr. Juan Carlos Zayas." !important;
  display: block !important;
  max-width: 720px !important;
  margin: 1.1rem auto 0 auto !important;
  color: #4b5563 !important;
  font-size: clamp(0.98rem, 1.45vw, 1.15rem) !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  white-space: normal !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* ==========================================================
   4. Main chat panel
   ========================================================== */

body.path-frontpage .ai-live-chat,
body.path-home .ai-live-chat {
  position: static !important;
  z-index: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 900px !important;
  min-height: 540px !important;
  margin: 0 auto !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12) !important;
  font-size: 16px !important;
}

/* Dark top bar inside the chat window */
body.path-frontpage .ai-live-chat > h2,
body.path-home .ai-live-chat > h2 {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 1.25rem 2rem !important;
  text-align: left !important;
  color: #ffffff !important;
  background: #26323a !important;
  border: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

/* Prevent intro pseudo-text from appearing in the small chat header */
body.path-frontpage .ai-live-chat > h2::before,
body.path-home .ai-live-chat > h2::before,
body.path-frontpage .ai-live-chat > h2::after,
body.path-home .ai-live-chat > h2::after {
  content: none !important;
  display: none !important;
}


/* ==========================================================
   5. Chat history / message area
   ========================================================== */

body.path-frontpage .chat-history,
body.path-home .chat-history {
  min-height: 380px !important;
  max-height: 520px !important;
  overflow-y: auto !important;
  padding: 2rem !important;
  background: #ffffff !important;
}

/* Message row layout: avatar left, message text right */
body.path-frontpage .ai-live-chat .chat-history .chat-message,
body.path-home .ai-live-chat .chat-history .chat-message,
body.path-frontpage .block-ai-chat-form .chat-history .chat-message,
body.path-home .block-ai-chat-form .chat-history .chat-message {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  column-gap: 1.25rem !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 1.25rem 0 !important;
  border-bottom: none !important;
  color: #2d2d2d !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

/* Avatar/icon sizing */
body.path-frontpage .ai-live-chat .chat-history .chat-message img,
body.path-home .ai-live-chat .chat-history .chat-message img,
body.path-frontpage .block-ai-chat-form .chat-history .chat-message img,
body.path-home .block-ai-chat-form .chat-history .chat-message img {
  grid-column: 1 !important;
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
}

/* Message text */
body.path-frontpage .ai-live-chat .chat-history .chat-message-content,
body.path-frontpage .ai-live-chat .chat-history .chat-message-message,
body.path-frontpage .ai-live-chat .chat-history p,
body.path-home .ai-live-chat .chat-history .chat-message-content,
body.path-home .ai-live-chat .chat-history .chat-message-message,
body.path-home .ai-live-chat .chat-history p,
body.path-frontpage .block-ai-chat-form .chat-history .chat-message-content,
body.path-frontpage .block-ai-chat-form .chat-history .chat-message-message,
body.path-frontpage .block-ai-chat-form .chat-history p,
body.path-home .block-ai-chat-form .chat-history .chat-message-content,
body.path-home .block-ai-chat-form .chat-history .chat-message-message,
body.path-home .block-ai-chat-form .chat-history p {
  grid-column: 2 !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  white-space: normal !important;
  color: #2d2d2d !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}


/* ==========================================================
   6. Hide repeated labels and timestamps
   ========================================================== */

/* Hide repeated sender labels such as "Chatbot" and "DLPI Chat" */
body.path-frontpage .ai-live-chat .chat-user,
body.path-home .ai-live-chat .chat-user,
body.path-frontpage .block-ai-chat-form .chat-user,
body.path-home .block-ai-chat-form .chat-user,
body.path-frontpage .chat-history .chat-user,
body.path-home .chat-history .chat-user {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Hide timestamps */
body.path-frontpage .ai-live-chat .chat-time,
body.path-home .ai-live-chat .chat-time,
body.path-frontpage .block-ai-chat-form .chat-time,
body.path-home .block-ai-chat-form .chat-time,
body.path-frontpage .chat-history .chat-time,
body.path-home .chat-history .chat-time {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* ==========================================================
   7. One divider line between chat exchanges
   ========================================================== */

body.path-frontpage .ai-live-chat .chat-history hr,
body.path-home .ai-live-chat .chat-history hr,
body.path-frontpage .block-ai-chat-form .chat-history hr,
body.path-home .block-ai-chat-form .chat-history hr {
  display: block !important;
  border: 0 !important;
  border-top: 2px solid #9ca3af !important;
  margin: 1.75rem 0 !important;
  height: 0 !important;
  background: transparent !important;
}


/* ==========================================================
   8. Form / search area
   ========================================================== */

body.path-frontpage .block-ai-chat-form form,
body.path-home .block-ai-chat-form form {
  display: block !important;
  padding: 1.25rem 2rem 2rem 2rem !important;
  background: #ffffff !important;
}

/* Prompt box */
body.path-frontpage .block-ai-chat-form .chat-form-query,
body.path-home .block-ai-chat-form .chat-form-query {
  width: 100% !important;
  min-height: 72px !important;
  margin: 0 !important;
  resize: vertical !important;
  border-radius: 24px !important;
  border: 1px solid #d0d7de !important;
  padding: 20px 28px !important;
  font-size: 1.15rem !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}

/* Send button, if visible */
body.path-frontpage .block-ai-chat-form .chat-form-send,
body.path-home .block-ai-chat-form .chat-form-send {
  margin-top: 1rem !important;
  border-radius: 999px !important;
  padding: 0.75rem 1.5rem !important;
}


/* ==========================================================
   9. Six dissertation-aligned framework cards below chat
   These are link-ready cards inserted by JS.
   ========================================================== */

body.path-frontpage .dlpi-feature-cards,
body.path-home .dlpi-feature-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  width: min(980px, 92vw) !important;
  max-width: 980px !important;
  margin: 2.5rem auto 5rem auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
}

body.path-frontpage .dlpi-feature-card,
body.path-home .dlpi-feature-card {
  display: block !important;
  min-height: 250px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 22px !important;
  padding: 1.5rem 1.35rem !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important;
  text-align: left !important;
  text-decoration: none !important;
  color: inherit !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

body.path-frontpage .dlpi-feature-card:hover,
body.path-home .dlpi-feature-card:hover {
  transform: translateY(-4px) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12) !important;
  text-decoration: none !important;
}

body.path-frontpage .dlpi-feature-icon,
body.path-home .dlpi-feature-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1rem !important;
  background: #eef2f7 !important;
  color: #26323a !important;
}

body.path-frontpage .dlpi-feature-icon i,
body.path-home .dlpi-feature-icon i,
body.path-frontpage .dlpi-feature-icon svg,
body.path-home .dlpi-feature-icon svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  font-size: 1.25rem !important;
}

body.path-frontpage .dlpi-feature-card h3,
body.path-home .dlpi-feature-card h3 {
  margin: 0 0 0.65rem 0 !important;
  color: #1f2937 !important;
  font-size: 1.12rem !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

body.path-frontpage .dlpi-feature-card p,
body.path-home .dlpi-feature-card p {
  margin: 0 !important;
  color: #4b5563 !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}


/* ==========================================================
   10. Mobile refinements
   ========================================================== */

@media (max-width: 980px) {
  body.path-frontpage .dlpi-feature-cards,
  body.path-home .dlpi-feature-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.path-frontpage .block-ai-chat-form,
  body.path-home .block-ai-chat-form {
    width: min(94vw, 980px) !important;
    margin: 1.5rem auto 4rem auto !important;
  }

  body.path-frontpage .block-ai-chat-form > h2,
  body.path-home .block-ai-chat-form > h2,
  body.path-frontpage .block-ai-chat-form .block__title,
  body.path-home .block-ai-chat-form .block__title,
  body.path-frontpage .block-ai-chat-form .block-title,
  body.path-home .block-ai-chat-form .block-title {
    margin: 2rem auto 1.5rem auto !important;
    padding: 2.25rem 1.25rem !important;
    font-size: clamp(2.25rem, 9vw, 3.5rem) !important;
  }

  body.path-frontpage .block-ai-chat-form > h2::before,
  body.path-home .block-ai-chat-form > h2::before,
  body.path-frontpage .block-ai-chat-form .block__title::before,
  body.path-home .block-ai-chat-form .block__title::before,
  body.path-frontpage .block-ai-chat-form .block-title::before,
  body.path-home .block-ai-chat-form .block-title::before {
    font-size: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  body.path-frontpage .block-ai-chat-form > h2::after,
  body.path-home .block-ai-chat-form > h2::after,
  body.path-frontpage .block-ai-chat-form .block__title::after,
  body.path-home .block-ai-chat-form .block__title::after,
  body.path-frontpage .block-ai-chat-form .block-title::after,
  body.path-home .block-ai-chat-form .block-title::after {
    font-size: 1rem !important;
  }

  body.path-frontpage .chat-history,
  body.path-home .chat-history {
    padding: 1.25rem !important;
  }

  body.path-frontpage .block-ai-chat-form form,
  body.path-home .block-ai-chat-form form {
    padding: 1rem 1.25rem 1.5rem 1.25rem !important;
  }

  body.path-frontpage .block-ai-chat-form .chat-form-query,
  body.path-home .block-ai-chat-form .chat-form-query {
    min-height: 64px !important;
    padding: 16px 20px !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 640px) {
  body.path-frontpage .dlpi-feature-cards,
  body.path-home .dlpi-feature-cards {
    grid-template-columns: 1fr !important;
  }

  body.path-frontpage .dlpi-feature-card,
  body.path-home .dlpi-feature-card {
    min-height: auto !important;
  }
}

/* ==========================================================
   DLPI Spacing Refinements
   Tightens space between hero card and chat panel
   ========================================================== */

body.path-frontpage .block-ai-chat-form,
body.path-home .block-ai-chat-form {
  margin-top: 1rem !important;
  margin-bottom: 3.5rem !important;
}

body.path-frontpage .block-ai-chat-form > h2,
body.path-home .block-ai-chat-form > h2,
body.path-frontpage [id*="aichatbot"] > h2,
body.path-home [id*="aichatbot"] > h2 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.15rem !important;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

body.path-frontpage .ai-live-chat,
body.path-home .ai-live-chat {
  margin-top: 0 !important;
}

/* ==========================================================
   DLPI Header / Gray Band Cleanup
   Removes leftover gray homepage bands
   ========================================================== */

body.path-frontpage,
body.path-home,
body.path-frontpage main,
body.path-home main,
body.path-frontpage .main,
body.path-home .main,
body.path-frontpage .main-content,
body.path-home .main-content,
body.path-frontpage .page-wrapper,
body.path-home .page-wrapper,
body.path-frontpage .layout-container,
body.path-home .layout-container,
body.path-frontpage .region-content,
body.path-home .region-content,
body.path-frontpage .region-highlighted,
body.path-home .region-highlighted,
body.path-frontpage .region-breadcrumb,
body.path-home .region-breadcrumb,
body.path-frontpage .breadcrumb,
body.path-home .breadcrumb,
body.path-frontpage [class*="highlighted"],
body.path-home [class*="highlighted"],
body.path-frontpage [class*="breadcrumb"],
body.path-home [class*="breadcrumb"] {
  background: #ffffff !important;
}

/* Reduce empty vertical space between site header and DLPI hero */
body.path-frontpage .region-highlighted,
body.path-home .region-highlighted,
body.path-frontpage .region-breadcrumb,
body.path-home .region-breadcrumb {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Hide visible breadcrumb text/area on the homepage if it reappears */
body.path-frontpage .breadcrumb,
body.path-home .breadcrumb,
body.path-frontpage nav.breadcrumb,
body.path-home nav.breadcrumb {
  display: none !important;
}