/* Kairos Customer Template – predictable + responsive */

/* NOTE: Theme variables are injected by PHP after this file is loaded.
   Do NOT set --panel-bg / --header-bg / --brand here, only use fallbacks. */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background:var(--bg, #f3f4f6);
  color:var(--text, #111827);
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.95}

/* Header */
.topbar{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  /* header padding voidaan määrittää configissa muuttujalla --header-padding */
  padding: var(--header-padding, 18px 22px);
  background:var(--header-bg, #ffffff);
  border-bottom:1px solid rgba(0,0,0,.08);
}
/* inline-menussa topbar__inline vie käytettävissä olevan tilan, eikä pakota 100 % leveyttä */
.topbar__inline{flex:1 1 auto;}
/* Älä pakota menu leveyttä täydeksi inline-tilassa */
.topbar__inline .menu{width:auto;}
.topbar__inline .menu__inner{padding:0;}

.brand__name{font-weight:800;font-size:20px;line-height:1.1}
.brand__slogan{color:rgba(0,0,0,.55);margin-top:4px;font-size:14px}

/* language switch */
.lang a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.10);
  margin-left:6px;
  color:rgba(0,0,0,.65);
  background:rgba(255,255,255,.60);
}
.lang a.active{color:rgba(0,0,0,.9);border-color:rgba(0,0,0,.18);background:rgba(0,0,0,.03)}

/* kielivalitsin container. Järjestys ja sijoitus määritellään luokilla lang--left / lang--right. */
.lang{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
}
.lang--right{margin-left:auto;}
.lang--left{margin-left:0;}

