/* =========================================================================
   Custom homepage tweaks (loaded after the theme's main styles)
   - Menu flush to the very top on the homepage (top banner removed there)
   - Subscribe box: black box, with the briefing line at the top
   ========================================================================= */

/* --- Stick the top menu flush to the very top on every page -------------- */
/* The old subscribe banner (which reserved the 85px above the nav) is now
   removed site-wide, so the nav sits flush on all pages, not just the home. */
header {
    top: 0;
}

/* --- Subscribe box in the homepage hero (under "Book a demo") ------------ */
/* Black box container. */
.hp-subscribe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 24px 28px;
    background: #000;
    border: 1px solid #A6FF00;              /* brand-green accent border */
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(166,255,0,.12), 0 10px 30px rgba(0,0,0,.35);
    width: max-content;
    max-width: 100%;
}

/* Briefing line moved to the TOP of the box, centered, brand accent. */
.hp-subscribe > div:nth-child(2) {
    order: -1;
    width: 100%;
    margin: 0;
    text-align: center;
    color: #A6FF00;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.3;
}

/* Input + button pill. */
.hp-subscribe > div:first-child {
    order: 0;
    display: flex;
    align-items: center;
    background: #1c1c1c;
    border: 1px solid #3a3a3a;
    border-radius: 999px;
    padding: 4px 4px 4px 18px;
    gap: 8px;
    /* Never let the pill grow past the black box it lives in. */
    max-width: 100%;
}
.hp-subscribe input[type="email"] {
    background: transparent;
    border: 0;
    outline: none;
    color: #fff;
    font-size: 15px;
    /* Preferred 220px (as before), but min-width:0 lets the flex item shrink
       so the pill - and the box around it - fits the viewport instead of
       spilling out of it. */
    width: 220px;
    min-width: 0;
    padding: 8px 0;
}
.hp-subscribe input[type="email"]::placeholder {
    color: #9a9a9a;
}
.hp-subscribe button {
    background: #A6FF00;
    color: #000;
    border: 0;
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease;
}
.hp-subscribe button:hover {
    background: #fff;
}
/* The button keeps its natural size; the input absorbs the shrinking. */
.hp-subscribe button {
    flex: 0 0 auto;
}

/* Response message, kept at the bottom. */
.hp-subscribe #cyv-news-msg {
    order: 1;
    font-size: 13px;
    min-height: 1em;
    color: #fff;
}
/* Don't reserve a blank line at the bottom of the box until there is a
   response message to show (it left the box looking bottom-heavy). */
.hp-subscribe #cyv-news-msg:empty {
    display: none;
}

/* =========================================================================
   Homepage hero on small screens (FEA-21)
   1. The menu is fixed at top:0 and ~90px tall. The hero content is centred
      inside .over-image, so once headline + copy + CTA + subscribe box grow
      taller than the section the first line ("Always on.") ends up behind
      the menu bar. Reserve the menu's height at the top of the hero.
   2. The subscribe box was sized with width:max-content, so on a phone the
      pill (input + button) was wider than the viewport: the box overflowed
      the page and the field/button sat outside the black box. Below 600px
      the box goes full width and the pill stacks.
   ========================================================================= */

/* --- 1. Keep the headline clear of the fixed menu ------------------------ */
/* 900px is where the theme switches the nav to the hamburger. */
@media screen and (max-width: 900px) {
    .page-template-home-page .general_top .over-image {
        padding-top: 120px;   /* menu is 90px tall at top:0 + breathing room */
        padding-bottom: 40px;
    }
}

/* --- 2. Subscribe box: full width, stacked, inside its own box ----------- */
@media screen and (max-width: 600px) {
    .hp-subscribe {
        width: 100%;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        padding: 20px 16px;
        gap: 12px;
    }
    /* Pill becomes a stacked block: field on top, full-width button below. */
    .hp-subscribe > div:first-child {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        border-radius: 18px;
        padding: 10px;
        gap: 10px;
    }
    .hp-subscribe input[type="email"] {
        width: 100%;
        flex: 0 0 auto;
        text-align: center;
        /* >=16px so iOS Safari does not zoom the page when the field is focused. */
        font-size: 16px;
        padding: 10px 12px;
    }
    .hp-subscribe button {
        width: 100%;
        padding: 12px 20px;
    }
    .hp-subscribe > div:nth-child(2) {
        font-size: 15px;
    }
}

