/********************************************
  WhatsApp pill - variables (tweak here)
********************************************/
:root{
  /* icon sizes */
  --wa-ico-desktop: 28px;
  --wa-ico-mobile: 32px;

  /* spacing */
  --wa-left-desktop: .6rem;
  --wa-left-mobile:  .8rem;
  --wa-gap: .35rem;

  /* colours */
  --wa-green: #128C7E;
  --wa-green-hover: #0e6f67;

  /* icon sources (SVG preferred, PNG fallback) */
  --wa-icon-svg: url("https://havanttechhelp.co.uk/wp-content/uploads/2025/09/whatsapp-small.svg");
  --wa-icon-png: url("https://havanttechhelp.co.uk/wp-content/uploads/2025/09/whatsapp-small.png");
}

/********************************************
  BASE WhatsApp pill
  Applies to: explicit class, menu-item class/id, or wa.me href
********************************************/
a.ct-menu-link.is-whatsapp,
.menu-item-1069 > a.ct-menu-link,
#menu-item-1069 > a.ct-menu-link,
a.ct-menu-link[href*="wa.me/447543450130"]{
  display:inline-flex !important;
  align-items:center;
  height:auto !important;
  line-height:1 !important;
  border-radius:9999px !important;
  color:#fff !important;
  font-weight:600;
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;

  /* filled pill */
  background-color:var(--wa-green) !important;

  /* two-layer icon: SVG first, PNG fallback */
  background-image: var(--wa-icon-svg), var(--wa-icon-png);
  background-repeat:no-repeat,no-repeat;

  /* default to desktop metrics; contexts below can override */
  background-position: var(--wa-left-desktop) center, var(--wa-left-desktop) center;
  background-size: var(--wa-ico-desktop) var(--wa-ico-desktop), var(--wa-ico-desktop) var(--wa-ico-desktop) !important;
  padding:.55rem .95rem .55rem calc(var(--wa-left-desktop) + var(--wa-ico-desktop) + var(--wa-gap)) !important;

  box-shadow:0 1px 0 rgba(0,0,0,.1) inset, 0 1px .5rem rgba(0,0,0,.06);
  transition:background-color .15s ease, transform .05s ease;
}

/* interactions */
a.ct-menu-link.is-whatsapp:hover,
.menu-item-1069 > a.ct-menu-link:hover,
#menu-item-1069 > a.ct-menu-link:hover,
a.ct-menu-link[href*="wa.me/447543450130"]:hover{
  background-color:var(--wa-green-hover) !important;
}
a.ct-menu-link.is-whatsapp:active,
.menu-item-1069 > a.ct-menu-link:active,
#menu-item-1069 > a.ct-menu-link:active,
a.ct-menu-link[href*="wa.me/447543450130"]:active{
  transform:translateY(1px);
}
a.ct-menu-link.is-whatsapp:focus-visible,
.menu-item-1069 > a.ct-menu-link:focus-visible,
#menu-item-1069 > a.ct-menu-link:focus-visible,
a.ct-menu-link[href*="wa.me/447543450130"]:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--wa-green-hover);
}

/* remove Blocksy link decorations for this item anywhere */
a.ct-menu-link.is-whatsapp::before,
a.ct-menu-link.is-whatsapp::after,
.menu-item-1069 > a.ct-menu-link::before,
.menu-item-1069 > a.ct-menu-link::after,
#menu-item-1069 > a.ct-menu-link::before,
#menu-item-1069 > a.ct-menu-link::after,
a.ct-menu-link[href*="wa.me/447543450130"]::before,
a.ct-menu-link[href*="wa.me/447543450130"]::after{
  content:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/********************************************
  Header context tweaks
********************************************/
.ct-header .menu > li.menu-item-1069{ margin-right:16px !important; } /* space before CTA */

@media (pointer:coarse){
  .ct-header .menu > li > a.ct-menu-link.is-whatsapp,
  .ct-header .menu > li.menu-item-1069 > a.ct-menu-link,
  .ct-header .menu > li#menu-item-1069 > a.ct-menu-link,
  .ct-header .menu > li > a.ct-menu-link[href*="wa.me/447543450130"]{
    padding:.7rem 1.1rem .7rem calc(var(--wa-left-desktop) + var(--wa-ico-desktop) + var(--wa-gap)) !important;
  }
}

/********************************************
  Off-canvas mobile overlay (.ct-panel)
  Make it match the desktop pill
********************************************/
.ct-panel .menu > li > a.ct-menu-link.is-whatsapp,
.ct-panel .menu > li.menu-item-1069 > a.ct-menu-link,
.ct-panel .menu > li#menu-item-1069 > a.ct-menu-link,
.ct-panel .menu > li > a.ct-menu-link[href*="wa.me/447543450130"]{
  justify-content:flex-start;
  width:auto !important;
  margin:.75rem auto 0 !important;

  /* switch to mobile metrics */
  background-position: var(--wa-left-mobile) center, var(--wa-left-mobile) center;
  background-size: var(--wa-ico-mobile) var(--wa-ico-mobile), var(--wa-ico-mobile) var(--wa-ico-mobile) !important;
  padding:.55rem .95rem .55rem calc(var(--wa-left-mobile) + var(--wa-ico-mobile) + var(--wa-gap)) !important;
}

/* hide Blocksy's menu icon to avoid double icon */
.ct-panel .menu > li .ct-menu-item-icon{ display:none !important; }

@media (pointer:coarse){
  .ct-panel .menu > li > a.ct-menu-link.is-whatsapp,
  .ct-panel .menu > li.menu-item-1069 > a.ct-menu-link,
  .ct-panel .menu > li#menu-item-1069 > a.ct-menu-link,
  .ct-panel .menu > li > a.ct-menu-link[href*="wa.me/447543450130"]{
    padding:.7rem 1.1rem .7rem calc(var(--wa-left-mobile) + var(--wa-ico-mobile) + var(--wa-gap)) !important;
  }
}

/********************************************
  Footer contact block (unchanged)
********************************************/
.footer-contact{max-width:36rem}
.footer-contact .micro{margin:0 0 .75rem;opacity:.85}

.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.contact-list a{text-decoration:none}
@media (hover:hover){.contact-list a:hover{text-decoration:underline}}

/* footer WhatsApp pill utility (used outside menus) */
.whatsapp-link{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem .95rem;border-radius:9999px;
  background:var(--wa-green);color:#fff;font-weight:600;line-height:1;
  box-shadow:0 1px 0 rgba(0,0,0,.1) inset, 0 1px .5rem rgba(0,0,0,.06);
  transition:background-color .15s ease, transform .05s ease;
}
.whatsapp-link:hover{background:var(--wa-green-hover);text-decoration:none}
.whatsapp-link:active{transform:translateY(1px)}
.whatsapp-link:focus-visible{outline:0;box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--wa-green-hover)}

