/**
  * @file
  * Variables and general reusable elements.
  **/

:root {
  --gutter-x: 1.5rem;
  --gutter-y: 15px;
  --laurier-purple: #330072;
  --laurier-gold: #f2a900;
  --laurier-mauve: #924da7;
  --laurier-orange: #e87722;
  --laurier-green: #6b7036;
  --laurier-blue: #0077a2;
  --white: #ffffff;
  --black: #000000;
  /** Red is not in the style guide, but is used in some variants of the WLU logo **/
  --laurier-red: #db2c39;
  /** Greys are not in the style guide, but are used on wlu.ca **/
  --grey: #d3d3d3;
  --light-grey: #f6f6f6;
}

iframe {
  max-width: 100%;
  margin-bottom: 0.5rem;
}

abbr[title] {
  text-underline-position: under;
}

blockquote {
  margin: 0 5% 1em 5%;
  padding: 0 1em 0 1em;
  border-left: 2px solid var(--laurier-purple);
  background-color: var(--white);
  color: var(--black);
}

ol li ol {
  list-style: lower-alpha;
}

/**
  * Links come in five categories:
  * 1. admin menu (.toolbar-icon and .toolbar-menu): left as default
  * 2. navigation (.primary-nav__menu-link): defined in CSS files within the components/navigation folder
  * 3. button style (.button), with colour variations: defined in components/buttons.css
  * 4. plain text almost everywhere else: below
  * 5. plain text on different backgrounds (footer, green sidebar blocks): defined in relevant other files using greater specificity
  *
  * Needs to be at a lower level of specificity than many other types that override in specific contexts.
  **/
a:not(
    .primary-nav__menu-link,
    .button,
    .toolbar-icon,
    .toolbar-menu,
    .open-menu-link,
    .feed-icon
  ) {
  color: var(--laurier-purple);
  text-underline-position: under;
}

a:not(
    .primary-nav__menu-link,
    .button,
    .toolbar-icon,
    .toolbar-menu,
    .navbar-brand,
    .open-menu-link,
    .feed-icon,
    .grid-view-inner
  ):is(:hover, :focus) {
  background-color: var(--laurier-purple);
  color: var(--white);
  text-underline-position: under;
}

/** Adds icon to indicate new window **/
a[target="_blank"]::after {
  display: inline-flex;
  margin-left: 5px;
  content: "\f08e";
  font-family: "FontAwesome";
}