/* ============================================================
   SMS PERSONNEL — employers-page.css
   All styles for page-employers.php (and reusable for
   Candidates and About Us pages using the same ip- classes).

   Enqueue from functions.php:
   wp_enqueue_style( 'smsp-employers', $uri.'/assets/employers-page.css', ['smsp-main'], $v );

   All ip- prefix classes mirror the prototype sms-layouts.html exactly.
============================================================ */

/* ── HERO ────────────────────────────────────────────────────
   Single whole-image banner. Gray placeholder until real
   image uploaded via Customizer (smsp_emp_hero_image).
   Same pattern as homepage banners and services hero.
─────────────────────────────────────────────────────────────*/
.ip-hero {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #b2b2b2;
    background-size: cover;
    background-position: center;
}
.ip-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(0,0,0,.04) 0px, rgba(0,0,0,.04) 1px,
        transparent 1px, transparent 28px
    );
    pointer-events: none;
}
.ip-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(14,14,14,.88) 30%,
        rgba(14,14,14,.55) 65%,
        rgba(14,14,14,.15) 100%
    );
}
.ip-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 60px;
    width: 100%;
}
.ip-hero-content h1 {
    font-size: clamp(26px, 3.5vw, 44px);
    font-weight: 800;
    color: #fff;
    line-height: 1.12;
    margin-bottom: 8px;
    letter-spacing: -.02em;
}
.ip-hero-content p {
    font-size: 16px;
    color: rgba(255,255,255,.65);
    font-style: italic;
    margin: 0;
}

/* ── HIGHLIGHT CARDS ─────────────────────────────────────────
   4-col grid, each card: 16:9 image + label below.
   8px padding on label body. Same structure as Services page.
─────────────────────────────────────────────────────────────*/
.ip-highlights-wrap {
    padding: 29px 60px;
    background: #fff;
    max-width: 1600px;
    margin: 0 auto;
}
.ip-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.ip-hl {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: box-shadow .2s, transform .2s;
}
.ip-hl:hover { box-shadow: 0 6px 24px rgba(0,0,0,.13); transform: translateY(-2px); }
.ip-hl-img {
    width: 100%;
    aspect-ratio: 16/9;
    background: #c0c0c0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.ip-hl-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(0,0,0,.03) 0px, rgba(0,0,0,.03) 1px,
        transparent 1px, transparent 20px
    );
}
.ip-hl-img i { font-size: 28px; color: rgba(255,255,255,.35); position: relative; z-index: 1; }
.ip-hl-body  { padding: 8px 10px 10px; }
.ip-hl-body strong { display: block; font-size: 13px; font-weight: 700; color: #111; line-height: 1.4; }
.ip-hl-body strong em { font-style: normal; color: #4CAF50; }

/* ── OVERVIEW — single image left, text right ────────────────*/
.ip-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #fff;
}
.ip-overview-img {
    background: #b8b8b8;
    min-height: 380px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    background-size: cover;
    background-position: center;
}
.ip-overview-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(0,0,0,.03) 0px, rgba(0,0,0,.03) 1px,
        transparent 1px, transparent 24px
    );
}
.ip-overview-img i    { font-size: 48px; color: rgba(255,255,255,.3); position: relative; z-index: 1; }
.ip-overview-img span { font-size: 11px; font-weight: 600; letter-spacing: .07em; color: rgba(255,255,255,.35); text-transform: uppercase; position: relative; z-index: 1; }
.ip-overview-text {
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ip-overview-text p { font-size: 14.5px; color: #555; line-height: 1.8; margin-bottom: 14px; }
.ip-overview-text p:last-child { margin-bottom: 0; }

/* ── CTA BANNER — "Ready to grow your team?" ─────────────────
   Same whole-banner component as homepage banners.
   Gray placeholder, dark gradient overlay, white text.
─────────────────────────────────────────────────────────────*/
.ip-cta-banner {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    max-width: 1600px;
    margin: 0 auto;
    min-height: 220px;
    background: #b0b0b0;
    box-shadow: 0 4px 28px rgba(0,0,0,.14);
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
}
.ip-cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(0,0,0,.03) 0px, rgba(0,0,0,.03) 1px,
        transparent 1px, transparent 28px
    );
}
.ip-cta-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(14,14,14,.88) 35%,
        rgba(14,14,14,.55) 65%,
        rgba(14,14,14,.15) 100%
    );
}
.ip-cta-banner-text {
    position: relative;
    z-index: 2;
    padding: 48px 60px;
    max-width: 600px;
}
.ip-cta-banner-text h2 {
    font-size: clamp(22px, 2.8vw, 34px);
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.15;
}

