/* ============================================================================
   Authentic Royal — Blog styles
   PLACE AT: wp-content/themes/royal-lt-food/assets/blog.css

   Every value below is read out of the Figma file
   (8ZaJrmui7lM7DoOvZkKBCh), frames:
     3:3    "blog page"                                   -> archive
     3:157  "Individual Blog – Detailed Page (Option 1)"   -> single article
   Option 1 is the one implemented (its H1 ink is #693F25; Option 2 uses black).

   GRID: frame 1440 / content 1328 / gutter 56.
   SPACING: the Figma only ever uses 8 / 10 / 12 / 16 / 24 / 40 / 56 / 80 —
   those are the eight tokens below, and nothing else is used anywhere.

   !important is used throughout because the royal-lt-food theme styles
   headings, links, fonts and backgrounds globally and bleeds into the blog.
   ========================================================================= */

/* Mulish + Playfair Display are enqueued from register-blog-post-type.php */

:root{
  /* ---- colour (exact Figma hex) ---- */
  --ar-red:#A3000B;
  --ar-red-dark:#7D0008;
  --ar-gold:#E7B977;            /* archive page bg, pills, Read More */
  --ar-cream:#ECD0A7;           /* article page bg, archive card bg */
  --ar-ink:#693F25;             /* all dark text */
  --ar-white:#FFFFFF;
  --ar-hairline:rgba(143,71,51,.23);  /* card + panel border */
  --ar-table-line:rgba(0,0,0,.09);
  --ar-meta-ink:rgba(0,0,0,.5);       /* article byline */
  --ar-on-red-70:rgba(255,255,255,.7);
  --ar-on-red-50:rgba(255,255,255,.5);
  --ar-dot-idle:rgba(163,0,11,.5);

  /* ---- type ---- */
  --ar-font:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --ar-display:'Playfair Display',Georgia,'Times New Roman',serif;

  /* ---- spacing scale (the only values the Figma uses) ---- */
  --ar-s8:8px;
  --ar-s10:10px;
  --ar-s12:12px;
  --ar-s16:16px;
  --ar-s24:24px;
  --ar-s40:40px;
  --ar-s56:56px;
  --ar-s80:80px;
  /* Article body blocks: each Figma block is inset 10px and blocks sit 24px
     apart, so the effective whitespace between two blocks is 10+24+10 = 44. */
  --ar-block:44px;
  /* Nav (80px) to article header in frame 3:158 is 177-80 = 97px. */
  --ar-s97:97px;

  /* ---- radii ---- */
  --ar-r8:8px;    /* card image */
  --ar-r9:9px;    /* pills */
  --ar-r12:12px;  /* featured + article hero panel */
  --ar-r16:16px;  /* cards, rails, callout, compare */

  /* ---- layout ---- */
  --ar-frame:1440px;
  --ar-gutter:56px;   /* 1440 - (56*2) = 1328 content */
  --ar-rail:359px;    /* sidebar */
}

/* Page tint: archive is GOLD, article is CREAM (per the two Figma frames) */
body.post-type-archive-blog,
body.tax-blog_category,
body.tax-blog_tag{ --ar-page:var(--ar-gold); }
body.single-blog{ --ar-page:var(--ar-cream); }

/* ===========================  CONTAINER  =========================== */
.ar-tabs-wrap,
.ar-featured-carousel,
.ar-section-title,
.ar-grid,
.ar-showmore-wrap,
.ar-single,
.ar-related{
  max-width:var(--ar-frame);
  margin-left:auto; margin-right:auto;
  padding-left:var(--ar-gutter); padding-right:var(--ar-gutter);
  box-sizing:border-box;
}

/* Paint body + the theme's wrapper/main so no lighter band shows anywhere */
body.post-type-archive-blog,
body.tax-blog_category,
body.tax-blog_tag,
body.single-blog{ background:var(--ar-page) !important; }
body.post-type-archive-blog .wrapper,
body.tax-blog_category .wrapper,
body.tax-blog_tag .wrapper,
body.single-blog .wrapper,
body.post-type-archive-blog .main-content,
body.tax-blog_category .main-content,
body.tax-blog_tag .main-content,
body.single-blog .main-content{ background:var(--ar-page) !important; }
.blog-archive{
  background:var(--ar-page) !important;
  /* Figma 3:51 closes the grid section with 80px. This lives here, NOT on
     .ar-showmore-wrap, so the gap above the footer survives when there is
     only one page of posts and no Show More button is rendered. */
  padding-bottom:var(--ar-s80);
}

