/*
Theme Name:  SDVN School Theme
Theme URI:   https://sdvnschool.in
Author:      SDVN School
Author URI:  https://sdvnschool.in
Description: A professional red-themed WordPress theme for Savitri Devi Vidya Niketan Sr. Sec. School. Features responsive header with topbar, dynamic navigation, breadcrumbs, and a 4-column widget footer. No plugin dependencies.
Version:     1.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sdvn-theme
Tags:        education, school, red, responsive, custom-menu, widgets, breadcrumb
*/

/* =========================================================
   TABLE OF CONTENTS
   1. CSS Variables / Root
   2. Reset & Base
   3. Utility
   4. Topbar
   5. Header
   6. Navigation
   7. Mobile Menu
   8. Breadcrumb
   9. Main Content
   10. Sidebar
   11. Footer
   12. Footer Bottom Bar
   13. Widgets
   14. Buttons
   15. Responsive
   ========================================================= */

/* ── 1. CSS VARIABLES ── */
:root {
  --red-dark:    #8B0000;
  --red-main:    #C0001A;
  --red-bright:  #FF3344;
  --red-light:   #ffd0d0;
  --red-pale:    #f9f0f1;
  --black-deep:  #0D0003;
  --black-nav:   #1A0005;
  --text-dark:   #1a1a1a;
  --text-mid:    #555555;
  --text-muted:  #888888;
  --border:      #e8e0e1;
  --white:       #ffffff;
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:   'Nunito Sans', 'Segoe UI', sans-serif;
  --container:   1200px;
  --radius:      6px;
  --shadow-sm:   0 2px 8px rgba(192,0,26,0.12);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.10);
  --transition:  0.22s ease;
}

/* ── 2. RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: #f5f0eb;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-main); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--red-dark); }
ul { list-style: none; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); line-height: 1.25; color: var(--text-dark); }

/* ── 3. UTILITY ── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  width: auto; height: auto; clip: auto; white-space: normal;
  background: var(--red-main); color: #fff; padding: 8px 16px;
  top: 6px; left: 6px; z-index: 9999; border-radius: var(--radius);
}

/* ── 4. TOPBAR ── */
#sdvn-topbar {
  background: var(--red-dark);
  color: var(--red-light);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 200;
}

#sdvn-topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 7px;
  padding-bottom: 7px;
  gap: 12px;
  flex-wrap: wrap;
}

.topbar-contact {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.topbar-contact a {
  color: var(--red-light);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  transition: color var(--transition);
}
.topbar-contact a:hover { color: var(--white); }

.topbar-contact svg {
  width: 13px; height: 13px;
  flex-shrink: 0;
  stroke: currentColor;
}

.topbar-social {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-social a {
  width: 27px; height: 27px;
  border-radius: 50%;
  background: rgba(255,255,255,0.13);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 12px; font-weight: 700;
  transition: background var(--transition);
  text-decoration: none;
}
.topbar-social a:hover { background: rgba(255,255,255,0.28); color: var(--white); }

/* ── 5. HEADER ── */
#sdvn-header {
  background: var(--white);
  border-bottom: 3px solid var(--red-main);
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  position: sticky;
  top: 0;
  z-index: 190;
}

#sdvn-header .container {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* LOGO */
.site-branding {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo-img {
  max-height: 72px;
  width: auto;
  border-radius: 50%;
  border: 3px solid var(--red-main);
  padding: 3px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  object-fit: contain;
}

.site-logo-fallback {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--red-main);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 26px; font-weight: 900;
  flex-shrink: 0;
  border: 3px solid var(--red-dark);
}

.site-title-group { line-height: 1.2; }

.site-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 900;
  color: var(--red-main);
  letter-spacing: 0.4px;
  display: block;
  margin: 0;
}

.site-tagline {
  font-size: 12px;
  color: var(--text-mid);
  font-weight: 600;
  margin-top: 2px;
  display: block;
}

.site-affiliation {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  display: block;
}

/* Divider flex spacer */
.header-divider {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(192,0,26,0.1), rgba(192,0,26,0.4), rgba(192,0,26,0.1));
  border-radius: 2px;
  min-width: 20px;
}

/* CTA Button */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red-main);
  color: var(--white) !important;
  padding: 11px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(192,0,26,0.30);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
.header-cta:hover {
  background: var(--red-dark);
  color: var(--white) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(192,0,26,0.35);
}
.header-cta svg { width: 15px; height: 15px; stroke: currentColor; }

/* Hamburger */
.menu-toggle {
  display: none;
  background: none;
  border: 2px solid var(--red-main);
  border-radius: 5px;
  padding: 7px 9px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.menu-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--red-main);
  border-radius: 2px;
  transition: all var(--transition);
}
.menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 6. NAVIGATION ── */
#sdvn-nav {
  background: var(--black-nav);
  position: relative;
  overflow: visible;
  z-index: 180;
}

