/*
Theme Name: Accuro 2026
Description: Blog theme for ipaddressbroker.net. Shares the main site's tokens, masthead and footer so /blog/ reads as part of the site rather than a separate property.
Author: Accuro Consulting
Version: 1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: accuro2026
*/

/* The main site's stylesheet is loaded first and supplies every token,
   the masthead, the mega menu, the CTA band and the footer. This file
   only adds what a blog needs on top. */

.blog-head{border-bottom:1px solid var(--rule); background:var(--sheet)}
.blog-head-inner{max-width:var(--shell); margin-inline:auto; padding:clamp(2rem,4.5vw,3.4rem) var(--gut)}
.blog-head h1{font-size:clamp(1.9rem,4.2vw,3rem); line-height:1.05; margin:.55rem 0 .8rem; max-width:20ch}
.blog-head .lede{font-size:1.06rem; color:var(--ink-2); max-width:60ch; margin:0}

.blog-wrap{padding-block:clamp(2.6rem,6vw,4.5rem)}

/* --- post list ---------------------------------------------------------- */
.post-list{list-style:none; margin:0; padding:0; display:grid; gap:0}
.post-item{border-top:1px solid var(--rule); padding-block:1.9rem}
.post-item:first-child{border-top:0; padding-top:0}
.post-item h2{font-size:clamp(1.3rem,2.6vw,1.85rem); line-height:1.15; margin-bottom:.5rem}
.post-item h2 a{text-decoration:none}
.post-item h2 a:hover{color:var(--blue)}
.post-meta{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 .6rem; display:flex; flex-wrap:wrap; gap:.9rem;
}
.post-meta a{color:var(--blue); text-decoration:none}
.post-meta a:hover{text-decoration:underline}
.post-excerpt{color:var(--ink-2); margin:0 0 .9rem; max-width:70ch}
.read-more{font-size:.87rem; font-weight:600; color:var(--blue); text-decoration:none}
.read-more:hover{text-decoration:underline}

/* --- single post -------------------------------------------------------- */
.entry{max-width:70ch; min-width:0}
.entry > *:first-child{margin-top:0}
.entry p{color:var(--ink-2); margin:0 0 1.15rem}
.entry h2{font-size:clamp(1.35rem,2.6vw,1.75rem); margin:2.3rem 0 .8rem}
.entry h3{font-size:1.1rem; margin:1.8rem 0 .5rem}
.entry a{color:var(--blue); text-decoration:underline; text-underline-offset:2px}
.entry ul,.entry ol{margin:0 0 1.3rem; padding-left:1.3rem; color:var(--ink-2)}
.entry li{margin-bottom:.55rem}
.entry blockquote{
  margin:1.6rem 0; padding:.2rem 0 .2rem 1.3rem; border-left:3px solid var(--blue);
  color:var(--ink); font-size:1.05rem;
}
.entry img{border-radius:var(--radius); display:block; margin:1.6rem 0}
.entry pre{
  background:var(--sheet); border:1px solid var(--rule); border-radius:var(--radius);
  padding:1rem 1.1rem; overflow-x:auto; font-family:var(--f-mono); font-size:.82rem;
}
.entry code{font-family:var(--f-mono); font-size:.86em; background:var(--sheet); padding:.12em .35em; border-radius:4px}
.entry pre code{background:none; padding:0}
.entry table{width:100%; border-collapse:collapse; font-size:.94rem; margin:1.4rem 0}
.entry th,.entry td{text-align:left; padding:.65rem .8rem .65rem 0; border-bottom:1px solid var(--rule)}
.entry hr{margin:2.2rem 0}

.entry-foot{margin-top:2.6rem; padding-top:1.3rem; border-top:1px solid var(--rule)}
.entry-tags{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.entry-tags a{color:var(--blue); text-decoration:none}

/* --- pager -------------------------------------------------------------- */
.pager{display:flex; justify-content:space-between; gap:1rem; margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--rule)}
.pager a{
  font-size:.88rem; font-weight:600; text-decoration:none; color:var(--blue);
  max-width:22rem;
}
.pager a:hover{text-decoration:underline}
.pager span{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:.2rem}
.pager .next{text-align:right; margin-left:auto}

