/**
 * Responsive Layout & Performance Optimization
 *
 * Infrastructure-level CSS ensuring responsive behavior across all viewports
 * (320px–2560px) and optimizing Core Web Vitals (LCP, CLS, INP).
 *
 * Requirements: 11.1, 11.2, 11.3, 11.4, 11.5, 11.6
 */

/* ==========================================================================
   1. Prevent horizontal overflow at all viewport widths (Req 11.1)
   ========================================================================== */

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  /* Override legacy 780px fixed width from common.css */
  width: auto !important;
}

/* Ensure no content breaks out of containers */
img,
video,
iframe,
object,
embed {
  max-width: 100%;
}

/* Tables need special overflow handling without breaking layout */
table {
  max-width: 100%;
}

/* Prevent long text/URLs from causing overflow */
main,
article,
section,
aside,
.container,
.container-fluid {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Prevent absolutely positioned elements from causing overflow */
.container,
.container-fluid {
  overflow-x: clip;
}

/* Override legacy fixed-width elements from common.css / old theme */
#wrap,
#header,
#midcol {
  width: auto !important;
  max-width: 100%;
}

div.warn,
div.err,
div.info {
  max-width: 100%;
  width: auto;
}

/* ==========================================================================
   2. LCP Optimization - Critical rendering path (Req 11.2)
   ========================================================================== */

/* Prioritize rendering of above-fold content */
.hero-section {
  contain: layout style;
}

/* Ensure hero headline renders immediately (LCP candidate) */
.hero-headline {
  font-display: swap;
  text-rendering: optimizeSpeed;
}

/* Reduce render-blocking for below-fold content */
.outcomes-section,
.product-listings-section,
.customer-logos-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* Optimize image rendering for LCP */
img[loading="lazy"] {
  content-visibility: auto;
}

/* Prevent layout recalculation from lazy-loaded images */
img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

/* ==========================================================================
   3. CLS Prevention - Reserve space for dynamic content (Req 11.3)
   ========================================================================== */

/* Enforce aspect ratio on images with explicit dimensions */
img {
  height: auto;
}

/* Explicit dimensions for lazy-loaded images to prevent layout shift */
img[data-src],
img.lazyload {
  /* Ensure placeholder dimensions are maintained */
  min-height: 1px;
}

/* Reserve space for the offcanvas menu so toggle doesn't shift content */
.offcanvas {
  contain: layout;
}

/* Prevent CLS from web fonts by setting fallback */
body {
  font-display: swap;
}

/* Customer logo section - fixed height to prevent CLS */
.customer-logo {
  aspect-ratio: auto;
}

/* Story cards and product boxes - prevent reflow */
.story-card,
.product_box {
  contain: layout style;
}

/* Fixed height for header to prevent CLS on scroll behavior changes */
header#header {
  min-height: 80px;
}

/* Prevent ads/embeds from causing CLS */
iframe {
  aspect-ratio: 16 / 9;
}

/* Ensure font loading doesn't cause layout shift */
@font-face {
  font-display: swap;
}

/* ==========================================================================
   4. INP Optimization - Reduce main-thread work (Req 11.4)
   ========================================================================== */

/* Use will-change sparingly for known animated elements */
.offcanvas {
  will-change: transform;
}

/* Reduce paint complexity on scroll */
header#header.headerScroll {
  contain: layout style;
}

/* Use hardware acceleration for smooth transitions on interactive elements */
.hero-cta-primary,
.hero-cta-secondary,
.btn {
  transform: translateZ(0);
}

/* Optimize pointer events on non-interactive decorative elements */
.customer-logos-section img,
.outcome-metric {
  pointer-events: none;
}

/* Reduce style recalculation on hover */
a,
button,
.btn {
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* Isolate stacking context for animated elements */
.offcanvas,
header#header {
  isolation: isolate;
}

/* ==========================================================================
   5. Responsive layout - Extra small viewports (320px–575px) (Req 11.1)
   ========================================================================== */

