/*
    Vidym's own layer over the Cloudly template.

    <b>Two things only: the palette, and the sign-in link.</b> Everything else — the grid, the type
    scale, the components — is the template's `main.css`, untouched, so the template can be updated
    without unpicking our changes from it.

    Loaded after `main.css` in `_Styles.cshtml`; it overrides, so the order is load-bearing.

    It was inline in the layout, which meant re-sending the same two kilobytes with every page and
    never caching them. As a file the browser fetches it once for the whole site.
*/

/* Teal / Mint — overrides only the theme tokens; layout and type are untouched */
:root {
  --pp-theme: #008476;
  --pp-theme-2: #008D91;
  --pp-tint: #ECFFFC;
  --pp-theme-70: #008476B3;
  --pp-theme-60: #00847699;
  --pp-theme-24: #0084763D;
  --pp-theme2-24: #008D913D;
}

/*
  The sign-in link beside the demo button.

  Sized and spaced to sit with `.pp-theme-btn` rather than to compete with it: the same vertical
  rhythm, no fill, and the brand colour only on hover. On a phone the header collapses to the logo
  and the hamburger, so it hides with the demo button — the mobile menu carries the same link.
*/
/*
    The sign-in button at the foot of every page.

    <b>The template's own button, given room rather than a new look.</b> `pp-theme-btn` is what
    "Book a Demo" wears, so the two read as the same kind of thing — which they are: the two ways
    into Vidym, one for a school considering it and one for a school already using it. Only the
    spacing is ours, because the footer column it sits in was built for contact rows and ends flush.

    Full width on a phone. In a single-column footer a button that hugs its text looks like a stray
    link rather than the end of the column.
*/
.pp-signin-btn {
    margin-top: 26px;
}

@media (max-width: 575px) {
    .pp-signin-btn {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

/*
    The footer must never paint over the page.

    <b>The contact page's cards appeared sliced in half by the footer.</b> `.pp-footer-section` is
    `position: relative; z-index: 9`; the content sections above it are static with no stacking
    context of their own. So the moment the two overlap by even a pixel — which they do while the
    page is still settling, before the cards have their final height — the footer is painted on top
    and the cards are cut off mid-word. It is worst on the contact page because the cards are the
    last thing before the footer, with nothing between them to absorb it.

    Checked with the browser rather than guessed at: `elementsFromPoint` in the middle of a card
    returns the footer first and the card second. Giving the content a higher layer settles it for
    good, and changes no geometry — nothing moves, the footer simply stops winning.
*/
section {
    position: relative;
    z-index: 10;
}

/*
    The footer's dark band must stop at the footer.

    <b>The template paints `.pp-footer-section::before` from 50% above the footer's top edge.</b>
    That is there for one layout: the rounded "Book a demo" card that straddles the boundary between
    the page and the footer, with the dark band behind its lower half. On a page that ends with plain
    text instead — Terms, Privacy, Contact — the same band climbs three hundred pixels into the last
    paragraphs and paints them grey on near-black. The rule above kept the text on top; it could not
    stop the band showing through behind it, because the content section has no background of its own.

    So the band is confined to the footer by default, and released to its full height only when the
    footer immediately follows the demo card, which is the only time anything wants it there.
    `_Layout` renders the footer partial straight after the page body, so on those pages the card and
    the footer are adjacent siblings and the combinator matches; on every other page it does not.
*/
.pp-footer-section::before {
    top: 0;
}

.pp-cta-section + .pp-footer-section::before {
    top: -50%;
}

@media (prefers-reduced-motion: reduce) {
    .wow,
    .animated {
        visibility: visible !important;
        animation: none !important;
    }
}

/*
    Room between the page banner and the pricing panel.

    The template's pricing section is a rounded card inset 40px from each side but flush against
    whatever is above it. On the home page that is another section and the join reads as intended; on
    the pricing page it is the coloured page banner, and the dark card's rounded top ran straight into
    the banner's bottom edge. The gap matches the card's own side inset, so it sits in an even frame.
*/
.pp-breadcrumb-wrapper + .pp-pricing-section {
    margin-top: 40px;
}

@media (max-width: 575px) {
    .pp-breadcrumb-wrapper + .pp-pricing-section {
        margin-top: 15px;
    }
}

/*
    An email address is not a title.

    The footer's contact column capitalises every word, which turned hello@espyindia.com into
    "Hello@Espyindia.Com" — wrong, and harder to copy correctly. Addresses keep the case they are
    written in, wherever the template would title-case them.
*/
a[href^="mailto:"] {
    text-transform: none !important;
}