/* ElderCity — senior-friendly accessibility layer */

:root {
  --elder-font-scale: 1;
  --elder-line-height: 1.6;
  --elder-letter-spacing: 0;
  --elder-cursor-size: 1;
}

html.elder-font-step-0 { --elder-font-scale: 1; }
html.elder-font-step-1 { --elder-font-scale: 1.12; }
html.elder-font-step-2 { --elder-font-scale: 1.25; }
html.elder-font-step-3 { --elder-font-scale: 1.4; }
html.elder-font-step-4 { --elder-font-scale: 1.6; }

html.elder-a11y-active body {
  font-size: calc(1rem * var(--elder-font-scale));
  line-height: var(--elder-line-height);
  letter-spacing: var(--elder-letter-spacing);
}

html.elder-dyslexia body,
html.elder-dyslexia body button,
html.elder-dyslexia body input,
html.elder-dyslexia body select,
html.elder-dyslexia body textarea {
  font-family: "Atkinson Hyperlegible", "Noto Sans TC", sans-serif !important;
}

html.elder-high-contrast {
  --elder-bg: #000;
  --elder-fg: #fff;
  --elder-accent: #ffea00;
  --elder-link: #7df9ff;
}

html.elder-high-contrast body {
  background: var(--elder-bg) !important;
  color: var(--elder-fg) !important;
}

html.elder-high-contrast a {
  color: var(--elder-link) !important;
  text-decoration: underline !important;
}

html.elder-high-contrast .theme-btn-one,
html.elder-high-contrast .elder-a11y-toolbar button.elder-btn-primary {
  background: var(--elder-accent) !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}

html.elder-dark body {
  background: #1a1a1f !important;
  color: #f5f5f5 !important;
}

html.elder-dark .main-header,
html.elder-dark .banner-section,
html.elder-dark .feature-section,
html.elder-dark .footer-top {
  filter: brightness(0.92);
}

html.elder-highlight-links a {
  outline: 3px solid #ff6b00 !important;
  outline-offset: 2px;
}

html.elder-reduce-motion *,
html.elder-reduce-motion *::before,
html.elder-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

html.elder-large-cursor,
html.elder-large-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%2300a99d' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") 24 24, auto !important;
}

html.elder-reading-guide .elder-reading-ruler {
  display: block;
}

html.elder-simple-nav .navigation .dropdown > ul,
html.elder-simple-nav .navigation .megamenu {
  display: none !important;
}

html.elder-simple-nav .navigation > li > a {
  font-size: 1.15em;
  padding: 14px 18px;
}

.elder-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 100000;
  padding: 12px 24px;
  background: #00a99d;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}

.elder-skip-link:focus {
  left: 0;
  top: 0;
}

/* Single easy-reading toggle (bottom-left; chat stays bottom-right) */
.elder-a11y-toggle-btn {
  position: fixed;
  left: 16px;
  bottom: 24px;
  z-index: 9999998;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 26px;
  border: 3px solid #fff;
  background: #1e5f74;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.elder-a11y-toggle-btn:hover,
.elder-a11y-toggle-btn:focus {
  transform: scale(1.04);
  outline: 3px solid #ffea00;
  outline-offset: 2px;
}

.elder-a11y-toggle-btn.is-on {
  background: #ffea00;
  color: #000;
  border-color: #1e5f74;
}

html.elder-high-contrast .elder-a11y-toggle-btn.is-on {
  background: var(--elder-accent, #ffea00);
  color: #000 !important;
}

.elder-a11y-toolbar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999998;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  max-height: 90vh;
}

.elder-a11y-toggle {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 16px 10px;
  background: #00a99d;
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  min-height: 120px;
}

.elder-a11y-panel {
  width: 280px;
  max-height: 0;
  overflow: hidden;
  background: #fff;
  transition: max-height 0.3s ease;
}

.elder-a11y-toolbar.is-open .elder-a11y-panel {
  max-height: 85vh;
  overflow-y: auto;
}

.elder-a11y-panel-inner {
  padding: 16px;
}

.elder-a11y-panel h2 {
  font-size: 1.1rem;
  margin: 0 0 12px;
  color: #1e2a3a;
}

.elder-a11y-group {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8ecef;
}

.elder-a11y-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.elder-a11y-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.elder-a11y-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.elder-a11y-toolbar button {
  flex: 1 1 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid #d0d7de;
  background: #f6f8fa;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  color: #1e2a3a;
}

.elder-a11y-toolbar button:hover,
.elder-a11y-toolbar button:focus {
  border-color: #00a99d;
  outline: 3px solid rgba(0, 169, 157, 0.35);
  outline-offset: 2px;
}

.elder-a11y-toolbar button[aria-pressed="true"] {
  background: #00a99d;
  color: #fff;
  border-color: #008f84;
}

.elder-btn-primary {
  width: 100%;
  background: #00a99d !important;
  color: #fff !important;
  font-weight: 700;
}

.elder-reading-ruler {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  height: 48px;
  background: rgba(255, 234, 0, 0.25);
  border-top: 2px solid #ff6b00;
  border-bottom: 2px solid #ff6b00;
  pointer-events: none;
  z-index: 99980;
  transform: translateY(-50%);
}

.elder-hotline-bar {
  background: #1e5f74;
  color: #fff;
  text-align: center;
  padding: 8px 16px;
  font-size: 1rem;
}

.elder-hotline-bar a {
  color: #ffea00;
  font-weight: 700;
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid #00a99d;
  outline-offset: 3px;
}

/* Catalogue cards (shop & care homes) */
.elder-product-grid,
.elder-homes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.elder-product-card,
.elder-home-card {
  border: 2px solid #e8ecef;
  border-radius: 12px;
  padding: 20px;
  background: #fff;
}

.elder-home-card img,
.elder-product-card img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
}

