/* ==========================================================================
   Siteharbour Blog
   Builds on the Laravel site's design tokens (--brand, --text-*, --border-*)
   loaded from its app.css; every token has a fallback so the blog still
   renders if that file is unavailable.
   ========================================================================== */

:root {
  color-scheme: light;
  --sh-brand: var(--brand, #4F46E5);
  --sh-brand-hover: var(--brand-hover, #4338CA);
  --sh-brand-tint: var(--brand-tint, #eef2ff);
  --sh-ink: var(--text-primary, #0a0f1e);
  --sh-text: var(--text-ui, #374151);
  --sh-muted: var(--text-muted, #667085);
  --sh-line: var(--border-soft, #e5e7eb);
  --sh-line-strong: var(--border-medium, #d1d5db);
  --sh-soft: var(--bg-soft, #fafbfc);
  --sh-dark: #0f172a;
  --sh-radius: 12px;
  --sh-radius-lg: 16px;
  --sh-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-shadow-hover: 0 12px 28px -8px rgba(16, 24, 40, .14), 0 4px 8px -4px rgba(16, 24, 40, .06);
  --sh-ease: cubic-bezier(.2, 0, 0, 1);
  --sh-header: 5rem;
}

/* ---------- base ---------- */
.sh-blog { padding-top: var(--sh-header); color: var(--sh-ink); background: #fff; }
.sh-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem; }
.sh-section { padding-block: 3rem 4.5rem; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sh-skip { position: fixed; top: .75rem; left: .75rem; z-index: 100; padding: .6rem 1rem; border-radius: .5rem; background: #fff; color: var(--sh-ink); font-weight: 600; box-shadow: var(--sh-shadow-hover); transform: translateY(-200%); transition: transform .15s var(--sh-ease); }
.sh-skip:focus { transform: none; }
.sh-blog :focus-visible { outline: 2px solid var(--sh-brand); outline-offset: 2px; border-radius: 4px; }
/* Long unbroken words in headings and titles (ERR_TOO_MANY_REDIRECTS, file names) must wrap, not widen the page. */
.sh-blog :is(h1, h2, h3), .sh-card-title, .sh-postnav a, .sh-toc a, .sh-crumbs li { overflow-wrap: anywhere; }
body.admin-bar #site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar #site-header { top: 46px; } }

/* ---------- breadcrumbs ---------- */
.sh-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: 0 0 1rem; padding: 0; list-style: none; font-size: .8125rem; color: var(--sh-muted); }
.sh-crumbs li { display: inline-flex; align-items: center; gap: .375rem; min-width: 0; }
.sh-crumbs li + li::before { content: ""; width: .375rem; height: .375rem; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: .5; margin-right: .125rem; }
.sh-crumbs a { color: inherit; text-decoration: none; }
.sh-crumbs a:hover { color: var(--sh-brand); }
.sh-crumbs [aria-current] { color: var(--sh-text); max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- listing hero ---------- */
/* Same gradient as the contact page hero on siteharbour.com: indigo and mint glows over a white-to-brand-tint wash */
/* The hero starts under the transparent header (the page's top padding is the header height), so the header shows the gradient */
.sh-hero h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1.12; font-weight: 800; letter-spacing: -.025em; max-width: 22ch; margin: 0 0 .875rem; color: var(--sh-ink); text-wrap: balance; }
.sh-eyebrow { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-brand); }
.sh-lead { max-width: 62ch; margin: 0; font-size: 1.125rem; line-height: 1.65; color: var(--sh-text); text-wrap: pretty; }
.sh-hero .sh-search { margin-top: 1.75rem; }

/* ---------- search ---------- */
.sh-search { position: relative; display: flex; gap: .5rem; max-width: 34rem; }
.sh-search-icon { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); color: var(--sh-muted); pointer-events: none; }
.sh-search input { flex: 1; min-width: 0; height: 2.875rem; padding: 0 1rem 0 2.625rem; border: 1px solid var(--sh-line-strong); border-radius: 10px; background: #fff; color: var(--sh-ink); font: inherit; font-size: 1rem; box-shadow: var(--sh-shadow); transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.sh-search input::placeholder { color: var(--text-placeholder, #9ca3af); }
.sh-search input:focus { outline: none; border-color: var(--sh-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-brand) 18%, transparent); }
.sh-search button { height: 2.875rem; padding: 0 1.25rem; border: 0; border-radius: 10px; background: var(--sh-brand); color: #fff; font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background-color .15s; }
.sh-search button:hover { background: var(--sh-brand-hover); }

/* ---------- topic pills ---------- */
.sh-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.sh-pills a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .9rem; border: 1px solid var(--sh-line); border-radius: 999px; background: #fff; color: var(--sh-text); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s, background-color .15s; }
.sh-pills a:hover { border-color: color-mix(in srgb, var(--sh-brand) 45%, var(--sh-line)); color: var(--sh-brand); }
.sh-pills a.is-active { background: var(--sh-ink); border-color: var(--sh-ink); color: #fff; }

/* ---------- section heads ---------- */
.sh-section-head { display: flex; flex-direction: column; gap: .25rem; margin: 0 0 1.5rem; }
.sh-section-head h2 { margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -.015em; color: var(--sh-ink); }
.sh-section-head p { margin: 0; color: var(--sh-muted); font-size: .9375rem; }
.sh-start + .sh-section { padding-top: 0; }
.sh-count { margin: 0 0 1.25rem; color: var(--sh-muted); font-size: .875rem; font-weight: 500; }

/* ---------- cards ---------- */
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.5rem; }
@media (min-width: 1100px) { .sh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sh-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-radius-lg); box-shadow: var(--sh-shadow); transition: box-shadow .25s var(--sh-ease), transform .25s var(--sh-ease), border-color .25s; }
.sh-card:hover { box-shadow: var(--sh-shadow-hover); transform: translateY(-2px); border-color: var(--sh-line-strong); }
.sh-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sh-soft); }
.sh-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--sh-ease); }
.sh-card:hover .sh-card-media img, .sh-card:hover .sh-cover svg { transform: scale(1.06); }
.sh-card-body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1.125rem 1.25rem 1.25rem; }
.sh-cat { position: relative; z-index: 2; align-self: flex-start; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-brand); text-decoration: none; }
.sh-cat:hover { text-decoration: underline; text-underline-offset: 3px; }
.sh-card-title { margin: 0; font-size: 1.125rem; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; color: var(--sh-ink); text-wrap: balance; transition: color .15s; }
.sh-card-link { color: inherit; text-decoration: none; }
.sh-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--sh-radius-lg); }
.sh-blog .sh-card-link:focus-visible { outline: none; }
.sh-card-link:focus-visible::after { outline: 2px solid var(--sh-brand); outline-offset: -2px; }
.sh-card:hover .sh-card-title { color: var(--sh-brand); }
.sh-card-excerpt { flex: 1; margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--sh-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.sh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-top: .25rem; font-size: .8125rem; color: var(--sh-muted); }
.sh-dot { opacity: .6; }

