/* bAwear Score: phone layout (screens up to 720px wide).
   Loaded on every page by scripts/build-site.mjs, after the Claude Design export, so a fresh export does not
   overwrite it. Everything that changes layout sits inside the media query below; wider screens are not affected.
   Selectors start with #dc-root / #bw-prerender so they outrank the catch-all phone rules in the .dc.html.
   Works together with mobile.js, which adds the data-m-* attributes used here. */

/* Stop phones from inflating text after rotating (ignored by desktop browsers) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
[data-m-tabs] { display: none; }

@media (max-width: 720px) {

  /* 1. Let the window scroll, not <body>. "hidden" on both html and body made <body> the scroll box,
     so new pages opened half way down and the iPhone address bar never collapsed. "clip" cuts the
     same overflow without creating a scroll box. */
  html, body { overflow-x: clip !important; }

  /* 2. Grids with a small fixed column (bullets, step numbers, bar labels) keep their columns.
     mobile.js stores the original columns in --m-cols. */
  :is(#dc-root, #bw-prerender) [data-m-grid] { grid-template-columns: var(--m-cols) !important; }

  /* 3. Grids the design meant to show as two columns on phones (the catch-all rule overruled them) */
  :is(#dc-root, #bw-prerender) :is([data-categories-grid], [data-partner-grid], [data-partners-grid], [data-team-grid],
    [data-roles-grid], [data-role-others], [data-help-downloads])[style] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important;
  }

  /* 4. Headings: long words wrap instead of running off the screen; Dutch compounds get hyphens */
  :is(#dc-root, #bw-prerender) :is(h1, h2, h3, h4) { overflow-wrap: break-word; }
  :is(#dc-root, #bw-prerender) :is(h1, h2, h3):lang(nl) { -webkit-hyphens: auto; hyphens: auto; }

  /* 5. Form fields at 16px, so iPhones do not zoom in when you tap them */
  :is(#dc-root, #bw-prerender, body) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
    font-size: 16px !important;
  }

  /* 6. Buttons never wider than the screen (eco-design hero) */
  :is(#dc-root, #bw-prerender) [data-hero-ctas] > *,
  :is(#dc-root, #bw-prerender) [data-hero-ctas] :is(button, a) { box-sizing: border-box !important; max-width: 100% !important; }

  /* 7. Section intros that stick to the top on desktop scroll normally on phones (home and industry FAQ) */
  :is(#dc-root, #bw-prerender) [data-faq-grid] > div:first-child { position: static !important; }

  /* 8. Methodology: nine supply chain steps as a 3 x 3 grid instead of one squeezed row */
  :is(#dc-root, #bw-prerender) div:has(> [style*="left: 76px"][style*="right: 76px"]) > [style*="left: 76px"] { display: none !important; }
  :is(#dc-root, #bw-prerender) div:has(> [style*="left: 76px"][style*="right: 76px"]) > [style*="justify-content: space-between"] {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; column-gap: 6px;
  }

  /* 9. Quick Score vs Expert (home): the two tiers side by side, the aspect as a label above each row */
  :is(#dc-root, #bw-prerender) [data-cmp-row] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  :is(#dc-root, #bw-prerender) [data-cmp-row] > [data-cmp-aspect] { grid-column: 1 / -1; padding: 16px 0 8px !important; }
  :is(#dc-root, #bw-prerender) [data-cmp-head] > [data-cmp-aspect] { display: none !important; }
  :is(#dc-root, #bw-prerender) [data-cmp-row] > div:not([data-cmp-aspect]) { padding: 14px 12px !important; font-size: 14px !important; gap: 8px !important; }
  :is(#dc-root, #bw-prerender) [data-cmp-head] > div:not([data-cmp-aspect]) { padding-top: 26px !important; }
  :is(#dc-root, #bw-prerender) [data-cmp-head] > div > div:first-of-type { font-size: 20px !important; }

  /* 10. Before/after slider (case studies): the two panels stacked, no dragging needed */
  :is(#dc-root, #bw-prerender) [data-screen-only]:has(> input[type=range]) { height: auto !important; display: flex !important; flex-direction: column; }
  :is(#dc-root, #bw-prerender) [data-screen-only]:has(> input[type=range]) > div:nth-child(1),
  :is(#dc-root, #bw-prerender) [data-screen-only]:has(> input[type=range]) > div:nth-child(3),
  :is(#dc-root, #bw-prerender) [data-screen-only]:has(> input[type=range]) > div:nth-child(5),
  :is(#dc-root, #bw-prerender) [data-screen-only]:has(> input[type=range]) > input { display: none !important; }
  :is(#dc-root, #bw-prerender) [data-screen-only]:has(> input[type=range]) > div:nth-child(2),
  :is(#dc-root, #bw-prerender) [data-screen-only]:has(> input[type=range]) > div:nth-child(4) {
    position: static !important; inset: auto !important; clip-path: none !important; padding: 22px 20px !important;
  }
  :is(#dc-root, #bw-prerender) [data-screen-only]:has(> input[type=range]) > div:nth-child(2) { background: rgb(238, 243, 252); }
  :is(#dc-root, #bw-prerender) [data-screen-only]:has(> input[type=range]) > div:nth-child(4) { order: -1; background: rgb(31, 54, 96); }
  :is(#dc-root, #bw-prerender) [data-screen-only]:has(> input[type=range]) li { flex-direction: column; gap: 2px !important; }

  /* 11. API page: the arrows between the three blocks point down instead of crossing the text */
  :is(#dc-root, #bw-prerender) [data-api-flow] > div:nth-child(2),
  :is(#dc-root, #bw-prerender) [data-api-flow] > div:nth-child(4) { transform: none !important; height: auto !important; padding: 4px 0; }
  :is(#dc-root, #bw-prerender) [data-api-flow] > div:nth-child(2) > div,
  :is(#dc-root, #bw-prerender) [data-api-flow] > div:nth-child(4) > div {
    width: 2px !important; height: 28px !important;
    background: repeating-linear-gradient(180deg, var(--blue-300) 0 6px, transparent 6px 11px) !important;
  }
  :is(#dc-root, #bw-prerender) [data-api-flow] > div:nth-child(2) > div > span,
  :is(#dc-root, #bw-prerender) [data-api-flow] > div:nth-child(4) > div > span { display: none !important; }

  /* 12. About: the four key figures as a tidy 2 x 2 block */
  :is(#dc-root, #bw-prerender) [data-mission-grid] [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important;
  }
  :is(#dc-root, #bw-prerender) [data-mission-grid] [style*="grid-template-columns: 1fr 1fr"] > div { padding: 18px !important; min-width: 0; }
  :is(#dc-root, #bw-prerender) [data-mission-grid] [style*="grid-template-columns: 1fr 1fr"] > div > div:first-child { font-size: 32px !important; }

  /* 13. Newsletter box: email field and button on their own full-width lines */
  :is(#dc-root, #bw-prerender) [data-newsletter-form] { flex-direction: column !important; }
  :is(#dc-root, #bw-prerender) [data-newsletter-form] input { flex: 0 0 auto !important; height: 48px; box-sizing: border-box; }

  /* 14. Footer: two columns of links with bigger tap areas, about half as long */
  :is(#dc-root, #bw-prerender) [data-footer-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 16px !important; }
  :is(#dc-root, #bw-prerender) [data-footer-grid] > div:first-child { grid-column: 1 / -1; }
  :is(#dc-root, #bw-prerender) [data-footer-grid] a { display: block; font-size: 15px !important; padding: 7px 0; }
  :is(#dc-root, #bw-prerender) [data-footer-grid] > div > div { gap: 0 !important; }
  :is(#dc-root, #bw-prerender) [data-footer-grid] > div > div > div { margin-top: 12px !important; margin-bottom: 2px; }
  :is(#dc-root, #bw-prerender) [data-footer-grid] ~ div,
  :is(#dc-root, #bw-prerender) [data-footer-grid] ~ div a { font-size: 13px !important; }

  /* 15. Menu button turns into a close (X) icon while the menu is open */
  [data-nav-burger] svg path { transition: transform .2s ease-out, opacity .2s ease-out; transform-box: view-box; transform-origin: 12px 12px; }
  [data-nav-burger][aria-expanded="true"] svg path:nth-child(1) { transform: rotate(45deg) translateY(5px); }
  [data-nav-burger][aria-expanded="true"] svg path:nth-child(2) { opacity: 0; }
  [data-nav-burger][aria-expanded="true"] svg path:nth-child(3) { transform: rotate(-45deg) translateY(-5px); }

  /* 16. Wide tables become stacked cards: one card per row, each value with its column name above it.
     mobile.js marks the table (data-m-table), its header row (data-m-thead) and copies the column names
     into data-m-label. Covers the div tables in articles and the <table>s in the Privacy Statement. */
  :is(#dc-root, #bw-prerender) [data-m-table] { min-width: 0 !important; width: 100% !important; display: block !important; }
  :is(#dc-root, #bw-prerender) [data-m-table] [data-m-thead] { display: none !important; }
  :is(#dc-root, #bw-prerender) [data-m-table] [data-m-row] {
    display: block !important; padding: 14px 16px !important; border-bottom: 1px solid var(--border-default);
  }
  :is(#dc-root, #bw-prerender) [data-m-table] [data-m-row]:last-child { border-bottom: 0; }
  :is(#dc-root, #bw-prerender) [data-m-table] [data-m-row] > * {
    display: block !important; padding: 0 !important; border: 0 !important; background: none !important;
    text-align: left !important; min-width: 0 !important; white-space: normal !important;
  }
  :is(#dc-root, #bw-prerender) [data-m-table] [data-m-row] > :first-child { font-weight: 600 !important; color: var(--text-heading); margin-bottom: 4px; }
  :is(#dc-root, #bw-prerender) [data-m-table] [data-m-row] > :not(:first-child) { margin-top: 8px; }
  :is(#dc-root, #bw-prerender) [data-m-table] [data-m-row] > [data-m-label]:not(:first-child)::before {
    content: attr(data-m-label); display: block; margin-bottom: 2px;
    font: 600 11px/1.4 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; color: var(--grey-500);
  }
  :is(#dc-root, #bw-prerender) table[data-m-table] :is(thead, tbody, tr) { display: block !important; }
  :is(#dc-root, #bw-prerender) :has(> [data-m-table]) { overflow-x: visible !important; }

  /* 17. Pricing, "What each plan includes": one plan at a time with tabs (mobile.js adds the tabs) */
  [data-m-tabs] {
    display: flex; gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 12px;
    background: var(--grey-100, #eef1f5); position: sticky; top: 8px; z-index: 5;
  }
  [data-m-tabs] button {
    flex: 1 1 0; min-width: 0; height: 44px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
    font: 600 14px var(--font-heading); color: var(--grey-700, #3a4556);
  }
  [data-m-tabs] button[aria-selected="true"] { background: #fff; color: var(--blue-800, #1F3660); box-shadow: 0 1px 3px rgba(31, 54, 96, .15); }
  :is(#dc-root, #bw-prerender) [data-compare][data-m-plan] { overflow: visible !important; }
  :is(#dc-root, #bw-prerender) [data-compare][data-m-plan] > div { min-width: 0 !important; }
  :is(#dc-root, #bw-prerender) [data-compare][data-m-plan] > div > div { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important; }
  :is(#dc-root, #bw-prerender) [data-compare][data-m-plan="1"] > div > div > :is(:nth-child(3), :nth-child(4)),
  :is(#dc-root, #bw-prerender) [data-compare][data-m-plan="2"] > div > div > :is(:nth-child(2), :nth-child(4)),
  :is(#dc-root, #bw-prerender) [data-compare][data-m-plan="3"] > div > div > :is(:nth-child(2), :nth-child(3)) { display: none !important; }
  :is(#dc-root, #bw-prerender) [data-compare][data-m-plan] > div > div:first-child > :first-child { display: none !important; }
  :is(#dc-root, #bw-prerender) [data-compare][data-m-plan] > div > div:first-child > :not(:first-child) { grid-column: 1 / -1; padding: 18px 12px !important; }
  :is(#dc-root, #bw-prerender) [data-compare][data-m-plan] > div > [data-m-section] > :first-child { grid-column: 1 / -1; padding: 12px 16px !important; }
  :is(#dc-root, #bw-prerender) [data-compare][data-m-plan] > div > [data-m-section] > :not(:first-child) { display: none !important; }
  :is(#dc-root, #bw-prerender) [data-compare][data-m-plan] > div > div > :first-child { padding: 12px 10px 12px 16px !important; font-size: 14px !important; }
  :is(#dc-root, #bw-prerender) [data-compare][data-m-plan] > div > div > :not(:first-child) { font-size: 13px !important; padding: 8px !important; text-align: center; }
}

/* Very small phones (up to 360px, for example the first iPhone SE): long words may break anywhere,
   fixed-width cards shrink to the screen */
@media (max-width: 360px) {
  :is(#dc-root, #bw-prerender) :is(div, span, a, p, li) { overflow-wrap: anywhere; }
  :is(#dc-root, #bw-prerender) [data-finding-card] { max-width: 100% !important; box-sizing: border-box; }
  :is(#dc-root, #bw-prerender) [style*="auto-fit"][style*="minmax(3"] { grid-template-columns: minmax(0, 1fr) !important; }
  :is(#dc-root, #bw-prerender) a:has(> div[style*="width: 160px"]) { min-width: 0; padding: 12px !important; }
  :is(#dc-root, #bw-prerender) a > div[style*="width: 160px"] { width: 100% !important; }
}