/*
 * 0.30.20 — stable text on hover with orange underline, across the shop.
 * Do not adjust font metrics, padding, transforms, borders or position as a hover cue.
 * Keep persistent selected/focus states distinct from temporary pointer hover.
 */

/* Any hover cue on text links is an underline, not moving or boldening text. */
a:hover:not(.bpal-button):not(.button),
a:focus-visible:not(.bpal-button):not(.button) {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Navigation: freeze text metrics and hit area for top-level and submenu links. */
.bpal-primary-nav a,
.bpal-primary-nav a:hover,
.bpal-primary-nav a:focus-visible {
  transition: none;
  text-shadow: none;
}
.bpal-primary-nav a:hover:not(.bpal-button):not(.button),
.bpal-primary-nav a:focus-visible:not(.bpal-button):not(.button) {
  color: var(--bpal-primary);
  text-decoration-line: underline;
  text-decoration-color: var(--bpal-accent);
  text-decoration-thickness: 2px;
  background: transparent;
}
/* The promotional image link is not a text link. */
.bpal-primary-nav .bpal-mega-menu__promo > a:hover,
.bpal-primary-nav .bpal-mega-menu__promo > a:focus-visible {
  text-decoration: none;
}

@media (min-width: 1181px) {
  /* The original menu has 36px rows; don't change their geometry on hover. */
  .bpal-primary-nav .bpal-mega-menu__item > a,
  .bpal-primary-nav .bpal-mega-menu__brand-item > a {
    min-height: 36px;
    padding: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: normal;
    transition: none;
    transform: none;
  }
  .bpal-primary-nav .bpal-mega-menu__item > a:hover,
  .bpal-primary-nav .bpal-mega-menu__item > a:focus-visible,
  .bpal-primary-nav .bpal-mega-menu__brand-item > a:hover,
  .bpal-primary-nav .bpal-mega-menu__brand-item > a:focus-visible {
    min-height: 36px;
    padding: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: normal;
    background: transparent;
    border-color: transparent;
    color: var(--bpal-primary);
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    outline: none;
    transform: none;
  }
  /* Letter selector: active category remains visually selected. Hover only underlines. */
  .bpal-primary-nav .bpal-mega-menu__letters button:not(.is-active):hover {
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
}

/* Match the approved orange navigation underline on accent text links. */
.bpal-text-link:hover:not(.bpal-button):not(.button),
.bpal-text-link:focus-visible:not(.bpal-button):not(.button) {
  text-decoration-color: var(--bpal-accent);
  text-decoration-thickness: 2px;
}

/* Plain text links in the brand directory and sidebar. The filter boxes (.bpal-filter-option, size tiles, colour
 * and collar options) are controls, not links: they do not underline on hover (see the end of this file). */
.bpal-brand-row:hover,
.bpal-filter-scope-link:not([aria-current="page"]):hover {
  background: transparent;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}

/* No pointer-induced motion in filter size controls; retain checked-state fill. */
.bpal-filter-size-button,
.bpal-filter-size-button:hover,
.bpal-filter-size-button:focus-visible {
  transition: none;
  transform: none;
}

/* These elements contain text: disable motion effects without touching media zoom. */
.bpal-primary-nav a,
.bpal-brand-row,
.bpal-filter-scope-link,
.bpal-filter-option,
.bpal-filter-size-button,
.bpal-filter-chip,
.bpal-site-footer a,
.bpal-text-link {
  transition: none;
}

/* Filter controls are controls, not text and not links.
 * - A press, a slightly dragged click or a double click must not select their text (it turned blue while the
 *   box stayed unchecked), so the labels and group headers of the filter panel cannot be selected.
 * - They never underline, neither on hover nor on focus. Keyboard focus on a size tile is a ring around the
 *   tile: the tile resets its outline above, so this ring is its only focus cue. */
.bpal-filter-groups label,
.bpal-filter-groups summary {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.bpal-filter-groups label,
.bpal-filter-groups label:hover,
.bpal-filter-groups label:focus-within {
  text-decoration: none;
}

.bpal-catalog-layout .bpal-filter-size-button:has(> input:focus-visible):focus-within {
  outline: 2px solid var(--bpal-primary) !important;
  outline-offset: 2px;
}

/* Theme 0.33.9: a picture must not turn blue when it ends up in a selection (select all, a double or triple click on
 * text next to it, a drag across the page). The browser paints a translucent selection colour over every <img>: the
 * hero tiles, the logo and the icons looked broken. Text stays selectable. Images are no part of a selection
 * (user-select, which Safari needs with its prefix) and where a browser still paints one it is transparent. */
img {
  -webkit-user-select: none;
  user-select: none;
}

img::selection {
  background: transparent;
}

/* Theme 0.38.4: a field for choosing never shows its text in blue. Chrome selects the whole content of a field that gets the
 * keyboard focus (Tab, or the focus a script moves there), so the "1" in the quantity field turned blue. The content stays
 * selected, so typing a number still replaces it; only the colour is gone, and the text keeps its own. A dropdown is the same
 * where a browser paints its text on focus. Free text (search, address, message) keeps the browser's selection: there it shows
 * what a copy or a replacement will act on. */
input.qty::selection,
.quantity input::selection,
select::selection {
  background: transparent;
  color: inherit;
}

/* Theme 0.56.2: a dark button that is a link keeps its white text under the pointer and on keyboard focus. A pressed link is always one of the two
 * (the pointer is on it, or the keyboard has it), and no rule of the theme or of WooCommerce colours a filled button for `:active` alone.
 * The dark blue and the white of such a button (the cart's "Doorgaan naar afrekenen", the "Lees verder" buttons in a block grid, every
 * button of the block editor, the outline style too) come from theme.json through `:root :where(.wp-element-button, .wp-block-button__link)`,
 * which weighs one class. The global `a:hover { color: var(--bpal-primary) }` weighs a class and an element, so under the pointer the text
 * turned the colour of the button: dark blue on dark blue. The colours are those of `.bpal-button--primary:hover` (and of `.bpal-button--outline:hover`,
 * which fills on hover), so that every dark blue button of the shop behaves the same way, and the underline that every link gets on hover (the first
 * rule of this file) goes: a button is not a text link. This rule weighs the same as that one and comes after it. Left out: the outlined styles of
 * WooCommerce (`.outlined`, `.is-style-outline`: their own colours, which are readable), the text variant (WooCommerce colours it for a button with no fill, so the dark blue of theme.json leaves dark grey text on dark blue, at rest and under the pointer: a fault of its own, on no page of the cart or the checkout, left as it was), a link that is meant as
 * a link (`.is-link`) and the theme's own buttons. A <button> never had the problem (the global rule is for links); keyboard focus keeps its ring (WooCommerce draws its own on
 * its buttons, the theme's `:focus-visible` ring is dark blue on the page). */
a:is(.wp-element-button, .wp-block-button__link):is(:hover, :focus-visible):not(.is-link):where(:not(.wc-block-components-button.is-style-outline, .outlined, .text, .bpal-button)) {
  background-color: var(--bpal-secondary);
  color: var(--bpal-white);
  text-decoration-line: none;
}