/* ============================================================================
   7thPortal brand theme overlay — matches test.7thswindon.org.uk
   ----------------------------------------------------------------------------
   Re-skins the marketing site to the live 7thPortal branding. Loaded AFTER the
   compiled Tailwind stylesheet, so it overrides the utility classes by source
   order — remove this one <link> to revert to the original look, or swap it for
   assets/theme-teal.css for the Scout Teal palette.

   Values taken live from test.7thswindon.org.uk:
   purple #6d28d9 / dark #4c1d95 / navy #1b1533, green #0f9d78, yellow #f5b800,
   blue #2a5fb0, warm bg #f6f4f0, border #e3ddf0. Typeface Nunito Sans.
   Signatures: solid-purple top bar, yellow primary buttons (navy text),
   navy→purple 135° hero gradient, navy footer with yellow headings.
   ========================================================================== */

/* Nunito Sans — self-hosted woff2 (same files the portal serves) */
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 400 800;
  font-stretch: 100%; font-display: swap;
  src: url("fonts/nunito-sans-latin.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 400 800;
  font-stretch: 100%; font-display: swap;
  src: url("fonts/nunito-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304,
    U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --pp-purple: #6d28d9;
  --pp-purple-dark: #4c1d95;
  --pp-navy: #1b1533;
  --pp-green: #0f9d78;
  --pp-green-dark: #0c7d60;
  --pp-yellow: #f5b800;
  --pp-yellow-dark: #e0a900;
  --pp-yellow-hi: #ffd84d;
  --pp-blue: #2a5fb0;
  --pp-bg: #f6f4f0;
  --pp-border: #e3ddf0;
  --pp-text: #221c2e;
  --pp-muted: #6b6478;
}

/* Warm page background + Nunito Sans (portal typeface) */
body { background: var(--pp-bg); color: var(--pp-text);
  font-family: "Nunito Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.font-sans { font-family: "Nunito Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
/* Headings on the portal use Nunito Sans too (original site declared Outfit) */
h1, h2, h3, h4, h5, h6 { font-family: "Nunito Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* ── Solid-colour remaps ─────────────────────────────────────────────── */
.text-purple-600 { color: var(--pp-purple); }
.hover\:text-purple-600:hover { color: var(--pp-purple); }
.bg-purple-600 { background-color: var(--pp-purple); }
.hover\:bg-purple-700:hover { background-color: var(--pp-purple-dark); }
.text-purple-700 { color: var(--pp-purple-dark); }
.text-purple-900 { color: var(--pp-purple-dark); }
.border-purple-600 { border-color: var(--pp-purple); }
.border-purple-200 { border-color: var(--pp-border); }
.bg-purple-50 { background-color: #f3eefc; }
.bg-purple-100 { background-color: #ece3fb; }
.hover\:bg-purple-50:hover { background-color: #f3eefc; }

.bg-green-600 { background-color: var(--pp-green); }
.hover\:bg-green-700:hover { background-color: var(--pp-green-dark); }

.text-yellow-400 { color: var(--pp-yellow); }
.hover\:text-yellow-300:hover { color: var(--pp-yellow-hi); }

.text-blue-900 { color: var(--pp-navy); }
.text-blue-600 { color: var(--pp-blue); }
.hover\:text-blue-700:hover { color: var(--pp-blue); }
.border-blue-500 { border-color: var(--pp-blue); }
.bg-blue-50 { background-color: #eef1fb; }
.bg-blue-100 { background-color: #dde5f6; }

.bg-gray-900 { background-color: var(--pp-navy); }
.bg-gray-800 { background-color: #241a3f; }
.border-gray-700 { border-color: #3a2f55; }

/* ── Gradient remaps (Tailwind from-/to- custom-property pattern) ─────── */
.from-blue-900 { --tw-gradient-from: var(--pp-navy) var(--tw-gradient-from-position); --tw-gradient-to: rgb(27 21 51 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-purple-600 { --tw-gradient-from: var(--pp-purple) var(--tw-gradient-from-position); --tw-gradient-to: rgb(109 40 217 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-green-500 { --tw-gradient-from: var(--pp-green) var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 157 120 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-blue-400 { --tw-gradient-from: var(--pp-blue) var(--tw-gradient-from-position); --tw-gradient-to: rgb(42 95 176 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-gray-50 { --tw-gradient-from: var(--pp-bg) var(--tw-gradient-from-position); --tw-gradient-to: rgb(246 244 240 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }

.to-purple-600 { --tw-gradient-to: var(--pp-purple) var(--tw-gradient-to-position); }
.to-purple-700 { --tw-gradient-to: var(--pp-purple-dark) var(--tw-gradient-to-position); }
.to-green-500 { --tw-gradient-to: var(--pp-green) var(--tw-gradient-to-position); }
.to-green-600 { --tw-gradient-to: var(--pp-green-dark) var(--tw-gradient-to-position); }
.to-blue-600 { --tw-gradient-to: var(--pp-blue) var(--tw-gradient-to-position); }
.to-blue-700 { --tw-gradient-to: var(--pp-purple-dark) var(--tw-gradient-to-position); }
.to-blue-500 { --tw-gradient-to: var(--pp-blue) var(--tw-gradient-to-position); }
.to-cyan-400 { --tw-gradient-to: var(--pp-green) var(--tw-gradient-to-position); }

/* ── Cards: portal left-accent pattern ───────────────────────────────── */
/* Softer border + portal card radius, with a 4px coloured left accent. */
.bg-white.rounded-3xl {
  border: 1px solid var(--pp-border);
  border-left: 4px solid var(--pp-purple);
  border-radius: 14px;
}
/* Drop the original top gradient bar — the left accent replaces it. */
.bg-white.rounded-3xl > .h-1\.5 { display: none; }
/* Take each card's accent colour from its (now hidden) top-bar gradient. */
.bg-white.rounded-3xl:has(> .from-blue-400)  { border-left-color: var(--pp-blue); }
.bg-white.rounded-3xl:has(> .from-green-500) { border-left-color: var(--pp-green); }
.bg-white.rounded-3xl:has(> .from-blue-900)  { border-left-color: var(--pp-navy); }
.bg-white.rounded-3xl:has(> .from-purple-600){ border-left-color: var(--pp-purple); }
/* Meeting-slot rows: colour their existing left rule to match the section. */
.border-l-4.from-blue-400  { border-left-color: var(--pp-blue); }
.border-l-4.from-green-500 { border-left-color: var(--pp-green); }
.border-l-4.from-blue-900  { border-left-color: var(--pp-navy); }
.border-l-4.from-purple-600{ border-left-color: var(--pp-purple); }

/* ── Top nav: solid purple portal bar ────────────────────────────────── */
nav.fixed { background: var(--pp-purple) !important; box-shadow: 0 2px 10px rgba(27, 21, 51, 0.2) !important; }
nav.fixed .text-purple-600 { color: #fff; }                 /* brand wordmark */
nav.fixed a.font-semibold { color: #fff; }                  /* nav links */
nav.fixed a.font-semibold:hover { color: var(--pp-yellow); }
nav.fixed .lg\:hidden { color: #fff; }                      /* hamburger */
.nav-active { color: var(--pp-yellow) !important; }         /* current page */

/* Login -> white "role pill" (desktop) */
nav.fixed ul.lg\:flex a[href*="portal.7thswindon"] {
  background: #fff; color: var(--pp-purple); padding: 0.45rem 1.1rem;
  border-radius: 999px; font-weight: 700;
}
nav.fixed ul.lg\:flex a[href*="portal.7thswindon"]:hover { color: var(--pp-purple-dark); }

/* Join Waiting List -> yellow primary pill (desktop + mobile) */
nav.fixed ul.lg\:flex a.bg-purple-600,
#mobileMenu a.bg-purple-600 {
  background: var(--pp-yellow) !important; color: var(--pp-navy) !important;
  box-shadow: 0 2px 8px rgba(27, 21, 51, 0.18) !important;
}
nav.fixed ul.lg\:flex a.bg-purple-600:hover,
#mobileMenu a.bg-purple-600:hover { background: var(--pp-yellow-dark) !important; }

/* Mobile menu on the purple bar */
#mobileMenu { border-top: 1px solid rgba(255, 255, 255, 0.2); }
#mobileMenu a.mobile-link { color: #fff; }
#mobileMenu a.mobile-link:hover { color: var(--pp-yellow); }

/* ── Hero primary CTA -> yellow (portal btn-primary) ─────────────────── */
#home a.bg-white.text-purple-600 { background: var(--pp-yellow); color: var(--pp-navy); }