/* assets/css/mrp-frontend.css */
/* This file controls Print & PDF Download styling (v1.3) */

@media print {
  
  /* --- 1. Hide ALL non-essential site elements --- */
  body > header, 
  body > footer, 
  .site-header, 
  .site-footer,
  nav, 
  aside, 
  .sidebar, 
  #secondary, 
  #sidebar,
  #comments,
  .entry-footer,
  .post-navigation,
  .mrp-recipe__actions, /* The action buttons (Print, etc) */
  .mrp-affiliate-section, /* The new affiliate section */
  .mrp-related-recipes-section { /* The new related section */
    display: none !important;
  }
  
  /* --- 2. Hide non-cooking recipe content --- */
  /* We hide the sidebar, excerpt, and main description */
  /* This leaves ONLY: Title, Image, Ingredients, Instructions */
  .mrp-recipe__sidebar,
  .mrp-recipe__excerpt,
  .mrp-recipe__description {
      display: none !important;
  }
  
  /* --- 3. Expand the recipe content --- */
  body, 
  #primary, 
  #main, 
  .mrp-recipe,
  .mrp-recipe__body,
  .mrp-recipe__main-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-shadow: none !important;
    border: none !important;
    display: block !important;
    background: #fff !important;
  }
  
  /* --- 4. Reset colors for printing --- */
  * {
    color: #000 !important;
    background: #fff !important;
  }
  
  .mrp-recipe__title {
    margin-bottom: 20px;
    page-break-after: avoid; /* Don't break right after the title */
  }
  
  /* --- 5. Page Break Rules --- */
  .mrp-recipe__media,
  .mrp-recipe__ingredients ul,
  .mrp-recipe__instructions ol {
    page-break-inside: avoid !important;
  }
  
  .mrp-recipe__ingredients li,
  .mrp-recipe__instructions li {
    page-break-inside: avoid !important;
  }

  h3 {
    page-break-after: avoid !important;
  }
}
.m-0{margin: 0 !important}

/* assets/css/mrp-recipe-styles.css */
/* ... (all your existing styles from step 10) ... */

/* --- 12. New Sections (Affiliate & Related) --- */
.mrp-affiliate-section,
.mrp-related-recipes-section {
  padding: 20px 25px;
  margin: 20px 0;
  border-top: 1px solid var(--mrp-border-color);
}
.mrp-affiliate-section h2,
.mrp-related-recipes-section h2 {
  font-family: var(--mrp-font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--mrp-heading);
  margin-top: 0;
  margin-bottom: 20px;
}

/* --- 13. Archive Page Header --- */
.mrp-archive-header {
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mrp-border-color);
}
.mrp-archive-header .page-title {
  font-family: var(--mrp-font-heading);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--mrp-heading);
}

/* --- 14. Archive Grid & Recipe Card --- */
.mrp-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

.mrp-recipe-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--mrp-border-color);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}
.mrp-recipe-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-3px);
  border-color: var(--mrp-accent);
}

.mrp-recipe-card__image {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  background: var(--mrp-bg-light);
}
.mrp-recipe-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mrp-recipe-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mrp-font-heading);
  font-size: 4rem;
  color: var(--mrp-border-color);
  background: #fafafa;
}

.mrp-recipe-card__content {
  padding: 15px 20px 20px;
}

.mrp-recipe-card__title {
  font-family: var(--mrp-font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--mrp-heading);
  margin: 0 0 10px;
}

.mrp-recipe-card__meta {
  font-family: var(--mrp-font-body);
  font-size: 0.9rem;
  color: var(--mrp-body);
  display: flex;
  gap: 15px;
}

/* --- 15. NEW Filter Form Styles --- */
.mrp-filter-form {
  background: var(--mrp-bg-light);
  border: 1px solid var(--mrp-border-color);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-end; /* Aligns labels and inputs properly */
  margin-bottom: 30px;
}

.mrp-filter-form__group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-grow: 1; /* Allows inputs to grow */
  flex-basis: 200px; /* Base width for responsiveness */
}

.mrp-filter-form__label {
  font-family: var(--mrp-font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--mrp-heading);
}

.mrp-filter-form__select {
  padding: 10px;
  font-family: var(--mrp-font-body);
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
}

.mrp-filter-form__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-basis: auto; /* Don't grow this group */
  padding-top: 24px; /* Hack to align with inputs */
}

.mrp-filter-form__button {
  font-family: var(--mrp-font-body);
  background: var(--mrp-accent);
  border: 1px solid var(--mrp-accent);
  color: #000;
  font-weight: 700;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mrp-filter-form__button:hover {
  background: #e0560e;
  border-color: #e0560e;
}

.mrp-filter-form__reset {
  font-family: var(--mrp-font-body);
  font-size: 0.9rem;
  color: var(--mrp-body);
  text-decoration: underline;
}

/* Responsive adjustment for filter form */
@media (max-width: 768px) {
  .mrp-filter-form__actions {
    padding-top: 0;
    flex-basis: 100%; /* Full width on mobile */
  }
}


/* --- 16. NEW Pagination Styles --- */
.mrp-pagination-wrapper {
  text-align: center;
  margin-top: 30px;
}

.mrp-pagination-wrapper .pagination {
  display: inline-block; /* Allows text-align to center it */
}

.mrp-pagination-wrapper .page-numbers {
  display: inline-block;
  padding: 8px 15px;
  margin: 0 3px;
  border: 1px solid var(--mrp-border-color);
  border-radius: 5px;
  font-family: var(--mrp-font-body);
  font-weight: 600;
  color: var(--mrp-body);
  text-decoration: none;
  transition: all 0.2s ease;
}

.mrp-pagination-wrapper .page-numbers:hover {
  background: var(--mrp-bg-light);
  color: var(--mrp-accent);
  border-color: var(--mrp-accent);
}

.mrp-pagination-wrapper .page-numbers.current {
  background: var(--mrp-accent);
  border-color: var(--mrp-accent);
  color: #fff;
}


/* --- 17. NEW Archive Title Styles --- */
.mrp-archive-header {
  text-align: center;
}

/* --- 18. NEW: Container Width Consistency Fix (v1.3) --- */
/* This version forces the archive pages to be 1200px to match the single page. */

/* --- 1. Set the Single Recipe Page Width --- */
/* This ensures your single recipe page stays at 1200px */
@media (min-width: 922px) {
  .mrp-single-wrapper {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- 2. Override Astra's 1000px Archive Width --- */
/* This block is the main fix. */
@media (min-width: 922px) {
  
  /* These selectors are MORE SPECIFIC than Astra's, 
     so they will override the 1000px limit. */
  body.post-type-archive-recipe .site-content > .ast-container,
  body.tax-recipe_category .site-content > .ast-container,
  body.tax-recipe_cuisine .site-content > .ast-container {
    max-width: 1200px; /* Force archive to be 1200px */
  }
}

/* --- 3. Handle Padding (No Widths Needed) --- */
/* These padding rules apply on ALL screen sizes
   to prevent content from touching the edges on mobile. */
.mrp-single-wrapper,
.mrp-archive-header,
.mrp-filter-form {
    box-sizing: border-box;
}

/* On small screens, the archive header/filter shouldn't have
   the extra padding, as they are already inside the main container. */
@media (max-width: 921px) {
    .mrp-archive-header,
    .mrp-filter-form {
        padding-left: 0;
        padding-right: 0;
    }
}