/*!
Theme Name: jabil 2025
Author: Gallagher Commubnication | Ian Israel
Version: 1.0.0
Text Domain: jabil-2025

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* GLOBAL */
html {
  scroll-padding-top: calc(114px);
  scroll-behavior: smooth;
}

html.modal-active {
  overflow: hidden;
}

/* VARIABLES */
:root {
  /* Fonts */
  --primary-font: "Roboto", sans-serif;

  /* Colors */
  --primary: #002b49;
  --secondary: #0990cf;
  --tertiary: #669933;

  --accent-one: #b1d34a;
  --accent-two: #15bef0;
  --accent-three: #eceeee;
  --accent-four: #f9f9f9;
  --accent-five: #414042;
  --accent-six: #afafaf;
  --accent-seven: #7fba00;

  --border: var(--accent-three);

  --pale-blue: #f1fbfe;
  --light-blue: #46bfe8;
  --logo-blue: #005288;
  --accent-blue: #00aae6;
  --medium-blue: #003865;
  --dark-blue: #002b49;
  --light-gray: #f5f5f5;
  --accent-grey: #d9d9d9;
  --gray: #818a91;
  --dark-gray: #3c3c3c;
  --red: #e5745b;
  --green: #a3c777;
  --purple: #9f7dbf;

  --background-gradient: linear-gradient(210deg, #84bd41 14.67%, #19bef0 88%);
}

.pale-blue {
  background-color: var(--pale-blue);
}

/* TYPOGRAPHY */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
input,
.copyright,
th,
td {
  font-family: var(--primary-font);
}

h1 {
  font-size: 3rem;
  font-weight: 700;
  color: white;
  margin: 0;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

h1:after {
  content: "";
  background-color: var(--accent-two);
  width: 5rem;
  height: 4px;
}

#index h1::after {
  display: none;
}

h2 {
  font-size: 2.375rem;
  font-weight: 500;
  color: var(--primary);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3rem;
  line-height: normal;
}

h2::after {
  content: "";
  background-color: var(--tertiary);
  width: 2.5rem;
  height: 3px;
}

h2.no-flex {
  display: block;
  position: relative;
  padding-bottom: 1rem;
}

h2.no-flex::after {
  position: absolute;
  left: 0;
  bottom: 0;
}

h2.contact-cat {
  width: 100%;
}

h2.contact-cat::after {
  background-color: var(--secondary);
  width: 100%;
}

h3 {
  font-size: 1.875rem;
  font-weight: 500;
  color: var(--primary);
}

h4 {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

h4:after {
  content: "";
  background-color: var(--accent-one);
  width: 2.5rem;
  height: 3px;
}

h4 + ul {
  margin-top: 1rem;
}

#index.search h4:first-of-type {
  margin-top: 0;
}

h5 {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--medium-blue);
}

h6,
h6 p {
  font-weight: 300;
  font-size: 1.75rem;
  line-height: 2.375rem;
  margin: 0 0 1rem;
  color: var(--primary);
}

h6 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

h6:after {
  content: "";
  width: 2.5rem;
  height: 3px;
  background-color: var(--secondary);
}

p,
li {
  font-size: 1rem;
  color: var(--dark-gray);
}

p.first-elem {
  margin-top: 0;
}

p.note {
  padding: 1rem 0;
  border-top: 1px solid var(--secondary);
  border-bottom: 1px solid var(--secondary);
}

p.footnote {
  font-size: 0.75rem;
}

/* Links */
a {
  transition: 0.3s;
}

a,
a:visited {
  color: var(--secondary);
}

a:hover,
a:focus,
a:active {
  color: var(--medium-blue);
}

a:hover,
a:active {
  outline: 0;
}

a strong {
  font-weight: 400;
}

.banner-text a:hover,
.banner-text a:visited:hover {
  background: white;
  text-decoration: none;
  color: var(--medium-blue);
}

/* Lists */
.main-content li {
  color: var(--accent-two) !important;
}

li p {
  margin: 0 0 0.5rem;
}

.main-content li p .note {
  margin-top: 1rem;
}

table tbody tr td ul li p {
  text-align: left !important;
}

/* 2026 table one-off */
table#annual-enrollment tbody tr td:nth-child(3) {
  text-align: left !important;
}

.body-container ul li p {
  margin-bottom: 10px;
}

/* HEADER */
header {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
  box-shadow: 1px 1px 4px var(--gray);
}

.header-grid {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
  align-items: center;
  padding: 2rem 0;
}

.header-right-container {
  display: flex;
  align-items: center;
}

.utility-container {
  display: flex;
  gap: 1rem;
  align-items: center;
  border-left: 1px solid var(--accent-six);
  padding-left: 1rem;
  margin-left: 1rem;
}

.search-form {
  display: flex;
}

.search-field,
input[type="search"] {
  background-color: var(--medium-blue);
  -webkit-background-color: var(--medium-blue);
  -moz-background-color: var(--medium-blue);
  color: white !important;
  border: none;
  height: 2rem;
  border-bottom-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  -webkit-border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
  padding-left: 1.75rem;
  outline: none;
  outline-offset: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 4rem;
}