.elder-product-card .price {
  color: #00a99d;
  font-weight: 700;
  font-size: 1.25rem;
}

.elder-product-card h3 a,
.elder-product-card-link {
  color: inherit;
  text-decoration: none;
}

.elder-product-card h3 a:hover,
.elder-product-card h3 a:focus,
.elder-product-card-link:hover,
.elder-product-card-link:focus {
  color: #00a99d;
  text-decoration: underline;
}

.elder-view-product {
  display: inline-block;
  margin: 8px 0 4px;
  font-weight: 600;
  color: #1e5f74;
}

.elder-product-grid--compact {
  margin-top: 16px;
}

.elder-breadcrumb {
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.elder-breadcrumb a {
  color: #1e5f74;
  text-decoration: underline;
}

.elder-product-detail {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.1fr);
  gap: 40px;
  align-items: start;
}

.elder-product-detail-img img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #e8ecef;
}

.elder-product-detail-body h1 {
  margin: 12px 0 16px;
  font-size: 1.75rem;
  line-height: 1.3;
}

.elder-product-code {
  color: #4a5568;
  margin-bottom: 12px;
}

.elder-product-lead {
  font-size: 1.05rem;
  margin-bottom: 20px;
}

.elder-product-price {
  font-size: 1.75rem !important;
  margin-bottom: 12px !important;
}

.elder-product-delivery {
  color: #4a5568;
  margin-bottom: 24px;
}

.elder-product-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
}

.elder-product-actions .theme-btn-one {
  text-align: center;
}

.elder-product-related h2 {
  margin-bottom: 8px;
}

.elder-product-empty {
  text-align: center;
  padding: 48px 24px;
}

.elder-cart-row h3 a {
  color: #1e2a3a;
  text-decoration: none;
}

.elder-cart-row h3 a:hover,
.elder-cart-row h3 a:focus {
  color: #00a99d;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .elder-product-detail {
    grid-template-columns: 1fr;
  }
}

.elder-desc,
.elder-address {
  color: #4a5568;
  font-size: 0.95rem;
  margin: 8px 0;
}

.elder-badge {
  display: inline-block;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 12px;
  background: #e6f7f5;
  color: #1e5f74;
  margin-right: 6px;
  margin-bottom: 8px;
}

.elder-badge-muted {
  background: #f0f2f5;
  color: #4a5568;
}

.elder-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.elder-tag {
  font-size: 0.8rem;
  padding: 4px 10px;
  background: #f6f8fa;
  border-radius: 8px;
}

.elder-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.elder-filter-tabs button {
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 24px;
  border: 2px solid #00a99d;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
}

.elder-filter-tabs button.active {
  background: #00a99d;
  color: #fff;
}

.elder-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.elder-btn-outline {
  background: #fff !important;
  color: #00a99d !important;
  border: 2px solid #00a99d !important;
}

.elder-card-btn,
.elder-home-actions .theme-btn-one {
  min-height: 48px;
}

.elder-mini-card {
  border: 1px solid #e8ecef;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  background: #fff;
}

.elder-mini-card h4 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.elder-mini-card--img img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.elder-product-card img,
.elder-home-card img {
  background: #f0f2f5;
}

.elder-featured-row {
  margin-top: 40px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 767px) {
  .elder-a11y-toggle-btn {
    left: 12px;
    bottom: 16px;
    font-size: 0.95rem;
    padding: 0 16px;
  }

  .elder-chat-widget {
    bottom: 16px;
    right: 16px;
  }
}