/*
Theme Name: National Job Agency
Author: WBG
Description: Custom theme for National Job Agency, based on the WBG framework.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: nja
*/

/** ====== IMPORTS AND FONT FACES ====== **/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/** ====== Design tokens ====== **/
:root {
    --nja-blue:        #1f3b78;
    --nja-yellow:      #f4b423;
    --nja-yellow-light: #f6c515; /* brighter/lighter — used only for the text highlighter */
    --nja-text:        #1a1a1a;
    --nja-cta-skew:    18px;

    /* Set at runtime by custom.js. */
    --nja-header-height: 0px;

    --app-e-con-boxed-max-width: 100%;
}

body {
    font-family: "Open Sans", sans-serif;
}

/** ====== Header ====== **/

/* --- CTA buttons --- */
.site-header__cta {
    min-height: 3rem;
    font-size: 0.95rem;
    transition: filter 0.15s ease-in-out;
}
.site-header__cta:hover,
.site-header__cta:focus { filter: brightness(1.08); }

.site-header__cta--employee {
    background: var(--nja-blue);
    color: #fff;
}
.site-header__cta--employee:hover,
.site-header__cta--employee:focus { color: #fff; }

.site-header__cta--client {
    background: var(--nja-yellow);
    color: var(--nja-blue);
}
.site-header__cta--client:hover,
.site-header__cta--client:focus { color: var(--nja-blue); }

@media (min-width: 992px) {
    .site-header__cta--employee {
        clip-path: polygon(var(--nja-cta-skew) 0, 100% 0, calc(100% - var(--nja-cta-skew)) 100%, 0 100%);
        padding-left: calc(1rem + var(--nja-cta-skew));
    }
    .site-header__cta--client {
        clip-path: polygon(var(--nja-cta-skew) 0, 100% 0, 100% 100%, 0 100%);
        margin-left: calc(var(--nja-cta-skew) * -1);
        padding-left: calc(1rem + var(--nja-cta-skew));
    }
}

/* --- Logo --- */
.site-header__logo {
    max-height: 60px;
    width: auto !important;
    height: auto;
}
@media (min-width: 768px) {
    .site-header__logo { max-height: 70px; }
}
@media (min-width: 992px) {
    .site-header__brand { margin-top: -3rem; }
    .site-header__logo { max-height: 130px; }
}

/* --- Nav links (rendered by the WP menu walker) --- */
.site-header .navbar-nav { gap: 1.75rem; }
.site-header .nav-item { display: flex; align-items: center; }
.site-header .nav-link {
    color: var(--nja-text);
    font-weight: 500;
    padding: 0.5rem 0;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus { color: var(--nja-blue); }
.site-header .current-menu-item > .nav-link,
.site-header .current_page_item   > .nav-link,
.site-header .current-menu-parent > .nav-link,
.site-header .nav-link.active {
    color: var(--nja-blue);
    font-weight: 600;
}

/* --- Hamburger (mobile only) --- */
.site-header__hamburger {
    background: var(--nja-yellow);
    color: var(--nja-text);
    width: 48px;
    height: 48px;
}
.site-header__hamburger:focus,
.site-header__hamburger:focus-visible {
    box-shadow: 0 0 0 3px rgba(244, 180, 35, 0.4);
    outline: none;
}

/* Containing block for the absolute mobile menu below. BS5's .position-relative
   utility would !important over the fixed/sticky we apply via body class. */
.site-header { position: relative; }

/* --- Mobile collapsed nav (overlay) --- */
@media (max-width: 767.98px) {
    .site-header .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 1rem;
        background-color: #fff;
        box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .075);
        max-height: calc(100vh - var(--nja-header-height, 0px));
        max-height: calc(100dvh - var(--nja-header-height, 0px));
    }
    /* Scoped to .show so .collapsing's overflow:hidden owns the animation. */
    .site-header .navbar-collapse.show { overflow-y: auto; }
    body.admin-bar .site-header .navbar-collapse {
        max-height: calc(100vh - var(--nja-header-height, 0px) - 46px);
        max-height: calc(100dvh - var(--nja-header-height, 0px) - 46px);
    }
    .site-header .navbar-nav { gap: 0.5rem; }
}

