@import './peach.css';

:root {
  --site-max-width: 1400px;
  --primary-color: #fffaf4;
  --secondary-color: #ffe7cd;
  --accent-color: #ff8b26;
  --background-color: #fff6ed;
  --dark-background-color: #3a2314;
  --text-color: color-mix(in srgb, var(--dark-background-color) 84%, var(--background-color) 16%);

  --nav-background-color: color-mix(in srgb, var(--background-color) 84%, var(--primary-color) 16%);
  --nav-text-color: color-mix(in srgb, var(--dark-background-color) 82%, var(--background-color) 18%);
  --nav-active-background: color-mix(in srgb, var(--accent-color) 16%, var(--background-color) 84%);
  --nav-active-text: color-mix(in srgb, var(--dark-background-color) 88%, var(--background-color) 12%);

  --dark-button-color: color-mix(in srgb, var(--dark-background-color) 92%, var(--accent-color) 8%);
  --button-color: color-mix(in srgb, var(--accent-color) 72%, var(--dark-background-color) 28%);
  --button-hover-color: color-mix(in srgb, var(--accent-color) 58%, var(--dark-background-color) 42%);
  --button-text-color: var(--primary-color);

  --border-color: color-mix(in srgb, var(--dark-background-color) 18%, transparent);
  --shadow-soft: 0 20px 52px color-mix(in srgb, var(--dark-background-color) 12%, transparent);
  --shadow-card: 0 16px 38px color-mix(in srgb, var(--dark-background-color) 14%, transparent);
  --panel-shadow: 0 24px 72px color-mix(in srgb, var(--dark-background-color) 18%, transparent);
  --panel-shadow-soft: 0 14px 36px color-mix(in srgb, var(--dark-background-color) 12%, transparent);
  --panel-shadow-inset: inset 0 1px 0 color-mix(in srgb, var(--primary-color) 28%, transparent);

  --surface-color: color-mix(in srgb, var(--background-color) 88%, var(--primary-color) 12%);
  --surface-color-strong: color-mix(in srgb, var(--background-color) 90%, var(--primary-color) 10%);
  --surface-color-soft: color-mix(in srgb, var(--secondary-color) 72%, var(--background-color) 28%);
  --muted-text-color: color-mix(in srgb, var(--text-color) 74%, transparent);
  --soft-text-color: color-mix(in srgb, var(--text-color) 56%, transparent);
  --line-color: color-mix(in srgb, var(--dark-background-color) 14%, transparent);
  --line-strong-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
  --accent-soft-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
  --accent-strong-color: color-mix(in srgb, var(--accent-color) 36%, transparent);

  --theme-background-wash:
    radial-gradient(900px 540px at 8% 8%, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent 60%),
    radial-gradient(760px 480px at 92% 0%, color-mix(in srgb, var(--primary-color) 34%, transparent), transparent 54%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary-color) 78%, var(--background-color) 22%) 0%,
      color-mix(in srgb, var(--background-color) 84%, var(--primary-color) 16%) 48%,
      color-mix(in srgb, var(--background-color) 70%, var(--secondary-color) 30%) 100%
    );
  --orange-panel-background: var(--background-color);
  --orange-panel-background-soft: color-mix(in srgb, var(--background-color) 92%, var(--secondary-color) 8%);
  --orange-card-background: color-mix(in srgb, var(--background-color) 94%, var(--primary-color) 6%);
  --orange-card-shadow: 0 20px 48px color-mix(in srgb, var(--dark-background-color) 12%, transparent);
  --orange-inset-highlight: none;
  --orange-card-shadow-hover: 0 26px 58px color-mix(in srgb, var(--dark-background-color) 16%, transparent);
  --orange-surface-stroke: color-mix(in srgb, var(--dark-background-color) 12%, transparent);
  --orange-hero-overlay:
    linear-gradient(135deg, color-mix(in srgb, var(--background-color) 92%, var(--primary-color) 8%), color-mix(in srgb, var(--background-color) 78%, var(--secondary-color) 22%)),
    linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 18%, transparent), transparent 48%);
}

html,
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

body {
  background: var(--theme-body-background, var(--background-color));
  background-attachment: var(--theme-body-background-attachment, scroll);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-background-color);
  letter-spacing: -0.03em;
}

