@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-100-to-300: var(--spacing-alias-responsive-100-to-300-sm);
  --spacing-alias-responsive-200-to-400: var(--spacing-alias-responsive-200-to-400-sm);
  --spacing-alias-responsive-300-to-700: var(--spacing-alias-responsive-300-to-700-sm);
  --spacing-alias-responsive-400-to-700: var(--spacing-alias-responsive-400-to-700-sm);
  --spacing-alias-responsive-600-to-1400: var(--spacing-alias-responsive-600-to-1400-sm);
  --body-margin: var(--spacing-alias-responsive-layout-margin-content);
  --body-gutter: var(--spacing-alias-responsive-200-to-400);
  --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-48);
  --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);

  /* 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;

  /* 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);
  --badge-padding-y: var(--badge-padding-y-sm);
  --badge-padding-x: var(--badge-padding-x-sm);
  --badge-font-size: var(--badge-font-size-sm);
  --badge-line-height: var(--badge-line-height-sm);

  /* 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;
  --offset-block-precedes-block-lg: var(--spacing-alias-responsive-600-to-1400);
  --spacing-alias-responsive-400-to-700-sm: var(--sizing-alias-fixed-400);
  --spacing-alias-responsive-400-to-700-md: var(--sizing-alias-fixed-500);
  --spacing-alias-responsive-400-to-700-lg: var(--sizing-alias-fixed-700);
  --spacing-base-negative-6-0: -3rem;
  --spacing-base-negative-9-0: -4.5rem;
  --spacing-base-negative-12-0: -6rem;
  --spacing-base-negative-15-0: -7.5rem;
  --spacing-base-negative-18-0: -9rem;

  /* Language-specific Typography */
  --intl-font-size-h1: var(--font-size-base-web-40);
  --intl-font-size-h2: var(--font-size-base-web-32);
  --intl-font-size-h3: var(--font-size-base-web-24);
  --intl-line-height-h1: var(--line-height-base-web-68);
  --intl-line-height-h2: var(--line-height-base-web-52);
  --intl-line-height-h3: var(--line-height-base-web-39);
  --intl-line-height-body: 1.7em;
}

/* ***********************************
 * 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);
  padding: var(--spacing-alias-responsive-300-to-700) var(--body-margin);
  margin-bottom: var(--spacing-alias-responsive-300-to-700);
  margin-top: calc(-1 * var(--spacing-alias-responsive-300-to-700));
}

/* ***********************************
 * 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;
}

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,
: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 .anchor-wrapper {
  margin-top: var(--spacing-alias-responsive-200-to-400); /* spacing-rule: cmp-6.1 */
}

main .anchor-wrapper .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: 0;
  text-decoration: none;
  align-self: flex-start;
  display: flex;
  width: fit-content;
  text-align: left;
}

main .anchor-wrapper .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 .anchor-wrapper .back-to-top-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.17rem;
}

p.button-container {
  margin: 0;
}

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

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

/* 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: 0 var(--body-margin);
  margin-bottom: var(--spacing-alias-responsive-600-to-1400); /* spacing-rule: sec-1.1 */
}

main .section:not(:has(div)) {
  margin-bottom: 0; /* spacing-rule: blk-1.2 */
}

/* ----- Grey Sections ----- */
main .section.background-grey {
  border-top-right-radius: var(--border-radius-base-8-0);
  background-color: var(--color-alias-surface-background-secondary);
  padding: var(--spacing-alias-responsive-600-to-1400) var(--body-margin); /* spacing-rule: osec-1.1 */
}

/* Adjacent background grey sections, before */
main .section.background-grey:has(+ .section.background-grey) {
  padding-bottom: 0; /* spacing-rule: osec-1.2 */
  margin-bottom: 0;
}

/* Adjacent background grey sections, after */
main .section.background-grey + .section.background-grey {
  border-radius: 0;
}

/* Last Grey Section */
main .section.background-grey:last-child {
  margin-bottom: 0; /* spacing-rule: osec-1.3 */
}

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:not(.default-content-wrapper, .offset-section) {
  margin-bottom: var(--spacing-alias-responsive-600-to-1400); /* spacing-rule: blk-1.1 */
}

/* Overwrite block bottom margin for CTA */
main .section > div:not(.default-content-wrapper):has(+ .cta-link-wrapper) {
  margin-bottom: var(--spacing-alias-responsive-300-to-700); /* spacing-rule: blk-2.1 */
}

main .section > .image-wrapper:has(+ .default-content-wrapper) {
  margin-bottom: var(--spacing-alias-responsive-200-to-400); /* spacing-rule: blk-3.1 */
}

main .offset-section-main > .section:not(:last-child) /* Sticky Nav Sections */,
main .offset-section-main > .section > div:not(.default-content-wrapper, :last-child) /* Sticky Nav Section > Blocks */,
main .offset-section-main > div:not(.default-content-wrapper, :last-child)  /* Offset Section > Blocks */ {
  margin-bottom: var(
    --offset-block-precedes-block-lg
  ); /* spacing-rule: blk-5.1, blk-5.2, blk-5.3 */
}

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

