/* FestPass theme front-end styles */

:root {
    --fp-bg: #070313;
    --fp-bg-gradient-end: #1a0e2e;
    --fp-surface: #11071f;                    /* slightly lighter than body, for cards */
    --fp-surface-elevated: #1a0e2e;           /* even lighter for inset elements */
    --fp-text: #cccccc;
    --fp-text-muted: #a0a0a0;
    --fp-text-subtle: #757575;
    --fp-border: #cccccc;
    --fp-border-soft: rgba(204, 204, 204, 0.35);
    --fp-primary: #cccccc;
    --fp-primary-text: #070313;
    --fp-accent: #c9a8ff;
    --fp-success-bg: #0d2a23;
    --fp-success-text: #6fdbb7;
    --fp-info-bg: #0a1f3a;
    --fp-info-text: #8fbff5;
    --fp-warning-bg: #2a1f0d;
    --fp-warning-text: #f0c987;
    --fp-error-bg: #2a0f0f;
    --fp-error-text: #f08787;
    --fp-radius: 8px;
    --fp-radius-sm: 4px;
    --fp-shadow: 0 1px 2px rgba(0,0,0,0.4);
    --fp-shadow-md: 0 2px 8px rgba(0,0,0,0.5);
    /* Poppins for text, with emoji fonts at the end of the chain so icon
       glyphs (✉ ➤ 📥 🗑 📁 ★ ☆ etc.) actually render. Without these
       fallbacks the universal font-family rule made Poppins claim every
       character and emoji slots became empty boxes. */
    --fp-font: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol';
}

* { box-sizing: border-box; }

html {
    background: var(--fp-bg);
}

