/* neko13f2026 ("neko13") frontend template.
   Header/footer lifted from the "Horizone Blog" design mockup (Claude
   Design export, 2026-09-07) — classes below map 1:1 to that mockup's
   inline styles, just moved into a stylesheet per the same
   theme-is-a-folder convention the admin side uses (App\Support\Theme).
   Colors/copy are the mockup's placeholders, not final branding. */

* {
    box-sizing: border-box;
}

body.site {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: Helvetica, Arial, sans-serif;
    background: #fff;
    color: #1a1815;
}

.site a {
    text-decoration: none;
}

.site-header-inner,
.site-footer-inner,
.site-main {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */

.site-header {
    /* Falls back to the mockup's plain-white look when Settings >
       General's "Frontend header background color" isn't set — see
       App\Support\FrontendTemplate::customCss(). Was `transparent`
       until the header became sticky below (Act's ask, Telegram
       2026-09-12): once it can sit on top of scrolled-under page
       content, it needs an opaque fallback or that content would show
       through underneath it. */
    background: var(--site-header-bg, #fff);
    /* Sticks to the top of the viewport while scrolling ("fixed...
       ติดอยู่ข้างบนตลอด", same ask) rather than scrolling away with the
       page. `sticky`, not `fixed`: it keeps the header's normal
       position in the page flow (no separate "push content down by
       the header's height" hack needed) while still reaching and
       staying at the top once scrolled that far. z-index keeps it
       above page content once something scrolls underneath it. */
    position: sticky;
    top: 0;
    z-index: 30;
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 16px 18px;
}

.site-header-left {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.site-brand,
.site-footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #1a1815;
}

.site-brand {
    font-size: 19px;
}

.site-brand-mark {
    width: 24px;
    height: 24px;
    background: #1a1815;
    color: #fff;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.site-nav {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.site-nav a {
    font-size: 14px;
    color: #4a4640;
}

.site-nav a:hover {
    color: #1a1815;
}

/* Demo-only "Home" dropdown (Design #1/2) — hover on pointer devices,
   :focus-within so a tap/click that focuses the button (its native
   behavior) also opens it on touch, with no JS needed either way. */
.site-nav-dropdown {
    position: relative;
}

.site-nav-dropdown-toggle {
    font: inherit;
    font-size: 14px;
    color: #4a4640;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.site-nav-dropdown-toggle:hover {
    color: #1a1815;
}

.site-nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 6px;
    min-width: 140px;
    z-index: 20;
}

.site-nav-dropdown:hover .site-nav-dropdown-menu,
.site-nav-dropdown:focus-within .site-nav-dropdown-menu {
    display: block;
}

.site-nav-dropdown-menu a {
    display: block;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.site-nav-dropdown-menu a:hover {
    background: #f3f1ee;
}

.site-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.site-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f3f1ee;
    border-radius: 8px;
    padding: 9px 14px;
    min-width: 180px;
    font-size: 14px;
    color: #9a958f;
}

.site-search input {
    border: none;
    background: none;
    outline: none;
    font-size: 14px;
    font-family: inherit;
    color: #1a1815;
    flex: 1;
    min-width: 0;
    padding: 0;
}

.site-search input::placeholder {
    color: #9a958f;
}

.site-search button {
    border: none;
    background: none;
    padding: 0;
    margin-left: auto;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: inherit;
}

.site-lang {
    font-size: 14px;
    color: #4a4640;
    display: flex;
    align-items: center;
    gap: 4px;
}

.site-login-link {
    font-size: 14px;
    color: #4a4640;
}

.site-login-link:hover {
    color: #1a1815;
}

.site-signup-btn {
    background: #1a1815;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
    display: inline-block;
}

.site-signup-btn:hover {
    opacity: 0.9;
}

.site-brand-logo {
    /* Buyer-configurable (Settings > General "Header logo height", Act's
       ask, Telegram 2026-09-12 — some logos only look right at a
       different size) — see App\Support\FrontendTemplate::customCss(). */
    height: var(--site-header-logo-height, 32px);
    display: block;
}

.site-footer-brand .site-brand-logo {
    /* Buyer-configurable (Settings > General "Footer logo height", Act's
       ask, Telegram 2026-09-15 — same reasoning as the header one) —
       independent variable/fallback, not tied to the header's setting. */
    height: var(--site-footer-logo-height, 28px);
}

/* Main */

.site-main {
    /* flex: 1 0 auto (paired with body.site's display:flex/column above)
       is the actual "stick to bottom" fix — pushes the footer down to
       the viewport's bottom edge on short pages instead of it floating
       right under a short page's content (Ricky's screenshot, Telegram
       2026-09-09). min-height stays as a floor under that. */
    flex: 1 0 auto;
    padding: 16px;
    min-height: 240px;
}

/* Shared layout helpers — any page's sub-header band (breadcrumb bar,
   dark hero band, etc.) that should span edge-to-edge like .site-header/
   .site-footer already do, instead of being capped at 1200px like
   ordinary .site-main content (Ricky's ask, Telegram 2026-09-09, first
   raised on Contact Us, then reused as-is for Events/FAQ). */

.full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* Inner wrapper for a .full-bleed band — keeps its actual content
   aligned to the same 1200px/16px-padding column as .site-header-inner
   ("เนื้อหาก็ตรงกับ logo จนถึงภาษา"), rather than touching the viewport edge. */
.band-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

.breadcrumb-bar {
    background: #f3f1ee;
}

.breadcrumb-bar-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.breadcrumb-bar a {
    color: #6a655e;
}

.breadcrumb-bar span:not(.breadcrumb-current) {
    color: #9a958f;
}

.breadcrumb-current {
    color: #1a1815;
    font-weight: 600;
}

/* Dark variant — sits inside a dark full-bleed band (e.g. .contact-hero)
   instead of having its own #f3f1ee background. */
.breadcrumb-bar-dark {
    background: transparent;
}

.breadcrumb-bar-dark.breadcrumb-bar-inner {
    padding-top: 0;
    padding-bottom: 10px;
}

.breadcrumb-bar-dark a {
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumb-bar-dark span:not(.breadcrumb-current) {
    color: rgba(255, 255, 255, 0.4);
}

.breadcrumb-bar-dark .breadcrumb-current {
    color: #fff;
}

/* Generic page content — public /p/{slug} pages with no bespoke design
   of their own (About Us, Privacy Policy, etc.), plus the single Event
   page and the intro blurb on Blog/Events/FAQ's index pages, all of
   which reuse .content-page(-body) already. Previously unstyled ("no
   real design exists yet"); this is Act's "About Us" mockup (Telegram,
   2026-09-10), meant as the shared theme for this kind of page in
   general — not an About-Us-only style. The mockup's hero photo, stats
   grid, and CTA banner aren't here: they're fixed "Horizone" example
   content with no admin field behind them, and a Page row is
   deliberately just a title + rich-text body (see App\Models\Page). */

.content-page {
    max-width: 840px;
    margin: 0 auto;
    padding: 40px 0 8px;
}

.content-page h1 {
    font-size: 34px;
    margin: 0 0 10px;
    font-weight: 700;
}

.content-page-updated {
    font-size: 14px;
    color: #9a958f;
    margin: 0 0 32px;
}

.content-page-body {
    font-size: 16px;
    line-height: 1.75;
    color: #3a3630;
}

.content-page-body p {
    margin: 0 0 24px;
}

.content-page-body h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 36px 0 14px;
    color: #1a1815;
}

.content-page-body ul,
.content-page-body ol {
    margin: 0 0 24px;
    padding-left: 22px;
}

.content-page-body li {
    margin-bottom: 10px;
}

.content-page-body img {
    max-width: 100%;
    border-radius: 12px;
}

/* Hero (homepage only — Views/frontend/home/hero.php) */

.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    color: #fff;
}

