/* RingCentral.com theme: rc-expertise-close. Builds on rc-theme.css tokens.
   Scope: #expertise (FAQ-style accordion) and #partnership (closing gradient banner).
   Selectors stay id-scoped so they match or beat the older style.css / theme-content.css rules. */

/* ---------- Expertise: intro left, accordion card right ---------- */
#expertise {
  --xp-row-pad: 28px;
  --xp-icon: 32px;
  background: transparent;
}
#expertise .expertise-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 6.5vw, 120px);
  align-items: start;
}
#expertise .expertise-intro {
  position: sticky;
  top: 48px;
}
#expertise .expertise-intro > p {
  max-width: 30em;
  margin-top: 24px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--rc-ink-2);
}

/* Ownership note: hairline row with the Winspeed W in brand orange. */
#expertise .ownership-note {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 40px;
  padding-top: 28px;
  border: 0;
  border-top: 1px solid var(--rc-line);
}
#expertise .ownership-note .winspeed-mark {
  width: 56px;
  height: 48px;
  background: var(--rc-orange);
}
#expertise .ownership-note p {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  color: var(--rc-ink);
}
#expertise .ownership-note strong {
  display: block;
  margin: 0;
  font-weight: 500;
  color: var(--rc-ink);
}

/* Accordion card. */
#expertise .expertise-details {
  display: block;
  padding: 8px clamp(24px, 2.8vw, 40px);
  border: 1px solid #2b29260d;
  border-radius: var(--rc-radius-lg);
  background: var(--rc-white);
  box-shadow: var(--rc-shadow);
  interpolate-size: allow-keywords;
}
#expertise .expertise-details details,
#expertise .expertise-details details[open],
#expertise .expertise-details details:first-child {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#expertise .expertise-details details + details {
  border-top: 1px solid var(--rc-line);
}
#expertise .expertise-details details:has(summary:focus-visible) {
  outline: none;
}

#expertise .expertise-details summary {
  position: relative;
  display: block;
  list-style: none;
  /* Bleeds 14px into the card padding so the focus ring has breathing room around the text. */
  margin: 0 -14px;
  padding: var(--xp-row-pad) calc(var(--xp-icon) + 42px) var(--xp-row-pad) 14px;
  border-radius: 14px;
  font-size: clamp(20px, 1.55vw, 23px);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--rc-ink);
  transition: color 0.2s ease;
}
#expertise .expertise-details summary::-webkit-details-marker { display: none; }
#expertise .expertise-details summary::marker { content: ""; }
#expertise .expertise-details summary:hover,
#expertise .expertise-details details[open] summary:hover { color: var(--rc-ink); }

/* Plus / minus inside a 32px outlined circle; fills RingCentral blue when open. */
#expertise .expertise-details summary::after,
#expertise .expertise-details details[open] summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  display: block;
  box-sizing: border-box;
  width: var(--xp-icon);
  height: var(--xp-icon);
  margin-top: calc(var(--xp-icon) / -2);
  border: 1px solid var(--rc-ink);
  border-radius: 50%;
  color: var(--rc-ink);
  font-size: 0;
  line-height: 0;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  background-color: transparent;
  transform: rotate(0deg);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    background-size 0.3s ease,
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#expertise .expertise-details summary:hover::after {
  border-color: var(--rc-blue);
  color: var(--rc-blue);
}
#expertise .expertise-details details[open] summary::after {
  border-color: var(--rc-blue);
  color: var(--rc-white);
  background-color: var(--rc-blue);
  background-size: 14px 2px, 2px 0;
  transform: rotate(180deg);
}
#expertise .expertise-details details[open] summary:hover::after {
  border-color: var(--rc-blue-hover);
  color: var(--rc-white);
  background-color: var(--rc-blue-hover);
}

/* Keyboard focus: a clear blue ring on the summary row itself. */
#expertise .expertise-details summary:focus-visible,
#expertise .expertise-details details:has(summary:focus-visible) > summary:focus-visible {
  outline: 2px solid var(--rc-blue);
  outline-offset: -4px;
}

#expertise .expertise-details details > p {
  max-width: 40em;
  margin: 0;
  padding: 0 calc(var(--xp-icon) + 28px) var(--xp-row-pad) 0;
  margin-top: -6px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--rc-ink-2);
}

/* Calm height animation where the browser can animate <details> natively. */
@supports selector(::details-content) {
  #expertise .expertise-details details::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size 0.36s cubic-bezier(0.2, 0.7, 0.2, 1),
      content-visibility 0.36s allow-discrete;
  }
  #expertise .expertise-details details[open]::details-content {
    block-size: auto;
  }
}

