/*
 * overrides.css
 * Custom fixes on top of the WordPress theme — never edit style.css directly.
 */

/* ── Feedback widget isolation ──────────────────────────────────────────────
   The WordPress theme sets float:left on all button/input/textarea elements,
   which breaks the widget's flex layout. We reset only float — NOT border or
   padding, since Tailwind classes handle those and our selector (class+element,
   specificity 0,1,1) would otherwise beat Tailwind's class-only rules (0,1,0).
   ─────────────────────────────────────────────────────────────────────────── */
.feedback-widget-ignore button,
.feedback-widget-ignore input,
.feedback-widget-ignore textarea {
  float: none;
}


/* =========================================================
   Equal-height cards — Certification Process Stages
   WordPress used JS (equalheights) to match card heights.
   Replaced here with CSS flexbox on the block-grid row.
   ========================================================= */

.background_benefits [class*="block-grid-"] {
  display: flex;
  flex-wrap: wrap;
}

.background_benefits [class*="block-grid-"] > li {
  float: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.background_benefits [class*="block-grid-"] > li .animateblock {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.background_benefits [class*="block-grid-"] > li .animateblock > div {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* =========================================================
   Nav link visited colour — browsers apply a default dark
   purple/red to :visited links. style.css resets this for
   .main-navigation li a at 768px+ but doesn't cover all
   breakpoints or the :visited pseudo-class explicitly.
   Lock it down here so visited nav links always match the
   normal link colour, and current-menu-item stays blue.
   ========================================================= */

/* =========================================================
   Nav item padding — WordPress applies padding-left/right: 11px on
   .main-navigation li at the root level (no media query), overriding
   the 5px set inside the 768px block. Our style.css copy put this rule
   inside @media (min-width: 960px) instead. Declaring it here at 768px+
   ensures the correct 11px padding at ALL nav-visible breakpoints.
   Sub-menu items reset to 0 (they use padding on the <a> instead).
   ========================================================= */

@media screen and (min-width: 768px) {
  .main-navigation li {
    padding-left: 11px;
    padding-right: 11px;
  }
  .main-navigation li li {
    padding-left: 0;
    padding-right: 0;
  }
}


.main-navigation li a:visited {
  color: #1d1d1b;
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-item > a:visited,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current-menu-ancestor > a:visited,
.main-navigation .current_page_item > a,
.main-navigation .current_page_item > a:visited,
.main-navigation .current_page_ancestor > a,
.main-navigation .current_page_ancestor > a:visited {
  color: #209fea;
}

/* =========================================================
   Partner Logos Centering
   Center the partner logos inside the Slick slider on mobile
   and desktop.
   ========================================================= */

.partner_logos .slick-slide {
  text-align: center;
}

.partner_logos .slick-slide img {
  display: inline-block !important;
  margin: 0 auto;
  vertical-align: middle;
}

.partner_logos .slick-slide span {
  display: inline-block;
  vertical-align: middle;
}


/* =========================================================
   Modern Off-Canvas Mobile Menu Drawer
   ========================================================= */

/* Backdrop overlay with blur */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Off-canvas drawer container - Premium Light Theme */
.mobile-menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%; /* Full screen on mobile */
  height: 100vh;
  background-color: #ffffff; /* Premium crisp white background */
  z-index: 1000000;
  box-shadow: -5px 0 35px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  border-top: 4px solid #20a0eb; /* Brand blue accent top bar */
}

@media screen and (min-width: 480px) {
  .mobile-menu-drawer {
    width: 450px; /* Spacious drawer on tablet */
    max-width: 85vw;
  }
}

.mobile-menu-drawer.open {
  transform: translateX(0);
}

/* Close button header */
.mobile-menu-header {
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px 8px 20px;
  background: #ffffff;
  border-bottom: 1px solid #f3f4f6;
}

.mobile-menu-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #888888;
  font-size: 24px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.mobile-menu-close:hover {
  color: #20a0eb;
  transform: rotate(90deg);
}

/* Scrollable nav area — fills remaining drawer height after the close-button header */
.mobile-menu-drawer > header {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Main Navigation Container */
.mobile-menu-drawer .main-navigation-mobile {
  display: block !important;
  position: static !important;
  width: 100% !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  background: transparent !important;
  padding: 0 0 80px 0 !important;
}

/* Menu rows */
.mobile-menu-drawer .main-navigation-mobile li {
  background: transparent !important;
  border-bottom: 1px solid #f3f4f6 !important;
  width: 100% !important;
  float: none !important;
  list-style: none !important;
}

/* Flex Wrapper for items */
.mobile-menu-drawer .main-navigation-mobile .menu-link-wrapper {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
}

/* Main links / text spans */
.mobile-menu-drawer .main-navigation-mobile li a.main-menu-link,
.mobile-menu-drawer .main-navigation-mobile li span.main-menu-link {
  color: #1d1d1b !important; /* Charcoal dark text */
  font-size: 17px !important;
  padding: 18px 24px !important;
  font-weight: 500;
  cursor: pointer;
  flex: 1;
  display: block;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.mobile-menu-drawer .main-navigation-mobile li a.main-menu-link:hover,
.mobile-menu-drawer .main-navigation-mobile li span.main-menu-link:hover {
  color: #20a0eb !important;
  background-color: #f9fafb !important;
}

/* Arrow Toggle Button on the right */
.mobile-menu-drawer .main-navigation-mobile .arrow-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  cursor: pointer;
  color: #888888;
  border-left: 1px solid #f3f4f6;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.mobile-menu-drawer .main-navigation-mobile .arrow-toggle:hover {
  color: #20a0eb;
  background-color: #f9fafb;
}

.mobile-menu-drawer .main-navigation-mobile .arrow-toggle i {
  font-size: 15px;
  line-height: 1 !important;
}

/* Dropdown Accordion/Sub-menu styling */
.mobile-menu-drawer .main-navigation-mobile li ul.sub-menu {
  background-color: #f9fafb !important; /* Soft grey background for depth */
  border-left: 4px solid #20a0eb !important; /* Blue brand left accent line */
  padding: 6px 0 !important;
  margin: 0 !important;
  width: 100% !important;
  position: relative !important;
  list-style: none !important;
  border-top: none !important;
}

.mobile-menu-drawer .main-navigation-mobile li ul.sub-menu li {
  border-bottom: none !important; /* Clear flat list inside sub-menu */
}

.mobile-menu-drawer .main-navigation-mobile li ul.sub-menu li a {
  padding: 12px 24px 12px 36px !important; /* Indented padding */
  font-size: 15px !important;
  color: #4b5563 !important; /* Softer text color */
  font-weight: 500;
  display: block;
}

.mobile-menu-drawer .main-navigation-mobile li ul.sub-menu li a:hover {
  color: #20a0eb !important;
  background-color: rgba(32, 160, 235, 0.04) !important;
}

/* Active page indicators */
.mobile-menu-drawer .main-navigation-mobile .current-menu-item > .menu-link-wrapper > a,
.mobile-menu-drawer .main-navigation-mobile .current-menu-item > .menu-link-wrapper > span,
.mobile-menu-drawer .main-navigation-mobile .current-menu-ancestor > .menu-link-wrapper > a,
.mobile-menu-drawer .main-navigation-mobile .current-menu-ancestor > .menu-link-wrapper > span,
.mobile-menu-drawer .main-navigation-mobile .current_page_item > .menu-link-wrapper > a,
.mobile-menu-drawer .main-navigation-mobile .current_page_item > .menu-link-wrapper > span,
.mobile-menu-drawer .main-navigation-mobile .current_page_ancestor > .menu-link-wrapper > a,
.mobile-menu-drawer .main-navigation-mobile .current_page_ancestor > .menu-link-wrapper > span {
  color: #20a0eb !important;
  font-weight: 600 !important;
}

/* Reset theme default absolute elements and borders for mobile */
.mobile-menu-drawer .main-navigation-mobile li,
.mobile-menu-drawer .main-navigation-mobile li a,
.mobile-menu-drawer .main-navigation-mobile li .arrow_down,
.mobile-menu-drawer .main-navigation-mobile li .arrow_down:before {
  border-left: none !important;
  border-right: none !important;
}


/* =========================================================
   Intro paragraph_left spacing — tablet & mobile only
   On desktop the orange text and body copy sit side-by-side
   (two medium-6 columns), so no gap is needed. Below 768 px
   the columns stack and the orange text sits directly on top
   of the body copy. Adding margin-bottom here matches the
   site's standard margin-bottom_30 spacing used elsewhere.
   ========================================================= */

@media screen and (max-width: 767px) {
  .paragraph_left {
    margin-bottom: 30px;
  }
}


/* =========================================================
   Card section spacing — tablet & mobile only
   On desktop the generous margin-bottom_40 / margin-bottom_70
   values look fine inside wide cards. On mobile the columns
   stack and the same values produce excessive whitespace
   between headings, body text, and Read More buttons.
   Overrides are scoped to each parent section so desktop and
   the global utility classes are completely unaffected.
   ========================================================= */

@media screen and (max-width: 767px) {

  /* ── Optional strip cards (IT Consultancy / Networking / Disaster Recovery)
        and Subpage cards (CCNCare / CCN Proactive Support) ── */
  .light_gray_background h2.like_h1 {
    margin-bottom: 12px !important;
    margin-top: 16px !important;
  }

  .light_gray_background .margin-bottom_40 {
    margin-bottom: 16px !important;
  }

  /* Read More button wrappers — increased from 28px to 48px to space cards/sections out */
  .light_gray_background .containing-table.margin-bottom_70 {
    margin-bottom: 48px !important;
  }

  /* Pull subpage card headings closer to their icons on mobile (Disaster Recovery page only) */
  .disaster-recovery-page .well6 {
    margin-bottom: 4px !important;
  }
  .disaster-recovery-page .well6 + h2.well5 {
    margin-top: 8px !important;
  }

  /* Pull subpage card headings closer to their icons on mobile by shifting icons down (Why CCN page only) */
  .why-ccn-page .well6 {
    position: relative;
    top: 24px;
  }

  /* ── Benefits grid (background_benefits — the blue gradient section) ── */
  /* Relaxed spacing to avoid squeezing them vertically too much */
  .background_benefits h2.like_h1 {
    margin-top: 20px !important;
    margin-bottom: 8px !important; /* Reduced from 18px to bring bullet points closer to heading on mobile/tablet */
  }

  .background_benefits .padding-bottom_24 {
    padding-bottom: 20px !important;
  }

  /* Space between stacked benefit cards */
  .background_benefits .margin-bottom_14 {
    margin-bottom: 18px !important;
  }

}

/* =========================================================
   Service background checkbox alignment — tablet & mobile only
   On screens below 960px, the checkmarks (orange checkboxes) inside 
   .service_background have negative margin-left pulling them to the left edge.
   Adding padding-left to the ul ensures the checkboxes align nicely
   with the container padding instead of sitting on the border.
   ========================================================= */
@media screen and (max-width: 959px) {
  .service_background ul {
    padding-left: 20px !important;
  }
}

/* =========================================================
   CCNCare Services Page — Service Cards button spacing
   On desktop, the flex: 1 on the description stretched the card
   unnecessarily, placing the "Read more" buttons too far away.
   On mobile, the button was too close to the text.
   Removing flex: 1 and adding a standard margin-bottom averages
   out the spacing beautifully across all device sizes.
   ========================================================= */
.services_all .well66 {
  flex: none !important;
  margin-bottom: 24px !important;
}

/* =========================================================
   Partnership Page — Partner Logo Cards
   Removes the borders, squares, and lines from around the partner
   logos to leave only the logos floating clean on the background.
   ========================================================= */
.image_partner_logo_height {
  border: none !important;
}

/* =========================================================
   Meet the Team Page — Team Photos Uniform Sizing
   Since team photos have varying resolution sizes (Rebecca Hayes is 397px,
   others are 310px), this ensures they scale together uniformly and
   have a consistent maximum width of 310px at all breakpoints.
   ========================================================= */
.team-photos img {
  width: 100% !important;
  max-width: 310px !important;
  height: auto !important;
  display: inline-block !important;
}

/* =========================================================
   CCN News / Blog Spacing
   Gives more breathing room between the blog text/description
   and the image gallery beneath it, as well as separating the
   images from the tag cloud/social share below.
   ========================================================= */
.blog_images {
  margin-top: 30px !important;
  margin-bottom: 25px !important;
}

/* =========================================================
   Optional Strip Images (e.g. Network Audits page)
   Centers icons/logos and adds spacing below them to match WordPress
   ========================================================= */
.gray_backgroud img,
.light_gray_background img {
  display: block !important;
  margin: 0 auto 30px auto !important;
}

/* =========================================================
   Benefits Grid Spacing (all breakpoints)
   Reduces spacing between card heading and bullet point
   ========================================================= */
.background_benefits .well3 h2.like_h1 {
  margin-bottom: 12px !important;
}


/* =========================================================
   Responsive Sophos / Cyber Essentials Hero Banners (.sophosdiv)
   Ensure the hero banner scales down and retains its 3:1 aspect ratio
   on tablet and mobile, rather than using a fixed 400px height.
   ========================================================= */
.sophosdiv {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 1 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Adjust the buttons inside sophosdiv to fit smaller screens */
.sophosbutton {
  margin-bottom: 40px !important;
}

/* Specific class for the Cyber Essentials banner button which has larger margin */
.sophosbutton-large {
  margin-bottom: 80px !important;
}

@media screen and (max-width: 959px) {
  .sophosbutton,
  .sophosbutton-large {
    margin-bottom: 40px !important;
  }
}

@media screen and (max-width: 767px) {
  .sophosbutton,
  .sophosbutton-large {
    margin-bottom: 20px !important;
    font-size: 13px !important;
    padding: 0 20px !important;
    height: 30px !important;
    line-height: 27px !important;
  }
}

@media screen and (max-width: 480px) {
  .sophosbutton,
  .sophosbutton-large {
    margin-bottom: 12px !important;
    font-size: 11px !important;
    padding: 0 12px !important;
    height: 24px !important;
    line-height: 21px !important;
  }
}