/* ----------------------------------------------------------------------------- * KA Press Studio — reader refinements. * * Late-cascade corrections to hd.css: the breadcrumb pill, the connected * section sub-nav on single posts, archive-header polish, and the wrapping * "On this page" jump-nav. * * These were once echoed into every page's as an inline block. They now * live in a file, so a browser caches them, a CDN serves them, a build step can * minify them, and a child theme can drop them with one wp_dequeue_style call. * * The !important declarations are deliberate and stay: this sheet is printed * before core's Additional CSS, and these rules are meant to hold against it. * Removing them is a separate job that needs a visual diff, not a search and * replace. * -------------------------------------------------------------------------- */ /* nav sizing */ @media (min-width: 900px){ .hd-nav__list{gap:1.6rem !important;flex-wrap:nowrap !important;} .hd-nav__list a{font-size:0.78rem !important;letter-spacing:0.06em !important;white-space:nowrap !important;} } /* breadcrumb pill (un-hide + style) */ .hd-crumbs{ position:static !important; width:auto !important; height:auto !important; clip:auto !important; clip-path:none !important; overflow:visible !important; white-space:normal !important; max-width:728px !important; margin:1.15rem auto 0 !important; padding:0 24px !important; } .hd-crumbs__trail{ display:flex !important; align-items:center; flex-wrap:nowrap !important; list-style:none; width:max-content; max-width:100%; background:linear-gradient(180deg, var(--hd-accent) 3px, var(--hd-ink) 3px) !important; color:#fff; border-radius:13px; overflow:hidden; padding:.31rem 1.15rem .29rem; line-height:1.1; box-shadow:0 6px 18px rgba(10,16,28,.16); } .hd-crumbs__item{ display:inline-flex; align-items:center; margin:0; flex:0 0 auto; font-size:.8rem; font-weight:600; letter-spacing:.01em; line-height:1.1; white-space:nowrap; } .hd-crumbs__item + .hd-crumbs__item::before{ content:"\203A"; margin:0 .55rem; color:rgba(255,255,255,.34); font-weight:400; font-size:.95rem; } .hd-crumbs__item a{ color:#fff !important; text-decoration:none; transition:color .12s ease; } .hd-crumbs__item a:hover{ color:#ff415a !important; } .hd-crumbs__item--current{ display:block !important; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.6) !important; font-weight:600; } /* retire the way-back tile (breadcrumb replaces it) */ .hd-waytile--header, .hd-waytile--article{ display:none !important; } /* archive header polish */ .hd-archive__head{ position:relative !important; border-bottom:1px solid var(--hd-line) !important; padding-bottom:1.15rem !important; } .hd-archive__head::after{ content:""; position:absolute; left:0; bottom:-1px; width:58px; height:3px; background:var(--hd-accent); border-radius:2px; } .hd-archive__head .hd-eyebrow{ color:var(--hd-accent) !important; } .hd-archive__count{ text-transform:uppercase; letter-spacing:.09em; font-weight:600; font-size:.72rem !important; color:var(--hd-muted) !important; margin-top:.55rem !important; } /* single post: sub-nav connected under main nav; breadcrumb above the headline. ONE spacing rule for the breadcrumb kicker across every post type: the pill owns its gap above (from the nav) and below (to whatever follows), and every neighbouring block is zeroed so nothing else contributes a differing margin. The .hd-main flex column means these gaps add rather than collapse, so the pill's two margins are the single, predictable source of spacing everywhere. */ .single .hd-main{ display:flex; flex-direction:column; } .single .hd-main > .hd-subnav{ order:1; margin-bottom:0 !important; } .single .hd-main > .hd-crumbs{ order:2; margin:0.9rem auto 0.6rem !important; } .single .hd-main > .hd-article{ order:3; margin-top:0 !important; } /* Kill the two competing top-spacers: the article header's padding-top (2.5rem, or 0.5rem in the subnav case) and the series kicker's implicit top gap. With both at zero, the pill's 0.6rem below-margin is the ONLY gap above whatever comes first — the series kicker on series posts, the headline on the rest — so series posts get a consistent ~9-10px instead of touching. */ .single .hd-article__head{ padding-top:0 !important; } .single .hd-article .hd-snav{ margin-top:0 !important; } /* "On this page" jump-nav wraps inside its box */ .hd-onthispage nav, .hd-onthispage ul, .hd-onthispage ol, .hd-onthispage__links, .hd-onthispage__list{ display:flex !important; flex-wrap:wrap !important; gap:.4rem 1.15rem !important; list-style:none; margin:0; padding:0; max-width:100%; } .hd-onthispage{ overflow:hidden; } .hd-onthispage a{ white-space:nowrap; }