/* Static page styles — matches ramadan-app.html inline CSS (gold standard) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;500;600&family=Almarai:wght@300;400;700;800&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif; background: #ffffff; color: #1a1a1a; font-size: 18px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: hsl(142, 70%, 45%); color: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* Header */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(255,255,255,0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,0,0,0.08); }
.header-inner { max-width: 720px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; }
.back-link { font-size: 14px; color: #666; transition: color 0.2s; }
.back-link:hover { color: #1a1a1a; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-actions a { font-size: 14px; color: #1a1a1a; transition: color 0.2s; }
.header-actions a:hover { color: #666; }

/* Main layout */
main { max-width: 720px; margin: 0 auto; padding: 120px 24px 80px; }
article { animation: fadeUp 0.6s ease-out; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Typography */
.meta { font-size: 13px; color: #888; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 24px; }
h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 500; line-height: 1.1; margin-bottom: 24px; color: #1a1a1a; letter-spacing: -0.02em; }
.subtitle { font-size: 1.25rem; color: #555; line-height: 1.6; margin-bottom: 16px; max-width: 600px; }
.intro { color: #555; line-height: 1.7; max-width: 600px; margin-bottom: 16px; }
.body-text { color: #555; line-height: 1.7; margin-bottom: 16px; max-width: 600px; }
h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 500; margin-bottom: 16px; }
h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.125rem; font-weight: 500; color: #1a1a1a; margin-bottom: 16px; }
h4 { font-weight: 500; color: #1a1a1a; margin-bottom: 8px; }

/* Badges (App Store + website link) */
.badges { display: flex; align-items: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.badges img { height: 44px; }

/* Pill link (used in badges, CTA, more works) */
.pill-link { padding: 10px 20px; font-size: 14px; border: 1px solid rgba(0,0,0,0.12); border-radius: 999px; transition: all 0.2s; display: inline-block; }
.pill-link:hover { background: #1a1a1a; color: #ffffff; }

/* Images */
.hero-img { overflow: hidden; border-radius: 25px; background: #f5f5f5; margin-bottom: 64px; }
.hero-img img { width: 100%; height: auto; object-fit: cover; }
.case-image, .case-img { width: 100%; border-radius: 25px; overflow: hidden; margin: 64px 0; background: #f5f5f5; }
.case-image img, .case-img img { width: 100%; height: auto; display: block; object-fit: cover; }
.case-img-sq { overflow: hidden; border-radius: 25px; background: #f5f5f5; margin: 64px 0; aspect-ratio: 1/1; }
@media (min-width: 768px) { .case-img-sq { aspect-ratio: 16/9; } }
.case-img-sq img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Details grid */
.details-grid, .project-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 32px 0; border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); margin-bottom: 64px; }
.details-grid .label, .project-details .label { font-size: 13px; color: #888; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; }
.details-grid .value, .project-details .value { font-weight: 500; color: #1a1a1a; }

/* Content sections */
.content-section, .section { margin-bottom: 64px; }
.section p { color: #555; line-height: 1.7; margin-bottom: 16px; }
.section p.italic { font-style: italic; font-size: 1.125rem; }
.section p.bold { font-weight: 500; color: #1a1a1a; }
.section a, .content-section a { text-decoration: underline; text-underline-offset: 4px; transition: color 0.2s; }
.section a:hover, .content-section a:hover { color: #1a1a1a; }

/* Lists */
ul { list-style: none; padding: 0; }
ul li { color: #555; padding: 4px 0; }
ul li::before { content: "• "; color: #888; }
.section ul { list-style: disc; padding-left: 1.25rem; }
.section li::before { content: none; }

/* Feature blocks */
.feature-block { margin-bottom: 24px; }
.feature-block h4 { font-weight: 500; color: #1a1a1a; margin-bottom: 8px; }
.feature-block p { color: #555; line-height: 1.7; }

/* CTA section */
.cta-section { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 0; margin: 32px 0; border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); }
.cta-section p { font-size: 1.125rem; font-weight: 600; color: #1a1a1a; margin-bottom: 16px; }
.cta-badges { display: flex; align-items: center; gap: 16px; }

/* Legacy CTA aliases */
.cta { max-width: 600px; padding: 40px 0; border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); margin-bottom: 64px; }
.cta h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 16px; }
.cta p { color: #555; margin-bottom: 24px; }
.cta .badge { height: 48px; }
.cta-center { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 0; margin: 32px 0; border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); }
.cta-center p { font-size: 1.125rem; font-weight: 600; margin-bottom: 16px; }
.cta-center .links { display: flex; align-items: center; gap: 16px; }
.cta-center .badge { height: 44px; }
.cta-center .site-link { padding: 10px 20px; font-size: 14px; border: 1px solid rgba(0,0,0,0.12); border-radius: 999px; text-decoration: none; color: #1a1a1a; transition: all 0.2s; }
.cta-center .site-link:hover { background: #1a1a1a; color: #fff; }

/* App links */
.app-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 32px 0 64px; }
.app-links .badge { height: 40px; }
.app-links .site-link { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #666; text-decoration: none; transition: color 0.2s; }
.app-links .site-link:hover { color: #1a1a1a; }

/* More Works */
.more-works { border-top: 1px solid rgba(0,0,0,0.08); padding-top: 48px; margin-top: 48px; }
.more-works .label { font-size: 13px; color: #888; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 24px; display: block; }
.works-list { display: flex; flex-wrap: wrap; gap: 12px; }

/* Related (alias) */
.related { border-top: 1px solid rgba(0,0,0,0.08); padding-top: 48px; margin-top: 48px; }
.related .label { font-size: 13px; color: #888; letter-spacing: 0.05em; display: block; margin-bottom: 24px; }
.related-links { display: flex; flex-wrap: wrap; gap: 12px; }
.pill { padding: 10px 20px; font-size: 14px; border: 1px solid rgba(0,0,0,0.12); border-radius: 999px; text-decoration: none; color: #1a1a1a; transition: all 0.2s; display: inline-block; }
.pill:hover { background: #1a1a1a; color: #fff; }

/* Share button */
.share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 14px; font-weight: 500; background: #1a1a1a; color: #fff; border-radius: 999px; border: none; cursor: pointer; transition: opacity 0.2s; font-family: inherit; }
.share-btn:hover { opacity: 0.9; }
.share-btn svg { width: 16px; height: 16px; }

/* Responsive */
@media (max-width: 640px) {
  .details-grid, .project-details { grid-template-columns: repeat(2, 1fr); }
}

/* RTL / Arabic overrides */
[dir="rtl"] body { font-family: 'Almarai', sans-serif; direction: rtl; text-align: right; }
[dir="rtl"] h1 { font-family: 'Almarai', sans-serif; font-weight: 700; letter-spacing: 0; line-height: 1.3; font-size: clamp(1.875rem, 5vw, 3rem); }
[dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: 'Almarai', sans-serif; letter-spacing: 0; }
[dir="rtl"] .meta, [dir="rtl"] .subtitle, [dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] li { font-family: 'Almarai', sans-serif; letter-spacing: 0; }
[dir="rtl"] .section ul { padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] .back-link { direction: rtl; }