﻿.content-wrapper {
  margin: 0 auto;
  max-width: 850px;
  padding-left: 15px;
  padding-right: 15px;
}

.recipe-header {
  margin-bottom: 2rem;
}

.recipe-header .recipe-number {
  color: #6b7280;
  font-size: .875rem;
  margin-bottom: .5rem;
}

.recipe-header h1 {
  color: #1f2937;
  font-size: 2.8rem;
  font-weight: 300;
  line-height: 110%;
  margin-bottom: 1rem;
  margin-left: -3px;
}

.recipe-header p {
  color: #6b7280;
  font-size: 1.25rem;
  line-height: 1.6;
}

hr.recipe-header {
  background : #ddd;
  border : 0;
  color : #ddd;
  font-size : 0;
  height : 1px;
  margin : 20px auto;
}

.recipe-meta {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 2rem;
}

.meta-card {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}

.meta-label {
  color: #6b7280;
  font-size: .875rem;
  margin-bottom: .25rem;
}

.meta-value {
  color: #1f2937;
  font-size: 1.125rem;
  font-weight: 500;
}

.serves {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 2rem;
}

.serves-card {
  background: #ffeffe;
  border: 1px solid #f7bffe;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}

.serves-label {
  color: #6b7280;
  font-size: .875rem;
  margin-bottom: .25rem;
}

.serves-value {
  color: #1f2937;
  font-size: 1.125rem;
  font-weight: 500;
}

.recipe-section {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  margin-bottom: 2rem;
  padding: 2.5rem;
}

.recipe-section h2 {
  border-bottom: 1px solid #e5e7eb;
  color: #1f2937;
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
}

.ingredients-list {
  list-style: none;
}

.ingredients-list li {
  align-items: flex-start;
  color: #1f2937;
  display: flex;
  padding: .75rem 0;
}

.ingredients-list li::before {
  color: #2563eb;
  content: '•';
  flex-shrink: 0;
  font-size: 50px;
  font-weight: bold;
  margin-right: 1rem;
  margin-top: -33px;
}

.method-list {
  counter-reset: method-counter;
  list-style: none;
}

.method-list li {
  counter-increment: method-counter;
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.method-list li::before {
  align-items: center;
  background: #2563eb;
  border-radius: 50%;
  color: white;
  content: counter(method-counter);
  display: flex;
  flex-shrink: 0;
  font-size: .875rem;
  font-weight: 500;
  height: 36px;
  justify-content: center;
  margin-top: 5px;
  width: 36px;
}

.method-list li p {
  color: #1f2937;
  line-height: 1.8;
  padding-top: .5rem;
}

@media (max-width: 768px) {
  .recipe-header h1 {
    font-size: 2.5rem;
  }

  .recipe-section {
    padding: 1.5rem;
  }

  .recipe-meta {
    grid-template-columns: 1fr;
  }
}

.serves-bar {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin: 1.5rem 0 2rem 0;
  overflow: hidden;
}

.time-bar-header {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: .875rem;
  font-weight: 600;
  padding: .75rem 1rem;
  text-align: center;
}

.time-bar-visual {
  display: flex;
  height: 40px;
}

.time-segment {
  align-items: center;
  color: white;
  display: flex;
  font-size: .875rem;
  font-weight: 500;
  justify-content: center;
  position: relative;
}

.time-prep {
  background: #3b82f6;
}

.time-cook {
  background: #ef4444;
}

.time-total-label {
  color: #1f2937;
  font-size: 1rem;
  font-weight: 600;
  padding: .75rem 1rem;
  text-align: center;
}

ul.right-arrow-long-light-blue {
  color : #000 !important;
  font-size : 18px;
  font-weight : 400;
  line-height : 30px;
  list-style : none;
  margin : 0 0 -15px 10px;
  padding : 0 0 15px 20px;
}

ul.right-arrow-long-light-blue li {
  color : #000 !important;
  padding : 5px;
}

ul.right-arrow-long-light-blue li:before {
  color : #2563eb;
  content : '\f192';
  display : block;
  font-family : 'FontAwesome';
  font-size : 15px;
  font-weight : 600;
  height : 0;
  left : -20px;
  line-height : 0;
  margin : 0 0 0 -5px;
  padding : 0;
  position : relative;
  top : 16px;
  width : 0;
}