/* ===========================  TYPEFACE  ===========================
   Mulish across the whole blog UI. Enumerated rather than using `*` so the
   Playfair Display hero title below isn't caught by it. */
body.post-type-archive-blog .main-content,
body.tax-blog_category .main-content,
body.tax-blog_tag .main-content,
body.single-blog .main-content,
.ar-blog-tabs, .ar-tab, .ar-tabs-toggle,
.ar-section-title,
.ar-btn,
.ar-single-head h1, .ar-single-sub, .ar-single-meta, .ar-single-head .ar-pill,
.ar-single-content, .ar-single-content p, .ar-single-content li,
.ar-single-content h2, .ar-single-content h3, .ar-single-content h4,
.ar-single-content th, .ar-single-content td,
.ar-card, .ar-card *,
.ar-featured, .ar-featured *,
.ar-toc, .ar-toc *,
.ar-author-card, .ar-author-card *,
.ar-callout, .ar-callout *,
.ar-compare, .ar-compare *{
  font-family:var(--ar-font) !important;
}

/* Kill inherited link underlines across the blog UI */
.blog-archive a,
.ar-card a, .ar-featured a, .ar-pill a, .ar-related a, .ar-toc-list a, .ar-btn{
  text-decoration:none !important; box-shadow:none !important;
}

/* ===========================  ARCHIVE HERO  ===========================
   Figma 3:4 — 523px tall montage; title Playfair Display Bold 56/1.3, -1.68px */
.ar-blog-hero,
.blog-archive .ar-blog-hero{
  position:relative; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  height:523px !important; min-height:0 !important;
  margin:0 !important; padding:0 var(--ar-gutter) !important;
  background:var(--ar-red);
  background-image:url("blog-hero.jpg");
  background-size:cover !important; background-position:center !important;
  background-repeat:no-repeat !important;
}
.ar-blog-hero h1,
.blog-archive .ar-blog-hero h1{
  font-family:var(--ar-display) !important;
  font-weight:700 !important;
  font-size:56px !important;
  line-height:1.3 !important;
  letter-spacing:-0.03em !important;   /* Figma: -3% */
  color:var(--ar-white) !important;
  text-align:center; margin:0 !important;
}

/* =====================  TABS + FEATURED + DOTS BAND  =====================
   Figma 3:22 — gold band, 56px vertical padding, 56px between the 3 blocks */
.ar-tabs-wrap{ position:relative; }
.blog-archive .ar-tabs-wrap{ margin:var(--ar-s56) auto 0 !important; }
.ar-featured-carousel{ margin:var(--ar-s56) auto 0; }

/* ---- Category tabs (3:23): 5 equal columns, 16px gap, SQUARE corners ---- */
.ar-blog-tabs{
  display:flex !important; flex-wrap:wrap;
  gap:var(--ar-s16);
  align-items:stretch;
  margin:0; padding:0; max-width:none;   /* nested in .ar-tabs-wrap */
}
/* Mobile dropdown trigger — hidden on desktop, shown below 900px */
.ar-tabs-toggle{ display:none; }
.ar-tab{
  flex:1 1 0; min-width:0;
  display:flex !important; align-items:center; justify-content:center;
  padding:var(--ar-s12) var(--ar-s24) !important;
  border:1px solid var(--ar-red) !important;
  border-radius:0 !important;
  background:var(--ar-white) !important;
  color:var(--ar-red) !important;
  font-weight:700 !important;
  font-size:18px !important;
  line-height:1.5 !important;
  text-align:center;
  text-decoration:none !important;
  transition:.15s;
}
.ar-tab:hover{ background:var(--ar-red) !important; color:var(--ar-white) !important; }
.ar-tab.is-active{
  background:var(--ar-red) !important; color:var(--ar-white) !important;
  border-color:var(--ar-red) !important;
}

