/* copypaste.css
 * Styles for the NEW, separate "Copy Paste" post section.
 * Entirely independent from quote.css / archive.css — no shared
 * class names, no shared CSS custom properties. Only loaded on
 * Copy Paste pages (see copypaste_enqueue_assets() in
 * inc/copy-paste.php), so this can never affect a Quotes page.
 */

:root {
  --cp-brand: #2563eb;
  --cp-brand-dark: #1d4ed8;
  --cp-ink: #0f172a;
  --cp-line: #e2e8f0;
  --cp-bg-soft: #f5f8ff;
  --cp-font-serif: 'Lora', Georgia, serif;
  --cp-font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.cp-page { background: #f7f9fc; }

/* ---------- Base typography ----------
 * The reference design sets Lora (serif) as the default reading
 * font for this template — headings, breadcrumb, quote text, card
 * text, meta values, and chips are all serif. Only small UI chrome
 * (buttons, pagination, and the "Category/Language/Author" labels)
 * stays on the sans font. This single rule on the page body class
 * replaces the old `font-sans` body class that previously forced
 * the whole page into the sans font. */
body.cp-page { font-family: var(--cp-font-serif); }

/* ---------- Layout scaffolding (plain CSS, no Tailwind needed) ----------
 * The reference layout depends on a handful of structural rules —
 * centered containers, the breadcrumb/actions/meta rows, and the
 * card/chip/browse grids. Those were previously expressed only as
 * Tailwind utility classes (mx-auto, max-w-[...], flex, grid...).
 * Tailwind is loaded from an external CDN (see
 * copypaste_enqueue_assets()); if that script is blocked, deferred,
 * or delayed by a caching/optimization plugin, ad-blocker, or slow
 * network, every one of those utility classes silently does
 * nothing and the page collapses into unstyled, top-to-bottom
 * default HTML — which is exactly the "too much empty space /
 * nothing aligned" symptom being fixed here. Writing the same
 * layout as real, always-on CSS — scoped to the cp- prefixed
 * classes already present in single-copy_paste.php — makes the
 * page render correctly every time, with the Tailwind utility
 * classes simply reapplying the same values as a harmless no-op
 * once/if the CDN script does load. Nothing here is global: every
 * selector below only matches markup inside the Copy Paste
 * template, so Quotes pages are completely unaffected. */
.cp-container { max-width: 900px; margin-left: auto; margin-right: auto; padding: 0 1rem; }
.cp-container-wide { max-width: 1160px; margin-left: auto; margin-right: auto; padding: 0 1rem; }
@media (min-width: 640px) {
  .cp-container, .cp-container-wide { padding: 0 1.5rem; }
}

.cp-hero { padding: 2.5rem 0; }
@media (min-width: 1024px) {
  .cp-hero { padding: 3.5rem 0; }
}

.cp-actions-row { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1.75rem; }

.cp-meta-row { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; font-size: .9rem; }
@media (min-width: 640px) {
  .cp-meta-row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0; }
}
.cp-meta-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 100%;
}
.cp-meta-label { display: block; color: #94a3b8; font-size: .78rem; margin-bottom: .15rem; }
/* Text column next to a Category/Language/Author badge icon.
 * min-width: 0 lets this flex child shrink below its content's
 * intrinsic width (the flex default is min-width: auto, which is
 * exactly what let long names push past their container). The
 * name/link itself gets safe word-wrapping so it drops to a new
 * line inside its own column instead of overflowing sideways into
 * the icon or off the edge of the card. */
.cp-meta-text {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
.cp-meta-text a,
.cp-meta-text > span:not(.cp-meta-label) { display: inline-block; max-width: 100%; }

.cp-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.cp-section-head h2 { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--cp-ink); }

.cp-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) { .cp-cards-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cp-cards-grid { grid-template-columns: repeat(5, 1fr); } }

.cp-chips-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.cp-browse-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px) { .cp-browse-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cp-browse-grid { grid-template-columns: repeat(6, 1fr); } }

