/*
 * IONIC IT – MICROSOFT 365 LEAD GENERATION ASSESSMENT
 * CSS-only styling layer for the existing [ionic_m365_assessment] shortcode.
 * Questions, explanations, answer logic and results are not modified.
 * Theme header, landing-page banner, and site footer remain untouched.
 */

/* 1. The WordPress landing-page banner already contains the intro copy.
      Remove duplicate in-widget eyebrow/heading/paragraph, RETAIN the benefit pills. */
.ionic-m365.ionic-m365 .ionic-m365__intro > .ionic-m365__eyebrow,
.ionic-m365.ionic-m365 .ionic-m365__intro > h2,
.ionic-m365.ionic-m365 .ionic-m365__intro > p {
    display: none !important;
}
.ionic-m365.ionic-m365 {
    --ionic-navy: #241b4d;
    --ionic-blue: #0066b3;
    --ionic-purple: #5c2d91;
    --ionic-pink: #d8338b;
    --ionic-ink: #2b2942;
    --ionic-muted: #5c5b70;
    --ionic-stroke: #e6e4ef;
    font-size: 18px;
    color: var(--ionic-ink);
}
.ionic-m365.ionic-m365 .ionic-m365__intro {
    padding: 5px 0 24px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    text-align: center;
}

/* 2. Make the three selling-point pills feel like a purposeful feature strip. */
.ionic-m365.ionic-m365 .ionic-m365__tags {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 14px !important;
    margin: 5px 0 0 !important;
}
.ionic-m365.ionic-m365 .ionic-m365__tags > span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1.5px solid #e5dff0 !important;
    border-radius: 999px !important;
    padding: 13px 21px !important;
    background: #f6f3fa !important;
    color: #241b4d !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 3px 12px rgba(33, 24, 73, .04);
}
.ionic-m365.ionic-m365 .ionic-m365__tags > span::before {
    content: '';
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 100%;
    background: #d8338b;
    box-shadow: 0 0 0 3px rgba(216, 51, 139, .12);
}

/* 3. Make the assessment card match the clean Ionic Cyber Score aesthetic. */
.ionic-m365.ionic-m365 .ionic-m365__panel {
    border-radius: 17px !important;
    border: 1px solid #e5e2ef !important;
    border-top: 5px solid #5c2d91 !important;
    box-shadow: 0 16px 43px rgba(36, 27, 77, .08) !important;
    background: #fff;
}
.ionic-m365.ionic-m365 .ionic-m365__progressrow {
    padding-top: 27px;
    padding-bottom: 13px;
    font-size: 16px !important;
    font-weight: 750 !important;
    color: #5c2d91;
}
.ionic-m365.ionic-m365 .ionic-m365__progressrow span:last-child {
    font-size: 15px !important;
    color: #5c5b70 !important;
}
.ionic-m365.ionic-m365 .ionic-m365__progress {
    height: 8px;
    background: #eceaf3;
}
.ionic-m365.ionic-m365 .ionic-m365__progress > span {
    background: linear-gradient(90deg, #0066b3 0%, #5c2d91 65%, #d8338b 100%) !important;
}

/* 4. Question first, explanation second – significant typographic contrast. */
.ionic-m365.ionic-m365 .ionic-m365__section {
    padding-top: 33px;
    padding-bottom: 11px;
}
.ionic-m365.ionic-m365 .ionic-m365__sectionheader {
    padding-left: 18px;
    border-left: 4px solid #d8338b;
    margin-bottom: 17px;
}
.ionic-m365.ionic-m365 .ionic-m365__sectionheader h3 {
    font-size: clamp(26px, 2.7vw, 32px) !important;
    line-height: 1.22 !important;
    font-weight: 780 !important;
    color: #241b4d !important;
    margin-bottom: 8px !important;
    letter-spacing: -.015em;
}
.ionic-m365.ionic-m365 .ionic-m365__sectionheader p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    color: #5c5b70 !important;
}
.ionic-m365.ionic-m365 .ionic-m365__question {
    padding-top: 27px;
    padding-bottom: 29px;
    border-color: #efedf5;
}
.ionic-m365.ionic-m365 .ionic-m365__question legend {
    font-size: clamp(20px, 2vw, 23px) !important;
    line-height: 1.42 !important;
    font-weight: 750 !important;
    color: #241b4d !important;
    letter-spacing: -.015em;
    margin-bottom: 0 !important;
}
.ionic-m365.ionic-m365 .ionic-m365__number {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #d8338b !important;
    margin-right: 11px;
}
.ionic-m365.ionic-m365 .ionic-m365__help {
    font-size: 15px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    color: #666579 !important;
    margin-top: 9px !important;
    margin-bottom: 17px !important;
}