/* ---- Featured card (3:34): 430px, p24, gap40, r12, 1px gold border ---- */
.ar-featured-viewport{ overflow:hidden; border-radius:var(--ar-r12); }
.ar-featured-track{ display:flex; transition:transform .45s ease; }
.ar-featured-track .ar-featured{ flex:0 0 100%; border-radius:0; margin:0; }

.ar-featured{
  display:grid;
  grid-template-columns:minmax(0,658fr) minmax(0,582fr);
  gap:var(--ar-s40);
  align-items:center;
  height:430px;
  padding:var(--ar-s24) !important;
  box-sizing:border-box;
  background:var(--ar-red) !important;
  border:1px solid var(--ar-gold) !important;
  border-radius:var(--ar-r12);
  overflow:hidden;
  color:var(--ar-white);
}
.ar-featured-media{
  display:block; position:relative;
  height:100%; min-height:0;
  border-radius:var(--ar-r16) !important;
  overflow:hidden;
}
.ar-featured-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* body: p16, top stack and button pushed apart (justify-between) */
.ar-featured-body{
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:space-between;
  height:100%; box-sizing:border-box;
  padding:var(--ar-s16) !important;
}
.ar-featured-body > .ar-pill{ margin:0 0 var(--ar-s16) !important; }
.ar-featured-body h2{ margin:0 0 var(--ar-s12) !important; }
.ar-featured-sub{ margin:0 0 var(--ar-s16) !important; }
.ar-featured-meta{ margin:0 !important; }

.ar-featured-body .ar-pill{
  position:static !important; display:inline-flex !important;
  align-items:center; justify-content:center;
  padding:6px var(--ar-s12) !important;
  background:transparent !important;
  border:1px solid var(--ar-white) !important;
  border-radius:var(--ar-r9) !important;
  color:var(--ar-white) !important;
  font-size:16px !important; font-weight:700 !important;
  line-height:1.5 !important; letter-spacing:0 !important;
  text-transform:none !important;
}
.ar-featured-body .ar-pill a{ color:var(--ar-white) !important; }

.ar-featured-body h2{
  font-size:32px !important; font-weight:700 !important;
  line-height:1.3 !important; color:var(--ar-white) !important;
}
.ar-featured-body h2 a{ color:var(--ar-white) !important; }
.ar-featured-sub{
  font-size:16px !important; font-weight:700 !important;
  line-height:1.5 !important; color:var(--ar-white) !important;
}
.ar-featured-meta{
  font-size:16px !important; font-weight:700 !important;
  line-height:1.5 !important; color:var(--ar-on-red-70) !important;
}

/* Read More (3:45): gold fill, red text, 1px red border, SQUARE corners */
.ar-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--ar-s12) var(--ar-s24) !important;
  background:var(--ar-gold) !important;
  border:1px solid var(--ar-red) !important;
  border-radius:0 !important;
  color:var(--ar-red) !important;
  font-size:16px !important; font-weight:700 !important; line-height:1.5 !important;
  margin:0 !important; transition:.15s;
}
.ar-btn:hover{ background:var(--ar-white) !important; color:var(--ar-red-dark) !important; }

/* Fallback if archive-blog.php still emits the old avatar byline */
.ar-featured .ar-byline{ display:block !important; margin:0 !important; }
.ar-featured .ar-byline img{ display:none !important; }
.ar-featured .ar-byline-text{ display:block !important; }
.ar-featured .ar-byline-name,
.ar-featured .ar-byline-meta{
  display:inline !important; color:var(--ar-on-red-70) !important;
  font-size:16px !important; font-weight:700 !important;
}
.ar-featured .ar-byline-name::after{ content:" \00b7 "; }

/* ---- Carousel dots (3:47): active 48x6, idle 24x6, 6px gap, no arrows ---- */
.ar-featured-nav{
  display:flex; align-items:center; justify-content:center;
  gap:6px;
  margin-top:var(--ar-s56);
}
.ar-featured-arrow{ display:none !important; }
.ar-featured-dots{ display:flex; align-items:center; gap:6px; }
.ar-featured-dot{
  width:24px; height:6px; padding:0; border:0; cursor:pointer;
  border-radius:var(--ar-r12);
  background:var(--ar-dot-idle);
  transition:.15s;
}
.ar-featured-dot.is-active{ width:48px; background:var(--ar-red); }

