/* ▸▸  EATON ACADEMIC ▸ CLASS-SELECTION  ▸▸ */
/* – idle  = white / orange text
   – hover OR expanded = orange / white text
   – brand–navy focus ring only while expanded
   – no UA blue or grey outlines                               */

/* ===== CORE & PALETTE ===== */
html,body{height:100%;margin:0;padding:0;font-family:Poppins,sans-serif;color:#666;background:#fff}
:root{--navy:#30537c;--orange:#ff5300;--light:#e4eaf1}

/* ===== HEADINGS / LIVE-COUNTER ===== */
h1,h3{font-weight:700;color:var(--navy);margin:0 0 1rem}
h1{text-align:center;font-size:2rem}
.ea-live-counter{display:flex;justify-content:center;gap:6px;align-items:center;
  font:600 17px/1 Poppins,Arial,sans-serif;margin:-6px 0 26px;color:#666}
.ea-live-counter .counter-num{color:var(--orange)}
@media(max-width:480px){.ea-live-counter{font-size:15px;margin-top:-4px}}

/* ===== GRID ===== */
.class-grid{display:grid;gap:24px;padding:24px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  max-width:1100px;margin:0 auto}

/* ===== CARD ===== */
.class-item{position:relative;background:#e6f2fa;padding:16px;border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);text-align:center;cursor:pointer;transition:.2s}
.class-item:hover{transform:scale(1.02);box-shadow:0 3px 10px rgba(0,0,0,.18)}
.class-item.selected{border:2px solid var(--orange)}
.class-item.wide{grid-column:span 2}

/* sold-out */
.class-item.full{filter:grayscale(1) opacity(.55);cursor:not-allowed}
.class-item.full:hover{transform:none;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.class-item.full::after{content:"This Class is Full";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;font:700 1.25rem Poppins,sans-serif;
  color:#fff;background:rgba(0,0,0,.65);border-radius:8px;text-shadow:0 1px 3px rgba(0,0,0,.6);
  pointer-events:none}

/* ===== PROGRESS BAR ===== */
.cohort-progress{margin:24px 0 20px;position:relative;font-family:Poppins,Arial,sans-serif}
.progress-track{height:12px;background:var(--light);border-radius:8px;overflow:hidden}
.progress-fill{height:100%;background:var(--orange);border-radius:8px 0 0 8px;width:0;min-width:4%;
  animation:fillAnim .9s ease-out forwards}
@keyframes fillAnim{from{width:0}to{width:var(--target-width,60%)}}
.progress-label{position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  font:600 14px/1 Poppins,Arial,sans-serif;color:var(--navy);white-space:nowrap;
  opacity:0;animation:fadeLabel .9s ease forwards}
@keyframes fadeLabel{to{opacity:1}}
.cohort-progress.disabled .progress-fill{background:#a0a0a0}
.cohort-progress.disabled .progress-track{background:#d4d4d4}
.cohort-progress.disabled .progress-label{color:#666}
@media(max-width:480px){.progress-label{font-size:12.5px;top:-20px}}

/* ===== IMAGE & TITLE ===== */
.class-image{width:100%;height:auto;object-fit:cover;border-radius:8px;margin-bottom:12px}
.class-item h3{font-size:1.25rem;margin:.5rem 0 1.25rem}

/* ===== “VIEW DETAILS” BUTTON =====
     idle → white / orange text
     hover OR expanded → orange / white text
     brand-navy focus ring ONLY while expanded                        */
.expand-btn{
  background:#fff;
  color:var(--orange);
  border:2px solid var(--orange);
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  font-weight:500;
  cursor:pointer;
  margin:5px 0 .75rem;
  transition:background .15s,color .15s,opacity .15s;
  outline:none;                                   /* remove UA blue ring */
}
.expand-btn:hover,
.expand-btn.expanded{
  background:var(--orange);
  color:#fff;
}

/* focus ring in expanded state */
.expand-btn.expanded:focus-visible{
  box-shadow:0 0 0 3px rgba(48,83,124,.45);
}
/* collapsed state -- reset any ring / colours immediately */
.expand-btn:not(.expanded):focus,
.expand-btn:not(.expanded):hover,
.expand-btn:not(.expanded):focus-visible{
  background:#fff;
  color:var(--orange);
  box-shadow:none;
}

/* ===== DETAILS PANEL ===== */
.class-details{opacity:0;max-height:0;overflow:hidden;transition:max-height .3s,opacity .3s;text-align:left}
.class-details.show{opacity:1;max-height:80vh;overflow-y:auto;border-top:1px solid #ddd;padding-top:1rem}
@media(min-width:768px){.class-item.wide .class-details{max-height:none;overflow:visible}}

/* ===== FLOATING CTA ===== */
#enroll-now-btn{position:fixed;bottom:20px;right:20px;padding:12px 20px;border-radius:8px;
  background:#fff;color:var(--orange);border:2px solid var(--orange);font-weight:500;
  box-shadow:0 2px 6px rgba(0,0,0,.1);display:none;opacity:0;transition:opacity .3s}
#enroll-now-btn.show{opacity:1}
#enroll-now-btn:hover{background:var(--orange);color:#fff}

/* ===== STICKY RIBBON ===== */
.ea-ribbon{position:fixed;top:0;left:0;right:0;z-index:9999;height:48px;background:#ffe8d9;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.ea-ribbon-text{font:600 16px/1 Poppins,Arial,sans-serif;color:#103d66;white-space:nowrap}
body{padding-top:48px}
@media(max-width:480px){.ea-ribbon{height:44px}.ea-ribbon-text{font-size:15px}}

/* ===== HIDE WP CHROME ===== */
header#masthead,footer#colophon{display:none}