@import url('./tokens.css');
@import url('./normalize.css');

/* ***********************************
 * Section: CSS Properties
 *********************************** */
:root {
  --z-index-level-00: 0;
  --z-index-level-01: 100;
  --z-index-level-02: 200;
  --z-index-level-03: 300;
  --z-index-level-04: 400;
  --shadow-floating: 0 1px 15px 0 var(--color-base-transparency-black-10);
  --button-gap: var(--spacing-alias-fixed-100);
  --button-side-padding: var(--spacing-alias-fixed-300);
  --button-icon-size: var(--sizing-alias-icon-frame-sm);
  --button-tb-padding: var(--spacing-base-0-5);
  --button-padding: var(--button-tb-padding) var(--spacing-base-2-5)
    var(--button-tb-padding) var(--spacing-base-3-0);

  /* Layout */
  --spacing-alias-responsive-layout-margin-content: var(
    --spacing-alias-responsive-layout-margin-content-sm
  );
  --spacing-alias-responsive-layout-margin-navigation: var(
    --spacing-alias-responsive-layout-margin-navigation-sm
  );
  --spacing-alias-responsive-200-to-600: var(--spacing-alias-responsive-200-to-600-sm);
  --spacing-alias-responsive-300-to-1200: var(--spacing-alias-responsive-300-to-1200-sm);
  --spacing-alias-responsive-450-to-1800: var(--spacing-alias-responsive-450-to-1800-sm);
  --spacing-alias-responsive-600-to-2400: var(--spacing-alias-responsive-600-to-2400-sm);
  --body-margin: var(--spacing-alias-responsive-layout-margin-content);
  --body-gutter: var(--spacing-alias-responsive-200-to-600);
  --header-height: var(--sizing-alias-fixed-600);

  /* Border Radius */
  --border-radius-alias-responsive-400-to-1200: var(
    --border-radius-alias-responsive-400-to-1200-sm
  );
  --border-radius-alias-responsive-500-to-2800: var(
    --border-radius-alias-responsive-500-to-2800-sm
  );

  /* Large feature corner radius */
  --feature-radius-btm-right: var(--border-radius-alias-fixed-md)
    var(--border-radius-alias-fixed-md) var(--border-radius-alias-feature)
    var(--border-radius-alias-fixed-md);
  --feature-radius-btm-left: var(--border-radius-alias-fixed-md)
    var(--border-radius-alias-fixed-md) var(--border-radius-alias-fixed-md)
    var(--border-radius-alias-feature);
  --feature-radius-top-left: var(--border-radius-alias-feature)
    var(--border-radius-alias-fixed-md) var(--border-radius-alias-fixed-md)
    var(--border-radius-alias-fixed-md);
  --feature-radius-top-right: var(--border-radius-alias-fixed-md)
    var(--border-radius-alias-feature) var(--border-radius-alias-fixed-md)
    var(--border-radius-alias-fixed-md);

  /* Used with logos over images and to get round corners of logos and hide background image/colour */
  --feature-radius-left: 0 var(--border-radius-alias-fixed-md)
    var(--border-radius-alias-feature) var(--border-radius-alias-fixed-md);
  --feature-radius-right: var(--border-radius-alias-fixed-md) 0
    var(--border-radius-alias-feature) var(--border-radius-alias-fixed-md);

  /* Use with the above radius variables to hide small bits of images and colours */
  --btm-left-small-radius: 0 0 0 var(--border-radius-alias-fixed-md);
  --btm-right-small-radius: 0 0 var(--border-radius-alias-fixed-md) 0;

  /* Screen-height (Will be overwritten by header.js) */
  --view-port-height: 100vh;

  /* Responsive Typography */
  --font-size-alias-display-01: var(--font-size-base-56);
  --line-height-alias-display-01: var(--line-height-base-web-62);
  --font-size-alias-display-02: var(--font-size-base-web-36);
  --line-height-alias-display-02: var(--line-height-base-web-47);
  --font-size-alias-display-03: var(--font-size-base-web-32);
  --line-height-alias-display-03: var(--line-height-base-web-42);
  --font-size-alias-title-01: var(--font-size-base-26);
  --line-height-alias-title-01: var(--line-height-base-web-36);
  --font-size-alias-title-02: var(--font-size-base-24);
  --line-height-alias-title-02: var(--line-height-base-web-34);
  --font-size-alias-title-03: var(--font-size-base-20);
  --line-height-alias-title-03: var(--line-height-base-web-28);
  --font-size-alias-title-04: var(--font-size-base-18);
  --line-height-alias-title-04: var(--line-height-base-web-28);
  --font-size-alias-title-05: var(--font-size-base-16);
  --line-height-alias-title-05: var(--line-height-base-web-24);
  --font-size-alias-intro: var(--font-size-base-24);
  --line-height-alias-intro: var(--line-height-base-web-34);
  --font-size-alias-callout: var(--font-size-base-20);
  --line-height-alias-callout: var(--line-height-base-web-30);
  --font-size-alias-body-01: var(--font-size-base-18);
  --line-height-alias-body-01: var(--line-height-base-web-28);
  --font-size-alias-body-02: var(--font-size-base-16);
  --line-height-alias-body-02: var(--line-height-base-web-24);
  --font-size-alias-caption: var(--font-size-base-14);
  --line-height-alias-caption: var(--line-height-base-web-20);

  /* Badge */
  --badge-padding-y-sm: var(--spacing-base-0-25);
  --badge-padding-x-sm: var(--spacing-base-1-0);
  --badge-padding-y-md: var(--spacing-base-0-5);
  --badge-padding-x-md: var(--spacing-base-1-0);
  --badge-padding-y-lg: var(--spacing-base-0-5);
  --badge-padding-x-lg: var(--spacing-base-1-5);
  --badge-font-size-sm: var(--font-size-base-12);
  --badge-line-height-sm: var(--line-height-base-defined-16);
  --badge-font-size-lg: var(--font-size-alias-caption);
  --badge-line-height-lg: var(--line-height-alias-caption);

  /* Focus Outline */
  --border-width-alias-button: var(--border-width-base-3-0);
  --border-width-alias-text-link: var(--border-width-base-2-0);
  --outline-offset-alias-button: 3px;
  --outline-offset-alias-text-link: 2px;

  /* Backgrounds */
  --background-grey: var(--color-alias-surface-background-secondary);
  --background-red: var(--color-alias-brand-primary);
  --background-deep-red: var(--color-base-red-70);
  --background-charcoal: var(--color-alias-surface-background-dark);
  --background-navy: var(--color-base-navy-90);

  /* Pending Tokens */
  --banner-max-width: 92rem;
  --body-max-width: 80rem;
  --sizing-base-36-0: 18rem;
  --sizing-base-54-0: 27rem;
  --sizing-base-64-0: 32rem;
  --sizing-alias-button-max-width-aem: 19rem;
}

