/*
 * Palette + site chrome for the static build.
 *
 * pd.css is a byte-for-byte copy of the Shopify theme's asset and derives all
 * of its structural colour from Horizon custom properties. Rather than edit it,
 * this file supplies those properties so pd.css keeps working unchanged. That
 * preserves the theme convention: brand hexes live here, never in pd.css.
 *
 * Values mirror config/settings_data.json on the Shopify store:
 *   background #FDFBF7  foreground #10333A  color1 #4C6068  color2 #E3DCD1
 *   primary button #0E7C86 on #FFFFFF
 *
 * Loaded BEFORE pd.css.
 */

:root {
  /* Horizon 4-slot palette */
  --color-background: #fdfbf7;
  --color-foreground: #10333a;
  --color-foreground-rgb: 16 51 58;
  --color-color1: #4c6068;
  --color-color2: #e3dcd1;

  /* Horizon primary button slots - the teal accent is applied here, because
     Horizon's palette has no dedicated accent slot. */
  --color-primary-button-background: #0e7c86;
  --color-primary-button-hover-background: #0b646c;
  --color-primary-button-text: #ffffff;

  /* Horizon type slots: headings archivo_n7, body inter_n4, subheading inter_n5 */
  --font-heading--family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-subheading--family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body--family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-color1);
  font-family: var(--font-body--family);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading--family);
  font-weight: 700;
  color: var(--color-foreground);
}

img {
  max-width: 100%;
}

a {
  color: var(--color-primary-button-background);
}

/* Visible focus for keyboard users, since there is no Horizon base sheet
   supplying one here. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-primary-button-background);
  outline-offset: 2px;
}

.pd-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-foreground);
  color: var(--color-background);
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}

.pd-skip:focus {
  left: 0;
}

/* ----------------------------------------------------------------- header */

.pd-header {
  border-bottom: 1px solid var(--pd-rule);
  background: var(--color-background);
}

.pd-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 16px;
}

.pd-header__brand {
  font-family: var(--font-heading--family);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-foreground);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.pd-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
}

.pd-header__nav a {
  color: var(--color-foreground);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}

.pd-header__nav a:hover {
  color: var(--pd-accent);
}

/* The nav collapses to the CTA alone on small screens - a two-item menu does
   not justify a drawer, and the quote button is the only action that matters. */
@media (max-width: 700px) {
  .pd-header__nav .pd-header__link {
    display: none;
  }
}

/* ----------------------------------------------------------------- footer */

.pd-footer {
  padding-block: 44px 12px;
  border-top: 1px solid var(--pd-rule);
  margin-top: 8px;
}

.pd-footer__grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .pd-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.pd-footer__name {
  font-family: var(--font-heading--family);
  font-weight: 700;
  color: var(--color-foreground);
  font-size: 1.125rem;
  margin: 0 0 8px;
}

.pd-footer__blurb {
  margin: 0;
  color: rgb(var(--color-foreground-rgb) / 0.72);
  font-size: 0.9375rem;
  max-width: 44ch;
  line-height: 1.55;
}

.pd-footer__label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-button-background);
  margin: 0 0 10px;
}

.pd-footer__contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 0.9375rem;
}

.pd-footer__contact a {
  color: var(--color-foreground);
  text-decoration: none;
}

.pd-footer__contact a:hover {
  color: var(--color-primary-button-background);
}

.pd-footer__abn {
  margin-top: 6px;
  color: rgb(var(--color-foreground-rgb) / 0.6);
  font-size: 0.8125rem;
}

.pd-footer__legal {
  margin: 34px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--pd-rule);
  font-size: 0.8125rem;
  color: rgb(var(--color-foreground-rgb) / 0.6);
}

/* ------------------------------------------------------- door type cards
   Transcribed from the {% stylesheet %} block in sections/pd-door-types.liquid.
   Shopify compiles those into the theme's bundle; a static build has no
   equivalent step, so they live here. */

.pd-doors {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}

@media (min-width: 820px) {
  .pd-doors {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pd-door {
  display: flex;
  flex-direction: column;
  background: var(--pd-card);
  border: 1px solid var(--pd-rule);
  border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow-sm);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pd-door:hover {
  transform: translateY(-3px);
  box-shadow: var(--pd-shadow-md);
}

.pd-door__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Supplier product renders sit on a white cutout background. Cropping them
   to fill would slice the product, so they are contained and given matching
   white surround instead. */
.pd-door__media--product {
  background: #fff;
  border-bottom: 1px solid var(--pd-rule);
}

.pd-door__media--product img {
  object-fit: contain;
  padding: 12px;
}

.pd-door__body {
  padding: 26px 26px 28px;
}

.pd-door__name {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.pd-door__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
}

.pd-door__price-value {
  font-family: var(--font-heading--family, inherit);
  font-size: 1.15rem;
  color: var(--pd-warm-ink);
  background: var(--pd-warm-soft);
  border-radius: 999px;
  padding: 5px 13px;
}

.pd-door__price-note {
  font-size: 0.8125rem;
  color: var(--pd-muted);
}

.pd-door__summary {
  margin: 0 0 18px;
  color: var(--pd-muted);
  line-height: 1.6;
  font-size: 0.9375rem;
}

.pd-door__specs {
  margin: 0;
  display: grid;
  gap: 12px;
}

.pd-door__specs dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pd-warm-ink);
  margin-bottom: 3px;
}

.pd-door__specs dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--pd-muted);
}

.pd-door__specs dd + dt {
  padding-top: 10px;
  border-top: 1px solid var(--pd-rule);
}

/* --------------------------------------------------- suburb page header
   From the {% stylesheet %} block in sections/pd-suburb-hero.liquid. */

.pd-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  margin-bottom: 18px;
  color: rgb(var(--color-foreground-rgb) / 0.6);
}

.pd-crumbs a {
  color: rgb(var(--color-foreground-rgb) / 0.72);
  text-decoration: none;
}

.pd-crumbs a:hover {
  color: var(--color-primary-button-background);
  text-decoration: underline;
}

.pd-suburb__actions {
  margin-top: 26px;
}

@media (prefers-reduced-motion: reduce) {
  .pd-door {
    transition: none;
  }

  .pd-door:hover {
    transform: none;
  }
}