/**
 * register-tabs.css — FacultyPage Theme
 *
 * "Create Personal Profile" / "Create Organization Profile" tab toggle
 * for /user/register.
 *
 * Structure:
 *   .fp-profile-tabs
 *     .fp-profile-tab--personal  (terra gradient when active)
 *     .fp-profile-tab--org       (navy gradient when active)
 *   .fp-org-notice    — italic notice shown only for Organization tab
 *   .fp-org-field     — fields shown only for Organization (animated)
 *   .fp-btn-cta.is-org — submit button switches to navy gradient
 */

/* ════════════════════════════════════════════════════════════
   COLOUR TOKENS — Organization (navy) palette
   Personal already uses --fp-terra* from base.css
   ════════════════════════════════════════════════════════════ */
:root {
  --fp-navy:       #2d3f5c;
  --fp-navy-dark:  #1a2638;
  --fp-navy-pale:  #e8ecf3;
  --fp-navy-light: #5a7bb0;
}

/* ════════════════════════════════════════════════════════════
   TAB CONTAINER
   ════════════════════════════════════════════════════════════ */
.fp-profile-tabs {
  display: flex;
  gap: 0.65rem;  
}

/* ════════════════════════════════════════════════════════════
   INDIVIDUAL TAB
   ════════════════════════════════════════════════════════════ */
.fp-profile-tab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--fp-radius-md);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  outline: none;
}

.fp-profile-tab:focus-visible {
  box-shadow: 0 0 0 3px rgba(196, 99, 58, 0.3);
}

/* ── PERSONAL TAB ── */
.fp-profile-tab--personal {
  background: linear-gradient(135deg, var(--fp-terra) 0%, var(--fp-terra-dark) 100%);
  color: white;
}
.fp-profile-tab--personal.is-inactive {
  background: var(--fp-off-white);
  color: var(--fp-light);
  border-color: var(--fp-border);
}

/* ── ORGANIZATION TAB ── */
.fp-profile-tab--org {
  background: linear-gradient(135deg, var(--fp-navy) 0%, var(--fp-navy-dark) 100%);
  color: white;
}
.fp-profile-tab--org.is-inactive {
  background: var(--fp-off-white);
  color: var(--fp-light);
  border-color: var(--fp-border);
}

/* ── ACTIVE STATE ── */
.fp-profile-tab.is-active {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}
.fp-profile-tab--personal.is-active { border-color: var(--fp-terra-light); }
.fp-profile-tab--org.is-active      { border-color: var(--fp-navy-light); }

/* ── INACTIVE HOVER ── */
.fp-profile-tab.is-inactive:hover {
  border-color: var(--fp-border-strong);
  background: var(--fp-paper);
}

/* ── ICON CIRCLE ── */
.fp-tab-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.2s;
}
.fp-profile-tab.is-inactive .fp-tab-icon {
  background: var(--fp-white);
  border: 1.5px solid var(--fp-border);
}

/* ── LABEL ── */
.fp-tab-label {
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* ════════════════════════════════════════════════════════════
   ORGANIZATION NOTICE BAR
   "To create this profile, you must be an authorized
    representative of the organization or institution"
   ════════════════════════════════════════════════════════════ */
.fp-org-notice {
  display: none;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--fp-navy-pale);
  border: 1.5px solid rgba(45, 63, 92, 0.15);
  border-radius: var(--fp-radius);
  padding: 0.75rem 0.9rem;    
  color: var(--fp-navy);
  line-height: 1.6;
  font-style: italic;
  font-family: 'Fraunces', serif;
}
.fp-org-notice.is-visible {
  display: flex;
  animation: fp-org-fade-in 0.25s ease;
}
.fp-org-notice-icon {
  flex-shrink: 0;
  font-size: 1rem;
  font-style: normal;
}

@keyframes fp-org-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   ORGANIZATION-ONLY FIELDS
   Animated max-height collapse/expand
   ════════════════════════════════════════════════════════════ */
.fp-org-field {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease,
              margin 0.3s ease;
  margin-bottom: 0;
}
.fp-org-field.is-visible {
  max-height: 100px;
  opacity: 1;  
}
.field--type-boolean.field--name-profile-register-as-an-organiz{
  display: none;
}
/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .fp-profile-tabs {
    flex-direction: column;
  }
  .fp-tab-label br {
    display: none;
  }
  .fp-tab-label {
    font-size: 0.9rem;
  }
}