/* ==========================================================================
   Public pages.

   The tenant landing page, the event page and the platform page. Loaded
   after style.css and before the tenant's branding <style> block.

   THE ONE RULE: no literal colour, font or radius below this comment.
   Everything is a var() defined in style.css, which is what makes a
   tenant's branding row theme these pages for free -- the same settings
   that theme the admin screens. A hex code here is a colour that stays
   La Voladora's blue on every other organization's page.

   This replaces assets/styles.css from the static prototype. That file
   carried its own palette (--accent, --accent2, --ink, --paper...) and a
   second set of Google Fonts, which would have meant two design systems
   in one product and a tenant configuring its colours twice. The
   prototype's layout and proportions are kept; its colour system is
   dropped in favour of the one that already exists.

   Class prefix `p-` so nothing here can collide with Bootstrap, which
   the admin templates load and these do not.
   ========================================================================== */


body.public {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}


/* --------------------------------------------------------------------------
   Reset the admin chrome off the bare elements.

   style.css styles `header` and `footer` as ELEMENT selectors -- dark
   navy bar, white text, flex, padding -- because in the admin layout
   those elements are the app chrome. The public pages use the same tags
   for a hero and a footer band, so without this they inherit that
   chrome: the hero renders as a dark navy box, and the display-font
   title, which is var(--primary-dark), becomes dark-on-dark and
   effectively invisible.

   That is not hypothetical -- it is what the first render of these
   pages looked like. Resetting here rather than renaming the tags keeps
   the markup semantic, and scoping to body.public means the admin
   screens are untouched.

   Deliberately narrow: only the two element selectors are neutralised.
   style.css's `header h1` (0,0,0,2) and `footer a` (0,0,0,2) already
   lose to the `.p-` classes below on specificity, so resetting those
   too would be a rule that exists to fight a rule that never fired --
   and it would outrank .p-hero-title and undo the display font.
   -------------------------------------------------------------------------- */

body.public header,
body.public footer {
    display: block;
    padding: 0;
    background: transparent;
    color: inherit;
}

.p-wrap {
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: 24px;
}

.p-narrow {
    max-width: 680px;
}


/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.p-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.p-nav-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 68px;
}

.p-nav-spacer {
    flex: 1;
}

.p-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
}

.p-brand-logo {
    height: 36px;
    width: auto;
}

.p-brand-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
}

.p-nav-actions {
    display: flex;
    gap: 10px;
}


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

.p-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.p-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--focus);
}

.p-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.p-btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.p-btn-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}

.p-btn-ghost:hover {
    border-color: var(--primary);
}

/* Pay by card.
 *
 * Outlined rather than filled, so it reads as the alternative to the
 * primary action rather than competing with it. Which of the two is
 * "primary" is the organizer's business, not the platform's: a venue that
 * takes cash at the door and a promoter selling out online want opposite
 * emphasis, and until that is a setting, the reserve button keeps the
 * emphasis it already had.
 */
.p-btn-card {
    background: transparent;
    border-color: var(--primary);
    color: var(--primary);
    margin-top: 10px;
}

.p-btn-card:hover {
    background: var(--primary);
    color: var(--surface);
}

.p-btn-lg {
    padding: 14px 26px;
    font-size: 17px;
}

.p-btn-block {
    width: 100%;
    margin-top: 20px;
}


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.p-hero {
    padding: 72px 0 44px;
    text-align: center;
}

.p-hero-logo {
    max-height: 120px;
    width: auto;
    margin-bottom: 20px;
}

.p-hero-title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: clamp(40px, 7vw, 72px);
    font-weight: 400;
    line-height: 1.05;
    color: var(--primary-dark);
}

.p-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 5px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.p-lede {
    max-width: 620px;
    margin: 0 auto;
    font-size: 18px;
    opacity: 0.78;
}

.p-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 30px;
}


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

.p-section {
    padding: 40px 0 72px;
}

.p-section-head {
    margin-bottom: 26px;
}

.p-section-head h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.p-empty {
    padding: 56px 0;
    text-align: center;
}


