/* Shared look for the preview site pages: colours, the spacing scale, buttons, the morning
   sky (header) and the evening garden (footer). Each page adds its own layout on top. */

@font-face {
  font-family: "Nunito Black";
  src: url("fonts/nunito-black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  /* Colours */
  --ink: #2a2140;
  --ink-soft: #4a4163;
  --muted: #776e8e;
  --paper: #fff8ee;
  --card: #ffffff;
  --line: #f1e6d3;
  --orange: #f4841f;
  --orange-deep: #d9690a;
  --pink: #ec4b8a;
  --grass: #86c968;

  /* Spacing scale: use these, not one-off values */
  --space-section: 112px; /* between sections */
  --space-heading: 12px; /* section heading to its intro text */
  --space-intro: 40px; /* intro text to the section's content */
  --space-block: 40px; /* between blocks inside a section */
  --space-card-gap: 28px; /* between cards in a row */
  --space-card-pad: 28px; /* inside cards */
  --space-list: 10px; /* between list items in a card */

  --page-max: 1180px;
  --gutter: 24px;
  --text-max: 720px;
  --radius-card: 22px;

  --shadow-sm: 0 2px 0 rgba(84, 55, 20, 0.06), 0 6px 16px rgba(84, 55, 20, 0.08);
  --shadow-lg: 0 4px 0 rgba(84, 55, 20, 0.06), 0 18px 36px rgba(84, 55, 20, 0.15);
  --display: "Nunito Black", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --body: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
@media (max-width: 600px) {
  :root {
    --space-section: 72px;
    --space-intro: 28px;
    --space-block: 28px;
    --space-card-gap: 18px;
    --space-card-pad: 20px;
    --gutter: 16px;
  }
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: var(--paper);
  overflow-x: clip;
}
body {
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
}
code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: rgba(42, 33, 64, 0.06);
  padding: 1px 6px;
  border-radius: 6px;
  overflow-wrap: anywhere;
}
p {
  max-width: var(--text-max);
}

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap.first {
  padding-top: var(--space-block);
}
.section {
  padding-top: var(--space-section);
  scroll-margin-top: 24px;
}
.wrap.first + .section {
  padding-top: calc(var(--space-section) * 0.6);
}
.section > h2,
.section-title {
  font: 900 clamp(26px, 3.2vw, 32px) / 1.2 var(--display);
  margin: 0 0 var(--space-heading);
}
.section-lead {
  color: var(--muted);
  font-size: 17px;
  margin: 0 0 var(--space-intro);
}
.lead {
  font-size: 18px;
  max-width: 520px;
  margin: 0;
  color: var(--ink-soft);
}

/* Doodles on warm paper behind the content */
.doodles {
  position: relative;
  overflow-x: clip;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='M40 52l5 10 11 1-8 8 2 11-10-5-10 5 2-11-8-8 11-1z' stroke='%23f6b56d' opacity='.42'/%3E%3Cpath d='M236 40a16 16 0 1 0 14 24 13 13 0 1 1-14-24z' stroke='%23a99cf0' opacity='.42'/%3E%3Ccircle cx='160' cy='150' r='6' stroke='%2389cf6b' opacity='.48'/%3E%3Cpath d='M250 200c8-8 16 8 24 0s16 8 24 0' stroke='%23f39bbd' opacity='.42'/%3E%3Cpath d='M70 230l4 8 9 1-7 6 2 9-8-4-8 4 2-9-7-6 9-1z' stroke='%23a99cf0' opacity='.38'/%3E%3Ccircle cx='290' cy='110' r='4' stroke='%23f6b56d' opacity='.48'/%3E%3Cpath d='M120 290c6-6 12 6 18 0s12 6 18 0' stroke='%2389cf6b' opacity='.42'/%3E%3Ccircle cx='24' cy='150' r='3' stroke='%23f39bbd' opacity='.48'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.doodles::before,
.doodles::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.doodles::before {
  width: 520px;
  height: 520px;
  left: -200px;
  top: 300px;
  background: rgba(137, 207, 107, 0.16);
}
.doodles::after {
  width: 560px;
  height: 560px;
  right: -220px;
  bottom: 160px;
  background: rgba(153, 140, 240, 0.14);
}
.doodles > * {
  position: relative;
  z-index: 1;
}

/* Buttons and tags */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 900 18px var(--display);
  color: #fff;
  background: var(--orange);
  border: 0;
  border-radius: 999px;
  padding: 14px 26px 14px 22px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--orange-deep);
  transition: transform 0.12s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--orange-deep);
}
.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.btn.light {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 5px 0 #4f9a35;
}
.btn.light svg {
  color: var(--orange);
}
.btn.ghost {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  box-shadow: 0 5px 0 #5aa63f;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.tag img {
  width: 28px;
  height: 28px;
}

