/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/








/*
Theme Name: Your Child Theme Name
Template:   your-parent-theme-folder-name
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Header General
2.0 Desktop Header (992px and up)
3.0 Mobile Header (991px and down)
4.0 Mobile Menu Panel
--------------------------------------------------------------*/


/*--------------------------------------------------------------
1.0 Header General
--------------------------------------------------------------*/
.header-top-bar {
    height: 10px;
    background-color: #ffc700; /* Yellow from image */
}

.site-header {
    background: #fff;
    border-bottom: 1px solid #eaeaea;
    padding: 0px 0;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-branding {
    flex-shrink: 0;
    margin-right: 20px;
}

.custom-logo {
    max-height: 80px; /* Adjust as needed */
    width: auto;
}

.site-title {
    display: none; /* Assuming logo is always present */
}

/* Hide mobile elements on desktop */
.mobile-header-elements,
#mobile-menu-panel,
#mobile-menu-overlay {
    display: none;
}


/*--------------------------------------------------------------
2.0 Desktop Header (992px and up)
--------------------------------------------------------------*/
@media (min-width: 992px) {
    .main-navigation {
        width: 100%;
    }

    /* Top navigation (secondary menu + search) */
    .top-nav-wrapper {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 10px;
    }

    #secondary-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    #secondary-menu li {
        margin-left: 20px;
    }

    #secondary-menu a {
        font-size: 12px;
        font-weight: 600;
        color: #555;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    #secondary-menu a:hover {
        color: #000;
    }

    /* Ivory Search Form Styling */
    .header-search .ivory-search-form {
        margin-left: 20px;
    }
    .header-search .ivory-search-form input[type="search"] {
        border: 1px solid #ccc;
        border-radius: 20px;
        padding: 8px 15px;
        width: 200px;
    }

    /* Main Primary Menu */
    #primary-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-end;
    }

    #primary-menu li {
        margin-left: 10px;
    }

    #primary-menu a {
        font-size: 14px;
        font-weight: 700;
        color: #333;
        text-decoration: none;
        text-transform: uppercase;
        padding: 5px 10px;
        border-radius: 0px;
    }

    #primary-menu a:hover {
        background-color: #ffc700;
    }

    #primary-menu .current-menu-item > a,
    #primary-menu .current-menu-ancestor > a {
        background-color: #ffc700;
    }
}


/*--------------------------------------------------------------
3.0 Mobile Header (991px and down)
--------------------------------------------------------------*/
@media (max-width: 991px) {
    /* Hide desktop navigation */
    .main-navigation {
        display: none;
    }

    /* Show mobile elements */
    .mobile-header-elements {
        display: flex;
        align-items: center;
    }

    .site-branding {
        flex-grow: 1;
        text-align: center;
        margin: 0;
    }
    .custom-logo {
        max-height: 60px;
    }

    .mobile-menu-toggle, .mobile-search-icon a {
        background: none;
        border: none;
        padding: 10px;
        cursor: pointer;
        color: #000;
    }
    .mobile-search-icon {
        margin-left: auto;
    }
    
    /* Hamburger Icon */
    .hamburger-icon {
        display: block;
        width: 24px;
        height: 2px;
        background: #000;
        position: relative;
    }
    .hamburger-icon::before,
    .hamburger-icon::after {
        content: '';
        position: absolute;
        width: 24px;
        height: 2px;
        background: #000;
        left: 0;
    }
    .hamburger-icon::before {
        top: -7px;
    }
    .hamburger-icon::after {
        bottom: -7px;
    }
}


