@import url("blog-style.css"); /* pulls --bd-* tokens + base.css */

/* ==========================================================================
       BLOG DETAIL — all rules scoped with the bd- prefix so nothing leaks into
       base.css / blog-style.css. Brand blue #0063a6 is the 3nerds brand colour.
       If your nav is position:fixed, set --bd-nav-offset to its height.
       ========================================================================== */
    :root {
      --bd-brand: #0063a6;
      --bd-brand-deep: #004a7c;
      --bd-brand-tint: #e8f1f8;
      --bd-ink: #122033;
      --bd-body: #2b3a4c;
      --bd-muted: #5d6b7c;
      --bd-line: #dfe6ee;
      --bd-soft: #f5f8fb;
      --bd-paper: #ffffff;
      --bd-nav-offset: 0px;
      --bd-head-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
      --bd-text-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    }

    .bd-page [hidden] {
      display: none !important;
    }

    .bd-progress {
      position: fixed;
      inset: 0 0 auto 0;
      height: 3px;
      z-index: 1000;
      background: var(--bd-brand);
      transform: scaleX(0);
      transform-origin: 0 50%;
      pointer-events: none;
    }

    .bd-page {
      background: var(--bd-paper);
      color: var(--bd-body);
    }

    .bd-page :focus-visible {
      outline: 3px solid var(--bd-brand);
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* ---------- Header ---------- */
    .bd-head {
      padding: calc(var(--bd-nav-offset) + clamp(40px, 6vw, 72px)) 0 clamp(28px, 4vw, 44px);
      background: var(--bd-soft);
      border-bottom: 1px solid var(--bd-line);
    }

    /* .bd-head-inner { max-width: 880px; } */

    .bd-crumbs ol {
      list-style: none;
      margin: 0 0 22px;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      font: 500 .875rem/1.4 var(--bd-text-font);
      color: var(--bd-muted);
    }

    .bd-crumbs li {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    .bd-crumbs li+li::before {
      content: "/";
      color: #9aa7b5;
    }

    .bd-crumbs a {
      color: var(--bd-brand);
      text-decoration: none;
    }

    .bd-crumbs a:hover {
      text-decoration: underline;
    }

    .bd-crumbs [aria-current="page"] {
      color: var(--bd-ink);
      max-width: 46ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bd-cats {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 16px;
      min-height: 28px;
    }

    .bd-chip {
      display: inline-block;
      padding: 5px 12px;
      border-radius: 999px;
      background: var(--bd-brand-tint);
      color: var(--bd-brand-deep);
      font: 600 .8125rem/1.3 var(--bd-text-font);
      text-decoration: none;
      transition: background-color .15s, color .15s;
    }

    .bd-chip:hover {
      background: var(--bd-brand);
      color: #fff;
    }

    .bd-title {
      font: 800 clamp(1.95rem, 4.2vw, 3.05rem)/1.12 var(--bd-head-font);
      letter-spacing: -.02em;
      color: var(--bd-ink);
      margin: 0 0 26px;
      max-width: 30ch;
      text-wrap: balance;
    }

    .bd-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px 22px;
      font: 500 .9375rem/1.4 var(--bd-text-font);
      color: var(--bd-muted);
    }

    .bd-byline {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .bd-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      flex: none;
      object-fit: cover;
      background: var(--bd-brand);
      color: #fff;
      display: grid;
      place-items: center;
      font: 700 .9rem/1 var(--bd-head-font);
    }

    .bd-byline strong {
      color: var(--bd-ink);
      font-weight: 650;
      display: block;
    }

    .bd-meta-item {
      padding-left: 22px;
      border-left: 1px solid var(--bd-line);
    }

    .bd-share {
      display: flex;
      gap: 8px;
      margin-left: auto;
    }

    .bd-share button,
    .bd-share a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 38px;
      padding: 0 14px;
      border: 1px solid var(--bd-line);
      border-radius: 999px;
      background: var(--bd-paper);
      color: var(--bd-ink);
      font: 600 .8125rem/1 var(--bd-text-font);
      text-decoration: none;
      cursor: pointer;
      transition: border-color .15s, color .15s;
    }

    .bd-share button:hover,
    .bd-share a:hover {
      border-color: var(--bd-brand);
      color: var(--bd-brand);
    }

    .bd-share svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ---------- Layout ---------- */
    .bd-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: clamp(32px, 5vw, 72px);
      padding-block: clamp(36px, 5vw, 64px);
      align-items: start;
    }

    .bd-article {
      min-width: 0;
      max-width: 760px;
    }

    .bd-figure {
      margin: 0 0 38px;
      border-radius: 14px;
      overflow: hidden;
      background: var(--bd-soft);
    }

    .bd-figure img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* ---------- Article body (WordPress content) ---------- */
    .bd-body {
      font: 400 1.0625rem/1.75 var(--bd-text-font);
      color: var(--bd-body);
      overflow-wrap: break-word;
    }

    .bd-body p,
    .bd-body ul,
    .bd-body ol,
    .bd-body blockquote,
    .bd-body figure,
    .bd-body table,
    .bd-body pre {
      margin: 0 0 1.15em;
    }

    .bd-body h1,
    .bd-body h2,
    .bd-body h3,
    .bd-body h4,
    .bd-body h5,
    .bd-body h6 {
      font-family: var(--bd-head-font);
      color: var(--bd-ink);
      line-height: 1.3;
      letter-spacing: -.01em;
      margin: 1.9em 0 .6em;
      scroll-margin-top: calc(var(--bd-nav-offset) + 24px);
    }

    .bd-body h1,
    .bd-body h2 {
      font-size: 1.6rem;
    }

    .bd-body h3 {
      font-size: 1.36rem;
    }

    .bd-body h4 {
      font-size: 1.2rem;
    }

    .bd-body h5,
    .bd-body h6 {
      font-size: 1.05rem;
    }

    .bd-body> :first-child {
      margin-top: 0;
    }

    .bd-body a {
      color: var(--bd-brand);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .bd-body a:hover {
      color: var(--bd-brand-deep);
    }

    .bd-body strong,
    .bd-body b {
      color: var(--bd-ink);
      font-weight: 650;
    }

    .bd-body ul,
    .bd-body ol {
      padding-left: 1.35em;
    }

    .bd-body li {
      margin: .35em 0;
    }

    .bd-body li::marker {
      color: var(--bd-brand);
    }

    .bd-body hr {
      border: 0;
      height: 1px;
      background: var(--bd-line);
      margin: 2.3em 0;
    }

    .bd-body img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
    }

    .bd-body figcaption {
      font-size: .875rem;
      color: var(--bd-muted);
      margin-top: .5em;
    }

    .bd-body blockquote {
      border-left: 3px solid var(--bd-brand);
      padding: .2em 0 .2em 1.1em;
      color: var(--bd-ink);
    }

    .bd-body table {
      width: 100%;
      border-collapse: collapse;
      font-size: .95rem;
      display: block;
      overflow-x: auto;
    }

    .bd-body th,
    .bd-body td {
      border: 1px solid var(--bd-line);
      padding: .6em .8em;
      text-align: left;
      vertical-align: top;
    }

    .bd-body th {
      background: var(--bd-soft);
      color: var(--bd-ink);
    }

    .bd-body iframe {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: 10px;
    }

    .bd-body code {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .9em;
      background: var(--bd-soft);
      padding: .1em .35em;
      border-radius: 4px;
    }

    .bd-body pre {
      background: var(--bd-ink);
      color: #e8eef5;
      padding: 1em 1.2em;
      border-radius: 10px;
      overflow-x: auto;
    }

    .bd-body pre code {
      background: none;
      padding: 0;
      color: inherit;
    }

    /* ---------- Author + back ---------- */
    .bd-author {
      display: flex;
      gap: 18px;
      align-items: center;
      margin-top: 48px;
      padding: 24px;
      border: 1px solid var(--bd-line);
      border-radius: 14px;
      background: var(--bd-soft);
    }

    .bd-author .bd-avatar {
      width: 64px;
      height: 64px;
      font-size: 1.15rem;
    }

    .bd-author-label {
      font: 500 .8125rem/1.4 var(--bd-text-font);
      color: var(--bd-muted);
      margin: 0 0 2px;
    }

    .bd-author-name {
      font: 700 1.125rem/1.3 var(--bd-head-font);
      color: var(--bd-ink);
      margin: 0;
    }

    .bd-back {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 32px;
      font: 600 .9375rem/1 var(--bd-text-font);
      color: var(--bd-brand);
      text-decoration: none;
    }

    .bd-back:hover {
      text-decoration: underline;
    }

    .bd-back svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ---------- Sidebar ---------- */
    .bd-side {
      position: sticky;
      top: calc(var(--bd-nav-offset) + 24px);
      display: grid;
      gap: 28px;
    }

    .bd-side h2 {
      font: 700 1rem/1.3 var(--bd-head-font);
      color: var(--bd-ink);
      margin: 0 0 12px;
    }

    .bd-search label {
      display: block;
      font: 700 1rem/1.3 var(--bd-head-font);
      color: var(--bd-ink);
      margin-bottom: 12px;
    }

    .bd-search-row {
      display: flex;
      border: 1px solid var(--bd-line);
      border-radius: 10px;
      overflow: hidden;
      background: var(--bd-paper);
    }

    .bd-search-row:focus-within {
      border-color: var(--bd-brand);
      box-shadow: 0 0 0 3px var(--bd-brand-tint);
    }

    .bd-search input {
      flex: 1;
      min-width: 0;
      border: 0;
      padding: 12px 14px;
      font: 400 .9375rem/1.3 var(--bd-text-font);
      color: var(--bd-ink);
      background: transparent;
      outline: none;
    }

    .bd-search button {
      border: 0;
      background: var(--bd-brand);
      color: #fff;
      width: 46px;
      cursor: pointer;
      display: grid;
      place-items: center;
    }

    .bd-search button:hover {
      background: var(--bd-brand-deep);
    }

    .bd-search svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
    }

    .bd-recent ul {
      list-style: none;
      margin: 0;
      padding: 0;
      border-top: 1px solid var(--bd-line);
    }

    .bd-recent li {
      border-bottom: 1px solid var(--bd-line);
    }

    .bd-recent a {
      display: block;
      padding: 13px 0;
      text-decoration: none;
      color: var(--bd-ink);
      font: 600 .9375rem/1.45 var(--bd-text-font);
    }

    .bd-recent a:hover {
      color: var(--bd-brand);
    }

    .bd-recent a[aria-current="page"] {
      color: var(--bd-brand);
    }

    .bd-recent time {
      display: block;
      margin-top: 4px;
      font-weight: 500;
      font-size: .8125rem;
      color: var(--bd-muted);
    }

    .bd-cta {
      padding: 26px 24px;
      border-radius: 14px;
      background: var(--bd-brand);
      color: #fff;
    }

    .bd-cta h2 {
      color: #fff;
      font-size: 1.2rem;
      margin-bottom: 8px;
    }

    .bd-cta p {
      margin: 0 0 18px;
      font: 400 .9375rem/1.6 var(--bd-text-font);
      color: rgba(255, 255, 255, .88);
    }

    .bd-cta .btn {
      width: 100%;
      justify-content: center;
    }

    .bd-cta-links {
      display: grid;
      gap: 10px;
      margin-top: 14px;
      font: 600 .9rem/1.4 var(--bd-text-font);
    }

    .bd-cta-links a {
      color: #fff;
    }

    /* ---------- States ---------- */
    .bd-state {
      padding: 40px 0;
    }

    .bd-state h2 {
      font: 800 1.6rem/1.25 var(--bd-head-font);
      color: var(--bd-ink);
      margin: 0 0 10px;
    }

    .bd-state p {
      margin: 0 0 22px;
      color: var(--bd-muted);
      max-width: 52ch;
    }

    .bd-state-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .bd-skel {
      display: block;
      background: linear-gradient(90deg, #e9eef4 0%, #f5f8fb 50%, #e9eef4 100%);
      background-size: 200% 100%;
      border-radius: 8px;
      animation: bdShimmer 1.3s linear infinite;
    }

    .bd-skel-title {
      height: 2.6rem;
      width: min(640px, 90%);
    }

    .bd-skel-line {
      height: 1rem;
      margin: 0 0 14px;
    }

    .bd-skel-line:nth-child(3n) {
      width: 82%;
    }

    .bd-skel-img {
      aspect-ratio: 1200 / 628;
      border-radius: 14px;
      margin-bottom: 38px;
    }

    @keyframes bdShimmer {
      to {
        background-position: -200% 0;
      }
    }

    .bd-sr {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    @media (max-width: 980px) {
      .bd-layout {
        grid-template-columns: 1fr;
      }

      .bd-side {
        position: static;
      }

      .bd-article {
        max-width: none;
      }
    }

    @media (max-width: 640px) {
      .bd-meta-item {
        padding-left: 0;
        border-left: 0;
      }

      .bd-share {
        margin-left: 0;
        width: 100%;
      }

      .bd-author {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .bd-skel {
        animation: none;
      }

      .bd-chip,
      .bd-share button,
      .bd-share a {
        transition: none;
      }
    }

.foot-logo2 {
    display: inline-block;
    margin-bottom: 20px
}

.foot-logo2 img{
    width:50%;
}