/* ───────── CSS VARIABLES ───────── */
:root {
  /* LIGHT THEME */
  --clr-bg:        #f5f8fc;
  --clr-primary:   #1e3a8a;
  --clr-accent:    #3b82f6;
  --clr-gray:      #475569;
  --clr-light:     #ffffff;
  --clr-card:      #ffffff;
  --radius: 0.75rem;
  --transition: 0.3s ease;
}

/* DARK THEME OVERRIDES */
[data-theme="dark"] {
  --clr-bg:        #0f172a;
  --clr-primary:   #60a5fa;
  --clr-accent:    #3b82f6;
  --clr-gray:      #cbd5e1;
  --clr-light:     #1e293b;
  --clr-card:      #1e293b;
}

/* ───────── RESET ───────── */
*,*::before,*::after { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body {
  display:flex; flex-direction:column;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--clr-bg); color:var(--clr-gray); line-height:1.6;
}
main { flex:1 0 auto; }
img { max-width:100%; display:block; }

/* ───────── LINKS / BUTTONS ───────── */
a { color:var(--clr-accent); text-decoration:none; transition:color var(--transition);}
a:hover { color:var(--clr-primary);}
.btn,.btn-card {
  background:var(--clr-accent); color:var(--clr-light);
  padding:0.75rem 1.5rem; border-radius:var(--radius);
  font-weight:600; display:inline-block;
  transition:background var(--transition),transform var(--transition);
}
.btn:hover,.btn-card:hover { background:var(--clr-primary); transform:translateY(-2px); }

/* ───────── LAYOUT ───────── */
.container { width:min(90%,1100px); margin-inline:auto; }

/* NAVBAR */
.navbar { position:fixed; top:0; width:100%; height:64px;
  background:var(--clr-light); box-shadow:0 2px 4px rgba(0,0,0,.05);
  z-index:1000; display:flex; align-items:center; }
.navbar .container { display:flex; justify-content:space-between; align-items:center;}
.logo { font-size:1.25rem; font-weight:600; color:var(--clr-primary);}
.nav-links { list-style:none; display:flex; gap:1rem; margin:0; padding:0;}
.nav-links a { padding:0.5rem 0.75rem; border-radius:var(--radius);}
#navToggle { display:none; background:none; border:none; font-size:1.5rem; }

@media (max-width:768px){
  #navToggle{display:block;}
  .nav-links{position:absolute; top:64px; right:0; left:0; flex-direction:column;
    background:var(--clr-light); transform:scaleY(0); transform-origin:top;
    transition:transform var(--transition);}
  .nav-links.open{transform:scaleY(1);}
}

/* HERO */
.hero { position:relative; height:calc(100vh - 64px); min-height:600px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  flex-shrink:0;}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 35%; filter:brightness(0.6);}
.hero-overlay{position:relative; text-align:center; color:var(--clr-light);
  max-width:700px; padding:0 1rem; animation:fadeIn .8s ease .2s backwards;}
@keyframes fadeIn{from{opacity:0; transform:translateY(1rem);}to{opacity:1; transform:translateY(0);}}

/* Always keep hero text light for contrast */
.hero-overlay{ color:#ffffff; }
[data-theme="dark"] .hero-overlay{ color:#ffffff; }   /* explicit in dark mode */

/* Reveal utility: applied by IntersectionObserver */
.visible{ opacity:1 !important; transform:none !important; }



/* Error hero & upside‑down helper */
.error-hero{background:url("assets/hero.jpg") center top / cover no-repeat;}
.upsidedown{transform:scaleY(-1);} /* optionally add to hero section */

/* CARDS / POSTS */
.cards{padding:4rem 0;}
.cards h2{text-align:center; margin-bottom:2rem; color:var(--clr-primary);}
.card-grid{display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.card,.post{background:var(--clr-card); border-radius:var(--radius); padding:1.5rem;
  box-shadow:0 2px 6px rgba(0,0,0,.05); transition:transform var(--transition);}
.card:hover,.post:hover{transform:translateY(-4px);}
.center{text-align:center; margin-top:2rem;}
.post-list .post{margin-bottom:1.5rem;}

/* PDF */
.pdf-wrapper{width:100%; height:80vh;}
.pdf-wrapper iframe{width:100%; height:100%; border:none;}
@media(max-width:768px){.pdf-wrapper{height:65vh;}}

/* SEARCH BAR */
.search-bar{text-align:center; margin:1.5rem 0 2rem;}
#blogSearch{width:min(90%,400px); padding:0.75rem 1rem;
  border:1px solid var(--clr-gray); border-radius:var(--radius); font-size:1rem;}
#blogSearch:focus{outline:2px solid var(--clr-accent);}

/* SUGGESTIONS */
.suggestions ul{list-style:none; padding:0; display:flex; flex-wrap:wrap;
  gap:1rem; justify-content:center;}
.suggestions li{flex:1 1 220px;}

/* FOOTER */
footer{flex-shrink:0; background:var(--clr-primary); color:var(--clr-light);
  text-align:center; padding:1rem 0; display:flex; flex-direction:column;
  align-items:center; gap:0.5rem;}
footer p{margin:0;}

/* ===== THEME TOGGLE SWITCH (words instead of emoji) ===== */
.theme-toggle{
  --track-h: 44px;          /* height of track  */
  --track-w: 180px;         /* width  (room for words) */
  position: relative;
  display: inline-block;
  width: var(--track-w);
  height: var(--track-h);
  margin-left: 0.5rem;
}

/* hide native checkbox */
.theme-toggle input{opacity:0; width:0; height:0;}

.theme-toggle .slider{
  position:absolute; inset:0; cursor:pointer;
  border-radius: var(--track-h);
  background: var(--clr-gray);             /* visible on light background */
  color: var(--clr-light);                 /* text colour in light mode */
  display: flex; align-items:center;
  justify-content: center;                 /* centre the words */
  font-size: .9rem; font-weight:600;
  transition: background .3s ease, color .3s ease;
  user-select:none;
}

/* WORDS WHEN UNCHECKED (light mode) */
.theme-toggle .slider::before{
  content: 'Dark Mode';
}

/* CHECKED STATE = DARK MODE */
input:checked + .slider{
  background: var(--clr-accent);           /* blue track in dark mode */
  color: var(--clr-bg);                    /* light words on blue track */
}
input:checked + .slider::before{
  content: 'Light Mode';
}