/* style.css - Global styles, header, form, modals, accessibility helpers
   Complete updated stylesheet: unified rounded selects/buttons, combobox styles,
   accessibility preset classes, responsive tweaks and combobox positioning.
*/

/* ---------- Root / base ---------- */
:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --accent: #6A0DAD;
  --accent-2: #00BFA5;
  --muted: #666;
  --error: #b00020;
  --control-h: 48px;
  --control-radius: 28px;
  --gap: 14px;
  --a11y-select-width: 260px; /* unified width for language + preset selects */
  --a11y-select-mobile-width: 200px;
  --combobox-gap: 8px;
  --combobox-max-height: 320px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  color-scheme: light;
}

/* ---------- Global reset / box-sizing ---------- */
*, *::before, *::after { box-sizing: border-box; }
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute;
  left:8px;
  top:8px;
  background:#000;
  color:#fff;
  padding:8px 12px;
  border-radius:6px;
  transform:translateY(-120%);
  transition:transform .18s ease;
  z-index:9999;
}
.skip-link:focus{ transform:translateY(0); outline:none; }

/* ---------- Layout containers ---------- */
.wrap{
  max-width:920px;
  margin:28px auto;
  padding:18px;
}
.card{
  background:var(--card);
  border-radius:14px;
  padding:20px;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
}

/* ---------- Header / branding ---------- */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .logo{ height:48px; display:block; }
.brand-text .title{ font-weight:700; color:var(--accent); line-height:1; }
.brand-text .subtitle{ font-size:0.9rem; color:var(--accent-2); margin-top:2px; }

/* ---------- Language form and toolbar ---------- */
.lang-form{ display:flex; align-items:center; gap:8px; }

/* Unified rounded select style for language + preset */
.lang-form .rounded-select,
.accessibility-presets .rounded-select {
  width: var(--a11y-select-width);
  min-width: var(--a11y-select-width);
  max-width: var(--a11y-select-width);
  box-sizing: border-box;
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid #e6e6e6;
  background: #fff;
  height: 40px;
  line-height: 1;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 0.95rem;
  color: #111;
}

/* Provide a visible arrow for native selects where needed */
.select-wrapper {
  position: relative;
  display: inline-block;
}
.select-wrapper::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #666;
  font-size: 0.9rem;
}

/* Simple toggle (kept for forms if used elsewhere) */
.simple-toggle{ display:flex; align-items:center; gap:6px; font-size:0.95rem; }

/* Accessibility toolbar */
.accessibility-toolbar{ display:flex; gap:8px; align-items:center; }
.accessibility-toolbar button{
  background:transparent;
  border:1px solid #e0e0e0;
  padding:6px 8px;
  border-radius:8px;
  cursor:pointer;
  font-size:1rem;
}
.accessibility-toolbar button[aria-pressed="true"]{
  background:#f0f4f3;
  border-color:#cfeee6;
}

/* ---------- Combobox (enhanced select) ---------- */
.custom-combobox {
  display:inline-flex;
  align-items:center;
  gap:var(--combobox-gap);
  position:relative;
  font-size:0.95rem;
  z-index:1000;
}
.combobox-button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #e6e6e6;
  background:#fff;
  cursor:pointer;
  height:40px;
  line-height:1;
  font:inherit;
  position:relative;
}
.combobox-button:focus { outline: 3px solid rgba(0,191,165,0.12); outline-offset:2px; }
.combobox-button .thumb { width:28px; height:20px; object-fit:cover; display:inline-block; }
.combobox-button .label { display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }

/* arrow for combobox button */
.combobox-button::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #666;
  font-size: 0.9rem;
}

