/*
Theme Name: mmedigital-miaandmore
Theme URI: https://miaandmore.com
Author: MME Digital
Author URI: https://mme.vn
Description: Custom WordPress Theme for Mia & More, built with clean PHP 8.3, modular structure, and ACF integration readiness.
Version: 1.0.5
Requires at least: 6.4
Requires PHP: 8.3
Text Domain: mmedigital-miaandmore
*/

/* 
   Note: This theme uses Tailwind CSS via CDN. 
   Styles below are the DESIGN SYSTEM SYSTEMATIC CLASSES.
*/

html, body {
    overflow-x: clip !important;
    width: 100%;
    position: relative;
}
:root {
    /* Define Base Variables here to avoid hardcoding fallback */
    --color-primary-def: #8ec641;
    --color-secondary-def: #0b2b1a;
    --transition-fast: 0.3s ease;
}

/* =========================================
   1. LAYOUT SYSTEM
   ========================================= */

/* Section Spacing (Desktop vs Mobile) */
.section-std {
    padding-top: 3rem;
    /* Mobile: 48px */
    padding-bottom: 3rem;
}

@media (min-width: 768px) {
    .section-std {
        padding-top: var(--spacing-xl, 4rem);
        /* Desktop: Dynamic */
        padding-bottom: var(--spacing-xl, 4rem);
    }
}

/* Container Width */
.container-std {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* 24px */
    padding-right: 1.5rem; /* 24px */
}

.container-fullwidth {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* 24px - Matched with container-std */
    padding-right: 1.5rem; /* 24px - Matched with container-std */
}

@media (min-width: 768px) {
    .container-std {
        max-width: 85%;
        /* Luxury Width */
        padding-left: 0;
        padding-right: 0;
    }
}

/* Fix: Limit max-width on huge screens */
@media (min-width: 1600px) {
    .container-std {
        max-width: 1440px;
        /* Giữ content gọn gàng ở giữa */
    }
}

/* Fix: WordPress Core alignments */
.aligncenter {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.alignwide {
    max-width: 100%;
    /* Hoặc rộng hơn container-std một chút */
}

.alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: calc(50% - 50%);
    margin-right: calc(50% - 50%);
}

/* =========================================
   2. TYPOGRAPHY SYSTEM
   ========================================= */

.font-heading {
    font-family: var(--font-family-heading, serif);
}

.font-body {
    font-family: var(--font-body, sans-serif);
}

/* Headings */
.type-h1,
.type-h2,
.type-h3,
.type-h4,
.type-h5,
.type-h6 {
    font-family: var(--font-family-heading, 'Playfair Display', serif);
    font-weight: 900;
    /* Black */
    line-height: 1.1;
    color: inherit;
}

.type-h1 {
    font-size: clamp(1.25rem, 5vw, 4.5rem);
    /* Hero Title */
    line-height: 1.1;
}

.type-h2 {
    font-size: 1.875rem;
    /* Mobile: 30px */
    line-height: 1.2;
}

@media (min-width: 768px) {
    .type-h2 {
        font-size: 2.25rem;
        /* Desktop: 36px */
    }
}

.type-h3 {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    /* 16px -> 18px */
}

@media (min-width: 768px) {
    .type-h3 {
        font-size: clamp(1rem, 1.5vw, 1.125rem);
    }
}

/* Body Text */
.type-p {
    font-family: var(--font-family-body, 'Manrope', sans-serif);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text, #374151);
}

/* Force override Tailwind's default line-height for .text-lg */
.text-lg {
    line-height: 1.4 !important;
}

.type-p-lg {
    font-size: 1.125rem;
    /* 18px */
}

/* Quote */
.type-quote {
    font-family: var(--font-family-heading, 'Playfair Display', serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--color-secondary, #0b2b1a);
}

/* =========================================
   3. COMPONENT SYSTEM
   ========================================= */

/* Button Base */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    /* Pill shape default */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
}

