/*
Theme Name: WorkifyLab Organic
Theme URI: https://workifylab.com
Description: Warm, editorial blogging + social platform theme for WorkifyLab. Child of Twenty Twenty-Five. Built from design-organic.md — the pivot design system. Tokens live in theme.json; components here.
Author: WorkifyLab
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: workifylab-organic
*/

/* ---- token bridge: readable names for the component CSS ---- */
:root {
  --paper:      var(--wp--preset--color--paper);
  --bg:         var(--wp--preset--color--bg);
  --surface:    var(--wp--preset--color--surface);
  --ink:        var(--wp--preset--color--ink);
  --ink-soft:   var(--wp--preset--color--ink-soft);
  --accent:     var(--wp--preset--color--accent);
  --accent-100: var(--wp--preset--color--accent-100);
  --accent-200: var(--wp--preset--color--accent-200);
  --accent-800: var(--wp--preset--color--accent-800);
  --accent-ink: var(--wp--preset--color--accent-ink);
  --sage:       var(--wp--preset--color--sage);
  --sage-100:   var(--wp--preset--color--sage-100);
  --sage-200:   var(--wp--preset--color--sage-200);
  --sage-800:   var(--wp--preset--color--sage-800);
  --neutral-200:var(--wp--preset--color--neutral-200);
  --neutral-800:var(--wp--preset--color--neutral-800);

  --face-display: var(--wp--preset--font-family--display);
  --face-body:    var(--wp--preset--font-family--body);

  --divider: rgba(32,30,29,.10);
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 30px rgba(32,30,29,.18);

  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --z-sticky: 100;
}

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

body { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* sticky footer: fill the viewport so the footer sits at the bottom on short
   pages (empty search, empty feed) instead of floating mid-screen. */
.wp-site-blocks { display: flex; flex-direction: column; min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); }
.wp-site-blocks > main,
.wp-site-blocks > main.wp-block-group { flex: 1 0 auto; }
.wp-site-blocks > .wl-footer,
.wp-site-blocks > footer { flex: none; margin-top: auto; }

/* Fraunces reads best with a light optical size at display sizes */
h1, h2, h3, .wp-block-heading, .card-title {
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  text-wrap: balance;
}
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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

/* --------------------------------------------------------------- nav */

.wl-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--divider);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.nav-brand {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: 8px;
  text-decoration: none;
}
/* width/height attrs on the <img> carry the intrinsic ratio, so sizing by
   height alone reserves the right box and the sticky nav never shifts. */
.nav-brand img { height: 40px; width: auto; display: block; }
.wl-nav__link { font-size: 0.875rem; color: var(--ink); text-decoration: none; opacity: .85; }
.wl-nav__link:hover { opacity: 1; color: var(--accent-800); }
.wl-nav__spacer { margin-left: auto; }
.wl-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: 999px; padding: 7px 16px; min-width: 200px;
  color: color-mix(in srgb, var(--ink) 50%, transparent); font-size: 0.8125rem;
}
/* header search is a real form now: the input blends into the pill */
.wl-search input[type="search"] {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--face-body); font-size: 0.8125rem; color: var(--ink); padding: 0;
}
.wl-search input[type="search"]::placeholder { color: color-mix(in srgb, var(--ink) 50%, transparent); }

/* search-results page form (wp:search block) */
.wl-searchform .wp-block-search__inside-wrapper {
  display: flex; gap: 8px; max-width: 520px; border: 0; padding: 0;
}
.wl-searchform .wp-block-search__input {
  flex: 1; background: #FFFDF8; border: 1.5px solid rgba(32,30,29,.32) !important;
  border-radius: 999px; padding: 12px 18px; font-family: var(--face-body); font-size: 1rem; color: var(--ink);
}
.wl-searchform .wp-block-search__button {
  background: var(--accent-800); color: #fff; border: 0; border-radius: 999px;
  padding: 12px 24px; font-weight: 600; font-family: var(--face-body); cursor: pointer; margin: 0;
}
.wl-searchform .wp-block-search__button:hover { background: var(--accent-ink); }
.wl-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sage-200); color: var(--sage-800);
  display: grid; place-content: center; font-weight: 700; font-size: 0.8125rem;
  flex: none; overflow: hidden;
}

