/**
 * tdk-global.css
 * Global CSS overrides and base styles for the Nhachill theme.
 * Loaded on every page via functions.php (nhachill_enqueue_scripts).
 * This file includes:
 *   - Global styles (smooth scroll, admin bar offset)
 *   - Header: Scroll-aware header fixes, drawer navigation styles
 *   - Footer: Social links, footer expansion styles
 */

/**
 * GLOBAL
 * 
 * Include:
 * - Smooth scroll behavior for anchor links
 * - Fixes for image alignment classes (aligncenter, alignleft, alignright, alignfull, alignwide)
 *
 */

 /* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Sửa lỗi hình ảnh bị lệch do Tailwind Typography */
.entry-content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.entry-content .alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}
.entry-content .alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}
.entry-content .alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}
.entry-content .alignwide {
    margin-left: -10%;
    margin-right: -10%;
    width: 120%;
    max-width: 120%;
}

/**
 * HEADER 
 * Scroll-aware Header Fixes & Drawer Navigation
 * Includes:
 * - Các lớp tiện ích để điều khiển trạng thái của top-bar (ẩn, hiện, dịch chuyển)
 * - Các lớp cho Drawer Navigation (mở rộng menu con, hiệu ứng hover)
 *
 */

/* Topbar */
#top-bar.h-0 {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

#top-bar.opacity-0 {
    opacity: 0 !important;
}

#top-bar.-translate-y-full {
    transform: translateY(-100%) !important;
}

#top-bar > * {
    transition: all 0.4s ease !important;
}

/* WP Admin Bar Overrides */


.admin-bar #top-bar {
    top: 32px !important;
}
.admin-bar #drawer-toggle-btn {
    top: calc(4rem + 32px) !important;
}
.admin-bar #drawer-toggle-btn.is-scrolled {
    top: calc(1.5rem + 32px) !important;
}

.admin-bar header.fixed {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar #top-bar {
        top: 46px !important;
    }
    .admin-bar #drawer-toggle-btn {
        top: calc(4rem + 46px) !important;
    }
    .admin-bar #drawer-toggle-btn.is-scrolled {
        top: calc(1.5rem + 46px) !important;
    }
    .admin-bar header.fixed {
        top: 46px;
    }
}

/* Drawer Navigation Styles */
.tdk-drawer-nav-group {
    margin-top: 0.5rem;
}

.tdk-drawer-nav-link {
    display: block;
    color: #0F2C59;
    font-weight: 700;
    font-size: 1.125rem;
    transition: color 0.3s ease-in-out;
    /* border-bottom: 1px solid #0F2C59; */
    padding-bottom: 0.5rem;
    position: relative;
}

.tdk-drawer-nav-group:hover .tdk-drawer-nav-link,
.tdk-drawer-nav-group.is-open .tdk-drawer-nav-link {
    color: #F9B529;
}

.tdk-drawer-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 2px;
    background-color: #0F2C59;
    transition: width 0.3s ease-in-out;
}

.tdk-drawer-nav-group:hover .tdk-drawer-nav-link::after,
.tdk-drawer-nav-group.is-open .tdk-drawer-nav-link::after {
    width: 100%;
}

.tdk-drawer-subnav-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-in-out;
}

.tdk-drawer-nav-group:hover .tdk-drawer-subnav-wrapper,
.tdk-drawer-nav-group.is-open .tdk-drawer-subnav-wrapper {
    grid-template-rows: 1fr;
}

.tdk-drawer-subnav {
    min-height: 0;
    overflow: hidden;
}

.tdk-drawer-subnav-inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    padding-top: 0;
    transition: padding-top 0.3s ease-in-out;
}

.tdk-drawer-nav-group:hover .tdk-drawer-subnav-inner,
.tdk-drawer-nav-group.is-open .tdk-drawer-subnav-inner {
    padding-top: 0.5rem;
}

