/*
 * Homepage styles. This is the inline <style> of php-final:index.php:54-370, moved unchanged
 * except where a comment says so. The hero ask form and answer rules (.hero-ai-*,
 * #hero-ai-answer) stay here because the assistant island (m2-web-assistant) renders
 * that markup inside #hero-ai.
 */

.bg-head {
  position: relative;
  overflow: hidden;
  min-height: 650px; /* adjust as needed */
  /*
   * Changed (#120): global.css centers the banner vertically. The banner is always taller
   * than the min-height content box (at 390 to 2560 px wide), so centering does not change
   * the final layout. But the browser can paint the hero before the parser reaches the
   * AskHero island script. That paint shows only the h1, centered, and the banner then
   * moves up by about 200 px (mobile CLS 0.165). With flex-start the h1 paints at its
   * final position.
   */
  align-items: flex-start;
}

.bg-head-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.bg-head-overlay {
  position: absolute;
  inset: 0;
}

.home-banner,
.headerbox {
  position: relative;
  z-index: 2;
}

.headerbox {
  background: none;
  padding: 0;
  box-shadow: none;
}

/* Dropped: `.headerbox h1, .headerbox p { color: None; }` (php-final:index.php:90-94). "None" is
   not a valid colour, so the browser always ignored the rule. */

/* AI Prompt */

/* Was an inline style on the button (php-final:index.php:427). Hover keeps the same green. */
#hero-ai-ask-btn {
  background: #6daf71 !important;
  border-color: #6daf71 !important;
}
.hero-ai-search {
  display: flex;
  align-items: center;
  max-width: 850px;
  margin: 30px auto 0;
  background: #fff;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  overflow: hidden;
}

.hero-ai-search input {
  flex: 1;
  border: none;
  padding: 20px 24px;
  font-size: 1.15rem;
  height: 72px;
  box-shadow: none;
}

.hero-ai-search input:focus {
  outline: none;
  box-shadow: none;
}

/* Added (not in php-final:index.php): a visible keyboard focus ring. The parent has
   overflow: hidden, so the ring is inset; an outside ring would be clipped.
   #4e7351 has 5.39:1 contrast on white; #1f1f22 has 6.28:1 on the green button. */
.hero-ai-search input:focus-visible {
  outline: 2px solid var(--modalheader);
  outline-offset: -4px;
  border-radius: 8px;
}

.hero-ai-search .btn:focus-visible {
  outline: 2px solid #1f1f22;
  outline-offset: -4px;
  box-shadow: none;
}

.hero-ai-search .btn {
  height: 72px;
  padding: 0 34px;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  .hero-ai-search {
    flex-direction: column;
  }

  .hero-ai-search input,
  .hero-ai-search .btn {
    width: 100%;
    height: 64px;
  }
}

/*
 * The slot keeps a constant height while text arrives, so the hero image keeps its scale.
 * The white box in it fits the text and scrolls at the slot height (#228).
 */
.hero-ai-answer-slot {
  --answer-height: min(40vh, 320px);
  height: var(--answer-height);
  /* Bootstrap mb-4, without its !important: the close animation must change it. */
  margin-bottom: 1.5rem;
  /* AskHero closes the slot in the same time (SLOT_MS). */
  animation: hero-ai-slot-open 200ms ease-out;
}

@keyframes hero-ai-slot-open {
  from {
    height: 0;
    opacity: 0;
  }
}

/* global.css shortens animations to 0.01ms, but the first frame still has height 0. */
@media (prefers-reduced-motion: reduce) {
  .hero-ai-answer-slot {
    animation: none;
  }
}

.hero-ai-answer {
  max-width: 850px;
  max-height: var(--answer-height);
  overflow-y: auto;
  /* A scrollbar that appears must not make the lines narrower and wrap them again. */
  scrollbar-gutter: stable;
  /* AskHero sets the height for each new text, so that a new line slides in. */
  transition: height 150ms ease-out;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  padding: 18px 24px;
  text-align: left;
  font-size: 1rem;
  color: #1f1f22;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
  .hero-ai-answer-slot {
    --answer-height: min(30vh, 320px);
  }
}

