/* coregis.nz marketing site - site.css
   MagPI brand (Property Intelligence). Palette and type are the brand-pack values:
   Deep Navy #0B1F3A, Royal Blue #003A8C, Gold #F5A623, White #FFFFFF; Montserrat
   SemiBold (600) for headings/buttons, Medium (500) for body and taglines.
   Montserrat is SELF-HOSTED from assets/fonts/ - no Google Fonts CDN link.
   Straight quotes and hyphens only. */

:root {
    /* MagPI brand palette - exact brand-pack values. */
    --mp-navy:       #0B1F3A;   /* Deep Navy  - header/footer ground, ink */
    --mp-royal:      #003A8C;   /* Royal Blue - PRIMARY actions, links */
    --mp-royal-dark: #002a66;   /* primary hover / pressed */
    --mp-gold:       #F5A623;   /* Gold       - SECONDARY / premium actions */
    --mp-gold-dark:  #d98d10;   /* gold hover / pressed */
    --mp-white:      #FFFFFF;

    /* Derived neutrals (tints of the brand navy - no off-palette hues). */
    --mp-ink:        var(--mp-navy);
    --mp-muted:      #5b6b82;
    --mp-bg:         #f4f7fb;
    --mp-bg-card:    #ffffff;
    --mp-border:     #d5dfec;
    --mp-scroll-track: #e4ebf5;  /* pale navy tint - quiet against the page, not stark white */

    /* Square corners everywhere - the brand has no rounded pills. */
    --mp-radius: 0;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    min-height: 100vh; display: flex; flex-direction: column;
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 500;                      /* Medium - brand body weight */
    background: var(--mp-bg); color: var(--mp-ink);
    line-height: 1.5;
}

/* ── Self-hosted Montserrat (SIL OFL). Served from this site's own asset tree. ── */
@font-face {
    font-family: "Montserrat";
    font-style: normal; font-weight: 500; font-display: swap;
    src: url("fonts/montserrat-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Montserrat";
    font-style: normal; font-weight: 600; font-display: swap;
    src: url("fonts/montserrat-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Montserrat";
    font-style: normal; font-weight: 700; font-display: swap;
    src: url("fonts/montserrat-latin-700-normal.woff2") format("woff2");
}

/* ══ SQUARE CORNERS - single blanket rule covering EVERY button, nav chip, card,
      input and control on the site. The brand uses no rounded corners at all. ══ */
.cg-btn, .mp-btn, .mp-login,
.mp-nav a, .cg-foot-links a,
.cg-card, .cg-step, .cg-form-msg,
.cg-input, .cg-select, .cg-textarea, .cg-gate-input,
button, input, select, textarea, a.cg-btn {
    border-radius: 0;
}

/* ══ SCROLLBARS - on-brand, square, thin ═══════════════════════════════════════
   Track  : --mp-scroll-track #E4EBF5 (pale navy tint)
   Thumb  : --mp-royal        #003A8C  (8.82:1 against the track - well past the 3:1
                                        WCAG 1.4.11 floor for a UI component)
   Hover  : --mp-gold         #F5A623, carrying a 1px navy inset ring. Gold on a pale
            track is only 1.69:1 on its own, so the ring (navy on gold, 8.15:1) - not
            the fill - is what keeps the thumb's edge defined on hover. Not colour alone.
   Active : --mp-gold-dark    #D98D10

   The 2px track-coloured border + background-clip:padding-box paints a THIN 8px bar
   inside a 12px gutter. The border belongs to the thumb element, so the draggable hit
   area stays the full 12px - it looks minimal without becoming hard to grab.

   These selectors are deliberately kept OUT of the shared square-corners rule above:
   an unknown pseudo-element invalidates an ENTIRE comma-separated selector list, so
   folding ::-webkit-scrollbar-thumb into that list would kill border-radius:0 on every
   button in Firefox. Hence the separate block and its own border-radius:0.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Firefox - no ::-webkit pseudo-elements, and no hover state for scrollbars. */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--mp-royal) var(--mp-scroll-track);
}

/* WebKit / Blink (Chrome, Edge, Safari). Unprefixed, so this also covers internal
   scrollers such as the form textareas on Contact and Commercial. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--mp-scroll-track); }
::-webkit-scrollbar-thumb {
    background: var(--mp-royal);
    border-radius: 0;                                  /* square, matching the buttons */
    border: 2px solid var(--mp-scroll-track);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--mp-gold);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--mp-navy);        /* keeps the edge readable on gold */
}
::-webkit-scrollbar-thumb:active {
    background: var(--mp-gold-dark);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--mp-navy);
}
::-webkit-scrollbar-corner { background: var(--mp-scroll-track); }

