/* ==========================================================
   WORDTOJPG.ID
   Premium Responsive Header
   ========================================================== */

/* ----------------------------------------------------------
   01. DESIGN VARIABLES
   ---------------------------------------------------------- */

:root {
    --wj-bg: #EAE8BA;
    --wj-surface: #FFFBF5;
    --wj-navy: #102B3A;
    --wj-teal: #087C83;
    --wj-teal-hover: #06676D;
    --wj-muted: #526573;
    --wj-border: #D8D6BC;
    --wj-hover-bg: #E5F2EE;

    --wj-font: "Plus Jakarta Sans", Arial, sans-serif;
}

/* ----------------------------------------------------------
   02. GLOBAL BASE
   ---------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}

body {
    margin: 0;
    background: var(--wj-bg);
    color: var(--wj-navy);
    font-family: var(--wj-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wj-site-header,
.wj-site-header *,
.wj-site-header *::before,
.wj-site-header *::after {
    box-sizing: border-box;
}

/* ----------------------------------------------------------
   03. ACCESSIBILITY
   ---------------------------------------------------------- */

.wj-skip-link {
    position: absolute;
    top: -100px;
    left: 20px;
    z-index: 10000;

    padding: 12px 18px;

    color: #FFFFFF;
    background: var(--wj-navy);

    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
}

.wj-skip-link:focus {
    top: 12px;
}

.wj-site-header a:focus-visible,
.wj-site-header button:focus-visible {
    outline: 3px solid var(--wj-teal);
    outline-offset: 3px;
}

/* ----------------------------------------------------------
   04. MAIN HEADER CONTAINER
   ---------------------------------------------------------- */

.wj-site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;
    padding: 12px clamp(12px, 2.2vw, 34px) 0;
}

.wj-header-inner {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    max-width: 1600px;
    min-height: 88px;

    margin: 0 auto;
    padding: 0 26px;

    gap: 22px;

    background: var(--wj-surface);

    border: 1px solid rgba(16, 43, 58, 0.07);
    border-radius: 22px;

    box-shadow:
        0 4px 12px rgba(36, 42, 23, 0.03),
        0 14px 36px rgba(36, 42, 23, 0.10);

    transition:
        min-height 220ms ease,
        border-radius 220ms ease,
        box-shadow 220ms ease;
}

/* ----------------------------------------------------------
   05. LOGO / BRAND
   ---------------------------------------------------------- */

.wj-brand {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;
    gap: 12px;

    color: var(--wj-navy);
    text-decoration: none;
    white-space: nowrap;
}

.wj-brand-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 50px;
    flex-shrink: 0;

    color: #FFFFFF;
    background: var(--wj-teal);

    border: 2px solid rgba(16, 43, 58, 0.14);
    border-radius: 10px;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.16),
        3px 4px 0 var(--wj-navy);

    transition:
        width 220ms ease,
        height 220ms ease;
}

.wj-brand-symbol i {
    font-size: 24px;
}

.wj-brand-name {
    color: var(--wj-navy);

    font-size: 27px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.5px;

    transition: font-size 220ms ease;
}

.wj-brand-name span {
    color: var(--wj-teal);
}

/* ----------------------------------------------------------
   06. DESKTOP NAVIGATION
   ---------------------------------------------------------- */

.wj-header-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}

.wj-nav-list {
    display: flex;
    align-items: center;
    justify-content: center;

    list-style: none;

    gap: 12px;
    margin: 0;
    padding: 0;
}

.wj-nav-list li {
    padding: 0;
    margin: 0;
}

/* ----------------------------------------------------------
   07. NAVIGATION LINKS
   ---------------------------------------------------------- */

.wj-nav-link {
    position: relative;
    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 12px 15px;

    gap: 9px;

    color: var(--wj-navy);
    text-decoration: none;
    white-space: nowrap;

    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.15px;

    border-radius: 999px;

    transition:
        color 240ms ease,
        transform 240ms ease;
}

.wj-nav-link > i:first-child {
    width: 18px;
    flex-shrink: 0;

    color: #34434C;

    font-size: 16px;
    text-align: center;

    transition:
        color 240ms ease,
        transform 240ms ease;
}

/* ----------------------------------------------------------
   08. ANIMATED ROUNDED PILL BACKGROUND
   ---------------------------------------------------------- */

