/*!
Theme Name: LokerLokal
Theme URI: https://digitalkit.id/lokerlokal
Author: Digitalkit.id
Author URI: https://digitalkit.id
Description: Theme WordPress untuk situs informasi lowongan pekerjaan dengan desain simple, modern & responsif.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: lokerlokal
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

LokerLokal is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
    /* ── Primary: Soft Purple ── */
    --primary-50:   #f5f0ff;
    --primary-100:  #ede5ff;
    --primary-200:  #dcceff;
    --primary-300:  #c3a8ff;
    --primary-400:  #a678ff;
    --primary-500:  #8b4fff;
    --primary-600:  #7c3aed;
    --primary-700:  #6a2dc9;
    --primary-800:  #5824a3;
    --primary-900:  #491f85;
    --primary-950:  #2e1065;

    /* ── Accent ── */
    --accent:       #6366f1;
    --accent-hover: #4f46e5;

    /* ── Neutrals ── */
    --white:        #ffffff;
    --gray-50:      #f8fafc;
    --gray-100:     #f1f5f9;
    --gray-200:     #e2e8f0;
    --gray-300:     #cbd5e1;
    --gray-400:     #94a3b8;
    --gray-500:     #64748b;
    --gray-600:     #475569;
    --gray-700:     #334155;
    --gray-800:     #1e293b;
    --gray-900:     #0f172a;

    /* ── Semantic ── */
    --success:      #22c55e;
    --warning:      #f59e0b;
    --danger:       #ef4444;
    --info:         #3b82f6;

    /* ── Gradients ── */
    --gradient-primary: linear-gradient(135deg, #8b4fff 0%, #6366f1 50%, #818cf8 100%);
    --gradient-soft:    linear-gradient(135deg, #f5f0ff 0%, #eef2ff 100%);
    --gradient-hero:    linear-gradient(160deg, #f5f0ff 0%, #ede5ff 35%, #eef2ff 65%, #f8fafc 100%);
    --gradient-cta:     linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
    --gradient-dark:    linear-gradient(135deg, #1e293b 0%, #0f172a 100%);

    /* ── Typography ── */
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-md:   1.125rem;
    --text-lg:   1.25rem;
    --text-xl:   1.5rem;
    --text-2xl:  1.875rem;
    --text-3xl:  2.25rem;
    --text-4xl:  3rem;
    --text-5xl:  3.75rem;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-extrabold:800;

    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    /* ── Spacing ── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ── Layout ── */
    --container-max:     1366px;
    --container-narrow:  960px;
    --container-padding: 1.5rem;
    --sidebar-width:     320px;

    /* ── Radius ── */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-xs:     0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:     0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
    --shadow-lg:     0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -4px rgba(0,0,0,0.04);
    --shadow-xl:     0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
    --shadow-purple: 0 4px 14px rgba(139,79,255,0.15);
    --shadow-card:   0 2px 8px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
    --shadow-card-hover: 0 8px 24px rgba(139,79,255,0.12), 0 0 0 1px rgba(139,79,255,0.08);

    /* ── Transitions ── */
    --ease-fast:   150ms ease;
    --ease-base:   250ms ease;
    --ease-slow:   350ms ease;

    /* ── Z-Index ── */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   400;
    --z-modal:     500;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

/* * {
    outline: 1px solid red;
} */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

html.popup-open {
    overflow: hidden;
    margin-right: calc(100vw - 100%);
}

html.popup-open body {
    overflow: hidden;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--gray-800);
    background-color: var(--white);
    /* overflow-x: hidden; */
    overflow-x: clip;
    min-height: 100vh;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

a {
    color: var(--primary-600);
    text-decoration: none;
    transition: color var(--ease-fast);
}
a:hover { color: var(--primary-700); }

ul, ol { list-style: none; }

hr {
    border: none;
    border-top: 1px solid var(--gray-200);
    margin: var(--space-8) 0;
}

::placeholder { color: var(--gray-400); opacity: 1; }
[hidden] { display: none !important; }


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--gray-900);
    letter-spacing: -0.02em;
}

h1 { font-size: var(--text-4xl); font-weight: var(--weight-extrabold); letter-spacing: -0.03em; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

p {
    margin-bottom: var(--space-4);
    color: var(--gray-600);
    line-height: var(--leading-normal);
}
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--weight-semibold); }
small { font-size: var(--text-sm); }

blockquote {
    border-left: 4px solid var(--primary-400);
    padding: var(--space-4) var(--space-6);
    background: var(--primary-50);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: var(--space-6) 0;
    font-style: italic;
    color: var(--gray-700);
}


/* ==========================================================================
   4. LAYOUT & CONTAINER
   ========================================================================== */

.container {
    width: 100%;
    /* overflow: hidden; */
    overflow: visible;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.container--narrow { max-width: var(--container-narrow); }

.site-wrapper {
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main { flex: 1 0 auto; }

.content-area {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--space-12);
    align-items: start;
}

.content-area--full { grid-template-columns: 1fr; }

/* Section rhythm */
.section            { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.section--sm        { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.section--lg        { padding-top: var(--space-32); padding-bottom: var(--space-32); }

.section__header    { text-align: center; margin-bottom: var(--space-12); }
.section__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4);
    background: var(--primary-50);
    color: var(--primary-600);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
    border: 1px solid var(--primary-100);
}
.section__title     { margin-bottom: var(--space-4); }
.section__desc {
    font-size: var(--text-md);
    color: var(--gray-500);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1;
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--ease-base);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}
.btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }

