/* Local colour proposal. The logo and source photographs remain unchanged.
   #0187e0 is the most frequent opaque blue pixel sampled from the official logo.
   Text buttons use a darker derivative for accessible white lettering. */
.home-top{--oase-logo-blue:#0187e0;--oase-action-blue:#0075c3;--oase-deep-blue:#103f64;--green:var(--oase-action-blue);--green-dark:#005fa3;--brand-blue:var(--oase-logo-blue);--brand-blue-soft:#edf6fd;--sand:#eff6fc}
.home-top .site-header::before{background:linear-gradient(180deg,rgba(6,31,50,.96),rgba(6,31,50,.88) 70%,rgba(6,31,50,0))}
.home-top .main-nav>a,.home-top .nav-dropdown>button,.home-top .language-button{text-shadow:0 1px 3px #082d48}
.home-top .oase-welcome{background:var(--oase-deep-blue)}
.home-top .oase-welcome__stage{background:var(--oase-deep-blue)}
.home-top .oase-welcome__stage::before{content:none;display:none;background:none;mask-image:none}
.home-top .oase-welcome__copy>.eyebrow{text-shadow:0 1px 4px #103f64}
.home-top .oase-welcome__copy h1{text-shadow:0 2px 15px #082d4888}
.home-top .oase-welcome__prayers{background:#082e4b}
.home-top .hero-prayer-bar{background:rgba(6,39,66,.90)}
.home-top .hero-prayer-meta p{color:#f3f7fb}
.home-top .hero-prayer-meta small,.home-top .hero-prayer-source{color:#d6e5f2}
.home-top .hero-prayer-adhan small,.home-top .hero-prayer-bottom{color:#e1ebf4}
.home-top .oe-copy h2,.home-top .oe-copy h2 em,.home-top .oe-discover .oe-offers-heading h3,.home-top .oe-discover .oe-offer h4{color:#143b5a}
.home-top .oe-community-link{background:var(--oase-action-blue);border-color:var(--oase-action-blue)}
.home-top .oe-discover::before{background:linear-gradient(180deg,#f2f8fd 0%,#dbedfb 18%,#dbedfb 85%,#eaf4fc 100%)}
.home-top .oe-discover .oe-offer-icon{color:var(--oase-logo-blue)}
.home-top .oe-discover .oe-offers-heading>p,.home-top .oe-discover .oe-offer p{color:#365674}
.home-top .home-membership-surface .membership-emphasis{color:var(--oase-logo-blue)}
.home-top .oe-discover .oe-offer-link:focus-visible,.home-top .oe-community-link:focus-visible{outline-color:var(--oase-action-blue)}
@media(hover:hover){
 .home-top .oe-community-link:hover{background:#005fa3;border-color:#005fa3}
 .home-top .oe-discover .oe-offer-link:hover{color:#006bad}
 .home-top .oe-discover .oe-offer-link:hover::after{background:#006bad}
}
/* Story: two aligned columns with a straight image edge and a quiet gap.
   The original photograph is shown at its natural ratio, including the entrance
   and forecourt. The existing stacked mobile presentation is unchanged. */
@media(min-width:851px){
 .home-top .oe-story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,2.8vw,40px);align-items:center;min-height:0;padding-block:36px}
 .home-top .oe-copy{width:100%;max-width:none;padding:0}
 .home-top .oe-photo{position:relative;inset:auto;width:100%;height:auto;max-width:none;margin:0}
 .home-top .oe-image-frame{height:auto;aspect-ratio:1369/1149;clip-path:none;mask-image:none;border-radius:0}
 .home-top .oe-image-frame img{object-position:center;object-fit:cover}
 .home-top .oe-photo figcaption{right:12px;bottom:12px}
}
/* Preserve the existing light navigation after scrolling. */
.home-top .site-header.header-solid::before{background:none}
.home-top .site-header.header-solid .main-nav>a,.home-top .site-header.header-solid .nav-dropdown>button,.home-top .site-header.header-solid .language-button{text-shadow:none}

/* Mobile footer refinement. */
@media(max-width:700px){
 .home-top .footer{padding-top:32px}
 .home-top .footer-grid{gap:28px 20px}
 .home-top .footer h3{font-size:15px;line-height:1.4;margin-bottom:12px}
 .home-top .footer-about p{font-size:14px;line-height:1.75}
 .home-top .footer li{font-size:14px;line-height:1.65;margin-bottom:0}
 .home-top .footer li a{display:inline-flex;align-items:center;min-height:44px;width:100%;padding:8px 0;line-height:1.5}
 .home-top .footer-contact li:last-child{align-items:center}
 .home-top .footer-contact li:last-child svg{margin-top:0}
 .home-top .footer-bottom{font-size:11px;line-height:1.7;gap:6px}
 .home-top .footer-bottom>div{align-items:center;gap:4px 20px}
 .home-top .footer-bottom a{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
}

/* Separate photograph and welcome band with a straight edge. Reserve viewport
   space for the welcome and prayer bands, without a blue layer over the photo. */
.home-top .oase-welcome__copy>.eyebrow{font-size:16px;line-height:1.5;font-weight:600;letter-spacing:.1em;color:#f3d69f;margin-bottom:14px;text-shadow:none}
.home-top .oase-welcome__stage{height:auto}
.home-top .oase-welcome__inner{height:auto;display:block;padding-top:22px;padding-bottom:26px}
@media(min-width:701px){
 .home-top .oase-welcome__stage{--hero-photo-stage:clamp(400px,calc(100svh - 286px),680px);padding-top:var(--hero-photo-stage)}
 .home-top .oase-welcome__photo{height:calc(var(--hero-photo-stage) - 60px);object-position:center 25%}
}
@media(min-width:701px) and (max-width:999px){
 .home-top .oase-welcome__stage{--hero-photo-stage:clamp(340px,calc(100svh - 350px),620px)}
}
/* Use the available desktop width; keep the two-line mobile headline. */
@media(min-width:1000px){
 .home-top .oase-welcome__inner{padding-top:18px;padding-bottom:20px}
 .home-top .oase-welcome__copy{width:100%;max-width:none}
 .home-top .oase-welcome__copy>.eyebrow{margin-bottom:10px}
 .home-top .oase-welcome__copy h1{max-width:none}
 .home-top .oase-welcome__copy h1 br{display:none}
}
@media(max-width:700px){
 .home-top .oase-welcome__stage{padding-top:calc(80px + 100vw * 30 / 39)}
 .home-top .oase-welcome__inner{padding-top:20px;padding-bottom:24px}
 .home-top .oase-welcome__copy>.eyebrow{font-size:14px;margin-bottom:12px}
}

/* Warm homepage direction approved on 27 October 2026. */
.home-top{--oase-warm-white:#fdfbf7;--oase-warm-cream:#f8f3e9;--oase-ink:#143b5a;--oase-readable-gold:#8c6325;background:var(--oase-warm-white)}
.home-top .oase-welcome,.home-top .oase-welcome__stage{background:var(--oase-warm-cream);color:var(--oase-ink)}
.home-top .oase-welcome__copy h1{color:var(--oase-ink);text-shadow:none;margin:0;max-width:none}
.home-top .oase-welcome__intro{font-size:17px;line-height:1.65;color:#405d70;max-width:950px;margin:10px 0 0}
.home-top .oase-welcome__copy{width:100%;max-width:none}
.home-top .oase-welcome__prayers{background:#fffdf9}
.home-top .hero-prayer-bar{background:#fffdf9;color:var(--oase-ink);border-top:1px solid #dfd4bf;border-bottom:1px solid #e8e1d6;backdrop-filter:none;-webkit-backdrop-filter:none}
.home-top .hero-prayer-meta h2,.home-top .hero-prayer-name,.home-top .hero-prayer-adhan strong{color:var(--oase-ink)}
.home-top .hero-prayer-meta p,.home-top .hero-prayer-meta small,.home-top .hero-prayer-source,.home-top .hero-prayer-adhan small{color:#486174}
.home-top .hero-prayer-item{border-left-color:#e4ded3}
.home-top .hero-prayer-item.is-next{background:#f8efd9;box-shadow:inset 0 2px #a67a2e}
.home-top .hero-next-dot{background:#916325}
.home-top .hero-tomorrow,.home-top .hero-prayer-pending,.home-top .hero-prayer-status>span:first-child{color:var(--oase-readable-gold)}
.home-top .hero-prayer-bottom{color:#486174;border-top-color:#e5ddd0}
.home-top .hero-prayer-bottom a{color:#20516f}
.home-top .hero-prayer-bottom a:hover{color:#0075c3}
.home-top .hero-prayer-bottom a:focus-visible{outline-color:#8c6325}
.home-top #mehr-als-moschee.oe-section{background:var(--oase-warm-white)}
.home-top .oe-story.oe-story--balanced{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;min-height:0;padding-block:40px}
.home-top .oe-story-heading{margin-bottom:22px}
.home-top .oe-story-heading>.eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:14px;color:var(--oase-readable-gold)}
.home-top .oe-story-heading h2{font-family:var(--serif);font-size:clamp(36px,3.1vw,44px);font-weight:400;line-height:1.14;letter-spacing:-.035em;margin:0;color:var(--oase-ink)}
.home-top .oe-story-heading h2 em{display:inline;font-style:normal;color:inherit}
.home-top .oe-story--balanced .oe-photo{grid-column:2;grid-row:1;position:relative;inset:auto;margin:0;width:100%;max-width:540px;height:auto;justify-self:end}
.home-top .oe-story--balanced .oe-image-frame{height:auto;aspect-ratio:1369/1149;clip-path:none;mask-image:none;border-radius:8px}
.home-top .oe-story--balanced .oe-image-frame img{object-position:center;object-fit:cover}
.home-top .oe-story--balanced .oe-photo figcaption{bottom:12px;right:12px;font-size:11px;background:rgba(253,251,247,.94);color:#425a69}
.home-top .oe-story--balanced .oe-copy{grid-column:1;grid-row:1;width:100%;max-width:none;padding:0}
.home-top .oe-story--balanced .oe-prose{max-width:540px}
.home-top .oe-story--balanced .oe-prose p{font-size:16px;line-height:1.75}
.home-top .oe-story--balanced .oe-prose p:first-child{font-size:18px;line-height:1.6;color:var(--oase-ink)}
.home-top .oe-story--balanced .oe-prose p+p{margin-top:16px}
.home-top .oe-discover::before{background:linear-gradient(180deg,#f2f7fa 0%,#edf5f9 55%,#f3f8fa 100%)}
.home-top .oe-discover .oe-offer p,.home-top .oe-discover .oe-offers-heading>p{color:#405d70}
.home-top .home-membership-surface{background:linear-gradient(110deg,#fcf8ef 0%,#f8f0df 100%);border-top-color:#e7dcc7}
.home-top .footer{background:var(--oase-warm-white)}
.home-top .footer h3{font-size:16px;line-height:1.5;margin-bottom:12px}
.home-top .footer-about p,.home-top .footer li{font-size:14px;line-height:1.7;color:#486174}
.home-top .footer li a{display:inline-flex;align-items:center;min-height:36px;padding:5px 0;line-height:1.5}
.home-top .footer-bottom{font-size:12px;line-height:1.7;color:#536977}
.home-top .footer-bottom a{font-size:12px;display:inline-flex;align-items:center;min-height:36px}
@media(min-width:851px) and (max-width:1100px){
 .home-top .oe-story.oe-story--balanced{gap:32px}
 .home-top .oe-story-heading h2{font-size:38px}
}
@media(max-width:850px){
 .home-top .oe-story.oe-story--balanced{grid-template-columns:1fr;gap:26px;padding-block:32px}
 .home-top .oe-story--balanced .oe-photo{grid-column:1;grid-row:2;max-width:620px;justify-self:center}
 .home-top .oe-story--balanced .oe-copy{grid-column:1;grid-row:1}
 .home-top .oe-story-heading h2{font-size:40px}
 .home-top .oe-story--balanced .oe-prose{max-width:none}
}
@media(max-width:700px){
 .home-top .oase-welcome__intro{font-size:16px;line-height:1.6;margin-top:12px}
 .home-top .footer li a,.home-top .footer-bottom a{min-height:44px}
}
@media(max-width:600px){
 .home-top .oe-story-heading h2{font-size:36px;line-height:1.15}
 .home-top .oe-story-heading>.eyebrow{font-size:10px}
 .home-top .oe-discover .oe-offers-heading>p,.home-top .oe-discover .oe-offer p,.home-top .oe-discover .oe-offer-link{font-size:14px}
}