/* ═══════════════════════════════════════════════════════════════
   rob-theme.css — $ROB · Rob in Hood · Robinhood repaint layer
   Load AFTER wp-content/themes/artistsweb/assets/styles/main.css

   Strategy:
   - main.css stays untouched (the template's structure/design is the
     starting point per brief). This file remaps ONLY the brand tokens:
       accent  #545cff (agency blue)  → #8C52FF (ROB violet)
       dark    #111                   → #0A0A0A (Robinhood ink)
   - Black-on-green buttons = Robinhood's signature treatment
     (their app/buttons use green fill with black text).
   - The template's light/dark rhythm is preserved: white sections +
     dark sections. That IS the Robinhood brand rhythm (white app,
     dark marketing hero).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --rob-green: #A9F610;          /* exact lime from frog-circle-lime.png */
  --rob-lime: #D4FF62;           /* bright lime highlight — the sweep stop */
  --rob-green-deep: #82B800;     /* pressed / hover state in the lime family */
  --rob-green-bright: #C7FF45;   /* gradient highlight stop */
  --rob-purple: #8C52FF;         /* exact violet from frog-circle-violet.png */
  --rob-purple-deep: #6F3ED8;    /* violet depth for template gradients */
  --rob-purple-light: #BDA4FF;   /* light violet gradient stop */
  --rob-green-rgb: 169, 246, 16;
  --rob-purple-rgb: 140, 82, 255;
  --rob-ink: #0A0A0A;            /* near-black for dark sections */
}

