/*
Theme Name: Kerja ID - GeneratePress Child
Theme URI: https://kerja.id
Author: Kerja ID Team
Author URI: https://kerja.id
Description: Child theme lowongan kerja berbasis GeneratePress. Dilengkapi Custom Post Type untuk Lowongan Kerja, Perusahaan, dan Pusat Bantuan (Docs). Menggunakan Bootstrap 5 untuk grid & komponen UI.
Template: generatepress
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kerja-id
Tags: job-board, bootstrap, child-theme, custom-post-type, translation-ready
*/

/* ==========================================================================
   Brand Variables
   ========================================================================== */
:root {
    --ki-pink: #D4537E;
    --ki-pink-dark: #993556;
    --ki-maroon: #4B1528;
    --ki-maroon-dark: #2C0E18;
    --ki-pink-light: #FBEAF0;
    --ki-pink-50: #FDF5F8;
    --ki-gray-50: #F8F7F5;
    --ki-gray-100: #F1EFE8;
    --ki-gray-200: #E5E3DC;
    --ki-gray-500: #888780;
    --ki-gray-700: #5F5E5A;
    --ki-gray-900: #2C2C2A;
    --ki-blue-bg: #E6F1FB;
    --ki-blue-text: #0C447C;
    --ki-teal-bg: #E1F5EE;
    --ki-teal-text: #085041;
    --ki-amber-bg: #FAEEDA;
    --ki-amber-text: #633806;
    --ki-purple-bg: #EEEDFE;
    --ki-purple-text: #3C3489;
    --ki-coral-bg: #FAECE7;
    --ki-coral-text: #712B13;
    --ki-red-bg: #FCEBEB;
    --ki-red-text: #791F1F;
}

/* ==========================================================================
   GeneratePress Overrides — Header
   ========================================================================== */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--ki-gray-200);
    box-shadow: none;
}

/* Custom logo / brand */
.ki-brand {
    font-size: 22px;
    font-weight: 700;
    color: var(--ki-gray-900);
    text-decoration: none;
    letter-spacing: -0.02em;
}
.ki-brand .dot { color: var(--ki-pink); }
.ki-brand:hover { color: var(--ki-gray-900); text-decoration: none; }

/* Nav link overrides */
.main-navigation a,
.main-navigation .main-nav ul li a {
    color: var(--ki-gray-700);
    font-weight: 500;
    font-size: 14px;
}
.main-navigation a:hover,
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
    color: var(--ki-pink);
}

