/* ============================================================
   Afrikatek - WordPress bridge
   Reconciles the design system with Solace theme defaults and
   Elementor container styling. Everything here exists ONLY because
   the React app owned the whole document and WordPress does not.
   Keep design-system.css a faithful port; put compromises here.
   ============================================================ */

/* ---------- 1. Base document, reclaimed from Solace ---------- */
/* Scoped to body.afk so nothing here touches a page we have not converted. */
html:has(body.afk){scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body.afk{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.afk a{color:inherit;}
body.afk img{max-width:100%;display:block;height:auto;}

/* Solace + Elementor both ship heading resets. Ours wins. */
.afk h1,.afk h2,.afk h3,.afk h4,
.afk .display,.afk .h1,.afk .h2,.afk .h3{
  margin:0;font-weight:400;letter-spacing:-.015em;color:inherit;
}
.afk .h3,.afk h3{font-weight:600;}
.afk p{margin:0;text-wrap:pretty;}
.afk ul,.afk ol{margin:0;}

/* Solace paints links and buttons its stock blue. Remove it entirely. */
.afk a{text-decoration:none;}
.afk a:hover,.afk a:focus{color:inherit;}
.afk .btn,.afk .btn:hover,.afk .btn:focus,.afk .btn:visited{text-decoration:none;}

/* ---------- 2. Elementor containers ---------- */
/* Elementor makes every container a flexbox. Any container carrying one of our
   grid classes has to be a grid instead, and Elementor's rule is specific
   enough that we need to out-specify it. */
.elementor .e-con.cards,.elementor .e-con.cards > .e-con-inner,
.elementor .e-con.quotes,.elementor .e-con.quotes > .e-con-inner,
.elementor .e-con.posts,.elementor .e-con.posts > .e-con-inner,
.elementor .e-con.ind-grid,.elementor .e-con.ind-grid > .e-con-inner,
.elementor .e-con.stats,.elementor .e-con.stats > .e-con-inner,
.elementor .e-con.vals,.elementor .e-con.vals > .e-con-inner,
.elementor .e-con.proc,.elementor .e-con.proc > .e-con-inner,
.elementor .e-con.split,.elementor .e-con.split > .e-con-inner,
.elementor .e-con.case-grid,.elementor .e-con.case-grid > .e-con-inner,
.elementor .e-con.work-grid,.elementor .e-con.work-grid > .e-con-inner,
.elementor .e-con.people,.elementor .e-con.people > .e-con-inner,
.elementor .e-con.cgrid,.elementor .e-con.cgrid > .e-con-inner{
  display:grid;
}

/* Our sections are full-bleed and carry their own padding. Strip Elementor's. */
.elementor .e-con.afk-section,
.elementor .e-con.afk-section > .e-con-inner{
  --padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;
  --margin-top:0;--margin-bottom:0;
  max-width:none;width:100%;
}
.elementor .e-con.afk-section > .e-con-inner{max-width:none;}

/* .wrap is our container; Elementor must not add a second one around it. */
.elementor .e-con.wrap > .e-con-inner{max-width:none;padding:0;}

/* A widget is a flex child of its container, and a flex child defaults to
   min-width:auto - it refuses to shrink below its content. The marquee track is
   deliberately wider than the viewport, so without this it stretches its whole
   section (measured: 4035px) and the page scrolls sideways. */
   min-width:0 alone is the fix. Do NOT add max-width here: it out-specifies
   .afk .wrap{max-width:1220px} and silently widens every content column. */
.afk .e-con > .elementor-widget,
.afk .e-con > .e-con-inner > .elementor-widget,
.afk .e-con > .e-con,
.afk .e-con > .e-con-inner > .e-con{min-width:0;}
.afk .elementor-widget-html > .elementor-widget-container{min-width:0;}
.afk .marquee{width:100%;max-width:100%;}

/* Deliberately-wider-than-viewport content (the marquee track) needs its widget
   pinned to the container width and clipped. min-width:0 is not sufficient on a
   flex item whose descendant is width:max-content. Add afk-clip to the widget. */
.afk .elementor-widget.afk-clip,
.afk .elementor-widget.afk-clip > .elementor-widget-container{
  width:100%;max-width:100%;min-width:0;overflow:hidden;
}

/* NOTE: Elementor 4.x optimized markup drops .elementor-widget-container from
   the html widget, so rules must target the widget element as well, never the
   container alone. */
.afk .elementor-widget-html{min-width:0;}
.afk .elementor-widget-html.afk-decor{position:static;width:0;height:0;margin:0;padding:0;}

/* Inline icons inside HTML widgets carry no intrinsic size, so an unconstrained
   SVG fills its flex line (measured: a 526px arrow). Size them like the design. */
.afk .case-body .go svg,
.afk .work .go svg,
.afk .post .rm svg,
.afk .person .li svg{width:16px;height:16px;flex:none;}
.afk .bankcard .btn svg,
.afk .btn svg{width:15px;height:15px;flex:none;}
.afk .card .ic svg,
.afk .ind .ic svg{flex:none;}

/* Widget wrappers add vertical rhythm we already control. */
.afk .elementor-widget:not(:last-child){margin-block-end:0;}
.afk .elementor-widget-container{margin:0;}
.afk .elementor-widget-html,.afk .elementor-widget-text-editor{line-height:inherit;}

/* Elementor normalises heading margins per-widget; ours are layout-driven. */
.afk .elementor-heading-title{font-family:inherit;font-weight:inherit;line-height:inherit;color:inherit;}

/* ---------- 3. Solace chrome we do not want on design pages ---------- */
/* Solace prints a page-title hero above the content. Our pages carry .phead. */
.afk-fullwidth .solace-page-header,
.afk-fullwidth .page-header,
.afk-fullwidth .entry-header,
.afk-fullwidth .solace-breadcrumbs{display:none;}

/* Solace constrains the content column; our sections are edge-to-edge. */
.afk-fullwidth .container,
.afk-fullwidth .solace-container,
.afk-fullwidth .site-content > .container,
.afk-fullwidth #content > .container{max-width:none!important;padding-left:0!important;padding-right:0!important;width:100%!important;}
.afk-fullwidth .content-area,
.afk-fullwidth .site-main,
.afk-fullwidth article.page{margin:0!important;padding:0!important;max-width:none!important;}
.afk-fullwidth .entry-content{margin:0!important;}

/* ---------- 4. Sections as WP markup ---------- */
/* In React these were <section> elements with position:relative. In Elementor
   they are containers, so the positioning context has to be re-declared. */
.afk .hero,.afk .phead,.afk .cta-band,.afk .dark-sec,.afk .sec,.afk .marquee{position:relative;}
.afk .hero,.afk .phead,.afk .cta-band{isolation:isolate;}

/* Absolute decorations must not be clipped by Elementor's overflow default. */
.afk .e-con.hero,.afk .e-con.phead,.afk .e-con.cta-band{overflow:hidden;}

/* ---------- 5. Forms (Solace Extra form builder) ---------- */
/* The solaceform widget renders its own markup; dress it as the design's .form */
.afk .solaceform-wrapper,
.afk .solace-form{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:38px;
}
.afk .solaceform-wrapper label,
.afk .solace-form label{
  display:block;font-family:var(--ff);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--graph);font-weight:600;margin-bottom:8px;
}
.afk .solaceform-wrapper input[type=text],
.afk .solaceform-wrapper input[type=email],
.afk .solaceform-wrapper input[type=tel],
.afk .solaceform-wrapper input[type=number],
.afk .solaceform-wrapper select,
.afk .solaceform-wrapper textarea,
.afk .solace-form input,
.afk .solace-form select,
.afk .solace-form textarea{
  width:100%;padding:14px;border:1px solid var(--line);border-radius:8px;
  font-family:var(--ff);font-size:15px;color:var(--ink);background:var(--paper);
  transition:border-color .15s,box-shadow .15s;
}
.afk .solaceform-wrapper input:focus,
.afk .solaceform-wrapper select:focus,
.afk .solaceform-wrapper textarea:focus,
.afk .solace-form input:focus,
.afk .solace-form select:focus,
.afk .solace-form textarea:focus{
  outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(140,39,3,.12);
}
.afk .solaceform-wrapper textarea,
.afk .solace-form textarea{resize:vertical;min-height:130px;}
.afk .solaceform-wrapper button,
.afk .solaceform-wrapper input[type=submit],
.afk .solace-form button,
.afk .solace-form input[type=submit]{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--ff);font-weight:700;font-size:15.5px;
  padding:16px 32px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  background:var(--copper);color:#fff;width:auto;
  transition:transform .25s var(--ease-out),background .2s,box-shadow .25s;
}
.afk .solaceform-wrapper button:hover,
.afk .solace-form button:hover{background:var(--copper-600);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(140,39,3,.6);}

