/* ── Value Web Custom Theme ── */

/* ──────────────────────────────────────────────────────────
   PALETTE — single source of truth
   PASSION + STABILITY from Housatonic brandbook (2014).
   Other tones are Recode additions, pending Robin's ratify.
   ────────────────────────────────────────────────────────── */
:root {
  --vw-red:        #E30421;   /* PASSION (brand) */
  --vw-red-hover:  #B8021A;
  --vw-black:      #000000;   /* STABILITY (brand) */
  --vw-text:       #1a1a1a;
  --vw-muted:      #888888;
  --vw-white:      #FFFFFF;
  --vw-paper:      #F8F7F4;   /* Recode addition — soft section bg */
  --vw-rule:       #EEEEEE;
  --vw-footer-bg:  #111111;
}

body { font-family: Georgia, serif; background: var(--vw-white); }

/* ── NAV ── */
.navbar { background: var(--vw-white) !important; border-bottom: 1px solid var(--vw-rule); padding: 12px 0; }
.navbar-brand img { height: 55px; }
.tagline { font-size: 11px; color: #555; letter-spacing: 0.5px; margin-top: 2px; }
.navbar-nav > li > a { font-family: Arial, sans-serif; font-size: 13px; color: #222 !important; letter-spacing: 0.5px; padding: 8px 14px !important; }
.navbar-nav > li > a:hover { color: var(--vw-red) !important; }
.nav-join > a { background: var(--vw-red) !important; color: var(--vw-white) !important; border-radius: 2px; margin-left: 6px; }
.nav-join > a:hover { background: var(--vw-red-hover) !important; }

/* ── MEMBER-ONLY NAV ITEMS — hidden for anonymous users ──
   The wrapper <nav class="vw-nav-anon"> only appears when user is NOT
   authenticated (see header.html). We hide member nav items by their
   target href so {% nav 1 %} keeps doing the rendering and styling.
   :has() lets us hide the parent <li> so we don't leave empty list spots. */
.vw-nav-anon a[href="/academy/"],
.vw-nav-anon a[href="/assembly/"],
.vw-nav-anon a[href="/advocacy/"],
.vw-nav-anon a[href="/community/"],
.vw-nav-anon a[href="/program/"],
.vw-nav-anon a[href="/articles/"] { display: none; }

.vw-nav-anon li:has(> a[href="/academy/"]),
.vw-nav-anon li:has(> a[href="/assembly/"]),
.vw-nav-anon li:has(> a[href="/advocacy/"]),
.vw-nav-anon li:has(> a[href="/community/"]),
.vw-nav-anon li:has(> a[href="/program/"]),
.vw-nav-anon li:has(> a[href="/articles/"]) { display: none; }

/* ── LOGGED-IN NAV — hide "Join" since logged-in users are already members ── */
.vw-nav-auth a[href="/memberships/applications/valueweb-membership-application/"] { display: none; }
.vw-nav-auth li:has(> a[href="/memberships/applications/valueweb-membership-application/"]) { display: none; }

/* ── DROPDOWN-ON-HOVER — let dropdown parents remain clickable for navigation
   Pairs with the inline JS in header.html that strips data-toggle="dropdown".
   Hover opens the submenu so the parent <a> is free to navigate on click. */
#site-header nav li { position: relative; }
#site-header nav li:hover > ul,
#site-header nav li:focus-within > ul {
  display: block !important;
}

/* ── HERO ── */
#vw-hero { background: var(--vw-black); padding: 90px 0 80px; text-align: center; }
#vw-hero .hero-tag { font-size: 11px; color: var(--vw-red); letter-spacing: 4px; margin-bottom: 16px; font-family: Arial, sans-serif; }
#vw-hero h1 { font-size: 42px; color: var(--vw-white); font-weight: normal; line-height: 1.3; margin-bottom: 20px; }
#vw-hero p { font-size: 16px; color: #aaa; line-height: 1.8; max-width: 600px; margin: 0 auto 30px; font-family: Arial, sans-serif; }
.btn-vw-red { background: var(--vw-red); color: var(--vw-white) !important; padding: 12px 30px; font-family: Arial, sans-serif; font-size: 13px; letter-spacing: 2px; border: none; border-radius: 0; display: inline-block; text-decoration: none; margin-right: 10px; }
.btn-vw-red:hover { background: var(--vw-red-hover); color: var(--vw-white) !important; }
.btn-vw-outline { background: transparent; color: var(--vw-white) !important; padding: 12px 30px; font-family: Arial, sans-serif; font-size: 13px; letter-spacing: 2px; border: 1px solid rgba(255,255,255,0.4); border-radius: 0; display: inline-block; text-decoration: none; margin-right: 10px; }
.btn-vw-outline:hover { border-color: var(--vw-white); }

/* MEMBER LOG IN — soft filled grey so it sits "below" the two primary CTAs */
.btn-vw-login {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.85) !important;
}
.btn-vw-login:hover {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: var(--vw-white) !important;
}

/* ── PILLARS ── */
#vw-pillars { border-top: 4px solid var(--vw-red); }
#vw-pillars .row { margin: 0; display: flex; flex-wrap: wrap; }
.pillar-col { padding: 0; border-right: 1px solid var(--vw-rule); display: flex; }
.pillar-col:last-child { border-right: none; }
.pillar-col h3 { font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; color: var(--vw-black); letter-spacing: 1px; margin-bottom: 10px; }
.pillar-col p { font-family: Arial, sans-serif; font-size: 13px; color: #666; line-height: 1.7; margin: 0 0 10px; }
.pillar-icon { font-size: 22px; color: var(--vw-red); margin-bottom: 12px; }

/* Flip card — front shows pillar summary, back shows "What We Do" details */
.pillar-flip-card {
  perspective: 1200px;
  width: 100%;
  min-height: 280px;
  position: relative;
  cursor: pointer;
}
.pillar-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transition: transform 600ms ease;
  transform-style: preserve-3d;
}
.pillar-flip-card.flipped .pillar-flip-inner { transform: rotateY(180deg); }

.pillar-face {
  position: absolute;
  inset: 0;
  padding: 30px 24px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--vw-white);
  display: flex;
  flex-direction: column;
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.pillar-back { transform: rotateY(180deg); background: var(--vw-paper); border-left: 4px solid var(--vw-red); }
.pillar-back h4 {
  font-family: Arial, sans-serif !important;
  font-size: 11px;
  font-weight: bold;
  color: var(--vw-red);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.pillar-back ul { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--vw-text); line-height: 1.55; padding-left: 18px; margin: 0 0 12px; }
.pillar-back ul li { margin-bottom: 6px; }
.pillar-back .pillar-back-tag {
  font-family: Georgia, serif;
  font-size: 13px;
  font-style: italic;
  color: var(--vw-text);
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--vw-rule);
}

/* Pop on hover — lift + soft shadow, only when NOT flipped (avoid translate/rotate mixing) */
.pillar-flip-card:hover .pillar-face { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); }
.pillar-flip-card:not(.flipped):hover .pillar-front { transform: translateY(-4px); }
.pillar-flip-card.flipped:hover .pillar-back { transform: rotateY(180deg) translateY(-4px); }

/* Flip hint — small subtle label at the bottom of each face */
.pillar-flip-hint {
  margin-top: auto;
  padding-top: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--vw-muted);
  text-transform: uppercase;
}
.pillar-flip-card:hover .pillar-flip-hint { color: var(--vw-red); }

/* ── CTA STRIP (NEW — vibes with previous site's horizontal rally bands) ── */
#vw-cta { background: var(--vw-red); padding: 22px 0; text-align: center; }
#vw-cta .cta-line { color: var(--vw-white); font-family: Arial, sans-serif; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; display: inline-block; vertical-align: middle; }
#vw-cta .cta-btn { display: inline-block; vertical-align: middle; margin-left: 24px; padding: 8px 22px; border: 1px solid var(--vw-white); color: var(--vw-white) !important; font-family: Arial, sans-serif; font-size: 11px; letter-spacing: 2px; text-decoration: none; }
#vw-cta .cta-btn:hover { background: var(--vw-white); color: var(--vw-red) !important; }