::placeholder {
  color: white;
}

.search-submit {
  color: white;
  background-color: var(--gray);
  width: 4rem;
  height: 4rem;
  padding: 3px;
  border: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.search-submit:hover {
  cursor: pointer;
}

.print {
  position: relative;
  width: 2rem;
  height: 2rem;
  background-image: url("/wp-content/uploads/ICON_print-1.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Nav */
/* nav {
     margin-top: 1rem;
 } */

#primary-menu {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

#primary-menu li,
.print li {
  list-style: none;
  transition: 0.3s;
  position: relative;
}

/* Search */
.search-icon {
  height: 1.5rem;
  cursor: pointer;
}

.search-modal-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  justify-content: center;
  align-items: center;
}

.search-modal-container.active {
  display: flex;
}

.search-modal-wrapper {
  width: 80%;
  margin: 0 auto;
  position: relative;
}

.search-modal-wrapper .close {
  position: absolute;
  top: -4rem;
  right: 0;
  background-color: white;
  padding: 0.5rem 1rem;
  transform: rotate(45deg);
  border-radius: 50%;
  color: black;
  padding: 5px 13px 10px 12px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.utility-btn {
  border-radius: 0.25rem;
  border: 1px solid var(--border);
  display: flex;
  padding: 0.5rem;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.square-btn {
  transition: 0.3s;
}

.square-btn,
.square-btn:visited {
  background-color: var(--primary);
  color: white;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: 0.3s;
  cursor: pointer;
}

.square-btn:hover,
.square-btn:active {
  background-color: var(--secondary);
  color: white;
}

.wired-btn {
  border: 2px solid var(--accent-six);
  color: var(--accent-six);
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  text-decoration: none;
}

#primary-menu li.menu-item-has-children:after,
.utility-btn:after {
  content: url("/wp-content/uploads/down-arrow.svg");
}

#primary-menu a {
  transition: 0.3s;
  text-decoration: none;
}

#primary-menu li:hover {
  cursor: pointer;
}

#primary-menu > li {
  display: inline-block;
  padding: 10px;
  border-bottom: 4px solid transparent;
  transition: 0.3s;
}

#primary-menu > li > a {
  color: var(--primary);
  text-decoration: none;
}

#primary-menu > li:hover,
#primary-menu > li.current-menu-item,
#primary-menu > li.current-menu-ancestor {
  /* background-color: var(--light-blue); */
  border-bottom: 4px solid var(--secondary);
}

/* #primary-menu > li:hover > a,
 #primary-menu > li.current-menu-item a,
 #primary-menu > li.current-menu-ancestor > a {
     color: white;
 } */

.sub-menu {
  display: none;
}

#primary-menu > li > .sub-menu.active,
.utility-btn.active .print > .sub-menu {
  display: block;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--accent-four);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
  padding: 1rem;
  z-index: 5;
  border-radius: 0.5rem;
}

#primary-menu > li > .sub-menu.active {
  min-width: 300px;
}

.utility-btn.active .print > .sub-menu {
  width: 180px;
  left: -0.5rem;
  top: calc(100% + 0.5rem);
}

#primary-menu > li.mega > .sub-menu.active {
  width: 60vw;
  left: 50%;
  position: fixed;
  translate: -50%;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-auto-flow: column;
}

#primary-menu .sub-menu li,
.print .sub-menu li {
  padding: 10px 0;
}

#primary-menu .sub-menu a,
.print .sub-menu a {
  /* font-weight: 700; */
  color: var(--dark-gray);
  padding-left: 1rem;
  border-left: 3px solid transparent;
  display: block;
}

#primary-menu .sub-menu li:hover a,
.print .sub-menu li:hover a {
  border-left: 3px solid var(--secondary);
  color: var(--secondary);
}

.print:hover {
}

.print .sub-menu {
  z-index: 15;
  min-width: auto;
}

.print .sub-menu ul {
  padding: 0;
}

.print > .sub-menu.active {
  min-width: 175px;
}

.mobile-icons {
  display: none;
}

.hamburger {
  color: var(--gray);
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 1.75rem;
}

/* FOOTER */
footer {
  background: var(--primary);
}

.main-footer-container {
  padding: 4rem 0 1.75rem;
}

.main-footer-container *,
.socket-container * {
  color: white !important;
}

.main-footer-grid {
  display: grid;
  grid-template-columns: 7rem 70% 1fr;
  gap: 1.75rem;
  width: 80%;
  margin: 0 auto;
}

#footer-menu {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

#footer-menu > li {
  font-weight: 700;
}

#footer-menu > li:last-child {
  display: none;
}

#footer-menu .menu-item-has-children li,
#footer-menu > .sub-menu a {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.375rem;
}

#footer-menu,
#footer-menu ul,
#footer-menu li {
  list-style: none;
  padding: 0;
}

#footer-menu .sub-menu {
  display: block;
}

.footer-contact-container {
  margin-left: 1.75rem;
  padding-left: 1.75rem;
  border-left: 1px solid white;
}