.wj-nav-link::before {
    content: "";

    position: absolute;
    inset: 3px 0;

    z-index: -1;

    background: var(--wj-hover-bg);
    border-radius: 999px;

    opacity: 0;
    transform: scale(0.84);

    pointer-events: none;

    transition:
        opacity 240ms ease,
        transform 320ms cubic-bezier(
            0.2, 0.8, 0.2, 1
        );
}

/* On hover, reveal the rounded background */

.wj-nav-link:hover::before,
.wj-nav-link:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}

/* Text color on hover */

.wj-nav-link:hover,
.wj-nav-link:focus-visible {
    color: var(--wj-teal);
}

/* Icon on hover */

.wj-nav-link:hover > i:first-child,
.wj-nav-link:focus-visible > i:first-child {
    color: var(--wj-teal);
    transform: translateY(-1px);
}

/* Very subtle movement */

.wj-nav-link:hover {
    transform: translateY(-1px);
}

/* ----------------------------------------------------------
   09. ACTIVE PAGE INDICATOR
   ---------------------------------------------------------- */

.wj-nav-link::after {
    content: "";

    position: absolute;
    left: 13px;
    bottom: 0;

    width: calc(100% - 26px);
    height: 2px;

    background: var(--wj-teal);
    border-radius: 2px;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 240ms ease;
}

.wj-nav-link.is-active {
    color: var(--wj-teal);
}

.wj-nav-link.is-active > i:first-child {
    color: var(--wj-teal);
}

.wj-nav-link.is-active::after {
    transform: scaleX(1);
}

/* Only active pages have an underline */

.wj-nav-link:not(.is-active):hover::after {
    transform: scaleX(0);
}

/* Mobile chevron hidden on desktop */

.wj-nav-chevron {
    display: none !important;
}

/* ----------------------------------------------------------
   10. HEADER ACTIONS
   ---------------------------------------------------------- */

.wj-header-actions {
    display: flex;
    align-items: center;

    flex: 0 0 auto;
    gap: 12px;
}

/* ----------------------------------------------------------
   11. MAIN CONVERSION CTA
   ---------------------------------------------------------- */

.wj-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;
    padding: 0 22px;

    gap: 11px;

    color: #FFFFFF;
    background: var(--wj-teal);

    border: 1px solid transparent;
    border-radius: 15px;

    font-family: var(--wj-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    text-decoration: none;
    white-space: nowrap;

    transition:
        background 200ms ease,
        transform 200ms ease,
        box-shadow 200ms ease;
}

.wj-header-cta i {
    font-size: 16px;
}

.wj-header-cta:hover {
    background: var(--wj-teal-hover);

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(8, 124, 131, 0.17);
}

.wj-header-cta:active {
    transform: translateY(0);
}

/* ----------------------------------------------------------
   12. MOBILE MENU BUTTON
   ---------------------------------------------------------- */

.wj-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    color: var(--wj-navy);
    background: transparent;

    border: 1px solid transparent;
    border-radius: 10px;

    cursor: pointer;
    font-size: 23px;

    transition:
        background 200ms ease,
        color 200ms ease;
}

.wj-menu-toggle:hover {
    background: var(--wj-hover-bg);
    color: var(--wj-teal);
}

.wj-menu-icon-close {
    display: none !important;
}

/* ----------------------------------------------------------
   13. STICKY / SCROLLED HEADER
   ---------------------------------------------------------- */

.wj-site-header.is-scrolled .wj-header-inner {
    min-height: 74px;
    border-radius: 17px;

    box-shadow:
        0 5px 14px rgba(36, 42, 23, 0.04),
        0 10px 28px rgba(36, 42, 23, 0.13);
}

.wj-site-header.is-scrolled .wj-brand-symbol {
    width: 42px;
    height: 45px;
}

.wj-site-header.is-scrolled .wj-brand-name {
    font-size: 25px;
}

.wj-site-header.is-scrolled .wj-header-cta {
    min-height: 45px;
}

/* ----------------------------------------------------------
   14. MEDIUM DESKTOP
   ---------------------------------------------------------- */

@media (max-width: 1450px) {

    .wj-header-inner {
        gap: 17px;
        padding: 0 21px;
    }

    .wj-brand-name {
        font-size: 24px;
        letter-spacing: -1.2px;
    }

    .wj-brand-symbol {
        width: 42px;
        height: 46px;
    }

    .wj-nav-list {
        gap: 8px;
    }

    .wj-nav-link {
        padding: 11px 12px;
        gap: 7px;
        font-size: 12.5px;
    }

    .wj-header-cta {
        padding: 0 16px;
        font-size: 13px;
    }
}