/* ── EVENTS — rich cards (poster + description + login-gated CTA) ── */
#vw-events { background: var(--vw-paper); padding: 60px 0; }
#vw-events .sec-tag { font-size: 11px; color: var(--vw-red); letter-spacing: 3px; font-family: Arial, sans-serif; margin-bottom: 6px; }
#vw-events h2 { font-size: 32px; color: var(--vw-black); margin-bottom: 30px; }

/* Rich event row — poster on the left, body on the right */
.vw-event-rich {
  display: flex;
  background: var(--vw-white);
  border: 1px solid var(--vw-rule);
  border-top: 4px solid var(--vw-red);
  margin: 0 0 20px;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.vw-event-rich:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.08); }

.vw-event-rich-media {
  flex: 0 0 240px;
  background: var(--vw-paper);
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}
.vw-event-rich-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* If no image, show a calendar-style date block in brand red */
.vw-event-rich-media-placeholder {
  background: var(--vw-black);
  color: var(--vw-white);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.vw-event-rich-month { font-family: Arial, sans-serif; font-size: 13px; letter-spacing: 4px; color: var(--vw-red); margin-bottom: 4px; }
.vw-event-rich-day { font-family: Georgia, serif; font-size: 56px; line-height: 1; color: var(--vw-white); }

.vw-event-rich-body {
  flex: 1;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vw-event-rich-date {
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--vw-red);
  font-weight: 600;
}
.vw-event-rich-title {
  font-family: Georgia, serif;
  font-size: 22px;
  color: var(--vw-black);
  font-weight: normal;
  margin: 0;
  line-height: 1.25;
}
.vw-event-rich-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #555;
  line-height: 1.65;
  margin: 0;
}
.vw-event-rich-cta {
  margin-top: auto;
  align-self: flex-start;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--vw-red) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--vw-red);
  padding-bottom: 2px;
  letter-spacing: 0.3px;
  transition: color 150ms ease, border-color 150ms ease;
}
.vw-event-rich-cta:hover { color: var(--vw-red-hover) !important; border-bottom-color: var(--vw-red-hover); }

/* Mobile — stack image above body */
@media (max-width: 720px) {
  .vw-event-rich { flex-direction: column; }
  .vw-event-rich-media { flex: 0 0 180px; }
  .vw-event-rich-body { padding: 20px; }
}

/* Keep old .event-card and view-all-events selectors for back-compat */
.event-card { background: var(--vw-white); border: 1px solid var(--vw-rule); padding: 20px; height: 100%; }
.event-card .event-date { font-size: 11px; color: var(--vw-red); font-family: Arial, sans-serif; letter-spacing: 2px; margin-bottom: 8px; }
.event-card h4 { font-family: Arial, sans-serif; font-size: 15px; font-weight: bold; color: var(--vw-black); margin-bottom: 6px; }
.event-card p { font-family: Arial, sans-serif; font-size: 12px; color: var(--vw-muted); }
.view-all-events { font-family: Arial, sans-serif; font-size: 12px; color: var(--vw-red); letter-spacing: 1px; text-decoration: none; border-bottom: 1px solid var(--vw-red); }

/* ── WELCOME STRIP ── */
#vw-welcome { background: var(--vw-black); padding: 60px 0; }
#vw-welcome h2 { font-size: 32px; color: var(--vw-white); margin-bottom: 16px; }
#vw-welcome p { font-family: Arial, sans-serif; font-size: 15px; color: #aaa; line-height: 1.8; }

/* ── FOOTER ── */
#vw-footer { background: var(--vw-footer-bg); padding: 30px 0; }
#vw-footer .footer-brand { margin-bottom: 8px; }
#vw-footer .footer-brand img { max-height: 42px; width: auto; display: block; }
#vw-footer .footer-links a { font-family: Arial, sans-serif; font-size: 12px; color: #666; text-decoration: none; margin-right: 20px; }
#vw-footer .footer-links a:hover { color: var(--vw-red); }
#vw-footer .footer-copy { font-family: Arial, sans-serif; font-size: 11px; color: #444; margin-top: 10px; }

/* ── Admin bar white ── */
#top-nav, #top-nav .navbar, .navbar-inverse, #admin-top-nav {
  background-color: var(--vw-white) !important;
  border-bottom: 1px solid var(--vw-rule) !important;
}
#top-nav a, #top-nav .navbar a, #admin-top-nav a {
  color: #333 !important;
}
#top-nav .navbar-nav > li > a:hover, #admin-top-nav a:hover {
  color: var(--vw-red) !important;
}

/* ── Hero refinements ── */
#vw-hero { padding: 70px 0 60px; }
#vw-hero h1 { font-size: 36px; }
#vw-hero p { max-width: 820px; }

/* ── Admin bar styling ── */
#t-admin-megamenu { background-color: var(--vw-black) !important; border-color: var(--vw-black) !important; }
#t-admin-megamenu .navbar-brand { padding: 8px 15px; }

/* ── Admin bar force override ── */
.navbar-inverse.navbar-fixed-top,
.navbar-inverse.navbar-fixed-top .navbar-collapse,
#t-admin-megamenu,
.t-megamenu {
  background-color: var(--vw-black) !important;
  background-image: none !important;
  border: none !important;
}

/* ── Inter typeface ── */
body, p, a, li, td, th, label, input, select, textarea, button {
  font-family: 'Inter', sans-serif !important;
}
.navbar-nav > li > a, .pillar-col h3, .pillar-col p,
.event-card h4, .event-card p, .sec-tag,
#vw-hero .hero-tag, #vw-hero p,
#vw-welcome p, #vw-footer .footer-links a,
#vw-footer .footer-copy {
  font-family: 'Inter', sans-serif !important;
}
/* Keep Georgia for hero h1 and section titles for elegance */
#vw-hero h1, #vw-events h2, #vw-welcome h2, #vw-portal-hero h1, #vw-portal-academy h2 {
  font-family: Georgia, serif;
}

/* ──────────────────────────────────────────────────────────────
   MEMBER PORTAL — /dashboard/ override
   Welcome banner + tile grid + Academy section
   ────────────────────────────────────────────────────────────── */

/* Welcome banner — smaller cousin of the homepage hero */
#vw-portal-hero { background: var(--vw-black); padding: 50px 0 40px; text-align: center; }
#vw-portal-hero .hero-tag { font-size: 11px; color: var(--vw-red); letter-spacing: 4px; margin-bottom: 12px; font-family: Arial, sans-serif; }
#vw-portal-hero h1 { font-size: 32px; color: var(--vw-white); font-weight: normal; line-height: 1.3; margin-bottom: 14px; }
#vw-portal-hero .portal-status { font-family: 'Inter', Arial, sans-serif; font-size: 14px; color: #bbb; letter-spacing: 0.3px; margin: 0; }
#vw-portal-hero .portal-status-type { color: var(--vw-white); font-weight: 600; }
#vw-portal-hero .portal-status-sep { margin: 0 10px; color: #555; }
#vw-portal-hero .portal-status-cta { color: var(--vw-red) !important; text-decoration: none; font-weight: 600; }
#vw-portal-hero .portal-status-cta:hover { color: var(--vw-white) !important; }

/* Tile grids */
#vw-portal-tiles { padding: 50px 0 30px; background: var(--vw-white); }
#vw-portal-tiles .row { display: flex; flex-wrap: wrap; }
#vw-portal-tiles .col-md-4 { display: flex; padding: 0 12px; margin-bottom: 24px; }

#vw-portal-academy { padding: 30px 0 60px; background: var(--vw-paper); }
#vw-portal-academy .sec-tag { font-size: 11px; color: var(--vw-red); letter-spacing: 3px; font-family: Arial, sans-serif; margin-bottom: 6px; }
#vw-portal-academy h2 { font-size: 28px; color: var(--vw-black); margin-bottom: 24px; font-weight: normal; }
#vw-portal-academy .row { display: flex; flex-wrap: wrap; }
#vw-portal-academy .col-md-6 { display: flex; padding: 0 12px; margin-bottom: 24px; }

/* Media row — same layout, white background to differentiate from Academy */
#vw-portal-media { padding: 30px 0 60px; background: var(--vw-white); border-top: 1px solid var(--vw-rule); }
#vw-portal-media .sec-tag { font-size: 11px; color: var(--vw-red); letter-spacing: 3px; font-family: Arial, sans-serif; margin-bottom: 6px; }
#vw-portal-media h2 { font-size: 28px; color: var(--vw-black); margin-bottom: 24px; font-weight: normal; font-family: Georgia, serif; }
#vw-portal-media .row { display: flex; flex-wrap: wrap; }
#vw-portal-media .col-md-6 { display: flex; padding: 0 12px; margin-bottom: 24px; }

