.welcome-text {
  margin-bottom: 0px !important;

  color: #000 !important;
  text-align: center;
  font-family: Inter;
  font-size: 40px !important;
  font-style: normal;
  font-weight: 900 !important;
  line-height: normal;
}

.instruction-text {
  color: #000 !important;
  font-family: Inter;
  font-size: 18px !important;
  font-style: normal;
  font-weight: 600 !important;
  line-height: normal;
}

.checklist-cookie-note {
  color: #000;
  text-align: center;
  font-family: Inter;
  font-size: 14px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: normal;
  margin: 0 !important;
}

.checklist-tablist {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 20px;
  align-self: stretch;
  flex-wrap: wrap;
}

.todo-category-buttons {
  list-style-type: none;
  display: flex;
  margin-left: -0.25rem;
  flex-wrap: wrap;
  padding: 0 !important;
}

button.checklist-navigation-button.button-primary.active {
  background: #fdb515 !important;
  color: #000 !important;
}

.checklist-tab-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.checklist-tab-wrapper .checklist-navigation-button.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* space between the active dot and the label */
  color: #fff !important;
  text-align: center;
  font-family: Inter;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 600 !important;
  line-height: normal;
  height: 40px;
  padding: 10px 25px;
  border-radius: var(--umbc-radius-xl, 24px);
  background: #007176;
}

.checklist-tab-wrapper .checklist-navigation-button.button-primary:hover {
  background: #fdb515 !important;
  color: #000 !important;
}

button.checklist-navigation-button.button-primary {
  background-color: #fdb515;
  color: #000;
  text-decoration: none;
  font-weight: 700;
  border: 0;
  font-size: .875rem;
  line-height: .875rem;
  padding: 0.8rem 1.625rem;
  border-radius: var(--umbc-radius-sm, 4px);
}

.checklist-contents-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 30px; /* gap between the category buttons and the first card */
}

.admission-todo-wrapper {
  margin: 0;
  display: none;
  padding: 20px 24px !important;
  flex-direction: column;
  gap: 24px;
  cursor: pointer;
  border-radius: var(--umbc-radius-xl, 24px);
  background: #FFF;
  box-shadow: var(--umbc-shadow-pop);
}

.admission-todo-wrapper .checklist-content-wrapper {
  display: none;
}

.admission-todo-wrapper .checklist-content-wrapper p:last-child {
  margin-bottom: 0;
}

.checklists-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.checklist-content-wrapper p {
  color: #000;
  font-family: Inter;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 24px; /* 150% */
}

.mark_complete_button {
  display: inline-flex;
  box-sizing: border-box;
  min-height: 44px; /* match .wp-block-button__link action button height */
  padding: 0.6rem 1.25rem;
  justify-content: center;
  align-items: center;
  border-radius: var(--umbc-radius-sm, 4px);
  border: 2px solid #000;
  cursor: pointer;
}

.mark_complete_button a {
  color: #000 !important;
  text-align: center;
  font-family: Inter;
  font-size: 15px !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: 20px; /* 133.333% */
  text-decoration: none !important;
}

.incomplete_button {
  display: none;
}

/* Keep the action button and Mark Complete button on one consistent baseline/height */
.button-stack {
  align-items: center;
}

.button-stack .wp-block-button,
.button-stack .wp-block-button__link.action_button {
  margin: 0;
}


.admission-todo-wrapper .checklist-content-wrapper .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
  margin-top: 1rem;
}

.admission-top-section-wrapper {
  display: flex;
  align-items: center;
}

.admission-top-section-wrapper .checkbox-wrapper:focus-within {
  outline: thin dotted;
}

.admission-top-section-wrapper .checkbox-wrapper label {
  display: block;
}

.admission-top-section-wrapper .checkbox-wrapper .icon-check svg {
  width: 40px;
  height: 40px;
  display: block;
}

.checked_icon {
  display: none !important;
}

.admission-top-section-wrapper .todo-title {
  margin: 0 !important;
  color: #000;
  font-family: Inter;
  font-size: 24px !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: 24px; /* 100% */
}

.admission-top-section-wrapper .checklist-required {
  margin-left: 18px;
  color: #D83933 !important;
  font-family: Inter;
  font-size: 18px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 24px; /* 133.333% */
}

.admission-top-section-wrapper .title-wrapper {
  padding: 0 24px;
  align-items: center;
  display: flex;
  width: 100%;
}

.block-editor .admission-top-section-wrapper .title-wrapper {
  display: block;
}

.admission-top-section-wrapper .todo-controls-wrapper {
  display: flex;
}

.admission-top-section-wrapper .todo-control {
  flex: 1;
}

.admission-top-section-wrapper .collapsible-toggle {
  display: flex;
  padding: 0;
  background: none !important;
  border: none !important;
  flex-shrink: 0;

}

.admission-top-section-wrapper .collapsible-toggle .icon-chevron {
  height: 100%;
  color: #454545;
}


.editor-styles-wrapper .wp-block-umbcundergrad-todos .wp-block-media-text .wp-block-media-text__content {
  margin: 1rem;
}

.wp-block-umbcundergrad-todos .icon-chevron {
  pointer-events: none;
  width: 2rem;
  height: 2rem;
}

.hidden {
  display: none;
}

