/*
 * INNOMATE Job Portal — Theme Template
 * Copyright (c) INNOMATE a/s. All rights reserved.
 *
 * Use this file as a starting point for creating a custom theme.
 * Upload the finished file on the job portal Design tab in INNOMATE HR.
 *
 * Works for BOTH the standalone jobs widget and the full Job Portal SPA.
 *   • The SPA reads variables from `body`
 *   • The embeddable widget reads variables from `#innomate-jobs-widget`
 *   • The combined selector below covers both.
 *
 * How to use:
 *   1. Copy this file
 *   2. Change the values you want to customise
 *   3. Delete any variables you don't need to override (defaults apply)
 *   4. Upload on the Design tab
 *
 * All values below are the built-in defaults — changing nothing here
 * produces the standard INNOMATE look.
 */

/* ---------- Optional: load a custom font ---------- */
/* @import url('https://fonts.googleapis.com/css2?family=YOUR+FONT:wght@400;500;600;700&display=swap'); */

/* ========================================================================
 * Variable overrides
 * ======================================================================== */
body,
#innomate-jobs-widget {

    /* ---- Typography ---- */
    --innomate-font-family: sans-serif;
    --innomate-line-height: 1.5;
    --innomate-color-text: #2e2e2e;
    --innomate-color-heading: black;

    /* ---- Background ---- */
    --innomate-color-bg: #f7f7f7;              /* page background        */
    --innomate-content-padding: 1em;            /* outer content padding  */

    /* ---- Cards / panels ---- */
    --innomate-card-bg: #ffffff;
    --innomate-card-border: #e6e6e6;
    --innomate-card-radius: 5px;
    --innomate-card-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
    --innomate-card-padding: 1em;               /* grows to 2em at 1024px */

    /* ---- Primary colour (buttons, accents) ---- */
    --innomate-color-primary: #027AC4;
    --innomate-color-primary-hover: #046BCC;
    --innomate-color-primary-active: #0465BF;
    --innomate-color-primary-shadow: rgba(4, 107, 204, 0.2);

    /* ---- Card / job hover ---- */
    --innomate-card-hover-shadow: 0 2px 8px 0 rgba(0, 135, 219, 0.2);
    --innomate-card-hover-border: #0087db;

    /* ---- Secondary / info text ---- */
    --innomate-color-info: #555555;
    --innomate-info-font-size: 14px;            /* grows via breakpoints  */

    /* ---- Links ---- */
    --innomate-color-link: var(--innomate-color-info);
    --innomate-color-link-hover: var(--innomate-color-primary);

    /* ---- Buttons (standard / secondary) ---- */
    --innomate-button-bg: #ffffff;
    --innomate-button-border: #d1d1d1;
    --innomate-button-color: #2e2e2e;
    --innomate-button-radius: 8px;
    --innomate-button-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    --innomate-button-hover-bg: #f2f2f2;
    --innomate-button-active-bg: #e5e5e5;
    --innomate-button-disabled-color: #ababab;
    --innomate-button-disabled-bg: #e6e6e6;
    --innomate-button-disabled-border: #e5e5e5;

    /* ---- Form inputs ---- */
    --innomate-input-bg: White;
    --innomate-input-border: lightgray;
    --innomate-input-radius: 5px;
    --innomate-input-focus-border: rgb(119, 179, 216);
    --innomate-input-focus-shadow: 0 0 4px rgb(200, 224, 239);

    /* ---- Validation / status ---- */
    --innomate-color-error: #dd2c1e;
    --innomate-color-success: #28a745;
    --innomate-color-danger: #dc3545;

    /* ---- Tab menu (SPA only) ---- */
    --innomate-tab-color: var(--innomate-color-info);
    --innomate-tab-active-color: #bf591b;
    --innomate-tab-border: #e5e5e5;

    /* ---- Drop zone / file upload (SPA only) ---- */
    --innomate-dropzone-border: lightgray;
    --innomate-dropzone-radius: 10px;
    --innomate-dropzone-active-border: #007bff;
    --innomate-dropzone-active-bg: #f0f8ff;
    --innomate-dropzone-link-color: rgb(0, 102, 204);

    /* ---- Progress bar (SPA only) ---- */
    --innomate-progress-bg: #e6e6e6;
    --innomate-progress-fill: var(--innomate-color-primary);

    /* ---- My-application panel (SPA only) ---- */
    --innomate-panel-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.1);

    /* ---- Dialog (SPA only) ---- */
    --innomate-dialog-title-bg: #F7F7F7;

    /* ---- Notifications (SPA only) ---- */
    --innomate-notification-warning-bg: #fff3cd;
    --innomate-notification-warning-border: #ffeeba;
    --innomate-notification-warning-color: #856404;

    /* ---- Heading sizes (mobile-first) ---- */
    --innomate-h1-size: 1.75rem;
    --innomate-h2-size: 1.5rem;
    --innomate-h3-size: 1.25rem;
}

/* ========================================================================
 * Responsive overrides
 * Only needed if you want different values at larger viewports.
 * Delete any breakpoint you don't need.
 * ======================================================================== */
@media (min-width: 768px) {
    body,
    #innomate-jobs-widget {
        --innomate-h1-size: 2rem;
        --innomate-h2-size: 1.75rem;
        --innomate-h3-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    body,
    #innomate-jobs-widget {
        --innomate-h1-size: 2.25rem;
        --innomate-h2-size: 2rem;
        --innomate-h3-size: 1.75rem;
    }
}

@media (min-width: 1440px) {
    body,
    #innomate-jobs-widget {
        --innomate-h1-size: 2.75rem;
        --innomate-h2-size: 2.5rem;
        --innomate-h3-size: 2.25rem;
    }
}

/* ========================================================================
 * Selector-based refinements (optional)
 * Add any extra rules that go beyond variable overrides here.
 * Use the combined selector to target both widget and SPA.
 * ======================================================================== */

/* Example: make the job title span the full width above both content and info
 * @media (min-width: 1024px) {
 *     .job-details {
 *         grid-template-areas:
 *             "title   title"
 *             "content info";
 *     }
 * }
 */

/* Example: add a left accent border to job cards
 * .job,
 * #innomate-jobs-widget .job {
 *     border-left: 3px solid var(--innomate-color-primary);
 * }
 */