/* ---- brand chrome: selection + focus ---- */
::selection { background: var(--rob-green); color: #000; }
:focus-visible { outline-color: var(--rob-green); }

/* ---- accent remap: blue → green ---- */
.border-colour { box-shadow: 0 0 0 1px var(--rob-green); }
.btn.border.colour { border-color: var(--rob-green) !important; color: var(--rob-green-deep); }
.bg-dark .btn.border.colour { color: #fff; }
.btn.fill.colour { background-color: var(--rob-green); color: #000; box-shadow: 0 0 0 0 var(--rob-green); }
.btn.fill.colour:hover { background-color: var(--rob-green-deep); }
.btn.fill.colour svg * { fill: #000; }
.text-color-main { color: var(--rob-green); }
.text-gradient, .text-gradient > div {
  /* light backgrounds: start lime, flash bright, return to lime —
     ends back on the brand green so the tail stays readable on white */
  background: linear-gradient(45deg, var(--rob-green), var(--rob-green-bright) 75%, var(--rob-green));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg-dark .text-gradient, .bg-dark .text-gradient > div {
  /* dark backgrounds: the bright lime pops hard against ink */
  background: linear-gradient(45deg, var(--rob-green), var(--rob-lime) 75%, var(--rob-green));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-anim, .hero .text-gradient-anim, .text-gradient-anim > div {
  /* hero sweep: green → black → green. Brief: the $ROB mark is
     green/black (matching the cookie card's black→green theme). Use
     background-image instead of the shorthand: an important shorthand
     resets background-position and prevents CSS keyframes from moving the
     sweep. `> div` covers the SplitText-wrapped inner node. */
  background-image: linear-gradient(to right, var(--rob-green), var(--rob-ink) 50%, var(--rob-green)) !important;
  background-size: 300% 100% !important;
  background-position: 0 0;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
@keyframes rob-gradient-sweep {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}
.hero .text-gradient-anim,
.hero .text-gradient-anim > div {
  animation: rob-gradient-sweep 3s linear infinite;
  will-change: background-position;
}
@media (prefers-reduced-motion: reduce) {
  .hero .text-gradient-anim,
  .hero .text-gradient-anim > div {
    animation: none;
    will-change: auto;
  }
}

.bg-colour { background-color: var(--rob-green); color: #000; }
.bg-colour .btn svg * { fill: #000; }
.bg-colour .box-banner-item h3 { color: #000; }
.bg-colour .btn.border, .bg-colour .btn.border.colour { border-color: rgba(0,0,0,.45) !important; color: #000; }

/* ---- dark sections: #111 → #0A0A0A ---- */
.bg-dark { background-color: var(--rob-ink); }

/* ---- template's blue radial glows → Robinhood green ----
   main.js paints `section.bg-dark.anim-bg` inline (white reveal), so
   the services section drops `.anim-bg` in markup; these rules repaint
   the remaining blue gradients that main.css hardcodes. */
.bg-gradient-bottom {
  background-image: radial-gradient(circle at 75% 140%, rgba(var(--rob-green-rgb), .35) 0, transparent 35%);
}
.bg-gradient-sides {
  background-image: radial-gradient(circle at -30% 10%, rgba(var(--rob-green-rgb), .35) 0, transparent 220px),
                    radial-gradient(circle at 120% 90%, rgba(var(--rob-green-rgb), .35) 0, transparent 220px);
}
/* the fullscreen nav sets its own #111 + blue glow (not via .bg-dark),
   and the sticky header row inside it has its own #111 band */
.main-navigation-container {
  background-color: var(--rob-ink);
  background-image: radial-gradient(circle at 73% 145%, rgba(var(--rob-green-rgb), .3) 0, transparent 42%);
}
.main-navigation-header { background: var(--rob-ink); }
.main-navigation .current-menu-item a { color: var(--rob-green); }

/* ---- component-level green touches ---- */
.work-title .value { color: var(--rob-green); }
.box-number-item .value.h2, .numbers .value.h2 { color: var(--rob-green); }
.running-text .h1 { color: var(--rob-green); }
.accordion-item.active, .accordion-item.is-active { border-color: var(--rob-green); box-shadow: 0 0 0 4px var(--rob-green); }
.accordion-button .icon { color: var(--rob-green); }
.accordion .btn-close.dark .line { background-color: var(--rob-green); }
.hero-bottom .circle-element .circle { border: 1px solid rgba(var(--rob-green-rgb), .35); }

/* ---- hero stat circle: bigger ----
   The template's .lg circle (~67px) is too small for "$50K"/"$1B" —
   bump it so the animated stat contents fit comfortably. */
.hero-bottom .circle-element-dynamic .circle {
  min-width: 104px; width: 104px; height: 104px;
}
.hero-bottom .circle-element-dynamic {
  /* Keep the flex wrapper as tall as the enlarged stat circle so the
     following intro copy starts after the circle, not behind it. */
  min-height: 104px;
  height: 104px;
}
.hero-bottom .circle-element-dynamic .number { font-size: 26px; font-weight: 800; }
.hero-bottom .circle-element-dynamic .value { font-size: 15px; }
@media (max-width: 768px) {
  .hero-bottom .circle-element-dynamic .circle { min-width: 88px; width: 88px; height: 88px; }
  .hero-bottom .circle-element-dynamic { min-height: 88px; height: 88px; }
  .hero-bottom .circle-element-dynamic .number { font-size: 22px; }
}

/* ---- headline weights: $ROB extra bold, rest light ----
   The h1 is Onest 300 (light); only the gradient "$ROB" mark is 900. */
.hero .xl-title h1 { font-weight: 300 !important; }
.hero .xl-title h1 .text-gradient-anim { font-weight: 900 !important; }

/* ---- hero layout: stat + intro side by side, CTA bottom-right ----
   main.css's final .hero-bottom rule forces 1fr 1fr (two columns:
   circle | text+button). The brief wants the "Read the Story" button
   UNDER the intro text and anchored bottom-right, with the $13.82 stat
   and the intro sharing one row — so the grid collapses to one column
   and the CTA gets its own right-aligned row. */
.hero-bottom {
  -webkit-box-orient: vertical; -webkit-box-direction: normal;
  flex-direction: column;
  grid-template-columns: 1fr;
}
.hero-bottom .hero-main {
  -webkit-box-orient: horizontal; -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-align: center; align-items: center;
}
.hero-bottom .hero-main .group { width: auto; }
.hero-bottom .hero-main .group:last-child {
  -webkit-box-flex: 1; flex: 1 1 auto;
  max-width: 560px;
}
.hero-bottom .hero-cta {
  /* .hero-item is a ROW in main.css — main-axis push to the right */
  -webkit-box-pack: end; justify-content: flex-end;
  -webkit-box-align: center; align-items: center;
}
@media (max-width: 768px) {
  /* mobile: everything stacks; the CTA becomes a full-width thumb target */
  .hero-bottom .hero-main {
    -webkit-box-orient: vertical; -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: start; align-items: flex-start;
  }
  .hero-bottom .hero-main .group:last-child { max-width: none; }
  .hero-bottom .hero-cta { -webkit-box-align: stretch; align-items: stretch; }
  .hero-bottom .hero-cta .btn { width: 100%; }
  .hero-bottom .hero-cta .value { text-align: center; }
}
.brands-item-box img { object-fit: contain; }

/* ---- header logo image ----
   The supplied mark is square artwork, so keep it within the existing
   header footprint instead of letting it push the CTA and menu controls. */
.site-logo .aw_logo {
  display: block;
  width: 48px;
  max-width: 48px;
}
.site-logo .aw_logo img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* ---- loading logo ----
   The supplied GIF is a wide wordmark, so size the wrapper by width and let
   the image keep its native ratio. The compact cap prevents the preloader
   from becoming the dominant element on desktop or mobile. */
.loading .loading-logo {
  display: block;
  width: clamp(100px, 22vw, 150px);
  max-width: 150px;
}
.loading .loading-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* ---- cover everywhere: no visible seams ----
   Every data-img slot fills its container (cover); the ticker strip
   keeps contain (its chips are text graphics, not photos). */
img[data-img] { object-fit: cover; }
img[data-img^="t-"] { object-fit: contain; }

/* ---- hero intro text: uncap the template's 26.25vw/420px limit ----
   Without this the text block stops short of the right edge (and on
   mobile the vw cap shrinks it to ~100px). The group is already
   flush right; the text now fills it. */
.hero-bottom .text.max-width-in { max-width: none; }

/* ---- story rail art + responsive card copy ----
   The supplied 3500x2975 PNGs include a thin transparent/white edge. The
   story cards use their own aspect ratios, so explicit cover sizing plus a
   slight scale keeps the artwork against the rounded card edge instead of
   exposing the page-colored seam. On narrow cards, the two bottom labels
   share less width; reduce type and horizontal padding so all controls stay
   inside the card. */
#journey .box-case .box-bg,
#journey .box-case .box-bg figure,
#journey .box-case .box-bg picture,
#journey .box-case .box-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#journey .box-case .box-bg { border-radius: inherit; }
#journey .box-case .box-bg figure {
  border-radius: inherit;
  overflow: hidden;
}
#journey .box-case .box-bg picture {
  display: block;
}
#journey .box-case .box-bg img {
  object-position: center;
  transform: scale(1.05) !important;
  transform-origin: center;
}
#journey .box-case .box-floating {
  min-height: 100%;
  box-sizing: border-box;
}
#journey .box-case .box-article-content {
  min-width: 0;
  max-width: none;
}

@media (max-width: 768px) {
  /* Mobile Story art is portrait, but reserves a large black footer for the
     chapter copy. A slightly wider card trims only the unused tail while
     keeping the visible artwork top-aligned and fully rounded. */
  #journey .pin-wrap > .box.box-case.auto {
    aspect-ratio: 3 / 5 !important;
  }

  #journey .box-case .box-bg,
  #journey .box-case .box-bg figure,
  #journey .box-case .box-bg picture {
    background: var(--rob-ink);
    border-radius: inherit;
  }

  #journey .box-case .box-bg picture,
  #journey .box-case .box-bg img {
    border-radius: inherit;
  }

  #journey .box-case .box-bg img {
    object-position: center top !important;
    transform: none !important;
  }
}

@media (max-width: 576px) {
  #journey .box-case .box-title .h3 {
    font-size: clamp(18px, 6vw, 24px);
    line-height: 1.2;
  }
  #journey .box-case .group.sm { gap: 8px; }
  #journey .box-case .group.sm .btn {
    flex: 0 1 auto;
    min-width: 0;
    height: 30px;
    padding-inline: clamp(8px, 3vw, 12px);
    font-size: clamp(11px, 3.5vw, 14px);
  }
}