/* One slide per hero_banners row (App\Models\HeroBanner::activeForFrontend()) —
   stacked absolutely, only .hero-slide-active shown, JS in hero.php
   toggles which one. A single slide (no carousel controls in that
   case) still gets this treatment for a consistent DOM either way. */
.hero-slide {
    position: absolute;
    inset: 0;
    display: block;
    color: inherit;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}

.hero-slide-active {
    opacity: 1;
    visibility: visible;
}

.hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-author {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    border-radius: 30px;
    padding: 6px 14px 6px 6px;
    z-index: 1;
}

.hero-author-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.hero-author-avatar-img {
    object-fit: cover;
}

.hero-author-name {
    font-weight: 600;
    font-size: 13px;
}

.hero-author-meta {
    opacity: 0.85;
    font-size: 12px;
}

/* Content position variants (Settings > Hero Banner > Content position) —
   the block itself is always a flex column so align-items can control
   text alignment along with the anchor corner. */
.hero-content {
    position: absolute;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.hero-content-bottom-left .hero-content {
    left: 24px;
    bottom: 24px;
    align-items: flex-start;
    text-align: left;
}

.hero-content-bottom-right .hero-content {
    right: 24px;
    bottom: 24px;
    align-items: flex-end;
    text-align: right;
}

.hero-content-top-left .hero-content {
    left: 24px;
    top: 24px;
    align-items: flex-start;
    text-align: left;
}

.hero-content-top-right .hero-content {
    right: 24px;
    top: 24px;
    align-items: flex-end;
    text-align: right;
}

.hero-content-center .hero-content {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    text-align: center;
    max-width: 560px;
}

.hero-badge {
    background: rgba(255, 255, 255, 0.9);
    color: #1a1815;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 12px;
}

.hero-title {
    color: #fff;
    font-size: clamp(24px, 3vw, 34px);
    margin: 0 0 8px;
    font-weight: 700;
}

.hero-desc {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

/* Carousel-wide, not per-slide — a stable spot regardless of which
   corner the active slide's content sits in. */
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 6px;
}

.hero-dot {
    width: 5px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.hero-dot-active {
    width: 16px;
    background: #fff;
}

.site-placeholder {
    padding: 80px 16px;
    text-align: center;
    color: #9a958f;
    font-size: 15px;
}

/* 404 page (Views/frontend/404.php) */

.not-found {
    text-align: center;
    padding: 64px 16px;
    color: #1a1815;
}

.not-found-svg {
    width: 160px;
    height: 128px;
    color: #c9c5be;
    margin-bottom: 8px;
}

.not-found-code {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #9a958f;
    margin-bottom: 8px;
}

.not-found-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
}

.not-found-desc {
    font-size: 14px;
    color: #6a655e;
    margin: 0 0 24px;
}

/* Footer */

.site-footer {
    /* Same var/fallback approach as .site-header above, default matches
       the mockup's dark footer. */
    background: var(--site-footer-bg, #1a1815);
    color: #fff;
}

.site-footer-inner {
    padding: 40px 16px 24px;
}

.site-footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer-brand {
    font-size: 18px;
    color: #fff;
    margin-bottom: 12px;
}

.site-footer-brand .site-brand-mark {
    background: #fff;
    color: #1a1815;
}

.site-footer-about-text {
    max-width: 280px;
}

.site-footer-about-text p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin: 0;
}

.site-footer-about-text a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
}

