/*
Theme Name: Kootec Responsive
Theme URI: https://kootec.fi
Author: Markus
Description: Kootecin sivut
Version: 1.1.0
Text Domain: kootec-responsive
*/

:root {
  --blue-700: #0a66c2;
  --blue-900: #093b77;
  --blue-050: #f2f7ff;
  --white: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --radius: 12px;
  --shadow: 0 8px 20px rgba(2,24,61,0.08);
  --container: 1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body { font-family: 'Inter', sans-serif; color:var(--text); background: var(--white); }
h1, h2, h3, h4, h5 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* Perus header */
header.kc-header { background: var(--white); border-bottom: 1px solid rgba(15,23,42,0.06); position: sticky; top:0; z-index: 100; }
.kc-nav { display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px; }
.brand { font-weight:800; font-size:22px; color:var(--blue-900); text-decoration:none; }
.menu { display:flex; gap:20px; align-items:center; }
.menu__list, .menu__list ul { list-style:none; margin:0; padding:0; }
.menu__list > li { display:inline-block; position:relative; }
.menu__list > li > a { display:inline-block; padding:10px 12px; text-decoration:none; color:var(--text); font-weight:600; }
.menu__list > li > a:hover { color:var(--blue-700); }
.menu__list a, .cta { font-family:'Poppins',sans-serif; }
.cta { background:var(--blue-700); color:#fff !important; padding:10px 16px; border-radius:999px; text-decoration:none; }

/* Alavalikko (desktop) */
.menu__list li { position:relative; }
.menu__list .sub-menu {
  position:absolute; left:0; top:100%; min-width:200px;
  background:#fff; border:1px solid rgba(2,24,61,0.12);
  border-radius:10px; box-shadow:0 12px 28px rgba(2,24,61,0.12);
  padding:8px; display:none; z-index:999;
}
.menu__list .sub-menu a { text-decoration:none !important; }
.menu__list .sub-menu li a { display:block; padding:10px 12px; color:var(--text); border-radius:8px; white-space:nowrap; text-decoration:none !important; }
.menu__list .sub-menu li a:hover { background:var(--blue-050); color:var(--blue-900); }
.menu__list li:hover > .sub-menu,
.menu__list li:focus-within > .sub-menu { display:block; }
.menu__list > li.menu-item-has-children > a::after { content:"▾"; font-size:11px; margin-left:6px; opacity:.8; }

/* Checkbox piiloon */
#nav-toggle { position:absolute; left:-9999px; }

/* Hamburger */
.hamburger{display:none; cursor:pointer; border:1px solid rgba(2,24,61,.12); border-radius:10px; padding:8px 10px; background:#fff; position:relative; z-index:10001;}
.hamburger span{display:block; width:24px; height:2px; background:var(--text); margin:5px 0; border-radius:2px;}

/* Mobiilimoodi */
@media (max-width: 720px){
  .hamburger{display:block;}
  .menu{position:static;} 

 
  .menu__list{
    display:block;
    position:fixed;
    inset:0;
    background:#fff;
    z-index:10000;
    transform:translateX(100%);
    transition:transform .25s ease;
    padding:96px 24px 24px; 
    overflow-y:auto;
  }
  #nav-toggle:checked ~ .menu .menu__list{ transform:translateX(0); }
  .menu__list > li { display:block; }
  .menu__list > li > a { display:block; padding:14px 0; font-size:20px; }

  /* Alavalikko mobiilissa */
  .menu__list .sub-menu {
    position:static; display:none; border:1px solid rgba(2,24,61,0.08);
    box-shadow:none; margin:6px 0 10px 12px; border-radius:10px; padding:8px;
  }
  .menu__list li:focus-within > .sub-menu { display:block; }
}
.hero, .kc-header { position:relative; z-index:1; }
/* Hero */
.hero { position:relative; color:var(--white); background: var(--blue-900); min-height:50vh; display:flex; align-items:center; }
.hero__media { position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(0.6); z-index:-1; }
.hero .wrap { padding:60px 20px; }
.hero h1 { font-size: clamp(28px, 5vw, 44px); margin:0 0 10px; }
.hero p { max-width: 60ch; opacity: .95; }

/* Features */
.features { padding:60px 0; background: var(--white); }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { background: var(--white); border:1px solid rgba(2,24,61,0.1); padding:20px; border-radius: var(--radius); box-shadow: var(--shadow); }
.card h3{margin:0 0 6px}
.card p{margin:0;color:var(--muted)}

/* Footer */
footer.kc-footer { background: var(--blue-900); color: var(--white); padding:40px 20px; }
footer.kc-footer a { color:#dbeafe; text-decoration:none; }
footer.kc-footer a:hover { text-decoration: underline; }

/* Images */
.kc-img-responsive { width:100%; height:auto; display:block; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Accessibility helpers */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#000;color:#fff;padding:8px 10px;border-radius:8px;z-index:999}

/* Responsive tweaks */
@media (max-width: 980px){
  .features-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px){
  .features-grid { grid-template-columns:1fr; }
}