/* ==========================================================================
   polish.css — additive refinement layer for CarePlan AI
   Load AFTER main.min.css. Uses only existing design tokens from :root.
   ========================================================================== */

/* --- 1. Global refinement ------------------------------------------------ */

html {
  scroll-behavior: smooth;
}

/* Anchor targets never hide under the sticky header */
[id] {
  scroll-margin-top: 110px;
}

/* Brand-colored text selection (browser default blue today) */
::selection {
  background: var(--pp-theme);
  color: var(--pp-white);
}

/* --- 2. Reduced motion (not covered anywhere else on the site) ----------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* WOW.js hides elements until animated; keep content visible */
  .wow {
    visibility: visible !important;
    animation: none !important;
  }
}

/* --- 3. Refined card hover states (lift + shadow + border accent) -------- */

.pp-offer-box-item,
.pp-why-benefit-item,
.pp-hosting-box-items {
  transition: transform 0.35s ease, box-shadow 0.35s ease,
    border-color 0.35s ease, background-color 0.35s ease;
}

.pp-offer-box-item:hover,
.pp-why-benefit-item:hover,
.pp-hosting-box-items:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -14px rgba(21, 50, 67, 0.22);
  border-color: var(--pp-theme);
}

/* Fix the 1.5px -> 1px border-width jump main.min.css causes on hover */
.pp-offer-box-item:hover {
  border-width: 1.5px;
}