/* ---------- 6. Accessibility ---------- */
.afk a:focus-visible,
.afk button:focus-visible,
.afk .btn:focus-visible,
.afk input:focus-visible,
.afk select:focus-visible,
.afk textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;
}
.afk .dark-sec a:focus-visible,
.afk .hero a:focus-visible,
.afk .phead a:focus-visible,
.afk .cta-band a:focus-visible{outline-color:var(--gold);}
.afk-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-family:var(--ff);font-size:14px;}
.afk-skip:focus{left:0;}

/* ---------- 7. Print ---------- */
@media print{
  .afk .hero-africa,.afk .glow,.afk .gridbg,.afk .marquee,.afk .scroll-hint{display:none!important;}
  .afk .dark-sec,.afk .hero,.afk .phead,.afk .cta-band{background:#fff!important;color:#000!important;}
}

/* ---------- 8. Native Elementor widget adapters ----------
   Elementor wraps every widget in .elementor-widget > .elementor-widget-container
   before the real element, so a design class applied through the widget's CSS
   Classes field lands two levels above the text. These adapters re-target it,
   which is what lets section headings, eyebrows, leads and buttons stay NATIVE
   Elementor widgets (editable in the UI) instead of frozen HTML.

   Usage: put the afk-* class in the widget's Advanced > CSS Classes field.
   -------------------------------------------------------- */

/* Eyebrow - the wrapper becomes the inline-flex row so the rule sits inline. */
.afk .elementor-widget.afk-ey > .elementor-widget-container{
  font-family:var(--ff);font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--copper);font-weight:600;display:inline-flex;align-items:center;gap:12px;
}
.afk .elementor-widget.afk-ey > .elementor-widget-container::before{
  content:"";width:26px;height:2px;background:var(--copper);flex:none;transition:width .5s var(--ease-out);
}
.afk .elementor-widget.afk-ey .elementor-heading-title{font:inherit;color:inherit;letter-spacing:inherit;margin:0;}
.afk .elementor-widget.afk-ey.light > .elementor-widget-container{color:var(--gold);}
.afk .elementor-widget.afk-ey.light > .elementor-widget-container::before{background:var(--gold);}
.afk .in-view .elementor-widget.afk-ey > .elementor-widget-container::before,
.afk .elementor-widget.afk-ey.in > .elementor-widget-container::before{animation:eyline .7s var(--ease-out) both;}

