/* PortQii site-wide mobile + tablet fixes.
   Loaded last so it can override duplicated per-page inline CSS. */

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100%;
}

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

iframe,
video {
  width: 100%;
}

table {
  max-width: 100%;
}

pre,
code {
  overflow-x: auto;
  max-width: 100%;
  word-break: break-word;
}

.container,
.nav-container {
  max-width: 100%;
}

/* Paired demo / sales CTAs: equal height on every page */
.hero-cta,
.hero-cta-secondary,
.cta-primary,
.cta-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 52px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  line-height: 1.2 !important;
  border-width: 2px !important;
  border-style: solid !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  text-align: center;
}

.hero-cta:not(.hero-cta-secondary),
.cta-primary {
  border-color: #60ae2b !important;
}

.hero-cta:not(.hero-cta-secondary):hover,
.cta-primary:hover {
  border-color: #529e25 !important;
}

/* Same width for paired CTAs (both sized to the wider label) */
.hero-cta-row,
.hero-cta-group,
.cta-buttons,
.cta-row,
.hero-cta-row--as {
  display: inline-grid !important;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-items: stretch;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  column-gap: 16px;
  row-gap: 16px;
}

.cta-buttons,
.hero-cta-row--as {
  margin-left: auto;
  margin-right: auto;
}

.hero-cta-row > .hero-cta,
.hero-cta-row > .hero-cta-secondary,
.hero-cta-row > .cta-primary,
.hero-cta-row > .cta-secondary,
.hero-cta-group > .hero-cta,
.hero-cta-group > .hero-cta-secondary,
.cta-buttons > .hero-cta,
.cta-buttons > .hero-cta-secondary,
.cta-buttons > .cta-primary,
.cta-buttons > .cta-secondary,
.cta-row > .hero-cta,
.cta-row > .cta-primary,
.cta-row > .cta-secondary,
.hero-cta-row--as > .hero-cta--as {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}

/* Keep long words / URLs from blowing out columns without splitting every word */
p, li, h1, h2, h3, h4, td, th {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Cookie consent: stop it from covering most of a phone screen */
@media (max-width: 768px) {
  #cc-main .cm {
    max-width: calc(100vw - 16px) !important;
  }
  #cc-main .cm__btn-group {
    flex-direction: column !important;
  }
}

/* Current page in the nav (desktop + mobile) */
.nav-menu .nav-link.is-current,
.nav-menu .dropdown-item.is-current,
.nav-menu .dropdown-platform-link.is-current {
  color: #c25a4a !important;
  background: rgba(226, 114, 91, 0.12) !important;
  font-weight: 600;
}

.nav-menu .dropdown-item.is-current {
  box-shadow: inset 3px 0 0 #E2725B;
}

/* Desktop: scroll the Our Technology menu when it is taller than the window */
@media (min-width: 1025px) {
  .dropdown-menu {
    max-height: calc(100vh - 80px) !important;
    max-height: calc(100dvh - 80px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}

/* Hidden on desktop; shown in the 1024px query below */
.mobile-menu-toggle {
  display: none;
}

/* ---------- Tablet + phone navigation (matches existing JS at 1024px) ---------- */
@media (max-width: 1024px) {
  .navbar {
    overflow: visible !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px;
    margin: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1003;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
  }

  .mobile-menu-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2.5px !important;
    min-height: 2.5px !important;
    max-height: 2.5px !important;
    margin: 0 !important;
    background: #111 !important;
    border-radius: 1px !important;
    flex-shrink: 0;
    transition: transform 0.3s, opacity 0.3s;
  }

  .mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }
  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }

  .nav-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 12px;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  .get-started-btn {
    display: inline-block !important;
    visibility: visible !important;
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
  }

  .nav-menu {
    display: flex !important;
    position: fixed !important;
    top: 68px !important;
    left: -100% !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100dvh - 68px) !important;
    min-height: calc(100dvh - 68px) !important;
    background: #fff !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 8px 0 32px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: left 0.3s ease !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    z-index: 1001 !important;
    list-style: none;
  }

  .nav-menu.active {
    left: 0 !important;
    display: flex !important;
  }

  .nav-item {
    width: 100% !important;
    position: static !important;
  }

  .nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
  }

  .dropdown-menu {
    position: static !important;
    box-shadow: none !important;
    border: 0 !important;
    background: #f8fafc !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    transition: max-height 0.3s ease !important;
  }

  .dropdown-menu.active {
    max-height: min(70vh, 900px) !important;
    overflow-y: auto !important;
    padding: 6px 8px 12px !important;
  }

  .nav-item:hover .dropdown-menu {
    max-height: 0;
  }

  .nav-item:hover .dropdown-menu.active {
    max-height: min(70vh, 900px) !important;
  }

  .dropdown-platform-trial {
    flex-wrap: wrap !important;
  }

  .dropdown-platform-trial-link {
    margin-left: 0 !important;
    white-space: normal !important;
  }

  .outcomes-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .outcome-block,
  .outcome-block-lead,
  .outcome-block-list,
  .outcome-block-visual,
  .time-reclaimed-stat,
  .validation-dashboard-widget {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: break-word;
  }
}

