/* ==========================================================================
   Xentham — WordPress bridge
   The V3 stylesheets were written against hand-authored markup. This file
   covers only what WordPress adds on top: editor blocks inside .prose, the
   comment list, the custom-logo wrapper, and the handful of core utility
   classes themes are expected to style. It defines no new design tokens —
   everything here reuses the variables from v3.css.
   ========================================================================== */

/* --- Accessibility ------------------------------------------------------- */

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: var(--s-16);
  left: var(--s-16);
  z-index: 200;
  width: auto; height: auto;
  clip-path: none;
  padding: 12px 18px;
  background: var(--gold);
  color: #100E0B;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.xentham-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Custom logo --------------------------------------------------------- */

/* xentham_logo() renders the image without WordPress's own anchor — see the
   note there. The inline width it sets is the source of truth; this caps the
   height so a logo with unusual proportions cannot stretch the bar. */
.nav__logo .custom-logo { max-height: 40px; width: auto; object-fit: contain; }
.footer__logo .custom-logo { max-height: 35px; width: auto; object-fit: contain; }

.nav__wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* --- Real images in placeholder frames ----------------------------------- */

/* .ph draws a dashed, labelled box. When a featured image exists the frame
   keeps its dimensions but drops the placeholder chrome. */
.ph--has-image {
  border-style: solid;
  padding: 0;
  overflow: hidden;
  background: var(--card);
}
.ph--has-image img { width: 100%; height: 100%; object-fit: cover; }

/* --- Editor content inside .prose ---------------------------------------- */

.prose a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--gold); }

.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }

.prose h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-top: var(--s-32);
  scroll-margin-top: 104px;
}

.prose blockquote {
  margin: 0;
  padding-left: var(--s-24);
  border-left: 2px solid var(--gold-brd);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.6;
}
.prose blockquote cite {
  display: block;
  margin-top: var(--s-12);
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: .1em;
  color: var(--muted);
}

.prose figure { margin: 0; }
.prose figcaption,
.wp-element-caption {
  margin-top: var(--s-8);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted);
}

.prose img,
.prose video,
.prose iframe { border-radius: 4px; border: 1px solid var(--line); }

.prose hr,
.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--s-48);
}

.prose code,
.prose kbd {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 6px;
}
.prose pre {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--s-24);
  overflow-x: auto;
}
.prose pre code { background: none; border: 0; padding: 0; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.prose th,
.prose td {
  padding: var(--s-12) var(--s-16);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.prose th {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}

/* --- Core block alignment ------------------------------------------------ */

.alignleft  { float: left;  margin: 0 var(--s-24) var(--s-16) 0; }
.alignright { float: right; margin: 0 0 var(--s-16) var(--s-24); }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }
.prose .alignwide  { width: min(100vw - (var(--gutter) * 2), 900px); margin-inline: auto; }
.prose .alignfull  { width: 100%; }

.wp-caption { max-width: 100%; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-16); }
.gallery-item img { width: 100%; }

/* Sticky posts get the gold hairline the design uses for anything featured. */
.post-grid .sticky { border-color: var(--gold-brd); }

/* --- Widgets ------------------------------------------------------------- */

.widget { margin-bottom: var(--s-32); }
.widget__title {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: var(--s-12);
}
.widget ul { display: flex; flex-direction: column; gap: var(--s-8); }
.widget a { color: #CFC5BA; }
.widget a:hover { color: var(--gold-deep); }

/* --- Comments ------------------------------------------------------------ */

.comments { max-width: 68ch; margin-top: var(--s-64); }
.comments .h-sec { margin-bottom: var(--s-24); }

.comment-list,
.comment-list .children {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
}
.comment-list .children { margin-top: var(--s-24); padding-left: var(--s-24); border-left: 1px solid var(--line); }

.comment-body {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--s-24);
  box-shadow: var(--shadow-card);
}
.comment-author { display: flex; align-items: center; gap: var(--s-12); }
.comment-author img { border-radius: 50%; }
.comment-author .fn { font-family: var(--display); font-weight: 700; font-size: 14px; font-style: normal; }
.comment-metadata,
.comment-metadata a,
.reply a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted);
}
.reply a:hover { color: var(--gold-deep); }
.comment-content { margin-top: var(--s-12); color: #CFC5BA; }
.comment-content > * + * { margin-top: var(--s-16); }

.comment-respond { margin-top: var(--s-48); }
.comment-form { width: 100%; }
.comment-form .field,
.comment-form p { width: 100%; }
.comment-form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  padding: var(--s-8) 0;
  resize: vertical;
}
.comment-form textarea:focus { outline: none; border-bottom-color: var(--gold); }
.comment-form .comment-notes,
.comment-form .logged-in-as { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.comment-form .comment-notes a,
.comment-form .logged-in-as a { color: var(--gold-deep); }

/* --- Password-protected posts and the core search form ------------------- */

.post-password-form input[type="password"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  padding: var(--s-8) 0;
}

/* --- Admin bar ----------------------------------------------------------- */

/* The nav is sticky at top:0, so it slides under the fixed admin bar unless it
   is offset by the same height. Below 600px WordPress makes the bar absolute —
   it scrolls away, and the offset has to go with it. */
body.admin-bar .nav { top: 32px; }

@media (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
}

@media (max-width: 600px) {
  body.admin-bar .nav { top: 0; }
}

/* --- Fallback forms ------------------------------------------------------ */

/* When Forminator is inactive the theme renders its own form inside the lead
   card. The card used to be the <form> itself and supplied the 24px stack, so
   the form element now has to. Lives here rather than in forminator.css because
   this is exactly the case where that stylesheet is not loaded. */
.lead__native {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  align-items: stretch;
}

.lead__native .btn { justify-content: flex-start; }