/*
Theme Name: Ganesha Stotram
Theme URI: https://ganeshastotram.com/
Author: Bhalchandra
Description: Standalone WordPress theme for ganeshastotram.com — a 12-language Ganesha devotional site. Converted from a Dynamico child theme to a fully independent theme with a mobile-first saffron/gold/cream design system.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: ganesha-stotram
*/

    /* ============================================================
       DESIGN TOKENS — copy these into every page
    ============================================================ */
    :root {
      --saffron:     #D4560A;
      --saffron-dk:  #B84608;
      --gold:        #C8922A;
      --gold-lt:     #F5D98A;
      --deep:        #120A02;
      --deep-mid:    #1E1008;
      --cream:       #FDF6EC;
      --warm:        #F5E6D0;
      --warm-dk:     #EDD9B8;
      --text:        #2C1A08;
      --text-mid:    #5A3E22;
      --muted:       #7A5C3A;
      --border:      rgba(200,146,42,0.18);
      --border-dark: rgba(200,146,42,0.28);
      --white:       #FFFFFF;
      --r-sm:        4px;
      --r-md:        8px;
      --r-lg:        12px;
      --r-pill:      50px;
      --shadow-sm:   0 2px 12px rgba(44,26,8,0.08);
      --shadow-md:   0 6px 28px rgba(44,26,8,0.13);
      --transition:  all 0.22s ease;
    }

    /* ============================================================
       GLOBAL RESET
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      max-width: 100%;
    }
    body {
      font-family: 'DM Sans', system-ui, sans-serif;
      background: var(--cream);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      max-width: 100%;
      position: relative;
    }
    a { text-decoration: none; color: inherit; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }
    img { display: block; max-width: 100%; }

    /* Guard against ad networks (Google Auto/Anchor ads, AdSense units,
       any third-party script) injecting an element wider than the
       viewport and forcing the whole page to scroll horizontally —
       the cause of the mobile gap on the right of the screen. */
    ins.adsbygoogle,
    iframe,
    div[id^="google_ads_iframe"],
    div[id^="aswift"] {
      max-width: 100vw !important;
    }

    /* ============================================================
       UTILITY CLASSES
    ============================================================ */
    .serif  { font-family: 'Cormorant Garamond', Georgia, serif; }
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); border: 0;
    }
    .container {
      width: 100%; max-width: 1140px;
      margin: 0 auto; padding: 0 20px;
    }

    /* ============================================================
       ANNOUNCEMENT BAR
    ============================================================ */
    .announcement-bar {
      background: var(--deep);
      padding: 9px 20px;
      text-align: center;
      font-size: 12px;
      letter-spacing: 0.04em;
      color: rgba(255,255,255,0.70);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .announcement-bar .highlight {
      color: var(--gold-lt);
      font-weight: 500;
    }
    .announcement-bar .gem { color: var(--gold); font-size: 10px; }
    .announcement-bar .close-bar {
      position: absolute; right: 16px;
      background: none; border: none;
      color: rgba(255,255,255,0.4);
      font-size: 18px; line-height: 1;
      cursor: pointer; padding: 0;
      transition: var(--transition);
    }
    .announcement-bar .close-bar:hover { color: white; }
    @media (max-width: 480px) {
      .announcement-bar { font-size: 11px; padding: 8px 36px 8px 16px; }
      .announcement-bar .close-bar { right: 10px; }
    }

    /* ============================================================
       HEADER
    ============================================================ */
    .site-header {
      background: rgba(253,246,236,0.97);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 200;
      transition: box-shadow 0.3s;
    }
    .site-header.scrolled {
      box-shadow: var(--shadow-md);
    }

    /* Top row: logo + actions */
    .header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 68px;
    }

    /* Logo */
    .logo {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 11px !important;
      width: auto !important;
      flex: 0 0 auto !important;
      text-decoration: none;
    }
    .logo-icon {
      width: 46px; height: 46px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--saffron) 0%, var(--gold) 100%);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 2px 10px rgba(212,86,10,0.35);
      position: relative;
      overflow: hidden;
    }
    .logo-icon img {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .logo-icon span {
      font-family: 'Cormorant Garamond', serif;
      font-size: 24px;
      color: white;
      line-height: 1;
      margin-top: 2px;
    }
    .logo-text 
	{ 
		display: flex; 
		flex-direction: column; 
		gap: 1px;
		display: flex;
	    flex-direction: column;
	    justify-content: center;  /* Center text vertically */
	    align-items: center;      /* Center text horizontally */
	    text-align: center;
        gap: 1px;	
		
	}
    .logo-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 20px;
      font-weight: 600;
      color: var(--text);
      line-height: 1;
		
    }
    .logo-tagline {
      font-size: 10px;
      letter-spacing: 0.13em;
      color: var(--muted);
      text-transform: uppercase;
    }

    /* Header right actions */
    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .btn-lang {
      display: flex; align-items: center; gap: 6px;
      font-size: 12px; font-weight: 500;
      color: var(--gold);
      border: 1px solid var(--border-dark);
      border-radius: var(--r-pill);
      padding: 6px 14px;
      transition: var(--transition);
      white-space: nowrap;
    }
    .btn-lang:hover {
      background: var(--gold);
      color: white;
      border-color: var(--gold);
    }
    .btn-icon {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      color: var(--muted);
      font-size: 17px;
      transition: var(--transition);
    }
    .btn-icon:hover { background: var(--warm); color: var(--text); }
    .btn-hamburger {
      width: 36px; height: 36px;
      border-radius: var(--r-md);
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 5px;
      padding: 9px;
      transition: var(--transition);
      display: none;           /* shown via media query */
    }
    .btn-hamburger span {
      display: block; width: 100%; height: 1.5px;
      background: var(--muted);
      border-radius: 2px;
      transition: var(--transition);
    }
    .btn-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .btn-hamburger.open span:nth-child(2) { opacity: 0; }
    .btn-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
    .btn-hamburger:hover { background: var(--warm); }

    /* Primary nav */
    .header-nav {
      border-top: 1px solid var(--border);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .header-nav::-webkit-scrollbar { display: none; }
    .nav-list {
      display: flex;
      align-items: center;
      list-style: none;
      gap: 2px;
      padding: 6px 0;
      white-space: nowrap;
    }
    .nav-list a {
      display: flex; align-items: center; gap: 5px;
      font-size: 13px; font-weight: 400;
      color: var(--muted);
      padding: 7px 12px;
      border-radius: var(--r-md);
      transition: var(--transition);
      position: relative;
    }
    .nav-list a .nav-icon { font-size: 15px; }
    .nav-list a:hover { background: var(--warm); color: var(--text); }
    .nav-list a.active {
      color: var(--saffron);
      font-weight: 500;
      background: rgba(212,86,10,0.07);
    }
    .nav-list a.active::after {
      content: '';
      position: absolute; bottom: -7px; left: 12px; right: 12px;
      height: 2px;
      background: var(--saffron);
      border-radius: 2px 2px 0 0;
    }
    /* dropdown indicator */
    .nav-list .has-drop > a::before {
      content: '▾';
      font-size: 10px;
      margin-left: 2px;
      color: var(--muted);
    }

    /* Language strip */
    .lang-strip {
      background: var(--deep);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .lang-strip::-webkit-scrollbar { display: none; }
    .lang-strip-inner {
      display: flex;
      gap: 0;
      white-space: nowrap;
      padding: 0 20px;
    }
    .lang-strip a {
      font-size: 12px;
      color: rgba(255,255,255,0.55);
      padding: 8px 14px;
      transition: var(--transition);
      border-right: 1px solid rgba(255,255,255,0.07);
      display: inline-flex; align-items: center;
    }
    .lang-strip a:first-child { padding-left: 0; }
    .lang-strip a:hover { color: var(--gold-lt); background: rgba(255,255,255,0.04); }
    .lang-strip a.active { color: var(--gold); font-weight: 500; }

    /* ============================================================
       MOBILE DRAWER NAV
    ============================================================ */
    .mobile-nav {
      position: fixed;
      inset: 0;
      z-index: 300;
      pointer-events: none;
    }
    .mobile-nav-overlay {
      position: absolute; inset: 0;
      background: rgba(18,10,2,0.6);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .mobile-nav-drawer {
      position: absolute;
      top: 0; right: 0;
      width: min(320px, 88vw);
      height: 100%;
      background: var(--cream);
      transform: translateX(100%);
      transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
      overflow-y: auto;
      display: flex; flex-direction: column;
    }
    .mobile-nav.open { pointer-events: all; }
    .mobile-nav.open .mobile-nav-overlay { opacity: 1; }
    .mobile-nav.open .mobile-nav-drawer { transform: translateX(0); }

    .drawer-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px;
      border-bottom: 1px solid var(--border);
      background: var(--warm);
    }
    .drawer-logo {
      font-family: 'Cormorant Garamond', serif;
      font-size: 18px; font-weight: 600; color: var(--text);
    }
    .drawer-close {
      width: 32px; height: 32px;
      border-radius: 50%;
      border: 1px solid var(--border-dark);
      display: flex; align-items: center; justify-content: center;
      color: var(--muted); font-size: 18px;
      transition: var(--transition);
    }
    .drawer-close:hover { background: var(--saffron); color: white; border-color: var(--saffron); }

    .drawer-mantra {
      text-align: center; padding: 12px;
      font-size: 12px; color: var(--gold);
      letter-spacing: 0.1em;
      border-bottom: 1px solid var(--border);
    }

    .drawer-nav { padding: 12px 0; flex: 1; }
    .drawer-nav a {
      display: flex; align-items: center; gap: 12px;
      padding: 13px 20px;
      font-size: 14px; font-weight: 400; color: var(--text-mid);
      transition: var(--transition);
      border-left: 3px solid transparent;
    }
    .drawer-nav a .d-icon { font-size: 18px; width: 22px; text-align: center; }
    .drawer-nav a:hover { background: var(--warm); color: var(--text); border-left-color: var(--saffron); }
    .drawer-nav a.active { color: var(--saffron); font-weight: 500; border-left-color: var(--saffron); background: rgba(212,86,10,0.05); }
    .drawer-divider { height: 1px; background: var(--border); margin: 8px 20px; }

    .drawer-langs {
      padding: 16px 20px;
      border-top: 1px solid var(--border);
      background: var(--warm);
    }
    .drawer-langs h4 {
      font-size: 10px; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--muted);
      margin-bottom: 10px;
    }
    .drawer-lang-grid {
      display: flex; flex-wrap: wrap; gap: 6px;
    }
    .drawer-lang-grid a {
      font-size: 12px; padding: 5px 12px;
      border-radius: var(--r-pill);
      background: white; border: 1px solid var(--border-dark);
      color: var(--text-mid);
      transition: var(--transition);
    }
    .drawer-lang-grid a:hover { background: var(--saffron); color: white; border-color: var(--saffron); }

    .drawer-footer {
      padding: 16px 20px;
      background: var(--deep);
      font-size: 11px;
      color: rgba(255,255,255,0.35);
      text-align: center;
      letter-spacing: 0.05em;
    }

    /* ============================================================
       MOBILE BREAKPOINTS FOR HEADER
    ============================================================ */
    @media (max-width: 860px) {
      .header-nav { display: none; }       /* hide desktop nav on mobile */
      .btn-hamburger { display: flex; }    /* show hamburger */
      .btn-lang { display: none; }         /* hide lang btn on very small */
    }
    @media (max-width: 480px) {
      .logo-tagline { display: none; }
      .logo-name { font-size: 18px; }
    }

    /* ============================================================
       FOOTER
    ============================================================ */
    .site-footer {
      background: var(--deep);
      border-top: 3px solid var(--saffron);
      margin-top: auto;
    }

    /* Footer top: newsletter */
    .footer-newsletter {
      background: var(--deep-mid);
      padding: 36px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .footer-newsletter-inner {
      max-width: 680px; margin: 0 auto;
      text-align: center;
    }
    .footer-newsletter h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(20px, 4vw, 28px);
      color: white; font-weight: 600;
      margin-bottom: 8px;
    }
    .footer-newsletter p {
      font-size: 13px; color: rgba(255,255,255,0.5);
      margin-bottom: 20px; line-height: 1.6;
    }
    .newsletter-form {
      display: flex; gap: 10px; flex-wrap: wrap;
      justify-content: center;
    }
    .newsletter-input {
      flex: 1; min-width: 220px; max-width: 340px;
      height: 44px; border-radius: var(--r-md);
      border: 1px solid rgba(200,146,42,0.3);
      background: rgba(255,255,255,0.07);
      padding: 0 16px;
      font-size: 13px; color: white;
      font-family: inherit;
      outline: none;
      transition: var(--transition);
    }
    .newsletter-input::placeholder { color: rgba(255,255,255,0.35); }
    .newsletter-input:focus { border-color: var(--gold); background: rgba(255,255,255,0.1); }
    .newsletter-btn {
      height: 44px; padding: 0 24px;
      background: var(--saffron); color: white;
      border-radius: var(--r-md);
      font-size: 13px; font-weight: 500;
      transition: var(--transition);
    }
    .newsletter-btn:hover { background: var(--saffron-dk); }
    @media (max-width: 480px) {
      .newsletter-form { flex-direction: column; align-items: stretch; }
      .newsletter-input, .newsletter-btn { width: 100%; max-width: 340px; margin: 0 auto; }
    }

    /* Footer main grid */
    .footer-main {
      padding: 52px 20px 40px;
    }
    .footer-grid {
      max-width: 1140px; margin: 0 auto;
      display: grid;
      grid-template-columns: 1.8fr 1fr 1fr 1fr;
      gap: 36px 28px;
    }

    /* Brand col */
    .footer-brand {}
    .footer-logo-wrap {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 14px;
    }
    .footer-logo-icon {
      width: 40px; height: 40px; border-radius: 50%;
      background: linear-gradient(145deg, var(--saffron), var(--gold));
      display: flex; align-items: center; justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .footer-logo-icon img {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .footer-logo-icon span {
      font-family: 'Cormorant Garamond', serif;
      font-size: 20px; color: white;
    }
    .footer-logo-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 18px; font-weight: 600; color: white;
    }
    .footer-bio {
      font-size: 13px; color: rgba(255,255,255,0.42);
      line-height: 1.75; margin-bottom: 16px;
    }
    .footer-mantra {
      font-family: 'Cormorant Garamond', serif;
      font-size: 15px; color: var(--gold);
      letter-spacing: 0.06em; margin-bottom: 20px;
      font-style: italic;
    }
    .footer-social { display: flex; gap: 9px; }
    .social-link {
      width: 36px; height: 36px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.12);
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.45); font-size: 16px;
      transition: var(--transition);
    }
    .social-link:hover { border-color: var(--gold); color: var(--gold); }

    /* Footer col links */
    .footer-col {}
    .footer-col-title {
      font-size: 10px; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--gold);
      font-weight: 500; margin-bottom: 18px;
    }
    .footer-links-list { list-style: none; }
    .footer-links-list li { margin-bottom: 11px; }
    .footer-links-list a {
      font-size: 13px; color: rgba(255,255,255,0.45);
      transition: var(--transition);
      display: inline-flex; align-items: center; gap: 6px;
    }
    .footer-links-list a:hover { color: white; }
    .footer-links-list a::before {
      content: '';
      width: 4px; height: 4px; border-radius: 50%;
      background: var(--saffron); opacity: 0;
      transition: var(--transition);
      flex-shrink: 0;
    }
    .footer-links-list a:hover::before { opacity: 1; }

    /* Footer languages section */
    .footer-langs-section {
      max-width: 1140px; margin: 0 auto;
      padding: 28px 20px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .footer-langs-title {
      font-size: 10px; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--gold);
      margin-bottom: 14px;
    }
    .footer-langs-grid {
      display: flex; flex-wrap: wrap; gap: 8px;
    }
    .footer-lang-pill {
      font-size: 12px; padding: 5px 14px;
      border-radius: var(--r-pill);
      border: 1px solid rgba(200,146,42,0.2);
      color: rgba(255,255,255,0.5);
      transition: var(--transition);
    }
    .footer-lang-pill:hover { color: var(--gold); border-color: var(--gold); }

    /* Footer bottom bar */
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: 18px 20px;
    }
    .footer-bottom-inner {
      max-width: 1140px; margin: 0 auto;
      display: flex; align-items: center;
      justify-content: space-between;
      flex-wrap: wrap; gap: 12px;
    }
    .footer-copy {
      font-size: 12px; color: rgba(255,255,255,0.28);
    }
    .footer-copy span { color: var(--saffron); }
    .footer-legal { display: flex; flex-wrap: wrap; gap: 16px; }
    .footer-legal a {
      font-size: 12px; color: rgba(255,255,255,0.28);
      transition: var(--transition);
    }
    .footer-legal a:hover { color: rgba(255,255,255,0.7); }

    /* Footer responsive */
    @media (max-width: 860px) {
      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px 20px;
      }
      .footer-brand { grid-column: 1 / -1; }
    }
    @media (max-width: 480px) {
      .footer-grid { grid-template-columns: 1fr; gap: 28px; }
      .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
    }

    /* ============================================================
       DEMO SPACER (remove when integrating)
    ============================================================ */
    .demo-spacer {
      min-height: 60vh;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 12px;
      background: var(--warm);
      text-align: center; padding: 40px;
    }
    .demo-spacer h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 32px; color: var(--text);
    }
    .demo-spacer p { font-size: 14px; color: var(--muted); }
    
    
    
    
    
    /* ============================================================
   SEARCH OVERLAY
============================================================ */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(18,10,2,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 90px 20px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.search-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.search-box {
  width: 100%;
  max-width: 560px;
  background: var(--cream);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-dark);
  padding: 20px;
  transform: translateY(-16px);
  transition: transform 0.25s ease;
}
.search-overlay.open .search-box {
  transform: translateY(0);
}
.search-box-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-box-top span.icon {
  font-size: 18px;
  color: var(--muted);
}
.search-input {
  flex: 1;
  height: 46px;
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
  padding: 0 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: white;
  outline: none;
  transition: var(--transition);
}
.search-input:focus {
  border-color: var(--saffron);
}
.search-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-dark);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  font-size: 16px;
  transition: var(--transition);
  flex-shrink: 0;
}
.search-close:hover { background: var(--warm); color: var(--text); }
.search-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  padding-left: 2px;
}


    
    

