/*
Theme Name: Hongyok Welcome
Theme URI: https://example.com/
Author: School Web Team
Description: ธีมหน้า Welcome สีเขียวขาว สดใส หรูหรา สำหรับโรงเรียน รองรับ School Welcome Season Slideshow
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: hongyok-welcome
*/
:root{--hw-green:#00a86b;--hw-green-dark:#087b50;--hw-green-deep:#075d45;--hw-mint:#e4fff1;--hw-gold:#ffbf24;--hw-ink:#124b3b;--hw-shadow:0 22px 65px rgba(0,145,105,.20)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif}
body{color:var(--hw-ink);background:#f5fbf6}
.hw-welcome{position:relative;isolation:isolate;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:clamp(22px,4vh,44px) 20px 25px;overflow:hidden;background-image:radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 44%,rgba(255,255,255,.02) 75%),radial-gradient(circle at 7% 12%,rgba(255,62,145,.88) 0%,rgba(255,62,145,0) 27%),radial-gradient(circle at 92% 13%,rgba(0,190,255,.82) 0%,rgba(0,190,255,0) 29%),radial-gradient(circle at 8% 88%,rgba(255,194,0,.88) 0%,rgba(255,194,0,0) 30%),radial-gradient(circle at 92% 88%,rgba(150,74,255,.78) 0%,rgba(150,74,255,0) 30%),radial-gradient(circle at 52% 100%,rgba(0,220,157,.60) 0%,rgba(0,220,157,0) 38%),var(--hw-bg-image,linear-gradient(125deg,#ff8fc7 0%,#ffd76b 27%,#7cecff 57%,#a8ffcb 78%,#c7a4ff 100%));background-size:cover;background-position:center}
.hw-welcome:before{content:"";position:absolute;z-index:-1;inset:0;opacity:.34;background-image:radial-gradient(rgba(255,255,255,.85) 1.5px,transparent 1.5px),radial-gradient(rgba(255,255,255,.45) 1px,transparent 1px);background-size:27px 27px,13px 13px;background-position:0 0,7px 8px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
.hw-welcome:after{content:"";position:absolute;z-index:-1;width:850px;height:850px;top:-550px;left:50%;transform:translateX(-50%);border:1px solid rgba(22,131,74,.13);border-radius:50%;box-shadow:0 0 0 45px rgba(22,131,74,.025),0 0 0 90px rgba(22,131,74,.02)}
.hw-welcome-inner{position:relative;z-index:2;width:min(100%,1120px);display:flex;flex-direction:column;align-items:center;text-align:center}
.hw-topline{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--hw-green);font-size:12px;font-weight:800;letter-spacing:.16em}
.hw-topline-dot,.hw-live-dot{width:7px;height:7px;border-radius:50%;background:#ff6b9d;box-shadow:0 0 0 4px rgba(244,195,78,.17)}
.hw-brand{display:flex;flex-direction:column;align-items:center;gap:7px;margin:0 0 23px}
.hw-brand .custom-logo-link{display:inline-flex;align-items:center;justify-content:center;width:clamp(68px,7vw,96px);height:clamp(68px,7vw,96px);padding:8px;border-radius:26px;background:rgba(255,255,255,.84);border:1px solid rgba(22,131,74,.15);box-shadow:0 8px 25px rgba(10,85,48,.12)}
.hw-brand img.custom-logo{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.08))}
.hw-school-name{font-size:clamp(25px,3vw,39px);font-weight:900;letter-spacing:.015em;color:var(--hw-green-dark);text-shadow:0 2px 0 #fff;margin:2px 0 0}
.hw-school-subtitle{font-size:clamp(13px,1.3vw,16px);font-weight:600;color:#56836a;margin:0}
.hw-title-rule{display:flex;align-items:center;gap:8px;margin-top:7px;width:116px;height:8px}
.hw-title-rule:before,.hw-title-rule:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#8abf9c)}
.hw-title-rule:after{background:linear-gradient(90deg,#8abf9c,transparent)}
.hw-title-rule i{width:7px;height:7px;background:#ff8a26;transform:rotate(45deg);border-radius:1px}
.hw-slideshow-card{position:relative;width:min(100%,1000px);padding:12px;border:1px solid rgba(255,255,255,.9);border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.70));box-shadow:0 24px 65px rgba(0,137,96,.18),0 8px 25px rgba(255,155,40,.10);backdrop-filter:blur(12px)}
.hw-slideshow-label{position:absolute;z-index:5;top:22px;left:24px;display:flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid rgba(255,255,255,.65);border-radius:30px;background:linear-gradient(100deg,#00a86b,#00a7d8);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;backdrop-filter:blur(8px)}
.hw-live-dot{width:6px;height:6px;background:#a8edbd;box-shadow:0 0 0 4px rgba(168,237,189,.18)}
.hw-slideshow-wrap{width:100%;margin:0 auto;overflow:hidden;border-radius:25px}
.hw-slideshow-wrap .swss-slideshow{width:100%;border-radius:25px;overflow:hidden;background:#e6f2e9}
.hw-slideshow-wrap .swss-track{aspect-ratio:16/9}
.hw-slideshow-wrap .swss-slide img{object-fit:cover}
.hw-slideshow-wrap .swss-arrow{width:48px;height:48px;background:linear-gradient(135deg,#ff8a26,#f04483);box-shadow:0 5px 15px rgba(0,0,0,.18);backdrop-filter:blur(5px)}
.hw-slideshow-wrap .swss-dot{border:1px solid #fff;background:rgba(255,255,255,.7)}
.hw-slideshow-wrap .swss-dot.is-active{background:#fff}
.hw-plugin-fallback{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;padding:20px;border-radius:25px;background:linear-gradient(135deg,#e4f5e9,#fff);border:1px dashed #8dbda0;color:var(--hw-green-dark)}
.hw-card-bottom{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 1px;color:#689579;font-size:10px;font-weight:800;letter-spacing:.18em}
.hw-bottom-stars{color:#ff8a26;letter-spacing:.28em}
.hw-enter{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:66px;margin:25px auto 0;padding:10px 30px 10px 12px;border:2px solid rgba(255,255,255,.9);border-radius:999px;background:linear-gradient(110deg,#00a86b 0%,#00a7d8 48%,#7357e8 100%);color:#fff;text-decoration:none;font-size:clamp(17px,2vw,22px);font-weight:850;box-shadow:0 12px 28px rgba(8,96,54,.25),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.hw-enter:hover,.hw-enter:focus{color:#fff;transform:translateY(-3px);background:linear-gradient(110deg,#079b65 0%,#078ec7 48%,#6547d8 100%);box-shadow:0 17px 35px rgba(8,96,54,.3)}
.hw-enter-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--hw-green);font-size:24px;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.hw-enter-arrow{font-size:24px;color:#f8d46e}
.hw-enter-caption{margin:8px 0 0;color:#6d967b;font-size:11px;font-weight:600}
.hw-decor{position:absolute;z-index:1;width:clamp(110px,16vw,205px);opacity:.92;pointer-events:none;filter:drop-shadow(0 10px 12px rgba(20,95,53,.08))}
.hw-decor svg{display:block;width:100%;height:auto}
.hw-decor-left{left:max(1vw,calc((100vw - 1320px)/2));top:37%;transform:rotate(-5deg)}
.hw-decor-right{right:max(1vw,calc((100vw - 1320px)/2));top:34%;transform:rotate(5deg)}
.hw-footer{position:relative;z-index:2;margin-top:auto;padding-top:26px;text-align:center;color:#6e9b7d;font-size:12px;font-weight:700}
.hw-footer small{display:block;margin-top:5px;font-size:9px;letter-spacing:.17em;color:#91b39b}
.hw-footer-leaf{padding:0 8px;color:#ff8a26}
@media(max-width:850px){.hw-decor{opacity:.3;width:120px}.hw-decor-left{left:-24px;top:31%}.hw-decor-right{right:-24px;top:58%}.hw-slideshow-card{width:min(100%,760px)}}
@media(max-width:600px){.hw-welcome{padding:18px 12px 18px}.hw-topline{font-size:10px;letter-spacing:.1em}.hw-brand{margin-bottom:18px}.hw-slideshow-card{padding:7px;border-radius:22px}.hw-slideshow-wrap,.hw-slideshow-wrap .swss-slideshow{border-radius:17px}.hw-slideshow-wrap .swss-track{aspect-ratio:4/3}.hw-slideshow-label{top:14px;left:14px;padding:6px 9px;font-size:9px}.hw-slideshow-wrap .swss-arrow{width:36px;height:36px;font-size:18px}.hw-card-bottom{font-size:8px;padding:8px 6px 0}.hw-enter{min-height:58px;margin-top:19px;padding:8px 23px 8px 9px}.hw-enter-icon{width:40px;height:40px}.hw-decor{width:86px;opacity:.2}.hw-decor-left{top:28%;left:-25px}.hw-decor-right{top:62%;right:-25px}.hw-footer{padding-top:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* One-screen Welcome layout: fit the entire experience in the viewport */
html,body{height:100%;min-height:0;overflow:hidden}
body{margin:0}
.hw-welcome{
  height:100vh;height:100svh;min-height:0;
  padding:clamp(8px,1.5vh,18px) 18px clamp(6px,1vh,12px);
  overflow:hidden;
  justify-content:stretch;
}
.hw-welcome-inner{
  height:100%;min-height:0;flex:1;
  justify-content:flex-start;
  gap:0;
}
.hw-topline{flex:0 0 auto;margin:0 0 clamp(2px,.6vh,7px);font-size:clamp(9px,.75vw,12px)}
.hw-brand{flex:0 0 auto;gap:clamp(2px,.5vh,6px);margin:0 0 clamp(7px,1.2vh,14px)}
.hw-brand .custom-logo-link{width:clamp(38px,5.5vh,68px);height:clamp(38px,5.5vh,68px);padding:5px;border-radius:15px}
.hw-school-name{font-size:clamp(21px,3.1vh,34px);line-height:1.12}
.hw-school-subtitle{font-size:clamp(10px,1.55vh,14px);line-height:1.2}
.hw-title-rule{margin-top:2px;height:5px}
.hw-slideshow-card{
  width:min(100%,min(1120px,calc((100svh - 205px)*1.82)));
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  padding:clamp(5px,.8vh,9px);
  border-radius:clamp(16px,2.2vh,28px);
}
.hw-slideshow-label{top:clamp(12px,1.8vh,20px);left:clamp(12px,1.8vh,20px);padding:6px 10px;font-size:10px}
.hw-slideshow-wrap{
  flex:1 1 auto;min-height:0;height:100%;
  display:flex;align-items:stretch;
}
.hw-slideshow-wrap .swss-slideshow{
  height:100%;min-height:0;display:flex;flex-direction:column;
  flex:1 1 auto;border-radius:clamp(12px,1.8vh,22px);
}
.hw-slideshow-wrap .swss-track{
  height:100%;min-height:0;flex:1 1 auto;
  aspect-ratio:auto;position:relative;
}
.hw-slideshow-wrap .swss-slide img{width:100%;height:100%;object-fit:contain}
.hw-card-bottom{flex:0 0 auto;padding:5px 8px 0;font-size:9px}
.hw-enter{flex:0 0 auto;min-height:clamp(42px,6.5vh,56px);margin:clamp(6px,1vh,11px) auto 0;padding:5px 22px 5px 8px;font-size:clamp(14px,1.9vh,19px);gap:10px}
.hw-enter-icon{width:clamp(30px,4.8vh,40px);height:clamp(30px,4.8vh,40px);font-size:20px}
.hw-enter-arrow{font-size:20px}
.hw-enter-caption{display:none}
.hw-footer{flex:0 0 auto;margin-top:0;padding-top:clamp(3px,.6vh,7px);font-size:10px;line-height:1.1}
.hw-footer small{display:none}
.hw-decor-left{top:38%}.hw-decor-right{top:35%}
body.admin-bar .hw-welcome{height:calc(100vh - 32px);height:calc(100svh - 32px)}
@media(max-height:700px){
 .hw-welcome{padding-top:5px;padding-bottom:5px}
 .hw-topline{margin-bottom:1px}
 .hw-brand{margin-bottom:5px}
 .hw-brand .custom-logo-link{width:34px;height:34px}
 .hw-school-name{font-size:clamp(19px,3.2vh,25px)}
 .hw-school-subtitle{font-size:10px}
 .hw-title-rule{display:none}
 .hw-slideshow-card{width:min(100%,min(1060px,calc((100svh - 145px)*1.82)))}
 .hw-enter{min-height:38px;margin-top:5px}
 .hw-enter-icon{width:28px;height:28px}
 .hw-footer{display:none}
}
@media(max-width:700px){
 .hw-welcome{padding:8px 9px 7px}
 .hw-slideshow-card{width:100%;border-radius:17px}
 .hw-slideshow-wrap .swss-track{aspect-ratio:auto}
 .hw-slideshow-wrap .swss-slide img{object-fit:contain}
 .hw-decor{opacity:.22;width:72px}
 .hw-decor-left{left:-28px;top:45%}
 .hw-decor-right{right:-28px;top:44%}
 .hw-slideshow-label{top:10px;left:10px;font-size:8px;padding:5px 8px}
 .hw-card-bottom{font-size:7px}
 .hw-footer{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.hw-welcome *{scroll-behavior:auto!important}}