/* --------------------------------------------------------------------------
   Event list
   -------------------------------------------------------------------------- */

.p-events {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.p-event {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 22px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.p-event-body {
    flex: 1;
    min-width: 0;
}

.p-event-date {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
}

.p-event-title {
    margin: 4px 0 6px;
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 700;
}

.p-event-blurb {
    margin: 0 0 8px;
    font-size: 15px;
    opacity: 0.75;
}

.p-event-venue {
    font-size: 14px;
    opacity: 0.62;
}

.p-event-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.p-event-price {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .p-event {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .p-event-cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}


/* --------------------------------------------------------------------------
   Event detail
   -------------------------------------------------------------------------- */

.p-detail {
    padding: 56px 0 28px;
}

.p-detail-title {
    margin: 6px 0 16px;
    font-family: var(--font-heading);
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.p-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.p-detail-blurb {
    margin-top: 20px;
    font-size: 17px;
    opacity: 0.82;
}

.p-chip {
    padding: 5px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
}

.p-chip-price {
    border-color: var(--primary);
    color: var(--primary);
}


/* --------------------------------------------------------------------------
   Panels and forms
   -------------------------------------------------------------------------- */

.p-panel {
    margin-bottom: 72px;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.p-panel h1,
.p-panel h2 {
    margin: 0 0 18px;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
}

.p-panel-quiet {
    text-align: center;
    opacity: 0.85;
}

.p-panel-success {
    margin-top: 56px;
    border-color: var(--primary);
}

.p-field {
    margin-bottom: 16px;
}

.p-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.p-optional {
    font-weight: 400;
    opacity: 0.55;
}

.p-input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--background);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;   /* 16px or iOS Safari zooms the page on focus */
}

.p-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--focus);
}

.p-field-row {
    display: flex;
    gap: 14px;
}

.p-field-row .p-field {
    flex: 1;
}

/* Honeypot.
   Off-screen rather than display:none -- some bots skip inputs whose
   computed style is none, and this one is meant to be filled in. It
   stays out of the tab order via tabindex="-1" in the template. */
.p-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.p-error {
    margin: 0 0 16px;
    padding: 11px 14px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--background);
    font-size: 15px;
    font-weight: 600;
}

.p-fineprint {
    margin: 18px 0 0;
    font-size: 13px;
    opacity: 0.65;
}

.p-flashes {
    margin: 20px 0 0;
    padding: 12px 18px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}


/* --------------------------------------------------------------------------
   Order confirmation
   -------------------------------------------------------------------------- */

.p-reference {
    margin: -8px 0 20px;
    font-size: 17px;
}

.p-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 20px;
    margin: 0;
    font-size: 15px;
}

.p-summary dt {
    font-weight: 600;
    opacity: 0.6;
}

.p-summary dd {
    margin: 0;
}


/* --------------------------------------------------------------------------
   Ticket downloads

   The page a buyer reaches from the link in their email. The image is a
   3.5 x 5.5 inch card rendered at 300 DPI, so it is 1050px wide and would
   otherwise overflow every phone it is opened on -- which is most of
   them, since this page exists to be opened outside a venue.
   -------------------------------------------------------------------------- */

.p-ticket-image {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto 18px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}


/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.p-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.p-card {
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.p-card h3 {
    margin: 12px 0 8px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
}

.p-card p {
    margin: 0;
    font-size: 15px;
    opacity: 0.75;
}

.p-card code {
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--background);
    font-size: 13px;
}

.p-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--surface);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
}


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

.p-footer {
    padding: 28px 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
    font-size: 14px;
}

.p-footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}

.p-footer a {
    color: var(--text);
    opacity: 0.7;
    text-decoration: none;
}

.p-footer a:hover {
    opacity: 1;
}

.p-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

/* The organizers' way in. Quiet on purpose -- see the comment in
   templates/public/base.html. */
.p-staff-link {
    font-weight: 600;
}

/* Platform legal links, below the tenant's own footer row -- see the
   comment in templates/public/base.html for why the two rows stay
   separate. */
.p-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}