/*
Theme Name:   Palatine Masons 314
Theme URI:    https://palatinemasons.com
Description:  A standalone WordPress theme for Palatine Masonic Lodge No. 314, A.F. & A.M. No parent theme, no page builder and no license key: a Masonic design system, eleven lodge page templates and shortcodes for lodge content.
Author:       Palatine Lodge 314 Web Team
Version:      2.1.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  palatine-masons
Tags:         masonic, fraternal, lodge, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   Palatine Masons 314 - design system
   ========================================================================== */

:root {
  --pm-navy:        #0b1f3a;
  --pm-navy-deep:   #061225;
  --pm-blue:        #16345c;
  --pm-blue-soft:   #24486f;
  --pm-gold:        #c9a227;
  --pm-gold-light:  #e3c65b;
  --pm-gold-dim:    rgba(201, 162, 39, .32);
  --pm-cream:       #f8f5ee;
  --pm-paper:       #ffffff;
  --pm-ink:         #171b22;
  --pm-muted:       #5c6573;
  --pm-line:        rgba(11, 31, 58, .12);

  --pm-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --pm-sans:  "Inter", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --pm-shadow-sm: 0 1px 2px rgba(6, 18, 37, .06), 0 2px 8px rgba(6, 18, 37, .06);
  --pm-shadow-md: 0 4px 12px rgba(6, 18, 37, .08), 0 12px 32px rgba(6, 18, 37, .10);
  --pm-shadow-lg: 0 8px 24px rgba(6, 18, 37, .12), 0 24px 60px rgba(6, 18, 37, .16);

  --pm-radius:    4px;
  --pm-radius-lg: 8px;

  --pm-gutter: clamp(1.25rem, 4vw, 3rem);
  --pm-max:    1200px;
  --pm-max-text: 74ch;
}

/* -------------------------------------------------------------- base/reset */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--pm-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--pm-ink);
  background: var(--pm-paper);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; }

a { color: var(--pm-blue); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: 3px solid var(--pm-gold); outline-offset: 2px; }

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

.pm-site { display: flex; flex-direction: column; min-height: 100vh; }
.pm-main { flex: 1 0 auto; }

/* Skip link */
.pm-skip {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: .9rem 1.5rem;
  background: var(--pm-gold);
  color: var(--pm-navy-deep);
  font-weight: 700;
  text-decoration: none;
}
.pm-skip:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------------- site header */

.pm-header { position: sticky; top: 0; z-index: 100; }

.pm-header__bar {
  background: var(--pm-navy-deep);
  border-bottom: 1px solid rgba(201, 162, 39, .3);
}

/* The header runs wider than the 1200px content column: the lodge has eleven
   top-level items and they will not fit a single row inside the text measure. */
.pm-header .pm-wrap { max-width: 1440px; }

.pm-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .85rem;
}

.pm-brand { flex: 0 0 auto; }

.pm-brand__link {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  white-space: nowrap;
}
.pm-brand .custom-logo { display: block; max-height: 56px; width: auto; }
/* Specificity is deliberate: the base .pm-emblem rule is declared later in this
   file, so a bare .pm-emblem--mark would lose the cascade to its clamp() width. */
.pm-brand .pm-emblem--mark { width: 34px; margin: 0; flex: 0 0 auto; }
.pm-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.pm-brand__name {
  font-family: var(--pm-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
}
.pm-brand__affix {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pm-gold);
  margin-top: .18rem;
}

/* Menu */
.pm-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pm-menu li { position: relative; }
.pm-menu a {
  display: block;
  /* The lodge runs 11 top-level items; this keeps them on one row to 1200px. */
  padding: .55rem .58rem;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #cfd8e6;
  text-decoration: none;
  border-radius: 3px;
  transition: color .16s ease, background-color .16s ease;
}
.pm-menu a:hover { color: var(--pm-gold-light); background: rgba(255, 255, 255, .07); }

.pm-menu .current-menu-item > a,
.pm-menu .current_page_item > a,
.pm-menu .current-menu-ancestor > a {
  color: var(--pm-navy-deep);
  background: var(--pm-gold);
}

/* One level of dropdown */
.pm-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: var(--pm-navy);
  border: 1px solid rgba(201, 162, 39, .28);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.pm-menu li:hover > .sub-menu,
.pm-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.pm-menu .sub-menu a { text-transform: none; letter-spacing: .02em; font-size: .875rem; }

/* Burger */
.pm-burger {
  display: none;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  background: transparent;
  color: #cfd8e6;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--pm-radius);
  cursor: pointer;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pm-burger__box { display: grid; gap: 4px; width: 18px; }
.pm-burger__line {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.pm-burger[aria-expanded="true"] { color: var(--pm-gold-light); border-color: var(--pm-gold); }
.pm-burger[aria-expanded="true"] .pm-burger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pm-burger[aria-expanded="true"] .pm-burger__line:nth-child(2) { opacity: 0; }
.pm-burger[aria-expanded="true"] .pm-burger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1259px) {
  .pm-burger { display: inline-flex; }

  .pm-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    padding: .75rem var(--pm-gutter) 1.5rem;
    background: var(--pm-navy-deep);
    border-bottom: 1px solid rgba(201, 162, 39, .3);
    box-shadow: var(--pm-shadow-lg);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  .pm-nav.is-open { display: block; }

  .pm-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .pm-menu > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .pm-menu > li:last-child { border-bottom: 0; }
  .pm-menu a { padding: .85rem .25rem; font-size: .8125rem; }

  .pm-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 .5rem .9rem;
  }
}

/* --------------------------------------------------------------- primitives */

.pm-scope,
.pm-scope * { box-sizing: border-box; }

.pm-scope {
  font-family: var(--pm-sans);
  color: var(--pm-ink);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.pm-wrap {
  width: 100%;
  max-width: var(--pm-max);
  margin-inline: auto;
  padding-inline: var(--pm-gutter);
}

.pm-wrap--narrow { max-width: 860px; }

.pm-section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.pm-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.pm-section--cream { background: var(--pm-cream); }
.pm-section--navy  { background: var(--pm-navy); color: #e9eef6; }
.pm-section--navy .pm-eyebrow { color: var(--pm-gold-light); }
.pm-section--navy h2, .pm-section--navy h3 { color: #fff; }
.pm-section--navy p { color: rgba(233, 238, 246, .82); }

/* ------------------------------------------------------------------- type */

.pm-scope h1, .pm-scope h2, .pm-scope h3, .pm-scope h4 {
  font-family: var(--pm-serif);
  font-weight: 600;
  line-height: 1.15;
  color: var(--pm-navy);
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

.pm-scope h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); }
.pm-scope h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
.pm-scope h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.pm-scope h4 { font-size: 1.125rem; font-family: var(--pm-sans); font-weight: 650; letter-spacing: .01em; }

.pm-scope p { margin: 0 0 1.15em; max-width: var(--pm-max-text); }
.pm-scope p:last-child { margin-bottom: 0; }

.pm-eyebrow {
  display: block;
  font-family: var(--pm-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pm-gold);
  margin-bottom: .9rem;
}

.pm-lead { font-size: 1.1875rem; line-height: 1.65; color: var(--pm-muted); }

.pm-motto {
  font-family: var(--pm-serif);
  font-style: italic;
  font-size: clamp(1.125rem, 2.4vw, 1.6rem);
  line-height: 1.45;
  color: var(--pm-gold-light);
}

/* Gold rule under section headings */
.pm-rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--pm-gold);
  margin: 1.25rem 0 1.75rem;
  border: 0;
}
.pm-rule--center { margin-inline: auto; }

.pm-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.pm-head--center { text-align: center; }
.pm-head--center .pm-lead { margin-inline: auto; }

/* ---------------------------------------------------------------- buttons */

.pm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--pm-sans);
  font-size: .9375rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .95rem 1.75rem;
  border-radius: var(--pm-radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.pm-btn:hover { transform: translateY(-1px); }
.pm-btn:focus-visible { outline: 3px solid var(--pm-gold-light); outline-offset: 3px; }

.pm-btn--gold  { background: var(--pm-gold); color: var(--pm-navy-deep) !important; border-color: var(--pm-gold); }
.pm-btn--gold:hover { background: var(--pm-gold-light); border-color: var(--pm-gold-light); }

.pm-btn--navy  { background: var(--pm-navy); color: #fff !important; border-color: var(--pm-navy); }
.pm-btn--navy:hover { background: var(--pm-blue); border-color: var(--pm-blue); }

.pm-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.55); }
.pm-btn--ghost:hover { border-color: var(--pm-gold); color: var(--pm-gold-light) !important; }

.pm-btn--outline { background: transparent; color: var(--pm-navy) !important; border-color: var(--pm-navy); }
.pm-btn--outline:hover { background: var(--pm-navy); color: #fff !important; }

.pm-btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }

/* ------------------------------------------------------------------- hero */

.pm-hero {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: clamp(420px, 68vh, 680px);
  padding-block: clamp(4rem, 10vw, 7rem);
  background: radial-gradient(120% 90% at 50% 0%, var(--pm-blue) 0%, var(--pm-navy) 48%, var(--pm-navy-deep) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.pm-hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .28;
  z-index: -2;
}

.pm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(6,18,37,.35) 0%, rgba(6,18,37,.72) 100%);
}

.pm-hero__inner { position: relative; max-width: 62rem; }

.pm-hero h1 { color: #fff; margin-bottom: .35em; }

.pm-hero__sub {
  font-family: var(--pm-sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--pm-gold);
  margin-bottom: 1.25rem;
}

.pm-hero .pm-btn-row { justify-content: center; margin-top: 2.25rem; }

/* Square and compasses emblem */
.pm-emblem { display: block; width: clamp(56px, 8vw, 84px); height: auto; margin: 0 auto 1.5rem; }
.pm-emblem--large { width: clamp(96px, 14vw, 160px); margin-bottom: 2rem; }

/* Compact page banner for interior pages */
.pm-banner {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem);
  background: linear-gradient(135deg, var(--pm-navy-deep) 0%, var(--pm-blue) 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.pm-banner h1 { color: #fff; margin: 0; }
.pm-banner .pm-eyebrow { color: var(--pm-gold-light); }
.pm-banner__sub { color: rgba(255,255,255,.78); margin: .75rem auto 0; max-width: 60ch; }

/* ------------------------------------------------------------------ cards */

.pm-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.pm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.pm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.pm-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.pm-card {
  background: var(--pm-paper);
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--pm-shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  height: 100%;
}
.pm-card--link:hover { box-shadow: var(--pm-shadow-md); transform: translateY(-3px); border-color: var(--pm-gold-dim); }
.pm-card h3 { margin-bottom: .4em; }
.pm-card p { color: var(--pm-muted); font-size: 1rem; }

.pm-card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(201,162,39,.14);
  color: var(--pm-gold);
  margin-bottom: 1.1rem;
  font-size: 1.125rem;
}

.pm-card__more {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1rem;
  font-weight: 650; font-size: .875rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--pm-blue); text-decoration: none;
}
.pm-card__more::after { content: "\2192"; transition: transform .18s ease; }
.pm-card--link:hover .pm-card__more::after { transform: translateX(3px); }

/* ------------------------------------------------------- meeting info card */

.pm-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 0;
  background: var(--pm-paper);
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius-lg);
  overflow: hidden;
  box-shadow: var(--pm-shadow-md);
}
.pm-info__cell { padding: clamp(1.75rem, 3vw, 2.5rem); border-right: 1px solid var(--pm-line); }
.pm-info__cell:last-child { border-right: 0; }
.pm-info__label {
  font-size: .6875rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pm-gold); margin-bottom: .75rem;
}
.pm-info__value { font-family: var(--pm-serif); font-size: 1.375rem; line-height: 1.35; color: var(--pm-navy); }
.pm-info__value span { display: block; font-family: var(--pm-sans); font-size: .9375rem; color: var(--pm-muted); margin-top: .35rem; }
.pm-info__value a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--pm-gold-dim); }
.pm-info__value a:hover { border-bottom-color: var(--pm-gold); }

