/*
  Tehniskā atbalsta lapa.
  Papildina nodarbiba.css. Visas krāsas, fonti un pogas tiek pārmantotas no tā,
  šeit ir tikai jaunie bloki, kuru citur vietnē nav.
*/

/* ---------- Hero ---------- */

/* Bannera attēls ir klienta, un tā kreisā puse ir tīša tukša vieta tekstam.
   Plīvurs tāpēc ir stiprs tikai kreisajā malā, lai labajā pusē paliktu
   redzams tīkla un sarunu zīmējums. Gradients zem attēla paliek kā rezerve,
   ja attēls kādreiz neielādētos. */
.support-hero {
  min-height: 560px;
  background:
    linear-gradient(100deg,
      rgba(24, 15, 52, 0.86) 0%,
      rgba(24, 15, 52, 0.62) 38%,
      rgba(24, 15, 52, 0.24) 66%,
      rgba(24, 15, 52, 0.06) 100%),
    url("assets/tehniskais-atbalsts/hero-atbalsts.jpg") center / cover no-repeat,
    linear-gradient(125deg, #2b1f4f 0%, var(--purple) 38%, var(--purple-mid) 74%, var(--detail-accent) 145%);
}

/* Attēlā jau ir savs gaismas plankums labajā augšējā stūrī, tāpēc vecā
   spīduma vieta ir tikai neliels papildinājums, nevis otrs plankums. */
.support-hero-glow {
  position: absolute;
  top: -180px;
  right: -140px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--detail-accent-rgb), 0.14), transparent 62%);
  pointer-events: none;
}

.support-hero .detail-hero-content {
  padding: 84px 0 104px;
}

.support-hero .detail-breadcrumbs span:last-child {
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Kontaktu josla ---------- */

.detail-facts strong a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(var(--detail-accent-rgb), 0.4);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.detail-facts strong a:hover {
  color: var(--detail-accent);
  border-bottom-color: var(--detail-accent);
}

.support-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Sazināšanās kartes ---------- */

.support-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 42px;
}

.support-contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(75, 58, 115, 0.08);
}

.support-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(var(--detail-accent-rgb), 0.12);
  color: var(--detail-accent);
}

.support-contact-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.support-contact-card h3 {
  margin: 20px 0 0;
  color: var(--purple);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 22px;
  line-height: 1.25;
}

.support-contact-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.support-contact-value {
  margin-top: 16px !important;
  color: var(--purple) !important;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 19px !important;
  font-weight: 700;
}

.support-contact-card .detail-btn {
  margin-top: 22px;
}

.detail-btn-outline-purple {
  border-color: rgba(75, 58, 115, 0.3);
  background: #fff;
  color: var(--purple);
}

.detail-btn-outline-purple:hover {
  border-color: var(--purple);
}

/* ---------- Piezīme ar sarakstu ---------- */

.support-note {
  margin-top: 22px;
  padding: 26px 30px;
  border: 1px solid rgba(var(--detail-accent-rgb), 0.24);
  border-radius: 20px;
  background: rgba(var(--detail-accent-rgb), 0.07);
}

.support-note strong {
  display: block;
  color: var(--purple);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
}

.support-note ul {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.support-note li {
  position: relative;
  padding-left: 24px;
  color: #504a65;
  font-size: 15px;
  line-height: 1.55;
}

.support-note li::before {
  position: absolute;
  top: 8px;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--detail-accent);
  content: "";
}

/* ---------- Biežāko problēmu saraksts ---------- */

.support-faq {
  display: grid;
  gap: 12px;
  max-width: 900px;
  margin: 42px auto 0;
}

.support-faq-item {
  overflow: hidden;
  border: 1px solid rgba(75, 58, 115, 0.09);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(75, 58, 115, 0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.support-faq-item[open] {
  border-color: rgba(var(--detail-accent-rgb), 0.34);
  box-shadow: 0 14px 38px rgba(75, 58, 115, 0.1);
}

.support-faq-item summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 60px 22px 26px;
  position: relative;
  cursor: pointer;
  list-style: none;
}

.support-faq-item summary::-webkit-details-marker {
  display: none;
}

.support-faq-item summary:focus-visible {
  outline: 2px solid var(--detail-accent);
  outline-offset: -4px;
}

.support-faq-item summary::after {
  position: absolute;
  top: 50%;
  right: 24px;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--purple-mid);
  border-bottom: 2px solid var(--purple-mid);
  content: "";
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease;
}

.support-faq-item[open] summary::after {
  transform: translateY(-20%) rotate(225deg);
}

.support-faq-tag {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(var(--detail-accent-rgb), 0.13);
  color: var(--detail-accent);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.support-faq-title {
  color: var(--purple);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.support-faq-body {
  margin: 0 26px;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(75, 58, 115, 0.07);
}

.support-faq-body p {
  margin: 0 0 14px;
  color: #504a65;
  font-size: 15px;
  line-height: 1.7;
}

.support-faq-body p:last-child,
.support-faq-body ol:last-child {
  margin-bottom: 0;
}

.support-faq-body ol {
  display: grid;
  gap: 9px;
  margin: 0 0 14px;
  padding-left: 20px;
  color: #504a65;
  font-size: 15px;
  line-height: 1.65;
}

.support-faq-body ol::marker {
  color: var(--detail-accent);
}

.support-faq-body li::marker {
  color: var(--detail-accent);
  font-weight: 800;
}

.support-faq-body code {
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(75, 58, 115, 0.08);
  color: var(--purple);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
  font-weight: 600;
}

.support-faq-body .detail-btn {
  margin: 6px 0 16px;
}

.support-faq-body .detail-btn:last-child {
  margin-bottom: 0;
}

/* Pieslēgšanās dati */

.support-credential {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid rgba(75, 58, 115, 0.12);
  border-radius: 16px;
  background: rgba(75, 58, 115, 0.12);
}

.support-credential > div {
  padding: 18px 22px;
  background: var(--surface);
}

.support-credential span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.support-credential code {
  padding: 0;
  background: transparent;
  color: var(--purple);
  font-size: 17px;
  font-weight: 700;
  word-break: break-all;
}

.support-credential-text {
  margin: 0 !important;
  color: var(--purple) !important;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1.45 !important;
}

.support-callout {
  padding: 18px 22px;
  border-left: 4px solid var(--yellow);
  border-radius: 0 14px 14px 0;
  background: rgba(247, 190, 0, 0.11);
  color: #4a4230 !important;
}

/* ---------- Lejupielādes ---------- */

.support-download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 42px;
}

.support-download-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--detail-accent);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(75, 58, 115, 0.08);
}

