/*
 Theme Name:   Pioneers Tech
 Theme URI:    https://pioneerstech.co.uk
 Description:  Pioneers Tech child theme for Divi — Managed IT Services
 Author:       Virisio Limited
 Author URI:   https://pioneerstech.co.uk
 Template:     Divi
 Version:      1.0.0
 Text Domain:  pioneers-tech
*/

/* ============================================================
   BRAND VARIABLES — edit here to retheme the entire site
   ============================================================ */
:root {
  /* --- Primary palette --- */
  --pt-navy:          #0F2244;   /* main dark brand colour */
  --pt-blue:          #1E6FCC;   /* primary interactive blue */
  --pt-blue-light:    #2E84E8;   /* hover / lighter blue */
  --pt-orange:        #F47B20;   /* CTA accent / highlights */
  --pt-orange-light:  #F9963C;   /* CTA hover */

  /* --- Neutral palette --- */
  --pt-white:         #FFFFFF;
  --pt-off-white:     #F5F7FA;
  --pt-light-grey:    #EBF0F6;
  --pt-mid-grey:      #8A9BB0;
  --pt-text:          #1C2B3A;   /* body text */
  --pt-text-light:    #4A5C6E;   /* secondary text */

  /* --- Typography --- */
  --pt-font-head:     'Poppins', sans-serif;
  --pt-font-body:     'Open Sans', sans-serif;
  --pt-font-mono:     'Courier New', monospace;

  /* --- Type scale --- */
  --pt-size-xs:       0.75rem;
  --pt-size-sm:       0.875rem;
  --pt-size-base:     1rem;
  --pt-size-lg:       1.125rem;
  --pt-size-xl:       1.25rem;
  --pt-size-2xl:      1.5rem;
  --pt-size-3xl:      2rem;
  --pt-size-4xl:      2.5rem;
  --pt-size-5xl:      3.25rem;

  /* --- Spacing --- */
  --pt-space-xs:      0.5rem;
  --pt-space-sm:      1rem;
  --pt-space-md:      1.5rem;
  --pt-space-lg:      2.5rem;
  --pt-space-xl:      4rem;
  --pt-space-2xl:     6rem;
  --pt-space-3xl:     8rem;

  /* --- Radius --- */
  --pt-radius-sm:     4px;
  --pt-radius-md:     8px;
  --pt-radius-lg:     12px;
  --pt-radius-xl:     20px;
  --pt-radius-pill:   999px;

  /* --- Shadows --- */
  --pt-shadow-sm:     0 2px 8px rgba(15,34,68,0.08);
  --pt-shadow-md:     0 6px 24px rgba(15,34,68,0.12);
  --pt-shadow-lg:     0 16px 48px rgba(15,34,68,0.16);
  --pt-shadow-blue:   0 8px 32px rgba(30,111,204,0.25);

  /* --- Transitions --- */
  --pt-transition:    all 0.25s ease;

  /* --- Layout --- */
  --pt-max-width:     1200px;
  --pt-header-h:      80px;
}

/* ============================================================
   GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600&display=swap');

/* ============================================================
   GLOBAL RESETS & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--pt-font-body);
  font-size: var(--pt-size-base);
  color: var(--pt-text);
  background: var(--pt-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pt-font-head);
  font-weight: 700;
  color: var(--pt-navy);
  line-height: 1.25;
  margin-bottom: 0.75em;
}

h1 { font-size: var(--pt-size-5xl); }
h2 { font-size: var(--pt-size-4xl); }
h3 { font-size: var(--pt-size-3xl); }
h4 { font-size: var(--pt-size-2xl); }
h5 { font-size: var(--pt-size-xl); }
h6 { font-size: var(--pt-size-lg); }

p { color: var(--pt-text-light); margin-bottom: 1rem; }

a {
  color: var(--pt-blue);
  text-decoration: none;
  transition: var(--pt-transition);
}
a:hover { color: var(--pt-orange); }

img { max-width: 100%; height: auto; }

/* ============================================================
   DIVI HEADER OVERRIDE
   ============================================================ */
#main-header,
#main-header.et-fixed-header {
  background-color: var(--pt-navy) !important;
  box-shadow: 0 2px 16px rgba(15,34,68,0.20) !important;
}

#main-header .logo_container a,
#main-header #logo { color: var(--pt-white) !important; }