@media (max-width: 800px) {
  .pm-info__cell { border-right: 0; border-bottom: 1px solid var(--pm-line); }
  .pm-info__cell:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------- officers */

.pm-officers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }

.pm-officer { text-align: center; }
.pm-officer__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, var(--pm-blue) 0%, var(--pm-navy) 100%);
  margin-bottom: 1.1rem;
  border: 3px solid transparent;
  box-shadow: 0 0 0 1px var(--pm-line);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pm-officer:hover .pm-officer__photo { border-color: var(--pm-gold); box-shadow: var(--pm-shadow-md); }
.pm-officer__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-officer__initials {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--pm-serif); font-size: 2.25rem; color: var(--pm-gold-light);
  letter-spacing: .05em;
}
.pm-officer__office {
  font-size: .6875rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pm-gold); margin-bottom: .35rem;
}
.pm-officer__name { font-family: var(--pm-serif); font-size: 1.1875rem; color: var(--pm-navy); line-height: 1.3; }
.pm-officer__name em { display: block; font-family: var(--pm-sans); font-style: normal; font-size: .8125rem; color: var(--pm-muted); margin-top: .25rem; }

/* ------------------------------------------------------------------ lists */

.pm-list { list-style: none; margin: 0; padding: 0; }
.pm-list li {
  position: relative;
  padding: .65rem 0 .65rem 2rem;
  border-bottom: 1px solid var(--pm-line);
  max-width: var(--pm-max-text);
}
.pm-list li:last-child { border-bottom: 0; }
.pm-list li::before {
  content: "";
  position: absolute;
  left: .35rem; top: 1.35rem;
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--pm-gold);
}

/* --------------------------------------------------------------- fee table */

.pm-fees { display: grid; gap: 1rem; }
.pm-fee {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  justify-content: space-between;
  padding: 1.35rem 1.5rem;
  background: var(--pm-paper);
  border: 1px solid var(--pm-line);
  border-left: 3px solid var(--pm-gold);
  border-radius: var(--pm-radius);
}
.pm-fee__name { font-family: var(--pm-serif); font-size: 1.25rem; color: var(--pm-navy); }
.pm-fee__note { display: block; font-family: var(--pm-sans); font-size: .8125rem; color: var(--pm-muted); margin-top: .3rem; }
.pm-fee__amount { font-family: var(--pm-serif); font-size: 1.75rem; color: var(--pm-blue); white-space: nowrap; }
.pm-fee__action { flex: 0 0 auto; }
.pm-fee__ask {
  font-family: var(--pm-sans);
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pm-muted);
}

/* ------------------------------------------------------------- doc / forms */

.pm-docs { display: grid; gap: .75rem; }
.pm-doc {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.35rem;
  background: var(--pm-paper);
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius);
  text-decoration: none !important;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.pm-doc:hover { border-color: var(--pm-gold); box-shadow: var(--pm-shadow-sm); background: #fffdf7; }
.pm-doc__icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 40px; height: 46px;
  border-radius: 3px;
  background: var(--pm-navy);
  color: var(--pm-gold-light);
  font-size: .625rem; font-weight: 700; letter-spacing: .06em;
}
.pm-doc__body { flex: 1 1 auto; min-width: 0; }
.pm-doc__title { font-weight: 600; color: var(--pm-navy); line-height: 1.4; }
.pm-doc__meta { font-size: .8125rem; color: var(--pm-muted); margin-top: .2rem; }
.pm-doc__cta { flex: 0 0 auto; font-size: .8125rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-gold); }

/* ------------------------------------------------------------------- news */

.pm-news { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.pm-news__item {
  display: flex; flex-direction: column;
  background: var(--pm-paper);
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius-lg);
  overflow: hidden;
  box-shadow: var(--pm-shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.pm-news__item:hover { box-shadow: var(--pm-shadow-md); transform: translateY(-3px); }
.pm-news__thumb { aspect-ratio: 16 / 10; background: linear-gradient(160deg, var(--pm-blue), var(--pm-navy)); display: grid; place-items: center; }
.pm-news__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pm-news__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.pm-news__source { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pm-gold); }
.pm-news__title { font-family: var(--pm-serif); font-size: 1.25rem; color: var(--pm-navy); line-height: 1.3; }
.pm-news__date { font-size: .8125rem; color: var(--pm-muted); margin-top: auto; }

/* ---------------------------------------------------------------- gallery */

.pm-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .75rem; }
.pm-gallery a, .pm-gallery figure { display: block; margin: 0; position: relative; overflow: hidden; border-radius: var(--pm-radius); aspect-ratio: 4 / 3; background: var(--pm-cream); }
.pm-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.pm-gallery a:hover img { transform: scale(1.05); }

/* ------------------------------------------------------------------- misc */

.pm-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.pm-split__media img { width: 100%; height: auto; border-radius: var(--pm-radius-lg); box-shadow: var(--pm-shadow-md); display: block; }

.pm-quote {
  border-left: 3px solid var(--pm-gold);
  padding: .35rem 0 .35rem 1.5rem;
  margin: 2rem 0;
  font-family: var(--pm-serif);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--pm-navy);
}
.pm-quote cite { display: block; font-family: var(--pm-sans); font-style: normal; font-size: .875rem; color: var(--pm-muted); margin-top: .75rem; }

.pm-cta {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--pm-radius-lg);
  background: linear-gradient(135deg, var(--pm-navy) 0%, var(--pm-blue) 100%);
  color: #fff;
}
.pm-cta h2 { color: #fff; }
.pm-cta p { color: rgba(255,255,255,.82); margin-inline: auto; }
.pm-cta .pm-btn-row { justify-content: center; margin-top: 1.75rem; }

.pm-note {
  padding: 1.15rem 1.35rem;
  background: rgba(201,162,39,.09);
  border: 1px dashed var(--pm-gold-dim);
  border-radius: var(--pm-radius);
  font-size: .9375rem;
  color: var(--pm-muted);
}

.pm-todo {
  padding: 1rem 1.25rem;
  background: #fff8e1;
  border-left: 3px solid #f0ad00;
  border-radius: var(--pm-radius);
  font-size: .875rem;
  color: #6b5200;
  margin-bottom: 1.5rem;
}
.pm-todo strong { color: #4a3800; }

.pm-map { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--pm-radius-lg); box-shadow: var(--pm-shadow-md); display: block; }

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

/* ------------------------------------------------------ home page specifics */

.pm-center { text-align: center; }
.pm-center p, .pm-center .pm-lead { margin-inline: auto; }
.pm-btn-row--center { justify-content: center; }

.pm-split--even { align-items: start; gap: clamp(2rem, 6vw, 5rem); }
.pm-section--navy .pm-split__media img { box-shadow: none; }

/* Emblem panel used where Barrington places a photograph */
.pm-panel {
  display: grid;
  place-items: center;
  padding: clamp(2.5rem, 6vw, 4rem) 2rem;
  background: var(--pm-cream);
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius-lg);
  text-align: center;
}
.pm-panel--navy {
  background: linear-gradient(135deg, var(--pm-navy) 0%, var(--pm-blue) 100%);
  border-color: transparent;
}
.pm-panel__motto {
  font-family: var(--pm-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--pm-gold);
  margin: 0;
}
.pm-panel--navy .pm-panel__motto { color: var(--pm-gold-light); }
.pm-panel .pm-emblem { margin-bottom: 1.25rem; }

/* "More Options" link list */
.pm-optionlist { list-style: none; margin: 0; padding: 0; }
.pm-optionlist li { border-bottom: 1px solid var(--pm-line); }
.pm-optionlist li:last-child { border-bottom: 0; }
.pm-optionlist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem .25rem;
  font-family: var(--pm-serif);
  font-size: 1.1875rem;
  color: var(--pm-navy);
  text-decoration: none;
  transition: color .16s ease, padding-left .16s ease;
}
.pm-optionlist a::after { content: "\2192"; color: var(--pm-gold); transition: transform .16s ease; }
.pm-optionlist a:hover { color: var(--pm-blue); padding-left: .75rem; }
.pm-optionlist a:hover::after { transform: translateX(4px); }

/* Meeting / location block on the navy band */
.pm-bigline {
  font-family: var(--pm-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  color: #fff;
  margin-bottom: 1.25rem;
}
.pm-section--navy .pm-info__label { color: var(--pm-gold); margin-bottom: .6rem; }
.pm-section--navy .pm-bigline { color: #fff; }

/* ------------------------------------------------------- article typography */

.pm-prose { font-size: 1.0625rem; line-height: 1.75; }
.pm-prose > * + * { margin-top: 1.15em; }
.pm-prose h2, .pm-prose h3, .pm-prose h4 { font-family: var(--pm-serif); color: var(--pm-navy); margin-top: 2em; margin-bottom: .5em; }
.pm-prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.pm-prose h3 { font-size: 1.375rem; }
.pm-prose h4 { font-family: var(--pm-sans); font-size: 1.0625rem; font-weight: 650; }
.pm-prose a { color: var(--pm-blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--pm-gold-dim); }
.pm-prose a:hover { text-decoration-color: var(--pm-gold); }
.pm-prose ul, .pm-prose ol { padding-left: 1.35rem; }
.pm-prose li + li { margin-top: .4em; }
.pm-prose img { border-radius: var(--pm-radius); }
.pm-prose figure { margin: 2rem 0; }
.pm-prose figcaption { font-size: .875rem; color: var(--pm-muted); margin-top: .6rem; text-align: center; }
.pm-prose blockquote {
  margin: 2rem 0;
  padding: .35rem 0 .35rem 1.5rem;
  border-left: 3px solid var(--pm-gold);
  font-family: var(--pm-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--pm-navy);
}
.pm-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  padding: .15em .4em;
  background: var(--pm-cream);
  border-radius: 3px;
}
.pm-prose pre { padding: 1.25rem; background: var(--pm-navy-deep); color: #e9eef6; border-radius: var(--pm-radius); overflow-x: auto; }
.pm-prose pre code { background: none; padding: 0; color: inherit; }
.pm-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.pm-prose th, .pm-prose td { padding: .75rem 1rem; border-bottom: 1px solid var(--pm-line); text-align: left; }
.pm-prose th { font-weight: 650; color: var(--pm-navy); }
.pm-prose hr { border: 0; border-top: 1px solid var(--pm-line); margin: 2.5rem 0; }

.pm-featured { margin: 0 0 2.5rem; }
.pm-featured img { width: 100%; border-radius: var(--pm-radius-lg); box-shadow: var(--pm-shadow-md); display: block; }

.pm-tags { margin-top: 2rem; font-size: .875rem; }
.pm-tags a {
  display: inline-block;
  padding: .3rem .7rem;
  margin: 0 .3rem .4rem 0;
  background: var(--pm-cream);
  border-radius: 999px;
  color: var(--pm-blue);
  text-decoration: none;
}
.pm-tags a:hover { background: var(--pm-gold); color: var(--pm-navy-deep); }

/* Alignment classes from the block editor */
.pm-prose .alignleft  { float: left; margin: .3rem 1.75rem 1.25rem 0; }
.pm-prose .alignright { float: right; margin: .3rem 0 1.25rem 1.75rem; }
.pm-prose .aligncenter { margin-inline: auto; display: block; }
.pm-prose .alignwide, .pm-prose .alignfull { max-width: none; }
.pm-prose::after { content: ""; display: table; clear: both; }

.pm-news__excerpt { font-size: .9375rem; color: var(--pm-muted); line-height: 1.6; }
.pm-news__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.pm-emblem--thumb { width: 46px; opacity: .55; margin: 0; }

/* --------------------------------------------------- pagination & post nav */

.pm-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin-top: 3rem;
}
.pm-pager .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 .85rem;
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius);
  color: var(--pm-navy);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 600;
}
.pm-pager .page-numbers:hover { border-color: var(--pm-gold); background: var(--pm-cream); }
.pm-pager .page-numbers.current { background: var(--pm-navy); border-color: var(--pm-navy); color: #fff; }
.pm-pager .dots { border-color: transparent; }

.pm-postnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--pm-line);
  font-size: .9375rem;
}
.pm-postnav a { color: var(--pm-blue); text-decoration: none; font-weight: 600; }
.pm-postnav a:hover { color: var(--pm-gold); }
.pm-postnav__next { margin-left: auto; text-align: right; }