/* ===========================  SECTION TITLE  ===========================
   Figma 3:55 / 3:270 — Mulish Bold 48/1.3, -1.44px, brand red */
.ar-section-title{
  font-size:48px !important; font-weight:700 !important;
  line-height:1.3 !important; letter-spacing:-0.03em !important;   /* Figma: -3% */
  color:var(--ar-red) !important;
  margin:var(--ar-s80) auto var(--ar-s16) !important;
}

/* ===========================  CARD GRID  ===========================
   Figma 3:57 — 432x392, p16, r16, 24px inner gap, cream fill */
.ar-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--ar-s16);
  margin-bottom:0;
}
.ar-grid .ar-card,
.ar-related .ar-card{
  display:flex !important; flex-direction:column !important;
  gap:var(--ar-s24);
  padding:var(--ar-s16) !important;
  box-sizing:border-box;
  background:var(--ar-cream) !important;
  border:0 !important;              /* 3:57 has NO border — only the red related card does */
  border-radius:var(--ar-r16) !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
/* image: fixed 172px, r8 — this is what holds the card at exactly 392 */
.ar-card-media{
  display:block !important; position:relative !important;
  height:172px !important; width:100% !important;
  aspect-ratio:auto !important;
  border-radius:var(--ar-r8) !important;
  overflow:hidden !important; flex:0 0 172px;
}
.ar-card-media img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; display:block !important;
}
/* body: 16px between pill / title / meta */
.ar-card-body{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--ar-s16);
  padding:0 !important; background:transparent !important;
}
.ar-card .ar-pill{
  position:static !important; display:inline-flex !important;
  align-items:center; justify-content:center;
  margin:0 !important;
  padding:6px var(--ar-s12) !important;
  background:var(--ar-red) !important;
  border:1px solid var(--ar-gold) !important;
  border-radius:var(--ar-r9) !important;
  color:var(--ar-cream) !important;
  font-size:16px !important; font-weight:500 !important;
  line-height:1.5 !important; letter-spacing:0 !important;
  text-transform:none !important;
}
.ar-card .ar-pill a{ color:var(--ar-cream) !important; }
.ar-card-title{
  margin:0 !important;
  font-size:24px !important; font-weight:500 !important; line-height:1.5 !important;
  /* two lines reserved = 72px, which is what makes the card 392 tall */
  min-height:72px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.ar-card-title a{ color:var(--ar-red) !important; font-weight:500 !important; }
.ar-card-title a:hover{ color:var(--ar-red-dark) !important; }
.ar-card-meta{
  margin:0 !important;
  font-size:16px !important; font-weight:700 !important; line-height:1.5 !important;
  color:var(--ar-ink) !important; opacity:1;
}

/* ---- RELATED cards (3:272) are the RED variant: gold pill, white title ---- */
.ar-related .ar-card{
  background:var(--ar-red) !important;
  border:1px solid var(--ar-hairline) !important;   /* 3:272 */
}
.ar-related .ar-card .ar-pill{
  background:var(--ar-gold) !important;
  border-color:var(--ar-gold) !important;
  color:var(--ar-red) !important;
}
.ar-related .ar-card .ar-pill a{ color:var(--ar-red) !important; }
.ar-related .ar-card-title a{ color:var(--ar-white) !important; }
.ar-related .ar-card-title a:hover{ color:var(--ar-white) !important; opacity:.85; }
.ar-related .ar-card-meta{ color:var(--ar-on-red-50) !important; }
/* Figma puts 56px (not 16px) between "Related Blog" and its grid */
/* .ar-section-title and .ar-grid are both in the container rule at the top of
   this file (max-width + 56px gutter). Inside .ar-related they are NESTED in
   another container, so that gutter would be applied twice and the heading
   would sit 56px further in than its own cards. Reset both here — this is what
   keeps "Related Blog" flush with the card grid and with the article above. */
.ar-related .ar-section-title{
  max-width:none !important;
  /* Design update: 16 under the heading, same as "Latest Insights and Trends"
     on the archive. This used to be 56 in the Figma — the inconsistency the
     designer has now resolved. */
  margin:0 0 var(--ar-s16) !important;
  padding-left:0 !important; padding-right:0 !important;
}

/* ===========================  SHOW MORE  ===========================
   Per design feedback ("should be the same as the current website") this now
   REUSES the theme's own CTA component instead of restyling a lookalike:
       <button class="btn btn-primary btn-floron ar-showmore">
   which is the exact class combo /recipes/ uses. The floron ornaments
   (::before/::after on .btn-floron), the red, and the 2.2px tracking above
   768px all come from the theme's app.css, so the blog button stays in sync
   if that component is ever restyled.

   IMPORTANT: nothing here may set font, colour, border, padding or the
   pseudo-elements. The old rules did exactly that with !important, which would
   override the component and put us straight back to a lookalike. Only the
   surrounding layout and the loading/disabled states belong here. */
.ar-showmore-wrap{ text-align:center; padding:var(--ar-s56) 0 0; }
.ar-showmore{ cursor:pointer; }
.ar-showmore[disabled]{ cursor:default; }
/* Loading state is a plain fade on the button itself. An earlier version spun
   the ::before/::after florons, but that meant setting `display` on the
   theme's own pseudo-elements — exactly the kind of override this section
   exists to avoid. */
.ar-showmore.is-loading{ opacity:.55; pointer-events:none; }

/* Legacy numbered pagination (unused, kept harmless) */
.ar-pagination{ text-align:center; padding-bottom:var(--ar-s56); }
.ar-pagination .page-numbers{
  display:inline-block; min-width:38px; padding:var(--ar-s8) var(--ar-s12);
  margin:0 4px; border-radius:var(--ar-r8);
  text-decoration:none; color:var(--ar-ink);
}
.ar-pagination .page-numbers.current{ background:var(--ar-red); color:var(--ar-white); }

/* ===========================  SINGLE ARTICLE  ===========================
   Figma 3:174 — pill / H1 / meta stacked with NO gaps (line-height 1.5
   supplies the rhythm), then 24px down to the hero panel. */
.ar-single{ padding-top:var(--ar-s97); padding-bottom:0; }

/* Figma 3:175 is pill / H1 / meta ONLY — there is no subtitle on the article
   page (the subtitle field is used on the featured card instead). If you do
   output one, it inherits the body style below. */
.ar-single-head{ display:flex; flex-direction:column; align-items:flex-start; }
.ar-single-head .ar-pill{
  position:static !important; display:inline-flex !important;
  align-items:center; justify-content:center;
  margin:0 !important;
  padding:6px var(--ar-s12) !important;
  background:var(--ar-gold) !important;
  border:1px solid var(--ar-gold) !important;
  border-radius:var(--ar-r9) !important;
  color:var(--ar-red) !important;
  font-size:16px !important; font-weight:700 !important;
  line-height:1.5 !important; letter-spacing:0 !important;
  text-transform:none !important;
}
.ar-single-head .ar-pill a{ color:var(--ar-red) !important; }
.ar-single-head h1{
  margin:0 !important;
  font-size:56px !important; font-weight:700 !important;
  line-height:1.5 !important; letter-spacing:0 !important;
  text-transform:uppercase;
  color:var(--ar-ink) !important;
}
.ar-single-sub{
  margin:0 !important;
  font-size:16px !important; font-weight:500 !important; line-height:1.5 !important;
  color:var(--ar-ink) !important;
}
.ar-single-meta{
  margin:0 !important;
  font-size:16px !important; font-weight:700 !important; line-height:1.5 !important;
  letter-spacing:0 !important; text-transform:uppercase;
  color:var(--ar-meta-ink) !important;
}

/* Article hero (3:180): 430px red panel, 1px gold border, r12, image covers */
.ar-single-hero{
  height:430px;
  margin:var(--ar-s24) 0 var(--ar-s56);
  background:var(--ar-red);
  border:1px solid var(--ar-gold);
  border-radius:var(--ar-r12);
  overflow:hidden;
}
.ar-single-hero img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Layout (3:182): fluid content + 359px rail, 56px gap */
.ar-single-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--ar-rail);
  gap:var(--ar-s56);
  align-items:start;
}
.ar-single-aside{
  display:flex; flex-direction:column;
  gap:var(--ar-s24);
  position:sticky; top:var(--ar-s24);
}

