/**
 * Recipe Pages - Frontend Styles
 *
 * Version: 2.1
 * Created: 2026-01-19 16:13:39
 * Updated: 2026-02-08 10:30 PM Pacific Time
 *
 */

/* ========================================
   CSS Variable Defaults
   These can be overridden per-template via admin colour customisation
   ======================================== */

.recipe-pages-content {
    /* Default colour variables - can be overridden via inline styles */
    --recipe-primary: #D4745C;
    --recipe-secondary: #D4A574;
    --recipe-background: #FFFFFF;
    --recipe-info-bar-bg: #F5F5F5;
    --recipe-container-bg: #FAFAFA;
    --recipe-container-border: #E0E0E0;
    --recipe-heading: #333333;
    --recipe-text: #333333;
    --recipe-notes-bg: #FFF9E6;
    --recipe-notes-border: #FFA500;
}

/* ========================================
   Recipe Pages Content Container Reset
   Prevents WordPress theme CSS from overriding template styles
   ======================================== */

.recipe-pages-content {
    /* Reset common theme overrides */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    line-height: var(--recipe-line-height, 1.6);
    color: var(--recipe-text, #333);
    box-sizing: border-box;
}

.recipe-pages-content *,
.recipe-pages-content *::before,
.recipe-pages-content *::after {
    box-sizing: border-box;
}

/* Line spacing between items — controlled by settings */
.recipe-pages-content br + br {
    display: block;
    margin-top: var(--recipe-item-spacing, 0.4em);
    content: "";
}

.recipe-pages-content p {
    margin-bottom: var(--recipe-item-spacing, 0.4em);
}

/* Reset common element styles within recipe content */
.recipe-pages-content h1,
.recipe-pages-content h2,
.recipe-pages-content h3,
.recipe-pages-content h4 {
    margin-top: 0;
    line-height: 1.3;
}

.recipe-pages-content p {
    margin: 0 0 1em 0;
}

.recipe-pages-content ul,
.recipe-pages-content ol {
    margin: 0 0 1em 0;
    padding-left: 1.5em;
}

.recipe-pages-content li {
    margin-bottom: 0.5em;
}

.recipe-pages-content a {
    color: var(--recipe-primary, #D4745C);
    text-decoration: none;
}

/* Field font styling from Settings → Field Styling
   These override template defaults when --recipe-font-* variables are set */
.recipe-pages-content [class*="-title"],
.recipe-pages-content .recipe-container .recipe-title {
    font-family: var(--recipe-font-title);
    font-size: var(--recipe-font-size-title);
}
.recipe-pages-content [class*="-description"],
.recipe-pages-content [class*="-about"],
.recipe-pages-content .recipe-container .recipe-about {
    font-family: var(--recipe-font-about);
    font-size: var(--recipe-font-size-about);
}
.recipe-pages-content [class*="-ingredients"] .section-content,
.recipe-pages-content [class*="-ingredients-list"],
.recipe-pages-content [class*="-ingredients"] [class*="-section-content"] {
    font-family: var(--recipe-font-ingredients);
    font-size: var(--recipe-font-size-ingredients);
}
.recipe-pages-content [class*="-directions"] .section-content,
.recipe-pages-content [class*="-directions-list"],
.recipe-pages-content [class*="-steps"],
.recipe-pages-content [class*="-instructions"] {
    font-family: var(--recipe-font-directions);
    font-size: var(--recipe-font-size-directions);
}
.recipe-pages-content [class*="-notes"] {
    font-family: var(--recipe-font-notes);
    font-size: var(--recipe-font-size-notes);
}
.recipe-pages-content [class*="-links"] {
    font-family: var(--recipe-font-links);
    font-size: var(--recipe-font-size-links);
}
/* Section headings font size */
.recipe-pages-content [class*="-section"] h2,
.recipe-pages-content [class*="-column"] h2,
.recipe-pages-content [class*="-column-title"] {
    font-size: var(--recipe-font-size-heading);
}

.recipe-pages-content a:hover {
    text-decoration: underline;
}

.recipe-pages-content img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   High-Specificity Template Styles
   These use !important to override theme styles
   ======================================== */

/* Classic Template - Notes Box */
.recipe-pages-content .recipe-classic-notes-box {
    background: var(--recipe-notes-bg, #FFF9E6) !important;
    padding: 1.5rem !important;
    border-radius: 8px !important;
    border-left: 4px solid var(--recipe-notes-border, #FFA500) !important;
    line-height: 1.8 !important;
}

/* Classic Template - Info Bar */
.recipe-pages-content .recipe-classic-info-bar {
    display: flex !important;
    justify-content: center !important;
    gap: 3rem !important;
    padding: 1.5rem !important;
    background: var(--recipe-info-bar-bg, #FFF8DC) !important;
    border-radius: 12px !important;
    margin-bottom: 2rem !important;
}

/* Classic Template - Section Headers */
.recipe-pages-content .recipe-classic-section h2 {
    color: var(--recipe-primary, #D2691E) !important;
    margin-bottom: 1rem !important;
    font-size: 1.5rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid var(--recipe-info-bar-bg, #FFF8DC) !important;
}

/* Classic Template - Ingredients Box */
.recipe-pages-content .recipe-classic-ingredients .recipe-classic-section-content {
    background: var(--recipe-container-bg, #FFFAF0) !important;
    padding: 1.5rem !important;
    border-radius: 8px !important;
    border-left: 4px solid var(--recipe-primary, #D2691E) !important;
}

/* Print Optimized - Notes Box */
.recipe-pages-content .recipe-print-notes-content {
    background: var(--recipe-notes-bg, #FFF9E6) !important;
    padding: 1.25rem !important;
    border-radius: 4px !important;
    border-left: 4px solid var(--recipe-notes-border, #FFD700) !important;
    font-style: italic !important;
    color: #666 !important;
}

/* Print Optimized - Ingredients Box */
.recipe-pages-content .recipe-print-ingredients-list {
    background: var(--recipe-container-bg, #F5E6D3) !important;
    padding: 1.25rem !important;
    border-radius: 4px !important;
    border-left: 4px solid var(--recipe-secondary, #8B9D83) !important;
    line-height: 1.8 !important;
}

/* Print Optimized - Section Titles */
.recipe-pages-content .recipe-print-section-title {
    font-size: 1.4rem !important;
    color: var(--recipe-primary, #D4745C) !important;
    margin-bottom: 0.75rem !important;
}

/* Two Column - Notes Box */
.recipe-pages-content .recipe-twocol-notes {
    background: var(--recipe-notes-bg, #FFF9E6) !important;
    padding: 1.5rem !important;
    border-radius: 8px !important;
    margin-top: 2rem !important;
    border-left: 4px solid var(--recipe-notes-border, #D4A574) !important;
}

/* Gradient Header - Notes Box */
.recipe-pages-content .recipe-gradient-notes-box {
    background: var(--recipe-notes-bg, #FFF9E6) !important;
    padding: 1.5rem !important;
    border-radius: 8px !important;
    border-left: 5px solid var(--recipe-notes-border, #FFD700) !important;
    margin-bottom: 1.5rem !important;
}

/* Card Style - Notes Section */
.recipe-pages-content .recipe-card-notes {
    background: var(--recipe-notes-bg, #fff8e5) !important;
    border-left: 4px solid var(--recipe-notes-border, #ffb900) !important;
}

/* Card Style - Sections */
.recipe-pages-content .recipe-card-section {
    margin-bottom: 25px !important;
    padding: 20px !important;
    background: var(--recipe-container-bg, #fafafa) !important;
    border-radius: 6px !important;
}

/* Minimal Template - Notes */
.recipe-pages-content .recipe-minimal-notes {
    padding: 15px !important;
    background: var(--recipe-container-bg, #f9f9f9) !important;
    border-radius: 4px !important;
}

/* ========================================
   Vertical Spacing for Stacked Meta Items
   Ensures proper spacing between Serving/Time and next section
   ======================================== */

/* Space after meta sections before next content */
.recipe-pages-content .recipe-classic-info-bar {
    margin-bottom: 2rem !important;
}

.recipe-pages-content .recipe-card-meta {
    margin-bottom: 1.5rem !important;
}

.recipe-pages-content .recipe-minimal-meta {
    margin-bottom: 1.5rem !important;
}

.recipe-pages-content .recipe-print-meta {
    margin-bottom: 1rem !important;
}

.recipe-pages-content .recipe-twocol-meta-grid {
    margin-bottom: 1rem !important;
}

.recipe-pages-content .recipe-gradient-badges {
    margin-top: 1rem !important;
}

/* ========================================
   Recipe Print Button
   ======================================== */

.recipe-print-wrapper {
    max-width: 800px;
    margin: 0 auto 1rem auto;
    text-align: right;
}

.recipe-page-print-btn {
    background: linear-gradient(135deg, var(--recipe-primary, #D4745C) 0%, var(--recipe-secondary, #D4A574) 100%);
    color: #fff;
    border: none;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.recipe-page-print-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.recipe-page-print-btn:active {
    transform: translateY(0);
}

.recipe-save-btn,
.recipe-email-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--recipe-primary, #D4745C) 0%, var(--recipe-secondary, #D4A574) 100%);
    color: #fff;
    border: none;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-decoration: none;
    margin-left: 0.5rem;
}

.recipe-save-btn:hover,
.recipe-email-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: #fff;
}

.recipe-save-btn:active,
.recipe-email-btn:active {
    transform: translateY(0);
}

.recipe-print-actions {
    text-align: right;
    margin-bottom: 1rem;
}

/* ========================================
   Print Styles - Recipe Only
   Hides all non-recipe content when printing
   Compact spacing for fewer pages
   ======================================== */
@media print {
    /* Hide print button and elements marked no-print */
    .recipe-print-wrapper,
    .recipe-print-actions,
    .no-print {
        display: none !important;
    }

    /* Hide common WordPress theme elements */
    header,
    footer,
    nav,
    aside,
    .site-header,
    .site-footer,
    .site-navigation,
    .main-navigation,
    .primary-navigation,
    .secondary-navigation,
    .nav-menu,
    .menu-toggle,
    .site-branding,
    .site-title,
    .site-description,
    .header-image,
    .custom-header,
    .widget-area,
    .sidebar,
    .site-sidebar,
    .comments-area,
    .comment-respond,
    .post-navigation,
    .posts-navigation,
    .entry-footer,
    .entry-meta,
    .post-meta,
    .breadcrumbs,
    .breadcrumb,
    .page-header,
    .entry-header,
    .wp-block-navigation,
    .wp-block-site-title,
    .wp-block-site-tagline,
    #masthead,
    #colophon,
    #secondary,
    #comments,
    #respond,
    .admin-bar #wpadminbar,
    #wpadminbar {
        display: none !important;
    }

    /* Hide page/post title (the recipe has its own title) */
    .entry-title,
    .page-title,
    .post-title,
    h1.wp-block-post-title {
        display: none !important;
    }

    /* Hide author and date information */
    .author,
    .byline,
    .post-author,
    .entry-author,
    .author-info,
    .author-box,
    .author-bio,
    .posted-on,
    .post-date,
    .entry-date,
    .published,
    .date,
    .meta-date,
    .post-info,
    .article-meta,
    .wp-block-post-author,
    .wp-block-post-author-name,
    .wp-block-post-date,
    time.entry-date,
    time.published,
    .cat-links,
    .tags-links,
    .taxonomy-links,
    .post-categories,
    .post-tags,
    [rel="author"],
    .vcard {
        display: none !important;
    }

    /* Reset body and html for printing */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        font-size: 11pt !important;
    }

    /* Make recipe content full width and start at top */
    .recipe-pages-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* Ensure main content area is visible and full width */
    main,
    .site-main,
    .site-content,
    #primary,
    #main,
    .content-area,
    article {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Hide any fixed/sticky elements */
    [style*="position: fixed"],
    [style*="position: sticky"],
    .sticky-header,
    .fixed-header {
        position: static !important;
    }

    /* Ensure links show URL on print (optional, for reference) */
    .recipe-pages-content a[href]:after {
        content: none; /* Don't append URLs - keeps it clean */
    }

    /* ========================================
       Compact Print Spacing
       Single line spacing and reduced margins
       ======================================== */

    /* Single line spacing for all recipe content */
    .recipe-pages-content,
    .recipe-pages-content p,
    .recipe-pages-content li,
    .recipe-pages-content div {
        line-height: 1.3 !important;
    }

    /* Compact paragraph spacing */
    .recipe-pages-content p {
        margin: 0 0 0.4em 0 !important;
    }

    /* Compact list spacing */
    .recipe-pages-content ul,
    .recipe-pages-content ol {
        margin: 0 0 0.5em 0 !important;
        padding-left: 1.2em !important;
    }

    .recipe-pages-content li {
        margin-bottom: 0.15em !important;
        padding: 0 !important;
    }

    /* Compact recipe title */
    .recipe-pages-content h1 {
        font-size: 16pt !important;
        margin: 0 0 0.3em 0 !important;
        padding: 0 !important;
    }

    /* Compact section headings (Ingredients, Directions, etc.) */
    .recipe-pages-content h2 {
        font-size: 12pt !important;
        margin: 0.6em 0 0.3em 0 !important;
        padding: 0 !important;
    }

    .recipe-pages-content h3 {
        font-size: 11pt !important;
        margin: 0.5em 0 0.2em 0 !important;
        padding: 0 !important;
    }

    /* Compact meta info (serving, time) */
    .recipe-pages-content .recipe-card-meta,
    .recipe-pages-content .recipe-classic-info-bar,
    .recipe-pages-content .recipe-minimal-meta,
    .recipe-pages-content .recipe-print-meta,
    .recipe-pages-content .recipe-twocol-meta-grid,
    .recipe-pages-content .recipe-gradient-badges {
        margin: 0.3em 0 0.5em 0 !important;
        padding: 0.3em !important;
    }

    /* Compact section containers */
    .recipe-pages-content section,
    .recipe-pages-content .recipe-card-section,
    .recipe-pages-content .recipe-classic-section,
    .recipe-pages-content .recipe-print-section,
    .recipe-pages-content .recipe-minimal-section {
        margin-bottom: 0.5em !important;
        padding: 0 !important;
    }

    /* Compact notes box */
    .recipe-pages-content .recipe-classic-notes-box,
    .recipe-pages-content .recipe-card-notes,
    .recipe-pages-content .recipe-print-notes-content,
    .recipe-pages-content .recipe-gradient-notes-box,
    .recipe-pages-content .recipe-twocol-notes,
    .recipe-pages-content .recipe-minimal-notes {
        padding: 0.4em 0.6em !important;
        margin: 0.4em 0 !important;
    }

    /* Remove decorative elements that waste space */
    .recipe-pages-content .recipe-gradient-hero {
        padding: 0.5em !important;
    }

    /* Compact image sizing */
    .recipe-pages-content img {
        max-width: 60% !important;
        max-height: 200px !important;
        margin: 0.3em auto !important;
        display: block !important;
    }

    /* Page break control - keep headings with content */
    .recipe-pages-content h1,
    .recipe-pages-content h2,
    .recipe-pages-content h3 {
        page-break-after: avoid;
    }

    /* Ensure images print properly */
    .recipe-pages-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
}

/* Recipe Container */
.recipe-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Recipe Title */
.recipe-container .recipe-title {
    margin-bottom: 20px;
    color: #333;
}

/* Recipe Image */
.recipe-container .recipe-image {
    margin: 20px 0;
}

.recipe-container .recipe-image img {
    height: auto;
    border-radius: 4px;
}

/* Recipe About */
.recipe-container .recipe-about {
    margin: 20px 0;
    line-height: 1.6;
}

/* Recipe Meta (Serving & Time) */
.recipe-container .recipe-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 4px;
}

.recipe-container .recipe-serving,
.recipe-container .recipe-time {
    display: inline-block;
}

/* Recipe Sections */
.recipe-container .recipe-ingredients,
.recipe-container .recipe-directions,
.recipe-container .recipe-links,
.recipe-container .recipe-notes {
    margin: 30px 0;
}

.recipe-container .recipe-ingredients h3,
.recipe-container .recipe-directions h3,
.recipe-container .recipe-links h3,
.recipe-container .recipe-notes h3 {
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Recipe Ingredients */
.recipe-container .recipe-ingredients div {
    line-height: 1.8;
}

/* Recipe Directions */
.recipe-container .recipe-directions div {
    line-height: 1.8;
}

/* Recipe Links */
.recipe-container .recipe-links a {
    color: #0073aa;
    text-decoration: none;
}

.recipe-container .recipe-links a:hover {
    text-decoration: underline;
}

/* Recipe Notes */
.recipe-container .recipe-notes div {
    padding: 15px;
    background: #fff8e5;
    border-left: 4px solid #ffb900;
    border-radius: 0 4px 4px 0;
}

/* Recipe List */
.recipe-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recipe-list-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.recipe-list-item:last-child {
    border-bottom: none;
}

/* Error Message */
.recipe-error {
    color: #dc3232;
    padding: 10px;
    background: #fbeaea;
    border-radius: 4px;
}

.recipe-list-empty {
    color: #666;
    font-style: italic;
}

/* Standalone Shortcode Styles */
span.recipe-title,
span.recipe-serving,
span.recipe-time {
    display: inline;
}

div.recipe-about,
div.recipe-ingredients,
div.recipe-directions,
div.recipe-links,
div.recipe-notes,
div.recipe-image {
    margin: 10px 0;
}

/* ========================================
   Image Layout Styles
   ======================================== */

/* Base image container */
.recipe-images {
    margin: 20px 0;
}

.recipe-images img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

/* Single image layout */
.recipe-images-single .recipe-image-item {
    margin-bottom: 15px;
}

.recipe-images-single .recipe-image-item:last-child {
    margin-bottom: 0;
}

/* Stack layout (vertical) */
.recipe-images-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.recipe-images-stack .recipe-image-item {
    width: 100%;
}

.recipe-images-stack .recipe-image-item img {
    width: 100%;
    height: auto;
}

/* Row layout (horizontal) */
.recipe-images-row {
    display: flex;
    flex-direction: row;
    gap: 15px;
    overflow-x: auto;
}

.recipe-images-row .recipe-image-item {
    flex: 0 0 auto;
    max-width: 300px;
}

.recipe-images-row .recipe-image-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Grid layouts */
.recipe-images-grid-2,
.recipe-images-grid-3,
.recipe-images-grid-4 {
    display: grid;
    gap: 15px;
}

.recipe-images-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.recipe-images-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.recipe-images-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Grid image items */
.recipe-images-grid-2 .recipe-image-item,
.recipe-images-grid-3 .recipe-image-item,
.recipe-images-grid-4 .recipe-image-item {
    overflow: hidden;
    border-radius: 4px;
}

.recipe-images-grid-2 .recipe-image-item img,
.recipe-images-grid-3 .recipe-image-item img,
.recipe-images-grid-4 .recipe-image-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.recipe-images-grid-2 .recipe-image-item img:hover,
.recipe-images-grid-3 .recipe-image-item img:hover,
.recipe-images-grid-4 .recipe-image-item img:hover {
    transform: scale(1.05);
}

/* Masonry layout */
.recipe-images-masonry {
    column-count: 3;
    column-gap: 15px;
}

.recipe-images-masonry .recipe-image-item {
    break-inside: avoid;
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: 4px;
}

.recipe-images-masonry .recipe-image-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive image layouts */
@media screen and (max-width: 900px) {
    .recipe-images-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .recipe-images-masonry {
        column-count: 2;
    }
}

@media screen and (max-width: 600px) {
    .recipe-images-grid-2,
    .recipe-images-grid-3,
    .recipe-images-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .recipe-images-grid-2 .recipe-image-item img,
    .recipe-images-grid-3 .recipe-image-item img,
    .recipe-images-grid-4 .recipe-image-item img {
        height: 150px;
    }

    .recipe-images-masonry {
        column-count: 2;
    }
}

@media screen and (max-width: 400px) {
    .recipe-images-grid-2,
    .recipe-images-grid-3,
    .recipe-images-grid-4 {
        grid-template-columns: 1fr;
    }

    .recipe-images-grid-2 .recipe-image-item img,
    .recipe-images-grid-3 .recipe-image-item img,
    .recipe-images-grid-4 .recipe-image-item img {
        height: auto;
    }

    .recipe-images-masonry {
        column-count: 1;
    }
}

/* ========================================
   Responsive
   ======================================== */
@media screen and (max-width: 600px) {
    .recipe-container {
        padding: 10px;
    }

    .recipe-container .recipe-meta {
        flex-direction: column;
        gap: 10px;
    }

    /* Row layout responsive */
    .recipe-images-row {
        flex-direction: column;
    }

    .recipe-images-row .recipe-image-item {
        max-width: 100%;
    }

    .recipe-images-row .recipe-image-item img {
        height: auto;
    }
}

/* ========================================
   Card Style Template
   ======================================== */

.recipe-card {
    /* Map customisable --recipe-* variables */
    --card-primary: var(--recipe-primary, #333333);
    --card-secondary: var(--recipe-secondary, #0073AA);
    --card-bg: var(--recipe-background, #FFFFFF);
    --card-text: var(--recipe-text, #555555);
    --card-heading: var(--recipe-heading, #333333);
    --card-info-bg: var(--recipe-info-bar-bg, #F5F5F5);
    --card-container-bg: var(--recipe-container-bg, #FAFAFA);
    --card-border: var(--recipe-container-border, #E0E0E0);
    --card-notes-bg: var(--recipe-notes-bg, #FFF8E5);
    --card-notes-border: var(--recipe-notes-border, #FFB900);
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.recipe-card-image {
    width: 100%;
}

.recipe-card-image img {
    width: 100%;
    height: auto;
    display: block;
}

.recipe-card-content {
    padding: 25px;
}

.recipe-card-title {
    margin: 0 0 15px 0;
    font-size: 28px;
    color: var(--card-heading);
}

.recipe-card-about {
    margin-bottom: 20px;
    color: var(--card-text);
    line-height: 1.6;
}

.recipe-card-meta {
    display: flex;
    gap: 25px;
    padding: 15px;
    background: var(--card-info-bg);
    border-radius: 6px;
    margin-bottom: 25px;
}

.recipe-card-serving,
.recipe-card-time {
    font-size: 14px;
    color: var(--card-text);
}

.recipe-card-section {
    margin-bottom: 25px;
    padding: 20px;
    background: var(--card-container-bg);
    border-radius: 6px;
}

.recipe-card-section h2 {
    margin: 0 0 15px 0;
    font-size: 20px;
    color: var(--card-heading);
    border-bottom: 2px solid var(--card-border);
    padding-bottom: 10px;
}

.recipe-card-section .section-content {
    line-height: 1.8;
}

.recipe-card-notes {
    background: var(--card-notes-bg);
    border-left: 4px solid var(--card-notes-border);
}

.recipe-card-links a {
    color: var(--card-secondary);
    text-decoration: none;
}

.recipe-card-links a:hover {
    text-decoration: underline;
}

/* ========================================
   Minimal Template
   ======================================== */

.recipe-minimal {
    /* Map customisable --recipe-* variables */
    --minimal-heading: var(--recipe-heading, #333333);
    --minimal-text: var(--recipe-text, #333333);
    --minimal-secondary: var(--recipe-secondary, #0073AA);
    --minimal-container-bg: var(--recipe-container-bg, #F9F9F9);
    --minimal-border: var(--recipe-container-border, #EEEEEE);
    max-width: 700px;
    margin: 0 auto;
    padding: 20px 0;
    font-family: Georgia, serif;
}

.recipe-minimal-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--minimal-border);
}

.recipe-minimal-header h1 {
    margin: 0 0 15px 0;
    font-size: 32px;
    font-weight: normal;
    color: var(--minimal-heading);
}

.recipe-minimal-description {
    color: var(--minimal-text);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 15px;
}

.recipe-minimal-meta {
    color: var(--minimal-text);
    font-size: 14px;
    opacity: 0.7;
}

.recipe-minimal-meta span {
    margin: 0 10px;
}

.recipe-minimal-meta span::before {
    content: "\2022";
    margin-right: 10px;
}

.recipe-minimal-meta span:first-child::before {
    content: "";
    margin-right: 0;
}

.recipe-minimal-image {
    margin: 25px 0;
}

.recipe-minimal-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.recipe-minimal-body {
    line-height: 1.8;
}

.recipe-minimal-section {
    margin-bottom: 30px;
}

.recipe-minimal-section h2 {
    font-size: 18px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--minimal-heading);
    opacity: 0.8;
    margin-bottom: 15px;
}

.recipe-minimal-notes {
    padding: 15px;
    background: var(--minimal-container-bg);
    border-radius: 4px;
}

.recipe-minimal a {
    color: var(--minimal-secondary);
    text-decoration: none;
}

.recipe-minimal a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 600px) {
    .recipe-card-content {
        padding: 15px;
    }

    .recipe-card-meta {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    .recipe-card-serving,
    .recipe-card-time {
        display: block;
        padding: 12px 15px;
        border-bottom: 1px solid #e0e0e0;
    }

    .recipe-card-serving:last-child,
    .recipe-card-time:last-child {
        border-bottom: none;
    }

    .recipe-minimal {
        padding: 10px;
    }

    .recipe-minimal-header h1 {
        font-size: 24px;
    }

    /* Minimal template meta spacing */
    .recipe-minimal-meta {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .recipe-minimal-meta span {
        display: block;
        padding: 0.5rem 0;
        margin: 0;
        border-bottom: 1px solid #eee;
    }

    .recipe-minimal-meta span:last-child {
        border-bottom: none;
    }

    .recipe-minimal-meta span::before {
        content: "";
        margin-right: 0;
    }
}

/* ========================================
   Print Optimized Template
   ======================================== */

.recipe-print {
    /* Map customisable --recipe-* variables to template internals */
    --print-rust: var(--recipe-primary, #D4745C);
    --print-cream: var(--recipe-background, #FFF8F0);
    --print-charcoal: var(--recipe-text, #2C2C2C);
    --print-sage: var(--recipe-secondary, #8B9D83);
    --print-warm: var(--recipe-container-bg, #F5E6D3);
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-radius: 8px;
    font-family: Georgia, serif;
    line-height: 1.6;
    color: var(--print-charcoal);
}

.recipe-print-btn {
    background: var(--print-rust);
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 1.5rem;
    transition: background 0.3s;
}

.recipe-print-btn:hover {
    background: #B85D47;
}

.recipe-print-header {
    border-bottom: 3px solid var(--print-rust);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.recipe-print-title {
    font-size: 2.2rem;
    color: var(--print-rust);
    margin: 0 0 0.5rem 0;
    font-weight: 400;
    letter-spacing: -0.5px;
}

.recipe-print-meta {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    color: #666;
    font-size: 0.95rem;
}

.recipe-print-meta-item strong {
    color: var(--print-charcoal);
}

.recipe-print-image {
    margin: 1.5rem 0;
}

.recipe-print-image img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 4px;
}

.recipe-print-description {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: #555;
}

.recipe-print-section {
    margin-bottom: 2rem;
}

.recipe-print-section-title {
    font-size: 1.4rem;
    color: var(--print-rust);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recipe-print-ingredients-list {
    background: var(--print-warm);
    padding: 1.25rem;
    border-radius: 4px;
    border-left: 4px solid var(--print-sage);
    line-height: 1.8;
}

.recipe-print-directions-list {
    line-height: 1.8;
}

.recipe-print-directions-list ol {
    padding-left: 1.5rem;
}

.recipe-print-directions-list li {
    margin-bottom: 0.75rem;
}

.recipe-print-notes-content {
    background: #FFF9E6;
    padding: 1.25rem;
    border-radius: 4px;
    border-left: 4px solid #FFD700;
    font-style: italic;
    color: #666;
}

.recipe-print-links a {
    color: var(--print-rust);
}

/* Print styles for Print Optimized template */
@media print {
    .no-print {
        display: none !important;
    }

    .recipe-print {
        box-shadow: none;
        padding: 0;
        max-width: 100%;
    }

    .recipe-print-header {
        border-bottom: 2pt solid #000;
    }

    .recipe-print-title {
        font-size: 20pt;
        color: #000;
    }

    .recipe-print-meta {
        font-size: 9pt;
    }

    .recipe-print-image img {
        max-height: 200px;
    }

    .recipe-print-section-title {
        font-size: 14pt;
        color: #000;
        border-bottom: 1pt solid #999;
        padding-bottom: 4pt;
    }

    .recipe-print-ingredients-list {
        background: transparent;
        border-left: 3pt solid #666;
    }

    .recipe-print-section {
        page-break-inside: avoid;
    }
}

/* Print Optimized responsive - vertical spacing for stacked meta items */
@media screen and (max-width: 600px) {
    .recipe-print-meta {
        flex-direction: column;
        gap: 1rem;
    }

    .recipe-print-meta-item {
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #eee;
    }

    .recipe-print-meta-item:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }
}

/* ========================================
   Two Column Layout Template
   ======================================== */

.recipe-twocol {
    /* Map customisable --recipe-* variables to template internals */
    --twocol-terra: var(--recipe-primary, #C85A3E);
    --twocol-teal: var(--recipe-heading, #2A5F5F);
    --twocol-cream: var(--recipe-background, #FFF8F0);
    --twocol-gray: var(--recipe-text, #5A5A5A);
    --twocol-gold: var(--recipe-secondary, #D4A574);
    --twocol-sage: var(--recipe-info-bar-bg, #E8EDE7);
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Lora', Georgia, serif;
    line-height: 1.7;
}

.recipe-twocol-hero {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.recipe-twocol-hero-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}

.recipe-twocol-hero-content {
    padding: 2rem;
}

.recipe-twocol-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--twocol-terra);
    line-height: 1.1;
    margin: 0 0 0.5rem 0;
    letter-spacing: -1px;
}

.recipe-twocol-subtitle {
    font-size: 1.2rem;
    color: var(--twocol-teal);
    margin-bottom: 1.5rem;
    font-style: italic;
}

.recipe-twocol-meta-grid {
    display: flex;
    gap: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--twocol-sage);
}

.recipe-twocol-meta-item {
    text-align: center;
}

.recipe-twocol-meta-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--twocol-terra);
    margin-bottom: 0.25rem;
}

.recipe-twocol-meta-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--twocol-gray);
}

.recipe-twocol-container {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 2rem;
    align-items: start;
}

.recipe-twocol-ingredients-column {
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

.recipe-twocol-column-title {
    font-size: 1.5rem;
    color: var(--twocol-teal);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--twocol-terra);
}

.recipe-twocol-ingredients-list {
    line-height: 1.8;
}

.recipe-twocol-ingredients-list ul,
.recipe-twocol-ingredients-list ol {
    padding-left: 0;
    list-style: none;
}

.recipe-twocol-ingredients-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--twocol-sage);
}

.recipe-twocol-instructions-column {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.recipe-twocol-instructions-list {
    line-height: 1.8;
}

.recipe-twocol-instructions-list ol {
    padding-left: 0;
    counter-reset: step;
    list-style: none;
}

.recipe-twocol-instructions-list li {
    counter-increment: step;
    margin-bottom: 1.5rem;
    padding-left: 3.5rem;
    position: relative;
    line-height: 1.8;
}

.recipe-twocol-instructions-list li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, var(--twocol-terra), var(--twocol-gold));
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.recipe-twocol-notes {
    background: #FFF9E6;
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
    border-left: 4px solid var(--twocol-gold);
}

.recipe-twocol-notes-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--twocol-terra);
    margin-bottom: 0.75rem;
}

.recipe-twocol-links {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--twocol-sage);
    border-radius: 8px;
}

.recipe-twocol-links h3 {
    color: var(--twocol-teal);
    margin-bottom: 0.75rem;
}

.recipe-twocol-links a {
    color: var(--twocol-terra);
}

@media screen and (max-width: 900px) {
    .recipe-twocol-container {
        grid-template-columns: 1fr;
    }

    .recipe-twocol-ingredients-column {
        position: static;
        max-height: none;
    }
}

@media screen and (max-width: 600px) {
    .recipe-twocol-title {
        font-size: 1.8rem;
    }

    .recipe-twocol-hero-content {
        padding: 1.5rem;
    }

    .recipe-twocol-meta-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .recipe-twocol-meta-item {
        text-align: left;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--twocol-sage);
        width: 100%;
    }

    .recipe-twocol-meta-item:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }
}

/* ========================================
   Classic Template
   ======================================== */

.recipe-classic {
    /* Map customisable --recipe-* variables to template internals */
    --classic-brown: var(--recipe-heading, #8B4513);
    --classic-chocolate: var(--recipe-text, #3E2723);
    --classic-vanilla: var(--recipe-info-bar-bg, #FFF8DC);
    --classic-caramel: var(--recipe-primary, #D2691E);
    --classic-cream: var(--recipe-container-bg, #FFFAF0);
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 15px 50px rgba(0,0,0,0.1);
    font-family: 'Quicksand', sans-serif;
    color: var(--classic-chocolate);
    line-height: 1.7;
}

.recipe-classic-header {
    text-align: center;
    margin-bottom: 2rem;
}

.recipe-classic-title {
    font-size: 2.5rem;
    color: var(--classic-brown);
    margin: 0 0 1rem 0;
    font-weight: 700;
}

.recipe-classic-description {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
}

.recipe-classic-image {
    margin: 1.5rem 0;
    border-radius: 12px;
    overflow: hidden;
}

.recipe-classic-image img {
    width: 100%;
    height: auto;
    display: block;
}

.recipe-classic-info-bar {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 1.5rem;
    background: var(--classic-vanilla);
    border-radius: 12px;
    margin-bottom: 2rem;
}

.recipe-classic-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.recipe-classic-info-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.recipe-classic-info-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}

.recipe-classic-info-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--classic-caramel);
}

.recipe-classic-body {
    margin-top: 2rem;
}

.recipe-classic-section {
    margin-bottom: 2rem;
}

.recipe-classic-section h2 {
    color: var(--classic-caramel);
    margin-bottom: 1rem;
    font-size: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--classic-vanilla);
}

.recipe-classic-section-content {
    line-height: 1.8;
}

.recipe-classic-ingredients .recipe-classic-section-content {
    background: var(--classic-cream);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--classic-caramel);
}

.recipe-classic-notes-box {
    background: #FFF9E6;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #FFA500;
    line-height: 1.8;
}

.recipe-classic-links a {
    color: var(--classic-caramel);
    text-decoration: none;
}

.recipe-classic-links a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 600px) {
    .recipe-classic {
        padding: 1.5rem;
    }

    .recipe-classic-title {
        font-size: 1.8rem;
    }

    .recipe-classic-info-bar {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    .recipe-classic-info-item {
        padding: 1rem;
        border-bottom: 1px solid rgba(210, 105, 30, 0.2);
    }

    .recipe-classic-info-item:last-child {
        border-bottom: none;
    }
}

/* ========================================
   Gradient Header Template
   ======================================== */

.recipe-gradient {
    /* Map customisable --recipe-* variables to template internals */
    --gradient-start: var(--recipe-primary, #D4745C);
    --gradient-end: var(--recipe-secondary, #D4A574);
    --gradient-teal: var(--recipe-heading, #2A5F5F);
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.recipe-gradient-hero {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    padding: 3rem 2.5rem;
    text-align: center;
    color: #fff;
}

.recipe-gradient-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.recipe-gradient-subtitle {
    font-size: 1.2rem;
    opacity: 0.95;
    margin-bottom: 1.5rem;
}

.recipe-gradient-badges {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.recipe-gradient-badge {
    background: rgba(255,255,255,0.95);
    color: var(--gradient-start);
    padding: 0.6rem 1.25rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
}

.recipe-gradient-image {
    margin: 0;
}

.recipe-gradient-image img {
    width: 100%;
    height: auto;
    display: block;
}

.recipe-gradient-content {
    padding: 2.5rem;
}

.recipe-gradient-columns {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.recipe-gradient-column h2 {
    font-size: 1.5rem;
    color: var(--gradient-teal);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e0e0e0;
}

.recipe-gradient-ingredients {
    background: #f9f9f9;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e8ede7;
}

.recipe-gradient-list {
    line-height: 1.8;
}

.recipe-gradient-list ul {
    list-style: none;
    padding: 0;
}

.recipe-gradient-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.recipe-gradient-list li:last-child {
    border-bottom: none;
}

.recipe-gradient-steps {
    line-height: 1.8;
}

.recipe-gradient-steps ol {
    padding-left: 0;
    counter-reset: step;
    list-style: none;
}

.recipe-gradient-steps li {
    counter-increment: step;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: #f9f9f9;
    border-radius: 8px;
    padding-left: 3.5rem;
    position: relative;
}

.recipe-gradient-steps li::before {
    content: counter(step);
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--gradient-start);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.recipe-gradient-notes-box {
    background: #FFF9E6;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 5px solid #FFD700;
    margin-bottom: 1.5rem;
}

.recipe-gradient-notes-box h3 {
    color: var(--gradient-start);
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
}

.recipe-gradient-links {
    padding: 1.5rem;
    background: #f9f9f9;
    border-radius: 8px;
}

.recipe-gradient-links h3 {
    color: var(--gradient-teal);
    margin-bottom: 0.75rem;
}

.recipe-gradient-links a {
    color: var(--gradient-start);
}

@media screen and (max-width: 768px) {
    .recipe-gradient-hero {
        padding: 2rem 1.5rem;
    }

    .recipe-gradient-title {
        font-size: 1.8rem;
    }

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

    .recipe-gradient-content {
        padding: 1.5rem;
    }

    .recipe-gradient-badges {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .recipe-gradient-badge {
        width: 100%;
        max-width: 200px;
        text-align: center;
    }
}

/* ========================================
   Enhanced Frontend Submission Form
   ======================================== */

.recipe-form-enhanced {
    max-width: 900px;
    margin: 0 auto;
    padding: 2.5rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

/* Messages */
.recipe-form-message {
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.6;
}

.recipe-form-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.recipe-form-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.recipe-form-url {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.recipe-form-url a {
    color: inherit;
    word-break: break-all;
}

/* Edit Section */
.recipe-form-edit-section {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.recipe-form-edit-section h3 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

/* Divider */
.recipe-form-divider {
    position: relative;
    text-align: center;
    margin: 2rem 0;
}

.recipe-form-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
}

.recipe-form-divider span {
    position: relative;
    background: #fff;
    padding: 0 1.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

/* Form Groups */
.recipe-form-group {
    margin-bottom: 1.75rem;
}

.recipe-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: var(--recipe-font-size-heading, 0.95rem);
    color: #333;
}

.recipe-form-group label .required {
    color: #dc3545;
    margin-left: 2px;
}

/* Form Rows */
.recipe-form-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.recipe-form-row-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Inputs and Textareas */
.recipe-form-input,
.recipe-form-textarea,
.recipe-form-select,
.recipe-form-select-large {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.recipe-form-input:focus,
.recipe-form-textarea:focus,
.recipe-form-select:focus,
.recipe-form-select-large:focus {
    outline: none;
    border-color: #D4745C;
    box-shadow: 0 0 0 3px rgba(212, 116, 92, 0.15);
}

.recipe-form-input::placeholder,
.recipe-form-textarea::placeholder {
    color: #999;
}

/* Large inputs for 60+ characters visibility */
.recipe-form-input {
    min-width: 100%;
    font-size: 1rem;
}

.recipe-form-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

/* Selects */
.recipe-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

.recipe-form-select-large {
    flex: 1;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* Help Text */
.recipe-form-help {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #666;
    line-height: 1.4;
}

/* Tag/Category suggestion buttons */
.recipe-form-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.recipe-form-suggestion-btn {
    display: inline-block;
    padding: 2px 10px;
    background: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.6;
}

.recipe-form-suggestion-btn:hover {
    background: #495057;
    color: #fff;
    border-color: #495057;
}

/* Buttons */
.recipe-form-btn-primary,
.recipe-form-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    border: none;
}

.recipe-form-btn-primary {
    background: linear-gradient(135deg, #D4745C 0%, #D4A574 100%);
    color: #fff;
    min-width: 200px;
}

.recipe-form-btn-primary:hover {
    background: linear-gradient(135deg, #C66348 0%, #C99560 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 116, 92, 0.3);
}

.recipe-form-btn-secondary {
    background: #f0f0f0;
    color: #333;
    border: 2px solid #e0e0e0;
}

.recipe-form-btn-secondary:hover {
    background: #e8e8e8;
    border-color: #d0d0d0;
}

/* Actions */
.recipe-form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .recipe-form-enhanced {
        padding: 1.5rem;
        margin: 0 1rem;
    }

    .recipe-form-row-half {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .recipe-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .recipe-form-btn-primary,
    .recipe-form-btn-secondary {
        width: 100%;
    }

    .recipe-form-actions {
        flex-direction: column;
    }

    .recipe-form-divider span {
        font-size: 1rem;
        padding: 0 1rem;
    }
}

@media screen and (max-width: 480px) {
    .recipe-form-enhanced {
        padding: 1rem;
        border-radius: 8px;
    }

    .recipe-form-input,
    .recipe-form-textarea,
    .recipe-form-select {
        padding: 0.75rem;
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* ============================================
   RECIPE TAG STYLES (V1.29)
   ============================================ */

/* Tag pills (used in recipe display and tag results) */
.recipe-tag-pill {
    display: inline-block;
    padding: 3px 12px;
    margin: 2px 4px 2px 0;
    background: #e9ecef;
    color: #495057;
    border-radius: 20px;
    font-size: 0.85em;
    line-height: 1.6;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

a.recipe-tag-pill:hover,
a.recipe-tag-pill-link:hover {
    background: #495057;
    color: #fff;
    text-decoration: none;
}

.recipe-tag-pill-active,
a.recipe-tag-pill-active {
    background: var(--recipe-primary, #D4745C);
    color: #fff;
}

/* Tags display in recipe output */
.recipe-tags-display {
    margin: 15px 0;
    padding: 10px 0;
    border-top: 1px solid #e9ecef;
}

.recipe-tags-label {
    font-weight: 600;
    color: #6c757d;
    margin-right: 6px;
}

/* [recipe_tags] shortcode container */
.recipe-tags-container {
    margin: 20px 0;
}

/* Tag cloud */
.recipe-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 20px;
}

.recipe-tag-cloud-item {
    display: inline-block;
    padding: 4px 14px;
    background: #fff;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.recipe-tag-cloud-item:hover {
    background: #495057;
    color: #fff;
    border-color: #495057;
    text-decoration: none;
}

.recipe-tag-cloud-item.recipe-tag-active {
    background: var(--recipe-primary, #D4745C);
    color: #fff;
    border-color: var(--recipe-primary, #D4745C);
}

/* Tag list */
.recipe-tag-list {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 20px;
}

.recipe-tag-list-item {
    padding: 6px 0;
    border-bottom: 1px solid #e9ecef;
}

.recipe-tag-list-item:last-child {
    border-bottom: none;
}

.recipe-tag-list-item a {
    text-decoration: none;
    font-weight: 500;
}

.recipe-tag-list-item.recipe-tag-active a {
    color: var(--recipe-primary, #D4745C);
    font-weight: 700;
}

/* Tag pills display (shortcode) */
.recipe-tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 20px;
}

a.recipe-tag-pill-link {
    display: inline-block;
    padding: 5px 16px;
    background: #e9ecef;
    color: #495057;
    border-radius: 20px;
    font-size: 0.9em;
    text-decoration: none;
    transition: all 0.2s;
}

a.recipe-tag-pill-link.recipe-tag-active {
    background: var(--recipe-primary, #D4745C);
    color: #fff;
}

/* Tag count badge */
.recipe-tag-count {
    font-size: 0.8em;
    opacity: 0.7;
    margin-left: 3px;
}

/* Show All link */
.recipe-tag-show-all {
    display: inline-block;
    padding: 4px 14px;
    background: #dc3545;
    color: #fff;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.85em;
    transition: opacity 0.2s;
}

.recipe-tag-show-all:hover {
    opacity: 0.85;
    color: #fff;
    text-decoration: none;
}

/* Tag results */
.recipe-tag-results {
    margin-top: 25px;
}

.recipe-tag-results-heading {
    font-size: 1.3em;
    margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}

.recipe-tag-active-name {
    color: var(--recipe-primary, #D4745C);
    font-style: italic;
}

.recipe-tag-results-count {
    color: #6c757d;
    font-weight: normal;
    font-size: 0.85em;
}

/* Tag result items */
.recipe-tag-result-item {
    padding: 18px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: box-shadow 0.2s;
}

.recipe-tag-result-item:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.recipe-tag-result-title {
    margin: 0 0 6px;
    font-size: 1.15em;
}

.recipe-tag-result-title a {
    text-decoration: none;
    color: #2c3e50;
}

.recipe-tag-result-title a:hover {
    color: var(--recipe-primary, #D4745C);
}

.recipe-tag-result-about {
    margin: 0 0 8px;
    color: #6c757d;
    line-height: 1.5;
}

.recipe-tag-result-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #868e96;
}

.recipe-tag-result-tags {
    margin-top: 8px;
}

/* Tag grid (multi-column results) */
.recipe-tag-grid {
    display: grid;
    gap: 15px;
}

.recipe-tag-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.recipe-tag-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.recipe-tag-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* No tags message */
.recipe-no-tags {
    padding: 30px;
    text-align: center;
    color: #6c757d;
    background: #f8f9fa;
    border-radius: 8px;
}

/* Tag responsive */
@media (max-width: 768px) {
    .recipe-tag-grid-2,
    .recipe-tag-grid-3,
    .recipe-tag-grid-4 {
        grid-template-columns: 1fr;
    }

    .recipe-tag-cloud {
        gap: 6px;
        padding: 15px;
    }
}

/* Tag print styles */
@media print {
    .recipe-tags-display {
        margin: 8px 0;
    }

    .recipe-tag-pill {
        border: 1px solid #ccc;
        background: #f5f5f5;
        color: #000;
    }

    .recipe-tags-container {
        display: none;
    }
}

/* ==========================================
   Category Styles
   ========================================== */

/* Category display on recipe pages */
.recipe-categories-display {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 10px 0;
}

.recipe-category-pill {
    display: inline-block;
    padding: 3px 12px;
    background: var(--recipe-secondary, #5b9bd5);
    color: #fff;
    border-radius: 4px;
    font-size: 0.82em;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: capitalize;
}

.recipe-categories-label {
    font-weight: 600;
    color: #6c757d;
    margin-right: 6px;
}

/* [recipe_categories] shortcode container */
.recipe-categories-container {
    margin: 20px 0;
}

/* Category cloud */
.recipe-category-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 20px;
    background: #f0f4f8;
    border-radius: 8px;
    margin-bottom: 20px;
}

.recipe-category-cloud-item {
    display: inline-block;
    padding: 4px 14px;
    background: #fff;
    color: #495057;
    border: 1px solid #c8d6e5;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
    font-weight: 500;
    text-transform: capitalize;
}

.recipe-category-cloud-item:hover {
    background: var(--recipe-secondary, #5b9bd5);
    color: #fff;
    border-color: var(--recipe-secondary, #5b9bd5);
    text-decoration: none;
}

.recipe-category-cloud-item.recipe-category-active {
    background: var(--recipe-secondary, #5b9bd5);
    color: #fff;
    border-color: var(--recipe-secondary, #5b9bd5);
}

/* Category list */
.recipe-category-list {
    padding: 15px;
    background: #f0f4f8;
    border-radius: 8px;
    margin-bottom: 20px;
}

.recipe-category-list-item {
    padding: 6px 0;
    border-bottom: 1px solid #d6e0eb;
    text-transform: capitalize;
}

.recipe-category-list-item:last-child {
    border-bottom: none;
}

.recipe-category-list-item a {
    text-decoration: none;
    font-weight: 500;
}

.recipe-category-list-item.recipe-category-active a {
    color: var(--recipe-secondary, #5b9bd5);
    font-weight: 700;
}

/* Category pills display (shortcode) */
.recipe-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 15px;
    background: #f0f4f8;
    border-radius: 8px;
    margin-bottom: 20px;
}

a.recipe-category-pill-link {
    display: inline-block;
    padding: 5px 16px;
    background: #d6e0eb;
    color: #2c3e50;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 500;
    text-decoration: none;
    text-transform: capitalize;
    transition: all 0.2s;
}

a.recipe-category-pill-link:hover {
    background: var(--recipe-secondary, #5b9bd5);
    color: #fff;
}

a.recipe-category-pill-link.recipe-category-active {
    background: var(--recipe-secondary, #5b9bd5);
    color: #fff;
}

/* Category count badge */
.recipe-category-count {
    font-size: 0.8em;
    opacity: 0.7;
    margin-left: 3px;
}

/* Show All link */
.recipe-category-show-all {
    display: inline-block;
    padding: 4px 14px;
    background: #dc3545;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85em;
    transition: opacity 0.2s;
}

.recipe-category-show-all:hover {
    opacity: 0.85;
    color: #fff;
    text-decoration: none;
}

/* Category results */
.recipe-category-results {
    margin-top: 25px;
}

.recipe-category-results-heading {
    font-size: 1.3em;
    margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #d6e0eb;
}

.recipe-category-active-name {
    color: var(--recipe-secondary, #5b9bd5);
    font-style: italic;
    text-transform: capitalize;
}

.recipe-category-results-count {
    color: #6c757d;
    font-weight: normal;
    font-size: 0.85em;
}

/* Category result items */
.recipe-category-result-item {
    padding: 18px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #d6e0eb;
    border-radius: 8px;
    transition: box-shadow 0.2s;
}

.recipe-category-result-item:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.recipe-category-result-title {
    margin: 0 0 6px;
    font-size: 1.15em;
}

.recipe-category-result-title a {
    text-decoration: none;
    color: #2c3e50;
}

.recipe-category-result-title a:hover {
    color: var(--recipe-secondary, #5b9bd5);
}

.recipe-category-result-about {
    margin: 0 0 8px;
    color: #6c757d;
    line-height: 1.5;
}

.recipe-category-result-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #868e96;
}

.recipe-category-result-cats {
    margin-top: 8px;
}

/* Category grid (multi-column results) */
.recipe-category-grid {
    display: grid;
    gap: 15px;
}

.recipe-category-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.recipe-category-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.recipe-category-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Active category pill in result items */
.recipe-category-pill-active {
    background: var(--recipe-secondary, #5b9bd5) !important;
    color: #fff !important;
}

/* No categories message */
.recipe-no-categories {
    padding: 30px;
    text-align: center;
    color: #6c757d;
    background: #f0f4f8;
    border-radius: 8px;
}

/* Category responsive */
@media (max-width: 768px) {
    .recipe-category-grid-2,
    .recipe-category-grid-3,
    .recipe-category-grid-4 {
        grid-template-columns: 1fr;
    }

    .recipe-category-cloud {
        gap: 6px;
        padding: 15px;
    }
}

/* Category print styles */
@media print {
    .recipe-categories-display {
        margin: 8px 0;
    }

    .recipe-category-pill {
        border: 1px solid #999;
        background: #e9ecef;
        color: #000;
    }

    .recipe-categories-container {
        display: none;
    }
}