/*
 * 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);
}

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

/*
 * Layout utilities that used to be inline style="" attributes.
 *
 * The CSP is style-src 'self' with no 'unsafe-inline' - the right setting, and the tempting
 * "fix" for a blocked inline style is to add 'unsafe-inline', which is the wrong one. So the
 * handful of widths and wraps the templates need live here as classes (SR-30). Mail templates
 * keep their inline styles: mail clients need them and no CSP applies there.
 */
.narrow-28 { max-width: 28rem; }
.narrow-30 { max-width: 30rem; }
.narrow-34 { max-width: 34rem; }
.narrow-36 { max-width: 36rem; }
.narrow-40 { max-width: 40rem; }
.narrow-44 { max-width: 44rem; }
.narrow-46 { max-width: 46rem; }
.narrow-52 { max-width: 52rem; }
.narrow-56 { max-width: 56rem; }
.shrinkable { flex-shrink: 1; min-width: 0; }
.nowrap { white-space: nowrap; }
.text-preview { white-space: pre-wrap; background: #f5f5f5; padding: 0.75rem; border-radius: 4px; }
.email-preview { width: 100%; height: 22rem; border: 1px solid #dbdbdb; border-radius: 4px; background: #fff; }
.email-preview-tall { height: 40rem; }

/* Quill (vendored) on the event and page forms - see initEditors in app.js. */
/* Bulma's .textarea sets display:block, which outranks the hidden attribute. */
textarea[data-editor][hidden] {
    display: none !important;
}

.editor-host { background: #fff; }
.editor-host .ql-editor { min-height: 10rem; font-size: 1rem; line-height: 1.6; }
.editor-host .ql-editor h2 { font-size: 1.5rem; margin: 0.75em 0 0.35em; font-weight: 600; }
.editor-host .ql-editor h3 { font-size: 1.25rem; margin: 0.75em 0 0.35em; font-weight: 600; }
.ql-toolbar.ql-snow { border-radius: 4px 4px 0 0; }
.ql-container.ql-snow { border-radius: 0 0 4px 4px; }