/* pkt-blog v5 */
/* Blog element styles for pktech.net. This file is the source of truth; HubSpot serves a copy at
   https://pktech.net/hubfs/blog-review/css/pkt-blog.css (hubspot_blog.py push-css), linked from
   Blog settings > Templates > Blog post header HTML. The CLEAN Pro theme ignores Attached style
   sheets (tested 2026-10-11). A post body cannot carry a style element (the editor strips it on
   save, #514), so class-based elements lean on this. No closing style tag in a comment here: the
   dashboard preview inlines this file inside one.
   Every rule is pkt- prefixed so it never touches the theme or other authors' posts. Elements
   still work without it: anything this file reveals is hidden inline (display:none). */

/* Heading sizes for every post on the blog (Jordan, 2026-10-11): the theme's are 62/50/37px
   (h1.blog-post__title, .blog-post h2/h3). .post-page-full outranks the theme's selectors, so these
   win whatever order the sheets load in, and they reach only the post page's title and body. */
.post-page-full h1.blog-post__title { font-size: 40px; line-height: 1.15; }
.post-page-full .blog-post h2 { font-size: 30px; line-height: 1.2; }
.post-page-full .blog-post h3 { font-size: 22px; line-height: 1.25; }
@media (max-width: 575px) {
  .post-page-full h1.blog-post__title { font-size: 32px; }
}

/* Table row highlight: <table class="pkt-t">. !important beats the cells' inline backgrounds.
   Column highlight: <table class="pkt-tc">, for a table whose columns are the options (one provider
   per column); hovering any cell tints that column and darkens its header. Columns 2-6. */
@media (hover: hover) {
  .pkt-t tbody tr:hover td { background: #edf2fb !important; transition: background .15s; }
  .pkt-tc td, .pkt-tc th { transition: background .15s; }
  .pkt-tc:has(tr > :nth-child(2):hover) tbody tr > :nth-child(2),
  .pkt-tc:has(tr > :nth-child(3):hover) tbody tr > :nth-child(3),
  .pkt-tc:has(tr > :nth-child(4):hover) tbody tr > :nth-child(4),
  .pkt-tc:has(tr > :nth-child(5):hover) tbody tr > :nth-child(5),
  .pkt-tc:has(tr > :nth-child(6):hover) tbody tr > :nth-child(6) { background: #edf2fb !important; }
  .pkt-tc:has(tr > :nth-child(2):hover) thead tr > :nth-child(2),
  .pkt-tc:has(tr > :nth-child(3):hover) thead tr > :nth-child(3),
  .pkt-tc:has(tr > :nth-child(4):hover) thead tr > :nth-child(4),
  .pkt-tc:has(tr > :nth-child(5):hover) thead tr > :nth-child(5),
  .pkt-tc:has(tr > :nth-child(6):hover) thead tr > :nth-child(6) { background: #2f5bc0 !important; }
}

/* Hover card: <span class="pkt-tip" tabindex="0">label<span class="pkt-pop" style="display:none">…</span></span>
   Hover, keyboard focus or a tap shows it. Add pkt-pop-r on a card in the last column. */
.pkt-tip { position: relative; cursor: help; outline-offset: 2px; }
.pkt-tip:hover > .pkt-pop,
.pkt-tip:focus > .pkt-pop,
.pkt-tip:focus-within > .pkt-pop { display: block !important; }
.pkt-pop {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: 250px;
  padding: 10px 12px; background: #ffffff; border: 1px solid #d5dcef; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 64, .16); font-size: 13px; font-weight: 400;
  line-height: 1.45; color: #1d2340; text-align: left; white-space: normal; cursor: auto;
}
.pkt-pop-r { left: auto; right: 0; }
.pkt-pop ul { margin: 0; padding-left: 16px; }
/* The theme sets post list items to 18px grey; a card's lines take the card's size and colour. */
.pkt-pop li { margin: 0 0 4px; font-size: inherit !important; line-height: inherit !important; color: inherit !important; }
.pkt-pop li:last-child { margin-bottom: 0; }

/* A table's scroll box would clip a hover card. Where the table fits (wide screens) or is stacked
   (phones, below), it needs no scroll, so let it overflow. <div class="pkt-scroll" style="overflow-x:auto"> */
@media (min-width: 761px), (max-width: 640px) {
  .pkt-scroll { overflow: visible !important; }
}

/* Phone stacking: <table class="pkt-stack">. Each row becomes a card: its first cell is the card's
   heading, and every other cell shows its data-label (the column name) above its content. */
@media (max-width: 640px) {
  .pkt-stack { min-width: 0 !important; table-layout: auto !important; }
  .pkt-stack colgroup, .pkt-stack thead { display: none; }
  .pkt-stack tr, .pkt-stack td { display: block; width: auto !important; }
  .pkt-stack tr { border-top: 1px solid #e6e9f2; }
  .pkt-stack td { border-top: 0 !important; padding: 8px 14px !important; background: #ffffff !important; }
  .pkt-stack td:first-child { background: #f1f4fb !important; padding: 10px 14px !important; }
  .pkt-stack td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 12px; font-weight: 700; color: #214290;
  }
  .pkt-stack .pkt-pop, .pkt-stack .pkt-pop-r { left: 0; right: auto; width: min(280px, 80vw); }
}

/* Button hover: <a class="pkt-btn" style="…background:#214290…">, the sign-off card's booking
   button. !important beats the inline background and shadow; the lift reads as clickable. */
.pkt-btn { transition: background .15s, box-shadow .15s, transform .15s; }
.pkt-btn:hover, .pkt-btn:focus-visible {
  background: #2f5bc0 !important; box-shadow: 0 14px 26px 0 rgba(33, 66, 144, .28) !important;
  transform: translateY(-2px);
}
.pkt-btn:focus-visible { outline: 3px solid #9db4e8; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pkt-btn:hover, .pkt-btn:focus-visible { transform: none; } }