/**
 * --------------------
 * Bigwig - Site Styles
 * --------------------
 */

/**
 * Fonts
 * -----
 */

@font-face {
  font-family: "Bogue";
  src: url("../fonts/bogue/bogue-black.ttf") format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/lato/lato-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/lato/lato-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

/**
 * Root Variables
 * --------------
 */

:root {
  /* Font Familes */
  --font-default: "Lato", serif;
  --font-primary: "aurea-ultra", serif;
  --font-secondary: "Bogue", "aurea-ultra", serif;
  --font-icon-pro: "Font Awesome 5 Pro";

  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-default: 16px;
  --font-size-md: 20px;
  --font-size-display-1: 56px;
  --font-size-display-3: 34px;
  --font-size-h1: 44px;
  --font-size-h2: 34px;
  --font-size-h3: 26px;
  --font-size-h4: 22px;
  --font-size-h5: 18px;
  --font-size-h6: 16px;
  --font-size-numeral: 36px;
  --font-size-btn: 16px;

  /* Font Weights */
  --weight-thin: 200;
  --weight-light: 300;
  --weight-default: 400;
  --weight-medium: 500;
  --weight-bold-semi: 600;
  --weight-bold: 700;
  --weight-bold-extra: 800;
  --weight-bold-ultra: 900;

  /* Line Heights */
  --line-default: 1.3;
  --line-sm: 1.2;
  --line-xs: 1.1;
  --line-single: 1;

  /* Transitions */
  --transition-duration-quick: 150ms;
  --transition-duration-default: 300ms;
  --transition-duration-slow: 600ms;
  --transition-ease: ease-in-out;
  --transition-cubic: cubic-bezier(0.165, 0.84, 0.44, 1);
  --transition-quick-ease: var(--transition-duration-quick)
    var(--transition-ease);
  --transition-default-ease: var(--transition-duration-default)
    var(--transition-ease);
  --transition-slow-ease: var(--transition-duration-slow) var(--transition-ease);
  --transition-quick-cubic: var(--transition-duration-quick)
    var(--transition-cubic);
  --transition-default-cubic: var(--transition-duration-default)
    var(--transition-cubic);
  --transition-slow-cubic: var(--transition-duration-slow)
    var(--transition-cubic);

  /* Colors */
  --color-primary-dark: #002855;
  --color-primary: #0175af;
  --color-primary-light: #3397c8;
  --color-primary-lighter: #80bedc;
  --color-primary-lightest: #ebf5fa;
  --color-secondary-dark: #006a52;
  --color-secondary: #00883c;
  --color-secondary-light: #74e9d4;
  --color-hmr-green: #008080;
  --color-green-dark: #0e6a44;
  --color-green: #009a44;
  --color-green-light: #9bcb4c;
  --color-purple-dark: #582c83;
  --color-purple: #af1685;
  /* --color-purple-light: #efd0e7; */
  --color-purple-light: #e955c0;
  --color-yellow: #f1a233;
  --color-yellow-dark: #ed8b00;
  --color-white: #fff;
  --color-grey-darkest: #333333;
  --color-grey-dark: #666666;
  --color-grey: #999999;
  --color-grey-light: #cccccc;
  --color-grey-lighter: #eeeeee;
  --color-grey-lightest: #fafafa;
  --color-grey-ultralight: #fcfcfc;
  --color-warning-darkest: #e74c3c;
  --color-warning-darker: #ed7264;
  --color-warning-dark: #f3978b;
  --color-warning: #f7bab2;
  --color-warning-light: #facbc5;
  --color-warning-lighter: #fcddd8;
  --color-warning-lightest: #fdedec;
  --color-success: #81c784;
  --color-link: #0066cc;
  --color-default: #002855;
  --color-black: var(--color-default);

  /* Colors - Transparent */
  --color-white-0p: rgba(255, 255, 255, 0);
  --color-white-10p: rgba(255, 255, 255, 0.1);
  --color-white-15p: rgba(255, 255, 255, 0.15);
  --color-white-20p: rgba(255, 255, 255, 0.2);
  --color-white-25p: rgba(255, 255, 255, 0.25);
  --color-white-50p: rgba(255, 255, 255, 0.5);
  --color-white-75p: rgba(255, 255, 255, 0.75);
  --color-white-90p: rgba(255, 255, 255, 0.9);
  --color-black-0p: rgba(0, 40, 85, 0);
  --color-black-5p: rgba(0, 40, 85, 0.05);
  --color-black-10p: rgba(0, 40, 85, 0.1);
  --color-black-15p: rgba(0, 40, 85, 0.15);
  --color-black-25p: rgba(0, 40, 85, 0.25);
  --color-black-50p: rgba(0, 40, 85, 0.5);
  --color-black-75p: rgba(0, 40, 85, 0.75);
  --color-purple-50p: rgba(175, 22, 133, 0.5);
  --color-purple-75p: rgba(175, 22, 133, 0.75);

  /* Icons - Font Awesome */
  --icon-fa-attach: 0.4687em; /* Equates to 10px when font size is 16px and fa-lg turns font-size into 21.334px */

  /* Paddings */
  --pad-y-sm: 45px;
  --pad-y: 45px;
  --pad-y-lg: 60px;
  --pad-y-xl: 75px;

  /* Window - Viewports */
  --viewport-height: 100vh;

  /* Aspect Ratios */
  --aspect-21-9: 42.87%;
  --aspect-2-1: 50%;
  --aspect-16-9: 56.25%;
  --aspect-3-2: 66.67%;
  --aspect-4-3: 75%;
  --aspect-5-4: 80%;
  --aspect-1-1: 100%;
  --aspect-4-5: 125%;
  --aspect-3-4: 133.33%;
  --aspect-2-3: 150%;
  --aspect-9-16: 177.78%;
  --aspect-1-2: 200%;
  --aspect-9-21: 233.33%;
  --aspect-71-40: 56.338%;

  /* Borders */
  --border: 1px solid #bfc9d4;

  /* Border Radius */
  --border-radius-xs: 4px;
  --border-radius-sm: 5px;
  --border-radius: 10px;
  --border-radius-lg: 20px;
  --border-radius-max: 999px;
  --border-radius-soft: 1.4em; /* Smooth, adaptive rounding for elements with variable height */

  /* Spaces */
  --space-xs: 2.5px;
  --space-sm: 5px;
  --space-default: 7.5px;
  --space-md: 10px;
  --space-lg: 15px;
  --space-xl: 25px;
  --space-xxl: 40px;

  /* Opacities */
  --opacity-hover: 0.5;

  /* Box Shadows */
  --box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* Text Shadows */
  --text-shadow: 0 0 2em var(--color-black-50p);

  /* Font Awesome */
  --fa-beat-scale: 1.1;
  --fa-animation-duration: 3s;

  --colour-surface-view-background: var(--color-grey-lightest);
}

@media (min-width: 992px) {
  :root {
    /* Font Sizes */
    --font-size-display-1: 80px;
    --font-size-display-3: 46px;
    --font-size-h1: 66px;
    --font-size-h2: 46px;
    --font-size-h3: 32px;
    --font-size-h4: 28px;
    --font-size-h5: 20px;
    --font-size-numeral: 54px;
    --font-size-btn: 18px;

    /* Paddings */
    --pad-y: 90px;
    --pad-y-lg: 120px;
    --pad-y-xl: 150px;

    /* Border Radius */
    --border-radius-sm: 7.5px;
    --border-radius: 15px;
    --border-radius-lg: 30px;
    --border-radius-soft: 1.5em; /* Smooth, adaptive rounding for elements with variable height */

    /* Spaces */
    --space-xs: 5px;
    --space-sm: 7.5px;
    --space-default: 11.25px;
    --space-md: 15px;
    --space-lg: 22.5px;
    --space-xl: 37.5px;
    --space-xxl: 60px;
  }
}

/**
 * HTML & Body
 * -----------
 */

body {
  overflow-x: hidden;
  font-family: var(--font-default);
  font-size: var(--font-size-default);
  font-weight: var(--weight-default);
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  line-height: var(--line-sm);
}

/**
 * Colors
 * ------
 */

.mode-blue {
  --colour-brand-primary-darkest: var(--color-primary-dark);
  --colour-brand-primary-dark: var(--color-primary-dark);
  --colour-brand-primary-default: var(--color-primary);
  --colour-brand-primary-hover: var(--color-primary-light);
}

/**
 * Typography
 * ----------
 */

h1,
h2,
.Title {
  font-family: var(--font-primary);
  font-weight: var(--weight-default) !important;
  letter-spacing: normal !important;
}

h3,
h4,
h5,
h6 {
  font-size: var(--font-size-default);
  font-weight: var(--weight-default) !important;
  letter-spacing: normal !important;
}

/**
 * Header Logo
 * -----------
 */

#header-container .logo img {
  width: 200px;
}