/* Tile card — echoes pillar cards but self-contained with red top border */
.portal-tile {
  background: var(--vw-white);
  border-top: 4px solid var(--vw-red);
  border-right: 1px solid var(--vw-rule);
  border-bottom: 1px solid var(--vw-rule);
  border-left: 1px solid var(--vw-rule);
  padding: 24px 22px 18px;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 200px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* Clickable tile wrapper: anchor that wraps the whole tile.
   Cursor pointer, no underline, no colour shift on tile text. */
a.portal-tile-link-wrap { text-decoration: none; color: inherit; display: block; width: 100%; }
a.portal-tile-link-wrap:hover { text-decoration: none; }

/* Hover-pop: subtle lift + shadow + red border deepens */
.portal-tile-clickable { cursor: pointer; }
a.portal-tile-link-wrap:hover .portal-tile,
a.portal-tile-link-wrap:focus .portal-tile {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
  border-top-color: var(--vw-red-hover);
}

/* Programs section heading: render as a normal heading but make the
   anchor inside it look like the heading itself (no link styling chrome). */
.portal-section-link { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: border-color 150ms ease; }
.portal-section-link:hover { color: var(--vw-red); border-bottom-color: var(--vw-red); }
.portal-tile-tall { min-height: 240px; }
.portal-tile-tag { font-size: 10px; color: var(--vw-red); letter-spacing: 3px; font-family: Arial, sans-serif; margin-bottom: 10px; font-weight: 600; }
.portal-tile h3 { font-family: 'Inter', sans-serif !important; font-size: 18px; font-weight: 600; color: var(--vw-black); margin: 0 0 12px; letter-spacing: 0.2px; }
.portal-tile-body { flex: 1; }
.portal-tile-body p { font-family: 'Inter', sans-serif !important; font-size: 13px; color: #555; line-height: 1.7; margin: 0 0 8px; }
.portal-tile-body .portal-key { font-weight: 600; color: var(--vw-black); font-size: 14px; }
.portal-tile-body .portal-meta { font-size: 12px; color: var(--vw-muted); }
.portal-tile-link { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--vw-red); letter-spacing: 1px; text-decoration: none; border-bottom: 1px solid var(--vw-red); display: inline-block; align-self: flex-start; margin-top: 10px; padding-bottom: 2px; }
.portal-tile-link:hover { color: var(--vw-red-hover); border-bottom-color: var(--vw-red-hover); }

/* Event rows inside the Next Up tile */
.portal-event { padding: 8px 0; border-bottom: 1px solid var(--vw-rule); }
.portal-event:last-child { border-bottom: none; }
.portal-event-date { font-size: 10px; color: var(--vw-red); font-family: Arial, sans-serif; letter-spacing: 2px; margin-bottom: 3px; }
.portal-event-title { font-family: 'Inter', sans-serif !important; font-size: 13px; color: var(--vw-black) !important; text-decoration: none; display: block; line-height: 1.4; }
.portal-event-title:hover { color: var(--vw-red) !important; }

/* Empty state + coming-soon pill */
.portal-empty { color: var(--vw-muted) !important; font-style: italic; }
.portal-coming { display: inline-block; background: var(--vw-black); color: var(--vw-white); font-family: Arial, sans-serif; font-size: 10px; letter-spacing: 2px; padding: 3px 10px; margin-bottom: 10px; }

/* ──────────────────────────────────────────────────────────────
   LOGIN PAGE — /accounts/login/ override
   Dark hero banner + centered card with brand-red CTA
   ────────────────────────────────────────────────────────────── */
#vw-login .login-banner { background: var(--vw-black); padding: 50px 0 40px; text-align: center; }
#vw-login .login-banner .hero-tag { font-size: 11px; color: var(--vw-red); letter-spacing: 4px; margin-bottom: 12px; font-family: Arial, sans-serif; }
#vw-login .login-banner h1 { font-size: 36px; color: var(--vw-white); font-weight: normal; line-height: 1.3; margin-bottom: 12px; font-family: Georgia, serif; }
#vw-login .login-banner p { font-family: 'Inter', sans-serif; font-size: 15px; color: #bbb; max-width: 480px; margin: 0 auto; }

#vw-login .login-card-wrap { background: var(--vw-paper); padding: 50px 0 80px; min-height: 360px; }
#vw-login .login-card {
  max-width: 440px;
  margin: 0 auto;
  background: var(--vw-white);
  border-top: 4px solid var(--vw-red);
  border-right: 1px solid var(--vw-rule);
  border-bottom: 1px solid var(--vw-rule);
  border-left: 1px solid var(--vw-rule);
  padding: 36px 36px 28px;
}

#vw-login .login-form { margin: 0; }
#vw-login .login-field { margin-bottom: 18px; }
#vw-login .login-field label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--vw-text);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
#vw-login .login-field input,
#vw-login .login-field input[type="text"],
#vw-login .login-field input[type="password"],
#vw-login .login-field input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--vw-text);
  background: var(--vw-white);
  border: 1px solid var(--vw-rule);
  border-radius: 0;
  box-sizing: border-box;
  transition: border-color 150ms ease;
}
#vw-login .login-field input:focus { outline: none; border-color: var(--vw-red); }
#vw-login .login-field.has-error input { border-color: var(--vw-red); }
#vw-login .login-field-error { display: block; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--vw-red); margin-top: 4px; }

#vw-login .login-error {
  border-left: 3px solid var(--vw-red);
  background: #fdf3f3;
  padding: 10px 14px;
  margin-bottom: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #8a1a1a;
}
#vw-login .login-error p { margin: 0; }

#vw-login .login-submit {
  width: 100%;
  padding: 14px 30px;
  font-size: 13px;
  letter-spacing: 2px;
  margin-top: 6px;
  margin-right: 0;
  border: none;
  cursor: pointer;
}

#vw-login .login-extras { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--vw-rule); text-align: center; }
#vw-login .login-extras p { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--vw-muted); margin: 8px 0; }
#vw-login .login-link-secondary { color: var(--vw-red) !important; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 150ms ease; }
#vw-login .login-link-secondary:hover { border-bottom-color: var(--vw-red); }
#vw-login .login-link-join { color: var(--vw-red) !important; font-weight: 600; text-decoration: none; }
#vw-login .login-link-join:hover { color: var(--vw-red-hover) !important; }

#vw-login .login-already { font-family: 'Inter', sans-serif; font-size: 15px; color: var(--vw-text); margin: 0 0 14px; }
#vw-login .login-logout { display: inline-block; color: var(--vw-text) !important; border-color: var(--vw-text); }

/* ──────────────────────────────────────────────────────────────
   JOIN / MEMBERSHIP APPLICATION — /memberships/applications/<slug>/
   Wraps Tendenci's existing form in a Recode banner + card layout
   ────────────────────────────────────────────────────────────── */
#vw-join .join-banner { background: var(--vw-black); padding: 50px 0 40px; text-align: center; }
#vw-join .join-banner .hero-tag { font-size: 11px; color: var(--vw-red); letter-spacing: 4px; margin-bottom: 12px; font-family: Arial, sans-serif; }
#vw-join .join-banner h1 { font-size: 36px; color: var(--vw-white); font-weight: normal; line-height: 1.3; margin-bottom: 12px; font-family: Georgia, serif; }
#vw-join .join-banner p { font-family: 'Inter', sans-serif; font-size: 15px; color: #bbb; max-width: 560px; margin: 0 auto; }

#vw-join .join-card-wrap { background: var(--vw-paper); padding: 50px 0 80px; }
#vw-join .join-card {
  max-width: 820px;
  margin: 0 auto;
  background: var(--vw-white);
  border-top: 4px solid var(--vw-red);
  border-right: 1px solid var(--vw-rule);
  border-bottom: 1px solid var(--vw-rule);
  border-left: 1px solid var(--vw-rule);
  padding: 40px 48px 32px;
}