/* ---- Body copy: Mulish Medium 16/1.5; H2 SemiBold 32/1.5 ---- */
.ar-single-content{
  padding:var(--ar-s10);
  font-size:16px !important; font-weight:500 !important; line-height:1.5 !important;
  color:var(--ar-ink) !important;
}
.ar-single-content p{
  font-size:16px !important; font-weight:500 !important; line-height:1.5 !important;
  color:var(--ar-ink) !important;
}
.ar-single-content h2{
  font-size:32px !important; font-weight:600 !important; line-height:1.5 !important;
  color:var(--ar-ink) !important; scroll-margin-top:var(--ar-s80);
}
.ar-single-content h3{
  font-size:24px !important; font-weight:600 !important; line-height:1.5 !important;
  color:var(--ar-ink) !important; scroll-margin-top:var(--ar-s80);
}

/* ---- Vertical rhythm, measured from the Figma auto-layout ----
   3:183 stacks its blocks with gap=24, and every block (e.g. 3:184) carries
   pad=10 all round — so the real space between two blocks is 10+24+10 = 44.
   Inside a block: heading -> body is the blank 16px line = 24,
   and body -> compare/table is the block's own 10px gap.
   Implemented as an owl so WordPress's flat h2/p stream reproduces it. */
.ar-single-content > *{ margin-top:0 !important; margin-bottom:0 !important; }
.ar-single-content > * + *{ margin-top:var(--ar-s24) !important; }
.ar-single-content > * + h2,
.ar-single-content > * + h3{ margin-top:var(--ar-block) !important; }
/* Design update: the gap under a heading is now 16, not 24. */
.ar-single-content > h2 + *,
.ar-single-content > h3 + *{ margin-top:var(--ar-s16) !important; }
.ar-single-content > p + .ar-compare,
.ar-single-content > p + .ar-callout,
.ar-single-content > p + table,
.ar-single-content > p + figure{ margin-top:var(--ar-s10) !important; }
/* wpautop can leave stray empty paragraphs around shortcodes */
.ar-single-content > p:empty{ display:none !important; }