.site-footer-col-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 14px;
}

.site-footer-col a {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
}

.site-footer-col a:hover {
    color: #fff;
}

.site-footer-social {
    display: flex;
    gap: 10px;
}

.site-footer-social a {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.site-footer-social a:hover {
    background: rgba(255, 255, 255, 0.1);
}

.site-footer-social svg {
    width: 15px;
    height: 15px;
}

.site-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    flex-wrap: wrap;
    gap: 10px;
}

.site-footer-legal {
    display: flex;
    gap: 20px;
}

.site-footer-legal a {
    color: inherit;
}

.site-footer-legal a:hover {
    text-decoration: underline;
}

@media (max-width: 720px) {
    .site-footer-top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .site-footer-top {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Blog section (homepage only — Views/frontend/home/blog-section.php + partials/blog-card.php) */

.blog-section {
    padding: 48px 0 24px;
}

.blog-section-title {
    font-size: 32px;
    margin: 0 0 8px;
    font-weight: 700;
}

.blog-section-subtitle {
    font-size: 15px;
    color: #6a655e;
    margin: 0 0 28px;
}

/* Horizontal scroll, not a hard cutoff — Ricky's mobile concern
   (Telegram, 2026-09-07): capping at 4 tabs keeps this short, but a
   narrow phone plus long category names could still overflow, so
   nothing gets hidden/unreachable, it just scrolls. */
.blog-tabs {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-bottom: 28px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.blog-tab {
    font-size: 14px;
    color: #6a655e;
    padding-bottom: 4px;
    flex-shrink: 0;
}

.blog-tab-active {
    font-weight: 700;
    color: #1a1815;
    border-bottom: 2px solid #1a1815;
}

.blog-tab-more {
    color: #9a958f;
    margin-left: auto;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 860px) {
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .blog-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Blog index (public, /p/{blog-index-slug} — Views/frontend/blog/index.php).
   Distinct from .blog-section above (the homepage teaser) — this is
   the dedicated listing page, with its own sidebar category list
   instead of horizontal tabs. Design ref: Act's "Blog (index).dc.html"
   mockup, Telegram 2026-09-10. Reuses .blog-grid/.blog-card-* as-is. */

.blog-index {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 16px 56px;
}

.blog-index-intro {
    max-width: 640px;
    margin-bottom: 8px;
}

.blog-index-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 28px;
}

@media (max-width: 760px) {
    .blog-index-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.blog-index-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: sticky;
    top: 16px;
}

@media (max-width: 760px) {
    .blog-index-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.blog-index-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    color: #1a1815;
}

.blog-index-cat-active {
    background: #1a1815;
    color: #fff;
    font-weight: 600;
}

.blog-index-cat-count {
    font-size: 12px;
    color: #9a958f;
}

.blog-index-cat-active .blog-index-cat-count {
    color: rgba(255, 255, 255, 0.6);
}

.blog-index-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.blog-index-result-count {
    font-size: 14px;
    color: #9a958f;
}

.blog-index-sort {
    font-size: 14px;
    color: #4a4640;
}

.blog-index-sort select {
    border: 1px solid #e5e2dd;
    border-radius: 8px;
    padding: 8px 14px;
    margin-left: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #4a4640;
    background: #fff;
    cursor: pointer;
}

.blog-index-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 44px;
}

.blog-index-page-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #e5e2dd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #4a4640;
}

.blog-index-page-btn-current {
    background: #1a1815;
    border-color: #1a1815;
    color: #fff;
}

.blog-index-page-btn-disabled {
    color: #c9c5be;
}

.blog-index-page-label {
    font-size: 14px;
    color: #6a655e;
    margin: 0 4px;
}

.blog-card-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
}

