/* ============================================================
   Grahapala Darshana - Shared Responsive Layer
   Keeps desktop styles intact and adds mobile/tablet behavior.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{width:100%;max-width:100%;overflow-x:hidden;scroll-behavior:smooth}
body{width:100%;max-width:100%;min-width:0;overflow-x:hidden}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
button,input,select,textarea{max-width:100%;font:inherit}
table{max-width:100%}
pre{max-width:100%;overflow:auto}
.container{width:min(1200px,calc(100% - 32px));margin-inline:auto}
.section,.section-wrap,.page-section{overflow:clip}

/* Standard public navigation */
.site-nav{width:100%;position:relative;z-index:1000}
.site-nav .container{min-width:0;display:flex;align-items:center;gap:18px}
.site-nav .brand{flex:0 0 auto;min-width:0}
.site-nav .logo-full{width:min(200px,32vw);height:auto;object-fit:contain}
.site-nav .nav-links{min-width:0}
.mobile-menu-toggle{display:none;border:0;background:transparent;cursor:pointer;width:44px;height:44px;padding:9px;border-radius:10px;align-items:center;justify-content:center;flex-direction:column;gap:5px;flex:0 0 auto}
.mobile-menu-toggle span{display:block;width:24px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.mobile-menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle.is-open span:nth-child(2){opacity:0}
.mobile-menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1100px){
  .site-nav .nav-links{gap:16px}
  .site-nav .logo-full{width:165px}
}
@media (max-width:960px){
  body.menu-open{overflow:hidden}
  .site-nav .container{min-height:70px}
  .site-nav .logo-full{width:160px}
  .mobile-menu-toggle{display:inline-flex;margin-left:auto}
  .site-nav .nav-links{
    position:fixed!important;
    top:70px!important;
    right:0!important;
    width:min(340px,88vw)!important;
    height:calc(100dvh - 70px)!important;
    max-height:calc(100dvh - 70px)!important;
    margin:0!important;
    padding:18px 16px 28px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:4px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:var(--nav-bg,#fff)!important;
    box-shadow:-14px 0 35px rgba(0,0,0,.16)!important;
    transform:translateX(105%)!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:transform .24s ease,opacity .2s ease,visibility .2s ease!important;
    z-index:1100!important;
  }
  .site-nav .nav-links.mobile-open{
    transform:translateX(0)!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  .site-nav .nav-links>li{width:100%!important;flex:0 0 auto!important}
  .site-nav .nav-links>li>a,
  .site-nav .nav-links>li>.nav-link,
  .site-nav .nav-links>li>span{
    min-height:46px;
    width:100%;
    display:flex;
    align-items:center;
    padding:11px 12px;
    border-radius:10px;
  }
  .site-nav .nav-links .dropdown>a{justify-content:space-between}
  .site-nav .dropdown .dropdown-menu{
    position:static!important;
    display:none;
    width:100%!important;
    min-width:0!important;
    margin:2px 0 6px!important;
    padding:4px 0 4px 10px!important;
    box-shadow:none!important;
    border-radius:10px!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .site-nav .dropdown.mobile-open .dropdown-menu{display:block!important}
  .site-nav .dropdown .dropdown-menu a{min-height:42px;display:flex;align-items:center;padding:9px 12px}
  .site-nav .lang-switch,.site-nav .lang-pill{display:none!important}
  .site-nav .profile-dropdown,.site-nav .acct-dropdown{display:none!important}
  .site-nav .nav-actions{margin-left:auto;min-width:0}
  .site-nav .nav-actions .nav-burger{display:inline-flex}
  body.menu-open::after{
    content:"";position:fixed;inset:70px 0 0 0;background:rgba(0,0,0,.32);
    z-index:1050;pointer-events:none
  }

  .hero,.hero-section,.hero-shell{min-height:0!important}
  .hero-grid,.about-grid,.contact-grid,.consult-grid,.kundali-grid,.grid-2,.grid-3,.grid-4,
  .services-grid,.stats-grid,.stats-strip,.form-row,.feature-grid,.cards-grid,.content-grid{
    grid-template-columns:1fr!important;
  }
  .hero-grid{gap:28px!important}
  .hero-content,.hero-copy{text-align:center}
  .hero-ctas,.hero-actions,.cta-row{justify-content:center;flex-wrap:wrap}
  .section{padding-block:56px!important}
  .section-head{gap:12px}
  .section-title{font-size:clamp(28px,6vw,42px);line-height:1.12}
  .section-subtitle,.text-muted{max-width:100%}
  .card,.service-card,.blog-card,.why-card,.consult-card,.feat-card,.astro-card,.concern-card,
  .kundali-info-card,.panel,.form-card{min-width:0}
  .card-body,.service-card,.blog-card,.why-card,.consult-card{overflow-wrap:anywhere}
  .table-wrap,.table-responsive,.responsive-table{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap table,.table-responsive table,.responsive-table table{min-width:620px}
  .modal,.dialog,.popup{max-width:calc(100vw - 24px)!important}
  .modal-body,.dialog-body{max-height:75dvh;overflow:auto}
  .chatbot,.chat-widget{max-width:calc(100vw - 24px)!important}
}

@media (max-width:720px){
  .container{width:min(100% - 24px,680px)}
  .site-nav .container{gap:8px}
  .site-nav .logo-full{width:145px}
  .site-nav .nav-actions{gap:6px}
  .btn,.primary-btn,.secondary-btn,.btn-gold,.btn-outline,.btn-ghost{min-height:44px}
  .hero h1,.hero-title{font-size:clamp(30px,9vw,48px)!important}
  .hero p,.hero-subtitle{font-size:15px!important}
  .hero-ctas,.hero-actions,.actions,.button-row{display:flex;flex-direction:column;align-items:stretch;width:100%}
  .hero-ctas>* ,.hero-actions>* ,.actions>* ,.button-row>*{width:100%;max-width:none}
  .section{padding-block:46px!important}
  .section-title{font-size:clamp(26px,7vw,36px)}
  .section-head{flex-direction:column;align-items:flex-start}
  .form-field,.field,.gd-form-field,.sel-field{min-width:0;width:100%}
  input,select,textarea{width:100%;min-height:44px}
  textarea{min-height:120px}
  .form-row{gap:14px!important}
  .profile-grid,.profile-layout,.dashboard-grid,.booking-grid{grid-template-columns:1fr!important}
  .booking-detail{grid-template-columns:1fr!important}
  .booking-detail-icon{margin-bottom:4px}
  .stats-grid,.stats-strip{grid-template-columns:1fr 1fr!important}
  .stat-card,.stat-item{min-width:0}
  .zodiac-grid,.zodiac-list{grid-template-columns:repeat(3,1fr)!important}
  .zodiac-result-card{min-width:0}
  .kundali-wheel,.chart-wheel{width:min(90vw,420px)!important;height:auto!important;aspect-ratio:1}
  .kundali-section{padding:18px!important}
  .panel-header{flex-wrap:wrap;gap:10px}
  .panel-header>*{max-width:100%}
  .profile-detail{grid-template-columns:42px minmax(0,1fr)!important}
  .contact-info,.contact-form,.map-placeholder{width:100%!important;min-width:0}
  .footer-grid{grid-template-columns:1fr!important}
  footer .container{gap:28px}
}

@media (max-width:480px){
  .container{width:calc(100% - 20px)}
  .site-nav .container{min-height:64px}
  .site-nav .logo-full{width:132px}
  .site-nav .nav-links{top:64px!important;height:calc(100dvh - 64px)!important;max-height:calc(100dvh - 64px)!important}
  body.menu-open::after{inset:64px 0 0 0}
  .mobile-menu-toggle{width:42px;height:42px}
  .section{padding-block:38px!important}
  .stats-grid,.stats-strip{grid-template-columns:1fr!important}
  .zodiac-grid,.zodiac-list{grid-template-columns:repeat(2,1fr)!important}
  .blog-card img,.service-card img{max-height:220px;object-fit:cover}
  .faq-q{gap:8px;padding:14px!important}
  .faq-a{padding:0 14px 14px!important}
  .toast,.notification,.alert{left:10px!important;right:10px!important;width:auto!important}
}

@media (max-width:960px) and (orientation:landscape){
  .site-nav .nav-links{width:min(360px,70vw)!important}
  .section{padding-block:36px!important}
}

/* Prevent common fixed/absolute elements from creating horizontal scroll */
.floating-logout,.floating-action,.whatsapp-float,.chatbot-toggle{max-width:calc(100vw - 20px)}
.hero img,.about img,.service-card img,.blog-card img,.consult-card img{object-fit:contain}


/* ============================================================
   MOBILE NAVIGATION
   ============================================================ */

.mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 8px;
    border: 1px solid rgba(16, 43, 82, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    cursor: pointer;
    z-index: 1001;
}

.mobile-menu-toggle span {
    display: block;
    width: 23px;
    height: 2px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        #102B52,
        #D79A24
    );
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

/* Hamburger → X */

.mobile-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Prevent background scrolling */

html.mobile-nav-active,
body.menu-open {
    overflow: hidden;
}

/* ============================================================
   MOBILE NAVBAR
   ============================================================ */

@media (max-width: 960px) {

    .site-nav,
    .site-header {
        position: sticky;
        top: 0;
        z-index: 5000;
    }

    .site-nav .container,
    .site-nav .nav-wrap,
    .site-header .container,
    .site-header .nav-wrap {
        min-height: 68px;
        height: 68px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .site-nav .logo-full {
        width: 165px;
        max-width: calc(100vw - 90px);
        height: auto;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* --------------------------------------------------------
       Mobile drawer
       -------------------------------------------------------- */

    .site-nav .nav-links {
        position: fixed;

        top: 68px;
        right: 0;
        bottom: 0;

        width: min(340px, 88vw);

        height: calc(100dvh - 68px);

        margin: 0;
        padding: 22px 18px 40px;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        gap: 4px;

        background:
            linear-gradient(
                160deg,
                rgba(255, 255, 255, 0.98),
                rgba(255, 248, 239, 0.98)
            );

        border-left: 1px solid rgba(215, 154, 36, 0.18);

        box-shadow:
            -12px 0 40px rgba(16, 43, 82, 0.14);

        overflow-y: auto;
        overflow-x: hidden;

        transform: translateX(105%);

        visibility: hidden;
        opacity: 0;

        pointer-events: none;

        transition:
            transform 0.35s ease,
            opacity 0.25s ease,
            visibility 0.35s ease;

        z-index: 5001;
    }

    .site-nav .nav-links.mobile-open {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    /* --------------------------------------------------------
       Mobile navigation links
       -------------------------------------------------------- */

    .site-nav .nav-links > li {
        width: 100%;
    }

    .site-nav .nav-links > li > a {
        width: 100%;
        min-height: 50px;

        display: flex;
        align-items: center;

        padding: 13px 14px;

        border-radius: 12px;

        font-size: 15px;
        font-weight: 500;

        color: #102B52;

        transform: none;
    }

    .site-nav .nav-links > li > a:hover,
    .site-nav .nav-links > li > a:focus {
        background: rgba(215, 154, 36, 0.09);
        color: #A86A0D;
        transform: none;
    }

    .site-nav .nav-links > li > a::after {
        display: none;
    }

    /* ========================================================
       MOBILE TOOLS DROPDOWN
       ======================================================== */

    .site-nav .dropdown {
        width: 100%;
    }

    .site-nav .dropdown > a {
        justify-content: space-between;
    }

    .site-nav .dropdown > a i {
        transition: transform 0.3s ease;
    }

    .site-nav .dropdown.mobile-open > a i {
        transform: rotate(180deg);
    }

    .site-nav .dropdown-menu,
    .site-nav .mega-menu {
        position: static;

        width: 100%;
        min-width: 0;

        margin: 4px 0 8px;

        padding: 6px;

        display: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        border-radius: 14px;

        background: rgba(16, 43, 82, 0.045);

        border: 1px solid rgba(16, 43, 82, 0.08);

        box-shadow: none;
    }

    .site-nav .dropdown.mobile-open .dropdown-menu,
    .site-nav .dropdown.mobile-open .mega-menu {
        display: block;
    }

    .site-nav .dropdown-menu li a,
    .site-nav .mega-menu a {
        display: flex;
        align-items: center;

        min-height: 44px;

        padding: 10px 12px;

        border-radius: 9px;

        font-size: 14px;

        color: #35506F;
    }

    .site-nav .dropdown-menu li a:hover,
    .site-nav .mega-menu a:hover {
        background: rgba(215, 154, 36, 0.10);
        color: #A86A0D;
    }

    /* Mega menu becomes one column */

    .site-nav .mega-menu {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .site-nav .menu-column {
        width: 100%;
    }

    .site-nav .menu-column h4 {
        padding: 8px 10px;
        margin-bottom: 2px;
    }

    /* Hide desktop-only actions inside mobile header */

    .site-nav .nav-right,
    .site-nav .nav-actions {
        display: none;
    }

}

/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 480px) {

    .site-nav .container,
    .site-nav .nav-wrap,
    .site-header .container,
    .site-header .nav-wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    .site-nav .logo-full {
        width: 145px;
    }

    .mobile-menu-toggle {
        width: 42px;
        height: 42px;
    }

    .site-nav .nav-links {
        width: 92vw;
        padding: 18px 14px 30px;
    }

}