.ico{width:18px;height:18px;display:inline-block}

/* responsive label swap */
.label-short{display:none}
@media (max-width:480px){
  .label-long{display:none}
  .label-short{display:inline}
}

.address address{margin:0;font-style:normal}
@media (pointer:coarse){
  .contact-list a:not(.whatsapp-link){padding:.25rem 0}
}

/********************************************
  Contact form layout and visuals (unchanged)
********************************************/
/* columns */
.contact-form-section.stk-block-columns{gap:28px;align-items:flex-start}
.contact-form-section.stk-block-columns>.stk-block-column{flex:1 1 0;max-width:100%}
.contact-form-section.stk-block-columns>.stk-block-column.form-col{flex:0 0 60%;max-width:60%}
.contact-form-section.stk-block-columns>.stk-block-column.media-col{flex:0 0 40%;max-width:40%}
@media (max-width:980px){
  .contact-form-section.stk-block-columns>.stk-block-column.form-col,
  .contact-form-section.stk-block-columns>.stk-block-column.media-col{
    flex:0 0 100%;max-width:100%;
  }
}

/* form container */
.contact-form-section :is(.wpforms-container,.wpcf7){
  width:100%!important;max-width:100%!important;background:#fff;border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.06);padding:22px;
}

/* labels */
.contact-form-section :is(.wpforms-field-label,.wpcf7-form label){
  display:block;font-weight:600;color:#111;margin-bottom:6px;font-size:14.5px;
}

/* inputs */
.contact-form-section :is(.wpforms-container,.wpcf7) :is(input,select,textarea){
  width:100%;padding:12px 14px;border:1px solid #E5E9F2;border-radius:10px;background:#fff;
  font-size:15px;line-height:1.3;
}
.contact-form-section :is(.wpforms-container textarea,.wpcf7 textarea){min-height:140px;}
.contact-form-section :is(.wpforms-container,.wpcf7) :is(input,select,textarea):focus{
  border-color:#145AE2;box-shadow:0 0 0 3px rgba(20,90,226,.12);outline:0;
}

/* spacing + submit */
.contact-form-section :is(.wpforms-field,.wpcf7 .wpcf7-form-control-wrap){margin-bottom:14px;}
.contact-form-section :is(.wpforms-submit,.wpcf7 input[type="submit"]){
  background:#145AE2;color:#fff;border:0;padding:14px 18px;border-radius:12px;font-weight:700;
  font-size:16px;cursor:pointer;width:100%;
}
.contact-form-section :is(.wpforms-submit,.wpcf7 input[type="submit"]):hover{filter:brightness(.96);}

/* widths */
.contact-form-section :is(.wpforms-field,.wpforms-container .wpforms-form){max-width:100%!important;}

/* contact page unsquash - Stackable column wrap */
.page-id-593 :is(.stk-fe70557-container,.stk-fe70557-inner-blocks){max-width:100%!important;width:100%!important;}
.page-id-593 .stk-fe70557-inner-blocks.has-text-align-center{display:block;text-align:left;}
.page-id-593 :is(#wpforms-341,#wpforms-form-341,#wpforms-341 .wpforms-form){
  width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;
}
.page-id-593 #wpforms-341 :is(input,select,textarea){width:100%;}

/********************************************
  Motion preferences
********************************************/
@media (prefers-reduced-motion: reduce){
  a.ct-menu-link.is-whatsapp,
  .menu-item-1069 > a.ct-menu-link,
  #menu-item-1069 > a.ct-menu-link,
  a.ct-menu-link[href*="wa.me/447543450130"],
  .ct-panel .menu > li > a.ct-menu-link.is-whatsapp,
  .ct-panel .menu > li.menu-item-1069 > a.ct-menu-link,
  .ct-panel .menu > li#menu-item-1069 > a.ct-menu-link,
  .ct-panel .menu > li > a.ct-menu-link[href*="wa.me/447543450130"],
  .whatsapp-link{
    transition:none !important;
  }
}