/*
 * Watervize chrome fixes layered over the vendor theme.
 *
 * These correct regressions introduced by the var-driven theme / accessibility template work
 * where the source of truth is a vendor file (core.css, node-waves, or the JS-injected
 * template-customizer CSS) that we don't want to fork. Loaded AFTER node-waves (see
 * styles.html / styles_front.html) so these rules win the cascade. Plain CSS (no SCSS build);
 * a collectstatic is enough to deploy.
 */

/*
 * Vertical menu: dropdown (menu-toggle) items wrapped onto two lines.
 *
 * node-waves' `.waves-effect{ display:inline-block; overflow:hidden }` loads after core.css and
 * ties on specificity (0,1,0) with `.menu-link{ display:flex }`, so source order makes it win.
 * Menu-toggle links carry `.waves-effect` (plain links do not), so only the toggles lost the
 * flex row layout and wrapped. Re-assert flex for every menu link at higher specificity (0,2,0).
 */
.menu .menu-link {
  display: flex;
}

/*
 * Template customizer: reset / close / open controls rendered as native gray buttons.
 *
 * Those controls were changed to real <button>s for accessibility, but the customizer's
 * JS-injected CSS still assumes the old <a>/<label> markup and never resets native button
 * chrome — so the open button kept a black outset border (and a mis-placed gear), and the
 * reset/close buttons rendered as gray boxes. Strip the native chrome; the open button keeps
 * its injected teal background, size, radius, and transform (we only remove what the vendor
 * rule forgot to reset for a <button>).
 */
#template-customizer .template-customizer-open-btn,
#template-customizer .template-customizer-reset-btn,
#template-customizer .template-customizer-close-btn {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/*
 * Reset/close have no injected background, so clear the native grey. Do NOT impose flex
 * centering here: the reset button's notification dot is position:absolute with top:auto, so
 * its used position is the static one — flex `align-items/justify-content:center` would shift
 * that static origin and move the dot down/left. Leaving the button as the default inline-block
 * keeps the dot where the vendor CSS expects it (matching prod).
 */
#template-customizer .template-customizer-reset-btn,
#template-customizer .template-customizer-close-btn {
  background-color: transparent;
}

/*
 * Open-button gear icon sits too low. The gear is a position:absolute ::before with top/left:auto,
 * so it lands at its STATIC position plus the vendor's 9px/10px margins. That static origin is the
 * top-left of an <a>'s content box (what the vendor designed for) but the CENTER of a <button>'s
 * content box — so on the <button> markup the margins push the gear down/right. Pin it explicitly
 * (margins zeroed) so it centers in the 38px tab regardless of the button content box. The `button`
 * element selector beats the JS-injected ::before rule and only targets the <button> markup; an <a>
 * keeps the vendor's margin-based centering, which already works for it. RTL keeps its own
 * higher-specificity [dir=rtl] offset.
 */
#template-customizer button.template-customizer-open-btn::before {
  margin: 0;
  top: 9px;
  left: 10px;
}