/* metaform — minimal overrides on top of Tailwind.
   Only rules that Tailwind utilities can't elegantly replace live here:
   - FullCalendar theming (third-party component, can't reach with utilities)
   - Modal fade-in keyframe
*/

html { font-size: 17.2px; }

/* No italics anywhere — overrides browser defaults for <em>/<i> and Tailwind prose plugin */
em, i, cite, blockquote,
.prose :where(em, i, cite, blockquote, blockquote p) {
  font-style: normal;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Mobile / tablet menu — reliable scroll on iOS */
#mobile-menu-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Logo — fixed aspect ratio (works when Tailwind build is missing/stale on deploy) */
.header-logo-slot {
  max-width: min(11rem, 58vw);
}

.mf-logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  max-width: 100%;
}

.mf-logo-link .mf-logo-img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  object-position: left center;
  aspect-ratio: 769 / 211;
}

.mf-logo-link--header .mf-logo-img {
  height: 2rem;
  max-height: 2rem;
}

.mf-logo-link--footer .mf-logo-img {
  height: 2.5rem;
  max-height: 2.5rem;
}

@media (min-width: 640px) {
  .mf-logo-link--header .mf-logo-img {
    height: 2.25rem;
    max-height: 2.25rem;
  }

  .mf-logo-link--footer .mf-logo-img {
    height: 2.75rem;
    max-height: 2.75rem;
  }
}

@media (min-width: 1280px) {
  .header-logo-slot {
    max-width: none;
  }

  .mf-logo-link--header .mf-logo-img {
    height: 2.5rem;
    max-height: 2.5rem;
  }
}

.mf-logo-link:hover .mf-logo-img {
  opacity: 0.8;
}

/* FullCalendar theming to match our cream/ink/bronze palette */
.fc {
  --fc-border-color: #e7e5e4;
  --fc-page-bg-color: #ffffff;
  --fc-neutral-bg-color: #fbf9f5;
  --fc-today-bg-color: #f7f3ee;
  --fc-now-indicator-color: #a3836b;
  --fc-button-bg-color: #1c1917;
  --fc-button-border-color: #1c1917;
  --fc-button-hover-bg-color: #6f5543;
  --fc-button-hover-border-color: #6f5543;
  --fc-button-active-bg-color: #6f5543;
  --fc-button-active-border-color: #6f5543;
  --fc-button-text-color: #fbf9f5;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
}
.fc .fc-toolbar-title {
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.75rem;
  color: #1c1917;
  letter-spacing: -0.01em;
}
.fc .fc-button {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.6875rem;
  padding: 0.5rem 1rem;
  border-radius: 0;
  box-shadow: none !important;
}
.fc .fc-col-header-cell-cushion {
  color: #78716c;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.6875rem;
  padding: 12px 6px;
}
.fc .fc-timegrid-slot-label {
  color: #a8a29e;
  font-size: 0.6875rem;
}
.fc-event {
  border: none !important;
  border-radius: 0 !important;
  padding: 2px 6px !important;
  font-size: 0.75rem;
  cursor: pointer;
  transition: opacity 150ms;
}
.fc-event:hover { opacity: 0.85; }
.fc-event .fc-event-title { font-weight: 500; }
.fc .fc-daygrid-day-number {
  color: #44403c;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  padding: 8px;
}
.fc-day-today {
  background: #f7f3ee !important;
}

/* ── Article detail — editorial layout (scoped to .article-page) ─────────── */
.article-page {
  background-color: #f7f3ee;
  min-height: 60vh;
}

.article-shell {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 1.5rem 4rem;
}

@media (min-width: 768px) {
  .article-shell {
    padding: 4rem 2.5rem 5rem;
  }
}

.article-back {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(28, 25, 23, 0.45);
  text-decoration: none;
  transition: color 0.2s ease;
}

.article-back:hover {
  color: #8a6b54;
}

.article-hero {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-bottom: 2.5rem;
}

.article-shell.has-cover .article-hero {
  padding-bottom: 3rem;
}

.article-shell.no-cover .article-hero {
  padding-bottom: 1.75rem;
}

.article-date {
  margin: 0 0 1.25rem;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #a3836b;
}

.article-title {
  margin: 0;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 1.5rem + 3.5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #1c1917;
}

.article-summary {
  margin: 1.75rem auto 0;
  max-width: 42rem;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(68, 64, 60, 0.88);
}

.article-cover {
  margin: 0 auto 3rem;
  max-width: 1120px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(28, 25, 23, 0.06);
  box-shadow:
    0 1px 2px rgba(28, 25, 23, 0.04),
    0 24px 60px -20px rgba(28, 25, 23, 0.12);
}

