/* ========================================
   Component Styles
   MGH ED Patient Portal
   ======================================== */

/* ========================================
   Header
   ======================================== */

.site-header {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-xs);
  background-color: var(--bg);
  border-bottom: 1px solid var(--border);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.header-group {
  display: flex;
  align-items: center;
}

.site-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: 55%;
  pointer-events: none;
}

.header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--min-touch-target);
  height: var(--min-touch-target);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text);
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.header-btn:hover {
  background-color: var(--bg-surface);
}

.header-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.header-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.header-icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

/* Font Size Popover - iOS-inspired control */
.font-size-wrapper {
  position: relative;
  flex-shrink: 0;
}

.font-size-popover {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm) 0;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.font-size-popover[hidden] {
  display: none;
}

.font-size-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text);
  font-size: 2rem;
  font-weight: 300;
  border-radius: 50%;
  transition: background-color var(--transition-fast);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.font-size-step:hover {
  background-color: var(--border);
}

.font-size-step:active {
  background-color: var(--border);
}

.font-size-step:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.font-size-step:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.font-size-divider {
  width: 40px;
  height: 1px;
  background-color: var(--border);
}

.font-size-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: var(--space-md) 0;
}

.font-size-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--text-muted);
  background: transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.font-size-dot.active {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  transform: scale(1.15);
}

/* Language Selector */
.language-wrapper {
  flex-shrink: 0;
}

.language-wrapper[hidden] {
  display: none;
}

.language-select {
  width: var(--min-touch-target);
  height: var(--min-touch-target);
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: transparent;
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-fast);
  font-size: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-size);
}

[data-theme="dark"] .language-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5E5E5' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

.language-select:hover {
  background-color: var(--bg-surface);
}

.language-select:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Translate Disclaimer Banner */
.translate-disclaimer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-sm);
  background-color: var(--section-yellow);
  border-bottom: 1px solid var(--section-yellow-border);
}

.translate-disclaimer[hidden] {
  display: none;
}

.translate-disclaimer-message {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  color: var(--text);
}

.translate-restore-btn {
  border: 1px solid var(--border);
  background-color: var(--bg);
  color: var(--text);
  border-radius: var(--border-radius-sm);
  min-height: var(--min-touch-target);
  padding: 0 var(--space-sm);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hide Google Translate's own UI elements */
.goog-te-banner-frame,
.goog-te-menu-frame,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}

#google_translate_element {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}

.skiptranslate {
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

body {
  top: 0 !important;
  position: static !important;
}

/* Theme Toggle */
.theme-toggle-btn {
  flex-shrink: 0;
}

.theme-icon-dark {
  display: none;
}

[data-theme="dark"] .theme-icon-light {
  display: none;
}

[data-theme="dark"] .theme-icon-dark {
  display: block;
}

/* ========================================
   Accordion Sections
   ======================================== */

.accordion-section {
  margin-bottom: var(--space-sm);
  overflow-anchor: none;
}

.accordion-section:first-child {
  margin-top: var(--space-sm);
}

.accordion-section:last-child {
  margin-bottom: 0;
}

.accordion-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.accordion-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 72px;
  padding: var(--space-sm);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text);
  text-align: left;
  transition: box-shadow var(--transition-fast);
}

.accordion-header:hover {
  box-shadow: var(--shadow-md);
}

.accordion-header:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Section colors */
[data-color="green"] .accordion-header { background-color: var(--section-green); }
[data-color="blue"] .accordion-header { background-color: var(--section-blue); }
[data-color="purple"] .accordion-header { background-color: var(--section-purple); }
[data-color="yellow"] .accordion-header { background-color: var(--section-yellow); }
[data-color="pink"] .accordion-header { background-color: var(--section-pink); }
[data-color="teal"] .accordion-header { background-color: var(--section-teal); }
[data-color="gray"] .accordion-header { background-color: var(--section-gray); }

/* Section icon */
.section-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Accordion title */
.accordion-title {
  flex: 1;
}

/* Accordion arrow */
.accordion-arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-normal);
}

.accordion-arrow::before {
  content: "";
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-right: var(--arrow-border-width) solid var(--text);
  border-bottom: var(--arrow-border-width) solid var(--text);
  transform: rotate(-45deg);
  transition: transform var(--transition-normal);
}

/* Arrow rotates when expanded */
.accordion-header[aria-expanded="true"] .accordion-arrow::before {
  transform: rotate(45deg);
}

