/* ==========================================================================
   PAGE FORMATTING & GUTENBERG BLOCKS
   ========================================================================== */

/* 1. Override Gutenberg Table Hardcoded Colors */
.entry-content .wp-block-table table {
    background-color: transparent !important;
    color: var(--text-color) !important;
    border-collapse: collapse;
    width: 100%;
}

.entry-content .wp-block-table th {
    background-color: var(--wc-secondary) !important;
    color: var(--heading-color) !important;
    border-bottom: 2px solid var(--text-color) !important;
    padding: 1em;
    text-align: start; /* RTL Safe */
    font-weight: 600;
}

.entry-content .wp-block-table td {
    padding: 1em;
    border-bottom: 1px solid var(--wc-secondary) !important;
    vertical-align: top;
}

/* 2. Theme-Adaptive Alternating Rows */
.entry-content .wp-block-table tbody tr:nth-child(odd) td {
    /* Uses a low-opacity gray tint so it works dynamically in Light, Dark, and Pastel modes */
    background-color: rgba(128, 128, 128, 0.05) !important; 
}
.entry-content .wp-block-table tbody tr:nth-child(even) td {
    background-color: transparent !important;
}

/* ==========================================================================
   WOOCOMMERCE SHORTCODES WITHIN TABLES
   ========================================================================== */

/* Replaces your inline HTML CSS and forces a clean flex row */
.entry-content .wp-block-table ul.products {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 0 !important;
    padding: 0 !important;
}

/* Nuke Storefront pseudo-elements */
.entry-content .wp-block-table ul.products::before,
.entry-content .wp-block-table ul.products::after {
    content: none !important;
}

.entry-content .wp-block-table li.product-category {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.entry-content .wp-block-table li.product-category img {
    margin: 0 !important;
    max-width: 120px; /* Constrains massive logos to a uniform max-width */
    height: auto;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.2); /* Subtle edge definition */
}

/* Hide the titles and counts natively */
.entry-content .wp-block-table li.product-category h2,
.entry-content .wp-block-table li.product-category .count {
    display: none !important;
}

/* ==========================================================================
   PAGE LAYOUT & READABILITY (For static pages like Privacy, Contact)
   ========================================================================== */

article.page {
    max-width: 50em;
    margin-inline: auto; /* Modern logical property for margin left/right */
    padding-inline: 1.5em;
}

article.page .entry-header,
article.page .entry-content {
    width: 100%;
}

/* ==========================================================================
   CONTACT FORM STYLING (Tied to global.css Theme Dictionary)
   ========================================================================== */

/* Stack form elements cleanly */
article.page form {
    margin-top: 2em;
    display: flex;
    flex-direction: column;
    gap: 1.5em; /* Uses flex-gap instead of margin-bottom for cleaner spacing */
}

/* Form Labels */
article.page label {
    font-weight: 600;
    color: var(--heading-color);
    display: block;
    margin-bottom: 0.5em;
    font-size: 0.9em;
}

/* Inputs & Textareas (Forced Theme Alignment) */
article.page input[type="text"],
article.page input[type="email"],
article.page textarea {
    width: 100%;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid var(--wc-secondary);
    
    /* Force the background and text to obey your Theme Dictionary */
    background-color: var(--site-bg) !important;
    color: var(--text-color) !important;
    
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ==========================================================================
   THE "AUTOFILL" DARK MODE FIX
   ========================================================================== */
/* Browsers try to force a white background when autofilling forms. 
   This uses an inset shadow to force your Dark Mode colors back in. */
article.page input:-webkit-autofill,
article.page input:-webkit-autofill:hover, 
article.page input:-webkit-autofill:focus, 
article.page textarea:-webkit-autofill,
article.page textarea:-webkit-autofill:hover,
article.page textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-color) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--site-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Focus State */
article.page input:focus, 
article.page textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color);
    background-color: var(--site-bg) !important; /* Prevents focus from breaking dark mode */
}

/* Submit Button */
/* Colors (--btn-bg, etc.) are already applied by global.css. We just handle sizing here. */
article.page input[type="submit"] {
    padding: 12px 30px;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start; /* Stops the button from stretching full-width */
    border-radius: 4px;
    transition: opacity 0.3s ease, transform 0.1s ease;
}

article.page input[type="submit"]:hover {
    opacity: 0.8;
}

/* Adds a nice tactile "click" effect, matching the hover scale of your itemloop images */
article.page input[type="submit"]:active {
    transform: scale(0.98); 
}

/* Feedback Messages (Success/Error) */
/* Overrides the inline styles from the PHP to use your Glassmorphism theme */
article.page p[style*="color:green"],
article.page p[style*="color:red"] {
    background-color: var(--glass-bg) !important;
    color: var(--text-color) !important;
    padding: 1em;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Add a subtle colored accent line to distinguish success vs error */
article.page p[style*="color:green"] { border-inline-start: 4px solid #4caf50 !important; }
article.page p[style*="color:red"]   { border-inline-start: 4px solid #f44336 !important; }