/* ===========================================================================
   IKM Design System — components

   Two scopes, deliberately:

   1. `.ikm-page`  — wrapped automatically around post content that is built
                     from blocks. Pages still built with WPBakery have no
                     blocks, get no wrapper, and are left completely alone.
   2. `.ikm-*`     — component classes, usable anywhere, including inside a
                     Custom HTML block on a page that is otherwise untouched.

   Nothing here styles a bare element outside those scopes.
   =========================================================================== */

/* NOTE ON THE DOUBLED CLASS
   `.ikm-page.ikm-page` looks redundant and is not. EducationPack prints an
   inline rule `.nd_options_customizer_fonts h2 { font-family: Montserrat }`
   into the document head, after this stylesheet, at exactly the same
   specificity as a plain `.ikm-page h2`. Equal specificity means the later
   rule wins, so block content kept the old theme fonts. Repeating the class
   raises specificity by one class without adding !important or depending on
   load order. When EducationPack is gone at stage 08, this can be unwound. */

/* ============================ 1. BLOCK CONTENT ============================ */

.ikm-page.ikm-page{
  font-family:var(--ikm-font-sans);
  font-size:var(--ikm-size-body);
  line-height:1.65;
  color:var(--ikm-text);
  -webkit-font-smoothing:antialiased;
  /* The measure lives on the column, not on each paragraph. Constraining every
     <p> instead left all the slack on one side of a wide container, which read
     as a broken layout rather than a considered one. */
  max-width:var(--ikm-column);
  margin-left:auto;
  margin-right:auto;
}

.ikm-page.ikm-page h1,.ikm-page.ikm-page h2,.ikm-page.ikm-page h3,.ikm-page.ikm-page h4{
  font-family:var(--ikm-font-serif);
  color:var(--ikm-navy-800);
  letter-spacing:-.012em;
  text-wrap:balance;
  margin:var(--ikm-s7) 0 var(--ikm-s3);
}
.ikm-page.ikm-page > :first-child{margin-top:0}
.ikm-page.ikm-page h1{font-size:var(--ikm-size-h1);font-weight:700;line-height:1.12}
.ikm-page.ikm-page h2{font-size:var(--ikm-size-h2);font-weight:600;line-height:1.2}
.ikm-page.ikm-page h3{font-size:var(--ikm-size-h3);font-weight:600;line-height:1.3}
.ikm-page.ikm-page h4{font-size:var(--ikm-size-h4);font-weight:600;line-height:1.4;font-family:var(--ikm-font-sans)}

.ikm-page.ikm-page p,.ikm-page.ikm-page li{max-width:none}
.ikm-page.ikm-page p{margin:0 0 var(--ikm-s4)}
.ikm-page.ikm-page ul,.ikm-page.ikm-page ol{margin:0 0 var(--ikm-s4);padding-left:var(--ikm-s5)}
.ikm-page.ikm-page li{margin-bottom:var(--ikm-s2)}
.ikm-page.ikm-page li::marker{color:var(--ikm-text-3)}

/* Explicit font on every text element, not just the container.
   EducationPack's inline customizer rule targets `p`, `li`, `td` and friends
   directly, and a direct rule always beats a value inherited from an
   ancestor — so setting the family on `.ikm-page` alone was not enough.
   Verified against the live theme before shipping. */
.ikm-page.ikm-page p,.ikm-page.ikm-page li,.ikm-page.ikm-page td,.ikm-page.ikm-page th,
.ikm-page.ikm-page dt,.ikm-page.ikm-page dd,.ikm-page.ikm-page figcaption,
.ikm-page.ikm-page a,.ikm-page.ikm-page strong,.ikm-page.ikm-page em,
.ikm-page.ikm-page span{font-family:var(--ikm-font-sans)}

/* Colour has the same problem as the family: EducationPack sets #A3A3A3 on `p`
   directly, so inheriting from the wrapper was not enough. `a` is deliberately
   left out — its own colour rule follows below. */
.ikm-page.ikm-page p,.ikm-page.ikm-page li,.ikm-page.ikm-page td,.ikm-page.ikm-page th,
.ikm-page.ikm-page dt,.ikm-page.ikm-page dd,.ikm-page.ikm-page strong,
.ikm-page.ikm-page em,.ikm-page.ikm-page span{color:var(--ikm-text)}

