/* RINVOQ.COM.AU */
:root {
  /***
  * SET DEFAULTS
  ***/

  /* Defaults */
  --bs-primary: var(--black) !important;
  --bs-secondary: var(--white) !important;
  --bs-heading-font-color: var(--black) !important;

  /*--bs-body-font-size: 1rem;
  --heading-1-font-size: calc(var(--bs-body-font-size)*3) !important;
  --heading-2-font-size: calc(var(--bs-body-font-size)*2.25) !important;
  --heading-3-font-size: calc(var(--bs-body-font-size)*2) !important;
  --heading-4-font-size: calc(var(--bs-body-font-size)*1.75) !important;
  --heading-5-font-size: calc(var(--bs-body-font-size)*1.5) !important;
  --heading-6-font-size: calc(var(--bs-body-font-size)*1.3) !important;*/

  --heading-1-font-size: clamp(1.38rem, 2.86vi + 0.67rem, 2.95rem) !important;
  --heading-2-font-size: clamp(1.3rem, 2.12vi + 0.77rem, 2.46rem) !important;
  --heading-3-font-size: clamp(1.21rem, 1.52vi + 0.83rem, 2.05rem) !important;
  --heading-4-font-size: clamp(1.14rem, 1.04vi + 0.88rem, 1.71rem) !important;
  --heading-5-font-size: clamp(1.07rem, 0.65vi + 0.9rem, 1.43rem) !important;
  --heading-6-font-size: clamp(1rem, 0.34vi + 0.91rem, 1.19rem) !important;
  --bs-body-font-size: clamp(0.94rem, 0.1vi + 0.91rem, 0.99rem) !important;

  --bs-gutter-x: 1.5rem !important;

  /* Buttons */
  --border-radius: 8px !important;
  
  /* Videp Player */
  --video-play-btn-size: 1.5em !important;

  /* Colours */
  --white: #ffffff !important;
  --white-transparent-65: rgba(255, 255, 255, 0.65) !important;
  --white-transparent-90: rgba(255, 255, 255, 0.9) !important;
  --gold: #ffd100 !important;
  --gold-light: #ffe159 !important;
  --gold-light-50: #ffe880 !important;
  --gold-transparent-90: rgba(255, 209, 0, 0.9) !important;
  --plum: #b61752 !important;
  --plum-light: #d2688f !important;
  --black:#25282a !important;
  --black-light: #717375 !important;
  --black-transparent-80: rgba(37,40,42,0.8) !important;

  --blue: #366b8f !important;
  --gold-pale: #fffae6 !important;
  --orange-pale: #f3efec !important;
}

/***
 * BASE ELEMENTS
 ***/

h1,
h2,
h3,
.lead {
  font-weight: 700 !important;
}

h1 {
  margin-bottom: 1.25rem !important;
  line-height: 1.25 !important;
}

p {
  line-height: 1.5 !important;
}

.headline-text .large--title {
  font-size: var(--heading-3-font-size) !important;
  line-height: 3rem !important;
}

a {
  border: unset !important;
  text-decoration: underline !important;
  color: var(--plum) !important;
}
a:hover {
  box-shadow: unset !important;
  color: var(--plum-light) !important;

  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
}

a.btn {
  min-width: min-content !important;
  font-weight: 700 !important;
  border-radius: var(--border-radius) !important;
}
a.btn::after {
  background-color: unset !important;
}
a.btn-primary {
  background: var(--gold) !important;
  border: unset !important;
  color: var(--black) !important;
  text-decoration: unset !important;
  max-width: 60% !important;
}
a.btn-primary:hover {
  background: var(--gold-light) !important;
}

hr.border-primary {
    background: var(--gold) !important;
    height: 1.25ch !important;
    border: unset !important;
    border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
}
hr.border-secondary {
  background: var(--gold) !important;
  border: unset !important;
  border-radius: var(--border-radius) !important;
}

.column-control-wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/***
 * BASE COMPONENTS
 ***/

 /* Card */
#card-blue {
  background: var(--blue) !important;
  border-radius: var(--border-radius) !important;
  overflow: hidden !important;
  margin-bottom: 2rem !important;
  padding: 0 !important;
}
#card-blue .headline-text {
  padding: 0 1.75rem;
}
#card-blue a {
  color: var(--gold) !important;
}
#card-blue a:hover {
  color: var(--gold-light) !important;
}

#card-orange-pale,
#card-gold-pale {
  border-radius: var(--border-radius) !important;
  overflow: hidden !important;
  padding: 3rem 2rem 1.5rem 2rem !important;
  margin-bottom: 2rem !important;
}
#card-gold-pale {
  background: var(--gold-pale) !important;
}
#card-orange-pale {
  background: var(--orange-pale) !important;
}

.rounded {
  border-radius: var(--border-radius) !important;
}

 /*Accordion*/
