/* The Block Audit brand styles. Mobile first. */

:root {
  --navy: #0B1F3A;
  --navy-deep: #071528;
  --navy-soft: #14315a;
  --gold: #C9A227;
  --gold-bright: #E3BE45;
  --ink: #1B2430;
  --muted: #5A6675;
  --line: #E2E7EE;
  --bg: #F5F7FA;
  --card: #FFFFFF;
  --danger: #B3261E;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(11, 31, 58, .06), 0 8px 24px rgba(11, 31, 58, .07);
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, .wordmark, .btn, .nav-link {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 .6em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-soft); }
a:hover { color: var(--gold); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header and nav */

.site-header {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  flex-wrap: wrap;
}

/* The logo artwork is dark on transparent, so on the navy header it sits on a
   white panel rather than being filtered, which would distort brand color. */
.brand {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 7px 12px;
  margin: 9px 0;
  text-decoration: none;
  flex: none;
}

.brand-logo {
  display: block;
  max-height: 44px;
  width: auto;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}

.site-nav {
  display: none;
  width: 100%;
  padding-bottom: 12px;
}

.site-nav.open { display: block; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-link {
  display: block;
  padding: 10px 4px;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.nav-link:hover, .nav-link[aria-current="page"] { color: var(--gold); }

/* Slice W8. The sign in control, which is an action rather than a
   destination and now looks like one.
 *
   A NOTE ON THE FILL, twice revised, because the first answer was wrong.
   Slice W8 read the brief as navy on white text and made it legible on a navy
   header with a faint white edge. On the live header that compensation
   failed: an outlined navy button on a navy bar reads as bold text, not as a
   control, which is the one thing the button existed to fix.
 *
   Slice W13 stops compensating. The button takes the site's gold, which is
   what every primary action on this site is already made of, and navy text on
   it for the same reason the gold buttons everywhere else carry navy text.
   There is nothing to make legible: it is the only warm thing on a navy bar.
 *
   Ordering rather than markup order. The control is emitted before the
   toggle and the nav so that it stays on the bar when the nav collapses, and
   the order properties below put it where it belongs at each width: last on
   the bar when the nav is horizontal, beside the Menu button when it is not. */
.nav-cta { margin-top: 0; flex: none; order: 2; margin-left: auto; }
.brand { order: 1; }
.nav-toggle { order: 3; }
.site-nav { order: 4; }

.nav-signin {
  background: var(--gold);
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: .88rem;
}

/* The same lift every other gold control on this site makes, so hovering the
   way in feels like hovering anything else. */
.nav-signin:hover,
.nav-signin:focus-visible {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--navy);
}

/* Where it is now, it is the current page marker's job too. Inverted rather
   than recoloured, because there is no brighter gold left to go to. */
.nav-signin[aria-current="page"] {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

/* Buttons */

.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 12px 20px;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-gold {
  background: var(--gold);
  color: var(--navy);
}

.btn-gold:hover {
  background: var(--gold-bright);
  color: var(--navy);
}

.btn-navy {
  background: var(--navy);
  color: #fff;
}

.btn-navy:hover { background: var(--navy-soft); color: #fff; }

.btn-outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}

.btn-outline:hover { background: var(--navy); color: #fff; }

.btn[disabled], .btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.btn-block { display: block; width: 100%; }

/* Main and sections */

main { flex: 1 0 auto; }

.section { padding: 44px 0; }
.section-alt { background: #fff; border-block: 1px solid var(--line); }

.section-head { max-width: 720px; margin-bottom: 26px; }
.section-head p { color: var(--muted); margin-bottom: 0; }

.eyebrow {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .7em;
}

/* Hero */

.hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 56px 0 60px;
}

.hero h1, .hero h2 { color: #fff; }

.wordmark {
  font-weight: 800;
  font-size: clamp(2.1rem, 8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 .3em;
  color: #fff;
}

.hero-centered { text-align: center; }
.hero-centered .hero-intro { margin-left: auto; margin-right: auto; }

.hero-logo-panel {
  display: inline-block;
  background: #fff;
  border-radius: 12px;
  padding: 16px 22px;
  margin-bottom: 22px;
}

.hero-logo {
  display: block;
  max-height: 96px;
  width: auto;
}

.hero-tagline {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(.95rem, 3.4vw, 1.2rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.2em;
}

.hero p.hero-intro {
  max-width: 640px;
  color: rgba(255, 255, 255, .84);
  margin-bottom: 1.6em;
}

/* Page header for interior pages */

.page-head {
  background: var(--navy);
  color: #fff;
  padding: 40px 0 44px;
}

.page-head h1 { color: #fff; margin-bottom: .35em; }
.page-head p { color: rgba(255, 255, 255, .82); max-width: 640px; margin-bottom: 0; }

/* Cards and grids */

.grid { display: grid; gap: 18px; grid-template-columns: 1fr; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

/* Launch tiles */

.tile {
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--gold);
}

/* Slice LAND2: the badge sits on its own row, directly under the title, on
   every card in both sections.
   REPLACES the Slice LAND1 rule, and the reason is worth keeping. LAND1 put
   the badge on the title's row and let it wrap when the title was long, which
   meant a badge's height depended on how long a product's name happened to
   be: inline beside BlockGraph, wrapped under Crypto Investigations Academy.
   Across a three column grid that reads as a mistake rather than as a
   layout. So the head is a column, which makes the title a row and the badge
   the row under it whatever either one says, at every viewport. One
   structural rule, and no per card exception is allowed to exist. */
.tile-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: .9em;
}

.tile-head h3 { margin-bottom: 0; }

.tile-badge {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  background: #EDF1F7;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  align-self: flex-start;
  white-space: nowrap;
}

.tile-line {
  color: var(--muted);
  margin-bottom: 1.4em;
}

.tile-action {
  margin-top: auto;
  align-self: flex-start;
}

.tile-action.is-disabled {
  background: #E8ECF2;
  color: var(--muted);
  cursor: not-allowed;
}

.tile-action .ext {
  font-size: .85em;
  opacity: .8;
}

.tile-note {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  margin-top: 8px;
}

/* Quiet outbound pointer */

.portal-note {
  margin-top: 28px;
  font-size: .93rem;
  color: var(--muted);
}

/* Lists */

.check-list { list-style: none; padding: 0; margin: 0 0 1.1em; }

.check-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: .6em;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--gold);
}

.steps { padding-left: 20px; margin: 0 0 1.1em; }
.steps li { margin-bottom: .6em; }

/* Location table */

.locations { width: 100%; border-collapse: collapse; font-size: .95rem; }
.locations th, .locations td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.locations th {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.locations tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

/* Placeholder blocks for operator copy */

.placeholder {
  border: 1px dashed var(--gold);
  background: #FFFDF5;
  border-radius: var(--radius);
  padding: 20px;
}

.placeholder-tag {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A6D08;
  background: #FBF0CE;
  border-radius: 4px;
  padding: 3px 8px;
  margin-bottom: .9em;
}

/* Forms */

.form-card { max-width: 680px; margin: 0 auto; }

.field { margin-bottom: 22px; }

.field > label, .fieldset-legend {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: .92rem;
  color: var(--navy);
  margin-bottom: 6px;
}

.field-hint {
  display: block;
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.req { color: var(--danger); }

input[type="text"],
input[type="email"],
select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #C4CCD8;
  border-radius: 8px;
  padding: 11px 12px;
  appearance: none;
}

select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%235A6675' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

input:focus, select:focus, .btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--navy);
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}

.radio-group { display: flex; flex-direction: column; gap: 2px; }

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  background: #fff;
}

.radio-option:hover { border-color: var(--navy-soft); }
.radio-option input { margin: 4px 0 0; flex: none; }

.field-error {
  display: none;
  color: var(--danger);
  font-size: .85rem;
  font-weight: 600;
  margin-top: 6px;
}

.field-error.show { display: block; }

.has-error input[type="text"],
.has-error input[type="email"],
.has-error select { border-color: var(--danger); }

.form-note {
  background: #FFFBEC;
  border: 1px solid #F0DFA6;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: .92rem;
  margin-top: 12px;
}

.is-hidden { display: none !important; }

/* Honeypot: offscreen, never display none */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-alert {
  background: #FDECEA;
  border: 1px solid #F1B9B3;
  color: #7A1C15;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: .93rem;
  margin-bottom: 22px;
}

.success-panel { text-align: center; }
.success-panel .success-mark {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 auto 18px;
}

/* Footer */

.site-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .72);
  padding: 30px 0;
  font-size: .88rem;
  margin-top: auto;
}

.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }

