/* The site header and footer on the converter apps (12 Oct 2026), as on the 32 tools: the shared header first on the
   page and sticky at the top, the shared footer at the end, each converter's own look in between. The values the header
   and footer inherit from libs/site-pages.css on the template tools are set here, as tools-app/older-tools-header.css
   does for the six older tools; keep the two in step. Loaded after the converter's style.css and libs/shared-nav.css.
   Scoped to the page's first <header> (always the site header here), so a converter's own <header> is not touched. */
body > header:first-of-type { position: sticky !important; top: 0; z-index: 50; } /* as on the tools; each converter's own header sits below it (z-index under 50) and its windows and notices above it */
body > header:first-of-type .site-nav { position: relative; top: auto; }
body > header:first-of-type { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #e5e7eb; }
[data-theme="light"] body > header:first-of-type { color: #0a0a14; }

/* The footer: background and line height as on the template tools (--dark and body in libs/site-pages.css); the light
   theme's background comes from libs/shared-nav.css, whose [data-theme="light"] rule outranks this one. */
footer.site-footer { background: #0a0a0f; line-height: 1.6; }
/* What the footer's heading, paragraphs and list items get from the element rules of libs/site-pages.css on the template
   tools. Zero-weight selectors, so libs/shared-nav.css's class rules win where they set a value, as they do there. */
:where(footer.site-footer) h2 { font-family: 'Space Grotesk', 'Inter', sans-serif; color: #ffffff; line-height: 1.2; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
:where(footer.site-footer) p { color: #e5e7eb; line-height: 1.7; }
:where(footer.site-footer) li { color: #e5e7eb; line-height: 1.6; }
:where([data-theme="light"] footer.site-footer) :is(h2, p, li) { color: #0a0a14; }
@media (max-width: 768px) { :where(footer.site-footer) h2 { font-size: 1.3rem; } }
:where(footer.site-footer) :where(*) { font-family: inherit; }

/* Links to a section of the page (the FAQ) land below the sticky header (81 px from 640 px, 65 px below) */
html { scroll-padding-top: 97px; }
@media (max-width: 639.98px) { html { scroll-padding-top: 81px; } }

/* Help guide and FAQ buttons, as on the tools (.app-doclinks in libs/site-pages.css, which the converters do not load),
   with the values they compute to on /tools-app/watermark-maker/ */
.app-doclinks { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0.5rem; padding: 0 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.7; }
.app-doclinks a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0 18px;
    background: #14141f;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.app-doclinks a:hover { border-color: #8B5CF6; color: #a78bfa; text-decoration: none; transform: translateY(-2px); }
[data-theme="light"] .app-doclinks a { background: #ffffff; color: #0a0a14; border-color: rgba(0, 0, 0, 0.12); }
[data-theme="light"] .app-doclinks a:hover { border-color: #8B5CF6; color: #7c3aed; }
@media (prefers-reduced-motion: reduce) { .app-doclinks a { transition: none; } }
@media (max-width: 639.98px) { .app-doclinks a { min-width: 44px; justify-content: center; } }

/* Cookie banner (/libs/cookie-consent.js): keep its normal look on converter pages whose stylesheets style every button
   or link (the same rules as in tools-app/older-tools-header.css) */
#zdu-cookie-banner{line-height:1.5}
#zdu-cookie-banner button{margin:0;letter-spacing:normal;text-transform:none;line-height:inherit;transform:none;box-shadow:none}
#zdu-cookie-banner .zdu-cb-accept{background:linear-gradient(135deg,#8B5CF6,#EC4899);transition:transform .2s,box-shadow .2s}
#zdu-cookie-banner .zdu-cb-accept:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(139,92,246,.4)}
#zdu-cookie-banner .zdu-cb-reject{background:rgba(255,255,255,.05);transition:background .2s,border-color .2s}
#zdu-cookie-banner .zdu-cb-reject:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
#zdu-cookie-banner .zdu-cb-more{background:none;border:none;border-radius:0;padding:2px 0;width:auto;min-width:0;min-height:0;height:auto;color:#a78bfa;font-size:12.5px;font-weight:600;text-decoration:underline;text-underline-offset:2px}
#zdu-cookie-banner .zdu-cb-more:hover{background:none;color:#c4b5fd;transform:none;box-shadow:none}
@media(max-width:480px){#zdu-cookie-banner .zdu-cb-more{display:inline-flex;align-items:center;min-height:44px;padding:0;font-size:16px}}
#zdu-cookie-banner .zdu-cb-text a{display:inline;position:static;color:#a78bfa;text-decoration:underline;text-underline-offset:2px;transition:all 0s ease 0s}
#zdu-cookie-banner .zdu-cb-text a:hover{color:#c4b5fd}
#zdu-cookie-banner .zdu-cb-text a::after{content:none}