/*
 * Redux-only CSS.
 *
 * The design comes from the legacy stylesheets (main.css, custom.css) copied
 * verbatim from sub-web. This file exists solely to neutralise rules that
 * depended on legacy JavaScript which the port does not yet run — panels that
 * the old jQuery revealed on click would otherwise stay hidden forever, or
 * conversely be stuck open.
 *
 * Anything added here is a deviation from the original and should be removed
 * as the corresponding behavior is ported.
 */

/* The help and basket panels are opened by legacy jQuery; keep them closed. */
.helppanel,
.basketpanel,
.sharepanel {
  display: none;
}

/*
 * Basket controls.
 *
 * main.css styles `.btn.add` as an icon button; these rules only add the
 * selected state and the accessible label, which the legacy markup had no
 * equivalent for (it gave no feedback that an item had been added at all).
 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
button.addbasket {
  cursor: pointer;
  background-color: transparent;
  border: 0;
}
button.addbasket.in-basket {
  filter: hue-rotate(90deg) saturate(1.6);
}

/*
 * Buttons standing in for legacy divs.
 *
 * Several controls that legacy built as a <div> with a jQuery click handler
 * are <button> here, so they can be reached by keyboard. main.css never reset
 * buttons — it had no reason to, there were none — so each one arrives with
 * the browser's own background, border and font. That is what put a white box
 * around every carousel thumbnail and a grey disc where the slider arrows are.
 *
 * Padding is deliberately not reset: main.css sets `.wrap-item{padding:4%}`
 * and this file loads after it.
 */
.wrap-item,
.photo-open,
.prev-mobile,
.next-mobile,
.expand-menu,
.mob-submenu-toggle {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* A <button> is inline-block by default; the divs these replace are blocks. */
.wrap-item,
.photo-open {
  display: block;
  width: 100%;
}

.photo-open,
.mob-submenu-toggle {
  padding: 0;
}

/*
 * The mobile menu is an accordion.
 *
 * Legacy collapses every sub-list and reveals one at a time; the carets come
 * from `.nav>li a>span:after` and `.nav li.open>a>span:after`, which is why
 * each parent link carries an empty <span>. Nothing in main.css hides the
 * sub-lists — legacy's navgoco did it from script — so without this rule the
 * menu renders fully expanded, every newsroom at once, and runs off the screen.
 */
#mobnav li ul {
  display: none;
}
#mobnav li.open > ul {
  display: block;
}