/* ---- mobile story stack ----
   The desktop story remains the template's horizontal rail. On touch-sized
   viewports, keep the five chapter boxes in their existing direct-child
   order, but give them fixed grid tracks and sticky visual cards. The extra
   top offset makes each incoming chapter land visibly over the previous one;
   the later card's z-index then owns the stack without changing document
   height. */
@media (max-width: 1025px) {
  #journey[data-section-horizontal] {
    --story-card-count: 5;
    --story-card-height: calc((100vw - 40px) * 5 / 3);
    --story-card-gap: clamp(18px, 4vw, 28px);
    --story-stack-top: clamp(76px, 10vh, 96px);
    --story-stack-offset: clamp(10px, 2.5vw, 16px);
    overflow: visible;
  }

  #journey[data-section-horizontal] .pin-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto repeat(5, var(--story-card-height)) auto;
    row-gap: var(--story-card-gap);
    padding-inline: 20px;
    padding-bottom: calc(var(--story-card-count) * var(--story-stack-offset));
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  #journey .pin-wrap > .box.box-case.auto {
    --stack-index: 1;
    --stack-scale: .92;
    --stack-index0: calc(var(--stack-index) - 1);
    --stack-start: calc(var(--stack-index0) / var(--story-card-count) * 100%);
    --stack-end: calc(var(--stack-index) / var(--story-card-count) * 100%);
    position: sticky;
    top: var(--story-stack-top);
    align-self: start;
    z-index: var(--stack-index);
    width: 100%;
    height: var(--story-card-height);
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    box-sizing: content-box;
    padding-top: calc(var(--stack-index) * var(--story-stack-offset));
    overflow: visible;
  }

  #journey .pin-wrap > .box.box-case.auto:nth-child(3) {
    --stack-index: 2;
    --stack-scale: .94;
  }
  #journey .pin-wrap > .box.box-case.auto:nth-child(4) {
    --stack-index: 3;
    --stack-scale: .96;
  }
  #journey .pin-wrap > .box.box-case.auto:nth-child(5) {
    --stack-index: 4;
    --stack-scale: .98;
  }
  #journey .pin-wrap > .box.box-case.auto:nth-child(6) {
    --stack-index: 5;
    --stack-scale: 1;
  }

  #journey .box-case .box-bg,
  #journey .box-case .box-floating,
  #journey .box-case > .floating-link {
    height: var(--story-card-height);
  }

  #journey .box-case .box-bg {
    top: calc(var(--stack-index) * var(--story-stack-offset));
    z-index: 1;
    box-shadow: 0 0 0 1px rgba(var(--rob-green-rgb), .75),
      0 18px 36px rgba(0, 0, 0, .45);
  }

  #journey .box-case .box-floating {
    min-height: 0 !important;
    box-sizing: border-box;
  }

  #journey .box-case > .floating-link {
    top: calc(var(--stack-index) * var(--story-stack-offset));
    z-index: 3;
  }
}

