/* ============================================================================
   blog-single.css — the universal single-post template for enquad.en3.support
   ----------------------------------------------------------------------------
   Source of truth: D:\Claude Sessions\Enquad\mockups\blog-src\blog-single.css
   Ships to:        wp-content/themes/hello-theme-child-master/custom-css/blog-single.css
   Enqueued by:     wp-content/novamira-sandbox/enq-blog-single.php (is_singular('post'))
   Preview locally: mockups/blog-src/blog-single-mock.html links this same file.

   EVERY value below was read off the LIVE legacy service pages
   (/web-development-services/) on 2026-08-24, not chosen:
     ground #e5e4f0 · column 856 (350 @390) · section pad 100/100 (50/50 @390)
     display 58/60.9 w600 ls -1.74 (35/36.75 @390) · body 18/27 w500 #2c2c2c mb24
     subhead 24/26.4 w600 ls -0.72 mt40 mb14 (18/19.8 @390) · li 18/27 w400 mb8
     img radius 16 · btn #0f054d #fff 16/30 17w600 radius 0 · label pill radius 42
     card rgba(255,255,255,.53) + blur(17.5px) + 1px rgba(255,255,255,.41)
          + 0 4px 8px rgba(0,0,0,.11), radius 0 · header 84
   Two tiers are DERIVED, not measured: the site's letterspacing is exactly -3%
   of font-size (58 -> -1.74 and 24 -> -0.72 both check), so H2 32/-0.96 and the
   22px lead follow the same rule.

   NO @font-face and no font link, on purpose. Measured live 2026-08-24:
   `Urbanist,sans-serif` renders byte-identical to Arial and `"Instrument Serif"`
   renders as Times, because the site loads no webfonts at all. Declaring the
   same stacks here means this template renders exactly like every other page.
   ============================================================================ */

.enqb-post{
  --enqb-tint:#e5e4f0;
  --enqb-navy:#0f054d;
  --enqb-accent:#e01820;   /* the brand red, sampled off brand/logo.avif -- same
                              value as service.css --accent and capabilities.css
                              --cx-accent. Added 2026-09-04 for the CTA hover. */
  --enqb-ink:#000;
  --enqb-body:#2c2c2c;
  --enqb-muted:#5a5a6a;
  --enqb-card-bg:rgba(255,255,255,.53);
  --enqb-card-br:rgba(255,255,255,.41);
  --enqb-card-sh:0 4px 8px rgba(0,0,0,.11);
  --enqb-hair:rgba(15,5,77,.14);
  --enqb-sans:"IBM Plex Sans",sans-serif;
  --enqb-serif:"IBM Plex Sans",sans-serif;
  --enqb-col:896px;   /* 896 - 2x20 gutter = 856 content, the live figure */
  --enqb-hdr:84px;

  background:var(--enqb-tint);
  color:var(--enqb-body);
  font:500 18px/27px var(--enqb-sans);
}

/* --------------------------------------------------------------------------
   §0 BLEED GUARD — same problem service.css §0 solves.
   Webflow's sheets carry bare ELEMENT rules that land inside any container:
   `h3` arrives in Instrument Serif, `figcaption` arrives italic, and `h1`
   arrives text-transform:uppercase (that last one measured live 2026-08-24 on
   /why-your-website-feels-slow/ — the title shouted until this line existed).
   Namespacing stops class collisions and does nothing about these. Reset
   exactly these, and nothing else — never grow this into a reset stylesheet.
   -------------------------------------------------------------------------- */
.enqb-post h1,.enqb-post h2,.enqb-post h3,.enqb-post h4,.enqb-post h5,.enqb-post h6{
  font-family:var(--enqb-sans);font-style:normal;text-transform:none}
.enqb-post figcaption{font-style:normal}
.enqb-post *{box-sizing:border-box}
.enqb-post img{display:block;max-width:100%;height:auto}

