/* ===================================================================
   Tufit 2026 - Accessibility (IS 5568 / WCAG 2.0 AA)
   Panel, controls, colour/reading modes, focus + skip link.
   =================================================================== */

/* ---- Skip to content ---- */
.skip-link {
  position: fixed; top: -80px; right: 16px; z-index: 300;
  background: var(--black, #121110); color: #fff; padding: 12px 22px;
  font-family: var(--font-body, sans-serif); font-weight: 600; border-radius: 0;
  transition: top .25s ease; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.skip-link:focus { top: 16px; color: #fff; outline: 3px solid var(--gold-l, #c9a96a); outline-offset: 2px; }

/* ---- Visible keyboard focus everywhere ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible, .gm-item:focus-visible, .col-tile:focus-visible,
.hs-item:focus-visible, .cat-card:focus-visible {
  outline: 3px solid var(--gold, #b08c46) !important;
  outline-offset: 3px !important;
  border-radius: 1px;
}
#tf-content:focus { outline: none; }

/* ---- Toggle button ---- */
.a11y-toggle {
  position: fixed; right: 22px; left: auto; bottom: 24px; z-index: 88;
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  background: #1560bd; color: #fff; border: 2px solid #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 34px -8px rgba(21, 96, 189, .6);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s;
}
.a11y-toggle:hover { transform: scale(1.08); background: #0d4c98; }
.a11y-toggle svg { width: 30px; height: 30px; }

/* ---- Panel ---- */
.a11y-panel {
  position: fixed; right: 22px; left: auto; bottom: 90px; z-index: 89;
  width: min(360px, calc(100vw - 32px));
  background: #fff; color: #1a1a1a;
  border: 1px solid #ddd; border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.4);
  font-family: 'Heebo', Arial, sans-serif; direction: rtl;
  opacity: 0; transform: translateY(16px) scale(.98); transform-origin: bottom left;
  transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
  max-height: min(80vh, 640px); display: flex; flex-direction: column;
}
.a11y-panel.open { opacity: 1; transform: translateY(0) scale(1); }
.a11y-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #eee; background: #1560bd; color: #fff; border-radius: 14px 14px 0 0; }
.a11y-head h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #fff; font-family: 'Heebo', sans-serif; }
.a11y-x { width: 34px; height: 34px; border: none; background: rgba(255,255,255,.15); color: #fff; border-radius: 8px; cursor: pointer; display: grid; place-items: center; transition: background .25s; }
.a11y-x:hover { background: rgba(255,255,255,.3); }
.a11y-x svg { width: 18px; height: 18px; }

.a11y-body { padding: 16px 18px; overflow-y: auto; }
.a11y-group { margin-bottom: 18px; }
.a11y-label { display: block; font-size: .8rem; font-weight: 700; color: #555; letter-spacing: .04em; margin-bottom: 9px; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-fs { display: flex; align-items: center; gap: 10px; }
.a11y-fs .a11y-btn { flex: 1; font-size: 1.05rem; font-weight: 700; padding: 12px; }
.a11y-fs-val { min-width: 58px; text-align: center; font-weight: 700; font-size: .95rem; color: #1560bd; }

.a11y-btn {
  background: #f4f4f4; border: 1.5px solid #e2e2e2; color: #222;
  border-radius: 9px; padding: 11px 10px; cursor: pointer;
  font-family: 'Heebo', Arial, sans-serif; font-size: .86rem; font-weight: 600; line-height: 1.3;
  transition: all .2s ease; text-align: center;
}
.a11y-btn:hover { border-color: #1560bd; color: #1560bd; }
.a11y-btn[aria-pressed="true"] { background: #1560bd; border-color: #1560bd; color: #fff; }

.a11y-foot { border-top: 1px solid #eee; padding: 14px 18px; display: grid; gap: 10px; }
.a11y-reset { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border: 1.5px solid #d33; color: #d33; border-radius: 9px; padding: 11px; cursor: pointer; font-family: 'Heebo', sans-serif; font-weight: 600; font-size: .88rem; transition: all .2s; }
.a11y-reset:hover { background: #d33; color: #fff; }
.a11y-reset svg { width: 17px; height: 17px; }
.a11y-stmt { text-align: center; font-size: .85rem; font-weight: 600; color: #1560bd; text-decoration: underline; }

/* the panel and its controls must stay readable under every colour mode */
.a11y-panel, .a11y-toggle, .skip-link { filter: none !important; }

/* ---- Font / display sizing (applied to the page wrapper) ---- */
html[data-a11y-fs="-2"] #tf-page { zoom: .85; }
html[data-a11y-fs="-1"] #tf-page { zoom: .92; }
html[data-a11y-fs="1"]  #tf-page { zoom: 1.1; }
html[data-a11y-fs="2"]  #tf-page { zoom: 1.2; }
html[data-a11y-fs="3"]  #tf-page { zoom: 1.3; }
html[data-a11y-fs="4"]  #tf-page { zoom: 1.4; }
html[data-a11y-fs="5"]  #tf-page { zoom: 1.5; }
html[data-a11y-fs="6"]  #tf-page { zoom: 1.6; }

@media (max-width: 768px) {
  .a11y-toggle { right: 14px; left: auto; bottom: 76px; width: 50px; height: 50px; }
  .a11y-panel { right: 10px; left: auto; bottom: 134px; }
}

/* ===================================================================
   Colour / display modes  (filters on the page wrapper only)
   =================================================================== */
html.a11y-gray #tf-page { filter: grayscale(1); }
html.a11y-contrast #tf-page { filter: contrast(1.35) saturate(1.15); }

html.a11y-dark #tf-page { filter: invert(1) hue-rotate(180deg); background: #fff; }
html.a11y-dark #tf-page :is(img, video, iframe, .map-card, .hero-media .slide) {
  filter: invert(1) hue-rotate(180deg);
}
html.a11y-dark { background: #0d0d0d; }

/* Light background: neutralise the dark sections */
html.a11y-light #tf-page :is(.topbar, .usp-strip, .sec-black, .sec-dark, .contact-band, .stats-band, .site-footer, .contact-form-card, .side-cta, .gal-filter-wrap) {
  background: #ffffff !important; color: #1a1a1a !important;
}
html.a11y-light #tf-page :is(.sec-black, .sec-dark, .contact-band, .stats-band, .site-footer) :is(h1,h2,h3,h4,b,span,p,a,li,small) { color: #1a1a1a !important; }
html.a11y-light #tf-page .site-footer, html.a11y-light #tf-page .contact-band, html.a11y-light #tf-page .stats-band { border-top: 1px solid #ddd; }
html.a11y-light #tf-page .hero-shade { background: rgba(255,255,255,.4) !important; }
html.a11y-light #tf-page .hero-giant .gline { -webkit-text-stroke-color: #333; }

/* ===================================================================
   Reading aids
   =================================================================== */
html.a11y-links #tf-page a { text-decoration: underline !important; text-underline-offset: 3px; }

html.a11y-readfont #tf-page,
html.a11y-readfont #tf-page :is(h1,h2,h3,h4,h5,p,a,span,li,b,small,button,input,textarea,.logo-latin,.giant,.gline,.marquee span,.stat b) {
  font-family: Arial, "Segoe UI", Tahoma, sans-serif !important;
  letter-spacing: normal !important;
  -webkit-text-stroke: 0 !important;
}
html.a11y-readfont #tf-page :is(.giant, .gline, .marquee span, .stat b, .err-code) { color: var(--ink, #17150f) !important; }

html.a11y-htitles #tf-page :is(h1, h2, h3) {
  outline: 2px dashed currentColor; outline-offset: 5px;
  background: rgba(176,140,70,.08);
}

html.a11y-bigcursor #tf-page, html.a11y-bigcursor #tf-page * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M8 4l30 16-13 3-4 15z" fill="%23fff" stroke="%23000" stroke-width="2" stroke-linejoin="round"/></svg>') 6 4, auto !important;
}

html.a11y-noanim #tf-page *, html.a11y-noanim #tf-page *::before, html.a11y-noanim #tf-page *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html.a11y-noanim #tf-page .hero-media .slide { opacity: 1; }
html.a11y-noanim #tf-page .hero-media .slide:not(.on) { opacity: 0; }

/* Honour the OS "reduce motion" preference automatically */
@media (prefers-reduced-motion: reduce) {
  html:not(.a11y-noanim) #tf-page * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}