/* =====================================================================
   Chronicle Book Publishers — MOBILE / TABLET RESPONSIVE
   ---------------------------------------------------------------------
   Sari responsive CSS sirf isi file me hai.
   IMPORTANT: Yahan har rule kisi na kisi @media (max-width) ke andar hai,
   is liye DESKTOP (769px se upar) ka koi bhi style change nahi hota.
   Ye file header.php me sabse aakhir me load hoti hai taake baaki
   custom CSS ko override kar sake.
   ===================================================================== */


/* =====================================================================
   <= 999px  —  MOBILE HEADER
   ---------------------------------------------------------------------
   Logo LEFT, right par hamburger. "Get a Quote" button mobile par hidden.
   Hamburger (#mobile-nav) ko theme.js pehle se drawer menu se joda hua hai
   (click -> .drawer-menu ko .active + .visible milta hai), lekin theme CSS
   ".header--default .header__menu-icon{display:none}" se use chhupa rahi thi.
   Yahan use wapas show kiya gaya hai.
   1000px se upar desktop ka logo-center layout jyon ka tyon hai.
   ===================================================================== */
@media(max-width:999px){

  .header__content{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px;
    width:100%;
  }

  /* ---- LEFT: logo ---- */
  .header__content > [data-primary-navigation]{
    order:1;
    flex:1 1 auto;
    min-width:0;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }
  .header__content > .header__sticky-logo-wrapper{ display:none !important; }

  /* desktop nav links, no-js menu aur contact/quote list mobile par hidden */
  [data-primary-navigation] > .header__nav,
  [data-primary-navigation] > .no-js-menu,
  [data-primary-navigation] > .header__icon-wrapper{ display:none !important; }

  [data-primary-navigation] .header__logo-wrapper{
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
    flex-grow:0 !important;
  }
  [data-primary-navigation] .header__logo-wrapper img{ max-height:38px; width:auto !important; }

  /* ---- RIGHT: hamburger ---- */
  .header--default .header__menu-icon,
  .header__content > .header__menu-icon{
    order:2;
    display:flex !important;
    visibility:visible !important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:44px;
    height:44px;
    margin:0 !important;
    padding:0;
    background:none;
    border:none;
    color:#14232c;
    cursor:pointer;
  }
  .header__content > .header__menu-icon .icon,
  .header__content > .header__menu-icon svg{ display:block; width:26px; height:26px; }

  /* "Get a Quote" button mobile header se hataya gaya */
  .header__quote-btn{ display:none !important; }

  /* ---- Drawer menu RIGHT se open ho (theme default left tha) ---- */
  .drawer-menu__panel{
    left:auto !important;
    right:0 !important;
    transform:translateX(100%) !important;
  }
  .drawer-menu.visible .drawer-menu__panel{ transform:translateX(0) !important; }
}

@media(max-width:560px){
  .header__content{ padding-left:16px !important; padding-right:16px !important; }
  [data-primary-navigation] .header__logo-wrapper img{ max-height:32px; }
}


/* =====================================================================
   <= 820px  —  Home ka "Our Process" section
   820px se neeche process-js khud .is-static class laga deta hai.
   Static mode me box ki fixed 440px height thi, jis se lamba text
   box se bahar nikal jata tha. Ab height auto hai.
   ===================================================================== */
@media(max-width:820px){
  .proc.is-static .proc-box{
    width:100%;
    max-width:430px;
    height:auto;
    min-height:0;
    padding:22px 20px;
  }
  .proc.is-static .proc__stage{ padding:0 16px; }
}


/* =====================================================================
   <= 768px  —  Mobile + chhota tablet
   ===================================================================== */
