/*
Theme Name: Maths N Science
Theme URI: https://mathsnscience.com
Author: Maths N Science
Author URI: https://mathsnscience.com
Description: A premium, Apple-inspired WordPress theme for Maths N Science — teaching Mathematics, Physics and Engineering for Olympiad, JEE, NEET and CSIR aspirants through videos, blogs, notes, books and courses. Fully editable pages, dark mode, animated gradients, and responsive design. Built for Hostinger WordPress hosting.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mathsnscience
Tags: education, blog, e-learning, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  --mns-blue: #0071e3;
  --mns-purple: #6e5ce6;
  --mns-teal: #12b8b0;
  --mns-pink: #ff5c8d;
  --mns-navy: #0b1830;
  --mns-navy-soft: #14264a;
  --mns-orange: #f5a623;
  --mns-orange-dark: #d98a12;
  --mns-ink: #0b0d12;
  --mns-ink-soft: #1d1d1f;
  --mns-gray: #6e6e73;
  --mns-gray-light: #86868b;
  --mns-line: #d2d2d7;
  --mns-bg: #ffffff;
  --mns-bg-soft: #f5f5f7;
  --mns-surface: #ffffff;
  --mns-text: #1d1d1f;
  --mns-text-soft: #515154;
  --mns-radius-sm: 10px;
  --mns-radius: 18px;
  --mns-radius-lg: 28px;
  --mns-shadow: 0 8px 30px rgba(0,0,0,.08);
  --mns-shadow-lg: 0 20px 60px rgba(0,0,0,.15);
  --mns-nav-h: 68px;
  --mns-ease: cubic-bezier(.25,.1,.25,1);
  --mns-maxw: 1200px;
  --mns-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
              "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html.dark-mode{
  --mns-bg: #000000;
  --mns-bg-soft: #0b0d12;
  --mns-surface: #16171b;
  --mns-text: #f5f5f7;
  --mns-text-soft: #b7b7bc;
  --mns-line: #2c2c2e;
  --mns-shadow: 0 8px 30px rgba(0,0,0,.5);
  --mns-shadow-lg: 0 20px 60px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--mns-font);
  background:var(--mns-bg);
  color:var(--mns-text);
  -webkit-font-smoothing:antialiased;
  transition:background .35s var(--mns-ease), color .35s var(--mns-ease);
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.container{max-width:var(--mns-maxw); margin:0 auto; padding:0 24px;}

h1,h2,h3,h4{
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.08;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.4rem,5vw,4rem);}
h2{font-size:clamp(1.8rem,3.4vw,2.75rem);}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem);}
p{color:var(--mns-text-soft); line-height:1.65; font-size:1.05rem;}
.eyebrow{
  display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mns-orange-dark); margin-bottom:.75rem;
}
.text-accent{color:var(--mns-orange);}
html.dark-mode .eyebrow{color:var(--mns-orange);}

/* ============================================================
   2. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.9em 1.9em; border-radius:999px; font-size:1rem; font-weight:600;
  border:1.5px solid transparent; cursor:pointer; transition:all .3s var(--mns-ease);
  white-space:nowrap;
}
.btn svg{width:17px; height:17px; flex-shrink:0;}
.btn-primary{
  background:var(--mns-navy);
  color:#fff; box-shadow:0 6px 20px rgba(11,24,48,.25);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(11,24,48,.35); background:var(--mns-navy-soft);}
.btn-accent{
  background:var(--mns-orange); color:var(--mns-navy);
  box-shadow:0 6px 18px rgba(245,166,35,.35);
}
.btn-accent:hover{transform:translateY(-2px); background:var(--mns-orange-dark); color:#fff;}
.btn-outline{
  background:transparent; color:var(--mns-navy); border-color:var(--mns-navy);
}
.btn-outline:hover{background:var(--mns-navy); color:#fff; transform:translateY(-2px);}
html.dark-mode .btn-outline{color:var(--mns-text); border-color:var(--mns-line);}
html.dark-mode .btn-outline:hover{background:var(--mns-surface); color:var(--mns-orange); border-color:var(--mns-orange);}
.btn-secondary{
  background:var(--mns-surface); color:var(--mns-text); border-color:var(--mns-line);
}
.btn-secondary:hover{background:var(--mns-bg-soft); transform:translateY(-2px);}
.btn-ghost{color:var(--mns-orange-dark); padding:.85em .5em;}
.btn-ghost:hover{opacity:.7;}
.btn-sm{padding:.6em 1.4em; font-size:.9rem;}

/* ============================================================
   3. NAVIGATION (Apple-style)
   ============================================================ */