/* CTA buttons in nav */
.ki-nav-cta {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ki-nav-cta .btn-masuk {
    padding: 6px 16px;
    font-size: 13px;
    border: 1px solid var(--ki-gray-200);
    border-radius: 6px;
    color: var(--ki-gray-700);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}
.ki-nav-cta .btn-masuk:hover { border-color: var(--ki-pink); color: var(--ki-pink); }

.ki-nav-cta .btn-pasang {
    padding: 6px 16px;
    font-size: 13px;
    background: var(--ki-pink);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}
.ki-nav-cta .btn-pasang:hover { background: var(--ki-pink-dark); }

/* ==========================================================================
   GeneratePress Overrides — Footer
   ========================================================================== */
.ki-footer {
    background: var(--ki-maroon);
    color: rgba(255,255,255,0.85);
    padding: 3rem 0 1.5rem;
    margin-top: 3rem;
}
.ki-footer h6 {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    font-weight: 600;
}
.ki-footer a {
    color: rgba(255,255,255,0.7);
    display: block;
    padding: 3px 0;
    font-size: 14px;
    text-decoration: none;
}
.ki-footer a:hover { color: #fff; }
.ki-footer-brand {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}
.ki-footer-brand .dot { color: var(--ki-pink); }
.ki-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 2rem;
    padding-top: 1.5rem;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}

/* Hide GP's default footer if we use custom */
.site-footer:has(+ .ki-footer),
.ki-hide-gp-footer .site-info {
    display: none;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.ki-hero {
    background: var(--ki-pink-light);
    padding: 3.5rem 0;
}
.ki-hero .hero-badge {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--ki-maroon);
    font-weight: 600;
    text-transform: uppercase;
}
.ki-hero h1 {
    font-size: 2.5rem;
    color: var(--ki-maroon);
    line-height: 1.2;
    font-weight: 700;
    margin: 8px 0 12px;
}
.ki-hero .lead {
    color: var(--ki-pink-dark);
    font-size: 1rem;
}

.ki-search-box {
    background: #fff;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    gap: 8px;
    max-width: 600px;
    box-shadow: 0 4px 24px rgba(75,21,40,0.08);
}
.ki-search-box input[type="text"] {
    border: none;
    padding: 10px 14px;
    font-size: 14px;
    flex: 1;
    outline: none;
    background: transparent;
    min-width: 0;
}
.ki-search-box input[type="text"]:not(:last-of-type) {
    border-right: 1px solid var(--ki-gray-200);
}
.ki-search-box .btn {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .ki-hero h1 { font-size: 1.75rem; }
    .ki-hero { padding: 2.5rem 0; }
    .ki-search-box { flex-direction: column; }
    .ki-search-box input[type="text"]:not(:last-of-type) { border-right: none; border-bottom: 1px solid var(--ki-gray-200); }
}

/* ==========================================================================
   Buttons — Bootstrap-style using brand colors
   ========================================================================== */
.btn-ki-primary {
    background: var(--ki-pink);
    border: 1px solid var(--ki-pink);
    color: #fff;
    font-weight: 500;
}
.btn-ki-primary:hover { background: var(--ki-pink-dark); border-color: var(--ki-pink-dark); color: #fff; }

.btn-ki-dark {
    background: var(--ki-maroon);
    border: 1px solid var(--ki-maroon);
    color: #fff;
    font-weight: 500;
}
.btn-ki-dark:hover { background: var(--ki-maroon-dark); border-color: var(--ki-maroon-dark); color: #fff; }

.btn-ki-outline {
    background: transparent;
    border: 1px solid var(--ki-pink);
    color: var(--ki-pink);
    font-weight: 500;
}
.btn-ki-outline:hover { background: var(--ki-pink); color: #fff; }

/* ==========================================================================
   Category Cards (Home)
   ========================================================================== */
.ki-category-card {
    padding: 1.25rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: block;
    color: inherit;
    text-decoration: none;
}
.ki-category-card:hover { transform: translateY(-2px); color: inherit; text-decoration: none; }
.ki-category-card h5 { font-size: 15px; margin-bottom: 2px; font-weight: 600; }
.ki-category-card small { font-size: 12px; opacity: 0.8; }

/* ==========================================================================
   Job Card
   ========================================================================== */
.ki-job-card {
    border: 1px solid var(--ki-gray-200);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    background: #fff;
    transition: all 0.2s ease;
    height: 100%;
}
.ki-job-card:hover {
    border-color: var(--ki-pink);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(75,21,40,0.06);
}
.ki-job-card.featured { border-left: 3px solid var(--ki-pink); }

.ki-company-logo {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--ki-maroon);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    overflow: hidden;
}
.ki-company-logo.lg { width: 56px; height: 56px; border-radius: 10px; font-size: 18px; }
.ki-company-logo.xl { width: 80px; height: 80px; border-radius: 12px; font-size: 24px; }
.ki-company-logo img { width: 100%; height: 100%; object-fit: cover; }

.ki-job-tag {
    display: inline-block;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    margin-right: 4px;
    margin-bottom: 4px;
    font-weight: 500;
}

.ki-salary {
    color: var(--ki-maroon);
    font-weight: 600;
    font-size: 14px;
}

/* ==========================================================================
   Filter Sidebar
   ========================================================================== */
.ki-filter-sidebar {
    background: var(--ki-gray-50);
    border-radius: 8px;
    padding: 1.25rem;
}
.ki-filter-sidebar h6 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ki-gray-500);
    margin-bottom: 10px;
    font-weight: 600;
}

/* ==========================================================================
   Single Job Header
   ========================================================================== */
.ki-job-header {
    background: var(--ki-pink-light);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Company Profile
   ========================================================================== */
.ki-company-banner {
    height: 120px;
    background: var(--ki-maroon);
    border-radius: 12px 12px 0 0;
}
.ki-company-header {
    padding: 0 1.5rem 1.5rem;
    margin-top: -40px;
}
.ki-stat-card {
    background: var(--ki-gray-50);
    padding: 1rem;
    border-radius: 8px;
}
.ki-stat-card .label { font-size: 11px; color: var(--ki-gray-500); text-transform: uppercase; letter-spacing: 0.5px; }
.ki-stat-card .value { font-size: 20px; font-weight: 600; margin-top: 2px; }

.ki-tab-active {
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ki-pink);
    font-weight: 600;
    color: var(--ki-gray-900);
}

/* ==========================================================================
   Blog
   ========================================================================== */
.ki-blog-featured {
    background: var(--ki-pink-light);
    padding: 1.5rem;
    border-radius: 12px;
}
.ki-blog-category-label {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ki-pink);
}
.ki-blog-thumb {
    aspect-ratio: 16/10;
    border-radius: 8px;
    background: var(--ki-gray-100);
    margin-bottom: 12px;
    object-fit: cover;
    width: 100%;
}

