/* Site-wide components: logo, header, navigation, mobile menu, footer. */

/* ---------- Logo ----------
   The supplied PNG is used exactly as is. Its centre is transparent, so a white disc
   (--c-logo-plate) sits behind it, sized to the middle of the olive ring so no white
   shows outside the ring. Ring geometry in the 492 x 479 original: centre (244, 238.5),
   ring radius 187 to 233 px, disc radius 210 px. Physical left/top on purpose: the
   image never mirrors in RTL. */
.logo {
  --logo-size: 44px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  isolation: isolate;
  flex: none;
  block-size: var(--logo-size);
  aspect-ratio: 492 / 479;
}

.logo::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 6.911%; /* (244 - 210) / 492 */
  top: 5.950%; /* (238.5 - 210) / 479 */
  width: 85.366%; /* 420 / 492 */
  height: 87.683%; /* 420 / 479 */
  border-radius: 50%;
  background: var(--c-logo-plate);
}

.logo img {
  inline-size: 100%;
  block-size: 100%;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  inset-block-start: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--c-paper);
  border-block-start: 3px solid var(--c-emerald);
  border-block-end: 1px solid var(--c-rule);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--c-surface) 60%, transparent), var(--shadow-card);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  color: var(--c-ink);
  text-decoration: none;
}

/* Brand lockup: logo | "Ramadan & Hajj" over "Study Group Pakistan", split by an olive rule */
.logo--header {
  filter: drop-shadow(var(--shadow-logo));
}

.brand__name {
  display: grid;
  gap: 1px;
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--c-brass);
}

