/* ============================================================================
   United Way of Rhode Island — full-screen navigation menu
   The header keeps its minimal launch face (logo, centred "Reach 211", Donate).
   Everything else lives behind the burger, which opens a navy panel that
   expands from the button as a growing circle — the same concentric-ring
   motif the 211 disc and the section headers use, now as motion.
   Pairs with menu.js. With JS off the burger is hidden and the footer nav
   is the fallback path.
   ========================================================================== */

.uw-burger { display: none; }
.uw-js .uw-header--v3 .uw-burger {
  display: inline-flex !important;
  position: relative; z-index: 210;
  width: 46px; height: 40px; border: 0; background: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.uw-header--v3 .uw-burger span {
  display: block; width: 26px; height: 2.5px; border-radius: 3px;
  background: var(--uw-navy);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, background-color .2s ease;
}
.uw-menu-open .uw-header--v3 .uw-burger span { background: #fff; }
.uw-menu-open .uw-header--v3 .uw-burger span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.uw-menu-open .uw-header--v3 .uw-burger span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.uw-menu-open .uw-header--v3 .uw-burger span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* ── the panel ──────────────────────────────────────────────────────────── */
.uw-menu {
  position: fixed; inset: 0; z-index: 200;
  display: grid; align-content: center; align-content: safe center;
  padding: clamp(96px, 14vh, 130px) var(--uw-gut) clamp(36px, 7vh, 80px);
  overflow-y: auto; overscroll-behavior: contain;
  color: #fff;
  background:
    radial-gradient(120% 90% at 88% 4%, #313DA4 0%, rgba(49, 61, 164, 0) 55%),
    linear-gradient(160deg, #293384 0%, #21296B 54%, #171E52 100%);
  /* the circle wipe: closed = a dot at the burger, open = covers the viewport */
  clip-path: circle(0 at var(--uw-menu-x, 92%) var(--uw-menu-y, 40px));
  transition: clip-path .58s cubic-bezier(.7, 0, .2, 1);
  visibility: hidden;
}
.uw-menu.is-open { clip-path: circle(150% at var(--uw-menu-x, 92%) var(--uw-menu-y, 40px)); visibility: visible; }
.uw-menu::before {                       /* concentric-ring ghost, top-left */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(480px, 60vw, 940px); aspect-ratio: 1;
  left: clamp(-360px, -22vw, -220px); top: clamp(-320px, -24vw, -180px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    transparent 0 42%,
    rgba(255, 255, 255, .09) 42% 55%,
    transparent 55% 66%,
    rgba(167, 210, 255, .10) 66% 80%,
    transparent 80%);
}
.uw-menu::after {                         /* a second ring, bottom-right */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(360px, 44vw, 700px); aspect-ratio: 1;
  right: clamp(-300px, -18vw, -180px); bottom: clamp(-280px, -20vw, -160px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    transparent 0 46%,
    rgba(255, 186, 0, .12) 46% 58%,
    transparent 58% 72%,
    rgba(255, 255, 255, .06) 72% 86%,
    transparent 86%);
}

.uw-menu__close {
  position: absolute; z-index: 3;
  top: clamp(20px, 3vh, 40px); right: clamp(20px, 6.94vw, 120px);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06);
  color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .2s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.uw-menu__close:hover { background: #fff; color: var(--uw-navy); transform: rotate(90deg); }
.uw-menu__inner { position: relative; z-index: 1; max-width: var(--uw-max); margin: 0 auto; width: 100%; }
.uw-menu__cols {
  display: flex; flex-wrap: wrap;
  align-items: flex-start; justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
}
.uw-menu__cols > .uw-menu__list { flex: 1 1 min(100%, 420px); min-width: 0; }
.uw-menu__cols > .uw-menu__social { flex: 0 0 auto; }
.uw-menu__eyebrow {
  font-family: var(--uw-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; font-size: clamp(11px, .95vw, 14px);
  color: var(--uw-gold); margin: 0 0 clamp(18px, 2.4vw, 32px);
  display: flex; align-items: center; gap: 12px;
}
.uw-menu__eyebrow::before { content: ""; width: 34px; height: 3px; border-radius: 2px; background: var(--uw-gold); }

.uw-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(8px, 1.2vw, 18px); }
.uw-menu__list a {
  --i: 0;
  display: grid;
  grid-template-columns: clamp(22px, 2vw, 30px) 1fr;
  column-gap: clamp(12px, 1.4vw, 22px); row-gap: 2px;
  color: #fff; text-decoration: none;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.uw-menu__list a .n {
  grid-row: 1;
  font-family: var(--uw-body); font-weight: 700;
  font-size: clamp(11px, 1vw, 14px); color: rgba(255, 255, 255, .4);
  align-self: center;
}
.uw-menu__label {
  grid-column: 2; grid-row: 1;
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 4.6vw, 52px); line-height: 1.0;
  transition: color .2s ease;
}
.uw-menu__desc {
  grid-column: 2; grid-row: 2;
  font-family: var(--uw-body); font-weight: 400;
  font-size: clamp(12px, 1vw, 15px); line-height: 1.4;
  color: rgba(255, 255, 255, .55);
  max-width: 42ch;
}
.uw-menu__list a:hover, .uw-menu__list a:focus-visible { transform: translateX(10px); }
.uw-menu__list a:hover .uw-menu__label, .uw-menu__list a:focus-visible .uw-menu__label { color: var(--uw-gold); }
.uw-menu__list a:hover .n, .uw-menu__list a:focus-visible .n { color: var(--uw-gold); }

/* each row fades up in sequence once the wipe finishes */
.uw-menu__list li { opacity: 0; transform: translateY(16px); }
.uw-menu.is-open .uw-menu__list li {
  opacity: 1; transform: none;
  transition: opacity .4s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(.32s + var(--i, 0) * .05s);
}

.uw-menu__foot {
  margin-top: clamp(30px, 5vh, 60px);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2.4vw, 30px);
  opacity: 0;
}
.uw-menu.is-open .uw-menu__foot { opacity: 1; transition: opacity .4s ease .6s; }
.uw-menu__lang { display: flex; gap: 12px; font-family: var(--uw-body); font-weight: 700; font-size: 14px; }
.uw-menu__lang span { color: var(--uw-gold); }
.uw-menu__lang a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.uw-menu__lang a:hover { color: #fff; }
.uw-menu__social {
  display: flex; flex-direction: column; gap: 12px; flex: none;
  padding-top: clamp(4px, 1vw, 12px);
}
.uw-menu__social a {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5);
  display: grid; place-items: center; color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 700;
  transition: background-color .2s ease, color .2s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.uw-menu__social a:hover { background: var(--uw-gold); color: var(--uw-navy); border-color: var(--uw-gold); transform: translateX(-4px); }

.uw-menu[hidden] { display: none; }

/* one hard breakpoint made every size in between it and "desktop" carry the
   full-density layout, so a laptop-narrow window or a zoomed-in phone got
   the same crowded seven-item list as a 1600px screen. These ease it down
   in steps instead. */
@media (max-width: 900px) {
  .uw-menu__label { font-size: clamp(22px, 5.6vw, 44px); }
  .uw-menu__desc { display: none; }
}
@media (max-width: 640px) {
  .uw-menu__cols { flex-direction: column; }
  .uw-menu__social { flex-direction: row; padding-top: 0; }
}
@media (max-width: 420px) {
  .uw-menu { padding-left: 20px; padding-right: 20px; }
  .uw-menu::before, .uw-menu::after { display: none; }
  .uw-menu__list { gap: 6px; }
  .uw-menu__label { font-size: clamp(20px, 8vw, 30px); }
  .uw-menu__social a { width: 38px; height: 38px; }
}
/* a short viewport (landscape phone, or a page zoomed in enough that less
   height is visible) is the case the close button's fixed corner spot and
   the nav list most easily collide in — give both less room to ask for */
@media (max-height: 620px) {
  .uw-menu { padding-top: 76px; padding-bottom: 20px; }
  .uw-menu__close { top: 14px; width: 40px; height: 40px; }
  .uw-menu__desc { display: none; }
  .uw-menu__eyebrow { margin-bottom: 14px; }
  .uw-menu__list { gap: 6px; }
  .uw-menu__foot { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .uw-menu { transition: opacity .2s ease; clip-path: none; opacity: 0; }
  .uw-menu.is-open { opacity: 1; }
  .uw-menu__list li, .uw-menu__foot, .uw-menu__close:hover { opacity: 1; transform: none; transition: none; }
}

/* ── Reach 211 in the menu, for the widths where the header drops it ──────
   Below 640px styles.v3.css collapses the header to the mark and the burger,
   so the 211 button moves in here beside Donate rather than wrapping onto a
   row of its own up top. */
.uw-menu__211 { display: none; }
@media (max-width: 640px) {
  .uw-menu__211 { display: inline-flex; }
}