/* real avatar photos fill their circular container (fallback stays the initial) */
.wl-avatar img, .wl-byline__avatar img, .wl-authorrow__avatar img,
.wl-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.wl-byline__avatar, .wl-authorrow__avatar { overflow: hidden; }

/* ------------------------------------------------ account dropdown menu */

.wl-account { position: relative; flex: none; }
.wl-account .wl-avatar { cursor: pointer; user-select: none; transition: box-shadow .18s var(--ease); }
.wl-account-cb { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.wl-account-cb:focus-visible + .wl-avatar,
.wl-account .wl-avatar:hover { box-shadow: 0 0 0 3px var(--sage-200); }

.wl-account-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none; flex-direction: column;
  z-index: 60;
}
.wl-account-cb:checked ~ .wl-account-menu { display: flex; }

.wl-account-backdrop { display: none; position: fixed; inset: 0; z-index: 50; cursor: default; }
.wl-account-cb:checked ~ .wl-account-backdrop { display: block; }

.wl-account-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px 10px;
  font-size: 0.75rem; color: var(--ink-soft);
  border-bottom: 1px solid var(--divider);
  margin-bottom: 4px;
}
.wl-account-head strong { font-size: 0.9375rem; color: var(--ink); font-weight: 700; }

.wl-account-menu a {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 0.875rem; font-weight: 500; color: var(--ink);
  text-decoration: none; transition: background-color .14s var(--ease);
}
.wl-account-menu a:hover { background: var(--sage-100); color: var(--accent-800); }

.wl-account-logout {
  margin-top: 4px; border-top: 1px solid var(--divider);
  border-radius: 0 0 9px 9px !important;
  color: var(--accent-800) !important; font-weight: 600 !important;
}
.wl-account-logout:hover { background: var(--accent-100) !important; }

/* ============================================ front-end auth (login + signup)
   Full-bleed split screen matching the auth comp: a colored aside (wordmark +
   Fraunces headline + quote/blobs) beside a cream form panel. Used by /login/
   and the BuddyPress /register/ page — where the site nav + footer are hidden. */

body.wl-auth-page { overflow-x: hidden; }
body.wl-auth-page .wp-site-blocks > header,
body.wl-auth-page .wp-site-blocks > footer { display: none !important; }
body.wl-auth-page main {
  max-width: none !important; width: 100%;
  padding: 0 !important; margin: 0 !important; flex: 1;
}
body.wl-auth-page main > .entry-content,
body.wl-auth-page .wp-block-post-content { max-width: none !important; margin: 0 !important; padding: 0 !important; }
body.wl-auth-page .entry-content > *,
body.wl-auth-page .wp-block-post-content > *,
body.wl-auth-page #buddypress,
body.wl-auth-page #register-page { max-width: none !important; margin: 0 !important; }
/* BuddyPress's own wrapper adds 24px/56px/40px padding — the source of the
   register page's overflow. Zero it so the split screen sits flush. */
body.wl-auth-page #buddypress { padding: 0 !important; }

.wl-auth-screen {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 100vh; background: #F5EAD8; font-family: var(--face-body);
}

