/* ============================================================
   RGA v2 theme — shared chrome for the member dashboard
   ------------------------------------------------------------
   Tokens, type and shapes are lifted from the v2 marketing site
   (rga-site.connexus.team/v2/components/head.php) so the two
   properties read as one system. v2 runs on the Tailwind CDN;
   the dashboard carries a large amount of legacy CSS that
   Tailwind's preflight would flatten, so the same tokens are
   expressed here as custom properties instead.
   ============================================================ */

:root {
  /* v2 palette */
  --rga-bg:            #F3F5F8;
  --rga-surface:       #E3E8EE;
  --rga-line:          #D3D8DE;
  --rga-muted:         #6B727A;
  --rga-ink:           #141B24;
  --rga-overlay:       #080C0F;
  --rga-primary:       #0072D5;
  --rga-primary-glow:  #59AAF8;
  --rga-accent:        #2A9BCB;
  --rga-success:       #3DA763;
  --rga-warning:       #EAB532;
  --rga-danger:        #D8453C;

  /* v2 keeps a hard 0.25rem everywhere — no pills */
  --rga-radius:        0.25rem;
  --rga-radius-sm:     0.125rem;
  --rga-radius-lg:     0.375rem;

  --rga-shadow-lift:   0 18px 40px -22px rgba(20,27,36,0.18);
  --rga-shadow-lift-lg:0 28px 60px -28px rgba(20,27,36,0.28);
  --rga-shadow-brand:  0 14px 40px -18px rgba(0,114,213,0.35);

  --rga-font:          'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --rga-font-display:  'Barlow Condensed', 'Archivo', ui-sans-serif, sans-serif;

  --rga-shell:         1240px;
}

