/*
  Hand-rolled theme derived from the conference "Save the Date" poster
  (afas_website/assets/palette/AfAS-reference-photo.png). No external
  framework or webfont: palette values match README.md exactly, the
  heading typeface matches the poster's actual system stack (Arial Black /
  Helvetica Neue at weight 900), and the shape vocabulary (swishes,
  circles, triangles, dot grid) is built from the SVGs in
  afas_website/static/img/.
*/

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* FIX: the body is a full-height column so the wave + footer always sit
   at the bottom of the window, even on short pages (this removes the
   light strip that showed under the footer). */
body {
  margin: 0;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* --- Tokens ---------------------------------------------------------------
   Fluid spacing/type via clamp() rather than fixed breakpoints, so the
   layout responds continuously between a phone and a wide desktop instead
   of jumping at a handful of fixed widths. */

:root {
  --afas-dark-purple: #7a1c83;
  --afas-purple: #cb6ce6;
  --afas-light-purple: #e2a9f1;
  --afas-white: #ffffff;
  --afas-dark-blue: #166da0;

  /* Night-sky shades used for the top bar and footer gradients */
  --afas-night-mid: #4a1560;
  --afas-night: #22164d;

  --afas-ink: #241023;
  --afas-muted: #6b5a6d;
  --afas-danger: #b3261e;

  --afas-font-heading: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --afas-font-heading-weight: 900;
  --afas-font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --afas-radius: 1rem;

  /* FIX: was 1120px, which left big empty margins on a full-size window.
     Now it grows up to 1320px but never wider than 92% of the window.
     Want it wider or narrower? Change 1320px. */
  --afas-container: min(1320px, 92vw);

  --afas-gutter: clamp(1rem, 3vw, 2.5rem);

  /* FIX: slightly smaller top/bottom spacing on big screens
     (was clamp(2rem, 6vw, 4.5rem)). */
  --afas-section-gap: clamp(2rem, 4vw, 3.5rem);
}

body {
  font-family: var(--afas-font-body);
  color: var(--afas-ink);
  background: #faf6fb;
  line-height: 1.55;
  /* FIX: slightly larger text, a little bigger again on wide screens */
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--afas-font-heading);
  font-weight: var(--afas-font-heading-weight);
  color: var(--afas-dark-purple);
  line-height: 1.1;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(1.9rem, 3vw + 1rem, 3.2rem); }
h2 { font-size: clamp(1.5rem, 1.5vw + 1rem, 2.2rem); }
h3 { font-size: clamp(1.2rem, 1vw + 1rem, 1.6rem); }

p { margin: 0 0 1em; }

.text-muted { color: var(--afas-muted); }
.small { font-size: 0.875rem; }

/* --- Layout ---------------------------------------------------------------
   `.container` is a fluid max-width column with clamp()-based side
   padding, so it never needs a discrete set of Bootstrap-style
   breakpoints to look right. `.stack`/`.cluster` cover the vertical and
   horizontal flex arrangements the old Bootstrap utility classes
   (d-flex, gap-3, flex-wrap, align-items-center) used to provide. */

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

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--afas-gutter); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.py-section { padding-block: var(--afas-section-gap); }

/* --- Navbar -----------------------------------------------------------
   A checkbox-driven disclosure takes the place of Bootstrap's JS-powered
   collapse. The checkbox must precede the elements it controls in the
   DOM for the `:checked ~` sibling selector below to reach them.

   The bar is a purple-to-night gradient with a few tiny "stars" (the
   radial-gradient dots). To move a star, change its "at X Y" numbers;
   to add one, copy a radial-gradient line and add a matching size at
   the end of background-size. */

.site-nav {
  background:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 65px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 160px 20px, var(--afas-light-purple), transparent),
    radial-gradient(1px 1px at 235px 80px, #fff, transparent),
    linear-gradient(120deg, var(--afas-dark-purple) 0%, var(--afas-night-mid) 55%, var(--afas-night) 100%);
  background-size: 260px 100px, 260px 100px, 260px 100px, 260px 100px, 100% 100%;
}

.site-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.85rem;
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--afas-font-heading);
  font-weight: var(--afas-font-heading-weight);
  font-size: 1.25rem;
  color: var(--afas-white);
  text-decoration: none;
}

