/* =========================================================
   resource-center.css — Resource Center styling.

   PROVENANCE: extracted verbatim on 2026-08-06 from
   Divi → Theme Options → Integration → "Add code to the head",
   where it had lived as ~21KB of database-only, unversioned
   markup with no history and no backup. Byte-for-byte the same
   rules; only the surrounding <style> tag was dropped.

   That Integration field injected this into EVERY page of the
   site, though the Resource Center exists only on
   /products/quantumbng/. It is now enqueued by the plugin and
   gated to the Quantum IPoE pages.

   Every rule is scoped to #resource-center, so it is inert on
   any page without that element.

   Companion: resource-center.js (the behaviour), rc-expand.css
   and rc-expand.js (the Show all / Show less toggle).
   ========================================================= */

  #resource-center {
    --accent-cyan:#00D4FF; --accent-cyan-dim:#00B8D9;
    --text-primary:#E8F4F8; --text-secondary:#94A3B8; --text-muted:#4A6080;
    --border-subtle:rgba(0,212,255,0.12); --border-active:rgba(0,212,255,0.40);
    --gradient-card:linear-gradient(145deg,#0F1629,#151D35);
    --radius-lg:1rem;
    font-family:'Inter','Segoe UI',system-ui,sans-serif;
    color:var(--text-primary);
    background:#0A0E1A;
    padding:5rem 2rem;
  }
  /* Constrain content width — but NOT the fixed full-screen modals/overlays */
  #resource-center > *:not(#rc-gate):not(#rc-modal){max-width:1280px;margin-left:auto;margin-right:auto;}
  /* Modals are moved to <body> at runtime to escape ancestor stacking contexts,
     so they carry their own design tokens + font here (can't inherit from #resource-center). */
  #rc-gate, #rc-modal{
    --accent-cyan:#00D4FF; --accent-cyan-dim:#00B8D9;
    --text-primary:#E8F4F8; --text-secondary:#94A3B8; --text-muted:#4A6080;
    --border-subtle:rgba(0,212,255,0.12); --border-active:rgba(0,212,255,0.40);
    --gradient-card:linear-gradient(145deg,#0F1629,#151D35); --radius-lg:1rem;
    font-family:'Inter','Segoe UI',system-ui,sans-serif;
  }
  #resource-center h2{font-size:2.25rem;font-weight:700;margin:0 0 .5rem;}
  #resource-center .rc-sub{color:var(--text-secondary);margin:0 0 3rem;font-size:1.125rem;}
  #resource-center .rc-group-head{
    display:flex;align-items:center;justify-content:space-between;
    margin:2.5rem 0 1rem;
  }
  #resource-center .rc-group-head h3{font-size:1.5rem;font-weight:600;margin:0;}
  #resource-center .rc-track{
    display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;padding-bottom:1rem;
    scrollbar-width:none;
  }
  #resource-center .rc-track::-webkit-scrollbar{display:none;}
  #resource-center .rc-tile{
    flex:0 0 auto; scroll-snap-align:start; box-sizing:border-box;
    background:var(--gradient-card); border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    backdrop-filter:blur(12px);
  }
  #resource-center .rc-tile:hover,#resource-center .rc-tile:focus-visible{
    transform:translateY(-4px); border-color:var(--border-active);
    box-shadow:0 8px 30px rgba(0,212,255,.15); outline:none;
  }
  #resource-center .rc-video{width:28%;}
  #resource-center .rc-thumb{position:relative;aspect-ratio:16/9;background:#0A0E1A;}
  #resource-center .rc-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  #resource-center .rc-play{
    position:absolute;inset:0;margin:auto;width:56px;height:56px;
    display:grid;place-items:center;border-radius:50%;
    background:rgba(0,212,255,.85);color:#0A0E1A;font-size:1.5rem;
    box-shadow:0 4px 20px rgba(0,212,255,.4);
  }
  #resource-center .rc-meta{padding:1rem;}
  #resource-center .rc-meta .rc-t{font-size:.95rem;font-weight:600;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  #resource-center .rc-meta .rc-sub2{
    margin-top:.5rem;display:flex;gap:.75rem;color:var(--text-secondary);font-size:.8rem;}
  #resource-center .rc-arrows{display:flex;gap:.5rem;}
  #resource-center .rc-arrows button{
    width:40px;height:40px;border-radius:50%;cursor:pointer;
    background:var(--gradient-card);border:1px solid var(--border-subtle);
    color:var(--text-primary);font-size:1.1rem;backdrop-filter:blur(12px);
    transition:border-color .18s ease,opacity .18s ease;
  }
  #resource-center .rc-arrows button:hover{border-color:var(--border-active);}
  #resource-center .rc-arrows button[disabled]{opacity:.35;cursor:default;}
  #resource-center .rc-doc{width:23%;text-decoration:none;color:inherit;
    display:flex;flex-direction:column;padding:1.5rem;min-height:170px;}
  #resource-center .rc-doc .rc-ic{font-size:1.75rem;color:var(--accent-cyan);margin-bottom:.75rem;}
  #resource-center .rc-doc .rc-t{font-size:1rem;font-weight:600;line-height:1.35;flex:1;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  #resource-center .rc-doc .rc-sub2{margin-top:.75rem;display:flex;justify-content:space-between;
    color:var(--text-secondary);font-size:.8rem;}
  #resource-center .rc-doc .rc-view{color:var(--accent-cyan);font-weight:600;text-decoration:none;}
  /* Rows with a "Read online" link render as a <div> (two sibling links, not
     one whole-card <a>), so the pointer cursor + hover lift only apply where
     something is actually clickable. */
  #resource-center div.rc-doc{cursor:default;}
  #resource-center div.rc-doc:hover,#resource-center div.rc-doc:focus-within{
    transform:translateY(-4px);border-color:var(--border-active);
    box-shadow:0 8px 30px rgba(0,212,255,.15);}
  #resource-center .rc-doc-links{display:flex;gap:.9rem;}
  #resource-center .rc-doc-links a{text-decoration:none;cursor:pointer;}
  #resource-center .rc-online{color:var(--accent-cyan);font-weight:600;}
  #rc-modal{position:fixed;inset:0;z-index:9999;display:none;
    align-items:center;justify-content:center;padding:2rem;
    background:rgba(6,10,18,.8);backdrop-filter:blur(8px);}
  #rc-modal.open{display:flex;}
  #rc-modal .rc-dialog{width:min(1000px,92vw);}
  #rc-modal .rc-frame{position:relative;aspect-ratio:16/9;width:100%;
    background:#000;border:1px solid var(--border-active);
    border-radius:var(--radius-lg);overflow:hidden;
    box-shadow:0 20px 60px rgba(0,212,255,.2);}
  #rc-modal .rc-frame iframe{width:100%;height:100%;border:0;display:block;}
  #rc-modal .rc-caption{display:flex;justify-content:space-between;gap:1rem;
    color:var(--text-primary);margin-top:1rem;font-size:1rem;}
  #rc-modal .rc-caption .rc-dur{color:var(--text-secondary);white-space:nowrap;}
  #rc-modal .rc-x{position:absolute;top:-3rem;right:0;width:44px;height:44px;
    border-radius:50%;background:var(--gradient-card);border:1px solid var(--border-subtle);
    color:var(--text-primary);font-size:1.4rem;cursor:pointer;}
  #rc-modal .rc-nav{position:absolute;top:50%;transform:translateY(-50%);
    width:48px;height:48px;border-radius:50%;cursor:pointer;
    background:rgba(10,14,26,.7);border:1px solid var(--border-subtle);
    color:#fff;font-size:1.5rem;}
  #rc-modal .rc-nav.prev{left:-1.5rem;} #rc-modal .rc-nav.next{right:-1.5rem;}
  #rc-modal .rc-nav[disabled]{opacity:.3;cursor:default;}
  @media(max-width:600px){#rc-modal .rc-nav.prev{left:.25rem;}#rc-modal .rc-nav.next{right:.25rem;}}
  #resource-center .rc-cta{display:inline-block;margin-bottom:2rem;cursor:pointer;
    padding:.9rem 1.5rem;border-radius:.5rem;border:1px solid var(--border-active);
    background:linear-gradient(90deg,#00D4FF,#8B5CF6);color:#06121c;font-weight:700;font-size:1rem;}
  #rc-gate{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;
    padding:2rem;background:rgba(4,7,13,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
  #rc-gate.open{display:flex;}
  #rc-gate .rc-card{width:min(600px,92vw);background:var(--gradient-card);
    border:1px solid var(--border-active);border-radius:var(--radius-lg);padding:2rem;
    backdrop-filter:blur(12px);color:var(--text-primary);box-shadow:0 24px 70px rgba(0,0,0,.55);}
  /* Two columns: form on the left, privacy disclaimer in the right-side space */
  #rc-gate .rc-gate-cols{display:flex;gap:1.5rem;align-items:center;}
  #rc-gate #rc-gate-formslot{flex:1 1 60%;min-width:0;}
  #rc-gate .rc-disclaimer{flex:1 1 40%;font-size:.78rem;line-height:1.55;color:var(--text-muted);
    border-left:1px solid var(--border-subtle);padding-left:1.25rem;}
  #rc-gate .rc-disclaimer strong{color:var(--text-secondary);font-weight:600;}
  /* Make the WPForms fields fill their column (WPForms defaults to ~60% "medium") */
  #rc-gate .wpforms-form .wpforms-field{max-width:100%;}
  @media(max-width:560px){
    #rc-gate .rc-gate-cols{flex-direction:column;align-items:stretch;gap:1rem;}
    #rc-gate .rc-disclaimer{border-left:0;border-top:1px solid var(--border-subtle);padding-left:0;padding-top:1rem;}
  }
  #rc-gate h3{margin:0 0 .25rem;font-size:1.4rem;}
  #rc-gate p{margin:0 0 1.25rem;color:var(--text-secondary);font-size:.9rem;}
  #rc-gate .rc-gx{float:right;background:none;border:0;color:var(--text-secondary);font-size:1.2rem;cursor:pointer;}
  /* Glass-style the relocated WPForms form so it matches the page */
  #rc-gate .wpforms-container{margin:0;}
  #rc-gate .wpforms-form .wpforms-field{padding:.5rem 0;}
  #rc-gate .wpforms-form .wpforms-field-label{color:var(--text-secondary);font-size:.8rem;font-weight:500;margin-bottom:.25rem;}
  #rc-gate .wpforms-form input[type=text],
  #rc-gate .wpforms-form input[type=email]{
    width:100%;max-width:100%;padding:.6rem .75rem;border-radius:.4rem;background:#0A0E1A;
    border:1px solid var(--border-subtle);color:var(--text-primary);font-size:.95rem;box-sizing:border-box;}
  #rc-gate .wpforms-form .wpforms-field-row,#rc-gate .wpforms-form [class*="wpforms-field-"]{max-width:100%;}
  #rc-gate .wpforms-form input::placeholder{color:var(--text-muted);}
  #rc-gate .wpforms-form .wpforms-submit{
    margin-top:.5rem;width:100%;padding:.8rem;border:0;border-radius:.4rem;cursor:pointer;
    background:linear-gradient(90deg,#00D4FF,#8B5CF6);color:#06121c;font-weight:700;font-size:1rem;}
  #rc-gate .wpforms-confirmation-container-full,#rc-gate .wpforms-confirmation-container{
    color:var(--text-primary);border:1px solid var(--border-active);border-radius:.5rem;
    padding:1rem;background:rgba(0,212,255,.06);margin:0;}
  #rc-gate .wpforms-confirmation-container-full a,#rc-gate .wpforms-confirmation-container a{color:var(--accent-cyan);font-weight:700;}
  #rc-gate .rc-skip{margin-top:1.25rem;text-align:center;}
  #rc-gate .rc-skip a{color:var(--text-secondary);font-size:.85rem;text-decoration:underline;cursor:pointer;}
  #rc-gate .rc-skip a:hover{color:var(--accent-cyan);}
  #rc-download-soon{margin-top:.5rem;color:var(--text-secondary);font-size:.85rem;}
  @media(max-width:900px){
    #resource-center .rc-video{width:46%;} #resource-center .rc-doc{width:44%;}
    #resource-center{padding:3.5rem 1.25rem;}
  }
  @media(max-width:600px){
    #resource-center .rc-video{width:82%;} #resource-center .rc-doc{width:80%;}
    #resource-center h2{font-size:1.75rem;}
  }
  @media(prefers-reduced-motion:reduce){
    #resource-center .rc-track{scroll-behavior:auto;}
    #resource-center .rc-tile{transition:none;}
  }

