/* ---------------------------------------------------------------------------
   app.css — React replacements for the behaviour Materialize's jQuery plugins
   used to apply as inline styles. Loaded AFTER materialize.min.css and
   stylesheet.css, so the original design is untouched; this file only supplies
   the "open"/"active" states the old JS produced.
   --------------------------------------------------------------------------- */

/* ---- Sidenav (was $('.sidenav').sidenav()) ------------------------------- */
.sidenav {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidenav.is-open {
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
}
.sidenav-overlay {
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.sidenav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
body.sidenav-locked {
  overflow: hidden;
}

/* ---- Collapsible accordion (was $('.collapsible').collapsible()) --------- */
.collapsible-header {
  user-select: none;
}
.collapsible li.is-open > .collapsible-body {
  display: block;
}

/* ---- Nav dropdown (was $('.dropdown-trigger').dropdown({hover:true})) ----
   Materialize positioned #product_dropdown absolutely from JS. Here it is a
   child of its <li>, anchored to the bottom edge of the trigger — the same
   place, without the measuring code.                                         */
.nav-dropdown-host {
  position: relative;
}
.nav-dropdown-host > .dropdown-content {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  min-width: 100%;
  max-height: 80vh;
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0.3);
  transform-origin: 0 0;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-dropdown-host.is-open > .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}
.nav-dropdown-host > .dropdown-content li {
  min-height: 0;
  line-height: 1.5rem;
}
.nav-dropdown-host > .dropdown-content li > a {
  line-height: 22px;
  padding: 14px 16px;
  white-space: nowrap;
}

/* The fixed navbar must not clip the dropdown that hangs below it. */
.navbar-fixed nav,
.navbar-fixed .nav-wrapper {
  overflow: visible;
}

/* ---- Card flip (was the .card-container hover handler) -------------------
   The old handler set transform:rotateY(179deg) on BOTH enter and leave, so
   the card never flipped back in modern browsers. CSS :hover fixes that.     */
.card-container:hover .rotable,
.card-container:focus-within .rotable {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
}
/* NB: stylesheet.css declares `perspective: 600` with no unit, which is
   invalid and therefore ignored — the cards flip flat. That is how the site
   has always looked, so no perspective is added here: supplying one changes
   the compositing path and visibly resamples the card photos. */

/* ---- Loader (was $('.loader').fadeOut()) -------------------------------- */
.loader {
  transition: opacity 0.4s ease;
}
.loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.loader.is-gone {
  display: none;
}

/* ---- Text field labels (was $('input').autoInit / M.updateTextFields) ---- */
.input-field > label.active {
  transform: translateY(-14px) scale(0.8);
  -webkit-transform: translateY(-14px) scale(0.8);
  transform-origin: 0 0;
}

/* ---- Product table rows are real links now (SEO fix) --------------------- */
#product tr.product_row td:first-child a {
  color: inherit;
  display: block;
}
#product tr.product_row td a {
  color: inherit;
}

/* =========================================================================
   Responsive layer.

   The legacy site is already responsive — Materialize's s/m/l grid stacks the
   columns, the navbar collapses into the drawer, and the products table sits in
   an overflow-x wrapper. The brief was that the look must be identical, so
   nothing here changes type size, spacing or the logo at any width. What is
   left are guards that are invisible when the content already fits:
   ========================================================================= */

/* Nothing on the page may scroll the document sideways. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Rich HTML that comes out of the database (product specifications,
   application details) can be wider than a phone — let it scroll itself
   instead of the page. */
.db-html img,
.db-html iframe {
  max-width: 100%;
}
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}