/*
 * Header skin: Paper & Red (khớp bộ màu homepage / .sdc).
 * Header dùng chung mọi trang, nhưng sdc.css chỉ nạp ở store/home/category,
 * nên skin header phải là file global riêng. Cách làm: redefine đúng các token
 * mà header cha đang dùng (surface/text/muted/border) trong phạm vi .site-header
 * -> nền, viền, chữ, dropdown, dải fade nav đổi theo 1 lần; thêm đỏ cho
 * hover/active để ăn với accent trang. Giá trị lấy y hệt sdc.css.
 */

/* ---------- Sáng (khớp .sdc light): header theo nền site ---------- */
.site-header {
    /* Freeze the masthead on scroll. The parent already sets position:sticky,
       but its `contain: layout style` can suppress sticky in some engines, so
       re-assert sticky and drop the containment. Loads after the parent bundle
       (header-skin depends on acms-main) so this wins without !important. */
    position: sticky;
    top: 0;
    z-index: 200;
    contain: none;
    --color-surface: #FFFDF8;        /* masthead giấy sáng, hơi nhạt hơn nền #F7F3EA */
    --color-surface-hover: #F1EADB;  /* hover ấm */
    --color-text: #191714;           /* mực */
    --color-text-muted: #807A6F;     /* xám ấm cho nav/icon */
    --color-border: #DED7C7;
    --color-border-subtle: #EAE4D6;
}

/* Header brand = Playfair Display wordmark (PNG logo swapped for text via the
 * get_custom_logo filter in functions.php). Red like the logo, a touch larger,
 * nowrap so it never breaks; smaller on the scrolled header and on mobile. */