/* 5. Larger answer choices and CTA buttons. */
.ionic-m365.ionic-m365 .ionic-m365__choices {
    gap: 12px;
}
.ionic-m365.ionic-m365 .ionic-m365__option > span {
    min-height: 56px !important;
    border-radius: 11px !important;
    padding: 11px 16px !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: 750 !important;
    border-width: 1.5px !important;
}
.ionic-m365.ionic-m365 .ionic-m365__option input:checked + span {
    border-color: #5c2d91 !important;
    background: #f2eef9 !important;
    color: #241b4d !important;
}
.ionic-m365.ionic-m365 .ionic-m365__option input:checked + span::before {
    border-color: #5c2d91 !important;
}
.ionic-m365.ionic-m365 .ionic-m365__button {
    min-height: 54px !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 750 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.ionic-m365.ionic-m365 .ionic-m365__button--primary {
    background: #241b4d !important;
    border-color: #241b4d !important;
    color: #fff !important;
}
.ionic-m365.ionic-m365 .ionic-m365__button--primary:hover {
    background: #5c2d91 !important;
    border-color: #5c2d91 !important;
}

/* 6. Keep results legible, including the review recommendations. */
.ionic-m365.ionic-m365 .ionic-m365__result-head h3 {
    font-size: clamp(28px, 3vw, 36px) !important;
    line-height: 1.22 !important;
}
.ionic-m365.ionic-m365 .ionic-m365__result-head p {
    font-size: 17px !important;
    line-height: 1.6 !important;
}
.ionic-m365.ionic-m365 .ionic-m365__results h4 {
    font-size: 23px !important;
    font-weight: 750 !important;
    color: #241b4d;
}
.ionic-m365.ionic-m365 .ionic-m365__finding p,
.ionic-m365.ionic-m365 .ionic-m365__cta p,
.ionic-m365.ionic-m365 .ionic-m365__results > p {
    font-size: 16px !important;
    line-height: 1.62 !important;
}
.ionic-m365.ionic-m365 .ionic-m365__cta h4 {
    font-size: 25px !important;
}
.ionic-m365.ionic-m365 .ionic-m365__footnote {
    font-size: 14px !important;
}

/* Small screens: clear hierarchy while preventing overcrowded answer buttons. */
@media (max-width: 700px) {
    .ionic-m365.ionic-m365 .ionic-m365__intro { padding: 3px 0 22px !important; }
    .ionic-m365.ionic-m365 .ionic-m365__tags { justify-content: flex-start !important; gap: 10px !important; }
    .ionic-m365.ionic-m365 .ionic-m365__tags > span { font-size: 15px !important; padding: 11px 15px !important; }
    .ionic-m365.ionic-m365 .ionic-m365__section { padding-top: 27px; }
    .ionic-m365.ionic-m365 .ionic-m365__sectionheader { padding-left: 13px; }
    .ionic-m365.ionic-m365 .ionic-m365__sectionheader h3 { font-size: 25px !important; }
    .ionic-m365.ionic-m365 .ionic-m365__sectionheader p { font-size: 15px !important; }
    .ionic-m365.ionic-m365 .ionic-m365__question legend { font-size: 20px !important; }
    .ionic-m365.ionic-m365 .ionic-m365__help { font-size: 14.5px !important; }
    .ionic-m365.ionic-m365 .ionic-m365__option > span { font-size: 15px !important; min-height: 50px !important; padding: 9px 7px !important; }
    .ionic-m365.ionic-m365 .ionic-m365__button { font-size: 16px !important; min-height: 50px !important; padding: 11px 16px !important; }
}