/* Visually hidden (fallback for Tailwind's sr-only utility) */
.cp-page .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Breadcrumb ---------- */
.cp-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem; text-align: center; font-size: .875rem; margin-bottom: 1.5rem;
}
.cp-breadcrumb, .cp-breadcrumb a { color: #64748b; text-decoration: none; }
.cp-breadcrumb a:hover { color: var(--cp-brand); text-decoration: underline; }
.cp-breadcrumb-current { color: var(--cp-ink); font-weight: 600; }

/* ---------- Hero quote text ----------
 * Tailwind's Preflight resets heading font-weight to `inherit`, so
 * without this the quote rendered at normal weight instead of the
 * heavier serif look in the reference. */
.cp-text-display {
  font-weight: 600; max-width: 760px; margin: 0 auto; text-align: center;
  font-size: 26px; line-height: 1.3;
}
@media (min-width: 640px) {
  .cp-text-display { font-size: 34px; }
}
.cp-quote-mark { color: var(--cp-brand); }

#cp-author-line {
  margin-top: 1.25rem; text-align: center; font-size: 17px; font-weight: 600;
  color: rgba(15, 23, 42, .8);
}

.cp-heart-btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: .75rem; border: 1px solid var(--cp-line);
  background: #fff; color: #64748b; box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  transition: transform .15s ease;
}
.cp-heart-btn:hover { transform: scale(1.05); }