/* Display / H1 / H2 headings */
.afk .elementor-widget.afk-display .elementor-heading-title{
  font-family:var(--serif);font-size:clamp(42px,6.4vw,84px);line-height:1.0;font-weight:400;letter-spacing:-.015em;
}
.afk .elementor-widget.afk-h1 .elementor-heading-title{
  font-family:var(--serif);font-size:clamp(38px,5vw,64px);line-height:1.02;font-weight:400;letter-spacing:-.015em;
}
.afk .elementor-widget.afk-h2 .elementor-heading-title{
  font-family:var(--serif);font-size:clamp(30px,4vw,48px);line-height:1.06;font-weight:400;letter-spacing:-.015em;
}
.afk .elementor-widget.afk-h3 .elementor-heading-title{
  font-family:var(--ff);font-weight:600;font-size:21px;letter-spacing:-.01em;line-height:1.3;
}
.afk .elementor-widget.afk-onink .elementor-heading-title{color:#fff;}

/* Lead paragraph + body copy inside a text-editor widget */
.afk .elementor-widget.afk-lead .elementor-widget-container,
.afk .elementor-widget.afk-lead p{
  font-family:var(--serif);font-size:clamp(18px,2vw,23px);line-height:1.5;color:var(--ink-700);
}
.afk .elementor-widget.afk-body .elementor-widget-container,
.afk .elementor-widget.afk-body p{font-size:16px;line-height:1.75;color:var(--graph);}
.afk .elementor-widget.afk-body p + p{margin-top:1em;}
.afk .dark-sec .elementor-widget.afk-body .elementor-widget-container,
.afk .dark-sec .elementor-widget.afk-body p{color:var(--ink-100);}
.afk .elementor-widget.afk-mono .elementor-widget-container{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--graph3);text-transform:uppercase;
}