body {
    font-family: var(--fp-font);
    color: var(--fp-text);
    background: var(--fp-bg);
    background-image:
        radial-gradient(ellipse 90% 60% at 50% 0%,
            var(--fp-bg-gradient-end) 0%,
            var(--fp-bg) 70%);
    background-attachment: fixed;
    line-height: 1.55;
    margin: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* Universal font — apply Poppins to every element on the page, including
   things that other plugins (Elementor, Polylang, etc.) might style with
   their own font-family. !important is the only way to beat plugins that
   ship their own fonts via inline style or higher-specificity rules. */
*, *::before, *::after, body, input, button, textarea, select {
    font-family: var(--fp-font) !important;
}

/* Hover effects — the user explicitly asked for none. Reset every
   hover-related rule we wrote (and any opacity/transform/color shifts
   that might be in plugins or other CSS). This is intentionally broad.
   POLICY (0.73.13): never pin a :hover background to a specific color to
   "cancel" a hover — CSS can't express "keep the resting background," so
   a pin like `.fp-btn-primary:hover { background: var(--fp-primary)
   !important }` silently repaints every restyled variant (e.g. the
   transparent .fp-btn-hero-secondary on /industry/) near-white on hover.
   Instead, buttons simply declare no :hover background/border shifts
   anywhere — the resting style then holds in all states on its own. */
*:hover { transition: none !important; }
a:hover { opacity: 1 !important; }
.fp-menu a:hover { opacity: 1 !important; }
.fp-header .fp-submenu a:hover,
.fp-submenu a:hover {
    background: transparent !important;
    color: var(--fp-text) !important;
}

/* Site-wide text + link defaults — survive plugin inline styles where possible. */
a { color: var(--fp-accent); }
a:hover { color: #e0c8ff; }

/* Form controls — must be readable on dark backgrounds. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select {
    background: var(--fp-surface);
    color: var(--fp-text);
    border: 1px solid var(--fp-border-soft);
    border-radius: var(--fp-radius-sm);
    padding: 8px 10px;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--fp-border);
    box-shadow: 0 0 0 2px rgba(214, 212, 214, 0.18);
}
/* Open <select> option lists — global safety net. Where the browser lets CSS
   style the native list (Chromium on Windows/Linux/Android, Firefox
   everywhere), keep it dark to match the field. On macOS/iOS the native
   picker ignores option CSS entirely (the white list there is OS-owned and
   unreachable), so this rule is a no-op rather than a hazard on those
   platforms. IMPORTANT: background-color and color must always be set as a
   PAIR on option rules — a color-only rule (e.g. color:#000 "for the white
   list") renders near-invisible text on Firefox where the list inherits the
   select's dark background, and a background-only rule risks white-on-white.
   The messages inbox is a deliberately white panel; its own
   .fp-messages-inbox select option rule uses !important and wins over this. */
select option,
select optgroup {
    background-color: var(--fp-surface);
    color: var(--fp-text);
}
::placeholder { color: var(--fp-text-subtle); opacity: 0.7; }

/* Override common inline-style patterns from plugin PHP. Scoped to .fp-*
   so we don't accidentally repaint unrelated WordPress UI. The selector
   below catches any plugin card whose inline style sets a light background. */
[class*="fp-"][style*="background:#fff"],
[class*="fp-"][style*="background: #fff"],
[class*="fp-"][style*="background:#ffffff"],
[class*="fp-"][style*="background:#fafafa"],
[class*="fp-"][style*="background:#f4f4f4"],
[class*="fp-"][style*="background:#f9fafb"],
[class*="fp-"][style*="background:#f4f6fb"],
[class*="fp-"][style*="background:#e8eaef"],
[class*="fp-"][style*="background:#fffdf5"],
[class*="fp-"][style*="background:#fff8e1"],
[class*="fp-"][style*="background:#e7f3ff"] {
    background: var(--fp-surface) !important;
    color: var(--fp-text) !important;
}
/* Same for borders — anything inline that's a light gray gets repainted. */
[class*="fp-"][style*="border:1px solid #eee"],
[class*="fp-"][style*="border:1px solid #e0e0e0"],
[class*="fp-"][style*="border:1px solid #ddd"],
[class*="fp-"][style*="border:1px solid #ccc"],
[class*="fp-"][style*="border:1px solid #999"],
[class*="fp-"][style*="border:1px solid #555"],
[class*="fp-"][style*="border:1px solid #d0d0d0"] {
    border-color: var(--fp-border-soft) !important;
}
/* Inline color overrides for text that was set to dark grays. */
[class*="fp-"][style*="color:#1a1a1a"],
[class*="fp-"][style*="color:#222"],
[class*="fp-"][style*="color:#333"] {
    color: var(--fp-text) !important;
}
[class*="fp-"][style*="color:#555"],
[class*="fp-"][style*="color:#666"],
[class*="fp-"][style*="color:#888"] {
    color: var(--fp-text-muted) !important;
}
/* "small" elements inside fp containers — usually muted text. */
.fp-dashboard small,
.fp-favorites-card small,
.fp-messages-inbox small {
    color: var(--fp-text-muted) !important;
}

/* Extra inline-color coverage: subtle grays often used for hint/placeholder text. */
[class*="fp-"][style*="color:#999"],
[class*="fp-"][style*="color:#aaa"],
[class*="fp-"][style*="color:#ccc"] {
    color: var(--fp-text-subtle) !important;
}

/* Folder sidebar — active folder pill is dark blue. Keep it but make sure
   text stays light enough to read against our gradient backdrop. */
.fp-folder-sidebar a[style*="background:#1f3a5f"] {
    color: #ffffff !important;
}

/* Message thread headers ("From: ...", "Date: ...") — these are wrapped in
   inline color #555 which our [class*=] rule misses because the parent has
   the class, not the inner spans. Catch them explicitly. */
.fp-msg-headers,
.fp-msg-headers * {
    color: var(--fp-text-muted) !important;
}
.fp-msg-headers strong {
    color: var(--fp-text) !important;
}
.fp-msg-body { color: var(--fp-text) !important; }

/* Inbox row separators and column header bar — pre-existing rules used
   light gray, repaint them to our soft border. */
.fp-scroll-viewport > ul > li { border-bottom-color: var(--fp-border-soft) !important; }
.fp-msg-list-header,
.fp-inbox-cols {
    background: var(--fp-surface) !important;
    border-color: var(--fp-border-soft) !important;
    color: var(--fp-text) !important;
}
.fp-scroll-viewport { border-color: var(--fp-border-soft) !important; }
.fp-msgs-scroll { border-color: var(--fp-border-soft) !important; background: var(--fp-surface) !important; }

/* Notices in the messaging area — repaint to use semantic dark palette. */
.fp-notice.fp-notice-info    { background: var(--fp-info-bg)    !important; color: var(--fp-info-text)    !important; border-color: var(--fp-info-text)    !important; }
.fp-notice.fp-notice-warning { background: var(--fp-warning-bg) !important; color: var(--fp-warning-text) !important; border-color: var(--fp-warning-text) !important; }
.fp-notice.fp-notice-error   { background: var(--fp-error-bg)   !important; color: var(--fp-error-text)   !important; border-color: var(--fp-error-text)   !important; }

/* ── User-flagged contrast fixes (Jun 2026) ─────────────────────────
   These selectors target specific elements the user called out as too
   dark or rendering white on the new dark theme. */

/* Folder sidebar — inactive folder names were rendered with inline
   color:#333 (medium gray). On a near-black background those nearly
   vanish. Force the standard light text color on every sidebar link,
   then keep the active state pure white so it still stands out. */
.fp-folder-sidebar a {
    color: var(--fp-text) !important;
}
.fp-folder-sidebar a[style*="background:#1f3a5f"] {
    color: #ffffff !important;
}

/* Inbox sender names — the "Name" column for each thread row was
   rendered with inline color:#222 (read) or #1a1a1a (unread). Force
   a bright white so the sender stands out clearly against the row. */
.fp-col-name {
    color: #ffffff !important;
}

/* Inbox area background — white panel with light gray dividers and black
   fonts. The wrapper is the light card; every child inherits the dark
   text via the universal rule below. Specific exceptions (active folder
   pill, etc.) are handled with their own selectors further down. */
.fp-messages-inbox {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 16px !important;
    border-radius: 8px !important;
    border: 1px solid #d0d0d0 !important;
}
.fp-messages-inbox,
.fp-messages-inbox * {
    color: #000000 !important;
    border-color: #d0d0d0 !important;
}
.fp-messages-inbox .fp-scroll-viewport,
.fp-thread-list,
.fp-msgs-scroll,
.fp-inbox-cols,
.fp-msg-list-header,
.fp-messages-inbox .fp-inbox-row,
.fp-messages-inbox .fp-folder-sidebar,
.fp-messages-inbox .fp-folder-main {
    background: #ffffff !important;
    color: #000000 !important;
}
/* Row dividers — visible light gray between message rows so the list is
   readable at a glance even on white-on-white. */
.fp-messages-inbox .fp-inbox-row {
    border-bottom: 1px solid #d0d0d0 !important;
}
/* Sender names stay extra-bold black for emphasis. */
.fp-messages-inbox .fp-col-name {
    color: #000000 !important;
}
/* Active folder pill — keep its dark blue background, white text. This is
   the only element inside the inbox that should NOT be white. */
.fp-folder-sidebar a[style*="background:#1f3a5f"] {
    background: #1f3a5f !important;
    color: #ffffff !important;
}
/* Inactive folder links — black text on the white sidebar. */
.fp-folder-sidebar a {
    color: #000000 !important;
}
/* Buttons inside the inbox (Edit / Archive / Delete / Move) — keep them
   visible as actionable elements with a dark border on the white panel. */
.fp-messages-inbox .fp-btn {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #1a1a1a !important;
}
.fp-messages-inbox .fp-btn-primary {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #1a1a1a !important;
}

/* Compose form controls (recipient dropdown, message textarea) inherited the
   dark-theme surface, showing as black boxes on the white inbox panel. Repaint
   them — and the dropdown's <option> list — to white with dark text. */
.fp-messages-inbox select,
.fp-messages-inbox textarea,
.fp-messages-inbox input {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #d0d0d0 !important;
}
.fp-messages-inbox select option {
    background: #ffffff !important;
    color: #000000 !important;
}

/* Application pages — broaden the white-bg sweep to ALSO catch elements
   nested inside any fp-* container even when the element itself has no
   fp-* class (e.g., <li> inside .fp-favorites-card). The descendant
   combinator (space) is what makes this work. */
[class*="fp-"] [style*="background:#fff"],
[class*="fp-"] [style*="background: #fff"],
[class*="fp-"] [style*="background:#ffffff"],
[class*="fp-"] [style*="background: #ffffff"],
[class*="fp-"] [style*="background:#fafafa"],
[class*="fp-"] [style*="background:#f4f4f4"],
[class*="fp-"] [style*="background:#f4f6fb"],
[class*="fp-"] [style*="background:#e7f3ff"] {
    background: var(--fp-surface) !important;
    color: var(--fp-text) !important;
}
[class*="fp-"] [style*="border:1px solid #eee"],
[class*="fp-"] [style*="border:1px solid #e0e0e0"],
[class*="fp-"] [style*="border:1px solid #ddd"],
[class*="fp-"] [style*="border:1px solid #ccc"],
[class*="fp-"] [style*="border:1px solid #999"],
[class*="fp-"] [style*="border:1px solid #555"],
[class*="fp-"] [style*="border:1px solid #d0d0d0"] {
    border-color: var(--fp-border-soft) !important;
}
[class*="fp-"] [style*="color:#1a1a1a"],
[class*="fp-"] [style*="color:#222"],
[class*="fp-"] [style*="color:#333"] {
    color: var(--fp-text) !important;
}
[class*="fp-"] [style*="color:#555"],
[class*="fp-"] [style*="color:#666"],
[class*="fp-"] [style*="color:#888"] {
    color: var(--fp-text-muted) !important;
}

/* Pills and chips inside fp- containers that set their own light gray bg
   (e.g., the unread count badge in the inbox uses #0a3aa0 which is fine,
   but generic "chip" patterns with light bg need attention too). */
[class*="fp-"] [style*="background:#666"] {
    background: var(--fp-surface-elevated) !important;
}

/* Count numbers (open call summary grid, dashboard cells, etc.) were
   rendered with inline color:#0a3aa0 (dark blue link color) to look like
   anchored counts. On dark theme that's hard to read — repaint to the
   primary text color so they pop. */
[class*="fp-"] [style*="color:#0a3aa0"] {
    color: var(--fp-text) !important;
}
/* TH cells in the summary grid use color:#444 — also too dark for the
   new background. Treat as muted text. */
[class*="fp-"] [style*="color:#444"] {
    color: var(--fp-text-muted) !important;
}

/* Browser autofill yellow. Chrome/Safari paint remembered fields with a
   yellow background that overrides our --fp-surface. The standard fix
   is a giant inset box-shadow in the surface color, plus a forced text
   fill color. The transition trick keeps it from flashing back during
   the browser's animation. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--fp-surface) inset !important;
    -webkit-text-fill-color: var(--fp-text) !important;
    caret-color: var(--fp-text);
    transition: background-color 9999s ease-in-out 0s;
    border: 1px solid var(--fp-border-soft) !important;
}

/* Signup role pill — was a dark-blue "Signing up as: X" panel that read
   as a translucent square on the dark page. Reduce to inline text with
   a subtle underline accent, no background. */
.fp-signup-role-pill {
    background: transparent !important;
    color: var(--fp-text-muted) !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid var(--fp-border-soft) !important;
    border-radius: 0 !important;
}

.fp-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */

.fp-header {
    background: var(--fp-surface);
    border-bottom: 1px solid var(--fp-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.fp-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
}
.fp-logo { font-size: 20px; font-weight: 700; text-decoration: none; color: var(--fp-text); }
.fp-logo img { max-height: 40px; width: auto; }

.fp-primary-nav { display: flex; align-items: center; gap: 36px; }
.fp-menu { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; align-items: center; }
.fp-menu a {
    text-decoration: none;
    color: var(--fp-text);
    font-size: 14px;
    font-weight: 500;
    transition: opacity .15s;
}
.fp-menu a:hover { opacity: 0.7; }

/* Dropdown submenu in the top nav (e.g. organizer's "My festivals ▾"). The
   <li class="fp-has-submenu"> contains a nested <ul class="fp-submenu"> that
   floats below it on hover (desktop) or tap (mobile). Position:absolute so it
   doesn't push other nav items around. */
.fp-has-submenu {
    position: relative;
    /* Extra padding-bottom on the <li> creates a "bridge" the cursor can cross
       between the parent link and the submenu without losing hover. Without
       this, hover breaks the moment the cursor crosses the gap and the menu
       snaps shut. */
    padding-bottom: 16px;
    margin-bottom: -16px;
}
.fp-submenu {
    position: absolute;
    top: 100%;
    left: -8px;
    min-width: 200px;
    background: var(--fp-surface-elevated);
    color: var(--fp-text);
    border: 1px solid var(--fp-border-soft);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    display: none;
    z-index: 100;
}
.fp-header .fp-submenu a,
.fp-submenu a,
.fp-submenu a:link,
.fp-submenu a:visited,
.fp-submenu a:active,
.fp-has-transparent-header .fp-submenu a,
.fp-has-transparent-header .fp-submenu a:link,
.fp-has-transparent-header .fp-submenu a:visited {
    display: block;
    padding: 4px 14px;
    white-space: nowrap;
    color: var(--fp-text) !important;
    text-decoration: none;
    text-shadow: none !important;
    font-size: 14px;
    font-weight: inherit;
    background: transparent !important;
    opacity: 1 !important;
    line-height: 1.4;
}
.fp-submenu li { display: block; margin: 0; }
/* No hover effects — link colors and backgrounds stay identical. */
.fp-header .fp-submenu a:hover,
.fp-submenu a:hover,
.fp-has-transparent-header .fp-submenu a:hover {
    background: transparent !important;
    color: var(--fp-text) !important;
    opacity: 1 !important;
}
/* Open on hover (desktop), focus-within (keyboard), or .fp-submenu-open class
   (touch toggle from JS). */
.fp-has-submenu:hover .fp-submenu,
.fp-has-submenu:focus-within .fp-submenu,
.fp-has-submenu.fp-submenu-open .fp-submenu {
    display: block;
}
/* On the home page the header is transparent overlay; the submenu still needs
   to be readable on its own, so it keeps a solid background and dark text.
   These rules are now redundant with the !important above, but kept for
   intent-clarity if someone removes the !important later. */
.fp-has-transparent-header .fp-submenu {
    background: var(--fp-surface);
    color: #1a1a1a;
}
.fp-has-transparent-header .fp-submenu a {
    color: #1a1a1a !important;
    text-shadow: none !important;
}

/* ---------- Language switcher (single bold link inside a matching ul/li) ---------- */

/*
 * The switcher is wrapped in <ul class="fp-menu fp-lang-menu"><li><a>…</a></li></ul>
 * so its box structure matches the WP nav menu rendered by wp_nav_menu(). This
 * means any Elementor reset applied to <ul> elements hits both equally — no
 * vertical-alignment fight.
 *
 * The only visual difference between switcher and menu items: font-weight: 700
 * (bold) on the switcher. Color/size/family inherit from .fp-menu a above.
 *
 * !important is kept because Elementor's <a> rules are aggressive about color
 * and font-weight on links — without it the switcher could flip blue.
 */
.fp-primary-nav a.fp-lang-switcher,
a.fp-lang-switcher {
    color: var(--fp-text) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.fp-primary-nav a.fp-lang-switcher:hover,
.fp-primary-nav a.fp-lang-switcher:focus,
a.fp-lang-switcher:hover,
a.fp-lang-switcher:focus {
    opacity: 0.7;
    outline: none;
    color: var(--fp-text) !important;
    text-decoration: none !important;
}

/* ---------- Main ---------- */

.fp-main { padding: 32px 0 64px; min-height: calc(100vh - 200px); }

/* ---------- Buttons ---------- */

.fp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--fp-radius-sm);
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    color: var(--fp-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background .15s, border-color .15s, transform .05s;
}
/* no :hover background — no-hover policy (see top of file) */
.fp-btn:active { transform: translateY(1px); }
.fp-btn-primary {
    background: var(--fp-primary);
    color: var(--fp-primary-text);
    border-color: var(--fp-primary);
}
/* no :hover background — no-hover policy (see top of file) */
.fp-btn-small { padding: 6px 12px; font-size: 13px; }
.fp-btn-link {
    background: none;
    border: none;
    color: var(--fp-accent);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font: inherit;
}

/* fp-btn-outline / fp-btn-text / fp-btn-sm / fp-btn-full: added because the
 * plugin's PHP templates (organizer management, shortcodes) reference these
 * names -- previously written with a double dash (fp-btn--outline etc.),
 * which matched nothing here and rendered unstyled. Corrected the plugin's
 * class names to the single-dash convention already used above, and these
 * three variants didn't exist under any name, so adding them here rather
 * than inventing new colors -- outline reuses --fp-border/--fp-text (the
 * base .fp-btn look, just visually distinct from the filled .fp-btn-primary);
 * text borrows the same look as .fp-btn-link but as a .fp-btn modifier,
 * since the plugin always combines it with the base class (class="fp-btn
 * fp-btn-text"), not standalone. fp-btn-sm already existed below (line ~1358)
 * but was unused until this fix; fp-btn-small (above) is the one actually
 * used elsewhere in the theme -- two names for the same idea, not resolved
 * here, see the dev spec for that broader naming-inconsistency note. */
.fp-btn-outline {
    background: transparent;
    color: var(--fp-text);
    border-color: var(--fp-border);
}
/* no :hover background — no-hover policy (see top of file) */
.fp-btn-text {
    background: none;
    border: none;
    color: var(--fp-accent);
    text-decoration: underline;
    padding: 6px 4px;
}
.fp-btn-text:hover { background: none; } /* color/opacity shift removed — no-hover policy */
.fp-btn-full { width: 100%; justify-content: center; }

/* ---------- Forms ---------- */

.fp-form { max-width: 600px; margin: 0 auto; }
.fp-form p { margin: 0 0 18px; }
.fp-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fp-text);
}
.fp-form input[type="text"],
.fp-form input[type="email"],
.fp-form input[type="password"],
.fp-form input[type="tel"],
.fp-form input[type="url"],
.fp-form input[type="number"],
.fp-form input[type="date"],
.fp-form input[type="datetime-local"],
.fp-form select,
.fp-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: var(--fp-surface);
}
/* Standalone .fp-input fields (stage manager, kiosk builders, etc.) live outside
   .fp-form, so they weren't getting the dark field treatment and fell back to
   browser-white. Match them to the form fields. */
