/*
Theme Name: MenhVan Theme
Theme URI: https://menhvan.vn
Author: MenhVan Team
Author URI: https://menhvan.vn
Description: Elegant Vietnamese Bazi (Tu Tru) fortune lookup theme with warm earth tones
Version: 1.0.0
License: GPL v2 or later
Text Domain: menhvan
*/

/* ========================================
   1. Reset & Base
======================================== */
*{margin:0;padding:0;box-sizing:border-box}

body{
    font-family:'Inter',sans-serif;
    background:#f3eee8;
    color:#3b2b2b;
    line-height:1.7;
}

a{text-decoration:none;color:inherit;transition:.2s}
img{max-width:100%;height:auto;display:block}

.container{max-width:1200px;margin:auto;padding:0 24px}

/* ========================================
   2. Header
======================================== */
.site-header{
    padding:28px 0;
    border-bottom:1px solid #dccfbe;
    background:rgba(243,238,232,.9);
    position:sticky;
    top:0;
    backdrop-filter:blur(12px);
    z-index:100;
}

.site-header nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    font-family:'Playfair Display',serif;
    font-size:34px;
    color:#4a2e45;
    letter-spacing:1px;
}

.logo span{color:#9b6b4a}

.header-menu{
    display:flex;
    gap:28px;
    font-size:15px;
    list-style:none;
    align-items:center;
}

.header-menu a{
    color:#5a4a4a;
    font-weight:500;
}

.header-menu a:hover{
    color:#9b6b4a;
}

.menu-toggle{
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    padding:10px;
}

.menu-toggle span{
    display:block;
    width:26px;
    height:2px;
    background:#4a2e45;
    margin:5px 0;
    transition:.3s;
}

/* ========================================
   3. Hero Section
======================================== */
.hero-section{
    padding:70px 0 40px;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:36px;
    align-items:center;
}

.hero-box{
    background:linear-gradient(135deg,#4b3045,#7a5a68);
    border-radius:32px;
    padding:54px;
    color:#fff;
    box-shadow:0 20px 50px rgba(73,48,69,.18);
}

.hero-badge{
    display:inline-block;
    padding:10px 16px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    font-size:13px;
    margin-bottom:24px;
    background:rgba(255,255,255,.08);
}

.hero-box h1{
    font-family:'Playfair Display',serif;
    font-size:64px;
    line-height:1.05;
    margin-bottom:20px;
    color:#fff;
}

.hero-box h1 em{
    color:#e2c39a;
    font-style:normal;
}

.hero-box p{
    font-size:18px;
    color:#efe7df;
    max-width:620px;
    line-height:1.7;
}

/* ========================================
   4. Lookup Form
======================================== */
.lookup-box{
    background:#fff;
    border:1px solid #dfd4c8;
    border-radius:28px;
    padding:32px;
    box-shadow:0 15px 40px rgba(90,60,70,.08);
}

.lookup-box h2{
    font-family:'Playfair Display',serif;
    font-size:34px;
    margin-bottom:18px;
    color:#4a2e45;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:14px;
}

.form-grid input,
.form-grid select{
    width:100%;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid #d7cabd;
    background:#faf7f3;
    font-size:15px;
    font-family:'Inter',sans-serif;
    color:#3b2b2b;
    outline:none;
}

.form-grid input:focus,
.form-grid select:focus{
    border-color:#9b6b4a;
}

.btn-submit{
    width:100%;
    padding:16px;
    border:none;
    border-radius:16px;
    background:linear-gradient(90deg,#7b5b68,#a2754e);
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    margin-top:8px;
    font-family:'Inter',sans-serif;
    transition:.2s;
}

.btn-submit:hover{
    opacity:.9;
    transform:translateY(-1px);
}

/* Result Preview */
.result-preview{
    margin-top:20px;
    background:#faf7f2;
    border:1px solid #e2d7ca;
    border-radius:20px;
    padding:20px;
}

.result-preview > strong{
    display:block;
    margin-bottom:12px;
    color:#4a2e45;
}

.result-preview p{
    font-size:14px;
    color:#5a4a4a;
    margin-bottom:6px;
}

.result-preview p b{
    color:#4a2e45;
}

.pillars{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin:18px 0;
}

.pillar{
    background:#fff;
    border-radius:18px;
    padding:16px;
    text-align:center;
    border:1px solid #e5d8cb;
}

.pillar small{
    color:#8c7b70;
    font-size:13px;
}

.pillar strong{
    display:block;
    font-size:28px;
    color:#4a2e45;
    margin-top:8px;
    font-family:'Playfair Display',serif;
}

/* ========================================
   5. Section Common
======================================== */
.mv-section{
    padding:56px 0;
}

.section-title{
    font-family:'Playfair Display',serif;
    font-size:34px;
    margin-bottom:24px;
    color:#4a2e45;
}

/* ========================================
   6. Cards Grid (5 cols - samples & customers)
======================================== */
.cards-5{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}

.mv-card{
    background:#fff;
    border:1px solid #dfd4c8;
    border-radius:24px;
    overflow:hidden;
    transition:.25s;
}

.mv-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(90,60,70,.1);
}

.mv-card a{
    display:block;
    color:inherit;
}

.card-img{
    height:170px;
    background:linear-gradient(135deg,#7d5c67,#d0b08b);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-family:'Playfair Display',serif;
    font-size:28px;
    overflow:hidden;
}

.card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.card-body{
    padding:20px;
}

.card-body h3{
    font-size:18px;
    margin-bottom:8px;
    color:#4a2e45;
    font-weight:600;
}

.card-body p{
    font-size:14px;
    color:#76655d;
    line-height:1.6;
}

.card-tag{
    display:inline-block;
    margin-top:14px;
    padding:6px 10px;
    border-radius:999px;
    background:#efe6dc;
    color:#7b5b68;
    font-size:12px;
    font-weight:600;
}

/* ========================================
   7. Blog Grid (3 cols)
======================================== */
.blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.blog-card{
    background:#fff;
    border-radius:24px;
    padding:26px;
    border:1px solid #dfd4c8;
    transition:.25s;
}

.blog-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(90,60,70,.08);
}

.blog-card a{
    display:block;
    color:inherit;
}

.blog-card h4{
    font-size:22px;
    margin-bottom:12px;
    color:#4a2e45;
    font-family:'Playfair Display',serif;
    line-height:1.4;
}

.blog-card p{
    color:#76655d;
    font-size:15px;
    line-height:1.7;
}

.blog-card .blog-meta{
    font-size:13px;
    color:#8c7b70;
    margin-bottom:10px;
}

/* ========================================
   8. API / CTA Section
======================================== */
.api-box{
    background:linear-gradient(135deg,#4b3045,#6d5565);
    color:#fff;
    border-radius:28px;
    padding:42px;
    border:none;
}

.api-box h2{
    font-family:'Playfair Display',serif;
    font-size:34px;
    color:#fff;
    margin-bottom:14px;
}

.api-box p{
    color:#efe7df;
    font-size:17px;
    margin-bottom:20px;
    max-width:700px;
    line-height:1.7;
}

.api-box .btn-submit{
    max-width:260px;
}

/* ========================================
   9. Footer
======================================== */
.site-footer{
    margin-top:60px;
    padding:36px 0;
    border-top:1px solid #dccfbe;
    color:#7d6d63;
    text-align:center;
    font-size:14px;
}

.site-footer a{
    color:#9b6b4a;
}

.site-footer a:hover{
    color:#4a2e45;
}

/* ========================================
   10. Single Post / Page
======================================== */
.page-wrap{
    padding:50px 0;
}

.page-inner{
    max-width:800px;
    margin:0 auto;
    background:#fff;
    border-radius:24px;
    padding:46px;
    border:1px solid #dfd4c8;
    box-shadow:0 15px 40px rgba(90,60,70,.06);
}

.page-inner h1{
    font-family:'Playfair Display',serif;
    font-size:36px;
    color:#4a2e45;
    margin-bottom:20px;
    line-height:1.2;
}

.page-inner h2{
    font-family:'Playfair Display',serif;
    font-size:28px;
    color:#4a2e45;
    margin:30px 0 14px;
}

.page-inner h3{
    font-size:22px;
    color:#4a2e45;
    margin:24px 0 10px;
}

.page-inner p{
    color:#5a4a4a;
    font-size:17px;
    line-height:1.8;
    margin-bottom:16px;
}

.page-inner ul,.page-inner ol{
    margin:16px 0;
    padding-left:24px;
    color:#5a4a4a;
}

.page-inner li{margin-bottom:8px}

.page-inner img{
    border-radius:16px;
    margin:20px 0;
}

.page-inner a{
    color:#9b6b4a;
    font-weight:600;
}

.page-inner a:hover{
    color:#4a2e45;
}

.entry-meta{
    font-size:14px;
    color:#8c7b70;
    margin-bottom:20px;
    display:flex;
    gap:16px;
}

/* ========================================
   11. WordPress Core
======================================== */
.screen-reader-text{
    position:absolute !important;
    clip:rect(1px,1px,1px,1px);
    padding:0 !important;
    border:0 !important;
    height:1px !important;
    width:1px !important;
    overflow:hidden;
}

.alignleft{float:left;margin-right:20px}
.alignright{float:right;margin-left:20px}
.aligncenter{display:block;margin:0 auto}

/* ========================================
   12. Responsive
======================================== */
@media (max-width:1000px){
    .hero-grid{grid-template-columns:1fr}
    .cards-5{grid-template-columns:1fr 1fr}
    .blog-grid{grid-template-columns:1fr}
}

@media (max-width:700px){
    .header-menu{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#f3eee8;
        flex-direction:column;
        padding:20px 24px;
        gap:14px;
        border-bottom:1px solid #dccfbe;
    }

    .header-menu.toggled{
        display:flex;
    }

    .menu-toggle{
        display:block;
    }

    .hero-box h1{font-size:46px}
    .hero-box,.lookup-box{padding:26px}

    .form-grid,
    .pillars,
    .cards-5{
        grid-template-columns:1fr;
    }

    .section-title{font-size:28px}
    .pillar strong{font-size:22px}

    .page-inner{
        padding:28px 18px;
    }

    .page-inner h1{font-size:28px}

    .api-box{padding:28px}
    .api-box .btn-submit{max-width:100%}
}