/**
Theme Name: Handicraft Theme
Author: Jamshaid Ali
Author URI: https://Handicraftm.com
Description: This Theme is Custom Built by Handicraft Marketing
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: handicraft-theme
Template: astra
*/

/* ==========================================================================
   Khan & Co - custom responsive header (header.php) + Elementor footer wrapper
   (footer.php renders the original Elementor footer, post 219).
   ========================================================================== */

:root{
  --kc-gold:#EB9601;
  --kc-gold-dark:#c97e00;
  --kc-ink:#1f2532;
}

/* Stop wide/overflowing page content from stretching the layout on mobile */
html, body{ max-width:100%; overflow-x:hidden; }
@media (max-width:781px){
  /* stack Elementor section columns and keep media inside the viewport */
  .site-content .elementor-section > .elementor-container{ flex-wrap:wrap !important; }
  .site-content .elementor-section .elementor-column,
  .site-content .elementor-column.elementor-inner-column{ width:100% !important; }
  .site-content .elementor-widget-image img,
  .site-content .elementor img{ max-width:100% !important; height:auto !important; }
  .site-content .elementor-widget-container{ overflow-wrap:break-word; }
}

/* ---------- Header shell ---------- */
.kc-header{
  background:#fff;
  border-bottom:1px solid #ececec;
  position:relative;
  z-index:9999;
  width:100%;
}
.kc-header-bar{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:12px 24px;
  display:flex;
  align-items:center;
  gap:24px;
  box-sizing:border-box;
}
.kc-header-logo{ flex:0 0 auto; line-height:0; }
.kc-header-logo a{ display:inline-block; }
.kc-logo-img{ max-height:56px; width:auto; height:auto; display:block; }

/* ---------- Desktop nav ---------- */
.kc-nav{ flex:1 1 auto; }
.kc-menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:2px;
}
.kc-menu li{ position:relative; }
.kc-menu a{
  display:block;
  font-family:"Poppins", var(--ast-body-font-family, sans-serif);
  font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.01em;
  color:#000; text-decoration:none;
  padding:10px 12px;
  transition:color .15s ease;
}
.kc-menu a:hover,
.kc-menu li.current-menu-item > a,
.kc-menu li.current_page_item > a,
.kc-menu li.current-menu-ancestor > a{ color:var(--kc-gold); }

