/* เว็บไซต์โรงเรียนวัดทิพพาวาส รุ่น 22 — แถบเมนูด้านข้างแบบติดตามหน้าจอ */
:root{
  --public-sidebar-width:304px;
  --public-sidebar-z:1120;
}

body.site-public{
  transition:padding-left .24s ease;
}

.site-header .brand-row{
  position:relative;
  padding-left:78px;
}

.nav-toggle.public-sidebar-toggle{
  display:inline-flex!important;
  position:fixed;
  left:max(14px,var(--safe-left));
  top:max(104px,calc(var(--safe-top) + 76px));
  z-index:1110;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:58px;
  min-height:50px;
  padding:10px 14px;
  border:1px solid color-mix(in srgb,var(--blue) 24%,#fff);
  border-radius:0 14px 14px 0;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;
  font-weight:900;
  box-shadow:0 10px 28px rgba(15,23,42,.24);
  cursor:pointer;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}

.nav-toggle.public-sidebar-toggle:hover,
.nav-toggle.public-sidebar-toggle:focus-visible{
  text-decoration:none;
  transform:translateX(3px);
}

body.public-sidebar-open .nav-toggle.public-sidebar-toggle{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-18px);
}

.public-sidebar.main-nav{
  display:flex!important;
  position:fixed!important;
  inset:0 auto 0 0!important;
  width:var(--public-sidebar-width)!important;
  height:100dvh!important;
  padding:0!important;
  border:0!important;
  border-right:1px solid #dbe4f0!important;
  border-radius:0!important;
  background:#fff!important;
  color:#172033;
  box-shadow:18px 0 48px rgba(15,23,42,.20)!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:0!important;
  transform:translateX(-105%)!important;
  transition:transform .24s ease!important;
  overflow:hidden!important;
  z-index:var(--public-sidebar-z)!important;
  overscroll-behavior:contain;
}

.public-sidebar.main-nav.open{
  transform:translateX(0)!important;
}

.public-sidebar-head{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:94px;
  padding:calc(14px + var(--safe-top)) 14px 14px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;
  flex:0 0 auto;
}

.public-sidebar-brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  flex:1;
  color:#fff!important;
  text-decoration:none!important;
}

.public-sidebar-brand>span:last-child{
  min-width:0;
}

.public-sidebar-brand small,
.public-sidebar-brand strong{
  display:block;
}

.public-sidebar-brand small{
  font-size:.78rem;
  opacity:.85;
}

.public-sidebar-brand strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:1rem;
  line-height:1.35;
}

.public-sidebar-logo,
.public-sidebar-mark{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.82);
  background:#fff;
  object-fit:cover;
}

.public-sidebar-mark{
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:.78rem;
  font-weight:900;
}

.public-sidebar .mobile-nav-close.public-sidebar-close{
  display:grid!important;
  place-items:center;
  position:static!important;
  width:44px!important;
  height:44px!important;
  min-width:44px;
  min-height:44px;
  padding:0!important;
  border:1px solid rgba(255,255,255,.48)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
  font-size:1.15rem!important;
  cursor:pointer;
}

.public-sidebar-links{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  padding:12px;
  flex-direction:column;
  gap:5px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
}

.public-sidebar.main-nav .public-sidebar-links>a{
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr);
  align-items:center!important;
  gap:10px!important;
  width:100%;
  min-height:48px!important;
  padding:10px 12px!important;
  border:1px solid transparent!important;
  border-bottom:1px solid #edf1f6!important;
  border-radius:12px!important;
  color:#24324a!important;
  font-size:.98rem!important;
  font-weight:800!important;
  line-height:1.35;
  text-decoration:none!important;
  white-space:normal;
}

.public-sidebar.main-nav .public-sidebar-links>a>span{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:10px;
  background:#f8fbff;
  color:var(--blue);
  font-size:1.05rem;
}