/* ***********************************
 * Section: Template & Theme overrides
 *********************************** */

/* Crisis Mode - Grey section */
body.crisis-section-grey main > .section:first-child {
  --color-alias-surface-background-primary: var(--color-base-neutral-80);
  --color-alias-text-primary: var(--color-base-neutral-white);
  --color-alias-interactive-primary-enabled: var(--color-base-neutral-white);
  --color-alias-interactive-primary-hover: var(--color-base-neutral-white);

  /* Button styles */
  --color-comp-web-button-primary-enabled-background: var(
    --color-comp-web-button-on-media-light-enabled-background
  );
  --color-comp-web-button-primary-enabled-text: var(
    --color-comp-web-button-on-media-light-enabled-text
  );
  --color-comp-web-button-primary-hover-background: var(
    --color-base-transparency-white-80
  );
  --color-comp-web-button-primary-hover-text: var(--color-base-neutral-80);
  --color-comp-web-button-primary-pressed-background: var(
    --color-comp-web-button-on-media-light-pressed-background
  );
  --color-comp-web-button-primary-pressed-text: var(
    --color-comp-web-button-on-media-light-pressed-text
  );
  --color-comp-web-button-secondary-enabled-border: var(
    --color-base-transparency-white-80
  );
  --color-comp-web-button-secondary-enabled-text: var(--color-alias-text-primary-on-dark);
  --color-comp-web-button-secondary-hover-background: var(
    --color-base-transparency-white-60
  );
  --color-comp-web-button-secondary-hover-border: var(--color-base-transparency-white-00);
  --color-comp-web-button-secondary-hover-text: var(--color-base-neutral-80);
  --color-alias-interactive-focus-on-light: var(--color-base-teal-05);
  --color-alias-interactive-link-visited-foreground: var(
    --color-comp-web-button-on-media-dark-enabled-text
  );

  background-color: var(--color-alias-surface-background-primary);
  color: var(--color-alias-text-primary);
}

