/* The Fellowship of the Western Mysteries — site stylesheet.
   Plain CSS, no build step. Shared by index.html and newsletter.html. */

@import url('/fonts/fonts.css');

:root {
  --ink: #f9f9f9;
  --ink-dim: rgba(249, 249, 249, 0.85);
  --paper: #17140f;
  /* Cream button colour + dark text, taken from the live Squarespace
     site's own rendered buttons (getComputedStyle on
     .sqs-button-element--primary at fellowshipwesternmysteries.org) —
     not an approximation. Contrast of this pairing is 10.6:1. */
  --accent: #fff5d9;
  --accent-dark: #e6cf90;
  --button-text: #213c4e;
  --max-width: 640px;
  --font-heading: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --font-nav: 'Philosopher', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

/* Cormorant Garamond renders small for its point size — the root size is
   stepped up from the 16px default so every rem-based size across the
   site (headings, body copy, buttons) scales up together, keeping body
   text legible at the same visual size it read at before the typeface
   change. Judged from the rendered page, not the number. */
html {
  -webkit-text-size-adjust: 100%;
  font-size: 118.75%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
}

a { color: inherit; }

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

/* ── Header / nav ─────────────────────────────────────────────────────── */
/* Layout: [logo][Events]  ..........  [language switch][Join button]
   Two flex groups so "Events sits immediately right of the logo" and the
   join button/language switch stay pinned to the right, independently of
   how many nav items either side ends up with. */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.5rem clamp(1rem, 4vw, 3rem);
}

.site-header-left,
.site-header-right {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.site-header .logo img {
  height: 56px;
  width: auto;
}

.site-header .logo .logo-mobile { display: none; }

.site-nav a {
  font-family: var(--font-nav);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  border-color: var(--accent);
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-nav);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  opacity: 0.8;
  border-bottom: 1px solid transparent;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.flag-icon {
  width: 1.3em;
  height: auto;
  flex-shrink: 0;
  border-radius: 1px;
}

.lang-switch:hover,
.lang-switch:focus-visible {
  opacity: 1;
  border-color: var(--accent);
}

.button--nav {
  padding: 0.55rem 1.15rem;
  font-size: 0.85rem;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.5rem 4rem;
  background-image:
    linear-gradient(180deg, rgba(10, 8, 6, 0.55) 0%, rgba(10, 8, 6, 0.72) 100%),
    url('/images/hero-background.jpg');
  background-size: cover;
  background-position: center;
}

.hero-content {
  max-width: var(--max-width);
}

.hero h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.25;
  margin: 0 0 1.75rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero h1 span { display: block; }

.hero p {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: var(--ink-dim);
  margin: 0 0 1.25rem;
}

.hero .location,
.hero .contact {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  color: var(--ink-dim);
}

.hero .contact a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cta-row {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.button {
  display: inline-block;
  padding: 0.85rem 1.9rem;
  border-radius: 2px;
  text-decoration: none;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  border: 1px solid var(--accent);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.button--primary {
  background: var(--accent);
  color: var(--button-text);
}

.button--primary:hover,
.button--primary:focus-visible {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--button-text);
}

/* Live site has no separate secondary/outline button to match — kept our
   own outline treatment, recoloured to the new cream (border + text)
   instead of the old warm-white ink. */
.button--secondary {
  background: transparent;
  color: var(--accent);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  background: var(--accent);
  color: var(--button-text);
}

/* ── Newsletter page ──────────────────────────────────────────────────── */

.page-simple {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-simple .site-header {
  position: static;
  background: var(--paper);
}

.page-simple main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem 4rem;
}

.newsletter-wrap {
  width: 100%;
  max-width: 480px;
}

.back-link {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: var(--ink-dim);
  text-decoration: none;
}

.back-link:hover { color: var(--ink); }

/* MailerLite embed's Subscribe button, styled from here rather than
   editing the embed's own generated markup/CSS (newsletter.html /
   de/newsletter.html — same form id on both). Matched specificity +
   !important to win over the embed's own !important declarations. */
#mlb2-44693535.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary {
  background-color: var(--accent) !important;
  color: var(--button-text) !important;
  font-family: var(--font-nav) !important;
  font-weight: 700 !important;
}
#mlb2-44693535.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary:hover {
  background-color: var(--accent-dark) !important;
}

/* German newsletter page only — its own page-level heading/intro, separate
   from (and above) the MailerLite embed's own internal heading. The embed's
   own text is never edited (see newsletter.html/de/newsletter.html), so a
   German page needs real page copy of its own if it's going to read as
   German at a glance rather than just showing an English form. */
.newsletter-intro h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  line-height: 1.3;
  margin: 0 0 0.9rem;
}

.newsletter-intro p {
  color: var(--ink-dim);
  font-size: 0.98rem;
  margin: 0 0 1.75rem;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(249, 249, 249, 0.55);
  background: var(--paper);
}

.site-footer a {
  color: inherit;
}

/* ── Responsive: swap to the mobile logo, tighten spacing ────────────── */

/* Breakpoint raised from 560px to 900px: the type-system change (bigger
   root font-size for Cormorant Garamond's legibility, plus Philosopher on
   buttons/nav) made the header's single-row content wider, so the old
   560px cutoff left a band — roughly 561–870px, worst case on the German
   page's longer button text — where the header wrapped organically
   instead of using the deliberate two-row treatment below, and the
   heading collided with the wrapped second row. 900px reapplies the
   already-correct two-row layout across that whole band instead of
   inventing a second fix for it. */
@media (max-width: 900px) {
  .site-header .logo .logo-desktop { display: none; }
  .site-header .logo .logo-mobile { display: block; }
  .site-header .logo img { height: 38px; }
  .site-header-left,
  .site-header-right { gap: 1rem; }
  .hero { padding-top: 8.5rem; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .button { text-align: center; }

  /* Deliberately two rows, not organic wrapping: flex-direction switches
     to column so .site-header-left (logo + Events) becomes its own
     full-width row, .site-header-right becomes its own full-width row
     with the language switch and Join button pushed to opposite ends of
     THAT row — never split apart onto separate rows of their own, which
     is what the un-forced flex-wrap was doing. Tested at 900, 700, 390
     and 320px, both languages. */
  .site-header {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .site-header-right {
    justify-content: space-between;
  }

  /* The bigger root font-size (Cormorant Garamond legibility) also grew
     the Philosopher button/switch text enough that the full button label
     — "Join the MeetUp Group", and especially the longer German
     "Meetup-Gruppe beitreten" — no longer fits the second row unwrapped
     at typical phone widths, which wrapped it to two lines and pushed it
     down over the heading below. Shrinking here, for the whole two-row
     range, keeps it to one line without touching the heading. */
  .button--nav {
    font-size: 0.72rem;
    padding: 0.5rem 0.85rem;
  }
  .lang-switch {
    font-size: 0.82rem;
  }
}

/* The header is now two deliberate rows below 560px (see above) — .hero's
   extra top padding accounts for that second row so the heading never sits
   under the header. */