.support-download-label {
  color: var(--detail-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.support-download-card h3 {
  margin: 10px 0 0;
  color: var(--purple);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 21px;
  line-height: 1.25;
}

.support-download-card p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.support-download-card code {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(75, 58, 115, 0.08);
  color: var(--purple);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

.support-download-meta {
  margin-top: auto !important;
  padding-top: 18px;
  color: var(--purple) !important;
  font-size: 13px !important;
  font-weight: 700;
}

.support-download-card .detail-btn {
  margin-top: 16px;
}

/* ---------- Ierīču tabula ---------- */

.support-devices-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 94% 88%, rgba(var(--detail-accent-rgb), 0.12), transparent 26%),
    linear-gradient(180deg, #fbf9ff 0%, #f6f1fd 100%);
}

.support-table-wrap {
  margin-top: 42px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(75, 58, 115, 0.08);
}

.support-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  text-align: left;
}

.support-table th,
.support-table td {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.support-table thead th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.support-table tbody th {
  color: var(--purple);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.support-table tbody tr:last-child th,
.support-table tbody tr:last-child td {
  border-bottom: 0;
}

.support-table td {
  color: var(--muted);
  font-weight: 700;
}

.support-table td[data-state="yes"] {
  color: #12876a;
}

.support-table td[data-state="partial"] {
  color: #a8760a;
}

.support-table td[data-state="no"] {
  color: var(--magenta);
}

.support-table-note {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

/* ---------- Responsivitāte ---------- */

@media (max-width: 1180px) {
  .support-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .support-facts {
    grid-template-columns: 1fr;
  }

  .support-hero {
    min-height: 0;
  }

  .support-hero .detail-hero-content {
    padding: 56px 0 72px;
  }

  .support-contact-card,
  .support-download-card {
    padding: 24px;
  }

  .support-note {
    padding: 22px;
  }

  .support-faq-item summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 48px 20px 20px;
  }

  .support-faq-body {
    margin: 0 20px;
    padding-bottom: 22px;
  }

  .support-credential {
    grid-template-columns: minmax(0, 1fr);
  }

  .support-table th,
  .support-table td {
    padding: 14px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-faq-item,
  .support-faq-item summary::after {
    transition: none;
  }
}


/* ---------- Papildinājumi pēc atbalsta komandas atsauksmēm ---------- */

/* Uz ko sadaļa attiecas. Skolas konts ir tikai Minecraft nodarbībām, un
   Roblox vecākiem to vajag pateikt uzreiz, nevis pēc trim rindkopām. */
.support-scope {
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(var(--detail-accent-rgb), 0.09);
  color: var(--purple) !important;
}

.support-scope strong {
  color: var(--purple);
}

.support-contact-hint {
  margin: -6px 0 14px !important;
  color: var(--muted) !important;
  font-size: 13.5px !important;
}

/* Divas soļu kolonnas blakus: Windows un Mac. */
.support-steps-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 16px;
}

.support-steps-col {
  padding: 18px 20px 20px;
  border: 1px solid rgba(75, 58, 115, 0.12);
  border-radius: 16px;
  background: var(--surface);
}

.support-steps-col h4 {
  margin: 0 0 12px;
  color: var(--purple);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.support-steps-col ol {
  margin-bottom: 0;
}

/* Minecraft Education sistēmas prasības zem ierīču tabulas. */
.support-os {
  max-width: 780px;
  margin: 34px auto 0;
  padding: 26px 28px 28px;
  border: 1px solid rgba(75, 58, 115, 0.12);
  border-radius: 20px;
  background: var(--surface);
}

.support-os h3 {
  margin: 0 0 10px;
  color: var(--purple);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
}

.support-os > p {
  margin: 0 0 18px;
  color: #504a65;
  font-size: 15px;
  line-height: 1.7;
}

.support-os-list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(75, 58, 115, 0.12);
  border-radius: 14px;
  background: rgba(75, 58, 115, 0.12);
  list-style: none;
}

.support-os-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 18px;
  padding: 13px 18px;
  background: #fff;
}

.support-os-list span {
  color: var(--purple);
  font-size: 15px;
  font-weight: 700;
}

.support-os-list strong {
  color: var(--detail-accent);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  text-align: right;
}

/* Piezīme zem prasības aizņem abas kolonnas. */
.support-os-list em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
}

.support-os-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 640px) {
  .support-steps-two {
    grid-template-columns: 1fr;
  }

  .support-os {
    padding: 22px 20px 24px;
  }

  .support-os-list li {
    grid-template-columns: 1fr;
  }

  .support-os-list strong {
    text-align: left;
  }
}