/* ==========================================================================
   site.css - shared component styles
   --------------------------------------------------------------------------
   Loaded after bootstrap.min.css and the Charitia theme.

   The site mixes two button vocabularies: the theme's own .btn--primary /
   .btn--secondary on public pages, and raw Bootstrap .btn.btn-primary /
   .btn-light / .btn-secondary inside the admin modals and internal pages.
   Bootstrap's defaults are blue/grey and clash badly with the green-and-yellow
   theme, so the Bootstrap variants are re-skinned onto the theme palette here.
   That keeps existing markup working while making every button look like it
   belongs to the same site.
   ========================================================================== */

:root {
  --niyn-radius: 5px;
  --niyn-btn-padding: 12px 26px;
  --niyn-focus-ring: 0 0 0 3px rgba(89, 170, 48, 0.35);
}

/* --------------------------------------------------------------------------
   1. Bootstrap button variants, re-skinned
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--nunito, "Nunito", sans-serif);
  font-weight: 700;
  letter-spacing: 0.4px;
  border-radius: var(--niyn-radius);
  padding: var(--niyn-btn-padding);
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s ease;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--niyn-focus-ring);
}

.btn-primary {
  background-color: var(--primary-color, #3c7520);
  border-color: var(--primary-color, #3c7520);
  color: var(--white, #fff);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-check:checked + .btn-primary,
.btn-primary.active {
  background-color: var(--quaternary-color, #59aa30);
  border-color: var(--quaternary-color, #59aa30);
  color: var(--white, #fff);
}

.btn-secondary {
  background-color: var(--secondary-color, #122f2a);
  border-color: var(--secondary-color, #122f2a);
  color: var(--white, #fff);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--tertiary-color, #046a58);
  border-color: var(--tertiary-color, #046a58);
  color: var(--white, #fff);
}

.btn-success {
  background-color: var(--quaternary-color, #59aa30);
  border-color: var(--quaternary-color, #59aa30);
  color: var(--white, #fff);
}

.btn-success:hover,
.btn-success:focus {
  background-color: var(--primary-color, #3c7520);
  border-color: var(--primary-color, #3c7520);
}

/* .btn-light is used for the "New Programme / New Event" actions sitting on the
   dark banner image, so it reads as the theme's yellow accent rather than
   Bootstrap's near-white. */
.btn-light {
  background-color: var(--base-bg, #e9d004);
  border-color: var(--base-bg, #e9d004);
  color: var(--black, #000);
  font-weight: 700;
}

.btn-light:hover,
.btn-light:focus {
  background-color: var(--quaternary-color, #59aa30);
  border-color: var(--quaternary-color, #59aa30);
  color: var(--white, #fff);
}

.btn-outline-primary {
  border-color: var(--primary-color, #3c7520);
  color: var(--primary-color, #3c7520);
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--primary-color, #3c7520);
  border-color: var(--primary-color, #3c7520);
  color: var(--white, #fff);
}

.btn-outline-light {
  border-color: var(--white, #fff);
  color: var(--white, #fff);
}

.btn-outline-light:hover,
.btn-outline-light:focus {
  background-color: var(--white, #fff);
  color: var(--secondary-color, #122f2a);
}

/* Destructive actions stay red - that distinction is meaningful. Only the
   shape and weight are aligned with the rest. */
.btn-danger,
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: #c0392b;
  border-color: #c0392b;
  color: var(--white, #fff);
}

.btn-outline-danger {
  border-color: #c0392b;
  color: #c0392b;
  background-color: transparent;
}

/* The bespoke edit/delete pairs on project.php, sub-project.php, article.php
   and event.php each had their own ad-hoc styling. Fold them into the same
   two variants so every internal page's action row matches. */
.btn-custom-edit {
  background-color: var(--primary-color, #3c7520);
  border-color: var(--primary-color, #3c7520);
  color: var(--white, #fff);
}

.btn-custom-edit:hover,
.btn-custom-edit:focus {
  background-color: var(--quaternary-color, #59aa30);
  border-color: var(--quaternary-color, #59aa30);
  color: var(--white, #fff);
}

.btn-custom-delete {
  background-color: transparent;
  border: 1px solid #c0392b;
  color: #c0392b;
}

.btn-custom-delete:hover,
.btn-custom-delete:focus {
  background-color: #c0392b;
  border-color: #c0392b;
  color: var(--white, #fff);
}

.btn-submit-registration {
  background-color: var(--primary-color, #3c7520);
  border-color: var(--primary-color, #3c7520);
  color: var(--white, #fff);
}

.btn-submit-registration:hover,
.btn-submit-registration:focus {
  background-color: var(--quaternary-color, #59aa30);
  border-color: var(--quaternary-color, #59aa30);
  color: var(--white, #fff);
}

/* Bootstrap sizing modifiers keep working, just on the theme's scale. */
.btn-sm  { padding: 7px 16px;  font-size: 0.875rem; }
.btn-lg  { padding: 16px 34px; font-size: 1.0625rem; }

/* The "New Programme" style buttons sit inside the breadcrumb <ol>, which is a
   flex row; without this they stretch to the full row height. */
.breadcrumb .btn {
  align-self: center;
  margin-inline-start: 16px;
}

/* --------------------------------------------------------------------------
   2. Password show/hide toggle
   -------------------------------------------------------------------------- */

.password-field {
  position: relative;
  display: block;
  width: 100%;
  /* On login.php the wrapper sits inside a Bootstrap .input-group, which is a
     flex row - without this it would collapse to its content width. */
  flex: 1 1 auto;
}

/* Leave room for the toggle so long passwords don't run underneath it. */
.password-field > input {
  width: 100%;
  padding-inline-end: 48px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  inset-inline-end: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--secondary-color, #122f2a);
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  z-index: 3;
}

.password-toggle:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.06);
}

.password-toggle:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: var(--niyn-focus-ring);
}

.password-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

/* Exactly one of the two icons is shown, driven by aria-pressed so the
   visual state and the state announced to screen readers can never diverge. */
.password-toggle .icon-hide { display: none; }
.password-toggle[aria-pressed="true"] .icon-show { display: none; }
.password-toggle[aria-pressed="true"] .icon-hide { display: block; }

/* Edge/IE render their own reveal control on top of ours. */
.password-field > input::-ms-reveal,
.password-field > input::-ms-clear {
  display: none;
}

/* --------------------------------------------------------------------------
   3. Progressive image loading
   -------------------------------------------------------------------------- */

/* Images reserve their space via width/height attributes and fade in once
   decoded, so the page lays out immediately and never jumps as images arrive. */
img[loading="lazy"] {
  background-color: rgba(0, 0, 0, 0.04);
}

@media (prefers-reduced-motion: no-preference) {
  img.is-loading {
    opacity: 0;
  }

  img.is-loaded {
    animation: niyn-img-fade 0.35s ease forwards;
  }

  @keyframes niyn-img-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}