/* ═══════════════════════════════════════════════════════════════════════════
* urbania.com.pa — accessibility layer
*
* STAGE AT: assets/css/a11y.css
* LOAD: LAST in , after plantilla.css, so it wins without !important
* on anything except the focus rules (see note below).
*
*
*
* Additive only. It introduces no layout, no colour change and no font change
* — nothing here can move a pixel on a page that is already keyboard-inert.
*
* Measured on 2026-07-29 against the live site:
* · assets/css/main.css contains 3 `outline:none` / `outline:0` rules
* · `:focus-visible` appears ZERO times in main.css, style.css,
* plantilla.css or responsive.css
* · no skip link exists on any page
* · `prefers-reduced-motion` is honoured nowhere (animate.css, owl.carousel,
* skrollr and the preloader all animate unconditionally)
* ═══════════════════════════════════════════════════════════════════════════ */
/* ── 1. FOCUS VISIBILITY ─────────────────────────────────────────────────────
* `!important` is used here deliberately and only here. The three
* `outline:none` declarations in main.css are equally specific and load first;
* without !important a later, more specific theme selector wins again the next
* time someone edits main.css. A visible focus ring is not a style preference
* — WCAG 2.4.7 is a hard requirement, and it is the single change that makes
* this site keyboard-operable at all.
*
* :focus-visible, not :focus — mouse users never see it, so nothing about the
* pointer experience changes.
* ────────────────────────────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid #fdc957 !important; /* the yellow already in the footer */
outline-offset: 2px !important;
border-radius: 2px;
/* A second, dark ring so the yellow stays visible on light backgrounds. */
box-shadow: 0 0 0 5px rgba(20, 24, 29, .55) !important;
}
/* Older engines with no :focus-visible support still get a ring on :focus.
* Scoped inside @supports not so modern browsers never see it. */
@supports not selector(:focus-visible) {
a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
outline: 3px solid #fdc957 !important;
outline-offset: 2px !important;
}
}
/* The theme suppresses focus on these specifically. */
#mainnav ul li a:focus-visible,
.btn-menu:focus-visible,
.go-top:focus-visible,
.search-field:focus-visible,
.search-submit:focus-visible,
.joinchat__button:focus-visible {
outline: 3px solid #fdc957 !important;
outline-offset: 2px !important;
}
/* ── 2. SKIP LINK ────────────────────────────────────────────────────────────
* Markup goes in lib/plantilla/website/index.php, immediately after :
* Saltar al contenido
* and the target id on the content wrapper. See README §2.
*
* Off-screen rather than display:none — display:none removes it from the tab
* order entirely, which defeats the point.
* ────────────────────────────────────────────────────────────────────────── */
.urbania-skip {
position: absolute;
top: 0;
left: -9999px;
z-index: 10000;
padding: .85rem 1.5rem;
background: #14181d;
color: #fff !important;
font: 600 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
text-decoration: none;
border-radius: 0 0 4px 0;
}
.urbania-skip:focus,
.urbania-skip:focus-visible {
left: 0;
outline: 3px solid #fdc957 !important;
outline-offset: -3px !important;
}
/* Give the skip target a scroll offset — the header is sticky
* (body class `header_sticky`), so without this the anchor lands under it. */
#contenido {
scroll-margin-top: 96px;
}
/* ── 3. SCREEN-READER-ONLY TEXT ──────────────────────────────────────────────
* The theme already ships `.screen-reader-text` (used once, on the search
* label). This is the same utility under a name that will not collide, for the
* accessible names added to the icon-only links in README §3.
* ────────────────────────────────────────────────────────────────────────── */
.urbania-sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ── 4. TARGET SIZE ──────────────────────────────────────────────────────────
* The footer social icons are `` inside bare
* elements — roughly 28×28 CSS px of hit area, under the 24×24 minimum of
* WCAG 2.2 SC 2.5.8 once the icon's own padding is discounted, and awkward on
* a phone. Padding is added rather than width/height so the existing float
* layout does not shift.
* ────────────────────────────────────────────────────────────────────────── */
.copyright a {
display: inline-block;
padding: 6px;
}
/* ── 5. REDUCED MOTION ───────────────────────────────────────────────────────
* animate.css, owl.carousel, skrollr and the `.preloader` all animate with no
* regard for the user's OS setting. The preloader in particular is an infinite
* spinner, which is a vestibular trigger.
*
* Only animation is disabled — nothing is hidden — so content that fades in
* simply appears.
* ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.preloader,
.clear-loading {
animation: none !important;
}
/* animate.css sets opacity:0 until its animation runs; with animations
killed, that content would never become visible. */
.animated,
.wow {
opacity: 1 !important;
visibility: visible !important;
}
}
/* ── 6. FORCED COLORS / HIGH CONTRAST ────────────────────────────────────────
* In Windows high-contrast mode `outline` colours are overridden by the system
* palette. `Highlight` is the correct system keyword.
* ────────────────────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 3px solid Highlight !important;
outline-offset: 2px !important;
}
}