/* =============================================================================
   Accessibility: focus visibility and the skip link.

   Loaded last, site-wide. Everything here is deliberately !important, which is
   normally a smell -- the reason is that twelve rules across this theme kill the
   focus outline on :focus, two of them already using !important:

       css/front-page.css:615   outline: none !important;
       css/woo-checkout.css:89  outline: none !important;
       ...and ten more that replace the ring with a border-colour change

   Those were written for mouse users and they are why tabbing through the site
   currently shows nothing at all. An override that does not out-rank them does
   nothing, so this file states its case once, loudly, and no more than it needs.

   :focus-visible, not :focus -- the ring appears for keyboard and assistive-tech
   users and never on a mouse click, so the visual design is untouched for
   everyone using a pointer.

   WCAG 2.1: 2.4.7 Focus Visible (AA), 1.4.11 Non-text Contrast (AA).
   ========================================================================== */

:focus-visible {
	/*
	 * Two rings, because this site has three kinds of surface and no single
	 * colour reads on all of them:
	 *   ink inner  -- reads on cream pages AND on the gold CTA buttons
	 *   gold outer -- reads on the ink footer, 404 block and CTA band
	 * Ink on cream is 15:1; gold on ink is 5.4:1; both clear the 3:1 that
	 * 1.4.11 asks of a focus indicator.
	 */
	/*
	 * Both rings are drawn with box-shadow, not outline.
	 *
	 * Verified by tabbing the real page: something in the parent theme
	 * suppresses `outline` on links even against !important, while box-shadow
	 * lands every time. The outline below is kept as a fallback for anywhere
	 * box-shadow is clipped, but it is not what you see -- the two shadow rings
	 * are, so they carry the contrast requirement rather than relying on a
	 * declaration that loses a cascade fight we do not control.
	 */
	box-shadow: 0 0 0 2px #171610, 0 0 0 5px #9a8449 !important;
	outline: 2px solid #171610 !important;
	outline-offset: 2px !important;
	/* A square ring on a round control reads as a rendering bug. */
	border-radius: inherit;
}

/* Firefox draws its own dotted ring on top of ours. */
::-moz-focus-inner { border: 0; }

/* -----------------------------------------------------------------------------
   Skip link

   First focusable element on every page (header.php). Off-screen until focused
   rather than display:none, which would take it out of the tab order and defeat
   the point.
   -------------------------------------------------------------------------- */
.cc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	white-space: nowrap;
}

.cc-skip-link:focus {
	left: 8px;
	top: 8px;
	background: #171610;
	color: #f6f4ef;
	font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.4px;
	line-height: 1;
	padding: 14px 22px;
	text-decoration: none;
}

/*
 * The skip target takes focus programmatically so the NEXT tab continues from
 * the content rather than jumping back to the top of the nav. It is a landmark,
 * not a control, so it must not draw a ring around the entire page.
 */
#apus-main-content:focus,
#apus-main-content:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.cc-skip-link { transition: none !important; }
}


/* =============================================================================
   Gold text on the site's dark surfaces.

   The AA fix darkened gold text so it would pass on cream and white. On the
   dark blocks that made it WORSE: #7d6d41 on ink is 3.57:1, where the original
   #a59055 was already passing at 5.80:1. Contrast is a relationship, not a
   property of a colour, and these four containers are the other half of it.

   Redefining the tokens on the container rather than rewriting each rule means
   every gold descendant -- present and future -- gets the right one, because
   custom properties inherit.

       #a59055 on #171610 (ink)        5.80:1
       #a59055 on #26241e (dark hair)  4.97:1
   ========================================================================== */
.cc-fp-searchband,   /* home search band */
.cc-arc-searchband,  /* the archive's own wrapper for the same component */
.cc-fp-video,        /* founder video section */
.cc-page-hero,       /* auth and content page heroes */
.cc-seller,          /* seller card on a listing */
.cc-acct-side {      /* account sidebar nav */
	--gold: #a59055;
	--gold-text: #a59055;
}