/*--------------------------------------------------------------
4.0 Mobile Menu Panel
--------------------------------------------------------------*/
@media (max-width: 991px) {
    #mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    body.mobile-menu-open #mobile-menu-overlay {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    #mobile-menu-panel {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        max-width:100%;
        height: 100%;
        background: #fff;
        z-index: 999;
        padding: 20px;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        transition: left 0.3s ease-in-out;
    }

    body.mobile-menu-open #mobile-menu-panel {
        left: 0;
    }

    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: unset;
        padding-bottom: 15px;
        margin-bottom: 20px;
        padding: 0;
        margin: 0;
    }

    .mobile-menu-close {
        font-size: 40px;
        font-weight: 300;
        color: #000;
        background: none;
        border: none;
        cursor: pointer;
        position: absolute;
        right: 0;
        background: #eee;
        background: #333;
        width: 40px;
        height: 40px;
        color: #fff;
        line-height: 1;
    }

    #mobile-navigation {
        flex-grow: 1;
        overflow-y: auto;
    }

    #mobile-primary-menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #mobile-primary-menu li a {
        display: block;
        padding: 15px 0;
        font-size: 15px;
        font-weight: 600;
        color: #333;
        text-decoration: none;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Sub-menu styling */
    #mobile-primary-menu .sub-menu {
        display: none; /* Hidden by default, toggled by JS */
        list-style: none;
        padding-left: 20px;
        margin: 0;
    }
     #mobile-primary-menu .sub-menu li a {
        font-size: 18px;
        font-weight: normal;
        padding: 10px 0;
        border-bottom: none;
    }

    /* Sub-menu toggle button (+) */
    #mobile-primary-menu .menu-item-has-children {
        position: relative;
    }
    .submenu-toggle {
        position: absolute;
        right: 0;
        top: 5px;
        background: none;
        border: none;
        font-size: 30px;
        font-weight: bold;
        color: #333;
        cursor: pointer;
        padding: 10px;
        line-height: 1;
    }

    .mobile-menu-footer {
        text-align: center;
        padding-top: 20px;
        border-top: 1px solid #eaeaea;
    }
    .mobile-menu-footer p {
        font-weight: bold;
        margin-bottom: 10px;
    }
    .social-links a {
        display: inline-block;
        margin: 0 10px;
        text-decoration: none;
        font-weight: bold;
        color: #333;
    }
}









/*
----------------------------------------------------------------
Custom Footer Styles
----------------------------------------------------------------
*/

/* Main Footer Container & Grid Layout */
.site-footer {
    background-color: #fff; /* Or your desired background color */
    color: #4a4a4a;
    font-family: sans-serif; /* Change to your theme's font */
    border-top: 1px solid #e0e0e0;
}