a {
  color: inherit;
}

::selection {
  background: color-mix(in srgb, var(--accent-color) 24%, transparent);
  color: var(--dark-background-color);
}

.slider-section-title,
.section-title,
.pricing-title,
.contact-us-title,
.contact-us-main-container .headline,
.testimonials-shell h2,
.ae-testimonial-section-heading {
  color: var(--dark-background-color);
}

.slider-section-subtitle,
.section-subtitle,
.contact-us-subtitle,
.team-subtitle,
.ae-testimonial-subheading,
.slider-section-content,
.section-content,
.html-area,
.contact-us-description,
.team-content,
.intro-subtext,
.whisper-description {
  color: var(--muted-text-color);
}

.separator2,
.separator,
.apple-center-text-separator,
.clemo-separator {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--button-color) 92%, var(--primary-color) 8%),
    transparent
  );
}

.btn,
.afhBtn,
.clemo-btn {
  border: 1px solid color-mix(in srgb, var(--button-color) 38%, var(--primary-color) 62%);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent-color) 18%, transparent);
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    background-color 0.24s ease,
    border-color 0.24s ease;
}

.btn:hover,
.afhBtn:hover,
.clemo-btn:hover {
  box-shadow: 0 16px 34px color-mix(in srgb, var(--accent-color) 22%, transparent);
  transform: translateY(-2px);
}

/* Orange override: contact form should not inherit narrow wrapper caps */
app-contact-form .contact-us-form-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

app-contact-form .contact-us-form {
  width: 100% !important;
  max-width: none !important;
}

app-contact-form .contact-us-form input,
app-contact-form .contact-us-form textarea {
  width: 100% !important;
  max-width: 100% !important;
}

/* Orange mobile hardening: consistent spacing/stacking across all components */
@media (max-width: 1024px) {
  html,
  body {
    overflow-x: hidden;
  }

  .centered,
  .peach_services--centered,
  .peach-itemlist.centered,
  .peach-side-text--centered,
  .peach-center-text--centered,
  .orange-faq-shell.centered,
  .cta-split-container.centered {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .peach_services__layout,
  .peach-inner,
  .peach-side-text__shell,
  .peach-center-text-shell,
  .faq-wrapper,
  .cta-split-container,
  .contact-us-main-container,
  .contact-us-wapper,
  .item-carousel-inner,
  .testimonial-carousel-multi-inner,
  .service-slider-container,
  .tabbed-stats-content-row,
  .review-image-shell,
  .simple-contact-us-container,
  .contact-container {
    box-sizing: border-box;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .service-slider-container,
  .cta-split-container,
  .faq-wrapper,
  .contact-us-main-container,
  .contact-container,
  .tabbed-stats-content-row,
  .review-image-shell,
  .item-carousel-inner,
  .testimonial-carousel-multi-inner {
    grid-template-columns: 1fr !important;
  }

  .location-flex-row {
    flex-direction: column !important;
  }

  .location-details,
  .location-image {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  .page-hero-message {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    font-size: clamp(1.8rem, 5vw, 2.55rem) !important;
    line-height: 1.14 !important;
    overflow-wrap: anywhere;
  }

  .orange-theme .clemo-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }
}

@media (max-width: 640px) {
  .peach_services__layout,
  .peach-inner,
  .peach-side-text__shell,
  .peach-center-text-shell,
  .faq-wrapper,
  .cta-split-container,
  .contact-us-main-container,
  .contact-us-wapper,
  .item-carousel-inner,
  .testimonial-carousel-multi-inner,
  .service-slider-container,
  .tabbed-stats-content-row,
  .review-image-shell,
  .simple-contact-us-container,
  .contact-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .page-hero-message {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    font-size: clamp(1.5rem, 6.2vw, 2.05rem) !important;
    line-height: 1.16 !important;
  }

  .peach_services__grid,
  .peach_services__grid--minimal,
  .peach-grid,
  .gallery-grid,
  .product-grid,
  .cg-grid,
  .job-cards,
  .feature-list,
  .whychoose-list {
    grid-template-columns: 1fr !important;
  }

  .peach_services__item,
  .peach-feature,
  .job-card,
  .cg-card,
  .ae-location {
    min-width: 0;
  }
}