.fp-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--fp-text);
    background: var(--fp-surface);
}
/* Profile password fields — force the dark field colour (some browsers repaint
   password inputs white regardless of the inherited rule). */
#fp-p-pw,
#fp-p-pw2 {
    background: var(--fp-surface) !important;
    color: var(--fp-text) !important;
}
#fp-p-pw:-webkit-autofill,
#fp-p-pw2:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--fp-surface) inset !important;
    -webkit-text-fill-color: var(--fp-text) !important;
}
/* Login + signup fields: force the dark field colour (browsers repaint
   autofilled / password inputs white regardless of the inherited rule). */
#fp-login-email,
#fp-login-pw,
.fp-form--signup input,
.fp-form--signup select,
.fp-form--signup textarea {
    background: var(--fp-surface) !important;
    color: var(--fp-text) !important;
}
#fp-login-email:-webkit-autofill,
#fp-login-pw:-webkit-autofill,
.fp-form--signup input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--fp-surface) inset !important;
    -webkit-text-fill-color: var(--fp-text) !important;
}
.fp-form select:focus,
.fp-form textarea:focus {
    outline: none;
    border-color: var(--fp-text);
}
.fp-form small { color: var(--fp-text-muted); font-size: 12px; display: block; margin-top: 4px; }
.fp-form .fp-checkbox-inline { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; margin-bottom: 6px; font-weight: 400; }
.fp-form .fp-checkbox-inline input { width: auto; }

/* Signup role box (.fp-role-box, Shortcodes::signup()) -- one box, two
 * tabs (Industry / Non-Industry), per the user, replacing both the old
 * flat <select> (which only listed performer/vendor/volunteer/organizer
 * -- missing media/contractor, and missing festivalgoer/advertiser
 * entirely) and an earlier two-stacked-sections version. Cards use
 * .fp-signup-role-card, deliberately NOT .fp-role-card -- that name was
 * already in use elsewhere in this stylesheet for a different,
 * link-styled component (the /industry/ role-selector cards), and reusing
 * it here would have silently collided since this rule block loads
 * earlier in the file and the other one would have won on every
 * conflicting property. Built as real <input type="radio"> + <label>
 * pairs within real <fieldset> panels (not div+JS-only tabs), so the form
 * still works with no JavaScript: the server renders one panel visible
 * and required, per Shortcodes::signup()'s $default_tab logic. */
.fp-role-box { margin: 24px 0; border: 1px solid var(--fp-border-soft); border-radius: var(--fp-radius); overflow: hidden; }
.fp-role-box__cta { font-size: 15px; font-weight: 600; color: var(--fp-text); padding: 16px 16px 0; }
.fp-role-box__tabs { display: flex; border-bottom: 1px solid var(--fp-border-soft); margin-top: 12px; }
.fp-role-box__tab {
    flex: 1;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fp-text-muted);
    cursor: pointer;
}
.fp-role-box__tab--active { color: var(--fp-accent); border-bottom-color: var(--fp-accent); }
.fp-role-picker__panel { border: none; padding: 16px; margin: 0; }
.fp-role-picker__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.fp-signup-role-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--fp-border-soft);
    border-radius: var(--fp-radius);
    background: var(--fp-surface);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.fp-signup-role-card:hover { border-color: var(--fp-accent); }
.fp-signup-role-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.fp-signup-role-card__title { font-size: 14px; font-weight: 600; color: var(--fp-text); }
.fp-signup-role-card__desc { font-size: 12px; color: var(--fp-text-muted); line-height: 1.3; }
.fp-signup-role-card--selected,
.fp-signup-role-card:has(input:checked) { border-color: var(--fp-accent); background: var(--fp-surface-elevated); box-shadow: 0 0 0 1px var(--fp-accent); }
.fp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* EPK (digital press kit) -- the .fp-field wrapper divs and their inputs
 * already inherit from .fp-form's tag/type selectors above as long as
 * they're nested inside .fp-form (which they are, in the apply form), so
 * only the EPK-specific wrapper and the photo-upload widget need rules
 * of their own here. */
.fp-required { color: var(--fp-error-text); margin-left: 2px; }
.fp-field__hint { font-size: 12px; color: var(--fp-text-muted); margin: -4px 0 8px; }
.fp-epk { margin: 24px 0; padding-top: 20px; border-top: 1px solid var(--fp-border-soft); }
.fp-epk__heading { font-size: 18px; margin: 0 0 4px; }
.fp-epk__intro { color: var(--fp-text-muted); font-size: 13px; margin: 0 0 16px; }
.fp-epk-photos { margin: 16px 0; }
.fp-epk-photos__intro { font-size: 13px; color: var(--fp-text-muted); margin: 0 0 12px; }
.fp-epk-photo-field { margin-bottom: 18px; padding: 14px; border: 1px solid var(--fp-border-soft); border-radius: var(--fp-radius); }
.fp-epk-photo-field__label { font-weight: 500; font-size: 13px; margin-bottom: 8px; display: block; }
.fp-epk-photo-field__upload-area { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fp-epk-photo-field__status { display: flex; align-items: center; gap: 8px; }
.fp-epk-photo-field__thumb { height: 48px; width: auto; border-radius: var(--fp-radius-sm); object-fit: cover; }
.fp-epk-photo-field__placeholder, .fp-epk-photo-field__filename { font-size: 13px; color: var(--fp-text-muted); }
.fp-epk-photo-field__error { color: var(--fp-error-text); font-size: 12px; margin-top: 6px; width: 100%; }
.fp-epk-photo-field--has-file .fp-epk-photo-field__upload-area,
.fp-epk-photo-field__upload-area.has-file { border-color: var(--fp-success-text); }
.fp-epk-photo-field input[type="file"] { display: none; }

.fp-epk-deferrable__toggle { font-size: 13px; margin: 4px 0 10px; }
.fp-epk-deferrable__commit { margin-top: 10px; padding: 12px; background: var(--fp-surface-elevated); border-radius: var(--fp-radius-sm); }
.fp-epk-deferrable__status { font-weight: 500; }

/* Vendor compliance document upload (.fp-doc-field) -- markup and its AJAX
 * endpoint (class-festpass-vendor-documents.php) already existed and
 * worked; this had no CSS or JS at all until found while building the EPK
 * upload above. Modeled closely on .fp-epk-photo-field's layout, with a
 * real progress bar since this markup has one (uploaded via XHR, not
 * fetch(), specifically so upload-progress events are available). */
.fp-vendor-docs { margin: 24px 0; padding-top: 20px; border-top: 1px solid var(--fp-border-soft); }
.fp-vendor-docs__heading { font-size: 18px; margin: 0 0 4px; }
.fp-vendor-docs__intro { color: var(--fp-text-muted); font-size: 13px; margin: 0 0 16px; }
.fp-doc-field { margin-bottom: 18px; padding: 14px; border: 1px solid var(--fp-border-soft); border-radius: var(--fp-radius); }
.fp-doc-field__label { font-weight: 500; font-size: 13px; margin-bottom: 8px; display: block; }
.fp-doc-field__required { color: var(--fp-error-text); margin-left: 2px; }
.fp-doc-field__upload-area { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fp-doc-field__upload-area.has-file { border-color: var(--fp-success-text); }
.fp-doc-field input[type="file"] { display: none; }
.fp-doc-field__btn { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--fp-border); border-radius: var(--fp-radius-sm); font-size: 13px; cursor: pointer; background: var(--fp-surface); }
.fp-doc-field__btn:hover { background: var(--fp-surface-elevated); }
.fp-doc-field__status { display: flex; align-items: center; gap: 8px; }
.fp-doc-field__link, .fp-doc-field__placeholder { font-size: 13px; color: var(--fp-text-muted); }
.fp-doc-field__badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.fp-doc-field__badge-ok { background: #dcfae6; color: #1a7f37; }
.fp-doc-field__error { color: var(--fp-error-text); font-size: 12px; margin-top: 6px; width: 100%; }
.fp-doc-field__progress { width: 100%; height: 6px; background: var(--fp-border-soft); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.fp-doc-field__progress-bar { height: 100%; width: 0; background: var(--fp-accent); transition: width 0.2s ease; }

/* SOCAN/Re:Sound report builder (.fp-socan-*, class-festpass-socan-report.php) */
.fp-socan-concert { margin-bottom: 16px; padding: 16px; border: 1px solid var(--fp-border-soft); border-radius: var(--fp-radius); }
.fp-socan-concert__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.fp-socan-totals { margin: 20px 0; max-width: 420px; }
.fp-socan-totals table td:last-child { text-align: right; }

/* ---------- Notices ---------- */

.fp-notice {
    padding: 12px 16px;
    border-radius: var(--fp-radius-sm);
    margin: 0 0 24px;
    font-size: 14px;
    border: 1px solid transparent;
}
.fp-notice-success { background: var(--fp-success-bg); color: var(--fp-success-text); }
.fp-notice-info    { background: var(--fp-info-bg); color: var(--fp-info-text); }
.fp-notice-warning { background: var(--fp-warning-bg); color: var(--fp-warning-text); }
.fp-notice-error   { background: var(--fp-error-bg); color: var(--fp-error-text); }

/* ---------- Progress bar (profile completion) ---------- */

.fp-progress {
    width: 100%;
    height: 6px;
    background: var(--fp-border);
    border-radius: 999px;
    overflow: hidden;
    margin: 8px 0 4px;
}
.fp-progress-bar { height: 100%; background: var(--fp-primary); transition: width .25s; }

/* ---------- Open call list ---------- */

.fp-open-calls { max-width: 800px; margin: 0 auto; }
.fp-filters { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }

/* Search form on home page and open-calls archive */
.fp-search-form {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: 20px;
    margin-bottom: 24px;
}
.fp-search-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}
.fp-search-row:last-child { margin-bottom: 0; }
.fp-search-input {
    flex: 1;
    min-width: 220px;
    padding: 10px 14px;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-sm);
    font-size: 14px;
    font-family: inherit;
}
.fp-search-role {
    padding: 10px 12px;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: var(--fp-surface);
    min-width: 140px;
}
.fp-search-row-advanced {
    gap: 16px;
    /* The date pickers have a stacked label ("Deadline from") above the input,
       while the toggles are a single-line pill. To make the inputs themselves
       line up (rather than the block centers), align children by their
       end edge. The toggles also get a matching min-height below. */
    align-items: end;
}
.fp-search-date {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--fp-text-muted);
}
.fp-search-date input {
    padding: 8px 10px;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-sm);
    font-size: 13px;
    font-family: inherit;
}
.fp-search-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--fp-border);
    border-radius: 999px;
    background: var(--fp-surface);
    cursor: pointer;
    font-size: 13px;
    user-select: none;
}
.fp-search-toggle:has(input:checked) {
    background: var(--fp-text);
    color: var(--fp-primary-text);
    border-color: var(--fp-text);
}
.fp-search-toggle input { margin: 0; }
.fp-search-results-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--fp-text-muted);
}

