/*
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: "Izmir";
  src:
    url("/assets/izmir/izmir-light-325681f7.woff2") format("woff2"),
    url("/assets/izmir/izmir-light-0a16e9f8.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Izmir";
  src:
    url("/assets/izmir/izmir-regular-dace4735.woff2") format("woff2"),
    url("/assets/izmir/izmir-regular-911c100e.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Izmir";
  src:
    url("/assets/izmir/izmir-medium-a9423011.woff2") format("woff2"),
    url("/assets/izmir/izmir-medium-bad01ef2.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Izmir";
  src:
    url("/assets/izmir/izmir-semibold-3e1df53f.woff2") format("woff2"),
    url("/assets/izmir/izmir-semibold-a76b6bc4.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Izmir";
  src:
    url("/assets/izmir/izmir-bold-5928e15a.woff2") format("woff2"),
    url("/assets/izmir/izmir-bold-19f00009.woff") format("woff");
  font-weight: 700;
  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: 108%;
  ascent-override: 105%;
  src: local("Arial");
}


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

  /* Greys */
  --grey-20: #f8f8f8;
  --grey-50: #f5f5f5;
  --grey-75: #f1f1f1;
  --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: #151515;
  --grey-1000: #1b1b1b;

  /* COLOUR SCALES */
  --pink-100: #fce8ea;
  --orange-100: #faf0e8;
  --red-500: #cb2027;
  --green-100: #dbf0df;
  --green-300: #a7f192;
  --blue-50: #F0F6FE;
  --blue-100: #daeaf1;
  --blue-300: #0d76df;
  --blue-500: #0066CC;
  --blue-700: #323E64;
  --blue-800: #192651;
  --blue-850: #172143;
  --blue-950: #0B0F23;
  --teal-500: #579D8D;
  --teal-600: #4d8d7e;

  /* BRAND COLOURS */
  --color-primary: var(--blue-800);
  --color-primary-tint: var(--blue-850);
  --color-secondary: var(--teal-500);
  --color-secondary-tint: var(--teal-600);

  /* MESSAGES */
  --color-success: #408e22;
  --surface-success: #dff0d8;
  --color-alert: #963b3b;
  --surface-alert: #f2dede;
  --color-error: #c31a1a;
  --color-info: #1c3348;
  --surface-info: #E0F0FB;
  --color-warning: #9a5d00;
  --surface-warning: #fff0e0;

  /* FONT COLOURS */
  --base-font-color: var(--grey-975); /* Body text */
  --text-primary-color: var(--color-primary); /* First text colour override */
  --text-secondary-color: var(--color-secondary); /* Second text colour override */
  --base-heading-color: var(--text-primary-color);
  --base-spacing-unit: 1.25rem; /* Probably not needed anymore */

  /* 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: 'Izmir', '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: 1rem;
  --list-line-height: 1.7;
  /* --ol-style-type: decimal; */

  /* TABLES */
  --table-margin: var(--base-spacing-unit);
  --table-th-text-color: var(--color-primary);
  --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-400);
  --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: 2rem;
  --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: 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: 1rem;
  --btn-font-size-tablet: 1rem;
  --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-darkblue: var(--color-primary);
  --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(--color-primary);

  /* 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: 5rem;
  --page-block-margin: var(--page-block-margin-mobile);

  /* MODULE SPACING */
  --module-spacing-mobile: 2rem; /* 32px*/
  --module-spacing-tablet: 2.75rem; /* 44px*/
  --module-spacing-desktop: 5rem; /* 80px*/
  --module-spacing: var(--module-spacing-mobile);

  --module-spacing-sm-mobile: 1rem;
  --module-spacing-sm-tablet: 1.25rem;
  --module-spacing-sm-desktop: 2rem;
  --module-spacing-sm: var(--module-spacing-sm-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: 1.5rem; /* 24px */
  --grid-gap-large: 2rem; /* 32px */

  /* 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-sticky-header: 15;
  --z-index-desktop-subnav: 16;
  --z-index-search-bar: 17;
  --z-index-alert: 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: 5.5rem; /* 88px;*/
  --header-lower-height-tablet: 7.25rem; /* 116px;*/
  --header-lower-height-desktop: 9.5rem; /* 152px;*/
  --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: 9.375rem; /* 150px;*/
  --header-slide-in-nav-offset-mobile: 0rem;
  --header-slide-in-nav-offset-tablet: 0rem;
  --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.1);
  --box-shadow-header-mobile: 0px 0px 10px 0 rgba(0,0,0,0.1);
  --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.25rem;
  --snippet-line-distance-tablet: 2rem;
  --snippet-line-distance-desktop: 2rem;
  --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: 31;
  --fs-h1-tablet: 35;
  --fs-h1-desktop: 60;

  --fs-h2-mobile: 26;
  --fs-h2-tablet: 30;
  --fs-h2-desktop: 42;

  --fs-h3-mobile: 22;
  --fs-h3-tablet: 24;
  --fs-h3-desktop: 30;

  --fs-h4-mobile: 18;
  --fs-h4-tablet: 19;
  --fs-h4-desktop: 25;

  --fs-h5-mobile: 17;
  --fs-h5-tablet: 18;
  --fs-h5-desktop: 20;

  --fs-h6-mobile: 16;
  --fs-h6-tablet: 17;
  --fs-h6-desktop: 19;

  --fs-p-mobile: 16;
  --fs-p-tablet: 16;
  --fs-p-desktop: 18;

  --fs-intro-mobile: 20;
  --fs-intro-tablet: 21;
  --fs-intro-desktop: 22;

  --fs-intro-large-mobile: 23;
  --fs-intro-large-tablet: 23;
  --fs-intro-large-desktop: 30;

  --fs-snippet-mobile: 21;
  --fs-snippet-tablet: 23;
  --fs-snippet-desktop: 25;

  --fs-blockquote-mobile: 21;
  --fs-blockquote-tablet: 23;
  --fs-blockquote-desktop: 25;

    /* FONT SIZES (IN UNITLESS PX VALUES) */
  /* These variables are used to re-define the `--text-font-size` variable on an element which is part of the selectors list in `CSS calc() math for fonts` in `typescale.scss`. We can apply this variable once and have it apply across all BPs.

  Use these vars with `--text-font-size:` inside the selector to define a new font size, eg. `p{--text-font-size: var(-fs-h2-px)}`, and all the other margin & line-height values will be calculated from it, across BPs. */

  --fs-p-px: var(--fs-p-mobile);
  --fs-h2-px: var(--fs-h2-mobile);
  --fs-h3-px: var(--fs-h3-mobile);
  --fs-h4-px: var(--fs-h4-mobile);
  --fs-h5-px: var(--fs-h5-mobile);
  --fs-h6-px: var(--fs-h6-mobile);


  /* FONT SIZES (IN REMS) */
  /* Sometimes we need to style certain element's which are not part of the selectors list in `CSS calc() math for fonts` in `typescale.scss` to match the same font size as e.g a H2 across BPs. We use these vars to do that.

  Because the element's these vars will be added to are not part of the selectors list in `CSS calc() math for fonts` in `typescale.scss`, we need to define them in rems, so that they can be used in the `font-size` property of the element's CSS e.g `font-size: var(--fs-h2)`.
  Not being part of the selectors list means the line-height and margin values will not be calculated from the font size, but we can still use these vars to set the font size of the element to match e.g. a H2 across BPs.

  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: calc((var(--fs-p-mobile) / var(--base-font-size)) * 1rem);
  --fs-h1: calc((var(--fs-h1-mobile) / var(--base-font-size)) * 1rem);
  --fs-h2: calc((var(--fs-h2-mobile) / var(--base-font-size)) * 1rem);
  --fs-h3: calc((var(--fs-h3-mobile) / var(--base-font-size)) * 1rem);
  --fs-h4: calc((var(--fs-h4-mobile) / var(--base-font-size)) * 1rem);
  --fs-h5: 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 (IN UNITLESS PX VALUES) */
    --fs-p-px: var(--fs-p-tablet);
    --fs-h2-px: var(--fs-h2-tablet);
    --fs-h3-px: var(--fs-h3-tablet);
    --fs-h4-px: var(--fs-h4-tablet);
    --fs-h5-px: var(--fs-h5-tablet);
    --fs-h6-px: var(--fs-h6-tablet);

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


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

    /* SPACING */
    --page-block-margin: var(--page-block-margin-tablet);
    --module-spacing: var(--module-spacing-tablet);
    --module-spacing-sm: var(--module-spacing-sm-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: 1.5rem;

    /* 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: 11.5rem; /* 184px;*/
    --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 (IN UNITLESS PX VALUES) */
    --fs-p-px: var(--fs-p-desktop);
    --fs-h2-px: var(--fs-h2-desktop);
    --fs-h3-px: var(--fs-h3-desktop);
    --fs-h4-px: var(--fs-h4-desktop);
    --fs-h5-px: var(--fs-h5-desktop);
    --fs-h6-px: var(--fs-h6-desktop);

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

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

     /* 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: 15.25rem; /* 244px;*/
    --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);
  }

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