/* =========================================================================
   THE GROWTH ENGINE  ·  wp.css
   The WordPress specific layer. core.css carries the design system; this
   file only covers what WordPress adds on top of it: the admin bar, the
   block editor's output, comments, pagination and the blog templates.
   ========================================================================= */

/* ---------- 1. The admin bar --------------------------------------------- */

body.admin-bar .nav { top: 32px; }
body.admin-bar .drawer { top: calc(var(--nav-h) + 32px); }

@media screen and (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
  body.admin-bar .drawer { top: calc(var(--nav-h) + 46px); }
}

/* The hero measures itself against the viewport, so give the admin bar back. */
@media screen and (min-width: 783px) {
  body.admin-bar .hero { min-height: min(calc(100svh - 32px), 1080px); }
}

/* ---------- 2. An uploaded logo, if one is set --------------------------- */

.logo-img img {
  display: block;
  height: auto;
  width: auto;
  max-height: 60px;
  max-width: 280px;
}
@media (max-width: 900px) { .logo-img img { max-height: 46px; max-width: 200px; } }

/* ---------- 3. The current menu item ------------------------------------- */

.nav__link.is-current { color: var(--ink); }
.nav__link.is-current::after { transform: scaleX(1); }

/* ---------- 4. Generic page and post type -------------------------------- */

.ge-page__head { max-width: 46rem; margin-bottom: clamp(24px, 3vw, 44px); }

.ge-prose { font-size: clamp(17px, 1.06vw, 19px); }
.ge-prose > * + * { margin-top: 1.1em; }
.ge-prose h2 { font-family: var(--display); font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -.028em; margin-top: 1.6em; }
.ge-prose h3 { font-family: var(--display); font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -.02em; margin-top: 1.5em; }
.ge-prose h4 { font-family: var(--display); font-size: clamp(18px, 1.3vw, 21px); margin-top: 1.4em; }
.ge-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ge-prose a:hover { color: var(--ink); }
.ge-prose ul, .ge-prose ol { padding-left: 1.3em; }
.ge-prose li + li { margin-top: .5em; }
.ge-prose img { height: auto; }
.ge-prose figure { margin: 1.6em 0; }
.ge-prose figcaption { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); margin-top: 10px; }
.ge-prose blockquote {
  margin: 1.6em 0;
  padding-left: clamp(16px, 2vw, 28px);
  border-left: 2px solid var(--accent);
  font-size: 1.08em;
  color: var(--ink-soft);
}
.ge-prose pre {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: clamp(14px, 1.6vw, 22px);
  overflow-x: auto;
}
.ge-prose code { font-family: var(--mono); font-size: .92em; }
.ge-prose :not(pre) > code {
  background: var(--accent-2);
  padding: .14em .4em;
  border-radius: 2px;
}
.ge-prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.2em 0; }
.ge-prose table { width: 100%; border-collapse: collapse; font-size: .94em; }
.ge-prose th, .ge-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-2); }
.ge-prose th { font-family: var(--display); font-weight: 600; }

/* ---------- 5. Block editor alignment ------------------------------------ */

.ge-prose .alignleft  { float: left;  margin: .4em 1.6em 1em 0; max-width: 46%; }
.ge-prose .alignright { float: right; margin: .4em 0 1em 1.6em; max-width: 46%; }
.ge-prose .aligncenter { margin-left: auto; margin-right: auto; display: block; }
.ge-prose .alignwide { width: min(100%, 1060px); margin-left: auto; margin-right: auto; }
.ge-prose .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.ge-prose .wp-caption { max-width: 100%; }
.ge-prose .wp-caption-text { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ge-prose .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ge-prose .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  padding: 16px 26px; text-decoration: none; border-radius: 0;
}
.ge-prose .wp-block-button__link:hover { background: var(--accent); color: #fff; }
.ge-prose .wp-block-separator { border-top: 1px solid var(--border); }
.ge-prose .wp-block-pullquote { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1.4em 0; }

/* Sticky posts and password forms, so the theme passes review cleanly. */
.sticky .ge-page__head::before {
  content: "Pinned";
  display: inline-block;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.post-password-form input[type="password"] {
  border: 1px solid var(--border-3); background: var(--surface);
  padding: 12px 14px; font-family: var(--mono); font-size: 14px;
}
.bypostauthor > .comment-body { border-left: 2px solid var(--accent); padding-left: 14px; }

/* ---------- 6. Pagination and post navigation ---------------------------- */

.ge-pagination { margin-top: clamp(32px, 4vw, 60px); }
.ge-pagination .nav-links {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
}
.ge-pagination .page-numbers {
  display: inline-block; padding: 9px 14px;
  border: 1px solid var(--border); text-decoration: none; color: var(--ink-soft);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.ge-pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.ge-pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.ge-postnav {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 56px); padding-top: 22px;
  border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em;
}
.ge-postnav a { text-decoration: none; color: var(--ink-soft); }
.ge-postnav a:hover { color: var(--accent); }

.ge-pagelinks { font-family: var(--mono); font-size: 13px; margin-top: 24px; }

/* ---------- 7. Search form ----------------------------------------------- */

.ge-search { display: flex; gap: 10px; flex-wrap: wrap; }
.ge-search input[type="search"] {
  flex: 1 1 200px;
  border: 1px solid var(--border-3);
  background: var(--surface);
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 14px;
}
.ge-search input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 8. Comments --------------------------------------------------- */

.ge-comments { border-top: 1px solid var(--border); padding-top: clamp(26px, 3vw, 44px); }
.ge-commentlist { list-style: none; margin: 24px 0 0; padding: 0; }
.ge-commentlist ol { list-style: none; padding-left: clamp(18px, 3vw, 40px); }
.ge-commentlist li { margin-bottom: 22px; }
.ge-comments .comment-meta { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.ge-comments .comment-meta a { text-decoration: none; color: inherit; }
.ge-comments .avatar { border-radius: 50%; margin-right: 10px; vertical-align: middle; }
.ge-comments .comment-body { border-bottom: 1px solid var(--border-2); padding-bottom: 18px; }
.ge-comments .comment-reply-link { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--accent); text-decoration: none; }

.comment-form label { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  border: 1px solid var(--border-3);
  background: var(--surface);
  padding: 12px 14px;
  font-family: var(--body);
  font-size: 16px;
}
.comment-form p { margin-bottom: 16px; }
.comment-form .submit {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  padding: 16px 26px; border: 0; cursor: pointer;
}
.comment-form .submit:hover { background: var(--accent); color: #fff; }

/* ---------- 9. The blog sidebar ------------------------------------------ */

.ge-sidebar { margin-top: clamp(36px, 4vw, 64px); }
.ge-sidebar .widget + .widget { margin-top: 30px; }
.widget__title { font-family: var(--display); font-size: 18px; letter-spacing: -.015em; margin-bottom: 12px; }
.ge-sidebar ul { list-style: none; margin: 0; padding: 0; font-size: 16px; }
.ge-sidebar li + li { margin-top: 8px; }
.ge-sidebar a { color: var(--ink-soft); text-decoration: none; }
.ge-sidebar a:hover { color: var(--accent); }

/* ---------- 10. The live video player ------------------------------------ */

.player--live { padding: 0; border: 1px solid var(--border); background: #000; }
.player--live iframe,
.player--live video,
.player--live .wp-video,
.player--live .wp-video-shortcode {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}