#et-top-navigation nav > ul > li > a {
  font-family: var(--pt-font-head) !important;
  font-size: var(--pt-size-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  color: var(--pt-white) !important;
  text-transform: uppercase !important;
  padding: 0 14px !important;
  transition: var(--pt-transition) !important;
}

#et-top-navigation nav > ul > li > a:hover,
#et-top-navigation nav > ul > li.current-menu-item > a {
  color: var(--pt-orange) !important;
}

/* Dropdown menus */
#et-top-navigation nav > ul > li > ul.sub-menu {
  background: var(--pt-navy) !important;
  border-top: 3px solid var(--pt-orange) !important;
  box-shadow: var(--pt-shadow-lg) !important;
}
#et-top-navigation nav > ul > li > ul.sub-menu li a {
  color: rgba(255,255,255,0.85) !important;
  font-family: var(--pt-font-body) !important;
  font-size: var(--pt-size-sm) !important;
  font-weight: 500 !important;
}
#et-top-navigation nav > ul > li > ul.sub-menu li a:hover {
  color: var(--pt-orange) !important;
  padding-left: 22px !important;
}

/* Mobile hamburger */
#et_mobile_nav_menu .mobile_menu_bar::before,
#et_mobile_nav_menu .mobile_menu_bar { color: var(--pt-white) !important; }

/* ============================================================
   BUTTONS — global Divi button overrides
   ============================================================ */
