/*
Theme Name: JL Coder Theme
Theme URI: https://jlcoder.vn
Author: jlcoder.vn
Author URI: https://jlcoder.vn
Description: Custom Twenty Twenty-Five theme.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
	outline: none !important; /* Loại bỏ outline cho tất cả các liên kết */
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/* Chỉ khi màn hình lớn hơn 1024px mới dùng hiệu ứng */
@media (min-width: 1024px) {
    /* Hiệu ứng zoom nhẹ khi hover vào bài viết */
    .wp-block-post-template li {
/*         will-change: transform; */
        transition: transform 0.3s ease-in-out;
    }
    .wp-block-post-template li:hover {
        transform: scale(1.05);
    }
}

/* Đổi màu nền thanh Search */
.wp-block-search .wp-block-search__input {
    background-color: #F3F4F6; /* Đổi màu nền */
    border: 1px solid #ccc; /* Viền nhẹ */
    color: #333; /* Màu chữ */
}

/* Kiểm tra xem trình duyệt có hỗ trợ trước khi áp dụng */
@supports (backdrop-filter: blur(10px)) {
    /* Làm mờ thanh header */
    div.wp-block-group.wp-container-1.is-position-sticky {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        background-color: rgba(242, 243, 245, 0.5) !important;
    }
}

/* Layout danh sách bài viết */
.wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    list-style: none;
    padding: 0;
}

/* Hiệu ứng khi bài viết ẩn/hiện */
.wp-block-post {
    transition: opacity 0.3s ease;
    opacity: 1;
}

.wp-block-post[style*="display: none"] {
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Định dạng tag (tùy chọn) */
.wp-block-post-terms .tag {
    display: inline-block;
    margin: 0 5px;
    padding: 2px 8px;
    background: #f0f0f0;
    border-radius: 3px;
    font-size: 12px;
}

/* Loại bỏ dấu gạch ngang tiêu đề website */
.wp-block-site-title a:hover {
    text-decoration: none;
}

/* Loại bỏ dấu gạch ngang các nút bên dưới Footer */
/*
.wp-block-navigation__container a {
    text-decoration: none;
}
.wp-block-navigation__container a:hover {
    text-decoration: none;
}
*/

/* Loại bỏ outline bên ngoài bài viết */
/* Loại bỏ outline và box-shadow cho tất cả các trạng thái */
/* Ghi đè CSS từ theme hoặc plugin */
.wp-block-post a:focus,
.wp-block-post a:active,
.wp-block-post a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

/* Loại bỏ outline khi nhấp chuột cho bài viết */
.post-link:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Giữ lại outline cho bài viết khi điều hướng bằng bàn phím */
.post-link:focus-visible {
    outline: 2px solid #0073e6; /* Màu sắc tùy chọn */
}

/* Loại bỏ outline khi nhấp chuột cho các nút */
button:focus:not(:focus-visible),
a.wp-element-button:focus:not(:focus-visible),
.wp-block-button__link:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Giữ lại outline cho nút khi điều hướng bằng bàn phím */
button:focus-visible,
a.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 2px solid #0073e6; /* Màu sắc tùy chọn */
    outline-offset: 2px; /* Khoảng cách giữa outline và phần tử */
}

/* Loại bỏ outline khi focus hoặc active cho liên kết */
a:focus:not(:focus-visible) {
    outline: none;
	box-shadow: none;
}

/* Sử dụng :focus-visible để giữ outline cho liên kết khi điều hướng bằng bàn phím */
a:focus-visible {
    outline: 2px solid #0073e6 !important;
    outline-offset: 2px !important;
}

/* Nút Tải Thêm */
.load-more-button {
    background-color: #007cba;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s ease;
}
.load-more-button:hover {
    background-color: #005a87;
}

/* Mở rộng vùng nhấp cho bài đăng */

/* Cho UI di động */
@media (max-width: 1024px) {
    .wp-site-blocks, /* Toàn bộ trang */
    .wp-block-group, /* Các nhóm nội dung */
    .wp-block-query, /* Khối hiển thị bài viết */
    .wp-block-post-template, /* Template bài viết */
    .alignwide {
        max-width: 100% !important;
    }
	
	.wp-block-post-template {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Hiển thị 1 bài viết trên hàng */
        gap: 20px !important; /* Khoảng cách giữa các bài viết */
    }

    /* Đảm bảo văn bản "Hôm Nay Có Gì?" không bị giới hạn */
    .wp-block-group p {
        max-width: 100% !important;
    }
	
	/* Mở rộng dấu phân cách */
    .wp-block-separator {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
	
	.wp-block-search {
        max-width: 100% !important;
    }

    /* Mở rộng Footer */
    .wp-block-template-part {
        max-width: 100% !important;
    }
	
	/* Tăng khoảng cách giữa Trang Chủ và Tìm Kiếm */
    .wp-block-navigation__container .wp-block-navigation-item:first-child {
        margin-right: 0px; /* Chỉ áp dụng cho Trang Chủ */
    }

    /* Loại bỏ nền, xóa padding trái/phải và đổi màu chữ của nút Hỗ Trợ */
    .wp-block-buttons .wp-block-button__link {
        background: transparent !important; /* Xóa nền */
        padding-left: 0 !important; /* Xóa padding trái */
        padding-right: 0 !important; /* Xóa padding phải */
        color: #000000 !important; /* Đổi màu chữ thành đen */
    }
}