/* --- Fixed / sticky header (opt-in via body class) --- */
body.header-fixed .site-header,
body.header-sticky .site-header {
    left: 0;
    right: 0;
    top: 0;
    z-index: 1030;
}
body.header-fixed  .site-header { position: fixed;  }
body.header-sticky .site-header { position: sticky; }

body.admin-bar.header-fixed  .site-header,
body.admin-bar.header-sticky .site-header { top: 46px; }
@media (min-width: 783px) {
    body.admin-bar.header-fixed  .site-header,
    body.admin-bar.header-sticky .site-header { top: 32px; }
}
/* WP makes #wpadminbar absolute under 600px; pin it to match our top offset. */
body.header-fixed  #wpadminbar,
body.header-sticky #wpadminbar { position: fixed; }

/* Only fills space when the header is taken out of flow (fixed). */
.fix-header-height { height: 0; }
body.header-fixed .fix-header-height { height: var(--nja-header-height, 0px); }

/* Subtract the admin bar's <html> margin-top so 100vh doesn't overflow.
   !important matches BS5's .min-vh-100. */
body.admin-bar.min-vh-100 { min-height: calc(100vh - 46px) !important; }
@media (min-width: 783px) {
    body.admin-bar.min-vh-100 { min-height: calc(100vh - 32px) !important; }
}

/** ====== Elementor ====== **/
.e-con-boxed{ padding-right: 12px !important; padding-left: 12px !important; max-width: var(--app-e-con-boxed-max-width)!important; }
.e-con-boxed>.e-con-inner{ max-width: none!important; margin-right: 0; margin-left: 0; }
.fw-bold .elementor-heading-title{ font-weight: 700 !important; }
@media (min-width: 992px) { :root { --app-e-con-boxed-max-width: 960px; } }
@media (min-width: 1200px) { :root { --app-e-con-boxed-max-width: 1140px; } }
@media (min-width: 1400px) { :root { --app-e-con-boxed-max-width: 1320px; } }

/** ====== Home — Hero ====== **/
.nja-hero .fs-1 .elementor-heading-title { line-height: 1.2 !important; }
@media(min-width: 1200px) {
    .nja-hero .fs-1 .elementor-heading-title { font-size: 4rem !important; }
    .nja-hero .description { font-size: 1.25rem !important; }
}

/* Ring side: clamped so the slider stays usable from phone (260) to wide-desktop (520). */
:root { --nja-hero-ring: clamp(260px, 38vw, 520px); }