.et_pb_button,
a.et_pb_button {
  font-family: var(--pt-font-head) !important;
  font-size: var(--pt-size-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: var(--pt-radius-pill) !important;
  padding: 14px 32px !important;
  transition: var(--pt-transition) !important;
  border: 2px solid transparent !important;
}

/* Primary button (orange) */
.et_pb_button.pt-btn-primary,
.pt-btn-primary .et_pb_button {
  background: var(--pt-orange) !important;
  color: var(--pt-white) !important;
  border-color: var(--pt-orange) !important;
}
.et_pb_button.pt-btn-primary:hover,
.pt-btn-primary .et_pb_button:hover {
  background: var(--pt-orange-light) !important;
  border-color: var(--pt-orange-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(244,123,32,0.35) !important;
}

/* Secondary button (outline white) */
.et_pb_button.pt-btn-outline,
.pt-btn-outline .et_pb_button {
  background: transparent !important;
  color: var(--pt-white) !important;
  border-color: var(--pt-white) !important;
}
.et_pb_button.pt-btn-outline:hover,
.pt-btn-outline .et_pb_button:hover {
  background: var(--pt-white) !important;
  color: var(--pt-navy) !important;
}

/* Blue button */
.et_pb_button.pt-btn-blue,
.pt-btn-blue .et_pb_button {
  background: var(--pt-blue) !important;
  color: var(--pt-white) !important;
  border-color: var(--pt-blue) !important;
}
.et_pb_button.pt-btn-blue:hover {
  background: var(--pt-blue-light) !important;
  border-color: var(--pt-blue-light) !important;
  box-shadow: var(--pt-shadow-blue) !important;
}

/* Blue button hover (wrapper form) */
.pt-btn-blue .et_pb_button:hover {
  background: var(--pt-blue-light) !important;
  border-color: var(--pt-blue-light) !important;
  box-shadow: var(--pt-shadow-blue) !important;
}

/* CTA button (white pill on orange section) */
.et_pb_button.pt-btn-cta,
.pt-btn-cta .et_pb_button {
  background: var(--pt-white) !important;
  color: var(--pt-orange) !important;
  border-color: var(--pt-white) !important;
}
.et_pb_button.pt-btn-cta:hover,
.pt-btn-cta .et_pb_button:hover {
  background: transparent !important;
  color: var(--pt-white) !important;
  border-color: var(--pt-white) !important;
}

/* Remove Divi default arrow on buttons */
.et_pb_button::after { display: none !important; }

/* ============================================================
   SECTION BACKGROUNDS
   ============================================================ */
.pt-bg-navy   { background-color: var(--pt-navy) !important; }
.pt-bg-blue   { background-color: var(--pt-blue) !important; }
.pt-bg-orange { background-color: var(--pt-orange) !important; }
.pt-bg-off-white { background-color: var(--pt-off-white) !important; }
.pt-bg-light  { background-color: var(--pt-light-grey) !important; }

/* ============================================================
   TEXT UTILITIES
   ============================================================ */
.pt-text-white  { color: var(--pt-white) !important; }
.pt-text-navy   { color: var(--pt-navy) !important; }
.pt-text-blue   { color: var(--pt-blue) !important; }
.pt-text-orange { color: var(--pt-orange) !important; }
.pt-text-light  { color: var(--pt-text-light) !important; }

.pt-heading-white h1, .pt-heading-white h2,
.pt-heading-white h3, .pt-heading-white h4,
.pt-heading-white .et_pb_text h1,
.pt-heading-white .et_pb_text h2,
.pt-heading-white .et_pb_text h3 {
  color: var(--pt-white) !important;
}

.pt-text-white p,
.pt-text-white .et_pb_text p,
.pt-text-white .et_pb_blurb_description {
  color: rgba(255,255,255,0.85) !important;
}

/* ============================================================
   SECTION LABELS / EYEBROWS
   ============================================================ */
.pt-eyebrow {
  display: inline-block;
  font-family: var(--pt-font-head);
  font-size: var(--pt-size-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pt-orange);
  margin-bottom: 1rem;
}
.pt-eyebrow-blue { color: var(--pt-blue); }
.pt-eyebrow-white { color: rgba(255,255,255,0.7); }

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.pt-service-card .et_pb_blurb_container {
  background: var(--pt-white);
  border: 1px solid var(--pt-light-grey);
  border-radius: var(--pt-radius-lg);
  padding: var(--pt-space-lg) !important;
  transition: var(--pt-transition);
  height: 100%;
}
.pt-service-card .et_pb_blurb_container:hover {
  border-color: var(--pt-blue);
  box-shadow: var(--pt-shadow-md);
  transform: translateY(-4px);
}
.pt-service-card .et_pb_main_blurb_image img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
}
.pt-service-card h4 {
  font-family: var(--pt-font-head) !important;
  font-size: var(--pt-size-lg) !important;
  font-weight: 700 !important;
  color: var(--pt-navy) !important;
  margin-top: 1rem;
}
.pt-service-card .et_pb_blurb_description {
  font-size: var(--pt-size-sm) !important;
  color: var(--pt-text-light) !important;
}

/* ============================================================
   STAT COUNTERS
   ============================================================ */
.pt-stat .et_pb_number_counter_container {
  text-align: center;
}
.pt-stat .et_pb_counter_amount {
  font-family: var(--pt-font-head) !important;
  font-size: var(--pt-size-5xl) !important;
  font-weight: 800 !important;
  color: var(--pt-orange) !important;
}
.pt-stat .et_pb_counter_title {
  font-family: var(--pt-font-body) !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: var(--pt-size-sm) !important;
}

/* ============================================================
   TESTIMONIAL / QUOTE
   ============================================================ */
.pt-testimonial .et_pb_testimonial {
  background: var(--pt-white) !important;
  border-radius: var(--pt-radius-lg) !important;
  box-shadow: var(--pt-shadow-md) !important;
  border-left: 4px solid var(--pt-orange) !important;
  padding: var(--pt-space-lg) !important;
}

/* ============================================================
   ORANGE ACCENT DIVIDER
   ============================================================ */
.pt-divider-orange::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--pt-orange);
  border-radius: var(--pt-radius-pill);
  margin: 1rem auto 0;
}
.pt-divider-orange-left::after { margin-left: 0; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.pt-hero {
  min-height: 90vh !important;
  display: flex !important;
  align-items: center !important;
}
.pt-hero .et_pb_row { position: relative; z-index: 2; }

/* ============================================================
   ICON BOX (Why choose us)
   ============================================================ */
.pt-icon-box .et_pb_blurb_container {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.pt-icon-box .et_pb_main_blurb_image {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--pt-blue);
  border-radius: var(--pt-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.pt-cta-band {
  background: linear-gradient(135deg, var(--pt-navy) 0%, var(--pt-blue) 100%) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
#main-footer {
  background-color: var(--pt-navy) !important;
  color: rgba(255,255,255,0.75) !important;
}
#main-footer .et_pb_widget h4 {
  font-family: var(--pt-font-head) !important;
  font-size: var(--pt-size-base) !important;
  font-weight: 700 !important;
  color: var(--pt-white) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--pt-orange);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
#main-footer .et_pb_widget ul li a {
  color: rgba(255,255,255,0.7) !important;
  font-size: var(--pt-size-sm) !important;
  transition: var(--pt-transition) !important;
}
#main-footer .et_pb_widget ul li a:hover {
  color: var(--pt-orange) !important;
  padding-left: 6px;
}
#footer-bottom { background-color: rgba(0,0,0,0.25) !important; }
#footer-bottom p, #footer-bottom { color: rgba(255,255,255,0.5) !important; font-size: var(--pt-size-xs) !important; }