.ar-single-content ul,
.ar-single-content ol{ padding-left:var(--ar-s24); }
.ar-single-content li{
  margin:0; font-size:16px !important; font-weight:500 !important; line-height:1.5 !important;
  color:var(--ar-ink) !important;
}

/* ---- Table (3:205): 3 equal columns, red header, 10px cells ---- */
.ar-single-content table{
  width:100%; table-layout:fixed;
  border-collapse:collapse; margin:0; background:transparent;
}
.ar-single-content th{
  height:44px; padding:var(--ar-s10);
  background:var(--ar-red) !important;
  border:0 !important;
  color:var(--ar-white) !important;
  font-size:16px !important; font-weight:700 !important; line-height:1.5 !important;
  text-align:center !important;
}
.ar-single-content td{
  padding:var(--ar-s10);
  border:1px solid var(--ar-table-line) !important;
  color:var(--ar-ink) !important;
  font-size:16px !important; font-weight:400 !important; line-height:1.5 !important;
  text-align:center;
}

/* ---- TOC (3:248): r16, p16, 16px gap; links Mulish Regular 16, 8px apart -- */
.ar-toc{
  padding:var(--ar-s16);
  background:var(--ar-red);
  border:1px solid var(--ar-hairline);
  border-radius:var(--ar-r16);
  color:var(--ar-white);
}
.ar-toc h4{
  margin:0 0 var(--ar-s16) !important;
  font-size:16px !important; font-weight:500 !important; line-height:1.5 !important;
  text-transform:capitalize; color:var(--ar-white) !important;
}
.ar-toc-list{ list-style:none; margin:0; padding:0; }
.ar-toc-list li{ margin:0 0 var(--ar-s8); }
.ar-toc-list li:last-child{ margin-bottom:0; }
.ar-toc-list a{
  display:block; color:var(--ar-white) !important;
  font-size:16px !important; font-weight:400 !important; line-height:1.5 !important;
}
.ar-toc-list a:hover{ color:var(--ar-white) !important; text-decoration:underline !important; }
.ar-toc-list li.lvl-3{ padding-left:var(--ar-s16); }

