/* ==========================================================================
   Jettison brand layer for jettisonexpress.com
   Matches the look of jettisonuk.com: Sneakers Pro headings, Montserrat text,
   pink #FE38B2, navy #002241, pill buttons, navy header and footer.
   Loaded last on every page so it sits on top of the original Divi styles.
   ========================================================================== */

:root {
  --jx-pink: #fe38b2;
  --jx-pink-dark: #d4148a;
  --jx-navy: #002241;
  --jx-navy-deep: #001a33;
  --jx-navy-deeper: #00142a;
  --jx-muted: #eff2f5;
  --jx-text: #44576b;
  --jx-border: #e3e8ee;
  --jx-head: "sneakers-pro", "Arial Black", Impact, system-ui, sans-serif;
  --jx-body: "montserrat", "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ---------- Type ---------- */
html body,
html body input,
html body textarea,
html body select,
html body button {
  font-family: var(--jx-body);
}
html body { color: var(--jx-text); }
html body #page-container p,
html body #page-container li { font-family: var(--jx-body); }

html body #page-container h1,
html body #page-container h2,
html body #page-container .entry-title,
html body #page-container .et_pb_slide_title,
html body #page-container .et_pb_post h2 {
  font-family: var(--jx-head) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.08 !important;
  overflow-wrap: break-word;
}
html body #page-container h1 a,
html body #page-container h2 a { font-family: inherit; }

html body #page-container h3,
html body #page-container h4,
html body #page-container h5,
html body #page-container h6 {
  font-family: var(--jx-body) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
html body #page-container .et_pb_blurb .et_pb_module_header,
html body #page-container .et_pb_number_counter h3 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* In-content links: brand pink, a touch deeper so they stay readable on white */
html body #page-container .et_pb_text a,
html body #page-container .entry-content a,
html body #page-container .et_pb_toggle_content a {
  color: var(--jx-pink-dark);
  font-weight: 600;
}
html body #page-container .et_pb_bg_layout_dark .et_pb_text a { color: #fff; text-decoration: underline; }

/* ---------- Buttons: pill style ---------- */
html body #page-container .et_pb_section .et_pb_button,
html body #page-container .et_pb_button,
html body #page-container .et_pb_more_button,
html body #page-container .et_pb_contact_submit,
html body #page-container .et_pb_promo_button,
html body #page-container .comment-reply-link,
html body #page-container .form-submit .et_pb_button {
  font-family: var(--jx-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
  border: 0 !important;
  padding: 15px 30px !important;
  background: var(--jx-pink) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -10px rgba(254, 56, 178, 0.7);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
html body #page-container .et_pb_section .et_pb_button:hover,
html body #page-container .et_pb_button:hover,
html body #page-container .et_pb_more_button:hover,
html body #page-container .et_pb_contact_submit:hover {
  background: var(--jx-navy) !important;
  color: #fff !important;
  padding: 15px 30px !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(0, 34, 65, 0.8);
}
html body #page-container .et_pb_button:after,
html body #page-container .et_pb_button:before,
html body #page-container .et_pb_more_button:after { display: none !important; }

/* ---------- Top bar ---------- */
html body #page-container #top-header,
html body.et_secondary_nav_enabled #page-container #top-header,
html body.et_fixed_nav #page-container #top-header.et-fixed-header {
  background-color: var(--jx-navy-deep) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
html body #top-header,
html body #top-header a,
html body #top-header #et-info { color: rgba(255, 255, 255, 0.85) !important; font-family: var(--jx-body); font-weight: 600; letter-spacing: 0.02em; }
html body #top-header #et-info-phone:before,
html body #top-header #et-info-email:before,
html body #top-header .et-social-icon a:before { color: var(--jx-pink); }
html body #top-header a:hover { color: #fff !important; }

/* ---------- Main header ---------- */
html body #page-container #main-header .container,
html body #page-container #top-header .container { width: 92%; max-width: 1240px; }
html body #top-menu li { padding-right: 16px; }
html body #page-container #main-header #logo { max-height: 50px; width: auto; }
html body #page-container #main-header.et-fixed-header #logo { max-height: 40px; }
html body #top-menu > li:last-child { padding-right: 0; }
html body #main-header,
html body #main-header.et-fixed-header {
  background-color: var(--jx-navy) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
html body #top-menu > li > a,
html body .et-fixed-header #top-menu > li > a {
  font-family: var(--jx-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  opacity: 1 !important;
}
html body #top-menu > li > a:hover,
html body #top-menu > li.current-menu-item > a,
html body #top-menu > li.current-menu-ancestor > a,
html body .et-fixed-header #top-menu > li.current-menu-item > a,
html body .et-fixed-header #top-menu > li.current-menu-ancestor > a,
html body #top-menu > li.current-menu-parent > a,
html body .et-fixed-header #top-menu > li.current-menu-parent > a { color: var(--jx-pink) !important; }
html body #top-menu .menu-item-has-children > a:first-child:after { color: inherit; }

/* Dropdowns: white cards like the brand site */
html body #top-menu li ul.sub-menu,
html body .nav li ul {
  background: #fff !important;
  border-top: 3px solid var(--jx-pink) !important;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 18px 40px -18px rgba(0, 34, 65, 0.45) !important;
  padding: 12px 0 !important;
}
html body #top-menu li li a,
html body .et-fixed-header #top-menu li li a {
  font-family: var(--jx-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--jx-navy) !important;
  opacity: 1 !important;
}
html body #top-menu li li a:hover,
html body #top-menu li li.current-menu-item > a { color: var(--jx-pink) !important; background: var(--jx-muted) !important; }