/* Spacing Overrides */
main
  .section:has(:last-child.default-content-wrapper, :last-child.hero-wrapper):has(
    + .section.tabs-container,
    + .section.universal-widget-container
  ) {
  margin-bottom: var(--spacing-alias-responsive-200-to-400); /* spacing-rule: sec-2.1 */
}

main
  > .section
  > .hero-wrapper:has(+ .universal-widget-wrapper):has(+ .universal-widget-wrapper) {
  margin-bottom: var(--spacing-alias-responsive-200-to-400); /* spacing-rule: cmp-5.2 */
}

/* ----- Default Content ----- */

/* 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; /* spacing-rule : def-1.2, def-1.3 */
}

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

/* Any default content wrapper except for the last in a section */
main .section .default-content-wrapper:not(:last-child) {
  padding-bottom: var(--spacing-alias-responsive-100-to-300); /* spacing-rule: def-3.1 */
}

main .section .default-content-wrapper:has(+ .image-wrapper, + .cta-link-wrapper) {
  padding-bottom: 0; /* spacing-rule: def-3.2, def-3.3 */
}

/* Default content text followed by any headings */
main
  .section
  .default-content-wrapper
  :is(p, h1, h2, h3, h4, h5, h6, ul, ol):has(+ :is(h1, h2, h3, h4, h5, h6)) {
  margin-bottom: var(--spacing-alias-responsive-400-to-700); /* spacing-rule: def-2.1 */
}

/* Homepage specific H1 style */
.homepage main .section .default-content-wrapper h1:first-of-type,
.homepage-cm main .section .default-content-wrapper 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); /* spacing-rule: def-4.1 */
}

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-400);
}

/* ***********************************
 * 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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

.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);
}

.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);
}

.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);
}

.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);
}

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);
}

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);
}

.body-02 ul li,
.body-02 ol li {
  font-weight: 400;
  font-size: var(--font-size-alias-body-02);
  line-height: var(--line-height-alias-body-02);
}

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);
}

h1,
.display-01,
h2,
.display-02,
h3,
.display-03,
h4,
.title-01,
h5,
.title-02,
h6,
.title-03,
.title-04,
.title-05,
.intro,
.intro p,
.callout,
.callout p,
.default-content-wrapper ul,
.default-content-wrapper ol,
p,
.body-01,
.body-02,
.body-02 p,
code,
pre,
.caption,
.caption p,
.caption a,
.caption li {
  margin-bottom: var(--spacing-alias-responsive-200-to-400); /* spacing-rule: def-1.1 */
}

/* ***********************************
 * Section: Language-specific Typography
 *********************************** */

:lang(ja) body {
  font-family: 'Noto Sans JP', Helvetica, sans-serif;
}

:lang(ko) body {
  font-family: 'Noto Sans KR', Helvetica, sans-serif;
}

:lang(zh-hk) body,
:lang(zh-tw) body {
  font-family: 'Noto Sans TC', Helvetica, sans-serif;
}

:lang(zh-cn) body {
  font-family: 'Noto Sans SC', Helvetica, sans-serif;
}

:where(:lang(ja), :lang(ko), :lang(zh)) p,
:where(:lang(ja), :lang(ko), :lang(zh)) .body-01 {
  line-height: var(--intl-line-height-body);
}

:where(:lang(ja), :lang(ko), :lang(zh)) h1,
:where(:lang(ja), :lang(ko), :lang(zh)) .display-01 {
  font-weight: 500;
  font-size: var(--intl-font-size-h1);
  line-height: var(--intl-line-height-h1);
}

:where(:lang(ja), :lang(ko), :lang(zh)) h2,
:where(:lang(ja), :lang(ko), :lang(zh)) .display-02 {
  font-weight: 500;
  font-size: var(--intl-font-size-h2);
  line-height: var(--intl-line-height-h2);
}

:where(:lang(ja), :lang(ko), :lang(zh)) h3,
:where(:lang(ja), :lang(ko), :lang(zh)) .display-03 {
  font-weight: 500;
  font-size: var(--intl-font-size-h3);
  line-height: var(--intl-line-height-h3);
}

:where(:lang(ja), :lang(ko), :lang(zh)) .title-01 {
  font-weight: 400;
  font-size: var(--font-size-alias-title-01);
  line-height: var(--line-height-alias-title-01);
}

:where(:lang(ja), :lang(ko), :lang(zh)) .title-02 {
  font-weight: 400;
  font-size: var(--font-size-alias-title-02);
  line-height: var(--line-height-alias-title-02);
}

:where(:lang(ja), :lang(ko), :lang(zh)) .title-03 {
  font-size: var(--font-size-alias-title-03);
  line-height: var(--line-height-alias-title-03);
}