.ikm-page.ikm-page a{color:var(--ikm-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.ikm-page.ikm-page a:hover{color:var(--ikm-navy-800)}

.ikm-page.ikm-page strong{font-weight:600}
.ikm-page.ikm-page code{font-family:var(--ikm-font-mono);font-size:.88em;background:var(--ikm-n-050);padding:1px 5px}

.ikm-page.ikm-page blockquote{
  margin:var(--ikm-s5) 0;padding:var(--ikm-s2) 0 var(--ikm-s2) var(--ikm-s5);
  border-left:3px solid var(--ikm-cyan);
  font-family:var(--ikm-font-serif);font-size:1.125rem;color:var(--ikm-text-2);
}
.ikm-page.ikm-page blockquote,.ikm-page.ikm-page blockquote p{font-family:var(--ikm-font-serif)}
.ikm-page.ikm-page blockquote p:last-child{margin-bottom:0}

.ikm-page.ikm-page hr{border:0;border-top:1px solid var(--ikm-rule);margin:var(--ikm-s7) 0}
.ikm-page.ikm-page img{max-width:100%;height:auto}
.ikm-page.ikm-page figcaption{font-size:var(--ikm-size-caption);color:var(--ikm-text-3);margin-top:var(--ikm-s2)}

/* Photographs sit centred in the column, caption tied to the picture.
   A 520px photo flush-left in a 740px column reads as a broken layout, and a
   caption box spanning the full column looks orphaned under a narrower image.
   .ikm-tl__media is deliberately not matched — those fill their card. */
.ikm-page.ikm-page figure.wp-block-image{
  display:flex;flex-direction:column;align-items:center;
  margin:var(--ikm-s6) 0;
}
.ikm-page.ikm-page figure.wp-block-image img{display:block}
.ikm-page.ikm-page figure.wp-block-image figcaption{
  max-width:100%;text-align:center;margin-top:var(--ikm-s2);
}

/* A heading belongs to what follows it. A component carrying its own 48px top
   margin otherwise sits equidistant from the heading above and the content
   below, and the heading reads as attached to neither. */
.ikm-page.ikm-page h2 + [class*="ikm-"],
.ikm-page.ikm-page h3 + [class*="ikm-"]{margin-top:var(--ikm-s4)}

/* generic tables inside content (TablePress has its own component below) */
.ikm-page.ikm-page table{width:100%;border-collapse:collapse;font-size:var(--ikm-size-small);margin:var(--ikm-s5) 0}
.ikm-page.ikm-page th,.ikm-page.ikm-page td{text-align:left;padding:var(--ikm-s3) var(--ikm-s4);border-bottom:1px solid var(--ikm-rule-soft)}
.ikm-page.ikm-page thead th{
  font-family:var(--ikm-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--ikm-navy-800);border-bottom:none;
}

/* Headings inside a component are the component's, not the page's.
   `.ikm-page.ikm-page h3` (0,2,1) otherwise beats a plain `.ikm-tl__title`
   (0,1,0) and injects the page heading's 48px top margin into every card. */
.ikm-page.ikm-page [class*="ikm-"] h2,
.ikm-page.ikm-page [class*="ikm-"] h3,
.ikm-page.ikm-page [class*="ikm-"] h4{margin-top:0}

/* keyboard focus, everywhere the plugin is active */
.ikm-page.ikm-page :focus-visible,
[class*="ikm-"] :focus-visible,
a[class*="ikm-"]:focus-visible,
button[class*="ikm-"]:focus-visible{
  outline:3px solid var(--ikm-focus);
  outline-offset:2px;
}

/* ============================ 2. COMPONENTS ============================== */

/* ---- buttons ---- */
.ikm-btn{
  display:inline-flex;align-items:center;gap:var(--ikm-s2);
  font-family:var(--ikm-font-sans);font-weight:600;font-size:1rem;line-height:1;
  padding:13px 22px;border:2px solid transparent;
  text-decoration:none !important;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.ikm-btn--primary{background:var(--ikm-navy-800);color:#fff}
.ikm-btn--primary:hover{background:var(--ikm-navy-700);color:#fff}
.ikm-btn--secondary{background:transparent;color:var(--ikm-navy-800);border-color:var(--ikm-navy-800)}
.ikm-btn--secondary:hover{background:var(--ikm-navy-800);color:#fff}
.ikm-btn--ghost{background:transparent;color:var(--ikm-link);padding-left:0;padding-right:0}
.ikm-btn--ghost:hover{color:var(--ikm-navy-800)}
.ikm-btn--on-navy{background:#fff;color:var(--ikm-navy-800)}
.ikm-btn--on-navy-alt{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.ikm-btn--on-navy-alt:hover{background:#fff;color:var(--ikm-navy-800);border-color:#fff}
.ikm-btn--sm{font-size:.90625rem;padding:9px 15px}
.ikm-btn-row{display:flex;flex-wrap:wrap;gap:var(--ikm-s3);align-items:center}

/* ---- hero ---- */
.ikm-hero{background:var(--ikm-navy-800);color:#fff;position:relative;overflow:hidden}
.ikm-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 120% at 78% 30%,rgba(3,167,224,.30),transparent 62%);
}
.ikm-hero__in{position:relative;z-index:1;max-width:var(--ikm-container);margin:0 auto;padding:var(--ikm-s9) var(--ikm-s5)}
.ikm-hero__kicker{
  font-family:var(--ikm-font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ikm-cyan);margin:0 0 var(--ikm-s4);
}
.ikm-hero__title{
  font-family:var(--ikm-font-serif);font-weight:700;font-size:var(--ikm-size-display);
  line-height:1.08;letter-spacing:-.015em;color:#fff;margin:0 0 var(--ikm-s4);max-width:19ch;
}
.ikm-hero__lede{color:rgba(255,255,255,.82);font-size:1.125rem;max-width:52ch;margin:0 0 var(--ikm-s6)}

/* ---- pathway cards ---- */
.ikm-paths{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:1px;background:var(--ikm-rule);border-top:3px solid var(--ikm-navy-800);
}
.ikm-path{background:var(--ikm-paper);padding:var(--ikm-s6) var(--ikm-s5);display:flex;flex-direction:column;gap:var(--ikm-s3)}
.ikm-path__num{font-family:var(--ikm-font-mono);font-size:12px;letter-spacing:.1em;color:var(--ikm-cyan)}
.ikm-path__title{font-family:var(--ikm-font-serif);font-weight:600;font-size:1.25rem;line-height:1.25;margin:0;color:var(--ikm-navy-800)}
.ikm-path__text{font-size:var(--ikm-size-small);line-height:1.55;color:var(--ikm-text-2);margin:0;flex:1}
.ikm-path__link{font-family:var(--ikm-font-sans);font-weight:600;font-size:.90625rem;text-decoration:none;color:var(--ikm-link)}
.ikm-path__link:hover{text-decoration:underline}

/* ---- notice / training list ---- */
.ikm-notices{display:flex;flex-direction:column}
.ikm-notice{
  display:grid;grid-template-columns:92px 1fr auto;gap:var(--ikm-s5);
  align-items:start;padding:var(--ikm-s5) 0;border-bottom:1px solid var(--ikm-rule);
}
.ikm-notice:first-child{padding-top:0}
.ikm-notice:last-child{border-bottom:none}
.ikm-notice__date{
  font-family:var(--ikm-font-mono);font-size:13px;line-height:1.4;color:var(--ikm-text-3);
  font-variant-numeric:tabular-nums;padding-top:3px;
}
.ikm-notice__day{display:block;font-family:var(--ikm-font-serif);font-weight:700;font-size:1.625rem;color:var(--ikm-navy-800);line-height:1}
.ikm-notice__title{font-family:var(--ikm-font-serif);font-weight:600;font-size:1.1875rem;line-height:1.3;margin:0 0 var(--ikm-s2);color:var(--ikm-navy-800)}
.ikm-notice__title a{color:inherit;text-decoration:none}
.ikm-notice__title a:hover{color:var(--ikm-link);text-decoration:underline}
.ikm-notice__text{font-size:var(--ikm-size-small);color:var(--ikm-text-2);margin:0 0 var(--ikm-s3);max-width:62ch}
.ikm-notice__actions{display:flex;gap:var(--ikm-s2);flex-shrink:0}
.ikm-tag{
  display:inline-block;font-family:var(--ikm-font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;margin-bottom:var(--ikm-s2);
  color:var(--ikm-navy-600);background:var(--ikm-cyan-050);border:1px solid var(--ikm-cyan-100);
}

/* ---- document list ---- */
.ikm-docs{border-top:1px solid var(--ikm-rule)}
.ikm-doc{display:grid;grid-template-columns:1fr auto;gap:var(--ikm-s5);align-items:center;padding:var(--ikm-s4) 0;border-bottom:1px solid var(--ikm-rule)}
.ikm-doc__title{font-family:var(--ikm-font-sans);font-weight:600;font-size:1rem;line-height:1.4;color:var(--ikm-navy-800);text-decoration:none}
.ikm-doc__title:hover{color:var(--ikm-link);text-decoration:underline}
.ikm-doc__meta{font-family:var(--ikm-font-mono);font-size:12.5px;color:var(--ikm-text-3);margin-top:3px;display:block}
.ikm-doc__dl{
  font-family:var(--ikm-font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ikm-link);text-decoration:none;white-space:nowrap;border:1px solid var(--ikm-rule);padding:7px 11px;
}
.ikm-doc__dl:hover{border-color:var(--ikm-link);background:var(--ikm-cyan-050)}

/* ---- accordion ---- */
.ikm-acc{border-top:1px solid var(--ikm-rule)}
.ikm-acc details{border-bottom:1px solid var(--ikm-rule)}
.ikm-acc summary{
  cursor:pointer;list-style:none;padding:var(--ikm-s4) var(--ikm-s6) var(--ikm-s4) 0;
  font-family:var(--ikm-font-sans);font-weight:600;font-size:1.03125rem;color:var(--ikm-navy-800);position:relative;
}
.ikm-acc summary::-webkit-details-marker{display:none}
.ikm-acc summary::after{
  content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--ikm-cyan);border-bottom:2px solid var(--ikm-cyan);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s;
}
.ikm-acc details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.ikm-acc__body{padding:0 0 var(--ikm-s5);font-size:1rem;color:var(--ikm-text-2);max-width:66ch}

/* ---- registry table (TablePress wrapper) ---- */
.ikm-reg{overflow-x:auto}
.ikm-reg table{width:100%;border-collapse:collapse;font-size:var(--ikm-size-small);min-width:560px;margin:0}
.ikm-reg th,.ikm-reg td{text-align:left;padding:var(--ikm-s3) var(--ikm-s4);border-bottom:1px solid var(--ikm-rule-soft)}
.ikm-reg thead th{
  font-family:var(--ikm-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--ikm-navy-800);border-bottom:none;white-space:nowrap;
}
.ikm-reg tbody tr:nth-child(even){background:var(--ikm-n-050)}
.ikm-reg tbody tr:last-child td{border-bottom:none}
.ikm-reg__no{font-family:var(--ikm-font-mono);font-variant-numeric:tabular-nums;color:var(--ikm-text-2)}
.ikm-status{display:inline-block;font-family:var(--ikm-font-sans);font-weight:600;font-size:12.5px;padding:2px 9px;white-space:nowrap}
.ikm-status--active{color:var(--ikm-ok);background:var(--ikm-ok-bg);border:1px solid var(--ikm-ok-line)}
.ikm-status--suspended{color:var(--ikm-warn);background:var(--ikm-warn-bg);border:1px solid var(--ikm-warn-line)}

/* ---- breadcrumb ---- */
.ikm-crumb{font-size:.875rem;color:var(--ikm-text-3);display:flex;gap:var(--ikm-s2);flex-wrap:wrap;align-items:center}
.ikm-crumb a{color:var(--ikm-text-2);text-decoration:none}
.ikm-crumb a:hover{color:var(--ikm-link);text-decoration:underline}
.ikm-crumb__sep{color:var(--ikm-n-300)}

/* component text elements the theme would otherwise reclaim */
.ikm-note p,.ikm-path__text,.ikm-notice__text,.ikm-acc__body,
.ikm-hero__lede,.ikm-crumb,.ikm-crumb a{font-family:var(--ikm-font-sans)}


/* ---- timeline ----
   Alternating left/right on desktop, single rail on mobile. It deliberately
   breaks out wider than the reading column: margin-left:50% puts its left edge
   on the column's centre line, then translateX(-50%) pulls it back so the two
   share a centre axis. box-sizing is set explicitly because the classic theme
   does not set it globally — without it, padding inflates each card past the
   width calculation and every dot lands ~50px off the spine. */
.ikm-timeline{
  position:relative;
  width:min(1000px,calc(100vw - 80px));
  margin:var(--ikm-s7) 0;
  margin-left:50%;
  transform:translateX(-50%);
  padding:var(--ikm-s2) 0;
}
.ikm-timeline,.ikm-timeline *{box-sizing:border-box}
.ikm-timeline::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;
  width:2px;background:var(--ikm-n-300);transform:translateX(-1px);
}
.ikm-tl{
  position:relative;
  width:calc(50% - 44px);
  margin:0 0 var(--ikm-s6);
  background:var(--ikm-paper);
  border:1px solid var(--ikm-rule);
  border-top:3px solid var(--ikm-navy-800);
  padding:var(--ikm-s5);
}
.ikm-tl:nth-child(odd){margin-right:auto}
.ikm-tl:nth-child(even){margin-left:auto}
.ikm-tl:last-child{margin-bottom:0}
.ikm-tl::after{
  content:"";position:absolute;top:28px;
  width:14px;height:14px;border-radius:50%;
  background:var(--ikm-cyan);
  box-shadow:0 0 0 4px var(--ikm-paper),0 0 0 6px var(--ikm-n-300);
}
.ikm-tl:nth-child(odd)::after{right:-51px}
.ikm-tl:nth-child(even)::after{left:-51px}
.ikm-tl__year{
  display:block;font-family:var(--ikm-font-mono);font-size:13px;
  letter-spacing:.1em;color:var(--ikm-navy-600);margin-bottom:var(--ikm-s2);
}
.ikm-tl__title{
  font-family:var(--ikm-font-serif);font-weight:600;font-size:1.1rem;
  line-height:1.3;color:var(--ikm-navy-800);margin:0 0 var(--ikm-s2);
}
.ikm-tl__text{
  font-family:var(--ikm-font-sans);font-size:.9375rem;line-height:1.55;
  color:var(--ikm-text-2);margin:0;max-width:none;
}
.ikm-tl__media{margin:var(--ikm-s3) 0 0}
.ikm-tl__media img{display:block;width:100%;height:auto}
.ikm-tl__media figcaption{
  font-family:var(--ikm-font-sans);font-size:var(--ikm-size-caption);
  color:var(--ikm-text-3);margin-top:var(--ikm-s2);
}

/* ---- callout ---- */
.ikm-note{border-left:3px solid var(--ikm-cyan);background:var(--ikm-cyan-050);padding:var(--ikm-s4) var(--ikm-s5);margin:var(--ikm-s5) 0;max-width:var(--ikm-column)}
.ikm-note__label{font-family:var(--ikm-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ikm-navy-600);display:block;margin-bottom:var(--ikm-s2)}
.ikm-note p:last-child{margin-bottom:0}

/* ---- section heading with accent rule ---- */
.ikm-section-label{
  font-family:var(--ikm-font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ikm-text-3);margin:0 0 var(--ikm-s3);padding-bottom:var(--ikm-s3);
  border-bottom:1px solid var(--ikm-rule);
}

/* ---- logo lockup (used by the theme later; available now) ---- */
.ikm-lockup{display:inline-flex;align-items:center;gap:var(--ikm-s3);text-decoration:none;color:inherit}
.ikm-lockup svg,.ikm-lockup img{height:34px;width:auto;display:block}
.ikm-lockup__name{
  font-family:var(--ikm-font-serif);font-weight:600;font-size:.9375rem;line-height:1.18;
  color:var(--ikm-navy-800);max-width:15ch;border-left:1px solid var(--ikm-rule);padding-left:var(--ikm-s3);
}

/* ---- responsive ---- */
@media (max-width:820px){
  .ikm-timeline{width:100%;margin:var(--ikm-s6) 0;transform:none}
  .ikm-timeline::before{left:8px;transform:none}
  /* must match the desktop nth-child specificity to unset the auto margins */
  .ikm-tl:nth-child(odd),.ikm-tl:nth-child(even){
    width:calc(100% - 44px);margin-left:44px;margin-right:0;
  }
  .ikm-tl:nth-child(odd)::after,.ikm-tl:nth-child(even)::after{left:-43px;right:auto}
}

@media (max-width:760px){
  .ikm-notice{grid-template-columns:1fr;gap:var(--ikm-s3)}
  .ikm-notice__actions{margin-top:var(--ikm-s2)}
  .ikm-doc{grid-template-columns:1fr;gap:var(--ikm-s3);align-items:start}
  .ikm-hero__in{padding:var(--ikm-s7) var(--ikm-s5)}
}

@media (prefers-reduced-motion:reduce){
  .ikm-btn,.ikm-acc summary::after{transition:none}
}