/* Buttons - map Elementor's button widget onto the design's .btn scale. */
.afk .elementor-widget-button.afk-btn .elementor-button{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff);font-weight:700;font-size:15.5px;letter-spacing:.01em;
  padding:13px 26px;border-radius:999px;text-decoration:none;border:1.5px solid transparent;
  transition:transform .25s var(--ease-out),background .2s,color .2s,border-color .2s,box-shadow .25s;
}
.afk .elementor-widget-button.afk-btn.afk-lg .elementor-button{padding:16px 32px;font-size:16.5px;}
.afk .elementor-widget-button.afk-btn .elementor-button-icon{transition:transform .3s var(--ease-out);}
.afk .elementor-widget-button.afk-btn .elementor-button:hover .elementor-button-icon{transform:translateX(4px);}
.afk .elementor-widget-button.afk-primary .elementor-button{background:var(--copper);color:#fff;}
.afk .elementor-widget-button.afk-primary .elementor-button:hover{background:var(--copper-600);color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(140,39,3,.6);}
.afk .elementor-widget-button.afk-ghost .elementor-button{background:transparent;border-color:var(--line-2);color:var(--ink);}
.afk .elementor-widget-button.afk-ghost .elementor-button:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px);}
.afk .elementor-widget-button.afk-light .elementor-button{background:transparent;border-color:rgba(255,255,255,.32);color:#fff;}
.afk .elementor-widget-button.afk-light .elementor-button:hover{background:#fff;color:var(--ink);transform:translateY(-2px);}
.afk .elementor-widget-button.afk-gold .elementor-button{background:var(--gold);color:var(--ink);}
.afk .elementor-widget-button.afk-gold .elementor-button:hover{background:var(--gold-400);color:var(--ink);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(224,162,60,.6);}

/* Row layouts declared in CSS, not left to Elementor's per-element stylesheet.
   .e-con defaults to flex-direction:column; if the generated post-N.css is ever
   missing or stale these rows would silently stack and, with align-items:flex-end,
   slide to the right edge. Declaring them here makes the layout self-contained. */
.afk .e-con.head-row{
  flex-direction:row;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;
}
.afk .e-con.hero-actions,
.afk .e-con.actions{flex-direction:row;flex-wrap:wrap;}

/* A container holding just a button still defaults to width:100%, which in a
   head-row eats the whole line and pushes the button onto its own row. Shrink
   it to its content instead. */
.afk .e-con.afk-inline{width:auto;max-width:100%;flex:0 0 auto;flex-direction:row;}
.afk .e-con.actions{justify-content:center;}
@media (max-width:680px){
  .afk .e-con.head-row,
  .afk .e-con.hero-actions,
  .afk .e-con.actions{flex-direction:column;align-items:flex-start;}
  .afk .e-con.actions{align-items:center;}
}

/* A container carrying .section-head still needs its 64ch cap. */
.afk .e-con.section-head,.afk .e-con.section-head > .e-con-inner{max-width:64ch;}
.afk .e-con.wrap-tight,.afk .e-con.wrap-tight > .e-con-inner{max-width:980px;margin-inline:auto;}

/* Elementor's text-editor widget adds a trailing paragraph margin; the design
   controls its own rhythm. Scoped to <p> so it cannot eat a design margin such
   as .stats / .cards / .hero-meta margin-top. */
.afk .elementor-widget-text-editor > .elementor-widget-container > p:last-child{margin-bottom:0;}

/* ---------- 9. Decoration widgets ----------
   .gridbg / .glow / .hero-africa / .imgbg are position:absolute and expect to
   resolve against the SECTION. An Elementor widget is position:relative, so a
   decoration placed in one anchors to a zero-size box in the middle of the
   section instead. Marking the widget afk-decor takes it out of the positioning
   chain so the decorations land on the section, as they do in the source design. */
.afk .elementor-widget-html.afk-decor,
.afk .elementor-widget-html.afk-decor > .elementor-widget-container{
  position:static;width:0;height:0;margin:0;padding:0;
}

/* The hero is min-height:100vh with vertically centred content. Elementor's
   container is a column flexbox, so centring is justify-content, not align. */
.afk .e-con.hero{justify-content:center;}
.afk .e-con.hero > .e-con-inner{justify-content:center;}

/* Sections that host decorations need a positioning context of their own. */
.afk .e-con.hero,.afk .e-con.phead,.afk .e-con.cta-band,
.afk .e-con.dark-sec,.afk .e-con.sec,.afk .e-con.bankcard{position:relative;}

/* Content must sit above the decorations. */
.afk .e-con.hero > .e-con.wrap,
.afk .e-con.phead > .e-con.wrap,
.afk .e-con.cta-band > .e-con.wrap,
.afk .e-con.dark-sec > .e-con.wrap{position:relative;z-index:3;}

/* ---------- 10. Interior page sections ----------
   Classes introduced by Services, Work, About and Contact. Same rule as the
   rest of this file: Elementor containers need their layout declared, because
   .e-con defaults to a column flexbox. */

/* Page header: .phead is full-bleed ink and hosts absolute decorations. */
.afk .e-con.phead{position:relative;overflow:hidden;}
.afk .e-con.phead > .e-con.wrap{position:relative;z-index:3;}
.afk .e-con.afk-phead-short{--padding-bottom:0px;}
.afk .afk-phead-short .wrap{padding-bottom:0;}

/* Centred section head (Work "Where we work"). */
.afk .e-con.section-head.afk-center,
.afk .e-con.section-head.afk-center > .e-con-inner{max-width:none;align-items:center;text-align:center;}
.afk .afk-center .elementor-widget.afk-ey > .elementor-widget-container{justify-content:center;}

/* Contact: the design's .cgrid two-column split. */
.afk .e-con.cgrid{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;
}
.afk .e-con.afk-form-col{width:100%;min-width:0;}

/* Solace's form widget wearing the design's .form panel. */
.afk .afk-form{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:38px;width:100%;
}
.afk .afk-form form{display:flex;flex-wrap:wrap;gap:0 18px;}
.afk .afk-form .solaceform-field,
.afk .afk-form .field{margin-bottom:18px;}
.afk .afk-form label{
  display:block;font-family:var(--ff);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--graph);font-weight:600;margin-bottom:8px;
}
.afk .afk-form input[type=text],
.afk .afk-form input[type=email],
.afk .afk-form input[type=tel],
.afk .afk-form input[type=number],
.afk .afk-form select,
.afk .afk-form textarea{
  width:100%;padding:14px;border:1px solid var(--line);border-radius:8px;
  font-family:var(--ff);font-size:15px;color:var(--ink);background:var(--paper);
  transition:border-color .15s,box-shadow .15s;
}
.afk .afk-form input:focus,
.afk .afk-form select:focus,
.afk .afk-form textarea:focus{
  outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(140,39,3,.12);
}
.afk .afk-form textarea{resize:vertical;min-height:130px;}
.afk .afk-form button,
.afk .afk-form input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ff);font-weight:700;font-size:16.5px;
  padding:16px 32px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  background:var(--copper);color:#fff;width:100%;
  transition:transform .25s var(--ease-out),background .2s,box-shadow .25s;
}
.afk .afk-form button:hover,
.afk .afk-form input[type=submit]:hover{
  background:var(--copper-600);transform:translateY(-2px);
  box-shadow:0 14px 30px -12px rgba(140,39,3,.6);
}

