/* Decorative video has an always-visible image underneath, including when autoplay is blocked. */
.logo-mark{position:relative;display:block;flex:none;width:120px;height:120px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(243,220,152,.7),0 0 36px rgba(227,185,85,.5)}
.logo-mark .logo-vid,.logo-mark .logo-fallback{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;box-shadow:none;pointer-events:none}
.logo-mark .logo-vid{opacity:0}
.logo-mark.is-playing .logo-vid{opacity:1}
@media(max-width:720px){.logo-mark{width:96px;height:96px}}
@media(max-width:640px){.logo-mark{width:68px;height:68px}}
/* Keep the logo on the left and both contact details together on mobile. */
@media(max-width:640px){
  header.top .top-row{display:grid;grid-template-columns:68px minmax(0,.9fr) minmax(0,1.1fr);gap:6px 8px;align-items:center;direction:ltr}
  header.top .top-row>a{grid-column:1;grid-row:1/4;align-self:center}
  header.top .contacts{display:contents}
  header.top .contacts>.contact-link{grid-row:1;min-width:0;min-height:44px;gap:0;position:relative;padding-top:16px;align-items:flex-start}
  header.top .contacts>.contact-link:first-child{grid-column:2}
  header.top .contacts>.contact-link:nth-child(2){grid-column:3}
  header.top .contact-link>span:last-child{min-width:0}
  header.top .contact-link .ic{position:absolute;top:0;left:0;width:14px;height:14px}
  header.top .contact-link .ic svg{width:10px;height:10px}
  header.top .contact-link small{position:absolute;top:0;left:18px;font-size:10px;line-height:14px}
  header.top .contact-link strong{font-size:11.5px;line-height:1.35;white-space:normal;overflow-wrap:anywhere;direction:ltr}
  header.top .contacts>.dd{grid-column:2/4;grid-row:2;justify-self:start}
  header.top .contacts>.top-btns{grid-column:2/4;grid-row:3;margin:0;min-width:0}
  header.top .contacts>.top-btns a{flex:1;min-width:0;min-height:44px;padding:4px 8px;font-size:12.5px;line-height:1.25;white-space:normal;overflow-wrap:normal;text-align:center}
  header.top .contacts .top-login svg{flex:none;width:16px;height:16px}
}
@media(max-width:360px){
  header.top .top-row{grid-template-columns:48px minmax(0,.85fr) minmax(0,1.15fr);column-gap:6px}
  header.top .logo-mark{width:48px;height:48px}
  header.top .contact-link strong{font-size:11px}
  header.top .contacts>.top-btns a{padding-inline:6px;font-size:12px}
}
/* The mobile schedule is permanently visible in its own compact row. */
@media(max-width:900px){
  .under-menu{display:block;min-height:0}
  .under-menu>.prayer-toggle,.under-menu .prayer-dismiss{display:none!important}
  .under-menu>.prayer-widget,.under-menu.is-prayer-open>.prayer-widget{display:block;position:relative;top:auto;left:auto;width:100%;max-height:none;overflow:visible}
  .under-menu>.live-strip{position:absolute;top:4px;inset-inline-end:0;margin:0;z-index:9}
  .under-menu .live-open{max-width:200px}
  .under-menu .live-txt{text-align:center;white-space:normal}
  .under-menu .prayer-next,.under-menu.is-prayer-open .prayer-next{min-width:96px;max-width:calc(100% - 210px);padding:0 0 8px;backdrop-filter:none;border-radius:0}
  .under-menu .prayer-next>span{font-size:11px;min-height:16px}
  .under-menu .prayer-next strong{font-size:26px;line-height:1.1}
  .under-menu .prayer-card{padding:9px 12px 7px}
  .under-menu .prayer-place{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;margin-bottom:5px}
  .under-menu .prayer-eyebrow{font-size:10px;letter-spacing:.06em;flex:none}
  .under-menu .prayer-location{width:auto;min-width:0;min-height:20px;gap:4px;font-size:11px}
  .under-menu .prayer-location svg{width:12px;height:12px}
  .under-menu .prayer-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 8px;margin:0 0 5px}
  .under-menu .prayer-times li{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;text-align:center;padding:3px 0 4px;min-width:0}
  .under-menu .prayer-times li>span{font-size:11px;line-height:1.2;overflow-wrap:anywhere}
  .under-menu .prayer-times time{font-size:14px}
  .under-menu .prayer-meta{font-size:10px}
  .under-menu .prayer-status{font-size:11px}
}
@media(max-width:420px){.under-menu .prayer-next strong{font-size:24px}}
@media(max-width:380px){.under-menu .prayer-next{max-width:calc(100% - 154px)}.under-menu .prayer-place{align-items:flex-start}.under-menu .prayer-location{font-size:10.5px}}