.footer-grid { display: flex; flex-direction: column; gap: 14px; }

.footer-brand {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: #fff;
  font-size: .98rem;
}

.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }

/* Utility */

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-muted { color: var(--muted); }
.stack > * + * { margin-top: 18px; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Certification logos */

.logo-panel {
  display: inline-block;
  background: #fff;
  border-radius: 12px;
  padding: 14px 18px;
  flex: none;
}

.page-head-logo {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.logo-icic { display: block; max-height: 120px; width: auto; }
.logo-icic-sm { display: block; max-height: 72px; width: auto; }
.logo-iafci { display: block; max-height: 64px; width: auto; }
.logo-iafci-sm { display: block; max-height: 56px; width: auto; }

/* IAFCI mark sits beside the partnership copy, deliberately smaller than the
   ICIC mark so the layout reads as partnership and not equivalence. */
.partner-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}

.partner-row .partner-copy { flex: 1 1 260px; }

.logo-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Multi student registration */

.student-block {
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  background: #FCFDFF;
}

.student-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.student-head h3 { margin: 0; }

.btn-link {
  background: none;
  border: 0;
  padding: 4px 6px;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  color: var(--danger);
  cursor: pointer;
  text-decoration: underline;
}

.btn-link:hover { color: #7A1C15; }

.same-address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 18px;
  cursor: pointer;
}

.same-address input { margin: 4px 0 0; flex: none; }

input:disabled {
  background: #F2F4F7;
  color: var(--muted);
  cursor: not-allowed;
}

.add-student-row { margin-bottom: 24px; }

.payment-total {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: .5em;
}

/* Training offerings */

.offering { margin-bottom: 20px; }

.offering-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: .3em;
}

