/* Blog and article pages: the few rules the owner's designs do not contain, because the designs show
   a sample and our pages hold real content. Nothing here changes a word; each block says what needs it.
   blog.css (generated from the designs) loads before this file. */

/* 0. "Skip to content": every page of the old site has it (app/layout.tsx; hidden until it takes focus). */
.skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;left:16px;top:16px;z-index:100;width:auto;height:auto;margin:0;padding:8px 16px;overflow:visible;clip:auto;white-space:normal;border-radius:8px;background:#0E1120;color:#fff}

/* 1. Section numbers. The design writes them into the heading as <em>01</em>; here a CSS counter draws
      the same box, so the heading's own text is exactly what the article says. Same values as ".ps-art h2 em". */
.ps-art{counter-reset:ps-h}
.ps-art h2{counter-increment:ps-h}
.ps-art h2::before{content:counter(ps-h,decimal-leading-zero);font:500 15px/1 Inter,sans-serif;letter-spacing:0;color:#7A5AF8;padding:7px 10px;border-radius:8px;background:#F5F3FF;transform:translateY(-6px)}

/* 2. Tags are labels, not links (the tag pages are retired): the design's chip without the hover. */
.ps-tags>span.tg{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;margin:0;border-radius:99px;background:#F5F5F5;font:inherit;font-size:14px;color:#414651}

/* 3. The comparison note ("We make iHatePosting. Competitor details come from their official sites...").
      The design has no place for it; it sits under the byline in the design's own tokens. */
.ps-note-wrap{max-width:760px;margin:0 auto;padding:0 16px 8px;box-sizing:border-box}
.ps-note{margin:0;padding:14px 18px;border:1px solid #E9EAEB;border-radius:14px;background:#F5F3FF;font-size:15px;line-height:1.5;letter-spacing:-.2px;color:#414651;text-align:left}
.ps-note a{color:#6941C6;font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* 4. Article elements the design has no sample for. */
.ps-art h4{font:500 17px/1.3 Inter,sans-serif;letter-spacing:-.4px;color:#181D27;margin:22px 0 8px}
.ps-art pre{margin:24px 0;padding:18px 20px;border-radius:14px;background:#0E1120;color:#E4E6EE;font-size:14px;line-height:1.6;overflow-x:auto}
.ps-art code{font-size:.92em;background:#F5F5F5;padding:2px 6px;border-radius:6px}
.ps-art pre code{background:none;padding:0}
.ps-art iframe,.ps-art video{display:block;max-width:100%;border:0;border-radius:16px;margin:28px 0}
.ps-art iframe{width:100%;aspect-ratio:16/9;height:auto}
.ps-art img{max-width:100%;height:auto}
.ps-art li p{margin:0 0 8px}
.ps-check li a,.ps-steps li a,.ps-quote a{color:#6941C6;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ps-check li>div,.ps-steps li>div{min-width:0}
.ps-check li ul,.ps-check li ol,.ps-steps li ul,.ps-steps li ol{margin:8px 0 0;padding-left:20px}

/* 5. A card with no picture keeps the pastel box. */
.bl-thumb.photo .nopic{display:block;width:100%;aspect-ratio:16/9}

/* 6. LIST PAGES (/blog and /articles). The design shows the heading, one large card, six cards and
      "Load more articles", and that is the whole page. (The paragraph under the breadcrumb, the two cards, the
      closing band, the topic chips, the search box and the Q&A of both pages were deleted on 2026-11-12; the guides list’s search box went the same day, and its rules with it.) */
.bl-emptycard .bl-et{margin:0 0 8px;font:500 20px/1.3 Inter,sans-serif;letter-spacing:-.5px;color:#181D27}
.bl-emptycard p{margin:0}
.bl-emptycard{max-width:720px;margin:56px auto 0;padding:56px 32px;border:1px solid #E9EAEB;border-radius:28px;background:#fff;text-align:center;color:#535862}
.bl-emptycard a{color:#6941C6;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.bl-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
/* 7. The 404 of the blog and article pages (words: components/NotFoundView.tsx). */
.bl-404{padding:120px 16px 160px;text-align:center}
.bl-404-code{margin:0;font:600 clamp(80px,14vw,120px)/1 Inter,sans-serif;letter-spacing:-4px;color:#7A5AF8}
.bl-404-t{margin:20px 0 0}
.bl-404-p{max-width:420px;margin:12px auto 0}
.bl-404 .bl-actions{margin-top:36px}
@media (max-width:767px){.bl-404{padding:72px 16px 96px}.bl-404-code{letter-spacing:-2px}}

/* 8. THE WHOLE CARD OPENS THE POST (owner, 2026-11-11: "text is not clickable to details, all card should be clickable").
      The title's link is stretched over the card with a pseudo-element, so the picture, date, description and the empty
      space all follow it: one link, no script, the title stays its accessible name, and "open in a new tab" works anywhere
      on the card. Applies to the grid card, the large card and the "Keep reading" card.
      - "Read the Article" (link and button) sit above the stretched area, so their own hover look is kept.
      - The grid card lifts 6px on hover; the stretched area reaches 8px below it, so the pointer never slips out from
        under a card that has just risen (no flicker on its lower edge, no dead click there).
      - A keyboard user gets a ring around the whole card, not only around the title's words. */
.bl-card,.bl-fcard{position:relative}
.bl-t a::after,.bl-fbody .h2 a::after{content:"";position:absolute;z-index:1;top:0;left:0;right:0;bottom:0}
.bl-card .bl-t a::after{bottom:-8px}
.bl-card .bl-more,.bl-fbody .btn{position:relative;z-index:2}
.bl-card:has(a:focus-visible),.bl-fcard:has(a:focus-visible){outline:2px solid #7A5AF8;outline-offset:3px}