/* ==========================================================================
   Auto Text Cards V1 — styled presentation for basic text-only posts.
   Markup: includes/text-cards.php (naber_text_card_render / _render_compact /
   _picker_markup). Enqueued on every Naber page after public.css.

   Token layer: every card colour derives from the Naber design tokens
   (--naber-accent, --naber-accent-light, --naber-text), so a Community that
   overrides those tokens re-tints every card. Plain fallbacks come first for
   browsers without color-mix(). Decoration is CSS only (no images to load),
   sits behind the text (z-index -1, pointer-events none) and never covers
   links or selection.
   ========================================================================== */

.naber-tc {
  --tc-accent: var(--naber-accent, #4E6B8A);
  --tc-accent-light: var(--naber-accent-light, #E8EFF8);
  --tc-ink: var(--naber-text, #1F2937);
  --tc-bg: #EEF3F9;
  --tc-fg: var(--tc-ink);
  --tc-deco: rgba(78, 107, 138, .12);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 2px 0 14px;
  border-radius: 18px;
  background-color: var(--tc-bg);
  color: var(--tc-fg);
  container-type: inline-size;
  container-name: naber-tc;
}
.naber-tc::before,
.naber-tc::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }

.naber-tc-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  padding: clamp(22px, 6cqi, 44px) clamp(20px, 6.5cqi, 48px);
}

/* Text: real, selectable HTML. High specificity + !important only where the
   feed's existing !important post-text rules would otherwise win. */
body .naber-tc .naber-tc-text,
body.naber-app .naber-community-view .neighbor-post .naber-tc .naber-tc-text {
  margin: 0;
  padding: 0 !important;
  color: inherit !important;
  font-size: var(--tc-size, 16px) !important;
  font-weight: var(--tc-weight, 400);
  line-height: var(--tc-lh, 1.55) !important;
  letter-spacing: var(--tc-track, 0);
  text-align: var(--tc-align, left);
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: manual;
  text-wrap: pretty;
}
body .naber-tc .naber-tc-text p,
body.naber-app .naber-community-view .neighbor-post .naber-tc .naber-tc-text p { margin: 0 0 .55em !important; }
body .naber-tc .naber-tc-text p:last-child,
body.naber-app .naber-community-view .neighbor-post .naber-tc .naber-tc-text p:last-child { margin-bottom: 0 !important; }
.naber-tc .naber-tc-text a { color: inherit !important; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; }
.naber-tc .naber-tc-text a:hover { text-decoration-thickness: .14em; }
.naber-tc .naber-tc-text a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
.naber-tc img.emoji, .naber-tc img.wp-smiley { display: inline !important; width: 1em !important; height: 1em !important; margin: 0 .07em !important; vertical-align: -.1em !important; border: 0 !important; box-shadow: none !important; background: none !important; }
.naber-tc .naber-tc-text ::selection { background: rgba(255, 214, 102, .55); color: #111; }

body .naber-tc .naber-tc-title,
body.naber-app .naber-community-view .neighbor-post .naber-tc .naber-tc-title {
  display: block;
  margin: 0 0 .6em !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: clamp(15px, 3.6cqi, 20px) !important;
  font-weight: 750;
  line-height: 1.3 !important;
  letter-spacing: .005em;
  text-align: var(--tc-align, left);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Size tiers (from the text itself; see naber_text_card_size()).
   xl ≤ 40 chars · lg ≤ 90 · md ≤ 220 · sm 221+. Fluid with the card width.
   -------------------------------------------------------------------------- */
.naber-tc--xl { --tc-size: clamp(26px, 7.4cqi, 46px); --tc-weight: 750; --tc-lh: 1.16; --tc-track: -.015em; --tc-align: center; }
.naber-tc--lg { --tc-size: clamp(21px, 5.4cqi, 33px); --tc-weight: 680; --tc-lh: 1.24; --tc-track: -.01em; --tc-align: center; }
.naber-tc--md { --tc-size: clamp(17px, 3.7cqi, 22px); --tc-weight: 500; --tc-lh: 1.5;  --tc-align: center; }
.naber-tc--sm { --tc-size: clamp(15px, 2.9cqi, 17px); --tc-weight: 400; --tc-lh: 1.62; --tc-align: left; }
.naber-tc--xl .naber-tc-inner { min-height: clamp(190px, 46cqi, 320px); }
.naber-tc--lg .naber-tc-inner { min-height: clamp(170px, 38cqi, 280px); }
.naber-tc--md .naber-tc-inner { min-height: clamp(140px, 26cqi, 220px); }
.naber-tc--sm .naber-tc-inner { padding: clamp(20px, 4.6cqi, 30px) clamp(20px, 5cqi, 34px); }
/* Multi-paragraph medium posts read better left-aligned. */
.naber-tc--md .naber-tc-text:has(p + p) { --tc-align: left; text-align: left; }

/* --------------------------------------------------------------------------
   B. Soft — calm, light background, rounded corner shapes.
   -------------------------------------------------------------------------- */
.naber-tc--soft {
  --tc-bg: #EEF3F9;
  --tc-bg: color-mix(in srgb, var(--tc-accent-light) 78%, #fff);
  --tc-deco: color-mix(in srgb, var(--tc-accent) 13%, transparent);
  --tc-fg: var(--tc-ink);
}
.naber-tc--soft::before { width: 46cqi; height: 46cqi; max-width: 260px; max-height: 260px; top: -16cqi; right: -14cqi; border-radius: 50%; background: var(--tc-deco); }
.naber-tc--soft::after  { width: 22cqi; height: 22cqi; max-width: 130px; max-height: 130px; bottom: -8cqi; left: -6cqi; border-radius: 50%; border: 2px solid var(--tc-deco); }

/* --------------------------------------------------------------------------
   C. Bold — strong contrast, oversized type, editorial quotation mark.
   -------------------------------------------------------------------------- */
.naber-tc--bold {
  --tc-bg: #3F5872;
  --tc-bg: color-mix(in srgb, var(--tc-accent) 80%, #0B1220);
  --tc-fg: #fff;
}
.naber-tc--bold::before {
  content: "\201C";
  top: -.12em; left: .08em;
  font: 700 clamp(150px, 42cqi, 280px)/1 Georgia, "Times New Roman", serif;
  color: rgba(255, 255, 255, .12);
}
.naber-tc--bold::after { right: 0; bottom: 0; width: 34cqi; height: 7px; max-width: 200px; background: rgba(255, 255, 255, .22); border-top-left-radius: 7px; }
.naber-tc--bold .naber-tc-text ::selection { background: rgba(255, 255, 255, .85); color: #0B1220; }

/* --------------------------------------------------------------------------
   D. Sticky Note — warm paper, soft lift shadow, a strip of tape.
   -------------------------------------------------------------------------- */
.naber-tc--sticky {
  --tc-bg: #FFF2B3;
  --tc-bg: color-mix(in srgb, #FFF1AE 93%, var(--tc-accent));
  --tc-fg: #3A321E;
  overflow: visible;
  border-radius: 6px 6px 22px 6px;
  box-shadow: 0 1px 2px rgba(80, 60, 10, .08), 0 14px 22px -16px rgba(110, 80, 0, .45);
  margin-top: 14px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 38%);
}
.naber-tc--sticky .naber-tc-text,
.naber-tc--sticky .naber-tc-title { font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif; }
.naber-tc--sticky::before {
  z-index: 1; /* tape sits over the card edge, above nothing interactive */
  top: -11px; left: 50%;
  width: clamp(64px, 20cqi, 104px); height: 24px;
  transform: translateX(-50%) rotate(-2.5deg);
  background: rgba(255, 255, 255, .58);
  border-left: 1px dashed rgba(0, 0, 0, .06); border-right: 1px dashed rgba(0, 0, 0, .06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.naber-tc--sticky::after { right: 0; bottom: 0; width: 26px; height: 26px; border-top-left-radius: 14px; background: linear-gradient(135deg, rgba(0, 0, 0, .07), rgba(0, 0, 0, 0) 60%); }

/* --------------------------------------------------------------------------
   E. Paper — warm cream stationery, faint grain, serif type, folded corner.
   -------------------------------------------------------------------------- */
.naber-tc--paper {
  --tc-bg: #FBF6EC;
  --tc-fg: #2E2923;
  border: 1px solid #EEE4D0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.naber-tc--paper .naber-tc-text,
.naber-tc--paper .naber-tc-title { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; }
.naber-tc--paper.naber-tc--xl,
.naber-tc--paper.naber-tc--lg { --tc-weight: 600; }
.naber-tc--paper::before { top: clamp(12px, 3cqi, 18px); left: 50%; width: 38px; height: 2px; transform: translateX(-50%); background: color-mix(in srgb, var(--tc-accent) 45%, #C9A86A); opacity: .55; border-radius: 2px; }
.naber-tc--paper.naber-tc--sm::before { left: clamp(20px, 5cqi, 34px); transform: none; }
.naber-tc--paper::after { right: -1px; bottom: -1px; width: 30px; height: 30px; background: linear-gradient(315deg, var(--naber-surface, #fff) 0, var(--naber-surface, #fff) 48%, #E9DDC4 50%, #F4ECDC 100%); border-top-left-radius: 6px; box-shadow: -1px -1px 2px rgba(80, 60, 20, .07); }

/* --------------------------------------------------------------------------
   F. Gradient — blended Community colours, light foreground, soft orbs.
   -------------------------------------------------------------------------- */
.naber-tc--gradient {
  --tc-bg: #4E6B8A;
  --tc-fg: #fff;
  background-image: linear-gradient(135deg, #3D5875 0%, #5B5C8C 100%);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--tc-accent) 88%, #12202F) 0%, color-mix(in srgb, var(--tc-accent) 52%, #7A4E86) 100%);
}
.naber-tc--gradient::before { width: 60cqi; height: 60cqi; max-width: 340px; max-height: 340px; top: -26cqi; right: -18cqi; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 68%); }
.naber-tc--gradient::after  { width: 18cqi; height: 18cqi; max-width: 100px; max-height: 100px; bottom: 12%; left: 6%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .16); }
.naber-tc--gradient .naber-tc-text ::selection { background: rgba(255, 255, 255, .85); color: #12202F; }

/* Mobile feed: the post card goes edge to edge and its text gets 16px gutters; keep the card inside them. */
@media (max-width: 700px) {
  body.naber-app .naber-community-view .neighbor-post .naber-tc { width: auto; margin-left: var(--naber-tc-gutter, 12px); margin-right: var(--naber-tc-gutter, 12px); }
}

@media (prefers-reduced-motion: no-preference) {
  .naber-tc { transition: box-shadow .2s ease; }
}
@media (forced-colors: active) {
  .naber-tc { border: 1px solid CanvasText; }
  .naber-tc::before, .naber-tc::after { display: none; }
}
@media print {
  .naber-tc { background: none !important; color: #000 !important; border: 1px solid #ccc; }
  .naber-tc::before, .naber-tc::after { display: none; }
}

/* --------------------------------------------------------------------------
   Home Builder "Stories from the Feed" — the card's media area holds a
   compact card in the same style and tier; the whole card stays one link.
   -------------------------------------------------------------------------- */
.nhb-card-media.nhb-card-textcard { background: none; container-type: inline-size; }
.naber-tc--compact { height: 100%; margin: 0; border-radius: 0; border: 0; box-shadow: none; overflow: hidden; }
.naber-tc--compact.naber-tc--sticky { margin: 0; border-radius: 0; }
.naber-tc--compact.naber-tc--sticky::before { top: 0; height: 18px; transform: translateX(-50%) rotate(-2deg); }
.naber-tc--compact .naber-tc-inner { height: 100%; min-height: 0 !important; padding: clamp(12px, 7cqi, 28px) clamp(12px, 8cqi, 30px); }
.naber-tc--compact .naber-tc-title { font-size: clamp(11px, 4.6cqi, 15px) !important; margin-bottom: .45em !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.naber-tc--compact .naber-tc-text { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: var(--tc-lines, 4); overflow: hidden; }
.naber-tc--compact.naber-tc--xl { --tc-size: clamp(16px, 9.2cqi, 34px); --tc-lines: 3; }
.naber-tc--compact.naber-tc--lg { --tc-size: clamp(14px, 6.6cqi, 25px); --tc-lines: 4; }
.naber-tc--compact.naber-tc--md { --tc-size: clamp(12px, 4.6cqi, 17px); --tc-lines: 5; --tc-align: center; }
.naber-tc--compact.naber-tc--sm { --tc-size: clamp(12px, 4.1cqi, 15px); --tc-lines: 6; --tc-lh: 1.5; }
.nhb-feed-card.has-text-card .nhb-card-body { gap: 4px; }

/* --------------------------------------------------------------------------
   Composer / Edit Post — compact "Style" picker (six radio swatches).
   -------------------------------------------------------------------------- */
.naber-tc-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; margin: 8px 0 4px; padding: 0; border: 0; }
.naber-tc-picker[hidden] { display: none !important; }
.naber-tc-picker-label { float: left; margin: 0; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--naber-text-secondary, #6B7280); }
.naber-tc-picker-options { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.naber-tc-swatch { position: relative; display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 3px 9px 3px 3px; border: 1px solid var(--naber-border, #E9E6E1); border-radius: 999px; background: #fff; cursor: pointer; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; color: var(--naber-text, #1F2937) !important; white-space: nowrap; transition: border-color .15s, box-shadow .15s; }
.naber-tc-swatch input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0; cursor: pointer; }
.naber-tc-swatch-chip { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 11px/1 Georgia, serif; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.naber-tc-swatch:hover { border-color: color-mix(in srgb, var(--naber-accent, #4E6B8A) 40%, var(--naber-border, #E9E6E1)); }
.naber-tc-swatch:has(input:checked) { border-color: var(--naber-accent, #4E6B8A); box-shadow: 0 0 0 1px var(--naber-accent, #4E6B8A); background: var(--naber-accent-light, #E8EFF8); }
.naber-tc-swatch:has(input:focus-visible) { outline: 2px solid var(--naber-accent, #4E6B8A); outline-offset: 2px; }
.naber-tc-swatch:has(input:disabled) { opacity: .5; cursor: default; }
.naber-tc-swatch--auto .naber-tc-swatch-chip { color: #fff; background: conic-gradient(from 210deg, #4E6B8A, #7A6AA3, #E9C46A, #F3E9D6, #4E6B8A); background: conic-gradient(from 210deg, var(--naber-accent, #4E6B8A), #7A6AA3, #E9C46A, #F3E9D6, var(--naber-accent, #4E6B8A)); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.naber-tc-swatch--soft .naber-tc-swatch-chip { color: var(--naber-text, #1F2937); background: var(--naber-accent-light, #E8EFF8); }
.naber-tc-swatch--bold .naber-tc-swatch-chip { color: #fff; background: #3F5872; background: color-mix(in srgb, var(--naber-accent, #4E6B8A) 80%, #0B1220); }
.naber-tc-swatch--sticky .naber-tc-swatch-chip { color: #3A321E; background: #FFF1AE; font-family: ui-rounded, "Nunito", system-ui, sans-serif; }
.naber-tc-swatch--paper .naber-tc-swatch-chip { color: #2E2923; background: #FBF6EC; box-shadow: inset 0 0 0 1px #E6D9BE; }
.naber-tc-swatch--gradient .naber-tc-swatch-chip { color: #fff; background: linear-gradient(135deg, #3D5875, #7A5E99); }
@media (max-width: 480px) {
  .naber-tc-swatch { padding: 3px; }
  .naber-tc-swatch-name { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .naber-tc-swatch:has(input:checked) { padding-right: 9px; }
  .naber-tc-swatch:has(input:checked) .naber-tc-swatch-name { position: static !important; width: auto; height: auto; clip: auto; }
}
/* Light live preview: the composer's text area takes the chosen style's accent edge. */
.naber-composer-form[data-text-style] .naber16-editor-shell,
.naber-composer-form[data-text-style] > .naber-composer-body { box-shadow: inset 4px 0 0 var(--tcp-edge, var(--naber-accent, #4E6B8A)); }
.naber-composer-form[data-text-style="soft"] { --tcp-edge: #BFD0E4; }
.naber-composer-form[data-text-style="bold"] { --tcp-edge: #2F4560; }
.naber-composer-form[data-text-style="sticky"] { --tcp-edge: #F1D66A; }
.naber-composer-form[data-text-style="paper"] { --tcp-edge: #D9C69E; }
.naber-composer-form[data-text-style="gradient"] { --tcp-edge: #6D5E99; }