/* --------------------------------------------------------------------------
   §0a STICKY HEADER ON POSTS  (added 2026-08-24, Preet: "sticky header ...
   missing"). The header was always THERE; it just scrolled away.

   global.css §27 sticks the top-level container that CONTAINS the header:
       .elementor > .e-con:has(header.elementor-358)
   Every normal page is elementor_canvas and pulls header 358 in through an
   [elementor-template] shortcode widget nested inside its own Elementor
   content, so that .e-con exists there. A post gets its header from
   get_header() -> elementor_theme_do_location('header'), which prints
   <header> straight onto <body>: no .elementor ancestor, no wrapping .e-con,
   so §27 cannot match and nothing was ever sticky.

   Here <header>'s parent IS <body>, so sticky belongs on <header> itself and
   travels the whole document. Checked: nothing on html or body declares
   overflow, which is the one thing that would break it.

   STICKY, NEVER FIXED. webflow-runtime.js at 34661 offsets every in-page
   anchor by `fixed === n.css(position) ? n.outerHeight() : 0`, measured on
   <header>; global.css §22/§23 and global.js IIFE 3 are all built on that
   term reading 0. sticky is not fixed, so it still reads 0 and every anchor
   lands on the same pixel as it does on every other page.

   .enqb-progress in §1 below is already `top:var(--enqb-hdr)`. It was written
   for a sticky 84px bar, so it only now sits where it was always meant to.
   -------------------------------------------------------------------------- */
body.single-post > header.elementor-location-header{
  position:sticky;
  top:0;
  z-index:999;
}

/* --------------------------------------------------------------------------
   §1 Shell
   -------------------------------------------------------------------------- */
.enqb-sec{padding:100px 0}
.enqb-sec--head{padding-bottom:0}
.enqb-sec--body{padding-top:60px}
.enqb-wrap{max-width:var(--enqb-col);margin:0 auto;padding:0 20px}
.enqb-wrap--wide{max-width:1220px}   /* 1220 - 2x20 = 1180 */

/* Reading progress — sits directly under the sticky 84px header. */
.enqb-progress{position:fixed;top:var(--enqb-hdr);left:0;height:3px;width:0;
  background:var(--enqb-navy);z-index:70;pointer-events:none;
  transition:width .08s linear}

/* --------------------------------------------------------------------------
   §2 Section eyebrow — navy rule + caps (2026-08-26). Was a 42px rounded pill;
   Preet rejected that device sitewide and picked option C of
   mockups/tag-src/tag-variants.html. The same 34x2 rule / 14px gap / 13/700
   upper / 1.9px tracking now ships in home.css §39 and service.css .sv-pill.
   ⚠ inline-flex is inline-level, so the centred heads (.enqb-rel__head) still
   centre it. Nothing on the blog carries .enqb-pill on an <a>, but the hover
   rule is kept colour-only in case one ever does.
   -------------------------------------------------------------------------- */
.enqb-pill{display:inline-flex;align-items:center;gap:14px;background:transparent;
  border-radius:0;padding:0;
  font:700 13px/1 var(--enqb-sans);letter-spacing:1.9px;text-transform:uppercase;
  color:var(--enqb-muted);text-decoration:none}
.enqb-pill::before{content:"";flex:none;width:34px;height:2px;background:var(--enqb-navy)}
a.enqb-pill:hover{background:transparent;color:var(--enqb-navy)}

/* --------------------------------------------------------------------------
   §3 Post head
   -------------------------------------------------------------------------- */
.enqb-title{font:600 58px/60.9px var(--enqb-sans);letter-spacing:-1.74px;
  color:var(--enqb-ink);margin:0}
/* The accent word. One italic serif word inside an otherwise Urbanist
   heading is the site's signature device -- .enqb-title covers the post
   and index heads, and these two reach the same <em> in the closing CTA
   band and the More-reading head, which were falling through to Urbanist
   at weight 600 in a SYNTHESISED oblique (no italic Urbanist is loaded). */
.enqb-title em,.enqb-em,
.enqb-cta h2 em,.enqb-rel__head h2 em{font-family:var(--enqb-serif);font-style:normal;font-weight:700;
  letter-spacing:0}

.enqb-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 0 0;
  font:500 16px/1 var(--enqb-sans);color:var(--enqb-muted)}
.enqb-dot{width:4px;height:4px;border-radius:50%;background:var(--enqb-muted);
  display:inline-block;flex:0 0 auto}

.enqb-hero{margin:44px 0 0}
.enqb-hero img{width:100%;border-radius:16px}
.enqb-hero figcaption{margin-top:12px;font:400 15px/22px var(--enqb-sans);color:var(--enqb-muted)}

/* --------------------------------------------------------------------------
   §4 Article content — this is the UNIVERSAL half. Everything the block editor
   can emit has to land somewhere sensible, because no one styles a post by hand.
   -------------------------------------------------------------------------- */
