/*
Theme Name:   Bentra
Theme URI:    https://bentra.ca/
Description:  Custom block theme for bentra.ca - a reading-first editorial theme
              for long-form trading and quant writing. No page builder: design
              tokens live in theme.json, layout in block templates, and every
              part of it is a file under version control.
Author:       Ben Dow
Version:      1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  bentra
*/

/* =========================================================================
   Utility + a11y layer. Design tokens live in theme.json; this file carries
   only what theme.json cannot express.
   ========================================================================= */

/* --- Focus: visible, never removed ------------------------------------- */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.bentra-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.7rem 1.1rem;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
}
.bentra-skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* --- Header ------------------------------------------------------------- */

.bentra-header {
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.bentra-header .wp-block-site-title a { text-decoration: none; }
.bentra-header .wp-block-navigation a {
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.bentra-header .wp-block-navigation a:hover,
.bentra-header .wp-block-navigation .current-menu-item a {
  border-bottom-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--ink);
}

/* --- Article body ------------------------------------------------------- */

/* Long-form measure: keep prose narrow even when the layout is wide. */
.bentra-prose :where(p, ul, ol, h2, h3, h4, blockquote) {
  max-width: 42rem;
}

.bentra-prose :where(p) { margin-block: 0 1.35em; }

.bentra-prose :where(h2) { margin-block: 2.4em 0.55em; }
.bentra-prose :where(h3) { margin-block: 1.9em 0.45em; }

/* First paragraph after the title reads as a standfirst. */
.bentra-prose > p:first-of-type {
  font-size: 1.3125rem;
  line-height: 1.55;
  color: var(--wp--preset--color--muted);
}

.bentra-prose :where(ul, ol) { padding-left: 1.3em; }
.bentra-prose :where(li) { margin-block: 0.35em; }

.bentra-prose :where(blockquote) {
  border-left: 3px solid var(--wp--preset--color--accent);
  padding-left: 1.15rem;
  margin-left: 0;
}

.bentra-prose :where(img) { height: auto; }

/* Inline code, as distinct from a code block. */
.bentra-prose :where(code):not(.wp-block-code code) {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.875em;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  overflow-wrap: break-word;
}

/* Code blocks scroll rather than forcing the page to. */
.wp-block-code,
.wp-block-preformatted {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wp-block-code code { white-space: pre; }

/* --- Tables ------------------------------------------------------------- */

.wp-block-table {
  overflow-x: auto;
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--small);
}
.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
}
.wp-block-table :where(th, td) {
  border: 1px solid var(--wp--preset--color--rule);
  padding: 0.55rem 0.7rem;
  text-align: left;
}
.wp-block-table :where(th) {
  background: var(--wp--preset--color--surface);
  font-weight: 600;
}
/* Numeric columns read better right-aligned. */
.wp-block-table.is-style-numeric :where(td:not(:first-child), th:not(:first-child)) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Post lists --------------------------------------------------------- */

/* Spacing and rules are owned by .bentra-card below, not by the post wrapper -
   putting them in both doubled the borders. */
.bentra-postlist .wp-block-post { margin-block: 0; }

.bentra-postlist .wp-block-post-title a { text-decoration: none; }
.bentra-postlist .wp-block-post-title a:hover { text-decoration: underline; }

.bentra-meta {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--wp--preset--color--muted);
}
.bentra-meta a { color: inherit; text-decoration: none; }
.bentra-meta a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }

/* --- Footer ------------------------------------------------------------- */

.bentra-footer {
  border-top: 1px solid var(--wp--preset--color--rule);
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
}
.bentra-footer a { color: inherit; }

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   Presence layer: logo, masthead, post cards, category chips.
   Added after first review - the bare-title list read as empty when six of
   seven posts actually have art.
   ========================================================================= */

/* --- Logo -------------------------------------------------------------- */

.bentra-header .wp-block-site-logo img {
  height: auto;
  max-height: 46px;
  width: auto;
}

/* --- Eyebrow labels ----------------------------------------------------- */

.bentra-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 600;
  color: var(--wp--preset--color--accent-green);
  margin: 0;
}

/* --- Masthead ----------------------------------------------------------- */

