/*
 * WOU Four-Year Plans — Frontend Styles
 * All rules scoped to .wou-fyp-container to avoid conflicts with WP themes.
 */

/* ---- Layout ---- */
.wou-fyp-container {
  font-size: 14px;
}
.wou-fyp-controls button {
  background-color: #dbdbdb !important;
}
.wou-fyp-container .wou-fyp-drop-down-container label {
  color: #666;
  font-weight: 700;
  font-family: "Open Sans", Arial, sans-serif;
}

.wou-fyp-container .wou-fyp-program-select {
  max-width: 95%;
}

.wou-fyp-container .wou-fyp-controls {
  display: none; /* shown by JS once data loads */
}

.wou-fyp-container .wou-fyp-expand,
.wou-fyp-container .wou-fyp-collapse {
  float: right;
}

/* ---- Plan heading ---- */
.wou-fyp-container .wou-fyp-major-name {
  font-size: 30px;
  line-height: 1.5;
  font-weight: normal;
}

/* ---- Sample text / disclaimer ---- */
.wou-fyp-container .sample_text,
.wou-fyp-container .sample_text p {
  display: inline-block;
  font-size: 14px;
}

.wou-fyp-container .wou-fyp-total-credits {
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  text-align: right;
}

.wou-fyp-container .wou-fyp-disclaimer ul {
  list-style: disc;
  padding-left: 1.5em;
  border-top: solid medium #ccc;
  padding-top: 0.5em;
  margin-top: 0.5em;
}

.wou-fyp-container .major {
  background-image: none !important;
  height: auto !important;
  width: 100% !important;
  display: inline-block;
}

/* ---- Year divs ---- */
.wou-fyp-container .year {
  border: solid 1px !important;
  padding: 0.2em !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* display is intentionally NOT !important here so jQuery UI's inline
     style="display:none" can hide inactive tab panels.  The rules below
     restore flex layout on visible panels using aria-state targeting. */
  display: flex;
  flex-direction: column !important;
  flex: 1 0 auto !important;
}

/* Active tab panel — restore flex layout.
   Targets panels that are NOT aria-hidden (i.e. the visible one).
   !important is needed to beat jQuery UI's inline style="display:block"
   set when a tab is clicked. */
.wou-fyp-container .year.ui-tabs-panel:not([aria-hidden="true"]) {
  display: flex !important;
}

/* Inactive tab panels — ensure they stay hidden even if a page builder
   (e.g. Divi) applies display:block!important to generic child elements. */
.wou-fyp-container .year.ui-tabs-panel[aria-hidden="true"] {
  display: none !important;
}

/* Show-all / print mode: tabs("destroy") removes .ui-tabs from the plan
   and .ui-tabs-panel / aria-hidden from the year divs, so we restore flex
   on all panels via the parent state instead. */
.wou-fyp-container .wou-fyp-plan:not(.ui-tabs) .year {
  display: flex !important;
}

.wou-fyp-container .year div {
  padding: 0;
  flex: 1 0 auto;
}

.wou-fyp-container .year h3 {
  width: 100%;
  float: left;
}

/* ---- Credits ---- */
.wou-fyp-container .credits,
.wou-fyp-container .year_credits {
  width: 100% !important;
  margin-right: 1em !important;
  text-align: right !important;
  float: left !important;
}

.wou-fyp-container .plan_item_credits {
  float: right !important;
  margin-left: 2em !important;
}

