/* ============================================================
   Accessibility fixes (audit phase 4)
   Layered on top of front-assets/css/style.css to avoid touching
   vendor CSS. Loaded once from layouts/front.blade.php.
   ============================================================ */

/* ----------------------------------------------------------------
   4.1 — Hero contrast
   The `.banner-area` shows a Pokemon-card photo whose embedded
   English text bled into the foreground Hebrew title and made it
   illegible (WCAG 1.4.3 contrast failure). Add a semi-opaque
   gradient overlay so the title sits at >= 4.5:1 against any
   background. Children get z-index:2 to stay above the overlay.
   ---------------------------------------------------------------- */
.banner-area {
    position: relative; /* anchor for ::before */
}

.banner-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(0, 0, 0, 0.55) 0%,
                rgba(0, 0, 0, 0.65) 100%);
    z-index: 1;
    pointer-events: none;
}

.banner-area > * {
    position: relative;
    z-index: 2;
}

.banner-area .page-title-content h2,
.banner-area .page-title-content h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* belt + suspenders */
}

.banner-area .page-title-content ul li a,
.banner-area .page-title-content ul li p,
.banner-area .page-title-content ul li {
    color: #f5f5f5 !important;
}

/* ----------------------------------------------------------------
   4.5 — Floating envelope (#feedback-tab) tooltip
   The icon was decorative-only with no accessible name. Adds:
     - visible tooltip on hover via CSS (no JS)
     - cursor:pointer to confirm interactivity
     - subtle glow on focus (keyboard nav)
   The aria-label / tabindex / role are added in the HTML itself.
   ---------------------------------------------------------------- */
#feedback-tab {
    cursor: pointer;
    position: relative;
    /* Ensure focus ring is actually visible */
    outline: none;
}

#feedback-tab:focus-visible {
    box-shadow: 0 0 0 3px #7B61FF, 0 0 0 6px rgba(123, 97, 255, 0.3);
    border-radius: 8px;
}

#feedback-tab::after {
    content: "צור קשר";
    position: absolute;
    /* Position tooltip to the RIGHT of the icon (RTL site, icon is on the left edge) */
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #1a1a1a;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Heebo', system-ui, -apple-system, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease-out;
    z-index: 1000;
}

#feedback-tab::before {
    /* Caret on the LEFT of the tooltip pointing back to the icon */
    content: "";
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #1a1a1a;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease-out;
    z-index: 1001;
}

#feedback-tab:hover::after,
#feedback-tab:hover::before,
#feedback-tab:focus-visible::after,
#feedback-tab:focus-visible::before {
    opacity: 1;
}

/* ----------------------------------------------------------------
   4.6 — Carousel buttons (.owl-prev / .owl-next)
   Owl Carousel v2 ships empty <button>s with no text and no
   aria-label, so screen readers announce them as "button" with
   no further info. We label them via JS (see public/js/front/
   accessibility.js), but also draw a visible focus ring here so
   keyboard users can see where focus lands.
   ---------------------------------------------------------------- */
.owl-prev:focus-visible,
.owl-next:focus-visible,
.owl-dot:focus-visible {
    outline: 3px solid #7B61FF;
    outline-offset: 2px;
}