/* ===== Alwidad — site styles =====
   Converted from the Claude Design file الوداد.dc.html.
   The design used inline styles + `style-hover` attributes (a Claude Design
   extension, not real HTML). Hover states and all responsive behaviour live
   here; layout/colour stays inline on the elements so the markup still maps
   1:1 onto the original design. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Tajawal', sans-serif; background: #fff; }
a { color: #16a5c4; text-decoration: none; }
a:hover { color: #0f7f98; }
::selection { background: #16a5c4; color: #fff; }

@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

.anim-fade-up { animation: fadeUp 0.7s ease both; }
.anim-floaty  { animation: floaty 5s ease-in-out infinite; }

/* ---- hover states (were `style-hover` in the design) ---- */
.a-teal        { transition: background 0.2s ease; }
.a-teal:hover  { background: #0f8fac !important; color: #fff; }
.a-store       { transition: background 0.2s ease; }
.a-store:hover { background: #12244a !important; color: #fff; }
.a-flink       { transition: color 0.2s ease; }
.a-flink:hover { color: #fff !important; }
.a-social      { transition: background 0.2s ease; }
.a-social:hover{ background: rgba(255,255,255,0.22) !important; }
.a-wa          { transition: transform 0.2s ease; }
.a-wa:hover    { transform: scale(1.08); }

/* ---- accessibility: the design animates on load; respect the OS setting ---- */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up, .anim-floaty { animation: none; }
}

/* ===== Responsive =====
   The original design was fixed at a 1280px preview with no breakpoints, so
   every multi-column grid below collapses here. Desktop rendering is unchanged. */

@media (max-width: 1000px) {
  .hero-grid   { grid-template-columns: 1fr !important; gap: 56px !important; }
  .intro-grid  { grid-template-columns: 1fr !important; gap: 40px !important; }
  .feat-grid   { grid-template-columns: 1fr !important; gap: 40px !important; }
  .branch-grid { grid-template-columns: 1fr !important; }
  .about-grid  { grid-template-columns: 1fr !important; }
  .subj-grid   { grid-template-columns: 1fr 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 34px !important; }
  .hero-title  { font-size: 42px !important; }
  .hero-sub    { font-size: 19px !important; }
}

@media (max-width: 760px) {
  .site-header { flex-wrap: wrap; gap: 14px; padding: 14px 5vw !important; justify-content: center; }
  .site-nav    { gap: 16px !important; flex-wrap: wrap; justify-content: center; width: 100%; }
  .site-nav a  { font-size: 14px !important; }

  /* the tablet sits behind the phone with negative margins — no room for both */
  .mockup-tablet { display: none; }
  .mockup-phone  { margin-right: 0 !important; width: 230px !important; height: 480px !important; }

  .hero-title   { font-size: 32px !important; letter-spacing: 0 !important; }
  .hero-sub     { font-size: 17px !important; }
  .hero-stats   { gap: 22px !important; flex-wrap: wrap; }
  .hero-stats > div > div:first-child { font-size: 24px !important; }
  .sec-title    { font-size: 27px !important; }
  .page-title   { font-size: 32px !important; }
  .feat-inner   { grid-template-columns: 1fr !important; gap: 28px !important; }
  .feat-card    { padding: 32px 26px !important; }
  .subj-grid    { grid-template-columns: 1fr !important; }
  .lesson-grid  { grid-template-columns: 1fr !important; }
  .footer-grid  { grid-template-columns: 1fr !important; }
  .activate-card{ padding: 36px 24px !important; }

  section { padding-left: 5vw !important; padding-right: 5vw !important; }
}

/* ---- legal pages (/privacy, /terms) ----
   The only long-prose pages on the site, so their typography lives here rather
   than as inline styles on every paragraph. */
.legal { max-width: 820px; margin: 0 auto; }
.legal h2 { font-size: 24px; font-weight: 800; color: #1c2b45; margin: 46px 0 14px; }
.legal h2:first-of-type { margin-top: 34px; }
.legal h3 { font-size: 18px; font-weight: 800; color: #16a5c4; margin: 26px 0 8px; }
.legal p  { font-size: 17px; line-height: 1.95; color: #3a475c; margin: 0 0 16px; }
.legal ul { margin: 0 0 18px; padding-inline-start: 24px; }
.legal li { font-size: 17px; line-height: 1.9; color: #3a475c; margin-bottom: 9px; }
.legal a  { font-weight: 700; }
.legal strong { color: #1c2b45; }
.legal code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 14px; background: #f1f5f8; border: 1px solid #e2eef3;
  border-radius: 6px; padding: 2px 7px; direction: ltr; display: inline-block;
}
.legal .lead { font-size: 18px; line-height: 1.9; color: #4a5a72; }
.legal .updated {
  font-size: 14px; font-weight: 700; color: #5b6a80;
  background: #f4f9fb; border: 1px solid #e2eef3; border-radius: 999px;
  padding: 7px 18px; display: inline-block; margin: 0 0 26px;
}
.legal .note {
  background: #f4f9fb; border: 1px solid #e2eef3;
  border-inline-start: 4px solid #16a5c4;
  border-radius: 14px; padding: 22px 26px; margin: 0 0 18px;
}
.legal .note li:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .legal h2 { font-size: 21px; margin-top: 38px; }
  .legal p, .legal li { font-size: 16px; }
}

/* ---- app screenshot gallery (partials/app-shots.blade.php) ----
   Four 214px phones + gaps ≈ 934px, so below ~1000px the row turns into a
   horizontal snap-scroller instead of wrapping into a lopsided 2+2. It bleeds
   to the section edges so it reads as scrollable rather than clipped. */
/* Centred while all four fit. Must NOT be an inline style on the element —
   inline would win over the flex-start below, and a centred overflowing flex
   row puts its first item permanently out of scroll reach. */
.shots-row { justify-content: center; }

@media (max-width: 1000px) {
  .shots-row {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: -6vw;
    padding-inline: 6vw;
    padding-bottom: 14px;
  }
  .shots-row .shot { scroll-snap-align: center; }
}

/* ---- branch cards (partials/branch-card.blade.php) ----
   The whole card is one <a>, so the teal bar is a <span>; darken it from the
   card's hover rather than its own. */
.branch-card       { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.branch-card:hover { transform: translateY(-4px); box-shadow: 0 24px 52px rgba(20,40,80,0.17); color: inherit; }
.branch-card .card-cta       { transition: background 0.2s ease; }
.branch-card:hover .card-cta { background: #0f8fac; }

/* ---- download rows (partials/downloads.blade.php) ----
   Four targets: App Store, Google Play, Windows, macOS. Tiles carry a uniform
   min-width inline; these rules only decide how many fit per row. */

/* In the hero the text column is ~593px — three tiles just fit, leaving the
   fourth stranded on its own line. Cap the row so it breaks 2×2 instead. */
.store-row.two-up { max-width: 372px; }

@media (max-width: 760px) {
  /* Narrower tiles so two still sit side by side at 375px rather than
     stacking into four full-width rows. */
  .store-row     > * { min-width: 148px !important; padding: 10px 14px !important; }
  .store-row-sm  > * { min-width: 104px !important; }
  .store-row.two-up  { max-width: none; }
}