/* =========================
   ADI ASCENT - GLOBAL STYLES
   desktop + mobile
   ========================= */

/* --- Theme tokens --- */
:root{
  --sidebar-bg:#10172a;
  --main-bg:#f8fafc;
  --text-dark:#1e293b;
  --text-light:#f1f5f9;
  --accent-blue:#2563eb;
  --accent-green:#10b981;
  --font-main:'Poppins', sans-serif;

  /* Optional: Scenarios page may use these */
  --fish-f:#ef4444;
  --fish-i:#f59e0b;
  --fish-s:#3b82f6;
  --fish-h:#10b981;
}

/* --- Reset-ish --- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  font-family:var(--font-main);
  margin:0;
  display:flex;
  min-height:100vh;
  background:var(--main-bg);
  color:var(--text-dark);
}

/* --- Sidebar --- */
.sidebar{
  width:300px;
  background-color:var(--sidebar-bg);
  color:var(--text-light);
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  box-shadow:2px 0 10px rgba(0,0,0,0.1);
  overflow-y:auto;
  flex-shrink:0;
}

.brand-container{
  display:flex;
  align-items:center;
  gap:15px;
  color:#fff;
  margin-bottom:2.5rem;
  padding-bottom:1rem;
  border-bottom:1px solid #334155;
}

.plane-icon{
  font-size:1.8rem;
  color:#fff;
  transform:rotate(35deg);
  flex-shrink:0;
}

.brand-text{
  font-size:1.5rem;
  font-weight:700;
  white-space:nowrap;
}

.brand-logo {
    max-height: 120px;
    width: auto;
    margin-left: -35px;   /* 負數會拉近 */
}

.sidebar a{
  color:#cbd5e1;
  text-decoration:none;
  padding:0.8rem 1rem;
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:0.5rem;
  transition:all 0.2s;
  font-weight:500;
}

.sidebar a:hover{ background-color:#1e293b; color:#fff; }
.sidebar a.active{ background-color:var(--accent-blue); color:#fff; font-weight:700; }

.profile{
  margin-top:auto;
  border-top:1px solid #334155;
  padding-top:1.5rem;
  font-size:0.9rem;
  line-height:1.5;
  color:#94a3b8;
}
.profile strong{
  color:#fff;
  font-size:1rem;
  display:block;
  margin-bottom:0.3rem;
}

/* --- Main content --- */
.main-content{
  flex:1;
  background-color:var(--main-bg);
  padding:3rem;
  overflow-y:auto;
  color:var(--text-dark);
}

.container{
  max-width:1000px;
  margin:0 auto;
}

.hero-title{
  color:var(--text-dark);
  font-size:2.5rem;
  margin-top:0;
  font-weight:700;
}
.hero-subtitle{
  color:#64748b;
  font-size:1.2rem;
  margin-bottom:2rem;
}

/* --- Cards --- */
.card{
  background:#fff;
  padding:2.5rem;
  border-radius:16px;
  box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);
  margin-bottom:2rem;
}
.card h2{
  color:var(--accent-blue);
  margin-top:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.card h3{
  color:var(--text-dark);
  margin-top:1.5rem;
}

.highlight{ color:var(--accent-blue); font-weight:600; }

/* --- Common content blocks --- */
.content-wrapper{
  display:flex;
  gap:2rem;
  align-items:flex-start;
  margin-top:1.5rem;
}
.image-side{ flex:1; text-align:center; }
.image-side img{
  max-width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
}
.text-side{ flex:1.5; }

.importance-box{
  background-color:#e0f2fe;
  padding:1rem;
  border-radius:8px;
  border-left:4px solid var(--accent-blue);
  color:#075985;
  font-size:0.95rem;
  line-height:1.6;
}

.errors-box{
  background-color:#fef2f2;
  padding:1rem;
  border-radius:8px;
  border:1px solid #fecaca;
  color:#991b1b;
  margin-top:1rem;
}
.errors-box h4{
  margin:0 0 0.5rem 0;
  color:#dc2626;
  display:flex;
  align-items:center;
  gap:8px;
}
.errors-box ul{ padding-left:1.2rem; margin:0; }
.errors-box li{ margin-bottom:0.3rem; font-size:0.9rem; }

/* --- Interactive grid (skills / topics) --- */
.skills-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-top:2rem;
}
.skill-item{
  background:#f1f5f9;
  padding:1.2rem;
  border-radius:12px;
  border-left:4px solid var(--accent-green);
  cursor:pointer;
  transition:all 0.3s ease;
  display:flex;
  flex-direction:column;
}
.skill-item:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 12px -3px rgba(0,0,0,0.1);
  background-color:#e2e8f0;
}
.skill-item h3{
  margin:0 0 0.5rem 0;
  font-size:1.1rem;
  color:var(--text-dark);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.chevron-icon{
  font-size:0.9rem;
  color:#64748b;
  transition:transform 0.3s ease;
}
.click-hint{
  font-size:0.75rem;
  color:var(--accent-blue);
  font-weight:600;
  display:block;
  margin-bottom:0.5rem;
}
.skill-item p{
  margin:0;
  font-size:0.9rem;
  line-height:1.4;
  color:#475569;
}
.skill-details{
  display:none;
  margin-top:0.8rem;
  padding-top:0.8rem;
  border-top:1px solid #cbd5e1;
  font-size:0.85rem;
  line-height:1.5;
  animation:fadeIn 0.4s;
}
.skill-details ul{ padding-left:1.1rem; margin:0.5rem 0; }
.skill-details li{ margin-bottom:0.5rem; font-style:italic; color:#1e40af; font-weight:500; }

@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

/* --- Footer --- */
.footer{
  text-align:center;
  padding:2rem 0;
  margin-top:3rem;
  border-top:1px solid #e2e8f0;
  color:#64748b;
  font-size:0.85rem;
}

/* =========================
   MOBILE RESPONSIVE
   ========================= */
@media (max-width: 900px){
  .main-content{ padding:2rem; }
  .card{ padding:2rem; }
}

@media (max-width: 768px){
  body{
    flex-direction:column;
    min-height:auto;
  }

  .sidebar{
    width:100%;
    box-shadow:none;
  }

  .main-content{
    padding:1.5rem;
  }

  .hero-title{ font-size:2rem; }
  .hero-subtitle{ font-size:1.05rem; }

  .content-wrapper{
    flex-direction:column;
  }

  .skills-grid{
    grid-template-columns:1fr;
  }

  .brand-container{
    margin-bottom:1.5rem;
  }
}

@media (max-width: 420px){
  .main-content{ padding:1.1rem; }
  .card{ padding:1.5rem; }
}