@media(max-width:768px){

  /* ---- Base: media aur tables layout na toren ---- */
  html{ -webkit-text-size-adjust:100%; }
  img, video, iframe{ max-width:100%; }
  table{ max-width:100%; }

  /* ---- Forms: 16px se chhota font ho to iOS focus par zoom kar deta hai ---- */
  .form-sec__form input, .form-sec__form textarea,
  .qm-fld input, .qm-fld textarea,
  .gwx-form input, .gwx-form textarea,
  .pp-form input, .pp-form textarea,
  .contact-form input, .contact-form textarea, .contact-form select{ font-size:16px !important; }
  .contact-form input, .contact-form textarea{ width:100%; box-sizing:border-box; }

  /* ---- Buttons: thumb-friendly tap targets ---- */
  .form-sec__btn, .gwx-form__btn, .pp-form__btn, .quote-modal__submit{ width:100%; min-height:48px; }
  .cta__btn, .gwx-cta__btn, .svc-btn, .pp-quick__btn, .price-card__btn,
  .footer__contact-btn, .header__quote-btn, .faq-item__q{ min-height:46px; }

  /* ---- Home: process heading ---- */
  .proc__head{ padding:36px 16px 4px; }
  .proc__lead{ font-size:15.5px; }

  /* ---- Home: book carousels ---- */
  .local-rec__track{ gap:18px; padding:30px 12px 36px; }
  .local-rec__card{ flex:0 0 min(280px,74vw); }   /* agla card thoda jhalakta hai = scroll hint */
  .local-rec__arrow{ width:32px; height:32px; font-size:19px; }
  .local-rec__arrow--prev{ left:-4px; }
  .local-rec__arrow--next{ right:-4px; }
  .local-rec__explore{ margin-bottom:26px; }

  /* ---- Services section ---- */
  .svc{ padding:56px 16px 62px; }
  .svc__lead{ margin-bottom:30px; }
  .svc-card{ padding:22px; gap:18px; }
  .svc-card__img, .svc-card--full .svc-card__img{ min-height:180px; }

  /* ---- Pricing ---- */
  .pricing{ padding:56px 16px 66px; }
  .pricing__lead{ margin-bottom:34px; }
  .price-card__price .amt{ font-size:30px; }
  .price-card__price .amt--sm{ font-size:24px; }

  /* ---- Testimonials ---- */
  .tst{ padding:56px 16px; }
  .tst__lead{ margin-bottom:32px; }
  .tst-card{ padding:26px 22px; }
  .tst2{ padding:48px 14px; }

  /* ---- FAQ ---- */
  .faq{ padding:56px 16px; }
  .faq__title{ margin-bottom:30px; }
  .faq-item__q{ font-size:15.5px; padding:16px 18px; gap:12px; }
  .faq-item__a p{ padding:2px 18px 18px; font-size:14.5px; }

  /* ---- CTA band ---- */
  .cta{ padding:56px 16px; }
  .cta__text{ font-size:16px; }

  /* ---- Get in Touch (shared form section) ---- */
  .form-sec{ padding:56px 16px 64px; }
  .form-sec__head{ margin-bottom:30px; }
  .form-sec__sub{ font-size:13px; letter-spacing:.12em; }
  .info-row{ margin-bottom:24px; }

  /* ---- Service detail pages (gwx) ---- */
  .gwx-wrap{ padding:0 18px; }
  .gwx h2{ font-size:26px; }
  .gwx h3{ font-size:19px; }
  .gwx-lead{ font-size:16.5px !important; }
  .gwx-contact{ padding:52px 0 60px; }
  .gwx-contact__title{ font-size:28px; margin-bottom:32px; }
  .gwx-form{ padding:24px 20px; }
  .gwx-cta__btn{ width:100%; justify-content:center; }

  /* ---- Process page (pp) ---- */
  .pp .pp-wrap{ padding:0 18px; }
  .pp-stages{ padding:52px 0 62px; }
  .pp-gantt{ padding:46px 0 48px; }
  .pp-gantt__title{ font-size:clamp(30px,6.4vw,54px); }
  .pp-gantt__lead{ font-size:15px; }
  .pp-gantt__card{ padding:12px; }
  .pp-step{ padding:38px 0; }
  .pp-step__img{ height:200px; }
  .pp-quick{ padding:48px 0; }
  .pp-quick__card{ padding:26px 22px; }
  .pp-contact{ padding:52px 0 60px; }
  .pp-form{ padding:24px 20px; }

  /* ---- Legal pages (privacy / terms) ---- */
  .legal-wrap{ padding:6px 16px 56px; }
  .legal-panel{ padding:32px 24px; }
  .legal-panel h1{ font-size:25px; }
  .legal-panel h2{ font-size:20px; }

  /* ---- Thank you page ---- */
  .ty-ic{ width:78px; height:78px; margin-bottom:22px; }
  .ty-ic svg{ width:38px; height:38px; }

  /* ---- Footer: columns stack ho kar poori width le lein, sab left-aligned.
          Is se "Contact info" (jo Services column ke andar hai) right se
          hat kar footer ke left edge par aa jata hai. ---- */
  .footer__cols{ display:block !important; }
  .footer__col-text,
  .footer__col-list{
    width:100% !important;
    text-align:left !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .footer__col-list h3,
  .footer__col-list ul,
  .footer__col-list li,
  .footer__col-list a{ text-align:left !important; }
  .footer__contact-head{ margin-top:28px !important; }
}


/* =====================================================================
   <= 560px  —  Bade phones
   ===================================================================== */
@media(max-width:560px){

  /* Process page: staircase rows ab wrap hoti hain (pehle overflow hota tha) */
  .pp-stages__title{ font-size:30px; }
  .stage-row{ flex-wrap:wrap; gap:12px; padding:16px 0; }
  .stage-row__label{ white-space:normal; font-size:12px; }
  .stage-row__right{ width:100%; justify-content:space-between; gap:14px; }
  .stage-row__name{ white-space:normal; font-size:15px; line-height:1.3; }
  .pp-gantt__title{ font-size:30px; }
  .pp-h2{ font-size:25px !important; }

  /* Home: process boxes */
  .proc__title{ font-size:26px !important; }
  .proc-box__title{ font-size:19px; }

  /* Home: book cards */
  .local-rec__card{ flex:0 0 min(240px,78vw); }
  .bookcard{ border-radius:22px; padding:12px 12px 16px; }
  .bookcard__name{ font-size:16px; }

  /* Services / pricing */
  .svc-card{ padding:18px; }
  .svc-card__title{ font-size:20px; }
  .price-card{ padding:26px 20px 24px; }

  /* Forms + testimonials */
  .form-sec__card{ padding:26px 18px; }
  .form-sec__title{ font-size:27px !important; }
  .tst2__title{ font-size:26px !important; }

  /* Service detail pages */
  .gwx-block{ padding:24px 18px; }
  .gwx-steps li{ padding-left:52px; }
  .gwx-toc a{ font-size:13px; }

  /* Legal + CTA */
  .legal-panel{ padding:26px 18px; }
  .cta__btn{ width:100%; max-width:340px; padding:16px 20px; }
}


/* =====================================================================
   <= 400px  —  Chhote phones (iPhone SE etc.)
   ===================================================================== */
@media(max-width:400px){
  .quote-modal{ padding:10px; }
  .quote-modal__box{ border-radius:16px; }
  .quote-modal__aside-in{ padding:22px 18px 18px; }
  .quote-modal__main{ padding:22px 18px 20px; }
  .quote-modal__title{ font-size:21px; }
  .quote-modal__planbox strong{ font-size:18px; }
  .local-rec__title{ font-size:23px !important; }
  .ty-title{ font-size:32px; }
}