/* iStore Business sign-in page — styled as a page of istorebusiness.co.za.
 * Palette + the bold pill button are taken from the live site's Layout.css:
 *   navy #031239 · blue #2845CF · teal #00ADB3 · greys #9CA3AF/#E5E7EB.
 * Standalone (does NOT use the dark toolbox theme). Host-gated to *.istorebusiness.co.za. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Libre+Caslon+Text:wght@400;700&display=swap");

* { box-sizing: border-box; }

:root {
  --navy: #031239; --blue: #2845cf; --blue-d: #1f37b0; --teal: #00adb3;
  --grey: #9ca3af; --ink: #6b7280; --line: #e5e7eb; --skyline: rgba(117, 202, 255, 0.30);
}

body {
  margin: 0; background: #fff; color: var(--navy);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh; line-height: 1.5;
}

/* ── Navbar (real site chrome) ── */
header { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.nav { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 28px; padding: 14px 24px; }
.logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.logo svg { height: 42px; width: auto; display: block; }
.logo svg path { fill: var(--navy); }
.menu { display: flex; align-items: center; gap: 26px; margin-left: 8px; flex: 1; flex-wrap: wrap; }
.menu a { color: var(--navy); text-decoration: none; font-size: 15px; font-weight: 500; }
.menu a:hover { color: var(--blue); }
.menu a.caret::after { content: ' \25be'; color: var(--grey); font-size: 11px; }

/* iStore Business pill button */
.button {
  border: 2px solid var(--blue); border-radius: 4rem; padding: 9px 26px;
  font-weight: 700; font-size: 15px; display: inline-block; text-decoration: none;
  white-space: nowrap; cursor: pointer; font-family: inherit;
  transition: background .2s ease, border-color .2s ease;
}
.primary-button, .primary-button:visited { color: #fff; background: var(--blue); }
.primary-button:hover { background: var(--blue-d); border-color: var(--blue-d); }

/* ── Body: sign in ── */
main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 64px 24px;
  background: linear-gradient(180deg, #fff 0%, #f7f8fb 100%); }
.signin { text-align: center; max-width: 440px; }
.signin h1 { font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif; font-weight: 700;
  font-size: 34px; line-height: 1.15; margin: 0 0 12px; color: var(--navy); }
.signin p { color: var(--ink); font-size: 15px; margin: 0 0 28px; }
.signin .button { padding: 13px 34px; }

/* ── Footer (real site chrome) ── */
footer { background: #fff; border-top: 1px solid var(--line); }
.foot { max-width: 1240px; margin: 0 auto; padding: 30px 24px 22px; }
.foot-badge { padding-bottom: 18px; border-bottom: 2px solid var(--skyline); }
/* istore-premium-partner.png is pure white line-art on transparency (verified:
   100% of its opaque pixels are #fff), authored for a dark background — so on
   this white footer it rendered completely invisible, leaving an empty 54px
   band above the divider.

   brightness(0) drives every colour channel to zero while leaving the alpha
   channel untouched, so the white art becomes solid black and the transparent
   background stays transparent. Chosen over a mask: masking an <img> masks the
   element but does NOT remove the image's own pixels, so a navy fill behind
   white art still renders as white. It also degrades safely — a browser
   without filter support shows the current (invisible) state rather than a
   solid block over the logo.

   Black rather than the brand navy is deliberate: tinting a filter to an exact
   hex needs an unreadable invert/sepia/hue-rotate chain. If an artwork file in
   navy or black turns up, drop the filter and use it directly. */
.foot-badge img {
  height: 34px;
  width: auto;
  display: block;
  filter: brightness(0);
}
.flinks { display: flex; flex-wrap: wrap; gap: 22px; padding: 18px 0; align-items: center; }
.flinks a { color: var(--navy); text-decoration: none; font-size: 14px; font-weight: 500; }
.flinks a:hover { color: var(--blue); }
.flinks .li { margin-left: auto; color: var(--blue); font-weight: 600; }
.legal { display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  border-top: 1px solid var(--line); padding-top: 16px; color: var(--grey); font-size: 12.5px; }
.legal a { color: var(--grey); text-decoration: none; }
.legal a:hover { color: var(--blue); }

/* ── Mobile ── secondary nav links are decorative on a login page; hide them and
   keep the logo + Contact pill. Footer link rows wrap and the LinkedIn link
   drops below instead of being pushed off-screen. */
@media (max-width: 720px) {
  .nav { gap: 14px; padding: 12px 16px; }
  .logo svg { height: 34px; }
  .menu { display: none; }
  .signin h1 { font-size: 28px; }
  main { padding: 48px 20px; }
  .flinks .li { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 380px) {
  .button { padding: 9px 18px; font-size: 14px; }
}