.print-button {
  display: flex;
  padding: 6px 12px;
  justify-content: center;
  align-items: center;
  gap: 1px;

  border-radius: var(--umbc-radius-sm, 4px);
  border: 1px solid #666;
  background: #F3F3F3;

  color: #000 !important;
  text-align: center;
  font-family: Inter;
  font-size: 15px !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: 20px; /* 133.333% */
}

.print-button:hover {
  background: #D9D9D9;
  border: 1px solid #666;
}

@media print {
  .no-print, header, footer, .menu, .sidebar, .expander-content, .print-button, .todo-expand, .checkbox-wrapper, .status-wrapper, .top-section-wrapper, .todo-wrapper:not(.todo-enabled) {
    display: none !important;
  }

  .checklist-content-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
  }

  .checkbox-wrapper input {
    display: none;
  }

  .title-wrapper, .checkbox-wrapper {
    display: flex;
    align-items: center;
  }

  .wp-block-image img {
    display: none;
  }

  h3, p, a {
    font-size: 1em;
    line-height: 1.4;
    margin: 5px 0;
  }

  .wp-block-buttons {
    margin: 10px 0;
    display: block; /* Display buttons as block elements */
  }

  .wp-block-button a {
    padding: 0;
    border: none;
    background-color: transparent;
    text-decoration: none;
    color: inherit;
  }

  .print-link {
    margin-top: 15px;
    text-align: center;
    font-size: 0.8em;
  }

  /* Show main logo */
  .main-logo {
    display: block;
    width: 150px !important;
    height: auto;
    margin: 0 auto 20px auto;
  }
  
  /* Heading style for toggled-on button text */
  .wp-block-button.on a {
    font-weight: bold;
    font-size: 1.1em;
  }
}

@media screen and (max-width: 600px) {
  .admission-todo-wrapper {
    padding: 1.5rem;
  }

  .checklist-tablist {
    gap: 12px 20px; /* 12px vertical gap, 20px horizontal gap */
  }

  .admission-top-section-wrapper .title-wrapper {
    display: block;
  }

  .admission-top-section-wrapper .todo-title {
    font-size: 18px !important;
  }

  .admission-top-section-wrapper .checklist-required {
    font-size: 14px !important; 
  }

  .checklist-content-wrapper p {
    font-size: 14px !important;
  }

  .content-stack {
    margin-top: 0px !important;
  }

  .admission-top-section-wrapper .checklist-required {
    margin-left: 0 !important;
  }

  .welcome-text {
    font-size: 32px !important;
  }

  .instruction-text {
    font-size: 16px !important;
  }

  .checklist-tab-wrapper {
    gap: 24px;
  }

  .print-button {
    display: none;
  }
}

@media screen and (max-width: 440px) {
  .button-stack {
    gap: 12px !important;
  }
}

/* =============================================================
   Dark Mode — Checklist Block
   ============================================================= */

[data-theme="dark"] .welcome-text,
[data-theme="dark"] .instruction-text {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .checklist-cookie-note {
  color: #b0b0b0;
}

/* Inactive nav tab: "ghost" button (transparent fill, light outline, white
   label) instead of teal-on-near-black. !important on the background is
   required because checklist.js hardcodes an inline teal background on the
   tabs. The active tab stays solid gold (the highlight). */
[data-theme="dark"] .checklist-tab-wrapper .checklist-navigation-button.button-primary {
  background: transparent !important;
  border: 2px solid #e0e0e0;
  color: #fff !important;
}

[data-theme="dark"] .checklist-tab-wrapper .checklist-navigation-button.button-primary:hover {
  background: #e0e0e0 !important;
  border-color: #e0e0e0 !important;
  color: #000 !important;
}

/* Active nav tab: solid gold highlight */
[data-theme="dark"] button.checklist-navigation-button.button-primary.active {
  background: #fdb515 !important;
  border-color: #fdb515 !important;
  color: #000 !important;
}

/* Checklist card — lighter than the dark expander/page so it reads as a container */
[data-theme="dark"] .admission-todo-wrapper {
  background: var(--umbc-surface-card, #2d2d2d);
  border: 1px solid #3d3d3d;
  box-shadow: var(--umbc-shadow-pop);
}

/* Titles and body copy inside cards */
[data-theme="dark"] .admission-top-section-wrapper .todo-title,
[data-theme="dark"] .checklist-content-wrapper p {
  color: #e0e0e0 !important;
}

/* Required label stays red — readable on dark */
[data-theme="dark"] .admission-top-section-wrapper .checklist-required {
  color: #f56b67 !important;
}

/* Expand/collapse toggle icon strokes */
[data-theme="dark"] .admission-top-section-wrapper .collapsible-toggle .icon-chevron {
  color: #c0c0c0;
}

[data-theme="dark"] .icon-expand line,
[data-theme="dark"] .icon-expand path {
  stroke: #c0c0c0;
}

[data-theme="dark"] .icon-collapse line {
  stroke: #c0c0c0;
}

/* Unchecked circle icon */
[data-theme="dark"] .unchecked_icon path {
  fill: #c0c0c0;
}

/* Mark complete button */
[data-theme="dark"] .mark_complete_button {
  border-color: #c0c0c0;
}

[data-theme="dark"] .mark_complete_button a {
  color: #e0e0e0 !important;
}

/* Print button — dark surface needs a higher-contrast edge against the dark page */
[data-theme="dark"] .print-button {
  background: var(--umbc-surface-card, #2d2d2d);
  border-color: #888;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .print-button:hover {
  background: #333;
  border-color: #888;
}