/* ***********************************
 * Section: Base
 *********************************** */

/* Base - Page */
body {
  font-family: 'Qantas Sans', Helvetica, sans-serif;
  font-size: var(--font-size-base-16);
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-alias-surface-background-primary);
  color: var(--color-alias-text-primary);
  display: none;
  margin: 0;
}

html[lang^='ja'] body,
html[lang^='ko'] body,
html[lang^='zh'] body {
  font-family: 'Noto Sans', Helvetica, sans-serif;
}

body.appear {
  display: block;
}

/* Base - Header, Footer */
body > header {
  min-height: var(--header-height);
}

footer .footer.block,
header .header.block {
  visibility: hidden;
}

footer .footer.block[data-block-status='loaded'],
header .header.block[data-block-status='loaded'] {
  visibility: visible;
}

/* Base - Inline Links */
a:any-link {
  color: var(--color-alias-interactive-primary-enabled);
  text-decoration: underline;
}

a:hover {
  color: var(--color-alias-interactive-primary-hover);
}

a:active {
  color: var(--color-alias-interactive-primary-enabled);
}

a:visited {
  color: var(--color-alias-interactive-link-visited-foreground);
}

a:focus-visible,
.focus-visible {
  outline: var(--border-width-alias-text-link) solid
    var(--color-alias-interactive-focus-on-light);
  outline-offset: var(--outline-offset-alias-text-link);
}

/* Need to use qantas-red, deep-red because Promo Banner uses these classes */
:is(.qantas-brand-red, .deep-red, .charcoal, .navy) a:any-link {
  color: var(--color-alias-text-primary-on-dark);
}

:is(.qantas-brand-red, .deep-red, .charcoal, .navy) a:focus-visible {
  outline: var(--border-width-alias-text-link) solid var(--color-base-teal-05);
  outline-offset: var(--outline-offset-alias-text-link);
}

:is(.qantas-brand-red, .deep-red, .charcoal, .navy) .focus-visible {
  outline: var(--border-width-alias-text-link) solid var(--color-base-teal-05);
  outline-offset: var(--outline-offset-alias-text-link);
}

/* Standalone links */
a.standalone {
  font-weight: 500;
  text-decoration: none;
}

a.standalone:hover,
a.standalone:focus,
a.standalone:focus-visible,
a.standalone:active {
  text-decoration: underline;
}

a.standalone:visited {
  color: var(--color-alias-interactive-primary-enabled);
}

main .back-to-top-link {
  align-items: center;
  gap: var(--spacing-alias-fixed-100);
  color: var(--color-alias-interactive-primary-enabled);
  padding: var(--spacing-alias-fixed-100) 0;
  margin: var(--spacing-alias-responsive-200-to-600) 0 0;
  text-decoration: none;
  align-self: flex-start;
  display: flex;
  width: fit-content;
  text-align: left;
}

main .back-to-top-link::before {
  content: '';
  display: inline-block;
  text-decoration: none;
  width: var(--sizing-alias-icon-frame-xs);
  height: var(--sizing-alias-icon-frame-xs);
  background-color: var(--color-alias-interactive-primary-enabled);
  mask: url('../icons/runway_icon_arrow_up.svg') no-repeat center / contain;
}

main .back-to-top-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.17rem;
}

p.button-container {
  margin: 0;
}

p.button-container strong {
  display: flex;
}

/* Skip to Main */
.skip-to-elements .cta-link a.skip-to-element.button {
  position: absolute;
  z-index: var(--z-index-level-04);
  top: var(--spacing-alias-fixed-100);
  left: var(--spacing-alias-responsive-layout-margin-navigation);
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
  width: initial;
}

.skip-to-elements .cta-link a.skip-to-element.tertiary {
  background-color: var(--color-alias-surface-background-primary);
}

.skip-to-elements .cta-link a.skip-to-element:focus-visible {
  user-select: unset;
  outline-offset: 0;
  clip: unset;
  clip-path: unset;
}

/* Icons */
.mask-icon {
  display: block;
  content: '';
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: currentColor;
}

/* ***********************************
 * Section: Layout
 *********************************** */

main > .section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-alias-responsive-300-to-1200) var(--body-margin);
}

.section.background-grey {
  background-color: var(--color-alias-surface-background-secondary);
}

.section[data-type='offset-section'] {
  border-top-right-radius: var(--border-radius-base-8-0);
  padding: var(--spacing-alias-responsive-450-to-1800) var(--body-margin);
}

