/* ZAFEMU Islamic Calendar page */
.islamic-calendar-page{background:#f4f7f4;color:#20362c;min-height:70vh}
.calendar-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#073b2c,#0c6248 65%,#14775a);color:#fff;padding:64px 22px 72px;text-align:center}
.calendar-hero:before,.calendar-hero:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%;width:330px;height:330px;top:-175px}
.calendar-hero:before{left:-85px}.calendar-hero:after{right:-85px;top:auto;bottom:-230px;width:420px;height:420px}
.calendar-hero-content{position:relative;z-index:1;max-width:800px;margin:auto}
.calendar-hero .eyebrow{color:#d7e9a8}
.calendar-hero h1{font-size:clamp(34px,5vw,56px);margin:12px 0;font-weight:800}
.calendar-hero p{margin:0 auto;max-width:620px;line-height:1.7;color:#e5f0e9}
.calendar-wrap{max-width:1200px;margin:-28px auto 0;padding:0 20px 60px;position:relative;z-index:2}
.today-card,.month-card,.announcement-card,.info-card{background:#fff;border:1px solid #e2ebe4;border-radius:18px;box-shadow:0 12px 32px rgba(19,62,43,.07)}
.today-card{display:flex;align-items:center;gap:22px;padding:27px 30px;margin-bottom:26px}
.today-icon{width:68px;height:68px;flex-shrink:0;display:grid;place-items:center;border-radius:18px;background:#e6f3e9;color:#08714e;font-size:30px}
.today-copy{flex:1;min-width:0}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.5px}.dark-eyebrow{color:#147653}
.today-copy h2{font-size:clamp(23px,3vw,34px);margin:7px 0;color:#103e2e}.today-copy p{margin:0;color:#617267}
.date-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:13px;font-size:12px;color:#53685c}
.status-pill{background:#fff5dc;color:#856019;padding:7px 10px;border-radius:30px}
.sunset-box{background:#f4f8f4;border-radius:14px;padding:16px 18px;min-width:175px;display:flex;flex-direction:column;gap:7px}
.sunset-box span{font-size:12px;color:#5b7064}.sunset-box strong{font-size:25px;color:#0b6548}.sunset-box small{font-size:11px;color:#718075}
.calendar-grid-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:24px;align-items:start}
.month-card{padding:26px}.month-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:23px}
.month-heading h2{font-size:25px;margin:7px 0;color:#103e2e}.month-heading p{margin:0;font-size:13px;color:#6b7b70}
.calendar-controls{display:flex;gap:8px}.calendar-controls button{height:39px;width:39px;border:1px solid #dbe7dd;border-radius:10px;background:#fff;color:#0b6749;cursor:pointer}.calendar-controls button:hover{background:#e8f4eb}
.weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.weekdays span{text-align:center;font-size:11px;font-weight:800;color:#77867b;padding:9px 0}
.calendar-day{min-height:77px;border:1px solid #edf1ed;border-radius:10px;padding:9px 7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#fff}
.calendar-day.event-day{position:relative}
.calendar-day.event-gold{background:#fff8e8;border-color:#ead39a}.calendar-day.event-green{background:#eaf6ed;border-color:#a7cfb2}.calendar-day.event-blue{background:#edf5fc;border-color:#adc9e3}.calendar-day.event-rose{background:#fff0f0;border-color:#e5b8b8}
.calendar-day.event-day .hijri-num{color:#123f2f}.calendar-day.today.event-day{box-shadow:inset 0 0 0 1px #16805b,0 0 0 2px rgba(22,128,91,.12)}
.significant-day-markers{display:flex;gap:3px;min-height:6px}.significant-dot{width:6px;height:6px;display:inline-block;border-radius:50%}.significant-dot.gold{background:#b88920}.significant-dot.green{background:#258254}.significant-dot.blue{background:#3978ae}.significant-dot.rose{background:#bc6262}
.calendar-day .hijri-num{font-size:19px;font-weight:800;color:#174a36}.calendar-day .gregorian-num{font-size:11px;color:#87948b}
.calendar-day.outside{opacity:.4;background:#f8faf8}.calendar-day.today{border:2px solid #16805b;background:#eaf6ed}.calendar-day.sighting{box-shadow:inset 0 -3px #d9b35b}
.calendar-legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;font-size:12px;color:#69786d}.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.today-dot{background:#16805b}.sighting-dot{background:#d9b35b}
.calendar-legend .significant-dot{vertical-align:middle;margin-right:6px}
.significant-dates-panel{margin-top:24px;background:#fff;border:1px solid #e2ebe4;border-radius:18px;padding:25px 27px;box-shadow:0 12px 32px rgba(19,62,43,.06)}
.significant-dates-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.significant-dates-heading h2{font-size:23px;color:#103e2e;margin:5px 0 0}.significant-dates-badge{font-size:11px;font-weight:700;color:#557365;background:#eef5ef;border-radius:30px;padding:8px 11px;white-space:nowrap}
.significant-dates-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:11px}.significant-date-item{display:flex;align-items:flex-start;gap:13px;padding:15px;border:1px solid #e7ece7;border-left:4px solid #c29a3c;border-radius:12px;background:#fffdf8}.significant-date-item.green{border-left-color:#34845b;background:#f7fbf7}.significant-date-item.blue{border-left-color:#4b82b4;background:#f7faff}.significant-date-item.rose{border-left-color:#bd6969;background:#fff9f9}.significant-date-day{flex:0 0 auto;min-width:75px;padding:7px 8px;border-radius:8px;background:#f5eacb;color:#785d1b;font-size:11px;font-weight:800;text-align:center}.significant-date-item.green .significant-date-day{background:#e4f1e7;color:#236746}.significant-date-item.blue .significant-date-day{background:#e5eff8;color:#315f85}.significant-date-item.rose .significant-date-day{background:#f7e6e6;color:#8c4545}.significant-date-copy h3{margin:0;color:#233c30;font-size:14px}.significant-date-copy p{margin:5px 0 0;color:#66766b;font-size:12px;line-height:1.55}.significant-date-copy small{display:block;margin-top:6px;color:#87938b;font-size:10px}.significant-dates-empty{padding:16px;color:#77857a;background:#f7faf7;border-radius:10px;font-size:13px}
.calendar-note{font-size:11px;line-height:1.6;color:#859087;margin:14px 0 0}
.announcement-column{display:grid;gap:20px}.announcement-card{padding:25px}.announcement-icon{height:46px;width:46px;display:grid;place-items:center;border-radius:13px;background:#e8f4eb;color:#0b704e;font-size:20px;margin-bottom:18px}
.announcement-card h2{font-size:23px;line-height:1.3;margin:9px 0 12px;color:#103e2e}.announcement-card>p{font-size:13px;line-height:1.7;color:#68786d}
.announcement-status{display:inline-flex;align-items:center;gap:8px;background:#fff5dc;color:#87621a;border-radius:9px;padding:10px 12px;font-size:12px;font-weight:700;margin:8px 0}
.announcement-footnote{border-top:1px solid #edf1ed;padding-top:13px;margin-bottom:0!important;font-size:11px!important}
.info-card{padding:22px 24px}.info-card h3{margin:0 0 13px;color:#124a35;font-size:17px}.info-card h3 i{margin-right:7px}.info-card ul{margin:0;padding-left:19px;color:#68786d;font-size:12px;line-height:1.9}
.calendar-disclaimer{display:flex;gap:14px;background:#fff9e9;border:1px solid #f0e2b9;color:#745d22;padding:17px 20px;border-radius:13px;margin-top:24px}.calendar-disclaimer>i{font-size:21px;margin-top:3px}.calendar-disclaimer strong{font-size:13px}.calendar-disclaimer p{margin:5px 0 0;font-size:12px;line-height:1.7}
@media(max-width:850px){.calendar-grid-layout{grid-template-columns:1fr}.today-card{flex-wrap:wrap}.sunset-box{width:100%;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}.calendar-day{min-height:67px}}
@media(max-width:520px){.calendar-hero{padding:48px 18px 58px}.calendar-wrap{padding-left:12px;padding-right:12px}.today-card{padding:20px;gap:14px}.today-icon{height:52px;width:52px;font-size:23px}.today-copy{flex-basis:calc(100% - 70px)}.date-meta{align-items:flex-start;flex-direction:column}.month-card{padding:16px 10px}.month-heading{align-items:flex-start}.month-heading h2{font-size:21px}.month-heading p{font-size:11px}.calendar-controls button{width:34px;height:34px}.weekdays,.calendar-days{gap:4px}.weekdays span{font-size:10px}.calendar-day{min-height:56px;border-radius:7px;padding:5px 1px}.calendar-day .hijri-num{font-size:16px}.calendar-day .gregorian-num{font-size:10px}.announcement-card{padding:20px}}
@media(max-width:520px){.significant-dates-panel{padding:18px 14px}.significant-dates-heading{align-items:flex-start}.significant-dates-heading h2{font-size:20px}.significant-dates-badge{font-size:9px;padding:7px 8px}.significant-date-item{gap:9px;padding:12px}.significant-date-day{min-width:65px;font-size:10px}}

/* Keep significant-date color visible even when that day is also today's date. */
.calendar-day.event-day.event-gold{background:#fff1c8;border:2px solid #c39a39;color:#49370e;box-shadow:inset 0 0 0 1px rgba(195,154,57,.15)}
.calendar-day.event-day.event-green{background:#dff1e4;border:2px solid #34845b;box-shadow:inset 0 0 0 1px rgba(52,132,91,.12)}
.calendar-day.event-day.event-blue{background:#e0effb;border:2px solid #4b82b4;box-shadow:inset 0 0 0 1px rgba(75,130,180,.12)}
.calendar-day.event-day.event-rose{background:#fbe6e6;border:2px solid #bd6969;box-shadow:inset 0 0 0 1px rgba(189,105,105,.12)}
.calendar-day.event-day .hijri-num{font-weight:900}.calendar-day.event-day .gregorian-num{color:#52645a}.calendar-day.event-day .significant-day-markers{margin-top:1px}

/* Clear, evenly sized cards for the observances listed below the calendar. */
.significant-dates-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.significant-date-item{position:relative;min-height:154px;box-sizing:border-box;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 18px 16px;border:1px solid #e5eae5;border-left:1px solid #e5eae5;border-top:4px solid #c29a3c;border-radius:15px;background:linear-gradient(155deg,#fff,#fffdf7);box-shadow:0 7px 18px rgba(23,67,44,.055);transition:transform .18s ease,box-shadow .18s ease}
.significant-date-item:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(23,67,44,.10)}
.significant-date-item.green{border-top-color:#34845b;background:linear-gradient(155deg,#fff,#f6fbf7)}
.significant-date-item.blue{border-top-color:#4b82b4;background:linear-gradient(155deg,#fff,#f5f9fd)}
.significant-date-item.rose{border-top-color:#bd6969;background:linear-gradient(155deg,#fff,#fff7f7)}
.significant-date-day{display:inline-flex;align-items:center;justify-content:center;min-width:0;padding:7px 11px;border-radius:20px;background:#f5eacb;color:#785d1b;font-size:11px;letter-spacing:.2px}
.significant-date-copy h3{font-size:16px;line-height:1.35}.significant-date-copy p{font-size:13px;line-height:1.6}.significant-date-copy small{font-size:11px}
@media(max-width:850px){.significant-dates-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.significant-dates-list{grid-template-columns:1fr;gap:11px}.significant-date-item{min-height:0;padding:15px}}



/* === ZAFEMU shared navbar spacing: match the tighter Home page layout === */
header.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
header.navbar .menu,
header.navbar nav.menu,
nav#mobileMenu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(14px, 1.65vw, 30px);
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
    padding-left: 0;
}
header.navbar .menu > a,
header.navbar nav.menu > a,
nav#mobileMenu > a,
header.navbar .menu > .dropdown > a,
nav#mobileMenu > .dropdown > a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    margin: 0;
    padding: 8px 0;
    line-height: 1.25;
}
header.navbar .dropdown {
    position: relative;
    flex: 0 0 auto;
}
header.navbar .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    z-index: 1000;
}
header.navbar .logo-group,
header.navbar .logo-area {
    flex: 0 0 auto;
}
@media (max-width: 1100px) and (min-width: 769px) {
    header.navbar .menu,
    header.navbar nav.menu,
    nav#mobileMenu {
        gap: clamp(9px, 1.15vw, 16px);
    }
    header.navbar .menu > a,
    header.navbar nav.menu > a,
    nav#mobileMenu > a,
    header.navbar .menu > .dropdown > a,
    nav#mobileMenu > .dropdown > a {
        font-size: 14px;
    }
}



/* Dropdown fixes: keep menus inside viewport and make them clickable */
.navbar { position: relative; z-index: 5000; }
.navbar .dropdown { position: relative; }
.navbar .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    min-width: 190px;
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
    z-index: 10000;
    background: #fff;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.16);
    overflow: visible;
}
.navbar .dropdown-menu a {
    display: block;
    white-space: normal;
    padding: 12px 18px;
    color: #333;
    text-align: left;
    margin: 0;
}
.navbar .dropdown-menu a:hover { background: #f2f7f3; color: #0f6d3c; }
.navbar .dropdown.open > .dropdown-menu { display: block; }
@media (min-width: 901px) {
    .navbar .dropdown:hover > .dropdown-menu,
    .navbar .dropdown:focus-within > .dropdown-menu { display: block; }
}
/* Prevent Connect menu from running off the right edge */
.navbar .dropdown:last-of-type > .dropdown-menu {
    left: auto;
    right: 0;
}


/* FINAL NAV DROPDOWN FIX */
header.navbar { position:relative !important; z-index:9990 !important; overflow:visible !important; }
header.navbar nav#mobileMenu { overflow:visible !important; }
header.navbar .dropdown { position:relative !important; overflow:visible !important; }
header.navbar .dropdown > .dropdown-menu {
  display:none;
  position:absolute !important;
  top:calc(100% + 1px) !important;
  left:0 !important;
  right:auto !important;
  width:220px !important;
  min-width:220px !important;
  max-width:calc(100vw - 24px) !important;
  box-sizing:border-box !important;
  z-index:20000 !important;
  background:#fff !important;
  border-radius:0 0 12px 12px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.18) !important;
  overflow:hidden !important;
}
header.navbar .dropdown.open > .dropdown-menu { display:block !important; }
header.navbar .dropdown > .dropdown-menu a {
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:12px 18px !important;
  white-space:normal !important;
  text-align:left !important;
  color:#222 !important;
}
header.navbar .dropdown > .dropdown-menu a:hover { background:#eef6f0 !important; }
header.navbar .dropdown:has(#connectMenu) > .dropdown-menu {
  left:auto !important;
  right:0 !important;
}
@media (max-width:768px) {
  header.navbar .dropdown > .dropdown-menu {
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    box-shadow:none !important;
    border-radius:8px !important;
  }
}