/* qldfishmarket.com
 *
 * Deliberately the same visual language as admin.qldfishmarket.com and the
 * buyer app: editorial serif headings, a light blue-grey ground, and QFM's own
 * brand colours from the logo guidelines -- navy #2E3192, cyan #00AEEF. A
 * supplier who sees the dashboard, a buyer who sees the app, and a stranger who
 * lands here should read all three as one organisation.
 */

:root {
  --ground: #EEF2F7;
  --surface: #FFFFFF;
  --surface-alt: #F6F9FC;
  --ink: #0F172A;
  --ink-soft: #334155;
  --muted: #64748B;
  --line: #DCE4EE;
  --line-soft: #EAF0F6;
  --navy: #2E3192;
  --cyan: #00AEEF;
  --serif: Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0B1220;
    --surface: #131B2B;
    --surface-alt: #182135;
    --ink: #E8EEF7;
    --ink-soft: #C2CEDF;
    --muted: #8698B2;
    --line: #22304A;
    --line-soft: #1B2740;
    --navy: #7EA6E8;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* A column at least as tall as the viewport so the footer sits at the bottom of
   a short page rather than floating in the middle of it. */
.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 22px 60px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
main { flex: 1 0 auto; }

header.mast { padding: 34px 0 26px; }
header.mast img { height: 42px; width: auto; }
header.mast .light { display: block; }
header.mast .dark { display: none; }
@media (prefers-color-scheme: dark) {
  header.mast .light { display: none; }
  header.mast .dark { display: block; }
}

h1 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.2;
     letter-spacing: -.4px; margin: 0 0 10px; }
h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.3;
     margin: 38px 0 10px; }
h3 { font-size: 15px; font-weight: 700; margin: 26px 0 6px; }
p, li { color: var(--ink-soft); }
a { color: var(--navy); }
.lede { font-size: 18px; color: var(--ink-soft); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  margin: 18px 0;
}

.label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
}

.grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }

/* Side-by-side cards are already the same height -- they are grid items. What
   was ragged is the BUTTONS: each sat immediately under its own paragraph, so
   the shorter card's call to action floated half a line up from its neighbour.
   The paragraph absorbs the slack instead, which anchors both buttons to the
   same line above the card's own padding. `flex: 1 0 auto` rather than
   `margin-top: auto` on the button: the same pattern used to hold the footer
   down, and it keeps a real gap when the text is long instead of collapsing
   against it. */
.grid .card { display: flex; flex-direction: column; }
.grid .card p { flex: 1 0 auto; margin-bottom: 18px; }
/* A flex child would otherwise stretch the width of the card. */
.grid .card .cta { margin-top: 0; align-self: flex-start; }

table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft);
         font-size: 14px; }
th { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em;
     text-transform: uppercase; color: var(--muted); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }

.draft {
  border-left: 3px solid var(--cyan);
  background: var(--surface-alt);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin: 20px 0;
  font-size: 14px;
}

footer {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
footer a { color: var(--muted); }

.muted { color: var(--muted); font-size: 14px; }

/* --- apply, and the app ---------------------------------------------------
   The call to action sits inside the card that describes what it is for, so
   somebody reading "for suppliers" acts without having to look elsewhere. */
.cta{display:inline-block;margin-top:12px;padding:10px 18px;border-radius:9px;
  background:#2e3192;color:#fff;font-weight:700;font-size:14px;text-decoration:none}
.cta:hover{background:#00aeef;color:#0b1a2c}
/* An element whose display comes from a class ignores the hidden attribute --
   the browser's own [hidden]{display:none} is a lower-specificity UA rule. That
   is why a `hidden` .stores div was still on the page showing two broken
   images. Enforced page-wide so the next toggle cannot fail the same way. */
[hidden]{display:none !important}

.stores{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 0}
.storebtn{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 13px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  color:var(--ink);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  text-align:left;line-height:1.15}
.storebtn:hover{border-color:var(--cyan)}
.storebtn svg{width:20px;height:20px;flex:none}
.storebtn span{display:flex;flex-direction:column}
.storebtn small{font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.storesoon{font-size:12.5px;color:var(--muted);margin:10px 0 0}

.soon{border:1px solid var(--line);border-radius:14px;padding:24px;max-width:420px;
  background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(11,26,44,.28)}
.soon::backdrop{background:rgba(11,26,44,.45)}
.soon h3{margin:0 0 8px}
.soon p{font-size:14.5px}
.soon .soonsub{font-size:13px;color:var(--muted)}
.soon .cta{margin-top:6px}

.quiet{font-size:14px;color:var(--muted)}

.contact p{margin:8px 0 0;line-height:1.9}
.contact a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.contact a:hover{border-bottom-color:var(--cyan)}

/* The attribution sits with Privacy and Terms rather than shouting: it is a
   credit, not a call to action. */
.by{color:var(--muted)}
.by:hover{color:var(--ink)}

/* A footer on a page that has no .wrap -- claim and join centre their own
   narrow column, so the footer has to be told to share it rather than
   stretching the full width of the window beneath it. */
.pagefoot{margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;
  padding-bottom:28px;box-sizing:content-box}

/* The mark is the way back to the front door on every page that is not the
   front door itself. Consistent across the marketing pages, the two forms and
   the portal, so it is never a guess whether it is clickable. */
.homelogo{display:inline-block;margin:0 0 22px;line-height:0}
.homelogo img{display:block;transition:opacity .15s}
.homelogo:hover img{opacity:.78}
.homelogo:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}