/* ---- left aside ---- */
.wl-auth-aside {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 44px 48px;
}
.wl-auth-aside--signup { background: #E9F0DA; }
.wl-auth-aside--login  { background: #FBEBE2; }
.wl-auth-brand {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; text-decoration: none;
}
.wl-auth-brand img { height: 44px; width: auto; display: block; }
.wl-auth-blob { position: absolute; z-index: 0; border-radius: 50%; }
.wl-auth-blob--peach { width: 190px; height: 190px; background: #FFD5BE; }
.wl-auth-blob--sage  { width: 170px; height: 170px; background: #D5E4B8; }
.wl-auth-aside--signup .wl-auth-blob--peach { top: 120px; right: -34px; }
.wl-auth-aside--signup .wl-auth-blob--sage  { bottom: -46px; left: 32%; }
.wl-auth-aside--login  .wl-auth-blob--peach { top: -44px; left: -30px; }
.wl-auth-aside--login  .wl-auth-blob--sage  { bottom: 44px; right: 16%; }

.wl-auth-aside-copy { position: relative; z-index: 2; }
.wl-auth-aside-copy--mobile { display: none; }
.wl-auth-headline {
  font-family: var(--face-display); font-weight: 600; color: var(--ink);
  font-size: clamp(1.9rem, 3vw, 2.55rem); line-height: 1.12; margin: 0 0 22px;
}
.wl-auth-aside-sub { color: var(--ink-soft); font-size: 0.95rem; margin: 0; max-width: 32ch; }

.wl-auth-pitch { margin: 0; max-width: 340px; }
.wl-auth-pitch p {
  position: relative; margin: 0 0 13px; padding-left: 26px;
  font-size: 0.95rem; line-height: 1.35; color: var(--ink); font-weight: 500;
}
.wl-auth-pitch p:last-child { margin-bottom: 0; }
.wl-auth-pitch p::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent-800); font-weight: 800;
}

/* ---- right form panel ---- */
.wl-auth-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 48px; background: #F5EAD8;
}
.wl-auth-form { width: 100%; max-width: 380px; }
.wl-auth-title { font-family: var(--face-display); font-weight: 600; font-size: 2rem; line-height: 1.1; margin: 0 0 6px; color: var(--ink); }
.wl-auth-sub { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.wl-auth-panel-head { margin-bottom: 26px; }

.wl-auth-notice {
  background: var(--sage-100); color: var(--sage-800);
  border-radius: 10px; padding: 11px 14px; font-size: 0.875rem; margin: 0 0 18px;
}
.wl-auth-notice.is-error { background: var(--accent-100); color: var(--accent-ink); }

/* Nextend "Continue with Google" */
.wl-auth-social { margin: 0; }
.wl-auth-social .nsl-container { max-width: none !important; margin: 0 !important; }
.wl-auth-social .nsl-container .nsl-button {
  border-radius: 12px !important; box-shadow: none !important;
  background: #FFFDF8 !important; border: 1.5px solid rgba(32,30,29,.14) !important;
}

.wl-auth-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 0; color: var(--ink-soft); font-size: 0.8125rem;
}
.wl-auth-divider::before, .wl-auth-divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(32,30,29,.14);
}