.public-sidebar.main-nav .public-sidebar-links>a:hover,
.public-sidebar.main-nav .public-sidebar-links>a.active{
  border-color:color-mix(in srgb,var(--blue) 22%,#fff)!important;
  background:linear-gradient(135deg,#eaf2ff,#fff1f7)!important;
  color:var(--blue)!important;
}

.public-sidebar.main-nav .public-sidebar-links>a.active{
  box-shadow:inset 4px 0 0 var(--blue);
}

.public-sidebar-foot{
  flex:0 0 auto;
  padding:10px 12px calc(12px + var(--safe-bottom));
  border-top:1px solid #e2e8f0;
  background:#f8fafc;
}

.public-sidebar-collapse{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:44px;
  border:1px solid #dbe4f0;
  border-radius:11px;
  background:#fff;
  color:#334155;
  font-weight:800;
  cursor:pointer;
}

.public-sidebar-collapse span{
  font-size:1.5rem;
  line-height:1;
}

@media (min-width:981px) and (max-width:1180px){
  :root{--public-sidebar-width:272px}
  .a11y-search{min-width:min(260px,34vw)}
}

@media (min-width:981px){
  body.site-public.public-sidebar-open{
    padding-left:var(--public-sidebar-width);
  }
  body.site-public.public-sidebar-open .site-header,
  body.site-public.public-sidebar-open main,
  body.site-public.public-sidebar-open .site-footer{
    min-width:0;
  }
  body.site-public.public-sidebar-open .display-tools{
    right:max(14px,var(--safe-right));
  }
  .mobile-nav-overlay.public-sidebar-overlay-open{
    opacity:0!important;
    pointer-events:none!important;
  }
}

@media (max-width:980px){
  :root{--public-sidebar-width:min(360px,90vw)}
  body.site-public,
  body.site-public.public-sidebar-open{
    padding-left:0;
  }
  .site-header .brand-row{
    padding-left:68px;
  }
  .nav-toggle.public-sidebar-toggle{
    top:max(88px,calc(var(--safe-top) + 68px));
    left:0;
    min-width:54px;
    padding-inline:12px;
  }
  .nav-toggle.public-sidebar-toggle .nav-toggle-label{
    display:none;
  }
  .public-sidebar.main-nav{
    width:var(--public-sidebar-width)!important;
  }
  .mobile-nav-overlay.public-sidebar-overlay-open{
    opacity:1;
    pointer-events:auto;
    z-index:1115;
  }
  .public-sidebar.main-nav{
    z-index:1120!important;
  }
  body.public-nav-open{
    overflow:hidden;
    touch-action:none;
  }
}

@media (max-width:560px){
  .site-header .brand-row{
    padding-left:58px;
  }
  .nav-toggle.public-sidebar-toggle{
    top:max(76px,calc(var(--safe-top) + 60px));
    min-width:50px;
    min-height:48px;
    border-radius:0 13px 13px 0;
  }
  .public-sidebar-head{
    min-height:84px;
  }
  .public-sidebar.main-nav .public-sidebar-links>a{
    min-height:52px!important;
    font-size:1rem!important;
  }
}


/* v29.7.24: ให้ปุ่มเมนูกลับมากดได้แน่นอนหลังย่อแถบเมนู */
body.site-public:not(.public-sidebar-open) .nav-toggle.public-sidebar-toggle{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
.nav-toggle.public-sidebar-toggle{touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:rgba(37,99,235,.18)}
.public-sidebar.main-nav.open,.public-sidebar.main-nav.open *{pointer-events:auto}

body.young-learner-mode .public-sidebar.main-nav .public-sidebar-links>a,
body.touch-friendly .public-sidebar.main-nav .public-sidebar-links>a{
  min-height:58px!important;
  font-size:1.05rem!important;
}

body.high-contrast .public-sidebar.main-nav{
  border-right:3px solid #000!important;
  box-shadow:none!important;
}
body.high-contrast .public-sidebar-head{
  background:#000!important;
}
body.high-contrast .public-sidebar.main-nav .public-sidebar-links>a{
  border:1px solid #000!important;
  color:#000!important;
}
body.high-contrast .public-sidebar.main-nav .public-sidebar-links>a.active{
  background:#ffeb3b!important;
  color:#000!important;
}

body.a11y-reduce-motion,
body.a11y-reduce-motion .public-sidebar.main-nav,
body.a11y-reduce-motion .nav-toggle.public-sidebar-toggle{
  transition:none!important;
}

@media (prefers-reduced-motion:reduce){
  .public-sidebar.main-nav,
  .nav-toggle.public-sidebar-toggle,
  body.site-public{transition:none!important}
}

@media print{
  body.site-public,
  body.site-public.public-sidebar-open{padding-left:0!important}
  .public-sidebar.main-nav,
  .nav-toggle.public-sidebar-toggle{display:none!important}
}

/* v29.7.26: ป้องกัน overlay ที่มองไม่เห็นบังปุ่มเมนูเว็บไซต์ และกำหนดชั้นคลิกให้ชัดเจน */
.nav-toggle.public-sidebar-toggle{
  z-index:1135!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
.mobile-nav-overlay{
  z-index:1110!important;
}
.mobile-nav-overlay:not(.open){
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.mobile-nav-overlay.open{
  visibility:visible!important;
}
.public-sidebar.main-nav{
  z-index:1125!important;
}
.public-sidebar.main-nav:not(.open){
  pointer-events:none!important;
}
.public-sidebar.main-nav.open{
  pointer-events:auto!important;
}
body.site-public:not(.public-sidebar-open) .nav-toggle.public-sidebar-toggle{
  display:inline-flex!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
@media (min-width:981px){
  .mobile-nav-overlay.public-sidebar-overlay-open{
    visibility:hidden!important;
    pointer-events:none!important;
  }
}