/*
Theme Name:  TeluguSeva Child
Theme URI:   https://teluguseva.in
Description: GeneratePress Premium Child Theme for TeluguSeva.in — Telugu government schemes, Aadhaar, Banking & Cyber Awareness portal.
Author:      TeluguSeva Team
Author URI:  https://teluguseva.in
Template:    generatepress
Version:     4.0.2
License:     GNU General Public License v2 or later
Text Domain: teluguseva
*/

/* ═══════════════════════════════════════════════════════════════
   TELUGUSEVA.IN — UNIFIED DESIGN SYSTEM v2
   Colour Palette (3-colour, fully consistent):
   ① NAVY     #0F2D6B  — primary brand, headers, CTAs
   ② SKY      #1565C0  — nav, section bars, accents
   ③ CHARCOAL #1C1C2E  — top strip, footer
   Tints:  #EEF4FF (pale), #DBEAFE (light), #0D47A1 (dark CTA)
   ⚠️  Zero leftover alias vars from old red/maroon theme
═══════════════════════════════════════════════════════════════ */

/* ── 0. CSS VARIABLES ── */
:root {
  --navy:         #0F2D6B;
  --sky:          #1565C0;
  --sky-mid:      #1A75D2;
  --sky-dark:     #0D47A1;
  --sky-pale:     #EEF4FF;
  --sky-light:    #DBEAFE;
  --charcoal:     #1C1C2E;
  --charcoal-mid: #252538;
  --white:        #FFFFFF;
  --off:          #F7F8FA;
  --line:         #E0E4ED;
  --gray:         #7A8499;
  --text:         #181824;
  --text-soft:    #3D4460;
  --green:        #1A7A40;
  --green-pale:   #E8F5EE;
  --amber:        #B7791F;
  --amber-pale:   #FEF3E2;
  --red:          #C0392B;
  --red-pale:     #FDECEA;
  --teal:         #0E7490;
  --teal-pale:    #E0F5F9;
  --purple:       #6B21A8;
  --purple-pale:  #F3E8FF;
}

/* ── 1. RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ── 2. OVERRIDE GP BODY/WRAPPER ── */
/* Force GP to use our colour scheme — override inline Customizer styles */
body {
  font-family: 'Hind', sans-serif !important;
  background: #C8D4E8 !important;
  color: var(--text) !important;
  overflow-x: hidden;
}

/* GP site container — max 1100px centered with card shadow */
.site-container,
#page {
  max-width: 1100px !important;
  margin: 0 auto !important;
  background: var(--off) !important;
  box-shadow: 0 0 40px rgba(0,0,0,.2) !important;
}

/* site-wrap: overflow-x only — overflow:hidden breaks position:fixed children */
.site-wrap {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--off);
  box-shadow: 0 0 40px rgba(0,0,0,.2);
  overflow-x: hidden;  /* x only — NOT overflow:hidden which breaks fixed nav */
  position: relative;
}

/* ═══ SUPPRESS GP FREE HEADER & MOBILE TOGGLE ═══ */
.site-header { display: none !important; }
.main-navigation { display: none !important; }
.nav-primary { display: none !important; }
.mobile-menu-control-wrap { display: none !important; }
.menu-toggle { display: none !important; }
#site-navigation { display: none !important; }
.navigation-search { display: none !important; }

/* Ensure our masthead is on top */
.masthead {
  position: relative !important;
  z-index: 1000 !important;
  display: block !important;
}
.mast-inner {
  position: relative !important;
  z-index: 1001 !important;
}
/* Search button — highest priority */
.mast-inner .mast-search-btn {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1002 !important;
  pointer-events: auto !important;
  margin-left: auto !important;
  width: 38px !important;
  height: 38px !important;
  flex-shrink: 0 !important;
}
@media(min-width: 900px) {
  .mast-inner .mast-search-btn { display: none !important; }
}
/* Hamburger button */
.mast-inner .mob-hamburger {
  display: flex !important;
  visibility: visible !important;
  z-index: 1002 !important;
  flex-shrink: 0 !important;
}
@media(min-width: 900px) {
  .mast-inner .mob-hamburger { display: none !important; }
}