.footer-contact-container h4 {
  margin: 0 0 1rem 0;
  color: white;
  line-height: 1;
}

.footer-contact-container h4::after {
  display: none;
}

.footer-contact-container p,
.footer-contact-container a {
  font-size: 0.75rem;
  margin: 0;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.375rem;
}

.footer-contact-container > :last-child {
  margin-bottom: 0;
}

.footer-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
}

.footer-contact-grid p,
.footer-contact-grid a {
  color: white;
}

.footer-contact-grid .contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 15rem;
  margin: 0 auto;
}

.footer-contact-grid .contact img {
  width: 2rem;
}

.socket-container {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
  padding: 1.75rem 0;
  border-top: 1px solid white;
  font-size: 0.75rem;
}

/* PAGES */
.page-content {
  width: 80%;
  margin: 0 auto;
}

.home .page-content {
  width: 100%;
}

.main-content > :first-child {
  margin-top: 0;
}

.full-width-row {
  margin: 0 -12.5%;
  padding: 4rem 0;
}

.full-width-container {
  width: 80%;
  margin: 0 auto;
}

.col2-row-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
  margin: 4rem 0;
}

/* Device Type Classes */
.android-app,
.android-app-btn,
.apple-app,
.apple-app-btn,
.app-label {
  display: none;
}

@media only screen and (max-width: 1051px) {
  .desktop {
    display: none;
  }
}

/* Tables */
.table-wrapper {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
}

table p {
  margin: 0;
}

.col-4 th {
  width: calc(100% / 4);
}

.col-6 th {
  width: calc(100% / 6);
}

th {
  background-color: var(--primary);
}

th,
th p {
  color: white;
}

th,
td {
  border: 1px solid #ccc;
  padding: 1rem;
  text-align: center;
}

td:first-child {
  text-align: left;
}

.align-btm {
  vertical-align: bottom;
}

.align-btm > td:first-of-type > p:first-of-type {
  margin-bottom: 1rem;
}

table.all-left td {
  text-align: left;
}