/* ---- Plan container ---- */
.wou-fyp-container .wou-fyp-plan,
.wou-fyp-container .wou-fyp-caveats {
  width: 98%;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Caveats ---- */
.wou-fyp-container .wou-fyp-caveats {
  display: inline-block;
  font-size: smaller;
}

.wou-fyp-container .wou-fyp-caveats ul,
.wou-fyp-container .wou-fyp-caveats p {
  font-size: 12px;
  margin: 0;
}

/* ---- Gen ed indentation ---- */
.wou-fyp-container .gened {
  margin-left: 1em !important;
}

/* ---- Institution label ---- */
.wou-fyp-container .institution {
  font-size: 20px;
  color: #db0a29;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

/* ---- Tooltip / preview tip ---- */
/* Both selectors needed: scoped catches tooltips appended to the container,
   the class-based rule catches them if they land on body instead. */
.wou-fyp-container .ui-tooltip,
.wou-fyp-tooltip.ui-tooltip {
  z-index: 1000 !important;
  background-color: white;
  border: solid 1px #ccc;
  padding: 1em;
  width: clamp(260px, 40vw, 560px) !important;
  max-width: none !important;
  box-sizing: border-box;
}

.wou-fyp-container .tooltip_close {
  position: relative;
  top: -10px;
  padding: 0 0.2em;
  margin-left: 0.3em;
  margin-top: 0.2em;
  float: right;
  font-size: large;
  font-weight: bold;
  border: solid 1px #ccc;
}

/* ---- Year head (hidden until expanded) ---- */
/* Using div/span rather than h3 avoids page-builder heading overrides */
.wou-fyp-container .year_head_label,
.wou-fyp-container .accord_year_head {
  display: none !important;
}

/* ---- jQuery UI tab overrides ---- */
.wou-fyp-container .ui-widget-header,
.wou-fyp-container .tab_years {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: none;
  border-bottom: 5px solid #db0a29 !important;
  background: #fff;
  font-weight: bold;
}

.wou-fyp-container .ui-corner-all,
.wou-fyp-container .ui-corner-top,
.wou-fyp-container .ui-corner-left,
.wou-fyp-container .ui-corner-tl,
.wou-fyp-container .ui-corner-right,
.wou-fyp-container .ui-corner-tr,
.wou-fyp-container .ui-corner-bottom,
.wou-fyp-container .ui-corner-bl,
.wou-fyp-container .ui-corner-br {
  border-radius: 0;
}

.wou-fyp-container .ui-state-default,
.wou-fyp-container .ui-widget-content .ui-state-default {
  border: none;
  font-weight: bold;
  color: #333;
}

.wou-fyp-container .ui-state-active,
.wou-fyp-container .ui-widget-content .ui-state-active {
  border: none;
  background: #db0a29 !important;
  font-weight: bold;
  color: #fff !important;
}

.wou-fyp-container .ui-state-active a,
.wou-fyp-container .ui-state-active a:link,
.wou-fyp-container .ui-state-active a:visited {
  color: #fff;
}

.wou-fyp-container .ui-tabs .ui-tabs-nav {
  margin: 0;
  padding: 0;
}

.wou-fyp-container .ui-tabs .ui-tabs-nav li {
  width: 23%;
  word-wrap: break-word;
  font-size: 12px;
  list-style: none !important;
  float: left;
  position: relative;
  top: 0;
  margin: 1px 0.2em 0 0 !important;
  padding: 0;
  white-space: nowrap;
}

.wou-fyp-container .ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: 1px solid #d3d3d3 !important;
  background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50%
    repeat-x !important;
  font-weight: normal;
  color: #555555 !important;
}
/* ---- Page builder compatibility (Divi, Elementor, etc.) ----
   Page builders aggressively reset ul/li/a inside their module wrappers,
   which breaks the jQuery UI tab navigation.  These rules win back control
   of everything inside .wou-fyp-container regardless of the outer context. */

/* Tab nav wrapper */
.wou-fyp-container .ui-tabs-nav {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  overflow: hidden;
}
.wou-fyp-container .ui-tabs-nav::before,
.wou-fyp-container .ui-tabs-nav::after {
  display: none !important;
}

/* Tab nav items — counteract list resets */
.wou-fyp-container .ui-tabs-nav li {
  float: left !important;
  margin: 1px 0.2em 0 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
  background-image: none !important;
  border-bottom: none !important;
  position: relative !important;
  top: 0 !important;
  white-space: nowrap !important;
}
.wou-fyp-container .ui-tabs-nav li::before,
.wou-fyp-container .ui-tabs-nav li::after {
  display: none !important;
  content: none !important;
}

/* Tab links — counteract theme/builder link resets */
.wou-fyp-container .ui-tabs-nav li a {
  display: block !important;
  padding: 0.5em 1em !important;
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
.wou-fyp-container .ui-tabs-nav li a:hover,
.wou-fyp-container .ui-tabs-nav li a:focus,
.wou-fyp-container .ui-tabs-nav li a:visited {
  text-decoration: none !important;
}

/* Active tab link colour */
.wou-fyp-container .ui-tabs-nav .ui-state-active a,
.wou-fyp-container .ui-tabs-nav .ui-state-active a:link,
.wou-fyp-container .ui-tabs-nav .ui-state-active a:visited,
.wou-fyp-container .ui-tabs-nav .ui-state-active a:hover {
  color: #fff !important;
}

/* Tab panels */
.wou-fyp-container .ui-tabs-panel {
  background: #fff !important;
  border: 1px solid #d3d3d3 !important;
  border-top: none !important;
  padding: 1em !important;
  margin: 0 !important;
  clear: both !important;
  overflow: visible !important;
  float: none !important;
}

/* Prevent builder overflow:hidden from clipping tab content */
.wou-fyp-container .wou-fyp-plan.ui-tabs {
  overflow: visible !important;
}

/* ---- Print ---- */
@media print {
  .wou-fyp-container a[href].class_descrip::after {
    content: none !important;
  }
  .wou-fyp-container a[href].class_descrip {
    text-decoration: none;
  }

  .wou-fyp-container .screen_only,
  .wou-fyp-container .tab_years,
  .wou-fyp-container .preview-tip,
  .wou-fyp-container .accord_year_head {
    display: none;
  }

  .wou-fyp-container .year_head h3 {
    display: block;
  }

  .wou-fyp-container .year,
  .wou-fyp-container .wou-fyp-desc-holder2 {
    font-size: 12px;
    border: none;
  }

  .wou-fyp-container .credits {
    padding: 0;
    margin: 0;
    margin-top: -1.25em;
    display: block;
  }

  .wou-fyp-container .wou-fyp-plan {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: none;
    border-bottom: solid 3px #ccc;
  }

  .wou-fyp-container .year {
    display: flex !important;
    margin: 0;
    margin-bottom: auto;
    float: left;
  }

  /* Force jQuery UI tab panels visible — the JS beforeprint handler destroys
     tabs first, but this is a safety net for browsers that don't fire the event. */
  .wou-fyp-container .ui-tabs-panel[style*="display: none"],
  .wou-fyp-container .ui-tabs-panel[style*="display:none"] {
    display: block !important;
  }
}

/* ---- Mobile ---- */
@media screen and (max-width: 480px) {
  .wou-fyp-container {
    font-size: 12px;
  }

  .wou-fyp-container .wou-fyp-desc-holder2 {
    font-size: 10px !important;
  }

  .wou-fyp-container .wou-fyp-major-name,
  .wou-fyp-container .wou-fyp-total-credits {
    font-weight: bold !important;
    font-size: 18px !important;
  }

  .wou-fyp-container .wou-fyp-program-select {
    max-width: 95%;
  }
}