.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-media-placeholder {
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(135deg, #e5e2dd, #c9c5be);
}

.blog-card-category {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: #1a1815;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
}

/*
 * Same badge, not absolutely positioned (Act's report, Telegram
 * 2026-09-10: the badge was overlapping the title text in home-v2/v3's
 * hero/featured captions) — .blog-card-category's absolute positioning
 * is relative to its nearest positioned ancestor, which in those two
 * spots is the caption box itself (already position:absolute for the
 * image-overlay effect), landing the badge on top of the title instead
 * of above it in normal flow. Same fix shape as .event-card-category's
 * existing "own rule so it can be a plain flex child" comment above —
 * also fixes events/show.php's category badge, which had the same bug
 * for an unrelated reason (no positioned ancestor there at all, so it
 * was positioned against the page rather than inline before the h1).
 */
.blog-card-category-inline {
    display: inline-block;
    background: rgba(255, 255, 255, 0.92);
    color: #1a1815;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
}

.blog-card-meta {
    font-size: 13px;
    color: #9a958f;
    margin-bottom: 8px;
}

.blog-card-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.35;
}

.blog-card-title a {
    color: #1a1815;
}

.blog-card-excerpt {
    font-size: 14px;
    color: #6a655e;
    line-height: 1.55;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-card-author-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.blog-card-author-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef0f4;
    color: #6a655e;
    font-size: 11px;
    font-weight: 600;
}

.blog-card-author-name {
    font-size: 13px;
    color: #4a4640;
}

