/*
 * Palette taken from the organisation's logo: bright primaries on white.
 * The logo PNG has no alpha channel, so anything sitting behind it must be white
 * or the baked-in background shows as a visible box.
 */
:root {
    --pto-blue:   #1B5FC1;
    --pto-green:  #4CA22F;
    --pto-red:    #E0242B;
    --pto-orange: #F47B20;
    --pto-cyan:   #2BAFC4;
    --pto-purple: #7E3F98;
    --pto-gold:   #F5B920;
    --pto-pink:   #E5197F;

    --pto-ink:      #16233A;
    --pto-ink-soft: #5A6779;
    --pto-tint:     #F3F7FC;

    /* Bulma 1.x is CSS-variable driven, so the theme is a few overrides rather than a rebuild. */
    --bulma-primary: var(--pto-blue);
    --bulma-link: var(--pto-blue);
    --bulma-family-primary: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--pto-ink);
}

main {
    flex: 1 0 auto;
}

/* --- header ------------------------------------------------------------- */

.navbar.is-white {
    /* The logo's baked-in white must sit on white. */
    background-color: #fff;
}

.brand-logo img {
    max-height: 3.25rem;
    width: auto;
}

/* Bulma caps navbar images at 1.75rem; the wordmark is unreadable that small. */
.navbar-item img.is-logo,
.brand-logo img {
    max-height: 3.25rem;
}

.navbar-brand {
    padding: 0.35rem 0;
}

/* --- hero --------------------------------------------------------------- */

.hero-welcome {
    background:
        radial-gradient(circle at 12% 20%, rgba(43, 175, 196, 0.10), transparent 42%),
        radial-gradient(circle at 88% 15%, rgba(245, 185, 32, 0.14), transparent 40%),
        radial-gradient(circle at 70% 90%, rgba(229, 25, 127, 0.08), transparent 45%),
        var(--pto-tint);
}

.tag-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--pto-cyan);
    margin-bottom: 0.75rem;
}

.hero-title {
    color: var(--pto-ink);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.hero-subtitle {
    color: var(--pto-ink-soft);
    max-width: 42rem;
    margin: 0 auto;
}

/* --- content pillars ---------------------------------------------------- */

.pillar {
    background: #fff;
    border-radius: 10px;
    padding: 1.6rem 1.5rem;
    height: 100%;
    border-top: 4px solid var(--pto-blue);
    box-shadow: 0 1px 2px rgba(22, 35, 58, 0.05),
                0 10px 28px -18px rgba(22, 35, 58, 0.35);
}

.pillar--blue   { border-top-color: var(--pto-blue); }
.pillar--green  { border-top-color: var(--pto-green); }
.pillar--orange { border-top-color: var(--pto-orange); }
.pillar--purple { border-top-color: var(--pto-purple); }

.pillar .title {
    color: var(--pto-ink);
    margin-bottom: 0.6rem;
}

.pillar p {
    color: var(--pto-ink-soft);
}

/* --- footer ------------------------------------------------------------- */

.footer {
    background: var(--pto-tint);
    border-top: 3px solid var(--pto-blue);
    flex-shrink: 0;
}

/* --- HTMX ---------------------------------------------------------------- */

/* Anything mid-request dims slightly, so a slow filter reads as "working". */
.htmx-request.htmx-dimmable,
.htmx-request .htmx-dimmable {
    opacity: 0.55;
    transition: opacity 120ms ease-in;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* --- members area ------------------------------------------------------- */

.tile-card {
    display: block;
    height: 100%;
    border-top: 4px solid var(--pto-blue);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.tile-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(22, 35, 58, 0.06),
                0 14px 30px -18px rgba(22, 35, 58, 0.45);
}

.tile-card .title {
    color: var(--pto-ink);
}

.breadcrumb a {
    color: var(--pto-ink-soft);
}

/* --- member list -------------------------------------------------------- */

/* The dues tag is a real button; make it look like one without losing the tag styling. */
.dues-cell form { margin: 0; }

button.tag.is-clickable {
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
}

button.tag.is-clickable:hover { filter: brightness(0.95); }
button.tag.is-clickable:focus-visible { outline: 2px solid var(--pto-blue); outline-offset: 2px; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}