:root {
  --fic-teal-deep: #0b3536;
  --fic-teal-mid: #0f3d3e;
  --fic-teal-light: #155758;
  --fic-teal-bright: #1a6e70;
  --fic-gold: #c9a84c;
  --fic-gold-light: #e2c06a;
  --fic-gold-pale: #f5e9c8;
  --fic-gold-ink: #7a5c00;
  --fic-surface: #f5f0e8;
  --fic-surface-alt: #ede7da;
  --fic-white: #ffffff;
  --fic-text-dark: #1a1a1a;
  --fic-text-mid: #4a4a4a;
  --fic-text-light: #666666;
  
  --fic-line-on-dark: rgba(255, 255, 255, .09);
  --fic-edge-gold: rgba(201, 168, 76, .24);
  --fic-line-on-light: rgba(11, 53, 54, .10);
  --fic-text-on-dark: var(--fic-white);
  --fic-text-on-dark-mid: rgba(255, 255, 255, .72);
  --fic-text-on-dark-muted: rgba(255, 255, 255, .62);
  --fic-focus-light: var(--fic-teal-deep);
  
  --fic-scrim: rgba(6, 28, 29, .72);
  --fic-danger: #b3412a;
  --fic-danger-surface: #f8e5df;
  --fic-danger-on-dark: #f3a691;
  --fic-success: #1c6b3a;
  --fic-success-surface: #e4f1e8;
  --fic-success-on-dark: #7fcf9a;

  --fic-teal-900: var(--fic-teal-deep);
  --fic-teal-800: var(--fic-teal-mid);
  --fic-teal-700: var(--fic-teal-light);
  --fic-teal-600: var(--fic-teal-bright);
  --fic-gold-500: var(--fic-gold);
  --fic-gold-400: var(--fic-gold-light);
  --fic-gold-100: var(--fic-gold-pale);

  --fic-space-xs: 8px;
  --fic-space-sm: 16px;
  --fic-space-md: 24px;
  --fic-space-lg: 32px;
  --fic-space-xl: 48px;
  --fic-space-2xl: 64px;
  --fic-space-3xl: 96px;
  --fic-space-4xl: 128px;

  --fic-radius-sm: 8px;
  --fic-radius-card: 12px;
  --fic-radius-circle: 999px;
  --fic-radius-pill: 999px;

  --fic-shadow-subtle: 0 2px 16px rgba(0, 0, 0, 0.05);
  --fic-shadow-default: 0 4px 32px rgba(0, 0, 0, 0.08);
  --fic-shadow-raised: 0 2px 4px rgba(11, 53, 54, .08), 0 14px 34px rgba(11, 53, 54, .14);
  --fic-shadow-deep: 0 24px 60px rgba(11, 53, 54, .28);
  --fic-shadow-card-dark: 0 20px 70px rgba(0, 0, 0, .45);
  --fic-shadow-rest: 0 1px 2px rgba(11, 53, 54, .06), 0 4px 14px rgba(11, 53, 54, .06);

  --fic-nav-blur: 12px;
  --fic-scrim-blur: 6px;

  --fic-container-max: 1200px;
  --fic-container-pad: 48px;
  --fic-section-pad-y: 96px;
  --fic-grid-gap: var(--fic-space-lg);
  --fic-hero-pad-y: var(--fic-space-2xl);
  /* Shared page-layout offset; rendered header geometry belongs to header.css. */
  --fic-header-height: 72px;

  --fic-pattern-geometric: url("/wp-content/uploads/2026/05/fic-geometric.svg");
}

/*
 * Public layout: mobile <=768px, tablet 769–1024px, desktop >=1025px.
 * Navigation switches at 1024px. Specialist viewer/payment/private modes
 * retain their component-owned boundaries; see README.md.
 */

@media (max-width: 1024px) {
  :root {
    --fic-container-pad: 32px;
    --fic-section-pad-y: 64px;
    --fic-hero-pad-y: var(--fic-space-xl);
  }
}

@media (max-width: 768px) {
  :root {
    --fic-container-pad: 20px;
    --fic-section-pad-y: 48px;
    --fic-grid-gap: var(--fic-space-md);
    --fic-hero-pad-y: 40px;
    --fic-header-height: 64px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--fic-teal-deep);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--fic-surface);
  color: var(--fic-text-dark);
  font-family: var(--fic-font-body);
  font-size: var(--fic-type-body-size);
  font-weight: var(--fic-type-body-weight);
  line-height: var(--fic-type-body-leading);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Keep the document canvas aligned with the teal header behind iOS's status
 * area; page sections provide their own light backgrounds below it. */
@media (max-width: 768px) {
  body {
    background: var(--fic-teal-deep);
  }
}

html.has-open-menu,
body.has-open-menu {
  background: var(--fic-teal-deep);
}

body.has-open-menu {
  overflow: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--fic-focus-color, var(--fic-focus-light));
  outline-offset: 3px;
}

::selection {
  background: var(--fic-gold);
  color: var(--fic-teal-deep);
}

h1,
h2,
h3,
h4,
h5,
h6,
.fic-display,
.fic-heading,
.fic-label,
.fic-button,
.fic-text-link,
.site-header,
.site-footer {
  font-family: var(--fic-font-heading);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-block-start: 0;
}

h1,
.fic-h1 {
  color: var(--fic-teal-deep);
  font-size: var(--fic-type-title-size);
  font-weight: var(--fic-type-title-weight);
  letter-spacing: var(--fic-type-title-tracking);
  line-height: var(--fic-type-title-leading);
}

h2,
.fic-h2 {
  color: var(--fic-teal-deep);
  font-size: var(--fic-type-section-size);
  font-weight: var(--fic-type-section-weight);
  letter-spacing: var(--fic-type-section-tracking);
  line-height: var(--fic-type-section-leading);
}

h3,
.fic-h3 {
  color: var(--fic-teal-deep);
  font-size: var(--fic-type-subheading-size);
  font-weight: var(--fic-type-subheading-weight);
  letter-spacing: var(--fic-type-subheading-tracking);
  line-height: var(--fic-type-subheading-leading);
}

h4,
.fic-h4 {
  color: var(--fic-teal-deep);
  font-size: var(--fic-type-heading-small-size);
  font-weight: var(--fic-type-heading-small-weight);
  letter-spacing: var(--fic-type-tracking);
  line-height: var(--fic-type-heading-small-leading);
}

p {
  margin-block-end: var(--fic-space-sm);
}

.fic-display {
  font-size: var(--fic-type-display-size);
  font-weight: var(--fic-type-display-weight);
  letter-spacing: var(--fic-type-display-tracking);
  line-height: var(--fic-type-display-leading);
}

.fic-body-large {
  color: var(--fic-text-mid);
  font-size: var(--fic-type-lead-size);
  line-height: var(--fic-type-lead-leading);
}

.fic-caption {
  color: var(--fic-text-light);
  font-size: var(--fic-type-small-size);
  line-height: var(--fic-type-small-leading);
}

