/* ==========================================================================
   BEM (Block Element Modifier) design methodology.
   ========================================================================== */
/**
* Make component modular and reusable:
* - Block styles should never dependent on other elements on a page.
* - Block library reduces the amount of CSS code to maintain.
* 
* .Block
* ========================================================================== 
* A block is standalone entity that is meaningful on its own.
* 
*   Examples
*   header, container, menu, checkbox, input
* 
* .Element
* ========================================================================== 
* A part of a block that has no standalone meaning and is semantically tied to its block.
* 
*   Examples
*   menu__item, list__item, checkbox__caption, header__title
* 
* .Modifier
* ========================================================================== 
* A modifer is an entity that defines the appearance, state, or behavior of a 
* block or element. Here we use 3 different types of modifiers:
* 
* 1. Type
*    Modifies the type of HTML elements.
* 
*    Example:
*    button--type--icon
* 
* 2. Size
*    Modifies the size of HTML elements.
* 
*    Example:
*    button--size--small
*    
* 
* 3. Theme
*    Modifies the colors, fonts, backrounds of HTML elements.
* 
*    Example:
*    button--dark-gray
* 
* A modifier can also be applied to an element.
* 
*    Name structure:
*    block-name__elem-name--mod-name--mod-val
*/

/* Use https://codepen.io/sosuke/pen/Pjoqqp to convert hexa colours to filter.

/* ==========================================================================
   Mobile First
   ========================================================================== */

/**
* Design from the smallest screen first and style that apply to all sizes.
*/

/* ==========================================================================
   Links
   ========================================================================== */

.link:link,
.link:visited {
    color: #bfc4ce;
    text-decoration: none;
}
.link:hover,
.link:visited:hover {
   color: #f5f8ff;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button {
    border: 1px solid;
    border-radius: 0.25rem;
    height: fit-content;
    text-decoration: none;
}

.button:hover {
    cursor: pointer;
}

/* Blue buttons */
.button--primary {
    background-color: #4988c3;
    border-color: #4988c3;
    color: #d1d7e2;
}
.button--primary:hover {
    background-color: transparent;
    color: #559fe4;
}

/* Outline buttons */
.button--secondary {
    background-color: transparent;
    border-color: #4988c3;
    color: #4988c3;
}
.button--secondary:hover {
    background-color: transparent;
    color: #559fe4;
}

.button--type--icon {
    background-color: transparent;
    border: 0;
}

/* ==========================================================================
   Icon
   ========================================================================== */

/* Very light gray  */
.icon--lighter,
.img--lighter {
    display: inline-block;
    filter: invert(98%) sepia(95%) saturate(7320%) hue-rotate(180deg) brightness(108%) contrast(110%);
}

/* Light gray  */
.icon--light,
.img--light {
    display: inline-block; 
    filter: invert(85%) sepia(0%) saturate(1281%) hue-rotate(222deg) brightness(83%) contrast(79%);
}

/* Orange  */
.icon--secondary,
.img--secondary {
    display: inline-block; 
    filter: invert(50%) sepia(25%) saturate(1043%) hue-rotate(333deg) brightness(88%) contrast(103%);
}

.icon__menu--open {
    background: url('../images/icons/list.svg') center no-repeat;
}

.icon__menu--close {
    background: url('../images/icons/x.svg') center no-repeat;
}

.icon--play {
    background: url('../images/icons/play-circle.svg') center no-repeat;
}

.icon--stop {
    background: url('../images/icons/stop-circle.svg') center no-repeat;
}

.icon--size--small {
    background-size: 1.75rem 1.75rem !important;
    height: 1.75rem;
    width: 1.75rem;
}

.icon--size--medium {
    background-size: 2rem 2rem !important;
    height: 2rem;
    width: 2rem;
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
    align-items: center; 
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
 }
 
 .header__title {
    margin: 0 0.25rem;
 }

/* ==========================================================================
   Utilities
   ========================================================================== */

.util--is-hidden {
    display: none;
}

/* ========================================================================== 
   Mobile & Small Tablets 768px and down
   Mobile @media query for components that are exclusively 
   displayed on mobile.
   ========================================================================== */

@media screen and (max-width: 768px) {
	.util--menu--toggle-visibility {
        display: none;
    }
}

/* ========================================================================== 
   Mobile 768px and down
   Mobile @media query for components that are exclusively displayed on 
   screen smaller than tablet. 
   ========================================================================== */

@media screen and (min-width: 769px) {
    .util--is-hidden--medium-screen {
        display: none;
    }

    .header {
        margin: 0 auto;
        padding: 0.75rem 0;
        max-width: 720px;
    }
}

@media screen and (min-width: 992px) {
    .header {
        max-width: 960px;
    }
}

@media screen and (min-width: 1200px) {
    .header {
        max-width: 1140px;
    }
}