/* The name in the site header uses the client's font stack (--font): Inter Bold */
.brand__line1 {
  color: var(--c-emerald);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand__line2 {
  color: var(--c-brass-text);
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.brand:hover .brand__line1 {
  color: var(--c-emerald-deep);
}

.brand__short {
  display: none;
  font-family: var(--font);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.15;
}

@media (min-width: 400px) {
  .brand {
    gap: var(--space-3);
  }
}

@media (min-width: 1024px) {
  .brand__line1 {
    font-size: 1.25rem;
  }

  .brand__line2 {
    font-size: 0.875rem;
  }
}

/* Narrower than 360px the full name cannot fit in two lines: show "RHSGP", keep the name for screen readers. */
@media (max-width: 359.98px) {
  .site-header .brand__name {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-header .brand__short {
    display: block;
  }
}

/* Menu button (and its no-JS fallback link to the footer navigation) */
.menu-toggle,
.menu-close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  padding-inline: var(--space-3);
  border: 2px solid var(--c-rule);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.menu-close {
  border-color: color-mix(in srgb, var(--c-on-night) 40%, transparent);
  color: var(--c-on-night);
}

:where(.site-nav) ul {
  max-inline-size: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a:not(.btn) {
  color: inherit;
  text-decoration: none;
}

.site-nav a[aria-current="page"]:not(.btn),
.site-nav a:not(.btn):hover {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ----- Below 1024px: off-canvas panel on a night background ----- */
@media (max-width: 1023.98px) {
  .site-nav {
    --focus: var(--c-brass);
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    inline-size: min(24rem, 100%);
    padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-night);
    color: var(--c-on-night);
    visibility: hidden;
    translate: 100% 0;
    transition:
      translate 200ms ease-out,
      visibility 0s linear 200ms;
  }

  [dir="rtl"] .site-nav {
    translate: -100% 0;
  }

  .site-nav.is-open,
  .site-nav:target {
    visibility: visible;
    translate: 0 0;
    transition: translate 200ms ease-out;
  }

  .site-nav__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-block-size: var(--header-h);
    padding-inline: var(--gutter);
    border-block-end: 1px solid color-mix(in srgb, var(--c-on-night) 18%, transparent);
  }

  .site-nav__list {
    padding: var(--space-4) var(--gutter) var(--space-7);
  }

  .site-nav__list a:not(.btn) {
    display: block;
    padding-block: var(--space-3);
    font-size: 1.375rem;
    line-height: 1.3;
  }

  .site-nav a[aria-current="page"]:not(.btn) {
    text-decoration-color: var(--c-brass); /* red fails on the green panel; olive passes 3:1 */
  }

  .site-nav__cta {
    margin-block-start: var(--space-5);
  }

  .site-nav__cta .btn {
    inline-size: 100%;
    background: var(--c-on-night);
    color: var(--c-night);
    font-size: var(--fs-body);
  }

  .site-nav__cta .btn:hover {
    background: var(--c-on-night-soft);
  }

  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--c-scrim);
  }

  .menu-open {
    overflow: hidden;
  }
}

/* ----- 1024px and up: inline navigation ----- */
@media (min-width: 1024px) {
  .logo--header {
    --logo-size: 56px;
  }

  .menu-toggle,
  .site-nav__top,
  .nav-scrim {
    display: none !important;
  }

  .brand {
    flex: none; /* keep the name on its two lines; the links give way instead */
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .site-nav__cta .btn {
    white-space: nowrap;
  }

  .site-nav__list a:not(.btn) {
    display: inline-block;
    padding-block: 10px;
    font-size: var(--fs-small);
    line-height: 1.5;
    white-space: nowrap;
  }

  .site-nav a[aria-current="page"]:not(.btn) {
    color: var(--c-emerald);
    text-decoration-color: var(--c-crimson);
  }

  .site-nav__cta {
    margin-inline-start: var(--space-2);
  }
}

/* ---------- Footer ----------
   Top row: logo, name and tagline; social icons. Then email, phone and address in three equal
   columns. Bottom row: copyright, Contact us, Privacy and disclaimer. */
.site-footer {
  padding-block: var(--space-6) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  font-size: var(--fs-small);
  line-height: 1.5;
}

.logo--footer {
  --logo-size: 56px;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
}

.footer-brand__text {
  display: grid;
  gap: 2px;
}

.footer-brand__name {
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.footer-brand__tag {
  color: var(--c-on-night-soft);
}

.footer-social,
.footer-contact,
.footer-links {
  max-inline-size: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Social icons: round 44px buttons */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer-social a {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid color-mix(in srgb, var(--c-on-night) 30%, transparent);
  border-radius: 50%;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.footer-social a:hover {
  border-color: var(--c-on-night);
  background: var(--c-on-night);
  color: var(--c-night);
}

/* Email, phone, address: stacked on phones and tablets, three equal columns with dividers on
   desktop (at tablet width the columns are too narrow for the longer values). */
.footer-contact {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-5);
  padding-block: var(--space-4);
  border-block: 1px solid color-mix(in srgb, var(--c-on-night) 20%, transparent);
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
}

.footer-contact__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-on-night) 10%, transparent);
  color: var(--c-brass);
}

.footer-contact__text {
  display: grid;
  min-inline-size: 0;
}

.footer-contact__label {
  color: var(--c-on-night-soft);
  font-size: 0.875rem;
  line-height: 1.3;
}

@media (min-width: 1024px) {
  .footer-contact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .footer-contact li + li {
    padding-inline-start: var(--space-5);
    border-inline-start: 1px solid color-mix(in srgb, var(--c-on-night) 20%, transparent);
  }

  .footer-contact li:not(:last-child) {
    padding-inline-end: var(--space-5);
  }
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-6);
  padding-block-start: var(--space-2);
  color: var(--c-on-night-soft);
}

.site-footer__bottom p {
  max-inline-size: none;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
}

