/* ==========================================================================
   SITE-WIDE CRITICAL BASELINE (shared across pages)
   Keeps header, grid, utilities from flashing unstyled
   ========================================================================== */

:root{
  --ubc-blue:#002145;
  --link-blue:#0a58ca;
  --text:#0f172a;
  --bg:#ffffff;
  --border:#e2e8f0;
}

/* Reset / base */
html{box-sizing:border-box;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;line-height:1.5;color:var(--text);background:var(--bg)}
img{max-width:100%;height:auto}
svg{vertical-align:middle}
a{color:var(--link-blue);text-decoration:none}
a:hover,a:focus{text-decoration:underline}
:focus{outline:2px solid #94c0ff;outline-offset:2px}

.visuallyhidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}
.is-hidden{display:none!important}

/* Layout helpers */
.container__outer{width:100%}
.container__inner{max-width:1200px;margin:0 auto;padding:16px}
.page-wrapper{min-height:100vh;display:flex;flex-direction:column}
.page-wrapper__inner{flex:1}

/* Header shell (so it paints immediately) */
.page-header{position:sticky;top:0;z-index:1000;background:var(--ubc-blue);color:#fff;padding:12px 0}
.page-header a{color:#fff}
.page-header__brand{display:flex;align-items:center;padding:0 16px}
.page-header__buttons{display:flex;gap:8px;padding:0 16px}
.page-header__buttons button{background:transparent;border:0;color:#fff;padding:8px;cursor:pointer}
.page-header__nav-items--wrapper{overflow-x:auto}
.page-header__nav-items{display:flex;align-items:center;list-style:none;gap:8px;margin:0;padding:8px 16px}
.nav-item{position:relative}
.nav-item__link{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:6px}
.nav-item__link:hover{background:rgba(255,255,255,.1);text-decoration:none}

/* Generic dropdown container baseline */
.nav-item .dropdown{display:none;position:absolute;left:0;top:calc(100% + 8px);background:#fff;color:var(--text);border:1px solid var(--border);border-radius:12px;padding:16px;min-width:260px;z-index:1001}
.nav-item .dropdown.show{display:block}

/* Buttons minimal */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:6px;border:1px solid #cbd5e1;background:#e2e8f0;color:var(--text);cursor:pointer}
.btn--fill--blue{background:var(--link-blue);border-color:var(--link-blue);color:#fff}

/* Footer shell */
.footer--outer{background:#f1f5f9;color:var(--text);border-top:1px solid var(--border);margin-top:24px}
.footer--inner{max-width:1200px;margin:0 auto;padding:24px 16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.footer__links{list-style:none;padding:0;margin:0}
.footer__link{display:inline-block;padding:6px 0;color:var(--link-blue)}
.footer__legal{border-top:1px solid var(--border);padding:12px 16px;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Utility mini-pack (yang sering dipakai di header/hero) */
.d-flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.d-grid{display:grid}
.text-center{text-align:center}
.rounded{border-radius:8px}
.border{border:1px solid var(--border)}
.shadow-md{box-shadow:0 8px 16px rgba(15,23,42,.12)}

/* Responsive quick */
@media (max-width:1024px){ .footer--inner{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .footer--inner{grid-template-columns:1fr} }

/* Dark scheme baseline */
@media (prefers-color-scheme: dark){
  :root{ color-scheme:dark; }
  body{ background:#0b1220; color:#e5e7eb; }
  .page-header{ background:#0b2347; }
  .nav-item .dropdown{ background:#0f172a; border-color:#1f2937; color:#e5e7eb; }
  .footer--outer{ background:#111827; border-top-color:#1f2937; }
  .footer__link{ color:#7db0ff; }
}