/**
 * TurnKey Directories accessibility overrides (PR-17, audit §11).
 *
 * Why a separate file: the CSS in `public/css/` ships across 30+
 * stylesheets with 36+ `outline: none` / `outline: 0` declarations
 * that strip the visible focus indicator (WCAG 2.4.7). Editing every
 * file would create massive churn for marginal benefit. Loading this
 * sheet last (registered as the highest-priority dependency in
 * `class-turnkeydir-public.php`) lets us re-establish a strong, brand-aware
 * `:focus-visible` ring everywhere with a single rule, and ship the
 * skip-to-content + dialog-close styles the new templates depend on.
 *
 * Token re-tightening: see `:root` block at the bottom for the
 * audit-§11-Medium muted-text contrast remediation.
 *
 * Honor `prefers-reduced-motion` everywhere we add a transition.
 */

/* ── Skip-to-main-content link (audit §11 Medium) ─────────────── */

/*
 * The link is invisible until it receives focus, then snaps to the
 * top-left corner of the viewport above the theme header. Uses the
 * brand accent color so it's recognisable. Targets `#tkd-main` which
 * is added to single-listing.php in PR-17.
 */
.tkd-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 100000; /* above any sticky header */
    padding: 12px 18px;
    background: var(--tkd-accent-color, #1A5BFA);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-radius: 0 0 6px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: top 0.15s ease;
}

.tkd-skip-link:focus,
.tkd-skip-link:focus-visible {
    top: 0;
    outline: 3px solid #ffffff;
    outline-offset: -6px;
}

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

/* ── Global :focus-visible focus ring (audit §11 Medium) ───────── */

/*
 * Restores a visible focus indicator everywhere the various
 * stylesheets stripped one. `:focus-visible` is keyboard-only by
 * default in modern browsers (no flash on mouse click), so this
 * does NOT regress mouse-user UX.
 *
 * Specificity strategy: target each interactive element directly +
 * `:where()` to keep the selector specificity at 0 so existing
 * focus styles can still override per-component when authors want
 * a custom focus look. Combined with this file being enqueued LAST,
 * it wins over the `outline: none` declarations in the bundle by
 * cascade order (same specificity → later rule wins).
 */
/* v2.16.2 (Layer 4 CSS hardening): scoped to body.tkd-active so the
   accent focus ring only applies on plugin pages — non-plugin pages
   keep the host theme's focus styling intact. The :where() wrapper
   still keeps the specificity at (0,1,0) so per-component overrides
   inside the plugin still win. */
body.tkd-active :where(a, button, [role="button"], [role="link"], input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--tkd-accent-color, #1A5BFA) !important;
    outline-offset: 2px !important;
    /* Drop the default browser blue focus ring on top — the accent
       outline is the canonical signal. */
    box-shadow: 0 0 0 4px rgba(var(--tkd-accent-rgb, 26, 91, 250), 0.25) !important;
    border-radius: 4px;
}

/* The accent-color outline can disappear on accent-on-accent buttons
   (e.g. the orange Submit button in the portal). Force a contrasting
   white inner ring for those so the focus state remains visible. */
:where(.tkd-submit-btn, .glass-submit-btn, .enhanced-action-btn, .tkd-action-button):focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: -4px !important;
    box-shadow: 0 0 0 3px var(--tkd-accent-color, #1A5BFA) !important;
}

/* ── Image-modal close button styling (audit §11 High) ────────── */

/*
 * `glass-modal-close` was originally a `<span>` in single-listing.php;
 * PR-17 promoted it to a real `<button type="button">`. The existing
 * .glass-modal-close styles in turnkeydir-public.css were authored for a
 * span, so they leave the button looking like a default browser
 * button. Override here so the visual continuity is preserved while
 * the semantics are correct.
 */
button.glass-modal-close {
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    /* Keep the original span's color/size; turnkeydir-public.css already
       sets .glass-modal-close to a large white × — we just need
       to neutralize the default <button> chrome. */
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    color: inherit;
}

/* Focus ring is brighter on the dark modal backdrop than the global
   one; override here so it stands out. */
button.glass-modal-close:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 4px !important;
    box-shadow: none !important;
    border-radius: 50%;
}

/* ── Disabled-button styling for action buttons (audit §11 Medium) ── */

/*
 * dynamic-city.php renders `<button type="button" disabled>` (a native
 * disabled control, replacing the former dead-anchor pattern) for
 * actions that don't apply to a given listing (no phone, no website,
 * etc.). We re-skin the disabled <button> to match the existing
 * `.disabled` <a> appearance so the visual layout is identical.
 */
button.enhanced-action-btn[disabled],
button.tkd-action-button[disabled] {
    background: transparent;
    border: inherit;
    cursor: not-allowed;
    opacity: 0.55; /* matches the previous .disabled link opacity */
    /* `pointer-events: none` would prevent the cursor / tooltip
       from working on hover. Disabled buttons already swallow
       clicks at the browser level, so we skip that. */
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    /* These widths/paddings were inherited from the .enhanced-action-btn
       and .tkd-action-button base classes via the now-removed <a>
       elements; we lean on those classes' own selectors to apply.
       Explicitly listing them here would risk drifting out of sync. */
}

button.enhanced-action-btn:not([disabled]),
button.tkd-action-button:not([disabled]) {
    cursor: pointer;
}

/* Open-hours dropdown toggle is now a real <button>; reset default
   chrome so it visually matches the surrounding glass status badges. */
button.glass-status-badge {
    border: 0;
    background: inherit;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: inherit;
    text-align: inherit;
}

/* Review-photo thumbnail is now a real <button>; remove default
   chrome so it visually behaves like the previous <div>. */
button.glass-review-photo {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-block;
    -webkit-appearance: none;
    appearance: none;
}

/* ── Muted-text contrast fix (audit §11 Medium) ───────────────── */

/*
 * Original tokens in turnkeydir-color-unification.css sat at:
 *   --tkd-text-color-muted:     rgba(0, 0, 0, 0.4)  → 4.07:1 vs #fff
 *   --tkd-text-color-tertiary:  rgba(0, 0, 0, 0.5)  → 5.32:1
 *   --tkd-text-color-secondary: rgba(0, 0, 0, 0.7)  → 8.85:1
 * The muted token sits BELOW the WCAG AA body-text threshold (4.5:1).
 * Bumping to 0.55 yields 5.74:1 which clears AA for body and is
 * ~within the original token's hierarchy when compared to the
 * unchanged secondary/tertiary tokens.
 *
 * Re-applied here at :root with `!important` so it wins regardless
 * of which stylesheet sets the original token. Also re-tightens
 * the dark-mode counterparts where present.
 */
:root {
    --tkd-text-color-muted: rgba(0, 0, 0, 0.55) !important;     /* 5.74:1 */
    --tkd-text-color-tertiary: rgba(0, 0, 0, 0.6) !important;   /* 6.78:1 */
}

/* Where authors used the `.tkd-text-muted` utility class with a
   hard-coded color, override directly. */
.tkd-text-muted,
.tkd-muted-text {
    color: var(--tkd-text-color-muted) !important;
}

/* ── Reduced-motion friendliness on focus rings ───────────────── */

@media (prefers-reduced-motion: reduce) {
    body.tkd-active :where(a, button, [role="button"], [role="link"], input, select, textarea, summary, [tabindex]):focus-visible {
        box-shadow: none !important;
    }
}

/* ── Forced-colors / Windows High Contrast support ────────────── */

@media (forced-colors: active) {
    body.tkd-active :where(a, button, [role="button"], [role="link"], input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 2px solid CanvasText !important;
        box-shadow: none !important;
    }
}