/* Urgent + closing-soon badges on call cards */
.fp-call-badges {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.fp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.fp-badge-urgent  { background: #fee4e2; color: #b42318; }
.fp-badge-closing { background: #fff4e5; color: #b25e09; }

/* fp-badge-red/-green/-yellow: used in wp-admin meta boxes (VendorDocuments'
 * compliance-doc status, EPK's deferred-commitment status) but never
 * defined anywhere -- found while building the EPK admin display. Unlike
 * the broader BEM-style class mismatch logged in the dev spec (Section 6),
 * these are small, self-contained, and clearly missing rather than a naming
 * disagreement, so adding them here rather than leaving a third unstyled
 * admin surface. Colors match the existing fp-badge-urgent/-closing pattern
 * already above. */
.fp-badge-red    { background: #fee4e2; color: #b42318; }
.fp-badge-green  { background: #dcfae6; color: #1a7f37; }
.fp-badge-yellow { background: #fff4e5; color: #b25e09; }

/* Highlight urgent calls more visibly */
.fp-call-urgent a { border-color: #fda29b; }
.fp-call-urgent a:hover { border-color: #b42318; }
.fp-chip {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--fp-border);
    font-size: 13px;
    text-decoration: none;
    color: var(--fp-text);
    background: var(--fp-surface);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.fp-chip-active { background: var(--fp-text); color: var(--fp-primary-text); border-color: var(--fp-text); }

/* ──────────────────────────────────────────────────────────────────────
   Messaging UI — bounded scrolling lists.

   Reference pattern (from user-supplied snippet):
       <div style="height:100px;overflow:auto;"><table>...</table></div>
   The outer div has the fixed height + overflow. The inner element has
   NO height of its own — it grows naturally and overflows the wrapper,
   which triggers the browser's native scrollbar.

   We use the same shape: a wrapper div (fp-scroll-viewport) sets the
   height and overflow; the inner <ul> grows freely. Themes that target
   <ul> for nav styling can't reach our wrapper div.
   ────────────────────────────────────────────────────────────────────── */
.fp-scroll-viewport {
    height: 240px;
    overflow: auto;
    border: 1px solid #555;
    background: var(--fp-surface);
    box-sizing: border-box;
}
.fp-scroll-viewport-inbox { height: 320px; }
.fp-scroll-viewport-picker { height: 240px; }

/* Inner content list — reset margins/padding so the wrapper is the bounded box. */
.fp-scroll-viewport > ul.fp-thread-list,
.fp-scroll-viewport > ul.fp-recipient-picker {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    background: var(--fp-surface);
}
/* When a header strip is directly above, the viewport joins flush below. */
.fp-msg-list-header + .fp-scroll-viewport {
    border-top: 0;
    border-radius: 0 0 2px 2px;
}
.fp-msg-list-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #555;
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
    background: var(--fp-surface-elevated);
    font-size: 12px;
}
.fp-msg-list-header .fp-msg-count {
    color: #333;
    font-size: 12px;
    flex: 1;
}

/* Per-row line separator inside the list. */
.fp-scroll-viewport > ul > li {
    border-bottom: 1px solid #d0d0d0;
    margin: 0;
    padding: 0;
}
.fp-scroll-viewport > ul > li:last-child { border-bottom: 0; }

/* Per-thread message list inside a single conversation view. */
.fp-msgs-scroll {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid #555;
    border-radius: 2px;
    background: var(--fp-surface);
    padding: 4px 14px 12px;       /* tight top; first message starts near the border */
    margin-bottom: 16px;
    box-sizing: border-box;
}
/* Strip the inline top padding from the FIRST email-style message so it
   sits right under the scroll container's top edge. The inline style on
   .fp-msg-email is padding:14px 0 — !important wins over inline. */
.fp-thread-messages > .fp-msg-email:first-child {
    padding-top: 2px !important;
}

/* ── Inbox column resize handles ─────────────────────────────
   Between the column headers, a thin invisible vertical bar that
   becomes a col-resize cursor and visible blue line on hover.
   Drag changes the CSS variables on the parent containers so all
   inbox rows resize in lockstep. Width is in pixels and saved to
   localStorage so it persists between visits.
*/
.fp-col-resize {
    position: absolute;
    top: -5px;
    right: -3px;
    bottom: -5px;
    width: 6px;
    cursor: col-resize;
    z-index: 2;
}
.fp-col-resize:hover,
.fp-col-resize.fp-resizing {
    background: #0a3aa0;
    opacity: 0.6;
}
/* While dragging, force the col-resize cursor over the entire page
   (otherwise it flickers back to default when the mouse leaves the
   thin handle area mid-drag). */
body.fp-col-resizing,
body.fp-col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* Navigation badge — used on the Messages link to show unread count. Small
   rounded pill in an attention-grabbing color, but sized restrained so it
   doesn't dominate the link. */
.fp-nav-badge {
    display: inline-block;
    background: #d93025;
    color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    margin-left: 4px;
    vertical-align: text-top;
}
.fp-chip-count {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.08);
    font-weight: 600;
    font-size: 11px;
}
.fp-chip-active .fp-chip-count { background: rgba(255,255,255,0.18); }

.fp-call-list { list-style: none; padding: 0; margin: 0; }
.fp-call { margin-bottom: 12px; }
.fp-call a {
    display: block;
    padding: 16px 20px;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.fp-call a:hover {
    border-color: var(--fp-text);
    box-shadow: var(--fp-shadow-md);
}
.fp-call-fest { font-size: 12px; color: var(--fp-text-muted); display: block; margin-bottom: 4px; }
.fp-call-title { margin: 0 0 8px; font-size: 18px; }
.fp-call-meta { display: flex; gap: 12px; font-size: 13px; color: var(--fp-text-muted); align-items: center; flex-wrap: wrap; }

.fp-role-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.fp-role-performer { background: #eeedfe; color: #3c3489; }
.fp-role-vendor    { background: #e1f5ee; color: #085041; }
.fp-role-volunteer { background: #faeeda; color: #854f0b; }
.fp-role-attendee  { background: #fde2f3; color: #851a5c; }

/* ---------- Festival page ---------- */

.fp-festival-header {
    margin-bottom: 32px;
    text-align: center;
}
/* Hero image: column-width (1080px or whatever the content column is) and a
   fixed 400px tall. The old version was full-width 16:9; the new spec sits
   inside the text column so it visually relates to the description. */
.fp-festival-hero {
    width: 100%;
    max-width: 1080px;
    height: 400px;
    overflow: hidden;
    border-radius: var(--fp-radius);
    background: var(--fp-surface);
    margin: 16px 0;
}
.fp-festival-hero img,
.fp-festival-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* On narrow screens the fixed 400px starts to feel oversized — clamp it down
   so the image doesn't dominate the viewport on mobile. */
@media (max-width: 720px) {
    .fp-festival-hero { height: 220px; }
}

/* Intro / tagline: shows directly under the festival header. Slightly larger
   than body copy, muted color, italic to signal "summary". */
.fp-festival-intro {
    font-size: 17px;
    line-height: 1.5;
    color: var(--fp-text-muted, #555);
    font-style: italic;
    margin: 20px 0 8px;
    max-width: 1080px;
}

/* Festival map: Leaflet renders inside this div. The container MUST have an
   explicit height — without one Leaflet computes 0px and the map is invisible. */
.fp-festival-map {
    width: 100%;
    max-width: 1080px;
    height: 360px;
    margin: 20px 0;
    border-radius: var(--fp-radius);
    overflow: hidden;
    border: 1px solid var(--fp-border, #e0e0e0);
}
@media (max-width: 720px) {
    .fp-festival-map { height: 280px; }
}

/* Posters / Photos galleries on the public festival page. Two simple grids,
   one per section. Each thumbnail links to the full image (opens new tab).
   The auto-fill / minmax pattern lets the grid reflow naturally — 4-5 across
   on desktop, 2-3 on tablet, 1-2 on mobile, without any media-query work. */
.fp-festival-gallery {
    margin: 32px 0;
    max-width: 1080px;
}
.fp-festival-gallery h2 {
    font-size: 14pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 16px;
}
.fp-festival-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.fp-gallery-item {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--fp-radius, 6px);
    background: var(--fp-surface, #f5f5f5);
    border: 1px solid var(--fp-border, #e0e0e0);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fp-gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}
.fp-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Posters often have a portrait (taller-than-wide) aspect ratio. Letting them
   keep their natural ratio inside the square box with object-fit:contain would
   waste space; instead we crop with object-fit:cover (consistent grid).
   Click-through opens the original at full resolution. */
@media (max-width: 600px) {
    .fp-festival-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ─── Apps-by-role workspace (My Festivals → Performers/Vendors/etc.) ─── */

/* Three vertically-stacked panels: applications list (scrollable),
   action buttons row, and the organizer's full inbox at the bottom. Sized so
   each panel takes roughly a third of the viewport. */
.fp-apps-workspace {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Roughly fills the visible content area on most laptops; the panels
       inside scroll independently. */
    min-height: calc(100vh - 220px);
}
.fp-apps-list-panel,
.fp-apps-inbox-panel {
    flex: 1 1 0;
    min-height: 180px;
    border: 1px solid var(--fp-border, #e0e0e0);
    border-radius: 8px;
    overflow: auto; /* scrolling list, not the whole page */
    background: var(--fp-surface);
}
.fp-apps-list {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}
.fp-apps-list thead th {
    position: sticky;
    top: 0;
    background: var(--fp-surface, #fafafa);
    z-index: 1;
}
.fp-apps-row {
    cursor: pointer;
    transition: background 0.1s;
}
.fp-apps-row:hover {
    background: rgba(0,0,0,0.025);
}
.fp-apps-row-selected,
.fp-apps-row-selected:hover {
    background: rgba(60, 52, 137, 0.10); /* fp-accent at 10% */
    box-shadow: inset 3px 0 0 var(--fp-accent, #3c3489);
}

/* Action buttons row — narrow center strip between the two panels. */
.fp-apps-actions-bar {
    border: 1px solid var(--fp-border, #e0e0e0);
    border-radius: 8px;
    background: var(--fp-surface, #fafafa);
    padding: 12px 16px;
}
.fp-apps-actions-context {
    display: block;
    font-size: 13px;
    color: var(--fp-text, #1a1a1a);
    margin-bottom: 8px;
}
.fp-apps-actions-context-empty {
    color: var(--fp-text-muted, #666);
    font-style: italic;
}
.fp-apps-actions-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.fp-apps-notes-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--fp-border, #e0e0e0);
}

/* Inbox panel at the bottom. */
.fp-apps-inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--fp-border, #e0e0e0);
    background: var(--fp-surface, #fafafa);
    position: sticky;
    top: 0;
    z-index: 1;
}
.fp-apps-inbox-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fp-apps-inbox-item {
    border-bottom: 1px solid var(--fp-border, #e0e0e0);
}
.fp-apps-inbox-item:last-child {
    border-bottom: none;
}
.fp-apps-inbox-item a {
    display: block;
    padding: 10px 16px;
    color: inherit;
    text-decoration: none;
}
.fp-apps-inbox-item a:hover {
    background: rgba(0,0,0,0.025);
}
.fp-apps-inbox-item-unread a {
    background: rgba(60, 52, 137, 0.04);
}
.fp-apps-inbox-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.fp-apps-inbox-meta small {
    color: var(--fp-text-muted, #666);
    flex-shrink: 0;
}
.fp-apps-inbox-preview {
    font-size: 13px;
    color: var(--fp-text-muted, #555);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-apps-inbox-subj {
    font-weight: 600;
    color: var(--fp-text, #1a1a1a);
}

/* 18pt bold, capitalized, beneath the logo. 18pt ≈ 24px @ 96dpi but you asked
   specifically for 18pt — using pt directly so print/PDF matches what you
   specified. */
.fp-festival-title {
    font-size: 18pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 24px 0 16px;
}
/* 300x300 square logo, centered under the title. object-fit cover centers a
   non-square source image. */
.fp-festival-logo-wrap {
    display: flex;
    justify-content: center;
    margin: 0 0 20px;
}
.fp-festival-logo {
    width: 300px;
    height: 300px;
    object-fit: contain; /* don't crop logos — show whole mark on whatever bg */
    background: var(--fp-surface);
    border-radius: var(--fp-radius);
}
/* On narrow screens, scale the logo down proportionally so it doesn't dominate
   the screen. */
@media (max-width: 600px) {
    .fp-festival-logo { width: 200px; height: 200px; }
}
.fp-festival-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--fp-text-muted); font-size: 14px; }
.fp-festival-meta span { display: inline-flex; align-items: center; gap: 6px; }
.fp-festival-content { max-width: 720px; margin: 0 auto; line-height: 1.7; }
.fp-festival-calls { margin-top: 48px; }

/* Counts row shown on /festivals/X with no role filter — one card per role
   (Performers / Vendors / Volunteers) plus an optional Jobs link. Each card
   is clickable when its count > 0; empty cards stay dim and unclickable. */
.fp-call-counts {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.fp-call-count {
    flex: 1 1 140px;
    min-width: 120px;
}
.fp-call-count > a,
.fp-call-count > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    text-decoration: none;
    color: var(--fp-text);
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.fp-call-count > a:hover {
    border-color: var(--fp-text);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.fp-call-count-empty {
    opacity: 0.55;
    cursor: default;
}
.fp-call-count-label {
    font-size: 13px;
    font-weight: 500;
}
.fp-call-count-number {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    margin-left: 12px;
}
.fp-call-count-jobs .fp-call-count-number {
    font-size: 18px;
    opacity: 0.7;
}

.fp-call-list-breadcrumb { margin: 0 0 16px; font-size: 13px; color: var(--fp-text-muted); }
.fp-call-list-breadcrumb a { color: inherit; text-decoration: none; }
.fp-call-list-breadcrumb a:hover { text-decoration: underline; }

/* ---------- Single open call page ---------- */

.fp-open-call { max-width: 800px; margin: 0 auto; }
.fp-breadcrumb { color: var(--fp-text-muted); font-size: 13px; margin: 0 0 8px; }
.fp-breadcrumb a { color: inherit; }
.fp-call-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding: 20px;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    margin: 20px 0;
    font-size: 14px;
}
.fp-call-meta-grid strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fp-text-muted); margin-bottom: 4px; font-weight: 600; }
.fp-call-content { line-height: 1.7; margin-bottom: 32px; }
.fp-call-required-permits {
    margin-top: 20px;
    padding: 16px;
    background: var(--fp-warning-bg);
    color: var(--fp-warning-text);
    border-radius: var(--fp-radius);
    font-size: 14px;
}
.fp-call-required-permits strong { display: block; margin-bottom: 6px; }

.fp-call-apply { background: var(--fp-surface); padding: 32px; border-radius: var(--fp-radius); border: 1px solid var(--fp-border); }
.fp-call-apply h2 { margin-top: 0; }
.fp-autofill { background: var(--fp-info-bg); color: var(--fp-info-text); padding: 10px 14px; border-radius: var(--fp-radius-sm); font-size: 13px; margin-bottom: 16px; }

/* Success card (post-submission and "already applied" states) */
.fp-success-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: 32px;
    max-width: 720px;
}
.fp-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--fp-success-bg);
    color: var(--fp-success-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
}
.fp-success-card h2 { margin: 0 0 8px; font-size: 24px; }
.fp-success-lede { color: var(--fp-text-muted); font-size: 16px; margin: 0 0 24px; }
.fp-success-summary {
    margin: 24px 0;
    padding: 20px 24px;
    background: var(--fp-surface-elevated);
    border-radius: var(--fp-radius-sm);
}
.fp-success-summary dt {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fp-text-muted);
    margin-top: 12px;
}
.fp-success-summary dt:first-child { margin-top: 0; }
.fp-success-summary dd {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
}
.fp-success-summary dd small { color: var(--fp-text-muted); }
.fp-success-summary .fp-role-pill { margin-left: 8px; }
.fp-success-answers {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
}
.fp-success-answers li {
    padding: 6px 0;
    border-bottom: 1px solid var(--fp-border);
    font-size: 13px;
}
.fp-success-answers li:last-child { border-bottom: none; }
.fp-success-next {
    margin: 24px 0;
    padding: 16px 20px;
    background: var(--fp-info-bg);
    color: var(--fp-info-text);
    border-radius: var(--fp-radius-sm);
    font-size: 14px;
}
.fp-success-next h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.fp-success-next p { margin: 0; }
.fp-success-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* ---------- Profile page ---------- */

.fp-profile-wrap { max-width: 720px; margin: 0 auto; }
.fp-profile-wrap h2 { margin-top: 0; }
.fp-profile-role-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--fp-surface-elevated);
    color: var(--fp-accent);
    border: 1px solid var(--fp-border-soft);
    vertical-align: middle;
}
.fp-profile-photo { display: flex; align-items: center; gap: 16px; }
.fp-profile-photo__preview { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--fp-border-soft); }
.fp-profile-photo__controls input[type="file"] { display: none; }

/* ---------- Dashboard ---------- */

.fp-dashboard { max-width: 100%; }

/* Was almost entirely unstyled before this pass -- .fp-dashboard__header,
 * __section, __actions, .fp-app-list/-card, .fp-pass-list/-card, .fp-empty
 * had no CSS anywhere in the theme. Styled here using the same tokens as
 * the rest of this stylesheet (var(--fp-surface), var(--fp-border), etc.)
 * rather than introducing a new visual language for this one page. */
.fp-dashboard__header { margin-bottom: 28px; }
.fp-dashboard__header h2 { margin: 0; font-size: 26px; }
.fp-dashboard__section {
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--fp-border-soft);
}
.fp-dashboard__section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.fp-dashboard__section h3 { margin: 0 0 16px; font-size: 19px; }
.fp-dashboard__subheading {
    margin: 24px 0 12px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fp-text-muted);
}
.fp-dashboard__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }

.fp-empty { color: var(--fp-text-muted); font-size: 14px; }
.fp-empty a { color: var(--fp-accent); }

.fp-app-list, .fp-pass-list { display: flex; flex-direction: column; gap: 10px; }
.fp-app-card, .fp-pass-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 16px;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border-soft);
    border-radius: var(--fp-radius);
}
.fp-app-card__meta { display: flex; flex-direction: column; gap: 4px; }
.fp-app-card__status {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fp-text-muted);
}
.fp-app-card--approved .fp-app-card__status { color: var(--fp-success-text); }
.fp-app-card--rejected .fp-app-card__status { color: var(--fp-error-text); }
.fp-app-card--waitlisted .fp-app-card__status,
.fp-app-card--shortlisted .fp-app-card__status { color: var(--fp-warning-text); }
.fp-app-card__date { font-size: 13px; color: var(--fp-text-subtle); white-space: nowrap; }

/* Acceptance confirm/withdraw actions (.fp-app-card__accept-actions,
 * Shortcodes::render_acceptance_actions()) -- only ever rendered while
 * an application is pending_confirmation, so this naturally only shows
 * up for open calls where the organizer configured a real accept-
 * deadline; otherwise the dashboard card looks exactly as it did before
 * this feature existed. */
.fp-app-card__accept-actions { width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--fp-border-soft); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fp-app-card__accept-actions .fp-field__hint { margin: 0; flex: 1 1 100%; }

.fp-pass-card__info { display: flex; flex-direction: column; gap: 4px; }
.fp-pass-card__info code {
    font-size: 12px;
    color: var(--fp-text-muted);
    background: var(--fp-surface-elevated);
    padding: 2px 6px;
    border-radius: var(--fp-radius-sm);
    width: fit-content;
}
.fp-pass-card__status {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 999px;
}
.fp-pass-card__status.is-active { background: var(--fp-success-bg); color: var(--fp-success-text); }
.fp-pass-card__status.is-inactive { background: var(--fp-surface-elevated); color: var(--fp-text-muted); }

.fp-schedule-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: 24px;
    margin-bottom: 32px;
}
.fp-schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.fp-schedule-header h2 { margin: 0; }
.fp-schedule-entry {
    padding: 16px;
    background: var(--fp-surface-elevated);
    border-radius: var(--fp-radius-sm);
    margin-bottom: 12px;
}
.fp-schedule-entry:last-child { margin-bottom: 0; }
.fp-schedule-entry h3 { margin: 0 0 8px; font-size: 15px; }
.fp-schedule-entry p { margin: 0; font-size: 14px; line-height: 1.6; }
.fp-shifts { list-style: none; padding: 0; margin: 0; }
.fp-shifts li { padding: 4px 0; border-bottom: 1px solid var(--fp-border); font-size: 13px; }
.fp-shifts li:last-child { border-bottom: none; }
.fp-btn-sm { padding: 6px 12px; font-size: 13px; }
.fp-muted { color: var(--fp-text-muted); font-style: italic; }
.fp-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    overflow: hidden;
}
.fp-table th, .fp-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--fp-border);
    font-size: 14px;
}
.fp-table th { background: var(--fp-surface-elevated); font-weight: 600; font-size: 13px; }
.fp-table tr:last-child td { border-bottom: none; }

.fp-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.fp-status-draft        { background: var(--fp-surface-elevated); color: var(--fp-text-muted); }
.fp-status-submitted    { background: var(--fp-info-bg); color: var(--fp-info-text); }
.fp-status-under_review { background: #2a1f47; color: #c9a8ff; }
.fp-status-shortlisted  { background: var(--fp-warning-bg); color: var(--fp-warning-text); }
.fp-status-offer        { background: var(--fp-warning-bg); color: var(--fp-warning-text); }
.fp-status-accepted     { background: var(--fp-success-bg); color: var(--fp-success-text); }
.fp-status-declined     { background: var(--fp-error-bg); color: var(--fp-error-text); }
.fp-status-withdrawn    { background: var(--fp-surface-elevated); color: var(--fp-text-subtle); }

/* ---------- Page ---------- */

.fp-page-title { font-size: 32px; margin: 0 0 24px; text-align: center; }
/* Prose pages (About, Terms, etc.): readable width, centered. */
.fp-page-content { max-width: 720px; margin: 0 auto; line-height: 1.7; }
/* Shortcode-only pages (Industry, Dashboard, Messages, Profile, My Festivals, etc.)
   need to span the whole container — the shortcode renders its own internal
   layout. Without this override, .fp-page-content's 720px cap would cram
   everything to the left side of the 1280px container. */
.fp-page-shortcode-only .fp-page-content { max-width: none; margin: 0; }

/* ---------- Footer ---------- */

.fp-footer {
    background: var(--fp-surface);
    border-top: 1px solid var(--fp-border);
    padding: 32px 0;
    margin-top: 64px;
    color: var(--fp-text-muted);
    font-size: 13px;
}
.fp-footer-menu { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0 0 12px; }
.fp-footer-menu a { color: inherit; text-decoration: none; }
.fp-copyright { margin: 0; }

/* ---------- Responsive ---------- */

/* ---------- Empty state (no profile yet) ---------- */

.fp-empty-state { max-width: 720px; margin: 0 auto; }
.fp-empty-state h2 { margin-top: 0; }
.fp-role-cards-compact { margin-top: 16px; }
.fp-role-cards-compact .fp-role-card { padding: 16px; }
.fp-role-cards-compact .fp-role-card h3 { margin: 0 0 4px; font-size: 16px; }
.fp-role-cards-compact .fp-role-card p { font-size: 13px; }

.fp-admin-hint {
    background: #fff8e6;
    border-left: 3px solid #f0b849;
    padding: 12px 16px;
    margin-top: 24px;
    font-size: 13px;
    color: #574119;
}
.fp-admin-hint code {
    background: rgba(0,0,0,0.06);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}
ul.fp-admin-hint { padding-left: 16px; }
ul.fp-admin-hint li { list-style: disc; padding-left: 0; margin-left: 16px; }

.fp-signup-role-pill {
    background: var(--fp-info-bg);
    color: var(--fp-info-text);
    padding: 10px 14px;
    border-radius: var(--fp-radius-sm);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fp-charcount { display: block; color: var(--fp-text-subtle); font-size: 11px; text-align: right; margin-top: 2px; }

/* ---------- Hero (front page) ---------- */

.fp-hero {
    text-align: center;
    padding: 64px 0 32px;
}
.fp-hero-inner { max-width: 720px; margin: 0 auto; }
.fp-hero-title {
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 0 0 20px;
}
.fp-hero-lede {
    font-size: 18px;
    color: var(--fp-text-muted);
    line-height: 1.5;
    margin: 0 0 32px;
}
.fp-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* When the hero is used via shortcode on a static page, it's wrapped in
   whatever container the page template uses (often .fp-container or a
   Gutenberg group). This breakout trick stretches it to the full viewport
   width regardless of parent container. Combined with negative top margin
   to slide under the (now-transparent) site header. */
.fp-home-hero--shortcode {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -1px; /* hairline gap suppressor */
}

/* Elementor breakout: when a user builds their homepage in Elementor, the
   hero shortcode ends up inside .elementor-widget-shortcode > .elementor-
   widget-container > our hero. Each ancestor has its own padding/width that
   constrains our 100vw breakout. We force-strip them.

   We target only on the .fp-has-transparent-header body so this CSS doesn't
   leak to other Elementor pages that might legitimately want narrow content. */
.fp-has-transparent-header .elementor-section,
.fp-has-transparent-header .elementor-container,
.fp-has-transparent-header .elementor-column,
.fp-has-transparent-header .elementor-widget-wrap,
.fp-has-transparent-header .elementor-widget-shortcode,
.fp-has-transparent-header .elementor-widget-container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
}

/* Elementor also gives the page a top padding to clear the header. Since we
   want the hero to start at the very top of the page (header overlays it),
   strip that too. */
.fp-has-transparent-header .elementor,
.fp-has-transparent-header .elementor-inner,
.fp-has-transparent-header .elementor-section-wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.fp-has-transparent-header main,
.fp-has-transparent-header .site-main,
.fp-has-transparent-header .fp-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* The theme wraps page content in <main class="fp-main"><div class="fp-container">.
   The container has a max-width that constrains our hero. Strip the constraint
   when the page is in transparent-header mode. We don't strip globally because
   other pages (open calls, profile, etc.) need the container for readability. */
.fp-has-transparent-header .fp-main > .fp-container,
.fp-has-transparent-header main > .fp-container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* When the home hero is on the page, make the site header overlay it
   transparently. The .fp-has-transparent-header class is added on <body>
   by the theme when this page contains the hero. */
.fp-has-transparent-header .fp-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: none;
    z-index: 50;
    box-shadow: none;
    /* Small dark gradient strip behind the header so the white menu text
       stays legible no matter what image is uploaded as the hero. Fades from
       ~55% black at the top to fully transparent at the bottom, ~120px tall.
       The image itself is untouched — this is just a CSS overlay on the
       header element. */
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 60%, rgba(0,0,0,0) 100%);
    padding-top: 57px;   /* ~15mm — menu pushed well down from the top edge */
    padding-bottom: 24px;
}
.fp-has-transparent-header .fp-header,
.fp-has-transparent-header .fp-header a,
.fp-has-transparent-header .fp-header .fp-menu a {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* slightly stronger shadow for crisp readability */
}
/* Logo color reset — if it's an image, leave it; if it's a text-based site
   title, force white. */
.fp-has-transparent-header .fp-header .fp-site-title,
.fp-has-transparent-header .fp-header .site-title { color: #fff; }

/* Once the user scrolls past the hero, the header gets the .fp-header--scrolled
   class added by JS. Revert to the default solid styling so links stay legible
   over normal page content. */
.fp-has-transparent-header .fp-header--scrolled {
    position: fixed; /* stay pinned to the top once scrolled */
    background: var(--fp-bg, #fff);
    background-image: none; /* drop the gradient */
    border-bottom: 1px solid var(--fp-border, #e0e0e0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    padding-top: 0;
    padding-bottom: 0;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.fp-has-transparent-header .fp-header--scrolled,
.fp-has-transparent-header .fp-header--scrolled a,
.fp-has-transparent-header .fp-header--scrolled .fp-menu a {
    color: var(--fp-text, #111);
    text-shadow: none;
}
.fp-has-transparent-header .fp-header--scrolled .fp-site-title,
.fp-has-transparent-header .fp-header--scrolled .site-title { color: var(--fp-text, #111); }

/* Make sure the hero starts at the very top of the page (above where the
   transparent header sits). The header is absolutely positioned, so the
   hero needs to flow under it from y=0. Padding-top creates breathing room
   between the header and the search box. */
.fp-has-transparent-header .fp-home-hero { padding-top: 120px; }

/* ---------- Home hero (festivalgoer-focused) ---------- */

/* Big image hero with a transparent search box centred on top. The
   background-image is set inline in front-page.php so it can be dynamic.
   Sized to fill the viewport so the image dominates the screen on landing.
   Uses svh (small viewport height) instead of vh so mobile browsers don't
   reflow when the address bar collapses.

   The header naturally sits above the hero in document flow. We accept the
   hero may be slightly cut off at the bottom (a sliver visible below the
   fold) — the alternative is to either hardcode the header height (fragile
   across themes/admin bar) or fundamentally restructure positioning so the
   hero sits behind the header (bigger change). Plain svh is robust. */
.fp-home-hero {
    position: relative;
    min-height: 100svh;
    padding: 80px 24px 64px;
    background-size: cover;
    background-position: center center;
    background-color: var(--fp-bg);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
/* Fallback when no hero image is set — rich gradient so the page never looks
   broken on a fresh install. */
.fp-home-hero-no-image {
    background-image:
        radial-gradient(ellipse at 30% 20%, rgba(201, 168, 255, 0.25), transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(143, 191, 245, 0.20), transparent 50%),
        linear-gradient(135deg, #070313 0%, #1a0e2e 50%, #2a1f47 100%);
}
/* Fallback for older browsers without svh support. */
@supports not (height: 100svh) {
    .fp-home-hero { min-height: 100vh; }
}
/* When the WP admin bar is showing (logged-in users), it eats 32px (46px on
   mobile) at the top of the viewport. Subtract that so the hero still ends
   at the visible bottom edge. */
.admin-bar .fp-home-hero { min-height: calc(100svh - 32px); }
@media screen and (max-width: 782px) {
    .admin-bar .fp-home-hero { min-height: calc(100svh - 46px); }
}
.fp-home-hero-inner {
    width: 100%;
    max-width: 880px;
    text-align: center;
}
.fp-home-hero-title {
    font-size: 48px;
    line-height: 1.1;
    font-weight: 700;
    margin: 0 0 12px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.fp-home-hero-lede {
    font-size: 18px;
    color: rgba(255,255,255,0.92);
    margin: 0 0 32px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* The translucent search panel. Acrylic-style: white at 16% opacity, big
   border-radius, blurred background. Safari and Chrome both support
   backdrop-filter; Firefox is the holdout but degrades gracefully to a less-
   blurred translucent panel. */
.fp-festival-search {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.30);
    border-radius: 14px;
    padding: 20px;
    text-align: left;
    box-shadow: 0 6px 30px rgba(0,0,0,0.25);
}
.fp-festival-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
}
.fp-festival-search-row + .fp-festival-search-row { margin-top: 12px; }
.fp-festival-search-row-more { padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.18); flex-direction: column; align-items: stretch; }
/* Region dropdown on its own line, with all checkboxes on one line beneath it. */
.fp-festival-search-region { flex: 0 0 auto; max-width: 340px; }
.fp-festival-search-checks { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; }
.fp-festival-search-bottom {
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.18);
}
.fp-festival-search-field {
    flex: 1;
    min-width: 150px;
    display: flex;
    flex-direction: column;
}
.fp-festival-search-field label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* Inputs inside the search panel: translucent (no white fill) with light text,
   so they sit cleanly on the dark hero. */
.fp-festival-search input[type="text"],
.fp-festival-search input[type="date"],
.fp-festival-search select {
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.40);
    border-radius: 6px;
    background: rgba(255,255,255,0.10);
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}
.fp-festival-search input::placeholder { color: rgba(255,255,255,0.65); }
/* The open option list matches the dark field where the browser allows
   styling it; on OS-native white lists (macOS/iOS) this is ignored and the
   list stays OS-styled. Both properties set as a pair — see the global
   select option rule near the top of this file for why. */
.fp-festival-search select option { background-color: var(--fp-surface); color: var(--fp-text); }
.fp-festival-search input:focus,
.fp-festival-search select:focus {
    outline: none;
    border-color: rgba(255,255,255,0.95);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
}
.fp-festival-search-more-toggle {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.45);
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.12s;
    height: 40px;
}
.fp-festival-search-more-toggle:hover { background: rgba(255,255,255,0.12); }
.fp-festival-search-more-toggle[aria-expanded="true"] { background: rgba(255,255,255,0.18); }
.fp-festival-search-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.fp-festival-search-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #fff;
    cursor: pointer;
}
.fp-festival-search-bottom .fp-btn { margin-left: auto; }

@media (max-width: 720px) {
    .fp-home-hero { padding: 56px 16px 40px; min-height: 100svh; }
    .fp-home-hero-title { font-size: 32px; }
    .fp-home-hero-lede { font-size: 15px; }
    .fp-festival-search { padding: 16px; }
    .fp-festival-search-field { min-width: 100%; }
    .fp-festival-search-bottom { flex-wrap: wrap; }
    .fp-festival-search-bottom .fp-btn { margin-left: 0; width: 100%; }
}

/* ---------- Role cards ---------- */

.fp-roles { padding: 32px 0; }
.fp-role-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.fp-role-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.fp-role-card:hover {
    border-color: var(--fp-text);
    box-shadow: var(--fp-shadow-md);
    transform: translateY(-2px);
}
.fp-role-card h3 { margin: 12px 0 8px; font-size: 18px; }
.fp-role-card p { margin: 0; color: var(--fp-text-muted); font-size: 14px; }

/* Festivalgoer block: single card, centered, capped width so it doesn't
   stretch to the full row width of the industry grid. */
.fp-role-cards--festivalgoer {
    grid-template-columns: minmax(280px, 480px);
    justify-content: start;
}

/* Industry block: four equal columns in a single row on desktop. Cards are
   forced to a 1:1 aspect ratio so they read as squares rather than rectangles.
   Drops to 2x2 on narrow tablets and 1-up on mobile so the squares stay
   square — content reflows inside but the box doesn't stretch. */
.fp-role-cards--industry {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.fp-role-card--square {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Make sure long copy doesn't push the box taller than wide. */
    overflow: hidden;
}
.fp-role-card--square p {
    /* If the description would overflow the square, clamp it visually so
       the box stays a clean square. The bottom of the card may show a soft
       fade — acceptable in this teaser context. */
    flex: 1;
    overflow: hidden;
}

@media (max-width: 900px) {
    .fp-role-cards--industry { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .fp-role-cards--industry { grid-template-columns: 1fr; }
    /* On mobile a strict 1:1 square gets weird (a giant square per row). Let
       the cards relax back to natural height. */
    .fp-role-card--square { aspect-ratio: auto; }
}

/* ---------- Sections ---------- */

.fp-section { padding: 56px 24px; max-width: 1280px; margin: 0 auto; }
.fp-section-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.015em;
    color: var(--fp-text);
}
.fp-home-listings { padding-top: 48px; padding-bottom: 80px; }

/* ---------- Festival grid (aggregator-style) ---------- */

.fp-archive-header { margin-bottom: 32px; }
.fp-page-lede { color: var(--fp-text-muted); font-size: 16px; margin: 8px 0 0; }

/* Section header on home — title left, "View all" link right. */
.fp-home-listings-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 0 24px;
}
.fp-section-link {
    color: var(--fp-accent) !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.fp-festival-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.fp-festival-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border-soft);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.fp-festival-card:hover {
    border-color: var(--fp-text);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    transform: translateY(-2px);
}
/* Anonymous-visitor home page preview card (front-page.php) -- a <div>,
 * not an <a>, since per the user these are explicitly NOT clickable.
 * Cancels the hover-interactivity styling above; everything else
 * (.fp-festival-card's base layout) is shared and works the same on a
 * div as an anchor. */
.fp-festival-card--preview:hover {
    border-color: var(--fp-border-soft);
    box-shadow: none;
    transform: none;
    cursor: default;
}
.fp-festival-card-excerpt { font-size: 13px; color: var(--fp-text-muted); margin: 6px 0 0; line-height: 1.4; }

/* Hero CTA shown to anonymous visitors instead of the search form
 * (front-page.php) -- per the user, anonymous visitors are restricted
 * to the home page only, so the search form (which submits to
 * /festivals, now blocked for them) is replaced with this instead. */
.fp-home-hero-anon-cta { color: rgba(255,255,255,0.85); font-size: 16px; margin: 20px 0 16px; max-width: 480px; }
.fp-home-hero-anon-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Thumb wrapper holds the image PLUS the floating date badge. */
.fp-festival-card-thumb-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.fp-festival-card-thumb {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, #2a1f47 0%, #1a0e2e 100%);
}
.fp-festival-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-festival-card-thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a1f47 0%, #1a0e2e 100%);
}
/* Date badge — bottom-left corner of the thumb, like a poster ribbon. */
.fp-festival-card-datebadge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(7, 3, 19, 0.92);
    color: #ffffff !important;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.1);
}
.fp-festival-card-datebadge-month {
    display: block;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--fp-accent) !important;
    font-weight: 600;
}
.fp-festival-card-datebadge-days {
    display: block;
    font-size: 22px;
    color: #ffffff !important;
    font-weight: 700;
}

.fp-festival-card-body { padding: 16px 20px 20px; }
.fp-festival-card-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--fp-text);
    letter-spacing: -0.01em;
}
.fp-festival-card-location {
    margin: 0 0 10px;
    color: var(--fp-text-muted);
    font-size: 13px;
}
.fp-festival-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}
.fp-festival-card-tag {
    display: inline-block;
    padding: 3px 9px;
    background: var(--fp-surface-elevated);
    border: 1px solid var(--fp-border-soft);
    color: var(--fp-text-muted) !important;
    font-size: 11px;
    border-radius: 100px;
    letter-spacing: 0.02em;
}
.fp-festival-card-meta { margin: 0; color: var(--fp-text-muted); font-size: 13px; }
.fp-festival-card-meta span { display: block; }

/* ---------- Pagination ---------- */

.fp-main .pagination, .fp-main .page-numbers {
    display: inline-flex;
    gap: 4px;
    margin: 24px 0;
}
.fp-main .page-numbers {
    padding: 8px 12px;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-sm);
    text-decoration: none;
    color: var(--fp-text);
    font-size: 13px;
}
.fp-main .page-numbers.current { background: var(--fp-primary); color: var(--fp-primary-text); border-color: var(--fp-primary); }

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
    .fp-header-inner { flex-direction: column; gap: 12px; align-items: stretch; }
    .fp-primary-nav { justify-content: space-between; }
    .fp-menu { flex-wrap: wrap; gap: 12px; }
    .fp-festival-title { font-size: 16pt; /* slightly smaller on narrow screens, still bold caps */ }
    .fp-call-meta-grid { grid-template-columns: 1fr 1fr; }
    .fp-table th, .fp-table td { padding: 10px; font-size: 13px; }
    .fp-hero-title { font-size: 36px; }
    .fp-hero-lede { font-size: 16px; }
    .fp-hero { padding: 40px 0 16px; }
    .fp-section { padding: 24px 0; }
}

/* ──────────────────────────────────────────────────────────────────────
   Industry landing page redesign (Bob Booking-inspired)
   ────────────────────────────────────────────────────────────────────── */

.fp-industry-landing,
.fp-industry-help {
    max-width: 1100px;
    margin: 0 auto;
}

.fp-ind-hero {
    text-align: center;
    padding: 96px 24px 64px;
}
.fp-ind-hero-inner {
    max-width: 760px;
    margin: 0 auto;
}
.fp-ind-hero-title {
    font-size: 56px;
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 24px;
    letter-spacing: -0.02em;
    color: var(--fp-text);
}
.fp-ind-hero-emph {
    color: var(--fp-accent);  /* lavender highlight on the second line */
    font-weight: 600;
}
.fp-ind-hero-sub {
    font-size: 20px;
    line-height: 1.5;
    color: var(--fp-text-muted);
    margin: 0 0 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.fp-ind-hero-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 24px;
}
.fp-btn-hero {
    font-size: 16px;
    padding: 14px 32px;
}
.fp-btn-hero-secondary {
    font-size: 16px;
    padding: 14px 32px;
    background: transparent !important;
    border: 1px solid var(--fp-text) !important;
    color: var(--fp-text) !important;
}
.fp-ind-hero-foot {
    color: var(--fp-text-subtle);
    font-size: 14px;
    margin: 0;
}

/* Section titles — clean horizontal divider above large heading. */
.fp-ind-section-title {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 48px;
    letter-spacing: -0.01em;
    color: var(--fp-text);
}

/* Role cards: 4-column grid (responsive). Each card has a thin border,
   slightly elevated surface bg, and a small primary CTA at the bottom. */
.fp-ind-roles { padding: 48px 24px 64px; }
.fp-ind-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}
.fp-ind-role-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border-soft);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fp-ind-role-card h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--fp-text);
}
.fp-ind-role-card p {
    margin: 0 0 12px;
    color: var(--fp-text-muted);
    line-height: 1.5;
    flex-grow: 1;
}
.fp-ind-role-card .fp-btn {
    align-self: flex-start;
}

