:root{
  --card-radius: 12px;
  /* light defaults kept minimal */
  --bg: #ffffff;
  --muted: #6c757d;
}

/* Catppuccin Mocha-inspired (slightly darker) */
:root[data-bs-theme="dark"]{
  --bg: #0b0c10; /* mocha base */
  --surface: #111217;
  --muted: #98a0bf;
  --inverse: #dce0f7;
  --accent: #f5c2e7; /* pink */
  --accent-2: #fab387; /* peach */
  --accent-gradient: linear-gradient(90deg, #f5c2e7, #fab387);
  --nav-hover: linear-gradient(90deg, rgba(245,194,231,0.12), rgba(250,179,135,0.08));
  --card-bg: rgba(255,255,255,0.03);
  --card-elev: rgba(5,6,10,0.7);
  --nav-bg-top: rgba(12,10,16,0.95);
  --nav-bg-bottom: rgba(8,7,12,0.9);
  --overlay-top: rgba(6,6,10,0.65);
  --overlay-bottom: rgba(4,4,8,0.8);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  /* Make the document a column flex container so footer can stick to the bottom when
     content is short. main will take remaining space (see rule below). */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--inverse, #0f1720);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.site-hero{
  background: linear-gradient(180deg, rgba(13,110,253,0.02), rgba(13,110,253,0.01));
  padding-top:4.5rem;
  padding-bottom:4.5rem;
  min-height:56vh;
}

/* Dark navbar that sits above the hero */
.navbar-dark.bg-dark{
  background: linear-gradient(180deg, var(--nav-bg-top), var(--nav-bg-bottom));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px) saturate(.9);
  transition: background .32s ease;
}
.navbar-dark .navbar-brand, .navbar-dark .nav-link{color:var(--inverse) !important}
.navbar-dark .nav-link{opacity:.92}
.navbar-dark .nav-link:hover{opacity:1}
.navbar-toggler{border-color:rgba(255,255,255,0.06)}
.navbar-toggler-icon{filter:invert(1) brightness(1.2)}

/* Logo sizing */
.site-logo{height:28px; width:auto; display:inline-block}

/* Navbar link underline animation (no boxed background) */
.navbar-dark .nav-link{
  position: relative;
  padding: 6px 8px;
  color: var(--inverse) !important;
  transition: color .18s ease;
}
.navbar-dark .nav-link::after{
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  height: 2px;
  background: var(--accent-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s cubic-bezier(.2,.9,.3,1);
  border-radius: 2px;
  opacity: .95;
}
.navbar-dark .nav-link:hover::after,
.navbar-dark .nav-link:focus::after,
.navbar-dark .nav-link:active::after{
  transform: scaleX(1);
}
.navbar-dark .nav-link:focus-visible{outline: none;}

/* Keep link text and underline white; change navbar background when a specific link is hovered/focused
   Modern browsers will use :has; older browsers will have JS add nav-hover-* classes as a fallback. */
.navbar-dark .nav-link{ color: var(--inverse) !important; }
.navbar-dark .nav-link::after{ background: rgba(0,0,0,0.6); }


/* Remove navbar background color swapping: keep bar color stable and only tint the underline per-link */

/* Underline color variables (vibrant choices) */
:root[data-bs-theme="dark"]{
  --underline-league: #8c0d0d; /* vibrant red */
  --underline-guide:  #04620a; /* bright aqua */
  --underline-contact:#1e90ff; /* dodger blue */
  /* add navbar hover color for Contact (dark blue) */
  --nav-hover-contact: #002b5c;
}

/* Default underline is white; when hovering/focusing a specific link, tint the underline */
.navbar-dark .nav-link::after{ background: rgba(255,255,255,0.92); }
.navbar-dark .nav-link.nav-league:hover::after,
.navbar-dark .nav-link.nav-league:focus::after{ background: var(--underline-league); }
.navbar-dark .nav-link.nav-guide:hover::after,
.navbar-dark .nav-link.nav-guide:focus::after{ background: var(--underline-guide); }
.navbar-dark .nav-link.nav-contact:hover::after,
.navbar-dark .nav-link.nav-contact:focus::after{ background: var(--underline-contact); }
/* Make the solid backgrounds appear tinted (subtle inset glow + thin border) so the hue reads on very dark colors */
.navbar-dark.nav-hover-league{
  background: var(--nav-hover-league);
  box-shadow: inset 0 40px 80px rgba(255,60,60,0.12), 0 10px 30px rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(255,60,60,0.12);
}
.navbar-dark.nav-hover-guide{
  background: var(--nav-hover-guide);
  box-shadow: inset 0 40px 80px rgba(0,200,220,0.12), 0 10px 30px rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(0,200,220,0.12);
}
.navbar-dark.nav-hover-contact{
  background: var(--nav-hover-contact);
  box-shadow: inset 0 40px 80px rgba(0,60,140,0.12), 0 10px 30px rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(0,60,140,0.12);
}

/* If the browser supports :has, change the full navbar when any nav-link is hovered/focused */
@supports(selector(:has(*))) {
  .navbar-dark:has(.nav-link:hover), .navbar-dark:has(.nav-link:focus){
    background: var(--nav-hover);
  }
}

/* Fallback when :has is not supported: use `.nav-active` class toggled by JS */
.navbar-dark.nav-active{
  background: var(--nav-hover);
}

/* Hero video and overlay */
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:brightness(.36) contrast(1.02) saturate(.95)}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, var(--overlay-top), var(--overlay-bottom)); z-index:1}
.site-hero > .container{position:relative; z-index:2}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,0.03)}
.placeholder-visual{height:100%; font-size:2.5rem; color:var(--accent)}

