/* ==========================================================================
   ProfessNow — Components
   Buttons, cards, badges, chips, form controls, accordion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.pn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pn-s2);
  min-height: 48px;
  padding: 0 var(--pn-s6);
  border: 1px solid transparent;
  border-radius: var(--pn-r-md);
  font: var(--pn-button);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--pn-fast) var(--pn-ease-out),
    border-color var(--pn-fast) var(--pn-ease-out),
    color var(--pn-fast) var(--pn-ease-out),
    box-shadow var(--pn-normal) var(--pn-ease-out),
    transform var(--pn-fast) var(--pn-ease-out);
}

.pn-btn:hover { text-decoration: none; }

.pn-btn:active { transform: translateY(0) scale(.985); }

.pn-btn[disabled],
.pn-btn[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
}

.pn-btn__icon {
  flex: none;
  transition: transform var(--pn-normal) var(--pn-ease-out);
}

.pn-btn:hover .pn-btn__icon { transform: translateX(3px); }

/* Primary — the single green action on any given surface. */
.pn-btn--primary {
  background: var(--pn-green);
  color: var(--pn-white);
  box-shadow: var(--pn-shadow-green);
}

.pn-btn--primary:hover,
.pn-btn--primary:focus {
  background: var(--pn-green-hover);
  color: var(--pn-white);
  box-shadow: var(--pn-shadow-green-lg);
  transform: translateY(-1px);
}

.pn-btn--primary:active { background: var(--pn-green-active); }

/* Secondary — outlined, sits beside a primary without competing. */
.pn-btn--secondary {
  background: var(--pn-white);
  border-color: var(--pn-border-strong);
  color: var(--pn-text);
  box-shadow: var(--pn-shadow-xs);
}

.pn-btn--secondary:hover,
.pn-btn--secondary:focus {
  border-color: var(--pn-green);
  color: var(--pn-green-deep);
  background: var(--pn-green-soft);
  transform: translateY(-1px);
}

/* Dark — for light surfaces that already carry a green primary. */
.pn-btn--dark {
  background: var(--pn-black);
  color: var(--pn-white);
}

.pn-btn--dark:hover,
.pn-btn--dark:focus {
  background: var(--pn-black-3);
  color: var(--pn-white);
  transform: translateY(-1px);
  box-shadow: var(--pn-shadow-hover);
}

/* Ghost on dark sections. */
.pn-btn--ghost-invert {
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
  color: var(--pn-white);
}

.pn-btn--ghost-invert:hover,
.pn-btn--ghost-invert:focus {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .5);
  color: var(--pn-white);
  transform: translateY(-1px);
}

.pn-btn--lg {
  min-height: 56px;
  padding: 0 var(--pn-s8);
  font-size: 1rem;
}

.pn-btn--sm {
  min-height: 40px;
  padding: 0 var(--pn-s4);
  font-size: .875rem;
}

.pn-btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   Chips — trending searches, skill tags
   -------------------------------------------------------------------------- */
.pn-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--pn-s2);
  min-height: 36px;
  padding: 0 var(--pn-s4);
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-r-pill);
  background: var(--pn-white);
  color: var(--pn-text-muted);
  font: var(--pn-body-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--pn-fast) var(--pn-ease-out),
    color var(--pn-fast) var(--pn-ease-out),
    background-color var(--pn-fast) var(--pn-ease-out),
    transform var(--pn-fast) var(--pn-ease-out);
}

.pn-chip:hover,
.pn-chip:focus {
  border-color: var(--pn-green);
  background: var(--pn-green-soft);
  color: var(--pn-green-deep);
  text-decoration: none;
  transform: translateY(-1px);
}

.pn-chip--sm { min-height: 28px; padding: 0 var(--pn-s3); font-size: .8125rem; }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.pn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--pn-r-pill);
  font: var(--pn-caption);
  font-weight: 600;
  white-space: nowrap;
}

.pn-badge--verified {
  background: var(--pn-green-soft);
  color: var(--pn-green-deep);
  border: 1px solid var(--pn-green-border);
}

.pn-badge--neutral {
  background: var(--pn-gray-100);
  color: var(--pn-text-muted);
  border: 1px solid var(--pn-border);
}

