/* SlashCouponCode — blog listing (/blog/).
 *
 * Hero + category rows + card grid. Owner's choice (2026-08-02) after trying a
 * thumbnail-left row layout instead.
 *
 * DELIBERATELY SELF-CONTAINED. store.css is 70KB and almost none of it applies
 * here; loading it would ship coupon cards, the reveal modal, the offers table
 * and the how-to steps to a page that has none of them. The shared pieces below
 * (page box, breadcrumb, headings) are repeated on purpose — about 30 lines —
 * so /blog/ downloads ~9KB instead of 70KB.
 *
 * Typeface and text colours come from type.css, which loads first and which
 * every page in this plugin shares. Do not redeclare them here.
 */

.scc-blog-page{
  --purple:#746093; --magenta:#A24592;
  --gold:#FFD84D; --gold-deep:#F2C200;
  --purple-bg:#f0ebf5;
  --ink:#1f2026; --muted:#6b6c76; --line:#e9e7ef; --bg:#f4f2f8;
  color:var(--ink);
}

/* ---- Shared page box (mirror of store.css .scc-page) ---- */
.scc-page,
.scc-blog-page{ max-width:1250px; margin-left:auto; margin-right:auto; margin-top:0;
  padding-top:8px !important; padding-left:0 !important; padding-right:0 !important; }

/* ---- Shared furniture ---- */
.scc-blog-page .scc-crumb{ font-size:12.5px; color:var(--muted); margin:0 0 10px; }
.scc-blog-page .scc-crumb a{ color:var(--purple); text-decoration:none; }
.scc-blog-page .scc-crumb span{ margin:0 2px; }
.scc-blog-page .scc-h1{ font-size:30px; font-weight:800; line-height:1.22; margin:0; letter-spacing:-.022em; }
.scc-blog-page .scc-h2{ font-size:19px; font-weight:800; margin:0; letter-spacing:-.015em; }
.scc-blog-page .scc-prose{ font-size:14px; line-height:1.7; }
.scc-blog-page .scc-sec-head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin:0 0 14px; flex-wrap:wrap; }
.scc-blog-page .scc-sec-sub{ font-size:13px; color:var(--muted); }

/* ---- Page header ----
   The heading and this intro are the WordPress page's own title and editor
   content. Nothing here is written in the template. ---- */
.scc-b-head{ margin:0 0 18px; }
.scc-b-intro{ margin:10px 0 0; max-width:62ch; font-size:14.5px; line-height:1.62; color:var(--muted); }
.scc-b-intro > *:first-child{ margin-top:0; }
.scc-b-intro > *:last-child{ margin-bottom:0; }
.scc-b-intro h2,
.scc-b-intro h3{ font-size:16px; font-weight:800; color:var(--ink); margin:14px 0 6px; }

/* ---- Topic chips ----
   The only internal links the four category archives get, so they matter more
   than they look.

   FILLED, NOT OUTLINED. The previous version was a white pill with a hairline
   border and a purple count badge inside it — three visual elements per chip,
   five chips, before the reader had reached a single article. The counts are
   gone (owner's call, 2026-08-02) and so is the border: a soft tint reads as
   tappable without drawing a box around every word.

   44px is the minimum comfortable touch target, and 70% of this site's traffic
   is on a phone, so the chips are sized for a thumb rather than a cursor. */
.scc-b-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; }
.scc-b-chip{ display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:11px 18px; border-radius:999px; border:0;
  background:rgba(116,96,147,.075); color:var(--ink);
  font-size:14px; font-weight:650; letter-spacing:-.005em; line-height:1.2;
  text-decoration:none; white-space:nowrap; }

/* On a category archive one chip is where you already are. It is a <span>
   rather than a link, so the filled treatment is what marks it — and it also
   carries aria-current in the markup, because colour alone is not a state
   anyone can rely on. */
.scc-b-chip.is-on{ background:var(--purple); color:#fff; cursor:default; }
.scc-b-chip:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }

/* ================= THE CARD — one component, three sizes ================= */
.scc-b-card{ display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:16px; overflow:hidden; height:100%; }
.scc-b-thumb{ display:block; text-decoration:none; }

/* THE FIX FOR RAGGED ROWS. The theme let each featured image keep its uploaded
   ratio — one 393x350, the rest 393x221 — so cards ran 565-694px tall in four
   different heights. A fixed 16:9 box with object-fit:cover makes every card
   identical, and gives the browser the height before the image loads so nothing
   shifts on the way in. */
.scc-b-img,
.scc-b-noimg{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  background:var(--purple-bg); }
.scc-b-noimg{ background:linear-gradient(135deg,var(--purple-bg),#e6def0); }

.scc-b-body{ display:flex; flex-direction:column; gap:8px; padding:16px 16px 18px; flex:1 1 auto; }
.scc-b-cat{ align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; color:var(--purple); background:var(--purple-bg);
  border-radius:999px; padding:4px 10px; text-decoration:none; }
/* THE WHOLE TITLE, ALWAYS. These were clamped to two lines with an ellipsis,
   which cut off 17 of every 100 posts — the median title is 63 characters and
   the longest runs to 95, well past what two lines hold in a card column.
   A headline you cannot finish reading is worse than an uneven row.

   Rows stay tidy anyway: the cards are grid items with height:100%, so every
   card in a row stretches to match the tallest. A long title makes its row
   taller, not ragged. text-wrap:balance shares the words evenly across the
   lines instead of leaving one word stranded on the last. */
.scc-b-title{ margin:0; font-size:16px; font-weight:800; line-height:1.32;
  letter-spacing:-.01em; text-wrap:balance; }
.scc-b-title a{ color:var(--ink); text-decoration:none; }
.scc-b-ex{ margin:0; font-size:13px; color:var(--muted); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- Hero: the newest article, given the room it deserves ---- */
.scc-b-hero-wrap{ margin:0 0 34px; }
.scc-b-card--hero{ display:grid; grid-template-columns:1.15fr 1fr;
  align-items:stretch; border-radius:20px; }
.scc-b-card--hero .scc-b-thumb{ height:100%; }
.scc-b-card--hero .scc-b-img,
.scc-b-card--hero .scc-b-noimg{ height:100%; aspect-ratio:auto; min-height:280px; }
.scc-b-card--hero .scc-b-body{ padding:26px 28px; gap:11px; justify-content:center; }
.scc-b-card--hero .scc-b-title{ font-size:26px; line-height:1.24; }
.scc-b-card--hero .scc-b-ex{ font-size:14px; -webkit-line-clamp:3; }

/* ---- Grids ---- */
.scc-b-catrow{ margin:0 0 34px; }
.scc-b-grid{ display:grid; gap:18px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.scc-b-grid-main{ gap:20px 18px; }
.scc-b-all{ margin-top:8px; }
.scc-b-viewall{ font-size:13px; font-weight:700; color:var(--purple);
  text-decoration:none; white-space:nowrap; }

/* ---- Pagination.
   The theme printed one bare "Next Page" link, so reaching the oldest of 138
   posts took seven blind clicks. Numbers tell a reader how far the list runs and
   give Google a direct link to every page instead of a single-file chain. ---- */
.scc-b-pager{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:30px 0 8px; }
.scc-b-pager .page-numbers{ display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 13px; border-radius:11px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-size:14px; font-weight:700; text-decoration:none; }
.scc-b-pager .page-numbers.current{ background:var(--purple); border-color:var(--purple); color:#fff; }
.scc-b-pager .page-numbers.dots{ border-color:transparent; background:transparent; }

@media (hover:hover) and (pointer:fine){
  .scc-b-card{ transition:border-color .15s, box-shadow .15s, transform .15s; }
  .scc-b-card:hover{ border-color:#d9d3e6; box-shadow:0 4px 16px rgba(60,40,90,.09); transform:translateY(-2px); }
  .scc-b-title a:hover{ color:var(--purple); }
  .scc-b-chip, .scc-b-pager .page-numbers, .scc-b-viewall, .scc-b-cat{
    transition:border-color .14s, background .14s, color .14s; }
  .scc-b-chip:hover{ background:rgba(116,96,147,.16); color:var(--purple); }
  .scc-b-chip.is-on:hover{ background:var(--purple); color:#fff; }
  .scc-b-pager a.page-numbers:hover{ border-color:var(--purple); color:var(--purple); }
  .scc-b-viewall:hover{ color:var(--magenta); }
  .scc-b-cat:hover{ background:#e4dcef; }
}

/* ---- Tablet ---- */
@media (max-width:1024px){
  .scc-b-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ---- Phone: 70% of this site's traffic ---- */
@media (max-width:782px){
  .scc-blog-page{ padding-bottom:26px; }
  .scc-blog-page .scc-h1{ font-size:24px; }
  .scc-b-intro{ font-size:13.5px; }

  /* Chips scroll sideways rather than stacking into rows and pushing the first
     article off the screen. */
  .scc-b-chips{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; margin-bottom:20px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .scc-b-chips::-webkit-scrollbar{ display:none; }
  .scc-b-chip{ flex:none; }

  /* The hero stacks: side by side at this width the image is too small to be
     worth its download and the headline too narrow to read. */
  .scc-b-card--hero{ grid-template-columns:1fr; }
  .scc-b-card--hero .scc-b-img,
  .scc-b-card--hero .scc-b-noimg{ aspect-ratio:16/9; min-height:0; }
  .scc-b-card--hero .scc-b-body{ padding:18px 16px 20px; }
  .scc-b-card--hero .scc-b-title{ font-size:20px; }

  /* Two across, not one. One-per-row turned 20 articles into a 20-screen scroll;
     the card is image + two lines + meta, which stays legible at ~170px. */
  .scc-b-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 10px; }
  .scc-b-body{ padding:12px 11px 14px; gap:6px; }
  .scc-b-title{ font-size:13.5px; line-height:1.3; }
  .scc-b-ex{ display:none; }        /* at this width it is two words and a comma */
  .scc-b-cat{ font-size:10px; padding:3px 8px; }
  .scc-b-catrow, .scc-b-hero-wrap{ margin-bottom:26px; }
  .scc-b-pager .page-numbers{ min-width:38px; height:38px; padding:0 11px; font-size:13.5px; }
}

@media (max-width:400px){
  .scc-b-grid{ gap:10px 8px; }
  .scc-b-title{ font-size:13px; }
}

/* ======================================================================
   SINGLE ARTICLE  (/xm-partner-code/ etc.)

   The theme rendered a post as one full-width column with body text on a
   150-CHARACTER line at 1.50 line-height. The readable band is 50-75, and
   GrabOn — the reference for this page — is already too wide at 105. Nothing
   else on this site was as far out.
   ====================================================================== */

.scc-a-head{ margin:0 0 8px; }
/* The chip styles are sized as a 44px tap target for a row of topic links. As a
   single label above a headline that reads as a heavy blob, so this one is
   scaled back to eyebrow size — it is a label here, not navigation. */
.scc-a-cat{ margin:0 0 18px; min-height:0; padding:6px 13px; font-size:12px;
  font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
/* Sized the way GrabOn sizes theirs: ~30px at weight 700 with no negative
   tracking. The previous version ran to 40px with -.025em, which is display
   type — imposing on one line, and heavy and cramped on the two lines most of
   these headlines actually need. Smaller type is what makes two lines sit
   comfortably, not more leading. */
.scc-a-title{ margin:18px 0 0; font-size:clamp(24px,2.6vw,31px); line-height:1.18;
  font-weight:700; letter-spacing:-.006em; color:var(--ink); text-wrap:balance; }
.scc-a-standfirst{ margin:20px 0 0; font-size:18px; line-height:1.55; color:var(--muted);
  max-width:58ch; }
.scc-a-dateline{ display:flex; align-items:center; gap:7px; margin:26px 0 0;
  padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
/* "Updated" earns emphasis over "Published": on a page whose whole promise is
   that a code still works, when it was last checked is the trust signal. */
.scc-a-datelabel{ font-weight:800; color:var(--ink); text-transform:uppercase;
  font-size:11px; letter-spacing:.08em; }

.scc-a-hero{ margin:26px 0 0; }
.scc-a-heroimg{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:14px; }

/* ---- The reading column ----
   17px on a 66ch measure lands near 70 characters. Everything in the body keys
   off this size, so changing it rescales the whole article proportionally. */
.scc-a-body{ margin:30px 0 0; font-size:17px; line-height:1.7; color:var(--body,#3f4048); }
/* The .scc-a column already sets the measure, so individual blocks are not
   capped again — that would leave a ragged right edge inside a column that is
   already the right width. */
.scc-a-body > * + *{ margin-top:1.15em; }

.scc-a-body h2{ font-size:1.62em; line-height:1.25; font-weight:800; letter-spacing:-.02em;
  color:var(--ink); margin-top:1.9em; scroll-margin-top:86px; text-wrap:balance; }
.scc-a-body h3{ font-size:1.24em; line-height:1.3; font-weight:700; letter-spacing:-.01em;
  color:var(--ink); margin-top:1.6em; scroll-margin-top:86px; text-wrap:balance; }
.scc-a-body h4{ font-size:1.06em; line-height:1.4; font-weight:700; color:var(--ink); margin-top:1.4em; }
.scc-a-body h2:first-child,
.scc-a-body h3:first-child{ margin-top:0; }
.scc-a-body strong{ color:var(--ink); font-weight:700; }
.scc-a-body a{ color:var(--purple); text-decoration:underline; text-underline-offset:2px; }
.scc-a-body ul,
.scc-a-body ol{ padding-left:1.3em; }
.scc-a-body li + li{ margin-top:.4em; }
.scc-a-body img{ max-width:100%; height:auto; border-radius:12px; }
.scc-a-body blockquote{ margin-left:0; padding:2px 0 2px 18px; border-left:3px solid var(--gold);
  color:var(--ink); font-size:1.05em; }
/* Wide content gets its own scroll container so the page body never moves. */
.scc-a-body table{ width:100%; border-collapse:collapse; font-size:.94em;
  font-variant-numeric:tabular-nums; }
.scc-a-body table th{ text-align:left; font-weight:700; color:var(--ink);
  border-bottom:2px solid var(--ink); padding:10px 12px 10px 0; }
.scc-a-body table td{ border-bottom:1px solid var(--line); padding:10px 12px 10px 0; }
.scc-a-body .scc-a-tablewrap,
.scc-a-body figure.wp-block-table{ overflow-x:auto; }

/* ---- The article column ----
   Two columns now: article left, sidebar right, the shape GrabOn uses (840px of
   content against a 336px rail). The left column is already the right width, so
   the article does not cap itself again. */
.scc-a{ max-width:100%; }

/* ---- Contents ----
   Inline and collapsible, at the top of the piece. It lived in a sticky rail
   before, which gave it a scrollbar of its own on a long post; a panel you have
   to scroll is not a shortcut. Here it cannot overflow, and it behaves the same
   on a phone as on a desktop.

   Numbered top level, indented sub-items: the nesting is the structure, and
   flattening it to top-level headings threw away the point of the list. */
.scc-a-toc{ margin:30px 0 0; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:0 20px; }
.scc-a-toc > summary{ cursor:pointer; list-style:none; display:flex; align-items:center;
  gap:10px; padding:17px 0; font-size:13px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); }
.scc-a-toc > summary::-webkit-details-marker{ display:none; }
.scc-a-toc > summary::after{ content:""; margin-left:auto; width:9px; height:9px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px); }
.scc-a-toc[open] > summary::after{ transform:rotate(225deg) translate(-2px,-2px); }
.scc-a-toc[open] > summary{ border-bottom:1px solid var(--line); }
.scc-a-toc-n{ font-size:11px; font-weight:800; letter-spacing:0; color:var(--purple);
  background:var(--purple-bg); border-radius:999px; padding:3px 9px; }

.scc-a-toc-list{ list-style:none; margin:0; padding:14px 0 18px;
  columns:2; column-gap:34px; }
.scc-a-toc-top{ break-inside:avoid; margin:0 0 4px; }
.scc-a-toc-top > a{ display:flex; gap:11px; align-items:baseline; padding:6px 0;
  color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:650; line-height:1.4; }
/* The number is the one flash of colour in the block, and it is what makes a
   plain list of links read as a contents page. */
.scc-a-toc-num{ flex:none; font-size:11.5px; font-weight:800; color:var(--purple);
  font-variant-numeric:tabular-nums; padding-top:2px; }
.scc-a-toc-sub{ list-style:none; margin:0 0 6px; padding:0 0 0 27px; }
.scc-a-toc-sub a{ display:block; padding:5px 0; font-size:13.5px; line-height:1.4;
  color:var(--muted); text-decoration:none; }

@media (hover:hover) and (pointer:fine){
  .scc-a-toc-top > a, .scc-a-toc-sub a{ transition:color .14s; }
  .scc-a-toc-top > a:hover, .scc-a-toc-sub a:hover{ color:var(--purple); }
}
.scc-a-toc a:focus-visible{ outline:2px solid var(--purple); outline-offset:3px; border-radius:4px; }

.scc-a-related{ margin:52px 0 0; padding-top:30px; border-top:1px solid var(--line); }

@media (hover:hover) and (pointer:fine){

}
.scc-a-toc a:focus-visible,

@media (max-width:782px){
  .scc-a-standfirst{ font-size:16px; }
  .scc-a-body{ font-size:16.5px; line-height:1.68; margin-top:24px; }
  .scc-a-toc-list{ columns:1; padding:12px 0 16px; }
  .scc-a-toc{ padding:0 16px; margin-top:24px; }
  .scc-a-title{ margin-top:16px; }
  .scc-a-body h2{ font-size:1.42em; }
  .scc-a-body h3{ font-size:1.16em; }
  .scc-a-hero{ margin-top:20px; }
  .scc-a-heroimg{ border-radius:10px; }
  .scc-a-related{ margin-top:38px; }
}

/* ---- Byline + author ----
   Google's guidance on assessing content quality asks who wrote a piece and why
   a reader should trust them. Yoast already emits a Person node for this site;
   nothing put it where anyone could see it. */
.scc-a-dateline{ flex-wrap:wrap; }
.scc-a-by{ display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  color:var(--ink); font-weight:700; font-size:13.5px; }
.scc-a-by img{ width:30px; height:30px; border-radius:50%; object-fit:cover;
  background:var(--purple-bg); }
.scc-a-sep{ width:1px; height:18px; background:var(--line); }
.scc-a-when{ display:inline-flex; align-items:center; gap:7px; }

.scc-a-authorbox{ display:flex; gap:16px; align-items:flex-start;
  margin:44px 0 0; padding:20px;
  background:#fff; border:1px solid var(--line); border-radius:14px; }
.scc-a-authorimg{ width:56px; height:56px; border-radius:50%; object-fit:cover;
  flex:none; background:var(--purple-bg); }
.scc-a-authorname{ margin:0; font-size:14px; font-weight:800; color:var(--ink); }
.scc-a-authorbio{ margin:6px 0 10px; font-size:14px; line-height:1.6; color:var(--muted); }

/* ---- Author archive ---- */
.scc-au-head{ display:flex; gap:20px; align-items:flex-start; margin:0 0 22px;
  padding-bottom:24px; border-bottom:1px solid var(--line); }
.scc-au-avatar{ width:80px; height:80px; border-radius:50%; object-fit:cover;
  flex:none; background:var(--purple-bg); }
.scc-au-body{ min-width:0; }
.scc-au-label{ margin:0 0 6px; font-size:11px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); }
.scc-au-bio{ margin:12px 0 0; max-width:62ch; font-size:15px; line-height:1.62; color:var(--muted); }
.scc-au-count{ margin:12px 0 0; font-size:13px; color:var(--muted);
  font-variant-numeric:tabular-nums; }

@media (hover:hover) and (pointer:fine){
  .scc-a-by{ transition:color .14s; }
  .scc-a-by:hover{ color:var(--purple); }
}
.scc-a-by:focus-visible{ outline:2px solid var(--purple); outline-offset:3px; border-radius:4px; }

@media (max-width:782px){
  .scc-a-authorbox{ padding:16px; gap:13px; margin-top:34px; }
  .scc-a-authorimg{ width:46px; height:46px; }
  .scc-au-head{ gap:14px; padding-bottom:20px; }
  .scc-au-avatar{ width:60px; height:60px; }
  .scc-au-bio{ font-size:14px; }
}

/* ---- Article sidebar: latest posts + popular stores ----
   Both come from what the site already maintains — the posts table and the
   store taxonomy the theme keeps — so nothing here needs its own data. */
.scc-a-side{ display:flex; flex-direction:column; gap:16px; padding-top:34px; }
.scc-a-widget{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; }
.scc-a-wh{ font-size:13px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink); margin:0 0 14px; }
.scc-a-wh::after{ content:""; display:block; width:26px; height:3px; border-radius:2px;
  background:var(--purple); margin-top:9px; }

.scc-a-mini-list{ display:flex; flex-direction:column; gap:14px; }
.scc-a-mini{ display:grid; grid-template-columns:74px 1fr; gap:12px; align-items:start;
  text-decoration:none; }
.scc-a-mini-thumb img,
.scc-a-mini-noimg{ display:block; width:74px; aspect-ratio:4/3; object-fit:cover;
  border-radius:8px; background:var(--purple-bg); }
.scc-a-mini-noimg{ background:linear-gradient(135deg,var(--purple-bg),#e6def0); }
.scc-a-mini-t{ font-size:13.5px; font-weight:700; line-height:1.35; color:var(--ink); }

.scc-a-stores{ display:flex; flex-direction:column; }
.scc-a-store{ display:flex; align-items:center; gap:12px; min-height:46px; padding:9px 0;
  border-bottom:1px solid var(--line); text-decoration:none; }
.scc-a-store:last-child{ border-bottom:0; }
.scc-a-store-logo{ flex:none; width:72px; height:26px; display:flex; align-items:center; }
.scc-a-store-logo img{ width:72px; height:26px; object-fit:scale-down; }
.scc-a-store-mono{ font-size:12px; font-weight:800; color:var(--purple); }
.scc-a-store-n{ font-size:13.5px; font-weight:700; color:var(--ink); }

@media (hover:hover) and (pointer:fine){
  .scc-a-mini-t, .scc-a-store-n{ transition:color .14s; }
  .scc-a-mini:hover .scc-a-mini-t,
  .scc-a-store:hover .scc-a-store-n{ color:var(--purple); }
}
.scc-a-mini:focus-visible,
.scc-a-store:focus-visible{ outline:2px solid var(--purple); outline-offset:3px; border-radius:6px; }

@media (max-width:991px){
  /* Below the two-column breakpoint the rail drops under the article, where it
     reads as further reading rather than as a sidebar. */
  .scc-a-side{ padding-top:8px; margin-top:34px; }
}