main > .section > div {
  max-width: var(--body-max-width);
  width: 100%;
}

main > .section.text-center > .default-content-wrapper {
  text-align: center;
}

/* Block bottom margin */
main > .section > div > .block {
  margin-bottom: var(--spacing-alias-responsive-600-to-2400);
}

main .offset-section-main > .section:not(:last-child),
main .offset-section-main > div > .block {
  margin-bottom: var(--spacing-alias-responsive-300-to-1200);
}

/* Last block of a section */
main > .section > div:last-child > .block,
main .offset-section-main > div:last-child > .block {
  margin-bottom: 0;
}

/* Default Content Heading Top Spacer */
main > .section > .default-content-wrapper h1,
main > .section > .default-content-wrapper h2,
main > .section > .default-content-wrapper h3,
main > .section > .default-content-wrapper h4,
main > .section > .default-content-wrapper h5,
main > .section > .default-content-wrapper h6 {
  padding-top: var(--line-height-base-defined-36);
}

/* First child of Default Content */
main > .section > .default-content-wrapper > :first-child,
main > .section > .default-content-wrapper > :first-child.visually-hidden + h1,
main > .section > .default-content-wrapper > :first-child.visually-hidden + h2,
main > .section > .default-content-wrapper > :first-child.visually-hidden + h3,
main > .section > .default-content-wrapper > :first-child.visually-hidden + h4,
main > .section > .default-content-wrapper > :first-child.visually-hidden + h5,
main > .section > .default-content-wrapper > :first-child.visually-hidden + h6 {
  padding-top: 0;
}

/* Last child of a Default Content which is placed at the end of a section */
main > .section > .default-content-wrapper:last-child > :last-child,
main .offset-section-main > .default-content-wrapper:last-child > :last-child {
  margin-bottom: 0;
}

main > .section > .default-content-wrapper > * {
  max-width: var(--sizing-alias-typography-max-width-wide);
}

main > .section.text-center > .default-content-wrapper > * {
  margin-left: auto;
  margin-right: auto;
}

main .offset-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-alias-responsive-200-to-600);
}

button:focus-visible {
  outline: var(--border-width-alias-button) solid
    var(--color-alias-interactive-focus-on-light);
  outline-offset: var(--outline-offset-alias-button);
}

/* ***********************************
 * Section: Typography
 *********************************** */

/* Reset Default Margin */
h1,
h2,
h3,
h4,
h5,
h6,
p,
code,
pre,
li > p {
  margin: 0;
}

b,
strong {
  font-weight: 500;
}

h1:focus-visible,
h2:focus-visible,
h3:focus-visible,
h4:focus-visible,
h5:focus-visible,
h6:focus-visible {
  outline: var(--border-width-alias-text-link) solid
    var(--color-alias-interactive-focus-on-light);
  outline-offset: var(--outline-offset-alias-text-link);
}

/* Typography - Default (sm) */
h1,
.display-01 {
  font-weight: 300;
  font-size: var(--font-size-alias-display-01);
  line-height: var(--line-height-alias-display-01);
  letter-spacing: var(--letter-spacing-base-neg-0-5);
  margin-bottom: var(--paragraph-spacing-base-defined-28);
}

h2,
.display-02 {
  font-weight: 300;
  font-size: var(--font-size-alias-display-02);
  line-height: var(--line-height-alias-display-02);
  letter-spacing: var(--letter-spacing-base-neg-0-5);
  margin-bottom: var(--paragraph-spacing-base-defined-28);
}

h3,
.display-03 {
  font-weight: 300;
  font-size: var(--font-size-alias-display-03);
  line-height: var(--line-height-alias-display-03);
  letter-spacing: var(--letter-spacing-base-neg-0-5);
  margin-bottom: var(--paragraph-spacing-base-defined-28);
}

h4,
.title-01 {
  font-weight: 400;
  font-size: var(--font-size-alias-title-01);
  line-height: var(--line-height-alias-title-01);
  letter-spacing: var(--letter-spacing-base-neg-0-25);
  margin-bottom: var(--paragraph-spacing-base-defined-28);
}

h5,
.title-02 {
  font-weight: 400;
  font-size: var(--font-size-alias-title-02);
  line-height: var(--line-height-alias-title-02);
  letter-spacing: var(--letter-spacing-base-neg-0-25);
  margin-bottom: var(--paragraph-spacing-base-defined-28);
}