h1.display-5{font-weight:600}
.lead{font-size:1.05rem}
.text-light-50{color:rgba(255,255,255,0.85)}

.icon-box{width:56px;height:56px}
.icon-box i{font-size:1.5rem}
.feature-card{position:relative; text-align:left; border-radius:var(--card-radius); transition:transform .22s ease, box-shadow .22s ease, background .22s ease; border:0; background:var(--card-bg, rgba(255,255,255,0.02)); color:var(--inverse)}
.feature-card:focus{outline:3px solid rgba(13,110,253,0.16); outline-offset:2px}
.feature-card:hover{transform:translateY(-6px); box-shadow:0 14px 40px var(--card-elev, rgba(2,6,23,0.6))}
.feature-card .feature-arrow{position:absolute; right:14px; top:18px; color:var(--muted); transition:transform .18s ease; font-weight:600}
.feature-card:hover .feature-arrow{transform:translateX(6px)}

.features-section .row{align-items:stretch}

/* Use Bootstrap's grid and gutters (keep `.row g-*` on the HTML). Cards are full-height so they align. */
/* Bootstrap gutters control column spacing — no custom column padding required */

/* Reduce internal padding of flip faces for a tighter layout */
.flip-front, .flip-back{padding:0.75rem}

/* When cards are adjacent, avoid double borders by slightly reducing radius on inner edges.
   We'll keep full radius on outermost cards using nth-child heuristics for common grid sizes. */
#features-grid .feature-card{height:100%}

/* Make outer .feature-card transparent so inner faces form the visible card surface */
#features-grid .feature-card{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Also override any shadow utility classes or bootstrap button backgrounds inside the features grid */
#features-grid .shadow, #features-grid .shadow-sm, #features-grid .btn{
  box-shadow: none !important;
  background: transparent !important;
}

/* Make sure column wrappers don't contribute backgrounds/shadows */
#features-grid > [class*="col-"]{background:transparent !important; box-shadow:none !important}

/* Ensure the visible card surface is the flip-front / flip-back */
#features-grid .flip-front, #features-grid .flip-back{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: var(--card-radius) !important;
  padding: 1rem !important;
}
/* Inner faces are the visible surfaces: give them the card background and elevation */
#features-grid .flip-front, #features-grid .flip-back{
  background: var(--card-bg) !important;
  box-shadow: 0 6px 20px rgba(2,6,23,0.45) !important;
  border-radius: var(--card-radius) !important;
  padding: 1rem !important;
}

/* Make inner flipper fill the parent so there is no visible outer surface */
#features-grid .flip-root, #features-grid .flip-inner{width:100%; height:100%; display:block}
#features-grid .flip-front, #features-grid .flip-back{width:100%; height:100%; box-sizing:border-box}

/* Ensure columns themselves have no background */
#features-grid > [class*="col-"]{background:transparent}
#features-grid .feature-card:nth-child(4n+1){border-top-left-radius:var(--card-radius); border-bottom-left-radius:var(--card-radius)}
#features-grid .feature-card:nth-child(4n){border-top-right-radius:var(--card-radius); border-bottom-right-radius:var(--card-radius)}
#features-grid .feature-card:first-child{border-top-left-radius:var(--card-radius)}

