/* =========================================================
   public/assects/css/sidebar.css — Bal oldali (page) menü kis nyíllal + belengés
   ========================================================= */

.page-layout{ display:flex; gap:2em; align-items:flex-start; margin:1em auto 2em; }
.page-layout aside{ flex:0 0 250px; border-right:1px solid #ccc; padding-right:1em; }
.page-layout article{ flex:1; background:#fff; padding:2em; border-radius:6px; box-shadow:0 0 8px rgba(0,0,0,.05); }

@media (max-width:768px){
  .page-layout{ flex-direction:column; }
  .page-layout aside{ border-right:none; padding-right:0; margin-bottom:1em; }
}

/* Lista + kis nyíl (arrow.gif) — minimális „belengés” hoverkor */
.page-layout aside ul{ list-style:none; padding-left:0; margin:0; }
.page-layout aside ul li{ border-top:1px dotted #ccc; }
.page-layout aside ul li:last-child{ border-bottom:1px dotted #ccc; }

.page-layout aside ul li a{
  display:block; padding-left:20px; line-height:30px;
  color:#333; text-decoration:none;
  background:url("../../storage/site/arrow.gif") no-repeat 0 9px;
  transition: background-position .15s ease, color .15s ease;
}
.page-layout aside ul li a:hover,
.page-layout aside ul li a[style*="font-weight: bold"]{
  color:var(--brand-maroon); background-position:5px 9px;
}

/* ==== Mobil off-canvas side menu ==== */
.side-toggle{
  display: none; /* desktopon rejtve */
  border:1px solid #d0d0d0; border-radius:10px; background:#fff;
  padding:8px 12px; cursor:pointer; font-family:var(--font-head);
  margin-bottom: .75rem;
}
.side-toggle:focus-visible{ outline:3px solid #1a73e8; outline-offset:2px; }

/* Scrim az oldalon: alapból rejtve, body[data-side-open] alatt látszik */
.side-scrim{
  position: fixed; inset: 0; background: rgba(0,0,0,.42);
  z-index: 999; display: none;
}
body[data-side-open="true"] .side-scrim{ display: block; }
body[data-side-open="true"] .side-scrim[hidden]{ display:block; } /* védőháló */

@media (max-width: 768px){
  /* A gomb mobilon legyen látható */
  .side-toggle{ display: inline-flex; align-items:center; gap:.5rem; }

  /* Az aside off-canvas fiókká válik */
  .page-layout .side-nav{
    position: fixed; top: 0; left: 0;
    height: 100dvh; width: min(84vw, 320px);
    background: #fff;
    border-right: 1px solid #ddd;
    box-shadow: 2px 0 18px rgba(0,0,0,.18);
    padding: 16px;
    overflow: auto;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1000;
  }
  body[data-side-open="true"] .page-layout .side-nav{
    transform: translateX(0);
  }

  /* A fő tartalom ne kapjon bal oldali fix szélt mobilon */
  .page-layout{ flex-direction: column; gap: 1rem; }
  .page-layout article{ width: 100%; }

  /* A desktopos border/padding az aside-on mobilon ne zavarjon */
  .page-layout aside{ border-right: none; padding-right: 0; }
 
  /* Biztonsági korlát: tartalom ne fusson túl */
  .page-layout article{
    max-width: 100%;
    overflow-x: hidden;
  }
  
}