/* ============================================================
   SAB v252 — ALIGNMENT FIXES
   Brand-new filename so no old CDN/browser cache can serve a
   stale copy. Loaded LAST so it wins over older rules.

   What this file does — and nothing else:
   1) Buttons: the label is now optically centred. The heavy
      uppercase display face (Anton, weight 900) has a large
      descender area that stays empty for CAPITALS, so the text
      was pushed off-centre — less room on top, more underneath.
   2) Section headings: the eyebrow → basmala → name rhythm was
      cramped on top (10px) and huge underneath (66px). Now the
      spacing above and below the heading is balanced.
   No colours, fonts, sizes, shadows or animations are touched.
   ============================================================ */

/* ------------------------------------------------------------
   1. BUTTONS — true vertical centring
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Modern browsers: trim the empty line-box space so the box hugs
   the capital letters exactly (cap-height → baseline). Equal
   padding then means truly equal space above and below.
   padding-block is re-stated in em so every button keeps the
   same visual height it has today. */
@supports (text-box: trim-both cap alphabetic){
  .btn,
  .master-btn,
  .book-btn{
    text-box: trim-both cap alphabetic;
    line-height:1;
    padding-block:1.07em;
  }
}

/* Older browsers: a 1px optical nudge, no layout change */
@supports not (text-box: trim-both cap alphabetic){
  .cta-row .btn,
  .about-cta .btn,
  .hero .btn{
    padding-top:9px;
    padding-bottom:11px;
  }
}

/* icon inside a button never stretches or shifts the label */
.btn .btn-ico,
.btn svg{flex:0 0 auto;align-self:center}

/* two buttons side by side share one centre line even if one has
   a border and the other does not */
.cta-row{align-items:center;row-gap:12px}

/* ------------------------------------------------------------
   2. HERO — equal breathing room above and below the button row
   ------------------------------------------------------------ */
.hero .hero-sub{margin-bottom:26px}
.hero .cta-row{margin-bottom:26px}
.hero .socials{align-items:center}

/* ------------------------------------------------------------
   3. SECTION HEADINGS — balanced vertical rhythm
   was: eyebrow 16px → basmala 10px → NAME → 14px + 52px = 66px
   now: eyebrow 14px → basmala 14px → NAME → balanced gap
   ------------------------------------------------------------ */
.section-head{margin-bottom:42px}
.section-head .eyebrow{margin-bottom:14px}
.section-head .basmala{margin:0 0 14px}
.section-head h2{margin-bottom:14px}
.section-head > :last-child{margin-bottom:0}

/* About: the name and the paragraph card belong together, so the
   gap under the heading is tightened instead of towering over it */
#about .section-head{margin-bottom:30px}
#about .about-cta{margin-top:26px}

/* ------------------------------------------------------------
   4. HEADINGS THAT SIT OUTSIDE .section-head
   A few blocks (learn-quran: "Why the Quran Matters", "Begin Your
   Quran Journey Today", and the blogs page H1) use .section-title
   / .section-sub directly, without the .section-head wrapper.
   They get exactly the same vertical rhythm so no section is
   left behind.
   ------------------------------------------------------------ */
.section-title{margin-bottom:14px}
.section-title + .section-sub{margin-top:0}
.eyebrow + .section-title{margin-top:0}

/* eyebrow above a standalone title matches the 14px rhythm */
.eyebrow:has(+ .section-title){margin-bottom:14px}
.eyebrow:has(+ h1.section-title),
.eyebrow:has(+ h2.section-title){margin-bottom:14px}

/* a heading that is the last thing in its block never leaves a
   dangling bottom margin */
.section-head > :last-child,
.section-sub:last-child{margin-bottom:0}