/* ============================================================
   Lancashire Knights Templar — Provincial Priory
   Stylesheet
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --c-bg:           #0c0a09;        /* near-black */
  --c-bg-soft:      #181513;
  --c-cream:        #f5efe3;        /* warm ivory used for body sections */
  --c-cream-deep:   #ece4d2;
  --c-red:          #a51c1c;        /* templar red */
  --c-red-dark:     #7a1414;
  --c-red-bright:   #c92626;
  --c-gold:         #b89465;
  --c-ink:          #1d1a17;        /* primary text on cream */
  --c-ink-soft:     #5a5048;
  --c-line:         rgba(255,255,255,0.08);
  --c-line-dark:    rgba(0,0,0,0.08);
  --shadow-lg:      0 30px 60px -20px rgba(0,0,0,0.5);
  --shadow-md:      0 10px 30px -10px rgba(0,0,0,0.4);

  /* --- Extended palette: promoted from inline styles so a rebrand
         only needs to touch this block. Grouped by purpose. --- */
  --c-white:         #fff;          /* solid white surfaces */
  --c-cream-pale:    #fdfbf5;       /* faint parchment row/card backgrounds */
  --c-red-accent:    #ee2a1a;       /* bright accent red (section eyebrows) */

  /* Status / state colours */
  --c-success:       #2f7d32;       /* active · published · yes */
  --c-warning:       #b45309;       /* warning text */
  --c-pending:       #8a6a2f;       /* invitation pending · notice icon */

  /* Notice / callout (parchment-gold) */
  --c-notice-bg:     #fef9ea;
  --c-notice-border: #e6d8a8;
  --c-notice-ink:    #5a4a1c;

  /* UI tints */
  --c-border-input:  rgba(0,0,0,0.18);  /* form field & textarea borders */
  --c-divider:       rgba(0,0,0,0.2);   /* faint " · " separators */

  --f-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --f-body:    "Lora", Georgia, serif;
  --f-eyebrow: "Cormorant SC", "Cormorant Garamond", Georgia, serif;

  --maxw: 1240px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--dark  { background: var(--c-bg); color: var(--c-cream); }
.section--cream { background: var(--c-cream); }

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 1.5rem 0;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--c-cream);
}
.brand__seal {
  width: 56px; height: 56px;
  flex: 0 0 56px;
}
.brand__text {
  line-height: 1.1;
}
.brand__pre {
  display: block;
  font-family: var(--f-eyebrow);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--c-cream);
  text-transform: uppercase;
  opacity: 0.9;
}
.brand__name {
  display: block;
  font-family: var(--f-display);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-cream);
}
.brand__sub {
  display: block;
  font-family: var(--f-eyebrow);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--c-red-bright);
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.main-nav ul {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  display: inline-block;
  padding: 0.6rem 1rem;
  color: var(--c-cream);
  font-family: var(--f-eyebrow);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
  transition: color 0.2s ease;
}
.main-nav a:hover,
.main-nav a.is-active {
  color: var(--c-red-bright);
}
.main-nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 1rem; right: 1rem;
  bottom: 0.35rem;
  height: 1px;
  background: var(--c-red-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.main-nav a:not(.btn):hover::after,
.main-nav a.is-active::after { transform: scaleX(1); }

.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--c-cream);
  padding: 0.5rem;
}
.menu-toggle svg { width: 24px; height: 24px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 720px;
  background: var(--c-bg);
  color: var(--c-cream);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 75% 50%, rgba(165,28,28,0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(122,20,20,0.25) 0%, transparent 60%),
    linear-gradient(180deg, #0c0a09 0%, #1a0d0d 60%, #0c0a09 100%);
  z-index: -2;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 3rem;
  padding-block: 8rem 5rem;
}
.hero__copy { max-width: 560px; }
.hero__heading {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
}
/* The three hero words are separate block lines (Tradition / Integrity /
   Brotherhood). At the large clamped font-size, tall letters and
   descenders on adjacent lines were almost touching, so we give each
   line a little breathing room between lines only. Tune 0.18em to taste. */
.hero__heading span { display: block; }
.hero__heading span + span { margin-top: 0.18em; }
/* Knights Templar cross pattée: a small red mark that follows each
   hero word. Sized in em so it scales with the heading's clamp()
   font-size. Aligned to the BASELINE — the bottom of the cross
   sits on the same horizontal line as the bottom of the letters
   (excluding descenders), giving a small heraldic punctuation
   effect rather than a floating ornament. */
.hero__cross {
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  margin-left: 0.1em;
  vertical-align: baseline;
  fill: var(--c-red-bright);
}
/* Legacy .dot class kept as a no-op alias in case any saved
   setting value still contains an inline <span class="dot">. */
.hero__heading .dot { display: none; }
.hero__rule {
  width: 80px; height: 2px;
  background: var(--c-red-bright);
  margin-bottom: 1.5rem;
}
.hero__eyebrow {
  font-family: var(--f-eyebrow);
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.hero__body {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(245,239,227,0.85);
  margin-bottom: 2rem;
  max-width: 38ch;
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__seal {
  width: clamp(280px, 38vw, 520px);
  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.5));
  animation: gentle-float 8s ease-in-out infinite;
}
@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--f-eyebrow);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.btn--primary {
  background: var(--c-red);
  color: #fff;
}
.btn--primary:hover {
  background: var(--c-red-bright);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(165,28,28,0.6);
}
.btn--ghost {
  background: transparent;
  color: var(--c-cream);
  border-color: rgba(245,239,227,0.4);
}
.btn--ghost:hover {
  border-color: var(--c-cream);
  background: rgba(245,239,227,0.06);
}
.btn--dark {
  background: var(--c-bg);
  color: var(--c-cream);
}
.btn--dark:hover { background: #2a201c; }
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.72rem; }
.btn .icon { width: 16px; height: 16px; }

/* ---------- Section headings ---------- */
.section-eyebrow {
  text-align: center;
  font-family: var(--f-eyebrow);
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  color: var(--c-red);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.section-title {
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0 0 0.6rem;
}
.section-title--dark { color: var(--c-cream); }
.section-rule {
  width: 56px; height: 1px;
  background: var(--c-red);
  margin: 1.25rem auto 0;
}

/* ---------- Principles grid ---------- */
.principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
  position: relative;
}
.principle {
  text-align: center;
  padding: 0 0.5rem;
  position: relative;
}
.principle + .principle::before {
  content: '';
  position: absolute;
  left: -1.25rem; top: 25%; bottom: 25%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.18), transparent);
}
.principle__icon {
  width: 56px; height: 56px;
  margin: 0 auto 1.25rem;
  color: var(--c-red);
}
.principle__title {
  font-family: var(--f-display);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.75rem;
}
.principle__body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
  max-width: 22ch;
  margin: 0 auto;
}