/* Section header that Tendenci renders ("Section 1. User Information" etc.) */
#vw-join .join-card .page-header,
#vw-join .join-card h2,
#vw-join .join-card h3 { border: none; }
#vw-join .join-card .page-header h1 {
  font-family: Georgia, serif !important;
  font-size: 26px;
  color: var(--vw-black);
  font-weight: normal;
  margin: 0 0 8px;
}
#vw-join .join-card .page-header p { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--vw-muted); margin: 0 0 18px; }
#vw-join .join-card h3 {
  font-family: Georgia, serif !important;
  font-size: 20px;
  color: var(--vw-black);
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--vw-rule) !important;
}

/* Form fields (Bootstrap 3 form-horizontal lives inside) */
#vw-join .join-card .control-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px;
  font-weight: 600;
  color: var(--vw-text);
  letter-spacing: 0.5px;
}
#vw-join .join-card .form-control,
#vw-join .join-card input[type="text"],
#vw-join .join-card input[type="password"],
#vw-join .join-card input[type="email"],
#vw-join .join-card input[type="tel"],
#vw-join .join-card select,
#vw-join .join-card textarea {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--vw-text);
  border: 1px solid var(--vw-rule);
  border-radius: 0;
  box-shadow: none;
  padding: 8px 12px;
}
#vw-join .join-card .form-control:focus,
#vw-join .join-card input:focus,
#vw-join .join-card select:focus,
#vw-join .join-card textarea:focus {
  outline: none;
  border-color: var(--vw-red);
  box-shadow: none;
}

/* Radio-button list (membership type selection) — nicer spacing */
#vw-join .join-card .form-group ul,
#vw-join .join-card .form-group .radio { list-style: none; padding-left: 0; }
#vw-join .join-card label { font-family: 'Inter', sans-serif; }

/* Submit button — Recode brand red */
#vw-join .join-card button[type="submit"].btn-primary,
#vw-join .join-card .btn-primary {
  background: var(--vw-red) !important;
  border: none !important;
  color: var(--vw-white) !important;
  padding: 13px 32px !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#vw-join .join-card button[type="submit"].btn-primary:hover,
#vw-join .join-card .btn-primary:hover {
  background: var(--vw-red-hover) !important;
}

/* Error block (Tendenci's "There were some problems...") */
#vw-join .join-card .form-errors {
  border: none !important;
  border-left: 3px solid var(--vw-red) !important;
  background: #fdf3f3 !important;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #8a1a1a;
  width: auto !important;
  padding: 14px 18px !important;
}
#vw-join .join-card .form-errors a { color: #8a1a1a; text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────
   DESIGN GYM SERIES — landing grid + individual session pages
   Lives inside Tendenci's default page wrapper, so all selectors
   target inline content classes (.dg-*) rather than the page id.
   ────────────────────────────────────────────────────────────── */

/* Series landing hero — banner image full width */
.dg-hero { margin: 0 0 24px; }
.dg-hero img { width: 100%; height: auto; display: block; }
.dg-hero-series { max-width: 900px; margin: 0 auto 24px; }
.dg-hero-series img { max-height: none; object-fit: unset; width: 100%; height: auto; display: block; }

.lead { font-family: 'Inter', sans-serif; font-size: 16px; color: var(--vw-text); line-height: 1.7; margin: 0 0 28px; }

.dg-section-heading { font-family: Georgia, serif; font-size: 24px; color: var(--vw-black); margin: 32px 0 18px; font-weight: normal; }

/* Session card grid — 3-up on desktop, 2-up tablet, 1-up mobile */
.dg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 24px; }
@media (max-width: 991px) { .dg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .dg-grid { grid-template-columns: 1fr; } }

/* Upcoming row — single card looks lonely stretched 3-wide. Constrain it. */
.dg-grid-upcoming { grid-template-columns: minmax(0, 1fr); max-width: 380px; }
.dg-grid-upcoming .dg-card-thumb { height: 220px; }

.dg-card {
  display: flex; flex-direction: column;
  background: var(--vw-white);
  border-top: 4px solid var(--vw-red);
  border-right: 1px solid var(--vw-rule);
  border-bottom: 1px solid var(--vw-rule);
  border-left: 1px solid var(--vw-rule);
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 180ms ease, box-shadow 180ms ease;
  overflow: hidden;
}
.dg-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.10); }
.dg-card-thumb { width: 100%; height: 170px; object-fit: cover; display: block; }
.dg-card-thumb-placeholder {
  background: var(--vw-paper);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 10px;
  border-bottom: 1px solid var(--vw-rule);
}
.dg-card-thumb-placeholder span {
  font-family: Georgia, serif;
  font-size: 18px;
  color: var(--vw-muted);
}
.dg-card-body { padding: 18px 18px 16px; flex: 1; display: flex; flex-direction: column; }
.dg-card-tag { font-family: Arial, sans-serif; font-size: 10px; color: var(--vw-red); letter-spacing: 2.5px; font-weight: 600; margin-bottom: 8px; }
.dg-card-title { font-family: Georgia, serif; font-size: 20px; color: var(--vw-black); margin: 0 0 8px; font-weight: normal; line-height: 1.25; }
.dg-card-desc { font-family: 'Inter', sans-serif; font-size: 13px; color: #555; line-height: 1.6; margin: 0 0 12px; flex: 1; }
.dg-card-cta { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--vw-red); letter-spacing: 1px; border-bottom: 1px solid var(--vw-red); align-self: flex-start; padding-bottom: 1px; }

/* Individual session page elements */
.dg-meta { margin: 0 0 18px; }
.dg-meta-tag { font-family: Arial, sans-serif; font-size: 10px; color: var(--vw-red); letter-spacing: 3px; font-weight: 600; display: block; margin-bottom: 8px; }
.dg-meta-title { font-family: Georgia, serif; font-size: 32px; color: var(--vw-black); font-weight: normal; margin: 0; line-height: 1.2; }
.dg-description { font-family: 'Inter', sans-serif; font-size: 15px; color: var(--vw-text); line-height: 1.8; margin: 0 0 24px; }

.dg-video-wrap { margin: 0 0 24px; }
.dg-video-wrap iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.dg-video-placeholder {
  background: var(--vw-paper);
  border: 1px dashed var(--vw-rule);
  padding: 22px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--vw-muted);
}
.dg-video-placeholder p { margin: 0 0 8px; }
.dg-video-placeholder pre { background: var(--vw-white); padding: 10px 12px; border: 1px solid var(--vw-rule); margin: 8px 0 0; overflow-x: auto; font-size: 12px; }
.dg-video-placeholder code { font-family: 'Consolas', monospace; }

.dg-upcoming {
  background: #fdf3f3;
  border-left: 3px solid var(--vw-red);
  padding: 16px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #6b2020;
  margin: 0 0 24px;
}
.dg-upcoming p { margin: 0; }

.dg-miro { margin: 32px 0 24px; padding-top: 24px; border-top: 1px solid var(--vw-rule); }
.dg-miro h3 { font-family: Georgia, serif; font-size: 20px; color: var(--vw-black); font-weight: normal; margin: 0 0 12px; }
.dg-miro img { width: 100%; max-width: 600px; height: auto; display: block; border: 1px solid var(--vw-rule); }
.dg-miro-caption { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--vw-muted); font-style: italic; margin: 6px 0 0; }

.dg-back { font-family: 'Inter', sans-serif; font-size: 13px; margin-top: 24px; }
.dg-back a { color: var(--vw-red); text-decoration: none; border-bottom: 1px solid var(--vw-red); padding-bottom: 1px; }
.dg-back a:hover { color: var(--vw-red-hover); border-bottom-color: var(--vw-red-hover); }

/* ──────────────────────────────────────────────────────────────
   TENDENCI PAGES — pages/view.html override
   Wraps every Tendenci Page in a consistent Recode shell:
   light banner with page title, white content container, footer.
   ────────────────────────────────────────────────────────────── */
.vw-page-banner {
  background: var(--vw-paper);
  padding: 38px 0 30px;
  border-bottom: 1px solid var(--vw-rule);
}
.vw-page-banner h1 {
  font-family: Georgia, serif;
  font-size: 36px;
  color: var(--vw-black);
  font-weight: normal;
  margin: 0;
  line-height: 1.2;
}
.vw-page-private-tag {
  display: inline-block;
  margin-top: 10px;
  background: var(--vw-black);
  color: var(--vw-white);
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 3px 10px;
  text-transform: uppercase;
}