/* ---- Author card (3:258): 48px avatar, 8px gap, name 16/500, bio 14 ---- */
.ar-author-card{
  padding:var(--ar-s16);
  background:var(--ar-red);
  border:1px solid var(--ar-hairline);
  border-radius:var(--ar-r16);
  color:var(--ar-white);
}
.ar-author-card .ar-author-top{
  display:flex; align-items:flex-start; gap:var(--ar-s8); margin:0;
}
.ar-author-card img{
  width:48px; height:48px; flex:0 0 48px;
  border-radius:50%; object-fit:cover; background:var(--ar-white);
}
.ar-author-card .ar-author-text{
  display:flex; flex-direction:column; justify-content:center;
  gap:var(--ar-s8); min-width:0;
}
.ar-author-card .ar-author-name{
  display:block; margin:0;
  font-size:16px; font-weight:500; line-height:1.5;
  text-transform:capitalize; color:var(--ar-white);
}
.ar-author-card .ar-author-bio{
  margin:0;
  font-size:14px; font-weight:500; line-height:1.5;
  text-transform:capitalize;            /* the Figma capitalises the bio */
  color:var(--ar-on-red-70);
}

/* ---- "Good to Know" callout (3:240) ---- */
.ar-callout{
  padding:var(--ar-s16);
  margin:0;                       /* rhythm comes from the owl rules above */
  background:var(--ar-red);
  border:1px solid var(--ar-hairline);
  border-radius:var(--ar-r16);
  color:var(--ar-white);
}
.ar-callout-title{
  display:block; margin:0 0 var(--ar-s16);
  font-size:24px; font-weight:500; line-height:1.5;
  letter-spacing:0; text-transform:uppercase; color:var(--ar-white);
}
.ar-callout p{
  margin:0 0 var(--ar-s16);
  font-size:16px !important; font-weight:700 !important; line-height:1.5 !important;
  color:var(--ar-white) !important;
}
.ar-callout p:last-child{ margin-bottom:0; }

/* ---- Compare boxes (3:190): 10px gap, p16, r16, heading 24/500 uppercase -- */
.ar-compare{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--ar-s10);
  align-items:start;
  margin:0;                       /* rhythm comes from the owl rules above */
}
.ar-compare-col{
  padding:var(--ar-s16);
  background:var(--ar-red);
  border:1px solid var(--ar-hairline);
  border-radius:var(--ar-r16);
  color:var(--ar-white);
}
.ar-compare-col h4{
  margin:0 0 var(--ar-s16) !important;
  font-size:24px !important; font-weight:500 !important; line-height:1.5 !important;
  letter-spacing:0 !important; text-transform:uppercase;
  color:var(--ar-white) !important;
}
.ar-compare-col ul{ margin:0; padding-left:var(--ar-s24); list-style:disc; }
.ar-compare-col li{
  margin:0;
  font-size:16px !important; font-weight:700 !important; line-height:1.5 !important;
  color:var(--ar-white) !important;
}
.ar-compare-col p{
  margin:0 0 var(--ar-s16);
  font-size:16px !important; font-weight:700 !important; line-height:1.5 !important;
  color:var(--ar-white) !important;
}
.ar-compare-col p:last-child{ margin-bottom:0; }

/* ---- Related section (3:265/3:266): 56px after the body, then 80/80 ---- */
.ar-related{
  margin:var(--ar-s56) auto 0;
  padding-top:var(--ar-s80); padding-bottom:var(--ar-s80);
}
.ar-related .ar-grid{
  max-width:none !important;
  margin-left:0 !important; margin-right:0 !important;
  padding-left:0 !important; padding-right:0 !important;
}