/* Sticky accordion header when section is open */
.accordion-header[aria-expanded="true"] {
  position: sticky;
  top: 0;
  z-index: 50;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  box-shadow: var(--shadow-sm);
}

/* Accordion content */
.accordion-content {
  overflow: hidden;
}

.accordion-content[hidden] {
  display: none;
}

.accordion-content:not([hidden]) {
  display: block;
}

.accordion-body {
  padding: var(--space-sm);
}

/* ========================================
   Collapsible Subsections (Inside Accordions)
   ======================================== */

.subsection {
  border-bottom: 1px solid var(--border);
  overflow-anchor: none;
}

.subsection:last-child {
  border-bottom: none;
}

.subsection summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--space-sm) 0;
  list-style: none;
}

.subsection summary::-webkit-details-marker {
  display: none;
}

.subsection summary::marker {
  display: none;
  content: "";
}

.subsection summary h3 {
  margin: 0;
  flex: 1;
}

.subsection summary::after {
  content: "";
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-right: var(--arrow-border-width) solid var(--text-secondary);
  border-bottom: var(--arrow-border-width) solid var(--text-secondary);
  transform: rotate(-45deg);
  transition: transform var(--transition-normal);
  flex-shrink: 0;
  margin-left: var(--space-sm);
}

.subsection[open] summary::after {
  transform: rotate(45deg);
}

.subsection summary:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--border-radius-sm);
}

.subsection-content {
  padding-bottom: var(--space-sm);
}

/* ========================================
   Zone Cards (Inside How the ED Works)
   ======================================== */

.zone-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.zone-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  padding: var(--space-sm);
}

.zone-card h4 {
  margin-top: 0;
  margin-bottom: var(--space-xs);
}

.zone-card p {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ========================================
   Content Cards (Generic info grouping)
   ======================================== */

.content-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.content-card h4 {
  margin-top: 0;
  margin-bottom: var(--space-xs);
}

.content-card p:last-child,
.content-card ul:last-child,
.content-card ol:last-child {
  margin-bottom: 0;
}

/* ========================================
   Test Cards (Inside Assessments & Tests)
   ======================================== */

.test-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.test-card h4 {
  margin-top: 0;
  margin-bottom: var(--space-2xs);
}

.test-card p {
  margin-bottom: 0;
  color: var(--text-secondary);
}

/* ========================================
   FAQ Items (Using <details>/<summary>)
   ======================================== */

.faq-list {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  padding: 0 var(--space-sm);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  min-height: var(--min-touch-target);
  color: var(--text);
}

/* Remove default marker */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  display: none;
  content: "";
}

/* Add custom arrow */
.faq-item summary::after {
  content: "";
  display: block;
  width: var(--arrow-size-sm);
  height: var(--arrow-size-sm);
  border-right: var(--arrow-border-width) solid var(--text-secondary);
  border-bottom: var(--arrow-border-width) solid var(--text-secondary);
  transform: rotate(-45deg);
  flex-shrink: 0;
  margin-left: var(--space-sm);
  transition: transform var(--transition-normal);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item summary:hover {
  color: var(--link);
}

.faq-item summary:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--border-radius-sm);
}

.faq-item p {
  padding-bottom: var(--space-sm);
  color: var(--text);
}

.disclaimer {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-style: italic;
  margin-top: var(--space-sm);
}

/* ========================================
   Error & Loading States
   ======================================== */

.section-loading,
.load-error {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: var(--space-md) var(--space-sm);
}

.map-loading {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-xl);
}

/* ========================================
   Footer
   ======================================== */

.site-footer {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  padding-bottom: var(--space-lg);
  border-top: 1px solid var(--border);
}

.footer-content {
  text-align: center;
}

.footer-updated {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.footer-disclaimer {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.footer-security {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ========================================
   App Update Banner
   ======================================== */

.app-update-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-sm);
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.app-update-banner[hidden] {
  display: none;
}

.app-update-message {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.site-status-banner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-sm);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-sm);
}

.site-status-banner-info {
  background-color: var(--section-blue);
  color: var(--text);
}

.site-status-banner-warning {
  background-color: var(--section-yellow);
  color: var(--text);
}

.update-refresh-btn {
  border: 1px solid var(--border);
  background-color: var(--brand-secondary);
  color: var(--text-on-brand);
  border-radius: var(--border-radius-sm);
  min-height: var(--min-touch-target);
  padding: 0 var(--space-sm);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.update-refresh-btn:disabled {
  opacity: 0.7;
  cursor: progress;
}

.feedback-unavailable {
  color: var(--text-secondary);
}