/* ============================================================
   QA Fixes — ITW Universe Design System
   Patches applied over styles.css + admin.css
   ============================================================ */

/* ============ BUTTON VISIBILITY FIX ============
   Default .btn uses background: var(--paper) #F1F1F1 which is
   nearly invisible against white/cream backgrounds and only
   becomes visible on hover. Add a subtle shadow + ensure the
   1px ink border is always prominent. */

.btn {
  box-shadow: 0 1px 2px rgba(14, 14, 14, 0.06);
}
.btn:hover {
  box-shadow: 0 2px 6px rgba(14, 14, 14, 0.12);
}
.btn-ink {
  box-shadow: 0 1px 3px rgba(14, 14, 14, 0.15);
}
.btn-ghost {
  box-shadow: none;
}

/* ============ MOBILE: PUBLIC HEADER COLLAPSE ============
   Below 768px, only Cart + ☰ remain visible in nav-right.
   Sign in, Contact, Search buttons move to drawer. */

@media (max-width: 768px) {
  .nav-right > .btn:not([aria-label="Menu"]):not(.nav-toggle) {
    display: none;
  }
  /* Keep the cart button if present (identified by its href or content) */
  .nav-right > a[href="cart.html"] {
    display: inline-flex !important;
  }
  /* Ensure toggle stays */
  .nav-right > .nav-toggle,
  .nav-right > button.nav-toggle {
    display: flex !important;
  }
}

/* ============ BREADCRUMB WORD-BREAKING FIX ============
   Breadcrumbs were splitting mid-word ("HOM / E", "MARKETPL / ACE").
   Use nowrap on individual segments and allow horizontal scroll. */

