/* ==========================================================================
   Serath2 — Letöltés page            css/download.css
   Loaded AFTER css/serath2.css on every page (small, only .dl-* classes).

   Why this file exists (all measured on the live page):
     * the page's <h3> sits inside .content, so the generic ".content h3"
       card-header rule gave it a violet gradient + 1px bottom border + 14/20px
       padding — a SECOND header bar stacked under the card's own <h2>. Two
       stacked header bars is what made the page look wrong.
     * the requirements lived behind a "» Rendszer előfeltételek" click-to-show
       toggle (jQuery slideToggle), i.e. hidden by default on a download page.
     * the two requirement tables were separate, so Minimum vs Recommended
       could not be compared, and the rows used a manual "- " prefix instead of
       a real list.
     * the last <tr> in BOTH tables was never closed (missing </tr>).
     * "Soundkártya - Ügyfélszolgálat DirectX 9.0" — "Ügyfélszolgálat" is
       "customer service"; a mistranslation of the original.
   ========================================================================== */

/* ------------------------------------------------------------------- hero */
.dl-hero{padding:26px 28px 24px;text-align:center}

.dl-title{
  margin:0 0 10px;
  font-family:var(--fd);
  font-size:1.34rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.02em;
}
/* neutralise the legacy ".content h3" header treatment */
.content .dl-title{
  padding:0;border:0;background:none;
}

.dl-sub{
  margin:0 auto 22px;
  max-width:430px;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.6;
}

.dl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7em;
  min-width:270px;
  padding:1em 1.9em;
  border:1px solid transparent;
  border-radius:13px;
  background:linear-gradient(180deg,var(--violet),var(--violet-deep));
  color:#fff;
  font-family:var(--fb);
  font-size:1.03rem;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 16px 34px -16px var(--violet);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.dl-btn:hover{
  filter:brightness(1.09);
  transform:translateY(-2px);
  color:#fff;
  box-shadow:0 20px 40px -16px var(--violet);
}
.dl-btn:active{transform:translateY(0)}
.dl-btn svg{width:21px;height:21px;flex:none}
.dl-btn small{
  display:block;
  font-size:.74rem;
  font-weight:500;
  opacity:.85;
  letter-spacing:.02em;
}

/* meta strip under the button */
.dl-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0 26px;
  margin:22px 0 0;
  padding:16px 0 0;
  border-top:1px solid var(--border);
  list-style:none;
}
.dl-meta li{
  display:flex;
  align-items:baseline;
  gap:.45em;
  color:var(--text);
  font-size:.85rem;
  white-space:nowrap;
}
.dl-meta li span{color:var(--muted);font-size:.78rem}

/* ------------------------------------------------------- requirements block */
.dl-req{padding:0 28px 26px}

.dl-req h3{
  margin:0 0 4px;
  font-family:var(--fd);
  font-size:1.06rem;
  color:var(--violet-soft);
}
.content .dl-req h3{padding:0;border:0;background:none}

.dl-req > p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:.83rem;
  line-height:1.55;
}

.dl-table{
  width:100%;
  border-collapse:collapse;
  font-size:.87rem;
  background:rgba(0,0,0,.18);
  border:1px solid var(--border);
  border-radius:11px;
  overflow:hidden;
}
.dl-table th,
.dl-table td{
  padding:10px 13px;
  text-align:left;
  border-bottom:1px solid var(--border);
}
.dl-table thead th{
  background:rgba(169,116,255,.13);
  color:#fff;
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.03em;
}
.dl-table tbody th{
  color:var(--violet-soft);
  font-weight:600;
  white-space:nowrap;
}
.dl-table td{color:#d8d2e8}
.dl-table tbody tr:last-child th,
.dl-table tbody tr:last-child td{border-bottom:0}
.dl-table tbody tr:hover td,
.dl-table tbody tr:hover th{background:rgba(169,116,255,.07)}

/* the "recommended" column reads a touch brighter than the minimum */
.dl-table td.dl-rec{color:#fff}

.dl-note{
  margin:22px 0 0;
  padding:14px 16px;
  border:1px solid var(--border);
  border-left:3px solid var(--violet);
  border-radius:10px;
  background:rgba(169,116,255,.07);
  color:var(--muted);
  font-size:.82rem;
  line-height:1.6;
}

/* --------------------------------------------------------------- responsive */
@media(max-width:760px){
  .dl-hero{padding:22px 20px 20px}
  .dl-req{padding:0 20px 22px}
  .dl-title{font-size:1.18rem}
  .dl-btn{min-width:0;width:100%}
  .dl-meta{gap:0 16px;justify-content:flex-start}
}

@media(max-width:620px){
  /* Stack the comparison table into one card per component instead of
     squashing it or making the user scroll sideways. The Minimum/Ajánlott
     labels come from data-label attributes in the markup; rows that span both
     columns have no data-label and therefore show no label. */
  .dl-table{min-width:0;border:0;background:none;overflow:visible}
  .dl-table thead{display:none}
  .dl-table tbody tr{
    display:block;
    margin:0 0 13px;
    border:1px solid var(--border);
    border-radius:11px;
    background:rgba(0,0,0,.18);
    overflow:hidden;
  }
  .dl-table tbody tr:hover th,
  .dl-table tbody tr:hover td{background:transparent}
  .dl-table tbody th{
    display:block;
    padding:9px 13px;
    background:rgba(169,116,255,.13);
    border-bottom:1px solid var(--border);
    white-space:normal;
  }
  .dl-table tbody td{
    display:block;
    padding:9px 13px;
    border-bottom:1px dashed rgba(255,255,255,.08);
  }
  .dl-table tbody td:last-child{border-bottom:0}
  .dl-table tbody td[data-label]::before{
    content:attr(data-label);
    display:block;
    margin:0 0 3px;
    color:var(--muted);
    font-size:.7rem;
    letter-spacing:.05em;
    text-transform:uppercase;
  }
}

@media(prefers-reduced-motion:reduce){
  .dl-btn{transition:none}
  .dl-btn:hover{transform:none}
}

/* --- download temporarily paused (DOWNLOAD_ENABLED = false) --- */
.dl-btn-off{
  background:linear-gradient(180deg,#7a7f99,#4e5268);
  cursor:not-allowed;
}
.dl-btn-off:hover{
  filter:none;
  transform:none;
  box-shadow:none;
}
.dl-off-note{
  margin:1em auto 0;
  max-width:640px;
  font-size:.9rem;
  line-height:1.55;
  text-align:center;
  opacity:.88;
}