/* ============================================================
   Ky Gui Dat – main.css
   Custom styles bổ sung cho Tailwind CSS
   ============================================================ */

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.fill-icon {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Layout ────────────────────────────────────────────── */
.primary-gradient {
    background: linear-gradient(135deg, #001e40 0%, #003366 100%);
}
.glass-panel {
    background: rgba(248, 249, 250, 0.7);
    backdrop-filter: blur(12px);
}

/* ── Prose (nội dung WP editor render trên frontend) ────── */
.kgd-prose { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.8; color: #334155; }
.kgd-prose h1,.kgd-prose h2,.kgd-prose h3,.kgd-prose h4 { font-family: 'Manrope', sans-serif; font-weight: 700; color: #001e40; margin: 1.5em 0 .5em; line-height: 1.25; }
.kgd-prose h1 { font-size: 2.25rem; }
.kgd-prose h2 { font-size: 1.75rem; border-bottom: 2px solid #f1f5f9; padding-bottom: .35em; }
.kgd-prose h3 { font-size: 1.25rem; }
.kgd-prose p { margin-bottom: 1.25em; }
.kgd-prose a { color: #046d3f; text-decoration: underline; text-underline-offset: 3px; }
.kgd-prose a:hover { color: #035c35; }
.kgd-prose ul,.kgd-prose ol { padding-left: 1.5em; margin-bottom: 1.25em; }
.kgd-prose li { margin-bottom: .4em; }
.kgd-prose strong,.kgd-prose b { font-weight: 700; color: #001e40; }
.kgd-prose blockquote { border-left: 4px solid #046d3f; background: #f0fdf4; padding: 14px 20px; margin: 1.5em 0; border-radius: 0 8px 8px 0; font-style: italic; color: #166534; }
.kgd-prose img { max-width: 100%; height: auto; border-radius: 8px; margin: 1em 0; }
.kgd-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 14px; }
.kgd-prose th,.kgd-prose td { padding: 10px 14px; border: 1px solid #e2e8f0; text-align: left; }
.kgd-prose th { background: #f1f5f9; font-family: 'Manrope', sans-serif; font-weight: 700; color: #001e40; }
.kgd-prose hr { border: none; border-top: 1px solid #e2e8f0; margin: 2em 0; }
.kgd-prose code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: .875em; }

/* ── Typography ─────────────────────────────────────────── */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .font-headline {
    font-family: 'Manrope', sans-serif;
}

/* ── Prose (bài viết, mô tả) ──────────────────────────── */
.prose h2 { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.375rem; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose h3 { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 1.125rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose p  { margin-bottom: 1rem; line-height: 1.75; color: #191c1d; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose a  { color: #046d3f; text-decoration: underline; }
.prose img { border-radius: 0.75rem; max-width: 100%; height: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.prose th { background: #edeeef; padding: 0.5rem 0.75rem; text-align: left; font-weight: 600; }
.prose td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #c3c6d1; }

/* ── Forms ─────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea,
select {
    background-color: #f8f9fa;
    border: 1px solid #c3c6d1;
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    font-family: 'Inter', sans-serif;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #3a5f94;
    box-shadow: 0 0 0 3px rgba(58, 95, 148, 0.15);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary {
    background-color: #001e40;
    color: #ffffff;
    padding: 0.625rem 1.5rem;
    border-radius: 2rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background-color 0.15s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.btn-primary:hover { background-color: #003366; }

.btn-secondary {
    background-color: #046d3f;
    color: #ffffff;
    padding: 0.625rem 1.5rem;
    border-radius: 2rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background-color 0.15s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.btn-secondary:hover { background-color: #035a34; }

/* ── Navigation ─────────────────────────────────────────── */
#site-header nav ul { margin: 0; padding: 0; list-style: none; }
#site-header .kgd-submenu a:hover { background-color: #f3f4f5; }

/* ── Pagination ─────────────────────────────────────────── */
.kgd-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 1px solid #c3c6d1;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #191c1d;
    text-decoration: none;
    transition: all 0.15s;
}
.kgd-pagination .page-numbers:hover { background: #edeeef; }
.kgd-pagination .page-numbers.current { background: #001e40; color: #fff; border-color: #001e40; }
.kgd-pagination .page-numbers.dots { border: none; cursor: default; }

/* ── Listing card line-clamp ────────────────────────────── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Cookie banner ──────────────────────────────────────── */
#kgd-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #001e40;
    color: #fff;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    transform: translateY(0);
    transition: transform 0.3s;
}
#kgd-cookie-banner.hidden { transform: translateY(100%); }

/* ── Quick search dropdown ──────────────────────────────── */
#kgd-search-results .search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: #191c1d;
    font-size: 0.875rem;
    transition: background 0.1s;
}
#kgd-search-results .search-item:hover { background: #f3f4f5; }
#kgd-search-results .search-item img { width: 48px; height: 36px; object-fit: cover; border-radius: 0.375rem; flex-shrink: 0; }

/* ── Dashboard ──────────────────────────────────────────── */
.kgd-dashboard-nav a.active { background: #e1e3e4; color: #001e40; font-weight: 600; }

/* ── Archive: mobile filter sidebar ─────────────────────── */
@media (max-width: 1023px) {
    #secondary { display: none; }

    #kgd-filter-sidebar {
        background: #f8f9fa;
        overflow-y: auto;
    }
    #kgd-filter-sidebar.is-open {
        transform: translateX(0) !important;
    }
}

/* ── Trang 404 ──────────────────────────────────────────── */
.glass-panel {
    background: rgba(248, 249, 250, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Grid rows cho layout 404 */
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }

/* ── Footer curve (diagonal slant top) ──────────────────── */
.footer-curve {
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
}

/* ── Footer nav menu items ───────────────────────────────── */
#site-footer ul { list-style: none; margin: 0; padding: 0; }
#site-footer ul li a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.15s;
}
#site-footer ul li a:hover { color: #046d3f; }

/* ── Dark mode cơ bản ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .dark body { background: #191c1d; color: #e1e3e4; }
}



/* ── Hero search form – fix option dropdown text visibility ── */
select[name="province"] option,
select[name="land_type"] option,
select[name="price_range"] option {
    background-color: #0f2744;
    color: #ffffff;
}

/* Selected value text stays white on the select box */
select[name="province"],
select[name="land_type"],
select[name="price_range"] {
    color: #ffffff;
}

/* ── Mobile menu nav links ─────────────────────────── */
#kgd-mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#kgd-mobile-menu ul li {
    border-bottom: 1px solid #f0f2f5;
}
#kgd-mobile-menu ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1a3a5c;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
#kgd-mobile-menu ul li a::after {
    content: '›';
    font-size: 1.4rem;
    color: #94a3b8;
    line-height: 1;
}
#kgd-mobile-menu ul li a:hover,
#kgd-mobile-menu ul li.current-menu-item > a,
#kgd-mobile-menu ul li.current_page_item > a {
    background: #eef4ff;
    color: #0052b4;
}
#kgd-mobile-menu ul ul {
    background: #f8fafc;
}
#kgd-mobile-menu ul ul li a {
    padding-left: 36px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
}
#kgd-mobile-menu ul ul li a::after {
    display: none;
}

/* ── Footer: fix clip-path cắt nội dung trên mobile ── */
@media (max-width: 767px) {
    .footer-curve {
        clip-path: polygon(0 56px, 100% 0, 100% 100%, 0% 100%);
        padding-top: 5.5rem;
    }
}

/* ── Fix khoảng trắng thừa phía trên nội dung ──────────────────────────
   site-header.php có <div class="h-20"> spacer 80px bù cho fixed header.
   Các template <main class="pt-20/28/32"> cũng tự bù header → double.
   Trừ 80px (pt-20) khỏi giá trị gốc để chỉ còn khoảng thở vừa phải.
   ────────────────────────────────────────────────────────────────────── */
main.pt-20 { padding-top: 0.5rem !important; }
main.pt-24 { padding-top: 1rem   !important; }
main.pt-28 { padding-top: 2rem   !important; }
main.pt-32 { padding-top: 3rem   !important; }

/* ── Logo: giới hạn kích thước trong header h-20 (80px) ── */
#site-header .custom-logo-link {
    display: flex;
    align-items: center;
    height: 100%;
}
#site-header .custom-logo {
    height: 48px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}