/*
Theme Name: Peace of Gut
Description: The Curated Sanctuary - Low FODMAP & Gut Health
Author: My WP Theme Edits
*/

/* ==========================================================================
   1. Base Typography & Core Alignment
   ========================================================================== */
body { 
    font-family: 'Manrope', sans-serif; 
    background-color: #fcf9f5; /* surface */
    color: #32332e; /* on-surface, strictly avoiding pure black */
    text-align: left; /* strictly left-aligned long-form */
}

.font-serif { 
    font-family: 'Newsreader', serif; 
}

.material-symbols-outlined { 
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; 
}

/* ==========================================================================
   2. Front Page: Live Search UI & Status Chips
   ========================================================================== */
#searchSuggestions { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    z-index: 50; 
    margin-top: 0.5rem; 
    background: #ffffff; /* surface-container-lowest */
    border-radius: 1.5rem; 
    box-shadow: 0 32px 48px rgba(50, 51, 46, 0.05); /* Ambient Shadow */
    border: 1px solid rgba(179, 178, 172, 0.15); /* Ghost Border */
    overflow: hidden; 
}

#searchSuggestions.is-active { 
    display: block; 
}

.suggestion-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1.25rem 1.5rem; 
    transition: background 0.2s; 
}

/* Layering: Hover states shift up to Level 1 surface */
.suggestion-item.is-selected, 
.suggestion-item:hover { 
    background-color: #f6f3ee; /* surface-container-low */
}

#resultsArea { 
    display: none; 
}

#resultsArea.is-active { 
    display: block; 
    animation: fadeIn 0.5s ease; 
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.loading-spinner { 
    border: 3px solid rgba(179, 178, 172, 0.15); /* Ghost Border base */
    border-radius: 50%; 
    border-top: 3px solid #3b6854; /* Primary spinner */
    width: 24px; 
    height: 24px; 
    animation: spin 1s linear infinite; 
    display: none; 
    position: absolute; 
    right: 1.5rem; 
    top: 50%; 
    transform: translateY(-50%); 
}

.loading .loading-spinner { 
    display: block; 
}

@keyframes spin { 
    0% { transform: translateY(-50%) rotate(0deg); } 
    100% { transform: translateY(-50%) rotate(360deg); } 
}

/* ==========================================================================
   3. Blog & Archives: Pagination
   ========================================================================== */
.wp-pagination { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 0.5rem; 
    flex-wrap: wrap; 
    margin-top: 4rem; 
}

/* Pill shapes, avoiding 1px solid borders */
.wp-pagination a, 
.wp-pagination span.current { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-width: 2.75rem; 
    height: 2.75rem; 
    padding: 0 1rem; 
    border-radius: 9999px; /* full pill shape */
    font-weight: 700; 
    font-size: 0.875rem; 
    transition: all 0.2s ease; 
}

.wp-pagination a { 
    background-color: #eae8e2; /* surface-container-high */
    color: #5f5f5a; /* on-surface-variant */
    text-decoration: none; 
    border: none; /* No-Line Rule */
}

.wp-pagination a:hover { 
    background-color: #bcedd4; /* primary-container */
    color: #2f5c48; /* primary-dim */
    transform: translateY(-2px); 
}

.wp-pagination span.current { 
    background-color: #3b6854; /* Primary */
    color: #ffffff; 
    box-shadow: 0 32px 48px rgba(50, 51, 46, 0.05); /* Ambient shadow */
}

/* Ghost borders for Prev/Next buttons to sit quietly in the UI */
.wp-pagination .next, 
.wp-pagination .prev { 
    background-color: transparent; 
    border: 1px solid rgba(179, 178, 172, 0.15); /* Ghost Border */
}

.wp-pagination .next:hover, 
.wp-pagination .prev:hover { 
    border-color: rgba(59, 104, 84, 0.2); 
    background-color: #f6f3ee; 
    color: #3b6854; 
}

.wp-pagination span.dots { 
    color: #b3b2ac; 
    font-weight: bold; 
}

/* ==========================================================================
   4. Editorial Content: Organic Hierarchy (Pages & Posts)
   ========================================================================== */
.page-content {
    text-align: left; /* Strict enforcement of left-aligned body */
}

/* Massive scale difference between headings and body text */
.page-content h2 { 
    font-family: 'Newsreader', serif; 
    font-size: 2.5rem; 
    color: #32332e; 
    margin-top: 3.5rem; 
    margin-bottom: 1.5rem; 
    line-height: 1.2; 
}

.page-content h3 { 
    font-family: 'Newsreader', serif; 
    font-size: 1.75rem; 
    color: #32332e; 
    margin-top: 2.5rem; 
    margin-bottom: 1.25rem; 
    line-height: 1.3; 
}