.combobox-list {
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:1000;
  background:var(--card);
  border:1px solid #e6e6e6;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
  max-height:var(--combobox-max-height);
  overflow:auto;
  min-width:var(--a11y-select-width);
  display:none;
  padding:6px;
}
.combobox-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
}
.combobox-item[aria-selected="true"],
.combobox-item.focused {
  background: rgba(0,191,165,0.06);
}
.combobox-item .thumb { width:28px; height:20px; object-fit:cover; }
.combobox-item .label { font-size:0.95rem; color:#111; }

/* Thumb spacer for items without image */
.thumb-spacer { width:28px; display:inline-block; }

/* ---------- Form: single column, label above field ---------- */
form#contactForm{ margin-top:12px; }
form#contactForm .form-row{ display:block; margin-bottom:18px; }
form#contactForm .form-row.full-width{ margin-bottom:22px; }
form#contactForm .form-row label{ display:block; margin-bottom:8px; font-weight:600; color:#222; }

/* Controls: rounded, full width */
form#contactForm .form-row input[type="text"],
form#contactForm .form-row input[type="email"],
form#contactForm .form-row input[type="tel"],
form#contactForm .form-row input[type="date"],
form#contactForm .form-row select,
form#contactForm .form-row textarea {
  width:100%;
  box-sizing:border-box;
  padding:10px 14px;
  border-radius:var(--control-radius);
  border:1px solid #d6d9df;
  background:#fff;
  font-size:1rem;
  min-height:var(--control-h);
  transition:box-shadow .12s, border-color .12s;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}

/* Textarea slightly different radius and height */
form#contactForm .form-row textarea{
  min-height:120px;
  border-radius:16px;
  padding-top:12px;
  padding-bottom:12px;
}

/* Select arrow spacing */
form#contactForm select{ padding-right:40px; background-position: calc(100% - 14px) center; background-repeat:no-repeat; }

/* Focus-visible for keyboard users */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 12px;
}
form#contactForm .form-row input:focus,
form#contactForm .form-row select:focus,
form#contactForm .form-row textarea:focus {
  box-shadow: 0 0 0 4px rgba(0,191,165,0.08);
  border-color: var(--accent-2);
}

/* Help text and errors under the field */
form#contactForm .form-row .small-help,
form#contactForm .form-row .form-error{
  display:block;
  margin-top:8px;
  font-size:0.92rem;
}
.form-error{ color:var(--error); font-weight:600; display:none; }
.form-error[aria-hidden="false"]{ display:block; }

/* Submit button */
.submit-row{ text-align:center; margin-top:14px; }
.submit-row button{
  height:var(--control-h);
  padding:0 28px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  border:none;
  font-weight:700;
  cursor:pointer;
  font-size:1rem;
}
.submit-row button:active{ transform:translateY(1px); }

/* ---------- Error summary ---------- */
.error-summary{
  border:2px solid var(--error);
  background:#fff0f0;
  padding:12px;
  border-radius:8px;
  margin-bottom:12px;
}
.error-summary h2{ margin:0 0 8px 0; font-size:1rem; color:var(--error); }
.error-summary ul{ margin:0; padding-left:18px; }

/* ---------- Contrast warning ---------- */
.contrast-warning{
  background:#fff3cd;
  border:1px solid #ffeeba;
  color:#856404;
  padding:10px 12px;
  border-radius:8px;
  margin-bottom:12px;
  display:none;
}

/* ---------- Modals ---------- */
.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.modal-overlay[aria-hidden="false"]{ display:flex; }
.modal-dialog{
  background:#fff;
  border-radius:8px;
  max-width:900px;
  width:95%;
  max-height:90vh;
  overflow:auto;
  padding:12px;
  position:relative;
}
.modal-dialog .close-btn{
  position:absolute;
  right:8px;
  top:8px;
  background:transparent;
  border:0;
  font-size:18px;
  cursor:pointer;
}
.modal-dialog h2{ margin-top:0; }

/* inert fallback: visually dim background content */
.inert-fallback{ pointer-events:none; user-select:none; opacity:0.45; }

/* ---------- Flags ---------- */
.flag-current{ display:inline-block; vertical-align:middle; margin-right:6px; width:20px; height:14px; }