/* Phone pill at the end of the menu */
html body #top-menu > li.jx-nav-cta { padding-left: 14px; padding-right: 0; }
html body #top-menu > li.jx-nav-cta > a,
html body .et-fixed-header #top-menu > li.jx-nav-cta > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--jx-pink) !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 11px 20px !important;
  margin-top: -11px;
  letter-spacing: 0.03em !important;
  box-shadow: 0 8px 20px -10px rgba(254, 56, 178, 0.8);
  transition: background-color .2s ease;
}
html body #top-menu > li.jx-nav-cta > a:hover { background: #fff !important; color: var(--jx-navy) !important; }
html body #top-menu > li.jx-nav-cta svg { width: 15px; height: 15px; flex: none; }

/* Mobile menu */
html body .et_mobile_menu {
  background: var(--jx-navy) !important;
  border-top: 3px solid var(--jx-pink) !important;
  border-radius: 0 0 14px 14px;
}
html body .et_mobile_menu li a {
  color: #fff !important;
  font-family: var(--jx-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html body .et_mobile_menu li li a { text-transform: none; letter-spacing: 0; font-weight: 600 !important; color: rgba(255,255,255,.85) !important; }
html body .et_mobile_menu li a:hover { background: rgba(255, 255, 255, 0.06) !important; color: var(--jx-pink) !important; opacity: 1 !important; }
html body .et_mobile_menu li.jx-nav-cta { padding: 12px 5%; }
html body .et_mobile_menu li.jx-nav-cta a {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  background: var(--jx-pink); border-radius: 999px; border: 0 !important; padding: 14px 20px !important;
}
html body .et_mobile_menu li.jx-nav-cta svg { width: 15px; height: 15px; }
html body .mobile_menu_bar:before { color: #fff !important; }

/* ---------- Footer ---------- */
html body #main-footer { background-color: var(--jx-navy) !important; }
html body #footer-widgets { padding: 56px 0 24px !important; }
html body #footer-widgets,
html body #footer-widgets p,
html body #footer-widgets .fwidget { color: rgba(255, 255, 255, 0.8) !important; font-family: var(--jx-body); font-size: 15px; }
html body #footer-widgets a { color: #fff !important; }
html body #footer-widgets .jx-footer-links h4.title {
  color: #fff !important; font-family: var(--jx-body) !important; font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: 12px;
}
html body #footer-widgets .jx-footer-links ul { list-style: none; margin: 0; padding: 0; }
html body #footer-widgets .jx-footer-links li { padding-left: 0 !important; margin-bottom: 8px; }
html body #footer-widgets .jx-footer-links li:before { display: none !important; }
html body #footer-widgets .jx-footer-links a { color: rgba(255, 255, 255, 0.8) !important; }
html body #footer-widgets .jx-footer-links a:hover,
html body #footer-widgets .jx-footer-links a[aria-current] { color: var(--jx-pink) !important; }
html body #et-footer-nav {
  background-color: var(--jx-navy-deep) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
html body #et-footer-nav .bottom-nav { padding: 22px 0 !important; }
html body #et-footer-nav .bottom-nav a {
  color: rgba(255, 255, 255, 0.72) !important;
  font-family: var(--jx-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 1 !important;
}
html body #et-footer-nav .bottom-nav a:hover { color: var(--jx-pink) !important; }
html body #footer-bottom { background-color: var(--jx-navy-deeper) !important; }
html body #footer-bottom,
html body #footer-bottom a,
html body #footer-info { color: rgba(255, 255, 255, 0.65) !important; font-family: var(--jx-body); }
html body #footer-bottom .et-social-icon a { color: #fff !important; }
html body #footer-bottom .et-social-icon a:hover { color: var(--jx-pink) !important; }

/* ---------- Misc Divi bits ---------- */
html body #page-container .et_pb_blurb_content img { border-radius: 0; }
html body #page-container .et_pb_toggle {
  border: 1px solid var(--jx-border) !important;
  border-radius: 12px;
  background: #fff;
}
html body #page-container .et_pb_toggle_title { font-family: var(--jx-body) !important; color: var(--jx-navy) !important; font-weight: 700 !important; }
html body #page-container .et_pb_toggle_title:before { color: var(--jx-pink) !important; }
html body #page-container .et_pb_post .post-meta,
html body #page-container .et_pb_post .post-meta a { color: var(--jx-text); font-family: var(--jx-body); }
html body #page-container .et_pb_image_container img,
html body #page-container .et_pb_post .entry-featured-image-url img { border-radius: 12px; }
html body #page-container .pagination a { color: var(--jx-pink-dark); font-weight: 700; }
html body #sidebar .widgettitle { font-family: var(--jx-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--jx-navy); }

/* Mobile call bar */
html body #callnowbutton { background-color: var(--jx-pink) !important; font-family: var(--jx-body) !important; font-weight: 700; }
html body #callnowbutton .cnb-button-text,
html body #callnowbutton span { font-family: var(--jx-body) !important; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }

@media (max-width: 980px) {
  html body #page-container h1 { letter-spacing: 0; }
}

/* Divi pads the menu by the original (larger) logo width; match the smaller logo */
@media (min-width: 981px) {
  html body #page-container #et-top-navigation { padding-left: 214px !important; }
}

/* Mid-width desktops: tighter menu, phone pill hidden (the number is in the top bar) */
@media (min-width: 981px) and (max-width: 1320px) {
  html body #top-menu li { padding-right: 10px; }
  html body #top-menu > li > a, html body .et-fixed-header #top-menu > li > a { font-size: 12px !important; letter-spacing: 0.03em !important; }
  html body #top-menu > li.jx-nav-cta { display: none; }
  html body #page-container #main-header #logo { max-height: 44px; }
  html body #page-container #et-top-navigation { padding-left: 186px !important; }
}
