/*
 * The recipe layout.
 *
 * Captured from the live page's inline <style> blocks, which the chrome
 * extraction drops — the same gap that cost the store search and the tasting
 * bars their CSS. Our recipe MARKUP already matched live element for element;
 * with none of these rules it rendered as one narrow column of bulleted text
 * with the mobile tab strip stranded at the top of the desktop page.
 *
 * The grid itself (.col-lg-4 / .col-lg-8) is in the theme's min.css already;
 * only the recipe-specific rules are here.
 */
.recipes:before,
.recipes:after {
  content: " ";
  display: table;
}

.recipes:after {
  clear: both;
}

.recipes p:last-of-type {
  margin-bottom: 0;
}

.recipes-image {
  display: inline-block;
  float: left;
  margin: 0 20px 10px 0;
}

.recipes-image img {
  max-width: 330px;
  width: auto;
  max-height: 320px;
}

.entry-headline.h5 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: #000;
}

.entry-headline.h5 p {
  font-size: 24px;
  line-height: 34px;
}

/*
 * The standfirst's bottom margin is 30px on a blog post and 0 on a recipe —
 * measured on both live pages. Flattening it to 0 everywhere, as an earlier
 * capture of these rules did, cost the blog posts exactly 30px.
 */
.category-recept .entry-headline.h5 p {
  margin-bottom: 0;
}

.recipes-custom {
  margin-bottom: 0;
}

.recipes-custom h2 {
  text-align: center;
  margin-top: 45px;
  font-size: 1.5em;
  padding: 0 0 20px;
  letter-spacing: 1px;
  font-family: Prata;
  border-bottom: 1px solid #eaeaea;
  font-weight: 400;
}

.recipes-custom .recipes-method ul {
  list-style: none;
  font-size: 0.9em;
  padding-left: 0;
}

.recipes_method__counter {
  font-weight: bold;
  margin-right: 10px;
}

.recipes-method li:not(:last-of-type) {
  margin-bottom: 20px;
}

.recipes-ingredients ul {
  padding-left: 0;
  list-style: none;
}

.recipes-ingredients li {
  padding: 7px 5px 7px 25px;
  list-style-position: inside;
}

/* The zebra striping on the ingredient rows. */
.recipes-ingredients li:nth-of-type(2n+1) {
  background: rgba(210, 234, 218, 0.21);
}

/*
 * The tab strip is a MOBILE control. Without these rules it rendered on the
 * desktop page as a stray bulleted list of "Ingredienser / Gör så här" sitting
 * beside the recipe.
 */
.recipes-tabs {
  width: 100%;
}

.recipes-tabs ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: 30px;
  padding-top: 25px;
  text-align: center;
}

.recipes-tabs ul li {
  display: inline-block;
  color: #5e9365;
  border: 1px solid #5e9365;
  border-radius: 20px;
  transition: 0.2s ease-in-out;
  padding: 4px 22px;
  line-height: 1.6;
  font-size: 20px;
  cursor: pointer;
}

.recipes-tabs ul li:not(:last-of-type) {
  margin-right: 10px;
}

.recipes-tabs ul li:hover,
.recipes-tabs ul li.current {
  color: #fff;
  background: #5e9365;
}

.recipes-tabs ul li:before {
  display: none;
}

@media screen and (min-width: 601px) {
  .recipes-method {
    padding-left: 60px;
  }

  .recipes-custom h2 {
    text-align: left;
    font-size: 1.3em;
  }

}

/*
 * `.mob` is the site's own show-on-mobile utility, and it is what hides the
 * tab strip on the desktop page — verified by asking live which display rules
 * actually match .recipes-tabs. Copied rather than reinvented as
 * `.recipes-tabs.mob`, because anything else on the site carrying `.mob`
 * depends on it too.
 */
.mob {
  display: none;
}

@media screen and (max-width: 600px) {
  .mob {
    display: block;
  }

  .recipes-container {
    display: none;
  }

  .recipes-container.current {
    display: block;
  }

  .recipes-container h2 {
    display: none;
  }
}

@media (max-width: 579px) {
  body .entry-headline.h5 {
    font-size: 16px;
    line-height: 24px;
  }
}