/*
 * Only two additions to the original CSS, both for accessibility, not for looks:
 * the honeypot field must be hidden from people but present for bots, and the
 * invisible click target on the related-content tiles needs a text alternative.
 */
/* The original CSS is copied verbatim by copy-assets.mjs, so anything added here must live
   in this file, otherwise a re-run of the pipeline overwrites it. */

/* 851–900 px: below ~897 px the top menu no longer fits next to a 40% logo and drops onto
   a second line (the old site wrapped in this band too, it only fitted above ~896 px).
   Shrinking the logo there keeps the menu on one line down to the mobile breakpoint, where
   the menu becomes the hamburger list anyway. */
@media (min-width: 851px) and (max-width: 900px) {
  #header a.logo { width: 35%; }
}

img {
  /* The original CSS had max-width:100% without height:auto, so an image wider than
     its container was squashed on narrow screens. This only changes rendering when
     the image does not fit, which is a bug in the original design. */
  height: auto;
}

/* The tab widget and the slider are drawn by JS in the original design, so before the
   script runs every panel is visible and the page jumps. Hiding the inactive panels in
   CSS removes that jump; the script then shows the selected one. */
.tab-navigation > .col24.sub-grid { display: none; }
.tab-navigation > .col24.sub-grid:first-of-type { display: block; }

/* The original slider was slick with fade:true, so the slides are stacked and cross-fade
   (500 ms, linear, autoplay 4 s, pauseOnHover). Keeping them in the DOM also means the
   page still shows the first slide if JS is off.
   The no-JS fallback must not match once the slider is running, otherwise the first
   slide never fades out and its text stays on top of the next slide's text. */
.slick-showcase .case { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s linear; }
.slick-showcase .case.is-active { opacity: 1; }
.slick-showcase:not(.js-slider) .case:first-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .slick-showcase .case { transition: none; }
}

/* The original mobile menu was a sidr drawer populated from the nav. Same behaviour
   without the plugin: the menu is hidden until the toggle is pressed. */
@media (max-width: 850px) {
  #main-navigation { display: none; }
  #main-navigation.open-menu { display: block; }
  #main-navigation li ul { display: none; }
  #main-navigation li.open-group ul { display: block; }
  /* The mega panels are a column grid sized for the 70em container. At mobile
     width 20–25% is ~75 px, so every item wraps onto several lines. Stack them. */
  .dropdown .column, .dropdown .column.solutions, .dropdown .column.partners { width: 100%; }
}

/* Sections that centre their columns with .vertical-align-middle need flexbox rather than
   the original top:50% + translateY(-50%) hack: the percentage resolves against the section
   height, and when that height comes from the floats it is circular and resolves to 0, so
   every column is pulled up by half its own height and overlaps the section above. Flexbox
   centres against the section height without the circular dependency. With the legacy fixed
   heights converted to min-height (build-content.mjs) the rendering is identical wherever
   the content fits. */
.container-wrapper.colfix > section { display: flow-root; }
.container-wrapper.colfix > section:has(> .vertical-align-middle) { display: flex; flex-wrap: wrap; align-items: center; }
.container-wrapper.colfix > section:has(> .vertical-align-middle) > .vertical-align-middle { top: 0; transform: none; }

/* Spec tables for the current phone lineup. The 2016 content had no tables, so this is
   new; it uses the same type scale and colours as the rest of the page. */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table caption { text-align: left; color: #004277; font-family: 'Ubuntu', 'Neo Sans W01'; font-weight: 700; margin-bottom: 0.5em; }
.spec-table th, .spec-table td { padding: 0.5em 0.75em; border-bottom: solid 1px #ddd; text-align: left; vertical-align: top; }
.spec-table thead th { color: #ec6600; font-family: 'Ubuntu', 'Neo Sans W01'; background: #f5f5f5; }
.spec-table tbody td:first-child { color: #112e5c; font-weight: 700; width: 30%; }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.related-item .hidden-button span {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1em;
  top: 1em;
  width: auto;
  height: auto;
  background: #fff;
  padding: 0.5em 1em;
  z-index: 2000;
}