/* 44px tall tap targets in a thin row */
.footer-links a {
  display: inline-block;
  padding-block: 0.625rem;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* ---------- Tag: small type or status label ---------- */
.tag {
  display: inline-block;
  padding-inline: var(--space-2);
  border-radius: var(--radius-s);
  background: var(--c-dawn);
  color: var(--c-ink);
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* ---------- Medical note (design spec 5.4) ---------- */
.medical-note {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-inline-start: 4px solid var(--c-brass);
  border-radius: var(--radius-s);
  background: var(--c-alert-bg);
  color: var(--c-alert-ink);
}

.medical-note .icon {
  margin-block-start: 0.2em;
}

.medical-note a {
  color: inherit;
  font-weight: 700;
}

.section--dawn .tag {
  background: var(--c-surface);
}

/* ---------- Label pill above a section heading ---------- */
.label-pill {
  display: inline-flex;
  justify-self: start;
  inline-size: fit-content;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3125rem 0.875rem 0.3125rem 0.5rem;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.4;
}

.label-pill .icon {
  color: var(--c-brass-text);
}

.label-pill--heading {
  max-inline-size: 100%;
  padding: 0.5rem 1.25rem 0.5rem 0.75rem;
  font-family: var(--font-head);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  letter-spacing: 0;
  line-height: 1.3;
}

.label-pill--heading .icon {
  inline-size: 1.4em;
  block-size: 1.4em;
}

/* A centred section heading: label pill, heading, optional intro */
.section-intro {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-inline-size: 46rem;
  margin-inline: auto;
  text-align: center;
}

.section-intro .label-pill {
  justify-self: center;
}

.section-intro p:not(.label-pill) {
  color: var(--c-ink-soft);
}

/* ---------- Large rounded panel, inset from the screen edges ----------
   Never closer to the edge than the page gutter, so on phones and tablets its sides line up with
   the cards and bands in .container above and below it. */
.panel {
  margin-block: var(--space-4);
  margin-inline: max(var(--gutter), min(3vw, 3rem));
  border-radius: var(--radius-l);
}

/* ---------- Card ---------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--c-rule);
  border-radius: calc(var(--radius-l) - 8px);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

.card > .btn,
.card > p:last-child {
  margin-block-start: auto;
}

/* Round icon badge (olive ring, green icon) */
.icon-badge {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 4rem;
  block-size: 4rem;
  border: 2px solid var(--c-brass);
  border-radius: 50%;
  background: var(--c-dawn);
  color: var(--c-emerald);
}

.icon-badge .icon {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

/* Small outline pill button, for "Read more"-style links inside cards */
.btn--small {
  min-block-size: 44px;
  padding-inline: var(--space-4);
  font-size: var(--fs-small);
}

/* ---------- Inner page header ----------
   Compact: label pill, H1, lead and chips on soft green with the star-and-cross lattice, a large
   olive eight-pointed star outline at the right edge and a low mosque skyline. No breadcrumb
   (client decision). */
.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-6) calc(var(--space-6) + 2rem);
  background:
    radial-gradient(40rem 20rem at 15% 45%, color-mix(in srgb, var(--c-surface) 80%, transparent), transparent 70%),
    var(--c-dawn);
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-emerald);
  opacity: 0.1;
  -webkit-mask:
    url("/assets/images/pattern-star-cross.svg") center top / 96px 96px repeat,
    linear-gradient(to right, transparent 25%, black 80%);
  -webkit-mask-composite: source-in;
  mask:
    url("/assets/images/pattern-star-cross.svg") center top / 96px 96px repeat,
    linear-gradient(to right, transparent 25%, black 80%);
  mask-composite: intersect;
  pointer-events: none;
}

.page-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: clamp(40px, 5vw, 64px);
  z-index: -1;
  background: var(--c-emerald);
  opacity: 0.09;
  -webkit-mask: url("/assets/images/skyline-mosques.svg") center bottom / auto 100% repeat-x;
  mask: url("/assets/images/skyline-mosques.svg") center bottom / auto 100% repeat-x;
  pointer-events: none;
}

.page-header__inner {
  position: relative;
}

/* Large star outline, cut off by the right edge of the container (desktop only: on tablets it
   would run through the lead and the chips) */
.page-header__star {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -5rem;
  z-index: -1;
  display: none;
  inline-size: 20rem;
  block-size: 20rem;
  fill: none;
  stroke: var(--c-brass);
  stroke-width: 0.25;
  opacity: 0.6;
  translate: 0 -50%;
}