/**
 * Login
 * -----
 */

.LoginPage {
  background-color: var(--color-primary);
}

.LoginPage h1 {
  color: var(--color-white);
}

#LoginHeader img {
  margin: auto;
  content: url("../images/site-logo-white.svg");
  width: 100%;
  max-width: 340px;
}

.LoginPage label[for="user_local_tz"],
.LoginPage label[for="language"],
.LoginPage a.text-link:link,
.LoginPage a.text-link:visited {
  color: var(--color-white);
}

.LoginPage .button input[type="submit"],
.LoginPage .button input[type="button"],
.LoginPage .QuestionSubmit input[type="submit"] {
  width: 100%;
  background-color: var(--color-purple);
}

.LoginPage .button input[type="submit"]:hover,
.LoginPage .button input[type="button"]:hover,
.LoginPage .QuestionSubmit input[type="submit"]:hover {
  background-color: var(--color-purple-dark);
}

#login-footer,
.LoginPage p:empty {
  display: none;
}

/**
 * Reset Password
 * --------------
 */

.LoginPage form[action="/pages/user/user_change_password.php"] .Question,
.LoginPage form[action="/pages/user/user_change_password.php"] .QuestionSubmit {
  padding: 0;
  border-bottom: none;
}

.LoginPage form[action="/pages/user/user_change_password.php"] .Question label {
  margin-bottom: var(--space-sm);
  color: var(--color-white);
}

.LoginPage
  form[action="/pages/user/user_change_password.php"]
  .Question
  .FormError {
  border-radius: var(--border-radius-xs);
  margin: 0px;
  padding: var(--space-sm);
  font-size: var(--font-size-sm);
  background-color: var(--color-white);
}