/* 
To Do:
Inspo: https:ywp.dk/ 
- * transition css for buttons 
- * hover state for buttons with other colors
- * later break for hamburger menu
- * smaller logo (150px, animate) on mobile 
- * header: boxshadow, search icon
- * find some nice images from Unsplash
- show example of Cover block with fixed image like on DK site 
- theme.json: add secondary colors? 
- add README.md for theme
- add screenshot.png to theme

*/

/* Change default media query for hamburger menu to 900px */
@media (min-width: 900px) {
   .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: none !important;
   }
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: block !important;
      width: 100%;
      position: relative;
      z-index: auto;
      background-color: inherit;
   }
}
/* Remove the WordPress default for 600px */
@media (min-width: 600px) {
   .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: flex;
   }
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: none;
   }
}

p,
a {
   text-underline-offset: 3px;
}
a:focus {
   text-decoration: underline;
}

/* Tags in Single Posts */
.single-post .taxonomy-post_tag.is-style-default a {
   margin-right: 12px;
}

/* Button smooth hover animation */
.wp-block-button__link {
   transition: all 0.2s;
}
/* Transparent border on hover if button has custom background color */
.wp-block-button:not(.is-style-outline) a.has-background {
   border-color: transparent !important;
}

/* Header */
/* Smooth animation for smaller logo on mobile  */
.custom-logo {
   transition: all 0.5s;
}
@media (max-width: 768px) {
   .custom-logo {
      width: 150px !important;
   }
}