/* SP_style.css */

/* Root variables for spacing & colors */

:root {
  --SP-gap: 12px;
  --SP-radius: 10px;
  --SP-bg: #fbfdff;
  --SP-card: #ffffff;
  --SP-border: #e6eef6;
  --SP-accent: #1f7aec;
  --SP-text: #0f1724;
  --SP-muted: #61708a;
  --SP-shadow: 0 6px 18px rgba(14,30,37,0.06);
}

/* Container */

.SP_listing {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--SP-text);
  max-width: 920px;
  margin: 0 auto;
  padding: 18px;
  gap: var(--SP-gap);
}

/* Country block */

.SP_country {
  margin-bottom: 18px;
  border-radius: var(--SP-radius);
  background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.8));
  border: 1px solid var(--SP-border);
  box-shadow: var(--SP-shadow);
  overflow: hidden;
  position: relative;
  padding: 14px;
}

/* Country header: shows flag area and name */

.SP_country-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Flag area — uses CSS variable --flag-url set inline on .SP_country */

.SP_country-flag {
  width: 54px;
  height: 36px;
  flex: 0 0 54px;
  border-radius: 6px;
  background-image: var(--flag-url, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 10px rgba(10,20,30,0.06);
  border: 1px solid rgba(0,0,0,0.04);
}

/* Country name */

.SP_country-title {
  font-size: 18px;
  font-weight: 600;
}

/* Universities list inside country */

.SP_univ-list {
  margin-top: 12px;
  padding-left: 12px;
}

/* University item */

.SP_university {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
  background: var(--SP-card);
  border: 1px solid var(--SP-border);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

/* University header text */

.SP_univ-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--SP-text);
}

/* Toggle button */

.SP_toggle-btn {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: var(--SP-accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.SP_toggle-btn:focus {
  outline: 3px solid rgba(31,122,236,0.12);
}

/* Icon inside toggle — simple chevron */

.SP_toggle-icon {
  display: inline-block;
  transition: transform 220ms ease;
  width: 14px;
  height: 14px;
  transform-origin: center;
}

/* Courses collapsible container */

.SP_courses {
  overflow: hidden;
  transition: max-height 300ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  max-height: 0;
  opacity: 0;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px dashed var(--SP-border);
  padding: 0 10px;
  background: linear-gradient(180deg, rgba(247,250,255,0.9), rgba(255,255,255,0.95));
}

/* When open, JS will set max-height inline to match content; this class is kept for icon rotation & aria styling */

.SP_courses.SP_open {
  opacity: 1;
}

/* Course inner placeholder list — where actual courses go */

.SP_course-list {
  padding: 12px 6px;
  font-size: 14px;
  color: var(--SP-text);
}

/* Small helper text */

.SP_hint {
  font-size: 13px;
  color: var(--SP-muted);
  margin-top: 6px;
}