/*
 * Pheasants Nest Produce brand theme
 * Full-width rustic banner header (app-header-logo.png spans the whole
 * header). Red-orange primary accent (legacy #d62d16) used for buttons/links.
 */

:root {
  /* Taller header so the rustic banner image displays properly */
  --header-height: 100px;
  --header-height-desktop: 100px;

  --brand-primary: oklch(0.58 0.21 30);
  --brand-primary-foreground: oklch(0.98 0 0);
  --brand-header-bg: oklch(0.58 0.21 30);
  --brand-header-fg: oklch(0.98 0 0);
}

/* Use the full-width banner logo as the header background on every page.
 * The legacy mpo-react site did this via .app-header { background: ... }. */
body header.sticky.top-0 {
  background-image: url('/img/brand/app-header-logo.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The banner image already contains the brand name/logo — hide the inline
 * <img> the header components render so we don't double up. */
body header.sticky.top-0 a > img {
  display: none;
}