/*** Z-Services-Parent --- Page Custom Styles
Last Edited 3-1-2026
============================================================ */

/* ============================================================
   Z-Services Template – Remove legacy 3-column layout
   (kills col_8 / col_4 / clearfix in the old hero area if it exists)
   ============================================================ */

body.page-template-z-services-page #banner-teaser,
body.page-template-z-services-page #banner-teaser .column,
body.page-template-z-services-page #banner-teaser [class*="col_"],
body.page-template-z-services-page #banner-teaser .cb {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: both !important;
}

body.page-template-z-services-page #banner-teaser {
  max-width: 1160px;
  margin: 0 auto 22px !important;
}

body.page-template-z-services-page #banner-teaser #teaser {
  margin-top: 14px !important;
}

/* ============================================================
   Base container + hide duplicate title output
   ============================================================ */

body.page-template-z-services-page .entry-header {
  display: none; /* title renders in hero */
}

body.page-template-z-services-page #the-title {
  display: none; /* prevent any legacy title output */
}

/* Desktop background and container */
@media (min-width: 801px) {
  body.page-template-z-services-page {
    background: #eee;
  }
}

/* Mobile background */
@media (max-width: 800px) {
  body.page-template-z-services-page {
    background: #fff;
  }
}

/* Main container */
body.page-template-z-services-page .z-page-wrap {
  padding: 30px 30px 30px;
  max-width: 1500px;
  background: #fff;
  margin: 40px auto;
  width: 100%;
}

@media (max-width: 800px) {
  body.page-template-z-services-page .z-page-wrap {
    padding: 0 15px 30px;
    margin: 20px auto 50px;
  }
}

/* =========================================================
   Services Hero (Image + overlay content)
   Markup:
   .z-services-hero
     .z-services-hero-media (img)
     .z-services-hero-overlay
       .z-services-hero-inner (max 1500)
         .z-services-breadcrumbs (Yoast)
         .z-services-hero-panel
           .z-services-title
           .z-services-hero-editor (editor text)
   ========================================================= */

body.page-template-z-services-page .z-services-hero {
  position: relative;
  width: 100%;
  margin: 0 0 22px;
  border-radius: 18px;
  overflow: hidden;
}

body.page-template-z-services-page .z-services-hero-media img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

body.page-template-z-services-page .z-services-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 22px 18px;
  background: linear-gradient(
    to right,
    rgba(2, 92, 169, 0.45) 0%,
    rgba(20, 181, 234, 0.18) 55%,
    rgba(0, 0, 0, 0.28) 100%
  );
}

body.page-template-z-services-page .z-services-hero-inner {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

/* Yoast Breadcrumbs */
body.page-template-z-services-page .z-services-breadcrumbs {
  margin: 0 0 10px 0;
  font-size: 13px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.92);
}

body.page-template-z-services-page .z-services-breadcrumbs a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

body.page-template-z-services-page .z-services-breadcrumbs a:hover,
body.page-template-z-services-page .z-services-breadcrumbs a:focus {
  border-bottom-color: rgba(255, 255, 255, 0.75);
}

/* Accessible focus ring in hero */
body.page-template-z-services-page .z-services-breadcrumbs a:focus {
  outline: 3px solid rgba(20, 181, 234, 0.55);
  outline-offset: 2px;
}

/* “Glass” panel */
body.page-template-z-services-page .z-services-hero-panel {
  max-width: 820px;
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 40px rgba(0, 30, 60, 0.22);
  border: 1px solid rgba(2, 92, 169, 0.18);
  backdrop-filter: blur(8px);
}

body.page-template-z-services-page .z-services-title {
  margin: 0 0 8px 0;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #063a68;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.08;
}

/* Editor text inside hero panel */
body.page-template-z-services-page .z-services-hero-editor {
  margin: 0;
  color: #1f2d3a;
  font-size: 15px;
  line-height: 1.35;
}

body.page-template-z-services-page .z-services-hero-editor p {
  margin: 0 0 10px 0;
}

body.page-template-z-services-page .z-services-hero-editor p:last-child {
  margin-bottom: 0;
}

/* Mobile hero tweaks */
@media (max-width: 800px) {
  body.page-template-z-services-page .z-services-hero-media img {
    height: 300px;
  }

  body.page-template-z-services-page .z-services-hero-overlay {
    padding: 14px 12px;
  }

  body.page-template-z-services-page .z-services-hero-panel {
    max-width: 100%;
    padding: 14px 14px 12px;
  }
}