/* ---------- Heritage band ---------- */
.heritage {
  background: var(--c-bg);
  color: var(--c-cream);
}
.heritage__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 460px;
}
.heritage__image {
  /*
   * Decorative placeholder for the heritage block.
   *
   * Layered backgrounds (top-most first):
   *   1. Soft centred glow so the cross feels lit from within
   *   2. Hollow Templar cross watermark in faded red — a clear,
   *      heraldic decoration rather than a failed photo
   *   3. Fine diagonal weave for leather/bookbinding texture
   *   4. Solid dark base
   *
   * Replace with a real photograph once one is available — change just
   * the background-image stack on this rule. The rest of the heritage
   * layout doesn't depend on the placeholder.
   */
  background-color: #1a120e;
  background-image:
    radial-gradient(ellipse at center, rgba(255,240,200,0.05), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' preserveAspectRatio='xMidYMid meet'><g transform='translate(120 120)' fill='none' stroke='%23a51c1c' stroke-opacity='0.32' stroke-width='2.5'><path d='M-25 -85 L25 -85 L25 -25 L85 -25 L85 25 L25 25 L25 85 L-25 85 L-25 25 L-85 25 L-85 -25 L-25 -25 Z'/><path d='M-13 -75 L13 -75 L13 -13 L75 -13 L75 13 L13 13 L13 75 L-13 75 L-13 13 L-75 13 L-75 -13 L-13 -13 Z' stroke-opacity='0.18'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'><path d='M0 0 L6 6 M-3 3 L3 9 M3 -3 L9 3' stroke='%23c9a878' stroke-opacity='0.05' stroke-width='1'/></svg>");
  background-size: cover, min(55%, 300px), 6px 6px;
  background-position: center, center, top left;
  background-repeat: no-repeat, no-repeat, repeat;
}
.heritage__content {
  padding: clamp(2rem, 5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.heritage__eyebrow {
  font-family: var(--f-eyebrow);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--c-red-bright);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.heritage__title {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  font-weight: 500;
  margin: 0 0 1.5rem;
  line-height: 1.1;
}
.heritage__body {
  color: rgba(245,239,227,0.78);
  margin-bottom: 2rem;
  max-width: 50ch;
}
.heritage__points {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.heritage__point {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.92rem;
  line-height: 1.3;
}
.heritage__point svg { width: 24px; height: 24px; color: var(--c-cream); flex: 0 0 24px; }

/* ---------- Why join band ---------- */
.why-join { text-align: center; position: relative; overflow: hidden; }
.why-join__inner { max-width: 820px; margin: 0 auto; }
.why-join__heading {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 500;
  margin: 0 0 1.5rem;
  line-height: 1.15;
}
.why-join__body {
  font-size: 1.05rem;
  color: var(--c-ink-soft);
  max-width: 60ch;
  margin: 0 auto;
}

/* ---------- Bottom dock nav (visual element from mock) ---------- */
.dock-nav {
  background: var(--c-bg);
  color: var(--c-cream);
  padding: 1.25rem 0;
}
.dock-nav__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: 0; padding: 0;
}
.dock-nav__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem;
  font-family: var(--f-eyebrow);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.dock-nav__list a:hover { color: var(--c-red-bright); }
.dock-nav__list svg {
  width: 18px; height: 18px;
  color: var(--c-red-bright);
  flex: none;          /* never let flexbox shrink the icon to nothing */
}

/* ---------- Footer ---------- */
.site-footer {
  background: #050403;
  color: rgba(245,239,227,0.5);
  padding: 2.5rem 0 1.5rem;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}
.site-footer a { color: rgba(245,239,227,0.7); }
.site-footer a:hover { color: var(--c-cream); }

/* ---------- Generic page styles ---------- */
.page {
  background: var(--c-cream);
  min-height: calc(100vh - 200px);
}
.page__header {
  background: var(--c-bg);
  color: var(--c-cream);
  padding: 9rem 0 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page__header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(165,28,28,0.25) 0%, transparent 60%);
}
.page__title {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 500;
  margin: 0;
  position: relative;
}
.page__lede {
  margin: 1rem auto 0;
  max-width: 60ch;
  color: rgba(245,239,227,0.75);
  position: relative;
}

/* ---------- Cards / post grid ---------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}
.post-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.post-card__image {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--c-bg-soft);
}
.post-card__image--placeholder {
  background:
    linear-gradient(135deg, rgba(165,28,28,0.15), transparent),
    var(--c-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-red-bright);
}
.post-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.post-card__cat {
  font-family: var(--f-eyebrow);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--c-red);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.post-card__title {
  font-family: var(--f-display);
  font-size: 1.45rem;
  margin: 0 0 0.6rem;
  line-height: 1.2;
}
.post-card__excerpt {
  font-size: 0.95rem;
  color: var(--c-ink-soft);
  margin-bottom: 1rem;
  flex: 1;
}
.post-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--c-ink-soft);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 0.75rem;
}
.post-card__locked { display: inline-flex; gap: 0.3rem; align-items: center; color: var(--c-red); }

/* ---------- Homepage upcoming events list ---------- */
.home-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.home-event {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.home-event:last-child { border-bottom: none; }

/* Date block — day number large, month + year small beneath */
.home-event__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
}
.home-event__day {
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--c-cream);
  line-height: 1;
}
.home-event__mon {
  font-family: var(--f-eyebrow);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;    /* white — high contrast on --c-bg */
  margin-top: 0.2rem;
}
.home-event__yr {
  font-family: var(--f-eyebrow);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.60);  /* 7.28:1 on --c-bg — WCAG AA */
  margin-top: 0.1rem;
}

/* Coloured stripe — uses the event label colour */
.home-event__stripe {
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  flex-shrink: 0;
  min-height: 40px;
}

/* Body — title + meta */
.home-event__body {
  flex: 1;
  min-width: 0;
}
.home-event__title {
  display: block;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-cream);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}
.home-event__title:hover { color: var(--c-red); }
.home-event__meta {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);  /* 8.40:1 on --c-bg — WCAG AA */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}
.home-event__label {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Arrow link on the right */
.home-event__arrow {
  color: rgba(255,255,255,0.60);  /* 7.28:1 on --c-bg — WCAG AA */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: color 0.15s;
  padding: 0.25rem;
}
.home-event__arrow:hover { color: #ee2a1a; }

@media (max-width: 600px) {
  .home-event__day  { font-size: 1.5rem; }
  .home-event__date { min-width: 36px; }
  .home-event { gap: 0.85rem; }
}

/* ---------- Single post ---------- */
.article {
  max-width: 760px;
  margin: 0 auto;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.article__cat {
  font-family: var(--f-eyebrow);
  letter-spacing: 0.28em;
  font-size: 0.85rem;
  color: var(--c-red);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1rem;
}
.article__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  margin: 0 0 1rem;
  text-align: center;
  line-height: 1.15;
}
.article__meta {
  text-align: center;
  color: var(--c-ink-soft);
  font-size: 0.92rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.article__featured {
  width: 100%;
  margin: 0 auto 2.5rem;
  max-height: 460px;
  object-fit: cover;
}
.article__body { font-size: 1.08rem; line-height: 1.75; }
.article__body p { margin: 0 0 1.25rem; }
.article__body h2 {
  font-family: var(--f-display);
  font-size: 1.8rem;
  margin: 2.25rem 0 0.75rem;
}
.article__body img { margin: 1.5rem auto; }
.article__body a { color: var(--c-red); border-bottom: 1px solid currentColor; }
.attachments {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.attachments h3 {
  font-family: var(--f-display);
  font-size: 1.4rem;
  margin: 0 0 1rem;
}
.attachments ul { list-style: none; padding: 0; margin: 0; }
.attachments li {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
}
.attachments svg { width: 22px; height: 22px; color: var(--c-red); flex: 0 0 22px; }

/* ---------- Forms ---------- */
.form-card {
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  padding: 2.5rem;
  border: 1px solid rgba(0,0,0,0.08);
}
.form-card--wide { max-width: 760px; }
.form-card h1 {
  font-family: var(--f-display);
  font-size: 1.8rem;
  margin: 0 0 1.5rem;
  text-align: center;
}
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-family: var(--f-eyebrow);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--c-ink-soft);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="datetime-local"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="file"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  border: 1px solid rgba(0,0,0,0.2);
  background: #fafafa;
  transition: border-color 0.2s, background 0.2s;
}
/* Number spinners look heavy at this size; trim the default appearance. */
.form-group input[type="number"] {
  -moz-appearance: textfield;
}
.form-group input[type="number"]::-webkit-inner-spin-button,
.form-group input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--c-red);
  background: #fff;
}
.form-group textarea { min-height: 220px; font-family: var(--f-body); }
.form-help { font-size: 0.85rem; color: var(--c-ink-soft); margin-top: 0.35rem; }
.form-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; }

