// Site Logo
//
//  - Every `<img>` you add to your site needs to have an alt attribute. If the image is informational, set the `alt` equal to a *descriptive* alternative for that image.
//  - Avoid using generic strings like photo, image, or icon as `alt` values, as they don’t communicate valuable content to the user. Be as descriptive as possible.
//  - Make sure any text in images of text is at least 14 points and has good contrast with the background.
//  - When using images as links, one must consider how the `alt` text will be read back to users of assistive technology. The following examples showcase appropriate `alt` text for logos when used as a link, or as a stand alone image asset.
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#site-logo_res">Resources</a></h3><div id="site-logo_res" class="atblock__panel"><ul><li><a href="http://accessibleicon.org" target="_blank">The Accessible Icon Project</a></li><li><a href="https://snook.ca/archives/html_and_css/hiding-content-for-accessibility" target="_blank">Hiding Content</a></li></ul></div></section>
//
//
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#site-logo_guide">WCAG 2.1 Guidelines</a></h3><div id="site-logo_guide" class="atblock__panel guidelines"><p><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#text-equiv-all" target="_blank">1.1.1 Non-text Content</a> - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)<br><br><strong>Note:</strong> If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives.<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#visual-audio-contrast-contrast" target="_blank">1.4.3 Contrast (Minimum)</a> - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (some exceptions). (Level AA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#visual-audio-contrast-text-presentation" target="_blank">1.4.5 Images of Text</a> - If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text (some exceptions). (Level AA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#navigation-mechanisms-refs" target="_blank">2.4.4 Link Purpose (In Context)</a> - Often a logo is a link to the homepage. The purpose of the link can be determined from the link text alone. Even when hidden. (Level A)</p></div><div class="markup"></div></section>
//
//
//
// Markup: site-logo.twig
//
// Style guide: Media.site-logo

// Import site utilities.
@import '../../global/utils/init';

.site-logo {

  a {
    display: inline-block;
    overflow: hidden;
  }

  img,
  svg {
    max-width: 215px;
    vertical-align: middle;
  }

  h1 {
    color: $color-black;
    display: inline-block;
    margin: 0 0 0 0.25em;
    vertical-align: middle;
  }
}