/* --- CTAs (slanted banner with a white triangle peak at the bottom-right) --- */
.nja-hero__cta {
    --cta-skew: 15px;          /* how far the right edge leans in toward the bottom */
    --cta-tri-w: 15px;         /* white triangle base width  */
    --cta-tri-h: 25px;         /* white triangle height      */
    --cta-tri-x: -2px;          /* triangle offset from the right edge (sits on the slant) */
    position: relative;
    isolation: isolate;        /* keep the z-index layers behind the label only */
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 3rem;
    padding: .5rem calc(1.25rem + var(--cta-skew)) .5rem 1.25rem;
    font-weight: 600; text-decoration: none; color: #fff;
    background: transparent;
    transition: filter .15s ease;
}
@media (min-width: 1200px) { .nja-hero .nja-hero__cta{ min-width: 200px; } }
@media (min-width: 1400px) { .nja-hero .nja-hero__cta{ min-width: 250px; } }
/* Colored banner body — right edge slants in toward the bottom */
.nja-hero__cta::before {
    content: "";
    position: absolute; inset: 0; z-index: -2;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--cta-skew)) 100%, 0 100%);
}
.nja-hero__cta--candidates::before { background: var(--nja-blue); }
.nja-hero__cta--employers::before  { background: var(--nja-yellow); }
/* White triangle peak, sitting on the slant and poking past it */
.nja-hero__cta::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: var(--cta-tri-x);
    width: var(--cta-tri-w);
    height: var(--cta-tri-h);
    background: #fff;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    bottom: 15%;
}
.nja-hero__cta:hover, .nja-hero__cta:focus { filter: brightness(1.08); color: #fff; }
.nja-hero__cta--employers { color: var(--nja-text); }
.nja-hero__cta--employers:hover, .nja-hero__cta--employers:focus { color: var(--nja-text); }

/* --- Ring (invisible square that anchors the icon/label positions) --- */
.nja-hero__ring {
    position: relative;
    width: var(--nja-hero-ring); aspect-ratio: 1 / 1;
    margin-inline: auto;
}

/* --- Center photos: cross-fade between slides; soft shadow halo all around --- */
.nja-hero__photos {
    position: absolute; inset: 8%;
    border-radius: 50%; overflow: hidden;
    /* a wide translucent halo ring (spread, no blur) */
    box-shadow: 0 0 0 10px rgba(255,255,255,.13);
}
.nja-hero__photo {
    position: absolute; inset: 0;
    opacity: 0; pointer-events: none;   /* only the active (visible) photo is clickable */
    transition: opacity .6s ease-in-out;
}
.nja-hero__photo.is-active { opacity: 1; pointer-events: auto; }

/* --- Icons (white circle → yellow when active; single-line icon, no baked ring) --- */
.nja-hero__icon {
    position: absolute;
    width: clamp(54px, 15%, 82px); aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,.16);   /* thin translucent ring */
    transform: translate(-50%, -50%);
    transition: background-color .3s ease;
    cursor: pointer;
}
/* Single line-art icon, centered. Capped (max-, not forced) so each icon keeps
   its natural size and breathing room inside the circle. */
.nja-hero__icon-img {
    position: absolute; inset: 0; margin: auto;
    max-width: 55%; max-height: 55%;
    object-fit: contain;
}
.nja-hero__icon:hover,
.nja-hero__icon.is-active { background: var(--nja-yellow); }

/* Fixed ring positions (per design comp) */
/* Icons ride the ring, dropped lower than a plain 45° layout to match the comp. */
.nja-hero__icon--pos-1 { top: 21%; left: 16%; }    /* Manufacturing  (upper-left)   */
.nja-hero__icon--pos-2 { top: 21%; left: 84%; }    /* Administrative (upper-right)  */
.nja-hero__icon--pos-3 { top: 58%; left: 6%;  }    /* Construction   (mid-left)     */
.nja-hero__icon--pos-4 { top: 58%; left: 94%; }    /* Warehouse      (mid-right)    */
.nja-hero__icon--pos-5 { top: 92%; left: 50%; }    /* Talent         (bottom-center)*/

/* --- Labels (pill that fades in next to the active icon, pointing inward) --- */
.nja-hero__label {
    position: absolute; z-index: 2;
    padding: .35rem .35rem .35rem 1rem;
    color: var(--nja-text);
    font-size: .92rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    opacity: 0; pointer-events: none;
    transition: opacity .35s ease;
}
.nja-hero__label:hover, .nja-hero__label:focus { color: var(--nja-text); filter: brightness(.98); }
.nja-hero__label.is-active { opacity: 1; pointer-events: auto; }
.nja-hero__label-arrow {
    width: 26px; height: 26px;
    background: var(--nja-yellow); color: var(--nja-text);
}

/* Label positions: anchored to the icon, extending toward ring center */
.nja-hero__label--pos-1 { top: 21%; left: 25%; transform: translate(0, -50%); }       /* extends right  */
.nja-hero__label--pos-2 { top: 21%; left: 75%; transform: translate(-100%, -50%); }   /* extends left   */
.nja-hero__label--pos-3 { top: 58%; left: 15%; transform: translate(0, -50%); }       /* extends right  */
.nja-hero__label--pos-4 { top: 58%; left: 85%; transform: translate(-100%, -50%); }   /* extends left   */
.nja-hero__label--pos-5 { top: 92%; left: 58%; transform: translate(0, -50%); }       /* extends right  */

/* --- Responsive tweaks --- */
@media (max-width: 767.98px) {
    :root { --nja-hero-ring: clamp(240px, 75vw, 340px); }
    .nja-hero__ctas     { justify-content: center; gap: .25rem; }
    .nja-hero__ring     { margin-top: 1.5rem; }
}