/* Fix: Accessibility Focus State for Buttons */
.btn:focus-visible {
    outline: 2px solid var(--color-primary, #8ec641);
    outline-offset: 2px;
}

/* Primary Button (Solid Brand Color) */
.btn-main {
    background-color: var(--color-primary, var(--color-primary-def));
    color: #000;
    /* Text always black on brand green */
    border: 2px solid var(--color-primary, var(--color-primary-def));
}

.btn-main:hover {
    background-color: #000;
    color: var(--color-primary, var(--color-primary-def));
    border-color: #000;
    transform: translateY(-2px);
}

/* Reverse/Outline Button */
.btn-reverse {
    background-color: transparent;
    color: #000;
    border: 2px solid #000;
}

.btn-reverse:hover {
    background-color: #000;
    color: #fff;
    transform: translateY(-2px);
}

/* White Reverse (for dark backgrounds) */
.btn-reverse-white {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.btn-reverse-white:hover {
    background-color: #fff;
    color: #000;
}

/* =========================================
   4. FORM BASICS (Minimalist)
   ========================================= */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    /* Gray-200 */
    border-radius: 0.5rem;
    font-family: var(--font-body, sans-serif);
    transition: var(--transition-fast);
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary, #8ec641);
    box-shadow: 0 0 0 3px rgba(142, 198, 65, 0.1);
    /* Primary color fade */
}

/* Fix: Basic Image Handling */
img {
    max-width: 100%;
    height: auto;
}

/* =========================================
   5. SINGLE POST FONT OVERRIDES (REFINED)
   ========================================= */

.type-h1-single {
    font-size: 2.25rem !important; /* 36px - Safer scale */
    font-weight: 900 !important;
    line-height: 1.25 !important;
    color: #fff !important; /* Fixed: Back to white for Hero */
    text-transform: uppercase;
}

.type-h1-single-dark {
    font-size: 2.25rem !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    color: #000 !important;
    text-transform: uppercase;
}

/* Chỉ áp dụng Manrope cho phần nội dung bài viết (prose) và các thẻ văn bản */
.single article .prose {
    font-family: 'Manrope', sans-serif !important;
}

.single article .prose p, 
.single article .prose span, 
.single article .prose li, 
.single article .prose strong,
.single article .prose b,
.single article .prose i,
.single article .prose em {
    font-family: 'Manrope', sans-serif !important;
}

/* Áp dụng Manrope cho toàn bộ tiêu đề h1-h6 trong nội dung blog để dễ đọc hơn */
.single article .prose h1, 
.single article .prose h2, 
.single article .prose h3, 
.single article .prose h4, 
.single article .prose h5, 
.single article .prose h6 {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important; /* Force Bold 700 explicitly */
}

/* Ép các thẻ con (span, strong, b, i) phải đồng bộ tuyệt đối với tiêu đề cha (h1-h6) */
/* Thay vì 'inherit', chúng ta ép trực tiếp font-family và weight để ghi đè inline style của CMS */
.single article .prose h1 *,
.single article .prose h2 *,
.single article .prose h3 *,
.single article .prose h4 *,
.single article .prose h5 *,
.single article .prose h6 * {
    font-family: 'Manrope', sans-serif !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    line-height: inherit !important;
    font-style: normal !important;
}

/* Spacing & Typography Polish */
.prose p {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

.prose h2 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
}

.prose h3 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.75rem !important;
}

.prose ul, .prose ol {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.prose ul {
    list-style-type: disc !important;
}

.prose ol {
    list-style-type: decimal !important;
}

.prose li {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.prose li::marker {
    color: #000 !important; /* Bullet color */
    font-weight: 800;
}

/* Fix br spacing */
.prose br {
    display: block;
    content: "";
    margin-top: 0.25rem;
}

/* Additional Polish for Single Article */
body.single #news-detail .prose a {
    color: #8ec641;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(142, 198, 65, 0.2);
}

body.single #news-detail .prose a:hover {
    border-bottom-color: #8ec641;
}

body.single #news-detail .post-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 99px;
    background: #f3f4f6;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #4b5563;
}

body.single #news-detail .post-tag:hover {
    background: #8ec641;
    color: white;
}