/* ==========================================================================
   Cluck'IZ — mobile hamburger menu
   --------------------------------------------------------------------------
   Works on both nav shells: the homepage bar (.nav) and the inner-page bar
   (.site-nav). Driven by a checkbox, so it opens and closes with no
   JavaScript; js/nav.js only adds the niceties (close on link tap / Escape).

   Sized in px so it is unaffected by the homepage's 1280px design canvas.
   ========================================================================== */

/* ---- hidden on desktop ---- */
.nav-toggle,
.nav-burger,
.nav-brand{display:none}

/* ==========================  MOBILE  ================================== */
@media (max-width:767px){

  .nav-toggle{
    position:absolute;
    opacity:0;
    width:44px;height:44px;
    right:12px;top:8px;
    margin:0;
    z-index:2;
    cursor:pointer;
    display:block;
  }

  /* ---- the button ---- */
  .nav-burger{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:44px;height:44px;
    padding:0 9px;
    cursor:pointer;
    z-index:1;
  }
  .nav-burger span{
    display:block;
    height:2px;
    width:100%;
    background:#fff;
    border-radius:2px;
    transition:transform .25s ease,opacity .2s ease;
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .nav-toggle:focus-visible ~ .nav-burger{outline:2px solid #fac01f;outline-offset:2px;border-radius:6px}

  /* ================= homepage bar (.nav) ================= */
  .nav{
    position:sticky;top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:56px;
    padding:0 8px 0 12px;
    background:#000;
  }
  .nav-brand{
    display:flex;
    align-items:center;
    height:100%;
    padding:0;
  }
  /* The PNG is a 500x500 canvas holding artwork of only ~297x412, and that
     artwork sits 8px above the canvas centre. So: size it up to fill the bar
     properly, then nudge it back down so it is optically centred. */
  .nav-brand img{height:46px;width:auto;transform:translateY(1px)}

  .nav .nav-toggle{right:12px;top:6px}

  /* dropdown panel */
  .nav ul{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:0;
    background:#000;
    border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 18px 34px rgba(0,0,0,.55);

    /* closed */
    max-height:0;
    overflow:hidden;
    visibility:hidden;
    transition:max-height .3s ease,visibility 0s linear .3s;
  }
  .nav .nav-toggle:checked ~ ul{
    max-height:80vh;
    overflow-y:auto;
    visibility:visible;
    transition:max-height .35s ease,visibility 0s;
  }
  .nav li{padding:0;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav li:last-child{border-bottom:0}
  /* scoped to `ul a` so the brand link keeps its own box */
  .nav ul a{
    display:block;
    padding:15px 20px;
    font-size:1rem;
    text-align:left;
  }
  .nav ul a:active{background:rgba(255,255,255,.06)}

  /* ================= inner-page bar (.site-nav) ================= */
  .site-nav .wrap{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
    gap:12px;
    min-height:56px;
    padding-top:0;
    padding-bottom:0;
  }
  .site-nav .brand img{height:42px;transform:translateY(1px)}
  .site-nav .brand span{font-size:15px}

  .site-nav .nav-toggle{right:14px;top:6px}

  .site-nav ul{
    position:absolute;
    /* .wrap is the containing block and its padding box already spans the
       full width, so 0/0 is full-bleed; the padding re-aligns the items
       with the brand. */
    top:100%;left:0;right:0;
    width:auto;
    padding:0 18px;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    background:#000;
    border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 18px 34px rgba(0,0,0,.55);

    max-height:0;
    overflow:hidden;
    visibility:hidden;
    transition:max-height .3s ease,visibility 0s linear .3s;
  }
  .site-nav .nav-toggle:checked ~ ul{
    max-height:80vh;
    overflow-y:auto;
    visibility:visible;
    transition:max-height .35s ease,visibility 0s;
  }
  .site-nav li{border-bottom:1px solid rgba(255,255,255,.07)}
  .site-nav li:last-child{border-bottom:0}
  .site-nav a.nav-link{
    padding:15px 2px;
    border-radius:0;
    font-size:1rem;
  }
  .site-nav a.nav-cta{
    display:block;
    margin:14px 2px 18px;
    text-align:center;
    padding:13px 20px;
    font-size:15px;
  }
}