/*
Theme Name: Lady's Universe
Theme URI: https://ladysuniverse.com/
Author: Antigravity WP Architect
Author URI: https://ladysuniverse.com/
Description: Custom WordPress theme based on "Nature Distilled" design system. Features Bento Block modularity, intentional asymmetry, and a refined editorial aesthetic.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ladys-universe
Tags: custom-colors, custom-menu, featured-images, responsive-layout
*/

/* ==========================================================================
   Nature Distilled - Core Design Tokens
   ========================================================================== */
:root {
    /* Colors - Surface Hierarchy */
    --color-surface: #fbf9f4;
    --color-surface-container-low: #f5f3ee;
    --color-surface-container-high: #eae8e3;
    --color-surface-container-lowest: #ffffff;
    --color-surface-variant: #e4e2dd;
    --color-surface-bright: #fbf9f4;

    /* Colors - Accents */
    --color-primary: #91472a;
    --color-primary-container: #af5f40;
    --color-on-primary: #ffffff;
    --color-secondary: #805533;
    --color-on-secondary: #ffffff;
    
    /* Colors - Text & Lines */
    --color-on-surface: #1b1c19;
    --color-on-surface-variant: #54433d;
    --color-outline: #87736c;
    --color-outline-variant: #dac1b9;

    /* Shadows (Tonal Layering) */
    --shadow-ambient: 0px 12px 32px rgba(27, 28, 25, 0.06);
    --shadow-float: 0px 4px 12px rgba(27, 28, 25, 0.04);

    /* Radii */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;

    /* Typography */
    --font-display: 'Newsreader', serif;
    --font-functional: 'Manrope', sans-serif;
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    font-family: var(--font-functional);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Typography Scale */
h1, h2, h3, h4, h5, h6, .font-headline {
    font-family: var(--font-display);
    margin: 0;
    font-weight: normal;
}

.text-display-lg {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 0.9;
    font-style: italic;
}

.text-headline-lg {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
}

.text-title-md {
    font-size: 1.125rem;
    letter-spacing: 0.02em;
    font-family: var(--font-functional);
}

.text-body-lg {
    font-size: 1rem;
    line-height: 1.6;
}

.text-label-md {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Layout & Utilities
   ========================================================================== */
.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* The Ghost Border Fallback */
.border-ghost {
    border: 1px solid rgba(218, 193, 185, 0.15); /* outline-variant at 15% */
}

/* Hello Bar */
.hello-bar {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-container));
    color: var(--color-on-primary);
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.75rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    backdrop-filter: blur(20px);
}

/* Glassmorphism Header */
.site-header {
    background-color: rgba(251, 249, 244, 0.8); /* surface */
    backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-ambient);
    padding: 1.5rem 0;
    margin-top: 40px; /* Space for Hello Bar */
}

/* Bento Block Cards */
.bento-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-surface-container-high);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    display: flex;
    flex-direction: column;
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-ambient);
}

.bento-image-container {
    height: 60%;
    min-height: 250px;
    position: relative;
    overflow: hidden;
}

.bento-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

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

.bento-content {
    background-color: var(--color-surface-container-lowest);
    padding: 1.5rem; /* Strict 24px internal padding */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Single Recipe WP Recipe Maker Override Context */
.recipe-single-container {
    background-color: var(--color-surface-container-lowest);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: var(--shadow-ambient);
    margin-top: -3rem; /* Intentional asymmetry / overlap */
    position: relative;
    z-index: 5;
}

.recipe-hero-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 60vh;
    min-height: 400px;
    margin-bottom: 2rem;
}

.recipe-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    grid-auto-rows: 280px;
}

/* Base Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-container));
    color: var(--color-on-primary);
    border-radius: var(--radius-full);
    padding: 0.75rem 2rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.15s ease, opacity 0.15s ease;
}

.btn-primary:hover {
    box-shadow: var(--shadow-ambient);
}

.btn-primary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    box-shadow: var(--shadow-ambient);
}

.btn-primary:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* Mobile Nav - Bottom Bar */
.mobile-nav-bar {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    border-radius: var(--radius-full);
    background-color: rgba(251, 249, 244, 0.8);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-ambient);
    z-index: 50;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1.5rem;
    border: 1px solid rgba(218, 193, 185, 0.15);
}

@media (min-width: 768px) {
    .mobile-nav-bar {
        display: none;
    }
}

/* ==========================================================================
   Comments
   ========================================================================== */
#comments {
    max-width: 720px;
    margin: 4rem auto 0;
    padding: 3rem 0;
    border-top: 1px solid rgba(218, 193, 185, 0.3);
}

.comments-title,
#reply-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--color-on-surface);
    margin-bottom: 2rem;
    font-weight: normal;
}

/* Individual comment */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
}

.comment-list .comment {
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(218, 193, 185, 0.2);
}

.comment-author .fn {
    font-family: var(--font-functional);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
    letter-spacing: 0.02em;
}

.comment-author img {
    border-radius: 9999px;
    margin-right: 0.75rem;
}

.comment-metadata {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    margin-top: 0.25rem;
}

.comment-metadata a {
    color: var(--color-on-surface-variant);
}

.comment-content p {
    font-size: 0.9375rem;
    color: var(--color-on-surface-variant);
    line-height: 1.7;
    margin-top: 0.75rem;
}

/* Comment form */
#respond {
    background-color: var(--color-surface-container-lowest);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    border: 1px solid rgba(218, 193, 185, 0.2);
}

.comment-form p {
    margin-bottom: 1.25rem;
}

