/**
 * BigBears Shared Accessibility CSS
 * Fixes shared template accessibility issues across all pages
 * Enqueue via functions.php with high priority
 */

/* ===== SKIP LINK (must be first focusable element) ===== */
.bb-skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wp--preset--color--primary, #0060df);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    z-index: 100000;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: top 0.2s ease;
}
.bb-skip-link:focus {
    top: 1rem;
    outline: 3px solid var(--wp--preset--color--secondary, #ffb700);
    outline-offset: 2px;
}

/* ===== FOCUS VISIBLE (global, WCAG 2.4.7) ===== */
:focus-visible {
    outline: 3px solid var(--wp--preset--color--secondary, #ffb700) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 183, 0, 0.3) !important;
}

/* ===== INTER VARIABLE FONT (performance) ===== */
@font-face {
    font-family: 'Inter Variable';
    src: url('https://rsms.me/inter/font-files/InterVariable.woff2') format('woff2 supports variations'),
         url('https://rsms.me/inter/font-files/InterVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
    font-stretch: 75% 125%;
}

/* ===== BASE TYPOGRAPHY (line-height ≥ 1.5, WCAG 1.4.12) ===== */
body,
p, li, dd, dt, blockquote, figcaption,
.wp-block-paragraph, .wp-block-list, .wp-block-quote,
.entry-content, .post-content, .content-area {
    line-height: 1.6 !important;
    letter-spacing: 0.01em;
}

/* ===== HEADING ORDER (WCAG 1.3.1) ===== */
/* Enforce visual hierarchy — h1 > h2 > h3... */
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.2; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1.3; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.35; }
h4 { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.4; }

/* ===== LINK UNDERLINE (WCAG 1.4.1 - color not only distinction) ===== */
.entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.nav-link):not(.skip-link),
.post-content a:not(.wp-element-button):not(.wp-block-button__link):not(.nav-link):not(.skip-link),
.content-area a:not(.wp-element-button):not(.wp-block-button__link):not(.nav-link):not(.skip-link),
.widget a:not(.wp-element-button):not(.wp-block-button__link):not(.nav-link):not(.skip-link) {
    text-decoration: underline !important;
    text-underline-offset: 2px;
    text-decoration-thickness: 2px;
}
.entry-content a:hover,
.post-content a:hover,
.content-area a:hover,
.widget a:hover {
    text-decoration-thickness: 3px;
}

/* ===== COLOR CONTRAST - SIDEBAR (WCAG 1.4.3 AA 4.5:1) ===== */
.sidebar .widget-title,
.sidebar .widget-title a,
.sidebar .wp-block-heading,
.sidebar a,
#secondary .widget-title,
#secondary .widget-title a,
#secondary .wp-block-heading,
#secondary a,
.widget-area .widget-title,
.widget-area .widget-title a,
.widget-area .wp-block-heading,
.widget-area a {
    color: #1a1a2e !important; /* ~12:1 on #fff */
}
.sidebar .widget-title:hover,
.sidebar .widget-title a:hover,
.sidebar .wp-block-heading:hover,
.sidebar a:hover,
#secondary .widget-title:hover,
#secondary .widget-title a:hover,
#secondary .wp-block-heading:hover,
#secondary a:hover,
.widget-area .widget-title:hover,
.widget-area .widget-title a:hover,
.widget-area .wp-block-heading:hover,
.widget-area a:hover {
    color: #0060df !important;
}

/* ===== RESPONSIVE TABLES (WCAG 1.4.10 - no horizontal scroll) ===== */
.entry-content table,
.post-content table,
.content-area table,
.wp-block-table,
table.wp-block-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

/* Table scroll indicator */
.entry-content table::-webkit-scrollbar,
.post-content table::-webkit-scrollbar,
.content-area table::-webkit-scrollbar,
.wp-block-table::-webkit-scrollbar {
    height: 8px;
}
.entry-content table::-webkit-scrollbar-thumb,
.post-content table::-webkit-scrollbar-thumb,
.content-area table::-webkit-scrollbar-thumb,
.wp-block-table::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.entry-content table::-webkit-scrollbar-track,
.post-content table::-webkit-scrollbar-track,
.content-area table::-webkit-scrollbar-track,
.wp-block-table::-webkit-scrollbar-track {
    background: #f5f5f5;
}

/* Sticky header for horizontal scroll tables */
.entry-content table thead th,
.post-content table thead th,
.content-area table thead th,
.wp-block-table thead th {
    position: sticky;
    left: 0;
    background: #f8f9fa;
    z-index: 1;
}

/* ===== AD CONTAINER - CLS PREVENTION (reserved height) ===== */
.adsbygoogle,
.adsbygoogle-auto,
.bb-ad-slot,
[data-ad-client] {
    display: block !important;
    min-height: 90px; /* Reserve space for typical leaderboard */
    max-width: 100%;
    overflow: hidden;
    position: relative;
    background: transparent;
}

/* Ad label (WCAG 2.4.4 - purpose clear) */
.adsbygoogle:before,
.adsbygoogle-auto:before,
.bb-ad-slot:before,
[data-ad-client]:before {
    content: "Advertisement";
    position: absolute;
    top: -1.5rem;
    left: 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    background: #fff;
    padding: 0 0.5rem;
    border-radius: 2px;
    z-index: 10;
}

/* Fluid ad sizing */
.adsbygoogle[data-ad-format="fluid"],
.adsbygoogle-auto,
.bb-ad-slot[data-ad-format="fluid"] {
    min-height: 0;
    min-height: 1px;
}

/* ===== MOBILE TOUCH TARGETS (WCAG 2.5.5 - 44x44px) ===== */
@media (max-width: 767px) {
    .wp-block-button__link,
    .wp-element-button,
    .nav-link,
    .sidebar a,
    .widget a,
    .pagination a,
    .post-navigation a,
    input[type="submit"],
    button,
    .adsbygoogle,
    .bb-ad-slot {
        min-height: 44px;
        min-width: 44px;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* ===== REDUCED MOTION (WCAG 2.3.3) ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */
@media (prefers-contrast: high) {
    :focus-visible {
        outline-width: 4px !important;
        outline-color: CanvasText !important;
    }
    .entry-content a,
    .post-content a,
    .content-area a {
        text-decoration-thickness: 3px !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .bb-skip-link,
    .adsbygoogle,
    .adsbygoogle-auto,
    .bb-ad-slot,
    [data-ad-client],
    .sidebar,
    #secondary,
    .widget-area,
    .nav-link,
    .wp-block-button__link {
        display: none !important;
    }
    .entry-content a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}