.blog-section-footer {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* Upcoming Events section (homepage only — Views/frontend/home/events-section.php + partials/event-card.php) */

.events-section {
    padding: 24px 0 48px;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 860px) {
    .events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .events-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.event-card {
    background: #f3f1ee;
    border-radius: 16px;
    overflow: hidden;
}

.event-card-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
}

.event-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Wrapper owns the corner position and stacks the date/category badges
 * with a fixed gap via flexbox — a fixed pixel `top` on the category
 * badge itself (previous approach) had to guess the date badge's
 * rendered height, and that guess broke at other card widths since the
 * image is aspect-ratio-based (Ricky's screenshot, Telegram 2026-09-09:
 * the category ended up looking like it drifted toward the middle of
 * the image). Stacking as a flex group keeps the gap correct at any size.
 */
.event-card-badges {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.event-card-date {
    background: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    text-align: center;
    line-height: 1.1;
}

.event-card-date-month {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #e05a2b;
    letter-spacing: 0.03em;
}

.event-card-date-day {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #1a1815;
}

/* Own rule rather than reusing .blog-card-category so it can be a plain flex child here instead of absolutely positioned. */
.event-card-category {
    background: rgba(255, 255, 255, 0.92);
    color: #1a1815;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
}

.event-card-body {
    padding: 20px;
}

.event-card-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.35;
}

.event-card-title a {
    color: #1a1815;
}

.event-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.event-card-time {
    font-size: 13px;
    color: #4a4640;
}

.event-card-details {
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    color: #1a1815;
}

/* Frequently Asked Questions section (homepage only — Views/frontend/home/faq-section.php) */

.faq-section {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    padding: 0 0 48px;
}

@media (max-width: 760px) {
    .faq-section {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

.faq-section-intro .blog-section-title,
.faq-section-intro .blog-section-subtitle {
    margin-bottom: 0;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-list .faq-item {
    border: 1px solid #e5e2dd;
    border-radius: 12px;
    padding: 18px 20px;
}

.faq-list .faq-item-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.faq-list .faq-item-question span:first-child {
    font-size: 15px;
    font-weight: 600;
}

.faq-list .faq-item-icon {
    font-size: 18px;
    flex-shrink: 0;
    color: #4a4640;
}

.faq-list .faq-item-answer {
    display: none;
    font-size: 14px;
    color: #6a655e;
    line-height: 1.6;
    margin-top: 14px;
}

.faq-list .faq-item-answer p:first-child {
    margin-top: 0;
}

.faq-list .faq-item-answer p:last-child {
    margin-bottom: 0;
}

.faq-list .faq-item-open .faq-item-answer {
    display: block;
}

/* Blog post detail (Views/frontend/blog/show.php) — Ricky's design
   reference (Telegram, 2026-09-08). Same color palette/type scale as
   the blog card/section rules above, just sized up for a page-level
   article rather than a grid card. Single column for now — a sidebar
   ("column ด้านข้างน่าสนใจ... แค่เพิ่มกริดอีกอัน") is a later, separate
   card per Ricky, this is deliberately just the main column so adding
   one later is a plain grid-template-columns change, not a rewrite. */

.blog-post {
    /* No max-width of its own (Ricky's ask, Telegram 2026-09-08 — the
       content/image stopped well short of the site's actual right
       edge, leaving dead space, since there's no sidebar yet to fill
       it) — .site-main, its parent (layout.php), already caps the
       page at 1200px and centers it; this just fills that. Same
       wrapper a future sidebar grid column slots into later, no
       further width change needed then. Not a readability change to
       the text itself — still governed by .blog-post-summary/
       .blog-post-body's own font-size/line-height. */
    padding: 48px 0 64px;
}

.blog-post-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3f1ee;
    color: #4a4640;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    margin-bottom: 24px;
}

.blog-post-back:hover {
    background: #e5e2dd;
}

.blog-post-date {
    font-size: 13px;
    color: #9a958f;
    margin-bottom: 12px;
}

.blog-post-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px;
}

.blog-post-summary {
    font-size: 16px;
    color: #6a655e;
    line-height: 1.6;
    margin: 0 0 24px;
}

.blog-post-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.blog-post-author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.blog-post-author-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef0f4;
    color: #6a655e;
    font-size: 15px;
    font-weight: 600;
}

.blog-post-author-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a1815;
}

.blog-post-author-position {
    font-size: 13px;
    color: #9a958f;
}

.blog-post-feature {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    margin-bottom: 32px;
}

.blog-post-body {
    font-size: 16px;
    line-height: 1.75;
    color: #2a2722;
}

.blog-post-body img {
    max-width: 100%;
    border-radius: 12px;
}

