/* ============================================
   HHS OFFICIËLE HUISSTIJL (uit dehaagsehogeschool.nl)
   Primary:    #223343 (donker-blauwgrijs)
   HHS-groen:  #9ea700 (olive accent)
   HHS-cyan:   #00b2cd (secondary)
   Warning:    #ca433c (rood)
   Lichtgrijs: #e8ebec / #d1dce6 / #bcc6cf
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%;-webkit-text-size-adjust:100%}
body{
  font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
  font-size:1.6rem;line-height:1.5;color:#223343;background:#fff;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:#223343;text-decoration:underline}
a:hover{color:#9ea700}

/* HHS top-bar (donker-blauw) */
.hhs-topbar{background:#223343;color:#fff;padding:1.2rem 0}
.hhs-topbar .wrap{max-width:128rem;margin:0 auto;padding:0 2.4rem;display:flex;align-items:center;justify-content:space-between}
.hhs-topbar a{color:#fff;text-decoration:none;font-size:1.3rem;margin-left:2rem}
.hhs-topbar a:hover{color:#9ea700}

/* HHS main header met logo */
.hhs-header{background:#fff;border-bottom:1px solid #e8ebec;padding:2rem 0}
.hhs-header .wrap{max-width:128rem;margin:0 auto;padding:0 2.4rem;display:flex;align-items:center;justify-content:space-between}
.hhs-logo{color:#223343;display:flex;align-items:center}
.hhs-logo svg{height:4rem;width:auto}
.hhs-nav{display:flex;gap:2.4rem}
.hhs-nav a{color:#223343;text-decoration:none;font-weight:600;font-size:1.5rem}
.hhs-nav a:hover{color:#9ea700}

/* Main content */
.hhs-main{flex:1;padding:6rem 0;background:#fff}
.hhs-main .wrap{max-width:80rem;margin:0 auto;padding:0 2.4rem}
.hhs-card{background:#fff;border:1px solid #e8ebec;border-radius:.4rem;padding:4rem;margin-bottom:3rem;box-shadow:0 2px 4px rgba(34,51,67,.06)}
.hhs-card-banner{background:#223343;color:#fff;margin:-4rem -4rem 3rem;padding:2rem 4rem;border-radius:.4rem .4rem 0 0;display:flex;align-items:center;gap:2rem}
.hhs-card-banner svg{height:3rem;width:auto;color:#fff}

h1{font-family:'DIN','Open Sans',sans-serif;font-size:3.6rem;font-weight:700;color:#223343;margin-bottom:1.6rem;line-height:1.2}
h2{font-family:'DIN','Open Sans',sans-serif;font-size:2.4rem;font-weight:700;color:#223343;margin:3rem 0 1.6rem;line-height:1.3}
h3{font-size:1.8rem;font-weight:700;color:#223343;margin:2rem 0 1rem}
p{margin-bottom:1.6rem;color:#43525f}

/* HHS Squangle button (typische HHS-CTA: rechthoek met afgesneden hoek) */
.squangle{
  position:relative;display:inline-block;
  background:#9ea700;color:#fff!important;
  padding:1.4rem 3.2rem;font-weight:700;font-size:1.5rem;
  text-decoration:none;text-transform:uppercase;letter-spacing:.05em;
  border:none;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 1.6rem) 0,100% 1.6rem,100% 100%,1.6rem 100%,0 calc(100% - 1.6rem));
  transition:background .2s;
}
.squangle:hover{background:#6e7400;color:#fff!important}
.squangle.primary{background:#223343}
.squangle.primary:hover{background:#384b5d}
.squangle.cyan{background:#00b2cd}
.squangle.cyan:hover{background:#19bad2}

/* Alert blocks */
.alert{padding:2rem;margin:2.4rem 0;border-radius:.4rem;border-left:.4rem solid;font-size:1.5rem}
.alert.warning{background:#fff5f3;border-color:#ca433c;color:#43525f}
.alert.info{background:#e8f7fa;border-color:#00b2cd;color:#43525f}
.alert.success{background:#f7f8e8;border-color:#9ea700;color:#43525f}
.alert strong{color:#223343}

/* Tabellen */
.hhs-table{width:100%;border-collapse:collapse;margin:2.4rem 0;font-size:1.4rem}
.hhs-table th{background:#223343;color:#fff;padding:1.2rem 1.6rem;text-align:left;font-weight:700}
.hhs-table td{padding:1.2rem 1.6rem;border-bottom:1px solid #e8ebec;color:#43525f}
.hhs-table tr:hover{background:#f7f8f9}
.tag{display:inline-block;padding:.4rem 1rem;font-size:1.3rem;font-weight:600;border-radius:1.2rem}
.tag.ok{background:#f7f8e8;color:#6e7400}
.tag.warn{background:#fff5f3;color:#ca433c}

/* Footer */
.hhs-footer{background:#223343;color:#bcc6cf;padding:3rem 0;font-size:1.3rem;margin-top:auto}
.hhs-footer .wrap{max-width:128rem;margin:0 auto;padding:0 2.4rem}
.hhs-footer a{color:#bcc6cf;text-decoration:none}
.hhs-footer a:hover{color:#9ea700}
.hhs-footer-bottom{border-top:1px solid #384b5d;margin-top:2rem;padding-top:2rem;text-align:center}

/* Login form (Microsoft 365 spoof) */
.ms-login{background:#f2f2f2;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;flex-direction:column}
.ms-card{background:#fff;padding:4.4rem;width:100%;max-width:44rem;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.ms-card .branding{margin-bottom:2.4rem}
.ms-card h1{font-size:2.4rem;font-weight:600;color:#1b1b1b;margin-bottom:1.2rem}
.ms-card input{width:100%;border:none;border-bottom:1px solid #666;padding:.6rem 0;font-size:1.5rem;margin-bottom:2.4rem;outline:none;font-family:inherit}
.ms-card input:focus{border-bottom-color:#0067b8}
.ms-card .ms-btn{background:#0067b8;color:#fff;border:none;padding:.8rem 1.2rem;min-width:10.8rem;float:right;font-size:1.5rem;cursor:pointer;font-family:inherit}
.ms-card .ms-btn:hover{background:#005a9e}
.ms-card .links{margin:2rem 0;font-size:1.3rem;clear:both}
.ms-card .links a{color:#0067b8;text-decoration:none;display:block;margin-bottom:.8rem}
.ms-hhs-banner{background:#9ea700;color:#fff;padding:1.2rem;text-align:center;font-size:1.3rem;margin-bottom:2rem;border-radius:.2rem;display:flex;align-items:center;justify-content:center;gap:1rem}
.ms-hhs-banner svg{height:2.4rem;width:auto;color:#fff}

@media (max-width:768px){
  .hhs-main{padding:3rem 0}
  .hhs-card{padding:2.4rem}
  .hhs-card-banner{margin:-2.4rem -2.4rem 2rem;padding:1.6rem 2.4rem}
  h1{font-size:2.6rem}
}