/* ── WORKING WITH SMS — 4 centred icon cards ──────────────────*/
.ip-working-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 32px;
    text-align: center;
}
.ip-wi { padding: 20px; }
.ip-wi-ico {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(76,175,80,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4CAF50;
    font-size: 22px;
    margin: 0 auto 14px;
    transition: background .2s, color .2s;
}
.ip-wi:hover .ip-wi-ico { background: #4CAF50; color: #fff; }
.ip-wi h3 { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 6px; }
.ip-wi p  { font-size: 13px; color: #555; line-height: 1.6; }

/* ── CALL STRIP ──────────────────────────────────────────────*/
.ip-call-strip {
    background: #f7f9f7;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 540px;
    margin: 0 auto;
}
.ip-call-strip > i { font-size: 22px; color: #4CAF50; flex-shrink: 0; }
.ip-call-strip-text { font-size: 13px; color: #555; margin-bottom: 2px; }
.ip-call-strip a {
    font-size: 20px;
    font-weight: 800;
    color: #4CAF50;
    text-decoration: none;
    letter-spacing: -.01em;
    display: block;
}
.ip-call-strip a:hover { color: #388E3C; }

/* ── REQUEST STAFF FORM ──────────────────────────────────────*/
.ip-form-wrap {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 36px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05);
}
.ip-form-title {
    font-size: 20px;
    font-weight: 800;
    color: #111;
    margin-bottom: 24px;
}
.ip-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ip-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.ip-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ip-field--full { grid-column: 1 / -1; }
.ip-field label { font-size: 13px; font-weight: 500; color: #333; }
.ip-required { color: #e53935; margin-left: 2px; }

.ip-field input {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #111;
    background: #fff;
    width: 100%;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    -webkit-appearance: none;
}
.ip-field input::placeholder { color: #aaa; }
.ip-field input:hover  { border-color: #b5c9b5; }
.ip-field input:focus  { border-color: #4CAF50; box-shadow: 0 0 0 3px rgba(76,175,80,.12); }

/* Checkbox/radio groups — 3-col grid */
.ip-check-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 16px;
    margin-top: 4px;
}
.ip-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #333;
    cursor: pointer;
    line-height: 1.4;
}
.ip-check-item input[type="checkbox"],
.ip-check-item input[type="radio"] {
    width: 15px;
    height: 15px;
    accent-color: #4CAF50;
    cursor: pointer;
    flex-shrink: 0;
}

/* Submit button */
.ip-submit {
    height: 44px;
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    cursor: pointer;
    width: 140px;
    transition: background .2s, transform .15s;
    letter-spacing: .02em;
}
.ip-submit:hover  { background: #388E3C; transform: translateY(-1px); }
.ip-submit:active { transform: none; }

/* reCAPTCHA notice */
.ip-captcha { font-size: 12.5px; color: #555; line-height: 1.6; margin: 0; }
.ip-captcha a { color: #4CAF50; text-decoration: none; }
.ip-captcha a:hover { text-decoration: underline; }

/* Success message */
.ip-form-success {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 8px;
    padding: 20px;
}
.ip-form-success i { font-size: 22px; color: #4CAF50; flex-shrink: 0; margin-top: 1px; }
.ip-form-success p { font-size: 14.5px; color: #2e7d32; font-weight: 500; margin: 0; }

/* Error messages */
.ip-form-errors {
    background: #ffebee;
    border: 1px solid #ef9a9a;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.ip-form-errors p { font-size: 13.5px; color: #c62828; margin: 4px 0; }
.ip-form-errors p:first-child { margin-top: 0; }
.ip-form-errors p:last-child  { margin-bottom: 0; }
.ip-form-errors i { margin-right: 5px; }

/* ── TABLET ≤ 1024px ─────────────────────────────────────────*/
@media (max-width: 1024px) {
    /* Hero */
    .ip-hero-content { padding: 0 28px; }

    /* Highlight cards — 2-col */
    .ip-highlights-wrap { padding: 20px 28px; }
    .ip-highlights      { grid-template-columns: repeat(2, 1fr); }

    /* Overview — stack */
    .ip-overview        { grid-template-columns: 1fr; }
    .ip-overview-img    { min-height: 240px; }
    .ip-overview-text   { padding: 28px 32px; }

    /* CTA banner */
    .ip-cta-banner      { min-height: 180px; border-radius: 12px; }
    .ip-cta-banner-text { padding: 36px; }

    /* Working grid — 2-col */
    .ip-working-grid { grid-template-columns: repeat(2, 1fr); }

    /* Form */
    .ip-check-group { grid-template-columns: repeat(2, 1fr); }
    .ip-form-wrap   { padding: 28px; }
}

/* ── MOBILE ≤ 768px ──────────────────────────────────────────*/
@media (max-width: 768px) {
    /* Hero */
    .ip-hero           { min-height: 220px; }
    .ip-hero-content   { padding: 0 16px; }
    .ip-hero-content h1 { font-size: 26px; }
    .ip-hero-content p  { font-size: 14px; }

    /* Highlight cards — 1-col stacked */
    .ip-highlights-wrap { padding: 16px; }
    .ip-highlights      { grid-template-columns: 1fr; }

    /* Overview — stack */
    .ip-overview      { grid-template-columns: 1fr; }
    .ip-overview-img  { min-height: 200px; }
    .ip-overview-text { padding: 20px; }

    /* CTA banner */
    .ip-cta-banner      { min-height: 160px; border-radius: 10px; }
    .ip-cta-banner-text { padding: 28px 20px; }

    /* Working grid — 1-col icon-left rows */
    .ip-working-grid { grid-template-columns: 1fr; text-align: left; }
    .ip-wi {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 14px 0;
    }
    .ip-wi-ico { margin: 0; flex-shrink: 0; width: 46px; height: 46px; }
    .ip-wi h3  { font-size: 14px; margin-bottom: 3px; }
    .ip-wi p   { font-size: 13px; }

    /* Form */
    .ip-form-row    { grid-template-columns: 1fr; }
    .ip-check-group { grid-template-columns: 1fr; }
    .ip-form-wrap   { padding: 20px; }

    /* Call strip */
    .ip-call-strip { padding: 16px 20px; }
    .ip-call-strip a { font-size: 18px; }
}

/* ── SMALL MOBILE ≤ 480px ────────────────────────────────────*/
@media (max-width: 480px) {
    .ip-hero-content    { padding: 0 14px; }
    .ip-highlights-wrap { padding: 12px 14px; }
    .ip-form-wrap       { padding: 16px; }
    .ip-cta-banner-text { padding: 24px 16px; }
    .ip-call-strip      { padding: 14px 16px; }
}

/* ── WPFORMS OVERRIDES ───────────────────────────────────────
   Scoped to .ip-wpforms-wrap to avoid bleed to other pages.
─────────────────────────────────────────────────────────────*/
.ip-wpforms-wrap .wpforms-form .wpforms-field-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin-bottom: 6px !important;
}
.ip-wpforms-wrap .wpforms-form input[type="text"],
.ip-wpforms-wrap .wpforms-form input[type="email"],
.ip-wpforms-wrap .wpforms-form input[type="tel"] {
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: #111 !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s !important;
    width: 100% !important;
}
.ip-wpforms-wrap .wpforms-form input:focus {
    border-color: #4CAF50 !important;
    box-shadow: 0 0 0 3px rgba(76,175,80,.12) !important;
    outline: none !important;
}
.ip-wpforms-wrap .wpforms-form .wpforms-field-radio label,
.ip-wpforms-wrap .wpforms-form .wpforms-field-checkbox label {
    font-size: 13.5px !important;
    color: #333 !important;
    font-weight: 400 !important;
}
.ip-wpforms-wrap .wpforms-form input[type="radio"],
.ip-wpforms-wrap .wpforms-form input[type="checkbox"] {
    accent-color: #4CAF50 !important;
}
.ip-wpforms-wrap .wpforms-form .wpforms-submit {
    height: 44px !important;
    background: #4CAF50 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    cursor: pointer !important;
    padding: 0 32px !important;
    transition: background .2s, transform .15s !important;
    letter-spacing: .02em !important;
}
.ip-wpforms-wrap .wpforms-form .wpforms-submit:hover {
    background: #388E3C !important;
    transform: translateY(-1px) !important;
}
.ip-wpforms-wrap .wpforms-form .wpforms-submit-container {
    padding: 0 !important;
}
.ip-wpforms-wrap .wpforms-container { padding: 0 !important; }
.ip-wpforms-wrap .wpforms-form .wpforms-field { padding: 0 0 16px !important; }
.ip-wpforms-wrap .wpforms-confirmation-container-full {
    background: #e8f5e9 !important;
    border: 1px solid #a5d6a7 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    font-size: 14.5px !important;
    color: #2e7d32 !important;
    font-weight: 500 !important;
}
.ip-wpforms-wrap .wpforms-form label.wpforms-error {
    color: #c62828 !important;
    font-size: 12.5px !important;
}