/* ══ HEADER ══════════════════════════════════════════════════════════════════
   The header block starts at the VERY TOP of the page. Two full-viewport-width
   bands, no side gaps at any size, plus the login button floating over them:
     1. .mp-topstrip - "My Login", OUT OF FLOW (absolute, top-left) so it does not
                       push the header down and leave dead space above the logo
     2. .mp-swirl    - gold swirl stretched edge to edge, reversed lockup centred
     3. .mp-nav      - deep navy nav band, square buttons
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. "My Login" - taken OUT OF THE NORMAL FLOW. It is absolutely positioned at the
      top-left INSIDE the header, so the swirl is the first in-flow band and the whole
      header rises to the top of the page. Shrink-wrapped (auto width, not full bleed)
      so it only ever occupies the top-left corner and can never cross the centred
      logo or the nav. */
.mp-topstrip {
    position: absolute; top: 0; left: 0; z-index: 5;
    width: auto;
    padding: 10px 16px;
    display: flex; align-items: center; justify-content: flex-start;
}

/* 2. Gold swirl band - STRETCHED edge to edge (100% x 100%, never inset, no gaps). */
.mp-header { width: 100%; position: relative; }   /* positioning context for .mp-topstrip */
.mp-swirl {
    width: 100%;
    /* The flow PNG is RGBA and only partly opaque (alpha 1..187) - it is an OVERLAY, not a
       solid image. This navy ground is what it composites against, so it is load-bearing,
       not just a no-flash fallback. Remove it and the band goes pale and the reversed
       (white) logo stops reading. */
    background-color: var(--mp-navy);
    background-image: url("brand/MagPI_navy_gold_flow_4000_600dpi.png");
    background-size: 100% 100%;              /* STRETCH to full width - no side gaps */
    background-position: center;
    background-repeat: no-repeat;
    display: flex; align-items: center; justify-content: center;
    padding: 26px 20px;
    min-height: clamp(150px, 20vw, 250px);
}
/* Reversed lockup (white Mag + gold PI) - correct file for this dark/swirl ground.
   Never renders narrower than 180px, so the full lockup stays above the 120px
   brand minimum at every breakpoint (no wordmark swap needed here). */