.skip-link {
  position: fixed;
  top: var(--fic-space-sm);
  left: var(--fic-space-sm);
  z-index: 1000;
  transform: translateY(-150%);
  border-radius: var(--fic-radius-sm);
  background: var(--fic-gold);
  color: var(--fic-teal-deep);
  font-family: var(--fic-font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 10px 15px;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.fic-icon {
  flex: 0 0 auto;
}

.fic-icon--fill {
  fill: currentColor;
  stroke: currentColor;
}

.fic-container {
  width: 100%;
  max-width: calc(var(--fic-container-max) + (var(--fic-container-pad) * 2));
  margin-inline: auto;
  padding-inline: var(--fic-container-pad);
}

/* Equivalent landing/archive heroes clear the actual expanded public header.
 * header.css owns its unchanged 72px navigation area and mobile safe-area inset;
 * the legacy 64px mobile offset is also consumed by detail/Studio layouts. */
.ab-hero,
.sv-hero,
.events-hero,
.fic-news-hero,
.khutbah-hero,
.fic-contact-hero,
.fic-pt-hero,
.fic-legal-hero {
  padding-top: calc(max(var(--fic-header-height), 72px) + var(--fic-hero-pad-y));
  padding-bottom: var(--fic-hero-pad-y);
}

@media (max-width: 768px) {
  .ab-hero,
  .sv-hero,
  .events-hero,
  .fic-news-hero,
  .khutbah-hero,
  .fic-contact-hero,
  .fic-pt-hero,
  .fic-legal-hero {
    padding-top: calc(max(var(--fic-header-height), 72px) + env(safe-area-inset-top, 0px) + var(--fic-hero-pad-y));
  }
}

.fic-section {
  padding: var(--fic-section-pad-y) var(--fic-container-pad);
}

.fic-section-inner {
  width: 100%;
  max-width: var(--fic-container-max);
  margin-inline: auto;
}

.fic-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fic-space-lg);
  margin-bottom: var(--fic-space-lg);
}

.fic-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin-bottom: 16px;
  border: 1px solid rgba(201, 168, 76, .4);
  border-radius: var(--fic-radius-circle);
  background: var(--fic-teal-mid);
  color: var(--fic-gold);
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-label-size);
  font-weight: var(--fic-type-label-weight);
  letter-spacing: var(--fic-type-tracking);
  line-height: var(--fic-type-label-leading);
  padding: 8px 16px;
  text-transform: uppercase;
}

/* Solid chips, matching fic_chip(): default on dark, light variant on light. */
.fic-eyebrow--dark {
  border-color: rgba(201, 168, 76, .5);
  background: var(--fic-gold-pale);
  color: #7a5c00;
}

.fic-eyebrow__line {
  display: none;
}

.fic-heading {
  margin: 0;
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-section-size);
  font-weight: var(--fic-type-section-weight);
  letter-spacing: var(--fic-type-section-tracking);
  line-height: var(--fic-type-section-leading);
}

.fic-heading--dark {
  color: var(--fic-teal-deep);
}

.fic-heading--light {
  color: var(--fic-white);
}

.fic-eyebrow::before {
  display: none;
  width: 0;
  height: 0;
  flex: 0 0 24px;
  background: currentColor;
  content: "";
}

/* Eyebrow/category chips. Section-introduction eyebrows remain independent. */
.fic-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 8px 16px;
  border: 1px solid rgba(201, 168, 76, .4);
  border-radius: var(--fic-radius-pill);
  background: var(--fic-teal-mid);
  color: var(--fic-gold);
  font-family: var(--fic-font-heading);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}
.fic-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fic-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.fic-chip--lg { padding: 10px 20px; font-size: 12px; gap: 10px; }
.fic-chip--lg svg { width: 14px; height: 14px; }
.fic-chip--sm { padding: 6px 11px; font-size: 10px; letter-spacing: .12em; gap: 6px; }
.fic-chip--sm svg { width: 11px; height: 11px; }
.fic-chip--inset { background: var(--fic-teal-deep); }
.fic-chip--light { background: var(--fic-gold-pale); border-color: rgba(201, 168, 76, .5); color: #7a5c00; }
.fic-chip--solid { background: var(--fic-gold); border-color: var(--fic-gold); color: var(--fic-teal-deep); }
.fic-chip--outline { background: transparent; border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .88); }
.fic-chip--outline-light { background: transparent; border-color: rgba(11, 53, 54, .28); color: var(--fic-teal-mid); }
.fic-chip--live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: fic-chip-pulse 2s ease-out infinite;
}
@keyframes fic-chip-pulse {
  0% { box-shadow: 0 0 0 0 rgba(201, 168, 76, .55); }
  100% { box-shadow: 0 0 0 7px rgba(201, 168, 76, 0); }
}
a.fic-chip { transition: background .2s, border-color .2s, color .2s; }
a.fic-chip:hover { border-color: var(--fic-gold); background: var(--fic-teal-light); color: var(--fic-gold-light); }
a.fic-chip--light:hover { background: #efdfae; color: #5c4500; }
a.fic-chip:focus-visible { outline: 2px solid var(--fic-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .fic-chip--live::before { animation: none; }
  a.fic-chip { transition: none; }
}
.fic-page-chip { min-width: 0; margin-bottom: 16px; }

.section-heading-dark {
  margin-bottom: var(--fic-space-sm);
  color: var(--fic-teal-deep);
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-section-size);
  font-weight: var(--fic-type-section-weight);
  letter-spacing: var(--fic-type-section-tracking);
  line-height: var(--fic-type-section-leading);
}

.section-heading-light {
  margin-bottom: var(--fic-space-sm);
  color: var(--fic-white);
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-section-size);
  font-weight: var(--fic-type-section-weight);
  letter-spacing: var(--fic-type-section-tracking);
  line-height: var(--fic-type-section-leading);
}

@media (max-width: 768px) {
  .fic-section-header {
    display: block;
    margin-bottom: var(--fic-space-lg);
  }
}

/* Existing page selectors are compatibility aliases of the four shared CTA
 * variants. Keep their markup/JS hooks; page CSS owns layout and elevation only. */
.fic-button,
.fic-button-primary,
.fic-button-secondary,
.fic-button-outline,
.fic-button-ghost,
.ab-btn,
.events-button,
.sv-card-btn,
.sv-cta-card__btn,
.sv-modal__btn,
.fic-single-event-button,
.fic-contact-form__submit,
.fic-footer__button,
.site-header__cta,
.drawer__donate,
.fic-news-subscribe__form button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 48px;
  min-height: 48px;
  max-width: 100%;
  border: 1.5px solid transparent;
  border-radius: var(--fic-radius-sm);
  padding: 0 24px;
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-button-size);
  font-weight: var(--fic-type-button-weight);
  line-height: var(--fic-type-button-leading);
  letter-spacing: .06em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, transform .15s ease-out;
}

.fic-button:hover:not(:disabled):not([aria-disabled="true"]),
.fic-button-primary:hover:not(:disabled):not([aria-disabled="true"]),
.fic-button-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.fic-button-outline:hover:not(:disabled):not([aria-disabled="true"]),
.fic-button-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(-1px);
}

.fic-button-primary,
.ab-btn--primary,
.events-button--gold,
.sv-card-btn--enquire,
.sv-modal__btn--primary,
.fic-single-event-button--gold,
.fic-contact-form__submit,
.fic-footer__button,
.site-header__cta,
.drawer__donate,
.fic-news-subscribe__form button {
  background: var(--fic-gold);
  color: var(--fic-teal-deep);
}