/* ---------- Closing: RingCentral-style gradient banner ---------- */
#partnership.partnership-close {
  --close-ink-2: #2b2926d9;
  overflow: visible;
  padding-block: clamp(8px, 1.5vw, 24px) clamp(40px, 5.5vw, 88px);
  background: transparent;
  color: var(--rc-ink);
}
/* The old blue aurora panel and its drifting bands are retired; they also poked outside the viewport. */
#partnership .aurora-scene {
  display: none;
}

#partnership .close-inner {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: clamp(64px, 7.5vw, 120px) clamp(24px, 6vw, 96px) clamp(72px, 8vw, 128px);
  border-radius: var(--rc-radius-xl);
  /* Cool variant: lavender-blue top-left gives the banner a defined edge on the off-white page
     and echoes both brands' blues before warming to orange. */
  background: var(--rc-grad-cool);
  text-align: center;
}

#partnership .close-brands {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3vw, 40px);
  margin: 0 0 clamp(36px, 4vw, 52px);
}
/* Hairline divider between the two marks (decorative, no markup). */
#partnership .close-brands::before {
  content: "";
  order: 1;
  flex: none;
  width: 1px;
  height: 44px;
  background: var(--rc-line-strong);
}
#partnership .close-brands .winspeed-lockup {
  order: 0;
  width: auto;
  gap: 10px;
}
#partnership .close-brands .winspeed-mark {
  width: 54px;
  height: 46px;
  background: var(--rc-orange);
}
/* Whole Winspeed lockup in solid orange (user preference over the two-tone blue wordmark). */
#partnership .close-brands .winspeed-wordmark {
  width: 152px;
  height: 22px;
  background: var(--rc-orange);
}
#partnership .close-brands > img {
  order: 2;
  width: 200px;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#partnership .close-inner h2 {
  max-width: 14em;
  margin: 0;
  font-size: clamp(36px, 3.9vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--rc-ink);
}
#partnership .close-inner h2 span { color: inherit; }
/* 85% ink rather than the 70% secondary: the orange corner of the gradient needs it for 4.5:1. */
#partnership .close-inner > p {
  max-width: 36em;
  margin: 24px auto 0;
  font-size: clamp(18px, 1.35vw, 20px);
  line-height: 1.55;
  color: var(--close-ink-2);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  #expertise .expertise-intro { position: static; }
}
@media (max-width: 960px) {
  #expertise .expertise-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  #expertise .expertise-intro > p { max-width: 36em; }
}
@media (max-width: 620px) {
  #expertise { --xp-row-pad: 22px; }
  #expertise .expertise-intro > p { font-size: 18px; margin-top: 20px; }
  #expertise .ownership-note { margin-top: 28px; padding-top: 24px; gap: 14px; }
  #expertise .ownership-note .winspeed-mark { width: 46px; height: 40px; }
  #expertise .ownership-note p { font-size: 18px; }
  #expertise .expertise-details { padding: 4px 20px; border-radius: 24px; }
  #expertise .expertise-details summary {
    padding-right: calc(var(--xp-icon) + 30px);
    font-size: 20px;
  }
  #expertise .expertise-details details > p {
    padding-right: 0;
    font-size: 18px;
  }

  #partnership .close-inner {
    padding: 56px 22px 60px;
    border-radius: var(--rc-radius-lg);
  }
  #partnership .close-brands {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
  }
  #partnership .close-brands::before { width: 40px; height: 1px; }
  #partnership .close-brands .winspeed-mark { width: 46px; height: 40px; }
  #partnership .close-brands .winspeed-wordmark { width: 132px; height: 19px; }
  #partnership .close-brands > img { width: 172px; }
  #partnership .close-inner h2 { font-size: clamp(30px, 8.6vw, 38px); }
  #partnership .close-inner > p { margin-top: 18px; font-size: 18px; }
}
@media (max-width: 360px) {
  #expertise .expertise-details { padding-inline: 16px; }
  #expertise .expertise-details summary { font-size: 19px; }
  #partnership .close-inner { padding-inline: 18px; }
}

/* ---------- Motion preferences ---------- */
/* ::details-content gets its own rules so browsers without it still keep the others. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) #expertise .expertise-details summary,
  html:not([data-motion="full"]) #expertise .expertise-details summary::after {
    transition: none;
  }
  html:not([data-motion="full"]) #expertise .expertise-details details::details-content {
    transition: none;
  }
}
html[data-motion="reduced"] #expertise .expertise-details summary,
html[data-motion="reduced"] #expertise .expertise-details summary::after {
  transition: none;
}
html[data-motion="reduced"] #expertise .expertise-details details::details-content {
  transition: none;
}

@media (forced-colors: active) {
  #expertise .expertise-details summary::after,
  #expertise .expertise-details details[open] summary::after {
    border-color: CanvasText;
    color: CanvasText;
    background-color: Canvas;
    forced-color-adjust: none;
  }
  #partnership .close-inner { border: 1px solid CanvasText; }
}