/* --- search ------------------------------------------------------------- */
.searchform{display:flex; gap:.5rem; margin-top:1rem}
.searchform input[type="search"]{
  flex:1; min-width:0; font-family:var(--f-body); font-size:.94rem;
  padding:.65rem .85rem; border:1px solid var(--rule); border-radius:7px; background:var(--paper); color:var(--ink);
}
.searchform input[type="search"]:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)}
.searchform button{
  font-family:var(--f-body); font-size:.88rem; font-weight:600; cursor:pointer;
  padding:.65rem 1.1rem; border-radius:7px; border:1px solid var(--blue); background:var(--blue); color:#fff;
}
.searchform button:hover{background:var(--blue-dk); border-color:var(--blue-dk)}

.notice{border:1px solid var(--rule); border-left:3px solid var(--blue); border-radius:0 var(--radius) var(--radius) 0;
  background:var(--sheet); padding:1.2rem 1.4rem; color:var(--ink-2)}

/* --- inline SVG figures -------------------------------------------------- */
.fig{margin:2.2rem 0; max-width:none}
.fig-svg{display:block; width:100%; height:auto; overflow:visible}

.fig-hint{display:none}

/* Below roughly 700px a 720-unit chart scales to about 5px type, which is not
   readable. Hold the figure at a legible width and let it scroll inside its
   own box rather than shrinking the labels into nothing. */
@media(max-width:700px){
  .fig-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.4rem}
  .fig-scroll .fig-svg{min-width:620px}
  .fig-hint{
    display:block; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.09em;
    text-transform:uppercase; color:var(--ink-3); margin-top:.4rem;
  }
}
.fig figcaption{
  margin-top:.85rem; padding-top:.7rem; border-top:1px solid var(--rule);
  font-size:.85rem; color:var(--ink-2); line-height:1.55;
}
.fig figcaption strong{color:var(--ink)}
.fig-tick{font-family:var(--f-mono); font-size:11px; fill:var(--ink-3)}
.fig-axis{font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; fill:var(--ink-2)}
.fig-legend{font-family:var(--f-mono); font-size:11px; letter-spacing:.05em; fill:var(--ink-2)}
.fig-rowlabel{font-family:var(--f-disp); font-size:15px; font-weight:700; fill:var(--ink)}
.fig-val{font-family:var(--f-mono); font-size:13px; font-weight:500; fill:var(--ink)}
.fig-val-muted{font-family:var(--f-mono); font-size:13px; fill:var(--ink-3)}
.fig-val-blue{font-family:var(--f-mono); font-size:12px; font-weight:500; fill:var(--blue)}
.fig-val-warn{font-family:var(--f-mono); font-size:12px; font-weight:500; fill:var(--warn)}

/* On a single post the figures are allowed to break out of the reading
   column, which is 70ch and too narrow for a chart. */
.entry .fig{width:100%}
@media(min-width:1100px){
  .entry .fig{width:calc(100% + 8rem); margin-left:-4rem}
}

/* --- key-takeaways box --------------------------------------------------- */
.takeaways{
  border:1px solid var(--rule); border-left:3px solid var(--blue);
  border-radius:0 var(--radius) var(--radius) 0; background:var(--sheet);
  padding:1.3rem 1.5rem; margin:0 0 2rem;
}
.takeaways h2{font-size:1rem; margin:0 0 .7rem}
.takeaways ul{margin:0; padding-left:1.1rem}
.takeaways li{margin-bottom:.5rem; color:var(--ink-2); font-size:.96rem}
.takeaways li:last-child{margin-bottom:0}

/* --- sources ------------------------------------------------------------- */
.sources{margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid var(--rule)}
.sources h2{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); margin:0 0 .8rem}
.sources ol{margin:0; padding-left:1.2rem; font-size:.88rem; color:var(--ink-2)}
.sources li{margin-bottom:.45rem}