.fic-button-primary:hover:not(:disabled):not([aria-disabled="true"]),
.ab-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
.events-button--gold:hover:not(:disabled):not([aria-disabled="true"]),
.sv-card-btn--enquire:hover:not(:disabled):not([aria-disabled="true"]),
.sv-modal__btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
.fic-single-event-button--gold:hover:not(:disabled):not([aria-disabled="true"]),
.fic-contact-form__submit:hover:not(:disabled):not([aria-disabled="true"]),
.fic-footer__button:hover:not(:disabled):not([aria-disabled="true"]),
.site-header__cta:hover:not(:disabled):not([aria-disabled="true"]),
.drawer__donate:hover:not(:disabled):not([aria-disabled="true"]),
.fic-news-subscribe__form button:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--fic-gold-light);
}

.fic-button-secondary,
.sv-cta-card__btn,
.fic-single-event-button--teal {
  background: var(--fic-teal-deep);
  color: var(--fic-white);
}

.fic-button-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.sv-cta-card__btn:hover:not(:disabled):not([aria-disabled="true"]),
.fic-single-event-button--teal:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--fic-teal-light);
}

.fic-button-outline,
.ab-btn--ghost,
.events-button--outline,
.sv-card-btn--learn,
.sv-modal__btn--secondary,
.sv-modal__btn--ghost,
.fic-single-event-button--outline {
  background: transparent;
  border-color: var(--fic-teal-deep);
  color: var(--fic-teal-deep);
  font-weight: var(--fic-type-button-weight);
}

.fic-button-outline:hover:not(:disabled):not([aria-disabled="true"]),
.ab-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]),
.events-button--outline:hover:not(:disabled):not([aria-disabled="true"]),
.sv-card-btn--learn:hover:not(:disabled):not([aria-disabled="true"]),
.sv-modal__btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.sv-modal__btn--ghost:hover:not(:disabled):not([aria-disabled="true"]),
.fic-single-event-button--outline:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--fic-teal-deep);
  color: var(--fic-white);
}

.fic-button-ghost,
.fic-footer__button--ghost {
  background: transparent;
  border-color: var(--fic-edge-gold);
  color: var(--fic-white);
  font-weight: var(--fic-type-button-weight);
}

.fic-button-ghost:hover:not(:disabled):not([aria-disabled="true"]),
.fic-footer__button--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--fic-gold);
  background: var(--fic-teal-light);
}


.fic-button-primary:active:not(:disabled):not([aria-disabled="true"]) { background: var(--fic-gold); }
.fic-button-secondary:active:not(:disabled):not([aria-disabled="true"]) { background: var(--fic-teal-deep); }
.fic-button-ghost:active:not(:disabled):not([aria-disabled="true"]) { background: var(--fic-teal-mid); }

.fic-button:disabled,
.fic-button-primary:disabled,
.fic-button-secondary:disabled,
.fic-button-outline:disabled,
.fic-button-ghost:disabled,
.ab-btn:disabled,
.events-button:disabled,
.sv-card-btn:disabled,
.sv-cta-card__btn:disabled,
.sv-modal__btn:disabled,
.fic-single-event-button:disabled,
.fic-contact-form__submit:disabled,
.fic-footer__button:disabled,
.site-header__cta:disabled,
.fic-button[aria-disabled="true"],
.fic-button-primary[aria-disabled="true"],
.fic-button-secondary[aria-disabled="true"],
.fic-button-outline[aria-disabled="true"],
.fic-button-ghost[aria-disabled="true"],
.ab-btn[aria-disabled="true"],
.events-button[aria-disabled="true"],
.sv-card-btn[aria-disabled="true"],
.sv-cta-card__btn[aria-disabled="true"],
.sv-modal__btn[aria-disabled="true"],
.fic-single-event-button[aria-disabled="true"],
.fic-contact-form__submit[aria-disabled="true"],
.fic-footer__button[aria-disabled="true"],
.site-header__cta[aria-disabled="true"],
.drawer__donate:disabled,
.drawer__donate[aria-disabled="true"],
.fic-news-subscribe__form button:disabled,
.fic-news-subscribe__form button[aria-disabled="true"] {
  opacity: 1;
  background: var(--fic-control-disabled-bg, var(--fic-surface-alt));
  border-color: var(--fic-control-disabled-bg, var(--fic-surface-alt));
  color: var(--fic-control-disabled-text, var(--fic-text-light));
  cursor: not-allowed;
  transform: none;
}

.fic-link,
.fic-text-link,
.fic-contact-detail__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  overflow-wrap: anywhere;
  border-bottom: 0;
  padding: 0 0 2px;
  color: var(--fic-teal-bright);
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-button-size);
  font-weight: var(--fic-type-button-secondary-weight);
  line-height: 1.4;
  letter-spacing: var(--fic-type-tracking);
  text-transform: none;
  text-decoration: underline;
  text-decoration-color: var(--fic-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color .15s ease-out;
}

/* Standalone actions get a touch target; prose .fic-link anchors stay inline-sized. */
.fic-text-link,
.fic-contact-detail__link,
.fic-section-header .fic-link,
.fic-visit-hero .fic-link,
.fic-group-practical-list .fic-link { min-width: 44px; min-height: 44px; }
.fic-link svg,
.fic-text-link svg,
.fic-contact-detail__link svg { flex-shrink: 0; }

.fic-link:hover:not([aria-disabled="true"]),
.fic-text-link:hover:not([aria-disabled="true"]),
.fic-contact-detail__link:hover:not([aria-disabled="true"]) {
  color: var(--fic-teal-deep);
  text-decoration-thickness: 3px;
}

.fic-link--gold {
  color: var(--fic-gold);
}

.fic-link--gold:hover:not([aria-disabled="true"]) {
  color: var(--fic-gold-light);
}

.fic-link[aria-disabled="true"],
.fic-text-link[aria-disabled="true"],
.fic-contact-detail__link[aria-disabled="true"] {
  opacity: 1;
  color: var(--fic-control-disabled-text, var(--fic-text-light));
  cursor: not-allowed;
}

/* Focus follows the surrounding surface, including nested light panels. */
.site-header,
.fic-footer,
.fic-hero-section,
.fic-khutbah-section,
.fic-stories,
.fic-visit-dark,
.fic-khutbah-modal,
.fic-donate-section,
.ab-hero,
.ab-section--dark,
.sv-hero,
.sv-section--dark,
.events-hero,
.events-cta__inner,
.fic-single-event__hero,
.fic-contact-hero,
.fic-news-hero,
.khutbah-hero,
.fic-gallery-hero,
.fic-pt-hero,
.fic-legal-hero,
.fic-not-found,
.fic-single-khutbah__hero,
.fic-modal__header,
.sv-modal__header,
.fic-event-registration__head,
.fic-contact-form-card__head,
.drawer,
.site-footer,
.ab-section--darker,
.ab-visit-card,
.fic-news-subscribe,
.fic-article-hero,
.fic-gallery-lightbox,
.fic-pt-jumuah,
.fic-not-found-page,
.fic-about__visual-card,
.fic-pp,
.fic-khutbah-card,
.fic-khutbah-card__media,
.khutbah-featured__content,
.khutbah-featured__media,
.events-featured__visual,
.fic-event-card__header,
.fic-single-khutbah-video,
.fic-contact-map-card,
.fic-news-card__media,
.fic-news-card__image,
.ab-hadith-card {
  --fic-focus-color: var(--fic-gold);
  --fic-control-disabled-bg: var(--fic-teal-light);
  /* The lighter dark well needs .72 white for normal-size text contrast. */
  --fic-control-disabled-text: var(--fic-text-on-dark-mid);
}