.enqb-content{color:var(--enqb-body)}
.enqb-content > *:first-child{margin-top:0}
.enqb-content > *:last-child{margin-bottom:0}

.enqb-content p{font:500 18px/27px var(--enqb-sans);margin:0 0 24px}
.enqb-content p.has-large-font-size,
.enqb-content .enqb-lead{font:500 22px/33px var(--enqb-sans);margin:0 0 28px}

.enqb-content h2{font:600 32px/37px var(--enqb-sans);letter-spacing:-.96px;
  color:var(--enqb-ink);margin:56px 0 16px}
.enqb-content h3{font:600 24px/26.4px var(--enqb-sans);letter-spacing:-.72px;
  color:var(--enqb-ink);margin:40px 0 14px}
.enqb-content h4{font:600 20px/24px var(--enqb-sans);letter-spacing:-.6px;
  color:var(--enqb-ink);margin:36px 0 12px}
.enqb-content h5,.enqb-content h6{font:600 18px/22px var(--enqb-sans);letter-spacing:-.54px;
  color:var(--enqb-ink);margin:32px 0 10px}

.enqb-content ul,.enqb-content ol{margin:0 0 24px;padding-left:22px}
.enqb-content li{font:400 18px/27px var(--enqb-sans);margin:0 0 8px}
.enqb-content li::marker{color:var(--enqb-navy)}
.enqb-content li > ul,.enqb-content li > ol{margin:8px 0 0}