.page-content h4 { 
    font-weight: 700; 
    font-size: 1.25rem; 
    color: #32332e; 
    margin-top: 2rem; 
    margin-bottom: 1rem; 
}

.page-content p { 
    margin-bottom: 1.75rem; 
    color: #32332e; /* on-surface */
    font-family: 'Manrope', sans-serif;
}

/* No-Line Rule: Replacing strict borders on lists with whitespace and custom marks */
.page-content ul { 
    margin-bottom: 2rem; 
    padding-left: 1.5rem; 
    list-style-type: none; 
    color: #32332e; 
}

.page-content ol { 
    margin-bottom: 2rem; 
    padding-left: 1.5rem; 
    list-style-type: decimal; 
    color: #32332e; 
}

.page-content ul li {
    position: relative;
    margin-bottom: 1rem; /* Generous negative space between items */
}

.page-content ul li::before {
    content: "•";
    color: #3b6854; /* primary */
    position: absolute;
    left: -1.25rem;
    font-size: 1.5rem;
    line-height: 1;
}

.page-content li::marker { 
    color: #3b6854; /* Primary */
    font-weight: 700;
}

.page-content a { 
    color: #3b6854; 
    font-weight: 700; 
    text-decoration: underline; 
    text-decoration-color: #bcedd4; 
    text-decoration-thickness: 2px; 
    text-underline-offset: 4px; 
    transition: all 0.2s ease; 
}

.page-content a:hover { 
    color: #2f5c48; 
    text-decoration-color: #3b6854; 
}

/* Soft rounded Ghost Border box instead of heavy left-borders */
.page-content blockquote { 
    padding: 2rem; 
    background: #f6f3ee; /* surface-container-low */
    border-radius: 1.5rem; 
    font-style: italic; 
    color: #32332e; 
    margin: 3rem 0; 
    border: 1px solid rgba(179, 178, 172, 0.15); /* Ghost Border */
}

.page-content blockquote p:last-child { 
    margin-bottom: 0; 
}

.page-content img { 
    border-radius: 1.5rem; 
    margin: 3rem 0; 
    height: auto; 
    max-width: 100%; 
    box-shadow: 0 32px 48px rgba(50, 51, 46, 0.05); /* Ambient Shadow */
    border: 1px solid rgba(179, 178, 172, 0.15); /* Ghost Border */
}

.page-content figure { 
    margin: 3rem 0; 
}

.page-content figcaption { 
    text-align: center; 
    font-size: 0.875rem; 
    color: #b3b2ac; 
    margin-top: 1rem; 
}

/* ==========================================================================
   5. Form Inputs & Interactions (WPForms Overrides)
   ========================================================================== */
div.wpforms-container-full .wpforms-form .wpforms-field-label {
    font-weight: 700 !important; 
    color: #32332e !important; 
    margin-bottom: 0.75rem !important;
    font-family: 'Manrope', sans-serif !important;
}

/* Curated Sanctuary Input State: Ghost border with Level 2 surface bg */
div.wpforms-container-full .wpforms-form input[type=text],
div.wpforms-container-full .wpforms-form input[type=email],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
    width: 100% !important; 
    padding: 1.25rem 1.5rem !important; 
    font-size: 1rem !important; 
    border: 1px solid rgba(179, 178, 172, 0.15) !important; /* Ghost Border */
    border-radius: 1.5rem !important; /* xl radius */
    background: #ffffff !important; /* surface-container-lowest */
    font-family: 'Manrope', sans-serif !important; 
    transition: all 0.3s ease !important;
    color: #32332e !important;
    box-sizing: border-box !important;
    box-shadow: none !important; /* Strips harsh default shadows */
}

/* Focus State: Ghost border shifts to primary 20% + Ambient Shadow */
div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form select:focus,
div.wpforms-container-full .wpforms-form textarea:focus {
    border-color: rgba(59, 104, 84, 0.2) !important; 
    box-shadow: 0 32px 48px rgba(50, 51, 46, 0.05) !important; 
    outline: none !important;
}

/* Hero CTA Button Styling */
div.wpforms-container-full .wpforms-form button[type=submit] {
    width: 100% !important;
    background: linear-gradient(135deg, #3b6854, #2f5c48) !important; /* Primary to Primary-dim */
    color: #ffffff !important;
    padding: 1.25rem 2.5rem !important;
    border-radius: 9999px !important; /* Full roundedness */
    font-weight: 700 !important;
    border: none !important;
    font-size: 1rem !important;
    font-family: 'Manrope', sans-serif !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2) !important; /* Subtle top-down inner glow */
}

div.wpforms-container-full .wpforms-form button[type=submit]:hover {
    opacity: 0.9 !important;
}

@media (min-width: 768px) {
    div.wpforms-container-full .wpforms-form button[type=submit] {
        width: auto !important;
        min-width: 200px !important;
    }
}