/**
 * Last Update: 2026-05-27
 * File: assets/frontend/css/layout-frontend.css
 * Description: Top bar, header, footer layout and styles (incl. search modal idle icon)
 */

/* ══════════════════════════════════════════════════════════════════════════
 * TOP BAR
 * ════════════════════════════════════════════════════════════════════════ */
.fe-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* z-index bumped to outrank vendor overlays — see comment on .fe-header */
    z-index: 1600;
    height: var(--fe-topbar-h);
    background-color: var(--fe-bg-topbar);
    color: var(--fe-text-topbar);
    transition: background-color var(--fe-transition-med);
}

.fe-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 16px;
}

/* Override .fe-container's default --fe-container-max (1200px) with a
   wider cap (1480px) — gives the topbar a bit more breathing room for
   contact info + social + lang + search without going full-bleed. */
.fe-topbar__inner.fe-container {
    max-width: 1480px;
}

.fe-topbar__left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.fe-topbar__right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fe-topbar__item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fe-text-topbar);
    font-size: 0.8rem;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity var(--fe-transition);
}

.fe-topbar__item svg,
.fe-topbar__item [data-lucide] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    stroke-width: 2;
}

.fe-topbar__item:hover {
    opacity: 1;
    text-decoration: none;
    color: var(--fe-text-topbar);
}

.fe-topbar__icon {
    font-size: 0.85rem;
}

/* Social */
.fe-topbar__social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fe-topbar__social-link {
    display: flex;
    align-items: center;
    color: var(--fe-text-topbar);
    opacity: 0.7;
    transition: opacity var(--fe-transition), transform var(--fe-transition);
}

.fe-topbar__social-link svg,
.fe-topbar__social-link [data-lucide] {
    width: 15px;
    height: 15px;
    stroke-width: 2;
    flex-shrink: 0;
}

.fe-topbar__social-link:hover {
    opacity: 1;
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--fe-text-topbar);
}

/* Theme toggle */
.fe-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--fe-radius-sm);
    color: var(--fe-text-topbar);
    opacity: 0.8;
    transition: color var(--fe-transition), background-color var(--fe-transition), opacity var(--fe-transition);
}

.fe-theme-toggle:hover {
    opacity: 1;
    background-color: rgba(107, 80, 16, 0.15);
}

.fe-lang-btn {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fe-text-topbar);
    letter-spacing: 0.04em;
    padding: 2px 4px;
    border-radius: var(--fe-radius-sm);
    transition: color var(--fe-transition), background-color var(--fe-transition);
    opacity: 0.75;
}

.fe-lang-btn:hover,
.fe-lang-btn.is-active {
    color: var(--fe-text-topbar);
    background-color: rgba(107, 80, 16, 0.15);
    opacity: 1;
}

.fe-lang-sep {
    color: var(--fe-text-topbar);
    font-size: 0.7rem;
    opacity: 0.4;
}

/* Lang switcher (legacy buttons — kept for backward compat) */
.fe-topbar__lang {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Sun/moon icon toggle */
.fe-theme-toggle__icon--sun { display: none; }
.fe-theme-toggle__icon--moon { display: block; }

[data-theme="dark"] .fe-theme-toggle__icon--sun  { display: block; }
[data-theme="dark"] .fe-theme-toggle__icon--moon { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
 * SEARCH (topbar trigger + full-screen overlay)
 * ════════════════════════════════════════════════════════════════════════ */
.fe-topbar__search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin-left: 4px;
    background: transparent;
    border: none;
    color: var(--fe-text-topbar);
    cursor: pointer;
    border-radius: 6px;
    transition: background-color var(--fe-transition-fast), color var(--fe-transition-fast);
}
.fe-topbar__search-toggle:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--fe-color-primary, #C9A96E);
}
.fe-topbar__search-toggle svg,
.fe-topbar__search-toggle [data-lucide] {
    width: 18px;
    height: 18px;
}

/* Full-screen overlay — appears above everything, including the topbar */
.fe-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 9000;
    padding: 80px 20px 20px;
    opacity: 0;
    transition: opacity .2s ease;
}
.fe-search-overlay.is-open {
    display: flex;
    opacity: 1;
}