/* Footer logo accent */
.pt-footer-logo-wrap {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: var(--pt-space-lg);
  margin-bottom: var(--pt-space-lg);
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  font-family: var(--pt-font-body) !important;
  font-size: var(--pt-size-base) !important;
  color: var(--pt-text) !important;
  background: var(--pt-white) !important;
  border: 2px solid var(--pt-light-grey) !important;
  border-radius: var(--pt-radius-md) !important;
  padding: 14px 18px !important;
  transition: var(--pt-transition) !important;
  margin-bottom: var(--pt-space-sm) !important;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: var(--pt-blue) !important;
  box-shadow: 0 0 0 4px rgba(30,111,204,0.12) !important;
  outline: none !important;
}
.wpcf7-form input[type="submit"] {
  background: var(--pt-orange) !important;
  color: var(--pt-white) !important;
  border-color: var(--pt-orange) !important;
  font-family: var(--pt-font-head) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  border-radius: var(--pt-radius-pill) !important;
  padding: 16px 40px !important;
  width: auto !important;
  transition: var(--pt-transition) !important;
}
.wpcf7-form input[type="submit"]:hover {
  background: var(--pt-orange-light) !important;
  border-color: var(--pt-orange-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(244,123,32,0.35) !important;
}

/* ============================================================
   PAGE HERO BANNER (inner pages)
   ============================================================ */
.pt-page-hero {
  background: linear-gradient(135deg, var(--pt-navy) 0%, #1B3F7A 100%) !important;
  padding: 100px 0 80px !important;
}
.pt-page-hero h1 {
  color: var(--pt-white) !important;
  font-size: var(--pt-size-4xl) !important;
}
.pt-page-hero p {
  color: rgba(255,255,255,0.8) !important;
  font-size: var(--pt-size-lg) !important;
}

/* Breadcrumb */
.pt-breadcrumb {
  color: rgba(255,255,255,0.6) !important;
  font-size: var(--pt-size-sm) !important;
  margin-bottom: var(--pt-space-sm) !important;
}
.pt-breadcrumb a { color: var(--pt-orange) !important; }

/* ============================================================
   CHECKLIST (service feature lists)
   ============================================================ */
.pt-checklist ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.pt-checklist ul li {
  position: relative;
  padding-left: 2rem !important;
  margin-bottom: 0.6rem !important;
  color: var(--pt-text-light) !important;
  font-size: var(--pt-size-sm) !important;
}
.pt-checklist ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  background: var(--pt-blue);
  color: var(--pt-white);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 22px;
  text-align: center;
}

/* ============================================================
   BADGE / PILL TAGS
   ============================================================ */
.pt-badge {
  display: inline-block;
  background: var(--pt-light-grey);
  color: var(--pt-blue);
  font-family: var(--pt-font-head);
  font-size: var(--pt-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--pt-radius-pill);
  margin: 3px;
}
.pt-badge-orange { background: rgba(244,123,32,0.12); color: var(--pt-orange); }
.pt-badge-blue   { background: rgba(30,111,204,0.10); color: var(--pt-blue); }
.pt-badge-navy   { background: var(--pt-navy); color: var(--pt-white); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  :root {
    --pt-size-5xl: 2.25rem;
    --pt-size-4xl: 1.875rem;
    --pt-size-3xl: 1.5rem;
  }
  .pt-hero { min-height: 70vh !important; }
}

@media (max-width: 767px) {
  :root {
    --pt-size-5xl: 2rem;
    --pt-size-4xl: 1.625rem;
    --pt-size-3xl: 1.375rem;
    --pt-space-2xl: 4rem;
    --pt-space-3xl: 5rem;
  }
  .pt-hero { min-height: auto !important; padding: 80px 0 60px !important; }
  h1 { font-size: var(--pt-size-3xl); }
}

/* ============================================================
   MISC HELPERS
   ============================================================ */
.pt-center { text-align: center !important; }
.pt-mt-0 { margin-top: 0 !important; }
.pt-mb-0 { margin-bottom: 0 !important; }
.pt-no-border { border: none !important; }
.pt-rounded { border-radius: var(--pt-radius-lg) !important; }
.pt-shadow { box-shadow: var(--pt-shadow-md) !important; }

/* Divi row max-width */
.et_pb_row { max-width: var(--pt-max-width) !important; }

/* ============================================================
   HEADER LOGO — force correct size for SVG logo
   ============================================================ */
#main-header #logo,
#main-header .logo_container img {
  max-height: 44px !important;
  width: auto !important;
  display: block;
}