/* ---------- Morning sky (headers) ---------- */
.sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sun {
  position: absolute;
  top: 6px;
  right: 2.5%;
  width: 156px;
  height: 156px;
  overflow: visible;
  animation: sun-bob 5s ease-in-out infinite;
}
#sun .rays {
  transform-origin: 100px 100px;
  animation: spin 40s linear infinite;
}
.cloud {
  position: absolute;
  width: 170px;
  height: 94px;
  overflow: visible;
  animation: float-x 26s ease-in-out infinite alternate;
}
.cloud.a {
  top: 36px;
  left: 1.5%;
}
.cloud.b {
  top: 150px;
  left: 43%;
  width: 120px;
  height: 66px;
  opacity: 0.9;
  animation-duration: 34s;
}
.cloud.c {
  top: 26px;
  left: 60%;
  width: 100px;
  height: 55px;
  opacity: 0.85;
  animation-duration: 30s;
}
.hills {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 210px;
}
.hills.front {
  z-index: 3;
  height: 120px;
}
.masjid {
  position: absolute;
  width: 100px;
  height: 84px;
}
.m-hero {
  left: 70%;
  bottom: 66px;
  fill: #a5d98b;
}

/* ---------- Evening garden (footers) ---------- */
.dusk-footer {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-section);
  background: linear-gradient(
    180deg,
    var(--paper) 0%,
    #f7dcd8 7%,
    #b9a9ec 20%,
    #8e88de 38%,
    #a693e2 52%,
    #f0a9c4 70%,
    #ffc8a8 86%,
    #ffd9b0 100%
  );
}
.dusk {
  position: relative;
  height: 440px;
}
.moon {
  position: absolute;
  top: 92px;
  left: 11%;
  width: 116px;
  height: 116px;
  animation: sun-bob 6s ease-in-out infinite;
}
.star {
  position: absolute;
  width: 16px;
  height: 16px;
  fill: #fff7d6;
  animation: twinkle 3s ease-in-out infinite;
}
.star.st1 {
  top: 96px;
  left: 26%;
}
.star.st2 {
  top: 176px;
  left: 36%;
  width: 11px;
  height: 11px;
  animation-delay: -1s;
}
.star.st3 {
  top: 110px;
  left: 52%;
  width: 12px;
  height: 12px;
  animation-delay: -2.2s;
}
.star.st4 {
  top: 150px;
  right: 33%;
  animation-delay: -0.6s;
}
.star.st5 {
  top: 86px;
  right: 12%;
  width: 20px;
  height: 20px;
  animation-delay: -1.6s;
}
.star.st6 {
  top: 196px;
  right: 5%;
  width: 10px;
  height: 10px;
  animation-delay: -2.6s;
}
.dcloud {
  position: absolute;
  width: 160px;
  height: 88px;
  overflow: visible;
  opacity: 0.95;
  animation: float-x 30s ease-in-out infinite alternate;
}
.dcloud.d1 {
  top: 190px;
  left: 20%;
}
.dcloud.d2 {
  top: 130px;
  right: 22%;
  width: 116px;
  height: 64px;
  animation-duration: 38s;
}
.dusk .layer {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: -1px;
}
.dusk .layer.far {
  height: 230px;
}
.dusk .layer.mid {
  height: 200px;
}
.dusk .layer.near {
  height: 110px;
  z-index: 3;
}
.m-foot {
  left: 14%;
  bottom: 96px;
  width: 112px;
  height: 94px;
}
.footer-duri {
  position: absolute;
  z-index: 2;
  right: 13%;
  bottom: 36px;
  width: 150px;
  transform-origin: 50% 100%;
  animation: sway 4.5s ease-in-out infinite;
}
.firefly {
  position: absolute;
  z-index: 4;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff6a8;
  box-shadow: 0 0 10px 4px rgba(255, 240, 150, 0.6);
  animation: drift 7s ease-in-out infinite;
}
.firefly.f1 {
  left: 30%;
  bottom: 120px;
}
.firefly.f2 {
  left: 46%;
  bottom: 160px;
  animation-delay: -2s;
}
.firefly.f3 {
  right: 32%;
  bottom: 130px;
  animation-delay: -4s;
}
.firefly.f4 {
  right: 8%;
  bottom: 190px;
  animation-delay: -5.5s;
}
.ground {
  background: var(--grass);
  padding: 0 var(--gutter) 52px;
  text-align: center;
}
.ground h2 {
  margin: 0 0 8px;
  font: 900 clamp(24px, 3vw, 32px) var(--display);
  color: #fff;
  text-shadow: 0 2px 0 rgba(40, 100, 30, 0.35);
}
.ground p {
  margin: 0 auto 24px;
  max-width: 560px;
  font-weight: 700;
  color: #1f5a2b;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.small {
  margin-top: 26px;
  font-size: 13px;
  font-weight: 700;
  color: #2f6e35;
}