/* Callout */
.callout {
  background-color: var(--accent-three);
  padding: 1.75rem 1.75rem 1.75rem 2.25rem;
  position: relative;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.callout::before {
  content: "";
  background: var(--background-gradient);
  width: 0.5rem;
  border-radius: 0.5rem 0rem 0rem 0.5rem;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

.callout :first-child {
  margin-top: 0;
}

.callout :last-child {
  margin-bottom: 0;
}

/* Callout Wired */
.callout-wired {
  padding: 1.75rem;
  border-radius: 8px;
  border: 1px solid var(--accent-two);
}

.callout-wired h4 {
  color: var(--accent-two);
}

.callout-wired h4:after {
  background-color: var(--accent-two);
}

.callout.contact .callout-contact-text {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 1.25rem;
}

/* Left align table content by page */
#life-and-add-insurance td,
#new-hire td,
#tax-advantaged-accounts td {
  text-align: left;
}

tr:nth-child(odd) > td {
  background-color: #f7f7f7;
}

tr:hover > td {
  background-color: #e9e9e9;
}

/*Tabbed Tables*/
.tmo-nh-table.tab th:nth-child(n + 3),
.tmo-nh-table.tab td:nth-child(n + 3) {
  display: none;
}

.tmo-nh-table.tab th:first-child {
  width: 50%;
}

.table-tab {
  display: inline-block;
  border: 1px solid black;
  padding: 10px;
  margin: 0 1em 1em 0;
}

.table-tab:hover {
  cursor: pointer;
}

/* Drop Down Table */
.table-select-container {
  margin-bottom: 0.5rem;
}

.table-select-container select {
  width: 100%;
  padding: 5px 10px;
}

/* Sidebar */
.sidebar-section {
  background-color: var(--accent-four);
  padding: 1.75rem;
  margin-bottom: 1.75rem;
}

.sidebar-section h4 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.sidebar-section h4::after,
.event-section-top h3:after {
  content: "";
  background-color: var(--tertiary);
  width: 2.5rem;
  height: 3px;
}

.sidebar-section p {
  margin-bottom: 1rem;
}

.sidebar-section :last-child {
  margin-bottom: 0;
}

.sidebar-section.notes > :first-child {
  margin-top: 0;
}

.sidebar-wrapper {
  position: sticky;
  top: calc(100px + 2rem);
  max-height: 80vh;
  overflow: auto;
}

/* Front Page Template */
/* #index .hero-container {
     position: relative;
     min-height: 576px;
     background-position: 100% center;
     background-repeat: no-repeat;
 }
 
 #index .hero-text-container {
     background-image: url('/wp-content/uploads/home_hero-left-ii.svg'), url('/wp-content/uploads/home_hero-right-ii.svg');
     background-position: left center, 100% bottom;
     background-size: 60% 100%, auto;
     background-repeat: no-repeat;
     min-height: 576px;
     display: flex;
     align-items: center;
 }
 
 #index .hero-text-wrapper {
     padding-left: 1rem;
     border-left: 2px solid white;
 } 
 
 #index .hero-text-wrapper p {
     color: white;
     line-height: 2;
     font-size: 1.5rem;
 } */

.center-heading {
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 6px solid var(--light-blue);
  width: 60%;
  margin: 0 auto;
}

/* #index .hero-text {
     padding: 4rem 4rem 4rem 10%;
     width: 40%;
 } */

.jabil-experience {
  display: flex;
  gap: 1rem;
}

.jabil-experience:after {
  content: url("/wp-content/uploads/jabil_experience_all_icons.svg");
  width: 120px;
}

.whats-new {
  text-align: center;
}

.whats-new h2 {
  margin-bottom: 2rem;
}

.whats-new-grid {
  display: grid;
  width: 75%;
  margin: 0 auto;
  grid-gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

.new-item {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.new-item p {
  margin: 0;
  text-align: left;
}

.new-item a {
  color: var(--light-blue);
  font-weight: 700;
}

.new-item::before {
  content: url("/wp-content/uploads/icon_document.svg");
  width: 44px;
}

.benefits-for-all {
  background-repeat: no-repeat;
  position: relative;
}

.benefits-for-all > .flag {
  background-color: var(--light-blue);
  margin: 4rem 0 4rem auto;
  padding: 1rem 1rem 1rem 2rem;
  width: 40%;
}

.flag h3 {
  margin: 0;
  color: white;
}

.benefit-for-all-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2rem;
  margin: 0 auto;
  width: 80%;
}

.benefit-tile {
  background-color: white;
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 3rem 2rem;
}

.benefit-tile img {
  height: 109px;
  display: block;
  margin: 0 auto;
}

.benefit-title {
  padding: 0.75rem;
  text-align: center;
  color: white;
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.benefit-tile:nth-child(1) .benefit-title {
  background-color: var(--red);
}

.benefit-tile:nth-child(2) .benefit-title {
  background-color: var(--green);
}

.benefit-tile:nth-child(3) .benefit-title {
  background-color: var(--purple);
}

.benefit-tile li {
  font-size: 1.25rem;
}

.benefit-tile li li {
  font-size: 1rem;
}

/* Home Page Template */
.home .content-grid {
  margin: 0;
}

.dark {
  background-color: var(--primary);
}

.dark * {
  color: white;
}

.light {
  background-color: var(--accent-three);
}

.section-container {
  width: 80%;
  margin: 0 auto;
  padding: 4rem 0;
  text-align: center;
}

.section-container > :first-child {
  margin-top: 0;
}

.light .section-container h2:after,
.dark .section-container h2:after {
  display: none;
}

.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

.link-card {
  text-align: left;
  border-radius: 0.5rem;
  border: 2px solid var(--accent-two);
  position: relative;
  cursor: pointer;
  transition: 0.3s;
}

.link-card a {
  text-decoration: none !important;
  padding: 2.5rem 1.75rem 1.75rem;
  display: block;
}

.link-card:hover {
  border-color: var(--accent-seven);
}

.link-card::before {
  content: url(/wp-content/uploads/ICON_external-link_ACTIVE.svg);
  position: absolute;
  top: -1.25rem;
  left: 1rem;
}

.link-card:hover::before {
  content: url(/wp-content/uploads/ICON_external-link_HOVER.svg);
}

.link-card > :first-child {
  margin-top: 0;
}

.link-card > :last-child {
  margin-bottom: 0;
}

.home-featured-grid {
  display: grid;
  grid-template-columns: 30% 1fr;
  background: url(/wp-content/uploads/jabil-ribbon-home-callout.svg);
  border-radius: 0.5rem;
  background-color: var(--accent-three);
  background-position: -35% 10%;
  background-repeat: no-repeat;
  background-size: 111%;
}

.home-featured-grid .left {
  padding: 2.5rem;
  text-align: left;
}

.home-featured-grid .right img {
  display: block;
  height: 30rem;
  margin: 0 auto;
}

.section-container.dates {
  padding-top: 0;
}

.section-container.dates .wired-btn,
.section-container.dates .wired-btn:visited {
  border: 2px solid var(--primary);
  color: var(--primary);
  transition: 0.3s;
}

.section-container.dates .wired-btn:hover,
.section-container.dates .wired-btn:active {
  border: 2px solid var(--secondary);
  color: var(--secondary);
}

.event-section-top {
  text-align: left;
  display: flex;
  justify-content: space-between;
}

.event-section-top h3 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
}

.home-event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 1.75rem;
}

.home-event {
  background-color: var(--accent-four);
  padding: 1.75rem;
  border-radius: 0.5rem;
  text-align: left;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
}

.benefit:hover,
.home-event:hover {
  box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.home-event :first-child {
  margin-top: 0;
}

.home-event :last-child {
  margin-top: auto;
  margin-bottom: 0;
}

.eyebrow {
  text-transform: uppercase;
  color: var(--accent-five);
  font-size: 1.125rem;
  margin: 0 0 0.5rem;
}

.benefit h4,
.home-event h4 {
  color: var(--secondary);
}

.cta-arrow {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-weight: 700;
  color: var(--accent-five);
  text-decoration: none;
  transition: 0.3s;
}

.cta-arrow:after {
  content: url(/wp-content/uploads/ICON-arrowRight.svg);
}

.cta-arrow:hover {
  color: var(--secondary);
}

.benefits-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

a .benefits-cards-grid .benefit * {
  text-decoration: none;
}

.benefits-cards-grid .benefit {
  background-color: white;
  border-radius: 0.5rem;
  transition: 0.3s;
  text-align: left;
  border: none;
  cursor: pointer;
}

.benefits-cards-grid .benefit a {
  text-decoration: none;
  padding: 1.75rem;
  display: block;
}

.benefits-cards-grid .benefit a > :last-child {
  margin-bottom: 0;
}

.benefits-cards-grid .benefit img {
  border-radius: 0.5rem;
  display: block;
  height: 15rem;
  width: 100%;
  object-fit: cover;
  margin-bottom: 1rem;
}

/* Main Page Template */
.hero-container {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 16rem;
  background: linear-gradient(to right, var(--primary), transparent),
    url(/wp-content/uploads/jabil-ribbon-hero.svg);
  background-color: var(--primary);
  background-position: 100% center;
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 4rem 10%;
}

.home .hero-container {
  background: revert;
  background-position: 25% center;
  background-repeat: no-repeat;
  background-size: cover;
}

#important-note .hero-container,
#legal-notices .hero-container,
/* #contacts .hero-container, */
#index.search .hero-container,
#new-hire-video .hero-container,
#leaving-jabil .hero-container,
#other-events .hero-container {
  min-height: 0;
}

.hero-text-container {
  height: 100%;
  width: 50%;
}

.home .hero-text-container {
  background: url(/wp-content/uploads/jabil-ribbon-callout.svg), var(--primary);
  background-repeat: no-repeat;
  background-size: 107% 242%;
  background-position: 100% 25%;
  text-align: right;
  padding: 4rem 2.34rem;
}

/* #important-note .hero-text-container,
 #legal-notices .hero-text-container,
 #contacts .hero-text-container,
 #index.search .hero-text-container,
 #new-hire-video .hero-text-container,
 #leaving-jabil .hero-text-container,
 #other-events .hero-text-container {
     background-image: none;
     background-color: var(--accent-blue);
     min-height: 0;
 } */

.hero-text-wrapper {
  padding-left: 1rem;
  border-left: 2px solid white;
}

.hero-text-wrapper p {
  color: white;
  line-height: 2;
  font-size: 1.5rem;
}

/* .hero-text {
     padding: 4rem 4rem 4rem 10%;
     width: 50%;
 } */

.banner-container {
  background-color: var(--accent-seven);
}

/* #important-note .banner-container,
 #legal-notices .banner-container,
 #index.search .banner-container,
 #new-hire-video .banner-container,
 #leaving-jabil .banner-container,
 #other-events .banner-container {
     display: none;
 } */

#new-hire-video .hero-container {
  display: none;
}

