/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.13.1.1778728382
Updated: 2026-05-14 03:13:02

*/
/* ============================================================
   TATWAMASI ASTROLOGY — HEADER STYLES
   Add to: /wp-content/themes/your-child-theme/style.css
   ============================================================ */

/* ── Design Tokens ── */
:root {
  --hd-bg:          #1a1107;
  --hd-bg-topbar:   #120d05;
  --hd-gold:        #c9922a;
  --hd-gold-light:  #e8b84b;
  --hd-cream:       #f5ead8;
  --hd-muted:       #9e8a6e;
  --hd-border:      rgba(201,146,42,0.25);
  --hd-font-head:   'Cormorant Garamond', Georgia, serif;
  --hd-font-body:   'Noto Serif', Georgia, serif;
  --hd-height:      72px;
  --hd-topbar-h:    36px;
}
#primary {
    margin: 0 0;
}
/* ── Reset Astra's header so ours takes full control ── */
#masthead,
.ast-desktop-header,
.main-header-bar,
.ast-primary-header-bar {
  display: none !important;
}

/* ── Sticky behaviour ── */
#tatwamasi-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  font-family: var(--hd-font-body);
  box-shadow: 0 2px 16px rgba(0,0,0,0.45);
}

/* ══════════════════════════════════════
   TOP CREDENTIAL BAR
   ══════════════════════════════════════ */
#tatwamasi-header .header-topbar {
  background: var(--hd-bg-topbar);
  border-bottom: 1px solid var(--hd-border);
  height: var(--hd-topbar-h);
  display: flex;
  align-items: center;
}

#tatwamasi-header .topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

#tatwamasi-header .topbar-credential {
  font-family: var(--hd-font-head);
  font-size: 0.78rem;
  color: var(--hd-gold);
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tatwamasi-header .topbar-contact {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}

#tatwamasi-header .topbar-contact a {
  color: var(--hd-muted);
  text-decoration: none;
  transition: color 0.2s;
}

#tatwamasi-header .topbar-contact a:hover {
  color: var(--hd-gold-light);
}

#tatwamasi-header .topbar-sep {
  color: var(--hd-border);
}

/* ══════════════════════════════════════
   MAIN HEADER ROW
   ══════════════════════════════════════ */
#tatwamasi-header .header-main {
  background: var(--hd-bg);
  height: var(--hd-height);
  border-bottom: 1px solid var(--hd-border);
}

#tatwamasi-header .header-main-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* ── Brand / Logo ── */
#tatwamasi-header .header-brand {
  flex-shrink: 0;
}

#tatwamasi-header .header-logo-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

#tatwamasi-header .header-site-name {
  font-family: var(--hd-font-head);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--hd-gold);
  letter-spacing: 0.04em;
}

#tatwamasi-header .header-site-tagline {
  font-family: var(--hd-font-head);
  font-size: 0.72rem;
  color: var(--hd-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Custom logo sizing */
#tatwamasi-header .custom-logo {
  max-height: 52px;
  width: auto;
}

/* ── Desktop Nav ── */
#tatwamasi-header .header-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

#tatwamasi-header .nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

#tatwamasi-header .nav-menu li {
  position: relative;
}

#tatwamasi-header .nav-menu > li > a {
  display: block;
  padding: 0.45rem 0.9rem;
  color: var(--hd-cream);
  font-family: var(--hd-font-head);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}

#tatwamasi-header .nav-menu > li > a:hover,
#tatwamasi-header .nav-menu > li.current-menu-item > a,
#tatwamasi-header .nav-menu > li.current_page_item > a {
  color: var(--hd-gold-light);
}

/* Active underline */
#tatwamasi-header .nav-menu > li.current-menu-item > a::after,
#tatwamasi-header .nav-menu > li.current_page_item > a::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--hd-gold);
  margin-top: 2px;
}

/* ── Dropdown ── */
#tatwamasi-header .nav-menu .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--hd-bg);
  border: 1px solid var(--hd-border);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  min-width: 210px;
  z-index: 999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

#tatwamasi-header .nav-menu li:hover > .sub-menu,
#tatwamasi-header .nav-menu li:focus-within > .sub-menu {
  display: block;
}

#tatwamasi-header .nav-menu .sub-menu li a {
  display: block;
  padding: 0.45rem 1.1rem;
  color: var(--hd-muted);
  font-family: var(--hd-font-body);
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, padding-left 0.15s;
}

