/* 
   HỆ THỐNG THIẾT KẾ: VUI VÀO BẾP
   Phong cách: Tối giản (Minimal), Ấm cúng (Warm), Sang trọng (Elegant)
*/

/* Nhập font chữ từ Google Fonts: 
   - Playfair Display: Dành cho tiêu đề (mang tính nghệ thuật, cổ điển)
   - Poppins: Dành cho nội dung (hiện đại, dễ đọc) 
*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:wght@300;400;500;600&display=swap');

/* ĐỊNH NGHĨA BIẾN CSS (CSS VARIABLES)
   Giúp quản lý màu sắc và thông số tập trung, dễ dàng thay đổi toàn bộ giao diện 
*/
:root {
    --primary: #ff9933;       /* Màu cam chủ đạo - tạo cảm giác thèm ăn và ấm cúng */
    --secondary: #fda645;     /* Màu cam phụ cho hiệu ứng hover */
    --accent: #e9b83f;        /* Màu vàng nhấn cho các chi tiết nhỏ */
    --bg-warm: #f8f6f2;       /* Màu nền kem ấm, giảm mỏi mắt so với trắng tinh */
    --bg-white: #ffffff;      
    --text: #1a1a1a;          /* Màu chữ gần đen để tăng độ tương phản */
    --text-muted: #555555;    /* Màu chữ xám cho nội dung phụ */
    --header-height: 80px;    /* Chiều cao cố định của thanh điều hướng */
    --container-width: 1200px; /* Độ rộng tối đa của nội dung web */
    --transition: all 0.3s ease; /* Hiệu ứng chuyển động tiêu chuẩn */
}

/* THIẾT LẬP CHUNG (GLOBAL RESETS) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Đảm bảo padding/border không làm tăng kích thước phần tử */
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-white);
    color: var(--text);
    line-height: 1.6;          /* Khoảng cách dòng giúp văn bản dễ đọc hơn */
    overflow-x: hidden;        /* Chống tràn ngang trên thiết bị di động */
}

h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif; /* Font có chân cho tiêu đề sang trọng */
    font-weight: 700;
}

a {
    text-decoration: none;     /* Bỏ gạch chân mặc định của liên kết */
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;          /* Bỏ dấu chấm tròn của danh sách */
}

img {
    max-width: 100%;           /* Hình ảnh tự động co giãn theo khung chứa */
    display: block;
}

/* BỐ CỤC CHUNG (LAYOUT) */
.container {
    max-width: var(--container-width);
    margin: 0 auto;            /* Căn giữa nội dung */
    padding: 0 20px;           /* Khoảng cách an toàn 2 bên màn hình */
}

/* THANH ĐIỀU HƯỚNG (HEADER) */
header {
    height: var(--header-height);
    background-color: var(--bg-white);
    display: flex;             /* Sử dụng Flexbox để căn chỉnh các thành phần bên trong */
    align-items: center;
    position: sticky;          /* Giữ thanh menu luôn ở trên cùng khi cuộn trang */
    top: 0;
    z-index: 1000;             /* Đảm bảo menu luôn đè lên trên các nội dung khác */
    box-shadow: 0 2px 10px rgba(0,0,0,0.02); /* Đổ bóng nhẹ phân tách header */
}

header .container {
    display: flex;
    justify-content: space-between; /* Đưa Logo sang trái và Menu sang phải */
    align-items: center;
    width: 100%;
}

.logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--primary);
}

.nav-links {
    display: flex;
    gap: 40px;                 /* Khoảng cách giữa các liên kết menu */
}

.nav-links a {
    font-weight: 500;
    font-size: 0.95rem;
}

.nav-links a:hover {
    color: var(--primary);     /* Đổi màu khi di chuột qua */
}

/* KHU VỰC GIỚI THIỆU CHÍNH (HERO SECTION) */
.hero {
    padding: 100px 0;
    background-color: var(--bg-warm);
    text-align: center;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    color: var(--text);
}

.hero p {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 40px;       /* Căn giữa đoạn văn bản */
}

/* NÚT BẤM (BUTTONS) */
.btn {
    display: inline-block;
    padding: 15px 35px;
    background-color: var(--primary);
    color: white;
    border-radius: 50px;       /* Tạo hình nút bo tròn mềm mại */
    font-weight: 600;
    transition: var(--transition);
}

.btn:hover {
    background-color: var(--secondary);
    transform: translateY(-2px); /* Hiệu ứng nhấc nút lên khi hover */
    box-shadow: 0 5px 15px rgba(255, 153, 51, 0.3);
}

