/* CertProxyWizard mobile completion layer.
   This file is intentionally scoped to responsive safeguards and only changes
   layouts at mobile/tablet widths; the approved v5 desktop visual design remains intact. */

html {
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 84px;
}

body {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

img,
picture,
video,
canvas,
iframe,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

main,
header,
footer,
section,
article,
aside,
nav,
.container,
.cpw-header-inner,
.cpw-primary-nav,
.cpw-dropdown,
.cpw-directory-group,
.hero-grid,
.pmp-page .hero-grid,
.pmp-page .pmp-hero-copy,
.pmp-page .pmp-hero-visual,
.trust-grid,
.process-grid,
.testimonial-grid,
.faq-grid,
.feature-grid,
.category-grid,
.why-split,
.footer-grid,
.cpw-directory-grid,
.cpw-related-grid,
.cpw-directory-category-grid,
.cpw-directory-provider-grid {
  min-width: 0;
}

p,
li,
summary,
.process-card,
.quote,
.value-card,
.cpw-menu-card,
.cpw-directory-card,
.cpw-directory-category,
.cpw-directory-provider {
  overflow-wrap: anywhere;
}

button,
input,
select,
textarea,
.btn,
.cpw-nav-trigger,
.cpw-nav-simple {
  max-width: 100%;
  touch-action: manipulation;
}

/* Let grid children shrink instead of forcing the page wider than the viewport. */
.hero-grid > *,
.trust-grid > *,
.process-grid > *,
.testimonial-grid > *,
.faq-grid > *,
.feature-grid > *,
.category-grid > *,
.why-split > *,
.footer-grid > *,
.cpw-directory-grid > *,
.cpw-related-grid > *,
.cpw-directory-category-grid > *,
.cpw-directory-provider-grid > * {
  min-width: 0;
}

@media (max-width: 1150px) {
  .cpw-primary-nav {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 720px) {
  html {
    scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .container {
    width: calc(100% - 32px);
    max-width: 100%;
  }

  .hero-grid,
  .pmp-page .pmp-hero .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-grid > *,
  .pmp-page .pmp-hero-copy,
  .pmp-page .pmp-hero-visual,
  .pmp-page .hero-actions {
    min-width: 0;
    max-width: 100%;
  }

  .pmp-page .hero-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  /* The desktop CTA has a 340px minimum; remove that constraint on phones. */
  .pmp-page .pmp-main-cta,
  .pmp-page .pmp-panel-cta,
  .pmp-page .hero-actions .btn {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    justify-content: center;
    padding-left: 13px;
    padding-right: 13px;
  }

  .pmp-page .pmp-hero-visual {
    width: 100%;
    overflow: visible;
  }

  .pmp-page .pmp-portrait {
    max-width: 100%;
  }

  .pmp-page .pmp-cert-badge,
  .pmp-page .pmp-visual-card {
    max-width: calc(100% - 6px);
    min-width: 0;
  }

  .pmp-page .process-grid,
  .pmp-page .process-grid:not(.process-grid-3) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pmp-page .process-card {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .pmp-page .process-card h3,
  .pmp-page .process-card p,
  .pmp-page .faq summary,
  .pmp-page .faq p {
    overflow-wrap: anywhere;
  }

  .pmp-page .faq summary {
    align-items: flex-start;
  }

  .pmp-page .faq summary::after {
    flex: 0 0 auto;
  }

  .pmp-page .closing {
    min-width: 0;
    max-width: 100%;
  }

  .pmp-page .closing .btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .pmp-page .mobile-sticky {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .pmp-page .mobile-sticky .btn,
  .mobile-sticky .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }

  .hero-art {
    width: 100%;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  .art-card {
    max-width: 100%;
    min-width: 0;
  }

  .art-top,
  .progress-row {
    min-width: 0;
    flex-wrap: wrap;
  }

  .art-float {
    max-width: calc(100% - 8px);
    box-sizing: border-box;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
  }

  .cpw-directory-search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .cpw-directory-search input {
    min-width: 0;
    font-size: 16px !important;
  }

  .cpw-directory-search button {
    min-width: 44px;
    min-height: 44px;
  }

  .cpw-directory-intro h1,
  .cpw-directory-intro h2,
  .cpw-directory-group-head h2,
  .cpw-directory-group-head h3 {
    overflow-wrap: anywhere;
  }

  .cpw-directory-card,
  .cpw-menu-card {
    height: auto;
    min-width: 0;
  }

  .cpw-directory-card > span,
  .cpw-menu-card > span {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .cpw-primary-nav a,
  .cpw-nav-trigger,
  .cpw-nav-simple {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .cpw-header-inner {
    width: calc(100% - 22px);
    max-width: 100%;
  }

  .cpw-mobile-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .cpw-header-cta {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .cpw-primary-nav {
    max-height: calc(100vh - 66px);
    max-height: calc(100dvh - 66px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cpw-dropdown,
  .cpw-dropdown-top,
  .cpw-dropdown-bottom {
    min-width: 0;
    max-width: 100%;
  }

  .cpw-dropdown-top {
    flex-wrap: wrap;
  }

  .cpw-directory-search input {
    font-size: 16px !important;
  }

  .cpw-floating-whatsapp-left {
    left: max(12px, env(safe-area-inset-left));
    bottom: calc(82px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
  }
}

@media (max-width: 390px) {
  .pmp-page .container {
    width: calc(100% - 28px);
  }

  .pmp-page .pmp-main-cta {
    font-size: 15px;
    min-height: 54px;
  }

  .pmp-page .pmp-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pmp-page .pmp-trust-grid > div,
  .pmp-page .process-card,
  .pmp-page .faq,
  .pmp-page .value-card {
    min-width: 0;
  }

  .pmp-page .pmp-hero-visual:before {
    width: min(260px, 90%);
    height: min(260px, 90vw);
  }

  .pmp-page .pmp-cert-badge {
    width: 128px;
  }

  .pmp-page .pmp-visual-card {
    width: min(195px, calc(100% - 8px));
  }

  .pmp-page .mobile-sticky .btn,
  .mobile-sticky .btn {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 11px;
  }

  .cpw-directory-grid,
  .cpw-related-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 360px) {
  .cpw-header-inner {
    gap: 5px;
    width: calc(100% - 16px);
  }

  .cpw-brand-name {
    font-size: 16px;
    letter-spacing: -0.6px;
  }

  .cpw-mobile-toggle {
    padding-left: 7px;
    padding-right: 7px;
    font-size: 10px;
  }

  .pmp-page .pmp-hero-visual:before {
    width: min(260px, 82vw);
    height: min(260px, 82vw);
  }

  .pmp-page .pmp-cert-badge {
    width: min(128px, 44%);
  }

  .pmp-page .pmp-visual-card {
    width: min(195px, 82%);
  }

  .pmp-page .process-grid,
  .pmp-page .process-grid.process-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .pmp-page .process-card {
    min-height: 0;
  }

  .pmp-page .footer-grid,
  body:not(.pmp-page) .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 340px) {
  .cpw-brand-name {
    font-size: 15px;
  }

  .cpw-header-cta {
    width: 42px;
    min-width: 42px;
  }

  .pmp-page .pmp-hero h1 {
    font-size: 31px;
    letter-spacing: -1px;
    overflow-wrap: anywhere;
  }

  .pmp-page .pmp-visual-card {
    padding: 10px;
    gap: 7px;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .cpw-primary-nav {
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
  }

  .pmp-page .pmp-hero-visual {
    min-height: 260px;
  }

  .pmp-page .pmp-portrait {
    height: 250px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cpw-floating-whatsapp-left { transition: none; }
}