.comment-form label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    margin-bottom: 0.5rem;
    font-family: var(--font-functional);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    background-color: var(--color-surface-container-low);
    border: none;
    border-bottom: 2px solid rgba(218, 193, 185, 0.5);
    border-radius: 0;
    padding: 0.75rem 0;
    font-family: var(--font-functional);
    font-size: 0.9375rem;
    color: var(--color-on-surface);
    transition: border-color 0.2s ease;
    outline: none;
    resize: vertical;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus {
    border-bottom-color: var(--color-primary);
}

.comment-form textarea {
    min-height: 140px;
    background-color: transparent;
}

.comment-form .form-submit {
    margin-top: 1.5rem;
}

.comment-form input[type="submit"],
#submit {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-container));
    color: var(--color-on-primary);
    border: none;
    border-radius: var(--radius-full);
    padding: 0.75rem 2.5rem;
    font-family: var(--font-functional);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.comment-form input[type="submit"]:hover,
#submit:hover {
    opacity: 0.88;
}

.logged-in-as,
.comment-notes {
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    margin-bottom: 1.5rem;
}

.logged-in-as a,
.comment-notes a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   WP Recipe Maker — Nature Distilled Theme Overrides
   ========================================================================== */

/* Card wrapper */
.wprm-recipe-container {
    background-color: var(--color-surface-container-low) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid rgba(218, 193, 185, 0.2) !important;
    box-shadow: var(--shadow-ambient) !important;
    font-family: var(--font-functional) !important;
    overflow: hidden !important;
    margin: 2.5rem 0 !important;
    padding: 0 !important;
}

/* Recipe image */
.wprm-recipe-image img {
    width: 100% !important;
    height: 320px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
}

/* Recipe name / title */
.wprm-recipe-name {
    font-family: var(--font-display) !important;
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    font-weight: normal !important;
    color: var(--color-on-surface) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.5rem !important;
}

/* Star ratings — replace olive with brand primary */
.wprm-recipe-rating .wprm-rating-star svg,
.wprm-rating-star-full svg {
    fill: var(--color-primary) !important;
    color: var(--color-primary) !important;
}
.wprm-recipe-rating-average,
.wprm-recipe-rating-count {
    color: var(--color-on-surface-variant) !important;
    font-size: 0.8125rem !important;
    font-family: var(--font-functional) !important;
}

/* Print Recipe button */
.wprm-recipe-print-button,
.wprm-print-recipe-button,
.wprm-recipe-block-container-columns a.wprm-recipe-print-button {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-container)) !important;
    color: var(--color-on-primary) !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    padding: 0.65rem 1.75rem !important;
    font-family: var(--font-functional) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
}
.wprm-recipe-print-button:hover {
    opacity: 0.88 !important;
}

/* Section headers (Ingredients, Instructions etc.) */
.wprm-recipe-block-container h3,
.wprm-recipe-ingredients-container h3,
.wprm-recipe-instructions-container h3,
.wprm-recipe-block-header,
h3.wprm-recipe-header {
    font-family: var(--font-display) !important;
    font-size: 1.25rem !important;
    font-weight: normal !important;
    color: var(--color-on-surface) !important;
    border-bottom: 1px solid rgba(218, 193, 185, 0.3) !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1rem !important;
}

/* Tab / icon navigation block */
.wprm-recipe-block-container-columns {
    background-color: var(--color-surface-container-lowest) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(218, 193, 185, 0.2) !important;
    padding: 0.5rem !important;
    margin-bottom: 1.5rem !important;
}
.wprm-recipe-block-container-column {
    background-color: transparent !important;
    color: var(--color-on-surface-variant) !important;
}
.wprm-recipe-block-container-column.wprm-recipe-block-container-column--active,
.wprm-recipe-block-container-column:hover {
    color: var(--color-primary) !important;
}

/* Individual ingredient rows */
.wprm-recipe-ingredient {
    background-color: var(--color-surface-container-lowest) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(218, 193, 185, 0.2) !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.9375rem !important;
    color: var(--color-on-surface) !important;
    transition: background-color 0.2s ease !important;
}
.wprm-recipe-ingredient:hover {
    background-color: var(--color-surface-container-low) !important;
}

/* Ingredient amount + unit */
.wprm-recipe-ingredient-amount,
.wprm-recipe-ingredient-unit {
    font-weight: 600 !important;
    color: var(--color-primary) !important;
}

/* Instruction steps */
.wprm-recipe-instruction-text {
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
    color: var(--color-on-surface-variant) !important;
}
.wprm-recipe-instruction-text strong {
    color: var(--color-on-surface) !important;
}

/* Times (prep, cook, total) */
.wprm-recipe-time-container {
    background-color: var(--color-surface-container-lowest) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
    color: var(--color-on-surface-variant) !important;
}
.wprm-recipe-time {
    color: var(--color-primary) !important;
    font-weight: 600 !important;
}

/* Servings adjuster */
.wprm-recipe-servings-container {
    color: var(--color-on-surface-variant) !important;
    font-size: 0.875rem !important;
}
.wprm-recipe-servings-change {
    background-color: var(--color-surface-container-high) !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    color: var(--color-primary) !important;
    width: 28px !important;
    height: 28px !important;
    cursor: pointer !important;
}

/* Nutrition table */
.wprm-nutrition-label-container {
    background-color: var(--color-surface-container-low) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(218, 193, 185, 0.2) !important;
    font-family: var(--font-functional) !important;
    font-size: 0.875rem !important;
    color: var(--color-on-surface) !important;
}

/* Notes */
.wprm-recipe-notes-container {
    background-color: var(--color-surface-container-lowest) !important;
    border-left: 3px solid var(--color-primary) !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.9rem !important;
    color: var(--color-on-surface-variant) !important;
    margin-top: 1.5rem !important;
}