/*
Define all the required self hosted .woff and .woff2 font family weights here.
Each @font-face rule defines a new font-family/weight combination, and adds that
weight's availability to the font-family when we call the var later.
*/

@font-face {
  font-family: "Causten";
  src:
    url("/assets/causten/causten-light-1fc6b7ed.woff2") format("woff2"),
    url("/assets/causten/causten-light-9bb88913.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Causten";
  src:
    url("/assets/causten/causten-regular-8d2763b1.woff2") format("woff2"),
    url("/assets/causten/causten-regular-f01e27c4.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Causten";
  src:
    url("/assets/causten/causten-medium-43cf84fa.woff2") format("woff2"),
    url("/assets/causten/causten-medium-a5d84b18.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Causten";
  src:
    url("/assets/causten/causten-bold-9931e74f.woff2") format("woff2"),
    url("/assets/causten/causten-bold-556f46d2.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Causten";
  src:
    url("/assets/causten/causten-black-360e2ae1.woff2") format("woff2"),
    url("/assets/causten/causten-black-23d29d5c.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/*
Size adjusted local fallback font
=================================
- To minimise CLS when the self-hosted font file loads in
- Use this link to determine the "web-safe" local fallback font
- size adjustments to match whichever google font is in use.
- https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback
- Then assign a custom font-family name,
- And add it as the second font-family name in the `--font-stack`
*/

@font-face {
  font-family: "open-sans-fallback-arial";
  size-adjust: 96%;
  ascent-override: 100%;
  src: local("Arial");
}


:root {
  /* Standard Colors */
  --black: #000000;
  --white: #ffffff;

  /* Greys */
  --grey-20: #f8f8f8;
  --grey-50: #f5f5f5;
  --grey-100: #ededed;
  --grey-125: #e7e7e7;
  --grey-150: #e0e0e2;
  --grey-175: #e2e2e2;
  --grey-200: #ddd;
  --grey-250: #cfcfd0;
  --grey-300: #ccc;
  --grey-325: #c3c3c3;
  --grey-350: #bcbcbc;
  --grey-400: #a3a3a3;
  --grey-450: #979797;
  --grey-500: #707070;
  --grey-600: #535659;
  --grey-700: #4e4e4e;
  --grey-750: #333333;
  --grey-800: #292929;
  --grey-900: #2b2b2b;
  --grey-950: #222223;
  --grey-975: #231F20;
  --grey-1000: #1b1b1b;

  /* COLOUR SCALES */
  --pink-100: #fce8ea;
  --orange-100: #faf0e8;
  --red-500: #E50040;
  --red-700: #b50c3c;
  --green-100: #dbf0df;
  --green-300: #a7f192;
  --blue-100: #daeaf1;
  --blue-300: #0d76df;
  --blue-500: #0066CC;
  --blue-700: #0059b3;

  /* BRAND COLOURS */
  --color-primary: var(--red-500);
  --color-primary-dark: var(--red-700);
  --color-secondary: var(--grey-975);

  /* MESSAGES */
  --color-success: #408e22;
  --surface-success: #dff0d8;
  --color-alert: #963b3b;
  --surface-alert: #f2dede;
  --color-error: #c31a1a;

  /* FONT COLOURS */
  --base-font-color: var(--color-secondary);
  --text-secondary-color: var(--color-primary);
  --base-heading-color: var(--color-secondary);
  --base-spacing-unit: 1.25rem; /* Probably not needed anymore */

  /* --color-success: #04B34F;
  --surface-success: #E0F2E7 ;
  --color-info: #0057B8;
  --surface-info: #E0F0FB;
  --color-warning: #FF9900;
  --surface-warning: #FFF3E0;
  --color-error: #A6192E;
  --surface-error: #FCE6E8; */

  /* FONTS */
  --base-font-size: 16;
  /* // Set the font-family declarations ie. 'Open Sans' from @font-face rules to vars
  // And define their font fallback stack by testing web-safe fallback fonts for similar x,y, and kerning values */
  --font-stack: 'Causten', 'open-sans-fallback-arial', trebuchet ms, helvetica, arial, sans-serif;

  /* Fonts */
  --font-family-base: var(--font-stack);
  --font-family-heading: var(--font-stack); /*system-ui;*/
  --font-family-code: monospace;

  --line-height-heading: 1.4;

  /* Typography
  --body-max-width: 65ch; /* ch = characters. Larger text = wider in px */

  /* Lists */
  --list-indent: 1.5rem;
  --list-line-height: 1.7;
  /* --ol-style-type: decimal; */

  /* TABLES */
  --table-margin: var(--base-spacing-unit);
  --table-th-text-color: var(--color-secondary);
  --table-td-text-color: var(--grey-950);
  --table-th-border-color: var(--color-primary);
  --table-td-border-color: var(--grey-400);
  --table-td-th-vert-padding: 25px;

  /* FORMS */
  --form-input-border-color: var(--grey-450);
  --form-input-bg-color: var(--white);
  --form-input-height-mobile: 3rem; /* 48px */
  --form-input-height-tablet: 3.25rem; /* 52px */
  --form-input-height: var(--form-input-height-mobile);
  --form-input-text-size: 1rem;
  --form-input-text-color: var(--base-font-color);
  --form-input-padding: 0.75rem;
  --form-grid-gap: 1.75rem;
  --form-label-margin: 0.5rem;
  --form-label-text-color: var(--base-font-color);
  --form-required-icon-color: var(--red-500);

  /* BUTTONS */
  --btn-surface: var(--color-primary);
  --btn-surface-dark: var(--grey-950);
  --btn-surface-dark-hover: var(--grey-1000);
  --btn-surface-secondary: var(--grey-100);
  --btn-surface-secondary-hover: var(--grey-150);
  --btn-text-color: var(--white);
  --btn-text-color-hover: var(--white);
  --btn-height-mobile: 3rem; /* 48px */
  --btn-height-tablet: 3.25rem; /* 52px */
  --btn-height-desktop: 3.75rem; /* 60px */
  --btn-height: var(--btn-height-mobile);
  --btn-padding-inline-mobile: 30px;
  --btn-padding-inline-tablet: 30px;
  --btn-padding-inline: var(--btn-padding-inline-mobile);
  --btn-font-size-mobile: 1.125rem;
  --btn-font-size-tablet: 1.25rem;
  --btn-font-size: var(--btn-font-size-mobile);

  /* SURFACES (PANEL COLOURS MAINLY) */
  --surface-color: var(--white);
  --surface-grey: var(--grey-20);
  --surface-pink: var(--pink-100);
  --surface-blue: var(--blue-100);
  --surface-green: var(--green-100);
  --surface-orange: var(--orange-100);
  --surface-contrast-text-color: var(--white);

  /* IMAGE PLACEHOLDERS */
  --placeholder-image-bg: var(--grey-150);
  --header-placeholder-image-bg: var(--white);

  /* CONTENT WIDTHS */
  --content-small: 960px;
  --content-medium: 1170px;
  --content-large: 1440px;
  --content-xl: 1660px;
  --content-width: none;

  /* PAGE TOP/BOTTOM SPACING */
  --page-block-margin-mobile: 2.5rem;
  --page-block-margin-tablet: 3.75rem;
  --page-block-margin-desktop: 7.5rem;
  --page-block-margin: var(--page-block-margin-mobile);

  /* MODULE SPACING */
  --module-spacing-mobile: 2rem; /* 32px*/
  --module-spacing-tablet: 3rem; /* 48px*/
  --module-spacing-desktop: 7.5rem; /* 120px*/
  --module-spacing: var(--module-spacing-mobile);

  --module-spacing-reduced-mobile: 2rem;
  --module-spacing-reduced-tablet: 2rem;
  --module-spacing-reduced-desktop: 3rem;
  --module-spacing-reduced: var(--module-spacing-reduced-mobile);

  /* BODY GUTTER */
  --body-gutter-mobile: 1.25rem;
  --body-gutter-tablet: 2rem;
  --body-gutter: var(--body-gutter-mobile);

  --body-gutter-small-mobile: 0.5rem;
  --body-gutter-small-tablet: 1.25rem;
  --body-gutter-small-desktop: var(--body-gutter-tablet);
  --body-gutter-small: var(--body-gutter-small-mobile);

  /* CONTENT MAX WIDTHS */
  --site-content-max-width: 30000px; /* Overridden to 2500px if header-desktop.scss is loaded */
  --body-text-max-width: 900px;

  /* GRID GAPS */
  --grid-gap: 1.25rem; /* 20px */
  --card-grid-gap: var(--grid-gap);
  --grid-gap-large: 2.5rem; /* 40px */

  /* BORDER RADIUS */
  --border-radius-mobile: 0px;
  --border-radius-tablet: 0px;
  --border-radius: var(--border-radius-mobile);


  /* GRID CELLS WITH BACKGROUNDS */
  --cell-background-border-radius-mobile: var(--border-radius-mobile);
  --cell-background-border-radius-tablet: var(--border-radius-tablet);
  --cell-background-border-radius-desktop: var(--border-radius-tablet);
  --cell-background-padding-mobile: 1.5rem 1.5rem;
  --cell-background-padding-tablet: 1.75rem 2rem;
  --cell-background-padding-desktop: var(--cell-background-padding-tablet);

  --cell-background-padding: var(--cell-background-padding-mobile);
  --cell-background-border-radius: var(--cell-background-border-radius-mobile);


  /* TEXT EXTRA SPACING INSIDE GRID CELLS */
  --grid-cell-text-padding-right-tablet: 1.25rem;
  --grid-cell-text-padding-right-desktop: 2.5rem;
  --grid-cell-text-padding-right: var(--grid-cell-text-padding-right-tablet);


  /* CUSTOM SCROLLBARS */
  --scrollbar-base-color: var(--grey-150);
  --scrollbar-face-color: var(--color-primary);
  --scrollbar-shadow-color: var(--grey-500);
  --slider-scrollbar-height: 0.75rem;


  /* Z-INDEXING */
  --z-index-image-caption: 1;
  --z-index-figcaption: 1;
  --z-index-grid-cell-icon-overlay: 1;
  --z-index-glide-arrow: 2;
  --z-index-glide-bullets: 2;
  --z-index-subnav-toggle: 10;
  --z-index-banner-messages: 13;
  --z-index-floating-action-button: 14;
  --z-index-alert: 15;
  --z-index-sticky-header: 16;
  --z-index-search-bar: 17;
  --z-index-desktop-subnav: 18;
  --z-index-nav-slide-in-ovelay: 19;
  --z-index-nav-slide-in: 20;
  --z-index-transparent-header: 21;
  --z-index-modal-window: 30;
  --z-index-modal-close-btn: 40;
  --z-index-modal-pulsing-loader: 50;
  --z-index-skip-content: 100;


  /* HEADER */
  --header-background: var(--white);
  --header-lower-height-mobile: 6.25rem; /* 100px;*/
  --header-lower-height-tablet: 8.375rem; /* 134px;*/
  --header-lower-height-desktop: 13.125rem; /* 210px;*/
  --header-lower-height: var(--header-lower-height-mobile);

  --header-lower-height-sticky-mobile: 4.5rem; /* 72px;*/
  --header-lower-height-sticky-tablet: 5.5rem; /* 88px;*/
  --header-lower-height-sticky: var(--header-lower-height-sticky-mobile);

  --header-upper-height: 0px;

  --header-height: calc(var(--header-lower-height) + var(--header-upper-height));

  --header-logo-width: 8.75rem; /* 140px;*/
  --header-slide-in-nav-offset-mobile: 0px;
  --header-slide-in-nav-offset-tablet: 0px;
  --header-slide-in-nav-offset: var(--header-slide-in-nav-offset-mobile);

  --sliding-nav-width: 25rem; /* 400px;*/
  --nav-item-padding-block: 0.5rem;
  --subnav-max-height-desktop: calc(90vh - var(--header-lower-height) - var(--header-upper-height));
  --subnav-bg-color-desktop: var(--color-secondary);

  /* BOX-SHADOWS */
  --box-shadow: 0px 5px 7px -1px  rgba(0,0,0,0.3);
  --box-shadow-header: 0px 01px 10px 0 rgba(0,0,0,0.15);
  --box-shadow-header-mobile: 0px 2px 6px 0 rgba(0,0,0,0.15);
  --box-shadow-slide-in-nav: 1px 11px 7px 3px rgba(0,0,0,0.2);
  --box-shadow-modal: 0 0 10px rgba(0,0,0,0.2);

  /* Animations */
  --hover-transition-short-rotate: transform .2s ease-in-out;

  /* TEXT ELEMENTS */
  --snippet-line-distance-mobile: 1.75rem;
  --snippet-line-distance-tablet: 2.25rem;
  --snippet-line-distance-desktop: 2.25rem;
  --snippet-line-distance: var(--snippet-line-distance-mobile);

  /* MODULE TITLES */
  --module-title-spacing-bottom-mobile: 1.25rem;
  --module-title-spacing-bottom-tablet: 2rem;
  --module-title-spacing-bottom-desktop: 2.25rem;
  --module-title-spacing-bottom: var(--module-title-spacing-bottom-mobile);

  /* FONT SIZES */
  --fs-h1-mobile: 41;
  --fs-h1-tablet: 55;
  --fs-h1-desktop: 110;

  --fs-h2-mobile: 30;
  --fs-h2-tablet: 40;
  --fs-h2-desktop: 63;

  --fs-h3-mobile: 26;
  --fs-h3-tablet: 34;
  --fs-h3-desktop: 53;

  --fs-h4-mobile: 22;
  --fs-h4-tablet: 30;
  --fs-h4-desktop: 43;

  --fs-h5-mobile: 20;
  --fs-h5-tablet: 26;
  --fs-h5-desktop: 30;

  --fs-h6-mobile: 19;
  --fs-h6-tablet: 24;
  --fs-h6-desktop: 28;

  --fs-p-mobile: 18;
  --fs-p-tablet: 19;
  --fs-p-desktop: 20;

  --fs-intro-mobile: 22;
  --fs-intro-tablet: 24;
  --fs-intro-desktop: 29;

  --fs-snippet-mobile: 23;
  --fs-snippet-tablet: 28;
  --fs-snippet-desktop: 33;

  --fs-blockquote-mobile: 23;
  --fs-blockquote-tablet: 28;
  --fs-blockquote-desktop: 33;

  /* Sometimes we need to style certain text to match the same font size as e.g a H2 across BPs. Use these vars to do that. NB: WE DON'T USE THESE VARS WHEN SETTING THE ACTUAL ELEMENT'S FONT SIZES, instead we group changes across BPs in `Typescale.scss` */
  --fs-p: var(--fs-p-mobile);

  /* We use these values to re-define `var(--text-font-size)` on elements which have been targeted in `typescale.scss` */
  /* E.g. `.btn{--text-font-size: var(--fs-h3);}` */
  /* The values across breakpoints are unitless,
  and we need untiless to do the line-height / margin etc. calculations at the top of typescale.scss  */
  --fs-h1: var(--fs-h1-mobile);
  --fs-h2: var(--fs-h2-mobile);
  --fs-h3: var(--fs-h3-mobile);
  --fs-h4: var(--fs-h4-mobile);
  --fs-h5: var(--fs-h5-mobile);

  /* We use these values inside a `font-size` declaration */
  /* E.g. `.btn{font-size: var(--fs-h3-calc);}` */
  /* They give `rem` units once calculated */
  /* These are primarily used in case an element is not already targeted by the typescale.scss calculations */
  --fs-p-calc: calc((var(--fs-p-mobile) / var(--base-font-size)) * 1rem);
  --fs-h1-calc: calc((var(--fs-h1-mobile) / var(--base-font-size)) * 1rem);
  --fs-h2-calc: calc((var(--fs-h2-mobile) / var(--base-font-size)) * 1rem);
  --fs-h3-calc: calc((var(--fs-h3-mobile) / var(--base-font-size)) * 1rem);
  --fs-h4-calc: calc((var(--fs-h4-mobile) / var(--base-font-size)) * 1rem);
  --fs-h5-calc: calc((var(--fs-h5-mobile) / var(--base-font-size)) * 1rem);

  @media (min-width: 768px) {
    /* MODULE TITLES */
    --module-title-spacing-bottom: var(--module-title-spacing-bottom-tablet);

    /* FONT SIZES */
    --fs-p:var(--fs-p-tablet);
    --fs-h1: var(--fs-h1-tablet);
    --fs-h2: var(--fs-h2-tablet);
    --fs-h3: var(--fs-h3-tablet);
    --fs-h4: var(--fs-h4-tablet);
    --fs-h5: var(--fs-h5-tablet);

    --fs-p-calc: calc((var(--fs-p-tablet) / var(--base-font-size)) * 1rem);
    --fs-h1-calc: calc((var(--fs-h1-tablet) / var(--base-font-size)) * 1rem);
    --fs-h2-calc: calc((var(--fs-h2-tablet) / var(--base-font-size)) * 1rem);
    --fs-h3-calc: calc((var(--fs-h3-tablet) / var(--base-font-size)) * 1rem);
    --fs-h4-calc: calc((var(--fs-h4-tablet) / var(--base-font-size)) * 1rem);
    --fs-h5-calc: calc((var(--fs-h5-tablet) / var(--base-font-size)) * 1rem);

    /* TEXT ELEMENTS */
    --snippet-line-distance: var(--snippet-line-distance-mobile);

    /* SPACING */
    --page-block-margin: var(--page-block-margin-tablet);
    --module-spacing: var(--module-spacing-tablet);
    --module-spacing-reduced: var(--module-spacing-reduced-tablet);
    --body-gutter: var(--body-gutter-tablet);
    --body-gutter-small: var(--body-gutter-small-tablet);

    /* BORDER RADIUS */
    --border-radius: var(--border-radius-tablet);

    /* LISTS */
    --list-indent: 2rem;

    /* BUTTONS */
    --btn-height: var(--btn-height-tablet);
    --btn-padding-inline: var(--btn-padding-inline-tablet);
    --btn-font-size: var(--btn-font-size-tablet);

    /* FORMS */
    --form-input-height: var(--form-input-height-tablet);

    /* HEADER */
    --header-lower-height: var(--header-lower-height-tablet);
    --header-lower-height-sticky: var(--header-lower-height-sticky-tablet);
    --header-logo-width: 14rem; /* 224px;*/
    --header-slide-in-nav-offset: var(--header-slide-in-nav-offset-tablet);

    /* GRID CELLS WITH BACKGROUNDS */
    --cell-background-padding: var(--cell-background-padding-tablet);
    --cell-background-border-radius: var(--cell-background-border-radius-tablet);
  }

  @media (min-width: 960px) {
    /* MODULE TITLES */
    --module-title-spacing-bottom: var(--module-title-spacing-bottom-desktop);

    /* FONT SIZES */
    --fs-p: var(--fs-p-desktop);
    --fs-h1: var(--fs-h1-desktop);
    --fs-h2: var(--fs-h2-desktop);
    --fs-h3: var(--fs-h3-desktop);
    --fs-h4: var(--fs-h4-desktop);
    --fs-h5: var(--fs-h5-desktop);

    --fs-p-calc: calc((var(--fs-p-desktop) / var(--base-font-size)) * 1rem);
    --fs-h1-calc: calc((var(--fs-h1-desktop) / var(--base-font-size)) * 1rem);
    --fs-h2-calc: calc((var(--fs-h2-desktop) / var(--base-font-size)) * 1rem);
    --fs-h3-calc: calc((var(--fs-h3-desktop) / var(--base-font-size)) * 1rem);
    --fs-h4-calc: calc((var(--fs-h4-desktop) / var(--base-font-size)) * 1rem);
    --fs-h5-calc: calc((var(--fs-h5-desktop) / var(--base-font-size)) * 1rem);

    /* TEXT ELEMENTS */
    --snippet-line-distance: var(--snippet-line-distance-mobile);

    /* LISTS */
    --list-indent: 2.25rem;

     /* SPACING */
    --body-gutter-small: var(--body-gutter-small-desktop);

    /* GRID CELLS WITH BACKGROUNDS */
    --cell-background-padding: var(--cell-background-padding-desktop);
    --cell-background-border-radius: var(--cell-background-border-radius-desktop);
  }

  @media (min-width: 1080px) {
    /* SPACING */
    --page-block-margin: var(--page-block-margin-desktop);

    /* HEADER */
    --header-logo-width: 18.25rem; /* 292px;*/
    --header-lower-height: var(--header-lower-height-desktop);

    /* TEXT EXTRA SPACING INSIDE GRID CELLS */
    --grid-cell-text-padding-right: var(--grid-cell-text-padding-right-desktop);

    /* BUTTONS */
    --btn-height: var(--btn-height-desktop);
  }

  @media (min-width: 1200px) {
    /* SPACING */
    --module-spacing: var(--module-spacing-desktop);
    --module-spacing-reduced: var(--module-spacing-reduced-desktop);
  }
}