/* featured card */
.sh-card-featured .sh-card-title { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.2; }
.sh-card-featured .sh-card-excerpt { -webkit-line-clamp: 4; font-size: 1rem; }
@media (min-width: 900px) {
  .sh-card-featured { flex-direction: row; }
  .sh-card-featured .sh-card-media { flex: 1.15; aspect-ratio: auto; min-height: 320px; }
  .sh-card-featured .sh-card-body { flex: 1; justify-content: center; gap: .75rem; padding: 2.5rem; }
  .sh-card-featured .sh-card-excerpt { flex: 0 1 auto; }
}

/* designed covers (posts without a featured image) */
.sh-cover { --c1: #1e1b4b; --c2: #4F46E5; position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .625rem; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.sh-cover::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse at 75% 15%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 75% 15%, #000 10%, transparent 70%); }
.sh-cover::after { content: ""; position: absolute; width: 60%; aspect-ratio: 1; top: -35%; right: -15%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); }
.sh-cover svg { position: relative; width: 16%; min-width: 2.25rem; max-width: 3.5rem; height: auto; transition: transform .5s var(--sh-ease); }
.sh-cover-label { position: relative; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.sh-cover--web-hosting { --c1: #312e81; --c2: #4F46E5; }
.sh-cover--wordpress { --c1: #1e3a8a; --c2: #2563eb; }
.sh-cover--servers { --c1: #0f172a; --c2: #4338ca; }
.sh-cover--domains { --c1: #155e75; --c2: #0891b2; }
.sh-cover--website-security { --c1: #064e3b; --c2: #059669; }
.sh-cover--guides-tutorials { --c1: #581c87; --c2: #7c3aed; }
.sh-cover--email { --c1: #831843; --c2: #db2777; }

/* ---------- pagination ---------- */
.pagination { margin-top: 3rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .875rem; border: 1px solid var(--sh-line); border-radius: 10px; color: var(--sh-text); font-size: .9375rem; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s; }
.pagination a.page-numbers:hover { border-color: var(--sh-brand); color: var(--sh-brand); }
.pagination .page-numbers.current { background: var(--sh-ink); border-color: var(--sh-ink); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; }

.sh-empty { padding: 3rem 0; text-align: center; color: var(--sh-muted); }
.sh-empty p { margin: 0 0 1rem; }
.sh-empty a:not(.sh-btn):not(.sh-pills a) { color: var(--sh-brand); }
.sh-empty .sh-pills { justify-content: center; }

/* ---------- topics band (blog home) ---------- */
.sh-topics { padding: 4rem 0 4.5rem; background: var(--sh-soft); border-top: 1px solid var(--sh-line); }
.sh-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.sh-topic { position: relative; display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-radius); transition: border-color .2s, box-shadow .2s; }
.sh-topic:hover { border-color: var(--sh-line-strong); box-shadow: var(--sh-shadow-hover); }
.sh-topic-icon { position: relative; flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--c1, #1e1b4b), var(--c2, #4F46E5)); }
.sh-topic-icon svg { width: 1.375rem; height: 1.375rem; }
.sh-topic h3 { margin: 0 0 .25rem; font-size: 1rem; font-weight: 700; }
.sh-topic h3 a { color: var(--sh-ink); text-decoration: none; }
.sh-topic h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--sh-radius); }
.sh-topic:hover h3 a { color: var(--sh-brand); }
.sh-topic p { margin: 0 0 .5rem; font-size: .875rem; line-height: 1.55; color: var(--sh-muted); }
.sh-topic-count { font-size: .75rem; font-weight: 600; color: var(--sh-text); }

/* ---------- article header ---------- */
.sh-chip { display: inline-flex; align-items: center; height: 1.75rem; padding: 0 .75rem; border-radius: 999px; background: var(--sh-brand-tint); color: var(--sh-brand); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.sh-chip:hover { background: color-mix(in srgb, var(--sh-brand) 16%, #fff); }
.sh-article-head h1 { max-width: 24ch; margin: .875rem 0 1.25rem; font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.875rem); line-height: 1.14; font-weight: 800; letter-spacing: -.025em; color: var(--sh-ink); text-wrap: balance; }
.sh-byline { display: flex; align-items: center; gap: .75rem; }
.sh-byline .sh-meta { margin: 0; }
.sh-avatar { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: linear-gradient(135deg, #1e1b4b, var(--sh-brand)); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.sh-avatar--lg { width: 3rem; height: 3rem; font-size: .9375rem; }

/* ---------- article layout ---------- */
.sh-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: start; padding-top: 2.5rem; padding-bottom: 3.5rem; }
.sh-main { min-width: 0; max-width: 46rem; }
@media (min-width: 1024px) {
  .sh-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 4rem; }
}
.sh-article-img { margin: 0 0 2rem; }
.sh-article-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--sh-radius-lg); }

/* table of contents: collapsible on small screens, sticky list on desktop */
.sh-toc { border: 1px solid var(--sh-line); border-radius: var(--sh-radius); background: #fff; }
.sh-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.sh-toc li { counter-increment: toc; }
.sh-toc a { position: relative; display: block; padding: .375rem .75rem .375rem 2.25rem; border-radius: 8px; color: var(--sh-text); font-size: .875rem; line-height: 1.45; text-decoration: none; transition: background-color .15s, color .15s; }
.sh-toc a::before { content: counter(toc, decimal-leading-zero); position: absolute; left: .75rem; top: .45rem; font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sh-muted); }
.sh-toc a:hover { background: var(--sh-soft); color: var(--sh-ink); }
.sh-toc a.is-active { background: var(--sh-brand-tint); color: var(--sh-brand); font-weight: 600; }
.sh-toc a.is-active::before { color: var(--sh-brand); }
.sh-toc-title { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sh-ink); }
.sh-toc-inline { margin: 0 0 2rem; }
.sh-toc-inline summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: .5rem 1rem; cursor: pointer; list-style: none; border-radius: var(--sh-radius); }
.sh-toc-inline summary::-webkit-details-marker { display: none; }
.sh-toc-inline summary::after { content: ""; width: .5rem; height: .5rem; margin: 0 .25rem .25rem 0; border-right: 2px solid var(--sh-muted); border-bottom: 2px solid var(--sh-muted); transform: rotate(45deg); transition: transform .2s var(--sh-ease); }
.sh-toc-inline[open] summary::after { margin-bottom: -.25rem; transform: rotate(-135deg); }
.sh-toc-count { margin-left: auto; font-size: .8125rem; color: var(--sh-muted); }
.sh-toc-inline nav { padding: 0 .5rem .75rem; }
.sh-toc-side { padding: 1rem .5rem .75rem; }
.sh-toc-side .sh-toc-title { padding: 0 .75rem .625rem; }
.sh-sidebar { display: none; }
@media (min-width: 1024px) {
  .sh-toc-inline { display: none; }
  .sh-sidebar { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; align-self: stretch; }
  .sh-sidebar-sticky { position: sticky; top: calc(var(--sh-header) + 1.25rem); display: flex; flex-direction: column; gap: 1.25rem; max-height: calc(100vh - var(--sh-header) - 2.5rem); }
  .sh-sidebar-sticky .sh-toc-side { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  body.admin-bar .sh-sidebar-sticky { top: calc(var(--sh-header) + 32px + 1.25rem); max-height: calc(100vh - var(--sh-header) - 32px - 2.5rem); }
}

/* sidebar widgets */
.sh-widget { padding: 1.25rem; border: 1px solid var(--sh-line); border-radius: var(--sh-radius); background: #fff; }
.sh-widget-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--sh-ink); }
.sh-widget ul { margin: 0; padding: 0; list-style: none; }
.sh-widget li + li { margin-top: .5rem; }
.sh-widget a { color: var(--sh-text); }
.sh-widget-cta { flex: none; border: 0; color: #fff; background: radial-gradient(90% 120% at 100% 0%, rgba(255,255,255,.14), transparent 60%), linear-gradient(135deg, #1e1b4b, var(--sh-brand)); }
.sh-widget-cta .sh-widget-title { color: #fff; font-size: 1.0625rem; line-height: 1.35; }
.sh-widget-cta p { margin: 0; font-size: .875rem; line-height: 1.55; color: rgba(255,255,255,.88); }
.sh-widget-cta .sh-btn { margin-top: 1rem; }

/* ---------- buttons ---------- */
.sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 2.75rem; padding: 0 1.25rem; border-radius: 10px; background: #fff; color: var(--sh-brand); font-size: .9375rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform .15s var(--sh-ease), box-shadow .15s, background-color .15s; }
.sh-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.sh-btn--solid { background: var(--sh-brand); color: #fff; }
.sh-btn--solid:hover { background: var(--sh-brand-hover); }

/* ---------- article body ---------- */
.sh-prose { font-size: 1.0625rem; line-height: 1.75; color: var(--sh-text); overflow-wrap: break-word; }
.sh-prose > * { margin-top: 0; margin-bottom: 0; }
.sh-prose > * + * { margin-top: 1.25rem; }
.sh-prose :is(h2, h3, h4) { color: var(--sh-ink); font-weight: 700; scroll-margin-top: calc(var(--sh-header) + 1.5rem); text-wrap: balance; }
.sh-prose h2 { margin-top: 2.75rem; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); line-height: 1.3; letter-spacing: -.015em; }
.sh-prose h3 { margin-top: 2rem; font-size: 1.25rem; line-height: 1.35; }
.sh-prose h4 { margin-top: 1.75rem; font-size: 1.0625rem; }
.sh-prose > :is(h2, h3, h4) + * { margin-top: .75rem; }
.sh-anchor { margin-left: .5rem; color: var(--sh-brand); font-weight: 400; text-decoration: none; opacity: 0; transition: opacity .15s; }
.sh-prose :is(h2, h3):hover .sh-anchor { opacity: .6; }
.sh-prose a:not(.sh-anchor) { color: var(--sh-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--sh-brand) 40%, transparent); transition: text-decoration-color .15s; }
.sh-prose a:not(.sh-anchor):hover { text-decoration-color: currentColor; }
.sh-prose strong { color: var(--sh-ink); font-weight: 650; }
.sh-prose ul, .sh-prose ol { padding-left: 1.375rem; }
.sh-prose ul { list-style: disc; }
.sh-prose ol { list-style: decimal; }
.sh-prose li { padding-left: .25rem; }
.sh-prose li + li { margin-top: .5rem; }
.sh-prose li::marker { color: var(--sh-muted); }
.sh-prose li > :is(ul, ol) { margin-top: .5rem; }
.sh-prose blockquote { margin-inline: 0; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--sh-brand); color: var(--sh-ink); font-style: italic; }
.sh-prose hr { margin-block: 2.75rem; border: 0; border-top: 1px solid var(--sh-line); }
.sh-prose img { max-width: 100%; height: auto; border-radius: var(--sh-radius); }
.sh-prose figure { margin-inline: 0; }
.sh-prose figcaption { margin-top: .5rem; text-align: center; font-size: .875rem; color: var(--sh-muted); }
.sh-prose :not(pre) > code { padding: .125em .375em; border: 1px solid var(--sh-line); border-radius: 6px; background: var(--sh-soft); color: var(--sh-ink); font-size: .875em; overflow-wrap: anywhere; }

/* code blocks (header bar and copy button added by blog.js) */
.sh-prose pre { margin: 0; padding: 1.125rem 1.25rem; overflow-x: auto; background: var(--sh-dark); color: #e2e8f0; border-radius: var(--sh-radius); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem; line-height: 1.65; tab-size: 4; scrollbar-width: thin; scrollbar-color: #475569 transparent; }
.sh-prose pre code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; white-space: pre; }
.sh-code { position: relative; overflow: hidden; border-radius: var(--sh-radius); background: var(--sh-dark); }
.sh-code-bar { display: flex; align-items: center; justify-content: space-between; height: 2.5rem; padding: 0 .5rem 0 1rem; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.sh-code-dots { display: flex; gap: .375rem; }
.sh-code-dots i { width: .5rem; height: .5rem; border-radius: 50%; background: #475569; }
.sh-code pre { border-radius: 0; }
.sh-copy { display: inline-flex; align-items: center; gap: .375rem; height: 1.75rem; padding: 0 .625rem; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; background: rgba(255,255,255,.06); color: #e2e8f0; font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.sh-copy:hover { background: rgba(255,255,255,.14); }
.sh-copy.is-done { border-color: rgba(52, 211, 153, .5); color: #6ee7b7; }

/* tables scroll inside their own box */
.sh-table { overflow-x: auto; border: 1px solid var(--sh-line); border-radius: var(--sh-radius); scrollbar-width: thin; }
.sh-table table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: .9375rem; line-height: 1.55; }
.sh-table th, .sh-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--sh-line); text-align: left; vertical-align: top; }
.sh-table th { background: var(--sh-soft); color: var(--sh-ink); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.sh-table tbody tr:last-child td { border-bottom: 0; }
.sh-table tbody tr:hover { background: color-mix(in srgb, var(--sh-brand) 3%, #fff); }
.sh-table td code { white-space: nowrap; }
.sh-prose figure.wp-block-table { margin-inline: 0; }

/* callouts written as <div class="callout callout-tip"> in posts */
.callout { padding: 1rem 1.25rem; border: 1px solid var(--sh-line); border-left-width: 3px; border-radius: var(--sh-radius); background: var(--sh-soft); }
.callout > * { margin: 0; }
.callout > * + * { margin-top: .5rem; }
.callout-note { border-left-color: var(--sh-brand); background: color-mix(in srgb, var(--sh-brand) 5%, #fff); }
.callout-tip { border-left-color: var(--color-success, #16a34a); background: var(--color-success-bg, #f0fdf4); }
.callout-warning { border-left-color: var(--color-warning, #d97706); background: var(--color-warning-bg, #fffbeb); }
.callout strong:first-child { color: var(--sh-ink); }

/* ---------- after the article ---------- */
.sh-share { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--sh-line); }
.sh-share-label { margin: 0; font-size: .875rem; font-weight: 600; color: var(--sh-ink); }
.sh-share ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.sh-share a, .sh-copy-link { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem; border: 1px solid var(--sh-line); border-radius: 10px; background: #fff; color: var(--sh-text); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.sh-share a { padding: 0; }
.sh-share a:hover, .sh-copy-link:hover { border-color: var(--sh-brand); color: var(--sh-brand); }
.sh-copy-link.is-done { border-color: var(--color-success, #16a34a); color: var(--color-success, #16a34a); }

.sh-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin: 2rem 0 0; padding: 1.75rem 2rem; border-radius: var(--sh-radius-lg); color: #fff; background: radial-gradient(80% 140% at 100% 0%, rgba(255,255,255,.14), transparent 60%), linear-gradient(135deg, #1e1b4b, var(--sh-brand)); }
.sh-cta > div { flex: 1 1 20rem; }
.sh-cta-eyebrow { margin: 0 0 .25rem; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.sh-cta h2 { margin: 0 0 .375rem; font-size: 1.375rem; line-height: 1.3; font-weight: 800; color: #fff; }
.sh-cta p { margin: 0; line-height: 1.6; color: rgba(255,255,255,.88); }
@media (min-width: 1024px) { .sh-cta { display: none; } } /* the sidebar shows the same suggestion */

.sh-author { position: relative; display: flex; gap: 1.5rem; align-items: flex-start; margin-top: 2rem; padding: 1.75rem; border: 1px solid var(--sh-line); border-radius: var(--sh-radius-lg); background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -16px rgba(15,23,42,.14); overflow: hidden; }
.sh-author::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sh-brand), rgba(var(--sh-b), 1)); }
.sh-author-body { min-width: 0; flex: 1; }
.sh-author-eyebrow { margin: 0 0 .375rem; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sh-brand); }
.sh-author-name { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--sh-ink); }
.sh-author-bio { margin: .75rem 0 0; font-size: .9375rem; line-height: 1.7; color: var(--sh-muted); max-width: 62ch; }
.sh-avatar--author { width: 4.75rem; height: 4.75rem; font-size: 1.25rem; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(var(--sh-a), .35); }
.sh-avatar-img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
@media (max-width: 560px) { .sh-author { flex-direction: column; gap: 1rem; padding: 1.5rem 1.25rem; } }
.sh-author-name a { color: inherit; text-decoration: none; }
.sh-author-name a:hover { color: var(--sh-brand); }
.sh-author-role { display: block; margin: .125rem 0 0; font-size: .8125rem; font-weight: 500; color: var(--sh-muted); }
.sh-author-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.sh-author-links a { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 .75rem; border: 1px solid var(--sh-line); border-radius: 999px; background: #fff; color: var(--sh-text); font-size: .8125rem; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s; }
.sh-author-links a:hover { border-color: var(--sh-brand); color: var(--sh-brand); }
.sh-author-more { margin: .75rem 0 0; font-size: .875rem; font-weight: 600; }
.sh-author-more a { color: var(--sh-brand); text-decoration: none; }
.sh-author-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sh-byline-link { color: var(--sh-ink); font-weight: 600; text-decoration: none; }
.sh-byline-link:hover { color: var(--sh-brand); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- author page ---------- */
.sh-author-head { display: flex; align-items: center; gap: 1.25rem; margin: 0 0 1.25rem; }
.sh-author-head h1 { margin: 0; }
.sh-author-head .sh-author-role { font-size: 1rem; margin-top: .375rem; }
.sh-avatar--xl { width: 4.5rem; height: 4.5rem; font-size: 1.375rem; }
.sh-author-hero .sh-author-links { margin-top: 1.25rem; }

.sh-postnav { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .sh-postnav { grid-template-columns: 1fr 1fr; } .sh-postnav .next:only-child { grid-column: 2; } }
.sh-postnav a { display: block; padding: 1rem 1.25rem; border: 1px solid var(--sh-line); border-radius: var(--sh-radius); color: var(--sh-ink); font-weight: 600; line-height: 1.4; text-decoration: none; transition: border-color .15s, color .15s; }
.sh-postnav a:hover { border-color: var(--sh-brand); color: var(--sh-brand); }
.sh-postnav small { display: block; margin-bottom: .25rem; font-size: .8125rem; font-weight: 500; color: var(--sh-muted); }
.sh-postnav .next { text-align: right; }

.sh-related { padding: 4rem 0; border-top: 1px solid var(--sh-line); background: var(--sh-soft); }
.sh-explore { padding: 3.5rem 0 4.5rem; }
.sh-explore h2 { margin: 0 0 1.25rem; font-size: 1.375rem; font-weight: 800; letter-spacing: -.015em; }

/* ---------- reading progress ---------- */
.sh-progress { position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 3px; background: var(--sh-brand); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
body.admin-bar .sh-progress { top: 32px; }
@media (max-width: 782px) { body.admin-bar .sh-progress { top: 46px; } }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .sh-wrap { padding-inline: 1rem; }
  .sh-hero { padding: calc(var(--sh-header) + 2rem) 0 1.75rem; }
  .sh-section { padding-block: 2.25rem 3.5rem; }
  .sh-article-head { padding: 1.75rem 0 1.5rem; }
  .sh-layout { padding-top: 1.75rem; }
  .sh-prose pre { padding: 1rem; font-size: .8125rem; }
  .sh-search button { padding: 0 1rem; }
  .sh-cta { padding: 1.5rem; }
  .sh-cta .sh-btn { width: 100%; }
  .sh-pills { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1rem; padding: 0 1rem 2px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); }
  .sh-pills::-webkit-scrollbar { display: none; }
  .sh-pills li { flex: none; }
  .sh-empty .sh-pills { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; -webkit-mask-image: none; mask-image: none; }
  .sh-crumbs [aria-current] { max-width: 22ch; }
  .sh-article-head .sh-crumbs li:last-child { display: none; } /* the title is right below */
}

/* ---------- motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  .sh-blog *, .sh-blog *::before, .sh-blog *::after { transition: none !important; animation: none !important; }
  .sh-card:hover, .sh-btn:hover { transform: none; }
  .sh-card:hover .sh-card-media img, .sh-card:hover .sh-cover svg { transform: none; }
}
@media print {
  #site-header, .site-footer, .sh-sidebar, .sh-toc-inline, .sh-share, .sh-cta, .sh-related, .sh-explore, .sh-postnav, .sh-progress, .sh-copy, .sh-anchor, .sh-skip { display: none !important; }
  .sh-blog { padding-top: 0; }
  .sh-article-head { background: none; border: 0; }
  .sh-layout { display: block; }
  .sh-main { max-width: none; }
  .sh-prose { font-size: 11pt; color: #000; }
  .sh-prose a { color: inherit; }
  .sh-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .sh-code, .sh-prose pre { background: #f6f8fa !important; color: #111 !important; }
  .sh-code-bar { display: none; }
  .sh-prose pre { white-space: pre-wrap; }
}

/* ==========================================================================
   Dark hero: listing pages and articles
   Gradient, dot grid, light sweep and ring motif, in the style of modern cloud
   provider landing pages. Pure CSS and inline SVG: no images, no scripts.
   The page's <body> is data-header-theme="dark", so the header is white text
   on the hero and turns white when scrolled (the same as siteharbour.com).
   ========================================================================== */
:root {
  --sh-a: 99,102,241;
  --sh-b: 6,214,160;
  --sh-c: 139,92,246;
}

.sh-hero, .sh-article-head {
  position: relative; overflow: hidden; isolation: isolate;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(60% 75% at 8% 0%, rgba(var(--sh-a), .42), transparent 62%),
    radial-gradient(42% 60% at 96% 6%, rgba(var(--sh-b), .20), transparent 60%),
    radial-gradient(55% 70% at 72% 120%, rgba(var(--sh-c), .34), transparent 62%),
    linear-gradient(165deg, #050816 0%, #0b1130 48%, #17134a 100%);
}
.sh-hero::before, .sh-article-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(115deg, transparent 46%, rgba(255,255,255,.05) 50%, transparent 54%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 65%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 65%, transparent 100%);
}
.sh-hero::after, .sh-article-head::after {
  content: ""; position: absolute; top: -170px; right: -210px; width: 820px; height: 820px;
  pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.20'%3E%3Ccircle cx='400' cy='400' r='120'/%3E%3Ccircle cx='400' cy='400' r='185'/%3E%3Ccircle cx='400' cy='400' r='250'/%3E%3Ccircle cx='400' cy='400' r='315'/%3E%3Ccircle cx='400' cy='400' r='380'/%3E%3C/g%3E%3Cg fill='none' stroke='%235eead4' stroke-opacity='.65' stroke-width='1.5'%3E%3Cpath d='M400 20 A380 380 0 0 1 780 400'/%3E%3Cpath d='M400 250 A150 150 0 0 1 550 400'/%3E%3Ccircle cx='400' cy='400' r='4' fill='%235eead4' fill-opacity='.8' stroke='none'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.sh-hero > .sh-wrap, .sh-article-head > .sh-wrap { position: relative; z-index: 1; }

/* Layout: the hero starts under the transparent header */
.sh-hero { margin-top: calc(var(--sh-header) * -1); padding: calc(var(--sh-header) + 3rem) 0 2.5rem; }
.sh-article-head { margin-top: calc(var(--sh-header) * -1); padding: calc(var(--sh-header) + 2.5rem) 0 2.25rem; }

/* Type on dark */
.sh-hero h1, .sh-article-head h1 { color: #fff; }
.sh-hero .sh-eyebrow, .sh-article-head .sh-eyebrow { color: #5eead4; }
.sh-hero .sh-lead { color: rgba(226,232,240,.84); }
.sh-hero .sh-crumbs ol, .sh-article-head .sh-crumbs ol { color: rgba(203,213,225,.72); }
.sh-hero .sh-crumbs a:hover, .sh-article-head .sh-crumbs a:hover { color: #fff; }
.sh-hero .sh-crumbs [aria-current], .sh-article-head .sh-crumbs [aria-current] { color: rgba(255,255,255,.92); }
.sh-hero .sh-search input { border-color: rgba(255,255,255,.2); }
.sh-hero .sh-pills a { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sh-hero .sh-pills a:hover { background: rgba(255,255,255,.14); border-color: rgba(94,234,212,.55); color: #fff; }
.sh-hero .sh-pills a.is-active { background: #fff; border-color: #fff; color: #0b1130; }

.sh-article-head .sh-chip { background: rgba(94,234,212,.14); border: 1px solid rgba(94,234,212,.3); color: #99f6e4; }
.sh-article-head .sh-chip:hover { background: rgba(94,234,212,.24); }
.sh-article-head .sh-meta { color: rgba(203,213,225,.82); }
.sh-article-head .sh-byline-link { color: #fff; }
.sh-article-head .sh-byline-link:hover { color: #99f6e4; }
.sh-article-head .sh-avatar { box-shadow: 0 0 0 3px rgba(255,255,255,.14); }
.sh-author-hero { }

/* Phones: smaller motif, tighter spacing */
@media (max-width: 640px) {
  .sh-hero { padding: calc(var(--sh-header) + 2rem) 0 1.75rem; }
  .sh-article-head { padding: calc(var(--sh-header) + 1.75rem) 0 1.75rem; }
  .sh-hero::after, .sh-article-head::after { width: 560px; height: 560px; top: -150px; right: -260px; }
}


@media print {
  .sh-hero, .sh-article-head { background: none !important; color: #000; border: 0; }
  .sh-hero::before, .sh-hero::after, .sh-article-head::before, .sh-article-head::after { display: none; }
  .sh-hero h1, .sh-article-head h1 { color: #000; }
}

/* Each topic's hero takes its own glow colours (defaults are set in :root). */
.sh-topic-web-hosting { --sh-a: 99,102,241; --sh-b: 6,214,160; --sh-c: 139,92,246; }
.sh-topic-servers { --sh-a: 99,102,241; --sh-b: 56,189,248; --sh-c: 30,64,175; }
.sh-topic-website-security { --sh-a: 16,185,129; --sh-b: 110,231,183; --sh-c: 4,120,87; }
.sh-topic-email { --sh-a: 236,72,153; --sh-b: 251,146,60; --sh-c: 190,24,93; }
.sh-topic-wordpress { --sh-a: 59,130,246; --sh-b: 34,211,238; --sh-c: 37,99,235; }
.sh-topic-domains { --sh-a: 8,145,178; --sh-b: 103,232,249; --sh-c: 14,116,144; }
.sh-topic-guides-tutorials { --sh-a: 168,85,247; --sh-b: 244,114,182; --sh-c: 124,58,237; }