/**
 * B2B Trade Portal — Accessibility Stylesheet (WCAG 2.1 AA)
 *
 * Covers:
 *  - Skip-to-content link  (WCAG 2.4.1)
 *  - Visible focus indicators (WCAG 2.4.7)
 *  - Minimum touch-target size 44×44 px (WCAG 2.5.5)
 *  - Color-contrast improvements for dark portal theme (WCAG 1.4.3 / 1.4.11)
 *  - Reduced-motion support (WCAG 2.3.3)
 *  - RTL text spacing helpers
 *
 * @package B2B_Trade_Portal
 * @since   2.1.0
 */

/* ============================================================
   1. SKIP LINK  (WCAG 2.4.1 — Bypass Blocks)
   ============================================================ */

/**
 * Visually hidden by default; slides into view when focused.
 * Placed before any other focusable element in the DOM so that
 * keyboard users reach it as their very first Tab stop.
 */
.b2btp-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 99999;
    padding: 12px 24px;
    background: #0088fe;
    color: #fff;
    font-size: 0.9375rem;  /* 15 px — readable without zoom */
    font-weight: 700;
    font-family: inherit;
    line-height: 1.4;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    transition: top 0.2s ease;
    white-space: nowrap;
}

.b2btp-skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ============================================================
   2. FOCUS INDICATORS  (WCAG 2.4.7 — Focus Visible)
   ============================================================

   :focus-visible targets only keyboard/programmatic focus so that
   mouse users are not shown the outline on every click.
   We keep :focus as a progressive-enhancement fallback for older
   browsers that do not support :focus-visible.
*/