/* KHU VỰC DANH SÁCH MÓN ĂN (RECIPES SECTION) */
.recipes-section {
    padding: 100px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.section-title .line {
    width: 60px;
    height: 3px;
    background-color: var(--primary);
    margin: 0 auto;            /* Căn giữa đường kẻ trang trí */
}

/* LƯỚI DANH SÁCH MÓN ĂN (RECIPE GRID) 
   Sử dụng CSS Grid để tạo bố cục linh hoạt 
*/
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Tự động chia cột dựa trên độ rộng */
    gap: 40px;
}

/* THẺ MÓN ĂN (RECIPE CARD) */
.recipe-card {
    background: var(--bg-white);
    border-radius: 20px;
    overflow: hidden;          /* Đảm bảo hình ảnh không tràn khỏi góc bo tròn của thẻ */
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); /* Hiệu ứng đổ bóng chiều sâu */
    transition: var(--transition);
    border: 1px solid #eee;
}

.recipe-card:hover {
    transform: translateY(-10px); /* Hiệu ứng bay lên khi di chuột vào */
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}

.recipe-image {
    width: 100%;
    height: 250px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.recipe-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* Cắt ảnh vừa vặn khung hình mà không làm biến dạng */
}

.recipe-content {
    padding: 30px;
}

.recipe-content .category {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}

.recipe-content h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.recipe-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

/* CHI TIẾT CÔNG THỨC (RECIPE DETAILS - View phóng to/Chi tiết) */
.recipe-details {
    margin-top: 50px;
    background: var(--bg-warm);
    padding: 60px 40px;
    border-radius: 30px;
}

.recipe-details h3 {
    margin-bottom: 30px;
    font-size: 2rem;
    border-bottom: 2px solid var(--primary);
    display: inline-block;
    padding-bottom: 5px;
}

/* DANH SÁCH NGUYÊN LIỆU (INGREDIENTS LIST) */
.ingredients-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia làm 2 cột */
    gap: 15px;
    margin-bottom: 40px;
}

.ingredient-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ingredient-item::before {
    content: '•';              /* Thêm dấu chấm đầu dòng bằng CSS */
    color: var(--primary);
    font-weight: bold;
}

/* DANH SÁCH CÁC BƯỚC THỰC HIỆN (STEPS LIST) */
.steps-list {
    counter-reset: step-counter; /* Khởi tạo bộ đếm số bước */
}

.step-item {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.step-number {
    counter-increment: step-counter; /* Tự động tăng số thứ tự */
    font-size: 2rem;
    font-weight: 900;
    color: var(--accent);
    opacity: 0.4;
    min-width: 50px;
}

/* Nội dung của từng bước nấu */
.step-content h4 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

/* Hình minh họa cho bước thực hiện (Placeholder) */
.step-image-todo {
    margin-top: 15px;
    background: #e5e5e5;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #888;
    font-style: italic;
    font-size: 0.85rem;
    border: 2px dashed #ccc;   /* Đường viền nét đứt */
}

/* CHÂN TRANG (FOOTER) */
footer {
    padding: 80px 0 40px;
    background-color: var(--text); /* Nền đen để tạo sự tương phản */
    color: white;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Cột giới thiệu to hơn cột liên kết */
    gap: 60px;
    margin-bottom: 60px;
}

.footer-logo {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 20px;
}

.footer-about p {
    color: #999;
}

.footer-links h4 {
    margin-bottom: 25px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #999;
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 30px;
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}

/* HIỆU ỨNG CHUYỂN ĐỘNG (ANIMATIONS) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* Bắt đầu từ dưới và mờ */
    }
    to {
        opacity: 1;
        transform: translateY(0);    /* Kết thúc ở vị trí chuẩn và hiện rõ */
    }
}

.fade-in {
    animation: fadeInUp 1s ease forwards; /* Áp dụng hiệu ứng fadeInUp khi phần tử xuất hiện */
}

/* THIẾT KẾ ĐÁP ỨNG (RESPONSIVE DESIGN - Cho di động và máy tính bảng) */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .nav-links {
        display: none; /* Ẩn menu chính trên mobile - có thể thay bằng menu burger sau này */
    }
    
    .footer-grid {
        grid-template-columns: 1fr; /* Trên di động tất cả footer dồn thành 1 cột */
        gap: 40px;
    }
    
    .recipe-grid {
        grid-template-columns: 1fr;
    }
    
    .ingredients-list {
        grid-template-columns: 1fr;
    }
}