/* The flip faces should be the single visible card surfaces */
#features-grid .flip-front, #features-grid .flip-back{
  background: var(--card-bg) !important;
  box-shadow: 0 8px 30px rgba(2,6,23,0.5) !important;
  border-radius: var(--card-radius) !important;
  z-index:1;
}

/* On small screens where cards stack, restore full radius per card */
@media (max-width:767px){
  #features-grid > [class*="col-"]{padding-left:.4rem; padding-right:.4rem}
  #features-grid .feature-card{border-radius:var(--card-radius)}
}

/* Responsive typography and spacing */
html{font-size:16px}
body{font-size:clamp(14px, 1.6vw, 16px)}

/* Make the main content area expand to push footer to the bottom */
main{flex:1}
h1.display-5{font-size:clamp(1.6rem, 4.2vw, 2.6rem)}
.lead{font-size:clamp(1rem, 2.2vw, 1.05rem)}

/* Smaller hero on small devices */
@media (max-width:991px){
  .site-hero{min-height:48vh; padding-top:3.5rem; padding-bottom:3.5rem}
  .site-hero .display-5{font-size:1.8rem}
  .hero-blob.big{width:320px; height:320px; opacity:.12}
  .hero-blob.small{width:180px; height:180px; opacity:.12; left:6%; top:12%}
  .hero-video{filter:brightness(.4) contrast(1)}
}

@media (max-width:767px){
  /* Stack hero content and center */
  .site-hero .row{align-items:center}
  .site-hero .col-lg-7{flex:0 0 100%; max-width:100%; text-align:center}
  .site-hero .display-5{font-size:1.45rem}
  .site-hero .lead{font-size:0.98rem}
  .d-flex.gap-2{flex-direction:column}
  .btn-lg{padding:.6rem 1rem; font-size:0.95rem}

  /* Reduce icon sizes and card padding on mobile */
  .icon-box{width:44px; height:44px}
  .icon-box i{font-size:1.1rem}
  .feature-card{padding:.8rem}
  .flip-front, .flip-back{padding:.8rem}

  /* Make blobs less intrusive on small screens */
  .hero-blob{filter:blur(30px); opacity:.08}

  /* Adjust nav paddings for smaller touch targets but keep readability */
  .navbar{padding-top:.35rem; padding-bottom:.35rem}
  .navbar-dark .nav-link{padding:8px 6px}
}

/* Very small phones: further reductions */
@media (max-width:420px){
  html{font-size:15px}
  .site-hero{min-height:40vh}
  .hero-blob.big{display:none}
  .hero-blob.small{width:140px; height:140px; left:4%; top:8%}
  .icon-box{width:40px; height:40px}
  .feature-card{padding:.6rem}
  .navbar-brand .site-logo{height:24px}
}

/* simple reveal-on-scroll */
.reveal{opacity:0; transform:translateY(18px) scale(.995); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1)}
.reveal.visible{opacity:1; transform:translateY(0) scale(1)}

/* Flip card styles */
.feature-card{padding:0; overflow:visible}
.flip-root{perspective:1200px}
.flip-inner{position:relative; width:100%; height:100%; transition:transform .7s cubic-bezier(.2,.9,.3,1); transform-style:preserve-3d}
.flip-front, .flip-back{position:relative; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--card-radius); min-height:100%; padding:1.1rem}
.flip-front{background:var(--card-bg); display:flex; align-items:center}
.flip-back{position:absolute; inset:0; top:0; left:0; transform:rotateY(180deg); background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); display:flex; align-items:center}
.feature-card.is-flipped .flip-inner{transform:rotateY(180deg)}

.flip-back .feature-back-content{width:100%}
.flip-back p{margin:0; color:rgba(255,255,255,0.9)}

/* ensure keyboard focus still shows a visible ring */
.feature-card:focus-visible{outline:3px solid rgba(13,110,253,0.16); outline-offset:3px}

/* modal icon */
.modal-icon{width:56px;height:56px}
.modal-icon i{font-size:1.3rem}

