/* SJCON design refresh - loaded by mu-plugins/sjcon-site-tweaks.php.
   Delete this file to return to the original look. */

:root {
  --sj-blue: #006ac1;
  --sj-blue-dark: #00457a;
  --sj-navy: #153459;
  --sj-ink: #1b2533;
  --sj-text: #4a5565;
  --sj-line: #e6ebf2;
  --sj-radius: 14px;
  --sj-shadow: 0 12px 32px rgba(16, 42, 77, .12);
  --sj-shadow-sm: 0 3px 12px rgba(16, 42, 77, .08);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body #page-container .et-l--post p { line-height: 1.75; }
body #page-container .et-l--post h1,
body #page-container .et-l--post h2,
body #page-container .et-l--post h3 { letter-spacing: -.01em; line-height: 1.2; }
a:focus-visible,
button:focus-visible,
.et_pb_button:focus-visible {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 3px;
}

/* ---------- Header ---------- */
.et-l--header .et_pb_section_0_tb_header {
  box-shadow: 0 1px 0 rgba(15, 30, 60, .06), 0 8px 24px rgba(15, 30, 60, .06);
}
.et-l--header .et_pb_menu .et-menu > li > a {
  transition: color .2s ease;
}
.et-l--header .et_pb_menu .et-menu > li > a:hover { color: var(--sj-blue) !important; opacity: 1 !important; }
/* dropdowns */
.et-l--header .et_pb_menu .et-menu .sub-menu {
  border-top: 3px solid var(--sj-blue) !important;
  border-radius: 0 0 12px 12px;
  box-shadow: var(--sj-shadow) !important;
  padding: 8px 0 !important;
}
.et-l--header .et_pb_menu .et-menu .sub-menu li { padding: 0 8px !important; }
.et-l--header .et_pb_menu .et-menu .sub-menu a {
  border-radius: 8px;
  padding: 10px 14px !important;
  font-size: 14px !important;
  transition: background-color .2s ease, color .2s ease;
}
.et-l--header .et_pb_menu .et-menu .sub-menu a:hover { background: #eef5fc; color: var(--sj-blue) !important; opacity: 1 !important; }

/* ---------- Buttons (site-wide) ---------- */
body #page-container .et_pb_button {
  border-radius: 10px !important;
  letter-spacing: .02em;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}
body #page-container .et_pb_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 60, 120, .28);
}

/* ---------- Hero slider ---------- */
.et_pb_fullwidth_slider_0 .et_pb_slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 25, 48, .15) 0%, rgba(8, 25, 48, .55) 100%);
  z-index: 1;
  pointer-events: none;
}
.et_pb_fullwidth_slider_0 .et_pb_container { position: relative; z-index: 2; }
.et_pb_fullwidth_slider_0 .et_pb_text_overlay_wrapper {
  background: transparent !important;
  padding: 0 !important;
}
.et_pb_fullwidth_slider_0 .et_pb_slide_title {
  font-size: clamp(28px, 4vw, 54px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.et_pb_fullwidth_slider_0 .et_pb_slide_content {
  font-size: clamp(15px, 1.5vw, 20px) !important;
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.et_pb_fullwidth_slider_0 .et_pb_slide_content p { color: #fff !important; }
.et_pb_fullwidth_slider_0 .et_pb_more_button {
  font-size: 18px !important;
  padding: 14px 30px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.et_pb_fullwidth_slider_0 .et-pb-controllers a { width: 10px; height: 10px; border-radius: 10px; transition: width .25s ease; }
.et_pb_fullwidth_slider_0 .et-pb-controllers .et-pb-active-control { width: 26px; }

/* ---------- Cards & images ---------- */
/* program cards: clean card instead of dashed box */
.et-l--post .et_pb_promo.et_pb_with_border {
  border: 1px solid var(--sj-line) !important;
  border-radius: var(--sj-radius) !important;
  background: #fff !important;
  box-shadow: var(--sj-shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease;
}
.et-l--post .et_pb_promo.et_pb_with_border:hover { box-shadow: var(--sj-shadow); transform: translateY(-3px); }
.et-l--post .et_pb_section_2 .et_pb_column { border-radius: calc(var(--sj-radius) + 4px); }
/* content images */
.et-l--post .et_pb_image .et_pb_image_wrap,
.et-l--post .et_pb_image img { border-radius: 12px; overflow: hidden; }
.et-l--post .et_pb_section_3 .et_pb_image .et_pb_image_wrap { box-shadow: var(--sj-shadow-sm); }

/* homepage "Enroll" band: lighter subtitle for contrast on navy */
body.home .et-l--post .et_pb_section_4 .et_pb_text_11,
body.home .et-l--post .et_pb_section_4 .et_pb_text_11 p { color: #d6e6fb !important; }

/* ---------- Footer ---------- */
.et-l--footer a { transition: color .2s ease, opacity .2s ease; }
.et-l--footer a:hover { color: #7cc0ff !important; }
/* social icons hidden until the college has profile links */
.et-l--footer .et_pb_social_media_follow { display: none !important; }

/* ---------- Tablet & phone ---------- */
@media (max-width: 980px) {
  .et-l--header .et_pb_button {
    font-size: 13px !important;
    padding: 9px 14px !important;
    white-space: nowrap;
  }
  .et-l--header .et_pb_button:after { display: none !important; }
  body #page-container .et-l--post p { font-size: 16px !important; }
  .et-l--post .et_pb_section:not(.et_pb_fullwidth_section) { padding-top: 44px; padding-bottom: 44px; }
}

@media (max-width: 767px) {
  .et_pb_fullwidth_slider_0 .et_pb_slide { padding: 0 6%; }
  .et_pb_fullwidth_slider_0 .et_pb_slide_description { padding: 18% 0 !important; }
  .et_pb_fullwidth_slider_0 .et_pb_more_button { font-size: 15px !important; padding: 11px 22px !important; }
  body #page-container .et-l--post h2 { font-size: 26px !important; }
  body #page-container .et_pb_button { font-size: 15px !important; }
  .et_pb_fullwidth_slider_0 .et_pb_slide_title { font-size: 26px !important; }
  .et-l--header .et_pb_menu .et_pb_menu__logo-wrap { width: 150px !important; max-width: 46vw !important; }
  .et-l--header .et_pb_menu .et_pb_menu__logo img { width: 100% !important; max-height: none !important; }
  .et-l--header .et_pb_text_0_tb_header { font-size: 12px !important; }
}

/* About page: give the full-width text row side margins on tablet/phone */
@media (max-width: 980px) {
  body.page-id-4222 .et-l--post .et_pb_row_1 { width: 90% !important; }
}