.banner-text {
  width: 80%;
  padding: 1.25rem 0;
  text-align: center;
  margin: 0 auto;
}

.banner-text > :first-child {
  margin-top: 0;
}

.banner-text > :last-child {
  margin-bottom: 0;
}

.banner-text *,
.banner-text a:visited {
  color: white;
}

.banner-text p {
  font-size: 1.625rem;
  font-weight: 700;
}

.banner-text .square-btn {
  margin-left: 1rem;
}

.content-grid {
  display: grid;
  grid-template-columns: 65% 1fr;
  grid-gap: 4rem;
  margin: 4rem 0;
}

.content-grid.no_sidebar {
  grid-template-columns: 1fr;
}

/* #contacts .content-grid {
     grid-template-columns: 35%;
 } */

/* #contacts .main-content {
     display: none;
 } */

.pdf-resources,
.resources ul {
  padding: 0;
}

.pdf-resources li,
.resources li {
  list-style: none;
}

.pdf-resources li:not(:last-child),
.resources li:not(:last-child) {
  margin-bottom: 1rem;
}

/* Contacts Template */
.contact-heading {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 2rem;
}

.contact-heading img {
  width: 4rem;
}

.contact-heading h3 {
  margin: 0;
}

.contacts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2rem;
  margin-bottom: 4rem;
}