.eyebrow {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}
/* Allow the container to scroll if breadcrumb overflows on mobile */
@media (max-width: 768px) {
  .eyebrow {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
}

/* ============ MULTI-CTA TOOLBAR WRAPPING ============
   Pages like post-campaign-report, deliverables-manager, etc.
   have action toolbars that overflow on mobile. */

@media (max-width: 768px) {
  /* Generic: any inline flex row of buttons should wrap */
  .row.gap-3,
  .row.gap-2 {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  /* Specific: kpi/action rows in cards */
  .card-body .row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* ============ SUB-12px TEXT FLOOR ============
   Enforce minimum readable sizes on small screens. */

@media (max-width: 768px) {
  .sans-xs {
    font-size: 11px !important;
  }
  .mono-label,
  .mono-lbl-ink {
    font-size: 11px !important;
  }
  .ph-tag {
    font-size: 10px !important;
  }
  /* Index numbers in cards */
  .index-num {
    font-size: 11px !important;
  }
  /* Count badges in chips */
  .chip .count {
    font-size: 10px !important;
  }
}

/* ============ FILTER CHIP ROWS — HORIZONTAL SCROLL ============
   Admin-assets and similar pages: chip filters collide with table
   headers. Force horizontal scroll container instead of wrapping. */

@media (max-width: 1000px) {
  /* Admin filter strips */
  .ops-body .row.gap-2.wrap,
  .ops-body .row.gap-3.wrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .ops-body .row.gap-2.wrap::-webkit-scrollbar,
  .ops-body .row.gap-3.wrap::-webkit-scrollbar {
    height: 3px;
  }
  .ops-body .row.gap-2.wrap::-webkit-scrollbar-thumb,
  .ops-body .row.gap-3.wrap::-webkit-scrollbar-thumb {
    background: var(--line-soft);
  }
}

/* ============ TAP TARGET MINIMUM SIZE ============
   Ensure all interactive elements meet 32px minimum on mobile
   (down from the 44px WCAG ideal, but acceptable for mid-fi). */

@media (max-width: 768px) {
  .btn-sm {
    min-height: 36px;
    min-width: 36px;
    padding: 8px 14px;
  }
  .chip {
    min-height: 36px;
    padding: 8px 12px;
  }
  .tier-pill {
    min-height: 32px;
    padding: 6px 10px;
  }
  /* Table row action buttons/links */
  .t-row a,
  .t-row button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============ DEFERRED FIX #1: ADMIN SAVE TOOLBAR ============
   .form-footer inner flex containers wrapping to 3 lines on
   mobile. Fix: wrap the button group and make status span
   full-width above buttons. Also: admin-blog-editor .tools. */

@media (max-width: 768px) {
  .form-footer {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px !important;
  }
  .form-footer > div {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .form-footer > div:first-child {
    width: 100%;
  }
  .form-footer > div:last-child {
    width: 100%;
    justify-content: flex-end;
  }
  .form-footer .ops-btn {
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Blog editor toolbar */
  .tools {
    flex-wrap: wrap !important;
    gap: 6px !important;
    row-gap: 8px !important;
  }
  .tools .ops-btn {
    padding: 8px 10px;
    font-size: 12px;
  }
  .autosave-status {
    width: 100%;
    text-align: center;
    order: -1;
  }
}

/* ============ DEFERRED FIX #2: MARKETPLACE EYEBROW CHIPS ============
   The "VERTICAL →" / "CITY →" / "WHEN →" mono-labels sit inline
   with chip rows. On narrow screens they push chips off-screen.
   Fix: stack labels above chips on mobile. */

@media (max-width: 768px) {
  /* Filter strip: stack label above chips */
  .row.gap-2.wrap > .mono-label,
  .row.gap-3.wrap > .mono-label {
    width: 100%;
    margin-bottom: 4px;
    margin-right: 0 !important;
  }
}

@media (max-width: 480px) {
  /* On smallest screens, make filter rows scrollable if too many chips */
  section[style*="background: var(--paper-2)"] .row.gap-2.wrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  /* But keep the label stacked above */
  section[style*="background: var(--paper-2)"] .row.gap-2.wrap > .mono-label {
    flex-shrink: 0;
    width: auto;
    margin-right: 8px !important;
  }
}

/* ============ DEFERRED FIX #3: VERTICAL PAGE HEADLINES ============
   Vertical hero headlines use max-width: 14ch inline style which
   constrains text too tightly on narrow screens. Also the
   grid-column: 1/span 7 leaves empty space on mobile. */

@media (max-width: 768px) {
  /* Override inline max-width on display headings in vertical pages */
  .display.d-xxl[style*="max-width"],
  h1.display[style*="max-width: 14ch"],
  h1.display[style*="max-width:14ch"] {
    max-width: none !important;
  }
  /* Ensure hero text uses full width when grid collapses */
  [style*="grid-column: 1/span 7"],
  [style*="grid-column:1/span 7"] {
    grid-column: 1 / -1 !important;
  }
  [style*="grid-column: 8/span 5"],
  [style*="grid-column:8/span 5"] {
    grid-column: 1 / -1 !important;
  }
  /* Also handle 9/span 4 pattern from about.html */
  [style*="grid-column: 9/span 4"],
  [style*="grid-column:9/span 4"] {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 480px) {
  /* Even more breathing room on smallest screens */
  .display.d-xxl {
    max-width: none !important;
    word-break: normal;
    hyphens: none;
  }
  .display.d-xl {
    max-width: none !important;
  }
}

/* ============ STAT NUMBERS ALIGNMENT FIX ============
   The .stat-num font-size clamp(56px, 11vw, 160px) is way too
   large for a 4-col grid — characters wrap mid-number making
   "₹362Cr" render as "₹3 / 62 / Cr" vertically. Fix: cap the
   size to fit cells, prevent wrapping, and ensure readability. */

.stat-num {
  font-size: clamp(36px, 5.5vw, 72px) !important;
  line-height: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-tag {
  margin-top: 12px;
}
@media (max-width: 1024px) {
  .stat-num {
    font-size: clamp(32px, 7vw, 60px) !important;
  }
}
@media (max-width: 768px) {
  .stat-num {
    font-size: clamp(28px, 9vw, 52px) !important;
  }
}
@media (max-width: 480px) {
  .stat-num {
    font-size: clamp(32px, 12vw, 56px) !important;
  }
}

/* ============ BUTTONS ON DARK BACKGROUNDS ============
   .btn has background: var(--paper) (#F1F1F1) by default. When
   devs added color: var(--paper) + border-color: rgba(241,...)
   for dark contexts, they forgot background: transparent. This
   creates white rectangles with white text. Fix globally via
   attribute selectors that match the inline pattern. */

.btn[style*="color: var(--paper)"],
.btn[style*="color:var(--paper)"] {
  background: transparent;
}
.btn[style*="color: var(--paper)"]:hover,
.btn[style*="color:var(--paper)"]:hover {
  background: rgba(241, 241, 241, 0.08);
}
/* Also catch btn-lg and btn-sm variants */
.btn-lg[style*="color: var(--paper)"],
.btn-lg[style*="color:var(--paper)"],
.btn-sm[style*="color: var(--paper)"],
.btn-sm[style*="color:var(--paper)"] {
  background: transparent;
}
.btn-lg[style*="color: var(--paper)"]:hover,
.btn-lg[style*="color:var(--paper)"]:hover,
.btn-sm[style*="color: var(--paper)"]:hover,
.btn-sm[style*="color:var(--paper)"]:hover {
  background: rgba(241, 241, 241, 0.08);
}

/* ============ DESIGN NAV BODY PADDING ============
   When the design nav bar is active (injected via design-nav.js),
   add top padding so page content isn't hidden behind it. */

body.dn-padded {
  padding-top: 40px !important;
}
/* Push sticky/fixed elements below the 40px design nav bar */
body.dn-padded .nav {
  top: 40px;
}
body.dn-padded .reading-progress {
  top: 40px;
}
body.dn-padded .ch-bar {
  top: 40px;
}

/* ============ FIX: CART CTA BUTTONS OVERLAPPING ============
   "Choose your path" buttons contain multi-line content (title + subtitle)
   but .btn has white-space: nowrap, causing text to overflow grid cells. */

.btn-lg {
  white-space: normal;
}
/* Cart CTA grids: ensure proper button sizing */
[style*="grid-template-columns: 1fr 1fr"] > .btn-lg {
  text-align: center;
  padding: var(--sp-4) var(--sp-3);
  flex-direction: column;
  align-items: center;
  display: flex;
}
@media (max-width: 600px) {
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============ FIX: MARKETPLACE SIDEBAR OVERFLOW ============
   Sticky sidebar has no max-height, so it can exceed viewport and
   overlap content or become unreachable on shorter screens. */

aside [style*="position: sticky"] {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
}
aside [style*="position: sticky"]::-webkit-scrollbar {
  width: 3px;
}
aside [style*="position: sticky"]::-webkit-scrollbar-thumb {
  background: var(--line-soft);
}

/* ============ FIX: MARKETPLACE SCROLL ARROWS OVERFLOW ============
   "Recently added" left/right arrows at left:-20px / right:-20px
   overflow outside the container on narrow viewports. */

button[style*="left:-20px"],
button[style*="left: -20px"] {
  left: 4px !important;
  border-radius: 50%;
  background: var(--paper);
}
button[style*="right:-20px"],
button[style*="right: -20px"] {
  right: 4px !important;
  border-radius: 50%;
  background: var(--paper);
}

/* ============ FIX: STICKY SIDEBAR ON COLLAPSED GRIDS ============
   Class-based sticky (e.g. .side-nav) isn't caught by the existing
   inline-style attribute selector. Unstick all sticky on mobile. */

@media (max-width: 1000px) {
  .side-nav {
    position: static !important;
  }
  /* Also unstick any sticky in collapsed grids */
  [style*="grid-template-columns: 1fr"] [style*="position: sticky"],
  [style*="grid-template-columns:1fr"] [style*="position: sticky"] {
    position: static !important;
  }
}

/* ============ FIX: ADMIN FORM-FOOTER LEFT OFFSET ON MOBILE ============
   .form-footer uses left: var(--ops-sidebar) (240px) which persists
   after sidebar collapses at 768px, creating a gap. */

@media (max-width: 768px) {
  .form-footer {
    left: 0 !important;
  }
}

/* ============ FIX: CHECKOUT PROGRESS BAR STEPS OVERLAP ============
   Step labels overflow at narrow widths. Allow wrapping. */

@media (max-width: 768px) {
  [style*="repeat(5, 1fr)"] > *,
  [style*="repeat(3, 1fr)"] > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 480px) {
  [style*="repeat(5,"] {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 0 !important;
  }
  [style*="repeat(5,"] > * {
    flex: 0 0 auto;
    min-width: 100px;
  }
}

/* ============ FIX: BUILD-PACKAGE 3-COL SQUEEZE ============
   320px + 1fr + 380px leaves no room for center on ~1000px screens. */

@media (max-width: 1100px) {
  [style*="grid-template-columns: 320px 1fr 380px"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns: 320px 1fr 380px"] > :last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  [style*="grid-template-columns: 320px 1fr 380px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============ FIX: HOMEPAGE CASE-STRIP COLLAPSE ============
   .case-strip 1fr 1fr layout doesn't collapse on mobile — text
   at clamp(36px,6vw,72px) overflows 50% width columns. */

@media (max-width: 768px) {
  .case-strip {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
}

/* ============ FIX: ADMIN TEMPLATE EDITOR 3-COL ============ */

@media (max-width: 1000px) {
  .tpl-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .tpl-grid > :first-child {
    display: none;
  }
}
@media (max-width: 768px) {
  .tpl-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============ MOBILE DEVICE GATE ============
   Shows a fullscreen overlay on small screens telling
   users to switch to desktop. Pure CSS, no HTML needed —
   uses body::after so it works on every page.            */

@media (max-width: 768px) {
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 28px;
    background: #0E0E0E;
    color: #F1F1F1;
    font-family: 'Inter', system-ui, sans-serif;
    /* multi-line content trick — can't use child elements,
       so we use a single long string with \A line breaks   */
    content:
      '⬒'
      '\A\A'
      'ITW Universe'
      '\A'
      'Design System'
      '\A\A'
      'This wireframe is optimised for'
      '\A'
      'desktop viewports (1024 px +).'
      '\A\A'
      'Please open on a laptop or'
      '\A'
      'desktop browser for the full experience.';
    white-space: pre-wrap;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
  }
}

/* ============ PRINT STYLES ============ */
@media print {
  /* Hide design navigator */
  #design-nav-bar {
    display: none !important;
  }
  /* Remove body padding added for nav */
  body.dn-padded {
    padding-top: 0 !important;
  }
  body.dn-padded .nav,
  body.dn-padded .reading-progress,
  body.dn-padded .ch-bar {
    top: 0;
  }
}