.article-cover img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── Article body: wide wrap + Tailwind prose for CMS HTML (tables, code, etc.) ─ */
.article-page .article-shell .article-body-wrap {
  max-width: min(1080px, 100%);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.article-shell.has-cover .article-body-wrap {
  margin-top: 36px;
}

.article-shell.no-cover .article-body-wrap {
  margin-top: 48px;
}

.article-body-wrap::after {
  content: "";
  display: block;
  height: 1px;
  background: rgba(42, 37, 34, 0.1);
  margin-top: 72px;
}

@media (max-width: 767px) {
  .article-body-wrap::after {
    margin-top: 48px;
  }
}

/* Base text: smaller than hero title + summary (description) for clear hierarchy */
.article-page .article-body-wrap .article-content.prose {
  color: #433c37;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem; /* 17px — below .article-summary max ~1.375rem */
  line-height: 1.82;
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
}

.article-page .article-body-wrap .article-content.prose p:empty {
  display: none;
}

/* Lead vs normal opening — still subordinate to .article-summary */
.article-shell.no-summary .article-body-wrap .article-content.prose > p:first-of-type {
  font-size: 1.25rem; /* 20px — lead, but under title / typical summary */
  line-height: 1.5;
  color: #2a2522;
  font-weight: 500;
}

.article-shell.has-summary .article-body-wrap .article-content.prose > p:first-of-type {
  font-size: 1.0625rem;
  line-height: 1.82;
  color: #433c37;
}

/* Headings — editorial scale over prose defaults */
.article-page .article-body-wrap .article-content.prose h2,
.article-page .article-body-wrap .article-content.prose h3,
.article-page .article-body-wrap .article-content.prose h4 {
  color: #2a2522;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.article-page .article-body-wrap .article-content.prose h2 {
  font-size: 2.375rem;
  margin-top: 1.8em;
  margin-bottom: 0.4em;
}

.article-page .article-body-wrap .article-content.prose h3 {
  font-size: 1.875rem;
  margin-top: 1.8em;
  margin-bottom: 0.4em;
}

.article-page .article-body-wrap .article-content.prose h4 {
  font-size: 1.5rem;
  margin-top: 1.8em;
  margin-bottom: 0.4em;
}

.article-page .article-body-wrap .article-content.prose > h2:first-child,
.article-page .article-body-wrap .article-content.prose > h3:first-child,
.article-page .article-body-wrap .article-content.prose > h4:first-child {
  margin-top: 0;
}

.article-page .article-body-wrap .article-content.prose a {
  color: #6f5543;
  text-decoration-color: rgba(163, 131, 107, 0.5);
}

.article-page .article-body-wrap .article-content.prose a:hover {
  color: #2a2522;
}

/* Pull-quote blockquote (overrides prose blockquote) */
.article-page .article-body-wrap .article-content.prose blockquote {
  border-left: none;
  padding-left: 0;
  font-size: 2.5rem;
  line-height: 1.1;
  color: #2a2522;
  letter-spacing: -0.02em;
}

.article-page .article-body-wrap .article-content.prose blockquote p {
  margin-top: 0;
  margin-bottom: 0;
}

/* Figures / captions from CMS */
.article-page .article-body-wrap .article-content.prose figcaption {
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(67, 60, 55, 0.75);
  margin-top: 0.5em;
}

/* Inline images in body */
.article-page .article-body-wrap .article-content.prose img {
  border-radius: 16px;
  border: 1px solid rgba(42, 37, 34, 0.06);
  box-shadow:
    0 1px 2px rgba(42, 37, 34, 0.04),
    0 12px 32px -12px rgba(42, 37, 34, 0.14);
}

/* ── Mobile adjustments ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .article-shell.has-cover .article-body-wrap {
    margin-top: 28px;
  }

  .article-shell.no-cover .article-body-wrap {
    margin-top: 36px;
  }

  .article-page .article-body-wrap .article-content.prose {
    font-size: 1rem; /* 16px on small screens */
    line-height: 1.8;
  }

  .article-shell.no-summary .article-body-wrap .article-content.prose > p:first-of-type {
    font-size: 1.125rem; /* 18px lead on mobile */
    line-height: 1.5;
  }

  .article-shell.has-summary .article-body-wrap .article-content.prose > p:first-of-type {
    font-size: 1rem;
  }

  .article-page .article-body-wrap .article-content.prose h2 {
    font-size: 2rem;
  }

  .article-page .article-body-wrap .article-content.prose h3 {
    font-size: 1.625rem;
  }

  .article-page .article-body-wrap .article-content.prose h4 {
    font-size: 1.3125rem;
  }

  .article-page .article-body-wrap .article-content.prose blockquote {
    font-size: 1.75rem;
    line-height: 1.15;
  }

  .article-page .article-body-wrap .article-content.prose img {
    border-radius: 12px;
  }
}