.vw-page-content { background: var(--vw-white); padding: 40px 0 80px; }
.vw-page-article {
  max-width: 980px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
  color: var(--vw-text);
  line-height: 1.7;
}
.vw-page-article h2 { font-family: Georgia, serif; font-size: 26px; color: var(--vw-black); font-weight: normal; margin: 28px 0 14px; }
.vw-page-article h3 { font-family: Georgia, serif; font-size: 21px; color: var(--vw-black); font-weight: normal; margin: 24px 0 10px; }
.vw-page-article p { font-size: 15px; margin: 0 0 16px; }
.vw-page-article a { color: var(--vw-red); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 150ms ease; }
.vw-page-article a:hover { border-bottom-color: var(--vw-red); }
.vw-page-article ul, .vw-page-article ol { margin: 0 0 16px 24px; }
.vw-page-article li { margin: 0 0 6px; }
.vw-page-article img { max-width: 100%; height: auto; }
.vw-page-article blockquote { border-left: 3px solid var(--vw-red); margin: 16px 0; padding: 4px 18px; color: #444; font-style: italic; }

/* ──────────────────────────────────────────────────────────────
   EVENTS — calendar, list, search, day/week/month views
   ────────────────────────────────────────────────────────────── */

/* Month-view page header — month name + prev/next arrows (consistent size) */
.vw-events-wrap .month-view .page-header { border: none; padding: 8px 0 24px; margin: 0 0 18px; border-bottom: 1px solid var(--vw-rule); }
.vw-events-wrap .month-view .page-header .list-inline { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 24px; }
.vw-events-wrap .month-view .page-header li { display: inline-block; }
.vw-events-wrap .month-view .page-header h1 {
  font-family: Georgia, serif !important;
  font-size: 30px;
  color: var(--vw-black);
  font-weight: normal;
  margin: 0;
  line-height: 1;
}
.vw-events-wrap .month-view .page-header h1 a {
  color: var(--vw-muted) !important;
  text-decoration: none !important;
  border: none !important;
  display: inline-block;
  padding: 0;
  transition: color 150ms ease;
}
.vw-events-wrap .month-view .page-header h1 a:hover { color: var(--vw-red) !important; }
.vw-events-wrap .month-view .page-header h1 a .fa,
.vw-events-wrap .month-view .page-header h1 a i {
  font-size: 28px;
  line-height: 30px;
  vertical-align: baseline;
  position: relative;
  top: 4px;
}
.vw-events-wrap .month-view .page-header .pull-left { float: none !important; order: -1; }
.vw-events-wrap .month-view .page-header .pull-right { float: none !important; order: 1; }

/* Filter form — replace Bootstrap navbar styling */
.vw-events-wrap .month-view .navbar {
  background: var(--vw-paper) !important;
  border: 1px solid var(--vw-rule);
  border-radius: 0;
  margin-bottom: 24px;
  padding: 14px 18px;
  min-height: auto;
}
.vw-events-wrap .month-view .navbar .form-group { margin-bottom: 0; }
.vw-events-wrap .month-view .navbar label {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px;
  font-weight: 600;
  color: var(--vw-text);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}
.vw-events-wrap .month-view .navbar input[type="text"],
.vw-events-wrap .month-view .navbar select {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  border: 1px solid var(--vw-rule);
  border-radius: 0;
  background: var(--vw-white);
  box-shadow: none;
  padding: 6px 10px;
  width: 100%;
}
.vw-events-wrap .month-view .navbar input:focus,
.vw-events-wrap .month-view .navbar select:focus { outline: none; border-color: var(--vw-red); box-shadow: none; }

/* Action buttons — Find Events + List View — brand red */
.vw-events-wrap .month-view .navbar .btn-primary,
.vw-events-wrap .month-view input.btn-primary,
.vw-events-wrap .month-view a.btn-primary {
  background: var(--vw-red) !important;
  border: none !important;
  color: var(--vw-white) !important;
  padding: 8px 18px !important;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none;
}
.vw-events-wrap .month-view .btn-primary:hover { background: var(--vw-red-hover) !important; }

/* Day-of-week labels */
.vw-events-wrap .month-view .month-labels { display: flex !important; gap: 0; margin-bottom: 0; width: 100% !important; }
.vw-events-wrap .month-view .weekday,
.vw-events-wrap .month-view .weekday-mobile {
  /* Force equal-width labels — Tendenci's events.css also sets explicit
     widths/floats here that we need to override. */
  flex: 1 1 0% !important;
  width: auto !important;
  float: none !important;
  box-sizing: border-box !important;
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--vw-muted);
  text-transform: uppercase;
  text-align: center;
  padding: 10px 4px;
  background: var(--vw-paper);
  border-bottom: 1px solid var(--vw-rule);
}
.vw-events-wrap .month-view .weekday-mobile { display: none; }
@media (max-width: 768px) {
  .vw-events-wrap .month-view .weekday { display: none; }
  .vw-events-wrap .month-view .weekday-mobile { display: block; }
}

/* Override Bootstrap's centered .container ONLY for the events page so the
   calendar can fill the full viewport width instead of being constrained to
   ~1170px and centered. Sidebar bleed isn't an issue here (we're already
   bypassing site_base.html in the events override). */
body.t-events-view .vw-events-wrap .container,
.vw-events-wrap .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.vw-events-wrap .row { margin-left: 0 !important; margin-right: 0 !important; }
.vw-events-wrap .col-md-12,
.vw-events-wrap .col-xs-12 { padding-left: 0 !important; padding-right: 0 !important; }

/* Calendar grid — full container width, left-aligned. Force block + width:100%
   + no floats throughout the hierarchy so Tendenci's events.css can't push
   things right. */
.vw-events-wrap .month-view,
.vw-events-wrap .month-view .calendar-wrap,
.vw-events-wrap .month-view .month-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  display: block !important;
  text-align: left !important;
}
.vw-events-wrap .month-view .month-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 0;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  border-left: 1px solid var(--vw-rule);
  border-top: 1px solid var(--vw-rule);
}
.vw-events-wrap .month-view .month-grid > div:not(.day) { display: none !important; }
.vw-events-wrap .month-view .month-labels {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
}
.vw-events-wrap .month-view .month-labels > div[style*="clear"] { display: none !important; }

.vw-events-wrap .month-view .day {
  /* Force the cell to fill its grid track — Tendenci's events.css declares
     an explicit width on .day that would otherwise leave whitespace to the
     right of each cell. */
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
  min-height: 130px;
  border-right: 1px solid var(--vw-rule);
  border-bottom: 1px solid var(--vw-rule);
  padding: 12px 14px;
  background: var(--vw-white);
  position: relative;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
  overflow: hidden;
}
.vw-events-wrap .month-view .day:hover {
  background: var(--vw-paper);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  z-index: 2;
}
.vw-events-wrap .month-view .day.today {
  background: #fdf3f3;
  outline: 2px solid var(--vw-red);
  outline-offset: -2px;
}
.vw-events-wrap .month-view .day.today:hover { background: #fce5e5; }

/* Date number — bigger, top-left, clearly visible.
   !important needed because Tendenci's events.css loads after our custom.css
   and otherwise wins on text-align. */
.vw-events-wrap .month-view .date-numeral { text-align: left !important; margin: 0 0 8px; padding: 0 !important; }
.vw-events-wrap .month-view .date-numeral a {
  font-family: Georgia, serif !important;
  font-size: 22px !important;
  font-weight: normal;
  color: var(--vw-black) !important;
  text-decoration: none !important;
  border: none !important;
  display: inline-block;
  line-height: 1;
  padding: 0;
}
.vw-events-wrap .month-view .day.today .date-numeral a {
  color: var(--vw-red) !important;
  font-weight: 700;
}

/* Event chip inside a day cell */
.vw-events-wrap .month-view .event-item {
  background: var(--vw-red) !important;
  color: var(--vw-white) !important;
  margin: 6px 0 0;
  padding: 4px 6px;
  border-radius: 0;
  position: relative;
  font-size: 11px;
  line-height: 1.4;
}
.vw-events-wrap .month-view .event-item a,
.vw-events-wrap .month-view .event-item .event-title {
  color: var(--vw-white) !important;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
}
.vw-events-wrap .month-view .event-item .time-stamp { font-weight: 400; font-size: 10px; opacity: 0.9; }
.vw-events-wrap .month-view .more-events { margin-top: 4px; font-size: 11px; }
.vw-events-wrap .month-view .more-events a { color: var(--vw-red); text-decoration: none; border-bottom: 1px solid var(--vw-red); }

/* Export Calendar link at the bottom */
.vw-events-wrap .month-view .pull-right { padding-top: 18px; }
.vw-events-wrap .month-view .pull-right a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--vw-red);
  text-decoration: none;
  border-bottom: 1px solid var(--vw-red);
}
.vw-events-wrap .month-view .glyphicon-calendar { color: var(--vw-red); margin-right: 4px; }