/* ---------- Share ---------- */
.cp-share-divider {
  margin: 2rem auto 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  max-width: 420px;
  font-family: var(--cp-font-serif);
  font-size: .85rem; color: #64748b;
}
.cp-share-divider::before,
.cp-share-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--cp-line);
}
.cp-share-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .65rem; margin-bottom: 2.5rem;
}
.cp-share-btn {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 999px; color: #fff; border: none; cursor: pointer;
  transition: transform .15s ease, filter .2s ease;
}
.cp-share-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.cp-share-facebook { background: #1877f2; }
.cp-share-x { background: #000; }
.cp-share-whatsapp { background: #25d366; }
.cp-share-linkedin { background: #0a66c2; }
.cp-share-pinterest { background: #e60023; }
.cp-share-telegram { background: #229ed9; }
.cp-share-copy { background: #64748b; }

/* ---------- Meta row (Category / Language / Author) ---------- */
.cp-meta-label,
.cp-btn,
.cp-page-btn,
.cp-toast { font-family: var(--cp-font-sans); }

.cp-meta-card {
  border: 1px solid var(--cp-line);
  border-radius: 1rem;
  padding: 1.4rem 1.5rem;
  background: #fff;
}

.cp-badge {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .85rem;
  flex-shrink: 0;
}
.cp-badge-category { background: #ecfdf5; color: #059669; }
.cp-badge-language { background: #eef1fb; color: #1e2a5e; }
.cp-badge-author   { background: #f1f1f8; color: #1e2a5e; }

@media (min-width: 640px) {
  .cp-meta-item { padding: 0 2.25rem; }
  .cp-meta-item:first-child { padding-left: 0; }
  .cp-meta-item:last-child { padding-right: 0; }
  .cp-meta-item + .cp-meta-item { border-left: 1px solid var(--cp-line); }
}

/* ---------- Author link ---------- */
.cp-author-link { color: inherit; text-decoration: none; }
.cp-author-link:hover { text-decoration: underline; color: var(--cp-brand); }

/* ---------- Buttons ---------- */
.cp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 600; border-radius: .65rem; cursor: pointer;
  padding: .8rem 1.4rem; font-size: .95rem; border: none;
  transition: transform .15s ease, filter .2s ease, background .2s ease;
}
.cp-btn-primary { background: var(--cp-brand); color: #fff; box-shadow: 0 10px 20px -6px rgba(37, 99, 235, .45); }
.cp-btn-primary:hover { background: var(--cp-brand-dark); }
.cp-heart-btn.active { color: #ef4444; border-color: #fecaca; background: #fef2f2; }
.cp-heart-btn.active svg { fill: #ef4444; }

/* ---------- Section strips ---------- */
.cp-strip { padding: 2.5rem 0; border-top: 1px solid var(--cp-line); }
.cp-strip-alt { background: var(--cp-bg-soft); }
.cp-view-all { font-size: .9rem; font-weight: 600; color: var(--cp-brand); text-decoration: none; white-space: nowrap; }
.cp-view-all:hover { text-decoration: underline; }

/* ---------- "More…" preview cards ---------- */
.cp-card {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 132px; padding: 1.1rem; border-radius: .85rem;
  background: #fff; border: 1px solid var(--cp-line);
  text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cp-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(37, 99, 235, .12); border-color: #c7d7fb; }
.cp-card-text { font-size: .92rem; line-height: 1.4; color: var(--cp-ink); font-weight: 600; }
.cp-card-author { margin-top: .6rem; font-size: .8rem; color: #94a3b8; }
.cp-card-arrow {
  align-self: flex-end; margin-top: .6rem;
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 999px; background: var(--cp-bg-soft); color: var(--cp-brand);
  font-size: 1rem;
}

/* ---------- Related / chips ---------- */
.cp-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem; border-radius: 999px;
  font-size: .88rem; font-weight: 600; text-decoration: none;
  transition: transform .15s ease;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
.cp-chip:hover { transform: translateY(-2px); }
/* Chip icon (emoji) never shrinks; the name wraps/truncates inside
 * its own space instead of stretching the chip off-screen. */
.cp-chip > span:first-child { flex-shrink: 0; }

/* ---------- Browse grid items ----------
 * Each item sits in a fixed-width CSS grid cell (see .cp-browse-grid
 * above), so a long Category name has nowhere to grow — it must wrap
 * or truncate inside the cell instead of overflowing it. The label
 * is a flex child with flex: 1, and flex items default to
 * min-width: auto (never shrink below their content), which is what
 * let long names spill out past the icon/card edge. min-width: 0
 * removes that floor so the label actually respects the grid cell's
 * width; the icon keeps flex-shrink: 0 so it never gets squeezed. */
.cp-browse-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem; border-radius: .75rem;
  background: #fff; border: 1px solid var(--cp-line);
  text-decoration: none; color: var(--cp-ink); font-weight: 600; font-size: .92rem;
  transition: transform .15s ease, box-shadow .15s ease;
  max-width: 100%;
}
.cp-browse-item:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(37, 99, 235, .1); }
.cp-browse-icon {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 999px; font-size: 1rem; flex-shrink: 0;
  overflow: hidden;
}
.cp-browse-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.25;
}
.cp-browse-arrow { color: #94a3b8; flex-shrink: 0; }

/* ---------- Archive grid cards ---------- */
.cp-archive-card {
  padding: 1.4rem; border-radius: 1rem; background: #fff;
  border: 1px solid var(--cp-line);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cp-archive-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(37, 99, 235, .1); }
.cp-archive-card-text { font-family: 'Lora', Georgia, serif; font-size: 1.05rem; line-height: 1.5; color: var(--cp-ink); }
.cp-archive-card-author { margin-top: .6rem; font-size: .85rem; color: #94a3b8; }
.cp-archive-card-tag {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--cp-brand); background: var(--cp-bg-soft); padding: .3rem .6rem; border-radius: 999px;
  /* Long Category names truncate with an ellipsis (full name is on
   * the title="" attribute) instead of pushing the "Open" link off
   * the card or wrapping the row onto extra lines. */
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-archive-card-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 600; color: var(--cp-brand); text-decoration: none;
  flex-shrink: 0;
}
.cp-archive-card-link:hover { text-decoration: underline; }

/* ---------- Pagination ---------- */
.cp-pagination-wrap { margin-top: 2.5rem; display: flex; justify-content: center; }
.cp-pagination { display: flex; align-items: center; gap: .4rem; }
.cp-page-btn {
  display: grid; place-items: center; min-width: 38px; height: 38px;
  border-radius: .6rem; font-weight: 600; font-size: .9rem;
  background: #fff; border: 1px solid var(--cp-line); color: var(--cp-ink);
  text-decoration: none;
}
.cp-page-btn.is-active { background: var(--cp-brand); border-color: var(--cp-brand); color: #fff; }
.cp-page-btn:hover:not(.is-active) { border-color: var(--cp-brand); color: var(--cp-brand); }
.cp-page-dots { padding: 0 .4rem; color: #94a3b8; }

/* ---------- Toast ---------- */
.cp-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--cp-ink); color: #fff; padding: .7rem 1.2rem; border-radius: .65rem;
  font-size: .9rem; font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; z-index: 9999;
}
.cp-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 639px) {
  .cp-text-display { font-size: 22px; }
}