/* ---------------------------------------------------------
 * augment.css — EAA augmentation layer for /foodhacks/
 * Loaded via nginx sub_filter into Readymag SPA <head>.
 * Goal: meet WCAG 2.4.1, 2.4.7, 2.2.2/2.3.3 across the
 * Readymag-generated DOM without depending on Readymag itself.
 * ---------------------------------------------------------*/

/* Skip-to-content link (WCAG 2.4.1 Bypass Blocks).
 * Visually hidden until receiving focus via Tab on page load. */
.rm-skip-link{
    position:absolute;
    top:-9999px;
    left:0;
    z-index:2147483647;
    padding:.75rem 1.25rem;
    background:#000;
    color:#fff;
    font:600 1rem/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    text-decoration:underline;
    border-radius:0 0 .25rem 0;
}
.rm-skip-link:focus,
.rm-skip-link:focus-visible{
    top:0;
    outline:3px solid #fce201; /* brand yellow */
    outline-offset:2px;
}

/* Screen-reader-only utility. Used by scripts/augment.py to inject a single
 * <h1> on subpage snippets (Readymag emits the page title as an H2), so each
 * bot-facing page has exactly one H1 (WCAG 1.3.1 / page-has-heading-one)
 * without altering the visual Readymag layout. */
.rm-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;
}

/* Visible focus indicator (WCAG 2.4.7 Focus Visible).
 * Readymag exports use a mix of <a>, <button>, role=link/img on <div>.
 * Apply a strong outline to anything keyboard-focusable. */
:focus-visible{
    outline:3px solid #ff3b30 !important;
    outline-offset:2px;
    box-shadow:0 0 0 2px rgba(255,255,255,.6) !important;
}

/* Readymag clears outline on hovered widgets — re-assert focus precedence. */
[role="link"]:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
button:focus-visible{
    outline:3px solid #ff3b30 !important;
    outline-offset:3px;
    border-radius:2px;
}

/* prefers-reduced-motion override (WCAG 2.2.2 Pause, Stop, Hide /
 * 2.3.3 Animation from Interactions). Readymag emits CSS animations and
 * transitions inline. Force them to near-zero for users who request reduced motion. */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }
}

/* Tap-target sizing for the LiveChat widget button + close icons
 * (helps WCAG 2.5.5 / 2.5.8 Target Size). 44×44 minimum. */
.lc-widget-button,
[class*="rmwidget"][role="link"]{
    min-width:24px;
    min-height:24px;
}

/* Footer link to izjava o pristupačnosti — small unobtrusive corner link
 * injected via JS bootstrap (see augment-bootstrap.js if added later). */
.rm-a11y-footer{
    position:fixed;
    right:.75rem;
    bottom:.5rem;
    z-index:1000;
    font:400 .75rem/1.2 system-ui,-apple-system,sans-serif;
    background:rgba(0,0,0,.55);
    color:#fff;
    padding:.25rem .5rem;
    border-radius:.25rem;
    text-decoration:none;
}
.rm-a11y-footer:hover,
.rm-a11y-footer:focus-visible{
    background:#000;
    text-decoration:underline;
}