/* ---- fields (custom login form; signup fields styled in buddypress.css) ---- */
.wl-auth-field { margin: 0 0 16px; }
.wl-auth-field label,
.wl-auth-label-row label { display: block; font-weight: 600; font-size: 0.85rem; color: var(--ink); margin-bottom: 7px; }
.wl-auth-label-row { display: flex; align-items: baseline; justify-content: space-between; }
.wl-auth-label-row label { margin-bottom: 0; }
.wl-auth-forgot { font-size: 0.8rem; color: var(--accent-800); text-decoration: none; font-weight: 600; }
.wl-auth-forgot:hover { text-decoration: underline; }
.wl-auth-fields input[type="text"],
.wl-auth-fields input[type="password"] {
  width: 100%; background: #EBDDC5; border: 1px solid transparent;
  border-radius: 11px; padding: 13px 16px; font-family: var(--face-body);
  font-size: 0.95rem; color: var(--ink); box-shadow: none;
}
.wl-auth-fields input::placeholder { color: #9b8f7e; }
.wl-auth-fields input:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: #E6D6BC; }

.wl-auth-submit {
  width: 100%; margin-top: 6px; background: var(--accent-800); color: #fff;
  border: 0; border-radius: 999px; padding: 14px 22px; font-family: var(--face-body);
  font-weight: 700; font-size: 0.95rem; cursor: pointer; line-height: 1.2;
  transition: background-color .18s var(--ease);
}
.wl-auth-submit:hover { background: var(--accent-ink); }

.wl-auth-alt { text-align: center; font-size: 0.9rem; color: var(--ink-soft); margin: 20px 0 0; }
.wl-auth-alt a { color: var(--accent-800); font-weight: 700; text-decoration: none; }
.wl-auth-alt a:hover { text-decoration: underline; }

/* signup carries more fields than login, so tighten it to avoid a scrollbar
   (scoped to --signup; the login screen keeps its roomier spacing) */
.wl-auth--signup .wl-auth-panel { padding-top: 24px; padding-bottom: 30px; }
.wl-auth--signup .wl-auth-panel-head { margin-bottom: 10px; }
.wl-auth--signup .wl-auth-panel-head .wl-auth-title { margin-bottom: 2px; }
.wl-auth--signup .wl-auth-divider { margin: 12px 0; }
.wl-auth--signup .wl-auth-alt { margin-top: 14px; }

/* ---- stack into a single card on small screens ---- */
@media (max-width: 820px) {
  .wl-auth-screen { grid-template-columns: 1fr; }
  .wl-auth-aside { padding: 28px 26px; gap: 14px; }
  .wl-auth-aside-copy--desktop { display: none; }
  .wl-auth-aside-copy--mobile { display: block; }
  .wl-auth-aside-copy--mobile .wl-auth-title { font-size: 1.6rem; margin: 12px 0 4px; }
  .wl-auth-panel { padding: 28px 26px 36px; align-items: flex-start; }
  .wl-auth-panel-head { display: none; }
  .wl-auth-form { max-width: 460px; margin: 0 auto; }
}

/* ------------------------------------------------ front-end write (/write/) */

.wl-write { display: flex; justify-content: center; padding: 8px 0 24px; }
.wl-write-card {
  width: 100%; max-width: 720px;
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: 20px; box-shadow: var(--shadow-sm);
  padding: 32px 34px 34px;
}
.wl-write-title { font-family: var(--face-display); font-weight: 600; font-size: 1.9rem; line-height: 1.12; margin: 0 0 6px; }
.wl-write-sub { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 22px; }
.wl-write-sub a { color: var(--accent-800); font-weight: 600; }

.wl-write-form label {
  display: block; font-weight: 600; font-size: 0.875rem; color: var(--ink);
  margin: 18px 0 7px;
}
.wl-write-form label:first-of-type { margin-top: 4px; }
.wl-write-opt { font-weight: 500; color: var(--ink-soft); font-size: 0.8rem; }
.wl-write-form input[type="text"] {
  width: 100%; background: #FFFDF8; border: 1.5px solid rgba(32,30,29,.28);
  border-radius: 12px; padding: 12px 15px; font-family: var(--face-body);
  font-size: 0.95rem; color: var(--ink); box-shadow: none;
}
.wl-write-form input[type="text"]:focus {
  border-color: var(--accent-800);
  outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 1px;
}
.wl-write-form input#wlo_title { font-family: var(--face-display); font-size: 1.15rem; }

/* cover-image file picker */
.wl-write-file {
  display: block; width: 100%; font-family: var(--face-body); font-size: 0.875rem;
  color: var(--ink-soft); background: #FFFDF8;
  border: 1.5px dashed rgba(32,30,29,.28); border-radius: 12px; padding: 12px 15px;
}
.wl-write-file::file-selector-button {
  margin-right: 12px; padding: 8px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--sage-200); color: var(--sage-800);
  font-family: var(--face-body); font-weight: 600; font-size: 0.8125rem;
}
.wl-write-file::file-selector-button:hover { background: var(--sage-100); }
.wl-write-file:focus { outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 1px; border-color: var(--accent-800); }