/* ---------- Alerts ---------- */
.alert {
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  border-left: 3px solid;
  background: #fff;
  font-size: 0.95rem;
}
.alert--error   { border-color: var(--c-red); color: var(--c-red-dark); background: #fdecec; }
.alert--warning { border-color: #b45309; color: #7c3a0a; background: #fff7ed; }
.alert--success { border-color: #2f7d32; color: #1b5e20; background: #e8f5e9; }
.alert--info    { border-color: var(--c-gold); color: #5c4a2e; background: #f7efe3; }

/* ---------- My Account ---------- */
.myaccount-section__title {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--c-line-dark);
}

/* ---------- Admin shell ---------- */
.admin {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: var(--c-cream);
}
.admin__side {
  background: var(--c-bg);
  color: var(--c-cream);
  padding: 1.5rem 0;
}
.admin__brand {
  padding: 0 1.5rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.admin__brand strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.3rem;
}
.admin__brand small {
  font-family: var(--f-eyebrow);
  letter-spacing: 0.22em;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--c-red-bright);
}
.admin__nav { list-style: none; padding: 1rem 0; margin: 0; }
.admin__nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.5rem;
  font-family: var(--f-eyebrow);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Inactive links sit at 92% of cream rather than 70% — the
     uppercase letterspaced typography needs the extra weight to
     read clearly on the near-black background, and the active /
     hover states still get full cream (plus the red marker bar)
     so the visual hierarchy is preserved. */
  color: rgba(245,239,227,0.92);
  transition: background 0.15s, color 0.15s;
  border-left: 3px solid transparent;
}
.admin__nav a:hover,
.admin__nav a.is-active {
  background: rgba(255,255,255,0.05);
  color: var(--c-cream);
  border-left-color: var(--c-red-bright);
}
.admin__nav svg { width: 16px; height: 16px; }
.admin__main { padding: 2.5rem clamp(1.5rem, 3vw, 3rem); }
.admin__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.admin__header h1 {
  font-family: var(--f-display);
  font-size: 2rem;
  margin: 0;
  font-weight: 500;
}

/* ---------- Data tables ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
}
.data-table th,
.data-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.data-table th {
  background: #faf6ec;
  font-family: var(--f-eyebrow);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:hover td { background: #fdfbf5; }
.badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-family: var(--f-eyebrow);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.badge--green  { color: #2f7d32; }
.badge--gold   { color: #8a6a2f; }
.badge--red    { color: var(--c-red); }
.badge--gray   { color: var(--c-ink-soft); }
.badge--orange { color: #b45309; border-color: #b45309; background: #fff7ed; }

/* ---------- Calendar search bar ---------- */
/* The calendar.php search uses cal-search* classes that previously had no
   styles, so the box rendered as a bare native input with a loose icon and
   clear link. These rules match the site's other inputs: white field on the
   cream section, 1px border, 2px radius, red focus border. */
.cal-search {
  margin: 0 auto 1.75rem;
  max-width: 520px;
}
.cal-search__inner {
  position: relative;
  display: flex;
  align-items: center;
}
.cal-search__icon {
  position: absolute;
  left: 0.85rem;
  color: var(--c-ink-soft);
  pointer-events: none;
}
.cal-search__input {
  width: 100%;
  height: 44px;
  /* left padding clears the icon; right padding clears the ✕ clear button */
  padding: 0 2.5rem 0 2.6rem;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--c-ink);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 2px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.cal-search__input::placeholder { color: var(--c-ink-soft); }
.cal-search__input:focus {
  outline: none;
  border-color: var(--c-red);
  box-shadow: 0 0 0 1px var(--c-red);
}
/* Hide the browser's native search clear control; we provide our own ✕ */
.cal-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cal-search__clear {
  position: absolute;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  color: var(--c-ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.cal-search__clear:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--c-red);
}

/* ---------- Calendar search results (list view) ---------- */
/* These cal-results* classes had no styles, so search results rendered as a
   bare bulleted list. Styled here as a clean card list matching the site. */
.cal-results { max-width: 760px; margin: 0 auto; }
.cal-results__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  font-size: 1rem;
  color: var(--c-ink-soft);
  padding-bottom: 0.85rem;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--c-line-dark);
}
.cal-results__summary strong { color: var(--c-ink); font-weight: 600; }
.cal-results__back {
  margin-left: auto;
  color: var(--c-red);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}
.cal-results__back:hover { text-decoration: underline; }
.cal-results__month {
  font-family: var(--f-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: var(--c-ink-soft);
  margin: 1.75rem 0 0.6rem;
}
.cal-results__list { list-style: none; margin: 0; padding: 0; }
.cal-results__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--c-line-dark);
}
.cal-results__dot {
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-top: 0.45rem;
}
.cal-results__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.cal-results__title {
  font-family: var(--f-display);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--c-ink);
  text-decoration: none;
}
.cal-results__title:hover { color: var(--c-red); }
.cal-results__meta { font-size: 0.9rem; color: var(--c-ink-soft); }
.cal-results__label {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 2px;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  vertical-align: baseline;
}