.footer-grid-container {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr; /* 4 columns layout */
    gap: 30px; /* Space between columns */
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-widget-area {
    padding: 0;
}

/* Column 1: Logo */
.footer-logo-area .widget_media_image img {
    max-width: 180px; /* Adjust size as needed */
    height: auto;
}

/* Columns 2 & 3: Widget Titles & Lists */
.footer-widget-title {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #333;
}

.footer-widget-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget-area ul li {
    margin-bottom: 15px;
}

.footer-widget-area ul li a {
    color: #555;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease;
}

.footer-widget-area ul li a:hover {
    color: #000;
}

/* Column 4: Search & Categories */
/* Style for Ivory Search Plugin */
.footer-col-3 .ivory-search-form,
.footer-col-3 .is-form-style {
    position: relative;
    margin-bottom: 25px;
}

.footer-col-3 .ivory-search-form input[type="search"] {
    width: 100%;
    padding: 15px 50px 15px 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

.footer-col-3 .ivory-search-form input[type="submit"],
.footer-col-3 .ivory-search-form button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background-color: #f5d5c8;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #8b5e55;
}

/* NEW: Category Links Styling */
.category-links-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.category-link {
    display: block;
    padding: 12px;
    text-align: center;
    border: 1px solid;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.category-link:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

/* Auto-coloring for categories */
.category-link:nth-child(4n+1) { border-color: #2B2C2C; color: #2B2C2C; background-color: var(--main-color-style-new); }
.category-link:nth-child(4n+2) { border-color: #2B2C2C; color: #2B2C2C; background-color: var(--main-color-style-new); }
.category-link:nth-child(4n+3) { border-color: #2B2C2C; color: #2B2C2C; background-color: var(--main-color-style-new); }
.category-link:nth-child(4n+4) { border-color: #2B2C2C; color: #2B2C2C; background-color: var(--main-color-style-new); }


/* Footer Bottom Bar */
.footer-bottom-area {
    margin-top: 60px;
    padding: 30px 5%;
    background-color: var(--main-color-style-new);
    /* Removed negative margins to avoid layout issues */
}

.footer-bottom-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 14px;
    color: #000000;
}

/* This targets the widget wrapper in the bottom bar */
.footer-bottom-container .widget {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    flex-grow: 1; /* Allows this element to take up available space */
}

.footer-bottom-container .widget p {
    margin: 0;
}

.footer-bottom-container .widget .footer-bottom-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

#back-to-top,
.footer-bottom-container .widget a {
    color: #000000;
    text-decoration: none;
    font-weight: bold;
}

#back-to-top:hover,
.footer-bottom-container .widget a:hover {
    text-decoration: underline;
}

.footer-bottom-right {
    flex-shrink: 0; /* Prevents the back-to-top link from shrinking */
}

/* Responsive Styles for Mobile */
@media (max-width: 900px) {
    .footer-grid-container {
        grid-template-columns: 1fr 1fr;
    }
    .footer-logo-area {
        grid-column: 1 / -1;
        text-align: center;
        margin-bottom: 20px;
    }
}

@media (max-width: 600px) {
    .site-footer {
        text-align: center;
    }
    .footer-grid-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .footer-bottom-container {
        justify-content: center; /* Center content on mobile */
        flex-direction: column;
    }
}



















/* Most Popular Recipes Section Styles */
.popular-recipes-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.popular-recipes-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    font-size: 28px;
    font-weight: 700;
    color: #333333;
    text-align: left;
    margin-bottom: 40px;
    letter-spacing: 1px;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 2px;
    background-color: #333333;
}

.recipes-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    align-items: start;
}

.recipe-card {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.recipe-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.recipe-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.recipe-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.recipe-card:hover .recipe-image img {
    transform: scale(1.05);
}

.recipe-number {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    z-index: 2;
}

.recipe-content {
    padding: 20px;
}

.recipe-title {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #333333;
    min-height: 45px;
}

.recipe-title a {
    color: #333333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.recipe-title a:hover {
    color: #e74c3c;
}

.recipe-rating {
    text-align: center;
}

.stars {
    margin-bottom: 8px;
}

.star {
    font-size: 16px;
    color: #ddd;
    margin: 0 1px;
}

.star.filled {
    color: var(--main-color-style-new);
}

.rating-text {
    font-size: 12px;
    color: #888888;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .recipes-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .popular-recipes-section {
        padding: 40px 0;
    }
    
    .recipes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .section-title {
        font-size: 24px;
        margin-bottom: 30px;
        text-align: center;
    }
    
    .section-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 480px) {
    .recipes-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .recipe-card {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .section-title {
        font-size: 20px;
        margin-bottom: 25px;
    }
}

/* Additional styling for better visual appeal */
.recipe-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.recipe-card:hover::before {
    opacity: 1;
}

/* Loading animation for images */
.recipe-image img {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}















/* Styles for the Dynamic Category Grid Shortcode */
.dynamic-category-grid-section {
    width: 100%;
    max-width: 1200px;
    margin: 0px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.dynamic-category-grid {
    display: grid;
    /* Creates a responsive grid. Adjusted minmax for better mobile support. */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
}

.category-grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.category-grid-item a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.category-grid-item .image-container {
    width: 100%;
    /* Maintain a square aspect ratio */
    padding-top: 100%; 
    position: relative;
    background-color: #f0f0f0; /* Fallback color */
}

.category-grid-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the container without distortion */
    transition: transform 0.3s ease;
}

.category-grid-item:hover img {
    transform: scale(1.05);
}

.category-grid-item .category-name {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.category-grid-item a:hover .category-name {
    background-color: #fff;
}














/*
 * Styles for the Random Post Feature section
 */

/* Main section with patterned background */
.rpf-section {
    padding: 4rem 1rem; /* Vertical and horizontal padding */
    background-color: #f7f3f9; /* Light lavender background color from image */
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e9e2ef' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
    font-family: sans-serif; /* A fallback font, your theme's font will likely override this */
}

/* Container to hold the layout */
.rpf-container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    align-items: center;
}

/* Image wrapper */
.rpf-image-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.rpf-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    display: block;
}

/* Content box with white background */
.rpf-content-box {
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-top: -4rem; /* Overlap on mobile */
    position: relative; /* Ensure it stacks on top */
    z-index: 10;
}

/* Small text above the title */
.rpf-eyebrow {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #888;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

/* Main title */
.rpf-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.rpf-title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.rpf-title a:hover {
    color: #a88fc2; /* A shade of purple for hover */
}

/* Excerpt text */
.rpf-excerpt {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Button styling */
.rpf-button {
    display: inline-block;
    background-color: var(--main-color-style-new); /* Light purple from image */
    color: #000000; /* Darker purple text */
    padding: 0.8rem 1.8rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.rpf-button:hover {
    background-color: var(--main-color-style-new);
    transform: translateY(-2px);
}

/* Responsive styles for larger screens (tablets and desktops) */
@media (min-width: 768px) {
    .rpf-container {
        /* Create a 2-column grid. The image takes up more space. */
        grid-template-columns: 1.5fr 1fr; 
        gap: 2rem;
    }

    .rpf-content-box {
        /* Reset margin and align text to the left */
        margin-top: 0;
        text-align: left;
        
        /* Shift the content box to the left to overlap the image */
        transform: translateX(-5rem);
    }
    
    .rpf-image-wrapper {
        /* Ensure the image wrapper is tall enough */
        min-height: 450px;
    }
}

@media (min-width: 1024px) {
    .rpf-content-box {
        padding: 3rem;
        transform: translateX(-8rem); /* Increase overlap on larger screens */
    }
    
    .rpf-title {
        font-size: 2.5rem;
    }
}


































/*
 * --- Single Post Page Styles (Corrected to not affect footer) ---
 */

/* Only apply these styles on single blog posts */
body.single-post .single-post-layout-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 15px;
  gap: 40px;
}

/* Main Content Area (Left Side) */
body.single-post .site-main-content {
  flex: 2;
  min-width: 0;
}

/* This targets ONLY the sidebar we want, not the footer widget area */
body.single-post #secondary.widget-area {
  flex: 1;
  min-width: 300px;
}

/* --- Post Content Styling (No Changes Here) --- */

body.single-post .entry-title {
  font-size: 2.5em;
  margin-bottom: 10px;
}

body.single-post .entry-meta {
  color: #666;
  text-transform: uppercase;
  font-size: 0.8em;
  margin-bottom: 20px;
}

body.single-post .entry-meta .post-author,
body.single-post .entry-meta .post-date {
  margin-right: 15px;
}


/* * --- Sidebar Widget Styling (CORRECTED) --- 
 * We now prefix everything with #secondary to ensure these styles
 * ONLY apply to our main single post sidebar.
*/

body.single-post #secondary .widget {
    padding: 20px;
    margin-bottom: 20px;
}

/* Author widget styling */
body.single-post #secondary .widget_author_bio img {
    border-radius: 50%;
    display: block;
    margin: 0 auto 15px;
    max-width: 100px;
}

body.single-post #secondary .widget_author_bio p {
    text-align: center;
    font-size: 0.9em;
}

/* Style for the "Easy Dinner Recipes" grid */
body.single-post #secondary .widget_recent_entries ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

body.single-post #secondary .widget_recent_entries ul li {
    margin: 0;
    text-align: center;
}