/* Work: the markets map is centred with pinned labels. */
.afk .market-map{position:relative;max-width:580px;margin:50px auto 0;}

/* Titanium feature: the dashboard column must not collapse. */
.afk .e-con.split > .elementor-widget-html{width:100%;min-width:0;}

@media (max-width:1000px){
  .afk .e-con.cgrid{grid-template-columns:1fr;gap:40px;}
}

/* ---------------------------------------------------------------------------
   11. INSIGHTS (BLOG) TEMPLATES — Phase 4
   These views are rendered by child-theme PHP, not Elementor, so they use the
   design's own classes directly and need almost no reconciliation. What lives
   here is only what the React design has no equivalent for: article prose, the
   article meta line, post navigation and WordPress pagination.
--------------------------------------------------------------------------- */

/* Mono meta line under an article's standfirst. */
.afk .phead .postmeta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-200);margin-top:26px;}

/* A card with no featured image gets a brand plate, not a hole. */
.afk .post .ph,.afk .work .ph{background-color:var(--ink);}

/* --- article ------------------------------------------------------------ */
.afk .article-lead{height:clamp(240px,34vw,460px);margin-bottom:64px;}
.afk .article-body{max-width:760px;padding:0;}
.afk .article-body p{font-size:17px;line-height:1.78;color:var(--graph);margin:0 0 22px;}
.afk .article-body p.lead{font-family:var(--serif);font-size:clamp(20px,2.1vw,26px);
  line-height:1.5;color:var(--ink-700);margin-bottom:32px;}