.accordion {
  border-bottom: 1px solid !important;
  margin-bottom: 2.5rem !important;
}
h2.cmp-accordion__header {
  margin-bottom: 1.5rem !important;
  padding-bottom: 1rem !important;
}
h2 .cmp-accordion__button {
  padding: 0 !important;
}
h2 .cmp-accordion__title {
  font-size: var(--heading-2-font-size) !important;
  font-weight: bold !important;
}

/* Carousel */
.carousel__action {
  align-items: flex-end !important;
  line-height: 1.2 !important;
  font-size: 3rem !important;
}
.carousel-item {
  max-height: 60rem !important;
}
.carousel {
  padding: 0.5rem !important;
  text-align: center !important;
}
.carousel img {
  max-height: 20rem !important;
  width: auto !important;
  place-self: center !important;
}

/* Video Player */
.vjs-big-play-button {
  margin-top: calc(var(--video-play-btn-size)/2*-1) !important;
  margin-left: calc(var(--video-play-btn-size)/2*-1) !important;
  width: var(--video-play-btn-size) !important;
  height: var(--video-play-btn-size) !important;

  line-height: 1.5 !important;
  font-size: 3rem !important;
}
.carousel__action--previous {
  left: calc(var(--video-play-btn-size)/4*-1) !important;
}
.carousel__action--next {
  right: calc(var(--video-play-btn-size)/4*-1) !important;
}

/***
 * GLOBAL HEADER
 * Three tier navigation
 ***/

/* Layout */
.experiencefragment:has(.global-header) .container {
  max-width: unset !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.global-header {
  display: inline !important;
  padding: 0 !important;
}
.global-header li a {
  color: var(--black) !important;
  text-decoration: unset !important;
}

/* Logo */
.global-header .global-header-logo {
  width: 1110px !important;
  place-self: center !important;
  margin: 1.25rem 0 !important;
}

.global-header .global-header-logo img {
  height: 70px !important;
}

/* Global nav */
.global-header .global-header-navigation .meta-navigation__inner li {
  flex: 1 1 auto !important;
  padding: 1em 0.75em !important;
  text-align: center !important;
}
.global-header .global-header-navigation .meta-navigation__inner li:hover {
  cursor: pointer !important;
}

.global-header-menu, .global-header-menu.navbar-collapse {
  margin: unset !important;
  justify-content: space-evenly !important;
}

#navbarText {
  width: 100% !important;
}

#navbarText > div {
  width: 100% !important;
  max-width: 1110px !important;
}

/* Level 1 nav */
.global-header .global-header-navigation {
  width: 100% !important;
  background: var(--gold) !important;
}
.global-header .global-header-navigation .meta-navigation__inner > ul > li > a {
  font-weight: bold !important;
}

.global-header .global-header-navigation .meta-navigation__inner > ul > .sub-menu-parent::after {
  content: "\25bc" !important;
  font-size: 0.75rem !important;
}

/* Level 2 nav */
.global-header .global-header-navigation .meta-navigation__inner > ul > li > .sub-menu {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-column-gap: 4ch !important;

  left: 50% !important;
  transform: translate(-50%, 0) !important;

  width: max-content !important;
  padding: 0 4ch !important;
}
.global-header .global-header-navigation .sub-menu a {
  color: var(--black) !important;
  text-align: center !important;
}
.global-header .global-header-navigation .meta-navigation__inner > ul > li:hover {
  background: var(--gold-light) !important;
}
.global-header .global-header-navigation .sub-menu li:hover {
  background: var(--gold-pale) !important;
}
.global-header .global-header-navigation .meta-navigation__inner > ul > li > .sub-menu > li:not(li:nth-last-child(-n+2)) {
  border-bottom: 1px solid var(--gold) !important;
}

/* Level 3 nav */
.global-header .global-header-navigation .sub-menu {
  border: 1px solid var(--gold) !important;
  border-radius: var(--border-radius) !important;
}
.global-header .global-header-navigation .meta-navigation__inner > ul > li > ul .sub-menu {
  padding: 0 !important;
  top: 0 !important;
}

/***
 * GLOBAL FOOTER
 ***/

#global-footer .global-footer a {
  color: var(--black) !important;
  text-decoration: underline !important;
}
#global-footer .global-footer a:hover {
  color: var(--black-light) !important;
}

/***
 * EXTERNAL POP-UP
 ***/

.external-link-popup {
  text-align: center !important;
}
.external-link-popup .modal-dialog {
  top: 25% !important;
  margin: 0 auto !important;
}
.external-link-popup h2 {
  margin-bottom: 2rem !important;
}
.external-link-popup p {
  line-height: 1.75 !important;
}
.external-link-popup a {
  min-width: 10rem !important;
  width: 100% !important;
}

/***
 * ACCESS CODE
 * Home page containing pin login for auth
 ***/

.content-area:has(#access-code-background) {
  min-height: auto !important;
}

#access-code-background {
  background-position-y: bottom !important;
}

.pin-login {
  background: unset !important;
  max-width: none !important;
  margin: 10vw 0 15vw 0 !important;
}
.pin-login__inner {
  background: var(--gold-transparent-90) !important;
  max-width: 40rem !important;
  padding: 2rem 1.5rem !important;
}