/* Industry resources view (.fp-industry-resources, .fp-resource-card) --
 * shown instead of the role-signup cards above once a visitor already
 * holds an industry role. New in this fix; modeled on .fp-ind-role-card's
 * real, working pattern above rather than .fp-industry-card, which the
 * signup-card markup uses but which has no matching CSS anywhere (a
 * pre-existing mismatch, not introduced here -- see the dev spec). */
.fp-industry-resources { max-width: 800px; margin: 0 auto; padding: 32px 24px; }
.fp-resource-list { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.fp-resource-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border-soft);
    border-radius: 12px;
    padding: 20px 24px;
}
.fp-resource-card__title { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--fp-text); }
.fp-resource-card__excerpt, .fp-resource-card__body { color: var(--fp-text-muted); line-height: 1.5; margin: 0 0 8px; }
.fp-resource-card__date { font-size: 12px; color: var(--fp-text-subtle); }

/* Member-zone scaffolding (festivalgoer offers, advertiser placements) --
 * new in this fix, deliberately styled to look like real content (not a
 * broken-looking stub) while the "coming soon" badge keeps it honest
 * that nothing here is transactional yet. */
.fp-member-zone__intro { margin-bottom: 20px; }
.fp-member-zone__section-title { font-size: 18px; font-weight: 600; color: var(--fp-text); margin: 28px 0 8px; }
.fp-offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.fp-offer-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border-soft);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fp-offer-card__badge {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--fp-warning-bg);
    color: var(--fp-warning-text);
}
.fp-offer-card__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--fp-text); }
.fp-offer-card__title a { color: inherit; }
.fp-offer-card__desc { margin: 0; font-size: 13px; color: var(--fp-text-muted); }