h6,
.title-03 {
  font-weight: 500;
  font-size: var(--font-size-alias-title-03);
  line-height: var(--line-height-alias-title-03);
  letter-spacing: var(--letter-spacing-base-0);
  margin-bottom: var(--paragraph-spacing-base-defined-28);
}

.title-04 {
  font-weight: 500;
  font-size: var(--font-size-alias-title-04);
  line-height: var(--line-height-alias-title-04);
  letter-spacing: var(--letter-spacing-base-0);
  margin-bottom: var(--paragraph-spacing-base-defined-28);
}

.title-05 {
  font-weight: 500;
  font-size: var(--font-size-alias-title-05);
  line-height: var(--line-height-alias-title-05);
  letter-spacing: var(--letter-spacing-base-0);
  margin-bottom: var(--paragraph-spacing-base-defined-28);
}

.intro,
.intro p {
  font-weight: 300;
  font-size: var(--font-size-alias-intro);
  line-height: var(--line-height-alias-intro);
  letter-spacing: var(--letter-spacing-base-0);
  margin-bottom: var(--paragraph-spacing-base-defined-28);
}

.callout,
.callout p {
  font-weight: 400;
  font-size: var(--font-size-alias-callout);
  line-height: var(--line-height-alias-callout);
  letter-spacing: var(--letter-spacing-base-0);
  margin-bottom: var(--paragraph-spacing-base-defined-28);
}

p,
.body-01 {
  font-weight: 400;
  font-size: var(--font-size-alias-body-01);
  line-height: var(--line-height-alias-body-01);
  letter-spacing: var(--letter-spacing-base-0);
  margin-bottom: var(--paragraph-spacing-base-defined-28);
}

ul li,
ol li {
  font-size: var(--font-size-alias-body-01);
  line-height: var(--line-height-alias-body-01);
}

.body-02,
.body-02 p {
  font-weight: 400;
  font-size: var(--font-size-alias-body-02);
  line-height: var(--line-height-alias-body-02);
  letter-spacing: var(--letter-spacing-base-0);
  margin-bottom: var(--paragraph-spacing-base-defined-28);
}

code,
pre,
.caption,
.caption p,
.caption a,
.caption li {
  font-weight: 400;
  font-size: var(--font-size-alias-caption);
  line-height: var(--line-height-alias-caption);
  letter-spacing: var(--letter-spacing-base-0);
  margin-bottom: var(--paragraph-spacing-base-defined-28);
}

/* ***********************************
 * Section: Forms
 *********************************** */

.error-message {
  color: var(--color-alias-text-field-error);
  display: flex;
  gap: var(--spacing-alias-fixed-100);
  margin-top: var(--spacing-alias-fixed-200);
}

.error-message::before {
  content: '';
  display: inline-block;
  margin-top: 2px;
  flex-shrink: 0;
  width: var(--sizing-alias-icon-frame-xs);
  height: var(--sizing-alias-icon-frame-xs);
  background-color: var(--color-alias-interactive-primary-enabled);
  mask: url('../icons/runway_icon_notification_error.svg') no-repeat center / contain;
}

.qantas-red .error-message {
  color: var(--color-alias-text-primary-on-dark);
}

.qantas-red .error-message::before {
  background-color: var(--color-alias-text-primary-on-dark);
}

/* ***********************************
 * Section: CTA Links
 *********************************** */

.cta-link {
  display: flex;
  align-items: center;
  padding: var(--spacing-base-0);
  gap: var(--spacing-alias-fixed-300) var(--spacing-alias-responsive-200-to-600);
  flex-flow: column wrap;
}

.cta-link a.button:any-link {
  width: 100%;
  max-width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  min-height: var(--sizing-base-6-0);
  border: none;
  border-radius: var(--border-radius-base-100-0);
  gap: var(--button-gap);
  padding: var(--button-padding);
  box-sizing: border-box;
  font-size: var(--font-size-alias-body-02);
  line-height: var(--line-height-alias-body-02);
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
}