.mp-logo {
    display: block;
    width: clamp(180px, 32vw, 420px);
    height: auto;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.mp-header--home .mp-swirl { min-height: clamp(190px, 26vw, 330px); }
.mp-header--home .mp-logo  { width: clamp(220px, 40vw, 520px); }

/* 3. Navy nav band - square buttons, Montserrat SemiBold. */
.mp-nav {
    background: var(--mp-navy);
    width: 100%;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0; padding: 0 12px 0;
}
.mp-nav a {
    color: var(--mp-white); text-decoration: none;
    font-weight: 600; font-size: 15px; letter-spacing: .3px;
    padding: 13px 20px;
    border-bottom: 3px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mp-nav a:hover, .mp-nav a:focus-visible { background: var(--mp-royal); color: var(--mp-white); }
.mp-nav a[aria-current="page"] { background: var(--mp-royal); border-bottom-color: var(--mp-gold); }

/* ── Buttons ─────────────────────────────────────────────────────────────────
   Hierarchy: PRIMARY = Royal Blue (the retail report, the main action).
              GOLD    = the secondary / premium route (commercial accounts).
              OUTLINE = chrome (My Login), gold on the navy strip. ──────────── */
.cg-btn, .mp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 12px 22px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
    border: 1px solid transparent;
    background: #e8eef7; color: var(--mp-ink);
    transition: background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cg-btn--primary { background: var(--mp-royal); color: var(--mp-white); border-color: var(--mp-royal); }
.cg-btn--primary:hover, .cg-btn--primary:focus-visible {
    background: var(--mp-royal-dark); color: var(--mp-white);
    transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,58,140,.32);
}
/* Gold - the commercial route. Navy label for contrast on gold. */
.cg-btn--gold, .cg-btn--accent { background: var(--mp-gold); color: var(--mp-navy); border-color: var(--mp-gold); }
.cg-btn--gold:hover, .cg-btn--gold:focus-visible,
.cg-btn--accent:hover, .cg-btn--accent:focus-visible {
    background: var(--mp-gold-dark); color: var(--mp-navy);
    transform: translateY(-2px); box-shadow: 0 10px 24px rgba(245,166,35,.34);
}
.cg-btn--ghost { background: var(--mp-white); color: var(--mp-royal); border-color: var(--mp-royal); }
.cg-btn--ghost:hover, .cg-btn--ghost:focus-visible { background: var(--mp-royal); color: var(--mp-white); }
.cg-btn--lg { padding: 14px 26px; font-size: 16px; }
.cg-btn[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }

/* "My Login" - square gold-outline button, top-left, behaviour/target unchanged.
   It now floats over the swirl rather than sitting on a solid navy strip, so it carries
   its own deep-navy fill (the same colour the strip gave it) to stay legible wherever a
   gold flow line passes underneath. Still square, still on-palette. */
.mp-btn--outline {
    background: var(--mp-navy); color: var(--mp-gold);
    border: 1px solid var(--mp-gold);
    padding: 8px 18px; font-size: 14px; font-weight: 600; letter-spacing: .3px;
}
.mp-btn--outline:hover, .mp-btn--outline:focus-visible { background: var(--mp-gold); color: var(--mp-navy); }

/* ── Main content ── */
main { flex: 1 1 auto; width: 100%; max-width: 1000px; margin: 0 auto; padding: 34px 20px 40px; }
.cg-narrow { max-width: 760px; }
h1.cg-h1 { font-size: clamp(24px, 4vw, 32px); font-weight: 600; margin: 0 0 12px; color: var(--mp-navy); }
h2.cg-h2 { font-size: 22px; font-weight: 600; margin: 30px 0 10px; color: var(--mp-navy); }
h3.cg-h3 { font-size: 17px; font-weight: 600; margin: 18px 0 6px; color: var(--mp-navy); }
.cg-lede { font-size: 17px; color: var(--mp-ink); margin: 0 0 18px; }
p { margin: 0 0 14px; }
/* Inline text links (excludes .cg-btn buttons): no underline, bolder, hover shifts
   royal blue -> gold. Consistent treatment on every page. */
main a:not(.cg-btn) {
    color: var(--mp-royal); text-decoration: none;
    font-weight: 600; font-size: 1.06em;
    transition: color .15s ease;
}
main a:not(.cg-btn):hover, main a:not(.cg-btn):focus-visible { color: var(--mp-gold-dark); text-decoration: none; }
.cg-section { margin: 30px 0; }
.cg-muted { color: var(--mp-muted); }

/* Card. */
.cg-card {
    background: var(--mp-bg-card); border: 1px solid var(--mp-border);
    padding: 26px;
    box-shadow: 0 6px 24px rgba(11,31,58,.06);
}

/* Two product routes side by side (home). */
.cg-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 8px 0 6px; }
.cg-route { display: flex; flex-direction: column; }
.cg-route h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; color: var(--mp-navy); }
.cg-route-kicker { font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--mp-royal); margin: 0 0 8px; }
.cg-route--commercial .cg-route-kicker { color: var(--mp-gold-dark); }
.cg-route--retail { border-top: 4px solid var(--mp-royal); }
.cg-route--commercial { border-top: 4px solid var(--mp-gold); }
.cg-route p { font-size: 15px; }
.cg-route .cg-btn { margin-top: auto; align-self: flex-start; }

/* Step / feature rows. */
.cg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 10px 0; }
.cg-step { background: var(--mp-bg-card); border: 1px solid var(--mp-border); padding: 18px; }
.cg-step-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    background: var(--mp-royal); color: var(--mp-white); font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.cg-step h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--mp-navy); }
.cg-step p { margin: 0; font-size: 14px; color: var(--mp-muted); }

.cg-list { margin: 0 0 14px; padding-left: 20px; }
.cg-list li { margin: 0 0 8px; }

/* Contact rows. */
.cg-contact-row { margin: 0 0 10px; font-size: 16px; }
.cg-contact-row strong { color: var(--mp-navy); }

/* Terms page. */
.cg-terms { font-size: 15px; }
.cg-terms h2 { font-size: 18px; font-weight: 600; margin: 24px 0 8px; color: var(--mp-navy); }
.cg-terms ul { padding-left: 20px; }
.cg-terms li { margin: 0 0 6px; }
.cg-terms .cg-effective { font-weight: 600; color: var(--mp-navy); }
.cg-terms .cg-defn { margin: 0 0 6px; }