.contact-tile {
  padding: 3rem;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-tile h4 {
  margin: 0;
}

.contact-tile p {
  margin: 0;
}

.contact-icon {
  width: 40px;
  margin-right: 1rem;
  float: left;
  transition: 0.3s;
}

/* .benefit {
     padding-bottom: 1rem;
     border-bottom: 1px solid var(--light-blue);
 } */

.contact-btm-container {
  background-color: var(--pale-blue);
  padding: 0.5rem;
  display: flex;
  gap: 1rem;
  margin-top: auto;
}

.contact-btm-container img {
  transition: 0.3s;
  width: 3rem;
}

.contact-btm-container img:hover,
.contact-icon:hover {
  transform: scale(1.2);
}

/* Search Results Template */
.search-grid {
  display: grid;
  grid-template-columns: 65% 1fr;
  grid-gap: 4rem;
  margin: 4rem 0;
  min-height: calc(100vh - 348px);
}

.pdf-resources-wrapper {
  background-color: var(--light-gray);
  padding: 3rem 2rem;
}

.pdf-resources-wrapper:before {
  content: url("/wp-content/uploads/icon_pdf.svg");
  width: 25%;
  margin-bottom: 2rem;
  display: block;
}

/* .pdf-resources li {
     color: var(--accent-blue);
 } */

/* .pdf-resources a {
     font-weight: 700;
     font-size: 1.25rem;
 } */

/* Country Selector */
.country-selector-container {
  position: relative;
  width: 2rem;
}

.country-selector-container * {
  font-family: var(--primary-font);
}

.country-selector-container img {
  width: 2rem;
  display: block;
}

.country-selector {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -0.5rem;
  min-width: auto;
  background-color: var(--accent-four) !important;
  box-shadow: 0px 4px 12px rgb(0 0 0 / 25%);
  padding: 1rem;
  border-bottom: 1px solid var(--accent-six);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.country-selector > ul {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  box-shadow: 0px 10px 12px rgb(0 0 0 / 25%);
  padding: 1rem;
  background-color: var(--accent-four);
}

.utility-btn.active .country-selector-container .country-selector,
.utility-btn.active .country-selector-container .country-selector > ul {
  display: block;
  background-color: var(--accent-four);
}

.utility-btn.active .country-selector-container .country-selector .wgcurrent {
  border: none;
}

.utility-btn.active
  .country-selector-container
  .country-selector
  .wgcurrent
  span {
  font-weight: 700;
}

.utility-btn.active
  .country-selector-container
  .country-selector
  .wgcurrent::after {
  display: none;
}

.utility-btn.active .country-selector-container .country-selector li {
  list-style: none;
  transition: 0.3s;
  position: relative;
  display: block;
}

.utility-btn.active .country-selector-container .country-selector li a {
  text-decoration: none;
  color: var(--dark-gray);
  padding-left: 1rem;
  border-left: 3px solid transparent;
  display: block;
}

.utility-btn.active .country-selector-container .country-selector li:hover a {
  border-left: 3px solid var(--secondary);
  color: var(--secondary);
}

.country-selector.weglot-inline label {
  display: block;
  font-weight: 700;
  color: black;
  border-bottom: 2px solid var(--accent-grey);
}

.country-selector.weglot-dropdown span {
  margin: 0 0 0 3px;
  line-height: 1;
  padding: 0 0 1rem;
  height: auto;
}

/* Cards */
.contact-cards-grid,
.bag-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.contact-cards-grid {
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.contact-cards-grid:last-child {
  margin-bottom: 0;
}

.card {
  background-color: var(--accent-four);
  padding: 1.75rem;
  border-radius: 0.5rem;
}

.card > :first-child {
  margin-top: 0;
}

.card > :last-child {
  margin-bottom: 0;
}

.card h3 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--accent-five);
  font-weight: 500;
}

.card h3::after {
  content: "";
  width: 2.5rem;
  height: 3px;
  background-color: var(--secondary);
}

.card > ul {
  padding: 0 0 0 1.75rem;
}

.card > ul > li ul {
  padding: 0 0 0 1.5rem;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}

.event {
  display: flex;
  padding: 1.75rem;
  background-color: var(--accent-four);
}

.date-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 25%;
  padding-right: 1.75rem;
  border-right: 1px solid var(--primary);
}

.month {
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
}

.day {
  color: var(--primary);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.time {
  color: var(--primary);
  font-size: 1rem;
  font-weight: 400;
}

.details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  padding: 0 1.75rem;
}

.cta {
  display: flex;
  align-items: center;
}

/* Personas */
.jabil-persona {
  background-color: var(--accent-four);
  border-radius: 0.5rem;
  padding: 1.75rem;
  display: flex;
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}

.jabil-persona > :last-child {
  margin-bottom: 0;
}