/* Banner */
.banner{
  width:100%;
  height:var(--banner-height, 25vh);
  min-height:180px;
  max-height:360px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

@media (min-width: 961px){
  .banner{height: var(--banner-height-desktop, 30vh);}
}

/* Menu */
.menu{
  position:relative;
  min-height: var(--menu-bar-height, 56px);
  display:flex;
  align-items:center;
  z-index: 10;
}
.menu__inner{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  padding:10px 18px;
}

/* Alignment */
.menu--left .menu__inner{justify-content:flex-start}
.menu--center .menu__inner{justify-content:center}
.menu--right .menu__inner{justify-content:flex-end}

/* Links */
.menu .menu__item{
  text-decoration:none !important;
  border:none !important;
  background:transparent;
  color:rgba(0,0,0,.72);
  padding: 0 16px;
  height: var(--menu-bar-height, 56px);
  display: inline-flex;
  align-items: center;
  border-radius: 0;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

/* BAR style: full-row background */
.menu--bar{
  margin-bottom: var(--menu-bottom-gap, 0px);
  background: var(--menu-bg, var(--panel-bg, #ffffff));
  border-bottom: 1px solid rgba(0,0,0,.18);
  box-shadow: var(--menu-shadow, none);
}
.menu--bar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow: var(--menu-inset, none);
}

/* ROLLER depth (cylindrical look, straight edges by default) */
.menu--bar[data-depth="roller"]{
  position:relative;
  border-bottom: none;
  border-radius: var(--menu-radius, 0px);
  overflow: hidden;
  isolation: isolate;
  z-index: 20;
}
.menu--bar[data-depth="roller"]::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: var(--menu-roller-overlay, none);
  mix-blend-mode: normal;
}
/* Roller: items stay straight-edged (no rounding on hover/active) */
.menu--bar[data-depth="roller"] .menu__item,
.menu--bar[data-depth="roller"] .menu__item:hover,
.menu--bar[data-depth="roller"] .menu__item.active{
  border-radius: 0 !important;
}
/* Roller: hover press (1px) */
.menu--bar[data-depth="roller"] .menu__item{
  position:relative;
  transition: transform .12s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.menu--bar[data-depth="roller"] .menu__item:hover{
  transform: translateY(1px);
}
/* Roller: active top highlight line */
.menu--bar[data-depth="roller"] .menu__item.active::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background: rgba(255,255,255,.35);
}

.menu--bar .menu__item{
  color: var(--menu-text, rgba(0,0,0,.88));
}
.menu--bar .menu__inner{ padding: 0 18px; }

/* ROLLER depth (cylindrical look, straight edges by default) */
.menu--bar[data-depth="roller"]{
  position:relative;
  border-bottom: none;
  border-radius: var(--menu-radius, 0px);
  overflow: hidden;
  isolation: isolate;
  z-index: 20;
}
.menu--bar[data-depth="roller"]::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: var(--menu-roller-overlay, none);
  mix-blend-mode: normal;
}
/* Roller: items stay straight-edged (no rounding on hover/active) */
.menu--bar[data-depth="roller"] .menu__item,
.menu--bar[data-depth="roller"] .menu__item:hover,
.menu--bar[data-depth="roller"] .menu__item.active{
  border-radius: 0 !important;
}
/* Roller: hover press (1px) */
.menu--bar[data-depth="roller"] .menu__item{
  position:relative;
  transition: transform .12s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.menu--bar[data-depth="roller"] .menu__item:hover{
  transform: translateY(1px);
}
/* Roller: active top highlight line */
.menu--bar[data-depth="roller"] .menu__item.active::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background: rgba(255,255,255,.35);
}

.menu--bar .menu__item:hover{
  background: var(--menu-hover, rgba(255,255,255,.10));
}

/* ROLLER depth (cylindrical look, straight edges by default) */
.menu--bar[data-depth="roller"]{
  position:relative;
  border-bottom: none;
  border-radius: var(--menu-radius, 0px);
  overflow: hidden;
  isolation: isolate;
  z-index: 20;
}
.menu--bar[data-depth="roller"]::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: var(--menu-roller-overlay, none);
  mix-blend-mode: normal;
}
/* Roller: items stay straight-edged (no rounding on hover/active) */
.menu--bar[data-depth="roller"] .menu__item,
.menu--bar[data-depth="roller"] .menu__item:hover,
.menu--bar[data-depth="roller"] .menu__item.active{
  border-radius: 0 !important;
}
/* Roller: hover press (1px) */
.menu--bar[data-depth="roller"] .menu__item{
  position:relative;
  transition: transform .12s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.menu--bar[data-depth="roller"] .menu__item:hover{
  transform: translateY(1px);
}
/* Roller: active top highlight line */
.menu--bar[data-depth="roller"] .menu__item.active::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background: rgba(255,255,255,.35);
}

.menu--bar .menu__item.active{
  background: var(--menu-active, rgba(255,255,255,.16));
  font-weight: 750;
}

/* INLINE style: plain text (inside header or banner; no separate bar) */
.menu--inline{
  background:transparent;
  border:0;
  box-shadow:none;
  min-height:auto;
}
.menu--inline .menu__inner{
  /* inline-menun sisäkontaineri vie koko leveyden, jotta justify-content toimii (left/center/right) */
  width:100%;
  gap:0;
  padding:0;
}
.menu--inline .menu__item{
  padding:0;
  height:auto;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  font-weight:600;
  color: var(--inline-menu-text, rgba(0,0,0,.88));
  transition:none !important;
}
.menu--inline .menu__item:not(:last-child)::after{
  content:"|";
  display:inline-block;
  padding:0 14px;
  color: var(--inline-menu-sep, rgba(0,0,0,.32));
}
.menu--inline .menu__item:hover,
.menu--inline .menu__item:active,
.menu--inline .menu__item.active{
  background:transparent !important;
  color: var(--inline-menu-text, rgba(0,0,0,.88)) !important;
}
.menu--inline .menu__item::before,
.menu--inline .menu__item:hover::before,
.menu--inline .menu__item.active::before{
  content:none !important;
}