.tdk-drawer-subnav-link {
    display: block;
    color: rgba(15, 44, 89, 0.8);
    transition: color 0.3s ease-in-out;
}

.tdk-drawer-subnav-link:hover {
    color: #F9B529;
}

/* Drawer Scrollbar Hide */
#left-drawer::-webkit-scrollbar,
#left-drawer nav::-webkit-scrollbar {
    display: none;
}

#left-drawer,
#left-drawer nav {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.tdk-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 9999px; /* Bo góc tròn mềm mại */
    font-weight: 700;
    height: 3.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1rem;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border: 2px solid #F9B529; /* Viền Vàng Gold */
    color: #0F2C59; /* Chữ xanh Navy */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.tdk-btn-secondary:hover:not(:disabled) {
    background-color: #F9B529;
    color: #0F2C59;
    transform: scale(1.05);
    box-shadow: 0 10px 15px -3px rgba(249, 181, 41, 0.3);
}

.tdk-btn-secondary:active:not(:disabled) {
    transform: scale(0.98);
}

/* Đổi màu icon linh hoạt theo Hover */
.tdk-btn-secondary svg {
    color: #F9B529;
    transition: color 0.3s ease-in-out;
}

.tdk-btn-secondary:hover:not(:disabled) svg {
    color: #0F2C59;
}

/**
 * FOOTER
 * Social Links & Footer Expansion
 * Includes:
 * - Các lớp cho hiệu ứng hover của Social Links (phóng to, đổi màu, hiện text)
 * - Các lớp cho hiệu ứng mở rộng Footer (chuyển đổi grid-template-rows, ẩn nút mở rộng khi đã mở)
 *
 */

/* Social */
.tdk-social-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #a8a29e; /* Tailwind's stone-400 */
    transition: color 0.4s ease-out;
    cursor: pointer;
    position: relative;
}

.tdk-social-link:hover {
    color: #F9B529;
}

.tdk-social-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; /* Kích thước nhỏ hơn lúc đầu */
    height: 2.5rem;
    border-radius: 9999px;
    border: 2px solid currentColor;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Hiệu ứng nảy lò xo */
    background-color: #0A192F; /* Che khuất text ở phía sau (nếu trùng màu footer) */
    z-index: 2;
}

.tdk-social-link:hover .tdk-social-icon-wrapper {
    transform: scale(1.25); /* Phóng to rõ rệt hơn khi hover */
    box-shadow: 0 0 15px currentColor;
}

.tdk-social-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.tdk-social-text {
    position: absolute; /* Tách khỏi luồng layout để không xô đẩy icon khác */
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px) scale(0.8);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0; /* Ẩn mặc định */
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    margin-top: 0.5rem;
}

.tdk-social-link:hover .tdk-social-text {
    opacity: 1; /* Hiện chữ khi hover */
    transform: translateX(-50%) translateY(0) scale(1);
}

@media (min-width: 768px) {
    .tdk-social-icon-wrapper { width: 2.75rem; height: 2.75rem; }
    .tdk-social-icon { width: 1.25rem; height: 1.25rem; }
    .tdk-social-text { font-size: 11px; }
}

/* Footer Expansion */
.tdk-footer-swappable-card {
    display: grid;
    grid-template-rows: 0fr;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
}

.tdk-footer-swappable-card > div {
    min-height: 0;
}

.tdk-footer-swappable-card.is-active {
    grid-template-rows: 1fr;
}

/* Ẩn nút mũi tên Mở rộng khi Footer đã được mở */
#tdk-site-footer.is-expanded #footer-expand-wrapper {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

/* Workflow:
1. Mặc định: collapsed is-active (1fr), expanded (0fr)
2. Khi #tdk-site-footer.is-expanded: collapsed (0fr), expanded is-active (1fr)
*/
#tdk-site-footer.is-expanded #footer-collapsed-content {
    grid-template-rows: 0fr;
}

#tdk-site-footer.is-expanded #footer-expanded-content {
    grid-template-rows: 1fr;
}