/*
 * LK Blog Designer — Global Stylesheet  v2.0
 * ─────────────────────────────────────────────────────────────────
 * Loaded on: single posts · archives · author pages
 * Contains : design tokens · universal theme reset · shared
 *            components (cards, breadcrumbs, pagination, progress)
 * Does NOT contain: typography (→ typography.css)
 *                   single-post layout (→ single.css)
 * ───────────────────────────────────────────────────────────────── */

/* =============================================================
   DESIGN TOKENS
   ============================================================= */
:root {
  /* Colour palette */
  --lkbd-black       : #0a0a0a;
  --lkbd-ink         : #1c1c1e;
  --lkbd-ink-2       : #3a3a3c;
  --lkbd-ink-3       : #636366;
  --lkbd-ink-4       : #8e8e93;
  --lkbd-border      : #e5e5ea;
  --lkbd-border-light: #f2f2f7;
  --lkbd-surface     : #f9f9fb;
  --lkbd-white       : #ffffff;

  /* Accent — green */
  --lkbd-accent      : #16a34a;
  --lkbd-accent-light: #dcfce7;
  --lkbd-accent-dark : #14532d;

  /* Social */
  --lkbd-blue        : #0057ff;
  --lkbd-facebook    : #1877f2;
  --lkbd-twitter     : #1da1f2;
  --lkbd-linkedin    : #0a66c2;
  --lkbd-whatsapp    : #25d366;

  /* Radius scale */
  --lkbd-radius-none : 0px;
  --lkbd-radius-xs   : 3px;
  --lkbd-radius-sm   : 5px;
  --lkbd-radius      : 8px;
  --lkbd-radius-md   : 10px;
  --lkbd-radius-lg   : 14px;
  --lkbd-radius-xl   : 20px;
  --lkbd-radius-full : 9999px;

  /* Shadows */
  --lkbd-shadow-xs  : 0 1px 2px rgba(0,0,0,.05);
  --lkbd-shadow-sm  : 0 1px 4px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --lkbd-shadow     : 0 4px 16px rgba(0,0,0,.08);
  --lkbd-shadow-md  : 0 8px 24px rgba(0,0,0,.10);
  --lkbd-shadow-lg  : 0 16px 48px rgba(0,0,0,.13);

  /* Transitions */
  --lkbd-transition  : 0.22s ease;
  --lkbd-transition-fast: 0.14s ease;

  /* Layout */
  --lkbd-container   : 820px;
  --lkbd-wide        : 1200px;

  /* Font stacks (fallbacks — overridden inside .lkbd-single by typography.css) */
  --lkbd-font-body   : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --lkbd-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lkbd-font-title  : 'Playfair Display', Georgia, 'Times New Roman', serif;
  --lkbd-font-serif  : 'Playfair Display', Georgia, 'Times New Roman', serif;
  --lkbd-font-mono   : 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

/* =============================================================
   WRAPPER DEFAULTS
   ============================================================= */
.lkbd-single,
.lkbd-archive,
.lkbd-author-archive {
  font-family             : var(--lkbd-font-body);
  color                   : var(--lkbd-ink);
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
  overflow-x              : hidden;
  max-width               : 100%;
  box-sizing              : border-box;
}

/* =============================================================
   UNIVERSAL THEME RESET
   Covers Astra · Kadence · GeneratePress · OceanWP · Blocksy ·
   Twenty Twenty-Four · Hostinger AI · and any default theme.
   ============================================================= */

/* Kill sidebars */
body.single  #secondary,  body.single  aside,
body.single  .sidebar,    body.single  .widget-area,
body.single  .ast-sidebar-wrap,
body.archive #secondary,  body.archive aside,
body.archive .sidebar,    body.archive .widget-area,
body.archive .ast-sidebar-wrap,
body.author  #secondary,  body.author  aside,
body.author  .sidebar,    body.author  .widget-area,
body.author  .ast-sidebar-wrap {
  display : none  !important;
  width   : 0     !important;
}

/* Full-width primary */
body.single  #primary,    body.single  .content-area,
body.single  main#main,   body.single  .site-main,
body.archive #primary,    body.archive .content-area,
body.archive main#main,   body.archive .site-main,
body.author  #primary,    body.author  .content-area,
body.author  main#main,   body.author  .site-main {
  width     : 100%   !important;
  max-width : 100%   !important;
  float     : none   !important;
  padding   : 0      !important;
  margin    : 0 auto !important;
}

