/* SSRP Fellowship Portal — front-end styles. Scoped under .ssrp-fl-* . */

.ssrp-fl-portal { max-width: 820px; margin: 0 auto; font-family: var(--font-primary, "Barlow", sans-serif); color: #111827; }
.ssrp-fl-portal--locked { padding: 24px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 10px; }

.ssrp-fl-portal__header { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; }
.ssrp-fl-portal__title { margin: 0; font-size: 28px; font-weight: 700; }
.ssrp-fl-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #111827; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }

.ssrp-fl-section { margin: 0 0 32px; }
.ssrp-fl-section__title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6B7280; margin: 0 0 14px; }
.ssrp-fl-empty { color: #6B7280; }

.ssrp-fl-sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ssrp-fl-session { border: 1px solid #E5E7EB; border-radius: 12px; padding: 18px 20px; background: #fff; }
.ssrp-fl-sessions--past .ssrp-fl-session { background: #F9FAFB; }

.ssrp-fl-session__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.ssrp-fl-chip { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #1995E2; background: rgba(25,149,226,.1); padding: 3px 10px; border-radius: 999px; }
.ssrp-fl-chip--topic { color: #6B7280; background: #EEF0F2; }

.ssrp-fl-session__name { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.ssrp-fl-session__when { margin: 0 0 8px; color: #374151; font-size: 14px; }
.ssrp-fl-session__desc { color: #4B5563; font-size: 14px; }
.ssrp-fl-session__desc p { margin: 0 0 8px; }
.ssrp-fl-session__actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }

.ssrp-fl-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; border-radius: 999px; background: #111827; color: #fff !important; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.ssrp-fl-btn:hover { background: #000; transform: translateY(-1px); }
.ssrp-fl-btn--outline { background: transparent; color: #111827 !important; border: 1px solid #111827; }
.ssrp-fl-btn--outline:hover { background: #111827; color: #fff !important; }

.ssrp-fl-section--links { margin-top: 8px; }

/* Dashboard nudge (rendered inside the My Account dashboard) */
.ssrp-fl-nudge { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border: 1px solid #E5E7EB; border-radius: 12px; background: #fff; margin: 16px 0; }
.ssrp-fl-nudge__text { display: flex; flex-direction: column; gap: 2px; }
.ssrp-fl-nudge__text strong { font-size: 16px; }
.ssrp-fl-nudge__text span { color: #6B7280; font-size: 14px; }

@media (max-width: 640px) {
    .ssrp-fl-portal__header { flex-direction: column; align-items: flex-start; }
    .ssrp-fl-nudge { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Fellowship Application form  (scoped to .ssrp-fellowship-apply)
   Styles the embedded Gravity Form (GF 2.9 "orbital" theme) into one clean
   card that matches the My Account profile form. Everything is scoped under
   .ssrp-fellowship-apply / #ssrp-fellowship-apply so nothing leaks to other
   Gravity Forms. Gravity's framework rules use :where() (zero specificity),
   so class-scoped rules win cleanly; a few !important + ID-scoped rules are
   used only where a Gravity stylesheet outranks plain class selectors.
   ========================================================================== */

/* --- Card shell ---------------------------------------------------------- */
.ssrp-fellowship-apply {
    max-width: 680px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 40px);
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .06);
    font-family: var(--font-primary, "Barlow", sans-serif);
    color: var(--gray-900, #111827);
}

/* Gated states (logged out / already a Fellow / non-Pro): centered message,
   lighter padding — no need for the full form card. */
.ssrp-fellowship-apply--locked,
.ssrp-fellowship-apply--member {
    padding: 28px 32px;
    text-align: center;
}
.ssrp-fellowship-apply--locked p,
.ssrp-fellowship-apply--member p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #374151;
}

/* --- Notices ------------------------------------------------------------- */
.ssrp-fellowship-apply__notice {
    font-size: 14px; line-height: 1.5; color: #374151;
    background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 10px;
    padding: 12px 16px; margin: 0 0 24px;
}
.ssrp-fellowship-apply__notice--admin {
    color: #b32d2e; background: #FEF2F2; border-color: #F3C2C2;
}

/* --- Download document: secondary / outline action ----------------------- */
.ssrp-fellowship-apply__download { margin: 0 0 28px; }
.ssrp-fellowship-apply__download .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px !important;
    background: #fff !important; color: #111827 !important;
    border: 1px solid #D1D5DB !important; border-radius: 999px !important;
    font-size: 14px !important; font-weight: 600 !important; letter-spacing: .01em;
    text-transform: none !important; box-shadow: none !important;
}
.ssrp-fellowship-apply__download .btn:hover {
    background: #F9FAFB !important; border-color: #9CA3AF !important; color: #111827 !important;
}
.ssrp-fellowship-apply__download .btn:active {
    background: #F3F4F6 !important; border-color: #6B7280 !important; transform: translateY(1px);
}
.ssrp-fellowship-apply__download .btn:focus-visible {
    outline: 2px solid var(--color-primary, #1995e2) !important; outline-offset: 2px;
}

/* Tune Gravity's orbital theme variables to the brand */
.ssrp-fellowship-apply .gform_wrapper.gform-theme,
.ssrp-fellowship-apply .gform-theme--orbital {
    --gf-color-primary: #111827;
    --gf-ctrl-border-color: #E5E7EB;
    --gf-radius: 8px;
}

/* --- Wrapper + field spacing --------------------------------------------- */
.ssrp-fellowship-apply .gform_wrapper { margin: 0; }
/* Single full-width column. ID-scoped with !important on purpose: a class-only
   rule loses to Gravity's/theme's native multi-column grid in some environments
   (e.g. prod with a different GF build / CSS load order), which let the Email and
   Comments fields fall back to their Gravity column span and render at half width.
   Forcing one 1fr column here AND `grid-column: 1 / -1` on every field below makes
   all fields full width regardless of any per-field span Gravity assigns. */
#ssrp-fellowship-apply .gform_wrapper .gform_fields { display: grid !important; grid-template-columns: 1fr !important; gap: 22px !important; }
/* Normalize field layout. The THEME's ssrp-all.min.css forces every field
   EXCEPT Name to `display:flex; gap:4px !important` via a high-specificity
   `.gfield:not(...)` selector, so Name sat block (0px under its label) while the
   others picked up the flex gap — inconsistent label→control spacing. That theme
   selector outranks a class-only rule, so scope the override under the
   #ssrp-fellowship-apply ID (an ID beats any number of classes): zero the gap so
   the label's own bottom margin is the single, consistent source of that space.
   `grid-column: 1 / -1` forces each field to span the full grid column (overrides
   any Gravity `grid-column: span N` that would otherwise make it partial width). */
#ssrp-fellowship-apply .gform_wrapper .gfield { display: block !important; grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; row-gap: 0 !important; column-gap: 0 !important; gap: 0 !important; }
/* Flatten Gravity's field chrome: strip borders/shadows/backgrounds from the field
   wrapper AND every non-control element inside it (fieldset, legend, containers,
   grid cols, descriptions). Only the real controls keep styling, defined below.
   This removes the per-field "card" look regardless of which wrapper draws it. */
.ssrp-fellowship-apply .gform_wrapper .gfield,
.ssrp-fellowship-apply .gform_wrapper .gfield :not(input):not(textarea):not(select):not(button):not([type="submit"]) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: 0 !important;
}
.ssrp-fellowship-apply .gform_wrapper .gfield,
.ssrp-fellowship-apply .gform_wrapper legend.gfield_label,
.ssrp-fellowship-apply .gform_wrapper .ginput_container,
.ssrp-fellowship-apply .gform_wrapper .ginput_complex,
.ssrp-fellowship-apply .gform_wrapper .gform-grid-col {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}

/* --- Labels -------------------------------------------------------------- */
/* `legend.gfield_label` is listed here (and !important on margin) so it beats
   the chrome-reset rule above, which zeroes legend margins at higher specificity
   — without this the Name field's legend sat flush against its inputs. */
.ssrp-fellowship-apply .gform_wrapper .gfield_label,
.ssrp-fellowship-apply .gform_wrapper legend.gfield_label,
.ssrp-fellowship-apply .gform_wrapper .gform-field-label {
    font-size: 14px; font-weight: 600; color: #111827; margin: 0 0 8px !important; padding: 0 !important; display: block; line-height: 1.3;
}
.ssrp-fellowship-apply .gform_wrapper .gfield_required { color: #DC2626; margin-left: 4px; }
.ssrp-fellowship-apply .gform_wrapper .gform-field-label--type-sub,
.ssrp-fellowship-apply .gform_wrapper .ginput_complex label {
    font-size: 12px; font-weight: 500; color: #6B7280; margin: 6px 0 0; display: block;
}

/* --- Inputs / textarea / select ------------------------------------------ */
.ssrp-fellowship-apply .gform_wrapper input[type="text"],
.ssrp-fellowship-apply .gform_wrapper input[type="email"],
.ssrp-fellowship-apply .gform_wrapper input[type="tel"],
.ssrp-fellowship-apply .gform_wrapper input[type="url"],
.ssrp-fellowship-apply .gform_wrapper input[type="number"],
.ssrp-fellowship-apply .gform_wrapper select,
.ssrp-fellowship-apply .gform_wrapper textarea {
    box-sizing: border-box; width: 100% !important; min-height: 0 !important; height: auto !important;
    padding: 13px 16px !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important;
    background: #F9FAFB !important; color: #111827 !important;
    font-family: var(--font-primary, "Barlow", sans-serif) !important; font-size: 16px !important; line-height: 1.4 !important;
    box-shadow: none !important; -webkit-appearance: none; appearance: none;
}
.ssrp-fellowship-apply .gform_wrapper textarea { min-height: 120px !important; resize: vertical; }
/* Hover / focus / active states. These are ID-scoped (#ssrp-fellowship-apply)
   on purpose: the theme's global input:focus rule (dark #030712 border, no ring)
   outranks class-only selectors, so an ID is needed to win cleanly. */
/* Hover: subtle lift so fields feel interactive before focus */
#ssrp-fellowship-apply .gform_wrapper input:hover:not(:focus),
#ssrp-fellowship-apply .gform_wrapper select:hover:not(:focus),
#ssrp-fellowship-apply .gform_wrapper textarea:hover:not(:focus) {
    border-color: #D1D5DB !important; background: #fff !important;
}
/* Focus + active (pressed / actively-edited): brand-blue ring */
#ssrp-fellowship-apply .gform_wrapper input:focus,
#ssrp-fellowship-apply .gform_wrapper select:focus,
#ssrp-fellowship-apply .gform_wrapper textarea:focus,
#ssrp-fellowship-apply .gform_wrapper input:focus-visible,
#ssrp-fellowship-apply .gform_wrapper textarea:focus-visible,
#ssrp-fellowship-apply .gform_wrapper input:active,
#ssrp-fellowship-apply .gform_wrapper select:active,
#ssrp-fellowship-apply .gform_wrapper textarea:active {
    outline: none !important; border-color: var(--color-primary, #1995e2) !important; background: #fff !important;
    box-shadow: 0 0 0 3px rgba(25, 149, 226, .15) !important;
}
.ssrp-fellowship-apply .gform_wrapper ::placeholder { color: #9CA3AF; }

/* --- Multi-input fields: Name (2 cols) and Email-with-confirmation ------- */
.ssrp-fellowship-apply .gform_wrapper .ginput_complex { display: grid !important; gap: 16px !important; width: 100% !important; }
.ssrp-fellowship-apply .gform_wrapper .ginput_container_name { grid-template-columns: 1fr 1fr !important; }
.ssrp-fellowship-apply .gform_wrapper .ginput_container_email { grid-template-columns: 1fr !important; }
.ssrp-fellowship-apply .gform_wrapper .ginput_complex > span,
.ssrp-fellowship-apply .gform_wrapper .ginput_complex > .gform-grid-col,
.ssrp-fellowship-apply .gform_wrapper .ginput_left,
.ssrp-fellowship-apply .gform_wrapper .ginput_right {
    display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important;
}

/* --- File upload --------------------------------------------------------- */
/* The native file control inherits a large pixel line-height from a global input
   rule, which made "Choose file / No file chosen" overflow and clip inside the
   dashed box. Force a normal line-height and auto height so it sits cleanly, and
   restyle the native picker button to match the form. */
.ssrp-fellowship-apply .gform_wrapper .ginput_container_fileupload input[type="file"] {
    display: block; width: 100%; box-sizing: border-box;
    height: auto !important; min-height: 0 !important; line-height: 1.4 !important;
    padding: 12px 14px !important;
    border: 1px dashed #D1D5DB !important; border-radius: 8px !important; background: #F9FAFB !important;
    font-family: var(--font-primary, "Barlow", sans-serif) !important; font-size: 14px !important; color: #374151 !important;
    cursor: pointer; overflow: visible !important;
}
.ssrp-fellowship-apply .gform_wrapper input[type="file"]::file-selector-button {
    margin: 0 14px 0 0; padding: 8px 16px;
    border: 0; border-radius: 999px; background: #111827; color: #fff;
    font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2;
    cursor: pointer; transition: background .15s ease;
}
.ssrp-fellowship-apply .gform_wrapper input[type="file"]::file-selector-button:hover { background: #000; }
.ssrp-fellowship-apply .gform_wrapper input[type="file"]::file-selector-button:active { background: #000; box-shadow: inset 0 2px 4px rgba(0,0,0,.3); }
/* WebKit/Safari legacy pseudo-element */
.ssrp-fellowship-apply .gform_wrapper input[type="file"]::-webkit-file-upload-button {
    margin: 0 14px 0 0; padding: 8px 16px;
    border: 0; border-radius: 999px; background: #111827; color: #fff;
    font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.ssrp-fellowship-apply .gform_wrapper .gform_fileupload_rules,
.ssrp-fellowship-apply .gform_wrapper .gfield_description {
    font-size: 12px; color: #6B7280; margin-top: 6px; padding: 0; background: none; border: 0;
}

/* --- Validation ---------------------------------------------------------- */
.ssrp-fellowship-apply .gform_wrapper .gfield_error input,
.ssrp-fellowship-apply .gform_wrapper .gfield_error textarea { border-color: #DC2626 !important; background: #FEF2F2 !important; }
.ssrp-fellowship-apply .gform_wrapper .gfield_validation_message,
.ssrp-fellowship-apply .gform_wrapper .validation_message { font-size: 12px; color: #DC2626; margin-top: 6px; background: none; border: 0; padding: 0; }

/* --- Submit button — primary dark pill ----------------------------------- */
.ssrp-fellowship-apply .gform_wrapper .gform_footer { margin: 28px 0 0; padding: 0; }
.ssrp-fellowship-apply .gform_wrapper .gform_footer input[type="submit"],
.ssrp-fellowship-apply .gform_wrapper .gform_button,
.ssrp-fellowship-apply .gform_wrapper button.gform_button {
    display: inline-flex; align-items: center; justify-content: center; width: auto !important;
    min-height: 0 !important; height: auto !important; line-height: 1.2 !important;
    padding: 14px 36px !important; border: none !important; border-radius: 999px !important;
    background: #111827 !important; color: #fff !important;
    font-family: var(--font-primary, "Barlow", sans-serif) !important; font-size: 14px !important; font-weight: 600 !important;
    letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.ssrp-fellowship-apply .gform_wrapper .gform_footer input[type="submit"]:hover,
.ssrp-fellowship-apply .gform_wrapper .gform_button:hover { background: #000 !important; transform: translateY(-1px); }
.ssrp-fellowship-apply .gform_wrapper .gform_footer input[type="submit"]:active,
.ssrp-fellowship-apply .gform_wrapper .gform_button:active { background: #000 !important; transform: translateY(0); box-shadow: inset 0 2px 4px rgba(0,0,0,.3); }
.ssrp-fellowship-apply .gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.ssrp-fellowship-apply .gform_wrapper .gform_button:focus-visible { outline: 2px solid var(--color-primary, #1995e2) !important; outline-offset: 2px; }

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 640px) {
    .ssrp-fellowship-apply .gform_wrapper .ginput_container_name { grid-template-columns: 1fr !important; }
    .ssrp-fellowship-apply .gform_wrapper .gform_footer input[type="submit"],
    .ssrp-fellowship-apply .gform_wrapper .gform_button { width: 100% !important; }
}

/* ID-scoped decisive override (the wrapper carries id="ssrp-fellowship-apply"):
   a Gravity Forms stylesheet adds a 1px border to the field fieldsets/divs via an
   ID-level selector, which beats class-only rules. This outranks it so the fields
   sit flat, without touching the actual input/textarea borders. */
#ssrp-fellowship-apply .gform_wrapper .gfield,
#ssrp-fellowship-apply .gform_wrapper fieldset,
#ssrp-fellowship-apply .gform_wrapper fieldset.gfield {
    border: 0 !important;
    border-width: 0 !important;
    box-shadow: none !important;
}