/* Shared shell extracted from content.php. Keep page-specific styles scoped. */
:root { --red: #c00000; --ink: #2c3e50; --muted: #666; --line: #e2e6e4; --green: #fdf2f2; }
.container { width: 100%; align-items: flex-start; }
.container > .main-content { flex: 3 1 0; min-width: 0; }
.container > .site-sidebar { flex: 1 1 0; min-width: 0; }
.navbar { gap: 12px; }
.inner-logo { flex-shrink: 0; }
button.menu-toggle { background: none; border: 0; padding: 8px; min-width: 44px; min-height: 44px; font: inherit; font-size: 24px; color: inherit; cursor: pointer; }
.site-search { display: flex; }
.site-search input { min-width: 0; width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font: inherit; }
.site-search button { flex-shrink: 0; min-width: 44px; min-height: 44px; background: var(--primary-red); color: white; border: 0; padding: 0 15px; border-radius: 0 4px 4px 0; cursor: pointer; }
.site-categories { list-style: none; padding: 0; }
.site-categories li { border-bottom: 1px solid #eee; }
.site-categories a { display: block; padding: 9px 0; overflow-wrap: anywhere; }
.site-categories i { color: var(--primary-red); }
.site-sidebar .widget-title { line-height: 1.5; }
.social-btn { min-height: 44px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #21694f; outline-offset: 3px; }
.main-content { overflow-wrap: anywhere; }
.page-panel { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 5px #0000000d; }
.page-panel h1 { font-size: 30px; margin-bottom: 16px; }
.page-panel p { margin-block: 12px; }
@media (max-width: 1050px) and (min-width: 769px) { .nav-links { gap: 0; } .nav-links li a { padding: 8px; } }
@media (max-width: 900px) { .container > .main-content, .container > .site-sidebar { flex: auto; width: 100%; } }
@media (max-width: 768px) { .navbar { height: 60px; } .inner-logo { margin-left: 0; } .page-panel { padding: 15px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

.site-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; flex-shrink: 0; }
.category-chevron { color: var(--primary-red); font-size: 20px; line-height: 1; }
/* Full Thai dates need room without separating an icon from its value. */
.article-meta { flex-wrap: wrap; align-items: baseline; }
.article-meta > span { max-width: 100%; }
.article-meta > span:first-child, .article-meta time { white-space: nowrap; }