.enqb-content a{color:var(--enqb-navy);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.enqb-content a:hover{text-decoration-thickness:2px}
.enqb-content strong,.enqb-content b{color:var(--enqb-ink);font-weight:700}
.enqb-content em,.enqb-content i{font-style:italic}

.enqb-content hr,.enqb-content .wp-block-separator{border:0;height:1px;
  background:var(--enqb-hair);margin:48px 0}

/* images / figures, however the editor wraps them */
.enqb-content figure,.enqb-content .wp-block-image{margin:40px 0}
.enqb-content figure img,.enqb-content .wp-block-image img{width:100%;border-radius:16px}
.enqb-content figcaption,.enqb-content .wp-caption-text{margin-top:12px;
  font:400 15px/22px var(--enqb-sans);color:var(--enqb-muted)}
.enqb-content .alignleft{float:left;margin:8px 32px 24px 0;max-width:50%}
.enqb-content .alignright{float:right;margin:8px 0 24px 32px;max-width:50%}
.enqb-content .aligncenter{margin-left:auto;margin-right:auto}

/* blockquote IS the pull quote — an author gets it with no extra markup */
.enqb-content blockquote,.enqb-content .wp-block-quote{margin:48px 0;
  padding:6px 0 6px 30px;border-left:3px solid var(--enqb-navy);background:none}
.enqb-content blockquote p{font:600 26px/34px var(--enqb-sans);letter-spacing:-.78px;
  color:var(--enqb-ink);margin:0 0 12px}
.enqb-content blockquote p:last-child{margin-bottom:0}
.enqb-content blockquote cite,.enqb-content blockquote .wp-block-quote__citation{
  display:block;margin-top:14px;font:500 16px/22px var(--enqb-sans);
  color:var(--enqb-muted);font-style:normal}

/* callout panel — the site's card chrome. Author opt-in: add the CSS class
   `enqb-panel` to any group/list block in the editor's Advanced panel. */
.enqb-content .enqb-panel{background:var(--enqb-card-bg);border:1px solid var(--enqb-card-br);
  box-shadow:var(--enqb-card-sh);backdrop-filter:blur(17.5px);
  -webkit-backdrop-filter:blur(17.5px);padding:36px 40px;margin:48px 0}
.enqb-content .enqb-panel > *:first-child{margin-top:0}
.enqb-content .enqb-panel > *:last-child{margin-bottom:0}
.enqb-content .enqb-panel p:last-child,.enqb-content .enqb-panel li:last-child{margin-bottom:0}

/* tables and code — rare, but they must not blow the column open */
.enqb-content .enqb-scroll,.enqb-content .wp-block-table{overflow-x:auto;margin:40px 0}
.enqb-content table{width:100%;border-collapse:collapse;
  font:500 16px/24px var(--enqb-sans)}
.enqb-content th,.enqb-content td{border-bottom:1px solid var(--enqb-hair);
  padding:14px 16px;text-align:left}
.enqb-content th{font-weight:700;color:var(--enqb-ink)}
.enqb-content pre{overflow-x:auto;background:#fff;border:1px solid var(--enqb-card-br);
  padding:24px;margin:40px 0;font:400 15px/24px ui-monospace,Menlo,Consolas,monospace}
.enqb-content code{font:400 .92em/1.4 ui-monospace,Menlo,Consolas,monospace;
  background:#fff;padding:2px 6px}
.enqb-content pre code{background:none;padding:0}
.enqb-content iframe,.enqb-content video{max-width:100%;border-radius:16px}

/* --------------------------------------------------------------------------
   §5 Share row.  The breadcrumb, the category pill and the tag list were all
   removed 2026-08-24 on Preet's call ("remove these two and tags at the bottom.
   i ll categorize blog posts later"). Their rules went with them -- restore
   from backups/blog-single-pre-nocrumb-20260824.css if categories ever land.
   .enqb-endrow is flex-START now, not space-between: with the tags gone the
   share group is the only child and space-between would leave it hard right
   under an otherwise left-aligned column.
   -------------------------------------------------------------------------- */
.enqb-endrow{display:flex;align-items:center;justify-content:flex-start;gap:24px;
  flex-wrap:wrap;margin-top:56px;padding-top:32px;border-top:1px solid var(--enqb-hair)}
.enqb-share{display:flex;align-items:center;gap:10px;
  font:500 16px/1 var(--enqb-sans);color:var(--enqb-muted)}
.enqb-sbtn{width:42px;height:42px;display:grid;place-items:center;background:#fff;
  border:1px solid var(--enqb-card-br);color:var(--enqb-navy);text-decoration:none}
.enqb-sbtn:hover{background:var(--enqb-navy);color:#fff}
.enqb-sbtn svg{width:17px;height:17px;fill:currentColor;display:block}

/* --------------------------------------------------------------------------
   §6 Navy CTA band
   -------------------------------------------------------------------------- */
.enqb-cta{background:var(--enqb-navy);color:#fff;padding:90px 0;text-align:center}
.enqb-cta h2{font:600 40px/44px var(--enqb-sans);letter-spacing:-1.2px;color:#fff;
  margin:0 auto;max-width:26ch}
.enqb-cta p{color:rgba(255,255,255,.72);margin:18px auto 34px;max-width:52ch;
  font:500 18px/27px var(--enqb-sans)}
.enqb-btn{display:inline-block;position:relative;background:#fff;color:var(--enqb-navy);
  text-decoration:none;padding:16px 30px;font:600 17px/1 var(--enqb-sans)}
/* ---------- ONE HOVER FOR EVERY CTA ON THE SITE (D-023, 2026-09-04) --------
   A 2px accent rule (#e01820) wipes in along the bottom edge and NOTHING ELSE
   MOVES. Preet picked it as option F off mockups/cta-hover-src/cta-hover.html.

   ⛔ The old hover -- background var(--enqb-tint) -- is GONE ON PURPOSE. It
   was one of six different CTA hovers across five stylesheets.

   ⚠⚠ THE SAME RULE IS IN FIVE FILES and nothing links them: global.css
   section 20a, home.css (--project), v4-mock.html (.cta), build-c2.mjs
   (.cx-close__cta) and this file. Change one, change all five.

   ⚠ .enqb-sbtn (the three share squares) is deliberately NOT included -- it
   is a control, not a call to action, and its invert is the site's only other
   place that already flips.

   ⛔ ::after, NEVER a background-image -- Elementor's lazy-load rule sets
   background-image:none !important below the 4th top-level container until it
   scrolls in. ⛔ scale, NOT transform: the house rule everywhere on this site. */
.enqb-btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--enqb-accent);scale:0 1;transform-origin:left center;
  transition:scale .22s ease}
.enqb-btn:hover::after,.enqb-btn:focus-visible::after{scale:1 1}
/* ⚠⚠⚠ A LIVE DEFECT, FOUND 2026-09-04 BY mockups/shot/hovercheck.mjs AND
   FIXED HERE. hello-elementor/reset.css ships a bare a:active,a:hover{color:#336}
   at (0,1,1); .enqb-btn is (0,1,0) and LOSES, so this button's label really was
   turning slate blue (rgb(51,51,102)) on every hover, on the listing and on
   every post, with the old tint hover hiding nothing. It was never noticed
   because no screenshot on this project can put a pointer on anything.
   ⛔ Do not delete this rule as a repeat of the one above it. */
.enqb-btn:hover,.enqb-btn:focus-visible{color:var(--enqb-navy)}
@media (prefers-reduced-motion:reduce){
  .enqb-btn::after{transition:none}
}

/* --------------------------------------------------------------------------
   §7 More reading
   -------------------------------------------------------------------------- */
.enqb-rel__head{text-align:center;margin-bottom:48px}
.enqb-rel__head h2{font:600 40px/44px var(--enqb-sans);letter-spacing:-1.2px;
  color:var(--enqb-ink);margin:22px 0 0}
.enqb-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}

/* A young blog often has fewer than 3 related posts. Keep the CARD width constant
   ((1180 - 2x30) / 3 = 373) and centre the row instead of leaving a hole in the
   3rd column. Degrades to the plain 3-col grid where :has() is unsupported. */
@media (min-width:992px){
  .enqb-grid3:has(.enqb-rcard:nth-child(2):last-child){
    grid-template-columns:repeat(2,1fr);max-width:777px;margin-left:auto;margin-right:auto}
  .enqb-grid3:has(.enqb-rcard:only-child){
    grid-template-columns:1fr;max-width:373px;margin-left:auto;margin-right:auto}
}
.enqb-rcard{background:var(--enqb-card-bg);border:1px solid var(--enqb-card-br);
  box-shadow:var(--enqb-card-sh);backdrop-filter:blur(17.5px);
  -webkit-backdrop-filter:blur(17.5px);padding:18px 18px 26px;
  display:flex;flex-direction:column;text-decoration:none}
.enqb-rcard:hover{background:rgba(255,255,255,.78)}
.enqb-rcard img{width:100%;height:190px;object-fit:cover;border-radius:16px}
.enqb-rcard__ph{width:100%;height:190px;border-radius:16px;background:var(--enqb-navy)}
.enqb-rcard__t{font:600 20px/25px var(--enqb-sans);letter-spacing:-.6px;
  color:var(--enqb-ink);margin:22px 0 16px}
.enqb-rcard__m{margin:auto 0 0;font:500 15px/1 var(--enqb-sans);color:var(--enqb-muted)}

/* --------------------------------------------------------------------------
   §8 Responsive. 767 and 991 are the site's own breakpoints; 390 is the
   measured phone state (350 content = 20px gutters, section pad 50).
   -------------------------------------------------------------------------- */
@media (max-width:991px){
  .enqb-grid3{grid-template-columns:repeat(2,1fr)}
  .enqb-grid3 .enqb-rcard:nth-child(3){display:none}
}
@media (max-width:767px){
  .enqb-sec{padding:50px 0}
  .enqb-sec--body{padding-top:40px}
  .enqb-title{font-size:35px;line-height:36.75px}
  .enqb-hero{margin-top:32px}
  .enqb-meta{gap:12px}
  .enqb-content p.has-large-font-size,.enqb-content .enqb-lead{font-size:20px;line-height:30px}
  .enqb-content h2{font-size:24px;line-height:26.4px;letter-spacing:-.72px;margin:44px 0 14px}
  .enqb-content h3{font-size:18px;line-height:19.8px;letter-spacing:-.54px;margin:40px 0 14px}
  .enqb-content h4,.enqb-content h5,.enqb-content h6{font-size:18px;line-height:22px}
  .enqb-content blockquote,.enqb-content .wp-block-quote{margin:36px 0;padding-left:20px}
  .enqb-content blockquote p{font-size:21px;line-height:29px;letter-spacing:-.63px}
  .enqb-content .enqb-panel{padding:26px 24px}
  .enqb-content .alignleft,.enqb-content .alignright{float:none;margin:24px 0;max-width:100%}
  .enqb-cta{padding:60px 0}
  .enqb-cta h2,.enqb-rel__head h2{font-size:28px;line-height:32px;letter-spacing:-.84px}
  .enqb-grid3{grid-template-columns:1fr}
  .enqb-grid3 .enqb-rcard:nth-child(3){display:flex}
  .enqb-endrow{gap:20px}
}