/* Availability dot with a soft green halo. */
.pn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pn-green);
  box-shadow: 0 0 0 3px var(--pn-green-ring);
  flex: none;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.pn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pn-s6);
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-r-card);
  background: var(--pn-surface);
  box-shadow: var(--pn-shadow-card);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--pn-normal) var(--pn-ease-out),
    box-shadow var(--pn-normal) var(--pn-ease-out),
    transform var(--pn-normal) var(--pn-ease-out);
}

a.pn-card:hover,
a.pn-card:focus,
.pn-card--interactive:hover,
.pn-card--interactive:focus-within {
  border-color: var(--pn-green-border);
  box-shadow: var(--pn-shadow-hover);
  transform: translateY(-3px);
  text-decoration: none;
  color: inherit;
}

.pn-card__title {
  margin: 0;
  font: var(--pn-h4);
  color: var(--pn-text-strong);
}

.pn-card__text {
  margin: var(--pn-s2) 0 0;
  font: var(--pn-body-sm);
  color: var(--pn-text-muted);
}

/* Square icon tile used at the top of category / feature cards. */
.pn-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--pn-r-md);
  background: var(--pn-green-soft);
  color: var(--pn-green-deep);
  font-size: 1.25rem;
  flex: none;
  transition:
    background-color var(--pn-normal) var(--pn-ease-out),
    color var(--pn-normal) var(--pn-ease-out),
    transform var(--pn-normal) var(--pn-ease-out);
}

a.pn-card:hover .pn-icon-tile,
.pn-card--interactive:hover .pn-icon-tile {
  background: var(--pn-green);
  color: var(--pn-white);
  transform: scale(1.06);
}

.pn-section--dark .pn-icon-tile {
  background: rgba(74, 222, 128, .12);
  color: var(--pn-green-on-dark);
}

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */
.pn-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.pn-field__label {
  font: var(--pn-label);
  color: var(--pn-text-muted);
}

.pn-control {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--pn-s4);
  border: 1px solid var(--pn-border-strong);
  border-radius: var(--pn-r-md);
  background: var(--pn-white);
  color: var(--pn-text);
  font: var(--pn-body);
  transition:
    border-color var(--pn-fast) var(--pn-ease-out),
    box-shadow var(--pn-fast) var(--pn-ease-out);
}

.pn-control::placeholder { color: var(--pn-gray-400); }

.pn-control:focus {
  outline: none;
  border-color: var(--pn-green);
  box-shadow: 0 0 0 3px var(--pn-green-ring);
}

select.pn-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--pn-s10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23737373' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--pn-s4) center;
}

/* --------------------------------------------------------------------------
   Accordion (FAQ)
   -------------------------------------------------------------------------- */
.pn-accordion { display: flex; flex-direction: column; gap: var(--pn-s3); }

.pn-accordion__item {
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-r-lg);
  background: var(--pn-white);
  overflow: hidden;
  transition:
    border-color var(--pn-normal) var(--pn-ease-out),
    box-shadow var(--pn-normal) var(--pn-ease-out);
}

.pn-accordion__item.is-open {
  border-color: var(--pn-green-border);
  box-shadow: var(--pn-shadow-card);
}

.pn-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pn-s4);
  width: 100%;
  padding: var(--pn-s5) var(--pn-s6);
  border: 0;
  background: transparent;
  font: var(--pn-h4);
  color: var(--pn-text-strong);
  text-align: left;
  cursor: pointer;
  transition: color var(--pn-fast) var(--pn-ease-out);
}

.pn-accordion__trigger:hover { color: var(--pn-green-deep); }

.pn-accordion__icon {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pn-gray-100);
  color: var(--pn-text-muted);
  transition:
    transform var(--pn-normal) var(--pn-ease-out),
    background-color var(--pn-normal) var(--pn-ease-out),
    color var(--pn-normal) var(--pn-ease-out);
}

.pn-accordion__item.is-open .pn-accordion__icon {
  transform: rotate(45deg);
  background: var(--pn-green);
  color: var(--pn-white);
}

/* Height is animated by JS via an inline max-height so the panel can size to
   its real content; the closed state stays at 0 for correct hiding. */
.pn-accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--pn-normal) var(--pn-ease-in-out);
}

.pn-accordion__panel > div {
  padding: 0 var(--pn-s6) var(--pn-s5);
  font: var(--pn-body);
  color: var(--pn-text-muted);
}

/* Without JS the panels must still be readable. */
.pn-no-js .pn-accordion__panel { max-height: none; }