/* styles.css - shared styles for index & home (with full-screen bg image) */
:root{
  --card-bg: rgba(255,255,255,0.95);
  --accent: #1a73e8;
  --muted:#666;
  --rounded:16px;
}

/* reset + base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Poppins,Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;}
body {
  height: 100%;
  margin: 0;
  font-family: "Poppins", sans-serif;
  position: relative;
  overflow-x: hidden;
  /* make default text color deep black for readability over backgrounds */
  color: #0b0b0b;
}

/* Full-screen background: bg.jpg everywhere */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  /* Prefer a local bg.jpg when present. If missing, fall back to the external Unsplash image, then an embedded SVG, then a soft gradient. */
  background-image: url("bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  /* layer fallbacks via multiple backgrounds for older browsers */
  /* second fallback */
  background-image: url("bg.jpg"), url("https://images.unsplash.com/photo-1503264116251-35a269479413?w=1600&q=80&auto=format&fit=crop"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 800 800'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color=%231a73e8/><stop offset='1' stop-color=%234a90e2/></linearGradient></defs><rect width='100%' height='100%' fill='url(%23g)'/></svg>");
  filter: brightness(0.85);
}

/* Light overlay for readability */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.04);
}

/* subtle overlay so content is readable */
/* additional subtle overlay to keep text readable while letting bg show through */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.02) 100%);
  pointer-events:none;
}

/* Top nav */
.header{
  position:sticky;
  top:0;
  z-index:30;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(10,10,10,0.06);
  box-shadow: 0 6px 18px rgba(8,20,40,0.08);
}
.header-inner{
  max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;
}
.brand{font-weight:700;font-size:18px}
.nav{
  display:flex;gap:18px;align-items:center;
}
.nav a{color:#0b0b0b;text-decoration:none;font-weight:700}
.btn{
  padding:10px 16px;border-radius:12px;border:none;cursor:pointer;font-weight:700;background:linear-gradient(90deg,var(--accent),#3b82f6);color:#fff;box-shadow:0 8px 24px rgba(26,115,232,0.14);transition:transform .18s ease,box-shadow .18s ease,opacity .12s ease;border:1px solid rgba(255,255,255,0.06)
}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(26,115,232,0.18)}
.btn.secondary{background:transparent;color:#0b0b0b;border:1px solid rgba(0,0,0,0.08);box-shadow:none}
.btn.logout{background:#ff4d4f}

/* Hero */
.container{max-width:1180px;margin:0 auto;padding:64px 20px 100px;text-align:center}
.hero{padding:28px 0 12px}
.hero h1{font-size:48px;margin:6px 0 0; color: #0b0b0b;text-shadow:0 6px 28px rgba(11,11,11,0.06)}
.hero .sub{color:#0b0b0b;margin-top:10px;font-size:18px;opacity:0.95}

/* Cards row */
.actions{display:flex;gap:28px;justify-content:center;align-items:stretch;margin-top:36px;flex-wrap:wrap}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.82));
  width:360px;
  min-height:130px;
  padding:28px 26px;
  border-radius:18px;
  box-shadow:0 20px 40px rgba(8,24,64,0.10);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;
  border: 1px solid rgba(255,255,255,0.6);
}
.card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(8,24,64,0.14)}
.card h3{margin:0;font-size:20px;color:#0b0b0b}
.card p{margin:10px 0 0;color:#0b0b0b}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 40px rgba(12,34,70,0.09)}
.card.small{width:260px}

/* Video */
.video-section{margin-top:42px;padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:12px}
.video-wrap{max-width:900px;width:100%;border-radius:12px;overflow:hidden;box-shadow:0 14px 30px rgba(12,34,70,0.06)}
.video-wrap iframe{width:100%;height:506px;border:0;display:block}

/* Content sections */
.info{max-width:980px;margin:28px auto;padding:22px;background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.78)); border-radius:14px; box-shadow:0 12px 36px rgba(8,24,60,0.08); border:1px solid rgba(255,255,255,0.6)}
.info h2{font-size:22px;margin-bottom:12px;color:#0b0b0b}
.info p{color:#0b0b0b;line-height:1.6}

/* Inputs and textareas */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, input[id^="mainPrompt"], input[id^="pptPrompt"]{
  width: 100%; max-width: 720px; padding:10px 12px; border-radius:10px; border:1px solid rgba(11,11,11,0.08); box-shadow:inset 0 2px 6px rgba(11,11,11,0.03); font-size:15px; color:#0b0b0b; background: rgba(255,255,255,0.9);
}
textarea{min-height:120px}

/* Section blocks (used for outline/slide cards) */
.section{background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,250,0.92)); border-radius:12px; padding:12px; box-shadow:0 10px 24px rgba(8,24,64,0.06); margin-bottom:12px}
.section h3{margin:0 0 8px 0}
.section textarea{width:100%;height:110px;padding:10px;border-radius:8px;border:1px solid rgba(11,11,11,0.06);}
.sec-title{font-size:16px}

/* Word-like page style */
.doc-page{background:linear-gradient(180deg,#fdfdfd,#fbfbfb);border:1px solid rgba(11,11,11,0.04);}
.doc-page h1{font-size:24px;margin-bottom:12px}
.doc-page h3{font-size:16px;margin-bottom:6px}
.doc-page [contenteditable]{outline:none}

/* Slide preview cards */
.slide-preview{max-width:900px;margin:12px auto;border-radius:8px}
.slide-preview h2{margin:6px 0}
.slide-preview [contenteditable]{outline:none}

/* GIF preview for YouTube/video */
.yt-gif{display:block;width:100%;height:auto;border-radius:8px;cursor:pointer;object-fit:cover}
.video-wrap{position:relative}
.video-wrap iframe{min-height:360px}

/* Footer */
.footer{padding:30px;text-align:center;color:#0b0b0b;opacity:0.95}

/* Signup/login small override to use same bg (for pages that load the global styles) */
.signup-box {
  width: 400px;
  background: rgba(255,255,255,0.9);
  padding: 36px;
  border-radius: 14px;
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px rgba(10,30,60,0.08);
}

/* small utilities */
.center-vertical {min-height:100vh; display:flex;align-items:center;justify-content:center}

/* Responsive */
@media (max-width:980px){
  .hero h1{font-size:34px}
  .card{width:320px}
  .video-wrap iframe{height:360px}
}
@media (max-width:640px){
  .actions{flex-direction:column;align-items:center}
  .card{width:92%}
  .video-wrap iframe{height:230px}
  .header-inner{padding:12px}
  .signup-box{width:92%; padding:20px;}
}