/* Hide default theme post headers */
body.single .entry-header,
body.single .entry-meta,
body.single .ast-single-post-featured-section,
body.single h1.entry-title,
body.single .wp-post-image:not(.lkbd-featured-image img),
body.single .post-thumbnail:not(.lkbd-featured-image) {
  display : none !important;
}

/* Article / entry-content full-width */
body.single article.post,
body.single article.hentry,
body.single .entry-content,
body.single .post-content,
body.single .ast-article-single {
  max-width  : 100% !important;
  width      : 100% !important;
  padding    : 0    !important;
  margin     : 0    !important;
  float      : none !important;
}

/* Protect circular avatars from theme image resets */
body.single  .lkbd-byline__avatar,
body.single  .lkbd-author-box__avatar,
body.archive .lkbd-card__thumb img,
body.author  .lkbd-card__thumb img {
  border-radius : inherit;
  object-fit    : cover;
}

/* =============================================================
   READING PROGRESS BAR
   ============================================================= */
#lkbd-progress {
  position       : fixed;
  top            : 0;
  left           : 0;
  width          : 100%;
  height         : 3px;
  background     : transparent;
  z-index        : 9999;
  pointer-events : none;
}
#lkbd-progress-bar {
  height          : 100%;
  width           : 0%;
  background      : var(--lkbd-accent);
  transition      : width 0.1s linear;
  will-change     : width;
}

/* =============================================================
   SHARED BUTTON
   ============================================================= */
.lkbd-btn {
  display         : inline-flex;
  align-items     : center;
  gap             : 6px;
  padding         : 10px 22px;
  background      : var(--lkbd-ink);
  color           : var(--lkbd-white);
  font-family     : var(--lkbd-font-body);
  font-size       : 13px;
  font-weight     : 600;
  text-decoration : none;
  border-radius   : var(--lkbd-radius);
  transition      : background var(--lkbd-transition), transform var(--lkbd-transition);
  letter-spacing  : 0.01em;
  cursor          : pointer;
  border          : none;
  line-height     : 1;
}
.lkbd-btn:hover { background: var(--lkbd-black); transform: translateY(-1px); color: var(--lkbd-white); }
.lkbd-btn--outline { background: transparent; color: var(--lkbd-ink); border: 1.5px solid var(--lkbd-border); }
.lkbd-btn--outline:hover { background: var(--lkbd-ink); color: var(--lkbd-white); border-color: var(--lkbd-ink); }

/* =============================================================
   SHARED ICON
   ============================================================= */
.lkbd-icon {
  width          : 18px;
  height         : 18px;
  flex-shrink    : 0;
  display        : inline-block;
  vertical-align : middle;
}

/* =============================================================
   SCREEN READER TEXT
   ============================================================= */
.screen-reader-text {
  clip       : rect(1px,1px,1px,1px);
  clip-path  : inset(50%);
  height     : 1px;
  width      : 1px;
  margin     : -1px;
  overflow   : hidden;
  padding    : 0;
  position   : absolute;
  white-space: nowrap;
}

/* =============================================================
   POST CARD  — shared by archive · author · related posts
   ═════════════════════════════════════════════════════════════
   Design philosophy:
   · Flat white card, 6px radius (editorial, not bubbly)
   · Clear 3-zone structure: image | headline | meta
   · Thumb fills the full card width at a fixed 16:9-ish ratio
   · Title: Poppins 700, 3-line clamp
   · Meta: muted, small, flush to the bottom
   · Hover: smooth lift + deeper shadow, title goes green
   ============================================================= */

.lkbd-card {
  background     : var(--lkbd-white);
  border         : 1px solid var(--lkbd-border);
  border-radius  : var(--lkbd-radius);     /* 8px — subtle, not bubbly */
  overflow       : hidden;
  display        : flex;
  flex-direction : column;
  transition     : transform var(--lkbd-transition),
                   box-shadow var(--lkbd-transition),
                   border-color var(--lkbd-transition);
  /* Ensures the card never shrinks below image width */
  min-width      : 0;
}

.lkbd-card:hover {
  transform    : translateY(-6px);
  box-shadow   : var(--lkbd-shadow-lg);
  border-color : #d1d5db;
}

/* ── Link wrapper ── */
.lkbd-card__link {
  text-decoration : none;
  color           : inherit;
  display         : flex;
  flex-direction  : column;
  height          : 100%;
}

/* ── Thumbnail zone ── */
.lkbd-card__thumb {
  width          : 100%;
  height         : 220px;           /* taller = better editorial proportions */
  overflow       : hidden;
  background     : var(--lkbd-surface);
  position       : relative;
  flex-shrink    : 0;
  border-radius  : 0;               /* no inner radius — sits flush */
}