/* ---------- Calendar ---------- */
.calendar {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
}
.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: var(--c-bg);
  color: var(--c-cream);
}
.calendar__head h2 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  margin: 0;
  font-weight: 500;
}
.calendar__nav { display: flex; gap: 0.5rem; }
.calendar__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--c-cream);
  transition: background 0.2s;
}
.calendar__nav a:hover { background: rgba(255,255,255,0.08); }

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.calendar__dow {
  padding: 0.6rem;
  text-align: center;
  font-family: var(--f-eyebrow);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  background: #faf6ec;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  color: var(--c-ink);
}
.calendar__cell {
  min-height: 110px;
  padding: 0.5rem;
  border: 1px solid rgba(0,0,0,0.04);
  background: #fff;
  display: flex;
  flex-direction: column;
}
.calendar__cell--other { background: #faf8f3; color: rgba(0,0,0,0.3); }
.calendar__cell--today .calendar__date {
  background: var(--c-red);
  color: #fff;
  border-radius: 50%;
}
.calendar__date {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-eyebrow);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  align-self: flex-end;
}
.calendar__event {
  display: block;
  background: var(--c-red);
  color: #fff;
  padding: 0.2rem 0.4rem;
  margin-bottom: 0.2rem;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.2s;
}
.calendar__event:hover { background: var(--c-red-bright); }
.calendar__event--member    { background: #8a6a2f; }
.calendar__event--bodyguard { background: #3b3833; }
.calendar__event--admin     { background: #1d1a17; }

/* ---------- Login/auth bar ---------- */
.auth-link {
  margin-left: 1rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(245,239,227,0.4);
  font-family: var(--f-eyebrow);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.auth-link:hover { border-color: var(--c-cream); }
/* Name link — no border box, just the underline hover effect from
   the standard nav rules. The border style stays on Sign out only. */
.auth-link--name {
  border-color: transparent;
  padding-right: 0.5rem;
}
.auth-link--name:hover { border-color: transparent; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; padding-block: 7rem 4rem; }
  .hero__copy  { margin: 0 auto; }
  .hero__rule  { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .principles  { grid-template-columns: repeat(2, 1fr); }
  .principle + .principle::before { display: none; }
  .heritage__grid { grid-template-columns: 1fr; }
  .heritage__image { min-height: 280px; }
  .main-nav ul { display: none; }
  .menu-toggle { display: inline-flex; }
  .main-nav.is-open ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; right: 1rem; left: 1rem;
    background: var(--c-bg);
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .admin { grid-template-columns: 1fr; }
  .admin__side { padding: 1rem 0; }
  .admin__nav { display: flex; overflow-x: auto; padding: 0.5rem; }
  .admin__nav a { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
  .admin__nav a.is-active { border-left: 0; border-bottom-color: var(--c-red-bright); }
  .dock-nav__list { grid-template-columns: repeat(3, 1fr); gap: 0.25rem; }
  /* In the cramped 3-column layout, stack the icon above the label and
     tighten the type so both the icon and text remain visible. */
  .dock-nav__list a {
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.25rem;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-align: center;
  }
}
@media (max-width: 560px) {
  .principles { grid-template-columns: 1fr; }
  .calendar__cell { min-height: 70px; padding: 0.25rem; }
  .calendar__event { font-size: 0.6rem; }
}

/* ---------- Admin dashboard ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.stat-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-left: 3px solid var(--c-red);
  padding: 1.2rem 1.3rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.stat-card__num {
  font-family: var(--f-display);
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 500;
  color: var(--c-bg);
  margin-bottom: 0.3rem;
}
.stat-card__label {
  font-family: var(--f-eyebrow);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.stat-card__sub {
  font-size: 0.78rem;
  color: var(--c-ink-soft);
  margin-top: 0.25rem;
}

.admin__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}
.admin__panel {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 1.4rem 1.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.admin__panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.admin__panel-head h2 {
  font-family: var(--f-display);
  font-size: 1.4rem;
  margin: 0;
}
@media (min-width: 1100px) {
  .admin__columns { grid-template-columns: 1.2fr 1fr; }
}


/* ---------- CKEditor 5 (admin post editor) ---------- */
/* Theme the editor to match the cream/red admin palette. CKEditor 5 uses
 * CSS variables in the ck-* namespace, so we just override the ones that
 * matter for visual fit. */
.ck.ck-editor {
  --ck-color-base-background:   #fff;
  --ck-color-base-border:       rgba(0,0,0,0.12);
  --ck-color-focus-border:      var(--c-red);
  --ck-color-button-on-color:   var(--c-red);
  --ck-color-button-on-background: #fdf6ec;
  --ck-color-toolbar-background: #fff;
  --ck-border-radius: 0;
  --ck-focus-ring: 1px solid var(--c-red);
}
.ck.ck-editor__main > .ck-editor__editable {
  min-height: 400px;
  max-height: 70vh;
  background: #fff;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-ink);
  padding: 1rem 1.25rem;
}
.ck.ck-editor__main > .ck-editor__editable.ck-focused {
  box-shadow: 0 0 0 3px rgba(165,28,28,0.12);
}
.ck.ck-editor__main > .ck-editor__editable h2,
.ck.ck-editor__main > .ck-editor__editable h3,
.ck.ck-editor__main > .ck-editor__editable h4 {
  font-family: var(--f-display);
  font-weight: 500;
}
.ck.ck-editor__main > .ck-editor__editable blockquote {
  border-left: 3px solid var(--c-red);
  padding-left: 1rem;
  margin-left: 0;
  color: var(--c-ink-soft);
  font-style: italic;
}
.ck.ck-editor__main > .ck-editor__editable figure.image {
  margin: 1.25rem auto;
}
.ck.ck-editor__main > .ck-editor__editable figcaption {
  font-size: 0.9rem;
  color: var(--c-ink-soft);
  font-style: italic;
}

/* ---------- Public article body (CKEditor-emitted image markup) ---------- */
/* CKEditor wraps each image in <figure class="image …">. The class on
 * the figure determines alignment; the inline style="width:..%" comes
 * from the user-chosen resize. */
.article__body figure.image {
  display: table;
  clear: both;
  text-align: center;
  margin: 1.5rem auto;
  max-width: 100%;
}
.article__body figure.image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
/* Image styles set by CKEditor 5's ImageStyle plugin */
.article__body figure.image.image-style-block-align-left,
.article__body figure.image.image-style-align-left {
  float: left;
  margin: 0.5rem 1.5rem 1rem 0;
}
.article__body figure.image.image-style-block-align-right,
.article__body figure.image.image-style-align-right {
  float: right;
  margin: 0.5rem 0 1rem 1.5rem;
}
.article__body figure.image.image-style-block-align-center,
.article__body figure.image.image-style-align-center {
  margin-left: auto;
  margin-right: auto;
}
.article__body figure.image.image_resized {
  /* width comes from inline style="width:NN%" */
  max-width: 100%;
}
.article__body figure.image.image_resized img {
  width: 100%;
}
.article__body figcaption {
  font-size: 0.9rem;
  color: var(--c-ink-soft);
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
  display: table-caption;
  caption-side: bottom;
}
.article__body p { margin: 0 0 1.25rem; }
.article__body p::after { content: ""; display: table; clear: both; } /* clear floats per-paragraph */
.article__body img {
  max-width: 100%;
  height: auto;
}
.article__body pre {
  background: var(--c-cream);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.95rem;
}
.article__body code {
  background: var(--c-cream);
  padding: 0.1em 0.35em;
  font-size: 0.95em;
}

/* ---------- Users admin: avatar bubble + danger button ---------- */
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-red), var(--c-red-dark));
  color: #fff;
  font-family: var(--f-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.row-actions {
  text-align: right;
  white-space: nowrap;
  font-size: 0.92rem;
}
.row-actions a {
  color: var(--c-bg);          /* dark text on the cream/white table */
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  padding-bottom: 1px;
}
.row-actions a:hover {
  color: var(--c-red);
  border-bottom-color: var(--c-red);
}
.row-actions__sep {
  color: rgba(0,0,0,0.2);
  margin: 0 0.4rem;
}
.row-actions__danger {
  color: var(--c-red) !important;
  border-bottom-color: rgba(165,28,28,0.3) !important;
}
.row-actions__danger:hover {
  color: var(--c-red-dark) !important;
  border-bottom-color: var(--c-red) !important;
}
.data-table code {
  background: var(--c-cream);
  padding: 0.1em 0.4em;
  border-radius: 2px;
  color: var(--c-ink);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ---------- Menu admin ---------- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  color: var(--c-ink);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
}
.icon-btn:hover { background: var(--c-cream); border-color: rgba(0,0,0,0.3); }
.icon-btn--ghost { opacity: 0.25; cursor: default; }

.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.menu-edit-form .menu-edit-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}
.menu-edit-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  color: var(--c-ink-soft);
  gap: 0.3rem;
}
.menu-edit-form label input[type="text"],
.menu-edit-form label select {
  width: 100%;
}
.menu-edit-form .menu-edit-form__check {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
@media (max-width: 720px) {
  .menu-edit-form .menu-edit-form__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Event detail page (event.php)

   Hero "meta row" sits beneath the title in the dark header,
   grouping date / time / location into one connected strip.
   Body section gets a tighter top padding so the description
   sits close to the meta row rather than separated by a gulf.
   ============================================================ */

.event-header {
  /* Default .page__header is `padding: 9rem 0 3rem` — trim the bottom
     so the body section sits closer to the meta row. */
  padding-bottom: 1.75rem;
}

.event-header .event-meta {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  font-size: 0.95rem;
  color: rgba(245, 239, 227, 0.85);
  position: relative;
}
.event-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.event-meta__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--c-red-bright);
}
.event-meta__item a {
  color: inherit;
  border-bottom: 1px dotted rgba(245, 239, 227, 0.4);
  text-decoration: none;
  padding-bottom: 1px;
  transition: border-color 0.15s, color 0.15s;
}
.event-meta__item a:hover {
  color: var(--c-cream);
  border-bottom-color: var(--c-red-bright);
}
@media (max-width: 640px) {
  .event-header .event-meta {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }
  .event-meta__item { white-space: normal; text-align: center; }
}

/* Action buttons (map + add to calendar) beneath the meta row */
.event-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  position: relative;  /* must be above .page__header::before overlay */
}
.event-actions__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--c-cream);
  font-family: var(--f-eyebrow);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  border-radius: 2px;
}
.event-actions__btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.45);
  color: var(--c-cream);
}
.event-actions__btn svg { flex-shrink: 0; }