/* AfAS logo in the top bar, shown exactly as supplied (no effects).
   For a white plate behind it, see the OPTIONAL block at the end. */
.site-nav__logo {
  height: clamp(60px, 8vw, 90px);
  width: auto;
}

.site-nav__toggle {
  display: none;
}

/* "MENU" button shown when the menu is collapsed */
.site-nav__toggle-label {
  display: none;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--afas-white);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* The three lines: one bar plus two shadows above and below it */
.site-nav__toggle-label span {
  display: block;
  width: 1.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--afas-white);
  box-shadow: 0 -6px 0 var(--afas-white), 0 6px 0 var(--afas-white);
}

.site-nav__links {
  display: flex;
  gap: 1.5rem;
}

.site-nav__links a {
  color: var(--afas-white);
  text-decoration: none;
  font-weight: 600;
}

.site-nav__links a:hover,
.site-nav__links a:focus-visible {
  color: var(--afas-light-purple);
}

/* The menu collapses into the MENU button below this width. If "Contact"
   gets cut off on a narrow window, raise it (for example to 52rem). */
@media (max-width: 48rem) {
  .site-nav__toggle-label { display: flex; }

  .site-nav__bar { flex-wrap: wrap; }

  .site-nav__links {
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }

  .site-nav__links a {
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .site-nav__toggle:checked ~ .site-nav__links {
    max-height: 20rem;
    padding-bottom: 0.75rem;
  }
}

/* --- Hero -----------------------------------------------------------------
   The flowing two-tone ribbon behind the page heading, matching the
   poster's diagonal swish under the header photo. */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--afas-dark-purple);
  color: var(--afas-white);
  padding-block: clamp(2.5rem, 8vw, 5rem) clamp(4rem, 12vw, 7rem);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/swish-hero.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.9;
}

.hero__content {
  position: relative;
  z-index: 1;
}

.hero h1 {
  color: var(--afas-white);
}

/* --- Card ------------------------------------------------------------- */

.card {
  background: var(--afas-white);
  border-radius: var(--afas-radius);
  box-shadow: 0 10px 30px rgba(122, 28, 131, 0.12);
  padding: clamp(1.25rem, 4vw, 3rem);
}

.card--split {
  max-width: 44rem;
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--afas-font-heading);
  font-weight: var(--afas-font-heading-weight);
  font-size: 0.95rem;
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background: var(--afas-dark-purple);
  color: var(--afas-white);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--afas-purple);
}

/* --- Alerts -------------------------------------------------------------- */

.alert {
  border-radius: 0.75rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
}

.alert-success {
  background: #eaf7ea;
  color: #1c6b1c;
}

.alert-danger,
.alert-error {
  background: #fbeceb;
  color: var(--afas-danger);
}

/* --- Forms ----------------------------------------------------------------- */

.field { margin-bottom: 1.25rem; }

.field label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--afas-dark-purple);
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid #d8c3db;
  border-radius: 0.6rem;
  background: var(--afas-white);
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--afas-purple);
  outline-offset: 1px;
}

.field-error {
  color: var(--afas-danger);
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

/* --- Wave divider ---------------------------------------------------------
   The thinner curved ribbon used as a section separator (distinct from
   the larger `.hero` swish). */

.wave-divider {
  display: block;
  width: 100%;
  height: 90px;
  background-image: url("../img/wave-divider.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.wave-divider--flip {
  transform: scaleY(-1);
}

/* --- Circular photo frame ------------------------------------------------- */

.photo-circle {
  display: inline-block;
  border-radius: 50%;
  border: 10px solid var(--afas-dark-purple);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  aspect-ratio: 1 / 1;
}

.photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Circle ring accent --------------------------------------------------- */

.circle-ring {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../img/circle-ring.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

/* --- Info pill -------------------------------------------------------- */

.info-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--afas-light-purple);
  color: var(--afas-dark-purple);
  font-family: var(--afas-font-heading);
  font-weight: var(--afas-font-heading-weight);
  font-size: 0.95rem;
  border-radius: 999px;
  padding: 0.5rem 1.25rem 0.5rem 0.5rem;
}

.info-pill__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--afas-dark-purple);
}

.info-pill__icon img {
  width: 1.4rem;
  height: 1.4rem;
}

