/* clf chrome.css -- the rules clf-factory's
 * compiled fragments rely on. Moved out of an
 * inline <style> block in header.html so the
 * compiled output works under Content-Security-
 * Policy headers that forbid 'unsafe-inline'
 * (typical for accessibility-org / public-
 * sector consumers).
 */

/* Hide undefined Ionic custom elements until
 * the bundle upgrades them. Otherwise the
 * unstyled HTML peeks through.
 */
:not(:defined) {
  visibility: hidden;
}

/* Skip-link: visually hidden until focused via
 * keyboard, then jumps to <main> or the search
 * input. WCAG 2.4.1 (Bypass Blocks).
 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cobd-color-primary, #000);
  color: var(--cobd-color-primary-contrast, #fff);
  padding: 0.5rem 1rem;
  z-index: 9999;
}
.skip-link:focus {
  left: 0;
}

/* Ionic's default ion-searchbar placeholder is a
 * light grey that axe flags as AA-failing for
 * colour contrast. Ionic exposes the placeholder
 * colour as a CSS custom property; we pin it to
 * a hex that clears AA against both light and
 * dark toolbar surfaces. No var() chain here
 * because this style has to work even when the
 * page stylesheet doesn't carry --cobd-color-*
 * tokens (eg. the audit harness serving the
 * html engine output against the canonical CDN).
 */
ion-searchbar {
  --placeholder-color: #3d4852;
  --placeholder-opacity: 1;
}

/* Text links in CLF-owned content (the footer
 * attribution line + author content inside the
 * Ionic content area) default to Ionic's primary
 * (#72cadb), which is a toolbar-background tint and
 * fails AA contrast as text on white (1.9:1). Pin
 * them to clf's dedicated link token, which clears
 * AA on every theme surface (the dark / high-
 * contrast variants come from tokens.css). Scoped to
 * footer + ion-content so it never recolours chrome
 * anchors styled by class (eg. .skip-link) or anchors
 * Ionic renders inside its own components' shadow DOM.
 */
.cobd-footer a,
ion-content a {
  color: var(--cobd-color-link, #0044a3);
}
.cobd-footer a:visited,
ion-content a:visited {
  color: var(--cobd-color-link-visited, #5c2a91);
}

/* Active-page marker for the <cobd-nav>-rendered
 * ion-lists. The element tags the matching item
 * with aria-current="page" + this class; screen
 * readers announce "current page" from the
 * attribute, sighted users get a tinted
 * background + bolded label from the class.
 * Ionic exposes the primary tint under
 * --ion-color-primary-tint; clf does not
 * currently curate a --cobd-color-primary-tint
 * alias. Fallback hex matches clf's emitted
 * value and only kicks in if tokens.css fails
 * to load.
 */
ion-item.cobd-active-nav-item {
  --background: var(--ion-color-primary-tint, #80cfdf);
  font-weight: 600;
}

/* User-selectable text-size scale. chrome-paint.js
 * sets --cobd-font-scale on <html> from the
 * cookie before first paint; this rule turns
 * that into a root font-size multiplier so every
 * rem-based size on the page scales together.
 * Defaulting to 1 means the rule is a no-op
 * until the user picks a non-default size.
 */
html {
  font-size: calc(100% * var(--cobd-font-scale, 1));
}