#tatwamasi-header .nav-menu .sub-menu li a:hover {
  color: var(--hd-gold-light);
  padding-left: 1.4rem;
}

/* ── CTA Button & Hamburger ── */
#tatwamasi-header .header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

#tatwamasi-header .header-cta-btn {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--hd-gold);
  color: var(--hd-gold);
  font-family: var(--hd-font-head);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 0.22s, color 0.22s;
  white-space: nowrap;
}

#tatwamasi-header .header-cta-btn:hover {
  background: var(--hd-gold);
  color: var(--hd-bg);
}

/* ── Hamburger (hidden on desktop) ── */
#tatwamasi-header .hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

#tatwamasi-header .hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--hd-gold);
  transition: transform 0.25s, opacity 0.25s;
  transform-origin: center;
}

/* Animated X state */
#tatwamasi-header .hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#tatwamasi-header .hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
#tatwamasi-header .hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ══════════════════════════════════════
   MOBILE NAVIGATION DRAWER
   ══════════════════════════════════════ */
#tatwamasi-header .mobile-nav {
  display: none;            /* controlled by JS */
  background: var(--hd-bg);
  border-top: 1px solid var(--hd-border);
  padding: 1.25rem 1.5rem 1.5rem;
}

#tatwamasi-header .mobile-nav.is-open {
  display: block;
}

#tatwamasi-header .mobile-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

#tatwamasi-header .mobile-menu li {
  border-bottom: 1px solid var(--hd-border);
}

#tatwamasi-header .mobile-menu li a {
  display: block;
  padding: 0.75rem 0.25rem;
  color: var(--hd-cream);
  font-family: var(--hd-font-head);
  font-size: 1.1rem;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s, padding-left 0.2s;
}

#tatwamasi-header .mobile-menu li a:hover {
  color: var(--hd-gold-light);
  padding-left: 0.5rem;
}

/* Sub-menu in mobile */
#tatwamasi-header .mobile-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1rem;
}

#tatwamasi-header .mobile-menu .sub-menu li a {
  font-size: 0.95rem;
  color: var(--hd-muted);
  padding: 0.5rem 0.25rem;
}

#tatwamasi-header .mobile-cta-btn {
  display: block;
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  background: transparent;
  border: 1px solid var(--hd-gold);
  color: var(--hd-gold);
  font-family: var(--hd-font-head);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  transition: background 0.22s, color 0.22s;
}

#tatwamasi-header .mobile-cta-btn:hover {
  background: var(--hd-gold);
  color: var(--hd-bg);
}

/* ══════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════ */

/* Hide desktop nav on tablet/mobile, show hamburger */
@media (max-width: 960px) {
  #tatwamasi-header .header-nav {
    display: none;
  }

  #tatwamasi-header .hamburger {
    display: flex;
  }

  #tatwamasi-header .header-cta-btn {
    display: none;   /* shown inside drawer instead */
  }
}

/* Tighten topbar on small screens */
@media (max-width: 640px) {
  #tatwamasi-header .topbar-contact {
    display: none;   /* phone/email visible on wider screens only */
  }

  #tatwamasi-header .topbar-credential {
    font-size: 0.72rem;
    text-align: center;
    width: 100%;
  }

  #tatwamasi-header .header-main {
    height: 60px;
  }

  :root {
    --hd-height: 60px;
  }
}

/* ============================================================
   TATWAMASI ASTROLOGY — FOOTER STYLES
   ============================================================ */
:root {
  --ft-bg:        #1a1107;
  --ft-bg-alt:    #120d05;
  --ft-gold:      #c9922a;
  --ft-gold-light:#e8b84b;
  --ft-cream:     #f5ead8;
  --ft-muted:     #9e8a6e;
  --ft-border:    rgba(201,146,42,0.25);
  --ft-font-head: 'Cormorant Garamond', Georgia, serif;
  --ft-font-body: 'Noto Serif', Georgia, serif;
}

#tatwamasi-footer {
  background-color: var(--ft-bg);
  color: var(--ft-cream);
  font-family: var(--ft-font-body);
  font-size: 0.92rem;
  line-height: 1.7;
}

#tatwamasi-footer .footer-divider {
  background: var(--ft-bg);
  text-align: center;
  border-top: 1px solid var(--ft-border);
  position: relative;
}
#tatwamasi-footer .divider-ornament {
  display: inline-block;
  background: var(--ft-bg);
  color: var(--ft-gold);
  font-family: var(--ft-font-head);
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  padding: 0 1.5rem;
  position: relative;
  top: -0.75rem;
}