/* ──────────────────────────────────────────────────────────────
   MEMBER PROFILE — /profiles/<username>/
   Wraps Tendenci's existing profile content (gravatar + info tables
   + memberships + contributions) in Recode styling.
   ────────────────────────────────────────────────────────────── */
.vw-profile-wrap #profile-index-page { max-width: 1100px; margin: 0 auto; }
.vw-profile-wrap #profile-view { display: block; }

/* Page header — gravatar + user name + edit buttons */
.vw-profile-wrap .page-header {
  border: none !important;
  padding: 0 0 28px;
  margin: 0 0 32px;
  border-bottom: 1px solid var(--vw-rule) !important;
}
.vw-profile-wrap .page-header h1 {
  font-family: Georgia, serif !important;
  font-size: 32px;
  color: var(--vw-black);
  font-weight: normal;
  margin: 0 0 6px;
  line-height: 1.2;
}
.vw-profile-wrap .page-header h3 { font-family: 'Inter', sans-serif !important; font-size: 15px; color: var(--vw-muted); font-weight: 400; margin: 0 0 12px; }
.vw-profile-wrap .page-header h5 { font-family: 'Inter', sans-serif !important; font-size: 14px; color: var(--vw-text); margin: 4px 0; }
.vw-profile-wrap .page-header img { border-radius: 0; border: 1px solid var(--vw-rule); }
.vw-profile-wrap .member-icon { font-family: Arial, sans-serif; font-size: 11px; letter-spacing: 2px; color: var(--vw-red); text-transform: uppercase; }

/* Buttons in profile header: Edit Profile + Update Picture */
.vw-profile-wrap .btn-default {
  background: transparent !important;
  border: 1px solid var(--vw-text) !important;
  color: var(--vw-text) !important;
  border-radius: 0 !important;
  padding: 10px 18px !important;
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: none !important;
  margin-left: 6px;
}
.vw-profile-wrap .btn-default:hover { background: var(--vw-text) !important; color: var(--vw-white) !important; }
.vw-profile-wrap .btn-primary {
  background: var(--vw-red) !important;
  border: none !important;
  color: var(--vw-white) !important;
  border-radius: 0 !important;
  padding: 10px 18px !important;
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: none !important;
}
.vw-profile-wrap .btn-primary:hover { background: var(--vw-red-hover) !important; }

/* Contact Information panel (Tendenci wraps it in .well) — replace Bootstrap
   well with a Recode card */
.vw-profile-wrap .well {
  background: var(--vw-paper) !important;
  border: none !important;
  border-top: 4px solid var(--vw-red) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 24px !important;
}

/* Section headings on the profile (h3 above each panel: Contact, Memberships, etc.) */
.vw-profile-wrap h3 {
  font-family: Georgia, serif !important;
  font-size: 20px !important;
  color: var(--vw-black) !important;
  font-weight: normal !important;
  margin: 24px 0 12px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--vw-rule);
}
.vw-profile-wrap .well h3:first-child { margin-top: 0 !important; padding-top: 0; }
.vw-profile-wrap h3 a.glyph { font-size: 14px; color: var(--vw-red); font-family: 'Inter', sans-serif; margin-left: 8px; }

/* Tendenci's data tables (Contact Info, Memberships, Registrations, etc.) */
.vw-profile-wrap .table { margin-bottom: 0; }
.vw-profile-wrap .table > tbody > tr > td,
.vw-profile-wrap .table > tbody > tr > th {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--vw-text);
  padding: 8px 10px;
  border-top: 1px solid var(--vw-rule);
  line-height: 1.5;
}
.vw-profile-wrap .table > tbody > tr:first-child > td { border-top: none; }
.vw-profile-wrap .table > tbody > tr > td:first-child {
  color: var(--vw-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 110px;
  padding-right: 12px;
}

/* Make profile content links brand-red with hover underline */
.vw-profile-wrap a { color: var(--vw-red); text-decoration: none; }
.vw-profile-wrap a:hover { text-decoration: underline; text-underline-offset: 2px; }
.vw-profile-wrap .pager .next a { color: var(--vw-red); }

/* Contributions list — clean line styling */
.vw-profile-wrap .list-unstyled li { padding: 8px 0; border-bottom: 1px solid var(--vw-rule); font-family: 'Inter', sans-serif; font-size: 13px; }
.vw-profile-wrap .create-dt { color: var(--vw-muted); font-size: 11px; margin-left: 8px; }

/* Membership rows — make the "Active" status pop */
.vw-profile-wrap .inner-mitm {
  display: inline-block;
  margin-left: 6px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--vw-red);
  text-transform: uppercase;
}

/* Alert bars (membership reminders) — Recode treatment */
.vw-profile-wrap .alert {
  border: none !important;
  border-left: 3px solid var(--vw-red) !important;
  border-radius: 0 !important;
  background: #fdf3f3 !important;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #6b2020;
  padding: 14px 18px !important;
}
.vw-profile-wrap .alert .btn { background: var(--vw-red) !important; color: var(--vw-white) !important; border: none !important; border-radius: 0 !important; padding: 6px 14px !important; font-size: 11px; letter-spacing: 1px; }

/* "Not in any groups." and similar empty-state copy */
.vw-profile-wrap p { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--vw-text); }

/* ── "Member Platform" tile vibe — restyle each profile section as a card ── */
/* Sections in the right column (Memberships, Registrations, Contributions, etc.)
   are siblings under .col-md-8 > div. We can't add wrappers without touching the
   template, so we visually "card-ify" each h3 + the elements that follow it via
   :has() / siblings. */
.vw-profile-wrap .col-md-8 > div { display: flex; flex-direction: column; gap: 0; }

/* Each h3 in the right column becomes a card header (matches dashboard tile style) */
.vw-profile-wrap .col-md-8 h3 {
  background: var(--vw-paper);
  border: 1px solid var(--vw-rule) !important;
  border-top: 4px solid var(--vw-red) !important;
  border-bottom: 1px solid var(--vw-rule) !important;
  padding: 16px 20px !important;
  margin: 20px 0 0 !important;
  font-size: 18px !important;
}
/* Content that follows the h3 — the table or content area — gets the bottom card framing */
.vw-profile-wrap .col-md-8 h3 + .table-responsive,
.vw-profile-wrap .col-md-8 h3 + ul,
.vw-profile-wrap .col-md-8 h3 + .alert,
.vw-profile-wrap .col-md-8 h3 + p {
  background: var(--vw-white);
  border: 1px solid var(--vw-rule);
  border-top: none;
  padding: 14px 20px;
  margin-bottom: 0 !important;
}
.vw-profile-wrap .col-md-8 h3 + .table-responsive .table { margin: 0; }

/* Hide the standalone .invoice-btn tile — moved into the Finances h3 inline. */
.vw-profile-wrap .col-md-8 .invoice-btn { display: none !important; }

/* My Invoices CTA inline with the Finances heading */
.vw-finances-myinvoices {
  float: right;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--vw-red) !important;
  text-decoration: none !important;
  background: transparent;
  border: 1px solid var(--vw-red);
  padding: 6px 14px;
  margin-top: -2px;
  transition: background 150ms ease, color 150ms ease;
}
.vw-finances-myinvoices:hover {
  background: var(--vw-red) !important;
  color: var(--vw-white) !important;
  text-decoration: none !important;
}

/* "Browse available memberships →" CTA next to "Not a member." */
.vw-browse-memberships {
  display: inline-block;
  margin-left: 10px;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px;
  color: var(--vw-red) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--vw-red);
  padding-bottom: 1px;
}
.vw-browse-memberships:hover { color: var(--vw-red-hover) !important; border-bottom-color: var(--vw-red-hover); }

/* Hide the residual Tendenci "Powered by ..." credits that get included
   below our footer on every page. (credits.html is auto-included by base.html;
   we just suppress its visible output sitewide.) */