.fic-card,
.sv-card,
.sv-cta-card,
.fic-modal,
.sv-modal,
.fic-contact-form-card,
.fic-event-registration__dialog,
.events-featured__content,
.fic-news-card,
.fic-event-card {
  --fic-focus-color: var(--fic-teal-deep);
  --fic-control-disabled-bg: var(--fic-surface-alt);
  --fic-control-disabled-text: var(--fic-text-light);
}

.fic-button-ghost:focus-visible,
.fic-footer__button--ghost:focus-visible {
  outline-color: var(--fic-gold);
}

/* Shared native controls; component grids and specialist plugin fields stay local. */
.fic-form input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])),
.fic-form select,
.fic-form textarea,
.fic-contact-form input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])),
.fic-contact-form select,
.fic-contact-form textarea,
.sv-form input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])),
.sv-form select,
.sv-form textarea,
.fic-event-registration__fields input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])),
.fic-event-registration__fields select,
.fic-event-registration__message textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  height: 52px;
  border: 1.5px solid var(--fic-surface-alt);
  border-radius: var(--fic-radius-sm);
  background: var(--fic-surface);
  color: var(--fic-text-dark);
  padding: 0 16px;
  font-family: var(--fic-font-body);
  font-size: var(--fic-type-form-control-size);
  font-weight: var(--fic-type-form-control-weight);
  line-height: var(--fic-type-form-control-leading);
  letter-spacing: var(--fic-type-tracking);
  text-transform: none;
  transition: background-color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
}

.fic-form textarea,
.fic-contact-form textarea,
.sv-form textarea,
.fic-event-registration__message textarea {
  min-height: 120px;
  height: auto;
  padding-block: 12px;
  resize: vertical;
}

.fic-form input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])):focus,
.fic-form select:focus,
.fic-form textarea:focus,
.fic-contact-form input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])):focus,
.fic-contact-form select:focus,
.fic-contact-form textarea:focus,
.sv-form input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])):focus,
.sv-form select:focus,
.sv-form textarea:focus,
.fic-event-registration__fields input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])):focus,
.fic-event-registration__fields select:focus,
.fic-event-registration__message textarea:focus {
  border-color: var(--fic-gold);
  background: var(--fic-surface);
  box-shadow: 0 0 3px rgba(201, 168, 76, .25);
}

.fic-contact-form input:not(:where([type="checkbox"], [type="radio"], [type="hidden"]))[aria-invalid="true"],
.fic-contact-form select[aria-invalid="true"],
.fic-contact-form textarea[aria-invalid="true"],
.sv-form input:not(:where([type="checkbox"], [type="radio"], [type="hidden"]))[aria-invalid="true"],
.sv-form select[aria-invalid="true"],
.sv-form textarea[aria-invalid="true"],
.fic-event-registration__fields input:not(:where([type="checkbox"], [type="radio"], [type="hidden"]))[aria-invalid="true"],
.fic-event-registration__fields select[aria-invalid="true"],
.fic-event-registration__message textarea[aria-invalid="true"] {
  border-color: var(--fic-danger);
}

.fic-contact-form input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])):disabled,
.fic-contact-form select:disabled,
.fic-contact-form textarea:disabled,
.sv-form input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])):disabled,
.sv-form select:disabled,
.sv-form textarea:disabled,
.fic-event-registration__fields input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])):disabled,
.fic-event-registration__fields select:disabled,
.fic-event-registration__message textarea:disabled {
  opacity: 1;
  background: var(--fic-surface-alt);
  border-color: var(--fic-surface-alt);
  color: var(--fic-text-light);
  cursor: not-allowed;
}

.fic-form__label,
.fic-form label > span,
.fic-contact-form label span,
.sv-form label,
.fic-event-registration__fields label,
.fic-event-registration__message {
  color: var(--fic-teal-deep);
  font-family: var(--fic-font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: var(--fic-type-form-label-leading);
  letter-spacing: var(--fic-type-tracking);
  text-transform: none;
}

.fic-form__error,
.fic-contact-form__error,
.sv-form__error,
.fic-event-registration__error {
  border-radius: var(--fic-radius-sm);
  border-left: 3px solid var(--fic-danger);
  background: var(--fic-danger-surface);
  color: var(--fic-danger);
  padding: 14px 16px;
  font-size: var(--fic-type-support-size);
  font-weight: var(--fic-type-support-weight);
  line-height: var(--fic-type-support-leading);
  letter-spacing: var(--fic-type-tracking);
}

@media (prefers-reduced-motion: reduce) {
  .fic-button:hover:not(:disabled):not([aria-disabled="true"]),
  .fic-button-primary:hover:not(:disabled):not([aria-disabled="true"]),
  .fic-button-secondary:hover:not(:disabled):not([aria-disabled="true"]),
  .fic-button-outline:hover:not(:disabled):not([aria-disabled="true"]),
  .fic-button-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
  }

  .fic-button,
  .fic-button-primary,
  .fic-button-secondary,
  .fic-button-outline,
  .fic-button-ghost,
  .ab-btn,
  .events-button,
  .sv-card-btn,
  .sv-cta-card__btn,
  .sv-modal__btn,
  .fic-single-event-button,
  .fic-contact-form__submit,
  .fic-footer__button,
  .site-header__cta,
  .drawer__donate,
  .fic-news-subscribe__form button,
  .fic-contact-detail__link,
  .fic-link,
  .fic-text-link,
  .fic-contact-form input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])),
  .fic-contact-form select,
  .fic-contact-form textarea,
  .sv-form input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])),
  .sv-form select,
  .sv-form textarea,
  .fic-event-registration__fields input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])),
  .fic-event-registration__fields select,
  .fic-event-registration__message textarea {
    transition: none;
  }
}

.fic-card {
  border-radius: var(--fic-radius-card);
  background: var(--fic-white);
  box-shadow: var(--fic-shadow-subtle);
}

/* Native FAQ cards; page owners retain the surrounding section layout. */
.fic-accordion {
  min-width: 0;
  --fic-focus-color: var(--fic-teal-deep);
}

.fic-accordion > details {
  border-radius: var(--fic-radius-card);
  background: var(--fic-white);
  box-shadow: var(--fic-shadow-subtle);
  margin-bottom: var(--fic-space-sm);
}

.fic-accordion > details:last-child {
  margin-bottom: 0;
}

.fic-accordion > details > summary {
  list-style: none;
  padding: var(--fic-space-md);
  color: var(--fic-teal-deep);
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-summary-size);
  font-weight: var(--fic-type-summary-weight);
  line-height: var(--fic-type-summary-leading);
  letter-spacing: var(--fic-type-tracking);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--fic-space-sm);
  cursor: pointer;
}

.fic-accordion > details > summary::-webkit-details-marker {
  display: none;
}

.fic-accordion > details > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--fic-teal-bright);
  border-bottom: 2px solid var(--fic-teal-bright);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.fic-accordion > details[open] > summary::after {
  transform: rotate(-135deg);
}

