/* ============================================================
   site.css — shared "chrome" styles (topbar, header, nav,
   page banner, breadcrumb, footer) used by every public page.
   Page-specific styles live in each page's own <style> block
   or a dedicated css/<page>.css file.
   ============================================================ */

@import url("buttons.css");

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary:   #111111;
  --secondary: #2a2a2a;
  --accent:    #FFCE1B;
  --light:     #fffbe6;
  --white:     #ffffff;
  --gray:      #f5f5f0;
  --text:      #111;
  --muted:     #666;
}

body { font-family: 'K2D', sans-serif; color: var(--text); background: #fff; }

/* ─── TOP BAR ─── */
.topbar {
  background: var(--primary);
  color: #eee;
  font-size: .8rem;
  padding: .35rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar a { color: #eee; text-decoration: none; margin-left: 1rem; display:inline-flex; align-items:center; gap:5px; }
.topbar a:hover { color: var(--accent); }
.topbar a svg { width:16px; height:16px; flex-shrink:0; }

/* ─── HEADER ─── */
header {
  background: var(--white);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: .8rem 2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  border-bottom: 3px solid var(--accent);
}
.logo-img { width:80px; height:80px; object-fit:contain; flex-shrink:0; }
.topbar-icon { height:14px; width:14px; object-fit:contain; filter:brightness(0) invert(1); }
.header-text h1 { font-size: 1.45rem; color: var(--primary); font-weight: 700; line-height: 1.3; }
.header-text p  { font-size: .85rem; color: #555; }

/* ─── NAV ─── */
nav { background:var(--primary); position:sticky; top:0; z-index:100; display:flex; justify-content:center; align-items:center; padding:.55rem 1rem; overflow:visible; }
.nav-pill { position:relative; background:rgba(30,30,30,.65); border-radius:40px; display:flex; align-items:center; padding:0 .4rem; height:50px; flex-shrink:0; }
.nav-outline { position:absolute; inset:0; pointer-events:none; overflow:visible; }
.nav-rect { stroke-dashoffset:5; stroke-dasharray:0 0 10 40 10 40; transition:.5s; stroke:var(--accent); }
.nav-btn { display:block; padding:.45rem 1rem; color:#eee; text-decoration:none; font-size:.88rem; border-radius:25px; transition:background .15s,color .15s; white-space:nowrap; position:relative; z-index:1; }
.nav-btn:hover { background:rgba(255,206,27,.12); color:var(--accent); }
.nav-btn.active { background:var(--accent); color:#111; font-weight:600; }
.nav-btn:focus,.nav-btn:focus-visible,.nav-btn:focus-within{outline:none !important;box-shadow:none !important;}
.nav-sep { width:1px; height:22px; background:rgba(255,255,255,.2); margin:0 .3rem; flex-shrink:0; }
.nav-login { color:rgba(255,206,27,.8) !important; font-size:.82rem; display:inline-flex !important; align-items:center; gap:.3rem; }
.nav-login:hover { color:var(--accent) !important; background:rgba(255,206,27,.13) !important; }
.nav-per-btn{display:inline-flex !important;align-items:center;gap:.3rem;background:transparent;border:none;cursor:pointer;font-family:inherit;outline:none;-webkit-appearance:none;appearance:none}
.nav-per-btn:hover{outline:none !important;box-shadow:none !important;transform:none !important;}
.nav-per-btn:focus,.nav-per-btn:focus-visible,.nav-per-btn:active{outline:none !important;box-shadow:none !important;background:transparent !important;transform:none !important;}
.nav-per-btn::before,.nav-per-btn::after{display:none !important;}
#perNavDrop{position:fixed;transform:translateX(-50%) translateY(-6px);background:#1c1c1c;border:1px solid rgba(255,206,27,.2);border-radius:12px;padding:.4rem 0;min-width:185px;box-shadow:0 12px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9999}
#perNavDrop a{display:block;padding:.5rem 1.2rem;color:#ccc;text-decoration:none;font-size:.83rem;white-space:nowrap;transition:background .15s,color .15s}
#perNavDrop a:hover,#perNavDrop a.active-sub{background:rgba(255,206,27,.1);color:#FFCE1B}
.nav-sys-btn{display:inline-flex !important;align-items:center;gap:.3rem;color:rgba(255,206,27,.8) !important;font-size:.82rem;background:none;border:none;cursor:pointer;font-family:inherit;outline:none;-webkit-appearance:none;appearance:none}
.nav-sys-btn:hover{color:var(--accent) !important;background:rgba(255,206,27,.13) !important;outline:none !important;box-shadow:none !important;transform:none !important;}
.nav-sys-btn:focus,.nav-sys-btn:focus-visible,.nav-sys-btn:active{outline:none !important;box-shadow:none !important;transform:none !important;}
.nav-sys-btn::before,.nav-sys-btn::after{display:none !important;}
#sysNavDrop { position:fixed; transform:translateX(-50%) translateY(-6px); background:#1c1c1c; border:1px solid rgba(255,206,27,.2); border-radius:12px; padding:.4rem 0; min-width:220px; box-shadow:0 12px 30px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:9999; }
#sysNavDrop a { display:block; padding:.5rem 1.2rem; color:#ccc; text-decoration:none; font-size:.83rem; white-space:nowrap; transition:background .15s,color .15s; }
#sysNavDrop a:hover { background:rgba(255,206,27,.1); color:#FFCE1B; }
#sysNavDrop hr { border:none; border-top:1px solid rgba(255,255,255,.08); margin:.3rem 0; }
#deptNavDrop { position:fixed; transform:translateX(-50%) translateY(-6px); background:#1c1c1c; border:1px solid rgba(255,206,27,.2); border-radius:12px; padding:.4rem 0; min-width:230px; box-shadow:0 12px 30px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:9999; }
#deptNavDrop a { display:block; padding:.5rem 1.2rem; color:#ccc; text-decoration:none; font-size:.83rem; white-space:nowrap; transition:background .15s,color .15s; }
#deptNavDrop a:hover, #deptNavDrop a.active-sub { background:rgba(255,206,27,.1); color:#FFCE1B; }
#aboutNavDrop { position:fixed; transform:translateX(-50%) translateY(-6px); background:#1c1c1c; border:1px solid rgba(255,206,27,.2); border-radius:12px; padding:.4rem 0; min-width:210px; box-shadow:0 12px 30px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:9999; }
#aboutNavDrop a { display:block; padding:.5rem 1.2rem; color:#ccc; text-decoration:none; font-size:.83rem; white-space:nowrap; transition:background .15s,color .15s; }
#aboutNavDrop a:hover, #aboutNavDrop a.active-sub { background:rgba(255,206,27,.1); color:#FFCE1B; }

/* ── Shared "pill" tabs / filters — same look as mainNav, animated outline traced by initPill() in footer.php ── */
.tabs-wrap { overflow-x:auto; display:flex; margin-bottom:1.5rem; padding-bottom:2px; scrollbar-width:none; -ms-overflow-style:none; }
.tabs-wrap::-webkit-scrollbar { display:none; }
.tabs-pill { position:relative; background:rgba(20,20,20,.88); border-radius:40px; display:flex; align-items:center; padding:0 .4rem; height:50px; flex-shrink:0; max-width:100%; }
/* many items → wrap onto multiple rows instead of scrolling (no animated outline) */
.tabs-pill.wrap { flex-wrap:wrap; flex-shrink:1; width:100%; height:auto; min-height:48px; border-radius:24px; padding:.4rem; row-gap:.35rem; justify-content:center; }
.tabs-pill.wrap .nav-outline { display:none; }
.tab-btn { display:block; padding:.45rem 1rem; color:#ddd; background:transparent; border:none; cursor:pointer; font-size:.85rem; border-radius:25px; transition:background .15s,color .15s; white-space:nowrap; position:relative; z-index:1; font-family:inherit; font-weight:500; text-decoration:none; }
.tab-btn:hover { background:rgba(255,206,27,.12); color:var(--accent); }
.tab-btn.active, .tab-btn.on { background:var(--accent); color:#111; font-weight:700; }
.tab-btn:focus, .tab-btn:focus-visible { outline:none !important; box-shadow:none !important; }

/* ─── INTRO / WELCOME SPLASH (popup shown once on entry) ─── */
.intro-overlay { position:fixed; inset:0; z-index:100050; display:none; align-items:center; justify-content:center; padding:1.5rem;
  background:linear-gradient(135deg,#fffdf5 0%,#fff3c9 55%,#ffe6a0 100%); overflow-y:auto; opacity:0; transition:opacity .45s ease; }
.intro-overlay.show { display:flex; opacity:1; }
.intro-overlay.intro-hide { opacity:0; }
.intro-box { position:relative; width:100%; max-width:560px; margin:auto; background:#fff; border-radius:26px; padding:2.4rem 2rem 2rem; text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.22); border:1px solid #f1e7c2; animation:introPop .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes introPop { from { transform:translateY(26px) scale(.97); opacity:.4; } to { transform:translateY(0) scale(1); opacity:1; } }
.intro-x { position:absolute; top:.85rem; right:.95rem; width:36px; height:36px; border:none; border-radius:50%; background:#f3f1ea; color:#555; font-size:1rem; cursor:pointer; transition:.2s; }
.intro-x:hover { background:var(--primary); color:#fff; }
.intro-logo { width:84px; height:84px; object-fit:contain; margin-bottom:.3rem; }
.intro-title { font-size:1.5rem; color:var(--primary); font-weight:700; line-height:1.3; }
.intro-sub { display:inline-block; margin-top:.65rem; background:var(--accent); color:#3a2f00; font-size:.84rem; font-weight:600; padding:.3rem 1.05rem; border-radius:30px; }
.intro-imgwrap { margin:1.3rem 0 1.5rem; }
.intro-img { max-width:100%; max-height:52vh; border-radius:16px; box-shadow:0 14px 36px rgba(0,0,0,.22); display:block; margin:0 auto; }
.intro-actions { display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.intro-enter { display:inline-flex; align-items:center; gap:.5rem; font-family:inherit; font-size:1.02rem; font-weight:700; color:#3a2f00; border:none; cursor:pointer;
  background:linear-gradient(135deg,#ffd84d,#ffce1b); padding:.82rem 2.3rem; border-radius:40px; box-shadow:0 10px 24px rgba(255,206,27,.5); transition:transform .2s, box-shadow .2s; }
.intro-enter:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(255,206,27,.65); }
.intro-link { color:#666; font-size:.9rem; text-decoration:none; border-bottom:1px dashed #bbb; padding-bottom:1px; transition:.2s; }
.intro-link:hover { color:var(--primary); border-color:var(--primary); }
@media (max-width:600px) {
  .intro-box { padding:2rem 1.2rem 1.6rem; border-radius:20px; }
  .intro-title { font-size:1.25rem; }
  .intro-img { max-height:46vh; }
}

/* ─── PAGE BANNER + BREADCRUMB (inner pages) ─── */
.page-banner { background:linear-gradient(135deg,#111,#2a2a2a); color:#fff; padding:3rem 2rem; text-align:center; border-bottom:4px solid var(--accent); }
.page-banner h2 { font-size:1.8rem; margin-bottom:.4rem; }
.page-banner p { opacity:.85; }
.breadcrumb { background:#fff; padding:.7rem 2rem; font-size:.83rem; color:#666; border-bottom:1px solid #e0e0d8; }
.breadcrumb a { color:#444; text-decoration:none; }
.breadcrumb a:hover { color: var(--accent); }
.container { max-width:1050px; margin:0 auto; padding:2.5rem 1.5rem; }

/* ─── FOOTER ─── */
footer {
  background: var(--primary);
  color: rgba(255,255,255,.7);
  padding: 2.5rem 2rem 1rem;
  border-top: 4px solid var(--accent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  max-width: 1050px;
  margin: 0 auto 1.5rem;
}
footer h4 { color: var(--accent); font-size: 1rem; margin-bottom: .8rem; }
footer p, footer li { font-size: .85rem; line-height: 1.9; }
footer ul { list-style: none; }
footer ul li a { color: rgba(255,255,255,.65); text-decoration: none; }
footer ul li a:hover { color: var(--accent); }
.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 1rem;
  font-size: .8rem;
  opacity: .55;
}

/* ─── RESPONSIVE (chrome) — phones, tablets, iPads. Desktop unchanged. ─── */
img, video, iframe, object { max-width: 100%; }

@media (max-width: 900px) {
  /* main nav becomes a horizontal swipe strip so every item stays reachable */
  nav { justify-content: flex-start; overflow-x: auto; overflow-y: visible; padding: .5rem .6rem;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  .nav-pill { flex-shrink: 0; }
  .nav-outline { display: none; }   /* the animated trace doesn't track a scrolled strip */
}

@media (max-width: 768px) {
  .topbar { font-size: .72rem; padding: .35rem .9rem; }
  header { gap: .8rem; padding: .7rem 1rem; }
  .logo-img { width: 56px; height: 56px; }
  .header-text h1 { font-size: 1.12rem; }
  .header-text p { font-size: .72rem; }
  .nav-pill { height: 44px; }
  .nav-btn { padding: .38rem .7rem; font-size: .8rem; }
  .page-banner { padding: 2rem 1.1rem; }
  .page-banner h2 { font-size: 1.4rem; }
  .breadcrumb { padding: .6rem 1rem; }
  .container { padding: 1.8rem 1rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  footer { padding: 2rem 1.2rem 1rem; }
}

@media (max-width: 480px) {
  .topbar { font-size: .66rem; }
  .topbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70vw; }
  .header-text h1 { font-size: 1rem; }
  .page-banner h2 { font-size: 1.2rem; }
  .page-banner p { font-size: .85rem; }
}