/* small helpers */
.kbd{background:#f7f7f8; border-radius:6px; padding:2px 6px}

/* responsive adjustments */
@media (max-width:767px){
  .site-hero{padding-top:3rem; padding-bottom:3rem}
  .placeholder-visual{font-size:2rem}
}

/* Accessibility: focus visible for keyboard users */
:focus:not(:focus-visible){outline:0}

/* small polished footer */
/* small polished footer */
footer{font-size:.9rem}

/* deep dark footer styling */
footer.py-4.bg-light, footer{
  background: linear-gradient(180deg, var(--nav-bg-top), var(--nav-bg-bottom));
  border-top: 1px solid rgba(255,255,255,0.03);
  color:var(--inverse);
}
.footer-link{color:rgba(255,255,255,0.78); text-decoration:none}
.footer-link:hover{color:var(--inverse); text-decoration:underline}

/* --- Catppuccin flair additions --- */
/* Gradient CTA using the accent gradient and subtle glow */
.btn-cta-gradient{background:var(--accent-gradient); color:#0b0c10; font-weight:600; box-shadow:0 8px 30px rgba(245,194,231,0.08); border:none}
.btn-cta-gradient:hover{filter:brightness(1.02) saturate(1.05); box-shadow:0 18px 50px rgba(245,194,231,0.12)}

/* Primary CTA: make it a solid aqua and add a bounce-up on hover */
#primary-cta{background:linear-gradient(180deg,var(--primary-aqua,#0084ff),var(--primary-aqua-dark,#0084ff)); color:#ffffff; font-weight:700; border:none}

/* Subtle shadow and transition for movement */
#primary-cta{box-shadow:0 10px 30px rgba(0,206,224,0.08); transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s ease}

/* Hover: bump up slightly and increase shadow for pop */
#primary-cta:hover, #primary-cta:focus{transform:translateY(-8px); box-shadow:0 22px 48px rgba(0,206,224,0.16); outline:none}

/* Add a keyframe for a playful bounce when hovering — starts with a quick lift and small overshoot */
@keyframes bounceUp {
  0% { transform: translateY(0); }
  30% { transform: translateY(-12px); }
  60% { transform: translateY(-6px); }
  100% { transform: translateY(-8px); }
}

/* Apply the animation on hover for a short duration */
#primary-cta:hover{animation: bounceUp .45s cubic-bezier(.2,.9,.3,1) both}

/* Focus-visible accessibility state */
#primary-cta:focus-visible{box-shadow:0 0 0 4px rgba(0,206,224,0.12)}

/* Subtle animated glow on feature-card when hovered (accent tone) */
#features-grid .flip-front::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:linear-gradient(120deg, rgba(245,194,231,0.04), rgba(250,179,135,0.02)); opacity:0; transition:opacity .35s ease, transform .6s ease; transform:translateZ(0);
}
#features-grid .feature-card:hover .flip-front::before{opacity:1}

/* Accent underline ripple for CTA */
.cta-underline{position:relative; display:inline-block}
.cta-underline::after{content:''; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:6px; background:var(--accent-gradient); transform:scaleX(0); transform-origin:left center; transition:transform .4s cubic-bezier(.2,.9,.3,1)}
.cta-underline:hover::after{transform:scaleX(1)}

/* Floating decorative blob in hero */
.hero-blob{position:absolute; width:420px; height:420px; border-radius:50%; filter:blur(36px); opacity:.14; z-index:0; pointer-events:none; mix-blend-mode:screen; background:radial-gradient(circle at 30% 30%, rgba(245,194,231,0.95), rgba(250,179,135,0.6) 35%, rgba(245,194,231,0.12) 60%, transparent 70%)}
.hero-blob.small{width:260px; height:260px; left:10%; top:20%}
.hero-blob.big{right:6%; top:6%}

/* gentle float animation */
@keyframes floaty { 0%{transform:translateY(0) translateX(0)} 50%{transform:translateY(-12px) translateX(6px)} 100%{transform:translateY(0) translateX(0)} }
.hero-blob{animation: floaty 8s ease-in-out infinite}

/* Make CTA and primary actions pop on focus for accessibility */
.btn-cta-gradient:focus{box-shadow:0 0 0 4px rgba(245,194,231,0.12); outline: none}

/* Make small KBD and help elements darker to match theme */
.kbd{background:rgba(255,255,255,0.04); color:var(--inverse); border-radius:6px; padding:4px 8px}

/* Documentation page styles */
.docs-wrapper{min-height:calc(100vh - 56px)}
.docs-sidebar{width:280px; border-right:1px solid rgba(255,255,255,0.03); position:sticky; top:56px; height:calc(100vh - 56px); overflow:auto}
.sidebar-header{border-bottom:1px solid rgba(255,255,255,0.02)}
.sidebar-item{background:transparent; color:var(--inverse); border-radius:6px; padding:.5rem .6rem; text-align:left}
.sidebar-item:hover{background:rgba(255,255,255,0.02)}
/* Remove default button background/outline when not focused via keyboard */
.sidebar-item{border:0; box-shadow:none}
.sidebar-item:focus{outline: none}
.sidebar-item:focus-visible{outline: none; box-shadow: 0 0 0 4px rgba(0,122,255,0.12); border-radius:6px}
.sidebar-item.active{background:linear-gradient(90deg, rgba(0,122,255,0.12), rgba(0,122,255,0.06)); border-left:3px solid rgba(0,122,255,0.9); color:var(--inverse); font-weight:600}
.docs-content{max-width:920px}
.doc-article{background:transparent; color:var(--inverse); line-height:1.65}
.doc-article h1, .doc-article h2, .doc-article h3{color:var(--inverse); margin-top:1.25rem}
.doc-article pre{background:rgba(255,255,255,0.03); padding:1rem; border-radius:8px; overflow:auto}
.doc-article code{background:rgba(255,255,255,0.03); padding:.12rem .36rem; border-radius:4px}
.doc-article img{max-width:100%; height:auto; border-radius:6px}

/* Admonition blocks (notes, tips, warnings) */
.admonition{border-radius:10px; padding:12px; margin:12px 0; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03)}
.admonition .admonition-title{font-weight:700; margin-bottom:6px}
.admonition .admonition-body{line-height:1.5}
.admonition-note{background:linear-gradient(90deg, rgba(245,194,231,0.03), rgba(250,179,135,0.02)); border-left:4px solid rgba(245,194,231,0.5)}
.admonition-info{background:linear-gradient(90deg, rgba(13,110,253,0.03), rgba(13,110,253,0.02)); border-left:4px solid rgba(13,110,253,0.45)}
.admonition-tip{background:linear-gradient(90deg, rgba(0,206,224,0.03), rgba(0,206,224,0.02)); border-left:4px solid rgba(0,206,224,0.45)}
.admonition-warning{background:linear-gradient(90deg, rgba(255,165,0,0.03), rgba(255,165,0,0.02)); border-left:4px solid rgba(255,165,0,0.45)}
.admonition-danger{background:linear-gradient(90deg, rgba(255,80,80,0.03), rgba(255,80,80,0.02)); border-left:4px solid rgba(255,80,80,0.45)}

