/* ==========================================================================
   Rotaract Club of Rajahmundry River City — theme layer

   This file sits ON TOP of Bootstrap 5.3, which is loaded from a CDN in each
   page's <head>. Bootstrap does the heavy lifting (grid, navbar, cards,
   forms, buttons, utilities). This file only does two things:

     1. Re-skins Bootstrap in the club's Rotary colours and fonts.
     2. Adds the handful of pieces Bootstrap has no component for —
        the video hero, the overlay header, and the load animation.

   IMPORTANT, if you are used to older Bootstrap:
   In Bootstrap 5.3 the components are driven by their own CSS variables.
   Setting --bs-primary does NOT restyle .btn-primary, because the button
   reads --bs-btn-bg instead. That is why the button block below looks the
   way it does. Override the component variable, not the global one.

   Structure:
     1. Brand tokens        5. Hero (video, overlay header, animation)
     2. Bootstrap globals   6. Cards, tags, members, stats
     3. Buttons & links     7. Footer
     4. Layout rhythm       8. Motion & print
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

/* ---------------------------------------------------------- 1. BRAND TOKENS */
:root {
  /* Rotary International brand colours — do not substitute look-alikes.
     Reference: Rotary Brand Center visual identity guidelines. */
  --cranberry: #d41367;        /* Rotaract signature colour */
  --cranberry-dark: #a80f52;
  --royal-blue: #17458f;       /* Rotary primary */
  --royal-blue-dark: #0f2f66;
  --azure: #0067c8;
  --gold: #f7a81b;             /* accent only — never as text on white */

  --ink: #16182b;
  --ink-soft: #4a4f66;
  --ink-faint: #767c94;

  --header-h: 76px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------ 2. BOOTSTRAP GLOBALS */
:root {
  --bs-body-font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.65;
  --bs-body-color: var(--ink);
  --bs-body-color-rgb: 22, 24, 43;
  --bs-secondary-color: var(--ink-soft);
  --bs-border-color: #e1e4ee;
  --bs-border-radius: 0.625rem;
  --bs-border-radius-lg: 1rem;

  /* Bootstrap's theme colours, remapped to the club palette. */
  --bs-primary: var(--cranberry);
  --bs-primary-rgb: 212, 19, 103;
  --bs-secondary: var(--royal-blue);
  --bs-secondary-rgb: 23, 69, 143;

  --bs-link-color: var(--royal-blue);
  --bs-link-color-rgb: 23, 69, 143;
  --bs-link-hover-color: var(--cranberry);
  --bs-link-hover-color-rgb: 212, 19, 103;

  --bs-focus-ring-color: rgba(0, 103, 200, 0.5);
  --bs-focus-ring-width: 3px;

  --bs-emphasis-color: var(--ink);
}

/* Anchor links (e.g. the home page's "Know more" into the About page) must
   not drop their target underneath the sticky header. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: 'Poppins', system-ui, sans-serif;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.35rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }

/* Keyboard focus must stay visible on every interactive element.
   Never replace this with outline:none. */
:focus-visible {
  outline: 3px solid var(--azure);
  outline-offset: 2px;
}

.text-muted-soft { color: var(--ink-soft) !important; }
.text-faint { color: var(--ink-faint) !important; }

.eyebrow {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cranberry);
  margin-bottom: 0.75rem;
}
.eyebrow--on-dark { color: var(--gold); }