/* --- Dot grid accent -------------------------------------------------- */

.dot-grid {
  -webkit-mask-image: url("../img/dot-grid-mask.svg");
  mask-image: url("../img/dot-grid-mask.svg");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  background-color: var(--afas-dark-purple);
}

/* --- Triangle accent ---------------------------------------------------- */

.triangle-accent {
  display: inline-block;
  width: 18px;
  height: 42px;
  background-image: url("../img/triangle-accent.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

/* --- Page shape frame ----------------------------------------------------- */

.page-shapes {
  position: relative;
}

.page-shapes .card {
  position: relative;
  z-index: 1;
}

.page-shapes__ring {
  position: absolute;
  top: -2.5rem;
  right: -2.5rem;
  width: 7rem;
  height: 7rem;
  z-index: 0;
  pointer-events: none;
}

.page-shapes__dots {
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  width: 6rem;
  height: 6rem;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background-color: var(--afas-purple);
}

@media (max-width: 42rem) {
  .page-shapes__ring,
  .page-shapes__dots {
    display: none;
  }
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  color: var(--afas-white);
  padding-block: 1.5rem;
  background:
    radial-gradient(1.5px 1.5px at 40px 50px, #fff, transparent),
    radial-gradient(1px 1px at 130px 100px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 210px 40px, var(--afas-light-purple), transparent),
    linear-gradient(180deg, var(--afas-dark-purple) 0%, var(--afas-night) 100%);
  background-size: 280px 140px, 280px 140px, 280px 140px, 100% 100%;
}

/* --- Animations --------------------------------------------------------- */

@keyframes arrival {
  from {
    opacity: 0;
    transform: translateY(1cm);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card { animation: arrival 300ms ease-out both; }
.page-shapes__ring { animation: arrival 800ms ease-out both; }
.page-shapes__dots { animation: arrival 1s ease-out both; }

/* --- Partner logos row (home page) -------------------------------------- */

.partner-logos {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e4aaee;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 3rem);
}

/* FIX: logos shrink a little on smaller windows so all four stay on one
   row. If RATT wraps onto its own line at half width, lower 55px. */
.partner-logos img {
  height: clamp(55px, 5vw, 75px);
  width: auto;
}

/* FIX: the Rhodes image has extra blank space, so it looks small at 70px.
   This only works once you add class="logo-rhodes" to the Rhodes <img>
   in home.md. Adjust the numbers to taste. */
.partner-logos img.logo-rhodes {
  height: clamp(70px, 6.5vw, 95px);
}

/* --- Save the Date poster (home page) -----------------------------------
   Clicking the poster opens it full size in a new tab. */

.poster-preview {
  margin: 1.5rem 0 2rem;
}

.poster-preview a {
  display: block;
  cursor: zoom-in;
}

.poster-preview img {
  width: clamp(260px, 60vw, 400px);
  border-radius: 0.5rem;
  box-shadow: 0 6px 18px rgba(122, 28, 131, 0.2);
}

/* --- Home page two-column layout ----------------------------------------
   On wide screens the text sits on the left and the poster on the right,
   so the card has no big empty area. Below 60rem wide it falls back to
   one column. To make the poster bigger or smaller, change 400px. */

@media (min-width: 60rem) {
  *:has(> .poster-preview) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 28vw, 400px);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  *:has(> .poster-preview) > * {
    grid-column: 1;
  }

  *:has(> .poster-preview) > ul {
    margin-top: 0;
  }

  *:has(> .poster-preview) > .poster-preview {
    grid-column: 2;
    grid-row: 1 / span 30;
    margin: 0.5rem 0 0;
  }

  .poster-preview img {
    width: 100%;
  }

  *:has(> .partner-logos) > .partner-logos {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   OPTIONAL: white plate behind the AfAS logo
   Keeps the logo exactly as supplied (blue, unchanged) but sits it on a
   white rounded background so it's easy to read on the dark purple bar.
   To try it: delete the comment markers on the lines just above and
   just below the rules.
   ========================================================================== */

/*
.site-nav__brand {
  background: var(--afas-white);
  padding: 0.4rem 0.9rem;
  border-radius: 0.75rem;
}
.site-nav__logo {
  height: clamp(48px, 6vw, 70px);
}
*/