/*
  GENERAL
*/

/*// @todo: put all the font-vars in here when moving away from uikit.*/
/*$font-page-title: 'arizona-flare', serif;*/
/*$font-display: 'tiempos', serif;*/
/*$font-display2: 'archivo-condensed', sans-serif;*/
/*$font-body: 'archivo', sans-serif;*/

:root {
  /* @see _variables.scss */
  --brand-1: #003663;
  --brand-2: #f1b821;
  --brand-4: #13747b;
  --brand-5: #1580d9;
  --brand-6: #2bb8f7;
  --brand-8: #141b31; /* ! */
  --brand-9: #f7f7ed;
  --brand-10: #595959;
  --brand-16: #5bc6cb;
  --brand-17: #fafa60;
  --grey-10: #eaeaea;
  --grey-02: #f8f9fa;
  --grey-text: #637381;
  --white: white;
  --black: #212b36;
  --border: #c4cdd5;

  --font-page-title: 'arizona-flare', serif;
  --font-display: 'tiempos', serif;
  --font-display2: 'archivo-condensed', sans-serif;
  --font-body: 'archivo', sans-serif;

  --detail-section-gap: 6px;
  --detail-section-background: var(--brand-9);
  --detail-section-border: none;
  --detail-section-padding: 20px 26px;

  --title-font: var(--font-display2);
  --title-font-size: 1rem;
  --title-letter-spacing: 0.02em;
  --title-color: var(--brand-8);
  --title-line-height: 36px;
  --title-case: uppercase;

  --heading-font: var(--font-body);
  --heading-font-size: 1rem;
  --heading-font-weight: 600;
  --heading-letter-spacing: 0;
  --heading-color: var(--brand-8);
  --heading-line-height: 24px;

  --text-heading-font-family: var(--font-display);
  --text-heading-font-size: 22px;
  --text-heading-color: var(--brand-8);
  --text-heading-font-weight: 400;
  --text-heading-letter-spacing: -0.02em;

  --institution-font-size: inherit;
  --institution-font-weight: 400;
  --institution-margin: 0.5rem;
}

:focus-visible {
  outline: var(--brand-8) dotted 2px;
}
[id="root"][tabindex]:focus-visible {
  outline: none;
}

/* override 3rd party */
a,
a:hover {
  color: var(--brand-1);
}
a:focus,
.ant-btn:focus,
#root .ant-btn-default:focus,
#root .ant-btn:focus {
  color: inherit;
  border: inherit;
  background: inherit;
  outline: var(--brand-8) dotted 2px;
}
a .external-link-image {
  filter: invert(16%) sepia(38%) saturate(2950%) hue-rotate(160deg) brightness(80%) contrast(102%);
}

/* Set the background color of the sticky header */
.ant-affix {
  background-color: white;
}

sup.ant-badge-count.ant-badge-count {
  background-color: var(--brand-4);
}