/* Services dropdown */
.kc-menu ul.sub-menu{
  list-style:none; margin:0; padding:0;
  position:absolute; top:100%; left:0; min-width:250px;
  background:#000; border-top:3px solid var(--kc-gold);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:1000;
}
.kc-menu li:hover > ul.sub-menu,
.kc-menu li:focus-within > ul.sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.kc-menu ul.sub-menu li:not(:last-child){ border-bottom:1px solid #2D374A; }
.kc-menu ul.sub-menu a{
  text-transform:none; font-weight:400; font-size:14px; color:#EB9601; padding:10px 16px; white-space:nowrap;
}
.kc-menu ul.sub-menu a:hover{ color:#fff; background:#111; }

/* WhatsApp CTA */
.kc-wa-btn{
  flex:0 0 auto;
  display:inline-block;
  background:var(--kc-gold); color:#fff !important;
  font-family:"Poppins", sans-serif; font-size:13px; font-weight:600;
  text-decoration:none; padding:11px 26px; border-radius:40px;
  transition:background .15s ease;
}
.kc-wa-btn:hover{ background:var(--kc-gold-dark); }
.kc-wa-inline{ display:none; }   /* shown only inside the mobile panel */

/* ---------- Burger (hidden on desktop) ---------- */
.kc-burger{
  display:none;
  flex:0 0 auto;
  width:44px; height:44px; padding:0; margin:0;
  -webkit-appearance:none; appearance:none;
  background:#fff; border:1px solid #e2e2e2; border-radius:8px;
  position:relative; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.kc-burger:focus{ outline:2px solid var(--kc-gold); outline-offset:2px; }
.kc-burger span{
  position:absolute; left:11px; width:22px; height:2px; background:var(--kc-ink); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.kc-burger span:nth-child(1){ top:15px; }
.kc-burger span:nth-child(2){ top:21px; }
.kc-burger span:nth-child(3){ top:27px; }
.kc-burger[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); }
.kc-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.kc-burger[aria-expanded="true"] span:nth-child(3){ top:21px; transform:rotate(-45deg); }

.kc-nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9998;
  opacity:0; transition:opacity .25s ease;
}
.kc-nav-overlay.kc-show{ opacity:1; }

/* ---------- Mobile ---------- */
@media (max-width:1024px){
  .kc-header-bar{ justify-content:space-between; }
  .kc-wa-bar{ display:none; }              /* hidden in the bar on mobile (matches original) */
  .kc-burger{ display:block; }

  .kc-nav{
    position:fixed; top:0; right:-320px; width:300px; max-width:85vw; height:100%;
    background:#0f1319; z-index:9999; overflow-y:auto;
    transition:right .3s ease;
    padding:76px 0 40px;
  }
  .kc-nav.kc-open{ right:0; }

  .kc-menu{ flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; }

  .kc-wa-inline{
    display:inline-block; margin:20px 24px 0; text-align:center;
  }
  .kc-menu li{ width:100%; border-bottom:1px solid rgba(255,255,255,.08); }
  .kc-menu a{ color:#fff; padding:14px 24px; font-size:13.5px; }
  .kc-menu a:hover,
  .kc-menu li.current-menu-item > a{ color:var(--kc-gold); }

  .kc-menu ul.sub-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; background:#070a0e; border-top:0;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .kc-menu li.kc-sub-open > ul.sub-menu{ max-height:800px; }
  .kc-menu ul.sub-menu a{ padding:12px 36px; font-size:13px; }

  /* tap a parent to expand its submenu */
  .kc-menu li.menu-item-has-children > a{ position:relative; }
  .kc-menu li.menu-item-has-children > a::after{
    content:"\203A"; position:absolute; right:24px; top:50%; transform:translateY(-50%) rotate(90deg);
    font-size:18px; transition:transform .2s ease;
  }
  .kc-menu li.menu-item-has-children.kc-sub-open > a::after{ transform:translateY(-50%) rotate(-90deg); }
}

@media (max-width:560px){
  .kc-header-bar{ padding:10px 16px; gap:12px; }
  .kc-logo-img{ max-height:44px; }
  .kc-wa-btn{ padding:9px 18px; font-size:12px; }
}

/* ---------- Footer "back to top" ---------- */
/* Hide Astra's own scroll-to-top - this theme has its own gold one below */
#ast-scroll-top{ display:none !important; }

.kc-tb-footer-gotop{
  position:fixed; right:20px; bottom:20px; z-index:900;
  -webkit-appearance:none; appearance:none;
  display:flex !important; align-items:center; justify-content:center;
  flex:0 0 auto;
  width:44px !important; height:44px !important; min-width:44px; padding:0 !important;
  background:var(--kc-gold); border:0; border-radius:50%;
  color:#fff; cursor:pointer; box-shadow:0 6px 16px -6px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease, transform .18s ease;
}
.kc-tb-footer-gotop.kc-visible{ opacity:1; visibility:visible; }
.kc-tb-footer-gotop:hover{ transform:translateY(-2px); background:var(--kc-gold-dark); }
.kc-tb-footer-gotop svg{ width:18px !important; height:18px !important; display:block; }
@media (max-width:560px){
  .kc-tb-footer-gotop{ right:14px; bottom:14px; width:40px !important; height:40px !important; }
}

@media (max-width:767px){ body{ overflow-x:hidden; } }

/* ==========================================================================
   Responsiveness fixes - gaps left by the Finance-theme -> Astra migration.
   The old theme shipped its own Bootstrap grid + responsive rules that the
   Elementor content still leans on; these re-supply sane mobile behaviour.
   ========================================================================== */
@media (max-width:880px){

  /* --- Elementor columns: make them genuinely stack, no leftover float/
         negative-margin overlap (fixes e.g. the About "Overview" heading
         sitting on top of its paragraph) --- */
  .site-content .elementor-column,
  .site-content .elementor-column.elementor-inner-column,
  .site-content .elementor-col-10, .site-content .elementor-col-20,
  .site-content .elementor-col-25, .site-content .elementor-col-33,
  .site-content .elementor-col-40, .site-content .elementor-col-50,
  .site-content .elementor-col-60, .site-content .elementor-col-66,
  .site-content .elementor-col-75, .site-content .elementor-col-80{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    clear:both;
  }
  .site-content .elementor-widget-wrap{ align-content:flex-start; }
  .site-content .elementor-widget:not(:last-child){ margin-bottom:0; }
  /* neutralise desktop negative margins that collapse elements on top of
     each other once columns stack */
  .site-content .elementor-widget[class*="elementor-element-"]{ position:relative; }
  .site-content .elementor-widget-heading .elementor-heading-title{ margin-top:0; }

  /* --- Bootstrap grid leftovers inside text-editor widgets --- */
  .site-content [class*="col-lg-"],
  .site-content [class*="col-md-"],
  .site-content [class*="col-sm-"]{
    width:100% !important; float:none !important; display:block !important; padding:0 !important;
  }

  /* --- Icon / info boxes: centre icon + text together, trim the big gaps
         that came from desktop equal-height rows --- */
  .site-content .elementor-widget-icon-box .elementor-icon-box-wrapper,
  .site-content .elementor-widget-image-box .elementor-image-box-wrapper,
  .site-content .eael-infobox{
    text-align:center !important;
  }
  .site-content .elementor-widget-icon-box .elementor-icon-box-icon,
  .site-content .elementor-widget-image-box .elementor-image-box-img{
    margin:0 auto 12px !important; float:none !important;
  }
  .site-content .elementor-position-left .elementor-icon-box-wrapper,
  .site-content .elementor-position-right .elementor-icon-box-wrapper{
    display:block !important;
  }

  /* --- Cap runaway section padding on small screens --- */
  .site-content .elementor-section.elementor-section-height-min-height,
  .site-content .elementor-section[data-settings*="min_height"]{ min-height:0 !important; }
  .site-content .elementor-top-section > .elementor-container{ padding-top:0; padding-bottom:0; }

  /* --- Wide tables scroll instead of blowing out the layout --- */
  .site-content .elementor-widget-text-editor table,
  .site-content .elementor-widget-shortcode table{
    display:block; width:100% !important; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;
  }

  /* --- Minimum readable body text --- */
  .site-content p, .site-content li, .site-content span, .site-content a{ }
}

/* --- Themesflat Tabs (tftabs): the Elementor design hard-codes a 9px tab
       title on mobile - unreadable. Restore a sensible size + tidy layout. --- */
@media (max-width:767px){
  .site-content .tf-tabs.vertical,
  .site-content .tf-tabs{ display:block !important; }
  .site-content .tf-tabs .tf-tabnav{ width:100% !important; }
  .site-content .tf-tabs .tf-tabnav ul{ display:block !important; }
  .site-content .tf-tabs .tf-tabnav ul > li{
    display:block !important; width:100% !important; text-align:left !important;
    padding:12px 16px !important; margin:0 0 4px 0 !important;
  }
  .site-content .tf-tabs .tf-tabnav ul > li .tab-title-text{
    font-size:14px !important; line-height:1.35 !important; white-space:normal !important; text-align:left !important;
  }
  .site-content .tf-tabs .tf-tabnav ul > li .wrap-icon{ display:none !important; }
  .site-content .tf-tabs.vertical.show-triger-yes .tf-tabnav > ul > li.active:after,
  .site-content .tf-tabs.vertical.show-triger-yes .tf-tabnav > ul > li.set-active-tab:after{ display:none !important; }
  .site-content .tf-tabs .tf-tabcontent{ width:100% !important; padding:14px 4px 0 !important; }
  .site-content .tf-tabs .tf-tabcontent .tf-tabcontent-inner li{ font-size:15px !important; }
}