/* the wp_editor (teeny TinyMCE / quicktags) framed like the other fields */
.wl-write-form .wp-editor-wrap { margin-top: 2px; }
.wl-write-form .wp-editor-container {
  border: 1.5px solid rgba(32,30,29,.28); border-radius: 12px; overflow: hidden; background: #FFFDF8;
}
.wl-write-form .mce-toolbar-grp,
.wl-write-form .quicktags-toolbar { background: #F3EADB !important; border-bottom: 1px solid var(--divider) !important; }
.wl-write-form .wp-editor-area { border: 0 !important; background: #FFFDF8; font-family: var(--face-body); }
.wl-write-form textarea.wp-editor-area { padding: 12px 15px; }

.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* "Add image to article" control */
.wl-write-inline { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.wl-write-addimg {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--sage-100); color: var(--sage-800); border: 0; border-radius: 999px;
  padding: 9px 16px; font-family: var(--face-body); font-weight: 600; font-size: 0.8125rem; cursor: pointer;
  transition: background-color .15s var(--ease);
}
.wl-write-addimg:hover { background: var(--sage-200); }
.wl-write-addimg[disabled] { opacity: .6; cursor: progress; }
.wl-write-inline-status { font-size: 0.8rem; color: var(--ink-soft); }

/* images inside article bodies stay contained and on-brand */
.wl-prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0; }

.wl-write-submit {
  margin-top: 22px; width: 100%; background: var(--accent-800); color: #fff;
  border: 0; border-radius: 999px; padding: 14px 22px; cursor: pointer;
  font-family: var(--face-body); font-weight: 700; font-size: 0.95rem; line-height: 1.2;
  transition: background-color .18s var(--ease);
}
.wl-write-submit:hover { background: var(--accent-ink); }
.wl-write-note { text-align: center; color: var(--ink-soft); font-size: 0.8rem; margin: 12px 0 0; }

.wl-write-done { text-align: center; }
.wl-write-done .wl-write-sub { margin-bottom: 24px; }
.wl-write-done-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--face-body); font-weight: 600; font-size: 0.875rem;
  padding: 9px 18px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .1s var(--ease);
}
.btn:active { transform: translateY(1px); }
/* Deep terracotta, not the bright --accent: white label text needs 4.5:1, and
   only the deeper shade clears it. Bright terracotta stays for large/non-text. */
.btn-primary { background: var(--accent-800); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); color: #fff; }
.btn-secondary { background: transparent; border-color: color-mix(in srgb, var(--ink) 25%, transparent); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--surface); }
.btn-icon { width: 40px; height: 40px; padding: 0; }
.btn svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------- tags
   Scoped to a/span pills. WordPress adds class="tag" to <body> on tag archives,
   so a bare `.tag { background }` rule painted the whole page terracotta. */

a.tag, span.tag {
  display: inline-flex; align-items: center;
  font-family: var(--face-body); font-weight: 600; font-size: 0.75rem;
  padding: 6px 14px; border-radius: 999px; line-height: 1;
  background: var(--accent-800); color: #fff; text-decoration: none;
}
a.tag-neutral, span.tag-neutral { background: var(--neutral-200); color: var(--neutral-800); }
a.tag-accent, span.tag-accent { background: var(--accent-100); color: var(--accent-800); }
a.tag-accent-2, span.tag-accent-2 { background: var(--sage-100); color: var(--sage-800); }
a.tag-outline, span.tag-outline { background: transparent; border: 1px solid var(--divider); color: var(--ink-soft); }

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

.card {
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card-title {
  font-family: var(--face-display); font-weight: 500;
  font-size: 1.25rem; line-height: 1.2; color: var(--ink);
  text-decoration: none;
}
a.card-title:hover { color: var(--accent-800); }

/* tinted image placeholder — real images replace it later */
.washed {
  display: grid; place-content: center;
  background: var(--accent-100); color: var(--accent-800);
}

/* --------------------------------------------------------------- inputs */

.input {
  font-family: var(--face-body); font-size: 0.9375rem;
  padding: 11px 16px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--divider); color: var(--ink);
  width: 100%;
}
.input::placeholder { color: color-mix(in srgb, var(--ink) 45%, transparent); }

/* --------------------------------------------------------------- segmented */