/* ----------------------------------------------------------
   15. SMALL DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 1181px) and (max-width: 1300px) {

    .wj-header-inner {
        gap: 11px;
        padding: 0 15px;
    }

    .wj-brand {
        gap: 8px;
    }

    .wj-brand-name {
        font-size: 21px;
    }

    .wj-nav-list {
        gap: 3px;
    }

    .wj-nav-link {
        padding: 10px 9px;
        gap: 5px;
        font-size: 11.5px;
    }

    .wj-nav-link > i:first-child {
        font-size: 14px;
        width: 15px;
    }

    .wj-header-cta {
        padding: 0 12px;
        font-size: 12px;
    }
}

/* ----------------------------------------------------------
   16. TABLET + MOBILE NAVIGATION
   Header JS breakpoint: 1180px
   ---------------------------------------------------------- */

@media (max-width: 1180px) {

    .wj-header-inner {
        min-height: 76px;
        padding: 0 18px;
    }

    .wj-menu-toggle {
        display: inline-flex;
    }

    /* Mobile dropdown */

    .wj-header-nav {
        position: absolute;

        top: calc(100% + 10px);
        left: 0;
        right: 0;

        display: block;
        width: 100%;

        max-height: calc(100vh - 115px);
        max-height: calc(100dvh - 115px);

        overflow-y: auto;
        overscroll-behavior: contain;

        padding: 12px;

        background: var(--wj-surface);

        border: 1px solid var(--wj-border);
        border-radius: 18px;

        box-shadow:
            0 18px 42px rgba(16, 43, 58, 0.15);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-9px);

        transition:
            opacity 200ms ease,
            visibility 200ms ease,
            transform 200ms ease;
    }

    /* Open menu */

    .wj-site-header.is-menu-open .wj-header-nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateY(0);
    }

    .wj-nav-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 4px;
    }

    .wj-nav-list li {
        width: 100%;
    }

    /* Mobile navigation links */

    .wj-nav-link {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        min-height: 50px;

        padding: 0 15px;

        gap: 13px;

        border-radius: 11px;

        font-size: 14px;
        font-weight: 600;

        transform: none;
    }

    .wj-nav-link > i:first-child {
        width: 22px;
        font-size: 17px;
    }

    /* No desktop underline on mobile */

    .wj-nav-link::after {
        display: none;
    }

    /* Mobile pill/background effect */

    .wj-nav-link::before {
        inset: 0;
        border-radius: 11px;
    }

    .wj-nav-link:hover,
    .wj-nav-link.is-active {
        color: var(--wj-teal);
        transform: none;
    }

    .wj-nav-link.is-active::before {
        opacity: 1;
        transform: scale(1);
    }

    /* Chevron */

    .wj-nav-chevron {
        display: inline-block !important;

        margin-left: auto;

        color: #829198;
        font-size: 11px;
    }

    /* Toggle icons */

    .wj-site-header.is-menu-open .wj-menu-icon-open {
        display: none !important;
    }

    .wj-site-header.is-menu-open .wj-menu-icon-close {
        display: inline-block !important;
    }

    .wj-site-header.is-scrolled .wj-header-inner {
        min-height: 70px;
    }
}

/* ----------------------------------------------------------
   17. MOBILE PHONES
   ---------------------------------------------------------- */

@media (max-width: 650px) {

    .wj-site-header {
        padding: 10px 12px 0;
    }

    .wj-header-inner,
    .wj-site-header.is-scrolled .wj-header-inner {
        min-height: 70px;

        gap: 8px;
        padding: 0 12px;

        border-radius: 15px;
    }

    .wj-brand {
        gap: 9px;
    }

    .wj-brand-symbol,
    .wj-site-header.is-scrolled .wj-brand-symbol {
        width: 38px;
        height: 42px;

        border-radius: 8px;

        box-shadow:
            2px 3px 0 var(--wj-navy);
    }

    .wj-brand-symbol i {
        font-size: 20px;
    }

    .wj-brand-name,
    .wj-site-header.is-scrolled .wj-brand-name {
        font-size: 20px;
        letter-spacing: -1px;
    }

    .wj-header-actions {
        gap: 5px;
    }

    .wj-header-cta,
    .wj-site-header.is-scrolled .wj-header-cta {
        min-height: 41px;

        padding: 0 12px;
        gap: 7px;

        font-size: 12px;

        border-radius: 11px;
    }

    .wj-header-cta i {
        font-size: 13px;
    }

    .wj-menu-toggle {
        width: 36px;
        height: 40px;

        font-size: 20px;
    }

    .wj-header-nav {
        border-radius: 15px;
    }
}

