/*
Theme Name: INER Child
Template: astra
Version: 1.0.0
*/

/* =====================================================
   1. GLOBAL TYPOGRAPHY
   ===================================================== */

body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #111;
  line-height: 1.65;
  position: relative;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-title a {
  font-family: "Raleway", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
}

/* =====================================================
   2. CONTENT WIDTH & ALIGNMENT
   ===================================================== */

.site-content,
#content,
.container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.site-content {
  text-align: left;
}

/* Paragraphs */
.site-content p {
  margin-bottom: 1.1em;
  text-align: left;
}

/* Headings spacing */
.site-content h1,
.site-content h2,
.site-content h3 {
  margin-top: 2.2em;
  margin-bottom: 0.8em;
  line-height: 1.3;
}

/* Lists */
.site-content ul,
.site-content ol {
  padding-left: 1.4em;
  margin-bottom: 1.2em;
}

/* Images */
.site-content img {
  max-width: 100%;
  height: auto;
}

/* Optional alignment helpers */
.align-center { display: block; margin: 2em auto; }
.align-right  { float: right; margin: 0.5em 0 1em 1.5em; }
.align-left   { float: left;  margin: 0.5em 1.5em 1em 0; }

/* =====================================================
   3. HEADER TYPOGRAPHY & LAYOUT (Astra-safe)
   ===================================================== */

/* Header text only (avoid targeting icons/SVGs) */
#masthead .site-title,
#masthead .main-header-menu > li > a,
#masthead .main-header-menu .sub-menu a,
#masthead .ast-header-html,
#masthead .ast-header-widget-area {
  font-family: "Raleway", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
}

#masthead {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Primary header spacing + white background */
.ast-primary-header-bar {
  padding-top: 18px;
  padding-bottom: 18px;
  background-color: #fff !important;
}

/* Header inner padding (ISPP-like) */
#masthead .ast-container {
  padding-left: 60px;
  padding-right: 60px;
}

/* Vertical centering */
#masthead .ast-primary-header-bar .ast-container,
#masthead .ast-primary-header-bar .ast-row,
#masthead .ast-primary-header-bar .ast-builder-grid-row {
  align-items: center;
}

/* Logo safety */
.ast-header-logo img,
.custom-logo-link img {
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Ensure ALL header regions are white (kills dark bar) */
#masthead,
#masthead .ast-primary-header-bar,
#masthead .ast-primary-header-bar-wrap,
#masthead .ast-builder-layout-element,
#masthead .ast-builder-menu,
#masthead .ast-builder-menu-1,
#masthead .ast-builder-menu-1 .main-header-menu,
#masthead .main-header-menu {
  background-color: #fff !important;
  background: #fff !important;
}

/* =====================================================
   4. NAVIGATION COLORS & DROPDOWNS
   ===================================================== */

.main-header-menu > li > a {
  padding: 10px 14px;
  font-size: 15px;
  letter-spacing: 0.2px;
  color: #111 !important;
}

.main-header-menu > li > a:hover,
.main-header-menu > li.current-menu-item > a,
.main-header-menu > li.current-menu-ancestor > a {
  color: #1369b2 !important;
}

/* Dropdowns: force white */
.ast-primary-header-bar .main-header-menu .sub-menu,
.ast-primary-header-bar .main-header-menu .sub-menu ul,
.ast-primary-header-bar .main-header-menu .sub-menu li {
  background-color: #ffffff !important;
}

.ast-primary-header-bar .main-header-menu .sub-menu li a {
  color: #111111 !important;
  background-color: #ffffff !important;
}

.ast-primary-header-bar .main-header-menu .sub-menu li a:hover {
  background-color: #f5f7fa !important;
  color: #1369b2 !important;
}

.ast-primary-header-bar .sub-menu,
.ast-primary-header-bar .ast-submenu-expanded {
  box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

/* =====================================================
   5. BACKGROUND PATTERN (VISIBLE BEHIND CONTENT)
   ===================================================== */

/* Make wrappers transparent so pattern can show */
html, body,
.site, #page, #content, .site-content, .ast-container,
.ast-separate-container,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-inner,
.ast-plain-container,
.ast-page-builder-template {
  background: transparent !important;
}

/* Pattern layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("https://iner.ispp.org.in/wp-content/uploads/2026/01/pattern.jpeg");
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

/* Keep the site above the pattern */
#page, #masthead, #content, #colophon {
  position: relative;
  z-index: 1;
}

/* =====================================================
   6. STICKY HEADER + NO OVERLAP (FINAL)
   ===================================================== */

/* 1) Ensure header is always above content */
#masthead {
  position: relative !important;
  z-index: 99999 !important;
}

/* 2) Offset content by header height (adjust ONE value if needed) */
:root { --iner-header-offset: 130px; }           /* desktop */
@media (max-width: 768px) { :root { --iner-header-offset: 150px; } }  /* mobile */

/* Push the page content down (NOT the whole body) */
#content,
#primary,
.site-content {
  padding-top: var(--iner-header-offset) !important;
}

/* Logged-in admin bar support */
body.admin-bar #content,
body.admin-bar #primary,
body.admin-bar .site-content {
  padding-top: calc(var(--iner-header-offset) + 32px) !important;
}

/* Optional: hide homepage default title */
.home .entry-title {
  display: none !important;
}

/* =====================================================
   7. MOBILE REFINEMENTS
   ===================================================== */

@media (max-width: 768px) {
  #masthead .ast-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}