.seg { display: inline-flex; background: var(--surface); border-radius: 999px; padding: 4px; gap: 2px; }
.seg-opt {
  font-family: var(--face-body); font-weight: 600; font-size: 0.8125rem;
  padding: 8px 20px; border-radius: 999px; color: var(--ink-soft);
  cursor: pointer; text-decoration: none;
}
.seg-opt.is-active { background: var(--accent-800); color: #fff; }

/* --------------------------------------------------------------- home feed */

.wl-hero { max-width: 1180px; margin-inline: auto; padding: clamp(1.75rem,4vw,2.25rem) clamp(1.25rem,4vw,2.5rem) 0.75rem; }
.wl-eyebrow {
  font-family: var(--face-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink);
  margin: 0 0 10px;
}
.wl-hero h1 { font-size: var(--wp--preset--font-size--display); margin: 0 0 20px; max-width: 20ch; }
.wl-filter { display: flex; gap: 8px; flex-wrap: wrap; }

/* archive (tag/category) header */
.wl-archive-title {
  font-family: var(--face-display); font-weight: 500;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);
  line-height: 1.1; margin: 0 0 6px;
}
.wl-archive-title::before { content: "Tagged  "; color: var(--ink-soft); font-weight: 500; }
.wl-archive-desc { color: var(--ink-soft); max-width: var(--measure); margin: 0 0 18px; }

/* search results title — same look as the archive title, but NO "Tagged" prefix */
.wl-search-title {
  font-family: var(--face-display); font-weight: 500;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);
  line-height: 1.1; margin: 0 0 16px;
}

/* /tags/ page: big pill cloud */
.wl-tagcloud { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; }
.wl-tagcloud .tag { font-size: 0.9375rem; padding: 9px 18px; }

.wl-feed { max-width: 1180px; margin-inline: auto; padding: 24px clamp(1.25rem,4vw,2.5rem) clamp(2.5rem,5vw,3.5rem); }
/* The grid lives on the post-template <ul>, not the query wrapper: WordPress
   nests the actual <li> cards inside .wp-block-post-template. */
.wl-feed .wp-block-post-template {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.wl-feed .wp-block-post-template > li { margin: 0; }
/* post card — matches the comp (media, tag, title, excerpt, rich byline) */
.wl-post-card { padding: 0; overflow: hidden; }

/* tinted media placeholder, rotating the comp's three tints */
.wl-post-card__media { height: 150px; display: grid; place-content: center; overflow: hidden; }
.wl-post-card__media img { width: 100%; height: 150px; object-fit: cover; display: block; }
.washed--sage    { background: var(--sage-200);   color: var(--sage-800); }
.washed--peach   { background: var(--accent-200); color: var(--accent-800); }
.washed--neutral { background: var(--neutral-200); color: var(--neutral-800); }

.wl-post-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 16px; }
.wl-post-card .card-title { font-size: 1.25rem; color: var(--ink); text-decoration: none; align-self: flex-start; }
.wl-post-card .card-title:hover { color: var(--accent-800); }
.wl-post-card__excerpt { margin: 0; font-size: 0.875rem; line-height: 1.55; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.wl-post-card .tag { align-self: flex-start; }

/* rich byline: avatar · author · N min read · ♥ likes · bookmark */
.wl-byline { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.75rem; color: color-mix(in srgb, var(--ink) 60%, transparent); }
.wl-byline__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-100); color: var(--accent-800); display: grid; place-content: center; font-weight: 700; font-size: 0.6875rem; flex: none; }
.wl-byline__author { font-weight: 600; color: var(--ink); }
.wl-byline__meta { white-space: nowrap; }
.wl-byline__likes { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.wl-byline__bookmark { display: inline-flex; }
.wl-byline strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- post page */

.wl-post { max-width: 720px; margin: 0 auto; padding: 32px clamp(1.25rem,4vw,2.5rem) 56px; }
.wl-post__back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
.wl-post h1 { font-size: clamp(2rem, 1.4rem + 3vw, 2.875rem); line-height: 1.08; margin: 20px 0 14px; max-width: 20ch; }
.wl-post__standfirst { font-size: 1.125rem; line-height: 1.5; margin: 0 0 24px; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.wl-authorrow {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; margin: 4px 0 8px;
  border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
}
.wl-authorrow__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--accent-100); color: var(--accent-800);
  display: grid; place-content: center; font-weight: 700; font-size: 0.9375rem;
}
.wl-authorrow__name { font-weight: 700; font-size: 0.875rem; color: var(--ink); }
.wl-authorrow__meta { font-size: 0.8125rem; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.wl-authorrow .wlo-follow { margin-left: auto; }

.wl-prose { }
.wl-prose > p { font-size: 1.0625rem; line-height: 1.75; margin: 0 0 20px; }
.wl-prose h2 { font-size: 1.625rem; margin: 36px 0 14px; }
.wl-prose h3 { font-size: 1.3rem; margin: 28px 0 12px; }
.wl-prose blockquote {
  margin: 8px 0 24px; padding: 0; border: none;
  font-family: var(--face-display); font-weight: 500; font-style: italic;
  font-size: 1.5rem; line-height: 1.35; color: var(--accent-800); max-width: 26ch;
}
.wl-prose img { border-radius: var(--radius-lg); }

/* reactions bar */
.wl-reactions {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface); border-radius: 999px; padding: 6px 10px; box-shadow: var(--shadow-sm);
  margin: 8px 0 4px; width: fit-content;
}
.wlo-like, .wlo-react, .wl-reactions .wlo-bookmark {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--face-body); font-weight: 600; font-size: 0.875rem;
  color: var(--ink); background: transparent; border: 0; border-radius: 999px;
  padding: 6px 12px; cursor: pointer; text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.wlo-like:hover, .wlo-react:hover, .wl-reactions .wlo-bookmark:hover { background: var(--bg); }
