/*
Theme Name: Somebody Patented This
Theme URI: https://somebodypatentedthis.com/
Description: Custom classic theme for sh*t people patent. One real patent a day. Ported from the original static site (paper background, Georgia + Courier New, red accent).
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: spp
*/


/* ---- 1. Base ---- */
:root{
  --ink:#1a1a1a; --paper:#f6f1e7; --card:#fff; --accent:#c8102e; --muted:#666;
  --serif:Georgia,"Times New Roman",serif; --mono:"Courier New",Courier,monospace;
  --thumb:140px;          /* home page thumbnail size */
  --thumb-sm:56px;        /* archive thumbnail size  */
  --fig-max:680px;        /* default max width of a patent figure */
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--serif)}
a{color:var(--accent)}
img{max-width:100%;height:auto}        /* no image can ever overflow the page */
.wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* ---- 2. Header / nav ---- */
header{border-bottom:3px double var(--ink);padding:24px 0 12px}
header img{height:44px;width:auto}
nav{margin-top:10px;font-family:var(--mono);font-size:15px}
nav a{margin-right:18px;text-decoration:none;color:var(--ink)}
nav a:hover{color:var(--accent)}

/* ---- 3. Posts ---- */
.tag{font-family:var(--mono);font-size:13px;color:var(--muted)}
article{padding:28px 0;border-bottom:1px dashed #999}
article h2{margin:.2em 0;font-size:26px}
.meta{background:var(--card);border-left:4px solid var(--accent);padding:10px 14px;font-family:var(--mono);font-size:14px}
.verdict{font-style:italic;font-size:19px}

/* ---- 4. Figures / patent drawings ----
   Markup:
   <figure class="fig">                      default: up to --fig-max wide
   <figure class="fig fig--small">           small drawing, max 360px
   <figure class="fig fig--full">            use the full column width
   <figure class="fig fig--tall">            tall portrait sheet, capped at 640px high
   <div class="fig-grid"> two+ <figure class="fig"> </div>   side by side, stacks on mobile
   Always add <figcaption>. Wrap the <img> in <a href="same image"> so readers can open full size. */
.fig{margin:20px 0;padding:14px;background:var(--card);border:1px solid var(--ink);text-align:center}
.fig img{display:block;margin:0 auto;width:100%;max-width:var(--fig-max);height:auto}
.fig--small img{max-width:360px}
.fig--full img{max-width:100%}
.fig--tall img{width:auto;max-height:640px}
.fig figcaption{margin-top:10px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.fig a{display:block}
.fig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:20px 0}
.fig-grid .fig{margin:0}
.fig-placeholder{padding:40px 14px;font-family:var(--mono);font-size:13px;color:#888}

/* ---- 5. Thumbnails ----
   Square images, 400x400 JPG. Non-square images are center-cropped.
   Add class "thumb--contain" to show the whole image (letterboxed) instead of cropping. */
.thumb{flex:0 0 var(--thumb);width:var(--thumb);height:var(--thumb);background:var(--card);border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:#888;text-align:center;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:center}
.thumb--contain img{object-fit:contain;padding:6px}

/* ---- 6. Home page cards + hover ---- */
.entry{display:flex;gap:18px;align-items:flex-start}
.entry-body{flex:1;min-width:0}
article.entry{padding:24px 14px;margin:0 -14px;border-left:4px solid transparent;transition:background .25s ease,border-color .25s ease,transform .25s ease}
article.entry:hover{background:#fffaf0;border-left-color:var(--accent);transform:translateX(4px)}
article.entry .thumb{transition:transform .25s ease,box-shadow .25s ease}
article.entry:hover .thumb{transform:rotate(-2deg);box-shadow:4px 4px 0 var(--ink)}

/* ---- 7. Archive ---- */
.archive{padding-left:0;list-style:none}
.archive li{display:flex;gap:12px;align-items:center;margin:8px 0;font-family:var(--mono)}
.archive .thumb{flex-basis:var(--thumb-sm);width:var(--thumb-sm);height:var(--thumb-sm);font-size:9px}

/* ---- 8. Footer / pager ---- */
.pager{display:flex;justify-content:space-between;padding:20px 0;font-family:var(--mono)}
footer{padding:30px 0;font-size:13px;color:var(--muted);text-align:center}

/* ---- 8b. Did-you-know box (404 page; reusable on any page as <aside class="dyk">) ---- */
.dyk{margin:28px 0;padding:18px 22px;background:var(--card);border:1px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.dyk-label{display:inline-block;margin-bottom:6px;padding:2px 8px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:12px;font-weight:bold;letter-spacing:.08em;text-transform:uppercase}
.dyk h3{margin:.2em 0 .4em;font-size:22px}
.dyk h4{margin:1.2em 0 .3em;font-family:var(--mono);font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.dyk ul{padding-left:20px}
.dyk li{margin:6px 0}

/* ---- 8c. Patent reality check ----
   On every post (after the source line, inside <article>) and on about.html (#reality-check).
   WordPress: built by template-parts/reality-check.php; only the "someone once" line changes per post. */
.reality{margin:24px 0 4px;padding:14px 18px;background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(200,16,46,.035) 10px 20px),var(--card);border:2px dashed var(--accent)}
.reality-label{display:inline-block;margin-bottom:6px;padding:1px 8px;border:2px solid var(--accent);color:var(--accent);font-family:var(--mono);font-size:12px;font-weight:bold;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-1.5deg)}
.reality p{margin:.5em 0;font-size:15px}
.reality-kicker{font-style:italic}
.reality--full{margin:28px 0;padding:18px 22px}
.reality--full h3{margin:.3em 0;font-size:21px}
.reality--full p{font-size:17px}
.reality--full ul{margin:.4em 0;padding-left:22px}
.reality--full li{margin:4px 0}
.reality p.tag{font-size:13px}

/* ---- 9. Mobile + reduced motion ---- */
@media(max-width:560px){
  .entry{flex-direction:column}
  .entry .thumb{width:100%;height:200px;flex-basis:auto}
  .fig{padding:8px}
}
@media(prefers-reduced-motion:reduce){article.entry,article.entry .thumb{transition:none;transform:none!important}}

/* =========================================================
   10. WordPress additions
   ========================================================= */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
nav li{margin:0}
nav ul a{margin-right:0}
nav .current-menu-item>a{color:var(--accent)}

/* Single post */
.post-title{margin:.2em 0;font-size:26px}
article.post-single{border-bottom:1px dashed #999}
.series-label{margin:.2em 0 1em}
.entry-content h3{margin:1.4em 0 .4em}
.entry-content p{margin:.8em 0}
.entry-content > *:first-child{margin-top:20px}

/* Patent drawings: the Image block automatically gets the .fig look.
   Block styles (Image block > Styles panel): Default | Small drawing | Tall sheet | Full width */
.entry-content .wp-block-image{margin:20px 0;padding:14px;background:var(--card);border:1px solid var(--ink);text-align:center}
.entry-content .wp-block-image img{display:block;margin:0 auto;width:100%;max-width:var(--fig-max);height:auto}
.entry-content .wp-block-image a{display:block}
.entry-content .wp-block-image figcaption,.entry-content .wp-element-caption{margin:10px 0 0;font-family:var(--mono);font-size:13px;color:var(--muted);text-align:center}
.entry-content .wp-block-image.is-style-fig-small img{max-width:360px}
.entry-content .wp-block-image.is-style-fig-full img{max-width:100%}
.entry-content .wp-block-image.is-style-fig-tall img{width:auto;max-height:640px}
.entry-content .wp-block-columns .wp-block-image{margin:0}

/* Page titles */
.page-title{margin:28px 0 4px;font-size:26px}
.page-intro{margin:0 0 12px}
.page-body{padding:8px 0 28px}

/* Archive month headings + category counts */
.archive-month{margin:28px 0 6px}
.archive .count{color:var(--muted)}

/* Search form on 404 */
.search-form{display:flex;gap:8px;margin:16px 0}
.search-form input[type=search]{flex:1;padding:8px;border:1px solid var(--ink);background:var(--card);font:15px var(--mono)}
.search-form button{padding:8px 14px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:15px var(--mono);cursor:pointer}