/* =========================================
   RIGHT-SIDE DRAWER — Mobile + Desktop
   ========================================= */

/* Drawer width */
:root{ --drawerW: 85vw; }
@media (min-width:783px){ :root{ --drawerW: 50vw; } } /* desktop ~half */

/* Dim page behind when open (non-blocking) */
body.has-modal-open::after{
  content:""; position:fixed; inset:0;
  background:rgba(0,0,0,.55); z-index:9999; pointer-events:none;
}

/* Prevent base bg */
.wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container{ background:transparent !important; }

/* ---- INNER PANEL ---- */
.wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container > .wp-block-navigation__responsive-container-content{
  position:fixed !important;
  top:0; right:0; bottom:0; left:auto;
  width:min(var(--drawerW), 640px);
  height:100vh; overflow-y:auto; z-index:10000 !important;

  /* DARKER OVERLAY on top of background image */
  background:
    linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,.85)),
    url(/wp-content/uploads/2025/08/IMG_9559-e1755650023186.jpg)
    center/cover no-repeat !important;

  transform:none !important; /* avoid flicker */
  box-shadow:-12px 0 24px rgba(0,0,0,.35);
}

/* ---- Slide-in animation ---- */
@keyframes drawerFromRight { from { transform:translateX(100%);} to { transform:translateX(0);} }

.wp-block-navigation__responsive-dialog[open]
  .wp-block-navigation__responsive-container-content{
  animation: drawerFromRight 2s ease both;
}

.wp-block-navigation__responsive-container.is-menu-open
  > .wp-block-navigation__responsive-container-content{
  animation: drawerFromRight 2s ease both;
}

/* Close button */
.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__responsive-dialog__close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
  position:absolute !important; top:16px !important; right:16px !important;
  color:#fff !important; font-size:24px; z-index:10001 !important;
}

/* Links */
.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  min-height:100%;
  display:flex !important; flex-direction:column !important;
  justify-content:center !important; gap:28px !important;
  padding:24px !important;
}

/* Right-align text on desktop */
@media (min-width:1024px){
  .wp-block-navigation__responsive-dialog[open] .wp-block-navigation__container,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
    align-items:flex-end; text-align:right; padding-right:32px !important;
  }
}

.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__container a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container a{
  color:#fff !important; text-shadow:0 2px 6px rgba(0,0,0,.6);
  text-decoration:none !important; font-size:1.15em;
}

/* … (rest of your slide / animation / hamburger code unchanged) … */

/* Push nav (hamburger) to far right */
header .is-layout-flex .wp-block-navigation{ margin-left:auto !important; }

/* 3-bar hamburger */
.wp-block-navigation__responsive-container-open svg { display:none; }
.wp-block-navigation__responsive-container-open::before,
.wp-block-navigation__responsive-container-open::after,
.wp-block-navigation__responsive-container-open span{
  content:""; display:block; width:24px; height:3px;
  background:#fff; margin:5px 0; border-radius:2px;
}
.wp-block-navigation__responsive-container-open{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  width:40px; height:40px;
}

/* --- 1) Darker overlay on the drawer panel image --- */
.wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container > .wp-block-navigation__responsive-container-content{
  background:
    /* tune these two numbers to adjust darkness (0=clear, 1=black) */
    linear-gradient(rgba(0,0,0,.50), rgba(0,0,0,.25)),
    url(/wp-content/uploads/2025/08/IMG_9559-e1755650023186.jpg)
    center/cover no-repeat !important;
}

/* --- 2) Force right-aligned menu text (both mobile & desktop) --- */
.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  align-items: flex-end !important;   /* push items to the right edge */
  text-align: right !important;
  padding-right: 32px !important;
}
/* === Bigger Drawer Menu Text === */
.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__container a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container a{
  font-size:2em !important;   /* increase size */
  font-weight:700;            /* optional: make it a little bolder */
  line-height:1.3;            /* add spacing for readability */
}