:root{
  --primary-brown: #8B4513;
  --accent: #CC9900;
  --text: #333;
  --bg: #ffffff;
  --max-width: 1200px;
}

/* Layout helpers */
*{box-sizing:border-box}
img,iframe,video{max-width:100%;height:auto;display:block}
.container{width:90%;max-width:var(--max-width);margin:0 auto;padding:0 16px}

/* Responsive typography */
html, body{font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;color:var(--text);background:var(--bg)}
body{font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.2}
h1{font-size:clamp(1.5rem, 2.5vw, 2.5rem)}
h2{font-size:clamp(1.25rem, 2vw, 2rem)}

/* Nav responsiveness */
.main-nav ul{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
.main-nav{padding:10px 0}
.main-nav a{padding:8px 6px}

/* Mobile nav: keep links horizontal on narrow screens but allow horizontal scroll when needed */
@media (max-width: 700px){
  /* Stronger selector to override per-page inline rules */
  header .main-nav ul, .main-header .main-nav ul, nav.main-nav > ul {
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    gap:8px !important;
    white-space:nowrap !important;
    padding:0 !important;
    margin:0 !important;
  }
  header .main-nav li, .main-header .main-nav li, nav.main-nav > ul > li{display:inline-block !important}
  header .main-nav a, .main-header .main-nav a, nav.main-nav a{display:inline-block !important; padding:10px 12px !important}

  /* ensure separators or borders don't force full-width items */
  header .main-nav li > a, nav.main-nav li > a { border:none !important }
}

/* Extra small screens: keep horizontal but allow slightly tighter spacing */
@media (max-width: 420px){
  header .main-nav a, nav.main-nav a { padding:8px 10px !important; font-size:14px }
}

/* Hero adjustments */
.hero{padding:clamp(40px,8vw,100px) 0}
.hero .container{text-align:center}
.hero h2{font-size:clamp(1.6rem,4vw,2.8rem)}
.hero p{font-size:clamp(1rem,2.2vw,1.2rem)}

/* Responsive grids */
.pillars-grid, .faculties-grid, .campus-stats, .events-container{display:grid;grid-gap:20px}
.pillars-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.faculties-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.campus-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.events-container{grid-template-columns:1fr}

/* Cards and form */
.pillar-card, .faculty-card, .card{overflow:hidden}
.form-card{width:100%;}
.form-grid{grid-gap:14px}

/* Make forms and tables fluid on small screens */
form input, form select, form textarea, .form-card input, .form-card select, .form-card textarea{width:100%;box-sizing:border-box}
.responsive-table{width:100%;overflow:auto}
.responsive-table table{width:100%;border-collapse:collapse}
.responsive-table th, .responsive-table td{padding:8px;border:1px solid #eee;text-align:left}

/* Larger touch targets for mobile */
.btn, .btn-primary{padding:10px 14px}

/* Utility: hide/show helpers */
.hide-mobile{display:block}
@media (max-width:700px){.hide-mobile{display:none}}

/* Off-canvas sidebar for portal pages */
@media (max-width: 900px) {
  .sidebar { 
    position: fixed !important;
    left: -320px; 
    top: 0; 
    height: 100%; 
    width: 280px; 
    z-index: 1100; 
    transition: left .28s ease; 
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    overflow-y: auto;
  }
  .sidebar.open { left: 0; }

  .sidebar-backdrop { display: none; }
  .sidebar-backdrop.visible { display: block; position:fixed; inset:0; background: rgba(0,0,0,0.45); z-index:1050; }

  .main-content { margin-left: 0 !important; padding: 12px; }
  .menu-toggle-btn { display: inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:8px; background:#fff; color:var(--primary-brown); cursor:pointer; border:0; box-shadow:0 4px 10px rgba(0,0,0,0.08); }
  .logo h1 { font-size:1rem; }
}

/* Fixed placement for generated mobile menu button */
@media (max-width:900px){
  .menu-toggle-btn{ position: fixed; left: 12px; top: 12px; z-index: 1200; }
}

/* Modal inner container responsiveness */
.modal .modal-inner { width:95%; max-width:820px; margin:28px auto; background:#fff; border-radius:8px; overflow:auto; max-height:calc(100vh - 80px); padding:16px; }

/* Demo banner: hide on very small devices to avoid overlap */
@media (max-width:420px){ .demo-banner { display:none !important } }

/* Footer */
.footer-content{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
footer .copyright{padding-top:16px}

/* Small screens tweaks */
@media (max-width: 900px){
  .hero{padding:40px 0}
  .video-placeholder{height:320px}
}
@media (max-width: 600px){
  body{font-size:15px}
  .hero{padding:28px 0}
  .main-nav ul{gap:8px}
}

/* Utility */
.text-center{text-align:center}
.btn, .btn-primary{border-radius:8px}