#tatwamasi-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3.5rem 2rem 2.5rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 2.5rem 3rem;
  border-bottom: 1px solid var(--ft-border);
}

/* Brand */
#tatwamasi-footer .footer-logo-text {
  font-family: var(--ft-font-head);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ft-gold);
  line-height: 1.2;
  margin: 0 0 0.4rem;
  letter-spacing: 0.04em;
}
#tatwamasi-footer .footer-logo-text span { color: var(--ft-cream); font-weight: 400; }
#tatwamasi-footer .footer-tagline {
  font-family: var(--ft-font-head);
  font-size: 1rem;
  color: var(--ft-gold-light);
  letter-spacing: 0.06em;
  margin: 0 0 0.15rem;
}
#tatwamasi-footer .footer-sub-tagline {
  font-size: 0.8rem;
  color: var(--ft-muted);
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
  line-height: 1.5;
}
#tatwamasi-footer .footer-desc {
  font-size: 0.88rem;
  color: var(--ft-muted);
  margin: 0;
  max-width: 280px;
  line-height: 1.8;
}

/* Headings */
#tatwamasi-footer .footer-heading {
  font-family: var(--ft-font-head);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ft-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ft-border);
}

/* Links */
#tatwamasi-footer .footer-links { list-style: none; margin: 0; padding: 0; }
#tatwamasi-footer .footer-links li { margin-bottom: 0.5rem; }
#tatwamasi-footer .footer-links a {
  color: var(--ft-muted);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s, padding-left 0.2s;
  display: inline-block;
}
#tatwamasi-footer .footer-links a:hover { color: var(--ft-gold-light); padding-left: 4px; }

/* Contact */
#tatwamasi-footer .contact-line { margin: 0 0 0.75rem; font-size: 0.86rem; }
#tatwamasi-footer .contact-label {
  display: block;
  font-size: 0.75rem;
  color: var(--ft-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
#tatwamasi-footer .contact-line a {
  color: var(--ft-cream);
  text-decoration: none;
  transition: color 0.2s;
  word-break: break-word;
}
#tatwamasi-footer .contact-line a:hover { color: var(--ft-gold-light); }

/* CTA */
#tatwamasi-footer .footer-cta-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.65rem 1.4rem;
  background: transparent;
  border: 1px solid var(--ft-gold);
  color: var(--ft-gold);
  font-family: var(--ft-font-head);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
#tatwamasi-footer .footer-cta-btn:hover { background: var(--ft-gold); color: var(--ft-bg); }

/* Bottom bar */
#tatwamasi-footer .footer-bottom {
  background: var(--ft-bg-alt);
  padding: 1.1rem 2rem;
}
#tatwamasi-footer .footer-bottom-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#tatwamasi-footer .footer-copy { font-size: 0.78rem; color: var(--ft-muted); margin: 0; }
#tatwamasi-footer .footer-legal-links {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.78rem;
}
#tatwamasi-footer .footer-legal-links a {
  color: var(--ft-muted);
  text-decoration: none;
  transition: color 0.2s;
}
#tatwamasi-footer .footer-legal-links a:hover { color: var(--ft-gold-light); }
#tatwamasi-footer .footer-legal-links span { color: var(--ft-border); }

/* Footer responsive */
@media (max-width: 960px) {
  #tatwamasi-footer .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  #tatwamasi-footer .footer-brand { grid-column: 1 / -1; }
  #tatwamasi-footer .footer-desc { max-width: 100%; }
}
@media (max-width: 600px) {
  #tatwamasi-footer .footer-inner {
    grid-template-columns: 1fr;
    padding: 2.5rem 1.25rem 2rem;
    gap: 2rem;
  }
  #tatwamasi-footer .footer-brand { text-align: center; }
  #tatwamasi-footer .footer-desc { margin: 0 auto; }
  #tatwamasi-footer .footer-logo-text { font-size: 1.5rem; }
  #tatwamasi-footer .footer-cta-btn { width: 100%; text-align: center; }
  #tatwamasi-footer .footer-bottom-inner { flex-direction: column; text-align: center; }
  #tatwamasi-footer .footer-legal-links { justify-content: center; flex-wrap: wrap; }
}

/* ============================================================
   HEADER SCROLL SHRINK STATE
   ============================================================ */