body.t-profiles-view ~ * .credits,
body.t-profiles-view .credits,
body.t-pages-view .credits,
body.t-events-view .credits,
body.t-events .credits,
body#login .credits,
body.t-credits,
.t-credits { display: none !important; }
/* Belt-and-suspenders: hide any element after our #vw-footer */
#vw-footer ~ * { display: none !important; }

/* Tendenci's "Private | Edit Options ▲" perms strip — admin chrome only.
   Render it more subtly so it doesn't break the brand visual. */
.vw-profile-wrap #profile-view + div,
.vw-profile-wrap .profile-meta,
body.t-profiles-view .options-row {
  background: transparent !important;
  border-top: 1px dashed var(--vw-rule) !important;
  border-bottom: none !important;
  padding: 10px 0 !important;
  margin-top: 20px !important;
  color: var(--vw-muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
}
body.t-profiles-view .options-row a,
.vw-profile-wrap .profile-meta a { color: var(--vw-muted) !important; text-decoration: none !important; }
body.t-profiles-view .options-row a:hover { color: var(--vw-red) !important; }

/* ── Finances section: invoices + payment history ────────────── */
.vw-profile-wrap h4 {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px;
  font-weight: 600;
  color: var(--vw-text);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 18px 0 8px;
}
.vw-finances-invoices,
.vw-finances-payments {
  width: 100%;
  font-size: 13px;
}
.vw-finances-invoices thead th,
.vw-finances-payments thead th {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vw-muted);
  border-bottom: 1px solid var(--vw-rule) !important;
  padding: 8px 10px !important;
}
.vw-finances-invoices tbody td,
.vw-finances-payments tbody td {
  border-top: 1px solid var(--vw-rule) !important;
  padding: 10px !important;
  color: var(--vw-text);
}
.vw-finances-invoices .text-right,
.vw-finances-payments .text-right { text-align: right; }