.persona-img {
  background-image: url(/wp-content/uploads/persona-img-ring.svg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 7.4rem;
  height: 7.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.persona-img img {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  display: block;
}

/************************************************************************/
/****************************** RESPONSIVE ******************************/
/************************************************************************/
@media only screen and (max-width: 1424px) {
  .header-grid {
    flex-wrap: wrap;
  }

  .logo {
    padding-left: 10px;
  }

  .header-right-container {
    width: 100%;
    justify-content: space-between;
  }

  .main-footer-grid {
    grid-template-columns: 7rem 64% 1fr;
  }
}

@media only screen and (max-width: 1051px) {
  .header-grid {
    flex-wrap: nowrap;
  }

  #primary-menu li.menu-item-has-children:after,
  .utility-btn:after {
    content: "";
  }

  #primary-menu > li:hover,
  #primary-menu > li.current-menu-item,
  #primary-menu > li.current-menu-ancestor {
    border-bottom: none;
  }

  .header-right-container {
    width: auto;
  }

  .utility-container {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }

  .mobile-icons {
    display: block;
    margin-left: 25px;
  }

  .header-grid {
    width: 90%;
  }

  .print {
    display: none;
  }

  .utility-btn .print {
    display: revert;
  }

  nav {
    display: none;
    padding: 2rem;
    background-color: white;
    position: absolute;
    left: 0;
    top: 106px;
    width: 100vw;
    box-shadow: 1px 1px 4px var(--gray);
    max-height: 80vh;
    overflow-x: auto;
  }

  #primary-menu {
    flex-direction: column;
  }

  #primary-menu li.menu-item-has-children:after,
  .utility-btn:after {
    content: "";
  }

  nav .sub-menu {
    display: block;
    margin-left: 1rem;
    padding: 0;
  }

  #primary-menu > li > .sub-menu.active {
    display: block;
    position: static;
    min-width: auto;
    box-shadow: none;
    padding: 0;
  }

  #primary-menu > li:hover,
  #primary-menu > li.current-menu-item,
  #primary-menu > li.current-menu-ancestor {
    background-color: transparent;
  }

  #primary-menu > li:hover > a,
  #primary-menu > li.current-menu-item a,
  #primary-menu > li.current-menu-ancestor > a {
    color: black;
  }

  #primary-menu > li > .sub-menu a,
  #primary-menu > li:hover > .sub-menu a {
    border: none;
    padding-left: 0;
  }

  #index .hero-container {
    background-position: 65% center;
  }

  .utility-btn {
    gap: 0;
  }

  .full-width-row {
    margin: 0 -2rem;
  }

  .page-content,
  .socket-container {
    width: 100%;
    padding: 2rem;
  }

  .benefits-for-all > .flag {
    width: 50%;
    margin: 6rem 0 2rem 0;
  }

  #footer-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 980px) {
  .hero-text-container,
  #index .hero-text-container {
    position: relative;
    background-size: 0%, 50% 100%;
    background-position: center, 100%;
  }

  #index .hero-container {
    background-position: 60% center;
  }

  .header-grid {
    width: 100%;
    padding: 0.5rem 2rem;
  }

  .page-content {
    margin: 0 auto;
  }

  .page-content,
  .full-width-container,
  .socket-container {
    width: 100%;
    padding: 2rem;
  }

  #index .page-content {
    margin-top: 0;
    padding-top: 0;
  }

  #index.search .search-grid {
    grid-template-columns: 1fr;
  }

  #index .section-container {
    width: 100%;
  }

  .event-grid,
  .bag-cards-grid,
  .contact-cards-grid,
  .main-footer-grid,
  .benefits-cards-grid,
  .home-event-grid,
  .quick-links-grid {
    grid-template-columns: 100%;
  }

  .benefits-cards-grid {
    margin: 0 2rem;
  }

  .callout.contact .callout-contact-text {
    display: revert;
  }

  .event-grid {
    gap: 1rem;
  }

  .event {
    padding: 1rem;
    flex-wrap: wrap;
    gap: 1rem 0;
  }

  .footer-contact-container {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }

  .content-grid {
    grid-template-columns: 1fr;
    margin: 0;
  }

  .full-width-row {
    padding: 2rem;
  }

  .whats-new {
    padding: 2rem 3rem;
  }

  .whats-new .new-item {
    text-align: left;
  }

  .benefit-for-all-grid {
    grid-template-columns: 1fr;
  }

  .benefits-for-all > .flag {
    margin: 6rem 0 2rem -2rem;
    width: 50%;
    padding: 1rem 4rem;
  }

  #important-note .hero-container, 
     #legal-notices .hero-container, 
	 #leaving-jabil .hero-container, 
     /* #contacts .hero-container,  */
     #index.search .hero-container,
     #important-note .hero-text-container, 
     #legal-notices .hero-text-container,
	 #leaving-jabil .hero-text-container,
     /* #contacts .hero-text-container,  */
     #index.search .hero-text-container {
    height: auto;
  }

  #important-note .hero-text, 
     #legal-notices .hero-text, 
	 #leaving-jabil .hero-text
     /* #contacts .hero-text,  */
     /* #index.search .hero-text  */ {
    margin-top: 0;
  }

  .contacts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .socket-container {
    flex-direction: column;
    gap: 0.5rem;
  }

  .hero-container {
    background-position: 100% 100%;
    background-size: cover;
  }

  .sidebar-section.this-page {
    display: none;
  }

  .jabil-persona {
    flex-direction: column;
  }
}

