/* RetiredPerks theme additions: article styling, listing grids, mobile nav.
   Built on the same design tokens as the base stylesheet. */

/* --- Safety net: spacing/layout utilities used by new templates ---
   (the compiled base CSS only ships classes the original pages used) */
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}
.pt-8{padding-top:2rem}.pt-10{padding-top:2.5rem}.pt-14{padding-top:3.5rem}
.pb-8{padding-bottom:2rem}.pb-16{padding-bottom:4rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}
.max-w-4xl{max-width:56rem}

/* --- Article card grid --- */
.rpk-article-grid{display:grid;gap:1.5rem}
@media (min-width:768px){.rpk-article-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rpk-card-link{color:inherit;text-decoration:none}
.rpk-card-link:hover{color:var(--primary);text-decoration:underline;text-underline-offset:4px}

/* --- Mobile navigation panel --- */
.rpk-mobile-nav{border-top:1px solid var(--border);background:var(--background)}
.rpk-mobile-nav ul{margin:0;padding:.5rem 1.25rem 1rem;list-style:none}
.rpk-mobile-nav a{display:flex;min-height:3rem;align-items:center;border-radius:.5rem;
  padding:0 1rem;font-size:1.125rem;font-weight:600;color:var(--foreground);text-decoration:none}
.rpk-mobile-nav a:hover,.rpk-mobile-nav a[aria-current="page"]{background:var(--secondary);color:var(--primary)}

/* --- Article prose --- */
.rpk-prose{font-size:1.125rem;line-height:1.7;color:var(--foreground)}
@media (min-width:768px){.rpk-prose{font-size:1.25rem}}
.rpk-prose p{margin:0 0 1.25em}
.rpk-prose h2{margin:1.8em 0 .6em;font-size:1.75rem;font-weight:700;line-height:1.25}
.rpk-prose h3{margin:1.5em 0 .5em;font-size:1.35rem;font-weight:700;line-height:1.3}
.rpk-prose a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.rpk-prose a:hover{color:var(--accent)}
.rpk-prose ul,.rpk-prose ol{margin:0 0 1.25em;padding-left:1.5em}
.rpk-prose li{margin-bottom:.5em}
.rpk-prose strong{font-weight:700}
.rpk-prose blockquote{margin:1.5em 0;border-left:4px solid var(--accent);padding:.25em 0 .25em 1.25em;color:var(--muted-foreground)}
.rpk-prose img{max-width:100%;height:auto;border-radius:1rem;border:1px solid var(--border)}
.rpk-prose hr{margin:2em 0;border:0;border-top:1px solid var(--border)}
.rpk-prose table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:1rem}
.rpk-prose th,.rpk-prose td{border:1px solid var(--border);padding:.6em .8em;text-align:left}
.rpk-prose th{background:var(--secondary);font-weight:700}

/* Sources section reads quieter */
.rpk-prose h2:last-of-type ~ ul{font-size:1rem;color:var(--muted-foreground)}

/* --- Pagination --- */
.rpk-pagination .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.rpk-pagination a,.rpk-pagination .current{display:inline-flex;min-height:2.75rem;align-items:center;
  border:2px solid var(--border);border-radius:.75rem;background:var(--card);padding:0 1rem;
  font-weight:600;color:var(--foreground);text-decoration:none}
.rpk-pagination .current{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground)}
.rpk-pagination a:hover{border-color:var(--primary)}

/* --- Sponsored zone label (for advertiser pages) --- */
.rpk-sponsored-label{display:inline-block;margin-bottom:1rem;border-radius:.5rem;
  background:var(--secondary);padding:.25rem .75rem;font-size:.9rem;font-weight:700;
  letter-spacing:.02em;color:var(--muted-foreground);text-transform:uppercase}