/* ============================================================
   MAIN CONTENT AREA (index.php / page.php / archive fallback)
   Not part of the original header/footer mockup — added to give
   post lists and static pages a consistent look until dedicated
   templates are designed.
============================================================ */
.site-main {
  max-width: 1140px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}
.content-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 900px) {
  .content-layout.has-sidebar {
    grid-template-columns: 2.2fr 1fr;
  }
}
.post-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  margin-bottom: 20px;
  transition: var(--transition);
}
.post-card:hover { box-shadow: var(--shadow-sm); }
.post-card h2 { font-size: 20px; margin-bottom: 8px; }
.post-card h2 a { color: var(--text); }
.post-card h2 a:hover { color: var(--saffron); }
.post-card .entry-meta { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.post-card .entry-summary p { font-size: 14px; color: var(--text-mid); }
.page-title, .entry-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--text);
  margin-bottom: 20px;
}
.entry-content { font-size: 15px; color: var(--text-mid); line-height: 1.75; }
.entry-content img { border-radius: var(--r-md); margin: 16px 0; }
.pagination { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 8px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border-dark); font-size: 13px; color: var(--text-mid);
}
.pagination .current { background: var(--saffron); color: white; border-color: var(--saffron); }
.widget { margin-bottom: 28px; }
.widget-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--saffron-dk); margin-bottom: 12px; }
.no-results { padding: 40px 0; text-align: center; color: var(--muted); }