/* ============================================================
   STEAMH Training & Research Foundation — site theme
   Palette: Orange #E27912 / Dark Navy #0F1F30 / White
   ============================================================ */
:root{
  --orange:#E27912; --orange-dark:#C0620A; --orange-soft:#FBF3E9;
  --navy:#0F1F30; --navy-2:#14273B; --teal:#2E6E7E;
  --ink:#1B2430; --muted:#7A8794; --line:#E9EDF1; --bg-soft:#F6F8FA;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:'Poppins',sans-serif;color:var(--navy-2);line-height:1.18}
a{text-decoration:none}
::selection{background:var(--orange);color:#fff}
.text-orange{color:var(--orange)!important}
.bg-navy{background:var(--navy)!important}
.container{max-width:1200px}
.section{padding:80px 0}
.section-soft{background:var(--bg-soft)}
.eyebrow{color:var(--orange);font:700 13px/1 'Poppins';letter-spacing:2px;text-transform:uppercase}
.section-title{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.4px;margin-top:12px}

/* ---------- Top bar ---------- */
.topbar{background:var(--navy);color:#cdd6e0;font-size:13px;padding:9px 0}
.topbar a{color:#cdd6e0;width:26px;height:26px;border-radius:6px;display:inline-grid;place-items:center;background:rgba(255,255,255,.08);transition:.25s}
.topbar a:hover{background:var(--orange);color:#fff;transform:translateY(-2px)}
.topbar i{color:var(--orange)}
.topbar a i{color:inherit}

/* ---------- Navbar ---------- */
.main-nav{background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:.6rem 0;transition:.3s}
.main-nav.scrolled{box-shadow:0 6px 24px rgba(20,39,59,.09)}
.main-nav .nav-link{font-weight:600;color:#28323E;font-size:14.5px;padding:.5rem .85rem!important;border-radius:9px;transition:.2s}
.main-nav .nav-link:hover,.main-nav .nav-link.active{background:var(--orange-soft);color:var(--orange-dark)}
.main-nav .dropdown-menu{border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 44px rgba(20,39,59,.14);padding:8px;margin-top:8px}
.main-nav .dropdown-item{border-radius:9px;padding:10px 13px;font-weight:500;font-size:14px}
.main-nav .dropdown-item:hover{background:var(--orange-soft);color:var(--orange-dark)}
.btn-admin{background:var(--orange);border:none;font-weight:600;border-radius:10px;padding:.55rem 1.2rem;box-shadow:0 8px 18px rgba(226,121,18,.28)}
.btn-admin:hover{background:var(--orange-dark)}
.btn-primary{background:var(--orange);border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.btn-outline-primary{color:var(--orange-dark);border-color:var(--orange)}
.btn-outline-primary:hover{background:var(--orange);border-color:var(--orange)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(74vh,640px);display:flex;align-items:center;color:#fff;overflow:hidden;
  background:linear-gradient(120deg,#0F1F30 0%,#1B3A55 55%,#2E6E7E 100%)}
.hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(48deg,rgba(255,255,255,.03),rgba(255,255,255,.03) 22px,transparent 22px,transparent 44px)}
.hero .container{position:relative;z-index:2}
.hero-badge{display:inline-block;background:rgba(226,121,18,.18);color:#FFB871;border:1px solid rgba(226,121,18,.4);padding:8px 16px;border-radius:100px;font:600 13px/1 'Poppins'}
.hero h1{color:#fff;font-size:clamp(34px,5vw,58px);font-weight:800;letter-spacing:-.5px}
.hero p{color:#cfdae5;font-size:clamp(16px,1.6vw,20px);max-width:600px}

/* ---------- Hero image slider ---------- */
.hero-slider{position:relative;min-height:min(74vh,640px);overflow:hidden;background:var(--navy)}
.hero-slider .carousel,.hero-slider .carousel-inner,.hero-slider .carousel-item{height:min(74vh,640px)}
.hero-slider .carousel-item{position:relative}
.hero-slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-slide-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,31,48,.88) 0%,rgba(15,31,48,.55) 45%,rgba(15,31,48,.25) 75%)}
.hero-slide-content{position:relative;z-index:2;height:100%;display:flex;align-items:center}
.hero-slide-content h1{color:#fff;font-size:clamp(30px,4.6vw,54px);font-weight:800;letter-spacing:-.5px}
.hero-slide-content p{color:#dbe4ec;font-size:clamp(15px,1.5vw,19px);max-width:600px}
.hero-slider .carousel-fade .carousel-item{transition:opacity 1.1s ease}
.hero-slider .carousel-indicators{z-index:3;margin-bottom:1.6rem}
.hero-slider .carousel-indicators [data-bs-target]{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);border:none;opacity:1;transition:.25s}
.hero-slider .carousel-indicators .active{background:var(--orange);width:26px;border-radius:6px}
.hero-slider .carousel-control-prev,.hero-slider .carousel-control-next{width:64px;z-index:3;opacity:1}
.hero-slider-arrow{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;font-size:18px;color:#fff;transition:.25s;backdrop-filter:blur(4px)}
.hero-slider-arrow:hover{background:var(--orange);border-color:var(--orange)}
@media (max-width:767.98px){
  .hero-slider,.hero-slider .carousel,.hero-slider .carousel-inner,.hero-slider .carousel-item{min-height:520px;height:520px}
  .hero-slider .carousel-control-prev,.hero-slider .carousel-control-next{width:44px}
  .hero-slider-arrow{width:36px;height:36px;font-size:15px}
}

/* ---------- Page banner (inner pages) ---------- */
.page-banner{position:relative;color:#fff;padding:66px 0 58px;overflow:hidden;background:linear-gradient(120deg,#0F1F30,#1B3A55)}
.page-banner::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(48deg,rgba(255,255,255,.03),rgba(255,255,255,.03) 22px,transparent 22px,transparent 44px)}
.page-banner .container{position:relative;z-index:2}
.page-banner h1{color:#fff;font-size:clamp(32px,4.4vw,52px)}
.page-banner .crumb{font-size:13px;color:#8fa6bb;margin-bottom:14px}
.page-banner .crumb a{color:#8fa6bb}
.page-banner .crumb a:hover{color:var(--orange)}

/* ---------- Cards ---------- */
.card-soft{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.28s;height:100%}
.card-soft:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(20,39,59,.12)}
.icon-badge{width:54px;height:54px;border-radius:14px;background:var(--orange-soft);display:grid;place-items:center;font-size:24px;color:var(--orange-dark)}
.chip{background:var(--orange-soft);color:var(--orange-dark);font:700 11px/1 'Poppins';padding:6px 11px;border-radius:7px;display:inline-block}

/* image placeholders (until real photos uploaded) */
.ph{background:repeating-linear-gradient(45deg,#e6ebf0,#e6ebf0 12px,#eff3f7 12px,#eff3f7 24px);display:flex;align-items:flex-end;padding:14px;color:#9AA6B2;font:600 11px/1 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.5px}
.ph.dark{background:repeating-linear-gradient(45deg,#25415a,#25415a 12px,#2c4d6b 12px,#2c4d6b 24px);color:#cfe0ef}
.ph span{background:rgba(0,0,0,.28);padding:5px 9px;border-radius:6px}
.ph.light span{background:#fff}
.ratio-16-9{aspect-ratio:16/9}
.ratio-4-3{aspect-ratio:4/3}
.ratio-1-1{aspect-ratio:1/1}
.cover-img{width:100%;height:100%;object-fit:cover}

/* ---------- Stats ---------- */
.stat-card{text-align:center;background:var(--orange-soft);border:1px solid #F0E4D3;border-radius:20px;padding:34px 20px}
.stat-num{font:800 clamp(34px,4vw,48px)/1 'Poppins';color:var(--orange)}

/* ---------- Notification / event list ---------- */
.list-tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:.2s}
.list-tile:hover{box-shadow:0 12px 28px rgba(20,39,59,.08);transform:translateX(3px)}
.notif-tile{border-left:4px solid var(--orange)}
.notif-tile.important{border-left-color:#E23434}
.date-box{width:62px;flex-shrink:0;text-align:center;background:var(--navy-2);color:#fff;border-radius:11px;padding:10px 6px}
.date-box .d{font:800 20px/1 'Poppins';color:#FFB871}
.date-box .m{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;margin-top:3px}

/* status pills */
.pill{font:700 11px/1 'Poppins';padding:6px 11px;border-radius:20px;display:inline-block}
.pill-upcoming{background:var(--orange);color:#fff}
.pill-ongoing{background:var(--teal);color:#fff}
.pill-completed{background:#5A6875;color:#fff}
.pill-pub{background:#E7F6EC;color:#1E7A43}
.pill-unpub{background:#F1F3F5;color:#9AA6B2}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(120deg,var(--orange),var(--orange-dark));border-radius:26px;padding:clamp(34px,5vw,60px);color:#fff;position:relative;overflow:hidden}
.cta h2{color:#fff}

/* ---------- Footer ---------- */
.site-footer{background:#0F1F30;color:#aebac7;padding:64px 0 24px}
.site-footer h6{color:#fff;font-size:15px;margin-bottom:16px;font-family:'Poppins'}
.footer-logo{background:#fff;border-radius:12px;padding:10px 14px;display:inline-block}
.footer-text{font-size:14px;line-height:1.75}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links a{color:#aebac7;font-size:14px;display:block;padding:6px 0;transition:.2s}
.footer-links a:hover{color:var(--orange);padding-left:5px}
.footer-social a{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.07);color:#fff;transition:.25s}
.footer-social a:hover{background:var(--orange);transform:translateY(-3px)}
.footer-bottom{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:13px}

/* ---------- Back to top ---------- */
.back-to-top{position:fixed;right:22px;bottom:22px;z-index:70;width:48px;height:48px;border:none;border-radius:14px;background:var(--orange);color:#fff;font-size:18px;cursor:pointer;box-shadow:0 10px 24px rgba(226,121,18,.4);opacity:0;pointer-events:none;transition:.3s}
.back-to-top.show{opacity:1;pointer-events:auto}
.back-to-top:hover{background:var(--orange-dark);transform:translateY(-3px)}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.revealed{opacity:1;transform:none}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:1080;background:rgba(9,17,26,.94);display:none;align-items:center;justify-content:center;padding:30px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:82vh;border-radius:12px}
.lightbox .lb-close{position:absolute;top:20px;right:24px;width:46px;height:46px;border:none;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font-size:20px;cursor:pointer}

/* ---------- Admin ---------- */
.admin-body{background:#F4F6F9;min-height:100vh}
.admin-sidebar{width:250px;background:var(--navy);color:#aebac7;position:fixed;top:0;left:0;height:100vh;display:flex;flex-direction:column;z-index:1030;transition:.3s}
.admin-sidebar .brand{padding:20px;border-bottom:1px solid rgba(255,255,255,.08)}
.admin-sidebar .brand img{background:#fff;border-radius:10px;padding:6px 10px}
.admin-nav{flex:1;padding:14px 12px;overflow-y:auto}
.admin-nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;color:#aebac7;font-weight:600;font-size:14.5px;margin-bottom:4px;transition:.2s}
.admin-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.admin-nav a.active{background:rgba(226,121,18,.16);color:#FFB871}
.admin-nav a i{width:20px;text-align:center;font-size:16px}
.admin-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.admin-main{margin-left:250px;transition:.3s}
.admin-topbar{background:#fff;border-bottom:1px solid var(--line);height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:1020}
.admin-content{padding:28px}
.admin-stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;transition:.22s;height:100%}
.admin-stat:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(20,39,59,.09)}
.admin-stat .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:19px;color:#fff}
.admin-stat .n{font:800 34px/1 'Poppins';color:var(--navy-2)}
.admin-card{background:#fff;border:1px solid var(--line);border-radius:16px}
.table thead th{background:#F7F9FB;font:700 12px/1 'Poppins';color:#8A97A5;text-transform:uppercase;letter-spacing:.5px;border:0}
.table td{vertical-align:middle;font-size:14px}
.avatar-circle{width:40px;height:40px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:700}
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-aside{position:relative;overflow:hidden;background:linear-gradient(140deg,#0F1F30,#1B3A55 60%,#2E6E7E);color:#fff;display:flex;align-items:center;padding:40px}
.login-aside::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(48deg,rgba(255,255,255,.03),rgba(255,255,255,.03) 22px,transparent 22px,transparent 44px)}
.login-aside .container-inner{position:relative;z-index:2;max-width:420px}
.login-form-side{display:flex;align-items:center;justify-content:center;padding:40px;background:#fff}

@media(max-width:991px){
  .admin-sidebar{transform:translateX(-100%)}
  .admin-sidebar.show{transform:translateX(0)}
  .admin-main{margin-left:0}
  .login-wrap{grid-template-columns:1fr}
  .login-aside{display:none}
}