.fic-accordion > details p {
  margin: 0;
  padding: 0 var(--fic-space-md) var(--fic-space-md);
  color: var(--fic-text-mid);
  font-family: var(--fic-font-body);
  font-size: var(--fic-type-body-size);
  font-weight: var(--fic-type-body-weight);
  line-height: var(--fic-type-body-leading);
  letter-spacing: var(--fic-type-tracking);
}

.fic-card-hover {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.fic-card-hover:hover,
.fic-card-hover:focus-within,
.fic-visit-card:focus-within,
.fic-event-card:focus-within,
.fic-news-card:focus-within,
.ab-value-card:focus-within,
.ab-trustee:focus-within {
  box-shadow: var(--fic-shadow-raised);
}

.fic-card-hover:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .fic-card-hover { transition: none; }
  .fic-card-hover:hover { transform: none; }
}

.fic-card-surface {
  border: 1px solid rgba(11, 53, 54, 0.08);
  background: var(--fic-white);
  box-shadow: var(--fic-shadow-subtle);
  color: var(--fic-text-dark);
}

/* One mosque-logo arabesque asset and one opacity layer. The source SVG
   contains white geometry without intrinsic opacity. Drawer customises only
   --fic-pattern-opacity; existing pseudo-element placements share the paint. */
.fic-pattern,
.site-footer::before,
.studio-sidebar::before {
  background-image: var(--fic-pattern-geometric);
  background-repeat: repeat;
  background-size: 680px auto;
  background-position: top left;
  opacity: var(--fic-pattern-opacity, 0.045);
  pointer-events: none;
}

.fic-pattern {
  position: absolute;
  inset: 0;
}

.site-main {
  min-height: 60vh;
}

.fic-honeypot-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 72px;
  background: var(--fic-teal-deep);
  color: var(--fic-text-on-dark-muted);
  font-family: var(--fic-font-body);
  font-size: 15px;
  line-height: 1.7;
}
.site-footer::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
}
.fic-footer__inner {
  width: 100%;
  max-width: calc(var(--fic-container-max) + (var(--fic-container-pad) * 2));
  margin-inline: auto;
  padding-inline: var(--fic-container-pad);
}
.fic-footer__support {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--fic-line-on-dark);
  padding-bottom: var(--fic-space-xl);
}
.fic-footer__support-copy {
  display: flex;
  gap: 20px;
  align-items: center;
  min-width: 0;
  max-width: 720px;
  flex: 1 1 500px;
}
.fic-footer__support-copy > div:last-child {
  min-width: 0;
}
.fic-footer__support-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 168, 76, .4);
  border-radius: var(--fic-radius-card);
  background: var(--fic-teal-mid);
  color: var(--fic-gold);
}
.fic-footer__support-title {
  margin: 12px 0 0;
  color: var(--fic-white);
  font: 800 clamp(1.4rem, 3vw, 2rem)/1.2 var(--fic-font-heading);
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.fic-footer__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.fic-footer__button {
  gap: 8px;
  
  border-width: 2px;
  padding: 13px 32px;
  letter-spacing: 0;
}
.fic-footer__button--ghost { font-weight: var(--fic-type-button-secondary-weight); }
.fic-footer__button--ghost:hover:not(:disabled):not([aria-disabled="true"]) { background: rgba(255, 255, 255, .08); }
.fic-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, 1.35fr);
  gap: 40px;
  align-items: start;
  padding-block: 56px;
}
.fic-footer__main > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.fic-footer__logo {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  text-decoration: none;
}
.fic-footer__logo-mark {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(201, 168, 76, .22));
}
.fic-footer__logo-name {
  display: block;
  color: var(--fic-white);
  font: 800 17px/1.2 var(--fic-font-heading);
}
.fic-footer__logo-sub {
  display: block;
  margin-top: 2px;
  color: var(--fic-gold);
  font: 800 11px/1.4 var(--fic-font-heading);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.fic-footer__description {
  max-width: 290px;
  margin: 0 0 20px;
  color: var(--fic-text-on-dark-muted);
  font-size: 14px;
  line-height: 1.7;
}
.fic-footer__heading {
  margin: 0 0 20px;
  color: var(--fic-white);
  font: 800 12px/1.4 var(--fic-font-heading);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fic-footer__heading::after {
  display: block;
  width: 24px;
  height: 2px;
  margin-top: 12px;
  background: var(--fic-gold);
  content: "";
}
.fic-footer__links {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fic-footer__nav .fic-footer__links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
}
.fic-footer__links li {
  min-width: 0;
}
.fic-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  max-width: 100%;
  color: var(--fic-text-on-dark-muted);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
  transition: color .2s ease;
}
.fic-footer__links a::before {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  background: var(--fic-gold);
  transform: rotate(45deg);
  opacity: .5;
  content: "";
  transition: opacity .2s ease;
}
.fic-footer__links a:hover, .fic-footer__links a:focus-visible {
  color: var(--fic-gold-light);
}
.fic-footer__links a:hover::before, .fic-footer__links a:focus-visible::before {
  opacity: 1;
}
.fic-footer__contact-card {
  border: 1px solid var(--fic-edge-gold);
  border-radius: var(--fic-radius-card);
  padding: 6px 20px 18px;
  background: var(--fic-teal-mid);
  box-shadow: var(--fic-shadow-card-dark);
}
.fic-footer__contact-card .fic-footer__heading {
  margin: 0;
  padding: 14px 0 6px;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}
.fic-footer__contact-card .fic-footer__heading::after {
  content: none;
}
.fic-footer__contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fic-footer__contact-list > li {
  padding-block: 11px;
  border-bottom: 1px solid var(--fic-line-on-dark);
}
.fic-footer__contact-list > li:last-child {
  border-bottom: 0;
}
.fic-footer__contact-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.fic-footer__contact-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 168, 76, .3);
  border-radius: 9px;
  background: var(--fic-teal-deep);
  color: var(--fic-gold);
}
.fic-footer__contact-icon .fic-icon {
  width: 17px;
  height: 17px;
}
.fic-footer__contact-label {
  display: block;
  color: var(--fic-text-on-dark-muted);
  font: 800 12px/1.5 var(--fic-font-heading);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.fic-footer__contact-value {
  display: block;
  overflow-wrap: anywhere;
  color: var(--fic-white);
  font-size: 14px;
  font-style: normal;
  line-height: 1.4;
  transition: color .2s ease;
}
a.fic-footer__contact-link:hover .fic-footer__contact-value, a.fic-footer__contact-link:focus-visible .fic-footer__contact-value {
  color: var(--fic-gold-light);
}
.fic-footer__social-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  border-top: 1px solid var(--fic-line-on-dark);
  padding-top: 16px;
}
.fic-footer__social-links {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 8px;
}
.fic-footer__social-label {
  margin-right: auto;
  color: var(--fic-text-on-dark-muted);
  font: 800 12px/1.4 var(--fic-font-heading);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.fic-footer__social {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fic-line-on-dark);
  border-radius: var(--fic-radius-circle);
  background: var(--fic-teal-deep);
  color: var(--fic-white);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.fic-footer__social .fic-icon {
  width: 17px;
  height: 17px;
}
.fic-footer__social:hover {
  border-color: var(--fic-gold);
  background: var(--fic-gold);
  color: var(--fic-teal-deep);
}
.fic-footer__base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  border-top: 1px solid var(--fic-line-on-dark);
  padding: 22px 0 26px;
}
.fic-footer__legal {
  margin: 0;
  color: var(--fic-text-on-dark-muted);
  font-size: 13px;
  line-height: 1.6;
}
.fic-footer__policy-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fic-footer__policy-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fic-text-on-dark-muted);
  font-size: 13px;
  text-decoration: none;
  transition: color .2s ease;
}
.fic-footer__policy-links a:hover {
  color: var(--fic-white);
}

