/* Article sidebar. Loaded by every page that renders ArticleSidebar.astro.
   Kept out of article.css because the recipe template (recipe.css) uses the
   sidebar too and must not pull in the whole article stylesheet. */
/* Article sidebar (ArticleSidebar.astro), added 2026-09-02. Every post carries
   the funnel: cheat-sheet opt-in, Leave The Carbs planner, keto calculator.
   The layout grid always reserved this 275px column; it was simply empty. */
.article-sidebar{position:relative}
.article-sidebar .sidebar-sticky{position:sticky;top:30px;display:grid;gap:22px}
.article-sidebar .toc-card{position:static;margin-bottom:6px}
.article-sidebar section{padding:24px 22px;border-radius:14px}
.article-sidebar .sidebar-eyebrow{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.15em;font-weight:700}
.article-sidebar h3{font:600 24px/1.1 "Newsreader",serif;margin:10px 0 8px}
.article-sidebar p{font-size:12px;line-height:1.6;margin:0 0 14px}
.sidebar-magnet{background:var(--cocoa);color:#fff}
.sidebar-magnet .sidebar-eyebrow{color:#d6b7a4}
.sidebar-magnet p{color:#ddcec2}
.sidebar-form{display:grid;gap:8px;position:relative}
.sidebar-form label{display:block}
.sidebar-form input{box-sizing:border-box;width:100%;padding:11px 12px;border:1px solid #ffffff37;background:#ffffff10;color:#fff;font:500 13px "DM Sans",sans-serif;border-radius:8px}
.sidebar-form input::placeholder{color:#c3b1a4}
.sidebar-form input:focus-visible{outline:2px solid #fff;outline-offset:1px}
.sidebar-form button{border:0;padding:12px;background:#ff4417;color:#fff;font:700 13px "DM Sans",sans-serif;cursor:pointer;border-radius:999px;margin-top:4px}
.sidebar-form button:hover{background:#ff6d4a}
.sidebar-form button:disabled{opacity:.6;cursor:wait}
.sidebar-form small{color:#bfaea2;font-size:10px;line-height:1.5}
.sidebar-form .sidebar-message{margin:0;font-size:11px;line-height:1.45}
.sidebar-form .sidebar-message:empty{display:none}
.sidebar-form .sidebar-message.error{color:#ffd0c2}
.sidebar-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sidebar-more{display:inline-block;margin-top:14px;font-size:11px;font-weight:700;color:#fff;text-decoration:underline;text-decoration-color:#ffffff66;text-underline-offset:3px}
.sidebar-more:hover{text-decoration-color:#fff}
.sidebar-offer{background:#eee2d9;color:var(--ink)}
.sidebar-offer .sidebar-eyebrow{color:var(--clay-dark)}
.sidebar-offer p{color:#675a52}
.sidebar-button{display:block;text-align:center;padding:12px;background:var(--clay-dark);color:#fff;font:700 13px "DM Sans",sans-serif;text-decoration:none;border-radius:999px}
.sidebar-button:hover{background:var(--ink)}
.sidebar-tools{padding:0 4px!important}
.sidebar-tools .sidebar-eyebrow{color:var(--clay-dark);margin-bottom:6px}
.sidebar-tools a{display:block;font-size:12px;font-weight:700;color:var(--ink);text-decoration:none;padding:8px 0;border-top:1px solid var(--line)}
.sidebar-tools a:hover{color:var(--clay-dark)}
@media(max-width:1000px){
  /* The generic rule above hides .standard-sidebar on small screens. Most
     Pinterest traffic is on a phone, so this sidebar stays and stacks under
     the article instead. Only the desktop table of contents is dropped. */
  .article-sidebar{display:block;max-width:760px;margin:60px auto 0;width:100%}
  .article-sidebar .sidebar-sticky{position:static}
  .article-sidebar .toc-card{display:none}
  .article-sidebar section{padding:26px 24px}
  .article-sidebar h3{font-size:26px}
  .article-sidebar p{font-size:14px}
  .sidebar-form input,.sidebar-form button,.sidebar-button{font-size:15px;padding:14px}
}
@media print{.article-sidebar{display:none!important}}

/* The pulled-pork recipe passes its existing tools card through the slot.
   Its own sticky would nest inside .sidebar-sticky, so neutralise it. */
.article-sidebar .tools-card{position:static}