/**
 * Common CSS for Okoboji Theme
 * Contains all shared styles: backgrounds, glass-tile, common utilities
 * This file loads FIRST before all other CSS files
 */

/* ================================================
 * BODY BACKGROUND STYLES - All page backgrounds
 * ================================================ */

/* Rough Beige Wall Background - Default for most pages */
body.rough-beige-wall {
    /* A warm, creamy beige for the base color, sampled from your image */
    background-color: #E6D5B8 ;

    /* White text for better contrast against beige background */
    color: #ffffff ;
    
    /*
     * This effect uses layered gradients to create the texture.
     * The first two gradients create a very fine, tight noise pattern.
     * The next two radial gradients add subtle, larger variations in lightness
     * and darkness to mimic the unevenness of a plastered wall.
    */
    background-image:
        /* Layer 1: Faint, larger light splotches */
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.06) 10%, transparent 40%),
        
        /* Layer 2: Faint, larger dark splotches */
        radial-gradient(circle at 80% 70%, rgba(0,0,0,0.05) 5%, transparent 30%),

        /* Layer 3: A very fine noise grid for the base texture */
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px) ;

    /*
     * Each gradient layer has its own size to create a complex, non-repeating effect.
    */
    background-size: 200px 200px, 150px 150px, 3px 3px, 3px 3px;
    min-height: 100vh ;
    overflow-x: hidden }

/* Removed unused dark background classes - All pages now use beige rough-beige-wall background */

/* ================================================
 * GLASS TILE CONTAINER STYLES - Global styles for all pagesfor test
 * ================================================ */

/* Main glass container - consolidated single rule */
#glass-tile {
    /* Glass morphism effects */
    background: none;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(41, 41, 41, 0.829);

    /* Layout and positioning */
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    min-height: calc(100vh - 3.4rem);
    display: block;
    position: relative;
    overflow: hidden;

    /* Performance optimizations */
    will-change: transform;
    transform: translate3d(0, 0, 0) scale(1);
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    isolation: isolate;
    opacity: 1;
}

/* Shiny glass effect for main container */
#glass-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

/* Product page glass blocks - used only on product pages */
.glass-tile-block-product {
    background: none;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(41, 41, 41, 0.829);
    /* Performance optimizations to reduce glass artifacts during scroll */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Shiny glass effect for product page blocks */
.glass-tile-block-product::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

/* Duplicate #glass-tile rule removed - consolidated above */

/* Product page content blocks - natural sizing */



/* Removed admin-bar specific CSS - All users get identical styling */


/* Glass-tile-main class - now only handles responsive margin adjustments */
.glass-tile-main {
    margin: 0.5rem 0 0.5rem 0;
}

/* Removed non-working mobile media query */

@media (min-width: 768px) {
    .glass-tile-main {
        margin: 1rem 0 1rem 0;
    }
    
    /* Responsive header overlap adjustment for larger screens - ONLY main container */
    body.rough-beige-wall #glass-tile,
    #glass-tile {
        margin-top: 1rem; /* Increased header overlap for desktop - creates 80px overlap */
        min-height: calc(100vh - 4rem); /* Adjust for larger header overlap */
    }

    /* Product blocks automatically maintain normal sizing - no overrides needed */
}

/* ================================================
 * GLASS TILE LAYOUT UTILITIES
 * ================================================ */

/* Glass-tile flex layouts */
.glass-tile-flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.glass-tile-flex-space-x {
    display: flex;
    gap: 1rem;
}

/* Glass frame effect for glass tiles */
.glass-frame {
    position: relative;
}

.glass-frame::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
}

/* ================================================
 * COMMON UTILITY CLASSES - Used across all pages
 * ================================================ */

/* Custom red glow effect */
.shadow-red-glow {
    box-shadow: 0 0 15px 5px rgba(239, 68, 68, 0.5), 0 0 30px 10px rgba(239, 68, 68, 0.3);
}

/* Transform utilities */
.transform-style-preserve-3d {
    transform-style: preserve-3d;
}

.transform-style-3d {
    transform-style: preserve-3d;
}

/* Line Clamp Utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Content grid layout */
.content-grid {
    max-width: 1400px;
    margin: 0 auto;
}