/* Tighter cream-section padding so the event description sits close to
   the meta row above. Default .section uses clamp(3.5rem, 7vw, 6rem)
   which left a noticeable canyon between the two. */
.section--event-body {
  padding-block: 2rem;
}
@media (min-width: 720px) {
  .section--event-body { padding-block: 2.5rem; }
}

/* Attachments list under the event description */
.event-attachments {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--c-line-dark);
}
.event-attachments__heading {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 1rem;
  color: var(--c-ink);
}
.event-attachments__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.event-attachments__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1rem;
  background: #fff;
  border: 1px solid var(--c-line-dark);
  border-radius: 2px;
  margin-bottom: 0.5rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.event-attachments__item:hover {
  border-color: var(--c-red);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.event-attachments__icon {
  flex: 0 0 auto;
  color: var(--c-red);
  display: inline-flex;
}
.event-attachments__icon svg { width: 22px; height: 22px; }
.event-attachments__name {
  color: var(--c-ink);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.event-attachments__name:hover { color: var(--c-red); }
.event-attachments__size {
  margin-left: auto;
  color: var(--c-ink-soft);
  font-size: 0.85rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.event-back { margin-top: 2.5rem; text-align: center; }


/* ============================================================
   Media library (admin/media.php)

   Base card styles, plus the toolbar / sized-card / PDF-placeholder
   refinements that previously lived in a separate media-extra.css.
   That add-on file is now redundant — once this updated site.css is
   in place the media-extra.css file can be deleted.
   ============================================================ */

/* Card grid: fixed-width tiles laid out left-to-right rather than
   auto-fill+1fr (which stretched a row's cards to silly widths if
   only a few items were present). */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 220px);
  gap: 1rem;
  justify-content: start;
}

.media-card {
  background: #fff;
  border: 1px solid var(--c-line-dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.media-card:hover {
  border-color: var(--c-red);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Fixed thumbnail height so images and PDF placeholders share the
   same frame regardless of card width. */
.media-card__thumb {
  height: 165px;
  background: #f3efe6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.media-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* PDF / document placeholder: a stylised page-shape that fills the
   thumbnail frame rather than a tiny lonely SVG icon. */
.media-card__doc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fbf6ec 0%, #efe6d4 100%);
  text-decoration: none;
  position: relative;
}
.media-card__doc::before {
  /* the "paper sheet" — faint horizontal lines, drawn with a
     repeating linear gradient inside a fixed-size white box. */
  content: '';
  width: 70px;
  height: 90px;
  background-color: #fff;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 22px,
    rgba(90, 80, 72, 0.18) 22px, rgba(90, 80, 72, 0.18) 23px,
    transparent 23px, transparent 35px,
    rgba(90, 80, 72, 0.18) 35px, rgba(90, 80, 72, 0.18) 36px
  );
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.media-card__doc::after {
  /* red "PDF" badge sitting on the bottom edge of the paper sheet */
  content: 'PDF';
  position: absolute;
  bottom: calc((100% - 90px) / 2 + 6px);
  background: var(--c-red);
  color: #fff;
  font-family: sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 1px;
  pointer-events: none;
}

.media-card__body {
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.88rem;
}
.media-card__name {
  margin: 0;
  font-weight: 500;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-card__meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--c-ink-soft);
}

/* "Used in" badge / details disclosure */
.media-card__usage {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
}
.media-card__usage--orphan { color: #8a6a2f; font-style: italic; }
.media-card__usage summary {
  cursor: pointer;
  color: var(--c-ink-soft);
}
.media-card__usage ul {
  list-style: none;
  padding: 0.3rem 0 0;
  margin: 0;
}
.media-card__usage li {
  padding: 0.2rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
}
.media-card__usage-kind {
  font-size: 0.72rem;
  color: var(--c-ink-soft);
  font-style: italic;
}

.media-card__actions {
  margin: 0.4rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px solid var(--c-line-dark);
}
.media-card__actions a { font-size: 0.85rem; text-decoration: none; }


/* Filter toolbar — aligned four-column grid: search (flex) | type
   (narrow) | filter button | clear button. All controls share a 38px
   height and consistent border style. */
.media-toolbar {
  display: grid;
  grid-template-columns: 1fr 220px auto auto;
  gap: 0.5rem;
  align-items: end;
  background: #fff;
  border: 1px solid var(--c-line-dark);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}
.media-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.media-toolbar__label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0;
}
.media-toolbar input[type="search"],
.media-toolbar select {
  height: 38px;
  padding: 0 0.7rem;
  font-family: inherit;
  font-size: 0.95rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  border-radius: 2px;
  box-sizing: border-box;
  width: 100%;
}
.media-toolbar .btn {
  height: 38px;
  align-self: end;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
/* 5-column variant: search (flex) | type | visibility | filter btn | clear btn */
.media-toolbar--5col {
  grid-template-columns: 1fr 160px 160px auto auto;
}

@media (max-width: 900px) {
  .media-toolbar--5col { grid-template-columns: 1fr 1fr 1fr; }
  .media-toolbar--5col .btn { grid-column: span 1; }
}
@media (max-width: 720px) {
  .media-toolbar { grid-template-columns: 1fr 1fr; }
  .media-toolbar .btn { grid-column: span 1; }
  .media-toolbar--5col { grid-template-columns: 1fr 1fr; }
  .media-toolbar--5col .btn { grid-column: span 1; }
}

/* ============================================================
   Tags — public chip row, post-card chips, admin picker
   Append to public/assets/css/site.css
   ============================================================ */

/* ----- Public tag chip row (used on posts.php and post.php) ----- */
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 0.25rem;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.75rem;
  font-family: var(--f-eyebrow);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  text-decoration: none;
  transition: all 0.18s ease;
  cursor: pointer;
}
.tag-chip:hover {
  color: var(--c-red);
  border-color: var(--c-red);
}
.tag-chip.is-active {
  color: #fff;
  background: var(--c-red);
  border-color: var(--c-red);
}
.tag-chip.is-active:hover {
  background: var(--c-red-dark);
  border-color: var(--c-red-dark);
}

/* Touch-friendly sizing: bump the chips up on small screens so each
   one is roughly 40px tall (close to the 44px Apple/Google guideline
   for tap targets). Larger gap between chips too, so a fat finger
   doesn't catch the wrong one. */
@media (max-width: 720px) {
  .tag-chips { gap: 0.55rem; }
  .tag-chip  { padding: 0.55rem 0.9rem; font-size: 0.72rem; }
}

/* ----- Tag pills on a post card ----- */
.post-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.4rem 0 0;
  padding: 0;
}
.post-card__tag {
  display: inline-block;
  font-family: var(--f-eyebrow);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(184, 148, 101, 0.4);
  border-radius: 2px;
  background: rgba(184, 148, 101, 0.07);
}

/* ----- Admin tag picker (chip toggles on the post edit form) ----- */
.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.25rem;
}
.tag-picker__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  font-family: var(--f-eyebrow);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.18);
  cursor: pointer;
  user-select: none;
  transition: all 0.18s ease;
}
.tag-picker__chip:hover {
  border-color: var(--c-red);
  color: var(--c-red);
}
.tag-picker__chip.is-on {
  color: #fff;
  background: var(--c-red);
  border-color: var(--c-red);
}
/* Hide the underlying checkbox — the chip itself is the control. */
.tag-picker__chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
/* Keyboard focus ring on the chip when the hidden checkbox is focused. */
.tag-picker__chip:focus-within {
  outline: 2px solid var(--c-red-bright);
  outline-offset: 2px;
}