/* ---------- Motion ---------- */
@keyframes float-x {
  from {
    transform: translateX(-18px);
  }
  to {
    transform: translateX(28px);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes sun-bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 6px;
  }
}
@keyframes bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}
@keyframes sway {
  0%,
  100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes drift {
  0%,
  100% {
    translate: 0 0;
    opacity: 0.4;
  }
  50% {
    translate: 14px -18px;
    opacity: 1;
  }
}

@media (max-width: 860px) {
  .sun {
    width: 104px;
    height: 104px;
    top: 6px;
    right: 2%;
  }
  .cloud.a {
    width: 104px;
    height: 57px;
    top: 74px;
    left: -30px;
  }
  .cloud.b {
    display: none;
  }
  .cloud.c {
    width: 76px;
    height: 42px;
    top: 14px;
    left: 44%;
  }
  .lead {
    font-size: 16px;
  }
  .dusk {
    height: 360px;
  }
  .moon {
    width: 84px;
    height: 84px;
    top: 74px;
    left: 6%;
  }
  .dcloud.d1 {
    left: 34%;
    top: 150px;
    width: 116px;
    height: 64px;
  }
  .dcloud.d2 {
    display: none;
  }
  .footer-duri {
    width: 112px;
    right: 8%;
  }
}
@media (max-width: 600px) {
  .m-hero {
    left: 64%;
    bottom: 60px;
    width: 70px;
    height: 59px;
  }
  .m-foot {
    left: 6%;
    bottom: 80px;
    width: 80px;
    height: 67px;
  }
  .dusk .layer.far {
    height: 190px;
  }
  .dusk .layer.mid {
    height: 160px;
  }
  .dusk .layer.near {
    height: 90px;
  }
  .footer-duri {
    bottom: 28px;
  }
  .btn {
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cloud,
  .sun,
  #sun .rays,
  .moon,
  .star,
  .dcloud,
  .footer-duri,
  .firefly {
    animation: none;
  }
}