/* "Share this" row (Act's ask, Telegram 2026-09-10) — Views/frontend/blog/show.php and events/show.php, both via App\Support\ShareButtons. */
.share-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 32px 0;
    padding-top: 24px;
    border-top: 1px solid #e5e2dd;
}

.share-buttons-label {
    font-size: 13px;
    font-weight: 600;
    color: #6a655e;
}

.share-button {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #1a1815;
    background: #fff;
    border: 1px solid #e5e2dd;
    border-radius: 20px;
    padding: 6px 16px;
    cursor: pointer;
}

/* Ad Spaces (Views/frontend/partials/ad-space.php) — a small, optional
   banner slot; the partial renders nothing at all when no ad space is
   configured/enabled for that page+position, so this never has to
   account for an empty state. Deliberately no max-height or crop
   (Act's ask, Telegram 2026-09-15 — "we don't control size, we let it
   free, just don't let width exceed the design"): whatever aspect
   ratio the uploaded image has is shown as-is, just never wider than
   the page content. */

.ad-space {
    padding: 24px 0;
    text-align: center;
}

.ad-space img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Events index (public, /p/{events-index-slug} — Views/frontend/events/index.php) */

.events-intro {
    padding: 24px 0 8px;
}

.events-calendar-section {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 40px;
    align-items: start;
    padding: 0 0 56px;
}

.events-calendar {
    border: 1px solid #e5e2dd;
    border-radius: 16px;
    padding: 22px;
}

.events-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.events-calendar-nav-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e5e2dd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1815;
}

.events-calendar-month-label {
    font-size: 16px;
    font-weight: 700;
}

.events-calendar-weekdays,
.events-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.events-calendar-weekdays {
    margin-bottom: 6px;
}

.events-calendar-weekday {
    text-align: center;
    font-size: 12px;
    color: #9a958f;
    font-weight: 600;
    padding: 6px 0;
}

.events-calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 10px;
    font-size: 13px;
    color: #1a1815;
}

.events-calendar-day-empty {
    visibility: hidden;
}

.events-calendar-day-today {
    box-shadow: inset 0 0 0 1px #e5e2dd;
}

.events-calendar-day-selected {
    background: #1a1815;
    color: #fff;
    font-weight: 700;
}

.events-calendar-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e05a2b;
}

.events-calendar-day-selected .events-calendar-dot {
    background: #fff;
}

.events-agenda-label {
    font-size: 14px;
    color: #9a958f;
    margin-bottom: 16px;
}

.events-agenda-empty {
    border: 1px solid #e5e2dd;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: #9a958f;
    font-size: 14px;
}

.events-agenda-item {
    display: flex;
    gap: 16px;
    border: 1px solid #e5e2dd;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    color: #1a1815;
}

.events-agenda-item-date {
    background: #f3f1ee;
    border-radius: 10px;
    padding: 10px 14px;
    text-align: center;
    line-height: 1.1;
    flex-shrink: 0;
    height: fit-content;
}

.events-agenda-item-month {
    font-size: 11px;
    font-weight: 600;
    color: #e05a2b;
    letter-spacing: 0.03em;
}

.events-agenda-item-day {
    font-size: 18px;
    font-weight: 700;
}

.events-agenda-item-category {
    font-size: 13px;
    color: #9a958f;
    margin-bottom: 6px;
}

.events-agenda-item-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
}

.events-agenda-item-time {
    font-size: 13px;
    color: #4a4640;
}

@media (max-width: 720px) {
    .events-calendar-section {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* FAQ index (public, /p/{faq-index-slug} — Views/frontend/faq/index.php) */

.faq-intro {
    padding: 48px 0 40px;
    text-align: center;
}

.faq-intro .blog-section-title,
.faq-intro .blog-section-subtitle {
    text-align: center;
}

.faq-search {
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f3f1ee;
    border-radius: 10px;
    padding: 4px 4px 4px 16px;
}

.faq-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    padding: 10px 0;
    color: #1a1815;
}

.faq-search input:focus {
    outline: none;
}

.faq-search button {
    border: none;
    background: transparent;
    font-size: 15px;
    padding: 8px 12px;
    cursor: pointer;
    color: #4a4640;
}

.faq-body {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: start;
    padding: 0 0 56px;
}

.faq-categories {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: sticky;
    top: 16px;
}

.faq-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    color: #1a1815;
}