/* v2 8.6: give compact breadcrumb links a 44px hit area without changing their layout. */
:is(nav[class*="crumbs"], [class*="__breadcrumb"]) a {
  position: relative;
}
:is(nav[class*="crumbs"], [class*="__breadcrumb"]) a::after {
  position: absolute;
  inset: -13px -4px;
  content: "";
}
.fic-footer__recaptcha {
  flex-basis: 100%;
  margin: 0;
  color: var(--fic-text-on-dark-muted);
  font-size: 12px;
  line-height: 1.6;
}
.fic-footer__recaptcha a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fic-footer__recaptcha a:hover {
  color: var(--fic-white);
}
/* Google's notice above replaces its floating badge; visibility keeps reCAPTCHA working. */
.grecaptcha-badge {
  visibility: hidden;
}
.fic-footer a:focus-visible {
  outline: 2px solid var(--fic-gold);
  outline-offset: 3px;
}
.fic-footer__button:not(.fic-footer__button--ghost):focus-visible {
  outline-color: var(--fic-teal-deep);
  outline-offset: -4px;
}
.fic-footer .fic-icon {
  display: block;
}
@media (max-width: 1024px) {
  .site-footer {
    padding-top: 56px;
  }
  .fic-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}
@media (max-width: 768px) {
  .site-footer {
    padding-top: 48px;
  }
  .fic-footer__support-copy {
    flex-direction: column;
    align-items: flex-start;
  }
  .fic-footer__actions {
    width: 100%;
  }
  .fic-footer__button {
    flex: 1 1 120px;
  }
  .fic-footer__main {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding-block: 44px;
  }
  .fic-footer__base {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 480px) {
  .fic-footer__actions { flex-direction: column; align-items: stretch; }
  .fic-footer__button { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fic-footer__button, .fic-footer__links a, .fic-footer__links a::before, .fic-footer__contact-value, .fic-footer__social, .fic-footer__policy-links a {
    transition: none;
  }
  .fic-footer__button:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
  }
}

.fic-not-found-page {
  background: var(--fic-teal-deep);
}

.fic-not-found {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--fic-header-height));
  display: flex;
  align-items: center;
  background: var(--fic-teal-deep);
  padding: 160px var(--fic-container-pad) 104px;
}

.fic-not-found__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.fic-not-found__code {
  margin: 28px 0 0;
  color: rgba(201, 168, 76, 0.18);
  font-family: var(--fic-font-heading);
  font-size: 124px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.82;
}

.fic-not-found__title {
  max-width: 720px;
  margin: 22px auto 0;
  color: var(--fic-white);
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-hero-size);
  font-weight: var(--fic-type-hero-weight);
  letter-spacing: var(--fic-type-hero-tracking);
  line-height: var(--fic-type-hero-leading);
}

.fic-not-found__intro {
  max-width: 620px;
  margin: 22px auto 0;
  color: var(--fic-text-on-dark-mid);
  font-size: var(--fic-type-lead-size);
  line-height: var(--fic-type-lead-leading);
}

.fic-not-found__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.fic-not-found__actions .fic-icon {
  display: block;
  flex: 0 0 auto;
}

.fic-not-found__actions .fic-button-primary,
.fic-not-found__actions .fic-button-ghost {
  gap: 9px;
}

@media (max-width: 768px) {
  .fic-not-found {
    min-height: calc(100vh - var(--fic-header-height));
    padding: 132px var(--fic-container-pad) 72px;
  }

  .fic-not-found__code {
    font-size: 82px;
  }

  .fic-not-found__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.fic-legal-page {
  background: var(--fic-surface);
}

.fic-legal-hero {
  position: relative;
  overflow: hidden;
  background: var(--fic-teal-deep);
  padding-inline: var(--fic-container-pad);
}

.fic-legal-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--fic-container-max);
  margin-inline: auto;
}

.fic-legal-hero h1 {
  max-width: 820px;
  margin: 0;
  color: var(--fic-white);
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-hero-size);
  font-weight: var(--fic-type-hero-weight);
  letter-spacing: var(--fic-type-hero-tracking);
  line-height: var(--fic-type-hero-leading);
}

.fic-legal-hero p {
  max-width: 680px;
  margin: var(--fic-space-sm) 0 0;
  color: var(--fic-text-on-dark-mid);
  font-size: var(--fic-type-lead-size);
  line-height: var(--fic-type-lead-leading);
}

.fic-legal-hero__inner > span {
  display: inline-flex;
  margin-top: 24px;
  border: 1px solid rgba(201, 168, 76, .4);
  border-radius: var(--fic-radius-circle);
  background: var(--fic-teal-mid);
  color: var(--fic-gold);
  font-family: var(--fic-font-heading);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 9px 14px;
}

.fic-legal-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  padding: 0;
  margin: 0 0 var(--fic-space-md);
  list-style: none;
}

.fic-legal-crumbs {
  color: var(--fic-text-on-dark-muted);
  font-size: var(--fic-type-small-size);
}

.fic-legal-crumbs li {
  min-width: 0;
}

.fic-legal-crumbs a {
  color: inherit;
  text-decoration: none;
}

.fic-legal-crumbs a:hover {
  color: var(--fic-gold-light);
  text-decoration: underline;
}

.fic-legal-crumbs li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--fic-gold);
}

.fic-legal-crumbs [aria-current] {
  display: inline-block;
  max-width: 32ch;
  overflow: hidden;
  color: var(--fic-white);
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.fic-legal-content {
  padding: var(--fic-section-pad-y) var(--fic-container-pad);
}

.fic-legal-content__inner {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  border: 1px solid rgba(11, 53, 54, 0.08);
  border-radius: var(--fic-radius-card);
  background: var(--fic-white);
  box-shadow: var(--fic-shadow-subtle);
  padding: 54px;
}

.fic-legal-content h2 {
  margin: 48px 0 14px;
  color: var(--fic-teal-deep);
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-subheading-size);
  font-weight: var(--fic-type-subheading-weight);
  letter-spacing: var(--fic-type-subheading-tracking);
  line-height: var(--fic-type-subheading-leading);
}

.fic-legal-content h2:first-child {
  margin-top: 0;
}

.fic-legal-content h3 {
  margin: 30px 0 10px;
  color: var(--fic-teal-mid);
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-prose-subheading-size);
  font-weight: var(--fic-type-prose-subheading-weight);
  letter-spacing: var(--fic-type-tracking);
  line-height: var(--fic-type-prose-subheading-leading);
}

.fic-legal-content p,
.fic-legal-content li {
  color: var(--fic-text-mid);
  font-size: var(--fic-type-reading-size);
  line-height: var(--fic-type-reading-leading);
}