:where(:lang(ja), :lang(ko), :lang(zh)) .title-04 {
  font-size: var(--font-size-alias-title-04);
  line-height: var(--line-height-alias-title-04);
}

:where(:lang(ja), :lang(ko), :lang(zh)) .title-05 {
  font-size: var(--font-size-alias-title-05);
  line-height: var(--line-height-alias-title-05);
}

/* ***********************************
 * 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-400);
  flex-flow: column wrap;
}

.cta-link a.button:any-link,
.cta-link-button {
  width: 100%;
  max-width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: visible;
  min-height: var(--sizing-base-6-0);
  height: auto;
  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;
  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,
.cta-link-button > span {
  display: flex;
}

.cta-link a.button:hover,
.cta-link-button:hover,
.cta-link a.button:active,
.cta-link-button:active,
.cta-link a.button.primary:hover,
.cta-link-button.primary:hover,
.cta-link a.button.primary:active,
.cta-link-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,
.cta-link-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,
.cta-link-button img {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
}

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

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

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

.cta-link a.button.primary,
.cta-link-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,
.cta-link-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,
.cta-link-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,
.cta-link-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,
.cta-link-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,
.cta-link-button.tertiary {
  background-color: unset;
  color: var(--color-comp-web-button-secondary-enabled-text);
}

.cta-link a.button.tertiary:hover,
.cta-link-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,
.cta-link-button.tertiary:active {
  color: var(--color-comp-web-button-tertiary-disabled-text);
}

.cta-link a.button.tertiary:disabled,
.cta-link-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,
.cta-link-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,
.cta-link-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-button.media-light:hover,
.cta-link a.button.media-light:active,
.cta-link-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,
.cta-link-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,
.cta-link-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-button.media-light-muted:hover,
.cta-link a.button.media-light-muted:active,
.cta-link-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-visible,
.cta-link-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,
.cta-link-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-button.media-dark:hover,
.cta-link a.button.media-dark:active,
.cta-link-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-visible,
.cta-link-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,
.cta-link-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,
  .text-center .cta-link-button {
    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,
  .cta-link-button {
    min-width: 0;
    width: inherit;
    flex: none;
  }

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

  .cta-link a.button.extra-large,
  .cta-link-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: Badge (Ribbon)
 *********************************** */
.block-badge {
  text-align: center;
  z-index: 1;
  background-color: var(--color-alias-notification-info-background);
  color: var(--color-alias-notification-info-text);
  border-radius: var(--border-radius-alias-fixed-sm);
  padding: var(--badge-padding-y) var(--badge-padding-x);
  width: fit-content;

  /* There's no typography style for badge */
  font-size: var(--badge-font-size);
  line-height: var(--badge-line-height);
}

/* ***********************************
 * Section: Terms
 *********************************** */
.block-terms,
.block-terms p {
  font-size: var(--font-size-alias-caption);
  line-height: var(--line-height-alias-caption);
  color: var(--color-alias-text-secondary);
}

.block-terms,
.block-terms > :last-child {
  margin-bottom: 0;
}

/* ***********************************
 * 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-100-to-300: var(--spacing-alias-responsive-100-to-300-md);
    --spacing-alias-responsive-200-to-400: var(--spacing-alias-responsive-200-to-400-md);
    --spacing-alias-responsive-300-to-700: var(--spacing-alias-responsive-300-to-700-md);
    --spacing-alias-responsive-400-to-700: var(--spacing-alias-responsive-400-to-700-md);
    --spacing-alias-responsive-600-to-1400: var(
      --spacing-alias-responsive-600-to-1400-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);

    /* Language-specific Typography */
    --intl-font-size-h1: var(--font-size-base-web-56);
    --intl-font-size-h2: var(--font-size-base-web-40);
    --intl-font-size-h3: var(--font-size-base-web-32);
    --intl-line-height-h1: var(--line-height-base-web-88);
    --intl-line-height-h2: var(--line-height-base-web-68);
    --intl-line-height-h3: var(--line-height-base-web-52);
  }
}

/* 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-100-to-300: var(--spacing-alias-responsive-100-to-300-lg);
    --spacing-alias-responsive-200-to-400: var(--spacing-alias-responsive-200-to-400-lg);
    --spacing-alias-responsive-300-to-700: var(--spacing-alias-responsive-300-to-700-lg);
    --spacing-alias-responsive-400-to-700: var(--spacing-alias-responsive-400-to-700-lg);
    --spacing-alias-responsive-600-to-1400: var(
      --spacing-alias-responsive-600-to-1400-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);
    --offset-block-precedes-block-lg: var(--spacing-alias-fixed-700);
  }

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

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

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

  main .offset-section > div:nth-child(2) {
    width: calc(
      (var(--column-width) * 7) + (var(--spacing-alias-responsive-200-to-400) * 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;
  }
}