/* =====================================================================
   Cuscal Paymark rebrand overlay for Terminal Checker
   Mirrors the look of https://paymark1-uat.sites.silverstripe.com/
   (Roboto, brand red #d9291c, black footer with white text).
   Loaded AFTER paymark-prefix.css — only restyles, never restructures.
   ===================================================================== */

:root {
  --cp-red: #d9291c;
  --cp-red-hover: #b8201a;
  --cp-black: #000;
  --cp-text: #1a1a1a;
  --cp-muted: #555;
  --cp-line: #e5e5e5;
  --cp-bg: #ffffff;
  --cp-bg-soft: #f5f6f7;
}

/* ----- Typography ----- */
body,
.lead,
p,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.Hero-lead,
.footer,
input,
button {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif !important;
}

body {
  background: var(--cp-bg);
  color: var(--cp-text);
}

/* ----- 3G notice banner ----- */
/* Hidden by default (matches production behaviour — the dev removes the
   inline display:none style on the .lead div to enable it). Styles below
   only take effect when the inline display:none is cleared. */
body > .lead.cuscal-3g-notice {
  margin: 0 !important;
  padding: 14px 24px;
  background: #000;
  color: #fff;
  font-size: 13px;
  line-height: 1.55;
}

body > .lead.cuscal-3g-notice p {
  margin: 0;
  color: #fff;
  max-width: 1240px;
  margin: 0 auto;
}

body > .lead.cuscal-3g-notice p b {
  color: #fff;
  font-weight: 700;
}

body > .lead.cuscal-3g-notice p a {
  color: #fff;
  text-decoration: underline;
}

/* ----- Top NavBar (white with Cuscal logo) ----- */
.Hero-terminal {
  background-image: none !important;
  background-color: var(--cp-black) !important;
  color: #fff !important;
  min-height: 0 !important;
  padding-bottom: 32px !important;
}

.Hero-terminal .Container {
  padding-top: 24px !important;
  padding-bottom: 8px !important;
}

.Hero-terminal .NavBar + .Container,
.Hero-terminal > .Container:not(:first-child) {
  padding-top: 36px !important;
}

.Hero-terminal .NavBar {
  background: #fff;
  padding: 22px 0;
  border-bottom: 1px solid var(--cp-line);
}

.Hero-terminal .NavBar-logo {
  content: url('../images/icons/cuscal-paymark.svg');
  height: 42px;
  width: auto;
}

/* ----- Hero content ----- */
.Hero-terminal h1.h1--lg {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 36px !important;
  letter-spacing: 0 !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  text-transform: none !important;
}

.Hero-terminal hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin: 14px auto;
}