/* subtle grid texture */
#sdvn-nav::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    rgba(192,0,26,0.04) 0, rgba(192,0,26,0.04) 1px,
    transparent 1px, transparent 80px
  );
}

#sdvn-nav .container { position: relative; z-index: 1; }

/* Primary menu */
#primary-menu {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 0; padding: 0;
  list-style: none;
}

#primary-menu > li { position: relative; }

#primary-menu > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #e8c8cc;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  padding: 15px 16px;
  border-bottom: 3px solid transparent;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  white-space: nowrap;
}

#primary-menu > li > a:hover,
#primary-menu > li.current-menu-item > a,
#primary-menu > li.current-menu-ancestor > a {
  color: var(--white);
  border-bottom-color: var(--red-main);
  background: rgba(192,0,26,0.12);
}

/* Dropdown arrow */
#primary-menu .menu-item-has-children > a::after {
  content: '▾';
  font-size: 10px;
  opacity: 0.65;
  margin-left: 2px;
  transition: transform var(--transition);
}
#primary-menu .menu-item-has-children:hover > a::after { transform: rotate(180deg); }

/* Dropdown sub-menu */
#primary-menu .sub-menu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 220px;
  background: var(--white);
  border-top: 3px solid var(--red-main);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  list-style: none;
  z-index: 300;
}

#primary-menu .menu-item-has-children:hover > .sub-menu,
#primary-menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#primary-menu .sub-menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 11px 18px;
  border-left: 3px solid transparent;
  transition: all var(--transition);
}
#primary-menu .sub-menu li a::before {
  content: '›';
  color: var(--red-main);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
#primary-menu .sub-menu li a:hover {
  color: var(--red-main);
  background: var(--red-pale);
  border-left-color: var(--red-main);
  padding-left: 22px;
}
#primary-menu .sub-menu li + li { border-top: 1px solid var(--border); }

/* 3rd level */
#primary-menu .sub-menu .sub-menu {
  top: 0; left: 100%;
  border-top: none;
  border-left: 3px solid var(--red-main);
}

/* ── 7. MOBILE MENU ── */
#mobile-menu-container {
  display: none;
  background: var(--black-deep);
  border-top: 2px solid var(--red-main);
}

#mobile-menu-container.is-open { display: block; }

#mobile-primary-menu {
  list-style: none;
  margin: 0; padding: 0;
}

#mobile-primary-menu li a {
  display: block;
  color: #ddd;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: all var(--transition);
}
#mobile-primary-menu li a:hover,
#mobile-primary-menu li.current-menu-item > a {
  color: var(--white);
  background: rgba(192,0,26,0.18);
  padding-left: 32px;
  border-left: 3px solid var(--red-main);
}

#mobile-primary-menu .sub-menu { padding-left: 16px; }
#mobile-primary-menu .sub-menu a { font-size: 13px; color: #bbb; }

/* ── 8. BREADCRUMB ── */
#sdvn-breadcrumb {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.breadcrumb-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 9px 0;
  font-size: 12.5px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.breadcrumb-wrap a {
  color: var(--red-main);
  font-weight: 600;
}
.breadcrumb-wrap a:hover { color: var(--red-dark); }

.breadcrumb-sep {
  margin: 0 7px;
  color: var(--text-muted);
  font-size: 11px;
}

.breadcrumb-current {
  color: var(--text-mid);
  font-weight: 600;
}

/* ── 9. MAIN CONTENT ── */
#sdvn-page-wrap {
  min-height: 60vh;
}

.sdvn-page-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 36px 24px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

main#sdvn-main {
  flex: 1;
  min-width: 0;
}

/* Page title bar */
.page-title-bar {
  background: var(--red-pale);
  border-left: 5px solid var(--red-main);
  padding: 22px 28px;
  margin-bottom: 28px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.page-title-bar h1 {
  font-size: 28px;
  color: var(--red-dark);
  margin: 0;
}

/* Post / page styles */
.entry-title { font-size: 26px; color: var(--red-dark); margin-bottom: 12px; }
.entry-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.entry-content { line-height: 1.85; }
.entry-content h2 { font-size: 22px; color: var(--red-dark); margin: 24px 0 10px; }
.entry-content h3 { font-size: 18px; color: var(--text-dark); margin: 20px 0 8px; }
.entry-content p { margin-bottom: 1.1em; }
.entry-content ul, .entry-content ol { padding-left: 1.5em; margin-bottom: 1em; }
.entry-content ul li { list-style: disc; }
.entry-content ol li { list-style: decimal; }
.entry-content img { border-radius: var(--radius); margin: 1em 0; }

/* ── 10. SIDEBAR ── */
aside#sdvn-sidebar {
  width: 280px;
  flex-shrink: 0;
}

.widget {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

.widget-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  background: var(--red-main);
  margin: -20px -20px 18px;
  padding: 12px 20px;
  border-radius: var(--radius) var(--radius) 0 0;
  letter-spacing: 0.3px;
}