/* ===========================  RESPONSIVE  =========================== */
@media (max-width:1200px){
  :root{ --ar-gutter:32px; --ar-rail:300px; --ar-s97:64px; }
  .ar-blog-hero,
  .blog-archive .ar-blog-hero{ height:420px !important; }
  .ar-blog-hero h1,
  .blog-archive .ar-blog-hero h1{ font-size:44px !important; }
  .ar-section-title{ font-size:40px !important; }
  .ar-single-head h1{ font-size:40px !important; }
  .ar-featured{ height:auto; }
  .ar-single-hero{ height:340px; }
}
@media (max-width:900px){
  :root{ --ar-gutter:24px; --ar-s97:48px; --ar-block:32px; }
  .ar-blog-hero,
  .blog-archive .ar-blog-hero{ height:340px !important; }
  .ar-blog-hero h1,
  .blog-archive .ar-blog-hero h1{ font-size:34px !important; }
  .ar-featured{ grid-template-columns:1fr; gap:var(--ar-s24); height:auto; }
  .ar-featured-media{ height:auto; aspect-ratio:658/382; }
  .ar-featured-body{ padding:0 !important; }
  .ar-featured-body h2{ font-size:24px !important; }
  .ar-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ar-single-layout{ grid-template-columns:1fr; gap:var(--ar-s24); }
  .ar-single-aside{ position:static; }
  .ar-single-head h1{ font-size:32px !important; }
  .ar-section-title{ font-size:32px !important; }
  .ar-single-hero{ height:260px; }

  /* ---- Category tabs collapse into a dropdown, matching the Products page ----
     Trigger shows the current category; the panel is a red stack whose 1px
     gaps read as dividers between the tan rows. */
  .ar-tabs-toggle{
    display:flex; position:relative; width:100%; box-sizing:border-box;
    align-items:center; justify-content:center;
    padding:var(--ar-s12) 44px !important;
    background:transparent; border:1px solid var(--ar-red); border-radius:0;
    color:var(--ar-red) !important;
    font-weight:700; font-size:18px; line-height:1.5; text-align:center;
    cursor:pointer;
  }
  .ar-tabs-chevron{
    position:absolute; right:18px; top:50%; margin-top:-7px;
    width:10px; height:10px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg); transition:transform .2s ease;
  }
  .ar-tabs-toggle[aria-expanded="true"] .ar-tabs-chevron{
    transform:rotate(-135deg); margin-top:-3px;
  }
  .ar-blog-tabs{
    display:none !important; flex-direction:column; gap:1px;
    background:var(--ar-red);
    border:1px solid var(--ar-red); border-top:0;
  }
  .ar-blog-tabs.is-open{ display:flex !important; }
  .ar-tab{
    flex:none !important; width:100%; box-sizing:border-box;
    border:0 !important; border-radius:0 !important;
    background:var(--ar-gold) !important; color:var(--ar-red) !important;
    padding:var(--ar-s12) var(--ar-s16) !important;
  }
  .ar-tab.is-active{ background:var(--ar-red) !important; color:var(--ar-white) !important; }
  .ar-tab:hover{ background:var(--ar-red) !important; color:var(--ar-white) !important; }
}
@media (max-width:560px){
  :root{ --ar-gutter:16px; }
  .blog-archive{ padding-bottom:var(--ar-s56); }
  .ar-related{ padding-bottom:var(--ar-s56); }
  .ar-grid{ grid-template-columns:1fr; }
  .ar-compare{ grid-template-columns:1fr; }
  .ar-card-title{ font-size:20px !important; min-height:0; }
  .ar-single-head h1{ font-size:28px !important; }
  .ar-single-hero{ height:200px; }
  .ar-section-title{ font-size:28px !important; }
  .ar-featured{ padding:var(--ar-s16) !important; }
  .ar-featured-body h2{ font-size:22px !important; }
  .ar-single-content h2{ font-size:24px !important; }
  .ar-single-content h3{ font-size:20px !important; }
  .ar-toc, .ar-author-card, .ar-callout, .ar-compare-col{ padding:var(--ar-s16); }
  /* the 3-column comparison table can't shrink below ~480px — let it scroll
     instead of forcing the whole page sideways */
  .ar-single-content table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ar-single-content th,
  .ar-single-content td{ padding:var(--ar-s8); font-size:15px !important; }
  .ar-blog-hero,
  .blog-archive .ar-blog-hero{ height:260px !important; }
  .ar-blog-hero h1,
  .blog-archive .ar-blog-hero h1{ font-size:28px !important; }
}