@media (max-width: 575.98px) {
  /* Ensure full-width layout on very small screens */
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Prevent tables from overflowing on mobile */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Stack product boxes vertically */
  .product_box {
    margin-bottom: 1.5rem;
  }

  /* Ensure customer story cards don't overflow */
  .story-card {
    padding: 1rem;
  }

  /* Breadcrumb should wrap gracefully */
  nav[aria-label="Breadcrumb"] ol {
    flex-wrap: wrap;
  }

  /* Hero section adjustments for small viewports */
  .hero-headline {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }

  .hero-subheading {
    font-size: clamp(0.9rem, 3vw, 1.2rem);
  }

  /* Prevent code blocks from overflowing */
  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ==========================================================================
   6. Responsive layout - Medium viewports (576px–767px) (Req 11.1)
   ========================================================================== */

@media (min-width: 576px) and (max-width: 767.98px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   7. Navigation - Collapsible below 768px, full at ≥768px (Req 11.5, 11.6)
   ========================================================================== */

/* Below 768px: hide desktop menu, show mobile toggle */
@media (max-width: 767.98px) {
  header#header nav ul.menu {
    display: none !important;
  }

  header#header nav ul.menu-right li.menu-item-mobile {
    display: inline-block !important;
  }

  /* Touch targets ≥44x44 CSS pixels for mobile nav (Req 11.5) */
  .offcanvas .navbar-nav a,
  .offcanvas .navbar-nav button,
  #mobile-menu {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    padding: 10px 16px;
  }

  /* Ensure offcanvas close button meets touch target size */
  .offcanvas .btn-close {
    min-height: 44px;
    min-width: 44px;
    padding: 12px;
  }
}

/* At 768px and above: show full nav, hide mobile toggle */
@media (min-width: 768px) {
  header#header nav ul.menu {
    display: inline-block !important;
  }

  header#header nav ul.menu-right li.menu-item-mobile {
    display: none !important;
  }
}

/* ==========================================================================
   8. Large viewport optimization (≥1920px) (Req 11.1)
   ========================================================================== */

@media (min-width: 1920px) {
  /* Constrain max content width for ultra-wide displays */
  .container {
    max-width: 1400px;
  }
}

@media (min-width: 2560px) {
  .container {
    max-width: 1600px;
  }

  /* Ensure content is centered and readable on ultra-wide screens */
  body {
    max-width: 2560px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   9. Responsive images and media (Req 11.1, 11.3)
   ========================================================================== */

/* Responsive images never exceed container */
img {
  max-width: 100%;
  height: auto;
}

/* Responsive video embeds */
.video-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   10. Print styles - prevent layout issues in print
   ========================================================================== */

@media print {
  .offcanvas,
  .menu-item-mobile,
  .skip-nav,
  .header-search {
    display: none !important;
  }

  body {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   11. Header full-width & link styling fixes
   ========================================================================== */

/* Make header navigation extend full width of the site */
header#header {
  width: 100%;
  left: 0;
  right: 0;
  background: #fff !important;
}

/* Push main content below the fixed/absolute header */
main#main-content {
  padding-top: 100px;
}

/* Homepage already has its own spacer via end_sidebar3.php, reduce padding */
main#main-content:has(> .cover-section:first-child) {
  padding-top: 0;
}

header#header > .container-fluid {
  max-width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Reduce logo padding for full-width header - text logo needs width auto */
header#header #logo,
body header.headerScroll #logo {
  padding-left: 70px !important;
  width: auto !important;
  white-space: nowrap;
  min-width: fit-content;
  background-image: url("/images/logo.png") !important;
  background-size: 60px auto;
  background-position: left center;
  background-repeat: no-repeat;
}

/* Remove link underlines from header, footer, and navigation menus */
header#header a,
header#header a:hover,
header#header a:focus,
header#header nav ul.menu a,
header#header nav ul.menu a:hover,
header#header nav ul.menu a:focus,
header#header nav ul.menu li ul li a,
header#header nav ul.menu li ul li a:hover,
#footer a,
#footer a:hover,
#footer a:focus,
#footer .widget ul li a,
#footer .widget ul li a:hover,
#footer .widget ul li a:focus,
#footer .sub-footer a,
#footer .sub-footer a:hover,
#footer .sub-footer a:focus,
nav[aria-label="Main navigation"] a,
nav[aria-label="Main navigation"] a:hover,
nav[aria-label="Main navigation"] a:focus,
.offcanvas a,
.offcanvas a:hover,
.offcanvas a:focus {
  text-decoration: none !important;
}

/* ==========================================================================
   12. Footer icon background fix - Override legacy common.css footer styles
   ========================================================================== */

/* Override the old common.css #footer that sets background: #F5F5F5 */
#footer {
  background: #15191c !important;
  background-color: #15191c !important;
}

/* Remove any white background on footer product icon images */
#footer .widget ul li a img {
  background-color: transparent !important;
  background: none !important;
}

/* Footer logo - ensure transparent background shows correctly */
#footer .widget img[data-src*="logo_transparent"],
#footer .widget img[src*="logo_transparent"] {
  background: none !important;
  background-color: transparent !important;
}

/* Override legacy common.css html background that may bleed through */
html {
  background-color: #fff !important;
}

/* Override legacy body 960px width and white background from common.css */
body {
  background-color: #fff !important;
}