/* PIOUS Foundation — assets/css/components.css */

/* ============================================================
   CORE THEME BUTTON
   
   Root cause of text overflow: border-radius:999px (pill) clips
   text at the curved ends on longer button labels. Oxpins uses
   30px natively with overflow:hidden for the hover circle animation.
   We keep 30px and add white-space:nowrap so text never wraps inside.
   ============================================================ */

.thm-btn {
  position: relative;
  display: inline-flex !important;      /* flex so icon + text align naturally */
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle;
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
  font-family: var(--font-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 30px !important;       /* NOT 999px — that clips text at curve ends */
  padding: 14px 36px !important;
  white-space: nowrap !important;       /* NEVER let text wrap inside a button */
  overflow: hidden !important;          /* keep the hover animation clipped */
  transition: var(--transition) !important;
  box-shadow: var(--shadow-sm);
  z-index: 1;
  outline: none !important;
  border: none;
  cursor: pointer;
}

/* Hover fill animation — oxpins circle wipe, kept intact */
.thm-btn:before {
  transition-duration: 800ms;
  position: absolute;
  width: 200%;
  height: 200%;
  content: "";
  top: -230%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: -1;
  background-color: var(--color-primary) !important;
}

.thm-btn:hover {
  color: var(--color-white) !important;
  box-shadow: var(--shadow-md);
}

.thm-btn:hover:before {
  top: -40%;
}

/* Ghost variant (used on hero over dark backgrounds) */
.thm-btn--ghost {
  background-color: transparent !important;
  border: 2px solid var(--color-white) !important;
  color: var(--color-white) !important;
  box-shadow: none;
}

.thm-btn--ghost:before {
  background-color: var(--color-accent) !important;
}

.thm-btn--ghost:hover {
  color: var(--color-white) !important;
  border-color: var(--color-accent) !important;
}

/* Step variant (numbered scholarship list) */
.thm-btn--step {
  padding: 5px 15px !important;
  font-size: var(--text-sm) !important;
  background-color: var(--color-accent) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}


/* ============================================================
   CAUSES CARDS
   ============================================================ */

.causes-one__single {
  background-color: var(--color-white) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  transition: var(--transition) !important;
  border: 1px solid var(--color-border) !important;
}

.causes-one__single:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-4px) !important;
}

.causes-one__cat {
  background-color: var(--color-accent) !important;
  border-radius: var(--radius-sm) !important;
}

.causes-one__cat p {
  color: var(--color-white) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

.causes-one__content {
  border: none !important;
  padding: var(--space-md) !important;
}

.causes-one__title a {
  color: var(--color-heading) !important;
  font-family: var(--font-heading);
}

.causes-one__title a:hover {
  color: var(--color-accent) !important;
}

.causes-one__text {
  font-family: var(--font-body);
  color: var(--color-body) !important;
}


/* ============================================================
   FORM INPUTS
   ============================================================ */

input[type=text],
input[type=email],
input[type=tel],
input[type=search],
textarea {
  font-family: var(--font-body) !important;
  background-color: var(--color-light) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-heading) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-base) !important;
  transition: var(--transition) !important;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=search]:focus,
textarea:focus {
  border-color: var(--color-accent) !important;
  background-color: var(--color-white) !important;
  box-shadow: var(--shadow-sm);
  outline: none;
}

::placeholder {
  color: var(--color-body) !important;
  opacity: 0.6 !important;
}


/* ============================================================
   ACCORDION / FAQ
   ============================================================ */

.accrodion-grp .accrodion {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background-color: var(--color-white) !important;
  margin-bottom: var(--space-sm) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.accrodion-grp .accrodion.active {
  border-color: var(--color-accent) !important;
  box-shadow: var(--shadow-md) !important;
}

.accrodion-grp .accrodion-title h4 {
  font-family: var(--font-heading) !important;
  font-size: var(--text-md) !important;
  color: var(--color-heading) !important;
}

.accrodion-grp .accrodion.active .accrodion-title h4 {
  color: var(--color-primary) !important;
}

.accrodion-grp .accrodion-title h4::before {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
}

.accrodion-grp .accrodion-title h4::after {
  background-color: var(--color-light) !important;
}

.accrodion-grp .accrodion.active .accrodion-title h4::after {
  background-color: var(--color-accent-light) !important;
}


/* ============================================================
   TABS
   ============================================================ */

.causes-two__tab-box .tab-buttons .tab-btn span {
  font-family: var(--font-heading);
  color: var(--color-body);
}

.causes-two__tab-box .tab-buttons .tab-btn.active-btn span {
  color: var(--color-primary) !important;
}

.causes-two__tab-box .tab-buttons .tab-btn span:before {
  background-color: var(--color-accent) !important;
}

.causes-two__tab-box .tab-buttons .tab-btn span:after {
  background-color: var(--color-primary) !important;
}