/* Blog-specific styles. Fonts/colors and the header/footer (.header/.tab-nav/.logo
   and footer/.footer-inner/.footer-meta) are reused verbatim from the main site's
   abilsoft.css + tabNav.css; this file only adds the blog's own page layout.

   Colors are driven by the theme tokens defined in abilsoft.css (:root and
   :root[data-theme="dark"]). A tiny script in base.njk stamps data-theme on
   <html> before first paint (based upon localStorage, falling back to the OS
   prefers-color-scheme), and a header toggle allows user to switch themes 
   and persists it.

   App-shell layout: the page is exactly one viewport tall and never scrolls as a
   whole. The header and footer take their natural heights and stay fixed; the
   middle (.blog-main) is the only scrollable region and scrolls only when its
   content is taller than the space available. We do this so there's only a
   scrollbar when truly necessary AND so the footer never shifts between pages. */
body.blog {
  margin: 0;
  height: 100vh;
  height: 100dvh;     /* track the dynamic viewport on mobile (URL bar) */
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* the page itself never scrolls; .blog-main does */
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);   /* unified with the main site (self-hosted Open Sans) */
  line-height: 1.6;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Header: fixed height, grows to fit the logo, centered. */
body.blog .header {
  flex: 0 0 auto;
  height: auto;
  min-height: 80px;
  align-items: center;
}

/* Footer: fixed at the bottom, full viewport width, never shifts. The shared
   footer's grey textured wall and white text reads fine in both themes, so it's
   intentionally left un-themed at this time. */
body.blog footer {
  position: static;
  flex: 0 0 auto;
}

/* The scroll region. Full width so its scrollbar sits at the window's right edge.
   scrollbar-gutter reserves the scrollbar's width here (this is an explicit
   overflow:auto scroll container, so the gutter reliably applies) — that keeps
   the centered column from shifting by ~7px when a post is long enough to scroll. */
.blog-main {
  flex: 1 1 auto;
  min-height: 0;      /* allow the flex item to shrink so overflow can scroll */
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* Centered reading column inside the scroll region. */
.blog-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  box-sizing: border-box;
  /* Unified body size, same token as the main site (long-form keeps the body's 1.6 line-height
     for comfortable reading rather than the tighter --lh-base used on the marketing cards). */
  font-size: var(--fs-base);
  font-weight: var(--fw-body);
}

/* ---- Theme toggle (in the header nav) ----
   An unstyled button that inherits the nav's sizing; it's just an emoji glyph. */
.theme-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-size: larger;
  line-height: 1;
  color: inherit;
}

.theme-toggle:hover {
  transform: scale(1.15);
}

/* The nav links come from tabNav.css with a hardcoded color; re-point them at
   the themed token so they track light/dark. blog.css loads after tabNav.css,
   so this wins for the identical selector. */
.tab-nav ul li a {
  color: var(--nav-link);
}

/* The header logo is a white-background JPG, so on the dark header it would read as a
   bare white rectangle. In dark mode, swap in the transparent-background PNG via CSS
   `content` (this keeps the <img> element and its alt). The PNG was padded to 685x240
   to match the JPG's aspect (682x239), so at the shared 250px width both render
   ~87.6px tall and toggling themes causes no layout shift. Replaces the old light
   "chip" (which added padding in dark only and reflowed the header on toggle). */
:root[data-theme="dark"] .header .logo {
  content: url("/images/FinalLogoWithoutTaglineTransparent.png");
}

/* ---- Listing page ---- */

/* Hero banner (rendered by base.njk as a direct child of .blog-main, OUTSIDE the
   reading column).  Full-width at width:100% of the scroll region, exactly like the
   main site's slider (which is 100%, deliberately NOT 100vw), so it goes edge-to-edge
   with no gap and never causes horizontal scroll. 3:1 image, so height tracks width
   via height:auto (up to 600px at the native 1800px). */
.blog-hero {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;   /* the .blog-content top padding (32px) is the only gap below it */
  box-sizing: border-box;   /* keep the dark-mode 2px border inside 100% (no h-scroll) */
}

/* Dark mode: the image's own dark background sits against the slightly different
   dark page bg.  We use a solid 2px slate border to read as an intentional edge.  
   Light mode is full-width with no border. */
:root[data-theme="dark"] .blog-hero {
  border: 2px solid #414d5c;
}

/* ---- Hero caption + info panel ----
   A quiet one-line caption under the hero's lower-left corner, with an info button.
   The panel it opens appears in place under the caption at every screen width,
   pushing the page down, so it is never cut off however long the text gets.

   Alternative, kept ready: add the class "hero-caption--float" to the
   <div class="hero-caption"> in base.njk, and on wider screens the panel floats up
   over the image instead (phones still open it in place).  That works only for short
   text, a few sentences; taller text gets cut off at the top of the image. */
.hero-caption {
  position: relative;   /* anchor for the floating variant */
  padding: 6px 16px 0;
  font-family: var(--font-body);   /* set here so the caption and the panel both get it */
}

.hero-caption-text {
  margin: 0;
  font-size: var(--fs-caption);
  font-style: italic;
  font-weight: 400;     /* see --fs-caption: Light (--fw-body) is too faint this small */
  line-height: 1.5;
  color: var(--muted);  /* not --meta: --meta is too faint for small text on white */
}

/* The info button: a 24px round target (the minimum comfortable tap size). */
.hero-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 4px;
  padding: 0;
  font-size: inherit;    /* buttons don't inherit text size by default; the icon is sized in em */
  vertical-align: -3px;  /* centres the icon on the middle of the lowercase letters (measured) */
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