body {
  background: var(--rga-bg);
  color: var(--rga-ink);
  font-family: var(--rga-font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .rga-display {
  font-family: var(--rga-font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
}

/* small uppercase section eyebrow */
.rga-eyebrow {
  font-family: var(--rga-font);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 600;
  color: var(--rga-muted);
}

.rga-shell {
  max-width: var(--rga-shell);
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 1024px) { .rga-shell { padding: 0 2.5rem; } }

/* ── Buttons ───────────────────────────────────────────── */
.rga-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--rga-font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  font-size: 1.0625rem;
  padding: .7rem 1.4rem;
  border-radius: var(--rga-radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all .18s ease;
}
.rga-btn-primary { background: var(--rga-primary); color: #fff; }
.rga-btn-primary:hover { background: var(--rga-ink); color: #fff; }
.rga-btn-ghost { background: transparent; color: var(--rga-ink); border-color: var(--rga-ink); }
.rga-btn-ghost:hover { background: var(--rga-ink); color: #fff; }
.rga-btn-sm { padding: .4rem .8rem; font-size: 15px; line-height: 1.1; letter-spacing: .03em; }

/* ============================================================
   Logo lockup
   Geometry is copied verbatim from v2 so the mark is pixel
   identical: the 1599x670 source is split into the RGA/NETWORK
   block, the horizon arc, and the three tagline words, each
   absolutely positioned at its source offset (scaled 1.8x).
   ============================================================ */
.rga-logo-wrap { position:absolute; top:0; left:0; display:block; width:189px; height:80px; }
.rga-logo-clip {
  position:absolute; top:0; left:0; display:block; width:189px; height:80px; overflow:hidden;
  -webkit-mask-image:url(/images/logo-arc-mask.png); mask-image:url(/images/logo-arc-mask.png);
  -webkit-mask-size:189px auto;   mask-size:189px auto;
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-position:0 0;      mask-position:0 0;
}
.rga-logo-clip img { display:block; width:189px; height:auto; max-width:none; }
.rga-logo-arc { position:absolute; left:0; top:56.74px; display:block; width:189px; height:auto; max-width:none; }
/* height:auto matters here — the <img> carries height="46" from the source file,
   and with only a ~37-51px CSS width the attribute would stretch each word to
   46px tall. v2 gets this free from Tailwind's preflight (img{height:auto});
   there's no such reset on the dashboard, so it's declared explicitly. */
.rga-logo-word { position:absolute; top:73.40px; display:block; height:auto; max-width:none; }
.rga-logo-w1 { left:25.53px;  width:36.52px; }
.rga-logo-w2 { left:65.72px;  width:51.42px; }
.rga-logo-w3 { left:120.56px; width:43.62px; }

/* ============================================================
   Header
   ============================================================ */
.rga-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
}

/* Scroll veil: only once content is passing under the bar, soften its hard
   bottom edge with a swoosh that dissolves downward instead of a straight cut.
   Mirrors .hdr-veil on the v2 site. */
.rga-hdr-veil {
  position:absolute; top:100%; left:0; right:0; height:44px;
  pointer-events:none; opacity:0; transition:opacity .3s ease;
}
.rga-header.is-stuck .rga-hdr-veil { opacity:1; }
.rga-hdr-veil-fade {
  position:absolute; inset:0;
  background:linear-gradient(180deg, #fff 0%, rgba(255,255,255,.92) 26%, rgba(255,255,255,.55) 58%, rgba(255,255,255,0) 100%);
}
.rga-hdr-veil-wave { position:absolute; top:0; left:0; width:100%; height:44px; display:block; }
@media (prefers-reduced-motion:reduce) { .rga-hdr-veil { transition:none; } }

/* Deeper lobe of the same swoosh, aligned to the content box so it tracks the
   logo at any width. Its ends taper flush to the bar so it reads as one
   continuous white edge with the veil, and it shares the scroll trigger. */
.rga-header-skirt {
  position:absolute; top:100%; left:0; right:0; pointer-events:none;
  opacity:0; transition:opacity .3s ease;
}
.rga-header.is-stuck .rga-header-skirt { opacity:1; }
.rga-header-skirt > div { max-width: var(--rga-shell); margin:0 auto; padding:0 1.5rem; }
@media (min-width: 1024px) { .rga-header-skirt > div { padding:0 2.5rem; } }
.rga-header-skirt-wave { display:block; margin-left:-60px; width:420px; height:40px; }
@media (prefers-reduced-motion:reduce) { .rga-header-skirt { transition:none; } }

.rga-nav-row {
  max-width: var(--rga-shell);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
@media (min-width: 1024px) { .rga-nav-row { padding: 0 2.5rem; } }

.rga-logo-link { position:relative; display:block; flex-shrink:0; width:189px; height:2.75rem; }

.rga-nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rga-nav-item { position: relative; }

.rga-nav-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--rga-font-display);
  text-transform: uppercase;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  color: rgba(20,27,36,.75);
  text-decoration: none;
  padding: .5rem .45rem;
  border-radius: var(--rga-radius);
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.rga-nav-link:hover { color: var(--rga-primary); }
.rga-nav-link.active { color: var(--rga-primary); border-bottom-color: var(--rga-primary); }
.rga-nav-emoji { font-size: 14px; line-height: 1; }
.rga-nav-caret { width:10px; height:10px; opacity:.55; flex-shrink:0; }

/* Dropdown panel — opens on hover and on keyboard focus */
.rga-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  padding-top: .5rem;
  display: none;
  min-width: 15rem;
  z-index: 120;
}
.rga-nav-item:hover > .rga-dropdown,
.rga-nav-item:focus-within > .rga-dropdown,
.rga-avatar-menu:hover > .rga-dropdown,
.rga-avatar-menu:focus-within > .rga-dropdown { display: block; }

.rga-dropdown-inner {
  background: #fff;
  border: 1px solid var(--rga-line);
  border-radius: var(--rga-radius);
  box-shadow: var(--rga-shadow-lift);
  padding: .4rem 0;
}
.rga-dropdown-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1rem;
  font-size: .875rem;
  color: rgba(20,27,36,.82);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.rga-dropdown-link:hover { background: var(--rga-bg); color: var(--rga-primary); }
.rga-dropdown-link.active { color: var(--rga-primary); font-weight: 600; background: rgba(0,114,213,.06); }

/* User area */
.rga-user-area { display:flex; align-items:center; gap:.625rem; flex-shrink:0; }
.rga-contact-bar .rga-user-name { color: rgba(20,27,36,.55); font-size:14px; }
.rga-user-name {
  font-family: var(--rga-font-display);
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 600;
  color: rgba(20,27,36,.65);
  white-space: nowrap;
}
.rga-user-link {
  font-family: var(--rga-font-display);
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 600;
  color: rgba(20,27,36,.65);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease;
}
.rga-user-link:hover { color: var(--rga-primary); }

/* ── Account avatar menu ─────────────────────────────────
   Replaces the "Signed in as ..." line that used to sit in the contact bar:
   the mark itself links to account settings, and hovering it reveals the name,
   email and the rest of the account actions. */
.rga-avatar-menu { position: relative; display: flex; align-items: center; }

.rga-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;              /* the one round thing in a square system */
  border: 1px solid var(--rga-line);
  background: var(--rga-bg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.rga-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rga-avatar-initials {
  font-family: var(--rga-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--rga-primary);
  line-height: 1;
}
.rga-avatar-menu:hover .rga-avatar,
.rga-avatar-menu:focus-within .rga-avatar {
  border-color: var(--rga-primary);
  box-shadow: 0 0 0 3px rgba(0, 114, 213, .14);
}

/* right-anchored panel: the avatar sits at the end of the row, so a left-anchored
   dropdown would run off the viewport */
.rga-dropdown-right { left: auto; right: 0; }

.rga-avatar-id {
  display: block;
  padding: .5rem 1rem .625rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--rga-line);
}
.rga-avatar-id-name {
  display: block;
  font-family: var(--rga-font-display);
  text-transform: uppercase;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--rga-ink);
  line-height: 1.1;
}
.rga-avatar-id-email {
  display: block;
  font-size: .75rem;
  color: var(--rga-muted);
  margin-top: .125rem;
  overflow-wrap: anywhere;
}

/* mobile: the same identity block, as the first row of the slide-in panel */
.rga-mobile-id {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--rga-line);
  border-radius: var(--rga-radius);
  background: var(--rga-bg);
  text-decoration: none;
}
.rga-mobile-id .rga-avatar { width: 44px; height: 44px; background: #fff; }
.rga-mobile-id-text { min-width: 0; }

/* ── Utility contact bar ──────────────────────────────── */
.rga-contact-bar { background:#fff; border-bottom:1px solid var(--rga-line); }
.rga-contact-bar-inner {
  max-width: var(--rga-shell);
  margin: 0 auto;
  padding: .625rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .25rem 1.75rem;
}
@media (min-width: 1024px) { .rga-contact-bar-inner { padding: .625rem 2.5rem; } }
.rga-contact-links { display:flex; align-items:center; gap:1.5rem; font-size:15px; }
.rga-contact-links a {
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; color:var(--rga-ink); text-decoration:none;
  transition: color .18s ease;
}
.rga-contact-links a:hover { color: var(--rga-primary); }
.rga-contact-links svg { width:18px; height:18px; color: var(--rga-primary); }
.rga-social { display:flex; align-items:center; gap:1rem; }
.rga-social a { color: rgba(20,27,36,.7); transition: color .18s ease; }
.rga-social a:hover { color: var(--rga-primary); }
.rga-social svg { width:18px; height:18px; }

/* ── Mobile header ────────────────────────────────────── */
.rga-mobile-bar { display:none; align-items:center; justify-content:space-between; padding:0 1.25rem; height:64px; }
.rga-mobile-bar img { height:2.25rem; width:auto; display:block; }
.rga-burger {
  background:none; border:none; padding:.5rem; cursor:pointer; color:var(--rga-ink);
  display:inline-flex; align-items:center; -webkit-tap-highlight-color:transparent;
}
.rga-burger svg { width:28px; height:28px; }

.rga-mobile-panel {
  position: fixed;
  top: 64px; right: 0;
  width: 100%;
  height: calc(100vh - 64px);
  background: #fff;
  border-top: 1px solid var(--rga-line);
  overflow-y: auto;
  padding: 1.5rem 1.5rem 5rem;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform .25s ease;
}
.rga-mobile-panel.open { transform: translateX(0); }

.rga-mobile-panel .rga-m-link,
.rga-mobile-panel summary {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--rga-line);
  font-family: var(--rga-font-display);
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--rga-ink);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.rga-mobile-panel summary::-webkit-details-marker { display:none; }
.rga-mobile-panel summary .rga-m-plus { margin-left:auto; color:var(--rga-muted); font-size:1.25rem; }
.rga-mobile-panel details[open] summary .rga-m-plus { transform: rotate(45deg); }
.rga-mobile-panel .rga-m-children { padding: .25rem 0 .75rem .25rem; }
.rga-mobile-panel .rga-m-child {
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem 0; font-size:1rem;
  color: rgba(20,27,36,.78); text-decoration:none;
}
.rga-mobile-panel .rga-m-child:hover,
.rga-mobile-panel .rga-m-child.active { color: var(--rga-primary); }
.rga-mobile-auth { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }

@media (max-width: 1199px) {
  .rga-nav-row { display: none; }
  .rga-header-skirt { display: none; }
  .rga-mobile-bar { display: flex; }
}
@media (min-width: 1200px) {
  .rga-mobile-panel { display: none; }
}

/* ============================================================
   Footer
   ============================================================ */
.rga-footer { background: var(--rga-ink); color: #fff; margin-top: 0; }
.rga-footer-inner {
  max-width: var(--rga-shell);
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}
@media (min-width: 1024px) { .rga-footer-inner { padding: 3.5rem 2.5rem; } }
.rga-footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) { .rga-footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }
.rga-footer img.rga-footer-logo { height: 3rem; width: auto; display:block; }
.rga-footer p { color: rgba(255,255,255,.65); line-height: 1.7; }
.rga-footer h4 { margin: 0 0 1rem; }
.rga-footer .rga-eyebrow { color: rgba(255,255,255,.45); }
/* p.rga-footer-tag, not .rga-footer-tag: the generic `.rga-footer p` rule above
   is more specific and would otherwise grey out the tagline */
.rga-footer p.rga-footer-tag {
  font-family: var(--rga-font-display);
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--rga-primary-glow);
  line-height: 1.05;
  margin-top: 1.5rem;
}
.rga-footer ul { list-style:none; margin:0; padding:0; }
.rga-footer li { margin-bottom: .625rem; }
.rga-footer a { color: rgba(255,255,255,.8); text-decoration: none; transition: color .18s ease; }
.rga-footer a:hover { color: var(--rga-primary-glow); }
.rga-footer-bottom {
  max-width: var(--rga-shell);
  margin: 0 auto;
  padding: 2rem 1.5rem 2.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .875rem;
  color: rgba(255,255,255,.5);
}
@media (min-width: 1024px) { .rga-footer-bottom { padding: 2rem 2.5rem 2.5rem; } }
.rga-footer-bottom a { color: rgba(255,255,255,.5); }
.rga-footer-socials { display:flex; gap:.625rem; margin-top:1.5rem; }
.rga-footer-socials a {
  width:2.5rem; height:2.5rem; border:1px solid rgba(255,255,255,.2);
  border-radius: var(--rga-radius);
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .18s ease, border-color .18s ease;
}
.rga-footer-socials a:hover { background: var(--rga-primary); border-color: var(--rga-primary); }
.rga-footer-socials svg { width:1rem; height:1rem; }

/* ── Swoosh divider wrapper (see rga_theme.php::rga_divider) ── */
.rga-divider { position: relative; line-height: 0; margin-top: -1px; }
.rga-divider svg { display: block; width: 100%; }
.rga-divider-overlay { position:absolute; left:0; right:0; z-index:5; line-height:0; pointer-events:none; }
.rga-divider-overlay.at-top { top: 0; }
.rga-divider-overlay.at-bottom { bottom: 0; transform: rotate(180deg); }
.rga-divider-overlay svg { display:block; width:100%; }

/* Focus ring in brand blue */
*:focus-visible { outline: 2px solid var(--rga-primary); outline-offset: 2px; }