/* =========================================================
   AMENDMENTS — changes made after the 2026-08-06 extraction.

   Kept below the verbatim body rather than edited into it, so
   the extracted rules stay diffable against
   reference/divi_integration_head.snapshot.html and it stays
   obvious what we changed versus what we inherited.
   ========================================================= */

/* Align the Resource Center's own CTA with the rest of the section.

   Every direct child of #resource-center is constrained and centred by
     #resource-center > *:not(#rc-gate):not(#rc-modal){
       max-width:1280px; margin-left:auto; margin-right:auto; }
   which lands them at x=105 on a 1489px viewport (32px section padding +
   (1425-1280)/2 = 72.5px of auto margin).

   .rc-cta was display:inline-block, and auto margins do not centre an
   inline-level box — so the button ignored that 72.5px and sat hard against
   the section's 32px padding edge, 73px left of the heading, the sub-heading,
   the group headings and the tiles. Measured before the fix: CTA left=32,
   everything else left=105.

   Making it a block with width:fit-content keeps the button hugging its label
   while letting margins apply. margin-left reproduces the same offset the auto
   margins give a 1280px child; max() clamps it to 0 below 1280px viewports,
   where the column is full-bleed and no offset is wanted. margin-right:auto
   (not auto/auto) keeps it LEFT-aligned with the column rather than centring
   it in the section.

   THE :not() CHAIN BELOW IS LOAD-BEARING, not copy-paste. :not() takes the
   specificity of its argument, so the rule being overridden —
   #resource-center > *:not(#rc-gate):not(#rc-modal) — scores (3,0,0): three IDs.
   The obvious-looking `#resource-center > .rc-cta` is only (1,1,0) and loses.
   That is not a silent no-op but an actively wrong result: margin-left falls
   back to `auto`, and auto/auto CENTRES the button. The first attempt did
   exactly that — the CTA went from 32px to 467px, i.e. from too far left to the
   middle of the section. Repeating the same two :not()s scores (3,1,0) and wins
   on the class, without escalating to !important. */