/** ====== Services tabs ====== **/
.nja-services {
    --svc-blue-grad: linear-gradient(90deg, #1a3068 0%, #2f5cae 100%);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1rem;
    background: #eef0f2;
    border-radius: 20px;
}

/* --- Tab (card) --- */
.nja-services__tab {
    position: relative;
    gap: .9rem;
    width: 100%;
    text-align: left;
    border: 0;
    padding: 1rem 1.25rem;
    background: #fff;
    border-radius: 12px;
    color: var(--nja-text);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: background .25s ease, color .25s ease;
}
.nja-services__icon {
    /* single line icon (black strokes on transparent); on the active blue tab
       invert(1) flips it to clean white. Fixed 48x48 box (object-fit keeps the
       aspect) so every tab is the same height regardless of each icon's size. */
    flex: 0 0 auto;
    max-height: 45px;
    object-fit: contain;
    transition: filter .25s ease;
}
.nja-services__name { font-size: 1rem; letter-spacing: .02em; }

/* Active tab: blue gradient, white label + white icon (designer note).
   invert(1) flips the black strokes to white; transparent stays transparent. */
.nja-services__tab.is-active { background: var(--svc-blue-grad); color: #fff; }
.nja-services__tab.is-active .nja-services__icon { filter: invert(1); }

/* --- Detail panel --- */
.nja-services__panel {
    display: none;
    position: relative;
    height: 360px;                 /* definite height so the photo (height:100%) fills it */
    border-radius: 2.5rem;
    overflow: hidden;
}
.nja-services__panel.is-active { display: block; }
/* Translucent inner border over the image. On a ::after (painted above the photo,
   which the panel's own inset shadow would sit under) so it actually shows; the
   rgba lets the image read through it. Tune width (6px) and alpha. */
.nja-services__panel::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .25);
    pointer-events: none;
}
/* .nja-services__photo fill (position/size/object-fit) lives on the <img> as BS5
   utilities — their !important beats Elementor's `.elementor img { height:auto }`. */
.nja-services__overlay {
    position: absolute; inset: 0;
    padding: 1.25rem 1.5rem;
    color: #fff;
    /*background: linear-gradient(to top, rgba(8,15,35,.88) 0%, rgba(8,15,35,.4) 35%, transparent 62%);*/
}
/* Tag = a plain yellow name box + a SEPARATE arrow link. The arrow link alone is
   a small .nja-hero__cta-style banner: slanted right edge + white triangle peak. */
