/* ==========================================================================
   Ken Pond Design™ – base.css
   Global styles loaded on ALL pages (fonts, reset, header, footer)
   ========================================================================== */

/* Load Manrope and Public Sans */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&family=Outfit:wght@200&family=Public+Sans:wght@100;200;300;400&display=swap');

/* JetBrains Mono for code */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ===== Base Reset ===== */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Manrope', sans-serif;
  color: #000;
  background: #fff;
}
img, svg, video { max-width: 100%; height: auto; }

/* Links: black → gray, no underline */
a {
  color: #000;
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: #666; }

/* ===== Header (interior) ===== */
.site-header--bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding: 0.75rem 2rem;
  border: none;
  text-align: left;
}
.brand { display: flex; align-items: center; }
.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.site-logo img {
  width: 187px;
  height: 35px;
  display: block;
  transition: opacity 0.2s ease;
}
.site-logo img:hover {
  
}

/* Menus */
.primary-nav:empty { display: none; }
.primary-nav ul,
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.25rem;
}
.primary-nav a,
.site-footer a { font-weight: 500; }

/* ===== Main area & page content ===== */
.site-main {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* ===== Footer ===== */
.site-footer {
  background: #fff;
  color: #000;
  text-align: center;
  padding: 2rem 1rem;
  border: none;
}
.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
/* Dynamic page list */
.footer-pages ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
.footer-pages a {
  color: #000;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
.footer-pages a:hover { color: #666; }
/* Footer logo */
.footer-logo {
  display: flex;
  justify-content: center;
  margin-top: 0;
  margin-bottom: -12px;
}
.footer-logo img {
  width: 187px;
  height: 35px;
  display: block;
  transition: opacity 0.2s ease;
}
.footer-logo img:hover {
  
}
/* Copyright */
.footer-copy p { font-size: 0.85rem; color: #444; margin: 0; }

/* ===== Blank "Home" template ===== */
.landing-wrapper,
.interior-empty,
.home-empty { margin: 0; padding: 0; }

/* ===== Responsive (Global) ===== */
@media (max-width: 800px) {
  .site-header--bar { gap: 0.75rem; padding: 0.5rem 1rem; flex-wrap: wrap; }

  .primary-nav ul { justify-content: center; gap: 0.875rem; flex-wrap: wrap; }
  .primary-nav a { display: inline-block; padding: 6px 8px; line-height: 1.4; }

  .site-main { max-width: 720px; margin: 1.25rem auto; padding: 0 0.75rem; }

  .footer-inner { gap: 1.25rem; }
  .footer-pages ul { gap: 0.875rem; }
}

@media (max-width: 360px) {
  .site-header--bar {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.5rem;
  }

  .primary-nav ul { gap: 0.5rem; }
  .primary-nav a { padding: 6px 6px; font-size: 0.95rem; }

  .site-main { max-width: 100%; margin: 1rem auto; padding: 0 0.5rem; }

  .footer-inner { gap: 1rem; }
  .footer-pages ul { gap: 0.5rem; }
  .footer-copy p { font-size: 0.8rem; }
}

/* Touch feedback (no underline) */
@media (hover: none) and (pointer: coarse) {
  a:active { opacity: 0.75; }
}

/* ===== Heading Hierarchy =====
   H1–H2: Public Sans (thin/light — elegant, architectural)
   H3–H4: Manrope (sturdy, readable at smaller sizes)
   H5–H6: Public Sans uppercase (utility labels)
   Colors: warm darks with subtle undertone — no pure black, nothing lighter than 50%
   ===== */

h1, h2, h3, h4, h5, h6 {
  margin: 1.25em 0 0.5em 0;
}
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child {
  margin-top: 0;
}

h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #555555;
}

h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #853c46;
}

h3 {
  font-family: 'Public Sans', sans-serif;
  font-weight: 200;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #33302c;
}

h4 {
  font-family: 'Public Sans', sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.35;
  color: #3e3b36;
}

h5 {
  font-family: 'Public Sans', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #494541;
}

h6 {
  font-family: 'Public Sans', sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4f4b47;
}

/* Responsive headings */
@media (max-width: 800px) {
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.7rem; }
  h3 { font-size: 1.3rem; }
  h4 { font-size: 1.125rem; }
}

@media (max-width: 360px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.2rem; }
  h4 { font-size: 1.05rem; }
}

/* ===== Headings: force thin, never thick or italic =====
   Content may wrap headings in <strong> or <em> via WordPress editor.
   Override to keep headings consistently thin and upright. */
.page-content h1 strong, .page-content h2 strong, .page-content h3 strong,.page-content h4 strong, .page-content h5 strong, .page-content h6 strong,h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
  font-weight: 200 !important;
  color: inherit !important;
}
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
  font-style: normal;
}


/* ===== WordPress Block Elements ===== */

/* Blockquotes */
.wp-block-quote {
  border-left: 1px solid #c5bfb8;
  margin: 0.5em 0;
  padding: 0 0 0 0.875em;
}
.wp-block-quote p {
  font-style: italic;
  color: #3e3b36;
  line-height: 1.4;
  margin: 0;
}

/* Separator / horizontal rule */
.wp-block-separator,.wp-block-separator.has-alpha-channel-opacity,hr {  border: none !important;  border-top: 1px solid #d5d1cc !important;  margin: 1em 0;    background: none !important;}

/* Paragraphs — reading comfort */
.page-content p,
.entry-content p {
  line-height: 1.4;
  color: #2a2724;
  margin-bottom: 0.5em;
}

/* Strong/emphasis in body text */
.page-content em,
.entry-content em {
  color: #3d3a36;
}
.page-content strong,
.entry-content strong {
  font-weight: 600;
  color: #3d3a36;
}

@media (max-width: 800px) {
}
@media (max-width: 360px) {
}