.ki-blog-row {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ki-gray-200);
}
.ki-blog-row:last-child { border-bottom: none; }
.ki-blog-row-thumb {
    width: 120px;
    min-height: 80px;
    border-radius: 8px;
    background: var(--ki-gray-100);
    flex-shrink: 0;
    object-fit: cover;
}

/* ==========================================================================
   Docs
   ========================================================================== */
.ki-docs-hero {
    text-align: center;
    padding: 3rem 0 2rem;
}
.ki-docs-search {
    max-width: 500px;
    margin: 1.5rem auto 0;
}
.ki-docs-search input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--ki-gray-200);
    border-radius: 8px;
    font-size: 14px;
}
.ki-docs-search input:focus { outline: none; border-color: var(--ki-pink); box-shadow: 0 0 0 3px rgba(212,83,126,0.1); }

.ki-docs-card {
    padding: 1.25rem;
    border: 1px solid var(--ki-gray-200);
    border-radius: 12px;
    height: 100%;
    transition: all 0.2s ease;
    display: block;
    color: inherit;
    text-decoration: none;
}
.ki-docs-card:hover { border-color: var(--ki-pink); color: inherit; transform: translateY(-2px); text-decoration: none; }
.ki-docs-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 16px;
}

.ki-docs-sidebar {
    position: sticky;
    top: 80px;
    padding: 1.25rem;
    background: var(--ki-gray-50);
    border-radius: 8px;
    font-size: 13px;
}
.ki-docs-sidebar h6 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ki-gray-500);
    font-weight: 600;
    margin-bottom: 10px;
}
.ki-docs-sidebar ul { list-style: none; padding: 0; margin: 0; }
.ki-docs-sidebar li { margin-bottom: 4px; }
.ki-docs-sidebar a {
    color: var(--ki-gray-700);
    padding: 4px 10px;
    display: block;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
}
.ki-docs-sidebar a:hover { background: #fff; color: var(--ki-pink); }
.ki-docs-sidebar a.active {
    background: #fff;
    color: var(--ki-pink);
    font-weight: 500;
    border-left: 2px solid var(--ki-pink);
}

.ki-doc-tip {
    background: var(--ki-pink-light);
    border-left: 3px solid var(--ki-pink);
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    margin: 1rem 0;
    font-size: 14px;
    color: var(--ki-maroon);
}

.ki-doc-feedback {
    border: 1px solid var(--ki-gray-200);
    border-radius: 8px;
    padding: 14px;
    margin-top: 2rem;
}

/* ==========================================================================
   Pill Chips
   ========================================================================== */
.ki-chip {
    display: inline-block;
    padding: 5px 14px;
    font-size: 12px;
    border-radius: 999px;
    border: 1px solid var(--ki-gray-200);
    color: var(--ki-gray-700);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}
.ki-chip:hover { border-color: var(--ki-pink); color: var(--ki-pink); text-decoration: none; }
.ki-chip.active {
    background: var(--ki-maroon);
    border-color: var(--ki-maroon);
    color: #fff;
}

/* ==========================================================================
   Pagination override
   ========================================================================== */
.ki-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid var(--ki-gray-200);
    color: var(--ki-gray-700);
    text-decoration: none;
    margin: 0 2px;
}
.ki-pagination .page-numbers.current {
    background: var(--ki-maroon);
    border-color: var(--ki-maroon);
    color: #fff;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.ki-breadcrumb {
    font-size: 12px;
    margin-bottom: 1rem;
    padding: 0;
}
.ki-breadcrumb a { color: var(--ki-gray-500); text-decoration: none; }
.ki-breadcrumb a:hover { color: var(--ki-pink); }
.ki-breadcrumb .separator { color: var(--ki-gray-500); margin: 0 6px; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.ki-section { padding: 3rem 0; }
.ki-text-pink { color: var(--ki-pink) !important; }
.ki-bg-pink-light { background: var(--ki-pink-light) !important; }
.ki-bg-gray-50 { background: var(--ki-gray-50) !important; }
.ki-text-muted { color: var(--ki-gray-500); }
.ki-text-dark { color: var(--ki-gray-900); }
.ki-fs-11 { font-size: 11px; }
.ki-fs-12 { font-size: 12px; }
.ki-fs-13 { font-size: 13px; }
.ki-fw-600 { font-weight: 600; }