@media (max-width: 480px) {
  body.page-template-z-services-page .z-services-hero-media img {
    height: 260px;
  }
}

/* =========================================================
   Services Page – Medical UI Menu Cards
   Scoped to template + #related_pages only
   ========================================================= */

body.page-template-z-services-page #related_pages.z-page-wrap {
  background: transparent;
  padding: 0 0 40px 0;
  margin: 0 auto;
  line-height: normal;
}

/* Reset wrapper UL */
body.page-template-z-services-page #related_pages #z-services-widget > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Grid layout */
body.page-template-z-services-page #related_pages #z-services-widget > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 980px) {
  body.page-template-z-services-page #related_pages #z-services-widget > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  body.page-template-z-services-page #related_pages #z-services-widget > ul {
    grid-template-columns: 1fr;
  }
}

/* Kill any legacy float behavior */
body.page-template-z-services-page #related_pages .one-third,
body.page-template-z-services-page #related_pages .first {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* Card styling */
body.page-template-z-services-page #related_pages .widget.widget_nav_menu {
  background: #ffffff;
  border: 1px solid rgba(2, 92, 169, 0.18);
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 22px rgba(0, 30, 60, 0.08);
  position: relative;
  overflow: hidden;
}

body.page-template-z-services-page #related_pages .widget.widget_nav_menu::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(to right, #025ca9 0%, #14b5ea 100%);
}

body.page-template-z-services-page #related_pages .widget.widget_nav_menu ul.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Top level */
body.page-template-z-services-page #related_pages .widget.widget_nav_menu ul.menu > li > a {
  display: block;
  padding: 10px 10px;
  margin: 6px 0 8px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  color: #063a68;
  background: rgba(20, 181, 234, 0.10);
  border: 1px solid rgba(2, 92, 169, 0.18);
}

body.page-template-z-services-page #related_pages .widget.widget_nav_menu ul.menu > li > a:hover,
body.page-template-z-services-page #related_pages .widget.widget_nav_menu ul.menu > li > a:focus {
  background: rgba(20, 181, 234, 0.16);
  border-color: rgba(2, 92, 169, 0.28);
  text-decoration: none;
}

/* Focus ring in cards area */
body.page-template-z-services-page #related_pages a:focus {
  outline: 3px solid rgba(20, 181, 234, 0.45);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   IMPORTANT FIX:
   Force sub-menus visible on this template (all resolutions)
   Overrides global style.css mobile submenu hiding behavior.
   ------------------------------------------------------------ */
body.page-template-z-services-page #related_pages .sub-menu {
  display: block !important;
  visibility: visible !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  position: static !important;
}

/* Submenus styling */
body.page-template-z-services-page #related_pages .widget.widget_nav_menu ul.sub-menu {
  margin: 0 0 12px;
  padding: 4px 0 0 10px;
  list-style: none;
  border-left: 2px solid rgba(2, 92, 169, 0.14);
}

body.page-template-z-services-page #related_pages .widget.widget_nav_menu ul.sub-menu li a {
  display: block;
  padding: 7px 10px;
  margin: 6px 0;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
  color: #1f2d3a;
  background: #f7fbff;
  border: 1px solid rgba(2, 92, 169, 0.10);
}

body.page-template-z-services-page #related_pages .widget.widget_nav_menu ul.sub-menu li a:hover,
body.page-template-z-services-page #related_pages .widget.widget_nav_menu ul.sub-menu li a:focus {
  background: #eef7ff;
  border-color: rgba(2, 92, 169, 0.18);
  text-decoration: none;
}

/* Optional CTA highlight menu item (ID-based) */
body.page-template-z-services-page #related_pages #menu-item-235443 > a {
  background: linear-gradient(to right, #025ca9 0%, #14b5ea 100%) !important;
  border: 0 !important;
  color: #ffffff !important;
  font-weight: 800;
  box-shadow: 0 10px 18px rgba(2, 92, 169, 0.20);
}

body.page-template-z-services-page #related_pages #menu-item-235443 > a:hover,
body.page-template-z-services-page #related_pages #menu-item-235443 > a:focus {
  filter: brightness(1.02);
  transform: translateY(-1px);
}