.Hero-terminal .Hero-lead {
  color: #fff !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

.Hero-terminal .breadcrumbs,
.Hero-terminal .breadcrumbs a {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ----- Skew sections — flatten them for clean editorial look ----- */
/* The original .Skew system relies on negative margins + skewY transforms
   that overlap by ~10rem. We strip ALL of that so cells stack cleanly. */
.Skew,
.Skew--reversed {
  transform: none !important;
  background: var(--cp-bg) !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.Skew-cell,
.Skew-cell--grey,
.Skew-cell:first-child,
.Skew-cell:nth-child(odd),
.Skew-cell:nth-child(even),
.Skew--reversed .Skew-cell:nth-child(odd),
.Skew--reversed .Skew-cell:nth-child(even) {
  transform: none !important;
  -webkit-transform: none !important;
  background: var(--cp-bg) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
  outline: none !important;
  position: relative !important;
}

.Skew-cell--grey {
  background: var(--cp-bg-soft) !important;
}

.Skew-cell .Skew-cell-content,
.Skew-cell:nth-child(odd) .Skew-cell-content,
.Skew-cell:nth-child(even) .Skew-cell-content,
.Skew--reversed .Skew-cell:nth-child(odd) .Skew-cell-content,
.Skew--reversed .Skew-cell:nth-child(even) .Skew-cell-content {
  transform: none !important;
  -webkit-transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  outline: none !important;
}

/* ----- Description paragraph ----- */
.Skew-cell .lead {
  color: var(--cp-text) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

.Skew-cell strong,
.Skew-cell b {
  color: var(--cp-text) !important;
  font-weight: 700 !important;
}

/* ----- Section headings ----- */
.Skew-cell h2,
.Skew-cell .h2 {
  color: var(--cp-text) !important;
  font-weight: 600 !important;
  font-size: 26px !important;
  letter-spacing: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* ----- The form (Check your terminal status) ----- */
.FormTerminalChecker {
  max-width: 560px;
  margin: 0 auto;
}

.FormTerminalChecker .form-control,
.FormTerminalChecker input[type='text'] {
  width: 100%;
  height: 52px;
  border: 1px solid var(--cp-line);
  border-radius: 6px;
  background: #fff;
  padding: 0 16px;
  font-size: 15px;
  color: var(--cp-text);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.FormTerminalChecker .form-control:focus {
  border-color: var(--cp-red);
  box-shadow: 0 0 0 3px rgba(217, 41, 28, 0.12);
}

.FormTerminalChecker #terminal-id {
  margin-bottom: 8px;
}

.FormTerminalChecker .Grid-cell p {
  color: var(--cp-muted) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* ----- Primary button (Get status / Check another) ----- */
.Button,
.Button--primary {
  background: var(--cp-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 14px 28px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.3px;
  text-transform: none !important;
  cursor: pointer;
  transition: background 0.12s;
  box-shadow: none !important;
  text-decoration: none !important;
  display: inline-block;
}

.Button:hover,
.Button--primary:hover {
  background: var(--cp-red-hover) !important;
}

/* ----- "Need more information?" section (last Skew-cell) ----- */
/* Selector specificity has to beat .Skew--reversed .Skew-cell:nth-child(odd)
   from the flatten rules above. */
.Skew .Skew-cell:last-child,
.Skew--reversed .Skew-cell:last-child {
  background: var(--cp-black) !important;
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

.Skew .Skew-cell:last-child h2,
.Skew .Skew-cell:last-child .h2,
.Skew--reversed .Skew-cell:last-child h2,
.Skew--reversed .Skew-cell:last-child .h2 {
  color: #fff !important;
}

.Skew .Skew-cell:last-child .lead,
.Skew--reversed .Skew-cell:last-child .lead {
  color: #fff !important;
}

.Skew .Skew-cell:last-child .lead a,
.Skew--reversed .Skew-cell:last-child .lead a {
  color: var(--cp-red) !important;
  font-weight: 700;
  text-decoration: none;
}

.Skew .Skew-cell:last-child .lead a:hover,
.Skew--reversed .Skew-cell:last-child .lead a:hover {
  text-decoration: underline;
}

/* ----- General link color ----- */
a {
  color: var(--cp-red);
}

a:hover {
  color: var(--cp-red-hover);
}

/* ----- Footer (mirrors paymark1-uat.sites.silverstripe.com) ----- */
.footer {
  background: var(--cp-black) !important;
  color: #fff !important;
  padding-top: 64px !important;
}

.footer__list-title {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}

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

.footer__list-item {
  margin-bottom: 6px;
}

.footer__list-item a,
.footer__list-item a:visited {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  line-height: 1.6;
}

.footer__list-item a:hover {
  color: var(--cp-red) !important;
}

/* Social icons — red circles, white icon, small */
.footer__social {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.footer__social a {
  display: inline-block;
  width: 40px;
  height: 40px;
}

.footer__social svg {
  width: 40px;
  height: 40px;
  display: block;
}

.footer__social svg circle,
.footer__social svg .background {
  fill: var(--cp-red) !important;
}

/* ----- Footer trailing padding (where the legal strip used to sit) ----- */
.footer .footer__menu {
  padding-bottom: 40px;
}

/* ----- Mobile tweaks ----- */
@media (max-width: 767px) {
  .Hero-terminal h1.h1--lg {
    font-size: 32px !important;
  }

  .Hero-terminal .Hero-lead {
    font-size: 16px !important;
  }

  body > .lead.cuscal-3g-notice {
    padding: 12px 16px;
    font-size: 12px;
  }
}