/* ==========================================================================
   pubX brand stylesheet
   Design tokens and components mirrored from the live site
   (https://pubx.ai/wp-content/app/themes/pubx/assets/styles/custom.css)
   so standalone pages (supply, events, banners) match pubx.ai.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand ramp: light cream -> primary orange -> deep maroon */
  --pubx-50:  #FEF4EE;   /* cream            */
  --pubx-100: #FDE6D7;   /* peach            */
  --pubx-200: #FBC9AD;
  --pubx-300: #F7A37A;
  --pubx-400: #F37344;
  --pubx-500: #F05223;   /* PRIMARY orange   */
  --pubx-600: #E13615;
  --pubx-700: #BB2613;   /* primary hover    */
  --pubx-800: #942118;
  --pubx-900: #781D16;
  --pubx-950: #410B09;   /* maroon / darkest */

  /* Neutrals */
  --ink:    #101828;     /* primary text / headings */
  --muted:  #475467;     /* body / secondary text   */
  --line:   #D0D5DD;     /* borders                 */
  --white:  #FFFFFF;
  --gray:   #F9FAFB;

  /* Accents (used sparingly on the marketing site) */
  --violet: #7773FF;
  --magenta:#CC54BA;
  --steel:  #29293D;

  /* Semantic aliases */
  --brand:        var(--pubx-500);
  --brand-hover:  var(--pubx-700);
  --maroon:       var(--pubx-950);
  --cream:        var(--pubx-50);
  --bg:           var(--white);
  --text:         var(--ink);

  /* Typography */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Neue Haas Grotesk Display Pro", var(--font-sans);

  /* Spacing scale (matches the site's sass paddings) */
  --space-xs: 48px;
  --space-md: 72px;
  --space-lg: 96px;

  /* The pubX look uses sharp, square corners */
  --radius: 0px;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--brand); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--brand-hover); }

/* --------------------------------------------------------------------------
   Typography (responsive scale mirrored from pubx.ai)
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--ink); font-family: var(--font-sans); }

h1 { font-size: 30px; font-weight: 700; line-height: 120%; }
h2 { font-size: 28px; font-weight: 700; line-height: 125%; }
h3 { font-size: 24px; font-weight: 700; line-height: 122.222%; }
h4 { font-size: 20px; font-weight: 600; line-height: 127%; }
h5 { font-size: 18px; font-weight: 700; line-height: 150%; }
h6 { font-size: 16px; font-weight: 600; line-height: 150%; }

p { font-size: 1rem; line-height: 1.5rem; }
p.bigger { font-size: 1.125rem; line-height: 1.75rem; }
p.bigga  { font-size: 1rem; line-height: 150%; }

.eyebrow {
  display: inline-block;
  color: var(--brand);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

blockquote { margin-bottom: 32px; }
blockquote p {
  margin-top: 32px;
  color: var(--brand);
  font-size: 24px;
  font-weight: 500;
  line-height: 127%;
}

@media screen and (min-width: 768px) {
  h1 { font-size: 45px; }
  h2 { font-size: 38px; }
  h3 { font-size: 30px; }
  h4 { font-size: 25px; }
  h5 { font-size: 21px; }
  p.bigga { font-size: 1.125rem; }
  blockquote { margin-bottom: 48px; }
  blockquote p { margin-top: 48px; font-size: 30px; }
}

@media screen and (min-width: 1200px) {
  h1 { font-size: 60px; }
  h2 { font-size: 48px; }
  h3 { font-size: 36px; }
  h4 { font-size: 30px; }
  h5 { font-size: 24px; }
  p.bigga { font-size: 1.25rem; }
  blockquote { margin-bottom: 64px; }
  blockquote p { font-size: 36px; }
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.section { padding: var(--space-xs) 0; }
@media screen and (min-width: 768px) { .section { padding: var(--space-md) 0; } }
@media screen and (min-width: 1200px) { .section { padding: var(--space-lg) 0; } }

/* --------------------------------------------------------------------------
   Buttons (.button + variants), matching the live site
   - square corners, 44px tall, Manrope 600
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius);
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 44px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Primary — solid orange */
.button.button_primary {
  background-color: var(--brand);
  color: var(--cream);
}
.button.button_primary:hover { background-color: var(--brand-hover); }

.button.button_primary.invert {
  background-color: var(--cream);
  color: var(--maroon);
}
.button.button_primary.invert:hover { background-color: var(--pubx-200); }

/* Secondary — outlined */
.button.button_secondary {
  background-color: transparent;
  border: 1px solid var(--pubx-300);
  color: var(--pubx-900);
  line-height: 42px;
}
.button.button_secondary:hover { background-color: var(--pubx-300); }

.button.button_secondary.invert {
  border: 1px solid var(--cream);
  color: var(--cream);
}
.button.button_secondary.invert:hover {
  background-color: var(--cream);
  color: var(--maroon);
}

/* Tertiary — text only */
.button.button_tertiary { background-color: transparent; color: var(--brand); }

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */
input:not([type=checkbox]):not([type=radio]),
select,
textarea {
  width: 100%;
  padding: 11px 16px;
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
  box-shadow: none;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
::placeholder { color: var(--muted); opacity: 0.7; }

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}

.surface-maroon { background: var(--maroon); color: var(--cream); }
.surface-cream  { background: var(--cream);  color: var(--ink); }
.surface-gray   { background: var(--gray);   color: var(--ink); }

/* --------------------------------------------------------------------------
   Utility colour classes (mirrors the site's background ramp)
   -------------------------------------------------------------------------- */
.text-brand  { color: var(--brand); }
.text-maroon { color: var(--maroon); }
.text-muted  { color: var(--muted); }

.bg-50  { background-color: var(--pubx-50); }
.bg-100 { background-color: var(--pubx-100); }
.bg-200 { background-color: var(--pubx-200); }
.bg-300 { background-color: var(--pubx-300); }
.bg-400 { background-color: var(--pubx-400); }
.bg-500 { background-color: var(--pubx-500); }
.bg-600 { background-color: var(--pubx-600); }
.bg-700 { background-color: var(--pubx-700); }
.bg-800 { background-color: var(--pubx-800); }
.bg-900 { background-color: var(--pubx-900); }
.bg-950 { background-color: var(--pubx-950); }