.wlo-like.is-liked, .wlo-bookmark.is-saved { color: var(--accent-ink); }
.wlo-like.is-liked svg, .wlo-bookmark.is-saved svg { fill: var(--accent-ink); }
.wlo-react[disabled] { opacity: .45; cursor: default; }
.wlo-like[disabled], .wlo-bookmark[disabled] { cursor: progress; }

/* functional like + bookmark inside feed-card bylines: minimal, inline */
.wl-byline .wlo-like,
.wl-byline .wlo-bookmark {
  padding: 0; gap: 4px; background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center;
  font-family: var(--face-body); font-weight: 600; font-size: 0.75rem;
  color: inherit; transition: color .15s var(--ease);
}
.wl-byline .wlo-like svg,
.wl-byline .wlo-bookmark svg { width: 14px; height: 14px; }
.wl-byline .wlo-like:hover,
.wl-byline .wlo-bookmark:hover { background: transparent; color: var(--accent-ink); }
.wl-byline .wlo-like.is-liked,
.wl-byline .wlo-bookmark.is-saved { color: var(--accent-ink); }

/* /saved/ page */
.wl-saved-title { font-family: var(--face-display); font-weight: 600; font-size: 1.9rem; margin: 0 0 20px; }
.wl-saved-empty { color: var(--ink-soft); font-size: 0.95rem; }
.wl-saved-empty a { color: var(--accent-800); font-weight: 600; }

/* responses */
.wl-responses { margin-top: 44px; }
.wl-responses h2 { font-size: 1.5rem; margin: 0 0 16px; }

/* ---- WordPress block bridges (make core blocks wear the comp's clothes) ---- */

/* post-terms rendered as a small accent pill row */
.wl-card-terms.wp-block-post-terms,
.wp-block-post-terms.wl-card-terms a { text-decoration: none; }
.wl-card-terms a {
  display: inline-block;
  font-family: var(--face-body); font-weight: 600; font-size: 0.75rem;
  padding: 6px 14px; border-radius: 999px; line-height: 1;
  background: var(--sage-100); color: var(--sage-800);
}
.wl-card-terms .wp-block-post-terms__separator { display: none; }

/* featured image inside a card fills the top strip */
.wl-post-card__img img { width: 100%; height: 150px; object-fit: cover; display: block; }
.wl-post-card__img { border-radius: 0; }

