/*
Theme Name: Bien Hoa Jobs
Theme URI: https://bienhoa.com
Author: Bien Hoa Team
Author URI: https://bienhoa.com
Description: A modern job board theme for Bien Hoa, Dong Nai with Tailwind CSS
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bienhoa-jobs
Tags: job-board, tailwind, jobs, recruitment

This theme uses Tailwind CSS for styling.
*/

/* Prose — Inter font & heading weights */
.prose-sm h1,
.prose-sm h2,
.prose-sm h3,
.prose-sm h4,
.prose-sm h5,
.prose-sm h6 {
    font-weight: 800;
    font-family: 'Inter', sans-serif;
}

/* Prose list styles — override Tailwind preflight reset */
.prose-sm ul {
    list-style-type: disc;
    padding-left: 1.625em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.prose-sm ol {
    list-style-type: decimal;
    padding-left: 1.625em;
    margin-top: 1em;
    margin-bottom: 1em;
}



.prose-sm ul ul,
.prose-sm ol ol,
.prose-sm ul ol,
.prose-sm ol ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Custom scrollbar for sidebar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* WordPress core styles */
.alignleft {
    float: left;
    margin-right: 1.5em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    white-space: nowrap;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* =========================================================================
   Dòng lương / địa điểm / thời gian cho thẻ tin trên điện thoại
   -------------------------------------------------------------------------
   Cột bên phải của thẻ tin dùng "hidden sm:flex" nên trên máy < 640px người
   dùng không thấy lương của tin nào. Dòng này thay thế.

   Viết bằng CSS thường chứ không bằng class Tailwind: assets/css/output.css là
   bản BIÊN DỊCH SẴN, chỉ chứa những class đã có trong mã nguồn lúc build —
   "mt-1.5", "gap-x-2", "gap-y-1" chẳng hạn đều KHÔNG có. Trước khi dùng một
   class Tailwind mới, phải grep nó trong output.css.
   ========================================================================= */
/* Chỉ hiện dưới 640px — đúng ngưỡng `sm` của Tailwind, để dòng này và cột
   lương/địa điểm bên phải ("hidden sm:flex") luôn chỉ có MỘT cái hiện.
   Không dùng class `sm:hidden` cho nó nữa: quy tắc .bh-jobmeta-m ở file này
   nằm sau output.css và cùng độ ưu tiên nên đè mất .sm\:hidden, làm dòng meta
   hiện cả trên máy tính, trùng với cột bên phải. */
.bh-jobmeta-m {
    display: none;
}

@media (max-width: 639px) {
    .bh-jobmeta-m {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
        font-size: 12px;
        line-height: 1.5;
        color: #6b7280;
    }
}

/* Mũi tên cuối thẻ hàng: chỉ trang trí, ẩn trên điện thoại để nhường 40px cho
   lương + nơi làm việc. Viết tay vì output.css KHÔNG có class `sm:inline` —
   để nguyên "hidden sm:inline" thì mũi tên biến mất ở mọi kích thước. */
.bh-row-arrow {
    display: none;
}

@media (min-width: 640px) {
    .bh-row-arrow {
        display: inline;
    }
}

/* Gói gọn đúng MỘT dòng: cho lương và địa điểm cùng co lại và cắt bằng dấu ba
   chấm khi thiếu chỗ, thay vì để cả cụm xuống dòng. Thả tự do thì thẻ tin trên
   máy 375px cao tới 217px, mà danh sách có tới 20 thẻ. Mốc thời gian ngắn và
   cố định nên giữ nguyên, không cho co. */
.bh-jobmeta-m > * {
    white-space: nowrap;
}

/* Mức lương được ưu tiên hiện đủ: chặn ở 55% bề ngang để một mức lương dài
   ("5.950.000 - 6.590.000đ (chưa gồm tăng ca)") không nuốt hết chỗ của nơi làm
   việc, nhưng "Thỏa thuận" hay "10 - 30 triệu" thì luôn hiện trọn. */
.bh-jobmeta-m__salary {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    color: #ea2a33;
}

.bh-jobmeta-m__sep {
    flex: none;
    color: #d1d5db;
}

.bh-jobmeta-m__place {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.bh-jobmeta-m__place .material-symbols-outlined {
    flex: none;
    font-size: 14px;
}

.bh-jobmeta-m__place > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================================
   Phân trang danh sách việc làm
   -------------------------------------------------------------------------
   paginate_links() in ra .page-numbers trần. Markup cũ cố style bằng biến thể
   tuỳ ý của Tailwind ([&_a]:px-3.5 …) nhưng assets/css/output.css là bản biên
   dịch sẵn và không hề chứa những class đó, nên nút phân trang chưa bao giờ có
   style — đo trên bản live: 10×20px. Style thật viết ở đây.
   ========================================================================= */
.bh-pager {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.bh-pager .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #4b5563;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.bh-pager a.page-numbers:hover {
    border-color: #ea2a33;
    color: #ea2a33;
}

.bh-pager .page-numbers.current {
    background: #ea2a33;
    border-color: #ea2a33;
    color: #fff;
}

.bh-pager .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    color: #9ca3af;
    min-width: 28px;
    padding: 0 4px;
}

/* =========================================================================
   Mobile
   ========================================================================= */
@media (max-width: 767px) {

    /* iOS Safari tự phóng to cả trang khi người dùng chạm vào ô nhập có cỡ chữ
       dưới 16px, rồi không tự thu lại — form ứng tuyển và ba ô lọc đang để 14px
       (class .text-sm của Tailwind) nên lần nào chạm cũng giật.
       Cần !important vì .text-sm là selector class, đè được selector phần tử. */
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Link trong footer chỉ cao 20px — dưới ngưỡng chạm thoải mái (~44px).
       Cho mỗi link một vùng bấm cao 40px và bỏ khoảng cách thừa giữa các dòng
       để footer không dài thêm quá nhiều. */
    footer ul > li > a {
        display: flex;
        align-items: center;
        min-height: 40px;
    }

    footer ul > li + li {
        margin-top: 0;
    }

    /* Hàng link dưới cùng footer (Giới thiệu / Liên hệ / Chính sách / Sitemap)
       chỉ cao 16px — nhỏ nhất trên cả trang. */
    .bh-footer-bottom a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    /* Ô lọc ngành nghề / khu vực / KCN ở trang danh sách: 32px → 44px. */
    .bh-facet-link {
        min-height: 44px;
    }

    /* Dấu × trên chip bộ lọc đang bật (14px) và nút "Xoá tất cả" (24px). */
    .bh-chip-x {
        min-width: 32px;
        min-height: 32px;
        justify-content: center;
        margin-right: -8px;
    }

    .bh-chip-clear {
        min-height: 40px;
    }

    /* Nút mạng xã hội ở footer: 36×36 → 40×40.
       Dùng CSS chứ không đổi class w-9 → w-10: output.css không có .w-10. */
    footer a[aria-label] {
        width: 40px;
        height: 40px;
    }
}