/* Visual-only navigation layer for the Saudi essential guide. */
.saudi-essential-page {
  background:
    linear-gradient(90deg, #071015f3 0%, #071015df 43%, #07101591 68%, #0710154a 100%),
    url("/static/images/guide/madinah-masjid-an-nabawi-cc-by-sa-4.jpg") top center / cover fixed !important;
}

.saudi-essential-page header {
  background: #081217dc;
  border-bottom-color: #dfbf6b69;
  backdrop-filter: blur(10px);
}

.saudi-essential-page main {
  position: relative;
  padding-top: clamp(3.5rem, 8vw, 6.2rem);
}

.saudi-essential-page main > h1 {
  max-width: 890px;
  color: #fff0bd;
  text-shadow: 0 2px 28px #000d;
}

.saudi-essential-page main > .lead { max-width: 820px; color: #e0d6c5; }
.saudi-essential-page main > .eyebrow { color: #f1cf7d; }

.saudi-essential-page section {
  padding: clamp(1.3rem, 3vw, 2rem);
  border: 1px solid #dfbf6b4d;
  background: linear-gradient(135deg, #0e1b22ed, #151b16df);
  box-shadow: 0 18px 42px #00000032, inset 0 1px #ffffff0a;
  backdrop-filter: blur(5px);
}

.saudi-essential-page section.status {
  border-left: 3px solid #f1c96e;
  border-color: #e1c36e7a;
  background: linear-gradient(110deg, #253429ed, #252114e5);
}

.saudi-essential-page .notice {
  border-left-color: #f1c96e;
  background: #2b2616dd;
}

.saudi-essential-page .grid > * {
  border-color: #e0bf6a4d;
  background: linear-gradient(145deg, #122832ef, #182017e7);
  box-shadow: inset 0 1px #ffffff0a;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.saudi-essential-page .grid > * strong { color: #ffe0a0; }
.saudi-essential-page .grid > * small { color: #ded6c7; }

@media (hover: hover) {
  .saudi-essential-page .grid > *:hover {
    transform: translateY(-4px);
    border-color: #f3d781;
    box-shadow: 0 16px 31px #0008, inset 0 1px #ffffff15;
  }
}

@media (max-width: 700px) {
  .saudi-essential-page { background-attachment: scroll !important; background-position: 58% top !important; }
  .saudi-essential-page main { padding-top: 3rem; }
  .saudi-essential-page section { padding: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .saudi-essential-page .grid > * { transition: none; }
}