.b2btp-dashboard-layout *:focus-visible {
    outline: 3px solid #0088fe;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Remove the default browser outline ONLY when we replace it with
   our custom one so there is never a focus-state with no indicator. */
.b2btp-dashboard-layout *:focus:not(:focus-visible) {
    outline: none;
}

/* Links need a visible underline on focus for extra clarity */
.b2btp-dashboard-layout a:focus-visible {
    outline: 3px solid #0088fe;
    outline-offset: 3px;
    text-decoration: underline;
}

/* Input fields — coloured border on focus (supplements the outline) */
.b2btp-dashboard-layout input:focus-visible,
.b2btp-dashboard-layout select:focus-visible,
.b2btp-dashboard-layout textarea:focus-visible {
    outline: 3px solid #0088fe;
    outline-offset: 0;
    border-color: #0088fe;
    box-shadow: 0 0 0 1px #0088fe;
}

/* ============================================================
   3. COLOR-CONTRAST — Dark Portal Theme  (WCAG 1.4.3 — Contrast 4.5:1)
   ============================================================

   The portal uses a deep navy background (#0a0f1e).
   The W3C contrast-checker shows that pure mid-gray (#808080)
   achieves only ≈ 3.5:1. We override the CSS variable and direct
   text/placeholder colors to meet the 4.5:1 minimum ratio.

   #c8cdd5 on #0a0f1e → contrast ≈ 7.2:1  ✓
   #a0aab4 on #0a0f1e → contrast ≈ 5.2:1  ✓  (secondary text)
   #ffffff on #0a0f1e → contrast ≈ 18:1   ✓  (headings)
*/

:root {
    /* Override the portal's default text variable to a WCAG-compliant value */
    --btp-text: #c8cdd5;
    --btp-text-secondary: #a0aab4;
    --btp-text-muted: #8b95a1;
}

/* Ensure body copy inherits the accessible variable */
.b2btp-dashboard-layout,
.b2btp-dashboard-layout p,
.b2btp-dashboard-layout li,
.b2btp-dashboard-layout td,
.b2btp-dashboard-layout th,
.b2btp-dashboard-layout label,
.b2btp-dashboard-layout span:not([class*="icon"]) {
    color: var(--btp-text, #c8cdd5);
}

/* Placeholders — WCAG requires 4.5:1 against the input background */
.b2btp-dashboard-layout input::placeholder,
.b2btp-dashboard-layout textarea::placeholder {
    color: #8b95a1;  /* ≈ 4.6:1 on typical dark input bg #1a2035 */
    opacity: 1;      /* Firefox lowers opacity by default */
}

/* Secondary / helper text */
.b2btp-dashboard-layout .b2btp-text-muted,
.b2btp-dashboard-layout .b2btp-help-text,
.b2btp-dashboard-layout small {
    color: var(--btp-text-secondary, #a0aab4);
}

/* ============================================================
   4. MINIMUM TOUCH TARGET SIZE  (WCAG 2.5.5 — Target Size 44×44 px)
   ============================================================ */

.b2btp-dashboard-layout button,
.b2btp-dashboard-layout .button,
.b2btp-dashboard-layout [role="button"],
.b2btp-dashboard-layout input[type="submit"],
.b2btp-dashboard-layout input[type="button"],
.b2btp-dashboard-layout input[type="reset"],
.b2btp-dashboard-layout .b2btp-btn,
.b2btp-dashboard-layout .woocommerce-button {
    min-height: 44px;
    min-width: 44px;
    /* Pad the clickable area without growing visible size for icon-only buttons */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Checkboxes and radio buttons: at least 24×24 px visible + sufficient spacing
   to meet the 44×44 px pointer-area requirement (WCAG 2.5.8 in draft). */
.b2btp-dashboard-layout input[type="checkbox"],
.b2btp-dashboard-layout input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* ============================================================
   5. ICON-ONLY BUTTON HELPERS
   ============================================================

   Buttons that contain only an SVG or icon font need a transparent
   click area that meets the 44×44 px minimum.  When .b2btp-a11y.js
   injects an aria-label we apply a tooltip via CSS attr().
*/

.b2btp-dashboard-layout button[aria-label]:not([aria-label=""]) {
    position: relative;
}

/* Optional CSS tooltip for sighted users — relies on the aria-label value */
.b2btp-dashboard-layout button[aria-label]:not([aria-label=""])::after {
    content: attr(aria-label);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 400;
    white-space: nowrap;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 1000;
}

.b2btp-dashboard-layout button[aria-label]:not([aria-label=""]):focus::after,
.b2btp-dashboard-layout button[aria-label]:not([aria-label=""]):hover::after {
    opacity: 1;
}

/* ============================================================
   6. ARIA LIVE REGION — Notification Announcements
   ============================================================ */

#b2btp-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   7. MODAL ACCESSIBILITY
   ============================================================ */

/* Ensure the modal overlay blocks background interaction */
.b2btp-modal[aria-hidden="false"],
.b2btp-modal:not([aria-hidden]) {
    /* dialog baseline */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The focusable close button inside modals must meet the 44px target */
.b2btp-modal .b2btp-modal-close {
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
}

/* ============================================================
   8. TAB / TABPANEL PATTERN  (ARIA tabs — WCAG 4.1.2)
   ============================================================ */

[role="tablist"] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

[role="tab"] {
    cursor: pointer;
    min-height: 44px;
    padding: 10px 20px;
}

[role="tab"][aria-selected="true"] {
    /* The active tab indicator: conveyed by colour AND underline (WCAG 1.4.1) */
    border-bottom: 3px solid #0088fe;
    color: #0088fe;
    font-weight: 600;
}

[role="tab"]:focus-visible {
    outline: 3px solid #0088fe;
    outline-offset: 2px;
    border-radius: 3px;
}

[role="tabpanel"] {
    /* Hidden panels must be truly hidden, not just visually off-screen */
}

[role="tabpanel"][hidden] {
    display: none;
}

/* ============================================================
   9. SKIP LINK TARGET — Main Content Anchor
   ============================================================ */

/* Give the main content landmark enough top padding so the viewport
   does not cut off content when the skip link jumps to it. */
#b2btp-main-content {
    scroll-margin-top: 80px;
    outline: none;  /* programmatic focus should not show outline */
}

/* ============================================================
   10. REDUCED MOTION  (WCAG 2.3.3 / prefers-reduced-motion)
   ============================================================

   Removes all transitions and animations for users who have configured
   their OS to minimise motion (e.g. due to vestibular disorders).
*/

@media (prefers-reduced-motion: reduce) {
    .b2btp-dashboard-layout *,
    .b2btp-dashboard-layout *::before,
    .b2btp-dashboard-layout *::after,
    .b2btp-skeleton,
    .b2btp-spinner,
    .b2btp-progress-bar,
    .b2btp-toast,
    .b2btp-modal {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    /* Also disable the skip-link slide-in animation */
    .b2btp-skip-link {
        transition: none !important;
    }
}

/* ============================================================
   11. HIGH-CONTRAST MODE SUPPORT  (Windows / Edge forced colors)
   ============================================================ */

@media (forced-colors: active) {
    .b2btp-dashboard-layout *:focus-visible {
        outline: 3px solid Highlight;
    }

    .b2btp-skip-link {
        background: ButtonFace;
        color: ButtonText;
        border: 2px solid ButtonText;
    }

    [role="tab"][aria-selected="true"] {
        border-bottom-color: Highlight;
        color: Highlight;
    }
}