/* =====================================
   EDUCATION INDEX / GUTENBERG EVENT CARD
   ===================================== */

/* Tokens */
:root {
  --dark-cerulean: #004b82;
  --paolo-veronese-green: #01927e;
  --platinum: #E1DEE8;
  --quartz: #4B4657;
}

/* Month header */
.edu-month-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0 14px;
}

.edu-month {
  margin: 0;
  white-space: nowrap;
}

.edu-monthrule {
  flex: 1 1 auto;
  height: 1px;
  border: 0;
  background: #eef3f7;
}

/* Card wrapper */
.custom-education-event-card {
  margin: 20px 0;
  padding: 18px 0 26px;
  gap: 60px !important;
}

.custom-education-event-card .wp-block-columns {
  gap: 20px;
  align-items: flex-start;
}

/* Columns: L (date), M (content), R (image) */
.custom-education-event-card > .wp-block-column:first-child {
  flex: 0 0 64px;
}

.custom-education-event-card > .wp-block-column:nth-child(2) {
  flex: 1 1 auto;
}

.custom-education-event-card > .wp-block-column:last-child {
  flex: 0 0 380px;
}

/* Left date badge */
.date-badge {
  width: 56px;
  height: 64px;
  border-radius: 5px;
  background: var(--dark-cerulean);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
}

.date-badge__day {
  line-height: 1;
  font-size: 1.2rem;
  font-weight: 800;
}

.date-badge__mon {
  font-size: .78rem;
  font-weight: 700;
}

/* Left icon */
.edu-left-icon {
  margin: 0;
}

.edu-left-icon img,
.edu-left-icon .edu-ico {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

/* Title */
.custom-education-event-card .edu-title {
  margin: 0 0 4px;
}

/* Meta rows (date, location, host, summary) */
.edu-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
}

.edu-meta--summary {
  margin-bottom: 10px;
}

/* Inline SVG icons in meta */
.edu-meta .edu-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  overflow: visible;
}

/* Learn More button (uses Gutenberg styles as base) */
.custom-education-event-card .wp-block-button__link {
  padding: 9px 20px;
  border-radius: 5px;
  text-decoration: none;
}

/* Right-side image */
.edu-right-image {
  margin: 0;
}

.edu-right-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

/* Template helper */
.custom-education-event-card.is-template {
  display: none;
}

/* --- Search + host filter (right column layout) --- */

#edu-search.wp-block-group {
  margin: 0 !important;
  padding: 0 !important;
}

#edu-search {
  margin-left: auto;
  gap: 0 !important;
}

#edu-search .edu-search {
  margin: 0 !important;
}

#edu-search .edu-search + .edu-search {
  margin-top: 6px !important;
}

#edu-search .edu-search-input {
  height: 40px;
  width: 280px;
  max-width: 100%;
  padding: 0 42px 0 14px;
  border: 1px solid #c7d6e2;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(10,92,131,.03);
  transition: border-color .12s, box-shadow .12s;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238aa0b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}

#edu-search .edu-search-input::placeholder {
  color: #8aa0b4;
}

#edu-search .edu-search-input:focus {
  outline: 0;
  border-color: var(--dark-cerulean);
  box-shadow: 0 0 0 2px rgba(10,92,131,.12);
}

/* Host select */
#edu-search .edu-host-select {
  height: 40px !important;
  width: 280px;
  max-width: 100%;
  padding: 0 36px 0 12px;
  border: 1px solid #c7d6e2;
  border-radius: 5px;
  background: #fff;
  appearance: none;
  box-shadow: 0 1px 0 rgba(10,92,131,.03);
  transition: border-color .12s, box-shadow .12s;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%238aa0b4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 8 10 12 14 8'/%3E%3C/svg%3E");
}

#edu-search .edu-host-select:focus {
  outline: 0;
  border-color: var(--dark-cerulean);
  box-shadow: 0 0 0 2px rgba(10,92,131,.12);
}

#edu-search .edu-host-select.is-placeholder {
  color: #8aa0b4;
}

.custom-search-column {
  align-content: end;
}

/* Chips row helpers */
.custom-chip-row {
  align-items: center !important;
}

/* =====================================
   Summary box (sits above #smdm-edu-list)
   ===================================== */

.edu-summary {
  margin: 16px 0!important;
  padding: 10px 12px;
  border-radius: 6px;
  border-left: 3px solid var(--dark-cerulean);
  background: #f5f8fb;
  display: none; 
}

.edu-summary__title {
  margin: 0 0 4px;
}

.edu-summary__desc {
  margin: 0 0 8px;
}

/* Keep the summary button small & tidy */
.edu-summary .wp-block-button__link {
  padding: 6px 14px;
  border-radius: 5px;
}

/* =====================================
   Education type buttons – layout, hover, active
   ===================================== */

/* Row of filter buttons:
   - column 1: "All" (auto, but with a minimum)
   - columns 2–5: equal-width */
.custom-search-group .wp-block-buttons {
  display: grid;
  grid-template-columns: auto repeat(5, minmax(0, 1fr));
  column-gap: 32px;  /* more gap between buttons */
  row-gap: 0;
}

/* Remove extra margins from wrapper blocks */
.custom-search-group .wp-block-button {
  margin: 0 !important;
}

/* Slightly widen the "All" button */
.custom-search-group .wp-block-button.custom-all-button .wp-block-button__link {
  min-width: 110px; /* bump this up/down to taste */
}