.fic-legal-content p {
  margin: 0 0 18px;
}

.fic-legal-content ul {
  display: grid;
  gap: 9px;
  margin: 0 0 22px 22px;
  padding: 0;
}

.fic-legal-content a {
  color: var(--fic-teal-mid);
  font-weight: 800;
}

.fic-legal-contact {
  display: grid;
  gap: 14px;
  margin: 22px 0 28px;
  border: 1px solid var(--fic-edge-gold);
  border-radius: var(--fic-radius-card);
  background: var(--fic-surface);
  padding: 22px;
}

.fic-legal-contact div {
  display: grid;
  gap: 3px;
}

.fic-legal-contact span {
  color: var(--fic-text-light);
  font-family: var(--fic-font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fic-legal-contact strong,
.fic-legal-contact a {
  color: var(--fic-teal-deep);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
}

.entry-content > * {
  max-width: 760px;
}

.entry-content > .alignwide {
  max-width: var(--fic-container-max);
}

.entry-content > .alignfull {
  max-width: none;
}

.entry-content a {
  color: var(--fic-teal-mid);
  font-weight: 700;
}

.entry-summary {
  color: var(--fic-text-mid);
}

@media (max-width: 1024px) {
  .fic-legal-content__inner {
    padding: 42px;
  }
}

@media (max-width: 768px) {
  .fic-legal-content__inner {
    padding: 26px;
  }

  .fic-legal-content h2 {
    margin-top: 38px;
  }
}

/* Canonical public Event card. Layout belongs to its containing grid. */
.fic-event-card {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border-radius: var(--fic-radius-card);
  background: var(--fic-white);
  box-shadow: var(--fic-shadow-rest);
  transition: box-shadow .22s ease, transform .22s ease;
}

.fic-event-card:hover,
.fic-event-card:focus-within {
  box-shadow: var(--fic-shadow-raised);
  transform: translateY(-3px);
}

.fic-event-card__header {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background: var(--fic-teal-deep);
  padding: 20px 22px;
}

.fic-event-card__date {
  position: relative;
  flex: 0 1 auto;
  min-width: 74px;
  max-width: 48%;
  border: 1px solid rgba(201, 168, 76, .4);
  border-radius: 10px;
  background: var(--fic-teal-mid);
  padding: 10px 14px;
  text-align: center;
  overflow-wrap: anywhere;
}

.fic-event-card__day {
  color: var(--fic-gold);
  font-family: var(--fic-font-heading);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}

.fic-event-card__caption {
  margin-top: 5px;
  color: rgba(255, 255, 255, .65);
  font-family: var(--fic-font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.fic-event-card[data-type="recurring"] .fic-event-card__day {
  font-size: 20px;
  line-height: 1.25;
  text-transform: uppercase;
}

.fic-event-card__date--soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 92px;
}

.fic-event-card__date--soon .fic-icon {
  color: var(--fic-gold);
}

.fic-event-card__date--soon .fic-event-card__day {
  font-size: 13px;
  letter-spacing: .02em;
  line-height: 1.15;
}

.fic-event-card__badges {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.fic-event-card__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  padding: 22px 22px 18px;
}

.fic-event-card__title {
  margin: 0 0 8px;
  color: var(--fic-teal-deep);
  font-family: var(--fic-font-heading);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.fic-event-card__title a {
  color: inherit;
  text-decoration: none;
}

.fic-event-card__title a::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--fic-radius-card);
  content: "";
}

.fic-event-card__title a:focus-visible::after {
  outline: 2px solid var(--fic-focus-light);
  outline-offset: -3px;
}

.fic-event-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0 0 16px;
  color: var(--fic-text-mid);
  font-family: var(--fic-font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.fic-event-card__details {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.fic-event-card__details li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--fic-text-mid);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.fic-event-card__details .fic-icon {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--fic-teal-bright);
}

.fic-event-card__details strong {
  color: var(--fic-text-dark);
  font-weight: 700;
}

.fic-event-card__notices {
  margin-bottom: 18px;
}

.fic-event-card__status-note {
  margin: 0;
  color: var(--fic-teal-mid);
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.fic-event-card__status-note + .fic-event-card__status-note {
  margin-top: 8px;
}

.fic-event-card__foot {
  display: flex;
  min-height: 53px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  border-top: 1px solid var(--fic-surface);
  padding-top: 14px;
}

.fic-event-card__cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fic-teal-deep);
  font-family: var(--fic-font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: gap .2s ease;
}

.fic-event-card:hover .fic-event-card__cue,
.fic-event-card:focus-within .fic-event-card__cue {
  gap: 10px;
}

.fic-event-card__add {
  position: relative;
  z-index: 2;
  display: flex;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--fic-radius-circle);
  background: var(--fic-surface);
  color: var(--fic-teal-mid);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.fic-event-card__add:hover {
  background: var(--fic-teal-deep);
  color: var(--fic-gold);
}

.fic-event-card__add:focus-visible {
  outline: 2px solid var(--fic-focus-light);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fic-event-card,
  .fic-event-card__cue,
  .fic-event-card__add {
    transition: none;
  }

  .fic-event-card:hover,
  .fic-event-card:focus-within {
    transform: none;
  }
}

/* Explicit public form contexts. Layout, grid and outer surface remain independent. */
.fic-form--light {
  --fic-form-control-bg: var(--fic-surface);
  --fic-form-control-focus-bg: var(--fic-surface);
  --fic-form-control-text: var(--fic-text-dark);
  /* Ivory/alt alone is only 1.09:1; define fields on both white and ivory. */
  --fic-form-control-border: rgba(11, 53, 54, .55);
  --fic-form-placeholder: var(--fic-text-light);
  --fic-form-label: var(--fic-teal-deep);
  --fic-form-invalid: var(--fic-danger);
  --fic-control-disabled-bg: var(--fic-surface-alt);
  --fic-control-disabled-text: var(--fic-text-light);
  --fic-focus-color: var(--fic-teal-deep);
  color-scheme: light;
}
.fic-form--dark {
  --fic-form-control-bg: var(--fic-teal-deep);
  --fic-form-control-focus-bg: var(--fic-teal-deep);
  --fic-form-control-text: var(--fic-white);
  --fic-form-control-border: var(--fic-line-on-dark);
  --fic-form-placeholder: var(--fic-text-on-dark-muted);
  --fic-form-label: var(--fic-white);
  --fic-form-invalid: var(--fic-danger-on-dark);
  --fic-control-disabled-bg: var(--fic-teal-light);
  --fic-control-disabled-text: var(--fic-text-on-dark-mid);
  --fic-focus-color: var(--fic-gold);
  color-scheme: dark;
}
.fic-form label { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; }
/* iOS Safari sizes native pickers from their own value and can overflow the field column. */
.fic-form input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
}
.fic-form .fic-form__label,
.fic-form label > span { color: var(--fic-form-label); }
.fic-form :is(input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])), select, textarea) {
  background: var(--fic-form-control-bg);
  border-color: var(--fic-form-control-border);
  color: var(--fic-form-control-text);
}
.fic-form :is(input, textarea)::placeholder { color: var(--fic-form-placeholder); opacity: 1; }
.fic-form :is(input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])), select, textarea):where(:hover:not(:disabled):not(:focus)) { border-color: var(--fic-gold); }
.fic-form :is(input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])), select, textarea):focus {
  background: var(--fic-form-control-focus-bg);
  border-color: var(--fic-gold);
}
.fic-form :focus-visible { outline: 2px solid var(--fic-focus-color); outline-offset: 3px; }
.fic-form :is(input, select, textarea)[aria-invalid="true"],
.fic-form :is(input, select, textarea):user-invalid,
.fic-form.is-validated :is(input, select, textarea):invalid { border-color: var(--fic-form-invalid); }
.fic-form :is(input, select, textarea):disabled { opacity: 1; cursor: not-allowed; }
.fic-form :is(input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])), select, textarea):disabled {
  background: var(--fic-control-disabled-bg);
  border-color: var(--fic-control-disabled-bg);
  color: var(--fic-control-disabled-text);
  -webkit-text-fill-color: var(--fic-control-disabled-text);
}
.fic-form :is(input, textarea):disabled::placeholder { color: var(--fic-control-disabled-text); opacity: 1; }
.fic-form--dark option { background: var(--fic-teal-deep); color: var(--fic-white); }
/* Native autofill can otherwise paint light text on a browser-supplied white field. */
.fic-form.fic-form--dark input:is(:autofill, :-webkit-autofill) {
  -webkit-text-fill-color: var(--fic-white);
  box-shadow: 0 0 0 1000px var(--fic-teal-deep) inset;
  caret-color: var(--fic-white);
}
.fic-form.fic-form--dark input:is(:autofill, :-webkit-autofill):focus {
  box-shadow: 0 0 0 1000px var(--fic-teal-deep) inset, 0 0 3px rgba(201, 168, 76, .25);
}
.fic-form.fic-form--dark input:is(:autofill, :-webkit-autofill):disabled {
  -webkit-text-fill-color: var(--fic-control-disabled-text);
  box-shadow: 0 0 0 1000px var(--fic-control-disabled-bg) inset;
}
.fic-form__success {
  border: 1px solid var(--fic-success);
  border-left-width: 3px;
  border-radius: var(--fic-radius-sm);
  background: var(--fic-success-surface);
  color: var(--fic-success);
  padding: 14px 16px;
  font-size: var(--fic-type-support-size);
  font-weight: var(--fic-type-support-weight);
  line-height: var(--fic-type-support-leading);
  letter-spacing: var(--fic-type-tracking);
}
.fic-form--dark .fic-form__success { background: var(--fic-teal-deep); color: var(--fic-success-on-dark); border-color: var(--fic-success-on-dark); }
.fic-form--dark .fic-form__error { background: var(--fic-teal-deep); color: var(--fic-danger-on-dark); border-color: var(--fic-danger-on-dark); }
.fic-form--dark :is(.fic-form__error, .fic-form__success):focus-visible { outline-color: var(--fic-gold); }
/* Status icon: decorative (no text content); the message words remain the signal. Glyphs come from fic_icon(). */
:is(.fic-form__error, .fic-form__success)[role] { position: relative; padding: 14px 16px 14px 42px; }
:is(.fic-form__error, .fic-form__success)[role]::before { content: ""; position: absolute; left: 16px; top: 17px; top: calc(14px + (1lh - 18px) / 2); width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--fic-icon-alert) center / 18px 18px no-repeat; mask: var(--fic-icon-alert) center / 18px 18px no-repeat; }
.fic-form__success[role]::before { -webkit-mask-image: var(--fic-icon-check); mask-image: var(--fic-icon-check); }
@media (forced-colors: active) { :is(.fic-form__error, .fic-form__success)[role]::before { background-color: CanvasText; forced-color-adjust: none; } }
@media (prefers-reduced-motion: reduce) {
  .fic-form :is(input, select, textarea) { transition: none; }
}

