/*
Theme Name: Grill This Smoke That
Theme URI:  https://grillthissmokethat.com
Author:      Sunil Williams
Author URI:  https://sunilwilliams.com
Description: A custom theme for Grill This Smoke That.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gtst
Tags:        custom, responsive, blog
*/

@import url("'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
body {
  font-family: "Lexend";
  font-weight: 400;
  margin-top: 140px;
  padding-left: var(--margin-size);
  padding-right: var(--margin-size);
  width: calc(100vw - 2 * var(--margin-size));
}

.full-width {
  width: 100%;
}

.recipe-title-info {
  width: calc(100% - 395px);
}

:root {
  --margin-size: calc(26vw - 180px);
}

@media (max-width: 750px) {
  :root {
    --margin-size: 15px;
  }

  .recipe-title-info {
    width: calc(100%);
  }

  .wprm-recipe-template-gtst-template {
    margin: 20px calc(0px - var(--margin-size)) !important;
    width: calc(100% - 30px + var(--margin-size) * 2) !important;
  }
}

a:hover {
  /* color: #fffc !important; */

  * {
    color: #fffc;
    border-color: #0008;
  }
}

a {
  transition: color 0.25s;
  * {
    transition: color 0.25s, border-color 0.25s;
  }
}

.recipe-post-content {
  img {
    overflow: hidden;
    border-radius: 20px;
    border: solid var(--wp--preset--color--border) 1px;
  }
}

.header {
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 100;
  width: calc(100vw + 100px);
  margin-left: -100px;
  /* top: 0; */

  padding-left: calc(var(--margin-size) + 220px);
}

.header-social-links {
  li {
    border: solid var(--wp--preset--color--border) 1px;
  }
}

.header-logo {
  /* background-color: black; */

  position: absolute;
  top: 10px;
  left: calc(var(--margin-size) + 100px);
}

.header-link {
  list-style-type: none;
  font-size: 26px;
  a {
    text-decoration: none;
  }
}

h1 {
  font-size: 44px;
  font-weight: 600;
  margin-bottom: 20px;
}

.wp-block-woocommerce-customer-account,
.wp-block-woocommerce-mini-cart {
  display: none;
}

.wp-block-navigation:not(.has-background)
  .wp-block-navigation__responsive-container.is-menu-open {
  background-color: #000 !important;
  padding: 30px 30px !important;
}

.wp-block-navigation__responsive-container-open {
  float: right;
}
nav:has(> .wp-block-navigation__responsive-container-open) {
  width: 100vw;
  display: block;
}

.wp-block-social-link:hover {
  transform: scale(1) !important;
}

.header-social-links {
  /* position: absolute;
  right: var(--margin-size); */
  transform: scale(1) !important;
  li:hover {
    background-color: #fffa !important;
    transition: background-color 0.1s;
    path {
      color: #000;
      transition: color 0.1s;
    }
  }
}