/*
Theme Name: Bay Area Muslim Community
Version: 35.0
Author: CK
*/
body { margin:0; font-family: Arial, sans-serif; }

.hero-location { display:flex; gap:40px; align-items:center; padding:60px; background-size:cover; background-position:center; }
.hero-left img { max-width:220px; height:auto; display:block; }
.hero-card { padding:28px; border-radius:14px; max-width:520px; }

.announcement { display:flex; gap:30px; padding:60px; }
.announcement-card { flex:1; padding:28px; border-radius:14px; }
.announcement-card img { width:120px; height:120px; border-radius:50%; object-fit:cover; display:block; margin-bottom:14px; }

.audio-section { display:flex; gap:30px; padding:60px; }
.audio-groups { width:40%; }
.audio-player { width:60%; }
.audio-group h3 { cursor:pointer; background:#eee; padding:10px 12px; margin:0 0 10px 0; border-radius:10px; }
.audio-list { display:none; padding:6px 6px 16px 16px; }
.audio-list a { display:block; margin:6px 0; text-decoration:none; color:inherit; }

.files-section { display:flex; gap:30px; padding:60px; }
.file-groups { width:40%; }
.file-viewer { width:60%; }
.file-group h3 { cursor:pointer; background:#eee; padding:10px 12px; margin:0 0 10px 0; border-radius:10px; }
.file-list { display:none; padding:6px 6px 16px 16px; }
.file-list a { display:block; margin:6px 0; text-decoration:none; color:inherit; }
.file-viewer iframe { width:100%; height:520px; border:1px solid #ddd; border-radius:12px; background:#fff; }

.youtube-section { display:flex; gap:30px; padding:60px; }
.youtube-list { width:40%; }
.youtube-player { width:60%; }
.youtube-list a { display:block; margin:8px 0; text-decoration:none; color:inherit; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,0.5); }
.youtube-player iframe { width:100%; height:420px; border:0; border-radius:12px; background:#000; }

.about-section { display:flex; gap:30px; padding:60px; }
.about-left { width:40%; }
.about-right { width:60%; }
.about-contact { border-radius:14px; padding:22px; }
.about-contact a { color:inherit; text-decoration:none; }
.about-card { border-radius:14px; padding:28px; }

.map-section { padding:60px; }
.map-card { border-radius:14px; overflow:hidden; border:1px solid #ddd; }
.map-card iframe { width:100%; height:420px; border:0; }

/* Fixed Menu */
.fixed-menu {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.fixed-menu-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.fixed-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 14px;
  align-items: center;
}
.fixed-menu .left { justify-content: flex-start; }
.fixed-menu .right { justify-content: flex-end; }
.fixed-menu a {
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 10px;
}
.fixed-menu a:hover { background: rgba(0,0,0,0.06); }
.menu-logo {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.65);
}
.menu-logo img { width: 100%; height: 100%; object-fit: cover; display:block; }

@media (max-width: 900px) {
  .fixed-menu-inner { grid-template-columns: 1fr; justify-items: center; }
  .fixed-menu ul { justify-content: center !important; flex-wrap: wrap; }
}

@media (max-width: 900px) {
  .hero-location, .announcement, .audio-section, .files-section, .youtube-section, .about-section { flex-direction:column; }
  .audio-groups, .audio-player, .file-groups, .file-viewer, .youtube-list, .youtube-player, .about-left, .about-right { width:100%; }
  .files-section iframe { height:420px; }
}

/* Homepage */
.home-hero {
  padding: 90px 24px;
  background-size: cover;
  background-position: center;
  text-align: center;
}
.home-hero .home-hero-inner {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: 18px;
}
.home-hero .home-logo {
  width: 140px;
  height: 140px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.7);
}
.home-hero .home-logo img { width:100%; height:100%; object-fit:cover; display:block; }
.home-hero .home-card {
  padding: 26px 28px;
  border-radius: 16px;
  max-width: 720px;
}
.locations-list {
  padding: 60px 24px;
}
.locations-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.location-tile {
  border-radius: 14px;
  padding: 18px 18px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.9);
  text-decoration: none;
  color: inherit;
  font-weight: 700;
}
.location-tile:hover { background: rgba(0,0,0,0.03); }

@media (max-width: 900px) {
  .locations-grid { grid-template-columns: 1fr; }
}

html { scroll-behavior: smooth; }

/* Admin Previews */
.lpt-preview-img{display:block;margin-top:8px;max-width:140px;max-height:140px;border-radius:12px;border:1px solid rgba(0,0,0,0.08);}
.lpt-preview-file{display:inline-block;margin-left:10px;opacity:.85;font-style:italic;}

/* Mobile burger menu */
.menu-mobile-panel{ display:none; }
.menu-mobile-panel.open{ display:block; }

.menu-burger{
  display:none;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}
.menu-burger:focus{ outline: 2px solid rgba(0,0,0,0.2); outline-offset: 2px; }

@media (max-width: 700px){
  .fixed-menu-inner{ padding: 10px 14px; }
  .fixed-menu .center{ display:none; } /* hide center logo on phone */
  .fixed-menu ul.left, .fixed-menu ul.right{ display:none; }
  .menu-burger{ display:inline-flex; justify-self:end; align-self:center; }
  .menu-mobile-panel{ display:none; padding: 10px 18px 16px 18px;
    border-top: 1px solid rgba(0,0,0,0.08);
  }
  .menu-mobile-panel.open{ display:block; }
  .menu-mobile-panel a{
    display:block;
    padding: 10px 10px;
    border-radius: 10px;
    text-decoration:none;
    color:inherit;
    font-weight:600;
  }
  .menu-mobile-panel a:hover{ background: rgba(0,0,0,0.06); }
}

@media (max-width: 700px){ .phone-left{ display:block !important; } .fixed-menu-inner{ align-items:center; } }

@media (max-width: 700px){ .announcement, .audio-section, .files-section, .youtube-section, .about-section, .map-section, .live-section{ padding: 40px 18px; } }

.menu-burger{ position:relative; }
.menu-burger span{ position:absolute; left:-9999px; }
.menu-burger::before{ content:'\2630'; font-size:20px; line-height:1; }




/* Menu layout improvements */
.fixed-menu-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
}
.fixed-menu ul.left, .fixed-menu ul.right{
  display:flex;
  gap: 14px;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
}
.fixed-menu ul.left{ justify-content: flex-end; }
.fixed-menu ul.right{ justify-content: flex-start; }
.fixed-menu .center{ display:flex; justify-content:center; }
.fixed-menu .center .menu-logo img{
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 14px;
}
@media (max-width: 900px){
  .fixed-menu-inner{ column-gap: 14px; }
  .fixed-menu ul.left, .fixed-menu ul.right{ gap: 10px; }
}
@media (max-width: 700px){
  .fixed-menu-inner{
    display:flex;
    justify-content: space-between;
    gap: 12px;
  }
  .fixed-menu .center{ display:none; }
  .fixed-menu ul.left, .fixed-menu ul.right{ display:none; }
  .phone-left{ display:block !important; }
}