/* Touch-friendly sizing on the admin form for mobile authors. */
@media (max-width: 720px) {
  .tag-picker { gap: 0.55rem; }
  .tag-picker__chip { padding: 0.55rem 1rem; font-size: 0.75rem; }
}


/* ============================================================
   Tighten the gap between the dark page-header strip and the
   cream content section below. The defaults (page__header
   padding-bottom 3rem + section padding-block clamp(3.5rem..6rem))
   create a large gulf on simple admin-managed pages. Halve both
   sides of the join so titles sit closer to their body.
   Event pages opt out via .event-header, which carries its own
   padding (set further up in this stylesheet).
   ============================================================ */

.page__header:not(.event-header) {
  padding-bottom: 1.0rem;
}
.page__header:not(.event-header) + .section {
  padding-top: 1.5rem;
}
/* Belt-and-braces: the cream section sets its top padding via the
   `padding-block` shorthand (clamp 3.5–6rem). On some builds the
   single-property override above lost the cascade, leaving the full
   6rem gulf seen on simple pages. Pin the top padding hard and strip
   the top margin off whatever the body's first element is (a CKEditor
   <figure class="image">, a heading, or a paragraph) so the first
   item — often an image — sits directly under the title strip. */
.page__header:not(.event-header) + .section .article__body > *:first-child {
  margin-top: 0;
}
.page__header:not(.event-header) + .section .article__body > figure.image:first-child {
  margin-top: 0;
}

/* ============================================================
   Top nav polish. The default letter-spacing (0.22em) plus
   per-item padding made the row too wide, so multi-word labels
   ("HOW TO JOIN", "BOOK EVENTS", "SIGN IN") wrapped to two lines
   and the bar looked scrappy. Keep each label on ONE line, trim
   spacing/padding slightly so the whole row fits, and only allow
   wrapping between whole items as a last resort.
   (Mobile ≤900px still collapses to the hamburger, untouched.)
   ============================================================ */
.main-nav ul {
  flex-wrap: wrap;            /* if it must wrap, wrap between items… */
  justify-content: flex-end;
  row-gap: 0.25rem;
}
.main-nav a {
  white-space: nowrap;        /* …never inside a label */
  letter-spacing: 0.16em;     /* was 0.22em */
  padding: 0.6rem 0.7rem;     /* was 0.6rem 1rem */
  font-size: 0.9rem;          /* was 0.82rem — larger but still one line */
}
.main-nav a:not(.btn)::after {
  left: 0.7rem; right: 0.7rem; /* keep underline aligned to new padding */
}
.auth-link {
  white-space: nowrap;
  margin-left: 0.5rem;        /* was 1rem */
  letter-spacing: 0.16em;     /* was 0.2em */
  font-size: 0.86rem;         /* was 0.78rem — match the larger nav */
}/* ============================================================
   Gallery feature — append these rules to public/assets/css/site.css
   ============================================================ */

/* ---------- Public gallery index — album grid ---------- */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.album-card {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  transition: box-shadow 0.2s, transform 0.2s;
}
.album-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  transform: translateY(-2px);
}

.album-card__thumb-link {
  display: block;
  position: relative;
  overflow: hidden;
}
.album-card__thumb {
  height: 220px;
  background-size: cover;
  background-position: center;
  background-color: var(--c-cream-deep);
  transition: transform 0.35s ease;
}
.album-card__thumb-link:hover .album-card__thumb {
  transform: scale(1.04);
}
.album-card__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(90,80,72,0.3);
}

/* Photo count badge overlaid on the cover */
.album-card__count {
  position: absolute;
  bottom: 0.6rem;
  right: 0.75rem;
  background: rgba(12,10,9,0.65);
  color: #f5efe3;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 2px;
}
.album-card__count::before {
  content: "⬛ ";
  font-size: 0.6em;
  vertical-align: 1px;
  margin-right: 2px;
  /* Use a camera-like character substitute */
  content: "";
}

.album-card__body {
  padding: 1rem 1.1rem 1.25rem;
}
.album-card__title {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 0.3rem;
  line-height: 1.2;
}
.album-card__title a { color: var(--c-ink); }
.album-card__title a:hover { color: var(--c-red); }
.album-card__meta {
  font-size: 0.82rem;
  color: var(--c-ink-soft);
  margin: 0 0 0.4rem;
}
.album-card__desc {
  font-size: 0.9rem;
  color: var(--c-ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* ---------- Public gallery album view — photo grid ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
}

.gallery-item {
  margin: 0;
  overflow: hidden;
  background: var(--c-cream-deep);
  position: relative;
}

.gallery-item__link {
  display: block;
  height: 200px;
  overflow: hidden;
}
.gallery-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: transform 0.3s ease, opacity 0.2s;
}
.gallery-item__link:hover .gallery-item__img {
  transform: scale(1.05);
  opacity: 0.9;
}
.gallery-item__caption {
  font-size: 0.78rem;
  color: var(--c-ink-soft);
  padding: 0.4rem 0.5rem 0.5rem;
  line-height: 1.4;
  font-style: italic;
}