.pm-pagelinks { margin-top: 2rem; font-size: .9375rem; }

/* ----------------------------------------------------------------- search */

.pm-searchbar { margin-bottom: 2.5rem; }
.pm-search { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 560px; }
.pm-search__field {
  flex: 1 1 220px;
  padding: .85rem 1.1rem;
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius);
  background: var(--pm-paper);
}
.pm-search__field:focus { border-color: var(--pm-gold); }
.pm-search__submit { flex: 0 0 auto; }

/* --------------------------------------------------------------- comments */

.pm-comments { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--pm-line); }
.pm-comments__title { font-family: var(--pm-serif); font-size: 1.5rem; color: var(--pm-navy); margin: 0 0 1.5rem; }
.pm-comments__list, .pm-comments__list .children { list-style: none; margin: 0; padding: 0; }
.pm-comments__list .children { margin-left: 1.5rem; padding-left: 1.5rem; border-left: 2px solid var(--pm-line); }
.pm-comments__list li { margin-bottom: 1.75rem; }
.pm-comments .comment-author { font-weight: 650; color: var(--pm-navy); }
.pm-comments .comment-author img { border-radius: 50%; vertical-align: middle; margin-right: .6rem; }
.pm-comments .comment-metadata { font-size: .8125rem; color: var(--pm-muted); margin-bottom: .5rem; }
.pm-comments .comment-metadata a { color: inherit; }

.pm-comments input[type="text"],
.pm-comments input[type="email"],
.pm-comments input[type="url"],
.pm-comments textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius);
  background: var(--pm-paper);
}
.pm-comments label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .35rem; color: var(--pm-navy); }
.pm-comments p { margin-bottom: 1.1rem; }

/* ------------------------------------------------------------ member login */