@media only screen and (max-width: 479px) {
  #index .hero-text-container {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    height: auto;
  }

  .hero-text-container {
    width: 100%;
  }

  .banner-text .square-btn {
    display: block;
  }

  .header-grid {
    flex-direction: column;
    padding: 1rem;
  }

  .new-item:before {
    margin-right: 10px;
  }

  .utility-container {
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .search-form,
  .search-field {
    width: 100%;
  }

  nav {
    top: 125px;
    max-height: 75vh;
  }

  #index .page-content {
    margin-top: 1rem;
  }

  #index.search .page-content {
    margin-top: 0;
  }

  .full-width-row {
    margin: 0 -1rem;
  }

  .page-content,
  .full-width-container,
  .socket-container {
    padding: 1rem;
  }

  .full-width-container,
  .benefits-for-all {
    padding: 0;
  }

  .benefits-for-all {
    background-image: none !important;
  }

  .benefits-for-all > .flag {
    margin: 0 0 2rem;
    width: 100%;
  }

  .col2-row-grid,
  .whats-new-grid,
  .main-footer-grid {
    grid-template-columns: 1fr;
    grid-gap: 2rem;
  }

  .details,
  .date-section {
    flex: 2;
    width: auto;
  }

  .quick-links-grid {
    margin: 0 1rem;
  }

  .home-featured-grid {
    grid-template-columns: 100%;
    background-size: 200%;
    background-position: 100% 100%;
  }

  .home-featured-grid .left {
    padding: 0 2.5rem;
  }

  .event-section-top {
    flex-direction: column;
    gap: 1rem;
  }

  .home-featured-grid .right img {
    height: auto;
  }

  #index h2,
  .footer-contact-container h4 {
    line-height: 1.2;
  }

  .jabil-experience {
    flex-direction: column;
  }

  #index .hero-container {
    background-position: 75% center;
    height: auto;
  }

  .hero-container {
    background-position: 100% 100%;
    background-size: 200%;
  }

  .contacts-grid {
    grid-template-columns: 1fr;
  }

  #footer-menu {
    grid-template-columns: 100%;
  }

  /* Tables */
  .table-wrapper {
    width: calc(100vw - 2rem);
  }
}

@media print {
  header {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    box-shadow: none;
  }

  .header-grid,
  .page-content {
    width: 100%;
  }

  footer,
  .square-btn,
  .wired-btn,
  .whats-new,
  #index .right,
  nav,
  .utility-container,
  .resources,
  .socket-container,
  .contact-btm-container,
  .sidebar-section.this-page {
    display: none;
  }

  p,
  li,
  .notes,
  .contact-tile,
  .section-container,
  .link-card {
    page-break-inside: avoid;
  }

  .break-before {
    page-break-before: always;
  }

  h1,
  .page-content h2,
  h3,
  h4,
  h5 {
    color: #003865;
  }

  p,
  .link-card *,
  .banner-text p {
    color: black;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
  th {
    background-color: #003865;
  }

  th,
  th p {
    color: white;
  }

  .hero-container {
    min-height: 0;
    padding: 0;
  }

  .hero-text-container {
    width: 100%;
  }

  .hero-text {
    padding: 2rem;
  }

  .hero-text h1 {
    margin-top: 5rem;
  }

  .banner-container {
    background-color: #003865;
    padding: 2rem 0;
  }

  /*.jabil-banner {*/
  /*       background-image: url(/wp-content/uploads/Jabil-2020-AE_point-of-lights-strip-scaled-1.jpeg);*/
  /*}*/

  /*#index .hero-text-container {*/
  /*    background-image: url(/wp-content/uploads/home_hero-left-ii.svg), url(/wp-content/uploads/home_hero-right-ii.svg);*/
  /*}*/

  /*.hero-text-container {*/
  /*    background-image: url(/wp-content/uploads/page_hero-left-ii.svg), url(/wp-content/uploads/page_hero-right-ii.svg);*/
  /*}*/

  /*.notes:before {*/
  /*    content: url(/wp-content/uploads/icon_lightbulb.svg);*/
  /*}*/

  /*.notes {*/
  /*    background-color: #F1FBFE;*/
  /*    margin-top: 2rem;*/
  /*}*/

  /*.page-id-103 .notes,*/
  /*.page-id-173 .notes,*/
  /*.page-id-182 .notes,*/
  /*.page-id-184 .notes,*/
  /*.page-id-245 .notes,*/
  /*.page-id-250 .notes {*/
  /*    display: none!important;*/
  /* }*/

  .jabil-experience:after {
    content: url(/wp-content/uploads/jabil_experience_all_icons.svg);
    width: 120px;
  }

  /* Home Page */
  .pale-blue {
    background-color: #f1fbfe;
  }

  .benefit-for-all-grid {
    width: 50% !important;
    margin: 0 auto !important;
  }

  .benefit-tile {
    box-shadow: none;
    border: 1px solid black;
  }

  .home-featured-grid,
  .main-footer-grid,
  .benefits-cards-grid,
  .home-event-grid,
  .quick-links-grid,
  .content-grid.has_sidebar {
    grid-template-columns: 100%;
  }

  /* Medical Page */
  #medical table {
    table-layout: fixed;
  }

  #medical th,
  #medical td,
  .med-table th,
  .med-table td {
    width: 25% !important;
  }

  /* Contacts Page */
  .contacts-grid {
    grid-template-columns: 50% 50% !important;
    grid-gap: 1rem !important;
  }

  .contact-tile {
    padding: 1rem;
    box-shadow: none;
    grid-gap: 1rem;
  }

  /* Important Note Page */
  #important-note .notes {
    display: none;
  }

  /*Dynamic Tables*/
  .table-select-container {
    display: none;
  }

  table.drop-down tr th:not(:first-of-type),
  table.drop-down td:not(:first-of-type),
  table.drop-down tr th,
  table.drop-down tr td {
    display: revert !important;
  }
}