/* ---------- Accessibility helpers ---------- */
.visually-hidden{
  position:absolute !important;
  height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* ---------- High contrast mode ---------- */
.high-contrast, .high-contrast body { background:#000 !important; color:#fff !important; }
.high-contrast .card { background:#000 !important; color:#fff !important; }
.high-contrast input, .high-contrast select, .high-contrast textarea { background:#000 !important; color:#fff !important; border-color:#fff !important; }

/* ---------- Accessibility preset classes (applied to <html>) ---------- */
/* Easy language: larger text, increased spacing */
.a11y-large-text { font-size: 1.125rem; }
.a11y-increase-spacing * { letter-spacing: 0.01em; }
.a11y-simple-language { /* selectors for simplified content can be added here */ }

/* High contrast (additional to .high-contrast) */
.a11y-high-contrast { filter: none; }

/* Reduced motion: respect user preference and remove transitions/animations */
@media (prefers-reduced-motion: reduce) {
  .a11y-reduced-motion * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Large controls: increase hit targets */
.a11y-large-controls button,
.a11y-large-controls .btn,
.a11y-large-controls .combobox-button,
.a11y-large-controls .rounded-select {
  min-height:56px;
  padding:12px 18px;
}

/* TTS enabled: visual indicator (if desired) */
.a11y-tts-enabled body::after {
  content: '';
  display: none; /* keep hidden by default; can be used for visual indicator if wanted */
}

/* Low bandwidth: hide images */
.a11y-low-bandwidth img { display:none !important; }

/* Assistive input: longer timeouts, focus styles */
.a11y-assistive-input * { transition-duration: 0.3s !important; }
.a11y-assistive-input :focus { outline: 4px solid rgba(0,191,165,0.18); outline-offset: 3px; }

/* Cognitive support: reduce information density */
.a11y-cognitive-support .card,
.a11y-cognitive-support .wrap { max-width: 720px; }

/* ---------- Buttons: rounded style for apply/undo and other small buttons ---------- */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #cfcfcf;
  background:#fff;
  color:#111;
  cursor:pointer;
  height:40px;
  font-size:0.95rem;
}
.btn.secondary { background:#f5f5f5; }
.btn:focus { outline: 3px solid rgba(0,150,136,0.18); outline-offset:2px; }

/* ---------- Responsive tweaks ---------- */
@media (max-width:920px) {
  .lang-form .rounded-select,
  .accessibility-presets .rounded-select,
  .custom-combobox .combobox-button {
    width: calc(var(--a11y-select-width) - 40px);
    min-width: 180px;
    max-width: 100%;
  }
}

@media (max-width:720px){
  .brand-text .title{ font-size:1rem; }
  .brand-text .subtitle{ font-size:0.85rem; }
  .header-inner{ padding:10px; gap:8px; }
  .wrap{ padding:12px; margin:18px auto; }
}

/* Mobile: reduce select width to fit */
@media (max-width:520px){
  :root { --a11y-select-width: var(--a11y-select-mobile-width); }
  .preset-description { display:none; }
  .accessibility-presets { gap:8px; }
  .header-inner { flex-wrap:wrap; align-items:center; gap:10px; }
  .header-controls { width:100%; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
}

/* ---------- Utility helpers ---------- */
.text-center{ text-align:center; }
.muted{ color:var(--muted); }

/* Prevent inputs from sitting side-by-side due to external CSS */
form#contactForm .form-row > * { display:block; width:100%; }

/* Small visual polish for selects on some browsers */
select::-ms-expand { display:none; }

/* ---------- Final combobox/positioning polish (keeps dropdown within viewport) ---------- */
/* If dropdown would overflow right edge, add .align-right to .custom-combobox via JS */
.custom-combobox.align-right .combobox-list {
  left: auto;
  right: 0;
}

/* Combobox list responsive width adjustments */
@media (max-width:520px) {
  .combobox-list {
    left: 0 !important;
    right: 0 !important;
    min-width: auto;
    width: calc(100% - 24px);
    margin: 0 12px;
  }
  .combobox-item .label { max-width: calc(100% - 60px); }
}

/* Keep combobox list from covering the header brand on small screens */
@media (max-width: 640px) {
  .combobox-list { max-height: 40vh; }
}

/* Ensure combobox item labels wrap/ellipsis according to select width */
.combobox-item .label { max-width: calc(var(--a11y-select-width) - 60px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ensure combobox list does not get clipped by overflow parents */
.custom-combobox { z-index: 1000; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .combobox-list,
  .custom-combobox,
  .lang-form .rounded-select,
  .accessibility-presets .rounded-select {
    transition: none !important;
  }
}