/* ==========================================================================
   Toner Shop - Accessibility Widget
   Floating button + panel: font-size steps, high-contrast mode, link
   highlighting, readable-font toggle. Independent of page design (light
   mode only, per instruction) - these are opt-in assistive overrides the
   visitor turns on for themselves, saved in localStorage (see main.js).
   ========================================================================== */

.a11y-widget {
  position: fixed;
  z-index: 980;
  inset-inline-start: var(--space-4);
  bottom: calc(var(--mobile-bar-height) + var(--space-3));
}

@media (min-width: 900px) {
  .a11y-widget {
    bottom: var(--space-4);
  }
}

.a11y-toggle-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-hover);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Accessibility icon file is black: shown white on the navy button,
   and back to black on the yellow high-contrast button (below). */
.a11y-toggle-icon {
  width: 34px;
  height: 34px;
  filter: brightness(0) invert(1);
}

.a11y-toggle-btn:hover {
  background: var(--color-accent);
}

.a11y-panel {
  position: absolute;
  bottom: calc(100% + var(--space-3));
  inset-inline-start: 0;
  width: min(280px, calc(100vw - var(--space-6)));
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  padding: var(--space-4);
}

.a11y-panel[hidden] {
  display: none;
}

.a11y-panel-title {
  font-size: var(--fs-h3-mobile);
  margin-bottom: var(--space-3);
}

.a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.a11y-row-label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
}

.a11y-row-actions {
  display: flex;
  gap: var(--space-1);
}

.a11y-row-actions button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
}

.a11y-row-actions button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.a11y-option-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: start;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  cursor: pointer;
  font-size: var(--fs-small);
  font-family: inherit;
}

.a11y-option-btn:hover {
  border-color: var(--color-accent);
}

.a11y-option-btn[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.a11y-reset-btn {
  width: 100%;
  border: none;
  background: none;
  color: var(--color-text-muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: var(--fs-small);
  padding: var(--space-2) 0 0;
  font-family: inherit;
}

.a11y-reset-btn:hover {
  color: var(--color-accent);
}

/* ---------------------------------------------------------------------
   Font-size steps - scales the whole rem-based type/spacing system.
   --------------------------------------------------------------------- */
html.a11y-font-1 {
  font-size: 112.5%;
}

html.a11y-font-2 {
  font-size: 125%;
}

html.a11y-font-3 {
  font-size: 137.5%;
}

/* ---------------------------------------------------------------------
   High contrast - black background, white text, yellow accents/links.
   --------------------------------------------------------------------- */
html.a11y-contrast body {
  background: #000000 !important;
  color: #FFFFFF !important;
}

html.a11y-contrast h1,
html.a11y-contrast h2,
html.a11y-contrast h3,
html.a11y-contrast h4 {
  color: #FFFFFF !important;
}

html.a11y-contrast a {
  color: #FFD700 !important;
}

html.a11y-contrast .card,
html.a11y-contrast .package-card,
html.a11y-contrast .reviews-track,
html.a11y-contrast .remote-support-banner,
html.a11y-contrast .site-header,
html.a11y-contrast .site-footer,
html.a11y-contrast .mobile-menu,
html.a11y-contrast .a11y-panel,
html.a11y-contrast .modal-box,
html.a11y-contrast .feature-block,
html.a11y-contrast .callout,
html.a11y-contrast .disclaimer,
html.a11y-contrast .hero-home,
html.a11y-contrast .cta-banner,
html.a11y-contrast .section--alt {
  background: #000000 !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* Decorative glow (cards + hero) is a low-contrast colored effect that
   works against the black/white/yellow high-contrast palette above - so
   it is switched off entirely in this mode rather than fought with. */
html.a11y-contrast .card,
html.a11y-contrast .card:hover {
  box-shadow: none !important;
}

html.a11y-contrast .hero-home::before,
html.a11y-contrast .hero-home::after {
  display: none !important;
}

/* The hero's background photo sits in its own positioned child (.hero-media),
   so hiding it needs its own rule - the plain "background: #000" above
   only repaints .hero-home's own background, which the photo still sits
   on top of. Without this, high-contrast mode would leave a busy photo
   behind the (still white-on-transparent) headline instead of the flat
   black background every other section gets. */
html.a11y-contrast .hero-media {
  display: none !important;
}

html.a11y-contrast .card p,
html.a11y-contrast .lede,
html.a11y-contrast .review-verified,
html.a11y-contrast .footer-col a {
  color: #FFFFFF !important;
}

html.a11y-contrast .btn-primary,
html.a11y-contrast .btn-anydesk {
  background: #FFD700 !important;
  color: #000000 !important;
  border-color: #FFD700 !important;
}

html.a11y-contrast .btn-outline {
  background: transparent !important;
  color: #FFD700 !important;
  border-color: #FFD700 !important;
}

/* Phone / WhatsApp buttons in high contrast: black with a yellow frame
   (like .btn-outline); the blue phone icon turns white on the black. */
html.a11y-contrast .btn-contact,
html.a11y-contrast .btn-contact:hover {
  background: #000000 !important;
  color: #FFD700 !important;
  border-color: #FFD700 !important;
  outline-color: #FFD700;
}

html.a11y-contrast .btn-hero-ghost,
html.a11y-contrast .btn-hero-ghost:hover {
  background: #000000 !important;
  color: #FFD700 !important;
  border-color: #FFD700 !important;
  outline-color: #FFD700;
}

html.a11y-contrast .ci-phone {
  filter: brightness(0) invert(1);
}

/* Mobile bottom bar in high contrast: black like the rest of the page,
   yellow top edge and divider, yellow text (from the "a" rule above),
   white phone icon and green WhatsApp icon. Normal mode is unchanged. */
html.a11y-contrast .quick-contact-bar {
  background: #000000 !important;
  border-top: 2px solid #FFD700;
  box-shadow: none;
}

html.a11y-contrast .quick-contact-bar a {
  border-inline-end-color: #FFD700;
}

html.a11y-contrast .a11y-toggle-btn {
  background: #FFD700 !important;
  color: #000000 !important;
}

html.a11y-contrast .a11y-toggle-icon {
  filter: none;
}

/* ---------------------------------------------------------------------
   Link highlighting - underline + bold every non-button link.
   --------------------------------------------------------------------- */
html.a11y-highlight-links a:not(.btn) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  font-weight: var(--fw-bold) !important;
}

/* ---------------------------------------------------------------------
   Readable font - plain sans-serif, wider spacing, no external font
   download (stays inside the "no new libraries without approval" rule).
   --------------------------------------------------------------------- */
html.a11y-readable-font body {
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.02em;
}

html.a11y-readable-font p,
html.a11y-readable-font li,
html.a11y-readable-font .review-quote {
  line-height: 1.85 !important;
}