/**
 * @file
 * WCAG 2.2 AA remediation for tiempos.
 *
 * Kept in its own file, loaded last (weight 101, after responsive.css at 100),
 * so these rules win the cascade without editing rules elsewhere in the theme.
 * The file is deliberately theme-agnostic apart from the two tiempos-specific
 * selector blocks at the end, so it can be lifted into the other eType themes.
 *
 * Each block cites the success criterion it satisfies.
 */

:root {
  /*
   * Focus ring colour. #3273dc measures 4.55:1 against #fff and 4.36:1
   * against Bulma's #0a0a0a (black-bis), so it clears the 3:1 that 1.4.11
   * requires on both the light page background and the dark CTA buttons.
   * Override per site only with a colour verified at >= 3:1 on both.
   */
  --a11y-focus-ring: #3273dc;
}

/**
 * 2.4.7 Focus Visible (AA) + 1.4.11 Non-text Contrast (AA).
 *
 * Before this, the theme had three :focus rules in fifteen stylesheets, and
 * style.css:202 actively removed the indicator from every input:
 *
 *   input:focus { outline: none; box-shadow: none; }
 *
 * That rule is left in place — this overrides it — so that any layout which
 * depended on inputs having no default ring is unaffected on mouse use.
 * :focus-visible means pointer users still never see a ring.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible {
  outline: 3px solid var(--a11y-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/*
 * .dropdown-content sets overflow: hidden (style.css:302), which would clip an
 * outset ring on the submenu links. Inset it for those only.
 */
#main-navbar-menu .dropdown .dropdown-menu .dropdown-content a:focus-visible {
  outline-offset: -3px;
}

/**
 * 2.4.1 Bypass Blocks (A) + 2.4.7 Focus Visible (AA).
 *
 * html.html.twig:56 emits the skip link and core's system/base supplies
 * .visually-hidden.focusable, but core reveals it with `position: static
 * !important`, which drops it into the document flow and shoves the masthead
 * down as soon as it takes focus. Pull it out of flow and give it a visible
 * treatment instead. The !important is required to beat core's.
 */
.visually-hidden.focusable.skip-link:active,
.visually-hidden.focusable.skip-link:focus,
.visually-hidden.focusable.skip-link:focus-within {
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--color-white, #fff);
  color: var(--color-text-dark, #222);
  font-family: sans-serif;
  font-size: 1rem;
  text-decoration: underline;
  outline: 3px solid var(--a11y-focus-ring);
  outline-offset: -3px;
}

/**
 * 2.1.1 Keyboard (A) + 1.4.13 Content on Hover or Focus (AA).
 *
 * menu--main.html.twig:57 renders top-level items that have children as
 * Bulma's generic `.dropdown.is-hoverable`. Bulma opens that component on
 * hover alone:
 *
 *   .dropdown.is-active .dropdown-menu,
 *   .dropdown.is-hoverable:hover .dropdown-menu { display: block; }
 *                                                  -- bulma.css:4763
 *
 * Note that Bulma *does* add :focus-within for `.navbar-item.has-dropdown`
 * (bulma.css:6295) — the generic `.dropdown` component simply never got the
 * same treatment. The consequence is that a keyboard user could not open the
 * submenus at all, so every child menu item was unreachable without a mouse.
 *
 * :focus-within also satisfies the "Hoverable" and "Persistent" halves of
 * 1.4.13; "Dismissible" is handled by the Escape key binding in theme.js.
 */
.dropdown.is-hoverable:focus-within .dropdown-menu {
  display: block;
}

/*
 * Escape sets .is-a11y-dismissed (theme.js) to close the submenu while focus
 * stays where it is, which is what "Dismissible" requires. Equal specificity
 * to both the rule above and Bulma's :hover rule, so it wins purely on source
 * order — this file loads last. Keep it below the :focus-within rule.
 */
.dropdown.is-hoverable.is-a11y-dismissed .dropdown-menu {
  display: none;
}

/**
 * 2.5.8 Target Size (Minimum) (AA) — 24x24 CSS px.
 *
 * .submitted sets font-size 0.8rem / line-height 1.3 (style.css:232), giving
 * byline links a ~15px hit area. Padding raises the measured box past 24px;
 * the matching negative margin cancels the effect on the line box, so nothing
 * on the page moves. Applied to the anchor rather than .submitted so the
 * surrounding date text is unaffected.
 */
.submitted a {
  display: inline-block;
  padding-block: 5px;
  margin-block: -5px;
}

/*
 * Teaser headings. Single-line titles measure ~20-21.5px, under the 24px
 * floor; multi-line ones already clear it. Same padding/negative-margin pair
 * so the measured box grows without moving anything.
 */
.content-container h2 a,
.content-container h3 a {
  display: inline-block;
  padding-block: 3px;
  margin-block: -3px;
}

/*
 * The two blocks above expand each target toward the other: the heading now
 * reaches 3px below its text, the byline 5px above its own. Measured on
 * nancecountyjournal the natural gap between them is only 3px, so without
 * this the two hit areas overlapped by 2px and clicks in that band landed on
 * whichever painted last.
 *
 * padding rather than margin-top deliberately — .submitted is an adjacent
 * sibling of the h2, so their vertical margins would collapse to the larger
 * of the two and swallow part of the offset. Padding does not collapse, so
 * the gap goes 3px -> 11px exactly, leaving 3px of clear space between the
 * two targets. Costs 8px of card height, which is the visible trade-off here.
 */
.content-container .submitted {
  padding-top: 8px;
}

/**
 * 2.4.11 Focus Not Obscured (Minimum) (AA).
 *
 * On feature nodes the nav is position: fixed (responsive.css:36) and
 * .addtoany is fixed at z-index 9999 (style.css:1461). Without a scroll
 * margin, tabbing to a link just below the fold scrolls it flush to the
 * viewport top and straight under the fixed bar. 60px clears the 42px nav
 * offset that responsive.css:14 already compensates for, plus the ring.
 */
.page-node-type-feature a,
.page-node-type-feature button,
.page-node-type-feature input,
.page-node-type-feature [tabindex] {
  scroll-margin-top: 60px;
}