/* ─────────────────────────────────────────────────────────────────────────────
   public.css — the public face of positiveelectrics.com.au

   Loaded ONLY by the anonymous landing page (Views/Home/Index.cshtml). It is
   deliberately separate from site.css: site.css is the internal connector's
   thin layer over Bootstrap, this file is the Positive Electrics brand and
   loads no framework at all.

   Colours and type are Positive Electrics Brand Guidelines v1.0 (Aug 2026).
   Do not introduce off-palette values here.
   ──────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Roboto:wght@400;500&display=swap');

:root {
    --pe-circuit: #053332;
    --pe-signal: #C7F367;
    --pe-insulator: #FFFFFF;
    --pe-current: #66934D;
    --pe-steel: #C8D4C4;

    --pe-font-head: 'Space Grotesk', Arial, 'Helvetica Neue', sans-serif;
    --pe-font-body: 'Roboto', Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.pe-public {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--pe-circuit);
    color: var(--pe-insulator);
    font-family: var(--pe-font-body);
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-align: left;          /* brand: never centred, never justified */
}

.pe-shell {
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    padding: 3rem 1.75rem 2rem;
    flex: 1 0 auto;
}

/* ── Logo ────────────────────────────────────────────────────────────────────
   Circuit background takes the Signal logo. Used as supplied — not recoloured,
   not stretched. The margin below carries the required clear space (the width
   of the P symbol, roughly 18% of the primary lockup's width).                */
.pe-logo {
    display: block;
    width: 15rem;
    max-width: 62%;
    height: auto;
    margin-bottom: 3.25rem;
}

/* ── Accent label ─────────────────────────────────────────────────────────── */
.pe-label {
    font-family: var(--pe-font-head);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pe-signal);
    margin: 0 0 0.75rem;
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
.pe-h1 {
    font-family: var(--pe-font-head);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: var(--pe-insulator);
    font-size: clamp(2.1rem, 6.5vw, 3.6rem);
    max-width: 18ch;
    margin: 0 0 1.5rem;
}

.pe-lede {
    max-width: 46ch;
    font-size: 1.0625rem;
    margin: 0 0 1rem;
    color: var(--pe-insulator);
}

.pe-lede:last-of-type { margin-bottom: 0; }

.pe-rule {
    height: 3px;
    border: 0;
    background: var(--pe-signal);
    margin: 2.75rem 0;
    max-width: 46ch;
}

/* ── Contact block ────────────────────────────────────────────────────────── */
.pe-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.75rem 2.5rem;
    max-width: 52rem;
    margin: 0;
}

.pe-contact dt {
    font-family: var(--pe-font-head);
    font-weight: 500;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pe-signal);
    margin-bottom: 0.4rem;
}

.pe-contact dd {
    margin: 0;
    font-size: 1.0625rem;
}

.pe-contact a {
    color: var(--pe-insulator);
    text-decoration: none;
    border-bottom: 2px solid var(--pe-signal);
    padding-bottom: 1px;
}

.pe-contact a:hover,
.pe-contact a:focus-visible {
    color: var(--pe-signal);
}

.pe-contact address {
    font-style: normal;
    line-height: 1.4;
}

/* ── Sectors ──────────────────────────────────────────────────────────────── */
.pe-sectors {
    font-family: var(--pe-font-head);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    color: var(--pe-steel);
    margin: 3.25rem 0 0;
}

/* ── Long-form legal copy ─────────────────────────────────────────────────────
   The privacy policy and the terms of service. Same palette, same type, but the
   landing page's display measure does not work for a document: .pe-h1 is capped
   at 18ch and .pe-lede at 46ch because they are a statement, and a policy read
   at 46 characters a line is a column of confetti.

   Body copy is set at a comfortable reading measure and NOT reversed out at full
   contrast — pure white on Circuit is right for three lines of a holding page and
   fatiguing for three screens of a policy, so the prose sits a shade back and the
   headings keep the full white.                                                */
/* A document's intro and rule take the document's measure, not the landing
   page's. A 46ch lede above a 44rem body reads as a mistake — the eye sees the
   first paragraph stop short of everything under it. */
.pe-lede.is-wide,
.pe-rule.is-wide { max-width: 44rem; }

.pe-prose {
    max-width: 44rem;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

.pe-prose h2 {
    font-family: var(--pe-font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    line-height: 1.1;
    font-size: 1.05rem;
    color: var(--pe-insulator);
    margin: 2.5rem 0 0.6rem;
}

.pe-prose h2:first-child { margin-top: 0; }

.pe-prose p { margin: 0 0 1rem; }

.pe-prose ul {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
}

.pe-prose li { margin-bottom: 0.45rem; }

/* Signal for the marker, so a list reads as a list at a glance without the
   bullets competing with the text. */
.pe-prose li::marker { color: var(--pe-signal); }

.pe-prose strong { color: var(--pe-insulator); font-weight: 500; }

.pe-prose a {
    color: var(--pe-insulator);
    text-decoration: none;
    border-bottom: 2px solid var(--pe-signal);
    padding-bottom: 1px;
}

.pe-prose a:hover,
.pe-prose a:focus-visible { color: var(--pe-signal); }

.pe-updated {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(200, 212, 196, 0.28);
    font-size: 0.8125rem;
    color: var(--pe-steel);
}

/* ── Callout ──────────────────────────────────────────────────────────────────
   One box on the terms page, for the one thing somebody arriving there actually
   wants: who to email for the real terms of trade. A Signal rule down the edge
   rather than a filled panel — the guidelines put Signal on accents, not on
   areas.                                                                       */
.pe-callout {
    max-width: 44rem;
    border-left: 3px solid var(--pe-signal);
    background: rgba(255, 255, 255, 0.05);
    padding: 1.25rem 1.5rem 0.4rem;
    margin: 0 0 2.75rem;
}

.pe-callout-label {
    font-family: var(--pe-font-head);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pe-signal);
    margin: 0 0 0.6rem;
}

.pe-callout p {
    margin: 0 0 0.9rem;
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

.pe-callout strong { color: var(--pe-insulator); font-weight: 500; }

.pe-callout a {
    color: var(--pe-insulator);
    text-decoration: none;
    border-bottom: 2px solid var(--pe-signal);
    padding-bottom: 1px;
}

.pe-callout a:hover,
.pe-callout a:focus-visible { color: var(--pe-signal); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.pe-footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(200, 212, 196, 0.28);
    padding: 1.25rem 1.75rem 2rem;
}

.pe-footer p {
    max-width: 62rem;
    margin: 0 auto;
    font-size: 0.8125rem;
    color: var(--pe-steel);
}

.pe-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin-top: 0.5rem !important;
}

.pe-footer-links a {
    color: var(--pe-steel);
    text-decoration: none;
    border-bottom: 1px solid rgba(199, 243, 103, 0.45);
    padding-bottom: 1px;
}

.pe-footer-links a:hover,
.pe-footer-links a:focus-visible {
    color: var(--pe-signal);
    border-bottom-color: var(--pe-signal);
}

/* The logo is a link now that there is somewhere to go back to. It must not
   pick up link decoration. */
.pe-logo-link {
    display: inline-block;
    text-decoration: none;
    border: 0;
}

@media (max-width: 30rem) {
    .pe-shell { padding-top: 2.25rem; }
    .pe-logo { margin-bottom: 2.5rem; }
    .pe-rule { margin: 2.25rem 0; }
}