.lede { font-size: 1.0625rem; color: var(--ink-soft); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  padding: 0.75rem 1rem;
  background: var(--royal-blue);
  color: #fff;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 200ms var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }

/* -------------------------------------------------------- 3. BUTTONS & LINKS */
/* Bootstrap 5.3 buttons read their own --bs-btn-* variables, so these must be
   set per button class. Changing --bs-primary above is not enough. */
.btn {
  --bs-btn-padding-y: 0.7rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-family: 'Poppins', sans-serif;
  --bs-btn-font-size: 0.9375rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 0.625rem;
  min-height: 46px;   /* keeps every button a comfortable tap target */
}

.btn-primary {
  --bs-btn-bg: var(--cranberry);
  --bs-btn-border-color: var(--cranberry);
  --bs-btn-hover-bg: var(--cranberry-dark);
  --bs-btn-hover-border-color: var(--cranberry-dark);
  --bs-btn-active-bg: var(--cranberry-dark);
  --bs-btn-active-border-color: var(--cranberry-dark);
  --bs-btn-disabled-bg: var(--cranberry);
  --bs-btn-disabled-border-color: var(--cranberry);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
}

.btn-secondary {
  --bs-btn-bg: var(--royal-blue);
  --bs-btn-border-color: var(--royal-blue);
  --bs-btn-hover-bg: var(--royal-blue-dark);
  --bs-btn-hover-border-color: var(--royal-blue-dark);
  --bs-btn-active-bg: var(--royal-blue-dark);
  --bs-btn-active-border-color: var(--royal-blue-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.btn-outline-dark {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-color: var(--cranberry);
  --bs-btn-hover-border-color: var(--cranberry);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-color: var(--cranberry);
  --bs-btn-active-border-color: var(--cranberry);
}

/* Used on the dark hero and the cranberry call-to-action band. */
.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.55);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.14);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.2);
  --bs-btn-active-color: #fff;
}

.cta-band .btn-light,
.cta-join .btn-light {
  --bs-btn-color: var(--cranberry);
  --bs-btn-hover-color: var(--cranberry-dark);
  --bs-btn-active-color: var(--cranberry-dark);
}

/* Gold button — dark brown text on gold clears contrast; white would not. */
.btn-gold {
  --bs-btn-bg: var(--gold);
  --bs-btn-border-color: var(--gold);
  --bs-btn-color: #3b2600;
  --bs-btn-hover-bg: #ffb933;
  --bs-btn-hover-border-color: #ffb933;
  --bs-btn-hover-color: #3b2600;
  --bs-btn-active-bg: #e09a18;
  --bs-btn-active-border-color: #e09a18;
  --bs-btn-active-color: #3b2600;
}