/* Remove GP content padding — our section wrappers handle it */
.inside-article,
.content-area .inside-article {
  padding: 0 !important;
}
.site-main {
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide GP sidebar — we use inline sidebars */
.widget-area { display: none !important; }

/* Remove GP footer — our custom footer replaces it */
/* Target every possible GP footer element with maximum specificity */
.site-footer,
#site-footer,
.footer-widgets,
.footer-widget-area,
.inside-footer-widgets,
.footer-widget-1,
.footer-widget-2,
.footer-widget-3,
.copyright-bar,
.site-info,
.generated-footer,
[class*="generate-footer"],
[id*="generate-footer"] {
  display:   none !important;
  height:    0    !important;
  max-height:0    !important;
  overflow:  hidden !important;
  padding:   0    !important;
  margin:    0    !important;
  border:    none !important;
  visibility:hidden !important;
}

/* ── LOGO TITLE SIZE (was 19px, +4px+2px = 25px) ── */
.lw-te { font-size: 25px !important; }
/* Footer: reduce on mobile so it doesn't wrap */
footer .lw-te { font-size: 25px !important; color: #fff !important; }
@media(max-width:600px){ footer .lw-te { font-size: 20px !important; } }

/* ── MOBILE BOTTOM NAV — fixed to viewport (JobGuide pattern) ── */
.mob-nav {
  display: none;
}
@media(max-width:900px) {
  .mob-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 12px rgba(0,0,0,.10);
    justify-content: space-around;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom);
  }
  body { padding-bottom: 62px !important; }
}

.mn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 8px 4px 6px;
  text-decoration: none;
  color: #6b7280;
  gap: 3px;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
  border: none;
  background: none;
  cursor: pointer;
}
.mn-item.active { color: var(--sky); }
.mn-item:hover  { color: var(--sky); }

.mn-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Outline icons (Home, Calendar) — thicker stroke for visibility */
.mn-icon svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;        /* bolder, matches JobGuide weight */
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* YouTube — filled, no stroke */
.mn-yt svg { fill: currentColor; stroke: none; width:26px; height:26px; }
.mn-item:hover .mn-yt,
.mn-item.active .mn-yt { color: #FF0000; }

/* WhatsApp — filled, no stroke */
.mn-wa svg { fill: currentColor; stroke: none; width:26px; height:26px; }
.mn-item:hover .mn-wa,
.mn-item.active .mn-wa { color: #25D366; }

/* Label — normal case, never uppercase */
.mn-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: inherit !important;
  font-family: 'Hind', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;  /* override any home.css uppercase */
}

/* ── SEARCH ICON BUTTON — always visible on mobile ── */
/* This is in style.css (linked file) — loads before all inline CSS */
.mast-search-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--text-soft) !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
@media(min-width:900px) {
  .mast-search-btn { display: none !important; }
}