.nja-services__tag { align-self: flex-start; margin-bottom: .8rem; color: var(--nja-blue); }
.nja-services__tag-text {
    padding: .45rem .85rem;
    background: var(--nja-yellow);
    font-size: .8rem; letter-spacing: .03em;
}
.nja-services__tag-arrow {
    --tag-skew: 11px;          /* how far the right edge leans in toward the bottom */
    --tag-tri-w: 11px;         /* white triangle base width  */
    --tag-tri-h: 16px;         /* white triangle height      */
    --tag-tri-x: -1px;         /* triangle offset from the right edge (sits on the slant) */
    position: relative;
    isolation: isolate;        /* keep the ::before/::after layers behind the icon only */
    width: 2.6rem;
    margin-left: .3rem;        /* gap between the name box and the arrow link */
    padding-right: var(--tag-skew);
    color: var(--nja-blue);
    text-decoration: none;
}
.nja-services__tag-arrow::before {  /* yellow body — right edge slants in toward the bottom */
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: var(--nja-yellow);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--tag-skew)) 100%, 0 100%);
}
.nja-services__tag-arrow::after {   /* white triangle peak, sitting on the slant */
    content: ""; position: absolute; z-index: -1;
    right: var(--tag-tri-x); bottom: 15%;
    width: var(--tag-tri-w); height: var(--tag-tri-h);
    background: #fff;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.nja-services__desc { margin: 0; max-width: 56ch; font-size: .95rem; line-height: 1.5; }

/* --- Desktop: the gray panel wraps ONLY the tabs (left col); the image sits
   apart on the right. The active tab becomes a blue banner whose right edge
   points at the image — same clip-path idea as .nja-hero__cta. --- */
@media (min-width: 992px) {
    .nja-services {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
        grid-template-rows: repeat(5, auto);
        column-gap: 2.5rem;
        row-gap: .9rem;
        background: transparent;        /* gray moves behind the tabs only (::before) */
    }
    /* Gray box behind the tabs column only; the -1rem reclaims the container
       padding so it hugs the tabs. The image (col 2) stays on the page bg. */
    .nja-services::before {
        content: "";
        grid-column: 1; grid-row: 1 / -1;
        margin: -1rem;
        background: #eef0f2;
        border-radius: 20px;
        z-index: 0;
    }
    .nja-services__tab   { grid-column: 1; grid-row: var(--row); z-index: 1; }
    /* margin-block -1rem makes the image as tall as the gray box (which gains the
       same 1rem via ::before) so their tops/bottoms line up. */
    .nja-services__panel { grid-column: 2; grid-row: 1 / -1; align-self: stretch; height: auto; min-height: 0; margin-block: -1rem; z-index: 1; }

    /* Active tab: square the right corners and grow a symmetric blue arrowhead
       that points out of the box toward the panel (tune length with --tab-arrow). */
    .nja-services__tab.is-active {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    /* Rounded arrowhead pointing toward the panel. A fixed 40x85 cap clipped with a
       path() whose shoulders and tip are gently rounded (Q curves, ~9px), not sharp
       angles. Sits 1px over the body so there is no seam. Edit coords to retune. */
    .nja-services__tab.is-active::after {
        content: "";
        position: absolute;
        top: 0; bottom: 0;             /* cap height follows the tab height */
        left: calc(100% - 1px);        /* 1px over the body so there is no seam */
        width: 40px;
        /* rounded arrowhead drawn as an SVG so it stretches to the tab's height
           (preserveAspectRatio=none). Shoulders/tip rounded ~9px. Fill matches
           the light end of --svc-blue-grad. */
        background: center / 100% 100% no-repeat
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L5,0 Q14,0 18.9,7.54 L35.1,32.46 Q40,40 35.1,47.54 L18.9,72.46 Q14,80 5,80 L0,80 Z' fill='%232f5cae'/%3E%3C/svg%3E");
    }
}

/** ====== Utilities ====== **/

/* Yellow highlighter swipe behind the lower part of inline text (per comp).
   Wrap the words to highlight, e.g. <span class="nja-highlight">serve</span>.
   Raise/lower the band by changing the 35% stop. */
.nja-highlight {
    background-image: linear-gradient(to top, var(--nja-yellow-light) 35%, transparent 35%);
    padding-inline: .1em;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}

.fs-18px{ font-size: 18px !important; }
.fs-21px{ font-size: 21px !important; }

/** ====== Footer ====== **/
footer.footer{ background: url("/wp-content/uploads/2026/06/footer-background-photo.jpg") center center no-repeat transparent; background-size: cover; }
footer.footer .sidebar ul{ padding-left: 0; list-style: none; }
footer.footer .sidebar ul>li{ padding-top: 0.25rem; padding-bottom: 0.25rem; }
footer.footer a { color: #FFF; text-decoration: none; }
footer.footer a:hover, footer.footer a.active, footer.footer .current-menu-item>a { color: #CCC; }
footer.footer ul { margin-bottom: 0; }
.footer-title{ padding-bottom: 10px; position: relative; }
.footer-title:after{ content: ""; bottom: 0; left: 0; position: absolute; width: 20px; height: 3px; background-color: var(--nja-yellow-light); }

/** ====== Page hero ====== **/
.nja-page-hero { overflow: hidden !important; }
.nja-page-hero .elementor-widget-image img { width: 100%; }
@media(max-width: 767px) {
    .nja-page-hero .elementor-widget-image, .nja-page-hero .elementor-widget-image>.elementor-widget-container { min-height: 296px !important; transform: none !important; }
    .nja-page-hero .elementor-widget-image img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: 100%; max-width: none; object-fit: cover; }
}