/* The card scale is progressive enhancement: sticky layering still works in
   browsers without scroll-driven timelines, while supported browsers scale
   only the visual card as the next chapter crosses the story track. */
@supports (animation-timeline: view()) {
  @media (max-width: 1025px) {
    @keyframes rob-story-stack-scale {
      to { transform: scale(var(--stack-scale)); }
    }

    #journey[data-section-horizontal] .pin-wrap {
      view-timeline-name: --rob-story-cards;
      view-timeline-axis: block;
    }

    #journey .box-case .box-bg,
    #journey .box-case .box-floating,
    #journey .box-case > .floating-link {
      animation: rob-story-stack-scale 1ms linear both;
      animation-timeline: --rob-story-cards;
      animation-range: exit-crossing var(--stack-start) exit-crossing var(--stack-end);
      transform-origin: 50% 0%;
      will-change: transform;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  #journey .box-case .box-bg,
  #journey .box-case .box-floating,
  #journey .box-case > .floating-link {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}

/* ---- milestone logos: preserve the supplied PNGs as complete circles ----
   The source template sizes `.circle.logo` to 40px for small SVG icons and
   lets a raw image keep its intrinsic dimensions. Give the milestone group
   its own responsive logo size and contain each supplied PNG inside the
   circle slot so the artwork remains intact at every viewport. */
#numbers .circle-element.lg {
  --rob-milestone-size: clamp(52px, 16vw, 92px);
  min-height: var(--rob-milestone-size);
  height: var(--rob-milestone-size);
}
#numbers .circle-element.lg .circle-group {
  height: var(--rob-milestone-size);
  flex: 0 0 auto;
}
#numbers .circle-element.lg .circle-group .circle.logo {
  flex: 0 0 var(--rob-milestone-size);
  min-width: var(--rob-milestone-size);
  width: var(--rob-milestone-size);
  height: var(--rob-milestone-size);
  margin-right: calc(var(--rob-milestone-size) * -0.28);
}
#numbers .circle-element.lg .circle-group .circle.logo:last-child {
  margin-right: 0;
}
#numbers .circle-element.lg .circle.logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
#numbers .circle-element.lg > .value {
  min-width: 0;
  flex: 1 1 auto;
}

