/* Load the Roboto font for the whole site. */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

/* Define the basic style for the whole page. */
body {
    /* Use Roboto for all text. */
    font-family: "Roboto", sans-serif;
  
    /* Use a white background. */
    background-color: white;
  
    /* Use a warm dark brown for all text. */
    color: #3a2a22;
  
    /* Remove the default browser margin. */
    margin: 0;

    /* Keep the footer at the bottom of a short page. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  /* Place the site navigation at the top of every page. */
  .site-nav {
    /* Use three columns so the logo stays centered. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;

    /* Align the logo and the cooks drawing on one line. */
    align-items: center;

    /* Keep a small space inside the bar. */
    padding: 10px 16px;

    /* Separate the bar from the page content. */
    border-bottom: 1px solid #eeeeee;
  }

  /* Keep the logo in the middle column. */
  .site-nav-home {
    /* Place the logo in the center column. */
    grid-column: 2;
  }

  /* Keep the cooks link on the right side of the bar. */
  .site-nav-cooks {
    /* Place the link in the right column. */
    grid-column: 3;

    /* Push the drawing to the right edge. */
    justify-self: end;
  }

  /* Show the cooks drawing inside the bar. */
  .site-nav-cooks-image {
    /* Show the drawing as a block inside the link. */
    display: block;

    /* Match the logo height so the drawing stays inside the bar. */
    height: 72px;

    /* Keep the original image proportions. */
    width: auto;
  }

  /* Do not underline the cooks drawing when the mouse is over it. */
  .site-nav-cooks:hover {
    /* Keep the image link without an underline. */
    text-decoration: none;
  }

  /* Keep the navigation logo small. */
  .site-logo {
    /* Show the logo as a block inside the link. */
    display: block;

    /* Use a small width for the handwritten title. */
    width: 140px;

    /* Keep the original image proportions. */
    height: auto;
  }

  /* Do not underline the logo when the mouse is over it. */
  .site-nav-home:hover {
    /* Keep the logo link without an underline. */
    text-decoration: none;
  }

  /* Style the main content area. */
  main {
    /* Limit the width of the content. */
    max-width: 600px;
  
    /* Center the content horizontally. */
    margin: 32px auto;
  
    /* Add space inside the content area. */
    padding: 20px;

    /* Let the content fill the space above the footer. */
    flex: 1 0 auto;

    /* Keep the side padding inside the page width. */
    box-sizing: border-box;
  }
  
  /* Style the main title. */
  h1 {
    /* Add space below the title. */
    margin-bottom: 40px;
  }

  /* Keep text available to assistive technology without showing it. */
  .visually-hidden {
    /* Take the text out of the page flow. */
    position: absolute;

    /* Shrink the box to a single pixel. */
    width: 1px;
    height: 1px;

    /* Remove the space around the text. */
    padding: 0;
    margin: -1px;

    /* Hide anything that still sticks out of the box. */
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    /* Keep the words on one line so they are not clipped mid-word. */
    white-space: nowrap;

    /* Remove the border that could still be seen. */
    border: 0;
  }

  /* Show the recipe photo at the top of a recipe page. */
  .recipe-photo {
    /* Keep the image inside the content width. */
    display: block;

    /* Use the full width of the content area. */
    width: 100%;

    /* Keep the original image proportions. */
    height: auto;
  }
  
  /* Remove the default list indentation. */
  ul {
    /* Remove the default left padding. */
    padding: 0;
  
    /* Remove the default list markers. */
    list-style: none;
  }
  
  /* Add space between the recipe links. */
  li {
    /* Add space below each recipe. */
    margin-bottom: 20px;
  }
  
  /* Style the recipe links. */
  a {
    /* Use the same warm dark brown for the links. */
    color: #3a2a22;
  
    /* Remove the default underline. */
    text-decoration: none;
  
    /* Make the links slightly larger. */
    font-size: 20px;
  }
  
  /* Add an underline when the mouse is over a link. */
  a:hover {
    /* Show an underline on hover. */
    text-decoration: underline;
  }

  /* Show a clear outline when a link or a button has keyboard focus. */
  a:focus-visible,
  button:focus-visible {
    /* Draw a dark brown ring around the focused control. */
    outline: 2px solid #3a2a22;

    /* Keep the ring a little away from the control. */
    outline-offset: 3px;
  }

  /* Frame the reusable tip at the bottom of a recipe page. */
  .mamma-consiglia,
  .papa-consiglia {
    /* Draw a dark brown outline around the tip. */
    border: 2px solid #3a2a22;

    /* Round the corners of the outline. */
    border-radius: 16px;

    /* Keep the text inside the outline. */
    padding: 16px 20px;

    /* Separate the tip from the recipe text above it. */
    margin-top: 32px;

    /* Separate the tip from the link below it. */
    margin-bottom: 32px;
  }

  /* Place the cook avatar to the left of the tip title. */
  .mamma-consiglia-title,
  .papa-consiglia-title {
    /* Align the avatar and the title on one row. */
    display: flex;

    /* Center the title with the avatar. */
    align-items: center;

    /* Add space between the avatar and the title. */
    gap: 12px;

    /* Separate the title row from the tip text. */
    margin-bottom: 12px;
  }

  /* Show the cook portrait as a small circle. */
  .mamma-consiglia-avatar,
  .papa-consiglia-avatar {
    /* Use a small size next to the title. */
    width: 48px;
    height: 48px;

    /* Crop the photo into a circle. */
    border-radius: 50%;
    object-fit: cover;
  }

  /* Keep the tip title close to the top of the frame. */
  .mamma-consiglia h2,
  .papa-consiglia h2 {
    /* Remove the extra space around the title. */
    margin: 0;
  }

  /* Keep the tip text close to the bottom of the frame. */
  .mamma-consiglia p,
  .papa-consiglia p {
    /* Remove the extra space below the text. */
    margin-bottom: 0;
  }

  /* Place the cook cards side by side when there is room. */
  .cook-list {
    /* Use a flexible row for the cards. */
    display: flex;

    /* Allow the cards to wrap on a narrow screen. */
    flex-wrap: wrap;

    /* Add space between the cards. */
    gap: 24px;
  }

  /* Frame one cook profile. */
  .cook-card {
    /* Keep the card a block so its width applies to the link. */
    display: block;

    /* Use the page text color inside the link. */
    color: inherit;

    /* Do not enlarge the name through the link style. */
    font-size: inherit;

    /* Draw a dark brown outline around the card. */
    border: 2px solid #3a2a22;

    /* Round the corners of the outline. */
    border-radius: 16px;

    /* Keep the portrait and the name inside the card. */
    padding: 20px;

    /* Center the portrait and the name. */
    text-align: center;

    /* Give each card the same width. */
    width: 220px;
  }

  /* Show the cook portrait as a circle. */
  .cook-avatar {
    /* Use a fixed size for every portrait. */
    width: 140px;
    height: 140px;

    /* Crop the photo into a circle. */
    border-radius: 50%;
    object-fit: cover;

    /* Center the portrait above the name. */
    display: block;
    margin: 0 auto 12px;
  }

  /* Keep the cook name close to the portrait. */
  .cook-card h2 {
    /* Remove the extra space around the name. */
    margin: 0;
  }

  /* Leave the cook card without an underline. */
  a.cook-card:hover {
    /* Keep the name and the portrait as a plain card. */
    text-decoration: none;
  }

  /* Place the cook filters on one row. */
  .recipe-filter {
    /* Align the count and the tags side by side. */
    display: flex;

    /* Keep the count level with the tags. */
    align-items: center;

    /* Add space between the count and the tags. */
    gap: 8px;

    /* Separate the filters from the recipe list. */
    margin-bottom: 32px;
  }

  /* Show how many recipes match the active filter. */
  .recipe-count {
    /* Match the tag label size. */
    font-size: 15px;
    font-weight: 700;

    /* Match the warm dark brown used for the recipe names. */
    color: #3a2a22;

    /* Leave a little space before the first tag. */
    margin-right: 4px;

    /* Stack the count above a hidden two-digit label. */
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Keep a one-digit count in the same space as "23 ricette". */
  .recipe-count::before {
    /* Reserve the width of the full list count. */
    content: "23 ricette";

    /* Keep the copy out of the row height. */
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }

  /* Draw each filter as a small rounded tag. */
  .cook-filter {
    /* Use a pill shape. */
    border-radius: 999px;

    /* Keep the label compact. */
    padding: 6px 14px;

    /* Match the site font. */
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;

    /* Keep the tag on a white background until it is chosen. */
    background-color: white;

    /* Show that the tag can be clicked. */
    cursor: pointer;
  }

  /* Use a dark wisteria color for Mamma's tag. */
  .cook-tag-mamma {
    /* Color the tag text so it stays readable on white. */
    color: #6b3a78;
  }

  /* Use a dark orange color for Papa's tag. */
  .cook-tag-papa {
    /* Color the tag text so it stays readable on white. */
    color: #8a3e00;
  }

  /* Outline Mamma's filter with the same wisteria color. */
  .cook-filter.cook-tag-mamma {
    /* Draw a thin matching outline. */
    border: 1.5px solid #6b3a78;
  }

  /* Outline Papa's filter with the same orange color. */
  .cook-filter.cook-tag-papa {
    /* Draw a thin matching outline. */
    border: 1.5px solid #8a3e00;
  }

  /* Fill Mamma's filter when it is the active choice. */
  .cook-filter.is-selected.cook-tag-mamma {
    /* Use a lighter wisteria background. */
    background-color: #8d5a9e;

    /* Match the outline to the filled tag. */
    border-color: #8d5a9e;

    /* Keep the label readable on the filled tag. */
    color: white;
  }

  /* Fill Papa's filter when it is the active choice. */
  .cook-filter.is-selected.cook-tag-papa {
    /* Use a lighter orange background. */
    background-color: #b85c10;

    /* Match the outline to the filled tag. */
    border-color: #b85c10;

    /* Keep the label readable on the filled tag. */
    color: white;
  }

  /* Hide a recipe that does not match the active filter. */
  .recipe-item.is-hidden {
    /* Keep the row in the layout so the list stays the same width. */
    visibility: hidden;

    /* Collapse the row so it leaves no gap. */
    height: 0;
    margin-bottom: 0;
    overflow: hidden;
  }

  /* Let the homepage list reach the right edge of the screen. */
  main.home-page {
    /* Use the full width instead of the narrow recipe column. */
    max-width: none;

    /* Keep the names and the tags away from the screen edges. */
    padding-left: clamp(48px, 8vw, 120px);
    padding-right: clamp(48px, 8vw, 120px);
  }

  /* Let a long recipe name wrap before it pushes the tag off screen. */
  .recipe-item a {
    /* Allow the link to shrink inside the row. */
    min-width: 0;
  }

  /* Place the recipe name and its tag on one row. */
  .recipe-item {
    /* Align the name and the tag. */
    display: flex;
    align-items: center;

    /* Keep a clear gap between the name and the tag. */
    gap: 48px;
  }

  /* Keep the homepage tag smaller than the recipe title. */
  .recipe-item-tag {
    /* Push every tag to the right edge. */
    margin-left: auto;

    /* Keep the tag on one line. */
    flex-shrink: 0;

    /* Use a compact size next to the link. */
    font-size: 14px;
    font-weight: 700;
  }

  /* Place a quiet footer under every page. */
  .site-footer {
    /* Keep the footer padding inside the page width. */
    box-sizing: border-box;

    /* Separate the footer from the page content. */
    border-top: 1px solid #eeeeee;

    /* Keep the text away from the screen edges. */
    padding: 28px 48px 32px;

    /* Center the few lines of the footer. */
    text-align: center;
  }

  /* Keep the copyright line compact. */
  .site-footer-notice {
    /* Remove the extra space around the line. */
    margin: 0 0 12px;

    /* Use a quiet size. */
    font-size: 15px;
  }

  /* Place the question and the portrait icon on one row. */
  .site-footer-credit {
    /* Align the sentence and the icon. */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Add space between the sentence and the icon. */
    gap: 12px;

    /* Remove the extra space around the line. */
    margin: 0;

    /* Match the copyright size. */
    font-size: 15px;
  }

  /* Keep the icon link free of the text underline. */
  .site-footer-avatar-link:hover {
    /* Leave the portrait without an underline. */
    text-decoration: none;
  }

  /* Show Marta as a small round icon. */
  .site-footer-avatar {
    /* Show the portrait as a block inside the link. */
    display: block;

    /* Use a small size in the footer. */
    width: 52px;
    height: 52px;

    /* Crop the drawing into a circle. */
    border-radius: 50%;
    object-fit: cover;
    object-position: center 18%;
  }

  /* Show Marta's drawing above her name. */
  .about-portrait {
    /* Center the drawing. */
    display: block;
    margin: 0 auto 8px;

    /* Keep the whole drawing visible. */
    width: 220px;
    height: auto;
  }

  /* Keep the technology lines closer than the recipe list. */
  .about-tech li {
    /* Use a short gap between technologies. */
    margin-bottom: 8px;

    /* Keep the list easy to read. */
    font-size: 16px;
  }

  /* Show the cook tag above the recipe title. */
  .recipe-cook-tag {
    /* Place the tag on its own line. */
    display: inline-block;

    /* Separate the tag from the picture above it. */
    margin: 20px 0 0;
  }

  /* Keep the cook tag smaller than the recipe title. */
  .recipe-cook-tag a {
    /* Use a compact size above the title. */
    font-size: 16px;
    font-weight: 700;
  }

  /* Number the preparation steps. */
  .recipe-steps {
    /* Leave room for the step numbers. */
    padding-left: 1.4em;

    /* Remove the extra space above the first step. */
    margin-top: 0;
  }

  /* Stack the list and keep the cards inside a narrow screen. */
  @media (max-width: 480px) {
    /* Keep the homepage names away from the screen edges. */
    main.home-page {
      /* Use a short side padding on a phone. */
      padding-left: 20px;
      padding-right: 20px;
    }

    /* Place the cook tag under the recipe name. */
    .recipe-item {
      /* Stack the name and the tag. */
      flex-direction: column;
      align-items: flex-start;

      /* Use a short gap between the name and the tag. */
      gap: 8px;
    }

    /* Keep the tag under the name, on the left. */
    .recipe-item-tag {
      /* Do not push the tag to the right edge. */
      margin-left: 0;
    }

    /* Give the filter a taller touch target. */
    .cook-filter {
      /* Raise the clickable area above a thin text line. */
      padding: 12px 16px;
    }

    /* Let each cook card use the full content width. */
    .cook-list > li {
      /* Stretch the card row to the content width. */
      width: 100%;
    }

    /* Keep the card padding inside the screen. */
    .cook-card {
      /* Use the full width of the row. */
      width: 100%;

      /* Include the padding in that width. */
      box-sizing: border-box;
    }

    /* Keep the footer text away from the screen edges. */
    .site-footer {
      /* Use a shorter side padding on a phone. */
      padding: 24px 20px 28px;
    }
  }