.pm-login {
  max-width: 420px;
  margin: 2rem 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--pm-cream);
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius-lg);
}
.pm-login label { display: block; font-size: .875rem; font-weight: 600; color: var(--pm-navy); margin-bottom: .3rem; }
.pm-login input[type="text"],
.pm-login input[type="password"] {
  width: 100%;
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius);
  background: var(--pm-paper);
}
.pm-login .login-remember label { font-weight: 400; color: var(--pm-muted); }
.pm-login input[type="submit"] {
  width: 100%;
  padding: .9rem 1.5rem;
  background: var(--pm-navy);
  color: #fff;
  border: 0;
  border-radius: var(--pm-radius);
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
.pm-login input[type="submit"]:hover { background: var(--pm-blue); }
.pm-login__lost { margin: 1rem 0 0; font-size: .875rem; text-align: center; }

/* -------------------------------------------------------------- woocommerce */

.pm-woo .woocommerce-message,
.pm-woo .woocommerce-info,
.pm-woo .woocommerce-error {
  border-top-color: var(--pm-gold);
  background: var(--pm-cream);
}
.pm-woo .price { color: var(--pm-blue); font-family: var(--pm-serif); font-size: 1.25rem; }
.pm-woo .woocommerce-loop-product__title { font-family: var(--pm-serif); color: var(--pm-navy); }

.pm-woo a.button,
.pm-woo button.button,
.pm-woo input.button,
.pm-woo .button.alt {
  background: var(--pm-navy);
  color: #fff;
  border-radius: var(--pm-radius);
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .875rem;
}
.pm-woo a.button:hover,
.pm-woo button.button:hover,
.pm-woo input.button:hover,
.pm-woo .button.alt:hover { background: var(--pm-blue); color: #fff; }

.pm-woo .woocommerce-breadcrumb { font-size: .875rem; color: var(--pm-muted); }

/* ------------------------------------------------------------------ footer */

.pm-footer { flex: 0 0 auto; background: var(--pm-navy-deep); color: rgba(233, 238, 246, .74); font-size: .9375rem; }
.pm-footer a { color: rgba(233, 238, 246, .82); text-decoration: none; }
.pm-footer a:hover { color: var(--pm-gold-light); }
.pm-footer p { margin: 0 0 1em; }
.pm-footer p:last-child { margin-bottom: 0; }

.pm-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.pm-widget__title,
.pm-footer .pm-widget__title {
  font-family: var(--pm-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pm-gold);
  margin: 0 0 1.1rem;
}

.pm-footer__links { list-style: none; margin: 0; padding: 0; }
.pm-footer__links li { padding: .3rem 0; }

.pm-footer .pm-widget { margin-bottom: 2rem; }
.pm-footer .pm-widget:last-child { margin-bottom: 0; }
.pm-footer .pm-widget ul { list-style: none; margin: 0; padding: 0; }
.pm-footer .pm-widget li { padding: .3rem 0; }

.pm-footer__base { border-top: 1px solid rgba(255, 255, 255, .1); }
.pm-footer__baseinner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
}
.pm-footer__copy { font-size: .8125rem; color: rgba(233, 238, 246, .58); margin: 0; }
.pm-footer__menu { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; font-size: .8125rem; }

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .pm-scope *,
  .pm-scope *::before,
  .pm-scope *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ print */

@media print {
  .pm-hero, .pm-banner { background: none !important; color: #000 !important; min-height: auto; }
  .pm-btn, .pm-cta { display: none !important; }
  .pm-scope { font-size: 11pt; }
}

/* ==========================================================================
   BARRINGTON SKIN
   Values measured from the rendered barringtonmasons.org, not approximated:
   charcoal #333 page over a fixed photograph, Playfair Display headings,
   Lato body at 16px/29px, 960px content column, square 200x40 buttons.
   Declared last so it wins the cascade over the tokens above.
   ========================================================================== */

:root {
  --pm-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --pm-sans:  "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --pm-char:     #333333;   /* page ground            */
  --pm-char-2:   #2e2e2e;   /* alternating band       */
  --pm-char-3:   #3b3b3b;   /* cards and panels       */
  --pm-text:     #d5d5d5;   /* body copy              */
  --pm-bright:   #ecf0f1;   /* headings, nav, buttons */
  --pm-dim:      #a9a9a9;   /* secondary copy         */
  --pm-hair:     rgba(255, 255, 255, .14);

  --pm-max: 960px;
}

/* ---- page ground ------------------------------------------------------- */

body {
  background-color: var(--pm-char);
  color: var(--pm-text);
  font-family: var(--pm-sans);
  font-size: 16px;
  line-height: 29px;
}

/* Fixed photographic background, as Barrington uses. Drop a file at
   assets/img/background.jpg (or set the Customizer background) to enable. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--pm-char) var(--pm-bg-image, none) no-repeat 50% 50% / cover;
  background-attachment: fixed;
}

.pm-scope { color: var(--pm-text); font-size: 16px; line-height: 29px; }

/* ---- typography -------------------------------------------------------- */

.pm-scope h1, .pm-scope h2, .pm-scope h3, .pm-scope h4,
.pm-news__title, .pm-officer__name, .pm-fee__name, .pm-info__value,
.pm-doc__title, .pm-bigline, .pm-panel__motto {
  font-family: var(--pm-serif);
  font-weight: 400;
  letter-spacing: .8px;
  text-transform: none;
  color: var(--pm-text);
}

.pm-hero h1 { font-size: clamp(2.5rem, 7vw, 80px); line-height: 1.05; color: var(--pm-bright); }
.pm-scope h2 { font-size: 32px; line-height: 1.3; color: var(--pm-text); }
.pm-scope h3 { font-size: 22px; color: var(--pm-text); }
.pm-scope p, .pm-prose { color: var(--pm-text); }
.pm-lead { color: var(--pm-dim); font-size: 17px; }
.pm-eyebrow { color: var(--pm-dim); font-family: var(--pm-sans); }
.pm-motto { color: var(--pm-bright); }

.pm-banner h1 { font-size: clamp(2rem, 5vw, 52px); color: var(--pm-bright); }

/* ---- surfaces: the whole site is dark -------------------------------- */

.pm-section--cream { background: var(--pm-char-2); }
.pm-section--navy  { background: var(--pm-char-2); }
.pm-section--navy h2, .pm-section--navy h3 { color: var(--pm-text); }
.pm-section--navy p { color: var(--pm-text); }

.pm-hero,
.pm-banner {
  background: transparent;
  border-bottom: 1px solid var(--pm-hair);
}
.pm-hero::after { background: rgba(51, 51, 51, .55); }

.pm-card,
.pm-info,
.pm-fee,
.pm-doc,
.pm-news__item,
.pm-panel,
.pm-login {
  background: var(--pm-char-3);
  border-color: var(--pm-hair);
  box-shadow: none;
  color: var(--pm-text);
}
.pm-panel--navy { background: var(--pm-char-2); }
.pm-card p, .pm-news__excerpt, .pm-doc__meta, .pm-fee__note { color: var(--pm-dim); }
.pm-info__cell { border-color: var(--pm-hair); }
.pm-note { background: rgba(255, 255, 255, .05); border-color: var(--pm-hair); color: var(--pm-dim); }

.pm-list li, .pm-optionlist li { border-color: var(--pm-hair); }
.pm-optionlist a { color: var(--pm-text); font-family: var(--pm-serif); }
.pm-optionlist a:hover { color: var(--pm-bright); }

.pm-quote, .pm-prose blockquote { color: var(--pm-text); border-left-color: var(--pm-dim); }
.pm-prose a { color: var(--pm-bright); }
.pm-prose th, .pm-prose td { border-color: var(--pm-hair); }

.pm-officer__photo { background: var(--pm-char-2); box-shadow: none; }
.pm-officer__office { color: var(--pm-dim); font-family: var(--pm-sans); }
.pm-fee__amount { color: var(--pm-bright); }
.pm-news__thumb { background: var(--pm-char-2); }

.pm-cta { background: var(--pm-char-2); border: 1px solid var(--pm-hair); }
.pm-cta h2 { color: var(--pm-text); }
.pm-cta p { color: var(--pm-dim); }

.pm-rule { background: var(--pm-dim); width: 48px; height: 1px; }

/* ---- navigation -------------------------------------------------------- */

.pm-header__bar { background: var(--pm-char); border-bottom: 1px solid var(--pm-hair); }
.pm-menu a {
  font-family: var(--pm-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--pm-bright);
}
.pm-menu a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.pm-menu .current-menu-item > a,
.pm-menu .current_page_item > a,
.pm-menu .current-menu-ancestor > a { background: rgba(255, 255, 255, .14); color: #fff; }
.pm-menu .sub-menu { background: var(--pm-char-3); border-color: var(--pm-hair); }
.pm-brand__name { color: var(--pm-bright); font-family: var(--pm-serif); font-weight: 400; }
.pm-brand__affix { color: var(--pm-dim); }
.pm-nav { background: var(--pm-char); }

/* ---- buttons: 200x40, square, transparent ---------------------------- */

.pm-btn {
  min-width: 200px;
  height: 40px;
  padding: 0 1.25rem;
  border-radius: 0;
  font-family: var(--pm-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .91px;
  text-transform: uppercase;
  background: transparent;
  color: var(--pm-bright) !important;
  border: 1px solid var(--pm-bright);
}
.pm-btn:hover { background: var(--pm-bright); color: var(--pm-char) !important; transform: none; }
.pm-btn--gold, .pm-btn--navy, .pm-btn--outline, .pm-btn--ghost {
  background: transparent;
  color: var(--pm-bright) !important;
  border-color: var(--pm-bright);
}
.pm-btn--gold:hover, .pm-btn--navy:hover, .pm-btn--outline:hover, .pm-btn--ghost:hover {
  background: var(--pm-bright);
  color: var(--pm-char) !important;
  border-color: var(--pm-bright);
}

/* ---- emblem + footer --------------------------------------------------- */

.pm-emblem g { stroke: var(--pm-bright) !important; }
.pm-emblem circle { fill: var(--pm-bright) !important; }
.pm-card__icon { background: rgba(255, 255, 255, .08); color: var(--pm-bright); }

.pm-footer { background: var(--pm-char-2); color: var(--pm-dim); border-top: 1px solid var(--pm-hair); }
.pm-footer a { color: var(--pm-text); }
.pm-footer a:hover { color: var(--pm-bright); }
.pm-widget__title, .pm-footer .pm-widget__title { color: var(--pm-bright); font-family: var(--pm-serif); text-transform: none; letter-spacing: .8px; font-size: 18px; font-weight: 400; }
.pm-footer__base { border-top-color: var(--pm-hair); }

/* ---- forms ------------------------------------------------------------- */

.pm-search__field,
.pm-login input[type="text"],
.pm-login input[type="password"],
.pm-comments input, .pm-comments textarea {
  background: var(--pm-char-3);
  border-color: var(--pm-hair);
  color: var(--pm-text);
  border-radius: 0;
}
.pm-login label, .pm-comments label { color: var(--pm-text); }
.pm-login input[type="submit"] {
  background: transparent;
  border: 1px solid var(--pm-bright);
  color: var(--pm-bright);
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: .91px;
}
.pm-login input[type="submit"]:hover { background: var(--pm-bright); color: var(--pm-char); }

.pm-pager .page-numbers { color: var(--pm-text); border-color: var(--pm-hair); border-radius: 0; }
.pm-pager .page-numbers.current { background: var(--pm-bright); color: var(--pm-char); border-color: var(--pm-bright); }

/* hero inner shares the 960px content measure */
.pm-hero__inner { max-width: var(--pm-max); }

/* ==========================================================================
   BARRINGTON LAYOUT
   The structural half of the replica: a fixed photograph behind the whole
   page, a centred masthead over it with the menu beneath, and a 960px charcoal
   column of content sitting on top so the photo shows in the margins.
   ========================================================================== */

body::before {
  /* the query is a cache-buster: browsers keep an old background for ever
     otherwise, and the CSS filename never changes. */
  background-image: url("assets/img/background.jpg?v=1787449878");
  background-position: 50% 50%;
  background-size: cover;
  background-attachment: fixed;
}

/* ---- header: transparent band over the photo -------------------------- */

.pm-header { position: static; background: transparent; }
.pm-header__bar { background: transparent; border: 0; }
.pm-header .pm-wrap { max-width: var(--pm-max); text-align: center; }

.pm-masthead { padding: 2.5rem 0 1.25rem; text-align: center; }
.pm-masthead__link { display: block; text-decoration: none; }
.pm-masthead__logo img { margin-inline: auto; }

.pm-masthead__name {
  font-family: var(--pm-serif);
  font-weight: 400;
  font-size: clamp(2rem, 5.2vw, 56px);
  line-height: 1.15;
  letter-spacing: .8px;
  color: var(--pm-bright);
  margin: 0;
}
.pm-masthead__affix {
  font-family: var(--pm-serif);
  font-size: clamp(1.25rem, 3vw, 32px);
  letter-spacing: .8px;
  color: var(--pm-bright);
  margin: .35rem 0 0;
}
.pm-masthead__motto {
  font-family: var(--pm-sans);
  font-size: 13px;
  font-style: italic;
  letter-spacing: .5px;
  color: #c8b68a;
  margin: 1.1rem auto 0;
  max-width: 46rem;
}

/* ---- nav: centred, wrapping, beneath the title ------------------------ */

.pm-nav { background: transparent; }
.pm-menu { justify-content: center; gap: 0 .15rem; padding-bottom: 1.75rem; }
.pm-menu a { font-size: 12px; padding: .45rem .6rem; }

/* ---- content: 960px charcoal column over the photo -------------------- */

.pm-main {
  width: var(--pm-max);
  max-width: 100%;
  margin-inline: auto;
  background: var(--pm-char);
}
.pm-main .pm-section { background: transparent; }
.pm-main .pm-section--cream,
.pm-main .pm-section--navy { background: rgba(255, 255, 255, .035); }
.pm-main .pm-wrap { max-width: 100%; padding-inline: 30px; }
.pm-section { padding-block: clamp(2.25rem, 5vw, 3.25rem); }

/* hero sits inside the column like any other band */
.pm-hero {
  min-height: 0;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background: transparent;
  border-bottom: 0;
}
.pm-hero::after { display: none; }
.pm-hero__media { display: none; }

.pm-banner { padding-block: clamp(2rem, 5vw, 3rem); border-bottom: 0; }

/* footer spans the full width again, beneath the column */
.pm-footer { background: rgba(20, 20, 20, .92); }

@media (max-width: 1259px) {
  .pm-nav {
    position: static;
    display: block;
    padding: 0 0 1.25rem;
    background: transparent;
    box-shadow: none;
    border: 0;
    max-height: none;
  }
  .pm-nav:not(.is-open) { display: none; }
  .pm-burger { margin: 0 auto 1rem; }
  .pm-menu { flex-direction: column; }
}

.pm-panel--photo { margin-top: 1.75rem; padding: 2rem 1.5rem; }
.pm-panel--photo img { width: 100%; display: block; }

/* ---- footer: part of the 960px column, three columns that actually fit --- */

.pm-footer {
  width: var(--pm-max);
  max-width: 100%;
  margin-inline: auto;
  background: var(--pm-char-2);
  border-top: 1px solid var(--pm-hair);
}

.pm-footer .pm-wrap { max-width: 100%; padding-inline: 30px; }

/* 260px minimums plus a 4vw gap overflowed 864px and forced a 2+1 break.
   200px with a tighter gap keeps all three on one row inside the column. */
.pm-footer__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 2rem;
  padding-block: 2.5rem 2rem;
}

.pm-footer__col { font-size: 14px; line-height: 24px; }
.pm-widget__title,
.pm-footer .pm-widget__title { font-size: 15px; margin-bottom: .75rem; }
.pm-footer__links li { padding: .15rem 0; }

.pm-footer__base { border-top: 1px solid var(--pm-hair); }
.pm-footer__baseinner { justify-content: center; padding-block: 1.1rem; text-align: center; }
.pm-footer__copy { font-size: 12px; letter-spacing: .3px; }

@media (max-width: 640px) {
  .pm-footer__grid { gap: 1.5rem; padding-block: 2rem 1.5rem; }
}

/* ---- colour: warm the charcoal and bring back a Masonic gold accent ----- */

:root {
  --pm-char:   #2b2723;   /* warm charcoal, not neutral grey */
  --pm-char-2: #262320;
  --pm-char-3: #333029;
  --pm-text:   #d8d4cc;   /* warm light grey                 */
  --pm-bright: #f0ece4;
  --pm-dim:    #a89f92;
  --pm-hair:   rgba(230, 214, 180, .16);
  --pm-accent: #c8a951;   /* Masonic gold                    */
}

.pm-rule { background: var(--pm-accent); width: 56px; height: 2px; }
.pm-eyebrow { color: var(--pm-accent); }
.pm-masthead__affix { color: var(--pm-accent); }
.pm-masthead__motto { color: var(--pm-accent); opacity: .92; }

.pm-menu a:hover { color: var(--pm-accent); background: rgba(200, 169, 81, .1); }
.pm-menu .current-menu-item > a,
.pm-menu .current_page_item > a,
.pm-menu .current-menu-ancestor > a { background: var(--pm-accent); color: #241f1a; }

.pm-btn,
.pm-btn--gold, .pm-btn--navy, .pm-btn--outline, .pm-btn--ghost {
  color: var(--pm-accent) !important;
  border-color: var(--pm-accent);
}
.pm-btn:hover,
.pm-btn--gold:hover, .pm-btn--navy:hover, .pm-btn--outline:hover, .pm-btn--ghost:hover {
  background: var(--pm-accent);
  color: #241f1a !important;
  border-color: var(--pm-accent);
}

.pm-optionlist a::after { color: var(--pm-accent); }
.pm-optionlist a:hover { color: var(--pm-accent); }
.pm-card__icon { background: rgba(200, 169, 81, .14); color: var(--pm-accent); }
.pm-officer__office { color: var(--pm-accent); }
.pm-officer:hover .pm-officer__photo { border-color: var(--pm-accent); }
.pm-officer__initials { color: var(--pm-accent); }
.pm-fee { border-left: 2px solid var(--pm-accent); }
.pm-fee__amount { color: var(--pm-accent); }
.pm-doc:hover { border-color: var(--pm-accent); background: rgba(200, 169, 81, .06); }
.pm-doc__icon { background: var(--pm-char-2); color: var(--pm-accent); }
.pm-doc__cta { color: var(--pm-accent); }
.pm-news__source { color: var(--pm-accent); }
.pm-quote, .pm-prose blockquote { border-left-color: var(--pm-accent); }
.pm-panel__motto { color: var(--pm-accent); }
.pm-info__label { color: var(--pm-accent); }
.pm-widget__title, .pm-footer .pm-widget__title { color: var(--pm-accent); }
.pm-emblem g { stroke: var(--pm-accent) !important; }
.pm-emblem circle { fill: var(--pm-accent) !important; }
.pm-skip { background: var(--pm-accent); color: #241f1a; }
.pm-note { border-color: rgba(200, 169, 81, .28); }
.pm-pager .page-numbers.current { background: var(--pm-accent); color: #241f1a; border-color: var(--pm-accent); }
.pm-login input[type="submit"] { border-color: var(--pm-accent); color: var(--pm-accent); }
.pm-login input[type="submit"]:hover { background: var(--pm-accent); color: #241f1a; }

/* ---- footer widgets ----------------------------------------------------
   The three footer areas render whatever widgets the site has, in WordPress's
   own markup (block widgets, legacy widgets, nav menus, text, search). Without
   these rules that output falls back to browser defaults -- bulleted lists,
   Times New Roman, blue links -- which reads as unstyled plain HTML.
   ----------------------------------------------------------------------- */

.pm-footer .pm-widget,
.pm-footer .widget {
  margin-bottom: 1.75rem;
  font-size: 14px;
  line-height: 24px;
  color: var(--pm-text);
}
.pm-footer .pm-widget:last-child,
.pm-footer .widget:last-child { margin-bottom: 0; }

.pm-footer h1, .pm-footer h2, .pm-footer h3,
.pm-footer h4, .pm-footer h5, .pm-footer h6,
.pm-footer .widget-title,
.pm-footer .wp-block-heading {
  font-family: var(--pm-serif);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .8px;
  color: var(--pm-accent);
  margin: 0 0 .75rem;
  text-transform: none;
}

.pm-footer ul,
.pm-footer ol,
.pm-footer .wp-block-list,
.pm-footer .wp-block-page-list,
.pm-footer .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pm-footer li { padding: .15rem 0; border: 0; }
.pm-footer li::before, .pm-footer li::marker { content: none; }

.pm-footer a,
.pm-footer .wp-block-navigation-item__content {
  color: var(--pm-text);
  text-decoration: none;
}
.pm-footer a:hover { color: var(--pm-accent); }

.pm-footer p,
.pm-footer .textwidget,
.pm-footer .wp-block-paragraph { margin: 0 0 .85rem; color: var(--pm-text); }
.pm-footer p:last-child { margin-bottom: 0; }

.pm-footer img { max-width: 100%; height: auto; }
.pm-footer table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pm-footer th, .pm-footer td { border: 1px solid var(--pm-hair); padding: .35rem; }

.pm-footer input[type="text"],
.pm-footer input[type="search"],
.pm-footer input[type="email"],
.pm-footer select,
.pm-footer textarea {
  width: 100%;
  padding: .6rem .8rem;
  background: var(--pm-char-3);
  border: 1px solid var(--pm-hair);
  border-radius: 0;
  color: var(--pm-text);
  font-size: 14px;
}
.pm-footer input[type="submit"],
.pm-footer button {
  padding: .6rem 1.1rem;
  background: transparent;
  border: 1px solid var(--pm-accent);
  border-radius: 0;
  color: var(--pm-accent);
  font-size: 12px;
  letter-spacing: .91px;
  text-transform: uppercase;
  cursor: pointer;
}
.pm-footer input[type="submit"]:hover,
.pm-footer button:hover { background: var(--pm-accent); color: #241f1a; }

/* WordPress calendar widget */
.pm-footer .wp-calendar-table caption { color: var(--pm-accent); padding-bottom: .35rem; }
.pm-footer .wp-calendar-nav { display: flex; justify-content: space-between; font-size: 12px; padding-top: .4rem; }

/* ---- events calendar --------------------------------------------------- */

.pm-cal { margin-top: .5rem; }

.pm-cal__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.pm-cal__title {
  font-family: var(--pm-serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: .8px;
  color: var(--pm-text);
  margin: 0;
  min-width: 12rem;
  text-align: center;
}
.pm-cal__nav {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--pm-hair);
  color: var(--pm-accent);
  text-decoration: none;
  font-size: 18px;
}
.pm-cal__nav:hover { background: var(--pm-accent); color: #241f1a; border-color: var(--pm-accent); }

.pm-cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pm-cal__grid th {
  padding: .5rem .25rem;
  font-family: var(--pm-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--pm-dim);
  border-bottom: 1px solid var(--pm-hair);
}
.pm-cal__day, .pm-cal__pad {
  height: 92px;
  padding: .4rem;
  border: 1px solid var(--pm-hair);
  vertical-align: top;
}
.pm-cal__pad { background: rgba(0, 0, 0, .12); }
.pm-cal__num { display: block; font-size: 12px; color: var(--pm-dim); margin-bottom: .25rem; }
.pm-cal__day.is-today { outline: 2px solid var(--pm-accent); outline-offset: -2px; }
.pm-cal__day.is-today .pm-cal__num { color: var(--pm-accent); font-weight: 700; }
.pm-cal__day.has-events { background: rgba(200, 169, 81, .07); }

.pm-cal__event {
  display: block;
  padding: .2rem .35rem;
  margin-bottom: .2rem;
  background: rgba(200, 169, 81, .18);
  border-left: 2px solid var(--pm-accent);
  font-size: 11px;
  line-height: 1.35;
  color: var(--pm-text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-cal__event:hover { background: var(--pm-accent); color: #241f1a; }

@media (max-width: 640px) {
  .pm-cal__day, .pm-cal__pad { height: 62px; padding: .2rem; }
  .pm-cal__event { font-size: 0; padding: 0; height: 6px; margin-bottom: 2px; }
  .pm-cal__grid th { font-size: 9px; }
}

/* restricted-content notice + members badge */
.pm-restricted {
  max-width: 640px;
  margin: clamp(2rem, 6vw, 4rem) auto;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--pm-char-3);
  border: 1px solid var(--pm-hair);
  border-top: 2px solid var(--pm-accent);
  text-align: center;
}
.pm-restricted h2 { font-size: 26px; color: var(--pm-accent); }
.pm-restricted .pm-login { margin-inline: auto; text-align: left; }

.pm-badge {
  display: inline-block;
  margin-top: .4rem;
  padding: .12rem .5rem;
  border: 1px solid var(--pm-accent);
  color: var(--pm-accent);
  font-family: var(--pm-sans);
  font-size: 10px;
  letter-spacing: .9px;
  text-transform: uppercase;
}

/* ==========================================================================
   EXACT BARRINGTON PALETTE
   Neutral charcoal #333 with #d5d5d5 text and no accent colour, exactly as
   measured from barringtonmasons.org. Because every gold rule above is written
   against --pm-accent, redefining that one token to the light grey removes the
   accent everywhere at once.
   ========================================================================== */

:root {
  --pm-char:   #333333;   /* body / page ground, as measured */
  --pm-char-2: #2e2e2e;   /* alternating band                */
  --pm-char-3: #3b3b3b;   /* cards and panels                */
  --pm-text:   #d5d5d5;   /* paragraphs and headings         */
  --pm-bright: #ecf0f1;   /* masthead, nav, buttons          */
  --pm-dim:    #a9a9a9;   /* secondary copy                  */
  --pm-hair:   rgba(255, 255, 255, .14);
  --pm-accent: #ecf0f1;   /* no gold: the accent IS the light */
}

/* Elements that hard-coded a dark-on-gold pairing now sit on light grey. */
.pm-menu .current-menu-item > a,
.pm-menu .current_page_item > a,
.pm-menu .current-menu-ancestor > a,
.pm-btn:hover,
.pm-btn--gold:hover, .pm-btn--navy:hover,
.pm-btn--outline:hover, .pm-btn--ghost:hover,
.pm-login input[type="submit"]:hover,
.pm-footer input[type="submit"]:hover,
.pm-footer button:hover,
.pm-cal__nav:hover,
.pm-cal__event:hover,
.pm-pager .page-numbers.current,
.pm-skip { color: #333333; }

/* Headings match the body grey, as Barrington renders them. */
.pm-scope h1, .pm-scope h2, .pm-scope h3, .pm-scope h4 { color: var(--pm-text); }
.pm-masthead__name,
.pm-masthead__affix { color: var(--pm-bright); }
.pm-masthead__motto { color: var(--pm-bright); opacity: .85; }
.pm-restricted h2 { color: var(--pm-bright); }

/* Rules and dividers: a thin light line, not a gold bar. */
.pm-rule { background: var(--pm-dim); width: 48px; height: 1px; }

/* Tints that were gold-based become neutral. */
.pm-cal__day.has-events { background: rgba(255, 255, 255, .05); }
.pm-cal__event { background: rgba(255, 255, 255, .1); border-left-color: var(--pm-bright); }
.pm-card__icon { background: rgba(255, 255, 255, .07); color: var(--pm-bright); }
.pm-doc:hover { background: rgba(255, 255, 255, .04); }
.pm-fee { border-left: 2px solid var(--pm-hair); }
.pm-note { border-color: var(--pm-hair); }
.pm-restricted { border-top-color: var(--pm-bright); }
.pm-badge { border-color: var(--pm-dim); color: var(--pm-dim); }
.pm-menu a:hover { background: rgba(255, 255, 255, .08); color: var(--pm-bright); }

/* Some early rules reference the original --pm-gold tokens rather than
   --pm-accent (.pm-info__label among them), so those are neutralised here too
   or a stray gold survives the palette change. */
:root {
  --pm-gold:       #ecf0f1;
  --pm-gold-light: #ffffff;
  --pm-gold-dim:   rgba(255, 255, 255, .28);
}
.pm-info__label,
.pm-eyebrow,
.pm-officer__office,
.pm-doc__cta,
.pm-news__source,
.pm-widget__title,
.pm-footer .pm-widget__title { color: var(--pm-dim); }

/* ==========================================================================
   LEGACY BETHEME WIDGET MARKUP
   The live site's footer is three Custom HTML widgets written for BeTheme.
   Their markup survives the theme switch but BeTheme's CSS does not, so the
   following is required or that HTML renders raw. Verified against the actual
   widget source on palatinemasons.com (custom_html-6, -7, -8).
   ========================================================================== */

/* BeTheme used hr.no_line as an INVISIBLE spacer. Untouched it becomes a
   visible rule across the widget -- the most obvious symptom of the raw HTML. */
.pm-footer hr.no_line,
.pm-scope hr.no_line {
  border: 0 !important;
  border-top: 0 !important;
  height: 0;
  background: none;
  width: auto;
}

/* BeTheme's image wrapper chain around the lodge logo. */
.pm-footer .image_frame,
.pm-footer .image_item,
.pm-footer .image_wrapper,
.pm-footer .mfn-img-box {
  display: block;
  margin: 0 auto;
  border: 0;
  padding: 0;
  max-width: 100%;
  background: none;
}
.pm-footer .image_frame img,
.pm-footer img.scale-with-grid {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.pm-footer .aligncenter { margin-inline: auto; text-align: center; }

/* BeTheme icon font is gone; its <i> tags would show as blank or tofu. */
.pm-footer i[class^="icon-"],
.pm-footer i[class*=" icon-"],
.pm-scope i[class^="icon-"],
.pm-scope i[class*=" icon-"] {
  display: none;
}

/* Widget headings inside the legacy HTML. */
.pm-footer .textwidget h4,
.pm-footer .custom-html-widget h4 {
  font-family: var(--pm-serif);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .8px;
  text-transform: none;
  color: var(--pm-bright);
  margin: 0 0 .6rem;
}
.pm-footer .textwidget p,
.pm-footer .custom-html-widget p {
  color: var(--pm-text);
  font-size: 14px;
  line-height: 24px;
  margin: 0 0 .75rem;
}
.pm-footer .textwidget a { color: var(--pm-text); }
.pm-footer .textwidget a:hover { color: var(--pm-bright); }

/* WordPress wraps widgets in <aside>; make sure it lays out like our columns. */
.pm-footer aside.widget { margin-bottom: 1.75rem; }
.pm-footer aside.widget:last-child { margin-bottom: 0; }

/* BeTheme's floating back-to-top button, which has no styles now. */
#back_to_top,
.pm-footer #back_to_top {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 1rem auto 0;
  border: 1px solid var(--pm-hair);
  color: var(--pm-text);
  text-decoration: none;
  font-size: 0;
}
#back_to_top::after { content: "\2191"; font-size: 16px; }
#back_to_top:hover { background: var(--pm-bright); color: #333333; }

/* BeTheme compatibility shortcode output */
.pm-footer .pm-sc-divider, .pm-scope .pm-sc-divider { border: 0; background: none; }
.pm-sc-icon { display: inline-block; padding: 0 .15em; }
.pm-footer .pm-sc-image { margin-inline: auto; }

/* ==========================================================================
   PALETTE B - CHARCOAL & GOLD  (selected)
   Barrington's measured charcoal #333 and #d5d5d5 body text, with Masonic
   gold #c9a227 returned to the affix, motto, rules, buttons and small labels.
   Declared last, so it is the palette that wins.
   ========================================================================== */

:root {
  --pm-char:   #333333;
  --pm-char-2: #2e2e2e;
  --pm-char-3: #3b3b3b;
  --pm-text:   #d5d5d5;
  --pm-bright: #ecf0f1;
  --pm-dim:    #a9a9a9;
  --pm-hair:   rgba(255, 255, 255, .14);

  --pm-accent:    #c9a227;   /* Masonic gold        */
  --pm-on-accent: #241f10;   /* text on a gold fill */

  --pm-gold:       #c9a227;
  --pm-gold-light: #dcb63f;
  --pm-gold-dim:   rgba(201, 162, 39, .32);
}

/* masthead */
.pm-masthead__name  { color: var(--pm-bright); }
.pm-masthead__affix { color: var(--pm-accent); }
.pm-masthead__motto { color: var(--pm-accent); opacity: .92; }

/* headings stay Barrington grey; only accents are gold */
.pm-scope h1, .pm-scope h2, .pm-scope h3, .pm-scope h4 { color: var(--pm-text); }
.pm-rule { background: var(--pm-accent); width: 56px; height: 2px; }

/* small labels return to gold */
.pm-eyebrow,
.pm-info__label,
.pm-officer__office,
.pm-doc__cta,
.pm-news__source,
.pm-widget__title,
.pm-footer .pm-widget__title,
.pm-footer .textwidget h4,
.pm-footer .custom-html-widget h4,
.pm-panel__motto,
.pm-fee__amount,
.pm-officer__initials,
.pm-restricted h2,
.pm-cal__nav { color: var(--pm-accent); }

/* buttons: gold outline, gold fill on hover */
.pm-btn,
.pm-btn--gold, .pm-btn--navy, .pm-btn--outline, .pm-btn--ghost {
  color: var(--pm-accent) !important;
  border-color: var(--pm-accent);
  background: transparent;
}
.pm-btn:hover,
.pm-btn--gold:hover, .pm-btn--navy:hover,
.pm-btn--outline:hover, .pm-btn--ghost:hover {
  background: var(--pm-accent);
  color: var(--pm-on-accent) !important;
  border-color: var(--pm-accent);
}

/* navigation */
.pm-menu a:hover { color: var(--pm-accent); background: rgba(201, 162, 39, .1); }
.pm-menu .current-menu-item > a,
.pm-menu .current_page_item > a,
.pm-menu .current-menu-ancestor > a { background: var(--pm-accent); color: var(--pm-on-accent); }

/* accents through the components */
.pm-optionlist a::after { color: var(--pm-accent); }
.pm-optionlist a:hover  { color: var(--pm-accent); }
.pm-card__icon { background: rgba(201, 162, 39, .14); color: var(--pm-accent); }
.pm-officer:hover .pm-officer__photo { border-color: var(--pm-accent); }
.pm-fee { border-left: 2px solid var(--pm-accent); }
.pm-doc:hover { border-color: var(--pm-accent); background: rgba(201, 162, 39, .06); }
.pm-doc__icon { background: var(--pm-char-2); color: var(--pm-accent); }
.pm-quote, .pm-prose blockquote { border-left-color: var(--pm-accent); }
.pm-note { border-color: rgba(201, 162, 39, .28); }
.pm-badge { border-color: var(--pm-accent); color: var(--pm-accent); }
.pm-restricted { border-top-color: var(--pm-accent); }
.pm-emblem g { stroke: var(--pm-accent) !important; }
.pm-emblem circle { fill: var(--pm-accent) !important; }

/* calendar */
.pm-cal__day.is-today { outline-color: var(--pm-accent); }
.pm-cal__day.is-today .pm-cal__num { color: var(--pm-accent); }
.pm-cal__day.has-events { background: rgba(201, 162, 39, .07); }
.pm-cal__event { background: rgba(201, 162, 39, .18); border-left-color: var(--pm-accent); }
.pm-cal__event:hover { background: var(--pm-accent); color: var(--pm-on-accent); }
.pm-cal__nav:hover { background: var(--pm-accent); color: var(--pm-on-accent); border-color: var(--pm-accent); }

/* forms + pagination */
.pm-login input[type="submit"],
.pm-footer input[type="submit"],
.pm-footer button { border-color: var(--pm-accent); color: var(--pm-accent); }
.pm-login input[type="submit"]:hover,
.pm-footer input[type="submit"]:hover,
.pm-footer button:hover { background: var(--pm-accent); color: var(--pm-on-accent); }
.pm-pager .page-numbers.current { background: var(--pm-accent); color: var(--pm-on-accent); border-color: var(--pm-accent); }
.pm-skip { background: var(--pm-accent); color: var(--pm-on-accent); }

/* ---- Contact Form 7, styled to the theme ------------------------------- */

.pm-scope .wpcf7 { margin-top: .5rem; }
.pm-scope .wpcf7 label { display: block; font-size: 14px; font-weight: 700; color: var(--pm-text); margin-bottom: .3rem; }
.pm-scope .wpcf7 input[type="text"],
.pm-scope .wpcf7 input[type="email"],
.pm-scope .wpcf7 input[type="tel"],
.pm-scope .wpcf7 input[type="url"],
.pm-scope .wpcf7 input[type="number"],
.pm-scope .wpcf7 input[type="date"],
.pm-scope .wpcf7 select,
.pm-scope .wpcf7 textarea {
  width: 100%;
  padding: .75rem .9rem;
  margin-bottom: 1rem;
  background: var(--pm-char-3);
  border: 1px solid var(--pm-hair);
  border-radius: 0;
  color: var(--pm-text);
  font-family: var(--pm-sans);
  font-size: 15px;
}
.pm-scope .wpcf7 textarea { min-height: 150px; resize: vertical; }
.pm-scope .wpcf7 input:focus,
.pm-scope .wpcf7 textarea:focus,
.pm-scope .wpcf7 select:focus { border-color: var(--pm-accent); outline: none; }
.pm-scope .wpcf7 ::placeholder { color: var(--pm-dim); opacity: .8; }

.pm-scope .wpcf7 input[type="submit"] {
  min-width: 200px;
  height: 40px;
  padding: 0 1.25rem;
  background: transparent;
  border: 1px solid var(--pm-accent);
  border-radius: 0;
  color: var(--pm-accent);
  font-family: var(--pm-sans);
  font-size: 13px;
  letter-spacing: .91px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.pm-scope .wpcf7 input[type="submit"]:hover { background: var(--pm-accent); color: var(--pm-on-accent); }

.pm-scope .wpcf7 .wpcf7-not-valid-tip { color: #e0a3a3; font-size: 13px; margin: -.75rem 0 1rem; }
.pm-scope .wpcf7 .wpcf7-response-output {
  margin: 1.25rem 0 0;
  padding: .9rem 1.1rem;
  border: 1px solid var(--pm-hair);
  border-left: 2px solid var(--pm-accent);
  color: var(--pm-text);
  font-size: 14px;
}
.pm-scope .wpcf7-spinner { filter: invert(1) opacity(.6); }

/* ==========================================================================
   THE EVENTS CALENDAR
   The plugin ships a light-background stylesheet: white panels, near-black
   text, blue links. On charcoal that reads as broken. Class names were taken
   from the live output of /events/list/ (TEC v6, which exposes no CSS custom
   properties, so every surface is set explicitly).
   ========================================================================== */

.tribe-common,
.tribe-events,
#tribe-events-pg-template,
.tribe-events-view,
.tribe-events-view--shortcode {
  background: transparent !important;
  color: var(--pm-text);
  font-family: var(--pm-sans);
}

.tribe-common *,
.tribe-events * { border-color: var(--pm-hair); }

/* ---- typography scale -------------------------------------------------- */

.tribe-common .tribe-common-h1,
.tribe-common .tribe-common-h2,
.tribe-common .tribe-common-h3,
.tribe-common .tribe-common-h4,
.tribe-common .tribe-common-h5,
.tribe-common .tribe-common-h6,
.tribe-common .tribe-common-h7,
.tribe-common .tribe-common-h8,
.tribe-common .tribe-common-h4--min-medium {
  font-family: var(--pm-serif);
  font-weight: 400;
  letter-spacing: .8px;
  color: var(--pm-text);
}

.tribe-common .tribe-common-b1,
.tribe-common .tribe-common-b2,
.tribe-common .tribe-common-b3,
.tribe-common p,
.tribe-common li,
.tribe-common span { color: var(--pm-text); }

.tribe-common a,
.tribe-events a { color: var(--pm-bright); }
.tribe-common a:hover,
.tribe-events a:hover { color: var(--pm-accent); }

/* ---- header, search and view selector ---------------------------------- */

.tribe-events-header,
.tribe-events-header__events-bar,
.tribe-events-c-events-bar,
.tribe-events-c-events-bar__search-container {
  background: transparent !important;
  border-color: var(--pm-hair);
}

.tribe-events-c-search__input-group,
.tribe-events-c-search__input-control,
.tribe-common .tribe-common-form-control-text__input,
.tribe-events-c-events-bar__search-button {
  background: var(--pm-char-3) !important;
  border: 1px solid var(--pm-hair) !important;
  border-radius: 0 !important;
  color: var(--pm-text) !important;
}
.tribe-common .tribe-common-form-control-text__input::placeholder { color: var(--pm-dim); }

.tribe-events-c-view-selector__button,
.tribe-events-c-view-selector__list,
.tribe-events-c-view-selector__list-item {
  background: transparent !important;
  border-color: var(--pm-hair) !important;
}
.tribe-events-c-view-selector__list-item-link,
.tribe-events-c-view-selector__list-item-text,
.tribe-events-c-view-selector__button-text {
  color: var(--pm-text) !important;
  font-family: var(--pm-sans);
}
.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text,
.tribe-events-c-view-selector__list-item-link:hover .tribe-events-c-view-selector__list-item-text {
  color: var(--pm-accent) !important;
}

/* ---- buttons ----------------------------------------------------------- */

.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn,
.tribe-events .tribe-events-c-subscribe-dropdown__button,
.tribe-common .tribe-common-c-btn-border,
.tribe-common .tribe-common-c-btn-border-small {
  background: transparent !important;
  border: 1px solid var(--pm-accent) !important;
  border-radius: 0 !important;
  color: var(--pm-accent) !important;
  font-family: var(--pm-sans);
  letter-spacing: .91px;
  text-transform: uppercase;
}
.tribe-common .tribe-common-c-btn:hover,
.tribe-common a.tribe-common-c-btn:hover {
  background: var(--pm-accent) !important;
  color: var(--pm-on-accent) !important;
}

/* ---- navigation: Today / Upcoming / prev / next ------------------------ */

.tribe-events-c-nav,
.tribe-events-c-nav__list,
.tribe-events-c-nav__list-item {
  background: transparent !important;
  border-color: var(--pm-hair) !important;
}
.tribe-events-c-nav__prev,
.tribe-events-c-nav__next,
.tribe-events-c-nav__today {
  color: var(--pm-text) !important;
  font-family: var(--pm-sans);
}
.tribe-events-c-nav__prev:hover,
.tribe-events-c-nav__next:hover,
.tribe-events-c-nav__today:hover { color: var(--pm-accent) !important; }

/* ---- event rows: list, latest-past, day -------------------------------- */

.tribe-events-calendar-list__event-row,
.tribe-events-calendar-latest-past__event-row,
.tribe-events-calendar-day__event-row {
  background: var(--pm-char-3);
  border: 1px solid var(--pm-hair);
  border-left: 2px solid var(--pm-accent);
  /* spacing left to the plugin's own stylesheet */
}

.tribe-events-calendar-list__event-title,
.tribe-events-calendar-latest-past__event-title,
.tribe-events-calendar-day__event-title {
  font-family: var(--pm-serif);
  font-weight: 400;
  letter-spacing: .8px;
}
.tribe-events-calendar-list__event-title-link,
.tribe-events-calendar-latest-past__event-title-link,
.tribe-events-calendar-day__event-title-link { color: var(--pm-bright) !important; }
.tribe-events-calendar-list__event-title-link:hover,
.tribe-events-calendar-latest-past__event-title-link:hover { color: var(--pm-accent) !important; }

.tribe-events-calendar-list__event-description,
.tribe-events-calendar-latest-past__event-description,
.tribe-events-calendar-list__event-venue,
.tribe-events-calendar-latest-past__event-venue { color: var(--pm-dim) !important; }

.tribe-events-calendar-list__event-datetime,
.tribe-events-calendar-latest-past__event-datetime,
.tribe-events-calendar-list__event-date-tag-weekday { color: var(--pm-accent) !important; }

/* the date badge at the left of each row */
.tribe-events-calendar-list__event-date-tag,
.tribe-events-calendar-latest-past__event-date-tag {
  background: transparent;
  border-right: 1px solid var(--pm-hair);
}
.tribe-events-calendar-list__event-date-tag-daynum,
.tribe-events-calendar-latest-past__event-date-tag-daynum {
  font-family: var(--pm-serif);
  font-size: 26px;
  color: var(--pm-accent) !important;
  background: transparent !important;
}
.tribe-events-calendar-list__event-date-tag-month,
.tribe-events-calendar-latest-past__event-date-tag-month,
.tribe-events-calendar-latest-past__event-date-tag-year {
  color: var(--pm-dim) !important;
  text-transform: uppercase;
  letter-spacing: .9px;
}

/* month separators in the list view */
.tribe-events-calendar-list__month-separator,
.tribe-events-calendar-list__month-separator-text {
  background: transparent !important;
  color: var(--pm-dim) !important;
  border-color: var(--pm-hair) !important;
}
.tribe-events-calendar-list__month-separator::after { background: var(--pm-hair) !important; }

/* ---- month grid -------------------------------------------------------- */

.tribe-events-calendar-month__day,
.tribe-events-calendar-month__header-column,
.tribe-events-calendar-month__multiday-event-bar {
  background: transparent !important;
  border-color: var(--pm-hair) !important;
}
.tribe-events-calendar-month__day--past { opacity: .55; }
.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum {
  background: var(--pm-accent) !important;
  color: var(--pm-on-accent) !important;
}
.tribe-events-calendar-month__day-date,
.tribe-events-calendar-month__day-date-link,
.tribe-events-calendar-month__header-column-title { color: var(--pm-text) !important; }
.tribe-events-calendar-month__calendar-event-title-link { color: var(--pm-bright) !important; }
.tribe-events-calendar-month__calendar-event-datetime { color: var(--pm-accent) !important; }
.tribe-events-calendar-month__calendar-event {
  background: rgba(201, 162, 39, .12);
  border-left: 2px solid var(--pm-accent);
}

/* ---- icons ------------------------------------------------------------- */

/* Scoped to the icon classes only. A blanket `.tribe-common svg` rule also
   catches the loader dots and any decorative artwork, which is how a 900px
   gold square appeared during testing. */
.tribe-common .tribe-common-c-svgicon__svg-fill,
.tribe-common .tribe-common-c-svgicon__svg-path {
  fill: var(--pm-accent) !important;
}
.tribe-common .tribe-common-c-svgicon { color: var(--pm-accent) !important; }

/* The loader is hidden by the plugin, but never let it size or paint wildly
   if that stylesheet is late or absent. */
.tribe-common .tribe-common-a11y-hidden { display: none !important; }
/* Cap the loader DOTS only.
   The Events Calendar puts tribe-common-c-loader__dot on the messages
   container as well as on its loader dots, so a class-only selector also
   crushes "There are no upcoming events." to a 10px column. Matching svg
   elements inside the loader wrapper cannot hit that <div>. */
.tribe-events-view-loader svg.tribe-common-c-svgicon--dot,
.tribe-events-view-loader svg.tribe-common-c-loader__dot {
  max-width: 10px !important;
  max-height: 10px !important;
  background: none !important;
}
.tribe-events-view-loader svg circle { fill: var(--pm-accent) !important; }
.tribe-events-view-loader { max-height: 60px !important; overflow: hidden; }
.tribe-common .tribe-common-c-svgicon__svg-stroke { stroke: var(--pm-accent) !important; }

/* ---- notices, loader, datepicker --------------------------------------- */

.tribe-events-header__messages,
.tribe-events-c-messages__message,
.tribe-events-c-messages__message--notice {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--pm-hair) !important;
  border-left: 2px solid var(--pm-accent) !important;
  color: var(--pm-text) !important;
}

.tribe-events-calendar-month__day-cell--selected,
.tribe-events-c-top-bar__datepicker-desktop,
.tribe-events-c-top-bar__datepicker-button {
  background: var(--pm-char-3) !important;
  color: var(--pm-text) !important;
  border-color: var(--pm-hair) !important;
}

/* ---- the plugin's own single-event page -------------------------------- */

.tribe-events-single,
.tribe-events-single-event-title,
.tribe-events-schedule,
.tribe-events-event-meta {
  background: transparent !important;
  color: var(--pm-text) !important;
  border-color: var(--pm-hair) !important;
}
.tribe-events-single-event-title { font-family: var(--pm-serif); font-weight: 400; }
.tribe-events-back a,
.tribe-events-event-meta a { color: var(--pm-accent) !important; }

/* ---- Events Calendar: panels that only appear on interaction -----------
   These are 0x0 until opened, so they are easy to miss when checking a
   rendered page. Left alone they open as white panels on the charcoal. */

.tribe-events-c-view-selector__content,
.tribe-events-c-view-selector__list-container,
.tribe-events-c-top-bar__datepicker-container,
.tribe-events-c-top-bar__datepicker-desktop,
.datepicker.dropdown-menu,
.tribe-common .datepicker {
  background: var(--pm-char-3) !important;
  border: 1px solid var(--pm-hair) !important;
  border-radius: 0 !important;
  color: var(--pm-text) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important;
}

.tribe-common .datepicker table tr td,
.tribe-common .datepicker table tr th,
.tribe-common .datepicker .datepicker-switch,
.tribe-common .datepicker .prev,
.tribe-common .datepicker .next {
  background: transparent !important;
  color: var(--pm-text) !important;
}
.tribe-common .datepicker table tr td.day:hover,
.tribe-common .datepicker table tr td.focused {
  background: rgba(201, 162, 39, .18) !important;
  color: var(--pm-bright) !important;
}
.tribe-common .datepicker table tr td.active,
.tribe-common .datepicker table tr td.active:hover,
.tribe-common .datepicker table tr td.current-month.active {
  background: var(--pm-accent) !important;
  color: var(--pm-on-accent) !important;
}
.tribe-common .datepicker table tr td.old,
.tribe-common .datepicker table tr td.new,
.tribe-common .datepicker table tr td.disabled { color: var(--pm-dim) !important; opacity: .55; }

/* the hidden a11y input should never paint */
.tribe-common .tribe-common-a11y-visual-hide { background: transparent !important; }

/* tooltips the plugin shows over month-view events */
.tribe-common .tribe-events-c-top-bar__datepicker-button,
.tooltipster-base .tooltipster-box,
.tribe-events-tooltip-theme .tooltipster-box {
  background: var(--pm-char-3) !important;
  border: 1px solid var(--pm-hair) !important;
  color: var(--pm-text) !important;
}
.tribe-events-tooltip-theme .tribe-events-calendar-month__calendar-event-tooltip-title-link { color: var(--pm-bright) !important; }
.tribe-events-tooltip-theme .tribe-events-calendar-month__calendar-event-tooltip-datetime { color: var(--pm-accent) !important; }


/* ---- Events Calendar: layout is the plugin's job -----------------------
   Layout overrides were tried here and removed. The plugin's own stylesheet
   positions its header, notices, navigation and rows correctly; forcing flex
   and clearing its grid margins on top of that collapsed the "no upcoming
   events" notice into a one-word column and put a panel behind the heading.
   This file now changes COLOUR only and leaves the plugin to lay itself out.
   ---------------------------------------------------------------------- */

/* ==========================================================================
   MATCH THE BARRINGTON HOME PAGE
   Values measured from the rendered barringtonmasons.org home page, compared
   against ours element by element:

     lodge name   80px      (ours was 56px)
     motto        25px      (ours was 13px)
     both columns share a top baseline; ours let the right column float 222px
     higher because .pm-split centres its items vertically
   ========================================================================== */

.pm-masthead__name {
  font-size: clamp(2.25rem, 6vw, 80px);
  line-height: 1.08;
}

.pm-masthead__affix {
  font-size: clamp(1.25rem, 2.6vw, 32px);
}

.pm-masthead__motto {
  font-size: clamp(1rem, 1.9vw, 25px);
  font-style: italic;
  line-height: 1.4;
  margin-top: 1.25rem;
}

/* Columns must start level, as Barrington's do. align-items:center let the
   taller column pull its heading above the other one. */
.pm-main .pm-split {
  align-items: start;
}

/* Barrington's closing block is left aligned and runs the full column. */
.pm-home-contact {
  max-width: 100%;
  text-align: left;
}
.pm-home-contact h2,
.pm-home-contact .pm-rule { margin-left: 0; margin-right: auto; }
.pm-home-contact .pm-lead { margin-left: 0; max-width: 74ch; }
.pm-home-contact .pm-btn-row { justify-content: flex-start; }

/* The meeting / location band reads centred on Barrington. */
.pm-section--navy .pm-info__label,
.pm-section--navy .pm-bigline { text-align: center; }
.pm-section--navy .pm-btn-row { justify-content: center; }

/* ---- feed calendar: List / Month switch ------------------------------- */

.pm-calviews__switch {
  display: flex;
  justify-content: center;
  gap: .25rem;
  margin-bottom: 1.5rem;
}
.pm-calviews__tab {
  display: inline-block;
  padding: .5rem 1.1rem;
  border: 1px solid var(--pm-hair);
  color: var(--pm-text);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.pm-calviews__tab:hover { border-color: var(--pm-accent); color: var(--pm-accent); }
.pm-calviews__tab.is-active { background: var(--pm-accent); border-color: var(--pm-accent); color: var(--pm-on-accent); }

/* ==========================================================================
   TOP NAVIGATION
   Three faults found by inspecting the live menu:
     1. a parent with a dropdown looked identical to one without, so nobody
        knew to hover
     2. hover was the only way in, which on a touchscreen means tapping the
        parent navigates away and its children are unreachable
     3. no keyboard affordance for the same reason
   ========================================================================== */

/* --- 1. mark the parents that have children --------------------------- */

.pm-menu > li.menu-item-has-children > a,
.pm-menu > li.page_item_has_children > a {
  padding-right: 1.35rem;
  position: relative;
}

.pm-menu > li.menu-item-has-children > a::after,
.pm-menu > li.page_item_has_children > a::after {
  content: "";
  position: absolute;
  right: .5rem;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .75;
  transition: transform .18s ease;
}

.pm-menu > li.menu-item-has-children:hover > a::after,
.pm-menu > li.menu-item-has-children.is-open > a::after {
  transform: rotate(-135deg);
  margin-top: -1px;
}

/* --- 2. the dropdown itself -------------------------------------------- */

.pm-menu .sub-menu {
  /* a small bridge so the pointer can cross the gap without the menu closing */
  padding-top: .5rem;
  margin-top: -.25rem;
}

.pm-menu li:hover > .sub-menu,
.pm-menu li:focus-within > .sub-menu,
.pm-menu li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.pm-menu .sub-menu a {
  padding: .6rem .85rem;
  white-space: nowrap;
}

/* keep a dropdown on screen when its parent sits near the right edge */
.pm-menu > li:nth-last-child(-n+2) .sub-menu {
  left: auto;
  right: 0;
}

/* --- 3. touch and keyboard --------------------------------------------- */

/* On a touch device the caret becomes a real button: tap it to open the
   dropdown, tap the label itself to follow the link. */
.pm-menu__toggle {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 2rem;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

@media (hover: none) and (min-width: 1260px) {
  .pm-menu > li.menu-item-has-children > a::after { opacity: 0; }
  .pm-menu__toggle { display: block; }
  .pm-menu__toggle::after {
    content: "";
    position: absolute;
    right: .55rem;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  .pm-menu > li.is-open .pm-menu__toggle::after { transform: rotate(-135deg); margin-top: -1px; }
}

/* --- the drawer, below 1260px ------------------------------------------ */

@media (max-width: 1259px) {
  /* children are always visible in the drawer: no hover to discover */
  .pm-menu .sub-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 .5rem 1rem;
    margin: 0;
    border-left: 1px solid var(--pm-hair);
  }
  .pm-menu .sub-menu a { padding: .55rem .25rem; font-size: .78rem; opacity: .85; }

  /* the caret would be meaningless when everything is already open */
  .pm-menu > li.menu-item-has-children > a::after { display: none; }
  .pm-menu__toggle { display: none !important; }
}

/* ==========================================================================
   MENU LAYOUT C  +  MOBILE 1   (chosen)
   The masthead keeps the large Barrington-style title; the menu moves to its
   own full-width strip beneath it, ruled top and bottom with dividers between
   items so it reads as navigation rather than as more heading text.
   Below 1260px the strip becomes a burger and a drawer.
   ========================================================================== */

/* --- the strip --------------------------------------------------------- */

.pm-navbar {
  background: rgba(20, 20, 20, .55);
  border-top: 1px solid var(--pm-hair);
  border-bottom: 1px solid var(--pm-hair);
  backdrop-filter: blur(2px);
}

.pm-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-block: 0;
}

.pm-masthead { padding: 2.5rem 0 1.5rem; }

/* --- items, with dividers ---------------------------------------------- */

.pm-menu {
  justify-content: center;
  gap: 0;
  padding-bottom: 0;
}

.pm-menu > li > a {
  padding: .95rem 1rem;
  border-right: 1px solid var(--pm-hair);
  border-radius: 0;
  font-size: 12px;
  letter-spacing: .9px;
}

.pm-menu > li:first-child > a { border-left: 1px solid var(--pm-hair); }

.pm-menu > li > a:hover {
  background: rgba(201, 162, 39, .14);
  color: var(--pm-accent);
}

.pm-menu > li.current-menu-item > a,
.pm-menu > li.current_page_item > a,
.pm-menu > li.current-menu-ancestor > a {
  background: var(--pm-accent);
  color: var(--pm-on-accent);
}

/* the caret sits inside the cell, so keep room for it */
.pm-menu > li.menu-item-has-children > a { padding-right: 1.75rem; }
.pm-menu > li.menu-item-has-children > a::after { right: .75rem; }

/* Dropdowns hang flush with the underside of the strip.
   The items are centred in a taller bar, so top:100% on the <li> left a 5px
   gap -- enough for the pointer to cross and the menu to close on the way
   down. Stretching the row removes the gap; the invisible bridge covers any
   sub-pixel remainder. */
.pm-navbar__inner,
.pm-nav,
.pm-menu,
.pm-menu > li { align-self: stretch; }

.pm-menu { align-items: stretch; }
.pm-menu > li { display: flex; align-items: stretch; }
.pm-menu > li > a { display: flex; align-items: center; }

.pm-menu > li.menu-item-has-children::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 8px;
}

.pm-menu .sub-menu {
  top: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  background: #262626;
}
.pm-menu .sub-menu a { border: 0; }

/* --- below 1260px: burger + drawer (mobile option 1) ------------------- */

@media (max-width: 1259px) {
  .pm-navbar__inner {
    justify-content: space-between;
    padding-block: .6rem;
    position: relative;
  }

  .pm-burger { margin: 0; }

  .pm-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 60;
    background: #202020;
    border-bottom: 1px solid var(--pm-hair);
    padding: 0 var(--pm-gutter) .75rem;
  }
  .pm-nav:not(.is-open) { display: none; }

  .pm-menu > li > a,
  .pm-menu > li:first-child > a {
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: .85rem .25rem;
    text-align: left;
  }
  .pm-menu > li:last-child > a { border-bottom: 0; }

  .pm-masthead { padding: 2rem 0 1.25rem; }
}

/* --- keep the strip reachable on a long page --------------------------- */

@media (min-width: 1260px) {
  .pm-navbar { position: sticky; top: 0; z-index: 100; background: rgba(24, 24, 24, .96); }
}

/* ---- mobile header: the compact bar option 1 showed --------------------
   The full masthead plus the menu strip came to 299px on a 375px phone --
   over a third of the screen before any content. Below 1260px the masthead
   is hidden and the lodge name moves into the bar beside the burger, which
   is what the chosen option showed.
   ---------------------------------------------------------------------- */

.pm-navbar__brand { display: none; }

/* The MENU collapses at 1260px because seven items will not fit. The TITLE is
   a separate question and must not disappear with it -- tying the two together
   removed the lodge name entirely at 1259, 1100 and 900px, which is a laptop,
   a half-screen window and an iPad in landscape. */

@media (max-width: 1259px) {
  .pm-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(20, 20, 20, .97);
    border-top: 0;
  }

  .pm-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: .7rem;
  }

  /* the drawer opens under the bar */
  .pm-nav { top: 100%; }

  /* the title stays, just smaller, all the way down to a phone */
  .pm-masthead { padding: 1.75rem 0 1.1rem; }
  .pm-masthead__name  { font-size: clamp(1.75rem, 5vw, 44px); }
  .pm-masthead__affix { font-size: clamp(1.1rem, 2.4vw, 22px); }
  .pm-masthead__motto { font-size: clamp(.85rem, 1.8vw, 16px); margin-top: .8rem; }
}

/* Only on a genuinely small screen does the full masthead cost more than it is
   worth. Below 782px it folds into the bar, which is the compact layout that
   option 1 showed. */
@media (max-width: 781px) {
  .pm-masthead { display: none; }

  .pm-navbar__brand {
    display: block;
    font-family: var(--pm-serif);
    font-size: 17px;
    letter-spacing: .5px;
    color: var(--pm-bright);
    text-decoration: none;
    white-space: nowrap;
  }
  .pm-navbar__brand:hover { color: var(--pm-accent); }
}

/* the front page keeps its big title, just below the bar instead of above it */
@media (max-width: 1259px) {
  .home .pm-main > .pm-scope > section:first-of-type { padding-top: 2rem; }
}

/* The desktop gap fix makes each <li> a flex row so its cell fills the strip.
   In the drawer that puts the sub-menu BESIDE the link instead of under it,
   indenting children 122px. Restore normal stacking on small screens. */
@media (max-width: 1259px) {
  .pm-menu,
  .pm-menu > li { display: block; }
  .pm-menu > li > a { display: block; }

  .pm-menu .sub-menu {
    padding: 0 0 .5rem 1.25rem;
    margin: 0;
    border-left: 1px solid var(--pm-hair);
  }
  .pm-menu .sub-menu a { padding: .5rem .25rem; }
}

/* meeting night on each temple body card */
.pm-body-when {
  font-family: var(--pm-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--pm-accent);
  margin: 0 0 .6rem;
}

.pm-news__item--ours { border-left: 2px solid var(--pm-accent); }

/* ---- masthead emblem / logo -------------------------------------------
   The masthead was rendering as plain text: no logo was set in WordPress and
   the theme never drew its own mark. The square and compasses now sits above
   the lodge name, and an uploaded logo takes its place at a sensible size.
   ---------------------------------------------------------------------- */

.pm-masthead .pm-emblem--masthead {
  width: clamp(46px, 5.5vw, 74px);
  height: auto;
  margin: 0 auto .9rem;
  display: block;
}

.pm-masthead__logo { margin: 0 auto 1rem; }
.pm-masthead__logo img,
.pm-masthead .custom-logo {
  display: block;
  margin: 0 auto;
  max-width: min(320px, 70vw);
  max-height: 140px;
  width: auto;
  height: auto;
}

@media (max-width: 1259px) {
  .pm-masthead .pm-emblem--masthead { width: clamp(40px, 8vw, 56px); margin-bottom: .7rem; }
  .pm-masthead__logo img,
  .pm-masthead .custom-logo { max-height: 96px; }
}

/* The badge sits inside a column flex container, which stretches its children
   to full width -- so "MEMBERS" rendered as a full-width bordered box instead
   of a small tag. Align it to the start so it hugs its text. */
.pm-news__body { align-items: flex-start; }
.pm-news__body .pm-badge,
.pm-card .pm-badge {
  align-self: flex-start;
  width: auto;
  max-width: max-content;
}