/* Feature grid — 3 columns, larger cards with bigger headlines. */
.fp-ind-features { padding: 48px 24px 64px; }
.fp-ind-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.fp-ind-feature {
    padding: 24px 8px;
}
.fp-ind-feature h3 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--fp-text);
}
.fp-ind-feature p {
    margin: 0;
    color: var(--fp-text-muted);
    line-height: 1.6;
}

/* Final CTA section — centered with primary + secondary buttons. */
.fp-ind-cta {
    text-align: center;
    padding: 80px 24px 96px;
    border-top: 1px solid var(--fp-border-soft);
    margin-top: 32px;
}
.fp-ind-cta h2 {
    font-size: 36px;
    margin: 0 0 12px;
    color: var(--fp-text);
}
.fp-ind-cta-sub {
    color: var(--fp-text-muted);
    margin: 0 0 32px;
    font-size: 18px;
}
.fp-ind-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 24px;
}
.fp-ind-help-link a {
    color: var(--fp-text-muted) !important;
    font-size: 14px;
    text-decoration: none;
}

/* Help page FAQ list — accordion items using <details> */
.fp-faq-item {
    border-bottom: 1px solid var(--fp-border-soft);
    padding: 16px 0;
}
.fp-faq-item summary {
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    color: var(--fp-text);
    padding: 4px 0;
    list-style: none;  /* remove default disclosure triangle */
    position: relative;
    padding-right: 32px;
}
.fp-faq-item summary::-webkit-details-marker { display: none; }
.fp-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 4px;
    font-size: 20px;
    font-weight: 400;
    color: var(--fp-text-muted);
}
.fp-faq-item[open] summary::after { content: '−'; }
.fp-faq-answer {
    margin-top: 12px;
    color: var(--fp-text-muted);
    line-height: 1.6;
    font-size: 15px;
}
.fp-faq-answer a {
    color: var(--fp-accent);
    text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────────────────
   Dashboard hero (Songkick-inspired)
   ────────────────────────────────────────────────────────────────────── */
.fp-dash-hero {
    text-align: center;
    padding: 48px 24px;
    margin-bottom: 32px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--fp-surface) 0%, var(--fp-surface-elevated) 100%);
    border: 1px solid var(--fp-border-soft);
}
.fp-dash-hero-inner { max-width: 720px; margin: 0 auto; }
.fp-dash-role-badge {
    display: inline-block;
    background: var(--fp-accent);
    color: var(--fp-bg);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 12px;
    border-radius: 100px;
    margin: 0 0 16px;
}
.fp-dash-hero h1 {
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--fp-text);
    letter-spacing: -0.01em;
}
.fp-dash-hero-sub {
    color: var(--fp-text-muted);
    font-size: 17px;
    margin: 0 0 32px;
}
.fp-dash-stats {
    display: flex;
    gap: 48px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 32px;
}
.fp-dash-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.fp-dash-stat-num {
    font-size: 40px;
    font-weight: 700;
    color: var(--fp-text);
    line-height: 1;
}
.fp-dash-stat-label {
    color: var(--fp-text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.fp-dash-hero-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
}

@media (max-width: 640px) {
    .fp-ind-hero-title { font-size: 36px; }
    .fp-ind-hero-sub { font-size: 16px; }
    .fp-ind-section-title { font-size: 28px; margin-bottom: 32px; }
    .fp-ind-cta h2 { font-size: 28px; }
    .fp-dash-hero h1 { font-size: 28px; }
    .fp-dash-stats { gap: 24px; }
    .fp-dash-stat-num { font-size: 32px; }
}

/* /my-festivals — must match /festivals exactly: fill the full .fp-container
   width so its left edge aligns with the header/logo and the festivals
   archive grid. No max-width override here; the parent .fp-container is
   the single source of width truth.

   v0.65.9: user reported workspace still felt 1 inch right of where they
   wanted it. Applied a 96px left shift on screens wide enough to absorb
   it without horizontal overflow. */
.fp-my-festivals {
    max-width: none;
    margin: 0;
}
@media (min-width: 1280px) {
    .fp-my-festivals {
        margin-left: -96px;
        margin-right: 96px;
    }
}

/* Superadmin-only Organizers section (.fp-my-festivals__organizers,
 * .fp-org-list) on /my-festivals/, and the read-only organizer profile
 * summary it links to (.fp-org-profile-view, [festpass_organizer_profile]).
 * New in this fix -- per the user, distinct from the editable
 * [festpass_profile] form. */
.fp-my-festivals__organizers { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--fp-border-soft); }
.fp-org-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.fp-org-list__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border-soft);
    border-radius: var(--fp-radius);
}
.fp-org-list__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.fp-org-list__info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.fp-org-list__email { font-size: 13px; color: var(--fp-text-muted); }
.fp-org-list__fest-count { font-size: 13px; color: var(--fp-text-subtle); white-space: nowrap; }
.fp-org-profile-view .fp-profile-photo { margin-bottom: 16px; }

