/*
Theme Name: MPComm Wholesale
Theme URI: https://mpcomm.ca
Author: MPComm
Description: Custom WordPress theme converted from the MPComm Lovable site. Pixel-matched layout, brand palette, and content.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mpcomm
*/

:root {
  --radius: 0.5rem;

  /* MPComm brand palette */
  --ink-blue: #2E5B87;
  --signal-blue: #4A7BB0;
  --ink-dark: #1B3A5B;
  --mist: #D9E1EC;
  --paper: #FAFBFD;
  --graphite: #1F2933;
  --ember: #E8A24A;

  --background: var(--paper);
  --foreground: var(--graphite);
  --card: #FFFFFF;
  --card-foreground: var(--graphite);
  --popover: #FFFFFF;
  --popover-foreground: var(--graphite);
  --primary: var(--ink-blue);
  --primary-foreground: var(--paper);
  --secondary: var(--mist);
  --secondary-foreground: var(--ink-dark);
  --muted: var(--mist);
  --muted-foreground: #5B6B7C;
  --accent: var(--ember);
  --accent-foreground: var(--ink-dark);
  --destructive: #D6432E;
  --destructive-foreground: #FDFDFD;
  --border: #D7DEE7;
  --input: #D7DEE7;
  --ring: var(--signal-blue);
}

* {
  border-color: var(--border);
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

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

h1, h2 {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  color: var(--ink-dark);
  letter-spacing: -0.01em;
  margin: 0;
}

h3, h4 {
  font-family: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-dark);
  font-weight: 600;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection {
  background-color: var(--signal-blue);
  color: var(--paper);
}

/* ---- Custom component utilities (not part of Tailwind CDN) ---- */

.container-x {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1.25rem;
  max-width: 76rem;
}
@media (min-width: 768px) {
  .container-x { padding-inline: 2rem; }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--ink-blue);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.9375rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease;
}
.btn-primary:hover { background-color: var(--ink-dark); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--ink-blue);
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--ink-blue);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.btn-secondary:hover { background-color: var(--mist); }

.btn-ember {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--ember);
  color: var(--ink-dark);
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: filter 150ms ease;
}
.btn-ember:hover { filter: brightness(0.95); }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal-blue);
}

/* FAQ <details> marker cleanup */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Header sticky/blur (bg-paper/85 + backdrop-blur combo used verbatim as classes,
   defined here in case backdrop-filter needs a prefix fallback) */
.backdrop-blur { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Mobile nav panel — controlled by JS (assets/js/main.js), independent of
   Tailwind's CDN-injected stylesheet so open/close never races with it. */
.mobile-menu-panel { display: none; }
.mobile-menu-panel.is-open { display: block; }
@media (min-width: 1024px) {
  .mobile-menu-panel { display: none !important; }
}

/* Form fields */
input, select, textarea, button { font-family: inherit; }

/* Screen-reader only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* WP core alignment helpers used inside default page content */
.alignwide { max-width: 76rem; margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; }