/*
    Enchanted Garden Shop
    css/events.css
    Events page-specific overrides.

    shared.css is loaded first on every page and defines the full design
    system (colors, type, spacing, buttons, cards, forms, header/footer).
    Only page-specific adjustments belong here.
*/

/* Swaps the flat forest-deep .page-header background for a photo of
   the shop's exterior, with the same darkening band behind the text
   used on the boutique and contact pages so the heading and subhead
   stay readable over a busy photo. Scoped to this page: .page-header
   stays flat on every other interior page. */
.page-header.photo-header {
    position: relative;
    background-image:
        linear-gradient(
            180deg,
            rgba(10, 14, 8, 0.35) 0%,
            rgba(10, 14, 8, 0.55) 40%,
            rgba(10, 14, 8, 0.55) 100%
        ),
        url("/images/outside-store2.webp");
    background-size: cover;
    background-position: center;
    padding: 72px 24px 60px;
}

.page-header.photo-header h1,
.page-header.photo-header p {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.8), 0 4px 20px rgba(0, 0, 0, 0.6);
}

/* "Local vendors joining us: ..." line inside each Upcoming Events card,
   filled in by js/events.js from /api/public-vendors. Only added to a
   card when that event has at least one approved vendor. */
.card p.event-vendors {
    font-size: 14px;
    margin-top: 14px;
    margin-bottom: 0;
    padding-top: 12px;
    border-top: 1px dashed var(--moss);
}

.card p.event-vendors strong {
    font-family: var(--font-label);
    font-weight: normal;
    color: var(--forest-deep);
}

/* "Which events are you interested in?" checkboxes in the vendor form,
   built by js/events.js from the published events. Same look as the
   add-on class picker on the signup page. The legend matches the other
   form labels, and the checkboxes opt out of the full-width
   .form-field input rule. */
.vendor-event-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.vendor-event-legend {
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.03em;
    color: var(--forest-deep);
    margin-bottom: 2px;
    padding: 0;
}

.vendor-event-list {
    list-style: none;
    margin-top: 10px;
}

.vendor-event-row {
    border-top: 1px solid rgba(53, 71, 44, 0.12);
    padding: 12px 0;
}

.vendor-event-row:first-child {
    border-top: none;
    padding-top: 0;
}

.form-field .vendor-event-row label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
    cursor: pointer;
}

.form-field .vendor-event-row input[type="checkbox"] {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    padding: 0;
    accent-color: var(--gold);
    flex-shrink: 0;
}

.vendor-event-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vendor-event-title {
    font-family: var(--font-label);
    font-size: 15px;
    color: var(--forest-deep);
}

.vendor-event-meta {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0;
    color: var(--ink);
    opacity: 0.75;
}

/* Approved vendors list on each event's own page (functions/events/
   [slug].js), only shown when that event has at least one. */
.event-vendor-list {
    list-style: none;
    margin: var(--space-sm) 0 var(--space-lg);
    text-align: center;
}

.event-vendor-list li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--moss);
}

.event-vendor-list li:last-child {
    border-bottom: none;
}

.event-vendor-list strong {
    font-family: var(--font-label);
    font-weight: normal;
    color: var(--forest-deep);
}

/* Friendly note shown above the vendor form when no events are on the
   calendar yet, in place of the "Which event" dropdown. */
.vendor-no-events-note {
    margin-bottom: 20px;
}

/* "Your documents (optional)" in the vendor form. */
.vendor-docs {
    border: none;
    padding: 0;
    margin: 0 0 20px;
}

.vendor-docs-intro {
    font-size: 14px;
    opacity: 0.75;
    margin-bottom: 14px;
}

.vendor-doc {
    border-top: 1px solid rgba(53, 71, 44, 0.12);
    padding-top: 14px;
}

.vendor-doc .hint {
    margin-bottom: 8px;
}

.form-field .vendor-doc-file {
    padding: 8px;
    background: var(--panel);
}

.vendor-doc-details {
    margin-top: 12px;
}

.vendor-doc-details .form-field {
    margin-bottom: 0;
}

.vendor-doc-details[hidden] {
    display: none;
}