/* ===== CloudKlass Home Styles (scoped) ===== */

.home {
  /* Scoped CSS variables for Home only */
  --primary-color: #004080;
  --secondary-color: #0073e6;
  --accent-color: #00a86b;
  --light-blue: #e8f4fd;
  --success-green: #10b981;
  --error-red: #ef4444;
  --warning-orange: #f59e0b;
  --text-dark: #1f2937;
  --text-medium: #6b7280;
  --text-light: #9ca3af;
  --border-color: #e5e7eb;
  --shadow: 0 4px 6px -1px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 25px -3px rgba(0,0,0,.1);

  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  line-height: 1.6;
  color: var(--text-dark);
}

/* Box model reset (scoped) */
.home *, .home *::before, .home *::after { box-sizing: border-box; }

/* ===== Appbar (clean) ===== */
.home .appbar{
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color:#fff; padding:12px 20px; position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow: var(--shadow);
}
.home .appbar .brand{display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none}
.home .appbar .brand .logo{height:45px; border-radius:8px}
.home .appbar .brand strong{font-size:1.5rem; font-weight:700}
.home .appbar .appbar-actions{display:flex; align-items:center; gap:10px; flex-wrap:nowrap}

/* Buttons */
.home .btn{display:inline-flex; align-items:center; justify-content:center; padding:9px 14px; border-radius:999px; text-decoration:none; font-weight:600}
.home .btn.small{padding:7px 12px; font-size:.95rem}
.home .btn.solid{background:#fff; color:#0b57d0}
.home .btn.ghost{border:1px solid rgba(255,255,255,.7); color:#fff}
.home .btn.block{width:100%}

/* Menu button — ALWAYS visible */
.home .menu-btn{
  display:inline-flex !important;  /* ensure visible on desktop + mobile */
  align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.6);
  background:transparent; color:#fff;
  border-radius:10px; padding:8px 10px; cursor:pointer
}
.home .menu-btn svg path{ stroke:#fff !important; } /* keep icon legible on gradient */
.home .menu-label{display:none}
@media (min-width: 860px){ .home .menu-label{display:inline} }

/* Drawer + backdrop */
.home .menu-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  backdrop-filter:saturate(140%) blur(2px); z-index:200;
}
.home .menu-drawer{
  position:fixed; top:0; right:0; width:min(92vw,380px); height:100vh; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.2); transform:translateX(100%); transition:transform .24s ease;
  display:flex; flex-direction:column; padding:16px; z-index:210;
}
.home .menu-drawer.open{ transform:translateX(0) }
.home .menu-header{display:flex; align-items:center; justify-content:space-between; padding:6px 4px; font-weight:700; font-size:1.05rem}
.home .menu-close{border:1px solid #e5e7eb; background:#fff; border-radius:10px; padding:6px; cursor:pointer}
.home .menu-nav{display:flex; flex-direction:column; gap:6px; padding:8px 0 10px}
.home .menu-nav a{padding:10px 12px; border-radius:10px; color:#111827; text-decoration:none; font-weight:600}
.home .menu-nav a:hover{background:#f3f4f6}
.home .menu-cta{margin-top:auto; display:grid; gap:10px}

/* ===== Hero ===== */
.home .hero { background: linear-gradient(135deg, var(--light-blue) 0%, #dbeafe 100%); padding: 4rem 2rem 3rem; text-align: center; }
.home .hero h1 { color: var(--primary-color); margin-bottom: 1rem; font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
.home .hero p { font-size: 1.2rem; color: var(--text-medium); max-width: 680px; margin: 0 auto 1.25rem; }
.home .hero-visual { display: flex; justify-content: center; }
.home .hero-visual img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow); margin-top: 2rem; }

/* ===== Features ===== */
.home .features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem; padding: 3rem 2rem; max-width: 1200px; margin: 0 auto;
}
.home .feature {
  background: white;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: all .3s ease;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.home .feature:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.home .feature h3 { color: var(--secondary-color); font-size: 1.3rem; margin-bottom: 1rem; font-weight: 600; }
.home .feature p { color: var(--text-medium); line-height: 1.6; }

/* ===== Login card ===== */
.home .login-container { max-width: 420px; background: white; padding: 3rem 2rem; margin: 2rem auto; border-radius: 20px; box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); }
.home .login-container h2 { text-align: center; color: var(--primary-color); font-size: 1.75rem; font-weight: 700; margin-bottom: 2rem; }
.home .form-group { margin-bottom: 1.5rem; position: relative; }
.home .form-group label { display: block; margin-bottom: .5rem; font-weight: 600; color: var(--text-dark); }
.home .form-group input {
  width: 100%; padding: .875rem 1rem; border-radius: 10px; border: 2px solid var(--border-color);
  font-size: 1rem; transition: all .3s ease; background: #fafafa;
}
.home .form-group input:focus { outline: none; border-color: var(--secondary-color); background: white; box-shadow: 0 0 0 3px rgba(0,115,230,.1); }
.home .password-container { position: relative; }
.home .password-toggle { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: .25rem; border-radius: 4px; }
.home .password-toggle:hover { background: rgba(0,0,0,.05); }
.home .login-button {
  width: 100%; background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  color: white; padding: 1rem; font-size: 1.1rem; border: none; border-radius: 12px; cursor: pointer; font-weight: 600;
  transition: all .3s ease; display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem;
}
.home .login-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.home .login-button:disabled { opacity: .7; cursor: not-allowed; }
.home .loading-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.3); border-top: 2px solid white; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.home .error-message { display: none; background: #fef2f2; border: 1px solid #fecaca; color: var(--error-red); padding: .875rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; text-align: center; }

/* ===== Footer ===== */
.home footer {
  background: var(--primary-color); color: white; display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem; font-size: .9rem; padding: 2rem; margin-top: 3rem;
}
.home footer a { color: rgba(255,255,255,.85); text-decoration: none; margin: 0 .75rem; transition: color .3s ease; }
.home footer a:hover { color: white; }

/* Accessibility & motion prefs */
.home *:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .home *, .home *::before, .home *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .home .hero { padding: 2rem 1rem; }
  .home .features { padding: 2rem 1rem; grid-template-columns: 1fr; }
  .home .login-container { margin: 1rem; padding: 2rem 1.25rem; }
  .home footer { flex-direction: column; text-align: center; gap: 1.5rem; }
}
@media (max-width: 480px) {
  .home .form-group input { font-size: 16px; }
}

/* --- Force the hamburger to be visible on desktop too --- */
.home .appbar .appbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.home .menu-btn {
  display: inline-flex !important;   /* visible at all breakpoints */
  visibility: visible !important;
  opacity: 1 !important;
}

.home .menu-btn svg { display: block; width: 22px; height: 22px; }
.home .menu-btn svg path { stroke: #fff !important; } /* keep icon visible */



/* === CloudKlass: Feature grid + helpers (09-2025) === */
.home .features { align-items: stretch; }

@media (min-width: 1024px) {
  .home .features { grid-template-columns: repeat(3, 1fr); }
}

.home .feature .btn { margin-top: auto; }

.home .pricing-mini { list-style: none; margin: .5rem 0 1rem; padding: 0; }
.home .pricing-mini li { margin: .35rem 0; }
.home .pricing-mini strong { font-weight: 600; }
.home .pricing-mini small { color: var(--text-medium); }

.home .muted { color: var(--text-light); font-size: .9rem; }