/* Shared site chrome and the standard WordPress reading layout.
 * Elementor content owns its typography, spacing, colors and responsive layout. */
:root {
    --spira-ink: #112235;
    --spira-blue: #164ded;
    --spira-line: #d9e0e8;
    --spira-quiet: #5a6877;
    --spira-admin-bar: 0px;
}
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body.spira-theme { margin: 0; background: #fff; color: var(--spira-ink); font-family: Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
body.admin-bar { --spira-admin-bar: 32px; }
.spira-header, .spira-footer, .spira-document, .spira-listing, .spira-not-found,
.spira-header *, .spira-footer *, .spira-document *, .spira-listing *, .spira-not-found * { box-sizing: border-box; }
.spira-header a, .spira-footer a { color: inherit; text-decoration: none; }
.spira-header button, .spira-search-form button { font: inherit; cursor: pointer; }
.spira-header a, .spira-header button, .spira-footer a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.spira-header a:focus-visible, .spira-header button:focus-visible, .spira-footer a:focus-visible,
.spira-prose a:focus-visible, .spira-listing a:focus-visible, .spira-search-form :focus-visible,
.spira-outline-link:focus-visible { outline: 3px solid var(--spira-blue); outline-offset: 5px; }
.spira-page-main:focus, .spira-single-main:focus, .spira-listing:focus, .spira-not-found:focus { outline: none; }
.spira-screen-reader, .spira-pagination .screen-reader-text, .spira-post-navigation .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.spira-skip-link { position: fixed; top: -120px; left: 20px; padding: 12px 18px; background: #fff; color: var(--spira-blue); z-index: 100000; }
.spira-skip-link:focus { top: calc(12px + var(--spira-admin-bar)); }
.spira-icon { flex-shrink: 0; display: block; }
.spira-header { position: sticky; top: var(--spira-admin-bar); z-index: 100; height: 88px; padding: 0 5.3%; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--spira-line); background: rgba(255, 255, 255, .97); backdrop-filter: blur(16px); }
.spira-header-brand, .spira-footer-brand { flex-shrink: 0; }
.spira-brand, .spira-header .custom-logo-link, .spira-footer .custom-logo-link { display: inline-flex; align-items: center; }
.spira-wordmark { display: inline-flex; align-items: flex-end; gap: 6px; color: var(--spira-ink); font-family: Arial, sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -1.8px; line-height: 1; }
.spira-brand-dot { display: inline-block; width: 7px; height: 7px; margin-bottom: 4px; background: var(--spira-blue); }
.spira-header .custom-logo, .spira-footer .custom-logo { display: block; max-width: 180px; max-height: 54px; width: auto; height: auto; }
.spira-navigation-panel { display: flex; align-items: center; gap: 35px; }
.spira-primary-menu, .spira-footer-menu { display: flex; align-items: center; gap: 35px; list-style: none; padding: 0; margin: 0; }
.spira-primary-menu { font-size: 14px; font-weight: 600; }
.spira-primary-menu li { position: relative; margin: 0; padding: 0; }
.spira-primary-menu a { display: block; padding: 12px 0; line-height: 1.5; transition: color .2s; }
.spira-primary-menu a:hover, .spira-primary-menu a[aria-current="page"], .spira-primary-menu .current-menu-item > a { color: var(--spira-blue); }
.spira-primary-menu .sub-menu { position: absolute; top: 100%; left: -18px; min-width: 220px; max-width: 280px; padding: 10px 18px; margin: 0; list-style: none; background: #fff; box-shadow: 0 8px 24px #11223516; border: 1px solid var(--spira-line); visibility: hidden; opacity: 0; transition: opacity .15s; }
.spira-primary-menu li:hover > .sub-menu, .spira-primary-menu li:focus-within > .sub-menu { visibility: visible; opacity: 1; }
.spira-primary-menu .sub-menu .sub-menu { top: -1px; left: auto; right: calc(100% + 18px); }
.spira-header .spira-nav-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 16px 22px; border-radius: 3px; background: var(--spira-blue); color: #fff; font-size: 14px; line-height: 1.5; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .2s; }
.spira-header .spira-nav-cta:hover { background: #103cc3; }
.spira-nav-cta .spira-icon { width: 17px; height: 17px; }
.spira-mobile-actions, .spira-mobile-panel-head, .spira-mobile-description, .spira-menu-overlay { display: none; }
.spira-footer { padding: 60px 7% 25px; background: #fff; }
.spira-footer-top { display: flex; align-items: flex-start; gap: 30px; }
.spira-footer-brand p { font-size: 13px; color: var(--spira-quiet); margin: 20px 0 0; line-height: 1.8; }
.spira-footer-nav { margin-left: auto; }
.spira-footer-menu { align-items: flex-start; gap: 28px; font-size: 14px; }
.spira-footer-menu a { display: flex; align-items: center; gap: 8px; line-height: 2; }
.spira-footer a:hover { color: var(--spira-blue); }
.spira-footer-menu .sub-menu { padding: 8px 0 0; margin: 0; list-style: none; font-size: 13px; color: var(--spira-quiet); }
.spira-back-top { border: 1px solid var(--spira-line); padding: 12px; display: flex; margin-left: 20px; }
.spira-back-top:hover { background: #f2f5f8; }
.spira-back-top .spira-icon { width: 20px; height: 20px; }
.spira-footer-contact { margin: 24px 0 0; font-size: 14px; color: var(--spira-quiet); line-height: 1.8; }
.spira-footer-contact a { display: inline-flex; align-items: center; gap: 8px; }
.spira-footer-contact .spira-icon { width: 15px; height: 15px; }
.spira-footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--spira-line); margin-top: 45px; padding-top: 22px; font-size: 12px; line-height: 1.8; color: var(--spira-quiet); }
.spira-footer-bottom small { font-size: 12px; }

/* Reading layouts only: native Elementor widgets keep their own settings. */
.spira-document, .spira-listing, .spira-not-found { max-width: 1120px; margin: 0 auto; padding: 70px 6% 85px; }
.spira-document-header { padding-bottom: 35px; border-bottom: 1px solid var(--spira-line); margin-bottom: 38px; }
.spira-eyebrow { margin: 0 0 18px; font-size: 12px; letter-spacing: 1.6px; line-height: 1.7; font-weight: 600; color: var(--spira-blue); }
.spira-document-header h1, .spira-not-found h1 { margin: 0; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.6; letter-spacing: -.04em; font-weight: 600; overflow-wrap: anywhere; }
.spira-archive-description { margin-top: 20px; color: var(--spira-quiet); line-height: 2; }
.spira-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 20px; color: var(--spira-quiet); font-size: 13px; }
.spira-post-meta a, .spira-post-tags a { color: var(--spira-blue); }
.spira-featured-image { margin: 0 0 38px; }
.spira-featured-image img { display: block; max-width: 100%; height: auto; }
.spira-prose { font-size: 16px; line-height: 2; overflow-wrap: anywhere; }
.spira-prose > :first-child { margin-top: 0; }
.spira-prose > :last-child { margin-bottom: 0; }
.spira-prose p, .spira-prose ul, .spira-prose ol, .spira-prose table, .spira-prose blockquote, .spira-prose figure, .spira-prose pre { margin: 0 0 1.7em; }
.spira-prose h1, .spira-prose h2, .spira-prose h3, .spira-prose h4, .spira-prose h5, .spira-prose h6 { margin: 1.8em 0 .75em; line-height: 1.6; font-weight: 600; color: var(--spira-ink); }
.spira-prose h1 { font-size: 2.2em; }
.spira-prose h2 { font-size: 1.75em; }
.spira-prose h3 { font-size: 1.4em; }
.spira-prose h4 { font-size: 1.15em; }
.spira-prose h5, .spira-prose h6 { font-size: 1em; }
.spira-prose a { color: var(--spira-blue); text-decoration: underline; text-underline-offset: 3px; }
.spira-prose li { padding-left: .2em; }
.spira-prose li > ul, .spira-prose li > ol { margin-bottom: .5em; }
.spira-prose img, .spira-prose video { max-width: 100%; height: auto; }
.spira-prose iframe { max-width: 100%; }
.spira-prose blockquote { border-left: 3px solid var(--spira-blue); padding: 16px 24px; background: #f3f6fa; }
.spira-prose blockquote p:last-child { margin-bottom: 0; }
.spira-prose pre { overflow-x: auto; background: #f3f6fa; padding: 20px; line-height: 1.6; }
.spira-prose code { font-size: .9em; }
.spira-prose table { border-collapse: collapse; width: 100%; }
.spira-prose th, .spira-prose td { border: 1px solid var(--spira-line); padding: 12px 16px; text-align: left; }
.spira-prose th { background: #f3f6fa; }
.spira-prose figcaption, .spira-prose .wp-caption-text { font-size: 13px; color: var(--spira-quiet); line-height: 1.7; }
.spira-prose .alignleft { float: left; margin: 0 24px 24px 0; }
.spira-prose .alignright { float: right; margin: 0 0 24px 24px; }
.spira-prose .aligncenter { display: block; margin-inline: auto; }
.spira-prose::after { content: ''; display: table; clear: both; }
.spira-post-card { display: flex; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--spira-line); }
.spira-post-card:first-child { padding-top: 0; }
.spira-post-thumbnail { width: 30%; flex-shrink: 0; }
.spira-post-thumbnail img { width: 100%; height: auto; display: block; }
.spira-post-card-copy { flex: 1; min-width: 0; }
.spira-post-card time { color: var(--spira-quiet); font-size: 13px; }
.spira-post-card h2 { margin: 10px 0 14px; font-size: 24px; line-height: 1.65; }
.spira-post-card h2 a { color: var(--spira-ink); text-decoration: none; }
.spira-post-card h2 a:hover { color: var(--spira-blue); }
.spira-post-excerpt { color: var(--spira-quiet); font-size: 16px; line-height: 1.9; }
.spira-post-excerpt p { margin: 0 0 18px; }
.spira-read-more, .spira-outline-link { display: inline-flex; align-items: center; gap: 18px; color: var(--spira-blue); font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.6; }
.spira-read-more .spira-icon, .spira-outline-link .spira-icon { width: 20px; height: 20px; }
.spira-outline-link { border: 1px solid var(--spira-line); padding: 16px 22px; margin-top: 24px; }
.spira-outline-link:hover { background: #edf3ff; border-color: var(--spira-blue); }
.spira-empty-state { padding: 20px 0 45px; }
.spira-empty-state h2 { font-size: 22px; line-height: 1.7; }
.spira-empty-state p, .spira-not-found > p:not(.spira-eyebrow) { color: var(--spira-quiet); line-height: 2; }
.spira-not-found { min-height: 60vh; }
.spira-not-found .spira-search-form { margin-top: 30px; }
.spira-search-form { display: flex; gap: 12px; max-width: 560px; }
.spira-search-form input { min-width: 0; width: 100%; padding: 14px 16px; border: 1px solid var(--spira-line); background: #fff; color: var(--spira-ink); font: inherit; border-radius: 3px; }
.spira-search-form button { padding: 14px 24px; border: 1px solid var(--spira-blue); background: var(--spira-blue); color: #fff; border-radius: 3px; white-space: nowrap; }
.spira-page-links, .spira-pagination, .spira-post-navigation, .spira-post-tags { margin-top: 36px; }
.spira-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 10px; }
.spira-pagination .page-numbers, .spira-page-links .post-page-numbers { display: inline-flex; justify-content: center; min-width: 40px; padding: 8px 12px; border: 1px solid var(--spira-line); color: var(--spira-blue); text-decoration: none; }
.spira-pagination .current, .spira-page-links .current { background: var(--spira-blue); border-color: var(--spira-blue); color: #fff; }
.spira-post-navigation .nav-links { display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid var(--spira-line); padding-top: 25px; }
.spira-post-navigation .nav-links > div { max-width: 48%; }
.spira-post-navigation a { color: var(--spira-blue); line-height: 1.8; }
.spira-comments { margin-top: 50px; padding-top: 35px; border-top: 1px solid var(--spira-line); line-height: 1.8; }
.spira-comments input:not([type='checkbox']):not([type='submit']), .spira-comments textarea { max-width: 100%; padding: 12px; border: 1px solid var(--spira-line); font: inherit; }
.spira-comments textarea { width: 100%; }
.spira-comments .submit { border: 0; border-radius: 3px; padding: 14px 22px; color: #fff; background: var(--spira-blue); font: inherit; cursor: pointer; }
.spira-comments .comment-list { padding-left: 24px; }
.spira-comments .comment-body { margin-bottom: 28px; }
.spira-comments a { color: var(--spira-blue); }

@media (max-width: 1100px) {
    .spira-header { padding-inline: 5%; gap: 20px; }
    .spira-navigation-panel, .spira-primary-menu { gap: 22px; }
    .spira-footer-menu { flex-direction: column; gap: 10px; }
}
@media (max-width: 900px) {
    .spira-header { gap: 15px; }
    .spira-navigation-panel, .spira-primary-menu { gap: 16px; }
    .spira-header .spira-nav-cta { padding-inline: 16px; gap: 14px; }
}
@media (max-width: 850px) {
    html { scroll-padding-top: 95px; }
    .spira-header { height: 78px; backdrop-filter: none; }
    .spira-mobile-actions { display: flex; gap: 17px; align-items: center; }
    .spira-mobile-cta { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; }
    .spira-mobile-cta .spira-icon { width: 16px; height: 16px; }
    .spira-menu-toggle, .spira-menu-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; padding: 0; background: transparent; border: 0; color: var(--spira-ink); }
    .spira-navigation-panel { display: none; position: fixed; top: var(--spira-admin-bar); right: 0; bottom: 0; z-index: 102; width: min(90vw, 380px); max-height: calc(100dvh - var(--spira-admin-bar)); overflow-y: auto; overscroll-behavior: contain; background: #fff; padding: 28px; box-shadow: -8px 0 32px #1122351a; }
    .spira-navigation-panel.is-open { display: block; }
    .spira-mobile-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .spira-mobile-panel-head .spira-wordmark { font-size: 30px; }
    .spira-mobile-description { display: block; font-size: 14px; line-height: 1.8; color: var(--spira-quiet); margin: 20px 0; }
    .spira-primary-menu { display: block; margin-top: 20px; counter-reset: spira-menu; }
    .spira-primary-menu > li { counter-increment: spira-menu; }
    .spira-primary-menu > li > a { display: flex; gap: 15px; align-items: center; padding: 23px 0; border-bottom: 1px solid var(--spira-line); font-size: 16px; font-weight: 500; }
    .spira-primary-menu > li > a::before { content: counter(spira-menu, decimal-leading-zero); font-size: 12px; color: var(--spira-quiet); }
    .spira-primary-menu > li > a::after { content: '↗'; margin-left: auto; font-size: 20px; font-weight: 400; }
    .spira-primary-menu .sub-menu, .spira-primary-menu .sub-menu .sub-menu { position: static; min-width: 0; max-width: none; margin: 0; padding: 5px 0 5px 20px; box-shadow: none; border: 0; opacity: 1; visibility: visible; }
    .spira-primary-menu .sub-menu a { font-size: 14px; font-weight: 400; }
    .spira-header .spira-nav-cta { margin-top: 28px; padding: 18px 22px; }
    .spira-menu-overlay:not([hidden]) { display: block; position: fixed; inset: var(--spira-admin-bar) 0 0; z-index: 101; background: #11223566; }
    body.spira-menu-open { overflow: hidden; }
}
@media (max-width: 782px) { body.admin-bar { --spira-admin-bar: 46px; } }
@media (max-width: 600px) {
    body.admin-bar { --spira-admin-bar: 0px; }
    .spira-header { height: 74px; padding-inline: 6%; }
    .spira-wordmark { font-size: 29px; }
    .spira-mobile-actions { gap: 10px; }
    .spira-mobile-cta { gap: 5px; font-size: 12px; }
    .spira-header .custom-logo { max-width: 120px; max-height: 44px; }
    .spira-footer { padding: 42px 6% 24px; }
    .spira-footer-top { flex-wrap: wrap; gap: 28px; }
    .spira-footer-brand { width: calc(100% - 85px); order: 0; }
    .spira-footer-brand p { font-size: 12px; line-height: 1.8; }
    .spira-back-top { order: 1; margin-left: auto; }
    .spira-footer-nav { order: 2; margin-left: 0; }
    .spira-footer-menu { flex-direction: row; flex-wrap: wrap; gap: 18px; font-size: 13px; }
    .spira-footer-bottom { margin-top: 30px; flex-direction: column; gap: 10px; }
    .spira-document, .spira-listing, .spira-not-found { padding: 45px 6% 60px; }
    .spira-document-header { padding-bottom: 25px; margin-bottom: 28px; }
    .spira-prose h2 { font-size: 1.5em; }
    .spira-post-card { flex-direction: column; gap: 20px; }
    .spira-post-thumbnail { width: 100%; }
    .spira-post-card h2 { font-size: 22px; }
    .spira-post-navigation .nav-links { flex-direction: column; gap: 20px; }
    .spira-post-navigation .nav-links > div { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .spira-header a, .spira-primary-menu .sub-menu { transition: none; }
}
