/*  ==============================================
    Overwrite bulma.css variables
    ==============================================
*/

:root {
    --bulma-primary-h: 211deg;
    --bulma-primary-s: 94%;
    --bulma-primary-l: 31%;

  }

.navbar-item.is-active {
    background-color: #ffcc00 !important;
}

/*
    Fontawesome icons do not sit vertically centered when embedded in text by default
*/
.icon {
    vertical-align: middle;
}

/*
    Styling buttons as card-footer-item is not possible out-of-the-box
*/
.card-footer-item[type="submit"] {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    padding: 0.75rem;
    text-align: center;
  }
  
/*
    By default, HTML details' summary is clickable, but the mouse cursor doesn't change its look
    Change that so it becomes the "click hand"
*/

summary {
    cursor: pointer;
}


/*
    Enforce alpine.js elements with the x-cloak attribute are hidden on page load
    For details, see https://github.com/alpinejs/alpine/issues/710
*/

[x-cloak] {
    display: none;
}

/*
    Default checkboxes and BulmaCSS's were rather unstyled, this improves them significantly.
*/

.checkbox {
  padding: 0.5rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.checkbox input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--bulma-primary);
}