.hero-ai-answer.loading {
  color: #697174;
  font-style: italic;
}

.hero-ai-answer p {
  margin: 0 0 12px;
}

.hero-ai-answer p:last-child {
  margin-bottom: 0;
}

.hero-ai-answer ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.hero-ai-answer li {
  margin-bottom: 6px;
}

.hero-ai-answer b {
  font-weight: 700;
}

.hero-ai-answer,
.hero-ai-answer * {
  font-family: 'Avenir', Arial, sans-serif;
  color: #4e7351 !important;
  font-size: 16px;
  line-height: 1.6;
}

.hero-ai-answer p,
.hero-ai-answer ul,
.hero-ai-answer ol,
.hero-ai-answer li,
.hero-ai-answer strong,
.hero-ai-answer b,
.hero-ai-answer span {
  color: #4e7351 !important;
}

.hero-ai-answer ul,
.hero-ai-answer ol {
  margin: 12px 0 12px 24px;
  padding-left: 20px;
}

.hero-ai-answer li {
  font-family: 'Avenir', Arial, sans-serif;
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.hero-ai-answer strong,
.hero-ai-answer b {
  color: #4e7351 !important;
  font-weight: 700;
}

.hero-ai-answer li {
  color: #4e7351 !important;
}

.hero-ai-answer li * {
  color: #4e7351 !important;
}

.hero-ai-answer li::marker {
  color: #4e7351 !important;
}

/*
 * Accepted difference (m2-web-assistant): php-final:index.php has no .hero-ai-close rule, so the
 * PHP close button shows as a default grey browser button. The island gives it a
 * visible, borderless style in the top right corner of the answer box.
 */
.hero-ai-close {
  position: sticky;
  top: 0;
  z-index: 1;
  float: right;
  margin: -10px -14px 0 12px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  font-size: 28px;
  line-height: 1.2;
  cursor: pointer;
}

.hero-ai-close:hover {
  background: #eef5ee;
}

.hero-ai-close:focus-visible {
  outline: 3px solid #6daf71;
  outline-offset: 2px;
}

.hero-ai-interrupted {
  margin-top: 12px;
}

.demo-button {
  background: #6daf71 !important;
  background-color: #6daf71 !important;
  border-color: #6daf71 !important;
  color: #fff !important;
}
.demo-button:hover,
.demo-button:focus,
.demo-button:active {
  background: #5f9f63 !important;
  background-color: #5f9f63 !important;
  border-color: #5f9f63 !important;
  color: #fff !important;
}

.tagbarsection2 {
  background-color: #f2f2f2;
  width: 100%;
}

.tagbar-row2 {
  display: flex;
  align-items: center;
  gap: 50px;
}

.tagbar-copy2 {
  flex: 1;
}

.tagbar-image2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tagbar-image2 img {
  width: 60%;
  height: auto;
  display: block;
}

/* Mobile */
@media (max-width: 768px) {
  .tagbar-row2 {
    flex-direction: column;
    gap: 30px;
  }

  .tagbar-copy2,
  .tagbar-image2 {
    width: 100%;
  }

  .tagbar-image2 img {
    width: 70%;
  }
}

.tagbar-copy2 {
  flex: 1;
  padding-left: 200px;
}

.tagbarsection3 {
  background-color: #ffffff;
  width: 100%;
}

.tagbar-row3 {
  display: flex;
  align-items: center;
  gap: 60px;
}

.tagbar-image3 {
  flex: 0 0 45%;
}

.tagbar-image3 img {
  width: 60%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.tagbar-content3 {
  flex: 1;
}

.tagbar-content3 h2 {
  margin-top: 0;
}

.tagbar-content3 p {
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .tagbar-row3 {
    flex-direction: column;
    gap: 30px;
  }

  .tagbar-image3 {
    flex: 0 0 100%;
    width: 100%;
  }

  .tagbar-content3 {
    width: 100%;
  }
}

.tagbar-content3 h2 {
  margin-top: 0;
  text-align: left;
}

/* Force AI response text to black */
#hero-ai-answer,
#hero-ai-answer * {
  color: #000 !important;
}

#hero-ai-answer li::marker {
  color: #000 !important;
}