/* ==========================================================================
   Marketing styles
   --------------------------------------------------------------------------
   Loaded ONLY on pages whose ACF `page_type` is "Marketing", plus blog and
   content views (see pp_page_type() in functions.php).

   Loads AFTER main.css, so rules here beat main.css at equal specificity
   without needing !important.

   Nothing here can affect the platform, so this is the safe place for the
   marketing redesign. main.css is still shared by both front ends -- edit it
   only when a change is genuinely meant for both.

   Migrating an existing rule out of main.css: move it here, reload a
   marketing page to confirm it still looks right, then reload a platform
   page to confirm nothing there depended on it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   Ported from the Lovable design. Its CSS used oklch(); these are the sRGB
   equivalents so they sit alongside main.css's existing hex variables.
   -------------------------------------------------------------------------- */
:root {
    --pp-navy:        #121029;  /* oklch(19%   .05  285) */
    --pp-blue:        #0000FF;  /* --brand-blue / --accent */
    --pp-blue-hover:  #0000CC;
    --pp-surface:     #FAFAFD;  /* oklch(98.5% .005 285) */
    --pp-secondary:   #F4F4FA;  /* oklch(96.8% .008 285) */
    --pp-muted-fg:    #5C5C69;  /* oklch(48%   .02  285) */
    --pp-border:      #E4E4EA;  /* oklch(92%   .008 285) */

    --pp-radius:      12px;     /* --radius: .75rem */
    --pp-radius-btn:  8px;

    --pp-font:        'Sora', 'Brockmann', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pp-font-accent: 'Caveat', cursive;

    --pp-shell:       1280px;   /* max content width */
    --pp-gutter:      24px;
}

/* --------------------------------------------------------------------------
   Shared button
   -------------------------------------------------------------------------- */
.pp-mkt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--pp-radius-btn);
    background: var(--pp-blue);
    color: #fff;
    font-family: var(--pp-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    transition: background-color .2s ease, transform .2s ease;
}

.pp-mkt-btn:hover,
.pp-mkt-btn:focus {
    background: var(--pp-blue-hover);
    color: #fff;
    text-decoration: none;
}

/* ==========================================================================
   Header
   Sticky. Dark over the hero, inverts to a light bar once scrolled -- the
   .is-stuck class is toggled by js/marketing-header.js.
   ========================================================================== */
.pp-mkt-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--pp-navy);
    font-family: var(--pp-font);
    transition: background-color .25s ease, box-shadow .25s ease;
}

.pp-mkt-header.is-stuck {
    background: #fff;
    box-shadow: 0 1px 0 var(--pp-border), 0 8px 24px rgba(18, 16, 41, .06);
}

