/**
 * Client portal — matches main site (Fredoka headings, Nunito Sans body, #fafafa pages).
 * No contact background image.
 */

.portal-page-content {
  background-color: #fafafa;
  padding: 2.5rem 0 3.5rem;
  min-height: calc(100vh - 70px);
}

@media (min-width: 992px) {
  .portal-page-content {
    padding: 3rem 0 4rem;
  }
}

.portal-page-header {
  margin-bottom: 2rem;
  max-width: 42rem;
}

.portal-page-header--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.portal-page-title {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: clamp(1.65rem, 4vw, 2.1rem);
  color: #333;
  letter-spacing: 0.01em;
  margin-bottom: 0.65rem;
}

.portal-page-lead {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #555;
  margin-bottom: 0;
}

.portal-page-content .form-label {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #444;
}

.portal-page-content .form-control {
  font-family: "Nunito Sans", sans-serif;
  border-radius: 9px;
  border-color: #d0d0d0;
}

.portal-page-content .form-control:focus {
  border-color: #686868;
  box-shadow: 0 0 0 0.2rem rgba(104, 104, 104, 0.12);
}

.portal-page-content .form-text {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.85rem;
  color: #777;
}

.portal-page-content .alert {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.92rem;
  border-radius: 9px;
}

.portal-page-content .table {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 0;
}

.portal-page-content .table thead th {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #666;
  border-bottom-width: 1px;
  background: #f7f7f7;
}

.portal-page-content .table code {
  font-size: 0.88em;
  color: #555;
}

/* All portal buttons — pill outline (matches main site project cards) */
.portal-page .portal-page-content .btn,
.portal-page .portal-admin-nav .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.35rem;
  border: 2px solid #000 !important;
  border-radius: 50px !important;
  background-color: #fff !important;
  color: #000 !important;
  font-family: "Fredoka", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  line-height: 1.35;
  padding: 0.55rem 1.35rem !important;
  min-height: 2.65rem;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.portal-page .portal-page-content .btn-sm,
.portal-page .portal-admin-nav .btn-sm {
  font-size: 0.72rem !important;
  padding: 0.45rem 1rem !important;
  min-height: 2.25rem;
}

.portal-page .portal-page-content .btn-lg,
.portal-page .portal-admin-nav .btn-lg {
  font-size: 0.9rem !important;
  padding: 0.65rem 1.75rem !important;
  min-height: 3rem;
}

.portal-page .portal-page-content .btn:hover,
.portal-page .portal-page-content .btn:focus-visible,
.portal-page .portal-admin-nav .btn:hover,
.portal-page .portal-admin-nav .btn:focus-visible {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

.portal-page .portal-page-content .btn:active,
.portal-page .portal-admin-nav .btn:active {
  background-color: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
}

.portal-page .portal-page-content .btn:disabled,
.portal-page .portal-admin-nav .btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Primary / outline class names — same white pill as main site project links */
.portal-page .portal-page-content .btn-contact-submit,
.portal-page .portal-admin-nav .btn-contact-submit {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}

.portal-page .portal-page-content .btn-contact-submit:hover,
.portal-page .portal-page-content .btn-contact-submit:focus-visible,
.portal-page .portal-admin-nav .btn-contact-submit:hover,
.portal-page .portal-admin-nav .btn-contact-submit:focus-visible {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* Outline variants — same shell */
.portal-page .portal-page-content .btn-outline-secondary,
.portal-page .portal-admin-nav .btn-outline-secondary {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}

.portal-page .portal-page-content .btn-outline-danger {
  background-color: #fff !important;
  color: #b02a37 !important;
  border-color: #b02a37 !important;
}

.portal-page .portal-page-content .btn-outline-danger:hover,
.portal-page .portal-page-content .btn-outline-danger:focus-visible {
  background-color: #b02a37 !important;
  color: #fff !important;
  border-color: #b02a37 !important;
}

.portal-page .portal-page-content .w-100.btn {
  width: 100% !important;
  max-width: 100%;
}

/* Admin nav — current section (must follow .btn-contact-submit so it wins) */
.portal-page .portal-admin-nav .btn.btn-contact-submit[aria-current="page"] {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

.portal-page .portal-admin-nav .btn.btn-contact-submit[aria-current="page"]:hover,
.portal-page .portal-admin-nav .btn.btn-contact-submit[aria-current="page"]:focus-visible {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}

.portal-back-link {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: #686868;
  text-decoration: none;
}

.portal-back-link:hover {
  color: #4a4a4a;
  text-decoration: underline;
}

.portal-photo-grid .portal-photo-card figcaption {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.88rem;
  color: #666;
}

.portal-photo-thumb {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.portal-photo-thumb img,
.portal-photo-grid .object-fit-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portal-login-panel {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

.portal-login-footnote {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.88rem;
  color: #666;
}

.portal-page-content .text-muted {
  color: #666 !important;
  font-family: "Nunito Sans", sans-serif;
}

.portal-category-badge {
  display: inline-block;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background: #eee;
  color: #555;
  margin-right: 0.25rem;
}