/**
 * Econ Accessibility Widget Styles
 */

/* Variables */
:root {
  --eaw-primary-color: #003366;
  --eaw-text-color: #333;
  --eaw-bg-color: #fff;
  --eaw-panel-width: 320px;
  --eaw-transition: all 0.3s ease-in-out;
  --eaw-z-index: 10000;
  --eaw-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html[lang="en"].is-dyslexic {
  --font-body: var(--font-dyslexic);
  --font-heading: var(--font-dyslexic);
}

/* Base Wrapper */
.eaw-wrapper {
  font-family: var(--eaw-font-family);
  z-index: var(--eaw-z-index);
}

/* Trigger Button */
.eaw-trigger {
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background-color: var(--eaw-primary-color);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: var(--eaw-z-index);
}

.eaw-trigger:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.eaw-trigger:focus {
  outline: 3px solid #fec007;
  /* Accessible focus ring */
}

.eaw-icon {
  width: 32px;
  height: 32px;
  stroke: white;
  stroke-width: 1.5;
  fill: none;
}

/* Position Modifiers */
.eaw-wrapper--bottom-right .eaw-trigger {
  bottom: 30px;
  right: 30px;
}

.eaw-wrapper--bottom-left .eaw-trigger {
  bottom: 30px;
  left: 30px;
}

.eaw-wrapper--top-right .eaw-trigger {
  top: 30px;
  right: 30px;
}

.eaw-wrapper--top-left .eaw-trigger {
  top: 30px;
  left: 30px;
}

/* Panel */
.eaw-panel {
  position: fixed;
  top: 0;
  right: -350px;
  /* Hide off-screen completely */
  width: var(--eaw-panel-width);
  height: 100vh;
  background: var(--eaw-bg-color);
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: calc(var(--eaw-z-index) + 1);
  display: flex;
  flex-direction: column;
}

.eaw-panel.is-open {
  right: 0;
}

/* For left-aligned settings, styles would need adaptation if panel should slide from left, 
   but reqs say "Slide-in animation from right" */

.eaw-panel__header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.eaw-panel__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--eaw-text-color);
}

.eaw-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #666;
  cursor: pointer;
}

.eaw-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.eaw-panel__footer {
  padding: 15px;
  border-top: 1px solid #eee;
  text-align: center;
  color: #888;
  font-size: 0.85rem;
  background-color: #f9f9f9;
}

/* Controls */
.eaw-control-group {
  margin-bottom: 24px;
}

.eaw-control-group--toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.eaw-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #444;
}

.eaw-control-group--toggle .eaw-label {
  margin-bottom: 0;
}

.eaw-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f0f2f5;
  padding: 5px;
  border-radius: 8px;
}

.eaw-btn {
  border: 1px solid transparent;
  background: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  color: #444;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}

.eaw-btn:hover {
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.eaw-btn:active {
  transform: translateY(0);
}

.eaw-value {
  flex: 1;
  text-align: center;
  font-weight: bold;
  color: var(--eaw-primary-color);
}

/* Switch Toggle */
.eaw-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.eaw-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.eaw-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.eaw-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked+.eaw-slider {
  background-color: var(--eaw-primary-color);
}

input:focus+.eaw-slider {
  box-shadow: 0 0 1px var(--eaw-primary-color);
}

input:checked+.eaw-slider:before {
  transform: translateX(24px);
}

.eaw-slider.round {
  border-radius: 34px;
}

.eaw-slider.round:before {
  border-radius: 50%;
}

/* Select */
.eaw-select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
}

/* Action Buttons */
.eaw-actions {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eaw-btn--reset {
  background: #f8f9fa;
  border: 1px solid #ddd;
  width: 100%;
}

.eaw-btn--clear {
  background: #fff1f0;
  color: #d93025;
  border: 1px solid #ffa39e;
  width: 100%;
}

/* Overlay */
.eaw-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--eaw-z-index);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.eaw-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* --- Accessibility Modes (Applied to Body) --- */

/*
  IMPORTANT:
  Applying `filter:` on <body> can cause `position: fixed` elements to behave like they scroll
  (browsers treat fixed-position children as fixed to the filtered element).

  To avoid breaking fixed UI (like this widget), we apply filters only to the main page canvas.
  In Drupal pages, the primary content lives inside `.layout-container`.
*/

/* Grayscale */
body.eaw-grayscale .layout-container {
  filter: grayscale(100%);
}

/* Invert Colors */
body.eaw-invert-colors {
  background: #000;
  /* Keep outer/background areas dark */
}

body.eaw-invert-colors .layout-container {
  filter: invert(100%);
}

/* Re-invert media inside the inverted canvas so images/videos look normal */
body.eaw-invert-colors .layout-container img,
body.eaw-invert-colors .layout-container video,
body.eaw-invert-colors .layout-container iframe {
  filter: invert(100%);
}

/* Ensure the accessibility widget is never affected by page filters */
body.eaw-grayscale #econ-accessibility-widget,
body.eaw-invert-colors #econ-accessibility-widget,
body.eaw-grayscale .eaw-wrapper,
body.eaw-invert-colors .eaw-wrapper {
  filter: none !important;
}

/* Big Cursor */
body.eaw-big-cursor,
body.eaw-big-cursor a,
body.eaw-big-cursor button,
body.eaw-big-cursor input,
body.eaw-big-cursor select {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewport="0 0 48 48" style="fill:black;stroke:white;stroke-width:2px;"><path d="M10 10l12 36 2-12 12-2z"/></svg>'), auto !important;
}

/* Reading Guide */
.eaw-reading-guide-bar {
  position: fixed;
  left: 0;
  width: 100vw;
  height: 5px;
  background-color: red;
  z-index: 2147483647;
  /* Topmost */
  pointer-events: none;
  display: none;
}

.eaw-reading-guide-active .eaw-reading-guide-bar {
  display: block;
}


/* Responsive */
@media (max-width: 480px) {
  :root {
    --eaw-panel-width: 85%;
    /* Just slightly less than full width */
  }
}

.eaw-panel {
  right: -100%;
  /* Fully off-screen for percentage widths */
}

.eaw-panel.is-open {
  right: 0;
}

/* Print */
@media print {
  .eaw-wrapper {
    display: none !important;
  }
}