/* ---------------------------------------------------------- 4. LAYOUT RHYTHM */
.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section-tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section-muted { background: #f6f7fb; }

.section-head { max-width: 62ch; margin-bottom: 3rem; }
.section-head-center { margin-inline: auto; text-align: center; }

/* --- Split call-to-action, home page only ------------------------------
   Statement and buttons on the left, the 18-30 eligibility figure on the
   right. The inner pages keep the simpler centred .cta-band below. */
.cta-join {
  position: relative;
  overflow: hidden;
  background: linear-gradient(104deg, #7d0b3d 0%, #b4105a 48%, var(--cranberry) 100%);
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}
/* Oversized ring motif, drawn in CSS so there is no image to download. */
.cta-join::after {
  content: '';
  position: absolute;
  right: -170px;
  top: -190px;
  width: 560px;
  height: 560px;
  border: 90px solid rgba(255, 255, 255, 0.055);
  border-radius: 50%;
  pointer-events: none;
}
.cta-join > .container { position: relative; z-index: 1; }
.cta-join h2 { color: #fff; margin-bottom: 1rem; }
.cta-join p { color: rgba(255, 255, 255, 0.86); }

.cta-eyebrow {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.cta-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 0.6rem;
}

/* Scoped with .cta-join so it beats `.cta-join p`, which would otherwise win
   on specificity and paint this white. */
.cta-join .cta-figure {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.cta-note {
  font-size: 0.9375rem;
  max-width: 32ch;
  margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .cta-aside {
    border-left: 1px solid rgba(255, 255, 255, 0.28);
    padding-left: 2.5rem;
  }
}

.cta-band {
  background: var(--cranberry);
  color: #fff;
  padding-block: clamp(3rem, 6vw, 4rem);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 52ch;
  margin-inline: auto;
}

/* --------------------------------------------------------- 5. HEADER & HERO */
.site-header {
  --bs-navbar-padding-y: 0.75rem;
  min-height: var(--header-h);
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--bs-border-color);
  backdrop-filter: saturate(180%) blur(8px);
}

.brand-mark { width: 42px; height: 42px; object-fit: contain; }
/* The brand is now just the mark plus "RAC RRC", so the text carries more
   weight than it did as the top line of a two-line lockup. */
.brand-name {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
}

.site-header {
  --bs-navbar-color: var(--ink-soft);
  --bs-navbar-hover-color: var(--cranberry);
  --bs-navbar-active-color: var(--cranberry);
}
.site-header .nav-link {
  font-weight: 600;
  border-radius: 0.5rem;
  padding-inline: 0.75rem;
}

/* --- Overlay header: home page only ------------------------------------
   The navbar floats over the hero, then turns white once the hero has
   scrolled past. Driven by .navbar-overlay in index.html; the .is-solid
   class is added by main.js. Other pages never get either class. */
.navbar-overlay {
  --bs-navbar-color: rgba(255, 255, 255, 0.92);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: var(--gold);
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease);
}
.navbar-overlay .brand-name { color: #fff; }
.navbar-overlay .nav-link[aria-current='page'] { color: var(--gold); }
.navbar-overlay .navbar-toggler { border-color: rgba(255, 255, 255, 0.45); }

/* Solid state — scrolled past the hero, or the mobile menu is open (the
   dropdown panel is white, so a transparent bar above it looks detached). */
.navbar-overlay.is-solid,
.navbar-overlay.nav-open {
  --bs-navbar-color: var(--ink-soft);
  --bs-navbar-hover-color: var(--cranberry);
  --bs-navbar-active-color: var(--cranberry);
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: var(--bs-border-color);
  backdrop-filter: saturate(180%) blur(8px);
}
.navbar-overlay.is-solid .brand-name,
.navbar-overlay.nav-open .brand-name { color: var(--ink); }
.navbar-overlay.is-solid .brand-sub,
.navbar-overlay.nav-open .brand-sub { color: var(--ink-faint); }
.navbar-overlay.is-solid .nav-link[aria-current='page'],
.navbar-overlay.nav-open .nav-link[aria-current='page'] { color: var(--cranberry); }
.navbar-overlay.is-solid .navbar-toggler,
.navbar-overlay.nav-open .navbar-toggler { border-color: var(--bs-border-color); }

/* On mobile the collapsed menu needs its own solid panel. */
@media (max-width: 991.98px) {
  .navbar-overlay .navbar-collapse {
    background: #fff;
    border-radius: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.5rem;
  }
  .navbar-overlay .navbar-collapse {
    --bs-navbar-color: var(--ink-soft);
    --bs-navbar-hover-color: var(--cranberry);
    --bs-navbar-active-color: var(--cranberry);
  }
  .navbar-overlay .navbar-collapse .nav-link[aria-current='page'] { color: var(--cranberry); }
}

/* --- Inner page hero ---------------------------------------------------- */
.hero-compact {
  position: relative;
  overflow: hidden;
  background: var(--royal-blue-dark);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 4rem);
}
.hero-compact h1 { color: #fff; }
.hero-compact::after {          /* faint Rotary-wheel motif, drawn in CSS */
  content: '';
  position: absolute;
  right: -140px;
  top: -80px;
  width: 460px;
  height: 460px;
  border: 46px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}
.hero-compact > .container { position: relative; z-index: 1; }
.hero-lede { color: rgba(255, 255, 255, 0.82); max-width: 44ch; }
.breadcrumb-line { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.65); }
.breadcrumb-line a { color: rgba(255, 255, 255, 0.85); }

/* --- Home page video hero ----------------------------------------------
   Three stacked layers:
     ::before      the still poster (shown instantly, and on phones)
     .hero-video   the video, fading in over the poster once it plays
     .hero-scrim   a neutral shade that keeps white text readable
   Dim the footage with --hero-media-opacity, or CLUB.heroVideo.opacity in
   data.js, which sets the same variable. 0 = hidden, 1 = full strength. */
.hero-video-section {
  --hero-media-opacity: 0.8;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;   /* svh so mobile browser chrome cannot cause overflow */
  background-color: #000;
  color: #fff;
  padding-block: calc(var(--header-h) + 3rem) 4rem;
}

.hero-video-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/hero-poster.jpg') center / cover no-repeat;
  opacity: var(--hero-media-opacity);
  transition: opacity 800ms var(--ease);
  z-index: 0;
}
/* Once the video runs, drop the still so the two frames cannot ghost. */
.hero-video-section.is-video-on::before { opacity: 0; }

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 800ms var(--ease);
  pointer-events: none;
  z-index: 1;
}
.hero-video.is-playing { opacity: var(--hero-media-opacity); }