.fe-search-modal {
    width: 100%;
    max-width: 720px;
    background: var(--fe-bg, #fff);
    color: var(--fe-text, #1a1a1a);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
}

.fe-search-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--fe-border, rgba(0,0,0,0.08));
}
.fe-search-icon {
    width: 20px;
    height: 20px;
    color: var(--fe-text-muted, #888);
    flex-shrink: 0;
}
.fe-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    font-family: inherit;
    color: var(--fe-text, #1a1a1a);
    padding: 4px 0;
}
.fe-search-input::-webkit-search-cancel-button { display: none; }
.fe-search-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--fe-text-muted, #888);
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
}
.fe-search-close:hover { background: rgba(0,0,0,0.06); color: var(--fe-text, #1a1a1a); }
.fe-search-close svg { width: 18px; height: 18px; }

.fe-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.fe-search-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--fe-text-muted, #888);
    font-size: 0.9rem;
}

/* Idle state — icon-only hint shown before typing / when query < 2 chars */
.fe-search-idle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 52px 20px;
    cursor: pointer;
}
.fe-search-idle__label {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--fe-primary-dark, #8B6914);
}
[data-theme="dark"] .fe-search-idle__label {
    color: var(--fe-gold-300, #E0BF80);
}
.fe-search-idle__icon {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fe-bg-section, #F5ECD7);
    color: var(--fe-primary-dark, #8B6914);
}
.fe-search-idle__icon svg {
    width: 40px;
    height: 40px;
    stroke-width: 1.5;
}
[data-theme="dark"] .fe-search-idle__icon {
    background: rgba(255, 255, 255, 0.06);
    color: var(--fe-gold-300, #E0BF80);
}

.fe-search-section { padding: 8px 0; }
.fe-search-section + .fe-search-section {
    border-top: 1px solid var(--fe-border, rgba(0,0,0,0.06));
}
.fe-search-section__title {
    padding: 8px 18px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fe-text-muted, #888);
}

.fe-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    text-decoration: none;
    color: inherit;
    transition: background-color var(--fe-transition-fast);
}
.fe-search-result:hover {
    background-color: rgba(201, 169, 110, 0.08);
    text-decoration: none;
}
.fe-search-result__thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 6px;
    background: var(--fe-bg-muted, #f0f0f0);
}
.fe-search-result__thumb--placeholder {
    background: linear-gradient(135deg, #e8e1d2, #d4c4a3);
}
.fe-search-result__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fe-search-result__title {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--fe-text, #1a1a1a);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.fe-search-result__badge {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 1px 8px;
    border-radius: 9999px;
    background: rgba(201, 169, 110, 0.15);
    color: var(--fe-color-primary, #B8923A);
}

/* Dark theme palette */
[data-theme="dark"] .fe-search-modal {
    background: #1f2937;
    color: #e7e7e7;
}
[data-theme="dark"] .fe-search-input,
[data-theme="dark"] .fe-search-result__title { color: #e7e7e7; }
[data-theme="dark"] .fe-search-result:hover { background-color: rgba(201, 169, 110, 0.15); }
[data-theme="dark"] .fe-search-result__thumb { background: #2a3441; }

/* Mobile tweaks */
@media (max-width: 560px) {
    .fe-search-overlay { padding: 56px 12px 12px; }
    .fe-search-modal   { border-radius: 8px; }
    .fe-search-header  { padding: 12px 14px; }
    .fe-search-result__thumb { width: 48px; height: 48px; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * HEADER
 * ════════════════════════════════════════════════════════════════════════ */
.fe-header {
    position: fixed;
    top: var(--fe-topbar-h);
    left: 0;
    right: 0;
    /* z-index bumped from 190 → 1500. Reason: legacy iframe-youtube-api.js
       (used on /home) injects a "click to unmute" overlay button with inline
       `z-index: 1000`. Since .fe-header creates a stacking context, ALL its
       descendants — including .fe-dropdown — are capped at the header's own
       z-index in the parent stacking. Header must outrank 1000 so the
       mega-menu dropdown renders above the YouTube mute icon.
       Topbar bumped to 1600 to preserve "topbar > header" visual ordering. */
    z-index: 1500;
    height: var(--fe-header-h);
    background-color: var(--fe-bg-header);
    border-bottom: 1px solid var(--fe-border-gold);
    box-shadow: var(--fe-shadow-header);
    transition: background-color var(--fe-transition-med),
                box-shadow var(--fe-transition-med),
                border-color var(--fe-transition-med);
}

.fe-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 32px;
}

/* Same 1480px cap as .fe-topbar__inner so topbar + header line up
   together visually. Banner / body content below uses its own
   container width per page-type. */
.fe-header__inner.fe-container {
    max-width: 1480px;
}

/* Logo */
.fe-header__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.fe-header__logo:hover { text-decoration: none; }

.fe-header__logo-img {
    /* !important on dimensions because several CMS body contents ship an
       inline IIFE that does:
           document.querySelectorAll('img').forEach(i => {
               i.style.maxWidth = '100%'; i.style.height = 'auto';
           });
       That script was meant to make the article body responsive on tiny
       viewports, but its selector catches EVERY image on the page —
       including this logo — and the resulting `height: auto` lets the
       logo balloon to whatever natural size the source file has. The
       !important is the cleanest centralized defense (we can't edit
       every existing content row's pasted body to scope its selector). */
    height: 52px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
}

.fe-header__logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fe-gold-600);
}

/* Hamburger */
.fe-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 4px;
    border-radius: var(--fe-radius-sm);
    color: var(--fe-text-header);
    transition: background-color var(--fe-transition);
}

.fe-hamburger:hover {
    background-color: var(--fe-bg-section);
}

.fe-hamburger__bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    transition: transform var(--fe-transition-med), opacity var(--fe-transition-med);
}

/* Hamburger open state */
.fe-hamburger.is-open .fe-hamburger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.fe-hamburger.is-open .fe-hamburger__bar:nth-child(2) {
    opacity: 0;
}
.fe-hamburger.is-open .fe-hamburger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile overlay */
.fe-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    /* Sits just below header (1500) but above vendor overlays (e.g. YouTube
       mute-btn z-index 1000). Keeps the overlay covering page content while
       allowing the mobile menu (rendered inside header at higher context) to
       remain on top. */
    z-index: 1400;
    background-color: rgba(26,23,20,0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--fe-transition-med);
}

.fe-nav-overlay.is-visible {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
 * FOOTER
 * ════════════════════════════════════════════════════════════════════════ */
.fe-footer {
    background-color: var(--fe-bg-footer);
    color: var(--fe-text-footer);
    margin-top: 64px;
    transition: background-color var(--fe-transition-med);
}

.fe-footer__inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 48px;
    padding-top: 56px;
    padding-bottom: 48px;
}

.fe-footer__col {}

.fe-footer__col--brand {}

/* Logo */
.fe-footer__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 16px;
}

.fe-footer__logo:hover { text-decoration: none; }

.fe-footer__logo-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fe-gold-300);
}