.doc-article table{width:100%; border-collapse:collapse}
.doc-article table th, .doc-article table td{border:1px solid rgba(255,255,255,0.04); padding:.5rem}

/* Mobile adjustments: make sidebar collapsible (simple stack) */
@media (max-width: 991px){
  .docs-wrapper{flex-direction:column}
  .docs-sidebar{width:100%; height:auto; position:relative; top:0}
  .docs-content{padding:1rem}
}

/* Interactive docs styles */
.sidebar-item.active{background:linear-gradient(90deg, rgba(0,122,255,0.12), rgba(0,122,255,0.06)); border-left:3px solid rgba(0,122,255,0.9); color:var(--inverse); font-weight:600}
.copy-code-btn{font-size:.75rem; padding:.18rem .4rem}
.doc-article pre{position:relative; background:rgba(0,0,0,0.28); color:var(--inverse); border-radius:8px; padding:1rem; overflow:auto}
.doc-article code{background:rgba(255,255,255,0.02); padding:.15rem .4rem; border-radius:6px}
.doc-article h2{border-bottom:1px dashed rgba(255,255,255,0.03); padding-bottom:.4rem}
.doc-article blockquote{border-left:3px solid rgba(255,255,255,0.06); padding: .6rem 1rem; background: rgba(255,255,255,0.02); border-radius:6px}
.doc-article table{background:transparent}
.doc-article ul{padding-left:1.2rem}

/* Small adjustments to sidebar search */
#doc-search{background:rgba(255,255,255,0.02); color:var(--inverse); border:1px solid rgba(255,255,255,0.03)}