body.single-post #secondary .widget_recent_entries ul li a {
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

body.single-post #secondary .widget_recent_entries ul li img {
    max-width: 100%;
    height: auto;
    margin-bottom: 8px;
}


/*
 * --- Responsive Styles for Single Post Page ---
 * This code makes the layout stack vertically on smaller screens.
*/
@media (max-width: 800px) {

    /*
     * Target the flex container on screens 800px or less.
     * 'flex-direction: column;' will stack the main content
     * and sidebar on top of each other.
     */
    body.single-post .single-post-layout-container {
        flex-direction: column;
    }

    /*
     * The 2-column recipe grid in the sidebar can also look
     * cramped on mobile. This makes it a single column so the
     * images and links are easier to tap.
     */
    body.single-post #secondary .widget_recent_entries ul {
        grid-template-columns: 1fr;
    }
}
















/*
 * Author Box Widget Styles
 * --------------------------------------------------
 */
.widget-author-box {
    text-align: center;
    padding: 30px 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The circular author image */
.widget-author-box .author-box-image {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* This makes the image a perfect circle */
    object-fit: cover; /* Prevents the image from being stretched */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    display: block;
}

/* The main headline, e.g., "Hi, I'm Ashlyn!" */
.widget-author-box .author-box-headline {
    /* A classic serif font like in the example image */
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 42px; /* Large and impactful font size */
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 15px;
    color: #2d2d2d; /* Dark gray for text */
    line-height: 1.2;
}

/* The descriptive paragraph text */
.widget-author-box .author-box-description {
    font-size: 16px;
    line-height: 1.6;
    color: #555; /* Slightly lighter gray for readability */
    margin-bottom: 30px;
}

/* The "More About Me" button */
.widget-author-box .author-box-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color-style-new); /* The dusty mauve color from the image */
    color: #000000;
    padding: 14px 28px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.widget-author-box .author-box-button:hover,