/* Icon size follows the caption text (--fs-caption), so it scales with it.  The circle
   fills 20/24 of the icon box, so 1.04em draws a circle about 0.87em across (13px at
   15px text): a bit taller than the capital letters, not towering over them. */
.hero-info-btn svg {
  width: 1.04em;
  height: 1.04em;
}

.hero-info-btn:hover,
.hero-info-btn[aria-expanded="true"] {
  color: var(--accent);
}

.hero-info-btn:focus-visible,
.hero-info-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The panel: opens in place under the caption. */
.hero-info {
  position: relative;   /* the close button's anchor */
  box-sizing: border-box;   /* the 700px below includes padding and border */
  max-width: 640px;     /* about 72 characters per line: comfortable reading length */
  margin-top: 8px;
  padding: 12px 40px 12px 14px;   /* right padding leaves room for the close button */
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-body);   /* the panel is prose, so it matches the post text */
  line-height: 1.5;
}

.hero-info[hidden] {
  display: none;
}

.hero-info p {
  margin: 0;
}

.hero-info p + p {
  margin-top: 0.6em;    /* space between paragraphs */
}

.hero-info-close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.hero-info-close:hover {
  color: var(--fg);
}

/* Floating variant (OFF unless "hero-caption--float" is added in base.njk; see the
   note at the top of this section).  Wider screens only: the panel floats just above
   the caption, over the image. */
@media (min-width: 601px) {
  .hero-caption--float .hero-info {
    position: absolute;
    left: 16px;
    bottom: calc(100% + 4px);
    z-index: 5;
    max-width: 360px;
    margin-top: 0;
    background: var(--bg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }
}

.blog-page-title {
  font-family: var(--font-body);
  color: var(--heading);
  margin-bottom: 4px;
}

.blog-page-intro {
  color: var(--muted);
  margin-top: 0;
  margin-bottom: 28px;
}

.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-list-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.post-list-link {
  font-family: var(--font-body);
  font-size: 1.3em;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.post-list-link:hover {
  text-decoration: underline;
}

.post-list-date {
  display: block;
  font-size: var(--fs-sm);   /* keep post meta compact against the 21px body base */
  color: var(--meta);
  margin-top: 2px;
}

.post-list-summary {
  margin: 8px 0 0;
  color: var(--fg-soft);
}

/* Post with a thumbnail: picture on the left, text on the right. */
.post-list-item--has-thumb {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: start;
}

.post-list-thumb {
  display: block;
}

/* Share images are 1200x630 (about 1.9:1); this crop keeps them consistent even
   if one is a slightly different size.  "cover" fills the box without stretching. */
.post-list-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* Narrow screens: stack the picture above the text, at full column width. */
@media (max-width: 600px) {
  .post-list-item--has-thumb {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ---- Single post ---- */
.post-title {
  font-family: var(--font-body);
  color: var(--heading);
  margin-bottom: 4px;
}

/* Optional subtitle under the post title: a touch larger than body text, italic and
   in the softer grey, so it reads as part of the heading without competing with it. */
.post-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-style: italic;
  font-weight: var(--fw-body);
  line-height: var(--lh-tight);
  color: var(--muted);
  text-align: center;   /* follows the centered post title */
  margin: 0 0 10px;
}

.post-meta {
  color: var(--meta);
  font-size: var(--fs-sm);   /* keep post meta compact against the 21px body base */
  margin-top: 0;
  margin-bottom: 28px;
}

/* The post's own picture (front-matter "image"), shown full column width under
   the title.  Cropped to the 1200x630 share-image shape so posts line up. */
.post-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
  margin: 0 0 28px;
}

.post-body h2 {
  font-family: var(--font-body);
  color: var(--heading-alt);
  margin-top: 1.6em;
}

.post-body img {
  max-width: 100%;
  height: auto;
}

.post-body blockquote {
  margin: 1.2em 0;
  padding: 0.4em 1.2em;
  border-left: 4px solid var(--quote-border);
  background: var(--surface);
  color: var(--fg-soft);
}

.post-body code {
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.92em;
}

.post-back {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.post-back a {
  color: var(--accent);
  text-decoration: none;
  font-weight: bold;
}

/* ---- Footer ---- */
.blog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 28px;
  border-top: 4px solid var(--accent);
  font-size: 0.8em;
  color: var(--fg-soft);
}

.blog-footer a {
  color: var(--accent);
  text-decoration: none;
}

/* Mobile header: the blog's simple 3-item nav (Home / Blog / theme toggle) doesn't need
   a hamburger, but the full-width row (nav + "Let's Talk" CTA + 250px logo) can't fit on
   a phone, so the logo was being pushed off the right edge.  Instead of a hamburger we let
   the header wrap into two rows: the logo on its own top row (brand first), then the nav
   and CTA sharing the second row.  (The main site's mobile nav collapse is scoped to
   body:not(.blog) in abilsoft.css; the blog keeps its always-visible nav.) */
@media (max-width: 980px) {
  body.blog .header {
    flex-wrap: wrap;
    align-items: center;
    min-height: 0;
    padding: 8px 12px;
    box-sizing: border-box;
    row-gap: 6px;
  }
  body.blog .header > span { order: 1; flex: 0 0 100%; }   /* logo: full-width top row */
  body.blog .header .logo { width: 160px; margin-right: 0; }
  body.blog .header > header { order: 2; }                  /* nav: left of row 2 */
  body.blog .header .header-cta { order: 3; margin-left: auto; padding-right: 0; }
}