/* Responsive: tighter grid on small screens */
@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.4rem;
  }
  .gallery-item__link { height: 150px; }
  .album-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
  }
}

/* ---------- Admin gallery — albums grid ---------- */
.gallery-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.gallery-admin-card {
  background: #fff;
  border: 1px solid var(--c-line-dark);
  border-radius: 4px;
  overflow: hidden;
}
.gallery-admin-card--draft { opacity: 0.65; }

.gallery-admin-card__thumb {
  display: block;
  height: 180px;
  position: relative;
  overflow: hidden;
  background: var(--c-cream-deep);
}
.gallery-admin-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s;
}
.gallery-admin-card__thumb:hover img { transform: scale(1.04); }

.gallery-admin-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(90,80,72,0.25);
}

.gallery-admin-card__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(29,26,23,0.75);
  color: #f5efe3;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gallery-admin-card__badge--lock {
  top: auto;
  bottom: 0.5rem;
  left: 0.5rem;
}

.gallery-admin-card__body {
  padding: 0.85rem 1rem 1rem;
}
.gallery-admin-card__title {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-ink);
  display: block;
  margin-bottom: 0.25rem;
}
.gallery-admin-card__title:hover { color: var(--c-red); }
.gallery-admin-card__meta {
  font-size: 0.8rem;
  color: var(--c-ink-soft);
  margin: 0 0 0.6rem;
}
.gallery-admin-card__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
}
.gallery-admin-card__actions a,
.gallery-admin-card__actions button {
  color: var(--c-ink-soft);
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.gallery-admin-card__actions a:hover { color: var(--c-ink); border-bottom-color: var(--c-ink); }

/* ---------- Admin gallery — edit photos grid ---------- */
.gallery-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.gallery-edit-item {
  background: #fff;
  border: 1px solid var(--c-line-dark);
  border-radius: 3px;
  overflow: hidden;
  user-select: none;
}
.gallery-edit-item[draggable="true"] { cursor: grab; }
.gallery-edit-item[draggable="true"]:active { cursor: grabbing; }

.gallery-edit-item__thumb {
  position: relative;
  height: 150px;
  overflow: hidden;
  background: var(--c-cream-deep);
}
.gallery-edit-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.gallery-edit-item__cover-badge {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  background: var(--c-gold);
  color: var(--c-ink);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: 500;
}
.gallery-edit-item__drag-handle {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 1rem;
  padding: 1px 5px;
  border-radius: 2px;
  cursor: grab;
  line-height: 1.4;
}

.gallery-edit-item__caption-form {
  padding: 0.4rem 0.5rem;
  display: flex;
  gap: 0.3rem;
  border-bottom: 1px solid var(--c-line-dark);
}
.gallery-edit-item__caption-form input[type="text"] {
  flex: 1;
  min-width: 0;
}

.gallery-edit-item__actions {
  padding: 0.35rem 0.5rem;
  display: flex;
  gap: 0.6rem;
  font-size: 0.78rem;
}

/* Generic link-style buttons */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--c-ink-soft);
  border-bottom: 1px dotted currentColor;
  line-height: inherit;
}
.link-btn:hover { color: var(--c-ink); }
.link-btn--danger { color: var(--c-red-dark); }
.link-btn--danger:hover { color: var(--c-red-bright); }

/* Page eyebrow breadcrumb */
.page__eyebrow {
  font-family: var(--f-eyebrow);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,239,227,0.55);
  margin: 0 0 0.5rem;
}

/* ====================================================================
   Utility & component classes
   --------------------------------------------------------------------
   Extracted from repeated inline styles so common patterns live in one
   place. Colour utilities reference the palette variables above, so a
   rebrand never needs to touch the PHP templates.
   ==================================================================== */

/* Text colour helpers */
.muted        { color: var(--c-ink-soft); }
.text-danger  { color: var(--c-red); }
.text-success { color: var(--c-success); }

/* Faint inline separator, e.g. the " · " between row actions */
.sep { color: var(--c-divider); }

/* Two-column responsive form/content grid */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 560px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* Inline checkbox + label row */
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Plain HTML body editors (the no-CKEditor textarea fallback) */
.editor-textarea {
  width: 100%;
  min-height: 360px;
  padding: 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid var(--c-border-input);
}
.editor-textarea--sm { min-height: 280px; }

/* Parchment-gold notice / callout box */
.callout-notice {
  background: var(--c-notice-bg);
  border: 1px solid var(--c-notice-border);
  color: var(--c-notice-ink);
  padding: 1rem 1.25rem;
}

/* ============================================================
   Drop-down / fly-out submenus (two-level main nav)
   Added for the menu-hierarchy feature. Parent items reveal
   their children on hover (desktop) or tap (mobile/keyboard).
   ============================================================ */

/* The parent <li> anchors the absolutely-positioned flyout. */
.main-nav .has-children { position: relative; }

/* A link-less drop-down heading (e.g. "Resources") renders as a button
   styled to match the nav links rather than as an <a>. */
.main-nav .nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--c-cream);
  font-family: var(--f-eyebrow);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.6rem 0.7rem;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.main-nav .has-children:hover > .nav-parent,
.main-nav .has-children.is-open > .nav-parent { color: var(--c-red-bright); }

/* Caret button shown beside a parent that IS itself a link. */
.main-nav .submenu-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--c-cream);
  padding: 0.6rem 0.5rem 0.6rem 0;
  line-height: 1;
}
.main-nav .has-children:hover > .submenu-toggle,
.main-nav .has-children.is-open > .submenu-toggle { color: var(--c-red-bright); }

/* Caret glyph: rotates when the submenu is held open via the toggle. */
.main-nav .nav-caret {
  display: inline-block;
  font-size: 0.7em;
  transition: transform 0.2s ease;
}
.main-nav .has-children.is-open > .nav-parent .nav-caret,
.main-nav .has-children.is-open > .submenu-toggle .nav-caret { transform: rotate(180deg); }

/* The flyout panel. Hidden until hover / keyboard focus / explicit open.
   Anchored to the right edge of the parent (the nav is right-aligned), so
   it never spills off the right of the viewport. */