.widget-author-box .author-box-button:focus {
    background-color: #000000; /* A slightly darker shade for the hover effect */
    transform: translateY(-2px); /* Lifts the button slightly on hover */
    color: #ffffff;
}

/* The arrow icon inside the button */
.widget-author-box .author-box-button svg {
    margin-left: 10px;
    width: 20px;
    height: 20px;
}

























/*------------------------------------------------------------------
  Pagination Styling
-------------------------------------------------------------------*/
.pagination-container {
    margin-top: 50px;
    margin-bottom: 20px;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: #333;
    border: 2px solid #e0e0e0;
}

.page-numbers.current {
    background-color: var(--main-color-style-new); /* Pink color from image */
    color: #000000;
    border-color: var(--main-color-style-new);
}

.page-numbers.next,
.page-numbers.prev {
    border: none;
    color: #555;
    font-size: px;
}




/* =========================================================
   “Read More” — yellow underline + arrow
   (scoped to the Latest-Recipes block so nothing else changes)
   ========================================================= */
.latest-recipes-section .read-more{
    /* layout ------------------------------------------------*/
    display:inline-flex;            /* text + arrow */
    align-items:center;
    margin-top:auto;                /* still pins the link to card bottom */
    padding:0 0 4px 0;              /* little breathing room above underline */

    /* typography -------------------------------------------*/
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#1a1a1a;
    text-decoration:none;
    background:none;                /* kill the old red background */
    border:none;                    /* reset (in case buttons elsewhere) */

    position:relative;              /* for ::before highlight bar */
}

/* yellow highlight bar */
.latest-recipes-section .read-more::before{
    content:'';
    position:absolute;
    left:0;
    bottom:0;                       /* sits right on baseline */
    width:60%;
    height:6px;                     /* thickness of the bar */
    background:var(--main-color-style-new);             /* tweak to taste */
    z-index:-1;                     /* slide behind the text */
    transition:width .3s ease;
}

/* arrow */
.latest-recipes-section .read-more::after{
    content:'\2192';                /* → */
    margin-left:6px;
    font-size:16px;
    transition:transform .3s ease;
}

/* small hover flourish */
.latest-recipes-section .read-more:hover::after{
    transform:translateX(4px);
}
.latest-recipes-section .read-more:hover::before{
    width:110%;
}


















/* ---------- 1. Grid tweaks ---------- */
.recipes-grid{
    /* keep 5-across on desktop but let each cell stretch */
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:30px;
    align-items:stretch;      /* every card = full column height */
}

/* tablets */
@media(max-width:1024px){
    .recipes-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* phones – exactly two columns */
@media(max-width:768px){
    .recipes-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* single column on very small screens (unchanged) */
@media(max-width:480px){
    .recipes-grid{grid-template-columns:2fr;}
}



/* ---------- 2. Equal-height card layout ---------- */
.recipe-card{
    height:100%;              /* stretch to fill its grid cell */
    display:flex;             /* vertical layout inside */
    flex-direction:column;
}

/* Image always on top, fixed aspect-ratio already set */
.recipe-image{flex:0 0 auto;}

/* Content area grows/shrinks to fill all leftover space */
.recipe-content{
    flex:1 1 auto;            /* take everything that’s left   */
    display:flex;
    flex-direction:column;
    padding:20px;             /* keep your original padding    */
}

/* Title stays at the top of content */
.recipe-title{margin-bottom:15px;}

/* “Read More” is pushed to the very bottom */
.read-more{
    margin-top:auto;          /* magic! every button aligns */
}

/* Optional: give every card the *exact* same min-height
   (tweak the 420px to whatever looks good for you) */
/*
.recipe-card{min-height:420px;}
*/




















/* =========================================================
   Latest-Recipes grid — 4 columns on desktop
   (leaves every other .recipes-grid at 5)
   ========================================================= */
.latest-recipes-section .recipes-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));   /* desktop */
}