.page-header h1 {
  margin-block-start: var(--space-3);
  font-size: clamp(2.25rem, 1.7rem + 2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.page-header__lead {
  max-inline-size: 36rem;
  margin-block-start: var(--space-3);
  color: var(--c-ink-soft);
  font-size: 1.125rem;
}

.page-header__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-inline-size: none;
  margin-block-start: var(--space-4);
  padding: 0;
  list-style: none;
}

.page-header__chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem var(--space-4) 0.375rem var(--space-3);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
}

.page-header__chips .icon {
  color: var(--c-brass-text);
}

@media (min-width: 768px) {
  .page-header {
    padding-block: var(--space-7) calc(var(--space-7) + 2rem);
  }
}

@media (min-width: 1024px) {
  .page-header__star {
    display: block;
  }
}

/* ---------- Publication cards ----------
   Built by assets/js/publications.js on the Publications page (the full list) and the Home
   page (top publications). A patterned cover band with the type, year and a type icon, then
   the title, authors, source, summary and the PDF / online buttons. */
.pub-grid {
  display: grid;
  gap: var(--space-5);
  max-inline-size: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .pub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pub-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pub {
  --cover-bg: var(--c-night);
  --cover-ink: var(--c-on-night);
  --cover-pattern: var(--c-on-night);
  --cover-art: var(--c-brass);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-rule);
  border-radius: calc(var(--radius-l) - 8px);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  transition:
    translate 200ms ease,
    box-shadow 200ms ease;
}

.pub:hover,
.pub:focus-within {
  translate: 0 -4px;
  box-shadow: var(--shadow-photo);
}

/* Cover colours: five, cycled by position (publications.js adds .pub--c1 to .pub--c5) so
   neighbouring cards never match. Every text colour here passes WCAG AA on its cover. */
.pub--c2 {
  --cover-bg: var(--c-olive-tint);
  --cover-ink: var(--c-ink);
  --cover-pattern: var(--c-brass);
  --cover-art: var(--c-emerald);
}

.pub--c3 {
  --cover-bg: var(--c-charcoal);
}

.pub--c4 {
  --cover-bg: var(--c-dawn);
  --cover-ink: var(--c-ink);
  --cover-pattern: var(--c-emerald);
  --cover-art: var(--c-emerald);
}

.pub--c5 {
  --cover-bg: var(--c-brass);
  --cover-ink: var(--c-charcoal);
  --cover-pattern: var(--c-surface);
  --cover-art: var(--c-night);
}

.pub__cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: 7.5rem;
  padding: var(--space-4) var(--space-5);
  background: var(--cover-bg);
  color: var(--cover-ink);
}

.pub__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cover-pattern);
  opacity: 0.12;
  -webkit-mask: url("/assets/images/pattern-star-cross.svg") center / 72px 72px repeat;
  mask: url("/assets/images/pattern-star-cross.svg") center / 72px 72px repeat;
}

.pub__label {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pub__type,
.pub__year {
  padding: 0.125rem var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
}

.pub__type {
  background: var(--c-surface);
  color: var(--c-emerald);
}

.pub__year {
  border: 1px solid currentColor;
}

/* Large type icon in a ring, top right of the cover */
.pub__art {
  display: grid;
  place-items: center;
  align-self: flex-start;
  inline-size: 4rem;
  block-size: 4rem;
  border: 2px solid var(--cover-art);
  border-radius: 50%;
  color: var(--cover-art);
}

.pub__art .icon {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

.pub__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.pub__title {
  font-size: 1.125rem;
  line-height: 1.35;
}

.pub__authors {
  color: var(--c-ink);
  font-size: var(--fs-small);
}

.pub__source {
  color: var(--c-brass-text);
  font-size: var(--fs-small);
  font-weight: 700;
}

.pub__summary {
  color: var(--c-ink-soft);
  font-size: 0.9375rem;
}

.pub__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  border-block-start: 1px dashed var(--c-rule);
}

.pub__soon {
  color: var(--c-ink-soft);
  font-size: 0.9375rem;
}