.afk .article-body h2{font-family:var(--serif);font-size:clamp(26px,3vw,36px);
  line-height:1.1;color:var(--ink);margin:52px 0 18px;}
.afk .article-body h3{font-family:var(--ff);font-weight:600;font-size:21px;
  letter-spacing:-.01em;color:var(--ink);margin:38px 0 14px;}
.afk .article-body h4{font-family:var(--ff);font-weight:600;font-size:17px;
  color:var(--ink);margin:30px 0 12px;}
.afk .article-body ul,.afk .article-body ol{margin:0 0 22px;padding-left:22px;
  color:var(--graph);font-size:17px;line-height:1.78;}
.afk .article-body li{margin-bottom:8px;}
.afk .article-body a{color:var(--copper);text-decoration:underline;text-underline-offset:3px;}
.afk .article-body a:hover{color:var(--copper-600);}
.afk .article-body blockquote{margin:34px 0;padding:4px 0 4px 26px;
  border-left:2px solid var(--gold);font-family:var(--serif);font-style:italic;
  font-size:22px;line-height:1.5;color:var(--ink-700);}
.afk .article-body blockquote p{font:inherit;color:inherit;margin:0;}
.afk .article-body img{border-radius:12px;}
.afk .article-body figure{margin:34px 0;max-width:100%;}
.afk .article-body figcaption{font-family:var(--mono);font-size:12px;
  color:var(--graph3);margin-top:10px;}
.afk .article-body hr{border:0;border-top:1px solid var(--line);margin:44px 0;}
.afk .article-body pre{background:var(--ink);color:#fff;border-radius:12px;padding:22px;
  overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.6;margin:0 0 24px;}