#resource-center > .rc-cta:not(#rc-gate):not(#rc-modal) {
  display: block;
  width: fit-content;
  margin-left: max(0px, calc((100% - 1280px) / 2));
  margin-right: auto;
}

/* ── Download gate: build picker ─────────────────────────────────────────
   Injected by resource-center.js (the gate markup lives in the Divi page,
   which cannot safely carry script/style). Colours follow the existing gate
   so it reads as part of the modal, not bolted on. */
.rc-builds { margin: 0 0 1rem; text-align: left; }
.rc-builds-legend {
  margin: 0 0 .55rem; font-size: .8125rem; letter-spacing: .02em;
  color: #94A3B8; text-transform: none;
}
.rc-build {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .55rem .7rem; margin-bottom: .4rem;
  border: 1px solid rgba(0, 212, 255, 0.18); border-radius: 10px;
  background: rgba(15, 22, 41, 0.55); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.rc-build:hover { border-color: rgba(0, 212, 255, 0.42); background: rgba(15, 22, 41, 0.8); }
.rc-build-cb { margin: .2rem 0 0; flex: 0 0 auto; accent-color: #00D4FF; }
.rc-build-label { flex: 1 1 auto; font-size: .875rem; line-height: 1.4; color: #E8F4F8; }
.rc-build-soon { opacity: .55; cursor: not-allowed; }
.rc-build-soon:hover { border-color: rgba(0, 212, 255, 0.18); background: rgba(15, 22, 41, 0.55); }
.rc-build-tag {
  flex: 0 0 auto; align-self: center; font-size: .6875rem; letter-spacing: .06em;
  text-transform: uppercase; color: #94A3B8;
  border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 999px; padding: .1rem .45rem;
}
.rc-builds-none { margin: .5rem 0 0; font-size: .8125rem; color: #ffb4b4; }
.rc-builds-started { display: none; margin: .75rem 0 0; text-align: left; }
.rc-builds-started p { margin: 0 0 .4rem; font-size: .8125rem; color: #94A3B8; }
.rc-builds-link { display: block; font-size: .8125rem; color: #00D4FF; margin-bottom: .2rem; word-break: break-word; }