/* the card title link */
.wl-post-card .card-title a { color: inherit; text-decoration: none; }
.wl-post-card .card-title a:hover { color: var(--accent-800); }

/* byline: author + date, muted, on one line */
.wl-byline { gap: 8px; font-size: 0.75rem; color: color-mix(in srgb, var(--ink) 60%, transparent); align-items: center; }
.wl-byline .wp-block-post-author-name { font-weight: 600; color: var(--ink); }
.wl-byline .wp-block-post-author-name a { color: inherit; text-decoration: none; }
.wl-byline .wp-block-post-date { color: inherit; }
.wl-byline .wp-block-post-date::before { content: "· "; }

/* post page author row uses core post-author block */
.wl-post__authorrow .wp-block-post-author { display: flex; align-items: center; gap: 12px; margin: 0; width: 100%; }
.wl-post__authorrow .wp-block-post-author__avatar img { border-radius: 50%; display: block; }
.wl-post__authorrow .wp-block-post-author__name { font-weight: 700; font-size: 0.875rem; }
.wl-post__authorrow .wp-block-post-author__name a { color: inherit; text-decoration: none; }

/* single-post featured image */
.wl-post .wp-block-post-featured-image img { width: 100%; border-radius: var(--radius-lg); display: block; }

/* prose wrapper */
.wl-prose > * { max-width: 100%; }

/* comments */
.wl-responses .wp-block-comment-author-name { font-weight: 700; font-size: 0.8125rem; }
.wl-responses .wp-block-comment-author-name a { color: inherit; text-decoration: none; }
.wl-responses .wp-block-post-comments-form .wp-block-button__link { background: var(--accent); border-radius: 999px; }
.wl-responses textarea,
.wl-responses input[type="text"],
.wl-responses input[type="email"] {
  background: var(--bg); border: 1px solid var(--divider); border-radius: 16px; padding: 11px 16px; font-family: var(--face-body);
}

/* --------------------------------------------------------------- footer */

.wl-footer {
  border-top: 1px solid var(--divider);
  padding: 2.5rem clamp(1.25rem,4vw,2.5rem);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: 0.8125rem; color: var(--ink-soft);
}
.wl-footer a { color: var(--ink-soft); text-decoration: none; }
.wl-footer a:hover { color: var(--ink); }
.wl-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; }

/* --------------------------------------------------------------- responsive nav */

/* desktop: hamburger + mobile menu hidden */
.wl-nav-toggle, .wl-nav-toggle-cb, .wl-nav-menu { display: none; }
.wl-nav { position: relative; }

/* the full inline nav needs ~860px; below that, collapse into a hamburger menu */
@media (max-width: 860px) {
  .wl-nav-desktop { display: none !important; }
  .wl-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    color: var(--ink); background: var(--surface); flex: none;
  }
  .wl-nav-toggle:hover { background: var(--bg); }
  .wl-nav-toggle-cb:focus-visible + .wl-nav-toggle { outline: 2px solid var(--accent); outline-offset: 2px; }
  .wl-nav-menu {
    position: absolute; top: 100%; right: clamp(1.25rem, 4vw, 2.5rem);
    display: none; flex-direction: column; min-width: 210px;
    background: var(--bg); border: 1px solid var(--divider); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: 10px; margin-top: 10px; z-index: var(--z-sticky);
  }
  .wl-nav-toggle-cb:checked ~ .wl-nav-menu { display: flex; }
  .wl-nav-menu a {
    padding: 11px 14px; border-radius: 10px; text-decoration: none;
    color: var(--ink); font-weight: 600; font-size: 0.9375rem;
  }
  .wl-nav-menu a:hover { background: var(--surface); color: var(--accent-800); }
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 640px) {
  .wl-nav { gap: 10px; padding-inline: 1.125rem; }
  .wl-feed { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .wl-write-label { display: none; }   /* Write becomes icon-only */
  .btn.btn-primary { padding: 9px 12px; }
  .nav-brand img { height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}