/* /messages — folder sidebar polish (v0.65.5).
   1. Active folder pill changes from dark blue to light gray (#cccccc)
      with dark text so it doesn't look like a "blue tile" in the inbox.
   2. "Folders" / "My folders" section titles get darker text + bolder
      weight so they stand out on the white panel. */
.fp-folder-sidebar a[style*="background:#1f3a5f"] {
    background: #cccccc !important;
    color: #000000 !important;
}
.fp-folder-sidebar h3 {
    color: #1a1a1a !important;
    font-weight: 700 !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Universal centering safety net (v0.65.7).
   The user's design rule: take /festivals/ and /dashboard/ as the visual
   reference for page extent. Any narrower content on other pages must
   center horizontally within that same extent, not glue to the left.
   
   This sweeps inline-style elements that set a max-width but no margin
   helper — common when shortcode code uses `style="max-width:680px"`
   without `margin:0 auto`. Targeting only descendants of .fp-page-content
   keeps it scoped to the front-end and away from admin UI.
   ────────────────────────────────────────────────────────────────────── */
.fp-page-content [style*="max-width:"]:not([style*="margin-left"]):not([style*="margin: 0 auto"]):not([style*="margin:0 auto"]) {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── Festival page: advertiser ad placements + promote CTA (v0.71.0) ────── */
.fp-festival-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0; }
.fp-promote-cta { background: var(--fp-accent) !important; border-color: var(--fp-accent) !important; color: #1a0f2e !important; }
.fp-promote-cta:hover { filter: brightness(1.05); }
.fp-promote-cta[aria-disabled="true"] { opacity: .8; cursor: not-allowed; }

.fp-ad-slot {
  background: var(--fp-surface); border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius); overflow: hidden;
}
.fp-ad-slot--banner { display: block; margin: 18px 0; }
.fp-ad-slot--sidebar { float: right; width: 300px; max-width: 40%; margin: 0 0 20px 24px; }
.fp-ad-slot--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 22px; text-align: center;
  border-style: dashed; background: transparent; color: var(--fp-text);
}
.fp-ad-slot--banner.fp-ad-slot--empty { min-height: 110px; }
.fp-ad-slot--sidebar.fp-ad-slot--empty { min-height: 250px; }
.fp-ad-slot__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }

@media (max-width: 782px) {
  .fp-ad-slot--sidebar { float: none; width: auto; max-width: none; margin: 18px 0; }
}

/* ──────────────────────────────────────────────────────────────────────
   Performer marketing page (single-fp_performer_profile.php) — 0.73.14
   ────────────────────────────────────────────────────────────────────── */

.fp-performer { max-width: 960px; margin: 0 auto; padding: 48px 24px 64px; }

.fp-performer-hero {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin-bottom: 40px;
}
.fp-performer-hero__photo { flex: 0 0 280px; }
.fp-performer-photo {
    width: 280px;
    height: 280px;
    object-fit: cover;
    border-radius: var(--fp-radius, 12px);
    border: 1px solid var(--fp-border-soft);
    display: block;
}
.fp-performer-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 96px;
    font-weight: 700;
    color: var(--fp-accent);
    background: var(--fp-surface);
}
.fp-performer-hero__body { flex: 1; min-width: 0; }
.fp-performer-name { font-size: 44px; line-height: 1.1; margin: 0 0 10px; letter-spacing: -0.02em; color: var(--fp-text); }
.fp-performer-meta { color: var(--fp-text-muted); font-size: 15px; margin: 0 0 16px; }
.fp-performer-lede { font-size: 19px; line-height: 1.5; color: var(--fp-text); margin: 0 0 20px; }
.fp-performer-actions { margin: 0; }

.fp-performer-section { margin: 0 0 40px; }
.fp-performer-section__title { font-size: 24px; margin: 0 0 16px; color: var(--fp-text); }
.fp-performer-content { line-height: 1.7; color: var(--fp-text); }
.fp-performer-content p { margin: 0 0 1em; }

.fp-performer-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.fp-performer-video { margin: 0; }
.fp-performer-video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--fp-surface); border-radius: var(--fp-radius-sm, 8px); overflow: hidden; }
.fp-performer-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fp-performer-video figcaption { color: var(--fp-text-muted); font-size: 13px; margin-top: 6px; }

.fp-performer-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.fp-performer-chip {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid rgba(201, 168, 255, 0.4);
    background: rgba(201, 168, 255, 0.12);
    color: var(--fp-accent);
    border-radius: 999px;
    font-size: 14px;
    text-decoration: none;
}

.fp-performer-quotes { display: grid; gap: 16px; }
.fp-performer-quote {
    margin: 0;
    padding: 20px 24px;
    background: var(--fp-surface);
    border-left: 3px solid var(--fp-accent);
    border-radius: var(--fp-radius-sm, 8px);
}
.fp-performer-quote p { margin: 0 0 8px; font-size: 17px; line-height: 1.5; font-style: italic; }
.fp-performer-quote cite { color: var(--fp-text-muted); font-size: 14px; font-style: normal; }
.fp-performer-quote cite a { color: var(--fp-accent); }

@media (max-width: 720px) {
    .fp-performer-hero { flex-direction: column; gap: 20px; }
    .fp-performer-hero__photo { flex-basis: auto; }
    .fp-performer-photo { width: 100%; height: auto; aspect-ratio: 1 / 1; }
    .fp-performer-name { font-size: 32px; }
}