.widget ul li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--text-dark); font-size: 13.5px; }
.widget ul li a::before { content: '› '; color: var(--red-main); font-weight: 700; }
.widget ul li a:hover { color: var(--red-main); padding-left: 4px; }

/* ── 11. FOOTER ── */
#sdvn-footer {
  background: var(--black-deep);
  color: #ccc;
  position: relative;
  overflow: hidden;
  margin-top: 0;
}

/* Red gradient top accent */
#sdvn-footer::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--red-dark), var(--red-main), var(--red-bright), var(--red-main), var(--red-dark));
}

.footer-widgets-area {
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px 24px 36px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}

/* Footer Brand Widget */
.footer-brand-widget .footer-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.footer-logo-img {
  max-height: 60px;
  width: auto;
  border-radius: 50%;
  border: 2px solid var(--red-main);
  padding: 3px;
  background: var(--white);
  object-fit: contain;
}

.footer-logo-fallback {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--red-main);
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-family: var(--font-display);
  font-size: 20px; font-weight: 900;
}

.footer-site-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  color: var(--white);
  line-height: 1.25;
}

.footer-brand-desc {
  font-size: 13px;
  color: #aaa;
  line-height: 1.75;
  margin-bottom: 18px;
}

.footer-social-row {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.footer-social-row a {
  width: 34px; height: 34px;
  border-radius: 6px;
  background: rgba(192,0,26,0.22);
  border: 1px solid rgba(192,0,26,0.38);
  display: flex; align-items: center; justify-content: center;
  color: #ff9999;
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  transition: all var(--transition);
}
.footer-social-row a:hover {
  background: var(--red-main);
  color: var(--white);
  border-color: var(--red-main);
}

/* Footer widget column heading */
.footer-widgets-area .widget-title,
.footer-col-title {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 16px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--red-main);
  display: inline-block;
  background: none;
  border-radius: 0;
}

/* Footer nav links */
.footer-nav-list { list-style: none; margin: 0; padding: 0; }
.footer-nav-list li { margin-bottom: 9px; }
.footer-nav-list li a {
  color: #bbb;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all var(--transition);
}
.footer-nav-list li a::before {
  content: '›';
  color: var(--red-main);
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.footer-nav-list li a:hover { color: #ff9999; padding-left: 4px; }

/* Footer contact info */
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.footer-contact-icon {
  width: 28px; height: 28px;
  border-radius: 5px;
  background: rgba(192,0,26,0.20);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
  margin-top: 2px;
}

.footer-contact-info {
  font-size: 13px;
  color: #bbb;
  line-height: 1.65;
}
.footer-contact-info strong {
  color: var(--white);
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.footer-contact-info a { color: #bbb; }
.footer-contact-info a:hover { color: #ff9999; }

/* ── 12. FOOTER BOTTOM BAR ── */
#sdvn-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
}

.footer-bottom-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 17px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #666;
}

.footer-bottom-inner a { color: #999; }
.footer-bottom-inner a:hover { color: #ff9999; }
.footer-bottom-links { display: flex; gap: 18px; }

.cbse-badge {
  background: rgba(192,0,26,0.16);
  border: 1px solid rgba(192,0,26,0.30);
  border-radius: 4px;
  padding: 4px 13px;
  color: #ff9999;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ── 13. BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius);
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: all var(--transition); border: none; text-decoration: none;
}
.btn-primary { background: var(--red-main); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--red-dark); color: var(--white); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--red-main); border: 2px solid var(--red-main); }
.btn-outline:hover { background: var(--red-main); color: var(--white); }

/* ── 15. RESPONSIVE ── */
@media (max-width: 1024px) {
  .footer-widgets-area { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand-widget { grid-column: 1 / -1; }
  .sdvn-page-inner { flex-direction: column; }
  aside#sdvn-sidebar { width: 100%; }
}

@media (max-width: 768px) {
  #primary-menu, #sdvn-nav .container > nav { display: none; }

  .menu-toggle { display: flex; }

  #sdvn-header .header-divider { display: none; }
  #sdvn-header .header-cta { display: none; }

  .site-logo-img, .site-logo-fallback { max-height: 54px; width: 54px; }
  .site-title { font-size: 17px; }
  .site-tagline, .site-affiliation { font-size: 10.5px; }

  .topbar-contact { gap: 12px; }
  .topbar-contact .topbar-email { display: none; }

  .footer-widgets-area { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px 24px; }
  .footer-brand-widget { grid-column: auto; }

  .footer-bottom-inner { flex-direction: column; text-align: center; gap: 10px; }
}

@media (max-width: 480px) {
  .topbar-social { display: none; }
  #sdvn-topbar .container { justify-content: center; }
  .topbar-contact { flex-direction: column; gap: 4px; align-items: center; }
  .site-title { font-size: 15px; }
}