/*
Theme Name:   Freshlanta Child
Description:  Custom hardcoded Neo-Brutalist food directory for Freshlanta.com
Author:       Thomas Jackson
Template:     generatepress
Version:      2.0.0
*/

/* ==========================================================================
   1. COLOR PALETTE & GLOBAL VARIABLES (From Freshlanta Logo)
   ========================================================================== */
:root {
    --fresh-orange: #ef7d43; /* The Peach */
    --fresh-green:  #6c8d55; /* The Leaves */
    --fresh-yellow: #f8c93e; /* Accent Yellow for Claim/Sponsor */
    --fresh-cream:  #f4f1ea; /* Warm off-white background */
    --fresh-black:  #111111; /* Ink Black */
    --fresh-white:  #ffffff; /* Pure White for cards */
    
    --brutal-border: 4px solid var(--fresh-black);
    --brutal-shadow: 6px 6px 0px var(--fresh-black);
    --brutal-shadow-hover: 10px 10px 0px var(--fresh-black);
}

/* Global Background Setup */
body {
    background-color: var(--fresh-cream) !important;
    color: var(--fresh-black);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--fresh-black);
    font-weight: 900;
    letter-spacing: -0.5px;
}

/* ==========================================================================
   2. DIRECTORY GRID & LAYOUT
   ========================================================================== */
.directory-archive .restaurant-grid {
    display: grid;
    /* Fluid Responsive Grid: Stacks on mobile, expands on desktop */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
    margin-top: 30px;
}

/* ==========================================================================
   3. RESTAURANT CARDS (Neo-Brutalist Style)
   ========================================================================== */
.restaurant-card {
    background: var(--fresh-white);
    border: var(--brutal-border);
    padding: 20px;
    box-shadow: var(--brutal-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative; 
}

.restaurant-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: var(--brutal-shadow-hover);
}

.restaurant-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border: var(--brutal-border);
    display: block;
    margin-bottom: 20px;
    background: var(--fresh-cream);
}

.restaurant-card h2 {
    font-size: 1.8rem;
    margin: 15px 0 10px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
}

/* ==========================================================================
   4. TACTILE BUTTONS & TOUCH TARGETS
   ========================================================================== */
.restaurant-card .button,
a.view-listing,
button[type="submit"] {
    display: block;
    width: 100%;
    padding: 16px 0; 
    background: var(--fresh-orange);
    color: var(--fresh-black);
    text-align: center;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 900;
    border: var(--brutal-border);
    box-shadow: var(--brutal-shadow);
    text-decoration: none;
    transition: background 0.2s, transform 0.1s, box-shadow 0.1s;
    box-sizing: border-box;
    cursor: pointer;
}

.restaurant-card .button:hover,
a.view-listing:hover,
button[type="submit"]:hover {
    background: var(--fresh-green);
    color: var(--fresh-white);
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px var(--fresh-black);
}

.restaurant-card .button:active,
a.view-listing:active,
button[type="submit"]:active {
    transform: translate(4px, 4px);
    box-shadow: 2px 2px 0px var(--fresh-black);
}

/* ==========================================================================
   5. BADGES & TAGS
   ========================================================================== */
.featured-badge {
    position: absolute; 
    top: 12px; 
    right: 12px; 
    background: var(--fresh-yellow); 
    color: var(--fresh-black); 
    padding: 6px 14px; 
    font-weight: 900; 
    font-size: 0.85em; 
    text-transform: uppercase; 
    border: var(--brutal-border); 
    z-index: 10;
}

.cuisine-tags {
    margin-top: 15px;
}