/* Compact public modal shell. Services aliases preserve compatibility. */
.fic-modal-overlay,
.sv-modal-overlay {
  position: fixed;
  inset: 0 0 auto;
  top: var(--fic-modal-viewport-top, 0px);
  height: var(--fic-modal-viewport-height, 100vh);
  height: var(--fic-modal-viewport-height, 100dvh);
  box-sizing: border-box;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--fic-scrim);
  opacity: 0;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  pointer-events: none;
  transition: opacity var(--fic-modal-transition-duration, 0.25s) ease;
}

.fic-modal-overlay[hidden],
.sv-modal-overlay[hidden] {
  display: none;
}

.fic-modal-overlay.is-open,
.sv-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.fic-modal,
.sv-modal {
  position: relative;
  width: 100%;
  max-width: var(--fic-modal-max-width, 680px);
  max-height: min(var(--fic-modal-max-height, 760px), var(--fic-modal-viewport-ratio, 85%), calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  display: flex;
  overflow: hidden;
  flex-direction: column;
  isolation: isolate;
  border-radius: var(--fic-radius-card);
  background: var(--fic-surface);
  box-shadow: var(--fic-shadow-deep);
  transform: translateY(20px) scale(0.98);
  transition: transform var(--fic-modal-transition-duration, 0.3s) ease;
}

.fic-modal-overlay.is-open .fic-modal,
.sv-modal-overlay.is-open .sv-modal {
  transform: translateY(0) scale(1);
}

.fic-modal__close,
.sv-modal__close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--fic-modal-close-border, rgba(255, 255, 255, 0.3));
  border-radius: var(--fic-radius-sm);
  background: var(--fic-modal-close-bg, transparent);
  color: var(--fic-modal-close-color, var(--fic-white));
  cursor: pointer;
}

.fic-modal__close:hover,
.sv-modal__close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.fic-modal__close:focus-visible,
.sv-modal__close:focus-visible {
  outline: 2px solid var(--fic-modal-close-focus, var(--fic-gold));
  outline-offset: 3px;
}

.fic-modal__body,
.sv-modal__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--fic-white);
  padding: var(--fic-modal-body-padding, 30px 32px);
}

.fic-modal__footer,
.sv-modal__footer {
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--fic-surface-alt);
  background: var(--fic-white);
  padding: var(--fic-modal-footer-padding, 12px 32px);
}

.fic-modal [hidden],
.sv-modal [hidden] {
  display: none !important;
}

.fic-modal__header,
.sv-modal__header { flex: 0 0 auto; }
@media (max-width: 768px) {
  .fic-modal-overlay,
  .sv-modal-overlay { padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .fic-modal,
  .sv-modal { max-height: min(var(--fic-modal-max-height-mobile, 100%), var(--fic-modal-viewport-ratio-mobile, 82%), calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
  .fic-modal__body,
  .sv-modal__body { padding: var(--fic-modal-body-padding-mobile, 20px); }
  .fic-modal__footer,
  .sv-modal__footer { padding: var(--fic-modal-footer-padding-mobile, 10px 20px); }
}
@media (prefers-reduced-motion: reduce) {
  .fic-modal-overlay,
  .sv-modal-overlay,
  .fic-modal,
  .sv-modal { transition: none; }
}


.fic-modal__header--light {
  --fic-modal-close-border: rgba(11, 53, 54, .2);
  --fic-modal-close-bg: var(--fic-white);
  --fic-modal-close-color: var(--fic-teal-deep);
  --fic-modal-close-focus: var(--fic-teal-deep);
}