.mns-nav{
  position:sticky; top:0; z-index:1000; height:var(--mns-nav-h);
  display:flex; align-items:center;
  background:var(--mns-navy);
  border-bottom:3px solid var(--mns-orange);
  transition:background .35s var(--mns-ease);
}
html.dark-mode .mns-nav{
  background:#050912;
  border-bottom:3px solid var(--mns-orange);
}
.mns-nav-inner{
  max-width:var(--mns-maxw); margin:0 auto; width:100%; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.mns-logo{display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1.05rem; flex-shrink:0; color:#fff;}
.mns-logo img{height:34px; width:auto; border-radius:8px;}
.mns-logo span{color:#fff;}

.mns-menu{list-style:none; display:flex; align-items:center; gap:1.8rem; margin:0; padding:0;}
.mns-menu li{position:relative;}
.mns-menu a{
  font-size:.87rem; font-weight:500; color:rgba(255,255,255,.78);
  transition:color .25s var(--mns-ease); padding:.4rem 0;
}
.mns-menu a:hover, .mns-menu .current-menu-item > a{color:#fff;}

/* dropdown */
.mns-menu ul{
  list-style:none; position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(6px); min-width:220px; padding:10px;
  background:var(--mns-surface); border-radius:var(--mns-radius-sm); box-shadow:var(--mns-shadow-lg);
  opacity:0; visibility:hidden; transition:all .25s var(--mns-ease); border:1px solid var(--mns-line);
}
.mns-menu li:hover > ul{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.mns-menu ul li a{display:block; padding:.55rem .75rem; border-radius:8px; font-size:.85rem; color:var(--mns-text-soft);}
.mns-menu ul li a:hover{background:var(--mns-bg-soft); color:var(--mns-text);}

.mns-actions{display:flex; align-items:center; gap:.6rem; flex-shrink:0;}
.mns-icon-btn{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer; color:#fff; transition:background .25s var(--mns-ease);
}
.mns-icon-btn:hover{background:rgba(255,255,255,.12);}
.mns-icon-btn svg{width:19px; height:19px;}

.mns-burger{display:none; flex-direction:column; gap:4px; width:38px; height:38px; align-items:center; justify-content:center; background:none; border:none; cursor:pointer;}
.mns-burger span{width:20px; height:2px; background:#fff; border-radius:2px; transition:.3s var(--mns-ease);}

/* search overlay */
.mns-search-overlay{
  position:fixed; inset:0; background:rgba(255,255,255,.92); backdrop-filter:blur(16px);
  z-index:1200; display:flex; align-items:flex-start; justify-content:center; padding-top:14vh;
  opacity:0; visibility:hidden; transition:opacity .3s var(--mns-ease), visibility .3s;
}
html.dark-mode .mns-search-overlay{background:rgba(0,0,0,.92);}
.mns-search-overlay.active{opacity:1; visibility:visible;}
.mns-search-box{width:100%; max-width:640px; padding:0 24px;}
.mns-search-box form{display:flex; align-items:center; border-bottom:2px solid var(--mns-text); padding-bottom:10px;}
.mns-search-box input[type="search"]{
  flex:1; border:none; background:none; outline:none; font-size:2rem; font-weight:300;
  color:var(--mns-text); font-family:var(--mns-font);
}
.mns-search-close{position:absolute; top:26px; right:26px; cursor:pointer; background:none; border:none; color:var(--mns-text);}

/* ============================================================
   4. HERO / ANIMATED GRADIENT
   ============================================================ */
.mns-hero{
  position:relative; overflow:hidden; padding:9rem 0 7rem; text-align:center;
  color:var(--mns-navy);
}
.mns-hero-bg{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(120deg, #dbe7ff, #eef2ff, #e4ecff, #f3ecff);
  background-size:300% 300%;
  animation:mnsGradient 18s ease infinite;
}
html.dark-mode .mns-hero-bg{
  background:linear-gradient(120deg, #0b1830, #14264a, #0b1830, #1a2f5c);
  background-size:300% 300%;
}
.mns-hero-bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 55%);
}
html.dark-mode .mns-hero-bg::after{
  background:radial-gradient(circle at 30% 20%, rgba(245,166,35,.12), transparent 55%);
}
@keyframes mnsGradient{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.mns-hero-content{position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 24px;}
.mns-hero .eyebrow{color:var(--mns-orange-dark);}
html.dark-mode .mns-hero .eyebrow{color:var(--mns-orange);}
.mns-hero h1{color:var(--mns-navy); margin-bottom:.4em;}
html.dark-mode .mns-hero h1{color:#fff;}
.mns-hero p.lead{color:#334066; font-size:1.2rem; max-width:600px; margin:0 auto 2rem;}
html.dark-mode .mns-hero p.lead{color:rgba(255,255,255,.75);}
.mns-hero-cta{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}

/* generic page hero (non-gradient, for inner pages) */
.mns-pagehead{padding:6rem 0 3.5rem; text-align:center; background:var(--mns-bg-soft); border-bottom:1px solid var(--mns-line);}
.mns-pagehead h1{margin-bottom:.3em;}
.mns-pagehead p{max-width:640px; margin:0 auto;}

/* ============================================================
   5. SECTIONS / CARDS / GRID
   ============================================================ */
.mns-section{padding:5.5rem 0;}
.mns-section-head{text-align:center; max-width:640px; margin:0 auto 3rem;}
.mns-grid{display:grid; gap:1.6rem;}
.mns-grid-3{grid-template-columns:repeat(3,1fr);}
.mns-grid-4{grid-template-columns:repeat(4,1fr);}
.mns-grid-2{grid-template-columns:repeat(2,1fr);}
.mns-grid-narrow{max-width:640px; margin:0 auto;}

.mns-card{
  background:var(--mns-surface); border:1px solid var(--mns-line); border-radius:var(--mns-radius);
  padding:2.4rem 2rem; text-align:center; transition:transform .35s var(--mns-ease), box-shadow .35s var(--mns-ease);
}
.mns-card:hover{transform:translateY(-6px); box-shadow:var(--mns-shadow-lg); border-color:var(--mns-orange);}
.mns-card .mns-card-icon{
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; margin:0 auto 1.2rem;
  background:rgba(245,166,35,.14); color:var(--mns-orange-dark);
}
html.dark-mode .mns-card .mns-card-icon{background:rgba(245,166,35,.16); color:var(--mns-orange);}
.mns-card h3{margin-bottom:.4em;}
.mns-card p{font-size:.95rem;}
.mns-card-badge{
  display:inline-flex; align-items:center; gap:.5em; margin-top:1.3rem; padding:.5em 1.1em;
  border-radius:999px; background:var(--mns-bg-soft); color:var(--mns-navy); font-size:.82rem; font-weight:600;
}
html.dark-mode .mns-card-badge{background:rgba(255,255,255,.06); color:var(--mns-text);}

.mns-post-card{background:var(--mns-surface); border:1px solid var(--mns-line); border-radius:var(--mns-radius); overflow:hidden; transition:transform .35s var(--mns-ease), box-shadow .35s var(--mns-ease);}
.mns-post-card:hover{transform:translateY(-6px); box-shadow:var(--mns-shadow-lg);}
.mns-post-card .thumb{aspect-ratio:16/10; overflow:hidden; background:var(--mns-bg-soft);}
.mns-post-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--mns-ease);}
.mns-post-card:hover .thumb img{transform:scale(1.06);}
.mns-post-card .body{padding:1.4rem;}
.mns-post-card .tag{font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--mns-orange-dark);}
html.dark-mode .mns-post-card .tag{color:var(--mns-orange);}
.mns-post-card h3{font-size:1.15rem; margin:.4em 0;}
.mns-post-card p{font-size:.9rem; margin:0;}

/* fade-in animation on scroll */
.mns-reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--mns-ease), transform .7s var(--mns-ease);}
.mns-reveal.in{opacity:1; transform:translateY(0);}

/* ============================================================
   6. FAQ ACCORDION
   ============================================================ */
.mns-faq-item{border-bottom:1px solid var(--mns-line); padding:1.4rem 0;}
.mns-faq-q{display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:600; font-size:1.05rem;}
.mns-faq-q .plus{transition:transform .3s var(--mns-ease); font-size:1.4rem; color:var(--mns-orange-dark);}
html.dark-mode .mns-faq-q .plus{color:var(--mns-orange);}
.mns-faq-item.open .plus{transform:rotate(45deg);}
.mns-faq-a{max-height:0; overflow:hidden; transition:max-height .35s var(--mns-ease);}
.mns-faq-a-inner{padding-top:.8rem;}

/* ============================================================
   7. FOOTER
   ============================================================ */
.mns-footer{background:var(--mns-bg-soft); border-top:1px solid var(--mns-line); padding:4rem 0 2rem; margin-top:4rem;}
.mns-footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem;}
.mns-footer h4{font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem; color:var(--mns-text);}
.mns-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem;}
.mns-footer a{font-size:.9rem; color:var(--mns-text-soft);}
.mns-footer a:hover{color:var(--mns-orange-dark);}
html.dark-mode .mns-footer a:hover{color:var(--mns-orange);}
.mns-footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:2rem; border-top:1px solid var(--mns-line); font-size:.82rem; color:var(--mns-gray); flex-wrap:wrap; gap:1rem;}
.mns-social{display:flex; gap:.7rem;}
.mns-social a{width:36px; height:36px; border-radius:50%; border:1px solid var(--mns-line); display:flex; align-items:center; justify-content:center;}
.mns-social a:hover{background:var(--mns-navy); border-color:var(--mns-navy); color:#fff;}
html.dark-mode .mns-social a:hover{background:var(--mns-orange); border-color:var(--mns-orange); color:var(--mns-navy);}

/* ============================================================
   8. FORMS
   ============================================================ */
.mns-form{display:grid; gap:1.1rem; max-width:640px;}
.mns-form label{font-size:.85rem; font-weight:600; margin-bottom:.4rem; display:block;}
.mns-form input, .mns-form textarea, .mns-form select{
  width:100%; padding:.85em 1em; border-radius:var(--mns-radius-sm); border:1px solid var(--mns-line);
  background:var(--mns-surface); color:var(--mns-text); font-family:var(--mns-font); font-size:1rem;
  transition:border-color .25s var(--mns-ease);
}
.mns-form input:focus, .mns-form textarea:focus{outline:none; border-color:var(--mns-orange);}
.mns-notice{padding:1rem 1.2rem; border-radius:var(--mns-radius-sm); font-size:.9rem; margin-bottom:1rem;}
.mns-notice.success{background:#e6f8f0; color:#0a7a4a;}
.mns-notice.error{background:#fdeaea; color:#c0362c;}
html.dark-mode .mns-notice.success{background:#0b3d2b;}
html.dark-mode .mns-notice.error{background:#3d1414;}

/* standalone search form (404 page, widgets, etc.) */
.mns-search-form{display:flex; align-items:center; gap:.6rem; border:1px solid var(--mns-line); border-radius:999px; padding:.4rem .4rem .4rem 1.2rem; background:var(--mns-surface);}
.mns-search-form input[type="search"]{flex:1; border:none; background:none; outline:none; font-size:1rem; color:var(--mns-text); font-family:var(--mns-font);}
.mns-search-form button{width:38px; height:38px; border-radius:50%; border:none; background:var(--mns-navy); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.mns-search-form button svg{width:16px; height:16px;}

@media (max-width: 780px){
  .mns-hide-mobile{display:none;}
}

/* ============================================================
   9. CONTENT / SINGLE / PAGE
   ============================================================ */
.mns-content-wrap{max-width:780px; margin:0 auto; padding:4rem 24px;}
.mns-content-wrap h2{margin-top:1.6em;}
.mns-content-wrap img{border-radius:var(--mns-radius-sm); margin:1.5em 0;}
.mns-content-wrap blockquote{border-left:3px solid var(--mns-orange); margin:1.5em 0; padding:.2em 1.4em; font-style:italic; color:var(--mns-text-soft);}
.mns-breadcrumb{font-size:.85rem; color:var(--mns-gray); margin-bottom:1rem;}
.mns-breadcrumb a{color:var(--mns-orange-dark);}
html.dark-mode .mns-breadcrumb a{color:var(--mns-orange);}

/* pagination */
.mns-pagination{display:flex; gap:.5rem; justify-content:center; margin-top:3rem;}
.mns-pagination a, .mns-pagination span{
  padding:.6em 1em; border-radius:999px; border:1px solid var(--mns-line); font-size:.85rem;
}
.mns-pagination .current{background:var(--mns-navy); color:#fff; border-color:var(--mns-navy);}
html.dark-mode .mns-pagination .current{background:var(--mns-orange); color:var(--mns-navy); border-color:var(--mns-orange);}

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .mns-grid-4{grid-template-columns:repeat(2,1fr);}
  .mns-grid-3{grid-template-columns:repeat(2,1fr);}
  .mns-footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 780px){
  .mns-grid-2{grid-template-columns:1fr;}
  .mns-menu{
    position:fixed; top:var(--mns-nav-h); left:0; right:0; bottom:0; flex-direction:column;
    background:var(--mns-navy); padding:2rem; gap:0; align-items:flex-start; overflow-y:auto;
    transform:translateX(100%); transition:transform .35s var(--mns-ease); z-index:999;
  }
  .mns-menu.active{transform:translateX(0);}
  .mns-menu > li{width:100%; border-bottom:1px solid rgba(255,255,255,.12);}
  .mns-menu > li > a{display:block; padding:1rem 0; font-size:1rem;}
  .mns-menu ul{position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; padding:0 0 0 1rem; display:none; background:none;}
  .mns-menu ul li a{color:rgba(255,255,255,.7);}
  .mns-menu ul li a:hover{background:rgba(255,255,255,.08); color:#fff;}
  .mns-menu li.open > ul{display:block;}
  .mns-burger{display:flex;}
  .mns-grid-4, .mns-grid-3{grid-template-columns:1fr;}
  .mns-footer-grid{grid-template-columns:1fr; gap:2rem;}
  .mns-hero{padding:6.5rem 0 4.5rem;}
}