/* ---- big-message background: supplied $ROB banner ----
   The template's .section-bg-item carried the old AW logo pattern. The
   user-supplied 1936x393 transparent wordmark PNG (assets/ROB BANNER/
   rob-bigmessage-bg.png, copied verbatim from the Telegram drop) replaces
   BOTH the pattern and the three text lines — the banner IS the statement.
   Height chain: the text block used to size .inner; with text gone,
   min-height must flow section → .inner → .section-bg (absolute, 100%)
   or the banner box collapses to zero. */
.big-message-overflow { min-height: clamp(320px, 42vw, 560px); }
.big-message-overflow .inner {
  min-height: inherit;
  box-sizing: border-box;
}
.big-message-overflow .section-bg {
  grid-template-columns: 1fr;
  pointer-events: none;
}
.big-message-overflow .section-bg-item:last-child { display: none; }
.big-message-overflow .section-bg-item:before { display: none; }
.big-message-overflow .section-bg-item {
  position: relative;
  background-image: url("../../../../../assets/ROB BANNER/rob-bigmessage-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ---- template accent cleanup ----
   main.css still contains the former blue accent in a few template-only
   states. Repaint those states here so they use the exact ROB violet while
   the site-owned green buttons and animated green gradients stay lime. */
.bg-gradient {
  background-image: linear-gradient(225deg, var(--rob-purple-deep), var(--rob-purple));
}
.bg-dark .btn.border.colour {
  border-color: var(--rob-purple) !important;
}
.box-article:not(.dark-content) .btn.border.colour,
.box-case:not(.dark-content) .btn.border.colour {
  box-shadow: 0 0 0 1px var(--rob-purple) !important;
}
.box-article a,
.box-case a {
  box-shadow: 0 0 0 0 var(--rob-purple);
}
.c-scrollbar_thumb,
.custom-scroll-el-scroller,
.video-progress,
.progress-line {
  background-color: var(--rob-purple) !important;
}
.grid-articles-featured .grid-item:first-child::before,
.accordion-header .label-small,
.accordion-included .accordion-button .title.in::before {
  background: var(--rob-purple);
}
.accordion-included .accordion-button .title.no,
.main-navigation .menu-item.soon a::after {
  color: var(--rob-purple);
}
.main-navigation-container {
  background-image: radial-gradient(circle at 73% 145%, rgba(var(--rob-purple-rgb), .3) 0, transparent 42%);
}
.box-social .social-links ul li a::after,
.grid-connection .social-links ul li a::after {
  border-color: var(--rob-purple);
}
.box.is-hover,
.box.is-hover.border-grayDark,
a.circle-element[data-scroll-to]:hover .circle {
  box-shadow: 0 0 0 4px var(--rob-purple);
}
.next-project-link:hover {
  box-shadow: 0 0 0 4px var(--rob-purple) !important;
}
div#gdpr-cookie-message .form-check input:checked + label::before {
  background-color: var(--rob-purple);
  box-shadow: 0 0 0 1px var(--rob-purple);
}

/* ---- cookie popover: black → green glow card ----
   Brief: the CARD carries a black-to-green gradient with a green glow
   (no blue/purple anywhere). The template paints the bar dark with a
   purple radial at the bottom-right; this replaces it wholesale.
   !important guards against the template's id-based declarations
   (same specificity, earlier stylesheet) — the shadow/gradient must
   not be re-overridden. */
#gdpr-cookie-message {
  background: linear-gradient(160deg, var(--rob-ink) 0%, var(--rob-green) 88%) !important;
  color: #fff !important;
  box-shadow: 0 0 26px rgba(var(--rob-green-rgb), .55) !important;
}
#gdpr-cookie-message a { color: #fff !important; }
#gdpr-cookie-message #gdpr-cookie-advanced {
  background-color: rgba(0, 0, 0, .22) !important;
}