.text-center .cta-link {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

/* Base - Buttons */
.cta-link a.button > span {
  display: flex;
}

.cta-link a.button:hover,
.cta-link a.button:active,
.cta-link a.button.primary:hover,
.cta-link a.button.primary:active {
  background-color: var(--color-comp-web-button-primary-hover-background);
  color: var(--color-comp-web-button-primary-hover-text);
}

.cta-link a.button:active {
  background-color: var(--color-comp-web-button-primary-pressed-background);
  color: var(--color-comp-web-button-primary-pressed-text);
}

.cta-link a.button img {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
}

.cta-link a.button::before,
.cta-link a.button::after,
.cta-link a.arrow::after {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.cta-link a.button.arrow::after,
.cta-link a.arrow::after {
  mask: url('../icons/runway_icon_arrow_right.svg') no-repeat center;
  content: '';
}

.cta-link a.button:not(.arrow) {
  padding: var(--spacing-alias-fixed-50) var(--spacing-alias-fixed-300);
}

.cta-link a.button.primary {
  background-color: var(--color-comp-web-button-primary-enabled-background);
  color: var(--color-comp-web-button-primary-enabled-text);
}

.cta-link a.button.secondary {
  background-color: unset;
  border: var(--border-width-base-2-0) solid
    var(--color-comp-web-button-secondary-enabled-border);
  color: var(--color-comp-web-button-secondary-enabled-text);
}

.cta-link a.button.secondary:hover {
  background: var(--color-comp-web-button-secondary-hover-background);
  color: var(--color-comp-web-button-secondary-hover-text);
  border: var(--border-width-base-2-0) solid
    var(--color-comp-web-button-secondary-hover-border);
}

.cta-link a.button.secondary:active {
  background: var(--color-comp-web-button-secondary-pressed-background);
  color: var(--color-comp-web-button-secondary-pressed-text);
  border: var(--border-width-base-2-0) solid
    var(--color-comp-web-button-secondary-pressed-border);
}

.cta-link a.button.secondary:disabled {
  color: var(--color-comp-web-button-secondary-disabled-text);
  border: var(--border-width-base-2-0) solid
    var(--color-comp-web-button-secondary-disabled-border);
}

.cta-link a.button.tertiary {
  background-color: unset;
  color: var(--color-comp-web-button-secondary-enabled-text);
}

.cta-link a.button.tertiary:hover {
  background: var(--color-comp-web-button-tertiary-hover-background);
  color: var(--color-comp-web-button-tertiary-hover-text);
}

.cta-link a.button.tertiary:active {
  color: var(--color-comp-web-button-tertiary-disabled-text);
}

.cta-link a.button.tertiary:disabled {
  color: var(--color-comp-web-button-tertiary-hover-text);
  background: var(--color-comp-web-button-tertiary-hover-background);
}

.cta-link a.button:focus-visible {
  outline: var(--border-width-alias-button) solid
    var(--color-alias-interactive-focus-on-light);
  outline-offset: var(--outline-offset-alias-button);
}

.cta-link a.button.media-light {
  background-color: var(--color-comp-web-button-on-media-light-enabled-background);
  color: var(--color-comp-web-button-on-media-light-enabled-text);
}

.cta-link a.button.media-light:hover,
.cta-link a.button.media-light:active {
  background-color: var(--color-base-transparency-white-80);
  color: var(--color-alias-text-primary);
}

.cta-link a.button.media-light:focus-visible {
  outline: var(--border-width-alias-button) solid var(--color-base-teal-05);
  outline-offset: var(--outline-offset-alias-button);
}

.cta-link a.button.media-light-muted {
  background-color: transparent;
  border: 2px solid var(--color-base-transparency-white-80);
  color: var(--color-alias-text-primary-on-dark);
}

.cta-link a.button.media-light-muted:hover,
.cta-link a.button.media-light-muted:active {
  background-color: var(--color-base-transparency-white-60);
  border: 2px solid var(--color-base-transparency-white-00); /* Keep exactly the same border */
  color: var(--color-alias-text-primary);
}

.cta-link a.button.media-light-muted:focus,
.cta-link a.button.media-light-muted:focus-visible {
  outline: var(--border-width-alias-button) solid var(--color-base-teal-05);
  outline-offset: var(--outline-offset-alias-button);
}

.cta-link a.button.media-dark {
  background-color: var(--color-comp-web-button-on-media-dark-enabled-background);
  color: var(--color-comp-web-button-on-media-dark-enabled-text);
}

.cta-link a.button.media-dark:hover,
.cta-link a.button.media-dark:active {
  background-color: var(--color-comp-web-button-on-media-dark-enabled-background);
  color: var(--color-comp-web-button-on-media-dark-enabled-text);
}

.cta-link a.button.media-dark:focus,
.cta-link a.button.media-dark:focus-visible {
  outline: var(--border-width-base-3-0) solid var(--color-base-teal-05);
  outline-offset: var(--outline-offset-alias-button);
}

.cta-link a.button.extra-large {
  min-height: var(--sizing-alias-fixed-600);
  font-size: var(--font-size-alias-body-02);
  line-height: var(--line-height-alias-body-02);
}

@media (min-width: 36rem) {
  .cta-link {
    flex-direction: row;
  }

  .text-center .cta-link a.button:any-link {
    min-width: var(--sizing-alias-button-max-width-aem);
    max-width: var(--sizing-alias-button-max-width-aem);
    padding: var(--spacing-alias-fixed-50) 0;
  }

  .cta-link a.button:any-link {
    min-width: 0;
    width: inherit;
    flex: none;
  }

  .cta-link a.button.hug-content {
    min-width: 0;
    width: inherit;
    flex: none;
  }

  .cta-link a.button.extra-large {
    font-size: var(--font-size-alias-body-01);
    line-height: var(--line-height-alias-body-01);
    min-height: var(--sizing-alias-fixed-700);
  }
}

/* ***********************************
 * Section: Coloured Backgrounds
 *********************************** */
.background.qantas-brand-red {
  background-color: var(--background-red);
}

.background.deep-red {
  background-color: var(--background-deep-red);
}

.background.charcoal {
  background-color: var(--background-charcoal);
}

.background.navy {
  background-color: var(--background-navy);
}

/* ***********************************
 * Section: Feature Border Radiuses
 *********************************** */
.feature-border-btm-right {
  border-top-right-radius: var(--border-radius-alias-feature);
}

.feature-border-btm-left {
  border-top-left-radius: var(--border-radius-alias-feature);
}

/* ***********************************
 * Section: Shared Block Containers
 *********************************** */
.block-logo-container {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  height: var(--sizing-alias-fixed-1000);
  min-width: var(--sizing-alias-fixed-1000);
  max-width: var(--sizing-alias-fixed-2000);
  padding: var(--sizing-alias-fixed-200);
  background-color: var(--color-alias-surface-background-primary);
  box-sizing: border-box;
  align-items: center;
  border-radius: var(--border-radius-alias-fixed-md) 0 0 0;
}

.block-logo-container picture {
  display: flex;
  width: 100%;
  height: 100%;
}

.block-logo-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ***********************************
 * Section: Responsive Values
 *********************************** */

/* Breakpoint - screen md and above */
@media (min-width: 36rem) {
  :root {
    --spacing-alias-responsive-layout-margin-content: var(
      --spacing-alias-responsive-layout-margin-content-md
    );
    --spacing-alias-responsive-layout-margin-navigation: var(
      --spacing-alias-responsive-layout-margin-navigation-md
    );
    --spacing-alias-responsive-200-to-600: var(--spacing-alias-responsive-200-to-600-md);
    --spacing-alias-responsive-300-to-1200: var(
      --spacing-alias-responsive-300-to-1200-md
    );
    --spacing-alias-responsive-450-to-1800: var(
      --spacing-alias-responsive-450-to-1800-md
    );
    --spacing-alias-responsive-600-to-2400: var(
      --spacing-alias-responsive-600-to-2400-md
    );
    --border-radius-alias-responsive-400-to-1200: var(
      --border-radius-alias-responsive-400-to-1200-md
    );
    --border-radius-alias-responsive-500-to-2800: var(
      --border-radius-alias-responsive-500-to-2800-md
    );
    --font-size-alias-display-01: var(--font-size-base-60);
    --line-height-alias-display-01: var(--line-height-base-web-72);
    --font-size-alias-display-02: var(--font-size-base-web-44);
    --line-height-alias-display-02: var(--line-height-base-web-57);
    --font-size-alias-display-03: var(--font-size-base-web-36);
    --line-height-alias-display-03: var(--line-height-base-web-47);
    --font-size-alias-intro: var(--font-size-base-28);
    --line-height-alias-intro: var(--line-height-base-web-39);
    --font-size-alias-callout: var(--font-size-base-22);
    --line-height-alias-callout: var(--line-height-base-web-31);
    --button-gap: var(--spacing-alias-fixed-100);
    --button-side-padding: var(--spacing-alias-fixed-200);
  }
}

/* Breakpoint - screen sm-md specific */
@media (max-width: 63.999rem) {
  .noscroll {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--view-port-height);
    overflow: hidden;
  }
}

/* Breakpoint - screen lg and above */
@media (min-width: 64rem) {
  :root {
    --spacing-alias-responsive-layout-margin-content: var(
      --spacing-alias-responsive-layout-margin-content-lg
    );
    --spacing-alias-responsive-layout-margin-navigation: var(
      --spacing-alias-responsive-layout-margin-navigation-lg
    );
    --spacing-alias-responsive-200-to-600: var(--spacing-alias-responsive-200-to-600-lg);
    --spacing-alias-responsive-300-to-1200: var(
      --spacing-alias-responsive-300-to-1200-lg
    );
    --spacing-alias-responsive-450-to-1800: var(
      --spacing-alias-responsive-450-to-1800-lg
    );
    --spacing-alias-responsive-600-to-2400: var(
      --spacing-alias-responsive-600-to-2400-lg
    );
    --header-height: calc(var(--sizing-alias-fixed-800) * 2);
    --border-radius-alias-responsive-400-to-1200: var(
      --border-radius-alias-responsive-400-to-1200-lg
    );
    --border-radius-alias-responsive-500-to-2800: var(
      --border-radius-alias-responsive-500-to-2800-lg
    );
    --font-size-alias-display-01: var(--font-size-base-web-72);
    --line-height-alias-display-01: var(--line-height-base-web-88);
    --font-size-alias-display-02: var(--font-size-base-web-56);
    --line-height-alias-display-02: var(--line-height-base-web-67);
    --font-size-alias-display-03: var(--font-size-base-web-40);
    --line-height-alias-display-03: var(--line-height-base-web-52);
    --font-size-alias-title-01: var(--font-size-base-32);
    --line-height-alias-title-01: var(--line-height-base-web-45);
    --font-size-alias-title-02: var(--font-size-base-26);
    --line-height-alias-title-02: var(--line-height-base-web-36);
    --font-size-alias-intro: var(--font-size-base-32);
    --line-height-alias-intro: var(--line-height-base-web-45);
    --font-size-alias-callout: var(--font-size-base-24);
    --line-height-alias-callout: var(--line-height-base-web-34);
    --button-side-padding: var(--spacing-alias-fixed-300);
  }

  main .offset-section {
    flex-flow: row wrap;
    align-items: flex-start;

    --column-width: calc((100% - (11 * var(--spacing-alias-responsive-200-to-600))) / 12);
  }

  main .offset-section > div:first-child {
    width: calc(
      (var(--column-width) * 5) + (var(--spacing-alias-responsive-200-to-600) * 4)
    );
  }

  main .offset-section > div:nth-child(2) {
    width: calc(
      (var(--column-width) * 7) + (var(--spacing-alias-responsive-200-to-600) * 6)
    );
  }
}

/* ***********************************
 * Section: Accessibility
 *********************************** */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

html {
  font-size: unset !important;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
}

/* ***********************************
 * Temporary Styles for the homepage
 *********************************** */

.homepage h1:first-of-type,
.homepage-cm h1:first-of-type {
  font-weight: 400;
  font-size: var(--font-size-alias-caption);
  line-height: var(--line-height-alias-caption);
  color: var(--color-alias-interactive-muted-enabled-foreground);
  margin-bottom: var(--spacing-alias-fixed-100);
}

.homepage h1:first-of-type + h2,
.homepage-cm h1:first-of-type + h2 {
  padding-top: 0;
}

.homepage
  .section:has(:last-child.default-content-wrapper):has(+ .section.tabs-container),
.homepage-cm
  .section:has(:last-child.default-content-wrapper):has(+ .section.tabs-container) {
  padding-bottom: var(--spacing-alias-responsive-200-to-600);
}

.homepage .section.tabs-container,
.homepage-cm .section.tabs-container {
  padding-top: 0;
}

.homepage main > .section > div:not(:last-child) > .service-icon-container.block,
.homepage-cm main > .section > div:not(:last-child) > .service-icon-container.block {
  margin-bottom: var(--spacing-alias-fixed-400);
}

.homepage .default-content-wrapper:has(+ div),
.homepage-cm .default-content-wrapper:has(+ div) {
  margin-bottom: var(--line-height-base-web-28);
}

.homepage .section:not(:has(div)),
.homepage-cm .section:not(:has(div)) {
  padding: 0;
}

@media (min-width: 36rem) {
  .homepage .tabs-section + .service-icon-container-container,
  .homepage-cm .tabs-section + .service-icon-container-container {
    padding-top: 0;
  }
}