.bentra-masthead {
  border-top: 4px solid var(--wp--preset--color--brand-green);
  border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* Edge-to-edge is handled by the block's own alignfull, not by negative
   margins - doing both offset it twice. */

/* --- Section heads ------------------------------------------------------ */

.bentra-sectionhead {
  border-bottom: 1px solid var(--wp--preset--color--rule);
  padding-bottom: 0.6rem;
}

/* --- Post cards --------------------------------------------------------- */

.bentra-postlist .bentra-card {
  padding-block: 1.9rem;
  border-bottom: 1px solid var(--wp--preset--color--rule);
  margin-bottom: 0;
  gap: 1.75rem;
}
.bentra-postlist .wp-block-post:last-child .bentra-card { border-bottom: 0; }

.bentra-card__media .wp-block-post-featured-image {
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--wp--preset--color--surface);
}
.bentra-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease;
}
.bentra-card:hover .bentra-card__media img { transform: scale(1.03); }

/* A post with no featured image gives its width back to the text rather than
   leaving a hole. :has() is supported everywhere current; older browsers just
   see an empty column, which is survivable. */
.bentra-card:not(:has(.wp-block-post-featured-image img)) .bentra-card__media {
  display: none;
}
.bentra-card:not(:has(.wp-block-post-featured-image img)) > .wp-block-column {
  flex-basis: 100% !important;
}

.bentra-postlist .wp-block-post-title { line-height: 1.22; }
.bentra-postlist .wp-block-post-excerpt {
  color: var(--wp--preset--color--muted);
  margin-block: 0.4rem;
}
.bentra-postlist .wp-block-post-excerpt__more-text { display: none; }

/* --- Category chips ----------------------------------------------------- */

.bentra-chips {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}
.bentra-chips a {
  color: var(--wp--preset--color--accent-green);
  text-decoration: none;
}
.bentra-chips a:hover { text-decoration: underline; }

/* --- Single post: give the title some air and a rule ------------------- */

.wp-block-post-title { text-wrap: balance; }

/* --- Dark header -------------------------------------------------------- */
/* The logo asset (logonewft.png) is the white-on-dark variant - zero dark
   pixels in it - so the header band has to be dark for it to read at all.
   logonew.jpg is the light-background variant if this is ever reversed. */

.bentra-header {
  border-bottom: 0;
  border-top: 4px solid var(--wp--preset--color--brand-green);
}
.bentra-header .wp-block-navigation a {
  color: var(--wp--preset--color--base);
  text-decoration: none;
}
.bentra-header .wp-block-navigation a:hover,
.bentra-header .wp-block-navigation .current-menu-item a {
  color: var(--wp--preset--color--brand-green);
  border-bottom-color: var(--wp--preset--color--brand-green);
}
.bentra-header .wp-block-site-logo img { max-height: 42px; }

/* Masthead sits directly under the header, so drop its own top rule. */
.bentra-masthead { border-top: 0; }

/* --- Card proportions at wide width ------------------------------------- */

.bentra-card { align-items: flex-start; }
.bentra-postlist .wp-block-post-title {
  font-size: 1.6rem;
  max-width: 30ch;
}
.bentra-postlist .wp-block-post-excerpt { max-width: 62ch; }

/* .bentra-masthead__inner is the constrained child, so it takes the centring and
   everything inside it ranges left off the same edge as the cards below. */
.bentra-masthead__inner h1 { max-width: 26ch; }
.bentra-masthead__inner p:last-child { max-width: 60ch; }

/* --- SUG panel ---------------------------------------------------------- */
/* Dark ground: the Darwinex widget is a transparent PNG drawn in mid greys and
   teal, and it reads better on ink than on paper. Only the light variant of the
   widget exists - the "-d-" URL 403s - so the panel supplies the contrast. */

