/* ---------------------------
   Logo (consolidated)
--------------------------- */
.logo {
  height: auto;
  margin-top: 6px;
  display: inline-block;
}

/* Prefer one naming pattern: logo--tiny etc. (optional)
   If you keep your existing classes, you can keep them as-is.
*/
.logo-tiny   { width: 100px; }
.logo-small  { width: 150px; }
.logo-normal { width: 200px; }
.logo-big    { width: 350px; }
.logo-large  { width: 500px; }

/* Overlay for modal feedback (info + error) */
#nomination-feedback-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 9998;
}

/* Default feedback remains normal (your existing bottom placement) */
/* Modal styling applied via .is-modal on the feedback article */
#nomination-feedback.is-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 2rem));
  z-index: 9999;
  margin: 0 !important;
}

/* ---------------------------
   ISACA table
   Used by associations + certifications
--------------------------- */

/* Borderless */
.isaca-table td,
.isaca-table th {
  border: none !important;
}

/* Optional horizontal separators (feature flag) */
.isaca-table.isaca-lines tr.isaca-row td {
  border-bottom: 1px solid #dbdbdb !important;
}

/* Tight row padding */
.isaca-table tr.isaca-row td {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Column hook (used in markup even when single-column) */
.isaca-col {
  vertical-align: top;
}

/* ---------------------------
   Underline-only input
--------------------------- */
.input-underline {
  border: 0 !important;
  border-bottom: 1px solid #dbdbdb !important;

  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

.input-underline:focus {
  box-shadow: none !important;
  border-bottom-color: #3273dc !important;
}

/* ---------------------------
   Help line
--------------------------- */
.isaca-help {
  display: block;
  margin-left: 1.75rem; /* or whatever aligns best */
  margin-bottom: 1.25rem;
  margin-top:0;
}

/* Help overlay blocks everything inside nomination shell (not site header/footer) */
#nomination-shell {
  position: relative;
}

#nomination-help-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 20;
}

/* Keep help panel above overlay */
#nomination-help-panel {
  z-index: 30;
}

/* Make action buttons blend into Bulma message header */
.review-message .message-header .is-review-button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  /* Key requirement: inherit header text color */
  color: inherit !important;

  /* Make the hit area a bit larger */
  padding: 0.4rem 0.6rem;
  height: auto !important;
}

/* Optional: icons slightly transparent by default */
.review-message .message-header .is-review-button .icon {
  opacity: 0.65;
}

/* Optional: stronger visibility on hover/focus */
.review-message .message-header .is-review-button:hover .icon,
.review-message .message-header .is-review-button:focus .icon {
  opacity: 1;
}

/* Optional: subtle hover “pill” without visible box */
.review-message .message-header .is-review-button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 0.35rem;
}

/* Optional: remove focus outline (Bulma typically already handles focus styles) */
.review-message .message-header .is-review-button:focus {
  outline: none !important;
}

/* ============================================================
   Expertise Scale Container
   ============================================================ */

.exp-scale-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.exp-scale {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
  width: fit-content;
  outline: none; /* allow custom focus styling */
}


.exp-scale-labels {
  display: flex;
  justify-content: space-between;

  width: 100%;          /* ✅ match exp-scale width */
  font-size: 11px;
  color: #7a7a7a;

  margin-top: -8px;
}

/* ============================================================
   Rating Pills (1–10)
   ============================================================ */
/*
.exp-pill {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #dbdbdb;
  cursor: pointer;
  font-size: 0.75rem;
  user-select: none;

  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.05s ease;
}
*/
.exp-pill {
  width: 12px;
  height: 12px;
  
  min-width: 10px;   
  min-height: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  border-radius: 50%;
  
  border: 1px solid #4a4a4a;
  background: #ffffff;

  box-sizing: border-box;
  
  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.05s ease;
}

/* ============================================================
   Hover (preview)
   ============================================================ */

.exp-pill:hover {
  border-color: #b5b5b5;
  box-shadow: 0 0 0 2px rgba(50,115,220,0.2);
}

/* ============================================================
   Active (selected) — DEFAULT (solid)
   ============================================================ */

.exp-pill.is-active {
  background: #3273dc;
  border-color: #3273dc;
}

/* ============================================================
   OPTIONAL STYLE OPTION 1: Gradient (progress feel)
   ============================================================ */
/* Uncomment to use instead of solid */

/*
.exp-pill.is-active {
  background: linear-gradient(90deg, #00d1b2, #3273dc);
  color: #ffffff;
  border-color: #3273dc;
}
*/

/* ============================================================
   OPTIONAL STYLE OPTION 2: Soft (professional tone)
   ============================================================ */
/* Uncomment to use instead of solid */

/*
.exp-pill.is-active {
  background: rgba(50, 115, 220, 0.15);
  color: #363636;
  border-color: #3273dc;
}
*/

/* ============================================================
   Optional: smoother visual feel for transitions
   ============================================================ */

.exp-pill,
.exp-pill.is-active {
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.05s ease;
}

/* ============================================================
   Active hover (slightly darker)
   ============================================================ */

.exp-pill.is-active:hover {
  background: #276cda;
}

/* ============================================================
   Click / Press feedback
   ============================================================ */
.exp-pill:active {
  transform: scale(0.95);
}

/* ============================================================
   Keyboard Focus (accessibility)
   ============================================================ */

.exp-scale:focus {
  outline: none;
}

.exp-scale:focus-visible {
  outline: 1px solid #3273dc;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================================================
   CLEANUP (hidden input safety)
   ============================================================ */
.exp-scale + input[type="hidden"] {
  display: none;
}