/* Banner slots for inline menu */
.banner{
  position: relative;
}
.banner__slot{
  position:absolute;
  left:0;
  right:0;
  padding: 10px 18px;
  display:flex;
  pointer-events:auto;
}
.banner__slot--top{ top: 0; }
.banner__slot--bottom{ bottom: 0; }
.banner__slot .menu{
  width:100%;
}
.menu--inline-on-banner{
  --inline-menu-text: rgba(255,255,255,.96);
  --inline-menu-sep: rgba(255,255,255,.45);
}
.menu--inline-on-banner .menu__item{
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
}
/* Hamburger (hidden on desktop by default; shown via media query) */
.hamburger{
  display:none;
  margin-left: 10px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.60);
  cursor: pointer;
}
.hamburger span{
  display:block;
  width: 20px;
  height: 2px;
  background: rgba(0,0,0,.65);
  margin: 0;
  border-radius: 2px;
}

.hamburger:hover{background: rgba(255,255,255,.72);}
.hamburger:active{transform: translateY(1px);}

/* Main layout */
.layout{
  width:100%;
  margin:0;
  padding:0;
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
  min-height:calc(100vh - 160px);
}
.layout.has-left{grid-template-columns:260px 1fr;}
.layout.has-right{grid-template-columns:1fr 260px;}
.layout.has-left.has-right{grid-template-columns:260px 1fr 260px;}

.sidebar{
  background:var(--panel-bg, #ffffff);
  padding:18px;
  border-right:1px solid rgba(0,0,0,.08);
}
.sidebar--right{
  border-right:none;
  border-left:1px solid rgba(0,0,0,.08);
}
.content{
  width:100%;
  justify-self:stretch;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding: 0;
  min-width:0;
}
.content__inner{
  max-width: var(--content-inner-max, 900px);
  margin: 0 auto;
  padding: 22px;
}

/* Sidebar boxes always white */
.sidebar-box{
  background:#ffffff;
  border-radius:14px;
  padding:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  margin-bottom:14px;
}
.sidebar-box:last-child{margin-bottom:0}
.sidebar-box h3{margin-top:0}

/* Contact form */
form.contact{margin-top:18px}
form.contact label{display:block;font-weight:650;margin:0 0 6px}
form.contact .row{display:flex;gap:14px}
form.contact .row>div{flex:1 1 0;min-width:0}
form.contact input, form.contact textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  font:inherit;
  background:#fff;
}
form.contact textarea{min-height:140px;resize:vertical}
form.contact button[type="submit"]{
  margin-top:14px;
  padding:12px 14px;
  border:0;
  border-radius:12px;
  background:var(--brand, #1e40af);
  color:#fff;
  font-weight:750;
  cursor:pointer;
}

/* Footer */
.footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 22px;
  color:rgba(0,0,0,.55);
  border-top:1px solid rgba(0,0,0,.08);
  gap:12px;
  flex-wrap:wrap;
}
.footer__credit a{
  color:rgba(0,0,0,.65);
  border-bottom:1px solid rgba(0,0,0,.18);
  padding-bottom:1px;
}
.footer__credit a:hover{color:rgba(0,0,0,.9);border-bottom-color:rgba(30,64,175,.45)}

/* Responsive */
@media (max-width: 1100px){
  .layout.has-left.has-right{grid-template-columns:260px 1fr;}
  .sidebar--right{grid-column:1/-1;border-left:none;border-top:1px solid rgba(0,0,0,.08);}
  .content{justify-self:stretch;max-width:none;border-radius:0}
}

@media (max-width: 960px){
  /* hamburger / menu behavior */
  .hamburger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
  .menu__inner{display:none;}             /* collapsed by default */
  .menu.open .menu__inner{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:12px 14px 16px;
  }
  .menu.open .menu__item{
    padding:12px 14px;
    border-radius:12px;
    background:rgba(255,255,255,.50);
  }
  .menu--inline .menu__item:not(:last-child)::after{content:"";padding:0;} /* no separators in mobile list */

  /* sidebars off */
  .sidebar{display:none!important;}
  .layout{grid-template-columns:1fr!important;gap:0}
  .content{
    max-width:none;
    border-radius:0;
    border:0;
    padding:16px;
  }
  form.contact .row{flex-direction:column;}
}