/* ── Footer (deep navy ground -> reversed lockup) ── */
.cg-foot { background: var(--mp-navy); color: #c6d2e2; margin-top: 20px; }
.cg-foot-inner { max-width: 1000px; margin: 0 auto; padding: 30px 20px; text-align: center; }
/* 150px wide keeps the FULL lockup above the 120px brand minimum. */
.cg-foot-logo { width: 150px; height: auto; margin: 0 auto 16px; display: block; }
.cg-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; }
.cg-foot-links a {
    color: var(--mp-white); text-decoration: none; font-weight: 600; font-size: 14px;
    padding: 9px 16px; border: 1px solid rgba(255,255,255,.28);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cg-foot-links a:hover, .cg-foot-links a:focus-visible { background: var(--mp-royal); border-color: var(--mp-royal); color: var(--mp-white); }
.cg-foot-lead { max-width: 620px; margin: 0 auto 12px; font-size: 13px; color: #a9b8cb; line-height: 1.55; }
.cg-foot-copy { font-size: 12px; color: #8b9cb2; margin: 0; }

/* ── PIN gate (whole-site pre-launch wall) ──────────────────────────────────
   Entirely blank screen, ONE unlabelled input, nothing else. */
.cg-gate-body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; background: var(--mp-bg); }
.cg-gate { margin: 0; }
.cg-gate-input {
    width: 220px; max-width: 80vw; text-align: center; letter-spacing: 6px;
    padding: 14px 16px; font-size: 20px;
    border: 1px solid var(--mp-border); background: #fff; color: var(--mp-ink);
    box-shadow: 0 6px 24px rgba(11,31,58,.08); outline: none;
}
.cg-gate-input:focus { border-color: var(--mp-royal); box-shadow: 0 0 0 3px rgba(0,58,140,.18); }

/* ── Enquiry / sign-up forms (contact + commercial) ─────────────────────────── */
.cg-form { display: grid; gap: 16px; margin: 6px 0 4px; }
.cg-form-fields { display: grid; gap: 16px; }
.cg-form-row { display: grid; gap: 16px; }
@media (min-width: 620px) { .cg-form-row.cg-form-row--2 { grid-template-columns: 1fr 1fr; } }
.cg-field { display: flex; flex-direction: column; gap: 6px; }
.cg-label { font-size: 13px; font-weight: 600; color: var(--mp-navy); }
.cg-req { color: var(--mp-royal); }
.cg-input, .cg-select, .cg-textarea {
    width: 100%; box-sizing: border-box; padding: 11px 14px; font: inherit; font-size: 15px;
    color: var(--mp-ink); background: #fff; border: 1px solid var(--mp-border);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cg-textarea { min-height: 120px; resize: vertical; }
.cg-input:focus, .cg-select:focus, .cg-textarea:focus { border-color: var(--mp-royal); box-shadow: 0 0 0 3px rgba(0,58,140,.16); }
/* Inline validation: invalid field ring + per-field message, no native dialogs. */
.cg-field.is-invalid .cg-input,
.cg-field.is-invalid .cg-select,
.cg-field.is-invalid .cg-textarea { border-color: #d64545; box-shadow: 0 0 0 3px rgba(214,69,69,.14); }
.cg-field-err { font-size: 12.5px; font-weight: 600; color: #b3261e; min-height: 0; display: none; }
.cg-field.is-invalid .cg-field-err { display: block; }
/* Form-level status banner (error + success states). */
.cg-form-msg { display: none; padding: 12px 14px; font-size: 14.5px; font-weight: 600; }
.cg-form-msg.is-error   { display: block; background: #fdecec; border: 1px solid #f4c7c7; color: #b3261e; }
.cg-form-msg.is-success { display: block; background: #e7f6ec; border: 1px solid #b9e3c6; color: #14663a; }
.cg-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Commercial sign-up panel: toggled open by the "Sign up" button (in-page, no dialog). */
.cg-signup-panel { margin-top: 18px; }
.cg-signup-panel[hidden] { display: none; }

/* ── Responsive - swirl stays full width, logo scales, buttons stay square ── */
@media (max-width: 760px) {
    .cg-routes { grid-template-columns: 1fr; }
    .cg-steps { grid-template-columns: 1fr; }
    .mp-nav a { font-size: 14px; padding: 11px 14px; }
    .mp-topstrip { padding: 8px 12px; }
}
@media (max-width: 520px) {
    /* Below ~520px the centred lockup widens to 62vw, so its left edge would slide under
       the floating top-left button. Extra top padding drops the logo clear of it - the
       button stays top-left and fully visible, the logo is never covered. */
    .mp-swirl { padding: 58px 14px 20px; min-height: clamp(120px, 30vw, 190px); }
    .mp-header--home .mp-swirl { min-height: clamp(140px, 34vw, 220px); }
    .mp-logo, .mp-header--home .mp-logo { width: clamp(180px, 62vw, 300px); }
    .mp-nav a { font-size: 13px; padding: 10px 11px; }
    .mp-btn--outline { padding: 7px 13px; font-size: 13px; }
}