/* ============================================================
   NAVIGATION — compress items at intermediate widths (981–1100px)
   Divi switches to hamburger at 980px; above that our items must fit
   ============================================================ */
@media (max-width: 1100px) {
  #et-top-navigation nav > ul > li > a {
    padding: 0 9px !important;
    font-size: 11px !important;
  }
}

/* ============================================================
   WHITE BLURB CARDS — depth shadow so cards read on light sections
   ============================================================ */
.et_pb_blurb[style*="background-color:#FFFFFF"],
.et_pb_blurb[style*="background-color: #FFFFFF"] {
  box-shadow: 0 4px 20px rgba(15,34,68,0.12) !important;
}
.et_pb_blurb[style*="background-color:#FFFFFF"]:hover,
.et_pb_blurb[style*="background-color: #FFFFFF"]:hover {
  box-shadow: 0 10px 36px rgba(15,34,68,0.18) !important;
  transform: translateY(-3px);
  transition: var(--pt-transition);
}

/* ============================================================
   SECTOR TILE CARDS — 1/4-col text modules on home page sectors
   section. Only et_pb_column_1_4 > et_pb_text on home page are
   these tiles (stats bar uses number_counter, not text modules).
   ============================================================ */
body.home .et_pb_column_1_4 .et_pb_text {
  border-top: 3px solid var(--pt-orange) !important;
  border-radius: var(--pt-radius-md) !important;
  box-shadow: 0 4px 16px rgba(15,34,68,0.12) !important;
  transition: var(--pt-transition);
}
body.home .et_pb_column_1_4 .et_pb_text:hover {
  box-shadow: 0 8px 28px rgba(15,34,68,0.18) !important;
  transform: translateY(-2px);
}
body.home .et_pb_column_1_4 .et_pb_text .et_pb_text_inner {
  text-align: center !important;
}
body.home .et_pb_column_1_4 .et_pb_text p {
  font-family: var(--pt-font-head) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  color: var(--pt-navy) !important;
  margin: 0 !important;
}

/* ============================================================
   FOOTER HEADINGS — widget titles (h4.title) default to 18px
   via Divi base; clamp them so they don't dominate the footer
   ============================================================ */
#main-footer h1, #main-footer h2, #main-footer h3,
#main-footer h4, #main-footer h5, #main-footer h6 {
  font-family: var(--pt-font-head) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: var(--pt-white) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--pt-orange);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

/* ============================================================
   FOOTER WIDGET BODY TEXT
   ============================================================ */
#main-footer .et_pb_widget,
#main-footer .fwidget {
  color: rgba(255,255,255,0.7);
  font-size: var(--pt-size-sm);
}
#main-footer .et_pb_widget p,
#main-footer .fwidget p {
  color: rgba(255,255,255,0.7) !important;
  font-size: var(--pt-size-sm) !important;
}
#main-footer .et_pb_widget a,
#main-footer .fwidget a {
  color: rgba(255,255,255,0.7) !important;
  font-size: var(--pt-size-sm) !important;
  transition: var(--pt-transition) !important;
}
#main-footer .et_pb_widget a:hover,
#main-footer .fwidget a:hover {
  color: var(--pt-orange) !important;
  padding-left: 4px;
}

/* ============================================================
   FOOTER CREDIT & SOCIAL
   ============================================================ */
#footer-info {
  font-size: var(--pt-size-xs) !important;
  color: rgba(255,255,255,0.4) !important;
}
#footer-info a { color: rgba(255,255,255,0.5) !important; }
#footer-bottom .et-social-icons { display: none !important; }