/* v13.0 STARK DIAMOND STYLE - HIGH CONTRAST & NORMALIZED FOOTER */
:root { 
    --p: #2271b1; 
    --bg: #ffffff; 
    --text: #111111; /* Sharp dark text */
    --light: #f8fafc; 
    --border: #e2e8f0; 
    --dark-gray: #334155; /* Dark slate instead of light grey */
}

* { box-sizing: border-box; }
body { 
    font-family: 'Inter', -apple-system, system-ui, sans-serif; 
    background: var(--bg); 
    margin:0; 
    line-height:1.6; 
    color: var(--text); 
    -webkit-font-smoothing: antialiased;
}

/* --- 1. Header Navigation --- */
.inner { max-width: 1100px; margin: auto; padding: 0 20px; }
.top-nav { background: #ffffff; padding: 5px 0; border-bottom: 2px solid var(--p); position: sticky; top:0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.top-nav .inner { display: flex; justify-content: space-between; align-items: center; }

.logo { font-size: 19px; font-weight: 800; text-decoration: none; color: #000; display: flex; align-items: center; letter-spacing: -0.5px; }
.logo img { height: 60px; margin-right: 12px; }

.menu a { text-decoration: none; color: #000; font-size: 12px; font-weight: 700; margin-left: 25px; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s; }
.menu a:hover { color: var(--p); }

/* --- 2. Professional Grid Cards --- */
.container { padding: 40px 0; min-height: 80vh; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }

.card { background: #fff; border-radius: 8px; position: relative; transition: 0.3s; display: flex; flex-direction: column; border: 1px solid var(--border); overflow: hidden; }
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.card-img { height: 210px; background-size: cover; background-position: center; }

/* WP Style Badge */
.cat-label { position: absolute; top: 12px; left: 12px; background: var(--p); color: #fff; padding: 4px 10px; font-size: 9px; font-weight: 800; border-radius: 3px; text-transform: uppercase; z-index: 10; }

.cb { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.cb h3 { color: var(--text); font-size: 20px; margin: 0 0 10px; font-weight: 800; }
.cb p { color: #333; font-size: 14px; } /* Darker text */

.price-lbl { float: right; color: #166534; font-weight: 800; font-size: 1.1rem; }

/* Tag Buttons UI */
.card-tags, .post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.pill-tag { background: #f1f5f9; color: var(--dark-gray); font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 4px; border: 1px solid var(--border); text-decoration: none; text-transform: uppercase; }
.pill-tag:hover { background: var(--p); color: #fff; border-color: var(--p); }

.view-btn { display: inline-block; margin-top: auto; color: var(--text); text-decoration: none; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 2px solid var(--p); width: fit-content; padding-bottom: 2px; }

/* --- 3. Refined Filter Bar --- */
.filter-bar { background: #fff; padding: 25px; border-radius: 8px; border: 1px solid var(--border); display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; margin-bottom: 20px; align-items: flex-end; }
.filter-bar label { font-size: 11px; font-weight: 800; color: #000; text-transform: uppercase; margin-bottom: 5px; display: block; }
.filter-bar input, .filter-bar select { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; background: #fff; color: #000; }

/* --- 4. Professional High-End Form --- */
.contact-card { max-width: 500px; margin: 0 auto; background: #fff; padding: 30px; border: 1px solid var(--border); border-radius: 8px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #000; letter-spacing: 1px; margin-bottom: 6px; }
.f-control { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; color: #000; outline: none; transition: border-color 0.2s; }
.f-control:focus { border-color: var(--p); box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1); }
.submit-btn { background: var(--p); color: #fff; border:none; padding: 15px; border-radius: 6px; width: 100%; cursor: pointer; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; font-size: 12px; }

/* --- 5. Improved Share Tray (Clean Alignment) --- */
.share-tray { margin-top: 40px; padding: 30px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; }
.share-tray b { font-size: 11px; color: #94a3b8; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; }
.icon-list { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
.social-icon { display: flex; width: 55px; height: 55px; border: 1px solid var(--border); border-radius: 50%; transition: 0.3s; background: #fff; align-items: center; justify-content: center; }
.social-icon img { width: 45px; height: 45px; object-fit: contain; }
.social-icon:hover { border-color: var(--p); background: #f0f7ff; transform: translateY(-2px); }

/* --- 6. Normalized Footer --- */
footer { border-top: 1px solid var(--border); padding: 40px 0; text-align: center; background: #ffffff; }
.f-legal { margin-bottom: 20px; display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.f-legal a { text-decoration: none; color: #000; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.f-legal a:hover { color: var(--p); }
footer p { color: #64748b; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin-top: 10px; }

/* --- Hamburger Icon Styling --- */
.menu-toggle {
    display: none; /* Hidden on desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

.menu-toggle span {
    width: 30px;
    height: 3px;
    background: #000;
    border-radius: 10px;
    transition: all 0.3s linear;
}

/* --- Mobile Logic --- */
@media (max-width: 800px) {
    .logo img { height: 50px; } /* Makes logo a bit bigger on mobile too */

    .menu-toggle { display: flex; } /* Show hamburger on mobile */

    .menu {
        display: none; /* Hide menu links by default on mobile */
        position: absolute;
        top: 0px; /* Adjust based on your header height */
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        text-align: center;
        padding: 5px 100px;
        border-bottom: 2px solid var(--p);
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
    }

    .menu.active {
        display: flex; /* Show menu when 'active' class is added via JS */
    }

    .menu a {
        margin: 15px 0;
        margin-left: 0 !important; /* Reset desktop margin */
        font-size: 16px; /* Bigger touch targets for fingers */
    }
}

/* LUXURY ARTICLE BOUNDARY (v2.4 Fix) */
.post-content {
    max-width: 800px !important; /* Forces 800 width on Desktop */
    width: 100% !important;     /* Mobile: takes full space */
    margin: 0 auto !important;   /* Centers text perfectly */
    line-height: 1.8;
}

/* Ensure all images inside the blog don't spill out */
.post-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px;
    margin: 30px 0;
}

@media (max-width: 800px) {
    .post-content {
        padding: 10px 5px !important;
        width: 95% !important; /* Provides safe margin on phone edges */
    }
}

/* --- LUXURY SPOTLIGHT GRID SYSTEM --- */
.luxury-spotlight {
    grid-template-columns: 1fr 1fr; /* Two equal columns on Desktop */
}

/* Fix the text box centering on desktop */
.spotlight-text {
    padding-top: 20px;
}

/* --- 12 Shortcode MOBILE RESPONSIVE TRIGGER (800px and below) --- */
@media (max-width: 800px) {
    .luxury-spotlight {
        grid-template-columns: 1fr !important; /* Stack them into 1 single column */
        padding: 60px 20px 30px 20px !important; /* Adjust padding for phone fingers */
        text-align: center; /* Makes it look balanced on mobile */
    }

    .spotlight-badge {
        left: 0 !important;
        width: 100%;
        text-align: center;
        top: 25px !important;
    }

    .spotlight-image {
        order: -1; /* This moves the image to the TOP of the text on mobile */
    }
    
    .luxury-spotlight h2 {
        font-size: 26px !important; /* Shrink title slightly so it doesn't wrap 4 times */
    }
}

/* --- LUXURY GRID ENGINE #36 --- */
.lux-columns {
    display: grid !important;
    gap: 30px !important;
    margin: 40px auto !important;
    width: 100% !important;
    align-items: start;
}

.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Elegant Inner Padding for column content */
.lux-col-item {
    background: transparent;
    padding: 0;
}

/* MOBILE TRANSFORMATION */
@media (max-width: 800px) {
    .lux-columns {
        grid-template-columns: 1fr !important; /* Forces 1-item wide on phones */
        gap: 40px !important; /* Increases distance between stacked items for luxury air */
    }
    .lux-col-item {
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }
    .lux-col-item:last-child {
        border-bottom: none;
    }
}

/* --- Vertical Spacing logic for ALL shortcodes (including nested ones) --- */
.post-content > *, 
.lux-col-item > * {
    margin-bottom: 30px !important; /* Spacing between elements inside columns */
}

.lux-col-item > *:last-child {
    margin-bottom: 0 !important;
}

/* Force images inside columns to follow the responsive rule */
.lux-col-item img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 15px auto !important;
    border-radius: 8px;
}