/*
Theme Name: Calids Minimal
Theme URI: https://calids.com
Description: Premium White Architectural Theme
Version: 5.6
*/

/* --- 1. FONTS & RESET --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@400;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Roboto', sans-serif;
    color: #555;
    margin: 0;
    padding-top: 120px; 
    background: #fff;
    line-height: 1.8;
    overflow-x: hidden; 
    font-weight: 300; 
}

body.home { padding-top: 0 !important; }
body.home #site-content { padding-top: 0 !important; }

/* --- HEADINGS --- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; 
    color: #222;
    margin-top: 0;
    line-height: 1.2;
    letter-spacing: -1px;
}

/* SIZES */
h1 { font-size: 4.2rem; } 
h2 { font-size: 2.2rem; } 
h3 { font-size: 1.5rem; } 
h4 { font-size: 1.2rem; } 

/* --- 2. HEADER --- */
.site-header {
    position: fixed; top: 0; left: 0; width: 100%; height: 120px; 
    z-index: 9999; background: #fff;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: none; border-bottom: 1px solid transparent; 
    display: block; 
}

.header-inner {
    width: 100%; max-width: 1400px; margin: 0 auto; 
    padding: 0 40px; 
    height: 100%;
    display: flex; flex-direction: row; justify-content: space-between; align-items: center;
    position: relative;
}

.site-logo {
    display: flex; align-items: center; height: 100%;
    order: 1; margin-right: auto; margin-left: 0;
    z-index: 10002; 
}

.site-logo img, .custom-logo {
    height: auto; max-height: 80px; width: auto; max-width: 220px; 
    object-fit: contain; transition: all 0.3s ease;
}

.main-navigation {
    order: 2; margin-left: auto; height: 100%;
    display: flex; align-items: center;
}

.main-navigation ul {
    display: flex; gap: 40px; list-style: none; margin: 0; padding: 0; align-items: center;
}

.main-navigation li { display: inline-block; position: relative; }

.main-navigation a {
    text-decoration: none; color: #333; font-weight: 500; 
    font-family: 'Roboto', sans-serif;
    font-size: 14px !important;       
    text-transform: uppercase !important; 
    letter-spacing: 0.15em !important;    
    transition: color 0.3s ease, opacity 0.3s ease;
    padding: 10px 0;
}

.main-navigation a:hover { color: #000; opacity: 0.7; }
.main-navigation .current-menu-item > a { color: #000; opacity: 1; }

.site-header.scrolled {
    height: 80px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.06); 
    border-bottom: 1px solid #f5f5f5;
}
.site-header.scrolled .site-logo img { max-height: 50px; }

/* --- 3. MOBILE MENU --- */
#mobile-menu-toggle {
    display: none !important; 
    background: transparent; border: none; cursor: pointer; padding: 8px; 
    z-index: 10003; order: 3; width: 44px; height: 44px; margin-right: 0;
    flex-direction: column; justify-content: center; align-items: center;
}
#mobile-menu-toggle span {
    display: block; width: 26px; height: 2px; background-color: #000000; 
    margin-bottom: 6px; transition: 0.3s; border-radius: 0; 
}
#mobile-menu-toggle span:last-child { margin-bottom: 0; }
#mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
#mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
#mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

@media (max-width: 1024px) {
    .site-header { height: 80px; padding: 0; }
    .header-inner { padding: 0 20px !important; } 
    #mobile-menu-toggle { display: flex !important; }
    .main-navigation {
        position: fixed; top: 80px; left: 0; width: 100%;
        height: calc(100vh - 80px); background: #ffffff; 
        flex-direction: column; justify-content: flex-start; align-items: center;
        padding-top: 40px; z-index: 10000 !important; border-top: 1px solid #f0f0f0;
        opacity: 0; visibility: hidden; transform: translateY(-10px);
        transition: all 0.3s ease-in-out; pointer-events: none;
    }
    .main-navigation.active {
        opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
    }
    .main-navigation ul {
        flex-direction: column; gap: 30px; text-align: center; width: 100%; padding: 0 20px;
    }
    .main-navigation li { display: block; width: 100%; }
    .main-navigation a {
        font-size: 18px !important; color: #000000 !important;
        display: block; padding: 15px; width: 100%; font-weight: 400 !important; 
    }
    
    /* Mobile Typography Scale */
    h1 { font-size: 2.8rem !important; }
    h2 { font-size: 1.8rem !important; }
    h3 { font-size: 1.3rem !important; }
}

/* =========================================
   4. LAYOUT & PAGE BUILDER LOGIC (Unlocked)
   ========================================= */

/* The Main Container: FULL WIDTH by default */
.site-main, .entry-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Default Content: Constrained to 1160px */
/* This keeps paragraphs readable */
.entry-content > * {
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* OPTION A: Wide Width (1400px) */
/* Select "Wide Width" in block toolbar */
.alignwide {
    max-width: 1400px !important;
}

/* OPTION B: Full Width (Edge-to-Edge) */
/* Select "Full Width" in block toolbar */
.alignfull {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100vw;
}

/* OPTION C: Columns */
.wp-block-columns {
    margin-bottom: 40px;
}

/* --- 5. FOOTER --- */
.site-footer { background: #fff; border-top: 1px solid #eaeaea; padding: 80px 0 40px; margin-top: 80px; color: #666; font-family: 'Roboto', sans-serif; }
.footer-inner { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 0; align-items: start; }
.footer-col { padding: 0 40px; }
.footer-brand img, .site-footer .custom-logo-link img { width: 250px !important; max-width: 250px !important; height: auto !important; opacity: 1 !important; }
.footer-contact { border-left: 1px solid #eee; border-right: 1px solid #eee; display: flex; justify-content: space-between; gap: 40px; }
.footer-contact p, .footer-contact address { 
    font-size: 15px; text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.8; 
    margin: 0 0 15px 0; color: #444; font-weight: 400; font-style: normal; 
}
.footer-quote p { font-family: 'Playfair Display', serif; font-size: 16px; line-height: 1.6; color: #777; font-style: italic; margin: 0; }
.footer-bottom { 
    margin-top: 60px; padding-top: 20px; border-top: 1px solid #f9f9f9; 
    text-align: center; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #aaa; 
}
@media (max-width: 1024px) {
    .footer-inner { grid-template-columns: 1fr; gap: 40px; }
    .footer-col { padding: 0; border: none; }
    .footer-contact { flex-direction: column; gap: 20px; }
    .footer-brand img, .site-footer .custom-logo-link img { width: 180px !important; }
}

/* --- 6. STUDIO POP STYLE (Slider Text) --- */
.text-pop {
    font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; line-height: 1.2 !important; color: #ffffff !important; -webkit-text-stroke: 0.5px rgba(0,0,0,0.4); text-shadow: 0px 4px 8px rgba(0,0,0,0.9), 0px 12px 25px rgba(0,0,0,0.6) !important; -webkit-font-smoothing: antialiased; transform: translateZ(0); max-width: 100%; word-wrap: break-word;
}
/* =========================================
   7. FLEXBOX & ALIGNMENT FIXES (Elementor-Style)
   ========================================= */

/* 1. Force Columns to be Equal Height */
.wp-block-columns {
    align-items: stretch !important; /* Ensures 70/30 columns are same height */
}

/* 2. Enable Flex inside the Column */
.wp-block-column {
    display: flex;
    flex-direction: column;
}

/* 3. "Fill Height" Class for Groups */
/* Use this to push items to Top & Bottom */
.fill-height {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}