.elementor-8967 .elementor-element.elementor-element-28cf9cf{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-28143223 *//* ============================================================
   DATA READINESS SCORECARD — CUSTOM CSS
   Edit the values below to change the look of your scorecard.
   Upload this file to: wp-content/plugins/ai-readiness-scorecard/assets/
   Then add this line to your theme's functions.php or use a
   plugin like "Simple Custom CSS" to load it.
   ============================================================ */


/* ============================================================
   1. OVERALL SCORECARD
   ============================================================ */

#airs-scorecard {    font-family: 'ptsans', sans-serif;  /* ← change font name here */
    max-width: 760px;           /* Width of the scorecard */
    font-size: 16px;            /* Base font size */
    /* font-family: ptsans, serif; */ /* Uncomment to change font */
    color: #1f2937;             /* Base text colour */
}


/* ============================================================
   2. HEADER BANNER
   ============================================================ */

.airs-header {
    /* Change the background colour of the dark banner */
    background: linear-gradient(130deg, #0b1e31 0%, #0f2d4a 55%, #1b3f5c 100%);

    /* To use a solid colour instead, replace the line above with: */
    /* background: #0b1e31; */

    border-radius: 14px 14px 0 0;  /* Rounded corners top only */
    padding: 2rem 2.5rem 2.25rem;  /* Space inside the banner */
}

/* Logo image size */
.airs-header-logo img {
    height: 70px;   /* Make bigger or smaller */
    width: auto;
}

/* "DATA · AI · CLOUD" text top-right */
.airs-header-tagline {
    color: rgba(255, 255, 255, 0.32);   /* Increase opacity to make more visible e.g. 0.6 */
    font-size: 0px;
    letter-spacing: 2px;
}

/* "DATA READINESS SCORECARD" orange label */
.airs-header-eyebrow {
    color: hsla(14, 65%, 54%, 1);     /* Change the orange colour here */
    font-size: 14px;
    letter-spacing: 3px;
}

/* Main headline "Is your data ready for AI?" */
.airs-header h1 {
    color: #ffffff;     /* Headline text colour */
    font-size: 32px;    /* Headline size — make bigger or smaller */
    font-weight: 700;
}

/* Subtext below headline */
.airs-header p {
    color: rgba(255, 255, 255, 0.58);   /* Increase to 0.8 to make brighter */
    font-size: 16px;
}


/* ============================================================
   3. HOW TO USE IT BAR
   ============================================================ */

.airs-how-to {
    background: #f0f4f8;        /* Light blue background */
    border-top: 1px solid #1a6fa8; /* Blue top accent line — change colour here */
    border-color: #cddaea;      /* Side/bottom border colour */
    padding: 14px 1rem;
}

.airs-how-label {
    color: #111827;     /* "How to use it:" label colour */
    font-weight: 700;
}

.airs-how-text {
    color: #374151;     /* Instruction text colour */
}


/* ============================================================
   4. DIMENSION CARDS
   ============================================================ */

.airs-dimension {
    background: #ffffff;        /* Card background — change to e.g. #fafafa */
    border: 1px solid #e5e7eb;  /* Card border colour */
    border-radius: 12px;        /* Corner roundness — 0 for sharp corners */
}
 
/* Number badge e.g. "01", "02" */
.airs-dim-number {
    background: hsla(203, 75%, 19%, 1);    /* Badge background colour */
    color: #ffffff;         /* Badge text colour */
    border-radius: 5px;
    font-size: 16px;        /* Badge text size */
    padding: 6px 11px;      /* Badge padding */
}

/* Dimension title e.g. "Data Accessibility" */
.airs-dim-header h2 {
    color:hsla(203, 75%, 19%, 1);     /* Title colour */
    font-size: 18px;    /* Title size */
    font-weight: 600;
}

/* Sub-label for dimension 04 */
.airs-dim-sub {
    color: #6b7280;     /* Small grey sub-label colour */
    font-size: 14px;
}


/* ============================================================
   5. OPTION BOXES (the 1–4 selections)
   ============================================================ */

/* Default (unselected) option */
.airs-opt {
    border: 1px solid #e5e7eb;  /* Border colour when not selected */
    border-radius: 8px;         /* Corner roundness */
    background: #ffffff;        /* Background when not selected */
}

/* When hovering over an option */
.airs-opt:hover {
    background: #FBF0EC;        /* Hover background */
    border-color: hsla(14, 65%, 54%, 1);      /* Hover border colour */
}

/* When an option is selected */
.airs-opt.selected {
    background: #FBF0EC;        /* Selected background (light orange) */
    border-color: hsla(14, 65%, 54%, 1);      /* Selected border colour (orange) */
}

/* Score number (1, 2, 3, 4) — unselected */
.airs-opt-score {
    color: #6B7280;     /* Grey when not selected */
    font-size: 24px;
}

/* Score number when selected */
.airs-opt.selected .airs-opt-score {
    color: #D6603B;     /* Blue when selected — change to match your brand */
}

/* Description text — unselected */
.airs-opt-text {
    color: #6b7280;     /* Grey description text */
    font-size: 13px;
}

/* Description text — selected */
.airs-opt.selected .airs-opt-text {
    color: #D6603B;     /* Darker blue when selected */
}


/* ============================================================
   6. EMAIL & SUBMIT SECTION
   ============================================================ */

.airs-submit-section {
    background: #f9fafb;        /* Light grey background */
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.airs-submit-section h3 {
    color: #111827;     /* "Get your results" heading colour */
    font-size: 24px;
}

/* Email input field */
.airs-email-input {
    border: 1px solid #d1d5db;  /* Input border colour */
    border-radius: 8px;
    background: #ffffff;
    color: hsla(0, 0%, 0%, 1);
    font-size: 14px;
}

/* Email input when focused (clicked into) */
.airs-email-input:focus {
    border-color: #3b82f6;      /* Blue focus border */
}

/* Submit button */
.airs-submit-btn {
    background: #FF5E00;    /* Button background colour — change to your brand colour */
    color: #ffffff;         /* Button text colour */
    border-radius: 50px;     /* Button corner roundness */
    font-size: 16px;
    padding: 16px 26px;     /* Button size — increase for a bigger button */
}

/* Button on hover */
.airs-submit-btn:hover {
    background: #FF5E00;    /* Slightly lighter on hover */
}

/* Error messages */
.airs-email-error,
.airs-error {
    color: #dc2626;     /* Red error text — change if needed */
    font-size: 13px;
}


/* ============================================================
   7. RESULTS CARD
   ============================================================ */

.airs-result-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 2.5rem;
}

.airs-result-card h2 {
    color: #111827;     /* "Your Data Readiness Score" heading */
     font-family: 'ptsans', sans-serif;
     font-weight: 700;
    font-size: 24px;
}

/* Score badge e.g. "14 /20" */
.airs-score-badge {
    border-radius: 16px;
    padding: 14px 28px;
    border-width: 3.5px; /* Border thickness of the score circle */
    /* Border colour is set automatically based on score band */
}

.airs-score-num {
    font-size: 54px;    /* The big score number size */
        color: #00000;
    font-weight: 800;
}

/* Band pill e.g. "Approaching Ready" */
.airs-band-pill {
    color: #ffffff;     /* Pill text colour — keep white */
    font-size: 13px;
    border-radius: 999px;
    padding: 5px 16px;
    /* Background colour is set automatically based on score band */
}

/* Band description text */
.airs-band-desc {
    color: #4b5563;
    font-size: 16px;
}


/* ============================================================
   8. DIMENSION BREAKDOWN BARS (in results)
   ============================================================ */

.airs-dim-label {
    color: #4b5563;     /* Label text colour */
    font-size: 14px;
    width: 220px;       /* Label column width */
}

/* Bar track (the grey background) */
.airs-dim-track {
    background: #f3f4f6;    /* Track background colour */
    height: 7px;            /* Bar thickness */
    border-radius: 999px;
}

/* Bar fill (coloured portion — colour set automatically) */
.airs-dim-fill {
    height: 7px;
    border-radius: 999px;
}

.airs-dim-val {
    color: #111827;     /* Score value e.g. "3/4" colour */
    font-size: 14px;
    font-weight: 700;
}


/* ============================================================
   9. SCORE BAND TABLE (in results)
   ============================================================ */

.airs-recs {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.airs-recs th {
    color: #9ca3af;     /* Table header text colour */
    font-size: 13px;
    background: #ffffff;
}

.airs-recs td {
    color: #4b5563;     /* Table cell text colour */
    font-size: 14px;
}

/* The row that matches the user's score band */
.airs-recs tr.active-band td
{
    background: #f0f9ff;    /* Highlight colour for active row */
    color: #111827;
    font-weight: 500;
}

/* Band name pill inside the table */
.airs-band-tag {
    color: #ffffff;
    font-size: 13px;
    border-radius: 999px;
    padding: 3px 11px;
    /* Background colour set automatically per band */
}

.airs-band-range {
    color: #9ca3af;     /* Score range e.g. "12–16" colour */
    font-size: 13px;
}


/* ============================================================
   10. FOOTER "EMAIL US" CTA
   ============================================================ */

.airs-cta {
    color: #6b7280;     /* Footer text colour */
    font-size: 14px;
    border-top: 1px solid #e5e7eb;
}

.airs-cta a {
    color: #2563eb;     /* "Email us" link colour */
    font-weight: 500;
}

.airs-cta a:hover {
    color: #1d4ed8;     /* Link hover colour */
}


/* ============================================================
   11. SCORE BAND COLOURS
   Change the 4 band colours here — used for the badge border,
   bar fills, and band pills automatically.
   ============================================================ */

/* These are set via JavaScript — to override, you can use:
   AI Ready       → #16a34a  (green)
   Approaching    → #2563eb  (blue)
   At Risk        → #d97706  (amber)
   Not Ready      → #dc2626  (red)

   To change them, open assets/scorecard.js and edit the
   "bands" array at the top of the file.
*/


/* ============================================================
   12. RESPONSIVE TWEAKS
   These apply on smaller screens automatically.
   ============================================================ */

@media (max-width: 620px) {
    .airs-header h1 { font-size: 24px; }   /* Smaller headline on tablet */
    .airs-score-num { font-size: 42px; }
    .airs-dim-label { width: 140px; font-size: 12px; }
}

@media (max-width: 400px) {
    .airs-header h1 { font-size: 20px; }   /* Even smaller on mobile */
    .airs-score-num { font-size: 36px; }
    .airs-opt-score { font-size: 18px; }
}/* End custom CSS */