.site-header .header__logo { max-width: none; overflow: visible; }
.site-header .header__wordmark-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; line-height: 1; }
.site-header .header__wordmark {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -.01em;
    color: #8A0729;
    white-space: nowrap;
}
.site-header .header__logo-mark {
    height: 32px;
    width: auto;
    display: block;
    flex: none;
    border-radius: 8px;
}
.site-header .header__logo-sep {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 400; /* Playfair variable floor is 400; 300 would synthesize */
    font-size: 30px;
    line-height: 1;
    color: var(--color-text-muted, #9A9384);
    transform: translateY(-1px);
}
.site-header.is-scrolled .header__wordmark { font-size: 28px; }
.site-header.is-scrolled .header__logo-mark { height: 28px; }
.site-header.is-scrolled .header__logo-sep { font-size: 26px; }
@media (max-width: 640px) {
    .site-header .header__wordmark { font-size: 24px; }
    .site-header .header__logo-mark { height: 26px; }
    .site-header .header__logo-sep { font-size: 24px; }
    .site-header .header__wordmark-link { gap: 3px; }
}

/* Đỏ cho link nav hover + mục đang xem (kiểu RetailCoupons) */
.site-header .header__menu > .menu-item > a:hover,
.site-header .header__menu > .menu-item.current-menu-item > a,
.site-header .header__menu .sub-menu li a:hover,
.site-header .header__menu > .menu-item--more .more-menu__dropdown li a:hover {
    color: #E02B2B;
    background-color: #F7ECE9;
}

.site-header .header__action-btn:hover,
.site-header .header__icon-btn:hover,
.site-header .header__menu > .menu-item--more > button:hover,
.site-header .header__menu > .menu-item--more.is-open > button {
    color: #E02B2B;
}

/* ---------- Tối (khớp [data-theme=dark] .sdc) ---------- */
[data-theme="dark"] .site-header {
    --color-surface: #23201B;
    --color-surface-hover: #2E2A23;
    --color-text: #EAE6DC;
    --color-text-muted: #9A9384;
    --color-border: #3A362E;
    --color-border-subtle: #2E2B25;
}

/* Header wordmark: brighter red on the dark masthead (matches the sdc dark red) */
[data-theme="dark"] .site-header .header__wordmark { color: #E7406D; }

[data-theme="dark"] .site-header .header__menu > .menu-item > a:hover,
[data-theme="dark"] .site-header .header__menu > .menu-item.current-menu-item > a,
[data-theme="dark"] .site-header .header__menu .sub-menu li a:hover,
[data-theme="dark"] .site-header .header__menu > .menu-item--more .more-menu__dropdown li a:hover {
    color: #FF6459;
    background-color: #3A211E;
}

[data-theme="dark"] .site-header .header__action-btn:hover,
[data-theme="dark"] .site-header .header__icon-btn:hover,
[data-theme="dark"] .site-header .header__menu > .menu-item--more > button:hover,
[data-theme="dark"] .site-header .header__menu > .menu-item--more.is-open > button {
    color: #FF6459;
}

/* ---------- Long dropdown (Categories = 27 departments) ----------
   Cap the height and let it scroll so the menu never runs past the viewport.
   Slim scrollbar in the header palette; works in both light and dark. */
.site-header .header__menu .sub-menu {
    max-height: 72vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.site-header .header__menu .sub-menu::-webkit-scrollbar { width: 8px; }
.site-header .header__menu .sub-menu::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 8px;
}

/* ---------- Header cleanup (user 06/07/2026) ---------- */
/* Remove the search (magnifier) button: both the compact icon and the desktop
   action variant carry data-search-toggle. */
.site-header [data-search-toggle] { display: none !important; }

/* "Today's Deals" CTA hidden for now (href="#", feature not built yet - see
   memory). Covers the desktop header CTA and the mobile nav CTA. */
.site-header .header__cta,
.mobile-nav__cta { display: none !important; }

/* Affiliate-disclosure "Learn more" link in the site red, not the teal primary. */
.post-disclosure__link { color: #E02B2B; }
[data-theme="dark"] .post-disclosure__link { color: #FF6459; }

/* Nav was centered in a flex:1 wrapper, so after the search/CTA were removed the
   menu sat marooned in the middle, far from the theme toggle. Right-align it and
   drop the right margin so the items sit close to the sun icon. */
.site-header .header__nav { justify-content: flex-end; margin-right: 0; }

/* ---------- Footer surface: share the masthead's warm dark "paper" tone ----------
   The parent paints .site-footer with var(--color-surface). In dark mode that fell
   back to the parent's cool slate (#1A1D24) while the header above uses the warm
   #23201B, so the two dark tones did not match. Mirror the header's dark token
   block so the footer reads as a continuation of the masthead (background, border,
   text). Light mode already matches (both #FFFFFF) so it needs no override. */
[data-theme="dark"] .site-footer {
    --color-surface: #23201B;
    --color-surface-hover: #2E2A23;
    --color-text: #EAE6DC;
    --color-text-muted: #9A9384;
    --color-border: #3A362E;
    --color-border-subtle: #2E2B25;
}

/* ---------- Footer brand: same lockup as the header (favicon mark + | +
   wordmark), a touch bigger. acms_footer_logo theme_mod is cleared so the footer
   uses its icon+text fallback; we repaint the icon span as the site favicon and
   the text span as the Playfair Display wordmark. ---------- */
.site-footer .footer__logo { gap: 6px; }
.site-footer .footer__logo-icon {
    width: 40px;
    height: 40px;
    background: url("/wp-content/uploads/ddh-fav-128x128.jpg") center / cover no-repeat;
    border-radius: 8px;
}
.site-footer .footer__logo-icon i { display: none; }
.site-footer .footer__logo-text {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -.01em;
    color: #8A0729;
}
.site-footer .footer__logo-text::before {
    content: "|";
    margin-right: 6px;
    font-weight: 400; /* Playfair variable floor is 400; 300 would synthesize */
    color: var(--color-text-muted, #9A9384);
}
[data-theme="dark"] .site-footer .footer__logo-text { color: #E7406D; }

/* ---------- Footer social icons in their brand colours (both themes) ---------- */
.site-footer .footer__social-link .bi-facebook  { color: #1877F2; }
.site-footer .footer__social-link .bi-pinterest { color: #E60023; }
.site-footer .footer__social-link .bi-youtube   { color: #FF0000; }
.site-footer .footer__social-link .bi-linkedin  { color: #0A66C2; }
/* Instagram = its signature gradient (clipped to the glyph); solid fallback */
.site-footer .footer__social-link .bi-instagram {
    color: #EE2A7B;
    background: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 55%, #6228D7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}