/* ── SCHEME THUMBNAIL — full height ── */
.scheme-2col .al-item {
  min-height: 76px;
  align-items: stretch !important;
}
.scheme-2col .al-thumb {
  width: 90px !important;
  min-height: 76px !important;
  height: auto !important;
  align-self: stretch !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
.scheme-2col .al-thumb-inner {
  position: absolute !important;
  inset: 0 !important;
}

/* ═══════════════════════════════════════════════
   NUCLEAR SEARCH BUTTON FIX
   If .mast-search-btn is hidden by any conflicting CSS,
   this forces it visible using maximum specificity
═══════════════════════════════════════════════ */
html body .site-wrap header.masthead .mast-inner .mast-search-btn {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 38px !important;
  height: 38px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  pointer-events: auto !important;
}
@media(min-width: 900px) {
  html body .site-wrap header.masthead .mast-inner .mast-search-btn {
    display: none !important;
  }
}

/* Ensure our masthead always shows above everything */
.masthead {
  display: block !important;
  position: relative !important;
  z-index: 1000 !important;
}
/* Our search button — maximum enforcement */
.masthead .mast-search-btn {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-left: auto !important;
}
@media(min-width:900px) {
  .masthead .mast-search-btn { display: none !important; }
  .masthead .mast-search-desktop { display: block !important; }
}



/* ═══ SUPPRESS GP PREMIUM SLIDEOUT / OFFCANVAS NAVIGATION ═══
   Body classes: slideout-enabled slideout-mobile sticky-menu
   separate-containers header-aligned-left
   These cause GP to inject its own header/nav over ours ═══ */
.slideout-panel,
.slideout-menu,
#slideout-menu,
.off-canvas-menu,
.offside,
.offside--left,
.offside--right,
#offside-menu,
.sticky-enabled .site-header,
.sticky-header,
#sticky-placeholder,
.gen-sidebar-nav,
.mobile-menu-control-wrap,
.menu-toggle,
.close-menu {
  display: none !important;
  visibility: hidden !important;
}

/* Fix: mast-inner children all visible */
.mast-inner > * {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Search button — absolute final override */
button.mast-search-btn,
.mast-inner button.mast-search-btn {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 38px !important;
  height: 38px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}
@media(min-width:900px) {
  button.mast-search-btn,
  .mast-inner button.mast-search-btn {
    display: none !important;
  }
}

/* Disable GP sticky header behaviour */
.sticky-menu .site-header,
.sticky-enabled .site-header,
#sticky-placeholder { display: none !important; }

/* Ensure our masthead is never sticky (GP might make it sticky) */
.masthead { position: relative !important; top: auto !important; }

/* ═══ HIDE GP PREMIUM MOBILE HEADER — show ours ═══ */
/* GP Premium mobile header classes from body: slideout-enabled slideout-mobile */
.slideout-enabled .site-header,
.slideout-mobile .site-header,
.mobile-header,
#mobile-header,
.gen-slideout-toggle,
.slideout-toggle,
.slideout-open,
[class*="mobile-menu"],
.mobile-nav,
#mobile-nav,
.main-nav .menu-toggle,
.nav-toggle,
.nav-button,
#nav-toggle {
  display: none !important;
}

/* Our mast-inner — always fully visible */
.site-wrap .masthead .mast-inner {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
}

/* Our search btn — show on mobile */
.site-wrap .masthead .mast-inner .mast-search-btn {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 38px !important;
  height: 38px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  z-index: 100 !important;
}
@media(min-width:900px) {
  .site-wrap .masthead .mast-inner .mast-search-btn {
    display: none !important;
  }
}

/* Our hamburger — show on mobile */
.site-wrap .masthead .mast-inner .mob-hamburger {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
}
@media(min-width:900px) {
  .site-wrap .masthead .mast-inner .mob-hamburger {
    display: none !important;
  }
}

/* AUTOCOMPLETE — final guarantee, highest specificity */
#tsAcDropdown,
.ts-ac-dropdown {
  pointer-events: auto !important;
  z-index: 999999 !important;
  background: #fff !important;
}
.ts-ac-item,
.ts-ac-footer {
  pointer-events: auto !important;
  cursor: pointer !important;
  display: flex !important;
}
.ts-ac-backdrop {
  z-index: 888888 !important;
  pointer-events: auto !important;
}

/* ═══ MOBILE SEARCH BUTTON — NUCLEAR APPROACH ═══
   Completely independent of header layout
   Shows only on mobile as fixed element ═══ */
@media(max-width: 899px) {
  /* Hide any existing mast-search-btn in header flow */
  .mast-inner { position: relative; }
  
  /* Force show via attribute selector — hardest to override */
  button[aria-label="Search"].mast-search-btn,
  button[onclick*="toggleSearch"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 9999 !important;
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-soft) !important;
  }
}

/* Counter GP Free layout classes */
.nav-below-header .site-header,
.separate-containers .site-header,
.header-aligned-left .site-header { display: none !important; }

.nav-below-header .masthead,
.separate-containers .masthead { display: block !important; }

/* GP sticky menu no transition fix */
.sticky-menu-no-transition * { transition: none !important; }

/* SEARCH BTN VISIBILITY — force color and size */
@media(max-width:899px){
  .mast-search-btn svg {
    stroke: #333 !important;
    fill: none !important;
    width: 22px !important;
    height: 22px !important;
    display: block !important;
  }
  .mast-search-btn {
    background: rgba(0,0,0,0.05) !important;
    border-radius: 50% !important;
  }
}

/* FIX: site-wrap overflow-x was clipping search button on mobile */
.site-wrap { overflow-x: visible !important; }
.masthead { overflow: visible !important; }
.mast-inner { overflow: visible !important; }



/* Mobile search btn — hide on desktop */
@media(min-width:900px) {
  .mast-search-btn { display: none !important; }
}

/* Mobile search bar — force visible on mobile */
@media(max-width:899px){
  .mob-search,
  #mobSearchBar {
    display: flex !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Fix mob-search button — remove filled circle from GP override */
.mob-search .mob-search-btn {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  color: var(--sky-dark) !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Fix iOS zoom on input focus — viewport must not change */
.mob-search input,
.mob-search input:focus {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100% !important;
  transform: none !important;
}

/* Prevent double-tap zoom on search elements */
.mob-search input,
.mob-search button {
  touch-action: manipulation;
}