#tatwamasi-header {
  transition: box-shadow 0.3s ease;
}
#tatwamasi-header.scrolled .header-topbar {
  height: 0;
  overflow: hidden;
  border: none;
  transition: height 0.35s ease;
}
#tatwamasi-header .header-topbar {
  transition: height 0.35s ease;
}
#tatwamasi-header.scrolled .header-main {
  height: 56px;
  transition: height 0.35s ease;
}
#tatwamasi-header .header-main {
  transition: height 0.35s ease;
}
#tatwamasi-header.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}

/* ============================================================
   LENIS — prevent flash of unstyled scroll
   ============================================================ */
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
/* Hide default cursor site-wide (desktop only — JS guards touch) */
body:has(#tw-cursor) * { cursor: none !important; }

/*
  CURSOR ARCHITECTURE
  #tw-cursor is fixed at top:0 left:0.
  GSAP moves .cursor-dot and .cursor-ring independently using x/y transforms.
  Both elements are centered on their own origin via margin offset so
  x/y values directly equal mouse coords — no manual offset arithmetic.
*/
#tw-cursor {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0;
  z-index: 99999;
  transition: opacity 0.3s ease;
}

/* ── Dot ── */
#tw-cursor .cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  margin-top: -4px;   /* half of height — centers on x/y point */
  margin-left: -4px;  /* half of width */
  background: #c9922a;
  border-radius: 50%;
  /* only transition non-transform properties; GSAP owns transform */
  transition: width 0.2s ease, height 0.2s ease,
              margin 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  will-change: transform;
}

/* ── Ring ── */
#tw-cursor .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 40px; height: 40px;
  margin-top: -20px;   /* half of height */
  margin-left: -20px;  /* half of width */
  border: 1.5px solid rgba(201, 146, 42, 0.55);
  border-radius: 50%;
  /* only transition non-transform properties; GSAP owns transform */
  transition: width 0.3s ease, height 0.3s ease,
              margin 0.3s ease,
              border-color 0.3s ease, background 0.3s ease;
  will-change: transform;
}

/* ── Hover: ring expands, dot shrinks ── */
#tw-cursor.is-hovering .cursor-dot {
  width: 4px; height: 4px;
  margin-top: -2px; margin-left: -2px;
  background: #e8b84b;
}
#tw-cursor.is-hovering .cursor-ring {
  width: 56px; height: 56px;
  margin-top: -28px; margin-left: -28px;
  border-color: rgba(232, 184, 75, 0.75);
  background: rgba(201, 146, 42, 0.06);
}

/* ── Click: ring pulses inward ── */
#tw-cursor.is-clicking .cursor-ring {
  width: 28px; height: 28px;
  margin-top: -14px; margin-left: -14px;
  border-color: rgba(201, 146, 42, 0.9);
  transition: width 0.1s ease, height 0.1s ease, margin 0.1s ease;
}

/* ============================================================
   GSAP ANIMATION PREP
   Elements start invisible — GSAP sets opacity: 0 then animates in.
   We use this class as a safety net for browsers where JS fails.
   ============================================================ */
.no-js h1, .no-js h2, .no-js h3,
.no-js p, .no-js li,
.no-js .footer-cta-btn, .no-js .header-cta-btn {
  opacity: 1 !important;
  transform: none !important;
}

/* Lenis classes */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }


  /* ═══════════════════════ MARQUEE ═══════════════════════ */
  .marquee-section {
    background: var(--teak);
    padding: 14px 0;
    overflow: hidden;
  }
  .marquee-track {
    display: flex;
    animation: marquee 35s linear infinite;
    white-space: nowrap;
  }
  .marquee-track span {
    font-family: 'Cormorant SC', serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--hd-gold-light);
    opacity: 0.7;
    padding: 0 40px;
    flex-shrink: 0;
  }
  .marquee-track span.dot {
    color: #f0ad43;
    padding: 0;
    opacity: 1;
    font-size: 14px;
  }
    @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  
  /* ═══ KASAVU DIVIDER ═══ */
.kasavu{
  height:14px;background:var(--teak);
  display:flex;align-items:center;justify-content:center;gap:0;
}
.kasavu span{
  display:block;height:14px;
}
.kasavu span:nth-child(1){flex:1;background:var(--teak)}
.kasavu span:nth-child(2){width:100%;flex:8;background:var(--brass);height:4px;margin:auto 0}
.kasavu span:nth-child(3){flex:1;background:var(--teak)}
.kasavu.cream{background:var(--cream-dark)}
.kasavu.cream span:nth-child(1){background:var(--cream-dark)}
.kasavu.cream span:nth-child(3){background:var(--cream-dark)}