/* Premium menu links */
.fixed-menu a{
  font-size: 16px;
  letter-spacing: 0.2px;
  padding: 10px 12px;
  border-radius: 12px;
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.fixed-menu a:hover{
  background: rgba(255,255,255,0.25);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}
.fixed-menu a:active{
  transform: translateY(0px);
  opacity: 0.9;
}
.fixed-menu a:focus{
  outline: 2px solid rgba(255,255,255,0.55);
  outline-offset: 2px;
}
@media (max-width: 900px){
  .fixed-menu a{ font-size: 15px; padding: 8px 10px; }
}

/* Location hero layout */
.hero-location{
  background-size: cover;
  background-position: center;
  padding: 120px 24px;
}
.hero-location .hero-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 44px;
}
.hero-left{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 100%;
}
.hero-left img{
  width: 260px;
  max-width: 100%;
  height: auto;
  display:block;
}
.hero-right{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 100%;
}
.hero-card{
  width: min(620px, 100%);
  padding: 34px;
  border-radius: 16px;
}
.hero-card h1{ margin:0 0 12px 0; }
.hero-card p{ margin:0; }

@media (max-width: 900px){
  .hero-location{ padding: 85px 18px; }
  .hero-location .hero-inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero-left{ justify-content:flex-start; min-height: auto; }
  .hero-right{ min-height: auto; }
  .hero-left img{ width: 140px; }
  .hero-card{ padding: 22px; }
}

/* Audio player controls */
.audio-controls{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.audio-btn{
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.65);
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
  font-weight: 800;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.audio-btn:hover{
  background: rgba(255,255,255,0.85);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}
.audio-btn:active{ transform: translateY(0px); }
.audio-download{
  margin-left: auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.65);
}
.audio-download:hover{
  background: rgba(255,255,255,0.85);
}
.audio-list a.is-active{
  font-weight: 800;
  text-decoration: underline;
}
@media (max-width: 700px){
  .audio-download{ margin-left: 0; }
}

/* Live section */
.live-section{
  padding: 70px 24px;
  background-size: cover;
  background-position: center;
}
.live-inner{
  max-width: 1200px;
  margin: 0 auto;
}
.live-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.live-card{
  padding: 22px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.live-card .live-img{
  width: 92px;
  height: 92px;
  border-radius: 999px;
  object-fit: cover;
  display:block;
  margin: 0 auto 14px auto;
}
.live-card h3{ margin: 0 0 10px 0; }
.live-card .live-text{ margin: 0; }

@media (max-width: 900px){
  .live-grid{ grid-template-columns: 1fr; }
}