/*****
This is the responsive rules file. Here different media queries
are set for different size screens, as well as the dark theme
definitions. Unlike style.css, there will be no headers separating
content here, because not every section needs to be adjusted in
every media query.

Therefore, if you need to adjust something here, it will probably be
better if you know the selector you need to change. Check out the theme's
README file to learn how to find an element's selector in the browser.

The variables (i.e. var(--dark-theme-bg-color) used here are set in the :root element in styles.css  
*****/

/***DARK THEME***/
@media (prefers-color-scheme: dark) {
     :root {
          --clr-off-white: 15 17% 90%;
     }

     html :where(img) {
          filter: brightness(75%);
     } 

     body {
          background-color: var(--dark-theme-bg-color);
          color: var(--dark-theme-text-color);
     }

     a {
          color: hsl(var(--clr-pink-dark));
     }
     
     a:hover {
          color: hsl(var(--clr-jc-red));
     }
     .custom_header.has_header_image {
          background-color: hsla(0 0% 0% / .2);
          background-blend-mode: multiply;
     }

     .header_navigation_box.sticky {
          background-color: hsl(var(--clr-blue-dark));
          border-top: 1px solid hsl(var(--clr-blue-darker));
     }

     .responsive_menu_content {
          background-color: hsl(var(--clr-blue-dark));
     }

     .search__input {
          background-color: hsl(var(--clr-bluegray));
     }

     .header_navigation_box.sticky .search-button {
          outline: 2px solid hsl(var(--clr-blue-darker));
     }

     .search__input:focus-visible,
     .search-button:focus-visible,
     .header_navigation_box.sticky .search-button:focus-visible {
          outline-color: hsl(var(--clr-pink-dark));
     }

     .header_nav :is(.menu-item:hover , .menu-item:focus-visible) {
          background-color: hsl(var(--clr-parking-brown));
     }

     .header_nav :is(.menu-item.active,
     .menu-item.active:hover,
     .menu-item.active:focus-visible) {
          background-color: hsl(var(--clr-oceanblue));
     }

	.wp-block-pullquote {
		background-color: hsl(var(--clr-blue-lite) / .5);
	}
	
     .wp-block-quote {
          box-shadow: 0.25em 0.25em 0.5em hsla(var(--clr-oceanblue) / .5);
          background-color: hsl(var(--clr-bluegray) / .1);
     }

     .front_page_image {
          box-shadow: 4px 4px 6px hsl(var(--clr-blue-dark) / 0.5);
     }

     .card__link {
          --list-item-shadow-color: hsla(var(--clr-oceanblue) / 0.5);
          color: var(--dark-theme-text-color);
     }

     .card__link:hover {
          --list-item-shadow-color: hsla(var(--clr-pink-dark) / 0.5);
     }

     .card__image-container.no-image {
          opacity: 0.5;  
     }

     .card__image {
          filter: brightness(65%);
          transition: filter 250ms ease-in-out
     }

     .card__link:hover .card__image {
          filter: brightness(80%);
     }

     .card__meta {
          background-color: hsl(var(--clr-shadow-black) / .5);
     }

     .content__share-container {
          background-color: hsl(var(--clr-oceanblue));
     }

     .comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea {
          box-shadow: 3px 4px 5px hsl(var(--clr-blue-lite) / .5);
          background-color: hsl(var(--clr-bluegray));
     }

     .comment-list .comment {
          background-color: transparent;
     }
}

/*Disable the site on screens smaller than 250px wide*/
@media only screen and (max-width: 250px) {
     body {
          display: none;
     }

     html::after {
          display:block;
          content: "The screen on the device being used is too small for the site to render properly.";
     }
}

@media only screen and (min-width: 251px) and (max-width: 350px) {
     .comment-meta-container {
          grid-template-rows: auto auto;
          font-size: 1rem;
     }

     .logged-in-as {
          flex-flow: column;
          align-items: start;
          gap: 1em;
     }

     .user-log-out {
          align-self: end;
     }
}

@media only screen and (min-width: 251px) and (max-width: 600px) {
     .header_site_logo {
          --header-site-logo-max-padding: 5em;
     }
     
     #wpadminbar {
          position: fixed;
     }

}


@media only screen and (max-width: 380px) {
     .post-content > p {
          margin-inline: 0.5rem;
     }
}

@media only screen and (min-width: 430px) {
     .header_navigation_box {
          gap: 2rem;
     }
}

@media only screen and (min-width: 601px) {
     .blog > .content_container,
     .search > .content_container {
          padding-inline: 1rem;
     }

     .message.no-results {
          padding-inline: 0;
     }

     .wp-block-quote {
          width: 80%;
     }
}


@media only screen and (min-width: 780px) {
     .header_site_logo {
          max-width: 100%;
          margin-inline: 1rem 0;
     }

     .header_navigation_box {
          background-color: var(--header-navigation-box-bg);
          padding-block: 0;
          align-items: center;
     }

     .responsive_button_container {
          display: none;
     }

     .responsive_menu_content {
          flex-direction: row;
          gap: 0;
          position: static;
          width: auto;
          height: auto;
          padding-block: 0;
          scale: 1;
          opacity: 1;
          background-color: transparent;
     }

     .responsive_menu_content.closed {
          display: flex;
          flex: 1 1 50%;
     }

     .logged-in .responsive_menu_content {
          justify-content: end;
     }

     .header_nav {
          flex-direction: row;
          gap: 0;
     }

     .logged-in .header_nav {
          width: min(75%,400px); /*This width needs to be adjusted when additional items are added to the menu.*/
     }

     .header_nav .menu-item {
          text-align: center;
     }

     .header_search_form_container {
          /* justify-content: start;
          padding-inline-start: 1em; */
          flex-basis: 50%;
     }

     .blog-card_list_container {
          grid-template-columns: 1fr 1fr;
     }

     .is_404_img {
          float: left;
          margin-block: 0 1rem;
          margin-inline: 0 1rem;
          width: 50%;
     }

}

@media only screen and (min-width: 851px) {
     .custom_header {
          --header-height: 500px;
     }

     /* .header_search_form_container {
          margin-inline-start: 2em;
     } */

     .page-title {
          font-size: clamp(2.5rem , 4vw + 1px , 3rem);
		  margin-block: 0 1em;
     }
}


@media only screen and (min-width: 1000px) {
     .header_navigation_box {
          gap: 0;
     }

     .search__input {
          --fixed-width: 500px;
     }

     .blog > .content_container,
     .search > .content_container {
          padding-inline: 2rem;
     }
     
     .blog-card_list_container {
          grid-template-columns: 1fr 1fr 1fr;
     }

     .search-no-results .blog-card_list_container {
          grid-template-columns: 1fr 1fr;
     }

     #scroll-to-top {
          right: calc((100vw - 960px) / 2);
          right: calc((100dvw - 960px) / 2);
     }
}