.pp-mkt-header__inner {
    max-width: var(--pp-shell);
    margin: 0 auto;
    padding: 20px var(--pp-gutter);
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Logo -------------------------------------------------------------------- */
.pp-mkt-header__logo {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}

.pp-mkt-header__logo img {
    height: 38px;
    width: auto;
    display: block;
    /* The supplied wordmark is solid brand blue. Knock it out to white on the
       dark bar; show it as-is once the header inverts. Replace both with
       proper SVG variants when they are available. */
    filter: brightness(0) invert(1);
    transition: filter .25s ease;
}

.pp-mkt-header.is-stuck .pp-mkt-header__logo img {
    filter: none;
}

/* Collapse wrapper (nav + actions) ---------------------------------------- */
.pp-mkt-header__collapse {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Primary nav ------------------------------------------------------------- */
.pp-mkt-nav {
    margin-inline: auto;   /* centres the nav between logo and actions */
}

.pp-mkt-nav__list {
    display: flex;
    align-items: center;
    gap: 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-mkt-nav__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-mkt-nav__item a,
.pp-mkt-header__login {
    color: rgba(255, 255, 255, .92);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease, opacity .2s ease;
}

.pp-mkt-nav__item a:hover,
.pp-mkt-header__login:hover {
    color: #fff;
    text-decoration: none;
}

.pp-mkt-header.is-stuck .pp-mkt-nav__item a,
.pp-mkt-header.is-stuck .pp-mkt-header__login {
            color: 
color-mix(in oklab, oklch(19% .05 285) 80%, transparent);
}

.pp-mkt-header.is-stuck .pp-mkt-nav__item a:hover,
.pp-mkt-header.is-stuck .pp-mkt-header__login:hover {
    color: #000;
}

/* Actions ----------------------------------------------------------------- */
.pp-mkt-header__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 22px;
}

/* Signed-in cluster ------------------------------------------------------- */
.pp-mkt-account {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.pp-mkt-header.is-stuck .pp-mkt-account {
    color: var(--pp-navy);
}

.pp-mkt-account__initials {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.pp-mkt-header.is-stuck .pp-mkt-account__initials {
    background: var(--pp-secondary);
}

.pp-mkt-account__meta {
    display: none;
    flex-direction: column;
    line-height: 1.3;
}

.pp-mkt-account__name {
    font-size: 14px;
    font-weight: 600;
}

.pp-mkt-account__role {
    font-size: 12px;
    opacity: .65;
}

.pp-mkt-account__logout {
    display: inline-flex;
    color: inherit;
    opacity: .7;
    transition: opacity .2s ease;
}

.pp-mkt-account__logout:hover {
    opacity: 1;
    color: inherit;
}

@media (min-width: 1200px) {
    .pp-mkt-account__meta { display: flex; }
}

/* Burger ------------------------------------------------------------------ */
.pp-mkt-burger {
    display: none;
    margin-left: auto;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.pp-mkt-burger__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.pp-mkt-burger__bar {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    border-radius: 2px;
    background: #fff;
    transition: transform .25s ease, opacity .25s ease, background-color .25s ease;
}

.pp-mkt-header.is-stuck .pp-mkt-burger__bar {
    background: var(--pp-navy);
}

.pp-mkt-header.is-open .pp-mkt-burger__bar:nth-child(2) {
    transform: translateY(7px) rotate(45deg);
}

.pp-mkt-header.is-open .pp-mkt-burger__bar:nth-child(3) {
    opacity: 0;
}

.pp-mkt-header.is-open .pp-mkt-burger__bar:nth-child(4) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer ----------------------------------------------------------- */
@media (max-width: 991px) {
    .pp-mkt-header__inner {
        position: relative;
        flex-wrap: wrap;
    }

    .pp-mkt-burger { display: flex; }

    .pp-mkt-header__collapse {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px var(--pp-gutter) 24px;
        background: var(--pp-navy);
        box-shadow: 0 16px 32px rgba(18, 16, 41, .18);
    }

    .pp-mkt-header.is-stuck .pp-mkt-header__collapse {
        background: #fff;
    }

    .pp-mkt-header.is-open .pp-mkt-header__collapse {
        display: flex;
    }

    .pp-mkt-nav { margin-inline: 0; }

    .pp-mkt-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .pp-mkt-nav__item a {
        display: block;
        padding: 12px 0;
        font-size: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .pp-mkt-header.is-stuck .pp-mkt-nav__item a {
        border-bottom-color: var(--pp-border);
    }

    .pp-mkt-header__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding-top: 14px;
    }

    .pp-mkt-header__actions .pp-mkt-btn { width: 100%; }

    .pp-mkt-account { justify-content: flex-start; }
    .pp-mkt-account__meta { display: flex; }
}

/* Lock the page behind the open drawer. */
body.pp-mkt-nav-open {
    overflow: hidden;
}

/* ==========================================================================
   Trial template: visitor-currency price
   Prices are billed in GBP; a converted figure is indicative only, so it is
   marked approximate and the real GBP amount is shown beneath.
   ========================================================================== */
.membership-pricing p.price .price-approx {
    color: var(--pp-muted-fg);
    font-size: 25px;
    font-weight: 500;
    line-height: normal;
    margin-right: 2px;
}

.membership-pricing p.price-billed {
    margin: 6px 0 0;
    color: var(--pp-muted-fg);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.pp-mkt-footer {
    background: var(--pp-navy);
    color: #fff;
    font-family: var(--pp-font);
    padding: 90px 0;
}

.pp-mkt-footer__inner {
    max-width: var(--pp-shell);
    margin: 0 auto;
    padding: 0 var(--pp-gutter);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
    gap: 64px;
}

/* Brand column ------------------------------------------------------------ */
.pp-mkt-footer__logo {
    display: inline-block;
    line-height: 0;
}

.pp-mkt-footer__logo img {
    height: 35px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}
.pp-mkt-footer__brand {
    max-width: 396px;
}

.pp-mkt-footer__blurb {
    margin: 26px 0 32px;
    max-width: 38ch;
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    line-height: 1.65;
}

/* Link columns ------------------------------------------------------------ */
.pp-mkt-footer__cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.pp-mkt-footer__heading {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, .55);
    font-family: var(--pp-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pp-mkt-footer__list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-mkt-footer__list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-mkt-footer__list a {
    color: rgba(255, 255, 255, .88);
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;
    transition: color .2s ease;
}

.pp-mkt-footer__list a:hover {
    color: #fff;
    text-decoration: none;
}

/* Legal row --------------------------------------------------------------- */
.pp-mkt-footer__legal {
    max-width: var(--pp-shell);
    margin: 56px auto 0;
    padding: 24px var(--pp-gutter) 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.pp-mkt-footer__copy {
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
}

.pp-mkt-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-mkt-footer__legal-links li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-mkt-footer__legal-links a {
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
    text-decoration: none;
    transition: color .2s ease;
}

.pp-mkt-footer__legal-links a:hover {
    color: #fff;
    text-decoration: none;
}

.pp-mkt-footer__legal-links a.is-muted {
    color: rgba(255, 255, 255, .3);
}

/* Footer responsive ------------------------------------------------------- */
@media (max-width: 1099px) {
    .pp-mkt-footer__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }
}

@media (max-width: 767px) {
    .pp-mkt-footer {
        padding: 56px 0 28px;
    }

    .pp-mkt-footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 24px;
    }

    .pp-mkt-footer__legal {
        margin-top: 40px;
        justify-content: flex-start;
    }
}

@media (max-width: 479px) {
    .pp-mkt-footer__cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .pp-mkt-footer__legal-links {
        gap: 18px;
    }
}