/* =========================================================================
   Events page (templates/events-page.php)
   Dark card grid matching the events mockup; brand-green accent (#A6FF00).
   All selectors scoped under .events-page so nothing leaks to other pages.
   ========================================================================= */
.events-page {
    --ev-card-bg: #262626;
    --ev-media-bg: #202020;
    --ev-border: #363636;
    --ev-text: #f5f5f5;
    --ev-text-muted: #a8a8a8;
    --ev-text-faint: #7c7c7c;
    --ev-accent: var(--green, #A6FF00);
    background: #1b1b1b;
    color: var(--ev-text);
}

/* Pin the top menu flush to the very top on the Events page (no hero behind it,
   so the floating rounded pill would otherwise look detached). Solid full-width bar. */
.page-template-events-page header {
    top: 0 !important;
    left: 0;
    width: 100%;
    border-radius: 0;
    background-color: #242424;
}

.events-page .page-header {
    /* Top padding clears the fixed top menu bar (top:0, ~90px tall). */
    padding: 130px 64px 50px;
    max-width: 1240px;
    margin: 0 auto;
}
.events-page .page-header h1 {
    font-size: 44px;
    font-weight: 800;
    margin: 0 0 14px;
}
.events-page .page-header p {
    color: var(--ev-text-muted);
    font-size: 16px;
    max-width: 640px;
    line-height: 1.6;
    margin: 0;
}

.events-page .grid-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 64px 90px;
}
.events-page .card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
}
.events-page .card {
    background: var(--ev-card-bg);
    border: 1px solid var(--ev-border);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.events-page .card-media {
    height: 150px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f2;
    border-bottom: 1px solid var(--ev-border);
    overflow: hidden;
}
.events-page .card-media img {
    max-width: 72%;
    max-height: 62%;
    object-fit: contain;
}
.events-page .card-media.placeholder {
    background:
        radial-gradient(circle at 30% 20%, rgba(166, 255, 0, 0.10), transparent 60%),
        var(--ev-media-bg);
}
.events-page .logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--ev-text-faint);
}
.events-page .logo-placeholder .mark {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px dashed #4a4a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.5px;
    color: var(--ev-text-muted);
}
.events-page .logo-placeholder .label {
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ev-text-faint);
}
.events-page .card-tags {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.events-page .tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 3px;
    background: #000;
    color: var(--ev-accent);
}
.events-page .tag.attending {
    background: var(--ev-accent);
    color: #141414;
}
.events-page .card-body {
    padding: 20px 22px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.events-page .card-date {
    font-size: 13px;
    color: var(--ev-text-faint);
    margin-bottom: 10px;
}
.events-page .card-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 10px;
}
.events-page .card-loc {
    font-size: 13.5px;
    color: var(--ev-text-muted);
    margin-bottom: 16px;
}
.events-page .card-link {
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--ev-accent);
    text-decoration: none;
}
.events-page .card-link:hover {
    text-decoration: underline;
}

@media (max-width: 980px) {
    .events-page .page-header {
        padding: 120px 24px 40px;
    }
    .events-page .grid-wrap {
        padding-left: 24px;
        padding-right: 24px;
    }
    .events-page .card-grid {
        grid-template-columns: 1fr;
    }
}

/* --- "General page" template (.info): Privacy Policy, Terms of Use, Accessibility.
   The rest of the site is black with white text and green headings; the template
   shipped as black-on-white, which read as a different site. Dark it is. CYV-714. */
.info {
    background-color: #000;
    color: #d6d6d6;
    padding-bottom: 40px;
}
.info .in-1240-c,
.info li, .info p, .info ul,
.info table, .info th, .info td {
    color: #d6d6d6;
}
.info h1, .info h2 {
    color: var(--green);
}
.info strong {
    color: #fff;
    font-weight: 600;
}
.info a {
    color: #fff;
}
.info tr:first-child td {
    background-color: rgba(255 255 255 / 10%);
    color: #fff;
}
.info .legal-updated {
    color: #8a8a96;
    font-size: 0.9rem;
    margin-bottom: 24px;
}