/*
 * Art Guild Public UI Foundation
 * ==============================
 *
 * A small, purely-additive set of design tokens and opt-in component
 * classes so public-facing custom pages/forms (starting with Form 20) can
 * share the Art Guild / Member Portal visual language without loading the
 * Member Portal's own stylesheet.
 *
 * Why not just enqueue portal.css or artguild-public.css directly:
 * - portal.css is written for the Portal's own layout/selectors and could
 *   collide with Porto/Gravity Forms/Elementor markup on public pages.
 * - artguild-public.css is loaded through artguild_is_public_art_page()
 *   in functions/portal-functions.php, which DEQUEUES every other style
 *   and script on the page (see artguild_strip_theme_assets()) -- it is
 *   designed for bare "public art" pages with no theme chrome, not for a
 *   page that keeps Porto's header/nav and an actual Gravity Forms form
 *   (which needs GF's own CSS/JS to render and function).
 *
 * So this file is additive only: it never touches `body`, never dequeues
 * anything, and every rule lives under a class a page opts into by using
 * it -- nothing here applies unless a page's own markup uses these classes.
 *
 * Tokens below intentionally reuse the exact same custom property names
 * and values already established in portal.css / artguild-public.css
 * (--artguild-red, --artguild-teal-dark, etc.) rather than inventing a
 * parallel naming scheme, so all three files stay trivially consistent
 * and could be reconciled later without a rename.
 */

@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@500;600;700;800&display=swap');

:root {
    --artguild-red: #ba2025;
    --artguild-teal: #5ba9b6;
    --artguild-teal-dark: #2c8f9c;
    --artguild-teal-darkest: #1b5d66;
    --artguild-navy: #182633;
    --artguild-purple: #4f3d74;
    --artguild-card: #ffffff;
    --artguild-text: #1f2933;
    --artguild-muted: #6b7280;
    --artguild-border: #e7d8c4;
    --artguild-input-border: #cbd5e1;
    --artguild-shadow: 0 12px 30px rgba(24, 38, 51, 0.10);
    --artguild-radius: 20px;
    --artguild-font-heading: "Asap Condensed", Arial, sans-serif;
}

/* =========================================
   Buttons
   Opt-in: .artguild-public-btn (+ a variant + optional -small)
========================================= */

.artguild-public-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--artguild-font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.artguild-public-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/*
 * !important on color/background/border here (and on the modal heading and
 * close button below) is deliberate, not a blind override: Porto's theme
 * CSS styles bare <button> elements and headings with its own accent
 * colors at a cascade position that otherwise wins over a plain class
 * rule of equal specificity, which is why these rendered as generic
 * theme blue/orange instead of Art Guild teal/red before this fix. This
 * matches the exact same defensive pattern artguild-public.css already
 * uses for its own buttons/headings/inputs against the same theme.
 */
.artguild-public-btn-primary {
    background: var(--artguild-teal-dark) !important;
    color: #fff !important;
    border-color: var(--artguild-teal-dark) !important;
}

.artguild-public-btn-primary:hover:not(:disabled),
.artguild-public-btn-primary:focus-visible {
    background: var(--artguild-teal-darkest) !important;
    border-color: var(--artguild-teal-darkest) !important;
}

.artguild-public-btn-secondary {
    background: #eef3f5 !important;
    color: var(--artguild-navy) !important;
    border-color: var(--artguild-input-border) !important;
}

.artguild-public-btn-secondary:hover:not(:disabled),
.artguild-public-btn-secondary:focus-visible {
    background: #dfe8eb !important;
    color: var(--artguild-navy) !important;
}

.artguild-public-btn-small {
    min-height: 34px;
    padding: 7px 14px;
    font-size: 0.85rem;
}

.artguild-public-btn:focus-visible {
    outline: 3px solid rgba(44, 143, 156, 0.35);
    outline-offset: 2px;
}

/* =========================================
   Form Controls
   Opt-in: .artguild-public-field wraps a label + input/select/textarea
========================================= */

.artguild-public-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.artguild-public-field > span,
.artguild-public-field-label {
    font-family: var(--artguild-font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--artguild-navy);
}

.artguild-public-field input,
.artguild-public-field select,
.artguild-public-field textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--artguild-input-border) !important;
    border-radius: 10px;
    background: #ffffff !important;
    color: var(--artguild-text) !important;
    font-size: 0.95rem;
    line-height: 1.4;
    box-sizing: border-box;
    box-shadow: none !important;
}

.artguild-public-field input:focus,
.artguild-public-field select:focus,
.artguild-public-field textarea:focus {
    outline: none !important;
    border-color: var(--artguild-teal-dark) !important;
    box-shadow: 0 0 0 3px rgba(44, 143, 156, 0.15) !important;
}

/*
 * Error state is reserved for a field that has actually failed validation
 * -- a page must add this class itself; nothing here applies it
 * automatically. Qualified with the input/select/textarea + .artguild-public-field
 * ancestor (not just a bare class) so its specificity reliably beats the
 * base border rule above even though both use !important.
 */
.artguild-public-field input.artguild-public-field-invalid,
.artguild-public-field select.artguild-public-field-invalid,
.artguild-public-field textarea.artguild-public-field-invalid {
    border-color: var(--artguild-red) !important;
    box-shadow: 0 0 0 3px rgba(186, 32, 37, 0.12) !important;
}

.artguild-public-field-error-text {
    font-size: 0.82rem;
    color: var(--artguild-red);
}

/* =========================================
   Modal Shell
   Opt-in: .artguild-public-modal-overlay > .artguild-public-modal-shell
========================================= */

.artguild-public-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 25, 35, 0.55);
}

.artguild-public-modal-shell {
    width: min(720px, 95vw);
    /*
     * The overlay (.artguild-public-modal-overlay) has 24px of padding on
     * every side, so 100vh minus that top+bottom padding is the actual
     * available height -- not an arbitrary percentage. The previous
     * 90vh left a needless gap under that real ceiling (e.g. ~40px on a
     * typical 900px-tall desktop viewport), which was tight enough that
     * this modal's own content -- comfortably under the real ceiling --
     * still tripped the auto-overflow into a visible scrollbar on some
     * desktop viewport heights. overflow-y: auto only ever scrolls when
     * content actually exceeds this height; it never forces a scrollbar
     * for content that fits.
     */
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--artguild-card) !important;
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--artguild-shadow);
    box-sizing: border-box;
}

.artguild-public-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eee;
}

.artguild-public-modal-heading {
    margin: 0;
    font-family: var(--artguild-font-heading) !important;
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--artguild-red) !important;
}

.artguild-public-modal-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent !important;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--artguild-navy) !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.artguild-public-modal-close:hover,
.artguild-public-modal-close:focus-visible {
    background: rgba(44, 143, 156, 0.12) !important;
    color: var(--artguild-teal-darkest) !important;
}

.artguild-public-modal-close:focus-visible {
    outline: 3px solid rgba(44, 143, 156, 0.35);
    outline-offset: 2px;
}

.artguild-public-modal-error {
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fdeeee;
    border: 1px solid #efb7b7;
    color: #8b1e1e;
    font-size: 0.9rem;
}

.artguild-public-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

@media (max-width: 640px) {
    .artguild-public-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .artguild-public-modal-shell {
        width: 100%;
        max-height: 92vh;
        border-radius: 14px 14px 0 0;
    }
}