.main-nav .submenu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  z-index: 60;
  min-width: 220px;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: var(--c-bg);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: var(--shadow-md);
}
.main-nav .submenu li { width: 100%; }
.main-nav .submenu a {
  display: block;
  padding: 0.55rem 1.1rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
/* The animated underline looks wrong inside the panel — suppress it there. */
.main-nav .submenu a:not(.btn)::after { display: none; }

/* Reveal: hover (desktop), keyboard focus, or an explicit toggle click. */
.main-nav .has-children:hover > .submenu,
.main-nav .has-children:focus-within > .submenu,
.main-nav .has-children.is-open > .submenu { display: flex; }

/* ---- Mobile: inside the hamburger panel the submenu becomes an inline
        accordion rather than an absolute flyout. Specificity is raised so
        these win over the generic ".main-nav.is-open ul" panel rule. ---- */
@media (max-width: 900px) {
  .main-nav.is-open .submenu {
    position: static;
    inset: auto;
    top: auto; right: auto; left: auto;
    display: none;
    flex-direction: column;
    min-width: 0;
    padding: 0.1rem 0 0.5rem 1rem;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  /* No hover-reveal on touch (a stray hover shouldn't open a panel). */
  .main-nav.is-open .has-children:hover > .submenu,
  .main-nav.is-open .has-children:focus-within > .submenu { display: none; }
  .main-nav.is-open .has-children.is-open > .submenu { display: flex; }
  .main-nav.is-open .submenu a { padding: 0.5rem 0.25rem; }
  .main-nav .nav-parent { padding-left: 0.7rem; }
}

/* ============================================================
   Admin -> Menu: inline edit panel — roomier layout
   Supersedes the tighter rules earlier in this file. The panel
   opens inside a table cell, so it gets generous padding, larger
   fields, a full-width access selector, and the two checkboxes on
   their own separated row.
   ============================================================ */
.menu-edit-row > td {
  padding: 1.9rem 1.9rem 2.1rem;
  background: var(--c-cream-pale);
  border-top: 2px solid var(--c-red);
  border-bottom: 1px solid var(--c-line-dark);
}
.menu-edit-form {
  /* Fill the full width of the (colspan) cell rather than capping and
     hugging the left edge, which left a wide empty gap on the right. */
  width: 100%;
  max-width: none;
}
.menu-edit-form .menu-edit-form__grid {
  display: grid;
  /* Fields grow to fill the available width and flow onto as many columns
     as fit (each at least ~240px), so the panel uses the whole row on wide
     screens and collapses cleanly on narrow ones. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1.5rem 1.9rem;
}
/* Field labels: small uppercase caption above each control. */
.menu-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-family: var(--f-eyebrow);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.menu-edit-form .menu-edit-form__wide {
  grid-column: 1 / -1;
}
/* The controls themselves: taller, padded, with a clear focus ring. */
.menu-edit-form label input[type="text"],
.menu-edit-form label select {
  width: 100%;
  padding: 0.62rem 0.7rem;
  font-family: var(--f-body);
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-border-input);
  border-radius: 3px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.menu-edit-form label input[type="text"]:focus,
.menu-edit-form label select:focus {
  outline: none;
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px rgba(165, 28, 28, 0.12);
}
.menu-edit-form label select:disabled {
  background: var(--c-cream-deep);
  color: var(--c-ink-soft);
  cursor: not-allowed;
}
/* Checkbox row, separated from the fields above by a hairline rule. */
.menu-edit-form .menu-edit-form__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--c-line-dark);
}
.menu-edit-form .menu-edit-form__check {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-body);
  font-size: 0.92rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-ink);
}
.menu-edit-form .form-help {
  margin-top: 1.1rem;
}
.menu-edit-form .form-actions {
  margin-top: 1.4rem;
}
@media (max-width: 720px) {
  .menu-edit-form .menu-edit-form__grid { grid-template-columns: 1fr; }
  .menu-edit-row > td { padding: 1.3rem 1.15rem 1.6rem; }
}

/* ============================================================
   Tables in rich-text content (CKEditor "Insert table")
   Scoped to .article__body — the shared body wrapper used by
   posts, pages and events. Inline styles from the table/cell
   property dialogs override these sensible defaults.
   ============================================================ */
.article__body figure.table {
  display: table;                 /* shrink-to-content, like the editor */
  margin: 1.75rem auto;           /* centred by default */
  max-width: 100%;
}
.article__body figure.table[style*="float:left"],
.article__body figure.table[style*="float: left"]  { margin: 0.5rem 1.75rem 1rem 0; }
.article__body figure.table[style*="float:right"],
.article__body figure.table[style*="float: right"] { margin: 0.5rem 0 1rem 1.75rem; }

.article__body figure.table > table { width: 100%; }
.article__body table {
  border-collapse: collapse;
  background: var(--c-white);
  font-size: 0.98rem;
  line-height: 1.55;
}
.article__body table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--f-eyebrow);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  padding: 0 0 0.5rem;
}
.article__body th,
.article__body td {
  border: 1px solid var(--c-line-dark);
  padding: 0.6rem 0.85rem;
  text-align: left;
  vertical-align: top;
}
.article__body th {
  background: var(--c-cream-deep);
  font-family: var(--f-display);
  font-weight: 600;
}
/* CKEditor wraps multi-line cell content in <p>; kill the stray margins. */
.article__body td p,
.article__body th p { margin: 0; }

/* Wide tables get a horizontal scroll on small screens instead of
   forcing the page to overflow. */
@media (max-width: 600px) {
  .article__body figure.table { display: block; overflow-x: auto; }
}

/* Subscript / superscript: keep them from nudging line spacing. */
.article__body sub,
.article__body sup { line-height: 0; }

/* ============================================================
   Welcome certificate ("From the Provincial Prior") — sits
   between the hero and the Principles section. The image is a
   complete self-contained design, so it's simply centred with
   a capped width on a dark ground that echoes its own border.
   ============================================================ */
.welcome {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  background: var(--c-bg);
}
.welcome__image {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 4px;
  box-shadow: var(--shadow-md);
}

/* Image/button-grid tables: drop the data-table chrome (no fill, no borders).
   Normal text tables keep their existing styling. */
.article__body figure.table:has(td img) > table,
.article__body figure.table:has(td img) th,
.article__body figure.table:has(td img) td {
  background: transparent;
  border: 0;
}
.article__body figure.table:has(td img) td:has(img) {
  padding: 0.4rem;     /* tighten the gaps between buttons */
  text-align: center;
}

/* Calendar on small screens: keep day cells a readable width and let the
   month grid scroll sideways, rather than crushing 7 columns into the viewport. */
@media (max-width: 600px) {
  .calendar__grid {
    grid-template-columns: repeat(7, minmax(82px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .calendar__cell { min-height: 96px; padding: 0.35rem; }
  .calendar__date { width: 24px; height: 24px; font-size: 0.8rem; }
  .calendar__event { font-size: 0.66rem; white-space: normal; line-height: 1.25; }
  .calendar__dow  { padding: 0.5rem 0.2rem; font-size: 0.62rem; letter-spacing: 0.1em; }
  .calendar__head h2 { font-size: 1.3rem; }
}

/* Button-grid tables: vertically centre cells so a text label lines up with
   the button image beside it, push the button to the right, and DON'T draw
   the article-link underline on it (that border-bottom is the stray line). */
.article__body figure.table:has(td a img) td {
  vertical-align: middle;
}
.article__body figure.table:has(td a img) td a {
  display: block;
  text-align: right;
  border-bottom: none;   /* kills the stray line */
}
.article__body figure.table:has(td a img) td a img.image-style-align-right {
  display: inline-block;
  margin-left: auto;
}

/* Stack a small "Menu" label above the burger icon so it's obvious what
   the control does. The button only shows on mobile (display:none until
   the mobile breakpoint flips it to inline-flex). */
.menu-toggle {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.menu-toggle__label {
  font-family: var(--f-eyebrow, Georgia, serif);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}