/*
 * DGA colour + typography tokens applied to the Laws page's own
 * hand-built tabs/category/document browser (laws-and-regulation.blade.php,
 * Activities > Laws). The whole interaction (tab switching, category
 * selection, mobile slide-toggle) is bespoke jQuery keyed off the exact
 * classes/ids below -- this file only touches purely presentational
 * properties (background/text colour, box-shadow colour, font-family) so
 * none of that JS wiring is affected.
 *
 * Selectors are prefixed with `body` (not !important) to win specificity
 * over the page's own inline <style> block, which sits later in the DOM
 * than this stylesheet's <head> <link> tag.
 */
body .customLawsRegulations h2,
body .customLawsRegulationsWrapper h4,
body .customLawsRegulationsLeft li,
body span.showLawTitle,
body .showLawItemsBanner h4,
body span.customLawsRegulationsTabItem {
  font-family: var(--font-family-arabic);
}

/* Client feedback (2026-09): the tabs/sidebar were restyled from filled
   pills/cards to the DGA Tabs guideline's underline look directly in the
   page's own inline <style> block (an active tab/item is now
   background:transparent + a sliding indicator bar, not a solid fill) --
   these three rules used to be exactly what painted that solid fill, and
   being `body`-prefixed they'd still win over the new inline rules by
   specificity even though the inline styles changed. Left in place (not
   deleted) only for the transition delay, forced transparent so the new
   underline styling actually shows. */
body .customLawsRegulationsTabItem.active {
  background-color: transparent;
  box-shadow: none;
}

body .customLawsRegulationsLeft li.active {
  background-color: transparent;
}

@media (min-width: 768px) {
  body .customLawsRegulationsLeft li:hover {
    background-color: var(--button-background-neutral-hovered);
  }
}

body .showLawIcon,
body .showLawDocItem:hover .showLawIcon {
  background-color: var(--colors-primary-sa-flag-600-primary);
}

@media (max-width: 767px) {
  body .customLawsRegulationsTab {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 10 !important;
  }
}