/* ----------------------------------------------------------
   18. SMALL MOBILE PHONES
   ---------------------------------------------------------- */

@media (max-width: 420px) {

    .wj-brand-name,
    .wj-site-header.is-scrolled .wj-brand-name {
        font-size: 17px;
        letter-spacing: -0.9px;
    }

    .wj-brand-symbol,
    .wj-site-header.is-scrolled .wj-brand-symbol {
        width: 34px;
        height: 38px;
    }

    .wj-brand-symbol i {
        font-size: 18px;
    }

    .wj-header-cta,
    .wj-site-header.is-scrolled .wj-header-cta {
        padding: 0 9px;
        gap: 5px;

        font-size: 10.5px;
    }

    .wj-header-inner {
        padding: 0 10px;
    }
}

/* ----------------------------------------------------------
   19. EXTRA SMALL SCREENS
   ---------------------------------------------------------- */

@media (max-width: 345px) {

    .wj-cta-label {
        display: none;
    }

    .wj-header-cta,
    .wj-site-header.is-scrolled .wj-header-cta {
        width: 39px;
        padding: 0;
    }

    .wj-header-cta i {
        font-size: 16px;
    }
}

/* ----------------------------------------------------------
   20. REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .wj-site-header,
    .wj-site-header *,
    .wj-site-header *::before,
    .wj-site-header *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   WORDTOJPG.ID - THIN UNDERLINE INDICATOR
   ============================================ */

@media (min-width: 1181px) {

    .wj-site-header .wj-nav-link::after {
        content: "";

        position: absolute;
        left: 50%;
        bottom: 0;

        width: 36px;
        height: 1.5px;

        background: #102B3A;
        border-radius: 2px;

        opacity: 0;
        transform: translateX(-50%) scaleX(0);

        transform-origin: center;

        transition:
            opacity 220ms ease,
            transform 280ms ease;
    }

    /* Show underline on hover */

    .wj-site-header .wj-nav-link:hover::after,
    .wj-site-header .wj-nav-link:focus-visible::after {
        opacity: 1;
        transform: translateX(-50%) scaleX(1);
    }

    /* Keep underline visible for active page */

    .wj-site-header .wj-nav-link.is-active::after {
        opacity: 1;
        transform: translateX(-50%) scaleX(1);
    }
}

/* Respect accessibility preferences */

@media (prefers-reduced-motion: reduce) {
    .wj-site-header .wj-nav-link::after {
        transition: none;
    }
}

/* ==========================================
   WORDTOJPG.ID - COMPACT HEADER REFINEMENT
   ========================================== */

/* Desktop */

@media (min-width: 1181px) {

    .wj-header-inner {
        min-height: 74px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .wj-brand-symbol {
        width: 40px;
        height: 44px;
    }

    .wj-brand-symbol i {
        font-size: 21px;
    }

    .wj-brand-name {
        font-size: 23px;
    }

    .wj-header-cta {
        min-height: 44px;
        padding: 0 18px;
        font-size: 13px;
        border-radius: 13px;
    }

    /* Compact sticky state */

    .wj-site-header.is-scrolled .wj-header-inner {
        min-height: 68px;
    }

    .wj-site-header.is-scrolled .wj-brand-symbol {
        width: 38px;
        height: 41px;
    }

    .wj-site-header.is-scrolled .wj-brand-name {
        font-size: 22px;
    }

    .wj-site-header.is-scrolled .wj-header-cta {
        min-height: 42px;
    }
}

/* Tablet */

@media (min-width: 651px) and (max-width: 1180px) {

    .wj-header-inner {
        min-height: 70px;
    }

    .wj-site-header.is-scrolled .wj-header-inner {
        min-height: 66px;
    }
}

/* Mobile */

@media (max-width: 650px) {

    .wj-header-inner,
    .wj-site-header.is-scrolled .wj-header-inner {
        min-height: 64px;
    }

    .wj-brand-symbol,
    .wj-site-header.is-scrolled .wj-brand-symbol {
        width: 35px;
        height: 39px;
    }

    .wj-brand-name,
    .wj-site-header.is-scrolled .wj-brand-name {
        font-size: 18px;
    }

    .wj-header-cta,
    .wj-site-header.is-scrolled .wj-header-cta {
        min-height: 38px;
    }
}