/*
 * Midnight Bold palette - navy and white with steel-blue details.
 * Loaded after pd-site.css. Overrides the palette tokens and turns the header,
 * heroes, page headers and alternating "tint" bands navy. Headings use
 * Playfair Display, loaded in the page <head>.
 */

/* ---------------------------------------------------------- midnight */


:root {
  --color-background: #ffffff;
  --color-foreground: #0e1a2b;
  --color-foreground-rgb: 14 26 43;
  --color-color1: #475163;
  --color-primary-button-background: #0e1a2b;
  --color-primary-button-hover-background: #1c2c44;
  --color-primary-button-text: #ffffff;
  --font-heading--family: "Playfair Display", Georgia, "Times New Roman", serif;

  --ps-ink: #0e1a2b;
  --ps-ink-rgb: 14 26 43;
  --ps-dark-bg: #0e1a2b;
  --ps-dark-bg-rgb: 14 26 43;
  --ps-dark-bg-2: #13223a;
  --ps-accent-rgb: 14 26 43;
  --ps-dark-rgb: 14 26 43;
  --ps-surface-rgb: 255 255 255;
  --ps-on-accent: #ffffff;
  --ps-highlight: #c9a15e;
  --ps-highlight-rgb: 201 161 94;
  --ps-warm-hover: #d6b273;
  --ps-warm-ink-base: #8a6630;
  --ps-pattern: #0e1a2b;

  --pd-warm: #c9a15e;
  --pd-warm-ink: #8a6630;
  --pd-warm-soft: #f6f0e4;
  --pd-tint: #f2f4f7;
  --pd-card: #ffffff;
  --pd-shadow-sm: 0 1px 2px rgb(14 26 43 / 0.05), 0 2px 8px rgb(14 26 43 / 0.06);
  --pd-shadow-md: 0 2px 4px rgb(14 26 43 / 0.05), 0 8px 24px rgb(14 26 43 / 0.1);
  --pd-shadow-lg: 0 4px 8px rgb(14 26 43 / 0.06), 0 18px 48px rgb(14 26 43 / 0.16);
}