/* ---- mobile lesson disclosures ----
   Desktop reveals `.services-info` on hover. Touch screens need the same
   chapter metadata in the document flow, so the companion script toggles
   `.is-mobile-open` while this layer overrides the template's hidden state. */
@media (max-width: 1025px) {
  #lessons .services-item-link {
    display: block;
    position: relative;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
  }

  #lessons .services-item-link .floating-link {
    z-index: 3;
  }

  #lessons .services-item-link .services-title,
  #lessons .services-item-link .services-info {
    pointer-events: none;
  }

  #lessons .services-item-link .services-info {
    display: grid !important;
    position: static;
    width: 100%;
    height: auto;
    max-height: 0;
    margin-top: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1rem;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible;
    transition: max-height .65s cubic-bezier(.22, 1, .36, 1),
      margin-top .65s cubic-bezier(.22, 1, .36, 1);
  }

  #lessons .services-item-link.is-mobile-open .services-info {
    max-height: 12rem;
    margin-top: 1rem;
  }

  #lessons .services-item-link .services-info .services-info-item:first-child {
    display: flex !important;
    grid-column: 1;
    min-width: 0;
    max-width: calc(100% - 2.5rem);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height .65s cubic-bezier(.22, 1, .36, 1),
      opacity .35s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
  }

  #lessons .services-item-link.is-mobile-open .services-info .services-info-item:first-child {
    max-height: 10rem;
    opacity: 1;
    transform: none;
  }

  /* The template image slots are placeholders here; the useful chapter
     detail is the text, which should stay compact on a narrow screen. */
  #lessons .services-item-link .services-info .services-info-item:nth-child(2) {
    display: none !important;
  }

  #lessons .services-item-link .services-info .info-arrow {
    display: flex !important;
    position: absolute;
    top: 50%;
    right: 0;
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    margin-top: 0 !important;
    pointer-events: none;
    transform: translateY(-50%);
    transition: transform .65s cubic-bezier(.22, 1, .36, 1);
  }

  #lessons .services-item-link .services-info .info-arrow svg {
    width: 32px;
    max-width: 32px;
  }

}

@media (prefers-reduced-motion: reduce) {
  #lessons .services-item-link .services-info,
  #lessons .services-item-link .services-info .services-info-item:first-child,
  #lessons .services-item-link .services-info .info-arrow {
    transition: none;
  }
}

/* ---- fullscreen live chart navigation panel ----
   The popup keeps the template's shell and community footer, while the
   middle region becomes the only owner of the embedded chart. The height
   constraint is explicit so the iframe grows into the available panel
   instead of collapsing to its native document size. */
.main-navigation-container {
  height: calc(100vh - 40px) !important;
  max-height: calc(100vh - 40px) !important;
}

.main-navigation-container .main-navigation-top,
.main-navigation-container .main-navigation-bottom {
  flex: 0 0 auto;
}

.main-navigation-container .main-navigation-middle {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.main-navigation-container .rob-live-chart {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(var(--rob-green-rgb), .32);
  border-radius: 16px;
  background: var(--rob-ink);
}

.main-navigation-container .rob-live-chart iframe {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border: 0;
  background: var(--rob-ink);
}

@media (max-width: 1025px) {
  .main-navigation-container {
    height: calc(100vh - 40px) !important;
    max-height: calc(100vh - 40px) !important;
  }

  .main-navigation-container .rob-live-chart {
    min-height: 0;
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-navigation-container .rob-live-chart iframe {
    scroll-behavior: auto;
  }
}

/* ---- footer social icons ---- */
.box-social .social-links svg { width: 22px; height: 22px; fill: currentColor; }