/* ==========================================================================
   Zenix Academy — reusable components
   ========================================================================== */

/* ---------------------------------------------------------------- buttons - */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-block-size: 48px;              /* touch target floor */
  padding: .8rem 1.6rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.btn svg { inline-size: 18px; block-size: 18px; flex: none; }

.btn--primary {
  background-image: var(--accent-grad);
  color: #fff;
  box-shadow: var(--glow);
}
.btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 22px 46px -20px rgba(11, 119, 124, .7); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { color: var(--accent-ink); border-color: var(--accent); transform: translateY(-2px); }

.btn--lg { min-block-size: 56px; padding: 1rem 2rem; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }

.btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: .55;
  box-shadow: none;
}

/* ------------------------------------------------------------- accordion -- */
.faq-item {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.faq-item + .faq-item { margin-block-start: .75rem; }
.faq-item[open] { border-color: var(--accent-line); box-shadow: var(--shadow-sm); }

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem clamp(1rem, 2.5vw, 1.5rem);
  min-block-size: 56px;
  font-weight: 700;
  font-size: var(--fs-base);
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-ink); }
.faq-item summary::after {
  content: "";
  margin-inline-start: auto;
  flex: none;
  inline-size: 12px; block-size: 12px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-med) var(--ease-out);
  opacity: .5;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); opacity: 1; }
.faq-item__body {
  padding: 0 clamp(1rem, 2.5vw, 1.5rem) 1.4rem;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------ download buttons -- */
/* The page's only download controls, and the target of every «حمّل» link.
   Built as a matched pair so the Windows card reads as "not yet" rather than
   as "broken": same silhouette, same internal rhythm, different weight. */
.dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  max-inline-size: 41rem;
}
@media (max-width: 620px) { .dl { grid-template-columns: 1fr; } }
@media (max-width: 940px) { .dl { margin-inline: auto; } }

.dl__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  min-block-size: 68px;
  padding: .85rem 1.1rem;
  border-radius: var(--r-lg);
  text-decoration: none;
  text-align: start;
  isolation: isolate;
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease);
}

.dl__icon {
  inline-size: 42px; block-size: 42px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
}
.dl__icon svg { inline-size: 22px; block-size: 22px; }

.dl__text { display: grid; min-inline-size: 0; }
.dl__kicker { font-size: var(--fs-xs); line-height: 1.5; opacity: .85; }
.dl__label  { font-size: var(--fs-base); font-weight: 800; line-height: 1.35; }

.dl__go {
  inline-size: 18px; block-size: 18px;
  flex: none;
  margin-inline-start: auto;
  /* RTL: forward is visually leftward. */
  transform: scaleX(-1);
  transition: transform var(--t-med) var(--ease-out);
  opacity: .8;
}

/* --- Android: the live one, so it carries the brand gradient --- */
.dl__btn--primary {
  background-image: var(--accent-grad);
  color: #fff;
  box-shadow: var(--glow);
}
.dl__btn--primary .dl__icon { background: rgba(255, 255, 255, .16); color: #fff; }
.dl__btn--primary:hover { color: #fff; box-shadow: 0 24px 50px -22px rgba(11, 119, 124, .72); }
.dl__btn--primary:hover .dl__go { transform: scaleX(-1) translateX(4px); opacity: 1; }

/* --- Windows: quiet glass, so the two do not compete as CTAs --- */
.dl__btn--ghost {
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dl__btn--ghost .dl__icon { background: var(--surface-2); color: var(--accent-ink); }
.dl__btn--ghost .dl__kicker { color: var(--ink-soft); }
.dl__btn--ghost:hover {
  color: var(--ink);
  border-color: var(--accent-line);
  box-shadow: var(--shadow);
}
.dl__btn--ghost:hover .dl__go { transform: scaleX(-1) translateX(4px); opacity: 1; }

/* The pulse ring fired by main.js when a «حمّل» link sends the reader back up.
   It is a separate layer so it cannot fight the buttons' own box-shadow. */
.dl__btn::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: calc(var(--r-lg) + 5px);
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}