.pin-login .form-control {
  padding: 0 1.25rem 0 1.25rem !important;
}
.pin-login_toggle_text {
  display: none !important;
}

button.pin-login__submit {
  border-radius: var(--border-radius) !important;
  border: unset !important;
  padding: 0.75rem 1.5rem !important;
  background-color: var(--black) !important;
  color: var(--white) !important;
}
button.pin-login__submit:hover {
  color: var(--black) !important;
  background-color: var(--white) !important;

  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
}

/***
 * OPTIONS LANDING
 ***/

.page:has(#options-landing) {
  padding: 0 !important;
}

#options-landing {
  height: 95vh !important;
  background-position-y: bottom !important;
}
#options-landing img:first-of-type {
  max-width: 20rem !important;
  place-self: center !important;
  margin: 5rem 0 4rem 0 !important;
}

#options-landing-content {
  background: var(--gold-transparent-90) !important;
  max-width: 50rem !important;
  padding: 2rem 1.5rem 0.75rem 1.5rem !important;
  border-radius: var(--border-radius) !important;
}
#options-landing-content .headline-text {
  padding: 0 var(--bs-gutter-x) !important;
}

#options-panel {
  margin: 2rem 0 1.25rem 0 !important;
  padding: 0 !important;
}
#options-panel a {
  background: var(--white-transparent-90) !important;
  max-width: 100% !important;
  width: 100% !important;
  height: 4rem !important;
  align-content: center !important;
  padding: 0.5rem 1rem !important;
}
#options-panel a:hover {
  background: var(--white-transparent-65) !important;
}

/***
 * HOME
 ***/

#cta-full-page,
#cta-full-width {
  background: var(--gold-pale) !important;
  padding: 4rem 0 2.5rem 0 !important;
}


@media(max-width: 1200px) {
  /* GLOBAL HEADER */
  .global-header .global-header-logo {
    width: 100% !important;
  }

  .global-header .global-header-logo .image-container {
    margin: 0 2.25rem !important;
  }

  .global-header .navbar-toggler {
    border: unset !important;
    border-radius: unset !important;
  }
  .global-header .navbar-toggler .bi-list:before {
    color: var(--black) !important;
    font-size: 2.25rem !important;
  }
}

@media(max-width: 992px) {
  #card-gold-pale {
    text-align: center !important;
  }

  a.btn {
    min-width: 100% !important;
  }

  /* GLOBAL HEADER */
  .global-header .global-header-navigation .meta-navigation__inner > ul {
    border-bottom: 3px solid var(--gold-pale) !important;
    padding: 0 !important;
    background: var(--gold-light) !important;
  }
  .global-header .global-header-navigation .meta-navigation__inner li {
    padding: unset !important;
  }
  .global-header .global-header-navigation .meta-navigation__inner li a {
    border-bottom: 1px solid;
    padding: 1rem 0.75em !important;
  }
  .global-header .global-header-navigation .meta-navigation__inner > ul > li > a {
    border-top: 2px solid var(--gold-pale) !important;
  }
  .global-header .global-header-navigation li.sub-menu-parent a.active {
    border-bottom: 2px solid var(--gold-pale) !important;
  }
  .global-header .global-header-navigation li,
  .global-header .global-header-navigation li.sub-menu-parent {
    padding: 0 !important;
    margin: 0 !important;
  }
  .global-header .global-header-navigation li.sub-menu-parent::after {
    display: none !important;
  }
  .global-header .global-header-navigation a {
    display: block !important;
    width: 100% !important;
  }
  .global-header .global-header-navigation .sub-menu {
    background: var(--gold-light-50) !important;
    border: unset !important;
  }
  .global-header .global-header-navigation .meta-navigation__inner .sub-menu li,
  .global-header .global-header-navigation .meta-navigation__inner > ul > li > .sub-menu > li:not(li:nth-last-child(-n+2)) {
    border-bottom: 1px solid var(--gold-pale) !important;
  }
  
  .meta-navigation ul li.sub-menu-parent .submenu-toggler {
    top: 0.75rem !important;
    width: 100% !important;
  }
  .meta-navigation ul li.sub-menu-parent .submenu-toggler:after,
  .meta-navigation ul a.active ~ .submenu-toggler:after {
    color: var(--black) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    display: block !important;
  }
  .meta-navigation ul li.sub-menu-parent .submenu-toggler:after {
    text-align: right !important;
  }
.meta-navigation ul a.active ~ .submenu-toggler:after {
    text-align: left !important;
}
  
  .global-header .global-header-navigation .meta-navigation__inner > ul > li > .sub-menu {
    display: none !important;
    width: 100% !important;
    transform: unset !important;
  }
  .global-header .global-header-navigation .meta-navigation__inner > ul > li > a.active + .sub-menu {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

@media(max-width: 767px) {

}

@media(max-width: 575px) { 

}