@media (max-width: 480px) {
  .get-started-btn {
    padding: 7px 10px !important;
    font-size: 0.78rem !important;
  }

  .logo img {
    height: 30px !important;
  }
}

/* ---------- Shared layout stacking ---------- */
@media (max-width: 1024px) {
  .challenge-grid,
  .client-impact-grid,
  .stats-grid,
  .trust-grid,
  .pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .case-study-prompt-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .case-study-prompt-cta-col {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .case-study-prompt-cta {
    white-space: normal !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero,
  .about-hero,
  .resources-header,
  .blog-header,
  .cost-banner,
  .cta-section,
  .problem,
  .how-it-works,
  .naming-examples,
  .features,
  .section {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Five-step loops (Sentinel + Transporter Sync + AVC): 4 cards on top, 5th centered */
@media (max-width: 960px) and (min-width: 769px) {
  .security-loop-track,
  .process-loop-track:has(> .process-loop-node:nth-child(9)) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 28px !important;
    align-items: stretch !important;
    position: relative !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
  }

  .security-loop-track::before,
  .process-loop-track:has(> .process-loop-node:nth-child(9))::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 6%;
    right: 6%;
    height: 3px;
    background: linear-gradient(90deg, #E2725B 0%, rgba(226, 114, 91, 0.4) 100%);
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
  }

  .security-loop-track .loop-connector,
  .process-loop-track:has(> .process-loop-node:nth-child(9)) .process-loop-connector {
    display: none !important;
  }

  .security-loop-track .loop-node,
  .process-loop-track:has(> .process-loop-node:nth-child(9)) .process-loop-node {
    position: relative;
    z-index: 1;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .security-loop-track > .loop-node:last-of-type,
  .process-loop-track:has(> .process-loop-node:nth-child(9)) > .process-loop-node:last-of-type {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(240px, 100%) !important;
  }
}

/* iPad mini / small tablet: two columns when there is horizontal room */
@media (max-width: 768px) and (min-width: 561px) {
  .security-loop-track,
  .process-loop-track {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 16px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    gap: 16px !important;
  }

  .security-loop-track::before,
  .process-loop-track::before {
    display: none !important;
  }

  .loop-connector,
  .process-loop-connector {
    display: none !important;
  }

  .loop-node,
  .process-loop-node {
    position: relative;
    z-index: 1;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .security-loop-track > .loop-node:last-of-type,
  .process-loop-track:has(> .process-loop-node:nth-child(9)) > .process-loop-node:last-of-type {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: calc(50% - 8px) !important;
  }
}

@media (max-width: 900px) {
  .split-blade {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .split-blade-content {
    padding: 36px 20px 64px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  .split-blade-visual {
    margin-top: 0 !important;
    min-height: 200px !important;
    padding: 16px !important;
  }

  .split-blade-headline {
    font-size: clamp(1.35rem, 4.5vw, 1.75rem) !important;
  }

  .split-blade-img--enlarge-20 {
    transform: none !important;
    max-width: 100% !important;
  }

  .as-blade-card,
  .hero-grid,
  .blade,
  .about-content,
  .problem-content,
  .before-after,
  .step,
  .feature-module-body,
  .success-content,
  .solution-content,
  .two-col,
  .services-grid,
  .platform-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .step:nth-child(even) .step-content,
  .step:nth-child(even) .step-visual {
    order: unset !important;
  }

  .hero {
    padding: 112px 16px 64px !important;
  }

  .hero-title,
  .about-hero h1,
  .blog-title,
  .resources-header h1 {
    font-size: clamp(1.7rem, 6vw, 2.4rem) !important;
    line-height: 1.2 !important;
  }

  .hero-subtitle,
  .hero-sub--as,
  .hero-sub {
    font-size: clamp(0.95rem, 3.4vw, 1.15rem) !important;
  }

  .hero-heading--as {
    font-size: clamp(1.7rem, 7vw, 2.6rem) !important;
    max-width: none !important;
  }

  .hero-cta-row--as,
  .cta-row,
  .cta-buttons {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .hero-corner-label {
    position: static !important;
    justify-content: center !important;
    margin-top: 24px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
}

@media (max-width: 768px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .resources-grid,
  .apps-grid,
  .features-grid,
  .feature-grid,
  .cards-grid,
  .cost-banner-grid,
  [class$="-grid"] {
    grid-template-columns: 1fr !important;
  }

  .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 32px !important;
  }

  .stats-grid,
  .metrics-row,
  .success-stats,
  .pillars,
  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  .search-box input {
    width: 100% !important;
    max-width: 100% !important;
  }

  .search-sort,
  .resources-controls,
  .blog-meta {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }

  .filter-tabs {
    width: 100%;
  }

  .feature-module-cta,
  .case-study-prompt-cta {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal !important;
    text-align: center;
    text-wrap: balance;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .consultation-cta,
  .cost-banner-card,
  .feature-module,
  .example-section {
    padding: 24px 18px !important;
  }

  .section-title,
  .problem-text h2,
  .cta-title,
  .cost-banner-title {
    font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
  }

  .footer {
    padding: 40px 0 24px !important;
  }

  .footer-logos img,
  .footer-logos img.logo--tall,
  .footer-logos img.logo--wide {
    height: clamp(28px, 8vw, 40px) !important;
    max-width: min(140px, 42vw) !important;
  }

  .video-modal {
    padding: 12px !important;
  }

  .video-modal-content {
    width: 100% !important;
  }
}

/* Tablet: keep paired CTAs side-by-side at equal width */
@media (max-width: 1024px) and (min-width: 561px) {
  .hero-cta-row,
  .hero-cta-group,
  .cta-row,
  .cta-buttons,
  .hero-cta-row--as {
    display: inline-grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 1fr !important;
    flex-direction: unset !important;
    width: max-content !important;
    max-width: 100% !important;
  }

  .hero-cta,
  .hero-cta-secondary,
  .hero-cta--as,
  .cta-primary,
  .cta-secondary {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }
}

@media (max-width: 560px) {
  .stats-grid,
  .metrics-row,
  .success-stats,
  .pillars,
  .trust-grid,
  .client-impact-grid,
  .challenge-grid,
  .footer-content {
    grid-template-columns: 1fr !important;
  }

  .hero-cta-row--as,
  .hero-cta-row,
  .hero-cta-group,
  .cta-row,
  .cta-buttons {
    display: inline-grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    grid-template-columns: minmax(0, 1fr) !important;
    flex-direction: unset !important;
    align-items: stretch !important;
    width: max-content !important;
    max-width: 100% !important;
  }

  .cta-buttons,
  .hero-cta-row--as {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero .hero-cta-row,
  .hero .hero-cta-group {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .hero-cta--as,
  .hero-cta,
  .hero-cta-secondary,
  .cta-primary,
  .cta-secondary {
    width: 100% !important;
    max-width: 100%;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center;
    box-sizing: border-box;
  }

  .hero-cta-secondary {
    margin: 0 !important;
  }

  .as-blade {
    padding: 28px 12px !important;
  }

  .as-blade-card {
    padding: 28px 18px !important;
    border-radius: 16px !important;
  }

  .process-loop-track,
  .security-loop-track {
    gap: 12px !important;
    row-gap: 12px !important;
  }

  .process-loop-connector,
  .loop-connector {
    display: none !important;
  }

  .blog-title {
    font-size: 1.6rem !important;
  }

  .blog-content,
  .blog-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .folder-structure-demo {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  .folder-demo-col {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .folder-tree li {
    white-space: nowrap !important;
  }

  .folder-demo-arrow {
    padding-top: 0 !important;
    transform: rotate(90deg);
  }
}

/* Product / article media that still uses fixed desktop spacing */
@media (max-width: 768px) {
  .img-lightbox-trigger,
  .split-blade-visual .img-lightbox-trigger,
  .feature-module-img,
  .blog-content img,
  .hero-compat img {
    max-width: 100% !important;
  }

  .hero-compat {
    flex-wrap: wrap !important;
  }

  .folder-tree li {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}