/* Neutral shade, not a colour cast: darker at the top so the header stays
   legible, a centre vignette behind the logo and name, some weight at the
   bottom. Soften by lowering these alphas — but do not delete the rule, or
   white text fails on the bright sunset frames. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.10) 22%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0) 34%),
    /* Centre vignette nudged up from 0.52: it sits directly behind the logo
       and club name, so strengthening it protects the text on bright frames
       without dulling the footage at the edges. */
    radial-gradient(ellipse 68% 58% at 50% 50%,
      rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.24) 68%, rgba(0, 0, 0, 0) 100%);
}

.hero-content { position: relative; z-index: 3; }

.hero-logo {
  width: clamp(112px, 15vw, 176px);
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
}

.hero-title-sm {
  display: block;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

/* The club name stays white rather than cranberry. Cranberry over moving
   footage only clears 3:1, and only while a dark frame happens to show.
   White is legible on every frame. The brand colours carry in the gold line
   above, the rule below, and the cranberry button. */
.hero-title-lg {
  display: block;
  font-size: clamp(2.1rem, 6.2vw, 4.25rem);
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
}

/* Small italic credit to the parent club, under the club name. */
.hero-sponsor {
  font-style: italic;
  font-size: clamp(0.8125rem, 1.5vw, 1rem);
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.01em;
  margin-bottom: 0.75rem;
}

.hero-meta {
  font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
  color: rgba(255, 255, 255, 0.74);
  letter-spacing: 0.04em;
  margin-bottom: 2rem;
}
.hero-meta-sep { margin-inline: 0.5em; opacity: 0.5; }
.hero-meta::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  margin: 1.5rem auto 0;
  background: var(--cranberry);
  border-radius: 2px;
}

