/* ============================================================
   ai.blocksize.hr — shared site chrome (header + footer)
   Single source of truth. Loaded by every page.
   ============================================================ */

/* ---- Header ------------------------------------------------ */
header.site-header{
  background:rgba(15,23,42,0.97);
  border-bottom:1px solid #1E293B;
  padding:.9rem 2rem;
  display:flex;
  align-items:center;
  position:sticky;
  top:0;
  z-index:200;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  width:100%;
  box-sizing:border-box;
}
header.site-header nav{
  display:flex;
  align-items:center;
  width:100%;
  justify-content:space-between;
  max-width:none;
  margin:0;
  padding:0;
  border:none;
}
header.site-header .site-logo{
  font-size:1.2rem;
  font-weight:700;
  color:#F59E0B;
  text-decoration:none;
  letter-spacing:-.01em;
  flex-shrink:0;
}
/* Brand mark: the [ai] bracket mark, knocked out (no tile) so it sits lightly on
   the dark header. Amber #F59E0B matches the "AI" beside it; letters are paper
   #F4F2EC. The tiled version of the same mark is the favicon, the touch icon and
   the light-theme header mark in the redesign. Deliberately NOT a flex child:
   the logo is the text run "AI <span>Workshop</span>", and a flex container would
   turn those two words into separate items and space them by the gap. */
header.site-header .site-logo::before{
  content:"";
  display:inline-block;
  vertical-align:-.34em;
  width:30px;
  height:30px;
  margin-right:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cpath d=%22M20.5 20 H15 V44 H20.5%22 stroke=%22%23F59E0B%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M43.5 20 H49 V44 H43.5%22 stroke=%22%23F59E0B%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Ccircle cx=%2229%22 cy=%2236.9%22 r=%225.1%22 stroke=%22%23F4F2EC%22 stroke-width=%222.9%22 fill=%22none%22/%3E%3Cpath d=%22M34.1 31.8 V42%22 stroke=%22%23F4F2EC%22 stroke-width=%222.9%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M40.1 31.8 V42%22 stroke=%22%23F4F2EC%22 stroke-width=%222.9%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2240.1%22 cy=%2226.6%22 r=%221.9%22 fill=%22%23F4F2EC%22/%3E%3C/svg%3E") center/contain no-repeat;
}
header.site-header .site-logo span{color:#F1F5F9;}
header.site-header .site-nav-right{display:flex;align-items:center;gap:1.25rem;}
header.site-header .site-nav-link{
  margin:0;
  color:#94A3B8;
  font-size:.875rem;
  font-weight:500;
  text-decoration:none;
  transition:color .2s;
}
header.site-header .site-nav-link:hover{color:#F59E0B;}

/* ---- Language switcher ------------------------------------- */
header.site-header .site-lang-sw{display:flex;gap:3px;}
header.site-header .site-lang-sw a{
  margin:0;
  background:transparent;
  border:1px solid #334155;
  color:#64748B;
  font-size:.7rem;
  font-weight:700;
  padding:3px 8px;
  border-radius:5px;
  text-decoration:none;
  transition:all .2s;
  line-height:1.6;
  cursor:pointer;
}
header.site-header .site-lang-sw a:hover{border-color:#F59E0B;color:#F59E0B;}
header.site-header .site-lang-sw a.cur{background:#F59E0B;border-color:#F59E0B;color:#0F172A;}

/* ---- Certification badge ----------------------------------- */
header.site-header .site-nav-cert{
  background:rgba(217,119,6,.15);
  border:1px solid rgba(217,119,6,.3);
  color:#F59E0B;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.05em;
  padding:3px 10px;
  border-radius:20px;
  white-space:nowrap;
}

/* ---- Footer ------------------------------------------------ */
footer.site-footer{
  background:#080E1A;
  border-top:1px solid #1E293B;
  padding:2rem;
  text-align:center;
  color:#64748B;
  font-size:.875rem;
  margin-top:4rem;
}
footer.site-footer p{margin:0;}
footer.site-footer a{color:#94A3B8;text-decoration:none;transition:color .2s;}
footer.site-footer a:hover{color:#F59E0B;}

/* ---- Responsive -------------------------------------------- */
@media(max-width:768px){
  header.site-header .site-nav-cert{display:none;}
  header.site-header{padding:.75rem 1rem;}
  header.site-header .site-nav-right{gap:.75rem;}
}
@media(max-width:500px){
  header.site-header .site-nav-link{display:none;}
}