.afk .article-body code{font-family:var(--mono);font-size:.92em;}
.afk .article-body :not(pre) > code{background:var(--off);border:1px solid var(--line);
  border-radius:5px;padding:2px 6px;}
.afk .article-body table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:15px;}
.afk .article-body th,.afk .article-body td{border-bottom:1px solid var(--line);
  padding:12px 10px;text-align:left;}
.afk .article-body th{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--graph3);}

/* Category and tag chips read on paper here, not on ink. */
.afk .article-chips{margin-top:44px;}
.afk .article-chips .chip{color:var(--ink);background:var(--off);border-color:var(--line);}
.afk .article-chips .chip:hover{background:var(--copper-050);border-color:var(--copper-300);
  color:var(--copper);}

.afk .article-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px;
  border-top:1px solid var(--line);padding-top:26px;}
.afk .article-nav .an{display:flex;flex-direction:column;gap:8px;padding:20px 22px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  transition:border-color .3s,transform .3s var(--ease-out);}
.afk .article-nav .an:hover{border-color:var(--copper-300);transform:translateY(-3px);}
.afk .article-nav .an.next{text-align:right;}
.afk .article-nav .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--copper);}
.afk .article-nav .t{font-family:var(--serif);font-size:18px;line-height:1.25;color:var(--ink);}

/* --- pagination --------------------------------------------------------- */
.afk .navigation.pagination{margin-top:56px;}
.afk .navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.afk .navigation.pagination .page-numbers{display:inline-flex;align-items:center;
  justify-content:center;min-width:42px;height:42px;padding:0 14px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);font-family:var(--mono);font-size:13px;
  color:var(--ink);transition:background .25s,border-color .25s,color .25s;}
.afk .navigation.pagination .page-numbers:hover{border-color:var(--copper);color:var(--copper);}
.afk .navigation.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff;}
.afk .navigation.pagination .page-numbers.dots{border-color:transparent;background:transparent;}
.afk .navigation.pagination .screen-reader-text{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

@media (max-width:680px){
  .afk .article-nav{grid-template-columns:1fr;}
  .afk .article-nav .an.next{text-align:left;}
}

/* ---------------------------------------------------------------------------
   12. NOT FOUND + SEARCH FORM — Phase 5
   The design system now applies site-wide, so Solace's search form needs to
   wear the brand rather than the theme default.
--------------------------------------------------------------------------- */

.afk .afk-404-search{margin-top:44px;max-width:520px;}
.afk .afk-404-search label{display:block;margin:0;}
.afk .afk-404-search .search-form{display:flex;gap:10px;align-items:stretch;}
.afk .afk-404-search .search-field{flex:1;min-width:0;height:52px;padding:0 18px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font-family:var(--ff);font-size:15px;color:var(--ink);}
.afk .afk-404-search .search-field:focus{outline:none;border-color:var(--copper);
  box-shadow:0 0 0 3px var(--copper-050);}
.afk .afk-404-search .search-submit{display:inline-flex;align-items:center;gap:8px;
  height:52px;padding:0 24px;border:0;border-radius:999px;background:var(--ink);
  color:#fff;font-family:var(--ff);font-weight:700;font-size:15px;cursor:pointer;
  transition:background .25s;}
.afk .afk-404-search .search-submit:hover{background:var(--copper);}
.afk .afk-404-search .search-submit svg{width:15px;height:15px;flex:none;fill:currentColor;}
.afk .afk-404-search .screen-reader-text{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

@media (max-width:520px){
  .afk .afk-404-search .search-form{flex-direction:column;}
  .afk .afk-404-search .search-submit{justify-content:center;}
}

/* ---------------------------------------------------------------------------
   13. VISUALLY HIDDEN — Phase 6
   Section headings that exist for the document outline and for screen readers,
   where the design deliberately shows none.
--------------------------------------------------------------------------- */
.afk .screen-reader-text:not(:focus):not(:active){position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}