.offering-head h2 { margin: 0; }

.badge {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 12px;
  flex: none;
}

.offering-sub {
  font-size: .95rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 1.1em;
}

.offering-foot {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 4px;
  color: var(--muted);
  font-size: .95rem;
}

/* Course schedule */

.schedule-card {
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--gold);
}

.schedule-dates {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: .2em;
}

.schedule-card h3 {
  font-size: .95rem;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: .5em;
}

.schedule-city {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: .5em;
}

.schedule-meta {
  color: var(--muted);
  font-size: .92rem;
  margin-bottom: .6em;
}

.schedule-cta { margin-top: auto; align-self: flex-start; }

.schedule-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}

.btn.is-disabled {
  background: #E8ECF2;
  border-color: #E8ECF2;
  color: var(--muted);
  cursor: not-allowed;
}

/* Certification cross link */

.aside-icic {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  border-left: 3px solid var(--gold);
}

.aside-icic .aside-copy { flex: 1 1 280px; }
.aside-icic img { display: block; max-height: 84px; width: auto; flex: none; }

/* IAFCI membership */

.member-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 22px;
  cursor: pointer;
}

.member-check input { margin: 4px 0 0; flex: none; }

/* Modal */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 21, 40, .62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  overflow-y: auto;
}

.modal {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  border-top: 4px solid var(--gold);
  box-shadow: 0 18px 50px rgba(7, 21, 40, .35);
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 560px;
  margin: auto;
}

.modal h2 { margin-bottom: .6em; padding-right: 28px; }

.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: 0;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.modal-close:hover { color: var(--navy); background: #F2F4F7; }

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

#member-modal-list { font-weight: 700; color: var(--navy); }

/* Joining IAFCI is the primary action in the modal, so the link is the only
   gold element and the submit-anyway button steps down to navy. */
.modal-join {
  margin-top: 20px;
  padding: 15px 20px;
  font-size: 1rem;
  min-height: 48px;
}

/* Breakpoints */

@media (min-width: 720px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.85rem; }
  .section { padding: 60px 0; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 76px 0 80px; }
  .page-head { padding: 56px 0 60px; }
  .footer-grid { flex-direction: row; align-items: center; justify-content: space-between; }
  .schedule-actions { flex-direction: row; align-items: center; }
  .modal-actions { flex-direction: row; justify-content: flex-end; }
}

@media (min-width: 940px) {
  .nav-toggle { display: none; }
  .site-header .wrap { flex-wrap: nowrap; min-height: 72px; }
  .site-nav { display: block; width: auto; padding-bottom: 0; }
  .site-nav ul { flex-direction: row; align-items: center; gap: 6px; }
  .nav-link { border-bottom: 0; padding: 10px 14px; }
  /* Slice W8: with the nav horizontal, the control is the last thing on the
     bar, which is where somebody looks for a way in. */
  .nav-cta { margin-top: 0; margin-left: 8px; order: 4; }
  .site-nav { order: 3; margin-left: auto; }
  .nav-cta .btn { padding: 10px 18px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}