/* Cards that are links: keep heading color from washing out */
.pp-card-link,
.pp-card-link:hover {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Footer list hover: shift via transform, not margin (no layout shift) */
.pp-footer-widget-wrapper .pp-footer-widget-items .pp-list-area li {
  transition: transform 0.3s ease;
}
.pp-footer-widget-wrapper .pp-footer-widget-items .pp-list-area li:hover {
  margin-left: 0;
  transform: translateX(5px);
}

/* --- 4. Section spacing rhythm (replaces inline height:50px spacer divs) - */

.pp-section-spacer {
  height: 50px;
}
.pp-section-spacer--white {
  background-color: var(--pp-white);
}
@media (max-width: 991px) {
  .pp-section-spacer {
    height: 40px;
  }
}

/* --- 5. Testimonial pull-quote ------------------------------------------- */

.pp-testimonial-featured {
  text-align: center;
  padding: 56px 40px 48px;
  border-top: 4px solid var(--pp-theme);
}
.pp-testimonial-featured::before {
  content: "\201C";
  display: block;
  font-size: 64px;
  line-height: 0.6;
  color: var(--pp-theme);
  font-family: Georgia, "Times New Roman", serif;
  margin-bottom: 18px;
}
.pp-testimonial-featured p {
  font-size: 19px;
  line-height: 1.7;
  max-width: 60ch;
  margin-inline: auto;
}
.pp-testimonial-featured .client-info {
  justify-content: center;
  margin-top: 24px;
}
@media (max-width: 575px) {
  .pp-testimonial-featured {
    padding: 40px 24px 36px;
  }
  .pp-testimonial-featured p {
    font-size: 17px;
  }
}

/* --- 6. Smooth inline link underlines ------------------------------------ */

.pp-link {
  color: inherit;
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}
.pp-link:hover,
.pp-link:focus-visible {
  background-size: 0 1px;
  background-position: 100% 100%;
}

/* --- 7. Gradient text option for key headings ---------------------------- */

.pp-gradient-text {
  color: var(--pp-theme); /* fallback */
  background: linear-gradient(270deg, var(--pp-theme-secondary) 0%, var(--pp-theme) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* --- 8. Utilities replacing repeated inline styles ------------------------ */

/* Process-step lede line (dark sections), replaces repeated inline h5 style */
.pp-step-lede {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 15px;
}

/* Muted body text on light backgrounds (replaces inline #666) */
.pp-text-muted {
  color: rgba(21, 50, 67, 0.66);
}

/* Trusted-by logo strip */
.pp-brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.pp-brand-logo {
  max-width: 150px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Fluid images */
.pp-img-fluid {
  width: 100%;
  height: auto;
}
.pp-img-cover {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Webly Chat promo card (was fully inline with a dead transition) */
.pp-webly-card {
  border: 1px solid #1a2838;
  background: #171c28;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.pp-webly-card:hover {
  transform: translateY(-4px);
  border-color: var(--pp-theme);
  box-shadow: 0 14px 32px -12px rgba(21, 50, 67, 0.35);
}
.pp-webly-card .pp-webly-logo {
  min-width: 60px;
  max-width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.pp-webly-card .pp-webly-body {
  flex: 1;
}
.pp-webly-card h5 {
  color: #ededed;
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
}
.pp-webly-card p {
  color: #8892a6;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}
.pp-webly-card .pp-webly-arrow {
  color: #33c6d2;
  font-size: 18px;
  transition: transform 0.35s ease;
}
.pp-webly-card:hover .pp-webly-arrow {
  transform: translateX(4px);
}

/* --- 9. Keyboard-accessible desktop dropdowns ----------------------------- */
/* main.min.css only opens submenus on :hover; mirror it for :focus-within so
   keyboard users can tab into Services/Resources/Company/Products. */
.header-main .main-menu ul li:focus-within > .submenu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* Hover bridge: the template positions the submenu at top:115%, leaving a
   ~10px dead zone between the menu item and the panel. This transparent strip
   is part of the submenu (and therefore of the parent li's hover area), so
   the pointer never leaves :hover while crossing the gap - regardless of
   transition timing. */
.header-main .main-menu ul li .submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
}

/* Under reduced motion the global rule above zeroes every transition, which
   removed the grace period that let the pointer cross the gap - the menu
   vanished instantly. Keep a short non-moving fade for the submenu (a fade is
   not motion; the translateY slide is removed) so hover stays forgiving. */
@media (prefers-reduced-motion: reduce) {
  .header-main .main-menu ul li .submenu {
    transform: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
  }
}

/* --- 10. Semantic replacements keeping template visuals ------------------- */

/* Step-label pill inside dark process cards (was an <h6>; now a <span> so the
   heading outline stays clean). Mirrors .pp-how-work-items h6 in main.min.css. */
.pp-how-work-items .pp-eyebrow {
  font-family: "DM Sans", sans-serif;
  color: var(--pp-white);
  padding: 7px 16px;
  font-weight: 600;
  border-radius: 100px;
  background: linear-gradient(270deg, rgba(161, 33, 202, 0.24) 0, rgba(123, 31, 228, 0.24) 100%);
  margin-bottom: 20px;
  display: inline-block;
}

/* Footer contact lines (were <h6>; now <p>). Mirrors
   .pp-contact-info .pp-content h6 rules in main.min.css. */
.pp-footer-widget-wrapper .pp-footer-widget-items .pp-contact-info .pp-content p {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}
.pp-footer-widget-wrapper .pp-footer-widget-items .pp-contact-info .pp-content p a {
  color: var(--pp-white);
  line-height: 170%;
}

/* Trusted-by heading: promoted h3 -> h2 for outline order; keep h3 visuals */
.brand-title h2 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .brand-title h2 {
    font-size: 20px;
  }
}

/* Hosting cards fill with the theme color on hover; keep their CTA visible
   (the template compensated for .theme-btn but the markup uses .pp-theme-btn) */
.pp-hosting-box-items:hover .content .pp-theme-btn {
  background: var(--pp-white);
  color: var(--pp-theme);
}

/* White-on-gradient CTA button (dark ::after fill expands on hover, so the
   label must flip to white for contrast) */
.pp-theme-btn--inverse {
  background: var(--pp-white);
  color: var(--pp-theme);
}
.pp-theme-btn--inverse:hover {
  color: var(--pp-white);
}

/* main.min.css styles every .pp-section-title span as an eyebrow (20px, padded);
   neutralize that when the span is a gradient-text fragment inside the heading. */
.pp-section-title h1 .pp-gradient-text,
.pp-section-title h2 .pp-gradient-text,
.pp-section-title h3 .pp-gradient-text {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  font-family: inherit;
  padding-left: 0;
  margin-bottom: 0;
}
.pp-section-title h1 .pp-gradient-text::before,
.pp-section-title h1 .pp-gradient-text::after,
.pp-section-title h2 .pp-gradient-text::before,
.pp-section-title h2 .pp-gradient-text::after,
.pp-section-title h3 .pp-gradient-text::before,
.pp-section-title h3 .pp-gradient-text::after {
  display: none;
}