/* ================================================
 * GLASS MORPHISM BLOCK STYLES - Global for all pages
 * ================================================ */

/* Glass morphism styling consolidated above with #glass-tile */

/* ================================================
 * FOOTER STYLES - Glass morphism footer with 3em spacing
 * ================================================ */

/* Footer spacing from main content */
.site-footer {
    
    margin-top: 3em; /* 3em space between body and footer */
}

/* Footer full glass container - dark background with glass effects */
.footer-glass-container {
    background: none;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(41, 41, 41, 0.829);
    display: block;
    opacity: 1;
    transform: scale(1);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Footer glass container - no shiny effect */

/* Footer widget blocks - separate from main glass-tile-block-product */
.footer-widget-block {
    background: rgba(230, 213, 184, 0.8);
     /* Lighter background than footer container */
    border: 2px solid rgb(0, 0, 0);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 1rem;
    box-shadow: 0 10px 10px -12px rgba(0, 0, 0, 0.829);
    /* Performance optimizations */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    position: relative;
    isolation: isolate;
    overflow: hidden;

    /* Uniform size for all footer widgets */
    min-height: 250px; /* Minimum height to ensure consistency */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to top */
}

/* Footer columns - ensure equal height */
.site-footer .grid {
    /* Grid container for footer columns */
    align-items: stretch; /* Make all columns same height */
}

.site-footer .footer-column {
    /* Individual footer column */
    display: flex;
    flex-direction: column;
    height: 100%; /* Take full height of grid row */
}

.site-footer .footer-column .footer-widget-block {
    /* Widget block inside column */
    flex: 1; /* Fill remaining space in column */
}

/* Footer copyright section - revert to original sizing */
.site-footer .site-info .footer-widget-block,
.site-footer > div > div > .footer-widget-block:not(.footer-column .footer-widget-block) {
    /* Reset copyright block to original size */
    min-height: auto;
    display: block;
    flex-direction: initial;
    justify-content: initial;
    flex: initial;
}

/* Footer copyright text styling */
.site-footer .site-info .footer-widget-block p,
.site-footer .site-info p {
    color: #000000; /* Black text by default */
    transition: color 0.3s ease;
}

/* Footer copyright text hover styling */
.site-footer .site-info .footer-widget-block:hover p,
.site-footer .site-info:hover p {
    color: #ffffff; /* White text on hover */
}

/* Footer widget blocks - no shiny effect */
.footer-widget-block:hover{
    background: rgba(94, 137, 218, 0.685);
}
/* Footer widget styling - text and content */
.site-footer .widget {
    color: rgb(0, 0, 0); /* Default text color for all widget content */
}

/* Footer widget links styling */
.site-footer .widget a {
    color: rgba(0, 0, 0, 0.8);
    font-weight: 900;
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer .widget a:hover {
    color: rgba(255, 255, 255, 1);
}

/* 4th Footer Widget - Specific text styling for image and text beneath */
.site-footer .footer-column:nth-child(4) .footer-widget-block {
    font-size: 1.3em;
    font-weight: 600;
}

.site-footer .footer-column:nth-child(4) .footer-widget-block .widget {
    /* All text in 4th widget */
    font-size: 1.1em; /* Adjust size: 0.8em = smaller, 1.2em = larger */
    color: #2c3e50; /* Change this color: #ff0000 = red, #0066cc = blue, etc. */
}

.site-footer .footer-column:nth-child(4) .footer-widget-block .widget p {
    /* Paragraph text beneath image in 4th widget */
    font-size: 1.1em; /* Text size for paragraphs */
    color: #2c3e50; /* Text color for paragraphs */
    line-height: 1.4; /* Line spacing */
    margin-top: 0.5em; /* Space above paragraph */
}

.site-footer .footer-column:nth-child(4) .footer-widget-block .widget img {
    /* Image styling in 4th widget */
    margin-bottom: 0.5em; /* Space between image and text */
}

/* Footer widget lists styling */
.site-footer .widget ul {
    list-style: none;
    padding: 0;
}

.site-footer .widget li {
    margin-bottom: 0.5em;
}

/* Screen reader text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}