/* Buttons */
.ant-btn {
  font-family: var(--font-display2);
  letter-spacing: 0.04em;
  font-size: 17px;
  min-height: 40px;
  padding: 0.625rem 1.5625rem;
  text-transform: uppercase;
  border-radius: 10rem;
  height: 1rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.ant-btn-primary,
.ant-btn-secondary,
.no-results-button .ant-btn {
  text-shadow: none;
  box-shadow: none;
  color: var(--brand-1);
  background-color: transparent;
  border-color: var(--brand-1);
  border-width: 2px;

  &:hover {
    color: white;
    background-color: var(--brand-1);
    border-color: var(--brand-1);
    text-decoration: none
  }
}

.no-results-button .ant-btn {
  padding-block: inherit;
}

.ant-btn>.anticon+span,
.ant-btn>span+.anticon {
  margin-left: 0;
}
.ant-switch-inner .anticon {
  vertical-align: 1px;
}

.save-button,
.back-button {
  background-color: transparent;
  border: 2px solid var(--brand-1);
  color: var(--brand-1);
  height: auto;

  &:hover {
    background-color: var(--brand-1);
    color: var(--white);
    border-color: var(--brand-1);
  }
}

.back-button.back-button,
.save-button.save-button {
  /* specificity wars, don't add here unless you need to */
  padding: .625rem 1.5rem;
}
.back-button .back-button-icon {
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5.1 14c-.1 0-.3 0-.4-.2l-3.6-3.4c-.1-.1-.2-.2-.2-.4 0-.1 0-.3.2-.4L4.7 6c.2-.2.6-.2.8 0 .2.2.2.6 0 .8L2.8 9.5h15.8c.3 0 .5.2.5.5s-.2.5-.5.5H2.9L5.5 13c.2.2.2.6 0 .8-.1.1-.3.2-.4.2Z"/></svg>');
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: left center;
  mask-size: 1.5rem;
  width: 2rem;
  height: 10px;
  vertical-align: baseline;
}
.back-button .back-button-icon svg {
  display: none;
}
.save-button:hover,
.save-button:focus {
  svg {
    color: currentColor;
  }
}

  .ant-btn.navbar-application-button {
    color: var(--brand-1);
    background-color: var(--brand-17);
    border-color: var(--brand-1);
    font-size: 17px;

    &:hover {
      color: white;
      background-color: var(--brand-1);
      border-color: var(--brand-1);
    }
  }

  /* headings */
  .conditions-heading,
  .valid-dates-heading,
  .credit-availability-heading {
    font-family: var(--font-display2);
    font-size: 1.25rem;
    line-height: 1.2;
  }

  /* page containers */
  .precedent-details-container,
  .articulation-details-container,
  .saved-credits-container,
  .help-sections-container,
  .search-results {
    --container-side-margin: .9375rem;
    --container-max-width: 1200px;

    gap: 2rem;
    margin: 2rem var(--container-side-margin) 80px;
    width: calc(100% - var(--container-side-margin) * 2);
    max-width: var(--container-max-width);
    align-self: center;

    @media (min-width: 640px) {
      --container-side-margin: 1.25rem;
    }
    @media (min-width: 960px) {
      --container-side-margin: 2.5rem;
    }
  }
  [id="bond-header"] ~ [id='root'] {
    background: var(--grey-9);
  }

  .search-banner-text-container,
  .help-banner-container > div {
    display: flex;
    gap: 1rem;
    flex-flow: column;
  }


  /*
    HEADER NAVBAR
  */
  .navbar-brand-logo-divider,
  .navbar-brand-logo-text {
    display: none;
  }

  .apply-button-divider {
    display: none;
  }

  .navbar-links {
    --navbar-gap: 24px;

    list-style: none;
    width: 100%;
    gap: var(--navbar-gap);
  }
  .navbar-help-link {
    display: flex;
    flex-direction: row;
    -moz-box-pack: center;
    justify-content: center;
    -moz-box-align: center;
    align-items: center;
    gap: 8px;
    border-left: none;
    color: rgb(33, 43, 54);
  }
  @media (min-width: 415px) {
    .navbar-links {
      --navbar-gap: 32px;
    }
  }
  @media (min-width: 769px) {
    .mobile-only {
      display: none;
    }
  }
  @media (max-width: 768px) {
    .header-inner-container > [aria-label="navigation"] {
      width: 100%;
    }
    .navbar-links li {
      display: flex;
      gap: var(--navbar-gap);
      align-items: center;
    }
    .navbar-links > li + li:before {
      content: '';
      display: inline-block;
      width: 1px;
      height: 1.5rem;
      border-left: 1px solid rgb(196, 205, 213);
    }
  }

  .navbar-saved-credits-link div[type="vertical"] {
    position: absolute;
  }

  .institutionCode {
    display: none;
  }

  /* hide saved icon on mobile */
  @media (max-width: 768px) {
    .navbar-saved-credits-link svg {
      display: none;
    }
    .navbar-saved-credits-link:where(:not(:has(sup))) {
      gap: 0;
    }
  }

  .banner-container {
    background-color: var(--brand-1);
  }

  .banner-container .credit-details-button-container,
  .banner-container .saved-credits-back-button-container {
    display: none;
  }

  .view-course-link {
    color: var(--brand-1);
  }

  .banner-title {
    font-family: var(--font-display);
    font-size: 2.465rem;

    @media (min-width: 960px) {
      font-size: 3.25rem;
    }
  }

  /*
    SAVED CREDITS PAGE
  */
  .saved-credits-banner-container {
    margin-block-start: 5rem;
  }
  @media (min-width: 769px) {
    .saved-credits-banner-container {
      margin-block-start: 7.5rem;
    }
  }

  .saved-credits-nav-container {
    justify-content: space-between;
  }
  @media (max-width: 414px) {
    .saved-credits-nav-container {
      flex-direction: column;
      gap: 2rem;
      align-items: flex-start;
    }
  }

  .source-institutions-heading {
    font-family: var(--text-heading-font-family);
    font-size: var(--text-heading-font-size);
    color: var(--text-heading-color);
    font-weight: var(--text-heading-font-weight);
    letter-spacing: var(--text-heading-letter-spacing);
  }

  .credit-item-card,
  .credit-item-card:last-of-type {
    background-color: var(--brand-9);
    border-color: var(--white);
    border-width: 10px 0 0;
  }

  .credit-item-card {
    .credit-points,
    .credit-points-label {
      font-weight: 400;
      color: var(--brand-8);
      font-size: var(--heading-font-size);
    }
    .credit-points {
      font-weight: bold;
    }
  }

  /* If no results, move back button from header into content */
  .saved-credits:where(:not(:has(.saved-credits-container))) .banner-container {
    position: relative;
  }
  .saved-credits:where(:not(:has(.saved-credits-container))) .saved-credits-back-button-container {
    display: block;
    position: absolute;
    bottom: -2rem;
    transform: translateY(100%);
  }
  .saved-credits:where(:not(:has(.saved-credits-container))) > div:last-child {
    margin-block-start: 7rem;
  }

  /*
    PROGRAM SEARCH RESULTS
  */
  span:has(+ .source-credential-heading) {
    font-family: var(--title-font);
    font-size: var(--title-font-size);
    letter-spacing: var(--title-letter-spacing);
    color: var(--title-color);
    line-height: var(--title-line-height);
    text-transform: var(--title-case);
  }

  .credit-item-card,
  .articulation-details-card {
    font-size: 14px;
    color: var(--grey-text);

    * {
      color: inherit;
      font-size: inherit;
    }

    a {
      color: var(--brand-1);
    }

    .cricos-label {
      /* All uppsercase looks larger than rest of text */
      font-size: 0.98em;
    }

    .source-credential-heading,
    .target-subject-heading,
    .target-articulation a:first-child {
      font-family: var(--heading-font);
      font-size: var(--heading-font-size);
      font-weight: var(--heading-font-weight);
      letter-spacing: var(--heading-letter-spacing);
      color: var(--heading-color);
      line-height: var(--heading-line-height);
    }

    .target-articulation a:first-child {
      --heading-color: var(--brand-1);
    }

    .source-credential-subheading,
    .institution-label {
      margin-block-start: var(--institution-margin);
    }
  }


  /*
      CREDIT ITEM DETAILS PAGE > BANNER
    */
  .credit-item-details .banner-title,
  .credit-points-space {
    display: none;
  }

  .credit-points-you-may-receive {
    font-size: 20px;
    line-height: 24px;
  }

  .credit-points-x-credit-points {
    font-family: var(--font-display);
    font-size: 56px;
    line-height: 64px;
    color: var(--brand-17);
  }
  @media (max-width: 768px) {
    .credit-points-x-credit-points {
      font-size: 32px;
      line-height: 40px;
    }
  }

  .credit-points-banner-text-container {
    flex-direction: column;
    gap: 16px;
  }
  @media (max-width: 768px) {
    .credit-points-banner-text-container {
      gap: 8px;
    }
  }
  .search-results {
    margin-top: 0;
  }

  .heart-icon-outline {
    color: var(--brand-8);
    fill: none;
  }

  .heart-icon-filled {
    color: var(--brand-4);
    fill: var(--brand-4);
  }

  .navbar-saved-items-badge sup {
    background-color: var(--brand-2);
  }
  /*
    Tabs
  */

  .tab-pane-tab {
    font-family: var(--font-display2);
    letter-spacing: 0.04em;
    background-color: transparent;
    padding-top: 11px;
    padding-bottom: 10px;
    text-transform: uppercase;
    font-weight: 600;
    white-space: break-spaces;

    @media (max-width: 768px) {
      align-items: end;
    }
  }
  .tab-pane-tab > img {
    @media (max-width: 768px) {
      display: none;
    }
  }
  .tab-bar {
    border-bottom: 3px solid var(--brand-4);
  }
  .tabs-container > div:first-child {
    --max-width-margin: calc((100dvw - var(--container-max-width)) / -2);

    width: 100dvw;
    margin-inline: min((-1 * var(--container-side-margin)), var(--max-width-margin));
  }

  .ant-tabs-tab:hover {
    color: var(--brand-4);
  }

  .ant-tabs-tab-active {
    transition: background-color 0.4s;
    background-color: var(--brand-4);

    img {
      filter: brightness(0) invert(1);
    }
  }

  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: var(--white);
    text-shadow: 0 0 0.25px currentcolor;
  }
  .tab-pane-badge {
    background-color: transparent;
    font-size: 16px;
    color: inherit;
    border: 0px;
  }
  .tab-pane-description {
    font-size: 18px;
    text-align: center;
    width: 100%;
  }
  .tab-pane-tooltip {
    display: none;
  }

  .tab-pane-badge::before {
    content: '(';
  }

  .tab-pane-badge::after {
    content: ')';
  }

  .ant-tabs-ink-bar-animated {
    display: none;
  }
  /*
    ARTICULATION DETAILS PAGE
  */

  .conditions-container a {
    color: var(--brand-1);
    text-decoration: underline;
  }

  .arrangement-details-card {
    border: none;
  }

  .arrangement-details-card img[src*="logo"] {
    align-self: flex-start;
    width: 10rem;
  }

  .articulation-details-arrow-container {
    border: none;
  }

  div:has(+ .articulation-details-arrow-container),
  .articulation-details-arrow-container + div {
    border: var(--detail-section-border);
    background-color: var(--detail-section-background);
    gap: var(--detail-section-gap);
    padding: var(--detail-section-padding);
  }

  .articulation-details-arrow-container + div > span:first-of-type {
    font-family: var(--title-font);
    font-size: var(--title-font-size);
    letter-spacing: var(--title-letter-spacing);
    color: var(--title-color);
    line-height: var(--title-line-height);
    text-transform: var(--title-case);
  }

  .articulation-details-card {
    display: flex;
    flex-flow: column;
    gap: 4.5rem;
    margin-block-end: 1.5rem;
  }

  .articulation-details-card > div {
    padding: 0;
    margin: 0;

    &:last-child > div {
      padding: 0;

      &:first-child {
        font-family: var(--text-heading-font-family);
        font-size: var(--text-heading-font-size);
        color: var(--text-heading-color);
        font-weight: var(--text-heading-font-weight);
        letter-spacing: var(--text-heading-letter-spacing);
      }
    }
  }

  .articulation-details-card .source-credential-heading,
  .articulation-details-card .target-course-label {
    font-family: var(--heading-font);
    font-size: var(--heading-font-size);
    font-weight: var(--heading-font-weight);
    letter-spacing: var(--heading-letter-spacing);
    color: var(--heading-color);
    line-height: var(--heading-line-height);
  }

  .articulation-details-card a .target-course-label {
    color: inherit;
  }

  .articulation-details-card .source-credential-subheading,
  .articulation-details-card .institution-label {
    font-size: var(--institution-font-size);
    font-weight: var(--institution-font-weight);
    /*margin-block-start: var(--institution-margin);*/
  }
  .articulation-details-card .source-credential-subheading + span {
    /*margin-block-start: calc(var(--institution-margin) * 2);*/
  }

  .articulation-details-card table td,
  .articulation-details-card table th {
    border-right-width: 0;
    background-color: var(--brand-9);
    font-size: 1rem;
  }

  .articulation-details-card table th {
    font-family: var(--title-font);
    font-size: var(--title-font-size);
    letter-spacing: var(--title-letter-spacing);
    color: var(--title-color);
    line-height: var(--title-line-height);
    text-transform: var(--title-case);
  }

  .articulation-details-card table td {
    color: var(--brand-8);
  }

  .articulation-details-card table td:last-child,
  .articulation-details-card table th:last-child {
    border-left: 1px solid var(--border);
    border-right-width: 1px;
  }

  .precedent-details-card img[src*="logo"],
  .articulation-details-card img[src*="logo"] {
    width: 0;
    height: 0;
    padding-inline: 66.5px;
    padding-block: 28px;
    mask-image: url('/themes/custom/bond_theme/images/logo-outline.svg');
    mask-repeat: no-repeat;
    background-color: var(--brand-1);
  }

  /*PRECEDENT DETAILS PAGE */

  .precedent-details-card {
    background-color: var(--white);
    margin: 0;
    padding-block-end: 48px;
  }

  .precedent-details-card img[src*="logo"] {
    align-self: flex-start;
  }

  .precedent-details-card .required-credentials-section {
    border: var(--detail-section-border);
    background-color: var(--detail-section-background);
    gap: var(--detail-section-gap);
    padding: var(--detail-section-padding);
  }

  .precedent-details-card .required-credential-heading,
  .precedent-details-card .target-subject-heading {
    font-family: var(--heading-font);
    font-size: var(--heading-font-size);
    font-weight: var(--heading-font-weight);
    letter-spacing: var(--heading-letter-spacing);
    color: var(--heading-color);
    line-height: var(--heading-line-height);
  }

  .precedent-details-card .required-credential-subheading,
  .precedent-details-card .institution-label {
    font-size: var(--institution-font-size);
    font-weight: var(--institution-font-weight);
    margin-block-start: var(--institution-margin);
  }

  .required-credentials-section > span:first-of-type {
    font-family: var(--title-font);
    font-size: var(--title-font-size);
    letter-spacing: var(--title-letter-spacing);
    color: var(--title-color);
    line-height: var(--title-line-height);
    text-transform: var(--title-case);
  }

  .precedent-details-arrow-container {
    border: none
  }

  .precedent-details-arrow-container + div {
    border: var(--detail-section-border);
    background-color: var(--detail-section-background);
    gap: var(--detail-section-gap);
    padding: var(--detail-section-padding);
  }

  .precedent-details-arrow-container + div > span:first-of-type {
    font-family: var(--title-font);
    font-size: var(--title-font-size);
    letter-spacing: var(--title-letter-spacing);
    color: var(--title-color);
    line-height: var(--title-line-height);
    text-transform: var(--title-case);
  }

  /*
    HELP PAGE
  */
  .help-section-heading {
    --text-heading-font-size: 24px;

    font-family: var(--text-heading-font-family);
    font-size: var(--text-heading-font-size);
    color: var(--text-heading-color);
    font-weight: var(--text-heading-font-weight);
    letter-spacing: var(--text-heading-letter-spacing);
  }

  .help-section-heading + div {
    background-color: var(--white);
  }

  .ant-collapse-header {
    padding-block: 1.25rem !important;
  }
  .ant-collapse-content {
    padding-inline-end: 3.5rem;
  }

  .help-section-question {
    color: rgba(0, 0, 0, 0.85);
  }

  /* accordion arrow hover state (specificity hell) */
  .ant-collapse.ant-collapse > .ant-collapse-item > .ant-collapse-header:hover > div.ant-collapse-expand-icon > svg {
    filter: none;
    stroke: var(--brand-8);
  }

  /**********************************
  *  CUSTOM FOR BOND                *
  ***********************************/

  body {
    font-family: var(--font-body);
  }

  .ribbon-header {
    display: none;
  }

  [id="header"] {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    background-color: var(--white);
  }

  @media (max-width: 959px) {
    [id="header"] {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
  }

  .header-outer-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .header-inner-container {
    max-width: 1600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: end;
  }

  @media (max-width: 768px) {
    .header-inner-container {
      justify-content: center;
    }
  }

  /* Hide the logo - No direct class to target */
  .header-inner-container > :first-child {
    display: none;
  }
  @media (min-width: 769px) {
    .ant-affix[style*="position: fixed"] .header-inner-container > :first-child {
      display: revert;
      flex-grow: 1;

      a[href="https://bond.edu.au/"] {
        display: block;
        background-image: url('/themes/custom/bond_theme/images/logo-colour.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 132px;
        height: 52px;

        img { display: none; }
      }
    }
  }

  .uk-modal-page [id="bond-header"] .global-header {
    display: none;
  }

  .uk-modal-dialog {
    height: 100%;
  }

  [data-primary-navigation] {
    height: 100%;
  }

  .container-navhold {
    height: 100vh;
  }

  /* specificity wars... */
  .container-navhold.container-navhold .container-nav.tier0 .uk-nav li.is-large a {
    font-weight: 400;
    line-height: 30px;
  }

  .footer .uk-flex .border-right {
    padding-left: 16px;
    padding-right: 16px;
    border-right: 2px solid white;
  }

  .footer .uk-flex .border-right:last-child {
    border-right: none;
  }

  .footer .uk-flex .border-right:first-child {
    padding-left: 0;
  }

  @media (max-width: 620px) {

    .footer .uk-flex {
      flex-direction: column;
    }

    .footer .uk-flex .border-right {
      border-right: none;
      flex-direction: column;
      padding-left: 0;
    }
  }

  /* nav */
  .footer .uk-container:first-child [class*="uk-width-2-3@m"] > .uk-flex {
    font-size: 1.4rem;
    align-items: center;
    height: 100%;
  }

  /* social icons & flags */
  .footer .footer-social,
  .footer .footer-aoc > .uk-flex:first-child {
    flex-direction: row;
  }
}