/* ============================================================
   CDI V28.11 - Premium typography and mobile pill form system
   Purpose:
   - Calm the oversized heading scale across public pages
   - Preserve a strong brand hierarchy without bulky wrapping
   - Keep mobile headings compact and readable
   - Present mobile select choices as tactile pill controls
   ============================================================ */

:root{
  --cdi-type-display:clamp(38px,3.35vw,52px);
  --cdi-type-display-compact:clamp(33px,2.7vw,43px);
  --cdi-type-h2:clamp(25px,2vw,32px);
  --cdi-type-h3:clamp(18px,1.25vw,23px);
  --cdi-type-body:15.5px;
  --cdi-type-leading:1.66;
}

/* Public-facing typography only. Admin remains dense and operational. */
body:not(.admin-body):not(.cdi-dashboard-body){
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

body:not(.admin-body):not(.cdi-dashboard-body) h1,
body:not(.admin-body):not(.cdi-dashboard-body) h2,
body:not(.admin-body):not(.cdi-dashboard-body) h3{
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
}

/* Primary display headings. The previous scale reached 58-72px and felt heavy. */
@media(min-width:1024px){
  body:not(.admin-body):not(.cdi-dashboard-body) h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .hero h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .mphero h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .page-hero h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .cdi-hero h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .locux-hero-copy h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .fm-hero h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .cdi-match-hero h1{
    font-size:var(--cdi-type-display)!important;
    line-height:1.075!important;
    letter-spacing:-.042em!important;
    font-weight:700!important;
  }

  /* AEO / editorial introductions use a slightly quieter scale. */
  body:not(.admin-body):not(.cdi-dashboard-body) .aeo-h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .aeo-top h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .aeo-top h2{
    font-size:var(--cdi-type-display-compact)!important;
    line-height:1.105!important;
    letter-spacing:-.036em!important;
    font-weight:700!important;
    margin-bottom:16px!important;
  }

  body:not(.admin-body):not(.cdi-dashboard-body) h2,
  body:not(.admin-body):not(.cdi-dashboard-body) .aeo-card h2,
  body:not(.admin-body):not(.cdi-dashboard-body) .fm-section-head h2,
  body:not(.admin-body):not(.cdi-dashboard-body) .section-heading,
  body:not(.admin-body):not(.cdi-dashboard-body) .locux-section-heading{
    font-size:var(--cdi-type-h2)!important;
    line-height:1.18!important;
    letter-spacing:-.028em!important;
    font-weight:700!important;
  }

  body:not(.admin-body):not(.cdi-dashboard-body) h3{
    font-size:var(--cdi-type-h3);
    line-height:1.25;
    letter-spacing:-.018em;
    font-weight:700;
  }

  body:not(.admin-body):not(.cdi-dashboard-body) .aeo-top{
    gap:clamp(42px,4vw,66px)!important;
    align-items:start!important;
  }

  body:not(.admin-body):not(.cdi-dashboard-body) .aeo-sub,
  body:not(.admin-body):not(.cdi-dashboard-body) .aeo-body p,
  body:not(.admin-body):not(.cdi-dashboard-body) .hero p,
  body:not(.admin-body):not(.cdi-dashboard-body) .mphero p,
  body:not(.admin-body):not(.cdi-dashboard-body) .page-hero p,
  body:not(.admin-body):not(.cdi-dashboard-body) .cdi-hero p{
    font-size:var(--cdi-type-body)!important;
    line-height:var(--cdi-type-leading)!important;
  }
}

/* Mobile keeps the hierarchy but avoids poster-sized headings and awkward 1-word lines. */
@media(max-width:760px){
  body:not(.admin-body):not(.cdi-dashboard-body) h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .hero h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .mphero h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .page-hero h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .cdi-hero h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .locux-hero-copy h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .fm-hero h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .cdi-match-hero h1{
    font-size:clamp(29px,8.4vw,37px)!important;
    line-height:1.09!important;
    letter-spacing:-.037em!important;
    font-weight:700!important;
  }

  body:not(.admin-body):not(.cdi-dashboard-body) .aeo-h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .aeo-top h1,
  body:not(.admin-body):not(.cdi-dashboard-body) .aeo-top h2{
    font-size:clamp(27px,7.6vw,33px)!important;
    line-height:1.12!important;
    letter-spacing:-.032em!important;
    font-weight:700!important;
  }

  body:not(.admin-body):not(.cdi-dashboard-body) h2,
  body:not(.admin-body):not(.cdi-dashboard-body) .aeo-card h2,
  body:not(.admin-body):not(.cdi-dashboard-body) .fm-section-head h2,
  body:not(.admin-body):not(.cdi-dashboard-body) .section-heading,
  body:not(.admin-body):not(.cdi-dashboard-body) .locux-section-heading{
    font-size:clamp(22px,6vw,27px)!important;
    line-height:1.2!important;
    letter-spacing:-.025em!important;
    font-weight:700!important;
  }

  body:not(.admin-body):not(.cdi-dashboard-body) h3{
    font-size:clamp(17px,4.7vw,21px);
    line-height:1.27;
    letter-spacing:-.015em;
  }

  body:not(.admin-body):not(.cdi-dashboard-body) .aeo-top{
    gap:18px!important;
  }

  body:not(.admin-body):not(.cdi-dashboard-body) .aeo-sub,
  body:not(.admin-body):not(.cdi-dashboard-body) .aeo-body p,
  body:not(.admin-body):not(.cdi-dashboard-body) .hero p,
  body:not(.admin-body):not(.cdi-dashboard-body) .mphero p,
  body:not(.admin-body):not(.cdi-dashboard-body) .page-hero p,
  body:not(.admin-body):not(.cdi-dashboard-body) .cdi-hero p{
    font-size:14.5px!important;
    line-height:1.64!important;
  }
}

/* Avoid narrow text columns making headings look unnecessarily stacked. */
body:not(.admin-body):not(.cdi-dashboard-body) .aeo-top > div,
body:not(.admin-body):not(.cdi-dashboard-body) .hero-copy,
body:not(.admin-body):not(.cdi-dashboard-body) .cdi-hero-copy,
body:not(.admin-body):not(.cdi-dashboard-body) .locux-hero-copy{
  min-width:0;
}

/* ============================================================
   Mobile pill select controls
   ============================================================ */
.cdi-pills-hidden{
  position:absolute!important;
  inline-size:1px!important;
  block-size:1px!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  opacity:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}

.cdi-pill-field{
  width:100%;
  min-width:0;
}

.cdi-pills{
  width:100%;
  min-width:0;
}

.cdi-pill{
  -webkit-tap-highlight-color:transparent;
}

@media(max-width:760px){
  body:not(.admin-body) .cdi-pill-field{
    margin-top:2px;
  }

  body:not(.admin-body) .cdi-pills,
  body:not(.admin-body) .cdi-pills-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    margin:0!important;
  }

  body:not(.admin-body) .cdi-pills.cdi-pills-count-2{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body:not(.admin-body) .cdi-pills.cdi-pills-count-3{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  body:not(.admin-body) .cdi-pills.cdi-pills-count-3.cdi-pills-wide-labels{
    grid-template-columns:1fr!important;
  }

  body:not(.admin-body) .cdi-pills.cdi-pills-count-1{
    grid-template-columns:1fr!important;
  }

  body:not(.admin-body) .cdi-pill{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    padding:10px 12px!important;
    border:1.5px solid #D6E2EE!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#243A55!important;
    box-shadow:0 5px 14px rgba(9,31,58,.045)!important;
    font-family:inherit!important;
    font-size:12.75px!important;
    font-weight:700!important;
    line-height:1.22!important;
    letter-spacing:-.012em!important;
    white-space:normal!important;
    text-align:center!important;
    overflow-wrap:anywhere!important;
    transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .12s ease!important;
  }

  body:not(.admin-body) .cdi-pill:hover{
    background:#F7FAFD!important;
    border-color:#B7C9DB!important;
  }

  body:not(.admin-body) .cdi-pill:active{
    transform:scale(.985)!important;
  }

  body:not(.admin-body) .cdi-pill.on,
  body:not(.admin-body) .cdi-pill[aria-checked="true"]{
    background:#0B2448!important;
    border-color:#0B2448!important;
    color:#fff!important;
    box-shadow:0 9px 22px rgba(11,36,72,.19)!important;
  }

  body:not(.admin-body) .cdi-pill:focus-visible,
  body:not(.admin-body) .cdi-pill-select-trigger:focus-visible,
  body:not(.admin-body) .cdi-pill-sheet-close:focus-visible,
  body:not(.admin-body) .cdi-pill-sheet-search:focus-visible{
    outline:3px solid rgba(47,128,237,.34)!important;
    outline-offset:2px!important;
  }

  /* Medium option sets become swipeable pill rails instead of compressed grids. */
  body:not(.admin-body) .cdi-pills.cdi-pills-rail{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding:2px 2px 8px!important;
    margin-left:-2px!important;
    margin-right:-2px!important;
    -webkit-overflow-scrolling:touch;
  }

  body:not(.admin-body) .cdi-pills.cdi-pills-rail::-webkit-scrollbar{
    display:none;
  }

  body:not(.admin-body) .cdi-pills.cdi-pills-rail .cdi-pill{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:min(76vw,280px)!important;
    min-width:112px!important;
    scroll-snap-align:start;
    white-space:normal!important;
  }

  /* Long option sets use a pill-shaped trigger and a searchable bottom sheet. */
  body:not(.admin-body) .cdi-pill-select-trigger{
    width:100%;
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 15px;
    border:1.5px solid #D6E2EE;
    border-radius:999px;
    background:#fff;
    color:#203650;
    box-shadow:0 6px 18px rgba(9,31,58,.055);
    font:700 13.5px/1.3 inherit;
    text-align:left;
    cursor:pointer;
  }

  body:not(.admin-body) .cdi-pill-select-trigger::after{
    content:'Choose';
    flex:0 0 auto;
    padding:5px 9px;
    border-radius:999px;
    background:#EAF3FC;
    color:#175EB9;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.025em;
  }

  body:not(.admin-body) .cdi-pill-select-trigger[data-has-value="1"]::after{
    content:'Change';
  }
}

/* Bottom sheet is created only when a mobile long-list select is opened. */
.cdi-pill-sheet-backdrop{
  position:fixed;
  inset:0;
  z-index:2147483200;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0;
  background:rgba(5,18,36,.55);
  backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,visibility 0s linear .2s;
}

.cdi-pill-sheet-backdrop.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .2s ease,visibility 0s;
}

.cdi-pill-sheet{
  width:min(100%,620px);
  max-height:min(78dvh,720px);
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;
  background:#fff;
  box-shadow:0 -24px 70px rgba(5,18,36,.22);
  transform:translateY(104%);
  transition:transform .24s cubic-bezier(.22,.8,.28,1);
}

.cdi-pill-sheet-backdrop.is-open .cdi-pill-sheet{
  transform:translateY(0);
}

.cdi-pill-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.cdi-pill-sheet-title{
  margin:0;
  color:#0B1F3D;
  font-size:18px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.02em;
}

.cdi-pill-sheet-close{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid #DCE6EF;
  border-radius:999px;
  background:#F6F9FC;
  color:#17314F;
  font-size:22px;
  cursor:pointer;
}

.cdi-pill-sheet-search{
  width:100%;
  min-height:48px;
  padding:11px 15px;
  border:1.5px solid #D7E3EE;
  border-radius:999px;
  background:#F8FBFD;
  color:#16304D;
  font:600 14px/1.3 inherit;
  outline:none;
}

.cdi-pill-sheet-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  min-height:0;
  overflow-y:auto;
  padding:2px 2px 8px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.cdi-pill-sheet-options .cdi-pill{
  min-height:46px!important;
  padding:10px 11px!important;
  border-radius:999px!important;
  border:1.5px solid #D6E2EE!important;
  background:#fff!important;
  color:#243A55!important;
  font-family:inherit!important;
  font-size:12.5px!important;
  font-weight:700!important;
  line-height:1.22!important;
  white-space:normal!important;
  cursor:pointer;
}

.cdi-pill-sheet-options .cdi-pill.on,
.cdi-pill-sheet-options .cdi-pill[aria-checked="true"]{
  background:#0B2448!important;
  border-color:#0B2448!important;
  color:#fff!important;
}

.cdi-pill-sheet-empty{
  grid-column:1/-1;
  padding:24px 14px;
  color:#66778C;
  text-align:center;
  font-size:13px;
}

body.cdi-pill-sheet-open{
  overflow:hidden!important;
  touch-action:none;
}

/* Instructor dashboard receives the same mobile pill language without changing desktop. */
@media(max-width:760px){
  .dsb-content .cdi-pills,
  .dsb-content .cdi-pills-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .dsb-content .cdi-pill{
    width:100%!important;
    min-height:44px!important;
    padding:9px 10px!important;
    border:1.5px solid #D6E2EE!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#243A55!important;
    font:700 12.5px/1.2 'Poppins',sans-serif!important;
  }
  .dsb-content .cdi-pill.on,
  .dsb-content .cdi-pill[aria-checked="true"]{
    background:#0B2448!important;
    border-color:#0B2448!important;
    color:#fff!important;
  }
  .dsb-content .cdi-pills.cdi-pills-rail{
    display:flex!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    scrollbar-width:none;
  }
  .dsb-content .cdi-pills.cdi-pills-rail::-webkit-scrollbar{display:none}
  .dsb-content .cdi-pills.cdi-pills-rail .cdi-pill{width:auto!important;flex:0 0 auto!important;min-width:112px!important}
  .dsb-content .cdi-pill-select-trigger{
    width:100%;min-height:48px;padding:10px 14px;border:1.5px solid #D6E2EE;border-radius:999px;background:#fff;color:#203650;font:700 13px/1.3 'Poppins',sans-serif;text-align:left;
  }
}

/* Admin keeps its compact typography but receives the same mobile pill controls. */
@media(max-width:760px){
  body.admin-body .cdi-pills,
  body.admin-body .cdi-pills-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin:4px 0!important;
  }
  body.admin-body .cdi-pills.cdi-pills-count-3:not(.cdi-pills-wide-labels){grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.admin-body .cdi-pills.cdi-pills-count-3.cdi-pills-wide-labels{grid-template-columns:1fr!important}
  body.admin-body .cdi-pill{
    width:100%!important;
    min-height:44px!important;
    padding:9px 10px!important;
    border:1.5px solid #D6E2EE!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#243A55!important;
    font:700 12px/1.2 'Poppins',sans-serif!important;
    white-space:normal!important;
  }
  body.admin-body .cdi-pill.on,
  body.admin-body .cdi-pill[aria-checked="true"]{
    background:#0B2448!important;
    border-color:#0B2448!important;
    color:#fff!important;
  }
  body.admin-body .cdi-pills.cdi-pills-rail{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    scrollbar-width:none;
  }
  body.admin-body .cdi-pills.cdi-pills-rail::-webkit-scrollbar{display:none}
  body.admin-body .cdi-pills.cdi-pills-rail .cdi-pill{width:auto!important;flex:0 0 auto!important;min-width:112px!important}
  body.admin-body .cdi-pill-select-trigger{
    width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;border:1.5px solid #D6E2EE;border-radius:999px;background:#fff;color:#203650;font:700 12.5px/1.3 'Poppins',sans-serif;text-align:left;cursor:pointer;
  }
  body.admin-body .cdi-pill-select-trigger::after{content:'Choose';padding:4px 8px;border-radius:999px;background:#EAF3FC;color:#175EB9;font-size:10px;font-weight:800}
  body.admin-body .cdi-pill-select-trigger[data-has-value="1"]::after{content:'Change'}
}