.faq-category-active {
    background: #1a1815;
    color: #fff;
    font-weight: 600;
}

.faq-category-count {
    font-size: 12px;
    color: #9a958f;
}

.faq-category-active .faq-category-count {
    color: rgba(255, 255, 255, 0.6);
}

.faq-active-label {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-accordion .faq-item {
    border: 1px solid #e5e2dd;
    border-radius: 12px;
    padding: 18px 20px;
}

.faq-accordion .faq-item-question {
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Native <summary> marker replaced with a +/− that flips with [open], same visual language as the mockup's toggle icon. */
.faq-accordion .faq-item-question::-webkit-details-marker {
    display: none;
}

.faq-accordion .faq-item-question::after {
    content: '+';
    font-size: 18px;
    color: #4a4640;
    flex-shrink: 0;
}

.faq-accordion .faq-item[open] .faq-item-question::after {
    content: '\2212';
}

.faq-accordion .faq-item-answer {
    font-size: 14px;
    color: #6a655e;
    line-height: 1.6;
    margin-top: 14px;
}

.faq-accordion .faq-item-answer p:first-child {
    margin-top: 0;
}

.faq-cta {
    background: #1a1815;
    border-radius: 16px;
    text-align: center;
    color: #fff;
    padding: 44px 32px;
    margin-bottom: 56px;
}

.faq-cta-title {
    font-size: 22px;
    margin: 0 0 8px;
    font-weight: 700;
}

.faq-cta-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 20px;
}

.faq-cta-button {
    display: inline-flex;
    background: #fff;
    color: #1a1815;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 720px) {
    .faq-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq-categories {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Contact Us (both designs — Views/frontend/contact/with-form.php, no-form.php) */

.contact-hero {
    background: #1a1815;
    margin-bottom: 24px;
}

.contact-hero-inner {
    padding-top: 36px;
    padding-bottom: 36px;
}

.contact-hero-title {
    color: #fff;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 700;
    margin: 0;
}

.contact-heading {
    font-size: 32px;
    margin: 0 0 8px;
    font-weight: 700;
}

.contact-subheading {
    font-size: 15px;
    color: #6a655e;
    margin: 0 0 32px;
}

.contact-with-form {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    padding: 24px 0 56px;
}

.contact-alert {
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14px;
    margin-bottom: 20px;
}

.contact-alert-success {
    background: #ecfdf3;
    color: #065f46;
}

.contact-alert-error {
    background: #fef3f2;
    color: #991b1b;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-form-field label {
    font-size: 13px;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.contact-form-field input,
.contact-form-field select,
.contact-form-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e5e2dd;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: #1a1815;
}

.contact-form-field textarea {
    resize: vertical;
}

.contact-form-submit {
    background: #1a1815;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
    width: auto;
}

.contact-details-col {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.contact-details-heading {
    font-size: 20px;
    margin: 0 0 18px;
    font-weight: 700;
}

.contact-details-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-detail-label {
    font-size: 13px;
    color: #9a958f;
    margin-bottom: 2px;
}

.contact-detail-value {
    font-size: 14px;
}

.contact-map-frame {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.contact-map-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.contact-map-frame-4-3 {
    aspect-ratio: 4 / 3;
}

.contact-map-frame-16-6 {
    aspect-ratio: 16 / 6;
}

.contact-map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 14px;
    text-decoration: underline;
    color: #1a1815;
}

.contact-map-overlay-link {
    position: absolute;
    left: 24px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #1a1815;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 30px;
    text-decoration: none;
}

.contact-no-form {
    padding: 0 0 56px;
}

.contact-detail-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.contact-detail-card {
    background: #f3f1ee;
    border-radius: 16px;
    padding: 26px 22px;
}

.contact-detail-card .contact-detail-label {
    margin: 14px 0 4px;
}

.contact-detail-card .contact-detail-value {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

@media (max-width: 720px) {
    .contact-with-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-detail-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Shared button used by more than one homepage design's ad-slot
   placeholders (see Vikunja card #104) — .editorial-btn-light is meant
   for a dark background, .editorial-btn-outline for a light one. */
.editorial-btn {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    padding: 14px 26px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.editorial-btn-outline {
    background: transparent;
    color: #1a1815;
    border: 1px solid #e5e2dd;
}

.editorial-btn-light {
    background: #fff;
    color: #1a1815;
    border: none;
    padding: 11px 22px;
}

/* Shared "section title + View all" header row and its meta line,
   used by more than one homepage design. */
.blog-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.blog-section-header .blog-section-title {
    margin: 0;
}

.blog-section-link {
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    color: #1a1815;
    white-space: nowrap;
}

.editorial-blog-side-meta {
    font-size: 12px;
    color: #9a958f;
    margin-bottom: 4px;
}

/* Home v4 "Magazine" (public /, when settings.home_design = 2 —
   Views/frontend/home-v4.php — still slot 2, only what's behind it
   changed). Design ref: Act's "Home v4 (Magazine).dc.html" mockup,
   Telegram 2026-09-12, replacing the old "Editorial" design that used
   to live here. Shares .blog-section-title/.blog-section-header/
   .blog-card-*/.events-*/.faq-*/.editorial-btn/.editorial-blog-side-meta
   with the other homepage designs; only the magazine-* classes below
   are new. */

.home-v4 {
    padding: 32px 0 8px;
}

.magazine-layout {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 40px;
    align-items: start;
    padding-bottom: 56px;
}

@media (max-width: 900px) {
    .magazine-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.magazine-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 560px) {
    .magazine-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.magazine-sidebar {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.magazine-widget-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.magazine-suggested-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.magazine-suggested-item {
    display: flex;
    gap: 12px;
    color: inherit;
}

.magazine-suggested-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    display: block;
}

.magazine-suggested-thumb img,
.magazine-suggested-thumb .blog-card-media-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.magazine-suggested-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.magazine-suggested-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #1a1815;
}

.magazine-categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.magazine-category-link {
    font-size: 13px;
    background: #f3f1ee;
    border-radius: 8px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #1a1815;
}

.magazine-category-count {
    color: #9a958f;
}

.magazine-newsletter {
    background: #f3f1ee;
    border-radius: 14px;
    padding: 24px;
}

/* Shared newsletter signup form (Act's ask, Telegram 2026-09-12) —
   used by both Home #1 (.home-newsletter-band, full-width) and the
   Magazine design (.magazine-newsletter, sidebar box). Defaults to a
   dark button since the Magazine sidebar box is light — Home #1's own
   dark band overrides it back to light below, same idea as the old
   editorial-btn/editorial-btn-light split. */
.newsletter-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.newsletter-form input[type="email"] {
    flex: 1;
    min-width: 160px;
    border: 1px solid #e5e2dd;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
}

.newsletter-form button {
    background: #1a1815;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.newsletter-flash {
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.newsletter-flash-success {
    background: #ecfdf3;
    color: #065f46;
}

.newsletter-flash-error {
    background: #fef2f2;
    color: #991b1b;
}

/* Home #1's own newsletter band (Act's ask, Telegram 2026-09-12) — a
   new full-width closing section, since Design #1 never had an
   ad-slot/promo area to repurpose the way the Magazine design's
   sidebar box did. Dark, matching the site's other bold full-width
   bands (e.g. the footer) — its .newsletter-form button is overridden
   light below so it still shows up against this dark background,
   same idea as the old editorial-btn/editorial-btn-light split. */
.home-newsletter-band {
    background: #1a1815;
    border-radius: 16px;
    padding: 40px 32px;
    margin: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.home-newsletter-band-copy h2 {
    color: #fff;
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 700;
    margin: 0 0 6px;
}

.home-newsletter-band-copy p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    margin: 0;
}

.home-newsletter-band .newsletter-form {
    flex: 1 1 320px;
    max-width: 420px;
}

.home-newsletter-band .newsletter-form input[type="email"] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.home-newsletter-band .newsletter-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.home-newsletter-band .newsletter-form button {
    background: #fff;
    color: #1a1815;
}

/* Site search results (public /search — Views/frontend/search.php).
   Design ref: Act's ask, Telegram 2026-09-10 — reuses .blog-section-
   title/.blog-grid/.events-grid/blog-card/event-card as-is, no new
   card design. */

.search-results {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 16px 56px;
}

.search-section {
    margin-top: 40px;
}

.search-faq-hint {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #e5e2dd;
    font-size: 14px;
    color: #6a655e;
}