/* assets/blog.css — the blog: article pages, the post list and the editor's content area.
   Everything is scoped under .ss-blog or .ss-article, so it cannot change any other page. The admin editor loads this
   same file inside its editing frame (body class ss-article), so what is typed looks like what is published. */

.ss-blog { --ss-blog-ink: #1b2733; --ss-blog-muted: #5b6b7a; --ss-blog-line: #dfe7ee; --ss-blog-accent: #0b6fa4; --ss-blog-soft: #f1f7fb; }

/* ---------- Article page ---------- */
.ss-blog-article { max-width: 760px; margin: 0 auto; padding: 1.25rem 0 3rem; }
.ss-blog-crumbs { margin: 0 0 1rem; font-size: .875rem; color: var(--ss-blog-muted); }
.ss-blog-crumbs a { color: var(--ss-blog-muted); text-decoration: none; }
.ss-blog-crumbs a:hover { text-decoration: underline; }
.ss-blog-title { margin: 0 0 .75rem; font-size: clamp(1.9rem, 4.2vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--ss-blog-ink); }
.ss-blog-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: 0 0 1.25rem; font-size: .9rem; color: var(--ss-blog-muted); }
.ss-blog-meta span + span::before { content: "·"; margin-right: .9rem; color: #a6b4c0; }
.ss-blog-lead { margin: 0 0 1.5rem; font-size: 1.2rem; line-height: 1.6; color: #34475a; }
.ss-blog-cover { margin: 0 0 1.75rem; }
.ss-blog-cover img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 1rem; background: var(--ss-blog-soft); }
.ss-blog-preview-bar { margin: 0 0 1.25rem; padding: .75rem 1rem; border: 1px solid #f3c969; border-radius: .75rem; background: #fff8e1; color: #6b4e00; font-size: .925rem; }
.ss-blog-preview-bar a { color: #6b4e00; font-weight: 600; }

/* Table of contents */
.ss-toc { margin: 0 0 2rem; padding: 1rem 1.25rem; border: 1px solid var(--ss-blog-line); border-radius: .85rem; background: var(--ss-blog-soft); overflow-wrap: break-word; }
.ss-toc-title { margin: 0 0 .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-blog-muted); }
.ss-toc ol { margin: 0; padding-left: 1.2rem; }
.ss-toc li { margin: .15rem 0; }
.ss-toc ul { margin: .15rem 0 .35rem; padding-left: 1.1rem; list-style-type: circle; font-size: .95em; }
.ss-toc a { color: var(--ss-blog-accent); text-decoration: none; }
.ss-toc a:hover { text-decoration: underline; }

/* Share buttons (includes/blog_share.php), under the meta line and at the end of the article. Every button is a fixed 44 px
   circle, so nothing moves while the icon font loads. custom.css makes every link blue (!important) and underlined on hover,
   so the colour is set on the icon and the underline is switched off with a more specific selector. The share-sheet button
   is only shown on touch screens; blog.js makes it invisible (keeping its place) where the browser has no share sheet. */
.ss-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.5rem; }
.ss-share-end { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--ss-blog-line); }
.ss-share-label { margin-right: .35rem; font-size: .95rem; font-weight: 700; color: var(--ss-blog-ink); }
.ss-share .ss-share-btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ss-blog-line); border-radius: 50%; background: var(--ss-blog-soft); font-size: 1.15rem; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.ss-share .ss-share-btn .bi { color: var(--ss-blog-accent); line-height: 1; }
.ss-share .ss-share-btn .bi::before { vertical-align: 0; }
.ss-share .ss-share-btn .bi-link-45deg { font-size: 1.3em; } /* a thin glyph that looks smaller than the others */
.ss-share .ss-share-btn:hover, .ss-share .ss-share-btn:focus-visible { border-color: var(--ss-blog-accent); background: var(--ss-blog-accent); text-decoration: none; }
.ss-share .ss-share-btn:hover .bi, .ss-share .ss-share-btn:focus-visible .bi { color: #fff; }
.ss-share .ss-share-btn:focus-visible { outline: 3px solid #4cb3d9; outline-offset: 2px; }
.ss-share .ss-share-native { display: none; }
@media (hover: none) and (pointer: coarse) { .ss-share .ss-share-native { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .ss-share .ss-share-btn { transition: none; } }

/* ---------- The text of a post (also the editor's content area) ---------- */
.ss-article { font-size: 1.125rem; line-height: 1.75; color: var(--ss-blog-ink, #1b2733); overflow-wrap: break-word; }
.ss-article > :first-child { margin-top: 0; }
.ss-article p { margin: 0 0 1.15em; }
.ss-article h2, .ss-article h3, .ss-article h4 { margin: 2em 0 .6em; font-weight: 750; line-height: 1.25; letter-spacing: -.01em; scroll-margin-top: 90px; }
.ss-article h2 { font-size: 1.6rem; }
.ss-article h3 { font-size: 1.3rem; }
.ss-article h4 { font-size: 1.1rem; }
.ss-article a { color: #0b6fa4; text-decoration: underline; text-underline-offset: .18em; }
.ss-article a:hover { color: #08507a; }
.ss-article ul, .ss-article ol { margin: 0 0 1.15em; padding-left: 1.5em; }
.ss-article li { margin: .3em 0; }
.ss-article blockquote { margin: 1.5em 0; padding: .4em 0 .4em 1.1em; border-left: 4px solid #4cb3d9; color: #34475a; font-style: italic; }
.ss-article blockquote p:last-child { margin-bottom: 0; }
.ss-article hr { margin: 2em 0; border: 0; border-top: 1px solid var(--ss-blog-line, #dfe7ee); }
.ss-article code { padding: .1em .35em; border-radius: .3rem; background: #eef3f7; font-size: .9em; }
.ss-article pre { margin: 0 0 1.15em; padding: 1rem; overflow-x: auto; border-radius: .6rem; background: #0f2233; color: #e6f1f8; font-size: .9rem; line-height: 1.55; }
.ss-article pre code { padding: 0; background: none; color: inherit; }
.ss-article img { max-width: 100%; height: auto; border-radius: .75rem; }
.ss-article figure { margin: 1.6em 0; }
.ss-article figure img { display: block; margin: 0 auto; }
.ss-article figcaption { margin-top: .5rem; font-size: .9rem; line-height: 1.45; color: var(--ss-blog-muted, #5b6b7a); text-align: center; }
.ss-article .ss-align-center, .ss-article .align-center { text-align: center; }
.ss-article img.ss-align-center, .ss-article img.align-center { display: block; margin-left: auto; margin-right: auto; }
.ss-article .ss-align-left, .ss-article .align-left { text-align: left; }
.ss-article img.ss-align-left, .ss-article img.align-left, .ss-article figure.ss-align-left, .ss-article figure.align-left { float: left; max-width: 48%; margin: .3em 1.4em 1em 0; }
.ss-article .ss-align-right, .ss-article .align-right { text-align: right; }
.ss-article img.ss-align-right, .ss-article img.align-right, .ss-article figure.ss-align-right, .ss-article figure.align-right { float: right; max-width: 48%; margin: .3em 0 1em 1.4em; }
.ss-article .ss-lead { font-size: 1.25rem; line-height: 1.6; color: #34475a; }
.ss-article .ss-wide { margin-left: -1rem; margin-right: -1rem; }
@media (min-width: 900px) { .ss-article .ss-wide { margin-left: -4rem; margin-right: -4rem; } }
@media (max-width: 575.98px) {
    .ss-article img.ss-align-left, .ss-article img.align-left, .ss-article figure.ss-align-left, .ss-article figure.align-left,
    .ss-article img.ss-align-right, .ss-article img.align-right, .ss-article figure.ss-align-right, .ss-article figure.align-right { float: none; max-width: 100%; margin: 1em auto; }
}

/* Tables */
.ss-article .ss-table-wrap { margin: 0 0 1.4em; overflow-x: auto; }
.ss-article table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.ss-article th, .ss-article td { padding: .55rem .75rem; border: 1px solid var(--ss-blog-line, #dfe7ee); vertical-align: top; text-align: left; }
.ss-article th { background: var(--ss-blog-soft, #f1f7fb); font-weight: 650; }
.ss-article table.table-striped tbody tr:nth-child(even) { background: #f7fafc; }

/* Callouts */
.ss-article .ss-callout { margin: 1.5em 0; padding: 1rem 1.15rem; border: 1px solid #cfe3ee; border-left: 5px solid #4cb3d9; border-radius: .7rem; background: #f1f9fd; }
.ss-article .ss-callout > :last-child { margin-bottom: 0; }
.ss-article .ss-callout-tip { border-color: #cfe9d9; border-left-color: #34a26a; background: #f1faf5; }
.ss-article .ss-callout-warning { border-color: #f3dcb0; border-left-color: #e0a100; background: #fff8e6; }

/* Videos: a placeholder with a play button until the visitor clicks; no request to the video service before that. */
.ss-article .ss-video-embed { margin: 1.6em 0; }
.ss-article .ss-video-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .9rem; background: linear-gradient(135deg, #082640 0%, #0a4468 55%, #0a5a6e 100%); }
.ss-article .ss-video-stage iframe, .ss-article .ss-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; }
.ss-article .ss-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; border: 0; background: transparent; cursor: pointer; }
.ss-article .ss-video-play-icon { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 6px 22px rgba(0, 0, 0, .35); transition: transform .15s ease; }
.ss-article .ss-video-play-icon::before { content: ""; margin-left: .35rem; border-style: solid; border-width: .85rem 0 .85rem 1.4rem; border-color: transparent transparent transparent #0a4468; }
.ss-article .ss-video-play:hover .ss-video-play-icon, .ss-article .ss-video-play:focus-visible .ss-video-play-icon { transform: scale(1.08); }
.ss-article .ss-video-play:focus-visible { outline: 3px solid #4cb3d9; outline-offset: -3px; }
.ss-article .ss-video-link { display: inline-block; margin-top: .45rem; font-size: .875rem; color: var(--ss-blog-muted, #5b6b7a); }
.ss-article .ss-video-own { margin: 1.6em 0; }
.ss-article .ss-video-own video { display: block; width: 100%; height: auto; border-radius: .9rem; background: #0f2233; }

/* The editor's content area: a video placeholder is drawn as a box, since the player only exists on the page. */
.ss-article div.ss-video[data-video-id] { margin: 1.4em 0; padding: 1.1rem 1.2rem 1.1rem 4.2rem; position: relative; min-height: 3.6rem; border: 2px dashed #4cb3d9; border-radius: .8rem; background: #f1f9fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a4468'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-2 14.5v-9l7 4.5-7 4.5z'/%3E%3C/svg%3E") no-repeat 1rem center / 2.3rem; color: #0a4468; font-size: .95rem; }

/* ---------- Post list (the blog index) ---------- */
.ss-blog-index { padding: 1.25rem 0 3rem; }
.ss-blog-index-head { margin: 0 0 1.5rem; }
.ss-blog-index-head h1 { margin: 0 0 .4rem; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; }
.ss-blog-index-head p { margin: 0; max-width: 40rem; color: var(--ss-blog-muted); font-size: 1.1rem; }

/* The cards look exactly like the "From the blog" strip of the home page (ss_blog_home_strip_html() in includes/blog_teasers.php,
   which carries its own copy of these rules because it is far down a busy page); tests/Includes/BlogCardParityTest.php keeps
   the two in step. custom.css makes every link blue (!important) and underlined on hover, so the text colours are set on the
   children and the hover underline is switched off with a more specific selector. The picture needs height: auto: its width
   and height attributes would otherwise stretch it to its full height, as a tall crop. */
.ss-blog-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ss-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ss-blog-grid { grid-template-columns: repeat(3, 1fr); } }
.ss-blog-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dfe7ee; border-radius: 1rem; background: #fff; text-decoration: none; box-shadow: 0 2px 10px rgba(10, 40, 70, .06); transition: box-shadow .15s ease, transform .15s ease; }
.ss-blog-card:hover, .ss-blog-card:focus-visible { box-shadow: 0 8px 22px rgba(10, 40, 70, .14); transform: translateY(-2px); text-decoration: none; }
.ss-blog-card-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: linear-gradient(135deg, #082640 0%, #0a5a6e 100%); }
.ss-blog-card-body { display: flex; flex: 1; flex-direction: column; gap: .35rem; padding: .9rem 1rem 1rem; }
.ss-blog-card h2 { margin: 0; color: #1b2733; font-size: 1.05rem; font-weight: 700; line-height: 1.3; letter-spacing: normal; }
.ss-blog-card p { margin: 0; color: #41566a; font-size: .93rem; line-height: 1.5; }
.ss-blog-card-meta { margin-top: auto; color: #596b7c; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .ss-blog-card { transition: none; } .ss-blog-card:hover, .ss-blog-card:focus-visible { transform: none; } }
.ss-blog-pager { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.ss-blog-more { margin-top: 2.5rem; padding: 1.25rem 1.4rem; border-radius: 1rem; background: var(--ss-blog-soft); }
.ss-blog-more h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.ss-blog-more ul { margin: 0; padding-left: 1.2rem; }

/* "More from the blog" under an article */
.ss-blog-related { padding: 0 0 3rem; }
.ss-blog-related > h2 { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.ss-blog-related .ss-blog-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; }