.lkbd-card__thumb img {
  width        : 100%;
  height       : 100%;
  object-fit   : cover;
  display      : block;
  border-radius: 0;
  transition   : transform 0.38s ease;
}

.lkbd-card:hover .lkbd-card__thumb img {
  transform : scale(1.06);
}

/* No-image placeholder bar */
.lkbd-card__thumb-placeholder {
  width      : 100%;
  height     : 5px;
  background : var(--lkbd-ink);
}

/* Category chip — over the image */
.lkbd-card__cat-badge {
  position       : absolute;
  top            : 14px;
  left           : 14px;
  padding        : 4px 10px;
  background     : rgba(10,10,10,0.88);
  color          : #ffffff;
  font-family    : var(--lkbd-font-body);
  font-size      : 10px;
  font-weight    : 700;
  letter-spacing : 1px;
  text-transform : uppercase;
  border-radius  : var(--lkbd-radius-xs);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Body zone ── */
.lkbd-card__body {
  padding        : 20px 22px 22px;
  display        : flex;
  flex-direction : column;
  flex           : 1;
  gap            : 0;
}

/* ── Title ── */
.lkbd-card__title {
  font-family     : var(--lkbd-font-heading);
  font-size       : 17px;
  font-weight     : 700;
  line-height     : 1.40;
  letter-spacing  : -0.01em;
  color           : var(--lkbd-ink);
  margin          : 0 0 10px;
  transition      : color var(--lkbd-transition);
  display         : -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow        : hidden;
}

.lkbd-card:hover .lkbd-card__title {
  color : var(--lkbd-accent);
}

/* ── Excerpt ── */
.lkbd-card__excerpt {
  font-family     : var(--lkbd-font-body);
  font-size       : 13.5px;
  line-height     : 1.65;
  color           : var(--lkbd-ink-3);
  margin          : 0 0 16px;
  flex            : 1;
  display         : -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow        : hidden;
}

/* ── Meta row ── */
.lkbd-card__meta {
  display       : flex;
  align-items   : center;
  flex-wrap     : wrap;
  gap           : 4px 8px;
  font-family   : var(--lkbd-font-body);
  font-size     : 12px;
  color         : var(--lkbd-ink-4);
  border-top    : 1px solid var(--lkbd-border-light);
  padding-top   : 14px;
  margin-top    : auto;
}

.lkbd-card__author { font-weight: 600; color: var(--lkbd-ink-3); }
.lkbd-card__sep    { color: var(--lkbd-border); }

.lkbd-card__badge {
  margin-left    : auto;
  padding        : 3px 9px;
  background     : var(--lkbd-surface);
  border         : 1px solid var(--lkbd-border);
  border-radius  : var(--lkbd-radius-full);
  font-size      : 11px;
  font-weight    : 600;
  color          : var(--lkbd-ink-3);
  white-space    : nowrap;
}

/* =============================================================
   PAGINATION  — shared by archive · author
   ============================================================= */
.lkbd-archive__pagination { text-align: center; }

.lkbd-archive__pagination .nav-links {
  display         : flex;
  justify-content : center;
  align-items     : center;
  gap             : 8px;
  flex-wrap       : wrap;
}

.lkbd-archive__pagination a,
.lkbd-archive__pagination span.current,
.lkbd-archive__pagination span.dots {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  min-width       : 42px;
  height          : 42px;
  padding         : 0 14px;
  border          : 1px solid var(--lkbd-border);
  border-radius   : var(--lkbd-radius);
  font-family     : var(--lkbd-font-body);
  font-size       : 14px;
  font-weight     : 600;
  color           : var(--lkbd-ink);
  text-decoration : none;
  transition      : background var(--lkbd-transition),
                    color var(--lkbd-transition),
                    border-color var(--lkbd-transition),
                    transform var(--lkbd-transition);
}
.lkbd-archive__pagination a:hover {
  background   : var(--lkbd-ink);
  color        : var(--lkbd-white);
  border-color : var(--lkbd-ink);
  transform    : translateY(-1px);
}
.lkbd-archive__pagination span.current {
  background   : var(--lkbd-accent);
  color        : var(--lkbd-white);
  border-color : var(--lkbd-accent);
}
.lkbd-archive__pagination span.dots {
  border     : none;
  color      : var(--lkbd-ink-4);
  background : transparent;
}