/* Skip to main content link - WCAG 2.4.1 */
    .a11y-skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: #feca2c;
      color: #000;
      padding: 8px 16px;
      text-decoration: none;
      font-weight: bold;
      z-index: 100000;
      border-radius: 0 0 4px 0;
      transition: top 0.2s;
      font-family: Arial, sans-serif;
    }
    .a11y-skip-link:focus {
      top: 0;
      outline: 3px solid #000;
    }

    /* Focus visible styles - WCAG 2.4.7 */
    *:focus-visible {
      outline: 3px solid #feca2c !important;
      outline-offset: 2px !important;
    }

    /* Screen reader only class - WCAG best practice */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }

    /* Professional Accessibility Toolbar Container
       Z-index hierarchy:
       - Accessibility statement modal: 1000004 (highest)
       - Accessibility toggle: 1000003
       - Accessibility toolbar: 1000002
       - Cookie banner: 999999
       - Reading guide/mask: 99997-99998
    */
    #a11y-toolbar {
      position: fixed;
      top: 50%;
      right: 0;
      transform: translateY(-50%) translateX(100%); /* Completely hidden by default */
      background: #ffffff;
      border: 2px solid #feca2c;
      border-right: none;
      border-radius: 12px 0 0 12px;
      box-shadow: -4px 0 20px rgba(0,0,0,0.15);
      /* ABOVE REFORGED-LEGACY SITE CHROME, not merely above the cookie banner.
         A reforged old-Webydo page keeps the legacy builder's z-indexes, which
         run to 1e6-2e6: measured on A005189 the site's own sticky header
         (.sp-hdr__bar) sits at 1000071 and its hero band at 1000049, so at the
         old 1000002 the OPEN panel was painted over and its close button was
         unclickable — a mouse user could not shut the toolbar at all (only Esc
         worked). Deliberately below the site password gate's band
         (2147483600-2147483630), which raises these same ids itself with
         !important when a gate is present. */
      z-index: 2147482000;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
      font-family: Arial, Helvetica, sans-serif;
      width: 360px;
      max-height: 90vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      opacity: 0;
      pointer-events: none;
    }

    #a11y-toolbar.expanded {
      transform: translateY(-50%) translateX(0); /* Visible - slides in from right */
      opacity: 1;
      pointer-events: all;
    }

    #a11y-toolbar.dragging {
      transition: none;
    }

    /* Collapsed toolbar must stay off-canvas (site CSS / iframe transforms can override defaults) */
    #a11y-toolbar:not(.expanded) {
      transform: translateY(-50%) translateX(100%) !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    /* Floating Toggle Button - Independent of toolbar */
    /* Positioned at bottom right for maximum visibility */
    #a11y-toggle {
      position: fixed !important;
      right: 20px !important;
      bottom: 20px !important;
      transform: translateY(0) !important;
      background: linear-gradient(135deg, #feca2c 0%, #e5b622 100%) !important;
      color: #000 !important;
      border: 3px solid #000 !important;
      border-radius: 50% !important;
      width: 60px !important;
      height: 60px !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 30px !important;
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
      z-index: 2147482010 !important; /* Above the toolbar, and above legacy site chrome — see #a11y-toolbar */
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: all !important;
    }

    /* ⚠️ THIS RULE IS INERT, AND THAT IS NOW LOAD-BEARING — DO NOT "FIX" IT BY
       ADDING !important.
       The base #a11y-toggle rule above carries opacity:1 !important and
       pointer-events:all !important, and !important beats the more specific
       selector, so this never applied. The open path still adds .hidden, so for
       years the button stayed fully visible and clickable while the panel was
       open — and its click handler was hard-coded to OPEN, so pressing it did
       nothing. That is the "the accessibility popup will not close" report.
       The handler is a real toggle now, which means the button MUST stay visible
       while the panel is open or the close affordance people actually reach for
       disappears. Making this rule win again would take it away. If the button
       ever should retract, remove the .hidden adds instead and give the panel a
       close control that is reachable on every site. */
    #a11y-toggle.hidden {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.3);
    }

    #a11y-toggle:hover {
      background: linear-gradient(135deg, #e5b622 0%, #d4a520 100%);
      transform: scale(1.15);
      box-shadow: 0 6px 25px rgba(0,0,0,0.4);
    }

    #a11y-toggle.hidden:hover {
      transform: scale(0.3);
    }

    #a11y-toggle:focus {
      outline: 3px solid #4169E1;
      outline-offset: 3px;
    }

    #a11y-toggle:active {
      transform: scale(1.05);
    }

    /* Pulse animation for floating button */
    #a11y-toggle::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #feca2c;
      animation: a11y-pulse 2s infinite;
      z-index: -1;
      opacity: 0;
    }

    @keyframes a11y-pulse {
      0% {
        transform: scale(1);
        opacity: 0.7;
      }
      50% {
        transform: scale(1.3);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 0;
      }
    }

    /* Toolbar Header */
    #a11y-toolbar-header {
      background: linear-gradient(135deg, #feca2c 0%, #e5b622 100%);
      color: #000;
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 12px 0 0 0;
      cursor: move;
      user-select: none;
    }

    #a11y-toolbar-title {
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #a11y-close-btn {
      background: transparent;
      border: none;
      color: #000;
      font-size: 24px;
      cursor: pointer;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      transition: all 0.2s;
    }

    #a11y-close-btn:hover {
      background: rgba(0,0,0,0.1);
    }

    /* Toolbar Content */
    #a11y-toolbar-content {
      padding: 20px;
      overflow-y: auto;
      flex: 1;
      max-height: calc(90vh - 70px);
    }

    /* Control Groups */
    .a11y-control-group {
      margin-bottom: 24px;
    }

    .a11y-control-group-title {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 2px solid #feca2c;
    }

    .a11y-control-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    /* Control Buttons */
    .a11y-control-btn {
      background: #f5f5f5;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      padding: 12px;
      cursor: pointer;
      font-size: 13px;
      transition: all 0.2s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-align: center;
      min-height: 70px;
      justify-content: center;
    }

    .a11y-control-btn:hover {
      background: #feca2c;
      border-color: #feca2c;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .a11y-control-btn:focus {
      outline: 3px solid #000;
      outline-offset: 2px;
    }

    .a11y-control-btn.active {
      background: #feca2c;
      border-color: #e5b622;
      font-weight: bold;
    }

    .a11y-control-icon {
      font-size: 24px;
      line-height: 1;
    }

    .a11y-control-label {
      font-size: 11px;
      line-height: 1.3;
    }

    /* Reset Button */
    .a11y-reset-btn {
      width: 100%;
      background: #dc2626;
      color: white;
      border: none;
      border-radius: 8px;
      padding: 12px;
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s;
      margin-top: 10px;
    }

    .a11y-reset-btn:hover {
      background: #b91c1c;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    /* Accessibility Modes */
    
    /* High Contrast Mode - WCAG 1.4.3 */
    body.a11y-high-contrast {
      background: #000 !important;
      color: #fff !important;
    }
    body.a11y-high-contrast * {
      background-color: #000 !important;
      color: #fff !important;
      border-color: #fff !important;
    }
    body.a11y-high-contrast a {
      color: #feca2c !important;
      text-decoration: underline !important;
    }
    body.a11y-high-contrast button {
      background-color: #feca2c !important;
      color: #000 !important;
      border: 2px solid #fff !important;
    }

    /* Negative Contrast */
    /* Apply filter to html instead of body to avoid affecting fixed positioned elements */
    html.a11y-negative-contrast {
      filter: invert(1) hue-rotate(180deg);
    }
    html.a11y-negative-contrast img,
    html.a11y-negative-contrast video {
      filter: invert(1) hue-rotate(180deg);
    }
    
    /* Reset filter on accessibility elements to prevent positioning issues */
    html.a11y-negative-contrast #a11y-toolbar,
    html.a11y-negative-contrast #a11y-toggle,
    html.a11y-negative-contrast #a11y-statement-modal,
    html.a11y-negative-contrast #a11y-statement-modal * {
      filter: none !important;
    }

    /* Grayscale - WCAG for color blindness */
    /* Apply filter to html instead of body to avoid affecting fixed positioned elements */
    html.a11y-grayscale {
      filter: grayscale(100%);
    }
    
    /* Reset filter on accessibility elements to prevent positioning issues */
    html.a11y-grayscale #a11y-toolbar,
    html.a11y-grayscale #a11y-toggle,
    html.a11y-grayscale #a11y-statement-modal,
    html.a11y-grayscale #a11y-statement-modal * {
      filter: none !important;
    }

    /* Readable Font */
    body.a11y-readable-font,
    body.a11y-readable-font * {
      font-family: Arial, Helvetica, sans-serif !important;
    }

    /* Link Highlighting - WCAG 1.4.1 */
    body.a11y-highlight-links a {
      background-color: #feca2c !important;
      color: #000 !important;
      padding: 2px 6px !important;
      border-radius: 3px !important;
      font-weight: bold !important;
      text-decoration: underline !important;
      box-shadow: 0 0 0 2px #000 !important;
    }

    /* Title Highlighting */
    body.a11y-highlight-titles h1,
    body.a11y-highlight-titles h2,
    body.a11y-highlight-titles h3,
    body.a11y-highlight-titles h4,
    body.a11y-highlight-titles h5,
    body.a11y-highlight-titles h6 {
      background-color: #feca2c !important;
      color: #000 !important;
      padding: 4px 8px !important;
      border-left: 4px solid #000 !important;
    }

    /* Reading Guide - WCAG visual aid */
    #a11y-reading-guide {
      position: fixed;
      left: 0;
      right: 0;
      height: 3px;
      background: #feca2c;
      pointer-events: none;
      z-index: 99998;
      display: none;
      box-shadow: 0 0 0 2px #000, 0 50px 0 100vh rgba(0,0,0,0.5), 0 -50px 0 100vh rgba(0,0,0,0.5);
    }

    body.a11y-reading-guide #a11y-reading-guide {
      display: block;
    }

    /* Reading Mask */
    #a11y-reading-mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 99997;
      display: none;
    }

    body.a11y-reading-mask #a11y-reading-mask {
      display: block;
      background: radial-gradient(circle 200px at var(--mouse-x, 50%) var(--mouse-y, 50%), transparent 0%, rgba(0,0,0,0.8) 100%);
    }

    /* Big Cursor */
    body.a11y-big-cursor,
    body.a11y-big-cursor * {
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M6 6 L6 56 L22 40 L30 56 L38 52 L30 36 L48 36 Z" fill="black" stroke="white" stroke-width="4"/></svg>') 0 0, auto !important;
    }

    /* Stop Animations - WCAG 2.2.2 */
    body.a11y-stop-animations * {
      animation-duration: 0s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0s !important;
    }

    /* Keyboard Navigation Mode */
    body.a11y-keyboard-nav *:focus {
      outline: 4px solid #feca2c !important;
      outline-offset: 4px !important;
      box-shadow: 0 0 0 6px rgba(254, 202, 44, 0.3) !important;
    }

    /* Text Spacing - WCAG 1.4.12 */
    body.a11y-text-spacing * {
      line-height: 1.8 !important;
      letter-spacing: 0.12em !important;
      word-spacing: 0.16em !important;
    }

    /* Font Size Indicator */
    #a11y-font-size-indicator {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 80px;
      background: rgba(0,0,0,0.8);
      color: #feca2c;
      padding: 10px 15px;
      border-radius: 8px;
      font-weight: bold;
      z-index: 99999;
      font-size: 16px;
    }
    
    /* Accessibility Statement Modal - Highest z-index for proper layering */
    #a11y-statement-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.7);
      z-index: 2147482020; /* Above toggle/toolbar — see #a11y-toolbar */
      align-items: center;
      justify-content: center;
      padding: 20px;
      overflow-y: auto;
    }
    
    #a11y-statement-modal.show {
      display: flex;
    }
    
    #a11y-statement-content {
      background: white;
      border-radius: 12px;
      max-width: 800px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 10px 40px rgba(0,0,0,0.3);
      position: relative;
      margin: auto;
    }
    
    #a11y-statement-header {
      background: linear-gradient(135deg, #4169E1 0%, #3451b2 100%);
      color: white;
      padding: 24px;
      border-radius: 12px 12px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    
    #a11y-statement-header h2 {
      margin: 0;
      font-size: 24px;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    #a11y-statement-close {
      background: rgba(255,255,255,0.2);
      border: none;
      color: white;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      flex-shrink: 0;
    }
    
    #a11y-statement-close:hover {
      background: rgba(255,255,255,0.3);
      transform: scale(1.1);
    }
    
    #a11y-statement-body {
      padding: 32px;
      line-height: 1.8;
      color: #333;
    }
    
    #a11y-statement-body h3 {
      color: #4169E1;
      font-size: 20px;
      margin-top: 24px;
      margin-bottom: 12px;
      font-weight: 600;
    }
    
    #a11y-statement-body h3:first-child {
      margin-top: 0;
    }
    
    #a11y-statement-body p {
      margin-bottom: 16px;
      font-size: 15px;
      color: #444;
    }
    
    #a11y-statement-body ul {
      margin: 16px 0;
      padding-left: 24px;
    }
    
    #a11y-statement-body li {
      margin-bottom: 8px;
      font-size: 15px;
      color: #444;
    }
    
    #a11y-statement-body a {
      color: #4169E1;
      text-decoration: none;
      font-weight: 600;
    }
    
    #a11y-statement-body a:hover {
      text-decoration: underline;
    }
    
    #a11y-statement-body .highlight-note {
      background: #f0f7ff;
      border-left: 4px solid #4169E1;
      padding: 16px;
      margin: 20px 0;
      border-radius: 4px;
    }
    
    #a11y-statement-body .highlight-note p {
      margin: 0;
    }

    /* RTL Support for Hebrew */
    [data-a11y-language="he"] #a11y-toolbar {
      right: auto;
      left: 0;
      border-left: none;
      border-right: 2px solid #feca2c;
      border-radius: 0 12px 12px 0;
      transform: translateY(-50%) translateX(-100%);
    }
    
    [data-a11y-language="he"] #a11y-toolbar.expanded {
      transform: translateY(-50%) translateX(0);
    }

    [data-a11y-language="he"] #a11y-toolbar:not(.expanded) {
      transform: translateY(-50%) translateX(-100%) !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    
    [data-a11y-language="he"] #a11y-toggle {
      right: auto !important;
      left: 20px !important;
    }
    
    [data-a11y-language="he"] #a11y-toolbar-header {
      border-radius: 0 12px 0 0;
    }
    
    [data-a11y-language="he"] #a11y-font-size-indicator {
      right: auto;
      left: 80px;
    }
    
    [data-a11y-language="he"] .a11y-skip-link {
      left: auto;
      right: 0;
      border-radius: 0 0 0 4px;
    }
    

    /* Responsive Design */
    @media (max-width: 480px) {
      #a11y-toolbar {
        width: 100%;
        border-radius: 0;
      }
      #a11y-toolbar:not(.expanded) {
        transform: translateY(-50%) translateX(100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }
      [data-a11y-language="he"] #a11y-toolbar:not(.expanded) {
        transform: translateY(-50%) translateX(-100%) !important;
      }
      #a11y-toolbar.expanded {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
      }
      #a11y-toggle {
        width: 50px;
        height: 50px;
        right: 10px !important;
        bottom: 20px; /* Adjusted for better visibility */
        font-size: 24px;
      }
      [data-a11y-language="he"] #a11y-toggle {
        right: auto !important;
        left: 10px !important;
      }
      #a11y-toggle.hidden {
        transform: scale(0.3);
      }
      #a11y-toggle:hover {
        transform: scale(1.1);
      }
      #a11y-statement-modal {
        padding: 0;
      }
      #a11y-statement-content {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
      }
      #a11y-statement-header {
        border-radius: 0;
      }
      #a11y-statement-body {
        padding: 20px;
      }
      #a11y-statement-header h2 {
        font-size: 18px;
      }
    }