.ps-hero__title, .ps-pagehero__title, .pd-h2 { letter-spacing: -0.01em; }
.ps-feature, .ps-card, .pd-step { border-color: #e6e9ee; }

/* ---------------------------------------------------------- darkhero */

/* Dark header + hero + page headers. Needs from the theme :root:
   --ps-dark-bg, --ps-dark-bg-rgb, --ps-highlight, --ps-ink, --ps-ink-rgb, --ps-warm-ink-base */

.ps-header,
.ps-hero,
.ps-pagehero {
  --color-foreground: #ffffff;
  --color-foreground-rgb: 255 255 255;
  --color-color1: rgb(255 255 255 / 0.8);
  --pd-muted: rgb(255 255 255 / 0.74);
  --pd-rule: rgb(255 255 255 / 0.12);
  --pd-rule-strong: rgb(255 255 255 / 0.3);
  --pd-warm-ink: var(--ps-highlight);
  --ps-pattern: #ffffff;
  color: var(--color-color1);
}

.ps-header {
  background: rgb(var(--ps-dark-bg-rgb) / 0.96);
  border-bottom-color: rgb(255 255 255 / 0.08);
}

.ps-hero,
.ps-pagehero {
  background:
    radial-gradient(55% 70% at 95% 0%, rgb(var(--ps-highlight-rgb) / 0.14) 0%, transparent 70%),
    var(--ps-dark-bg);
}

.ps-hero::before,
.ps-pagehero::before {
  opacity: 0.06;
}

.ps-brand__mark {
  background: var(--ps-highlight);
  color: var(--ps-dark-bg);
}

.ps-header .ps-brand__text span,
.ps-brand--light .ps-brand__text span {
  color: var(--ps-highlight);
}

.ps-menu__panel {
  background: var(--ps-dark-bg);
}

.ps-menu[open] summary {
  background: #ffffff;
  color: var(--ps-dark-bg);
}

/* Primary buttons on dark grounds switch to the metallic highlight, so they
   never disappear when the accent is itself dark. */
:is(.ps-header, .ps-hero, .ps-pagehero) .ps-btn:not(.ps-btn--ghost):not(.ps-btn--outline) {
  background: var(--ps-highlight);
  color: var(--ps-dark-bg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}

:is(.ps-header, .ps-hero, .ps-pagehero) .ps-btn:not(.ps-btn--ghost):not(.ps-btn--outline):hover {
  filter: brightness(1.08);
}

:is(.ps-hero, .ps-pagehero) :is(.ps-btn--ghost, .ps-btn--outline) {
  background: rgb(255 255 255 / 0.06);
  color: #ffffff;
  border-color: rgb(255 255 255 / 0.3);
  box-shadow: none;
}

:is(.ps-hero, .ps-pagehero) :is(.ps-btn--ghost, .ps-btn--outline):hover {
  color: var(--ps-highlight);
  border-color: var(--ps-highlight);
  background: rgb(255 255 255 / 0.06);
}

.ps-points svg {
  background: var(--ps-highlight);
  color: var(--ps-dark-bg);
}

.ps-hero__badge {
  background: #ffffff;
  color: var(--ps-ink);
}

.ps-hero__badge-label {
  color: var(--ps-warm-ink-base);
}

.ps-pagehero__intro a {
  color: var(--ps-highlight);
}

.ps-pagehero .pd-page-header__note {
  --color-foreground: var(--ps-ink);
  --color-foreground-rgb: var(--ps-ink-rgb);
  color: rgb(var(--ps-ink-rgb) / 0.8);
}

.ps-pagehero .pd-page-header__note strong {
  color: var(--ps-ink);
}

/* ---------------------------------------------------------- darkbands */

/* Turns the alternating "tint" sections into dark bands. Cards inside keep a
   light surface with dark ink. Same :root needs as darkhero.css plus
   --ps-dark-bg-2. */

.pd-section--tint {
  --color-foreground: #ffffff;
  --color-foreground-rgb: 255 255 255;
  --pd-muted: rgb(255 255 255 / 0.72);
  --pd-rule: rgb(255 255 255 / 0.12);
  --pd-rule-strong: rgb(255 255 255 / 0.28);
  --pd-warm-ink: var(--ps-highlight);
  --ps-pattern: #ffffff;
  background: var(--ps-dark-bg-2);
  color: rgb(255 255 255 / 0.8);
}

.pd-section--tint::before {
  opacity: 0.05;
}

.pd-section--tint :is(.pd-step, .ps-card, .ps-feature, .pd-faq__list, .pd-quote, .ps-contact a, .ps-chips a, .ps-product, .ps-sizenav a, .ps-tablewrap, .ps-benefits__icon, .ps-btn--outline, .ps-btn--ghost) {
  --color-foreground: var(--ps-ink);
  --color-foreground-rgb: var(--ps-ink-rgb);
  --pd-muted: rgb(var(--ps-ink-rgb) / 0.72);
  --pd-rule: rgb(var(--ps-ink-rgb) / 0.1);
  --pd-rule-strong: rgb(var(--ps-ink-rgb) / 0.18);
  --pd-warm-ink: var(--ps-warm-ink-base);
  color: rgb(var(--ps-ink-rgb) / 0.8);
}

.pd-section--tint p a:not([class]) {
  color: var(--ps-highlight);
}

.pd-section--tint .ps-btn:not(.ps-btn--ghost):not(.ps-btn--outline) {
  background: var(--ps-highlight);
  color: var(--ps-dark-bg);
}

.pd-section--tint .ps-next li::before {
  background: var(--ps-highlight);
  color: var(--ps-dark-bg);
}

.pd-section--tint .ps-split__media img {
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.4);
}

/* ---------------------------------------------------------- midnight-bold */

/* Midnight Bold - navy and white, no gold. White buttons on navy, steel-blue details. */

:root {
  --ps-highlight: #ffffff;
  --ps-highlight-rgb: 157 183 218;
  --ps-soft: #a9c2e3;
  --ps-warm-hover: #e8eef6;
  --ps-warm-ink-base: #2f5a99;

  --pd-warm: #3d6db3;
  --pd-warm-ink: #2f5a99;
  --pd-warm-soft: #eaf0f8;
}

/* On navy: small headings, rules and the "Pet Doors" wordmark in steel blue;
   buttons, ticks and the logo tile in white. */
.ps-header,
.ps-hero,
.ps-pagehero,
.pd-section--tint,
.ps-footer,
.pd-cta {
  --pd-warm: var(--ps-soft);
  --pd-warm-ink: var(--ps-soft);
}

.ps-header .ps-brand__text span,
.ps-brand--light .ps-brand__text span,
.ps-footer__label {
  color: var(--ps-soft);
}

.ps-footer__contact svg {
  color: var(--ps-soft);
}

/* Cards sitting on navy keep the blue ink for tags and prices. */
.pd-section--tint :is(.pd-step, .ps-card, .ps-feature, .pd-faq__list, .pd-quote, .ps-contact a, .ps-chips a, .ps-product, .ps-sizenav a, .ps-tablewrap, .ps-benefits__icon) {
  --pd-warm: #3d6db3;
  --pd-warm-ink: #2f5a99;
}

.pd-cta__btn:not(.pd-cta__btn--ghost),
.ps-btn--warm,
.ps-btn--warm:hover {
  background: #ffffff;
  color: var(--ps-ink);
}

.ps-tile__arrow {
  background: #ffffff;
  color: var(--ps-ink);
}

.ps-tile__num {
  color: var(--ps-ink);
}