/* Status badges */
.vw-fin-status {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  font-weight: 600;
}
.vw-fin-paid { background: #e6f4ea; color: #1e6b3a; }
.vw-fin-due  { background: #fdf3f3; color: #8a1a1a; border-left: 2px solid var(--vw-red); padding-left: 8px; }
.vw-fin-void { background: var(--vw-paper); color: var(--vw-muted); text-decoration: line-through; }

.vw-fin-viewall { font-family: 'Inter', sans-serif; font-size: 12px; margin: 10px 0 0 !important; padding: 0 !important; background: transparent !important; border: none !important; }
.vw-fin-viewall a { color: var(--vw-red) !important; border-bottom: 1px solid var(--vw-red); padding-bottom: 1px; }
/* =========================================================================
   MODEL OF THE MONTH — CSS additions
   Append to custom.css (after the existing .dg-* block).
   The Design Gym .dg-* classes are reused; these are the extra pieces the
   MOTM pages introduce.  All additive — nothing here overrides Design Gym.
   ========================================================================= */

/* model graphics sit on paper, shown whole (not cropped) */
.dg-card-thumb { object-fit: contain; background: var(--vw-paper); padding: 10px; }

/* subpage meta + guiding question */
.dg-meta-date  { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--vw-muted); margin: 6px 0 0; }
.dg-question   { font-family: Georgia, serif; font-style: italic; font-size: 19px; color: #333;
                 line-height: 1.6; border-left: 3px solid var(--vw-red); padding: 4px 0 4px 18px; margin: 18px 0 24px; }
.dg-subhead    { font-family: Georgia, serif; font-size: 21px; color: var(--vw-black); font-weight: normal; margin: 28px 0 10px; }

/* "recording coming soon" notice (upcoming sessions) */
.dg-pending        { background: var(--vw-paper); border: 1px dashed var(--vw-rule); padding: 18px 20px;
                     font-family: 'Inter', sans-serif; font-size: 14px; color: #666; margin: 8px 0 24px; }
.dg-pending strong { color: var(--vw-text); }

/* additional model diagrams within a subpage */
.dg-modelimg            { margin: 24px 0; }
.dg-modelimg img        { width: 100%; max-width: 560px; height: auto; display: block; border: 1px solid var(--vw-rule); }

/* downloads / resource rows */
.dg-resources       { border-top: 1px solid var(--vw-rule); margin-top: 28px; padding-top: 20px; }
.dg-resources h3    { font-family: Georgia, serif; font-size: 18px; font-weight: normal; margin: 0 0 14px; }
.dg-res             { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
                      border: 1px solid var(--vw-rule); margin-bottom: 10px; text-decoration: none;
                      color: var(--vw-text); transition: border-color .15s; }
.dg-res:hover       { border-color: var(--vw-red); }
.dg-res .ico        { width: 34px; height: 34px; flex: none; border-radius: 3px; display: flex;
                      align-items: center; justify-content: center; font-family: Arial, sans-serif;
                      font-size: 10px; font-weight: 700; color: #fff; letter-spacing: .5px; }
.dg-res .ico-pdf    { background: var(--vw-red); }
.dg-res .ico-video  { background: #1a1a1a; }
.dg-res .ico-doc    { background: #2b6cb0; }
.dg-res .rlabel     { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; }
.dg-res .rsub       { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--vw-muted); }
.dg-res .rarrow     { margin-left: auto; color: var(--vw-red); font-family: 'Inter', sans-serif; font-size: 18px; }

/* ── Admin top bar: white labels on the black bar + AVW white logo (2026-06-29) ── */
#t-admin-megamenu .navbar-nav > li > a,
#t-admin-megamenu .nav-label,
#t-admin-megamenu .navbar-nav > li > a .caret { color:#ffffff !important; }
#t-admin-megamenu .navbar-nav > li > a:hover,
#t-admin-megamenu .navbar-nav > li > a:focus,
#t-admin-megamenu .navbar-nav > li.open > a,
#t-admin-megamenu .navbar-nav > li.open > a .nav-label { color:var(--vw-red) !important; background-color:transparent !important; }
#t-admin-megamenu .nav-logo { content:url(/themes/juniper/media/img/avw-logo-white.png); height:26px; width:auto; }

/* fix: keep dropdown submenu labels dark on their white panel (2026-06-29) */
#t-admin-megamenu .dropdown-menu .nav-label,
#t-admin-megamenu .dropdown-menu a,
#t-admin-megamenu .dropdown-menu li > a,
#t-admin-megamenu .yamm-content .nav-label,
#t-admin-megamenu .yamm-content a { color:#222222 !important; }
#t-admin-megamenu .dropdown-menu a:hover,
#t-admin-megamenu .yamm-content a:hover { color:var(--vw-red) !important; }

/* ── LOG IN nav button — secondary (black) CTA right of Join; routes to member portal ── */
.nav-login > a { background: var(--vw-black) !important; color: var(--vw-white) !important; border-radius: 2px; margin-left: 6px; }
.nav-login > a:hover { background: #333333 !important; color: var(--vw-white) !important; }
/* hide Log In for signed-in members (already in) */
.vw-nav-auth li:has(> a[href="/dashboard/"]) { display: none; }

/* Log In nav button — href-based (matches Join), black secondary CTA */
#site-header nav a[href="/dashboard/"] { background: var(--vw-black) !important; color: var(--vw-white) !important; border-radius: 2px; margin-left: 6px; padding: 8px 14px; }
#site-header nav a[href="/dashboard/"]:hover { background: #333333 !important; color: var(--vw-white) !important; }

/* Home page — Gift a Membership CTA */
#vw-gift-cta{ background:#F6F6F4; padding:34px 0; text-align:center; }
#vw-gift-cta .gift-cta-line{ font-family:Georgia,serif; font-size:20px; color:#1a1a1a; display:block; margin-bottom:16px; }
#vw-gift-cta .gift-cta-btn{ display:inline-block; background:var(--vw-red); color:#fff !important; text-decoration:none; padding:12px 30px; font-family:Arial,sans-serif; font-size:13px; letter-spacing:2px; text-transform:uppercase; font-weight:600; border-radius:2px; }
#vw-gift-cta .gift-cta-btn:hover{ background:var(--vw-red-hover); }

/* === TAVWS-FOOTER-COLFIX-20260725 =========================
   default.html wraps the footer include in
   <footer class="col-xs-12 col-sm-12 col-md-12">. Those Bootstrap column
   classes add 15px side padding and a float, which would inset the dark
   footer band and break the full-bleed background. Neutralise them —
   the footer's own .container handles gutters. */
body > footer[class*="col-"],
footer.col-xs-12 {
  padding-left: 0;
  padding-right: 0;
  float: none;
  width: 100%;
}
/* === end TAVWS-FOOTER-COLFIX-20260725 ===================== */

/* === TAVWS-HERO-MOBILE-FIX-20260725 =====================
   Hero headline must wrap + scale on phones (pairs with removing
   white-space:nowrap above; that line was pushing the page sideways). */
@media (max-width: 720px) {
  #vw-hero h1 { font-size: 26px; line-height: 1.25; }
  #vw-hero { padding: 48px 0 40px; }
}
@media (max-width: 400px) {
  #vw-hero h1 { font-size: 22px; }
}
/* === end TAVWS-HERO-MOBILE-FIX-20260725 ================= */

/* === TAVWS-PILLARS-MOBILE-FIX-20260725 ===================
   #vw-pillars .row is display:flex, but the columns are col-md-4 which
   only get a width at >=992px. Below that they shrink-to-fit and collapse
   into skinny overlapping strips. Stack them full-width below md. */
@media (max-width: 991px) {
  #vw-pillars .row { display: block; }
  #vw-pillars .pillar-col {
    display: block;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--vw-rule);
  }
  #vw-pillars .pillar-col:last-child { border-bottom: none; }
  #vw-pillars .pillar-flip-card { min-height: 320px; }
}
/* === end TAVWS-PILLARS-MOBILE-FIX-20260725 =============== */

/* === TAVWS-ADMINBAR-MOBILE-20260725 =====================
   Hide Tendenci logged-in top bar on phones (navy old-logo overlap). */
@media (max-width: 900px){
  #vw-adminbar{ display:none !important; }
  body{ margin-top:0 !important; }
}
/* === end TAVWS-ADMINBAR-MOBILE-20260725 ================= */

/* === TAVWS-PORTAL-TILES-MOBILE-20260725 =================
   Portal tiles stack full-width on phones (col-md-4/6 don't size <992px). */
@media (max-width: 991px){
  #vw-portal-tiles .row { display: block; }
  #vw-portal-tiles .col-md-4,
  #vw-portal-tiles .col-md-6 { display:block; width:100%; padding:0; margin-bottom:20px; }
  #vw-portal-tiles .portal-tile { width:100%; }
}
/* === end TAVWS-PORTAL-TILES-MOBILE-20260725 ============= */

/* === TAVWS-TEAM-MOBILE-20260725 =========================
   About > Board & Team: show member cards 2-up on phones (fixed 178px
   only fits one per row). !important beats the page inline <style>. */
@media (max-width: 640px){
  #vw-team .row{ gap:14px !important; }
  #vw-team .member{ width:44% !important; }
  #vw-team .member img{ width:100% !important; height:auto !important; aspect-ratio:1/1; object-fit:cover; }
}
/* === end TAVWS-TEAM-MOBILE-20260725 ===================== */
/* ============================================================
   APPEND TO THE END OF themes/juniper/media/css/custom.css
   TAVWs — 18 Aug 2026 · page banner aligned with page content
   MARKER: TAVWS-BANNER-ALIGN-20260818
   ============================================================

   PROBLEM
   pages_view.html renders the title band and the article in two
   separate <section>s, both using Bootstrap's .container:

     <section class="vw-page-banner"><div class="container"><h1>…
     <section class="vw-page-content"><div class="container"><article>…

   The banner <h1> therefore spans the full container, while page
   content constrains itself (e.g. #vw-mc is max-width:860px;
   margin:0 auto). The two headings end up on different left edges.

   FIX
   Constrain the banner's inner width to match the content column and
   drop the grey band, so the page title reads as the natural first
   line of the page rather than a separate strip.

   Typography is left as-is — Georgia serif, 36px, black — because it
   already matches the in-content heading.
   ============================================================ */

:root{
  /* Default content-column width. Most TAVWs pages centre their
     content around this. Override per page below where it differs. */
  --vw-page-col: 860px;
}

/* ── Banner: no band, aligned to the content column ───────────── */
.vw-page-banner{
  background: transparent;          /* was var(--vw-paper) */
  border-bottom: none;              /* was 1px solid var(--vw-rule) */
  padding: 34px 0 0;                /* was 38px 0 30px */
}

.vw-page-banner .container{
  max-width: var(--vw-page-col);
}

.vw-page-banner h1{
  /* unchanged: Georgia, 36px, var(--vw-black), weight normal */
  margin: 0;
}

/* Pull the content up so the title and body read as one block
   instead of two stacked sections. */
.vw-page-content{
  padding-top: 14px;
}

/* ── Per-page overrides ────────────────────────────────────────
   pages_view.html sets body id="page-<pk>", so any page whose
   content column differs can be corrected on its own.
   Add lines here as you find them. Example:

   body#page-105 .vw-page-banner .container{ max-width: 860px; }
   ───────────────────────────────────────────────────────────── */


/* ── Keep the banner full width where content is full width ────
   Simple pages with no custom max-width (Organizations, Books &
   Publications, Resources) look better with the title on the same
   edge as their text, which is the container edge. List them here.

   body#page-NN .vw-page-banner .container{ max-width: none; }
   ───────────────────────────────────────────────────────────── */

/* === end TAVWS-BANNER-ALIGN-20260818 === */


/* ============================================================
   TAVWs — 18 Aug 2026 · events calendar month-nav chevron alignment
   MARKER: TAVWS-CHEVRON-ALIGN-20260818

   Tendenci's month-view header markup is asymmetric: the prev link
   has a stray text node before its icon, the next link does not. With
   inline-block anchors and baseline-aligned icons the two arrows get
   different baselines, so the existing top:4px nudge lands unevenly.
   Fix: centre each icon with flex so baseline metrics stop mattering.
   ============================================================ */

.vw-events-wrap .month-view .page-header h1 a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.vw-events-wrap .month-view .page-header h1 a .fa,
.vw-events-wrap .month-view .page-header h1 a i{
  vertical-align: middle;
  position: static;
  top: auto;
  line-height: 1;
}

.vw-events-wrap .month-view .page-header .list-inline > li{
  display: flex;
  align-items: center;
}
.vw-events-wrap .month-view .page-header .list-inline > li > h1{
  display: flex;
  align-items: center;
  line-height: 1;
}

/* === end TAVWS-CHEVRON-ALIGN-20260818 === */
/* TAVWs — 18 Aug 2026 · month-nav chevron alignment (part 2)
   MARKER: TAVWS-CHEVRON-ALIGN2-20260818
   Neutralises the older `.vw-events-wrap .month-view .pull-right
   { padding-top:18px }` rule for the month-nav, and pins all three
   list items to the same box so alignment stops depending on
   inline baseline metrics. Verified live before deploy. */

.vw-events-wrap .month-view .page-header ul.list-inline > li,
.vw-events-wrap .month-view .page-header ul.list-inline > li.pull-left,
.vw-events-wrap .month-view .page-header ul.list-inline > li.pull-right{
  padding-top: 0;
  padding-bottom: 0;
  height: 30px;
  vertical-align: middle;
}

.vw-events-wrap .month-view .page-header ul.list-inline > li > h1{
  height: 30px;
}

/* === end TAVWS-CHEVRON-ALIGN2-20260818 === */
/* TAVWs — 18 Aug 2026 · page banner alignment (correction)
   MARKER: TAVWS-BANNER-ALIGN2-20260818
   Supersedes the --vw-page-col:860px guess in TAVWS-BANNER-ALIGN-20260818.
   .vw-page-article is max-width:980px with auto margins on every
   pages_view.html page; constraining the h1 the same way (rather than
   the .container, which carries 15px padding the article lacks) puts
   both on an identical left edge. Verified live on /academy/mastery-council/
   and /join/ — both at left 141 / width 980.
   NOTE: keep --vw-page-col in step with .vw-page-article's max-width. */

:root{
  --vw-page-col: 980px;
}

.vw-page-banner .container{
  max-width: none;
}

.vw-page-banner h1{
  max-width: var(--vw-page-col);
  margin: 0 auto;
}

/* === end TAVWS-BANNER-ALIGN2-20260818 === */