/* Additions for the static build. The vendored site.css is left as-is. */

/* The nav used to scroll via JavaScript; plain anchors replace it. */
html { scroll-behavior: smooth; }

/* The navbar is fixed-top, so an anchor target would otherwise land underneath
   it. Keep this comfortably larger than the navbar height. */
[id^="section-"] { scroll-margin-top: 90px; }

/* These are real links now, so they should feel like links. */
.nav-link[href] { cursor: pointer; }

/* Parked for A/B testing: markup stays in the document, nothing renders.
   Set SHOW_VIDEO = True in tools/build-static.sh to bring it back. */
.ab-hidden { display: none !important; }

/* The promo video, embedded where the dead play button used to be. A plain
   aspect-ratio box keeps it 16:9 at every width without any JavaScript. */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 2rem auto 0;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The Examples thumbnails are links now, so give them a hover cue — a picture
   that opens something should look like it will. */
.h-entry a > img { display: block; transition: opacity .2s ease, transform .2s ease; }
.h-entry a:hover > img { opacity: .9; transform: translateY(-2px); }

/* --- Examples: inline disclosure panels ---------------------------------
   Clicking an Examples card reveals its content here rather than navigating to
   a separate page. This is pure CSS: :target matches the panel whose id is in
   the URL fragment, so exactly one panel can be open at a time and no
   JavaScript is needed. The fragment also makes an open panel linkable.
   The surrounding section is dark, so the panel supplies its own light
   background and text colour. */
.example-panel {
  display: none;
  background: #fff;
  color: #4d4d4d;
  text-align: left;
  border-radius: 4px;
  padding: 2.5rem;
  margin-top: 2.5rem;
  scroll-margin-top: 90px;
}
.example-panel:target { display: block; }
.example-panel h3 { margin-bottom: 0; }
/* Slightly larger and looser than the site default: this is the one place on
   the page with a real block of prose to read. */
.example-panel p {
  color: #4d4d4d;
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 62ch;
}

.example-panel-close {
  display: inline-block;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* --- language switcher ---------------------------------------------------
   Last item in the menu, set apart from the section links above it: those
   scroll within the page, this one leaves for the other language tree. */
.nav-lang {
  font-weight: 700;
  letter-spacing: .08em;
}
@media (min-width: 992px) {
  .nav-lang {
    margin-left: .35rem;
    padding-left: .9rem !important;
    border-left: 1px solid rgba(255, 255, 255, .35);
  }
}

/* --- mobile menu: three-line burger, no JavaScript ----------------------
   The original off-canvas menu was assembled by JavaScript, so removing the JS
   left a bare wrapped row of links. This replaces it with a proper burger.

   The mechanism is CSS :target — the burger is a link to #menu, and the menu
   panel shows while it is the document target. Tapping a menu item moves the
   fragment on to #section-..., so the panel closes itself; a checkbox toggle
   would stay open and cover the page. Targeting an element inside a
   position:fixed header scrolls nothing, so the page does not jump. */
.nav-burger { display: none; }
.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-burger span + span { margin-top: 5px; }

@media (max-width: 991.98px) {
  /* Pin the header. Despite the .fixed-top class the template computes this to
     position:absolute at phone widths, so it scrolls away with the page — and
     opening the menu moves the fragment, which scrolls roughly 60px and takes
     the logo and the close button off screen with it. Fixed keeps both in view
     and keeps the dropdown anchored to something that cannot scroll away.
     The scrim keeps white bars and links legible over whatever hero image
     happens to sit behind them. */
  #site-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .55);
  }

  /* The panel is positioned against the header, so nothing between the two may
     be a positioned ancestor. Bootstrap grid columns are position:relative, so
     #menu itself has to be neutralised as well — leaving it relative anchors the
     panel to the 10-column box and the dropdown comes out narrower than the
     screen, stopping short of the right edge. */
  .site-navigation { position: static !important; }
  #menu { position: static !important; }

  .nav-burger {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 44px;               /* 44px keeps it a comfortable touch target */
    height: 44px;
    padding: 11px 10px;
    z-index: 30;
  }
  .nav-burger-open { display: block; }
  .nav-burger-close { display: none; }

  /* Swap the burger for a cross while the menu is open. :has() is what allows a
     parent to react to the targeted child; where it is unsupported the burger
     simply stays three lines and everything else still works. */
  .row:has(#menu:target) .nav-burger-open { display: none; }
  .row:has(#menu:target) .nav-burger-close { display: block; }
  .nav-burger-close span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger-close span:nth-child(2) { opacity: 0; }
  .nav-burger-close span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  #menu { scroll-margin-top: 0; }
  #menu .site-menu { display: none; }
  #menu:target .site-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: .25rem 0 .75rem;
    background: rgba(0, 0, 0, .94);
    text-align: center;
  }
  #menu:target .site-menu li { display: block; }
  #menu:target .site-menu .nav-link {
    display: block;
    padding: .85rem 1rem;
    font-size: 1rem;
    letter-spacing: .06em;
  }
}

@media (max-width: 575.98px) {
  .example-panel { padding: 1.5rem; }
}