/* Solusec - Cyber Security Awareness Month microsite.
   Loaded only by the microsite and the verification page, so it stays out of
   the 360 page stylesheet. Tokens come from site.css. */

/* The hero sits at the page gutter, so the body column does too. Centring
   it in the 1200px content area left a 196px step between the H1 and the
   first paragraph, which read as a hole in the page. */
.aw-wrap { max-width: 780px; margin: 0; }

/* ---- intro ---- */
.aw-facts { display: grid; gap: .75rem; margin: 1.6rem 0 2rem; padding: 0; list-style: none; }
.aw-wrap .aw-facts li { position: relative; padding-left: 1.6rem; line-height: 1.5; }
.aw-facts li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
}
.aw-wrap .aw-meta { font-size: .9rem; color: var(--text-dim); margin: 0 0 1.75rem; }

/* ---- progress ---- */
.aw-wrap .aw-step { font-size: .85rem; font-weight: 700; letter-spacing: .04em;
           text-transform: uppercase; color: var(--teal); margin: 0 0 .5rem; }
.aw-bar { height: 5px; border-radius: 3px; background: #dbe2ec; overflow: hidden; margin: 0 0 1.6rem; }
.aw-bar-fill { height: 100%; width: 0; background: var(--teal); border-radius: 3px;
               transition: width .28s ease; }

/* ---- question card ---- */
/* Same tint, border and radius as the site's forms, so answering a question
   looks like the same kind of act as filling one in. */
.aw-wrap .aw-card {
  background: var(--navy-mid);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 1.9rem 2rem 1.75rem;
  margin: 0 0 1.4rem;
}

/* ---- question ---- */
.aw-wrap .aw-q { font-size: 1.32rem; line-height: 1.4; font-weight: 700; color: var(--navy);
        margin: 0 0 1.4rem; outline: none; }
.aw-opts { display: grid; gap: .6rem; margin: 0; }
.aw-wrap .aw-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: 1rem; line-height: 1.45; color: var(--navy);
  background: #fff; border: 2px solid #dfe5ec; border-radius: 12px;
  padding: .85rem 1rem; transition: border-color .15s, background .15s;
}
.aw-opt:hover:not(:disabled) { border-color: var(--teal); background: #f7fbfb; }
.aw-opt:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.aw-opt:disabled { cursor: default; opacity: 1; }
.aw-opt.is-right { border-color: var(--teal); background: #eafaf6; font-weight: 600; }
.aw-opt.is-wrong { border-color: #d9534f; background: #fdf1f1; }

/* ---- feedback ---- */
.aw-fb { border-left: 4px solid var(--teal); background: #f6f9fc;
         border-radius: 0 12px 12px 0; padding: 1.1rem 1.25rem; margin: 0 0 1.4rem; }
.aw-fb.is-wrong { border-left-color: #d9534f; background: #fdf6f6; }
.aw-wrap .aw-fb p { margin: 0 0 .7rem; line-height: 1.6; }
.aw-wrap .aw-fb p:last-child { margin-bottom: 0; }
.aw-wrap .aw-fb-h { font-weight: 800; color: var(--navy); font-size: 1.02rem; }
.aw-wrap .aw-tag { font-size: .84rem; font-weight: 700; color: var(--text-dim);
          letter-spacing: .02em; }

/* ---- result ---- */
.aw-result { border-radius: 16px; padding: 1.6rem 1.5rem; margin: 0 0 1.75rem;
             border: 2px solid #dfe5ec; background: #f6f9fc; }
.aw-result.is-pass { border-color: var(--teal); background: #eafaf6; }
.aw-result.is-fail { border-color: #e4b363; background: #fdf8ef; }
.aw-wrap .aw-score { font-size: 2.6rem; font-weight: 800; color: var(--navy);
            margin: 0 0 .25rem; outline: none; line-height: 1.1; }
.aw-wrap .aw-verdict { margin: 0; font-weight: 600; color: var(--navy); }
.aw-wrap .aw-gap { margin: 1rem 0 0; font-size: .95rem; color: var(--navy); }

/* ---- certificate form ---- */
.aw-cert { border: 2px solid #dfe5ec; border-radius: 16px; padding: 1.5rem;
           margin: 0 0 2rem; background: #fff; }
.aw-wrap .aw-cert h2 { margin-top: 0; }
.aw-fields { display: grid; gap: .25rem; margin: 0 0 1rem; }
.aw-wrap .aw-label { font-size: .88rem; font-weight: 700; color: var(--navy); margin-top: .6rem; }
.aw-input { width: 100%; font: inherit; font-size: 16px; padding: .75rem .85rem;
            border: 2px solid #dfe5ec; border-radius: 10px; background: #fff; color: var(--navy); }
.aw-input:focus { outline: none; border-color: var(--teal); }
.aw-wrap .aw-hint { font-size: .82rem; color: var(--text-dim); margin: .3rem 0 0; }
.aw-wrap .aw-msg { font-size: .9rem; color: var(--text-dim); margin: .8rem 0 0; min-height: 1.2em; }

/* ---- review ---- */
.aw-rev { border-left: 3px solid #dfe5ec; padding: .2rem 0 .2rem 1rem; margin: 0 0 1.1rem; }
.aw-rev.is-right { border-left-color: var(--teal); }
.aw-rev.is-wrong { border-left-color: #d9534f; }
.aw-wrap .aw-rev-q { font-weight: 700; color: var(--navy); margin: 0 0 .3rem; line-height: 1.45; }
.aw-wrap .aw-rev-a { margin: 0; font-size: .95rem; color: var(--navy); }
.aw-wrap .aw-rev-e { margin: .45rem 0 0; font-size: .92rem; color: var(--text-dim); line-height: 1.55; }

.aw-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }

/* ---- verification page ---- */
.av-wrap { max-width: 720px; }
.av-card { border: 2px solid #dfe5ec; border-radius: 16px; padding: 1.5rem; margin: 0 0 2rem; }
.av-card.is-ok   { border-color: var(--teal);  background: #eafaf6; }
.av-card.is-warn { border-color: #e4b363;      background: #fdf8ef; }
.av-card.is-bad  { border-color: #d9534f;      background: #fdf1f1; }
.av-wrap .av-badge { margin: 0 0 1rem; font-weight: 800; font-size: 1.15rem; color: var(--navy); }
.av-wrap .av-card p:last-child { margin-bottom: 0; }
.av-dl { display: grid; grid-template-columns: 11rem 1fr; gap: .45rem 1rem; margin: 0; }
.av-wrap .av-dl dt { font-size: .84rem; font-weight: 700; letter-spacing: .03em;
            text-transform: uppercase; color: var(--text-dim); }
.av-wrap .av-dl dd { margin: 0; color: var(--navy); font-weight: 600; }
.av-foot { border-top: 1px solid #e6eaef; padding: 1.5rem 0; margin-top: 2rem;
           font-size: .9rem; color: var(--text-dim); }
.av-foot p { margin: 0; }

@media (max-width: 640px) {
  .aw-wrap .aw-q { font-size: 1.15rem; }
  .aw-wrap .aw-opt { padding: .75rem .85rem; font-size: .97rem; }
  .aw-wrap .aw-score { font-size: 2.1rem; }
  .av-dl { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .av-wrap .av-dl dd { margin-bottom: .6rem; }
  .aw-actions .btn-primary, .aw-actions .btn-outline { width: 100%; text-align: center; }
}

/* site.css styles bare elements; make sure [hidden] always wins. */
[hidden] { display: none !important; }

/* The site nav is sticky, so anything scrolled to by script needs to clear it. */
#aw-quiz, #aw-done, .aw-wrap .aw-q, .aw-wrap .aw-fb { scroll-margin-top: 96px; }

/* Opt-in to be contacted. Sits apart from the fields because it is a separate
   decision from "email me my certificate". */
.aw-wrap .aw-check { display: flex; gap: .65rem; align-items: flex-start;
                     margin: 1rem 0 0; font-size: .88rem; line-height: 1.5;
                     color: var(--text-dim); cursor: pointer; }
.aw-wrap .aw-check input { margin: .18rem 0 0; width: 17px; height: 17px;
                           flex: 0 0 auto; accent-color: var(--teal); cursor: pointer; }

/* site.css spaces prose with a direct-child owl (.prose > * + *), and the
   <section> wrappers this page needs for the quiz steps sit between .prose
   and its paragraphs, so that rule never reaches them. Restore it inside the
   two sections that hold ordinary prose. The quiz step itself is left alone:
   every element in it carries its own spacing. */
.aw-wrap #aw-start > * + *,
.aw-wrap #aw-done  > * + * { margin-top: 1.15rem; }
.aw-wrap #aw-start > *:first-child,
.aw-wrap #aw-done  > *:first-child { margin-top: 0; }

/* The quiz card is tinted, so the explanation under it goes white to stand
   apart from it rather than blending into it. */
.aw-wrap .aw-fb { background: #fff; border: 1px solid rgba(0,0,0,.07);
                  border-left: 4px solid var(--teal); border-radius: 0 14px 14px 0; }
.aw-wrap .aw-fb.is-wrong { background: #fff; border-left-color: #d9534f; }

@media (max-width: 640px) {
  .aw-wrap .aw-card { padding: 1.25rem 1.15rem 1.15rem; border-radius: 14px; }
}

/* site.css styles bare <section> for the homepage's full-width bands
   (padding: 100px 39px). The quiz steps are sections only to group the
   markup, so they take none of that: it was adding 100px of dead space
   above the first heading and indenting the whole column. */
.aw-wrap section { padding: 0; margin: 0; }

/* Verification page header. The page is reached straight from a PDF, often by
   somebody who has never seen the site, so it leads with whose page it is. */
.av-bar { border-bottom: 1px solid rgba(0,180,166,.14); background: #fff;
          padding: .9rem 5%; }
.av-logo { display: inline-block; line-height: 0; }
.av-logo img { height: 56px; width: auto; display: block; }
@media (max-width: 640px) { .av-logo img { height: 44px; } .av-bar { padding: .75rem 5%; } }

/* .page-hero reserves 11.25rem at the top to clear the main site's fixed
   navigation. This page has a plain logo bar instead, so that reservation is
   just a hole. */
.av-hero { padding-top: 2.5rem; }
@media (max-width: 900px) { .av-hero { padding-top: 2rem; } }

/* ── Assessment modal ───────────────────────────────────────────────
   The quiz and the certificate run in a dialog rather than in the page,
   so somebody answering questions is not reading marketing copy
   underneath. Same conventions as the site's lead gen overlay. */
.aw-modal { position: fixed; inset: 0; z-index: 9999; display: flex;
            align-items: center; justify-content: center; padding: 1rem; }
.aw-scrim { position: fixed; inset: 0; background: rgba(10,22,40,.62); }
.aw-modal .aw-dialog { z-index: 1; }

.aw-dialog {
  position: relative; width: 100%; max-width: 760px;
  max-height: calc(100vh - 2rem); display: flex; flex-direction: column;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(10,22,40,.4);
}
.aw-dialog:focus { outline: none; }

.aw-dialog-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem 1rem 1.6rem; background: var(--navy);
}
/* The bar sits outside .aw-wrap, so this is scoped to the bar itself. */
.aw-dialog-bar .aw-dialog-title {
  margin: 0; flex: 1 1 auto; min-width: 0; color: #fff; font-size: 1rem; font-weight: 700;
  letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aw-close {
  flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; font-size: 1.5rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.aw-close:hover  { background: rgba(255,255,255,.26); }
.aw-close:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* Scrolls inside the dialog: the review list after a fail is long, and a
   dialog that scrolls is better than one that runs off the screen. */
/* It carries .prose and .aw-wrap so everything inside is styled exactly as
   it was in the page; those two also set a max-width, which the dialog
   must override or the content sits in a narrow column inside it. */
.aw-wrap.aw-dialog-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
                          padding: 1.6rem; max-width: none; margin: 0; }
.aw-dialog-body > section { padding: 0; margin: 0; }
.aw-dialog-body #aw-done > * + * { margin-top: 1.15rem; }
.aw-dialog-body #aw-done > *:first-child { margin-top: 0; }

/* Inside the dialog the card has no page around it to sit against. */
.aw-dialog-body .aw-card { background: var(--navy-mid); }

body.aw-locked { overflow: hidden; }

@media (max-width: 640px) {
  .aw-modal  { padding: .5rem; }
  .aw-dialog { max-height: calc(100vh - 1rem); border-radius: 14px; }
  .aw-dialog-bar  { padding: .8rem .8rem .8rem 1.1rem; }
  .aw-dialog-bar .aw-dialog-title { font-size: .92rem; }
  .aw-close  { width: 36px; height: 36px; font-size: 1.35rem; }
  .aw-dialog-body { padding: 1.1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .aw-dialog { animation: aw-in .18s ease-out; }
  @keyframes aw-in { from { opacity: 0; transform: translateY(10px) scale(.99); } }
}