/* ===================================================================
   LOCATION PAGES STYLESHEET
   Shared by every "online-quran-classes-<country>.html" page:
   UK, USA, Canada, Australia, UAE, Saudi Arabia, Worldwide.

   Scope: hero visual identity (.loc-hero) and the page sections below
   it (.loc-section, .loc-alt, .loc-dark, .feat-grid, trust row, etc).

   This file intentionally does NOT redeclare hero offset/typography —
   those live in css/style.css under "HERO DESIGN SYSTEM" and are
   shared by every hero on the site (home, inner pages, blog, location
   pages). Keeping them in one place prevents exactly the kind of
   conflicting/duplicated rules that caused layout bugs before.

   Load order in <head>: style.css → modal.css → location-pages.css
   (this file loads last so its rules are the most specific for the
   classes it owns, without needing !important anywhere).
=================================================================== */

/* ── Hero visual identity (offset/typography/spacing come from style.css design system) ── */
.loc-hero {
  background: linear-gradient(135deg, #0a1c16 0%, #18463c 45%, #0d2b22 100%);
  min-height: 580px;
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.loc-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23d4af37' fill-opacity='0.05'/%3E%3C/svg%3E");
}
.loc-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 20px 0 56px;
}
@media (max-width: 768px) {
  .loc-hero { min-height: 420px; }
  .loc-hero-inner { padding: 36px 0 32px; }
}
@media (max-width: 480px) {
  .loc-hero { min-height: 380px; }
}

/* ── Page sections below the hero ── */
.loc-section{padding:72px 0;}
.loc-alt{background:#f7f8f5;}
.loc-dark{background:linear-gradient(135deg,#18463c,#0d2b22);color:#fff;padding:72px 0;}
.loc-h2{font-family:var(--hero-title-font,'Poppins',sans-serif);font-size:clamp(1.55rem,2.8vw,2.1rem);font-weight:800;color:var(--primary);margin-bottom:12px;}
.loc-dark .loc-h2{color:#fff;}
.loc-sub{font-size:.92rem;color:#6b6b6b;line-height:1.7;margin-bottom:36px;}
.loc-dark .loc-sub{color:rgba(255,255,255,.7);}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.feat-card{background:#fff;border:1px solid rgba(24,70,60,.08);border-radius:16px;padding:26px 22px;box-shadow:0 2px 12px rgba(24,70,60,.05);transition:.25s;}
.feat-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(24,70,60,.1);}
.feat-ico{width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,#18463c,#1f6b5a);color:#d4af37;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:14px;}
.feat-card h4{font-size:.97rem;font-weight:700;color:var(--primary);margin-bottom:7px;}
.feat-card p{font-size:.82rem;color:#666;line-height:1.65;margin:0;}
.city-wrap{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:20px 0;}
.city-pill{background:rgba(24,70,60,.07);border:1px solid rgba(24,70,60,.12);color:var(--primary);padding:7px 16px;border-radius:18px;font-size:.82rem;font-weight:600;}
.course-tbl{width:100%;border-collapse:collapse;border-radius:14px;overflow:hidden;box-shadow:0 2px 16px rgba(24,70,60,.08);}
.course-tbl th{background:linear-gradient(135deg,#18463c,#1f6b5a);color:#fff;padding:13px 16px;font-size:.8rem;font-weight:700;text-align:left;}
.course-tbl td{padding:12px 16px;font-size:.84rem;border-bottom:1px solid rgba(24,70,60,.07);}
.course-tbl tr:hover td{background:rgba(24,70,60,.02);}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.loc-faq-item{border:1px solid rgba(24,70,60,.1);border-radius:12px;margin-bottom:10px;overflow:hidden;}
.loc-faq-q{padding:16px 20px;font-weight:700;font-size:.9rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:#fff;color:var(--primary);user-select:none;}
.loc-faq-a{display:none;padding:4px 20px 16px;font-size:.87rem;color:#555;line-height:1.7;background:#fff;}
.loc-faq-item.open .loc-faq-a{display:block;}
.trust-row{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-top:20px;}
.trust-item{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.75);font-size:.82rem;}
.trust-item i{color:#d4af37;}
@media(max-width:992px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){.feat-grid{grid-template-columns:1fr;}.loc-section{padding:52px 0;}.loc-cta-band{padding:36px 20px;}}