/* Tutor TIC — shared header, footer and simple pages.
   Everything is scoped under #tt-top / #tt-hdr / #tt-ftr / .tt-* so the
   course pages' own CSS keeps working and does not break the header. */
#tt-top,#tt-top *,#tt-hdr,#tt-hdr *,#tt-ftr,#tt-ftr *{box-sizing:border-box;margin:0;padding:0}
#tt-top{background:#1c4587;color:#fff;font:400 15px/1.4 Comfortaa,"Segoe UI",Arial,sans-serif;text-align:center;padding:12px 16px;letter-spacing:.2px}
#tt-hdr{background:#fff;font-family:Comfortaa,"Segoe UI",Arial,sans-serif;box-shadow:0 1px 4px rgba(0,0,0,.12);position:relative;z-index:40}
#tt-hdr .tt-in{max-width:1280px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;align-items:center;gap:20px}
#tt-hdr .tt-brand{display:flex;align-items:center;gap:12px;color:#212121;text-decoration:none;font-size:20px;flex-shrink:0}
#tt-hdr .tt-brand img{width:40px;height:40px;border-radius:50%;display:block}
#tt-hdr .tt-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
#tt-hdr a{color:#212121;text-decoration:none}
#tt-hdr .tt-nav>a,#tt-hdr .tt-more>button{display:block;padding:10px 10px;font:400 15px/1.2 Comfortaa,"Segoe UI",Arial,sans-serif;color:#212121;white-space:nowrap;border-radius:6px}
#tt-hdr .tt-nav>a:hover,#tt-hdr .tt-more>button:hover{background:#f1f4f9}
#tt-hdr a[aria-current=page]{font-weight:700}
#tt-hdr .tt-more{position:relative}
#tt-hdr .tt-more>button{background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:4px}
#tt-hdr .tt-drop{display:none;position:absolute;right:0;top:100%;background:#fff;min-width:230px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.16);padding:6px 0;z-index:50}
#tt-hdr .tt-more:hover .tt-drop,#tt-hdr .tt-more:focus-within .tt-drop{display:block}
#tt-hdr .tt-drop a{display:block;padding:11px 18px;font-size:15px;white-space:nowrap}
#tt-hdr .tt-drop a:hover{background:#f1f4f9}
#tt-hdr #tt-burger{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
#tt-hdr .tt-burger{display:none;margin-left:auto;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:8px}
#tt-hdr .tt-burger span{display:block;width:22px;height:2px;background:#212121;border-radius:2px}
#tt-hdr .tt-mnav{display:none}
@media (max-width:1000px){
  #tt-hdr .tt-nav{display:none}
  #tt-hdr .tt-burger{display:flex}
  #tt-hdr .tt-in{flex-wrap:wrap}
  #tt-hdr #tt-burger:checked~.tt-mnav{display:block;width:100%;padding:4px 0 12px;border-top:1px solid #eef0f4}
  #tt-hdr .tt-mnav a{display:block;padding:12px 4px;font-size:16px;border-bottom:1px solid #f3f4f6}
  #tt-top{font-size:13px;padding:12px 12px}
}
#tt-ftr{background:#fff;color:#212121;text-align:center;font:400 13px/1.6 Comfortaa,"Segoe UI",Arial,sans-serif;padding:28px 16px 34px}
#tt-ftr p{margin:6px 0}
#tt-ftr a{color:inherit;text-decoration:none}

/* Simple pages (video tutorials) */
.tt-native-body{margin:0;background:#fff;color:#212121;font-family:Comfortaa,"Segoe UI",Arial,sans-serif}
.tt-native{max-width:1000px;margin:0 auto;padding:36px 20px 20px;font-family:Comfortaa,"Segoe UI",Arial,sans-serif;color:#212121}
.tt-h1{font:400 45px/1.3 Comfortaa,"Segoe UI",Arial,sans-serif;color:#1c4587;text-align:center;margin:28px 16px 18px;padding:0}
.tt-native .tt-h1{margin-top:0}
.tt-video{margin:34px auto 0;max-width:760px}
.tt-video h2{font:400 28px/1.35 Comfortaa,"Segoe UI",Arial,sans-serif;color:#212121;text-align:center;margin:0 0 18px;padding:0}
.tt-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#000}
.tt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tt-native-after{padding-top:8px}
.tt-soon{text-align:center;font-size:18px;line-height:1.7;margin:24px auto 0;max-width:640px}
.tt-soon p{margin:0 0 12px}
.tt-soon a{color:#1c4587;font-weight:700}
.tt-app{margin:0;padding:0;line-height:0}
.tt-app iframe{display:block;width:100%;height:calc(100vh - 120px);min-height:640px;border:0}
@media (max-width:600px){
  .tt-h1{font-size:32px}
  .tt-video h2{font-size:21px}
  .tt-native{padding:24px 14px 12px}
}
