:root {
  --navy: #16243d;
  --navy-soft: #22365c;
  --gold: #b08d3e;
  --gold-light: #d6b86a;
  --cream: #faf7f1;
  --ink: #2a2a2a;
  --muted: #6b6b6b;
  --rule: #e4ddd0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.2;
  /* When a heading must wrap, balance the lines ("Rutens / Mediation Group")
     instead of orphaning the last word ("Rutens Mediation / Group"). */
  text-wrap: balance;
}

a { color: var(--navy-soft); }

.container { max-width: 1060px; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  border-bottom: 3px solid var(--gold);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.brand {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.05rem, 4.2vw, 1.35rem);
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.brand span { color: var(--gold-light); }

.site-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }

.site-nav a {
  color: #e8e5de;
  text-decoration: none;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-nav a:hover { color: var(--gold-light); }

/* Hamburger toggle — hidden on desktop, shown on mobile for the
   collapsible nav. The admin header's nav is not collapsible. */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (max-width: 759px) {
  .nav-toggle { display: block; }

  .site-nav.collapsible { display: none; }

  .site-nav.collapsible.open {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
    margin-top: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .site-nav.collapsible a {
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ---------- Hero ---------- */
.hero {
  background:
    linear-gradient(160deg, rgba(22, 36, 61, 0.96), rgba(34, 54, 92, 0.88)),
    radial-gradient(circle at 80% 20%, rgba(176, 141, 62, 0.35), transparent 55%),
    var(--navy);
  color: #fff;
  padding: 4rem 0;
  text-align: center;
}

/* Mobile-first: portrait stacked above the hero text, both centered. */
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
}

.hero-portrait {
  width: min(220px, 55vw);
  flex-shrink: 0;
}

.hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

.hero h1 {
  color: #fff;
  font-size: clamp(1.8rem, 7.5vw, 3.4rem);
  margin-bottom: 1rem;
}

.hero .rule {
  width: 90px;
  height: 3px;
  background: var(--gold);
  margin: 0 auto 1.4rem;
}

.hero p {
  max-width: 640px;
  margin: 0 auto 2.2rem;
  font-size: 1.15rem;
  color: #dcd9d2;
}

/* Desktop: portrait to the left of the hero text. */
@media (min-width: 760px) {
  .hero { padding: 5.5rem 0; text-align: left; }
  .hero-inner { flex-direction: row; justify-content: center; gap: 3.5rem; }
  .hero-portrait { width: 280px; }
  .hero-text .rule { margin: 0 0 1.4rem; }
  .hero-text p { margin: 0 0 2.2rem; }
}

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  padding: 0.85rem 2.2rem;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.btn:hover { background: var(--gold-light); }

/* ---------- Sections ---------- */
section { padding: 4.5rem 0; }

section:nth-of-type(even) { background: #fff; }

.section-heading {
  text-align: center;
  margin-bottom: 0.6rem;
  font-size: clamp(1.45rem, 6vw, 2rem);
}

.section-rule {
  width: 70px;
  height: 3px;
  background: var(--gold);
  margin: 0 auto 2.5rem;
}

/* About */
.about-body { max-width: 780px; margin: 0 auto; }
.about-body p { margin-bottom: 1.2rem; }

/* Practice areas */
.practice-intro { text-align: center; max-width: 680px; margin: 0 auto 2.5rem; }

.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}

.practice-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  padding: 1.4rem 1.2rem;
  text-align: center;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.1rem;
  color: var(--navy);
}

section:nth-of-type(odd) .practice-card { background: #fff; }

/* ---------- Calendar ---------- */
.calendar-note {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 2rem;
  color: var(--muted);
}

.calendar-note p { margin: 0 0 1rem; }
.calendar-note p:last-child { margin-bottom: 0; }

/* Andy's calendar is embedded whole from nadn.org. NADN's own stylesheet is
   responsive — it restyles the calendar below 640px — so the frame fills its
   container rather than being pinned to a minimum width.

   Height is fixed because the frame is cross-origin: month navigation inside
   it is an AJAX swap, so this page can neither measure the content nor react
   when it changes. The only safe height is therefore the tallest the
   calendar can ever be. NADN hides the weekend columns and drops any week
   with no weekday in it, which caps the grid at five rows: verified against
   their own month endpoint for 24 consecutive months, and five is the
   maximum for every month in the next 50 years (the other 8% render four).

   Measured content height for a five-row month, counting the floated
   "Calendar Last Updated" line that sits below the grid — it is easy to miss
   because it falls outside the calendar wrapper and does not add to its
   height. The phone layout is the taller of the two, at 137px per row
   against 119px, so the two breakpoints get their own height rather than one
   compromise value that would clip phones or leave a gap on desktop. */
.nadn-calendar {
  max-width: 900px;
  margin: 0 auto;
}

.nadn-frame {
  display: block;
  width: 100%;
  height: 750px; /* content measures 748px above 640px */
  border: 0;
}

@media (max-width: 640px) {
  /* NADN's own breakpoint: bigger rows, so taller content — 772px measured. */
  .nadn-frame { height: 775px; }
}

/* ---------- Contact ---------- */
.contact-blurb { text-align: center; max-width: 620px; margin: 0 auto 2rem; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.contact-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  padding: 1.6rem 1.2rem;
}

.contact-card .label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.contact-card a {
  display: block;
  text-decoration: none;
  font-size: 1.05rem;
  color: var(--navy);
}

/* Second email sits under the first; street sits above the city. */
.contact-card a + a { margin-top: 0.5rem; }
.contact-card a span { display: block; line-height: 1.45; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: #b9b5ac;
  text-align: center;
  padding: 1.6rem 1rem;
  font-size: 0.9rem;
}

/* ---------- Admin ---------- */
.admin-page { background: #f1efe9; min-height: 100vh; }

.admin-main { max-width: 880px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

.admin-main h1 { margin-bottom: 0.3rem; }

.admin-main .hint { color: var(--muted); margin-bottom: 2rem; }

.admin-section {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.admin-section h2 {
  font-size: 1.2rem;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.5rem;
  margin-bottom: 1.2rem;
}

.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy);
  margin-bottom: 0.35rem;
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid #cfc9bc;
  border-radius: 3px;
  background: #fffdf9;
}

.field textarea { min-height: 110px; resize: vertical; }

.field textarea.tall { min-height: 320px; }

.field .help { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; }

.admin-bar {
  position: sticky;
  bottom: 0;
  background: var(--navy);
  padding: 0.9rem 1.5rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 1rem;
}

#save-status { color: #dcd9d2; font-size: 0.9rem; }
#save-status.error { color: #f0b4b4; }
#save-status.ok { color: var(--gold-light); }