/* =========================================================
   ReadIGo – Globális stíluslap (mobil-first, rendszerezett)
   - Minden eredeti elem megmarad, csak tisztázva/finomítva
   - A hamburger/menu CSS átkerült a hamburger.css-be
   ========================================================= */

/* ---------- Alap beállítások / Változók ---------- */
:root{
  --blue-300:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb;
  --blue-700:#1d4ed8; --blue-400:#4ba1e5; --blue-500b:#3a88d9;

  --orange-400:#ff9900; --orange-500:#e67e00; --orange-600:#b85e00;
  --green-500:#22c55e; --green-600:#16a34a;

  --text:#222; --muted:#666; --bg:#fdf4e3; --white:#fff;

  --shadow-1:0 2px 6px rgba(0,0,0,.1);
  --shadow-2:0 8px 20px rgba(0,0,0,.15);
  --shadow-3:0 0 15px rgba(0,0,0,.05);
  --shadow-4:0 4px 12px rgba(0,0,0,.2);

  --radius-8:8px; --radius-10:10px; --radius-12:12px; --radius-16:16px;

  --font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Jobb box-sizing a teljes UI-ra */
*,*::before,*::after{ box-sizing:border-box; }

/* ---------- Alap stílusok ---------- */
body{
  margin:0; padding:0;
  font-family:var(--font);
  color:var(--text);
  min-height:100svh;
  background:url('/readigo/hatterindex.png') no-repeat center center fixed;
  background-size:cover;
  background-color:var(--bg);
}

@media (max-width: 768px){
  body{
    background-attachment:scroll;
    background-position:center top;
  }
}

/* ---------- Fejléc ---------- */
header{
  background:linear-gradient(to bottom, var(--blue-300), var(--blue-500));
  color:var(--white);
  padding:15px 25px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
  box-shadow:var(--shadow-1);
  position:relative; z-index:100;
}

header .logo img{
  height:clamp(56px, 8vw, 110px);
  display:block;
}

/* NAV középre igazítás wrapperrel */
.nav-wrapper{
  flex:1; display:flex; justify-content:center;
  min-width:200px;
}

/* ---------- Navigáció ---------- */
nav{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  position:relative; z-index:101;
}

/* Gombok / linkek */
nav a,
nav button,
.dropdown > span{
  color:#fff;
  background:linear-gradient(to bottom, var(--blue-400) 0%, var(--blue-500b) 100%);
  border:none; padding:10px 16px;
  font-weight:bold; font-size:.95rem; text-transform:uppercase;
  border-radius:var(--radius-8);
  box-shadow:0 4px #2d78b3, inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  cursor:pointer; text-decoration:none; display:inline-block; text-align:center;
  white-space:nowrap;
}

nav a:hover,
nav button:hover,
.dropdown > span:hover{
  background:linear-gradient(to bottom, #6bb7f0 0%, var(--blue-400) 100%);
}
nav a:active,
nav button:active,
.dropdown > span:active{
  transform:translateY(2px);
  box-shadow:0 2px #2d78b3;
}
nav a:focus-visible,
nav button:focus-visible,
.dropdown > span:focus-visible{
  outline:3px solid #fff; outline-offset:2px;
}

/* Kiemelt (narancs) */
nav .btn-orange{
  background:linear-gradient(to bottom, var(--orange-400) 0%, var(--orange-500) 100%);
  box-shadow:0 4px var(--orange-600), inset 0 1px 0 rgba(255,255,255,.4);
}
nav .btn-orange:hover{
  background:linear-gradient(to bottom, #ffaa22 0%, #ff8800 100%);
}
nav .btn-orange:active{
  transform:translateY(2px);
  box-shadow:0 2px var(--orange-600);
}

/* ---------- Dropdown ---------- */
.dropdown{ position:relative; display:inline-block; }
.dropdown-content{
  display:none; position:absolute; top:110%; left:0;
  min-width:180px; background:#fff; border-radius:var(--radius-10);
  box-shadow:var(--shadow-4); overflow:hidden; z-index:200;
  animation:fadeIn .2s ease-in-out;
}
.dropdown-content a{
  background-color:var(--blue-400);
  color:#fff; padding:12px 18px; text-decoration:none; display:block;
  font-weight:bold; text-align:center;
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:background .2s ease;
}
.dropdown-content a:hover{ background-color:#6bb7f0; }
.dropdown:hover .dropdown-content{ display:block; }

body.mobile-open .dropdown-content{ display:none !important; }
body.mobile-open .dropdown.open .dropdown-content{
  display:block !important; position:relative; top:auto; left:auto; width:100%;
  box-shadow:none;
}

/* ---------- Köszöntődoboz / általános kártya ---------- */
.welcome{
  background:#fff; border:1px solid #ddd;
  padding:30px 25px; margin:40px auto;
  max-width:800px; border-radius:var(--radius-16);
  box-shadow:var(--shadow-3);
  text-align:center;
}

/* ---------- Űrlapok ---------- */
form.form-box{
  background:linear-gradient(to bottom right, #fffaf0, #fff);
  border:1px solid #ccc; border-radius:14px;
  padding:35px; max-width:650px; margin:50px auto;
  box-shadow:0 0 18px rgba(0,0,0,.06);
  text-align:left;
}
form.form-box label{
  display:block; margin-bottom:15px; font-weight:bold; color:#3a3a3a;
}
form.form-box input,
form.form-box select{
  width:100%; padding:10px; font-size:1rem; border-radius:6px;
  border:1px solid #ccc; margin-top:5px; background:#fefefe;
}
form.form-box input:focus,
form.form-box select:focus{
  outline:none; border-color:var(--blue-500b); box-shadow:0 0 4px rgba(58,136,217,.5);
}
form.form-box button{
  margin-top:25px; padding:12px 24px;
  background:linear-gradient(to bottom, var(--orange-400) 0%, var(--orange-500) 100%);
  border:none; color:#fff; font-weight:bold; font-size:1.1rem; border-radius:8px;
  box-shadow:0 4px var(--orange-600), inset 0 1px 0 rgba(255,255,255,.4);
  cursor:pointer; transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
form.form-box button:hover{
  background:linear-gradient(to bottom, #ffaa22 0%, #ff8800 100%);
}
form.form-box button:active{
  transform:translateY(2px); box-shadow:0 2px var(--orange-600);
}

.password-hint{ font-size:.9rem; color:var(--muted); margin-top:6px; }

/* ---------- Tipográfia ---------- */
h1{ font-size:2.5em; color:var(--blue-500b); margin-bottom:10px; }
h2{ color:#444; margin-top:40px; }
p{ font-size:1.1rem; line-height:1.6; max-width:700px; margin:0 auto; }

/* ---------- Lábléc ---------- */
footer{
  background-color:#3a9d75; color:#fff; text-align:center;
  padding:15px; font-size:.9rem; margin-top:60px;
  box-shadow:0 -2px 6px rgba(0,0,0,.1);
}

/* Lábléc navigáció */
footer nav{ display:flex; justify-content:center; gap:20px; margin-bottom:8px; }
footer nav a{
  color:#fff; text-decoration:none; font-weight:500;
  padding:4px 8px; border-radius:4px;
  transition:opacity .2s ease;
}
footer nav a:hover{ opacity:.8; }

/* ---------- Tartalmi lapok ---------- */
section.welcome{
  max-width:800px; margin:50px auto; padding:40px 30px;
  background:#fff; border-radius:var(--radius-12);
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  line-height:1.75; color:#333;
}
section.welcome h1{
  font-size:2.8rem; margin-bottom:20px; text-align:center;
  color:var(--blue-500b); letter-spacing:.5px;
}
section.welcome p{
  text-align:justify; margin-bottom:18px; font-size:1rem;
}

/* ---------- Tanári felület (dashboard) ---------- */
body.dashboard-body{
  margin:0; display:flex; height:100vh; font-family:var(--font);
  background-color:#f4f6fa;
}
.app-container{ display:flex; width:100%; }
.sidebar{
  width:220px; background:var(--blue-500); color:#fff; padding:20px 0;
  display:flex; flex-direction:column; align-items:center;
  box-shadow:2px 0 6px rgba(0,0,0,.1);
}
.sidebar-header{ font-size:1.4em; font-weight:bold; margin-bottom:20px; }
.sidebar-nav{ display:flex; flex-direction:column; width:100%; gap:10px; }
.sidebar-nav a{
  display:block; padding:12px 20px; color:#fff; text-decoration:none;
  transition:background .2s ease;
}
.sidebar-nav a:hover{ background:var(--blue-600); }
.main-content{ flex-grow:1; padding:40px; background:#fff; }

/* ---------- Általános ---------- */
.btn-green{
  background:var(--green-500); color:#fff; padding:8px 15px; border-radius:6px;
  text-decoration:none; font-weight:bold; display:inline-block;
  margin-left:10px;
  transition:background-color .2s ease, transform .1s ease;
}
.btn-green:hover{ background:var(--green-600); }
.btn-green:active{ transform:translateY(1px); }

.checkbox-label{
  display:flex; align-items:flex-start; gap:10px; font-size:16px;
  line-height:1.5; margin:15px 0;
}
.checkbox-label input[type="checkbox"]{
  margin-top:4px; width:18px; height:18px; flex-shrink:0;
}

/* ---------- Animáció ---------- */
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(-5px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ---------- Mozgáscsökkentés ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}