.btn--primary {
    background: var(--gradient-cta);
    color: var(--white);
    box-shadow: var(--shadow-purple);
}
.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(139,79,255,0.25);
    color: var(--white);
}
.btn--primary:active { transform: translateY(0); }

.btn--outline {
    background: transparent;
    color: var(--primary-600);
    border-color: var(--primary-200);
}
.btn--outline:hover {
    background: var(--primary-50);
    border-color: var(--primary-400);
    color: var(--primary-700);
}

.btn--ghost { background: transparent; color: var(--gray-600); }
.btn--ghost:hover { background: var(--gray-100); color: var(--gray-800); }

.btn--white {
    background: var(--white);
    color: var(--primary-600);
    box-shadow: var(--shadow-sm);
}
.btn--white:hover { box-shadow: var(--shadow-md); }

.btn--sm { padding: 0.5rem 1rem; font-size: var(--text-xs); border-radius: var(--radius-md); }
.btn--lg { padding: 1rem 2rem; font-size: var(--text-base); border-radius: var(--radius-xl); }

.btn--icon {
    width: 40px; height: 40px;
    padding: 0;
    border-radius: var(--radius-md);
    font-size: var(--text-md);
}


/* ==========================================================================
   6. BADGES & TAGS
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
    line-height: 1.4;
    white-space: nowrap;
}
.badge--primary { background: var(--primary-50); color: var(--primary-700); border: 1px solid var(--primary-100); }
.badge--success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.badge--danger  { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.badge--neutral { background: var(--gray-100); color: var(--gray-600); border: 1px solid var(--gray-200); }

.pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
    transition: all var(--ease-fast);
    text-decoration: none;
}

.pill-tag:hover { background: var(--primary-50); color: var(--primary-600); border-color: var(--primary-200); }


/* ==========================================================================
   7. FORMS
   ========================================================================== */

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--text-base);
    color: var(--gray-800);
    background-color: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px rgba(139,79,255,0.1);
}


/* ==========================================================================
   8. UTILITIES
   ========================================================================== */

.text-center  { text-align: center; }
.text-primary { color: var(--primary-600); }
.text-muted   { color: var(--gray-500); }
.text-white   { color: var(--white); }

.fw-medium    { font-weight: var(--weight-medium); }
.fw-semibold  { font-weight: var(--weight-semibold); }
.fw-bold      { font-weight: var(--weight-bold); }

.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ==========================================================================
   9. SELECTION & SCROLLBAR
   ========================================================================== */

::selection { background-color: var(--primary-200); color: var(--primary-900); }
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }


/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    :root { --container-padding: 1.25rem; }
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
    .content-area { grid-template-columns: 1fr; }
    .section { padding-top: var(--space-16); padding-bottom: var(--space-16); }
}

@media (max-width: 768px) {
    :root { --container-padding: 1rem; }
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
    .section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
}

@media (max-width: 480px) {
    :root { --container-padding: 0.875rem; }
    h1 { font-size: var(--text-xl); }
}

/* ==========================================================================
   ADS SLOTS (Customizer)
   ========================================================================== */

.lokerlokal-ad--after_navbar {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-8) var(--container-padding);
    margin-bottom: var(--space-2);
}

.lokerlokal-ad--before_footer {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-8) var(--container-padding);
    margin-top: var(--space-2);
}

/* ============================================
   ELEMENTOR OVERRIDE — Remove default gaps
   ============================================ */

.elementor-element,
.elementor-column-gap-default
  > .elementor-column
  > .elementor-element-populated {
  padding: 0 !important;
}

.elementor-editor-active .header {
  display: none !important;
}