.fe-footer__address {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--fe-text-footer);
    margin-bottom: 20px;
}

/* Social */
.fe-footer__social {
    display: flex;
    gap: 12px;
}

.fe-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.08);
    color: var(--fe-text-footer);
    transition: background-color var(--fe-transition), color var(--fe-transition),
                transform var(--fe-transition);
}

.fe-footer__social-link:hover {
    background-color: var(--fe-gold-500);
    color: #FFFFFF;
    transform: translateY(-2px);
    text-decoration: none;
}

/* Footer heading */
.fe-footer__heading {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fe-text-footer-heading);
    margin-bottom: 16px;
}

/* Footer links */
.fe-footer__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fe-footer__link-item {}

.fe-footer__link {
    font-size: 0.875rem;
    color: var(--fe-text-footer);
    text-decoration: none;
    transition: color var(--fe-transition), padding-left var(--fe-transition);
    display: inline-block;
}

.fe-footer__link:hover {
    color: var(--fe-gold-300);
    padding-left: 4px;
    text-decoration: none;
}

/* Footer contact */
.fe-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fe-footer__contact-link,
.fe-footer__contact-item {
    font-size: 0.875rem;
    color: var(--fe-text-footer);
    text-decoration: none;
    transition: color var(--fe-transition);
}

.fe-footer__contact-link:hover {
    color: var(--fe-gold-300);
    text-decoration: none;
}

/* Bottom bar */
.fe-footer__bottom {
    background-color: var(--fe-bg-footer-bottom);
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.fe-footer__copyright {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    text-align: center;
    margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .fe-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    .fe-footer__col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .fe-hamburger { display: flex; }

    /* TopBar mobile:
       - keep `__left` visible so the phone icon + number anchor to the left
       - hide only the email text label in `__right` (icon stays clickable)
       - tighten spacing so the row fits comfortably on small viewports
       NOTE: globe link in social cluster also shows on mobile to anchor
       the cluster; if it crowds the row, can be hidden separately. */
    .fe-topbar__inner   { gap: 8px; }
    .fe-topbar__right   { gap: 10px; }
    .fe-topbar__social  { gap: 8px; }

    /* Hide ONLY the email text — `__right .fe-topbar__item` is the email link.
       Phone label in `__left .fe-topbar__item` stays visible by design. */
    .fe-topbar__right .fe-topbar__item span { display: none; }

    .fe-footer__inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 40px;
        padding-bottom: 32px;
    }

    .fe-footer__col--brand {
        grid-column: auto;
    }
}

/* Extra-small (≤420px) — drop phone label if it crowds, keep just the icon */
@media (max-width: 420px) {
    .fe-topbar__left .fe-topbar__item span { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
 * SCROLL-TO-TOP BUTTON
 *
 * Fixed at bottom-right, stacked ABOVE the kin-chatbot "คุยกับเรา" widget
 * (so the two don't overlap). Hidden by default; the IIFE in incFooter.php
 * toggles `.is-visible` once the user has scrolled past 60% of the page.
 *
 * z-index 199 keeps it below the topbar (200) but above body content.
 * Respects prefers-reduced-motion (transition + hover-lift disabled).
 * ════════════════════════════════════════════════════════════════════════ */
.fe-scroll-top {
    position: fixed;
    bottom: 15px;       /* per user spec — anchor to bottom edge */
    right: 20px;
    z-index: 199;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--fe-gold-400);
    color: var(--fe-text-on-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 250ms ease, transform 250ms ease, visibility 250ms;
}

.fe-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fe-scroll-top:hover {
    background: var(--fe-gold-500);
    transform: translateY(-2px);
}

.fe-scroll-top:focus-visible {
    outline: 2px solid var(--fe-gold-400);
    outline-offset: 3px;
}

/* The SVG inside should not steal pointer events from the button hit-area */
.fe-scroll-top svg { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .fe-scroll-top,
    .fe-scroll-top:hover {
        transition: none;
        transform: none;
    }
}

@media (max-width: 768px) {
    .fe-scroll-top {
        bottom: 15px;
        right: 14px;
        width: 40px;
        height: 40px;
    }
}