/* Shared geometry for public pages. Theme changes must not shift content. */
main.public-page {
    --section-inset: 20px;
    --section-gap: 32px;
    width: 100%; max-width: 1200px; min-width: 0;
    margin-inline: auto; padding: 32px 8px 40px;
    gap: var(--section-gap);
}
.public-page > br { display: none; }
.public-page .content-block {
    margin: 0; padding: var(--section-inset); min-width: 0;
}
.public-page > :is(h1,h2,h3,p) {
    padding-inline: var(--section-inset); margin: 0;
}
.public-page :is(h1,h2,h3) { text-align: left; overflow-wrap: anywhere; }
.public-page .content-block > :is(h1,h2,h3) { margin: 0 0 16px; }
.public-page .content-block > :is(p,ul,ol) + :is(h2,h3) { margin-top: 32px; }
.public-page .content-block > p { margin: 0 0 12px; line-height: 1.6; }
.public-page .content-block > :is(ul,ol) { margin: 0 0 12px; padding-left: 20px; }
.public-page .content-block > :last-child { margin-bottom: 0; }
.public-page .content-block .content-block { padding: 0; margin-block: 16px 0; }
.public-page :is(.seo-landing,.compare-landing) { gap: var(--section-gap); min-width: 0; }
.public-page .blog-grid { padding-block: 0; min-width: 0; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.public-page .blog-article-page { width: 100%; padding: 0; margin: 0 auto; }
.public-page .blog-article { padding: var(--section-inset); }
.public-page .blog-article-header { margin-bottom: 16px; }
.public-page .blog-article-body p { margin-bottom: 12px; }
.public-page .blog-article-body :is(h2,h3) { margin: 32px 0 16px; }
.public-page .seo-article { width: 100%; padding: 0; margin: 0 auto; display: grid; gap: var(--section-gap); }
.public-page .seo-article > :is(header,div,section) { margin-block: 0; padding: var(--section-inset); min-width: 0; }
.public-page .seo-article-body :is(h2,h3) { margin: 32px 0 16px; }
.public-page .seo-article-body p { margin-bottom: 12px; }
.public-page img { max-width: 100%; }
@media (max-width: 640px) {
    main.public-page { --section-inset: 16px; --section-gap: 24px; padding-block: 24px 32px; }
    .public-page :is(h1,h2,h3) { line-height: 1.25; }
    .public-page .content-block > :is(p,ul,ol) + :is(h2,h3),
    .public-page :is(.blog-article-body,.seo-article-body) :is(h2,h3) { margin-top: 24px; }
}

/* One heading family and weight across public sections and articles. */
.public-page :is(h1,h2,h3,h4,h5,h6) {
    font-family: 'El Messiri', Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
}
.public-page h2 {
    font-size: 30px;
    line-height: 1.25;
}
.public-page .youtube-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.public-page .youtube-link { min-width: 0; margin: 0; padding: 0; }
.public-page .youtube-link img { display: block; width: 100%; height: auto; }
@media (max-width: 768px) {
    .public-page .youtube-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) { .public-page h2 { font-size: 24px; } }

/* Light theme: visible sections with the existing ShipKZ blue palette. */
body:not(.dark-theme):has(> main.public-page) {
    background-color: #f4f7f9;
}
body:not(.dark-theme) main.public-page .content-block {
    background-color: #ffffff;
    border: 1px solid #dce7ec;
    box-shadow: 0 5px 18px rgba(26, 67, 83, 0.06);
}
body:not(.dark-theme) main.public-page .content-block .content-block {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Keep public links recognizable in the light theme. */
body:not(.dark-theme) main.public-page .content-block a { color: #087ca8; }
body:not(.dark-theme) main.public-page .content-block a:hover { color: #005d85; }
.public-page .content-block > ul.prohibited-list { padding-left: 0; list-style: none; }
.public-page .prohibited-list li { position: relative; padding-left: 18px; }
.public-page .prohibited-list li::before { content: "•"; position: absolute; left: 0; }
.public-page .prohibited-list li::marker { content: none; }

/* Keep navigation available while the page scrolls. */
body { height: auto; min-height: 100%; }
.site-nav-shell { position: sticky; top: 0; z-index: 1000; background: var(--main-color); transition: transform .22s ease; }
.site-nav-shell.site-nav-hidden { transform: translateY(-100%); }
body.dark-theme .site-nav-shell { background: var(--dark-theme); }
@media (max-width: 730px) {
  .site-nav-shell .long-menu { max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (prefers-reduced-motion: reduce) { .site-nav-shell { transition: none; } }