/* ==================== Base styles ==================== */
/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}

/* ==================== Helper classes ==================== */
/*
 * Hide visually and from screen readers
 */
.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */
.visuallyhidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
  visibility: hidden;
}

/* ==================== General styles ==================== */

html {
  font-size: 100%;
}

.mobileHide {
    display: none;
}

@media screen and (min-width: 1200px) {
  html.font-scale-2 {
    font-size: 112.5%;
  }
    .mobileHide {
        display: inline;
    }
    .categories-container.mobileHide {
        display: block !important;
    }}

@media screen and (min-width: 1200px) {
  html.font-scale-4 {
    font-size: 125%;
  }
    .mobileHide {
        display: inline;
    }
    .categories-container.mobileHide {
        display: block !important;
    }
}

html body {
  box-sizing: border-box;
  color: var(--primary-dark-gray-color);
  font-family: 'Tajawal', sans-serif;
}

img {
  max-width: 100%;
}

/* ---------- Overrides/Resets ---------- */
a {
  color: inherit;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

a:focus {
  border: 1px dotted;
  border: 5px auto -webkit-focus-ring-color;
}

p {
  margin-bottom: 0;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

button {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
  cursor: pointer;
}

.dropdown {
  position: unset;
}

/* ==================== Bootstrap Override ==================== */
.container,
.container-fluid {
  max-width: var(--content-max-width);
}

.container--gray,
.container-fluid--gray {
  background-color: var(--primary-light-gray-color);
}

.row--parkland-gutters,
.row--parkland-gutters-small,
.row--parkland-no-gutters-md {
  padding-left: var(--mobile-gutter-width);
  padding-right: var(--mobile-gutter-width);
}

@media screen and (min-width: 768px) {
  .row--parkland-gutters {
    padding-left: var(--desktop-gutter-width);
    padding-right: var(--desktop-gutter-width);
  }
}

@media screen and (min-width: 768px) {
  .row--parkland-gutters-small {
    padding-left: var(--desktop-smaller-gutter-width);
    padding-right: var(--desktop-smaller-gutter-width);
  }
}

@media screen and (min-width: 768px) {
  .row--parkland-no-gutters-md {
    padding-left: 0;
    padding-right: 0;
  }
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
  color: var(--primary-purple-color);
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--primary-purple-color);
}

@media (min-width: 768px) {
  .dropdown-menu .dropdown .dropdown-menu {
    margin: 0 20px;
  }
    .mobileHide {
        display: inline;
    }
    .categories-container.mobileHide {
        display: block !important;
    }
}

.dropdown-toggle::after {
  display: none;
}

/* ==================== Translate Override ==================== */
.goog-te-combo {
  display: none;
}

/* ==================== Fonts ==================== */
@font-face {
  font-family: "pchp-icons";
  src:  url("fonts/pchp-icons.eot?4x55lt");
  src:  url("fonts/pchp-icons.eot?4x55lt#iefix") format("embedded-opentype"),
    url("fonts/pchp-icons.ttf?4x55lt") format("truetype"),
    url("fonts/pchp-icons.woff?4x55lt") format("woff"),
    url("fonts/pchp-icons.svg?4x55lt#pchp-icons") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "freight-display-pro";
  src: url("https://use.typekit.net/af/b5dc69/000000000000000077359f9c/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
    url("https://use.typekit.net/af/b5dc69/000000000000000077359f9c/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
    url("https://use.typekit.net/af/b5dc69/000000000000000077359f9c/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
}

/* ==================== Icons ==================== */
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'pchp-icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-approval:before {
  content: "\e900";
}

.icon-caret:before {
  content: "\e901";
}

.icon-clipboard:before {
  content: "\e903";
}

.icon-email:before {
  content: "\e904";
}

.icon-envelope:before {
  content: "\e905";
}

.icon-exclamation:before {
  content: "\e906";
}

.icon-external:before {
  content: "\e907";
}

.icon-facebook:before {
  content: "\e908";
}

.icon-heart:before {
  content: "\e909";
}

.icon-hospital:before {
  content: "\e90a";
}

.icon-linkedin:before {
  content: "\e90b";
}

.icon-magnifier:before {
  content: "\e90c";
}

.icon-pin:before {
  content: "\e90d";
}

.icon-minus:before {
  content: "\e90e";
}

.icon-pencil:before {
  content: "\e90f";
}

.icon-phone:before {
  content: "\e910";
}

.icon-play:before {
  content: "\e911";
}

.icon-plus:before {
  content: "\e912";
}

.icon-arrow:before {
  content: "\e913";
}

.icon-twitter:before {
  content: "\e914";
}

.icon-user:before {
  content: "\e915";
}

/* ==================== Animations ==================== */
/* ---------- Fade in ---------- */
@keyframes fadein {
  from {
      opacity:0;
  }
  to {
      opacity:1;
  }
}
@-moz-keyframes fadein { /* Firefox */
  from {
      opacity:0;
  }
  to {
      opacity:1;
  }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
  from {
      opacity:0;
  }
  to {
      opacity:1;
  }
}
@-o-keyframes fadein { /* Opera */
  from {
      opacity:0;
  }
  to {
      opacity: 1;
  }
}

/* ---------- Fade out ---------- */
@keyframes fadeout {
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}
@-moz-keyframes fadeout { /* Firefox */
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}
@-o-keyframes fadeout { /* Opera */
  from {
      opacity: 1;
  }
  to {
      opacity: 01;
  }
}

/* ==================== Variables ==================== */
:root {
  /* ---------- Colors ---------- */
  --primary-white-color: #FFFFFF;
  --primary-purple-color: #4F0B7B;
  --primary-dark-gray-color: #444444;
  --primary-light-gray-color: #F9F8F6;
  --primary-inactive-font-color: #8F8F8F;
  --secondary-purple-color: #A78CC2;
  --secondary-red-color: #822433;
  --secondary-blue-color: #003F72;
  --secondary-light-blue-color: #7F9FB8;
  --secondary-orange-color: #D47600;
  --secondary-light-orange-color: #E9B87E;
  --secondary-green-color: #275937;
  --secondary-light-green-color: #92AB98;
  --secondary-white-color: #f9f4f5;
  --tertiary-gray-color: #707070;
  --tertiary-light-gray-color: #E9E9E9;
  --tertiary-light-green-color: #D3DED7;
  --tertiary-light-purple-color: #EDE6F1;
  --tertiary-light-red-color: #A15B66;
  --tertiary-light-teal-color: #40979B;
  --tertiary-lighter-teal-color: #DBEAEB;
  --tertiary-lighter-orange-color: #EAB87E;
  --tertiary-red-color: #C22100;
  --hero-background-color: #ECECE4;
  --border-gray-color: #C5C5C5;
  --separator-gray-color: #EAEAEA;
  --tile-border-color: #DFDFDF;
  --hero-shadow-color: #0000000A;
  --shadow-gray-color: #00000029;
  --table-header-border-color: #6B0FA7;
  --breadcrumbs-predecessor-color: #935BB4;

  /* ---------- Widths ---------- */
  --small-width: 576px;
  --medium-width: 768px;
  --large-width: 992px;
  --extra-large-width: 1200px;
  --content-max-width: 1600px;
  --mobile-gutter-width: 9px;
  --desktop-gutter-width: 4.8%;
  --desktop-smaller-gutter-width: 27px;
  --desktop-hero-gutter-width: 5.75%;
  --mobile-nav-gutter-width: 24px;
  --desktop-nav-gutter-width: 42px;

  /* --------- Other -------- */
  --font-weight-bold: 700;
  --circle-border-radius: 50%;
}