/* --- Hero entrance animation -------------------------------------------
   Pure CSS, so it does not depend on JavaScript. animation-fill-mode:both
   leaves everything at its final state, and the reduced-motion block at the
   bottom collapses the duration — so the hero is never left invisible. */
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroRollUp {
  from { opacity: 0; transform: translateY(110%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.hero-line {
  display: block;
  overflow: hidden;   /* the mask the text rolls up out of */
  /* Room for the descenders in "Rajahmundry" so the mask cannot clip them;
     the negative margin cancels the padding so spacing is unchanged. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.hero-logo { animation: heroFadeIn 900ms var(--ease) 60ms both; }
.hero-line > span { animation: heroRollUp 760ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-line--1 > span { animation-delay: 300ms; }
.hero-line--2 > span { animation-delay: 420ms; }
.hero-sponsor { animation: heroRise 700ms var(--ease) 580ms both; }
.hero-meta    { animation: heroRise 700ms var(--ease) 680ms both; }
.hero-actions { animation: heroRise 700ms var(--ease) 780ms both; }

/* ------------------------------------------- 6. CARDS, TAGS, MEMBERS, STATS */
.card {
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-border-radius: 1rem;
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}
.card:hover { border-color: var(--cranberry); transform: translateY(-3px); }

.card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #eef0f7;
  overflow: hidden;
  border-radius: 1rem 1rem 0 0;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }

/* Avenue tag. The label always carries the meaning as well as the colour,
   so it never depends on colour alone. */
.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;          /* 12px floor — 11px was hard to read */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #eef0f7;
  color: var(--ink-soft);
}
.tag--community     { background: #fde7f0; color: #a80f52; }
.tag--club          { background: #e3ecfb; color: #0f2f66; }
.tag--profession    { background: #e6f6fd; color: #005b87; }
.tag--international { background: #fff2d9; color: #855400; }
.tag--youth         { background: #e0f4f6; color: #00646e; }
.tag--minutes       { background: #e3ecfb; color: #0f2f66; }
.tag--resolution    { background: #fff2d9; color: #855400; }
.card-media .tag {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  background: rgba(255, 255, 255, 0.95);
}

/* Filter chips are Bootstrap outline buttons with an active state. */
.chip.active {
  --bs-btn-bg: var(--cranberry);
  --bs-btn-border-color: var(--cranberry);
  --bs-btn-color: #fff;
}

.member-photo {
  aspect-ratio: 1;
  border-radius: 1rem;
  background: #eef0f7;
  overflow: hidden;
  margin-bottom: 1rem;
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-name { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; }
.member-role { font-size: 0.8125rem; font-weight: 600; color: var(--cranberry); }
.member-mail { font-size: 0.8125rem; color: var(--ink-faint); word-break: break-all; }

/* Shown when a photo has not been added yet. */
.photo-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--royal-blue);
}

.stat-rule {
  width: 40px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
  margin-bottom: 1rem;
}
.stat-value {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--cranberry);
}
.stat-label { margin-top: 0.5rem; font-size: 0.875rem; color: var(--ink-soft); }

/* Club emblem beside the About text on the home page. */
.about-logo {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-inline: auto;
}

/* --- Blog -------------------------------------------------------------- */
/* The whole card is one link, so the hover belongs to the card, not just
   the title. */
.blog-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.blog-link:hover { color: inherit; }
.blog-link:hover .card-title { color: var(--cranberry); }
.blog-link:hover .card-link::after { transform: translateX(3px); }
.blog-link .card-title { transition: color 150ms var(--ease); }

/* Blogger labels are free text, so there is no fixed colour per category —
   one neutral treatment for all of them. */
.blog-tag {
  background: rgba(255, 255, 255, 0.95);
  color: var(--cranberry);
}

/* Post body. Blogger supplies this markup, so it is styled defensively:
   whatever tags come back need to look reasonable. */
.post { max-width: 760px; margin-inline: auto; }

.post-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  margin-bottom: 2rem;
}

.post-body {
  font-size: 1.0625rem;
  line-height: 1.75;
  /* Post bodies are whatever Blogger gives us. A long unbroken URL is the
     usual way that content forces a page to scroll sideways on a phone. */
  overflow-wrap: anywhere;
}
.post-body > *:first-child { margin-top: 0; }
.post-body p { margin-bottom: 1.25rem; }
.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4 { margin: 2.25rem 0 0.85rem; }
.post-body h2 { font-size: 1.6rem; }
.post-body h3 { font-size: 1.25rem; }
.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin: 1.5rem 0;
}
/* Blogger wraps images in a fixed-width table or a left-floated div often
   enough that it is worth neutralising both. */
/* max-width alone does not stop a wide table overflowing — the columns still
   demand their width. Making it a scrollable block keeps the page itself from
   scrolling sideways; the table scrolls instead. Same for code blocks. */
.post-body table,
.post-body pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.post-body .separator { margin-inline: 0 !important; text-align: left !important; }
.post-body a { color: var(--royal-blue); }
.post-body a:hover { color: var(--cranberry); }
.post-body ul,
.post-body ol { margin-bottom: 1.25rem; padding-left: 1.4rem; }
.post-body li { margin-bottom: 0.5rem; }
.post-body blockquote {
  margin: 1.75rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--cranberry);
  font-style: italic;
  color: var(--ink-soft);
}
.post-body iframe {
  max-width: 100%;
  border-radius: 0.75rem;
}

.post-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--bs-border-color);
}

/* --- About page: Rotaract / Rotary / founder / MDIO -------------------- */
.about-mark {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-inline: auto;
}

/* The Four-Way Test, set apart from the surrounding prose. */
.fourway {
  margin-top: 1.75rem;
  padding: 1.5rem 1.75rem;
  background: #fff;
  border-left: 4px solid var(--gold);
  border-radius: 0 1rem 1rem 0;
}
.fourway-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.fourway-intro {
  font-size: 0.875rem;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}
.fourway-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--ink-soft);
}
.fourway-list li { margin-bottom: 0.4rem; }
.fourway-list li:last-child { margin-bottom: 0; }