/* Base button look (all filters) */
.custom-search-group .wp-block-button__link[data-filter] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding-inline: 16px;
  white-space: nowrap;
  text-align: center;
  font-size: smaller;
  cursor: pointer;
  transition:
    background-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .15s ease,
    outline-color .15s ease;
}

/* Hover hint so it feels clickable */
.custom-search-group .wp-block-button__link[data-filter]:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 75, 130, 0.18);
}

/* Active button outline (JS adds .edu-active) */
.custom-search-group .wp-block-button__link.edu-active {
  outline: 3px solid var(--dark-cerulean);
}

/* Active + outline style: give it a soft fill as well */
.custom-search-group .wp-block-button__link.edu-active.is-style-outline {
  background-color: rgba(0, 75, 130, 0.06);
  border-color: var(--dark-cerulean);
}

/* Keyboard focus – same outline as active state */
.custom-search-group .wp-block-button__link[data-filter]:focus-visible {
  outline: 3px solid var(--dark-cerulean);
}

/* Special case: "All" button uses azureish white outline/fill */
.custom-search-group .wp-block-button__link.edu-active[data-filter="all"] {
  border: 4px solid var(--wp--preset--color--azureish-white);
  outline-color: var(--wp--preset--color--azureish-white, #d4e9e8);
}

.custom-search-group .wp-block-button__link.edu-active.is-style-outline[data-filter="all"] {
  background-color: var(--wp--preset--color--azureish-white, #d4e9e8);
  border-color: var(--wp--preset--color--azureish-white, #d4e9e8);
}

.custom-search-group .wp-block-button__link[data-filter="all"]:focus-visible {
  outline-color: var(--wp--preset--color--azureish-white, #d4e9e8);
}
/* No Course Message */
.edu-empty-msg {
  text-align: center;
  padding: 20px;
  font-weight: 600;
  background-color: #f5f8fb;
  color: var(--dark-cerulean);
  border-radius: 5px;
  margin:20px 0;
}
/* Clear Filters button: keep text on one line + make it wider */
.custom-clear-button .wp-block-button__link {
  display: inline-flex;          /* keeps it nicely centered */
  align-items: center;
  justify-content: center;
  white-space: nowrap;           /* <-- prevents wrapping */
  min-width: 180px;              /* widen (tweak as needed) */
  padding: 10px 22px;            /* a little more breathing room */
}

/* If you want it to fill the whole right column */
.custom-clear-button {
  width: 100%;
}
.custom-clear-button .wp-block-button__link {
  width: 100%;
}
/* Add a little inner gutter between button edge and its contents */
.custom-search-group .wp-block-button__link[data-filter]::before,
.custom-search-group .wp-block-button__link[data-filter]::after {
  content: "";
  display: inline-block;
  width: 12px;          /* tweak: 4–10px */
  flex: 0 0 6px;
}


/* Mobile tweaks */
@media (max-width: 900px) {
  .custom-education-event-card {
    gap: 24px !important;
  }

  .custom-education-event-card > .wp-block-column:last-child {
    flex: 0 0 260px;
  }
}

@media (max-width: 700px) {
  #edu-search .edu-search-input,
  #edu-search .edu-host-select {
    width: 100%;
  }

  .custom-education-event-card {
    flex-wrap: wrap;
    gap: 16px !important;
  }

  .custom-education-event-card > .wp-block-column:first-child,
  .custom-education-event-card > .wp-block-column:last-child {
    flex: 0 0 auto;
  }

  .custom-education-event-card > .wp-block-column:last-child {
    width: 100%;
  }
}
/* ===========================
   Filter buttons – mobile
   =========================== */

/* Small screens: 2-column grid, All spans full width */
@media (max-width: 700px) {
  figure.wp-block-embed {
    width:100%!important;
  }
  .wp-block-embed__wrapper iframe {
    width:100%;
  }
  /* Search + host select 100% width */
  .custom-search-column {
    flex-basis: 100% !important;
    margin-top: 16px;
  }

  #edu-search {
    width: 100%;
  }

  #edu-search .edu-search, .edu-host-select {
    width: 100%!important;
  }

  #edu-search .edu-search-input,
  #edu-search .edu-host-select {
    width: 100%;
    max-width: none;
  }

  /* Keep your previous grid tweak */
  .custom-education-event-card {
    flex-wrap: wrap;
    gap: 16px !important;
  }

  /* On mobile, stack main columns in this order:
     1) date badge
     2) content (icon + title + meta + button)
     3) right-side image
  */
  .custom-education-event-card > .wp-block-column:first-child {
    flex: 0 0 100%;
    order: 0; /* date */
  }

  .custom-education-event-card > .wp-block-column:nth-child(2) {
    flex: 0 0 100%;
    order: 1; /* icon + text (icon will now be above the image) */
  }

  .custom-education-event-card > .wp-block-column:last-child {
    flex: 0 0 100%;
    order: 2; /* image, so it ends up under the icon/content */
    width: 100%;
  }
  .custom-chip-row {
    width:100%;
    align-self:center;
  }
}



/* Extra-small phones: stack everything full width */
@media (max-width: 420px) {

  .custom-search-group .wp-block-buttons {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 8px;
  }

  .custom-search-group .wp-block-button.custom-all-button {
    grid-column: auto;   /* normal single-column behaviour */
  }
}