/* ════════════════════════════════════════════════════════════════════════
 * PI Base v2.0 — Base Styles
 * Reset, body, typography, utility classes. No layout. No components.
 * ════════════════════════════════════════════════════════════════════════ */

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

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

body {
  margin: 0;
  padding: 0;
  font-family: var(--pi-font-sans);
  font-size: var(--pi-text-base);
  line-height: 1.6;
  color: var(--pi-text);
  background: var(--pi-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--pi-trans-base);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ───── TYPOGRAPHY ───── */
/* v2.0.59 — headings go heavier and larger at both ends of the clamp, so the
   change lands on mobile as well as desktop. Playfair Display 800 is already
   in the Google Fonts request (inc/enqueue.php), so the heavier weight adds
   no extra font download. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pi-font-serif);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 var(--pi-space-4);
  color: inherit;
}

/* v2.0.64 — sizes pulled back from the 2.0.59 bump. Weight 800 does most of
   the work the client asked for; at clamp(32px,4vw,56px) an h2 was competing
   with the page h1 and swallowing the sections under it. */
h1 { font-size: clamp(38px, 5vw, 68px); }
h2 { font-size: clamp(28px, 3.2vw, 42px); }
h3 { font-size: clamp(22px, 2.4vw, 30px); }

/* v2.0.64 — section separation.
   Headings only carried a bottom margin, so a new section started flush
   against the paragraph above it and the whole page read as one block.

   Using the adjacent-sibling selector rather than a blanket margin-top: this
   fires only when a heading follows body content, so headings that sit first
   inside a hero, card or grid cell are untouched and no component layout
   shifts. */
p + h2, ul + h2, ol + h2, table + h2, figure + h2,
blockquote + h2, .wp-block-separator + h2 { margin-top: 64px; }

p + h3, ul + h3, ol + h3, table + h3, figure + h3 { margin-top: 44px; }

p + h4, ul + h4, ol + h4 { margin-top: 32px; }

@media (max-width: 640px) {
  p + h2, ul + h2, ol + h2, table + h2, figure + h2,
  blockquote + h2, .wp-block-separator + h2 { margin-top: 44px; }
  p + h3, ul + h3, ol + h3, table + h3, figure + h3 { margin-top: 32px; }
}
h4 { font-size: var(--pi-text-xl); }
h5 { font-size: var(--pi-text-lg); }
h6 { font-size: var(--pi-text-base); }

p {
  margin: 0 0 var(--pi-space-4);
}

p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }
em, i     { font-style: italic; }

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

.pi-container {
  max-width: var(--pi-content-max);
  margin: 0 auto;
  padding-left:  var(--pi-content-padding);
  padding-right: var(--pi-content-padding);
}

.pi-container--wide {
  max-width: none;
  padding-left:  var(--pi-content-padding);
  padding-right: var(--pi-content-padding);
}

.pi-section {
  padding-top:    var(--pi-space-20);
  padding-bottom: var(--pi-space-20);
}

.pi-section--navy { background: var(--pi-navy); color: var(--pi-white); }
.pi-section--navy-dark { background: var(--pi-navy-dark); color: var(--pi-white); }
.pi-section--gold { background: var(--pi-gold-gradient); color: var(--pi-navy); }
.pi-section--gray { background: var(--pi-gray-50); }
.pi-section--white { background: var(--pi-white); }

/* Eyebrow label */
.pi-eyebrow {
  font-family: var(--pi-font-cond);
  font-size: var(--pi-text-sm);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pi-gold);
  margin-bottom: var(--pi-space-4);
  display: inline-block;
}

/* Gold gradient text helper */
.pi-text-gold {
  background: var(--pi-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Body-level utility classes */
body.pi-home #site-header { background: transparent; }
body.pi-home #site-header.is-solid { background: var(--pi-navy); }
body.pi-interior #site-header { background: var(--pi-navy); }

/* Lock scroll when mobile menu open */
body.pi-menu-open { overflow: hidden; }