.founder-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
}
/* Two facts per row. Each cell keeps the info-list rule beneath it, so the
   pair reads as a small table rather than a stacked list. */
.founder-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.75rem;
  margin-bottom: 0;
}
/* With an even number of facts, the bottom row needs no rule under it. */
.founder-facts li:nth-last-child(-n + 2) { border-bottom: 0; }

.founder-quote {
  margin: 1.75rem 0 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--cranberry);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--ink-soft);
}
.founder-quote cite {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  color: var(--ink-faint);
}

/* Dark band, because the supplied RSA MDIO logo is white-only and would be
   invisible on a light background. */
.mdio-band {
  background: linear-gradient(105deg, #0b2450 0%, var(--royal-blue-dark) 70%, var(--royal-blue) 100%);
  color: rgba(255, 255, 255, 0.86);
}
.mdio-band h2 { color: #fff; }
.mdio-logo {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
  margin-inline: auto;
}
.mdio-stats { max-width: 480px; }
.mdio-value {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}
.mdio-label {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
}

/* --- Auto-scrolling board strip ---------------------------------------
   Two identical tracks sit side by side and the pair is translated by
   exactly half its width, so the second copy lands where the first started
   and the loop is seamless. --marquee-duration is set by main.js from the
   number of cards, keeping the speed constant as the board grows. */
.marquee {
  --marquee-duration: 85s;
  display: flex;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  flex: 0 0 auto;
  gap: 1.25rem;
  padding-right: 1.25rem;   /* keeps the seam evenly spaced */
  animation: marqueeScroll var(--marquee-duration) linear infinite;
}
/* Let people stop it to actually read a card. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

.marquee-item {
  flex: 0 0 auto;
  width: clamp(200px, 24vw, 290px);
}
.marquee-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 1px solid var(--bs-border-color);
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* --- Higher leadership cards ------------------------------------------- */
.higher-photo {
  width: clamp(150px, 20vw, 200px);
  aspect-ratio: 1;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  overflow: hidden;
  background: #eef0f7;
  box-shadow: 0 10px 26px rgba(22, 24, 43, 0.14);
}
.higher-photo img { width: 100%; height: 100%; object-fit: cover; }
.higher-role {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cranberry);
  margin-bottom: 0.35rem;
}
.higher-name {
  font-family: 'Poppins', sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0;
}

/* Three across is a wide column, so cap the portraits rather than letting
   them fill it. */
#leadership-grid .member-photo {
  max-width: 260px;
  margin-inline: auto;
}

/* --- "Our pride" panel under the leadership row ------------------------ */
.pride-wrap {
  margin-top: clamp(3rem, 6vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--bs-border-color);
}

/* Deliberately the loudest thing on this page after the hero. The gradient
   stops stay dark on purpose: gold on #17458f is 4.7:1, but gold on a lighter
   blue drops to ~3.6:1 and would fail on the role text. */
.pride-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 880px;
  margin: 1.75rem auto 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 1.25rem;
  background: linear-gradient(105deg, #0b2450 0%, var(--royal-blue-dark) 55%, var(--royal-blue) 100%);
  color: #fff;
}
/* Oversized ring motif, echoing the join band lower down the page. */
.pride-card::after {
  content: '';
  position: absolute;
  right: -90px;
  bottom: -150px;
  width: 330px;
  height: 330px;
  border: 58px solid rgba(255, 255, 255, 0.055);
  border-radius: 50%;
  pointer-events: none;
}