/* tablets */
@media(max-width:1024px){
    .latest-recipes-section .recipes-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

/* phones */
@media(max-width:768px){
    .latest-recipes-section .recipes-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* very small screens */
@media(max-width:480px){
    .latest-recipes-section .recipes-grid{
        grid-template-columns:1fr;
    }
}















/* =========== Home hero author box =========== */
.home-author-box {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 4vw, 2.5rem);
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--wp--preset--color--contrast-5, #eee);
	border-radius: 8px;
	background: var(--home-author-box, #fff);
	justify-content: center;
}

.home-author-avatar {
	flex: 0 0 110px;
	width: 110px;
	height: 110px;
	object-fit: cover;
	border-radius: 50%;
}

.home-author-content {
	max-width: 620px;
}

.home-author-welcome {
	display: inline-block;
	font-family: "Pacifico", cursive;          /* or any script you prefer */
	font-size: 1.1rem;
	color: var(--wp--preset--color--primary, var(--main-color-style-new));
	margin-bottom: 0.25rem;
}

.home-author-headline {
	font-weight: 700;
	font-size: clamp(1.5rem, 2vw + 1rem, 2.125rem);
	line-height: 1.2;
	margin: 0 0 0.25rem;
}

.home-author-tagline {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.75rem;
	font-weight: 600;
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--contrast-2, #666);
}
section.popular-recipes-section.latest-recipes-section {
    margin-top: 20px;
}

.home-author-description {
	margin: 0 0 1.25rem;
}

.home-author-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
	color: #000;
	background: var(--wp--preset--color--primary, var(--main-color-style-new));
	border-radius: 4px;
	transition: background 0.3s ease;
}
a.home-author-button {
    display: inline-block;
    background-color: var(--main-color-style-new);
    color: #000000;
    padding: 0.8rem 1.8rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

a.home-author-button:hover {
    transform: translateY(-2px);
}
.home-author-button:hover,
.home-author-button:focus {
	background: var(--main-color-style-new);
}

/* --- Responsive tweak: stack on narrow screens --- */
@media (max-width: 600px) {
	.home-author-box {
		flex-direction: column;
		text-align: center;
	}
	.home-author-avatar {
		margin-bottom: 1rem;
	}
}



















/* === Reader Favorites sidebar module === */
.rp-sidebar {
    margin: 0 0 2rem;
    font-family: inherit;
}

.rp-heading {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 1rem;
}

.rp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.rp-item {
    list-style: none;
}

.rp-thumb img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.rp-title {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.25;
    margin: .5rem 0 0;
    text-align: center;
}

.rp-title a {color: inherit; text-decoration: none;}
.rp-title a:hover {text-decoration: underline;}

/* Optional: single-column fallback on very narrow sidebars */
@media (max-width: 420px) {
    .rp-grid {grid-template-columns: 1fr;}
}
.angani {
    margin: 25px;
}


.recipe-item h3:hover {
    color: #e67e22;        /* change to any color you like */
    cursor: pointer;       /* optional: shows it’s clickable */
    /* you can stack other effects here—e.g.,
       text-decoration: underline;
       transform: scale(1.05);
    */
}

@media (max-width: 768px) {
 nav#secondary-navigation {
    display: none;
}
}

/*#FFCE04*/

a.rpf-button {
    text-transform: uppercase;
}
/* تنسيق القائمة العلوية */
.secondary-navigation {
    
    
    
    background:var(--main-color-style-new-transparent); border-bottom: 1px solid #e9ecef; padding: 10px 0; } 

.secondary-navigation ul { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; } .secondary-navigation li { /* margin: 0 15px; */ } .secondary-navigation a { color: #495057; text-decoration: none; font-size: 14px; transition: color 0.3s; } .secondary-navigation a:hover { color: #007cba; } /* تنسيق مربع البحث */ .menu-item-search { margin-left: 20px !important; } .menu-item-search form { display: flex; align-items: center; margin: 0; border: 1px solid #c0c0c0; border-radius: 0px; background: #fff; } .menu-item-search input[type="search"] { padding: 5px 10px; /* border: 1px solid #ced4da; */ /* border-radius: 20px; */ /* font-size: 13px; */ /* width: 180px; */ /* outline: none; */ background: #fff; border: unset; } .menu-item-search input[type="search"]:focus { border-color: #007cba; box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.1); } .menu-item-search button { background: #fff; color: #000000; /* border: none; */ /* padding: 6px 12px; */ /* border-radius: 20px; */ /* margin-left: 5px; */ cursor: pointer; font-size: 12px; } .menu-item-search button:hover { background:var(--main-color-style-new); }


main#main {
    margin-top: 0 !important;
}

.site-footer {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.site-footer .inside-site-info,
.site-footer .footer-widgets-container {
    max-width: 1200px; /* أو أي عرض تريده */
    margin: 0 auto;
    padding: 0 20px;
}

/* للتأكد من عدم وجود overflow */
body {
    overflow-x: hidden;
}