/* ============================================================
   satit-theme.css — ธีมโรงเรียนสาธิตฯ (satit2021 -> Cassiopeia)
   โทนหลัก: น้ำเงินเข้ม #005e8d / #004d74 · เน้นส้ม #f89406
   ใช้กับเทมเพลตลูก cassiopeia_satit เท่านั้น
   ============================================================ */
:root{
  --satit-blue:#005e8d;
  --satit-blue-d:#004d74;
  --satit-blue-l:#1a7fb5;
  --satit-orange:#f89406;
  --satit-orange-l:#fbb450;
  --satit-bg:#f4f6f7;
  --satit-line:#dde5ea;
  --satit-radius:6px;
  --satit-shadow:0 1px 3px rgba(0,50,80,.08);
}
body.site{background:var(--satit-bg);font-family:"Open Sans","Sarabun",system-ui,-apple-system,"Segoe UI",sans-serif;color:#22313a}

/* ---------- แถบบนสุด (topbar) ---------- */
.container-topbar{background:var(--satit-blue-d);color:#e8f2f8;font-size:.85rem}
.container-topbar a{color:#dceaf3}
.container-topbar a:hover{color:#fff}
.container-topbar .mod-languages a{padding:.15rem .4rem;border-radius:3px}
.container-topbar .mod-languages a:hover{background:rgba(255,255,255,.15)}

/* ---------- ส่วนหัว (โลโก้) ---------- */
.container-header{background:#fff;border-bottom:3px solid var(--satit-blue);padding:.6rem 0}
.navbar-brand .brand-logo img.logo{max-height:88px;width:auto}
.container-header .site-description{display:none}

/* ---------- เมนูหลัก (แถบน้ำเงิน) ---------- */
.container-nav{background:linear-gradient(180deg,var(--satit-blue-l) 0%,var(--satit-blue) 55%,var(--satit-blue-d) 100%);
  box-shadow:0 2px 5px rgba(0,40,70,.18)}
.mod-menu.nav{flex-wrap:wrap;margin:0}
.mod-menu.nav>li>a{color:#fff!important;font-weight:600;padding:.72rem 1rem;text-transform:none;letter-spacing:.1px;
  border-bottom:3px solid transparent;transition:background .15s,border-color .15s}
.mod-menu.nav>li>a:hover,.mod-menu.nav>li.active>a,.mod-menu.nav>li.current>a{background:rgba(0,0,0,.16);border-bottom-color:var(--satit-orange)}
.mod-menu__sub{background:#fff;border:1px solid var(--satit-line);border-top:3px solid var(--satit-orange);
  box-shadow:0 6px 16px rgba(0,40,70,.18);min-width:250px;padding:.3rem 0}
.mod-menu__sub a{color:var(--satit-blue-d)!important;padding:.5rem 1rem!important;font-size:.92rem}
.mod-menu__sub a:hover{background:#eef6fb;color:var(--satit-blue)!important}
.mod-menu .deeper>a:after{content:" \25BE";font-size:.7em;opacity:.9}
.mod-menu__sub .deeper>a:after{content:" \25B8"}

/* ---------- สไลด์หน้าแรก (CSS crossfade ไม่ใช้ JS) ---------- */
.satit-slider{position:relative;overflow:hidden;border-radius:var(--satit-radius);
  box-shadow:var(--satit-shadow);background:#0b3d55;margin:1rem 0}
.satit-slider img{width:100%;height:430px;object-fit:cover;display:block}
.satit-slider img:first-child{position:relative;z-index:1}
.satit-slider img:nth-child(n+2){position:absolute;inset:0;opacity:0;animation:satitFade 30s infinite}
.satit-slider img:nth-child(2){animation-delay:6s}
.satit-slider img:nth-child(3){animation-delay:12s}
.satit-slider img:nth-child(4){animation-delay:18s}
.satit-slider img:nth-child(5){animation-delay:24s}
@keyframes satitFade{0%{opacity:0}3%{opacity:1}20%{opacity:1}23%{opacity:0}100%{opacity:0}}

/* ---------- การ์ด / บล็อกหัวข้อ ---------- */
.card,article.item{border:1px solid var(--satit-line);border-radius:var(--satit-radius);background:#fff;
  box-shadow:var(--satit-shadow)}
.card>.card-body>h3,.mod-custom>h3,.sidebar-right h3{
  background:linear-gradient(180deg,#eaf4fa,#dcebf5);border-left:4px solid var(--satit-blue);
  color:var(--satit-blue-d);font-size:1.03rem;font-weight:700;margin:-1rem -1.1rem .9rem;
  padding:.55rem .9rem;border-radius:var(--satit-radius) var(--satit-radius) 0 0}
.container-main-top .card>.card-body>h3,.main-top.card>.card-body>h3{
  background:linear-gradient(90deg,var(--satit-blue),var(--satit-blue-l));color:#fff;border-left:0;
  padding:.5rem .9rem}
.container-top-b .card>.card-body>h3,.container-top-a .card>.card-body>h3{
  background:linear-gradient(90deg,var(--satit-blue-d),var(--satit-blue));color:#fff;border-left:0}

/* ---------- ข่าว (mod_articles_category) ---------- */
.mod-articlescategory{list-style:none;padding:0;margin:0}
.mod-articlescategory li{position:relative;padding:.55rem 0 .55rem .9rem;border-bottom:1px dashed var(--satit-line);line-height:1.5}
.mod-articlescategory li:last-child{border-bottom:0}
.mod-articlescategory li:before{content:"";position:absolute;left:0;top:.95rem;width:5px;height:5px;border-radius:50%;
  background:var(--satit-orange)}
.mod-articles-category-title{color:#1d3d52;text-decoration:none;font-weight:600;font-size:.95rem}
.mod-articles-category-title:hover{color:var(--satit-orange)}
.mod-articles-category-date{display:inline-block;font-size:.78rem;color:var(--satit-blue);background:#eaf4fa;
  border-radius:3px;padding:.05rem .4rem;margin-right:.35rem}
.mod-articles-category-introtext{color:#5a6b76;font-size:.88rem;margin-top:.2rem}
.container-top-b .site-grid,.container-top-b>.grid-child{display:block}
.container-top-b{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}

/* ---------- แถบข้าง ---------- */
.sidebar-right .card,.sidebar-left .card{margin-bottom:1rem}
.sidebar-right img,.sidebar-left img{max-width:100%;height:auto;border-radius:var(--satit-radius)}

/* ---------- เนื้อหา/บทความ ---------- */
.com-content-article__title,.page-header h2,.com-content-category__title{color:var(--satit-blue-d);
  position:relative;padding-bottom:.4rem;border-bottom:1px solid var(--satit-line)}
.com-content-article__title:after,.page-header h2:after{content:"";display:block;width:70px;height:3px;
  background:var(--satit-orange);margin-top:.35rem;border-radius:2px}
.com-content-article__body img{border-radius:var(--satit-radius);max-width:100%;height:auto}
.com-content-article__body a,.com-content-category-blog a{color:var(--satit-blue)}
.readmore a,.btn-primary{background:var(--satit-blue);border-color:var(--satit-blue);color:#fff}
.readmore a:hover,.btn-primary:hover{background:var(--satit-orange);border-color:var(--satit-orange)}
.table td,.table th{border:1px solid var(--satit-line);padding:.5rem .6rem}
.mod-custom table td{border-color:#e7eef2}
.breadcrumb{background:transparent;font-size:.85rem;margin:.5rem 0}
.pagination .page-link{color:var(--satit-blue)}
.pagination .active .page-link{background:var(--satit-blue);border-color:var(--satit-blue);color:#fff}
.container-sidebar-right form input[type="search"],.container-sidebar-right form .form-control{
  border:1px solid var(--satit-line);border-radius:var(--satit-radius);padding:.45rem .6rem;width:100%}
.container-sidebar-right form .btn{margin-top:.4rem;width:100%}
.mod-custom iframe,.wb-4video-comp-container{max-width:100%;border:0;border-radius:var(--satit-radius)}

/* ---------- ส่วนท้าย ---------- */
.container-footer,.footer{background:var(--satit-blue-d);color:#dbe9f2;margin-top:1.5rem}
.container-footer a,.footer a{color:#fff}
.footer p{margin:0;padding:.9rem 0;font-size:.85rem}
.mod-footer .copyright{color:#dbe9f2;text-align:center;padding:.9rem 0}

/* ---------- มือถือ (บทเรียนจาก arit: เมนูห้ามพับเป็นบล็อกสี) ---------- */
@media (max-width:768px){
  .container-nav{background:#fff;max-height:52vh;overflow-y:auto;overflow-x:hidden;
    border-bottom:3px solid var(--satit-blue);padding:0}
  .mod-menu.nav{flex-direction:column;flex-wrap:nowrap;white-space:normal;background:#fff;font-size:.95rem}
  .mod-menu.nav>li{width:100%;border-bottom:1px solid var(--satit-line)}
  .mod-menu.nav>li>a{display:block;color:var(--satit-blue-d)!important;padding:.62rem .85rem;border-bottom:0}
  .mod-menu.nav>li>a:hover{background:#eef6fb}
  .mod-menu__sub{display:none;position:static!important;box-shadow:none;min-width:0;background:#f4f9fc!important;border-top:0}
  .mod-menu.nav>li:focus-within>.mod-menu__sub,.mod-menu.nav>li:hover>.mod-menu__sub,
  .mod-menu__sub li:focus-within>.mod-menu__sub,.mod-menu__sub li:hover>.mod-menu__sub{display:block}
  .mod-menu__sub a{padding:.45rem .85rem .45rem 1.5rem!important;color:#3a5a6e!important}
  .satit-slider img{height:230px}
  .container-top-b{grid-template-columns:1fr}
  .navbar-brand .brand-logo img.logo{max-height:64px}
}