.pride-photo {
  position: relative;
  z-index: 1;
  width: clamp(150px, 22vw, 215px);
  height: clamp(150px, 22vw, 215px);
  flex-shrink: 0;
  border-radius: 1rem;
  overflow: hidden;
  background: #eef0f7;
  /* Gold ring plus a lift, so the portrait reads as the subject of the band. */
  box-shadow: 0 0 0 3px var(--gold), 0 16px 34px rgba(0, 0, 0, 0.32);
}
.pride-photo img { width: 100%; height: 100%; object-fit: cover; }

.pride-body { position: relative; z-index: 1; }

.pride-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  line-height: 1.2;
  color: #fff;
  margin-bottom: 0.9rem;
}
.pride-roles { list-style: none; padding: 0; margin: 0; }
.pride-roles li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.45rem;
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--gold);
}
.pride-roles li:last-child { margin-bottom: 0; }
.pride-roles li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

/* Stack it on small screens rather than squeezing the photo. */
@media (max-width: 575.98px) {
  .pride-card {
    flex-direction: column;
    text-align: center;
    gap: 1.25rem;
  }
  .pride-roles li { padding-left: 0; }
  .pride-roles li::before { display: none; }
}

/* Parent club / district / sister / twin strip on the home page. */
/* Cards are a flex column so the buttons line up along the bottom even when
   one club's name wraps to two lines and another's does not. */
.relation {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.relation .btn { margin-top: auto; }

.relation-logo {
  width: 100%;
  max-width: 165px;
  aspect-ratio: 1;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* A wide logo gets fitted by its width and ends up looking smaller than the
   round ones beside it. `scale` in data.js lets such a logo grow past the box
   to match them visually — the box has no overflow clipping, so it just
   spills into the empty space above and below. */
.relation-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(var(--relation-scale, 1));
}
/* ...but only where there is room for it to spill into. Below `md` the grid
   is two-up, so the logo box is about half the viewport and a scaled mark
   runs off the side of the page. A transform does not affect layout, so the
   browser does not reflow around it — it simply makes the document wider
   than the screen, which set the whole site scrolling sideways and left a
   pale band down the right of the footer and the join band. */
@media (max-width: 767.98px) {
  .relation-logo img { transform: none; }
}
/* Stand-in until the club has the real artwork — reads as intentional
   rather than as a missing image. */
.relation-empty {
  width: 76%;
  height: 76%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px dashed var(--bs-border-color);
  color: var(--ink-faint);
}
.relation-label {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.relation-name {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0;
}

/* "Estd. 2021" caption under the emblem. */
.about-estd {
  margin: 1.1rem 0 0;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Link at the foot of a card. margin-top:auto pins it to the bottom, so the
   links line up across a row even when one card's text wraps differently. */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cranberry);
  text-decoration: none;
}
.card-link::after {
  content: '\2192';            /* → */
  transition: transform 150ms var(--ease);
}
.card-link:hover,
.card-link:focus-visible {
  color: var(--cranberry-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.card-link:hover::after { transform: translateX(3px); }

.feature-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  background: #eef0f7;
  color: var(--royal-blue);
  margin-bottom: 1rem;
}

/* The six cards in "What we do" — five avenues plus the areas of focus.
   All six share the same white card so the row reads as one set. */
.feature-card {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  padding: 1.5rem;
}
/* --- Archive ----------------------------------------------------------
   Minutes and resolutions. These cards carry no photograph, so the coloured
   rule along the top does the job the card image does elsewhere on the site:
   it tells you at a glance which kind of document you are looking at. */
.archive-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  padding: 1.75rem 1.5rem 1.5rem;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.archive-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--cranberry);
}
.archive-card--resolution::before { background: var(--gold); }

/* The card is a flex column, so without this the pill stretches the whole
   width instead of hugging its own text. */
.archive-card .tag { align-self: flex-start; }

/* Only lift on pointers that can actually hover — on a phone this would
   stick after the tap. */
@media (hover: hover) {
  .archive-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(16, 24, 48, 0.1);
  }
}