.cuisine-tags a {
    background: var(--fresh-white);
    padding: 6px 14px;
    font-weight: 900;
    text-transform: uppercase;
    border: 3px solid var(--fresh-black);
    box-shadow: 3px 3px 0px var(--fresh-black);
    font-size: 0.85em;
    text-decoration: none;
    color: var(--fresh-black);
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.cuisine-tags a:hover {
    background: var(--fresh-yellow);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px var(--fresh-black);
}

/* ==========================================================================
   6. FORMS & INPUTS (Filters)
   ========================================================================== */
.directory-filters {
    background: var(--fresh-white) !important;
    border: var(--brutal-border) !important;
    box-shadow: var(--brutal-shadow) !important;
    padding: 25px !important;
}

input[type="search"],
input[type="text"],
input[type="url"],
input[type="time"],
textarea,
select,
.cuisine-dropdown {
    width: 100%;
    padding: 14px;
    border: 3px solid var(--fresh-black) !important;
    font-weight: 900;
    font-size: 1rem;
    background-color: var(--fresh-white);
    color: var(--fresh-black);
    border-radius: 0 !important;
    box-sizing: border-box;
    transition: background 0.2s, box-shadow 0.2s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    background-color: var(--fresh-cream);
    box-shadow: 4px 4px 0px var(--fresh-orange) !important;
}

/* ==========================================================================
   7. SINGLE LISTING STYLES
   ========================================================================== */
.listing-sidebar {
    background: var(--fresh-white) !important;
    border: var(--brutal-border) !important;
    padding: 30px !important;
    box-shadow: var(--brutal-shadow) !important;
}

.status-badge.open {
    background: var(--fresh-green) !important;
    color: var(--fresh-white) !important;
}

.status-badge.closed {
    background: var(--fresh-orange) !important; 
    color: var(--fresh-black) !important;
}

/* ==========================================================================
   8. DIRECTORY PAGINATION
   ========================================================================== */
.directory-pagination .nav-links {
    display: inline-flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 50px;
    margin-bottom: 50px;
}

.directory-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0 15px;
    background: var(--fresh-white);
    border: 3px solid var(--fresh-black);
    box-shadow: 4px 4px 0px var(--fresh-black);
    color: var(--fresh-black);
    text-decoration: none;
    font-weight: 900;
    font-size: 1.1rem;
    transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
}

.directory-pagination .page-numbers:hover {
    background: var(--fresh-orange);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--fresh-black);
}

.directory-pagination .page-numbers:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--fresh-black);
}

.directory-pagination .page-numbers.current {
    background: var(--fresh-black);
    color: var(--fresh-white);
    box-shadow: 4px 4px 0px var(--fresh-orange);
}

/* =======================================================
   16. SINGLE PAGE CENTERING & BUTTON COLOR FIX
======================================================= */

/* 1. Force the Single Restaurant page to center itself */
#primary.directory-single {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    float: none !important;
}

/* =======================================================
   17. FAVORITE BUTTON TOGGLE STYLES
======================================================= */

/* 1. Unsaved State (Freshlanta Peach) */
.brutalist-button.favorite-btn.unsaved {
    background-color: #ef7d43 !important; 
    color: #111111 !important; /* Black text for readability against the peach */
    border: 3px solid #111111 !important;
    box-shadow: 6px 6px 0px #ef7d43 !important; 
}
.brutalist-button.favorite-btn.unsaved:active {
    box-shadow: 2px 2px 0px #ef7d43 !important;
}

/* 2. Saved State (Freshlanta Leaf) */
.brutalist-button.favorite-btn.is-saved {
    background-color: #6c8d55 !important; 
    color: #ffffff !important; /* White text for contrast against the dark green */
    border: 3px solid #111111 !important;
    box-shadow: 6px 6px 0px #6c8d55 !important; 
}
.brutalist-button.favorite-btn.is-saved:active {
    box-shadow: 2px 2px 0px #6c8d55 !important;
}

/* =======================================================
   18. MOBILE & TABLET PADDING FIX FOR SINGLE LISTINGS (FIXED)
======================================================= */
@media (max-width: 1200px) {
    /* 1. Add padding ONLY to the single restaurant template */
    #primary.directory-single {
        padding-left: 25px !important;
        padding-right: 25px !important;
        box-sizing: border-box !important;
    }
    
    /* 2. Fix the image overflow ONLY on the single page, ignoring the main page cards */
    .directory-single .main-thumbnail {
        max-width: 100% !important;
        height: auto !important;
    }
}