/* Original local artwork for ICLN. Decorative imagery never represents the construction site. */
:root { --art-gold:#c89b53; --art-cream:#fbf8f1; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.announcement-banner { display:flex; align-items:center; gap:12px; padding:8px 20px; min-width:0; }
.announcement-viewport { flex:1; min-width:0; }
.announcement-group { display:flex; flex-wrap:wrap; gap:4px 48px; align-items:center; }
.announcement-banner p { line-height:1.7; }
.announcement-banner a { display:inline; min-height:0; padding:4px 0; }
.announcement-toggle { flex:0 0 auto; min-width:76px; min-height:44px; padding:8px 12px; border:1px solid #af915d; border-radius:6px; background:#fff9ed; color:var(--teal); font-size:.8rem; font-weight:700; }
.announcement-toggle:hover { background:#fff; }
.announcement-banner.is-animated .announcement-viewport { overflow:hidden; }
.announcement-banner.is-animated .announcement-track { display:flex; width:max-content; animation:announcement-scroll var(--announcement-duration,48s) linear infinite; }
.announcement-banner.is-animated .announcement-group { flex:0 0 auto; flex-wrap:nowrap; min-width:calc(100vw - 120px); gap:64px; padding-inline:20px 64px; }
.announcement-banner.is-animated p { white-space:nowrap; flex:0 0 auto; }
.announcement-banner.is-paused .announcement-track,.announcement-banner:hover .announcement-track { animation-play-state:paused; }
/* Focused links are presented together so keyboard users can reach every action. */
.announcement-banner.is-focused .announcement-track { animation:none; width:auto; }
.announcement-banner.is-focused .announcement-group { min-width:0; flex-wrap:wrap; padding:4px 0; gap:8px 32px; }
.announcement-banner.is-focused p { white-space:normal; }
.announcement-banner.is-focused .announcement-group[aria-hidden="true"] { display:none; }
@keyframes announcement-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (max-width:640px) {
 .announcement-banner { padding:6px 12px; gap:8px; }
 .announcement-banner p,.announcement-banner a { font-size:.85rem; }
 .announcement-toggle { min-width:68px; padding-inline:8px; }
}
@media (prefers-reduced-motion:reduce) {
 .announcement-banner.is-animated .announcement-track { animation:none; width:auto; }
 .announcement-banner.is-animated .announcement-group { min-width:0; flex-wrap:wrap; padding:0; gap:8px; }
 .announcement-banner.is-animated p { white-space:normal; }
 .announcement-group[aria-hidden="true"],.announcement-toggle { display:none; }
}
.site-header { border-bottom:3px solid #dbc391; }
.home-hero,.page-heading { background:#062f39; }
.home-hero::before,.page-heading::before {
 content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
 background-image:linear-gradient(90deg,rgba(6,47,57,.98) 0%,rgba(6,47,57,.93) 35%,rgba(6,47,57,.76) 56%,rgba(6,47,57,.12) 100%),url('../images/artwork/teal-mihrab-wallpaper.jpg');
 background-position:center,right 54%; background-size:cover,cover; background-repeat:no-repeat;
}
.home-hero .hero-art,.page-heading .hero-art { display:none; }
.home-hero { min-height:348px; }
.hero-content { padding-block:32px; }
.hero-content .eyebrow { margin-bottom:12px; }
.hero-content h1 { margin-bottom:16px; }
.hero-content>p:not(.eyebrow) { max-width:900px; margin-bottom:0; }
.hero-content .button-row { margin-top:20px; }
.page-heading { padding-block:72px; }
.page-heading h1,.page-heading .lead { max-width:76%; }
.hero-content h1 { max-width:100%; }
.home-hero .eyebrow::before,.page-heading .eyebrow::before {
 content:""; display:inline-block; width:8px; height:8px; margin-right:12px;
 background:var(--hero-accent); transform:rotate(45deg); vertical-align:1px;
}
.hero-content h1::after,.page-heading h1::after {
 content:""; display:block; width:68px; height:3px; margin-top:26px;
 background:linear-gradient(90deg,#eac178,#eac178 70%,transparent 70%,transparent 82%,#eac178 82%);
}
.hero-content h1::after { margin-top:16px; }
.section-tint,.campaign-section,.community-panel {
 background-color:#f6f8f4;
 background-image:linear-gradient(rgba(246,248,244,.58),rgba(246,248,244,.58)),url('../images/artwork/geometric-tile.svg');
}
.card,.campaign-card { box-shadow:0 8px 28px rgba(8,62,73,.045); }
.donation-card { border-top:3px solid #d8bd88; }
.donation-card .eyebrow { color:#72501d; }
.calligraphy-band {
 position:relative; padding:40px 20px; text-align:center;
 background:var(--art-cream) url('../images/artwork/geometric-tile.svg') repeat;
 border-block:1px solid #e7d9bd; overflow:hidden;
}
.calligraphy-band::before,.calligraphy-band::after {
 content:""; display:block; height:1px; width:min(160px,35%); margin:0 auto;
 background:linear-gradient(90deg,transparent,#b58a45,transparent);
}
.calligraphy-band .arabic-calligraphy {
 display:block; color:var(--teal); font-family:'Traditional Arabic','Arabic Typesetting','Noto Naskh Arabic','Times New Roman',serif;
 font-size:clamp(1.9rem,4vw,3rem); font-weight:400; line-height:1.9; margin:14px 0 2px;
 text-wrap:balance;
}
.calligraphy-translation { margin:0 auto 20px; color:#5b604f; font-size:.82rem; max-width:36em; }
.hadith-quote { max-width:1000px; margin:22px auto; }
.hadith-intro { margin:16px 0 8px; font-size:.9rem; color:var(--teal); }
.hadith-intro-arabic { font-family:'Traditional Arabic','Arabic Typesetting','Times New Roman',serif; font-size:1.4rem; }
.hadith-quote .arabic-calligraphy { margin:8px auto 20px; }
.hadith-quote .calligraphy-translation { max-width:52em; font-size:1.02rem; color:var(--ink); line-height:1.85; }
.hadith-source { font-size:.8rem; }
.hadith-source a { display:inline-block; min-height:44px; padding:8px 4px; }
.site-footer {
 background-image:linear-gradient(rgba(8,62,73,.94),rgba(8,62,73,.94)),url('../images/artwork/geometric-tile.svg');
}
@media (max-width:900px) {
 .home-hero { min-height:0; }
 .hero-content { padding-block:32px; }
 .page-heading { padding-block:56px; }
 .page-heading h1,.page-heading .lead { max-width:85%; }
 .home-hero::before,.page-heading::before {
  background-image:linear-gradient(90deg,rgba(6,47,57,.97),rgba(6,47,57,.88) 62%,rgba(6,47,57,.5)),url('../images/artwork/teal-mihrab-wallpaper.jpg');
 }
}
@media (max-width:640px) {
 .home-hero { min-height:0; }
 .hero-content { padding-block:32px; }
 .page-heading { padding-block:42px; }
 .page-heading h1,.page-heading .lead { max-width:100%; }
 .home-hero::before,.page-heading::before {
  background-image:linear-gradient(90deg,rgba(6,47,57,.97),rgba(6,47,57,.9) 65%,rgba(6,47,57,.78)),url('../images/artwork/teal-mihrab-wallpaper.jpg');
  background-position:center,75% center;
 }
 .hero-content h1::after,.page-heading h1::after { margin-top:22px; width:56px; }
 .calligraphy-band { padding:28px 18px; }
 .calligraphy-band .arabic-calligraphy { font-size:clamp(1.65rem,7vw,2.4rem); line-height:2; }
 .calligraphy-translation { font-size:.78rem; }
}
@media print {
 .home-hero,.page-heading { background:#fff; }
 .home-hero::before,.page-heading::before,.calligraphy-band { display:none; }
 .section-tint,.campaign-section,.community-panel { background:#fff; }
 .card,.campaign-card { box-shadow:none; }
}