.bentra-sug { border-top: 4px solid var(--wp--preset--color--brand-green); }
.bentra-sug .bentra-eyebrow--onink { color: var(--wp--preset--color--brand-green); }
.bentra-sug h2 {
  font-size: 2.6rem;
  letter-spacing: 0.02em;
  line-height: 1;
}
.bentra-sug p { color: #C9CED4; }
.bentra-sug__links a {
  color: var(--wp--preset--color--base);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bentra-sug__links a:hover { color: var(--wp--preset--color--brand-green); }

.bentra-sug__chart img {
  width: 100%;
  height: auto;
  display: block;
  background: rgba(255,255,255,.94);
  border-radius: 4px;
  padding: 0.5rem;
}

/* --- Comment guard ------------------------------------------------------ */
/* Off-screen rather than display:none - some bots skip hidden inputs but will
   happily fill a field that is merely positioned away. Never focusable. */

.bentra-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Never upscale an image past its own resolution --------------------- */
/* The SUG post's featured image was 62x53 being stretched to 1056px. WordPress
   emits real width/height attributes, so `width:auto` makes the browser respect
   the intrinsic size and `max-width:100%` still lets big images shrink. */

.wp-block-post-featured-image img,
.bentra-prose .wp-block-image img {
  width: auto;
  height: auto;
  max-width: 100%;
}

/* Cards are a fixed-ratio grid, so they keep cover-cropping - but a source
   smaller than its slot is centred rather than blown up. */
.bentra-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Screen-reader-only text -------------------------------------------- */
/* Core's block library ships this, but the subscribe form's label depends on
   it, so the theme defines it rather than assuming. Clip rather than
   display:none - hidden text is not announced. */

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

/* --- Subscribe ---------------------------------------------------------- */
/* Lives in the footer, so it has to climb back out of the footer's muted,
   small, sans-serif context rather than inherit it. */

.bentra-subscribe {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 3px;
  padding: var(--wp--preset--spacing--40);
  margin-bottom: var(--wp--preset--spacing--50);
  color: var(--wp--preset--color--ink);
  scroll-margin-top: 2rem;
}

.bentra-subscribe__heading {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.011em;
  color: var(--wp--preset--color--ink);
  margin: 0 0 0.4rem;
}

.bentra-subscribe__text {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--ink);
  max-width: 48ch;
  margin: 0 0 1.15rem;
}

/* Input and button share a row until there is no room for both. */
.bentra-subscribe__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: stretch;
}

.bentra-subscribe__input {
  flex: 1 1 17rem;
  min-width: 0;
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 2px;
  padding: 0.7rem 0.85rem;
}
.bentra-subscribe__input::placeholder { color: var(--wp--preset--color--muted); opacity: 1; }

/* wp-element-button picks up the ink/accent button tokens from theme.json, so
   only the things a bare <button> gets wrong are set here. */
.bentra-subscribe__button {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  line-height: 1.2;
}

.bentra-subscribe__note {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--wp--preset--color--muted);
  margin: 0.85rem 0 0;
}

.bentra-subscribe__msg {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--small);
  border-left: 3px solid currentColor;
  padding: 0.15rem 0 0.15rem 0.7rem;
  margin: 0 0 1rem;
}
.bentra-subscribe__msg--ok    { color: var(--wp--preset--color--accent-green); }
/* Not a palette token on purpose: a form error is not part of the brand. */
.bentra-subscribe__msg--error { color: #8A2318; }

/* --- Subscribe modal ---------------------------------------------------- */
/* Native <dialog>, so the browser handles focus trapping, Escape and making
   the page behind inert. Everything here is presentation only. */

.bentra-modal {
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 4px;
  padding: 0;
  max-width: 33rem;
  width: calc(100% - 2rem);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--ink);
  box-shadow: 0 18px 50px rgba(20, 24, 29, .22);
  position: relative;
}

.bentra-modal::backdrop {
  background: rgba(20, 24, 29, .55);
}

/* The form inside is already a panel; inside the dialog it is the dialog. */
.bentra-modal .bentra-subscribe {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  background: transparent;
  padding: var(--wp--preset--spacing--40);
}

.bentra-modal__close {
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  z-index: 1;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.35rem 0.5rem;
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--preset--font-family--ui);
}
.bentra-modal__close:hover { color: var(--wp--preset--color--ink); }

/* Opening animation, skipped entirely for anyone who has asked it to be. */
@media (prefers-reduced-motion: no-preference) {
  .bentra-modal[open] { animation: bentra-modal-in .18s ease-out; }
  @keyframes bentra-modal-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Keep the heading clear of the close button at every width. */
.bentra-modal .bentra-subscribe__heading { padding-right: 2.25rem; }