.archive-title {
  font-size: 1.125rem;
  line-height: 1.4;
  margin: 0.9rem 0 0.35rem;
}
.archive-date {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.empty-state {
  padding: 3rem;
  text-align: center;
  color: var(--ink-faint);
  border: 1px dashed var(--bs-border-color);
  border-radius: 1rem;
}

/* "Coming soon" is a deliberate statement, not an error — so it is set to
   read as a placeholder the club chose, rather than something gone wrong. */
.empty-soon {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  padding-block: clamp(3rem, 7vw, 4.5rem);
}

/* Embedded Fillout form on the join page. The min-height reserves space
   while the third-party script loads, so the footer does not jump up the
   page and then get shoved back down. */
.fillout-wrap {
  min-height: 620px;
  width: 100%;      /* full container width — no narrower reading measure */
}
@media (max-width: 575.98px) {
  .fillout-wrap { min-height: 720px; }   /* fields stack, so it runs taller */
}

/* Form bits Bootstrap does not cover */
.form-label { font-weight: 600; font-size: 0.875rem; }
.form-label .req { color: var(--cranberry); }
.panel {
  background: #f6f7fb;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  padding: 2rem;
}
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li {
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--bs-border-color);
  font-size: 0.9375rem;
}
.info-list li:last-child { border-bottom: 0; }
.info-list strong {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  font-weight: 600;
}

/* ------------------------------------------------------------- 7. FOOTER */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  padding-block: 4rem 2rem;
  font-size: 0.9375rem;
}
.site-footer h4 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
/* Short rule before each column heading. */
.site-footer h4::before {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 2px;
  background: var(--gold);
}
.site-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
/* An email address is one long unbreakable word. The footer columns now go
   full width on the narrowest phones so it fits, but this makes sure a
   longer address wraps instead of pushing the page sideways. */
.site-footer ul li { overflow-wrap: anywhere; }
.footer-brand-img { width: 56px; height: 56px; object-fit: contain; }
.footer-brand-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 1.0625rem;
  margin: 0;
}
.social a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.625rem;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.social a:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
/* --- Oversized motto across the foot of the page ----------------------
   Set as SVG text because textLength makes the string span the container
   exactly at any screen width — something CSS cannot do for a fixed phrase.
   Kept very low contrast on purpose: it is texture behind the footer, not
   something to read, which is also why it is aria-hidden in the markup. */
.footer-wordmark {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  line-height: 0;                    /* no descender gap under the svg */
}
.footer-wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.footer-wordmark text {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 52px;
  fill: rgba(255, 255, 255, 0.07);
}

/* Below this the phrase is too wide to read as anything but a smear, so it
   stops earning its place. */
@media (max-width: 575.98px) {
  .footer-wordmark { display: none; }
}

.footer-bottom {
  padding-top: 2rem;
  margin-top: 0;      /* the wordmark's baseline sits on this rule */
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ------------------------------------------------- 8. DEVICE ADJUSTMENTS */

/* Below 576px the container is fluid with 12px of padding, but a `g-5` row
   pulls itself out by 24px a side — so every such row hung 12px past the
   viewport and made the whole page scroll sideways. Capping the gutter makes
   the row edges line up with the container again, and tightens the spacing
   on a small screen, which it wanted anyway. */
@media (max-width: 575.98px) {
  .row.g-5,
  .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* Touch devices: lift small inline links to a comfortable tap size. A 20px
   line of text is a poor target for a finger. `pointer: coarse` is the exact
   test for "tapped rather than clicked", so mouse layouts are left alone. */
@media (pointer: coarse) {
  .site-footer ul a,
  .breadcrumb-line a {
    display: inline-block;
    /* 20px of line plus 2 x 10px clears the 40px finger target. */
    padding-block: 0.625rem;
  }
}

/* --------------------------------------------------------- 9. MOTION & PRINT */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Respect the operating-system "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }

  /* The rule above would snap the marquee to the end of its loop and leave it
     blank. Stop it outright and make the strip an ordinary scrollable row the
     visitor can move themselves. */
  .marquee-track {
    animation: none !important;
    transform: none !important;
  }
  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media print {
  .site-header, .site-footer, .cta-band, .filters { display: none; }
  body { color: #000; }
}