/*
 * fis2026 template — กองคลัง สำนักงานอธิการบดี มหาวิทยาลัยรามคำแหง
 * Ported from templates/2026/template2026.html mockup.
 * Source: ../less/template.less (no build step in this deployment —
 * edit the .less file too and keep this compiled file in sync by hand).
 */

:root {
    --primary: #0f2b48;     /* น้ำเงินเข้ม สถาบัน */
    --accent: #f39c12;      /* เหลืองทอง รามคำแหง */
    --bg-light: #f8fafc;
    --text-dark: #1e293b;
    --text-muted: #64748b;
    --white: #ffffff;
    --border: #e2e8f0;
    --font-scale: 1;
}

/*
 * Dark Mode — enabled via the "Dark Mode" template param (Template Settings,
 * Advanced tab), which adds body.theme-dark. This is a fixed admin setting,
 * not tied to the visitor's OS/browser preference, and not toggleable by
 * visitors.
 *
 * --primary and --white each serve two roles in the light palette (brand
 * surface backgrounds like the header/nav/footer bars, AND text/foreground
 * colour on those same bars or on cards) that pull in opposite directions
 * once inverted for dark mode, so exact numbers here are a judgment call,
 * not a mechanical inversion. Check contrast in an actual browser once
 * previewed — this couldn't be visually verified while writing it.
 */
body.theme-dark {
    --primary: #5b9bd5;
    --accent: #f5b942;
    --bg-light: #0b1420;
    --text-dark: #e2e8f0;
    --text-muted: #94a3b8;
    --white: #16212f;
    --border: #2a3b4d;
}

/* A few rules use hardcoded hex instead of the variables above (mostly
   footer text sized for contrast against the original navy --primary) —
   --primary is lighter in dark mode, so these need their own override to
   keep reading clearly against the (now lighter) footer background. */
body.theme-dark .footer-col p,
body.theme-dark .footer-col li {
    color: #0b1420;
}

body.theme-dark .copyright {
    color: #16212f;
}

body.theme-dark .news-date {
    background: var(--border);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Sarabun', sans-serif;
}

html {
    font-size: calc(16px * var(--font-scale));
}

body {
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
}

/*
 * Global link fallback — Joomla core renders plain, unstyled <a> tags all
 * over the place we haven't individually touched (pagebreak "ก่อนหน้า/ต่อไป"
 * navigation, print/email links, contact webpage links, etc.), which
 * default to the browser's own blue-and-underlined link style. This one
 * rule fixes all of them at once, since every other place in this
 * stylesheet that needs a different link colour (white nav text, footer
 * links, etc.) already does so with a class-based selector that's more
 * specific than a plain `a` and so still wins over this.
 *
 * Deliberately does NOT touch :visited — browsers' own default (usually
 * purple) is left as-is.
 */
a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* 1. Top Quick Access Bar */
.top-bar {
    background-color: var(--primary);
    color: var(--white);
    padding: 8px 5%;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--accent);
    flex-wrap: wrap;
    gap: 8px;
}

.top-bar .top-bar-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.top-bar .top-bar-left a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.top-bar .top-bar-left a:hover {
    text-decoration: underline;
    color: var(--accent);
}

.user-gate {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* If topbar-quicklinks gets a Menu module, its own <ul> must be a flex row
   too — otherwise that <ul> is a single flex item in .user-gate and its
   <li>s stack vertically instead of sitting inline (same issue as mainnav). */
.user-gate > ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.user-gate a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--white);
    text-decoration: none;
    margin-left: 15px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    transition: 0.2s;
}

.user-gate a:hover {
    background: var(--accent);
    color: var(--primary);
}

/* Font-size accessibility widget */
.font-size-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 15px;
}

.font-size-toggle button {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.85rem;
    cursor: pointer;
    line-height: 1.4;
    transition: 0.2s;
}

.font-size-toggle button:hover,
.font-size-toggle button.active {
    background: var(--accent);
    color: var(--primary);
    border-color: var(--accent);
}

/* 2. Header & Search */
header.site-header {
    background: var(--white);
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    flex-wrap: wrap;
    gap: 12px;
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo-group img.site-logo {
    max-height: 50px;
    width: auto;
}

.logo-placeholder {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

/* Solid accent disc with a soft rotating light sweep for a cleaner, more
   modern "glossy badge" look (previous conic-gradient + heavy inset shadows
   read as dull/murky rather than shiny). The text itself
   (.logo-placeholder span) sits in its own stacking layer on top so it
   stays upright while this pseudo-element rotates. */
.logo-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 35%),
        var(--accent);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.logo-placeholder span {
    position: relative;
    z-index: 1;
    color: var(--primary);
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes fis2026LogoSpin {
        to {
            transform: rotate(360deg);
        }
    }

    .logo-placeholder::before {
        animation: fis2026LogoSpin 6s linear infinite;
    }
}

.site-title h1 {
    font-size: 1.2rem;
    color: var(--primary);
    font-weight: 700;
}

.site-title p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.search-box {
    position: relative;
}

.search-box input {
    padding: 8px 15px 8px 35px;
    border: 1px solid var(--border);
    border-radius: 20px;
    outline: none;
    width: 220px;
    font-size: 0.9rem;
}

.search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

/* 3. Main Navigation Bar */
nav.main-nav {
    background: var(--primary);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.4rem;
    padding: 10px 5%;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

/* .nav-links wraps the mainnav module, which renders its own <ul> —
   style that inner <ul> directly rather than .nav-links itself, otherwise
   flex only affects the single <ul> child, not the <li>s inside it. */
.nav-links > ul {
    display: flex;
    list-style: none;
    padding: 0 5%;
    overflow-x: auto;
}

.nav-links li a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--white);
    text-decoration: none;
    padding: 12px 18px;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: 0.2s;
}

.nav-links li a:hover, .nav-links li a.active {
    background: rgba(255, 255, 255, 0.15);
    border-bottom: 3px solid var(--accent);
}

/* Container Layout */
.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 15px;
}

/* 4. Banner Section */
.hero-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0f2b48 0%, #1e4f80 100%);
    color: var(--white);
    padding: 40px 30px;
    border-radius: 12px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Decorative finance icons scattered behind the hero text. Absolutely
   positioned within .hero-banner's own bounds (position:relative +
   overflow:hidden above), so they can drift/animate without ever spilling
   outside the banner box. aria-hidden + pointer-events:none since they're
   purely decorative. */
.hero-icons {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-icon {
    position: absolute;
    color: rgba(255, 255, 255, 0.16);
}

.hero-icon-1 { top: 12%;  left: 8%;   font-size: 2.4rem; }
.hero-icon-2 { top: 65%;  left: 18%;  font-size: 1.8rem; }
.hero-icon-3 { top: 20%;  left: 42%;  font-size: 2rem;   }
.hero-icon-4 { top: 70%;  left: 55%;  font-size: 2.6rem; }
.hero-icon-5 { top: 15%;  left: 72%;  font-size: 2.2rem; }
.hero-icon-6 { top: 60%;  left: 85%;  font-size: 1.9rem; }
.hero-icon-7 { top: 30%;  left: 92%;  font-size: 1.6rem; }

.hero-text {
    position: relative;
    z-index: 1;
}

.hero-text h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--accent);
}

/* 5. Quick Links Grid */
.section-title {
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--accent);
    display: inline-block;
}

.quick-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.service-card {
    background: var(--white);
    padding: 20px 15px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: var(--text-dark);
    border: 1px solid var(--border);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border-color: var(--accent);
}

.service-card i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 10px;
    transition: transform 0.25s ease, color 0.25s ease;
}

.service-card img {
    max-height: 32px;
    width: auto;
    margin-bottom: 10px;
    transition: transform 0.25s ease;
}

/* On hover the bi-icon both scales up and switches to the accent colour;
   an uploaded Menu Image only scales — <img> doesn't respond to `color`. */
.service-card:hover i {
    transform: scale(1.25);
    color: var(--accent);
}

.service-card:hover img {
    transform: scale(1.15);
}

.service-card span {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}

/* 6. Content Section (News & Announcements) */
.main-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.news-tabs-container {
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 20px;
}

.news-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed var(--border);
    gap: 10px;
}

.news-item:last-child {
    border-bottom: none;
}

.news-item a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.95rem;
    transition: 0.2s;
}

.news-item a:hover {
    color: var(--accent);
}

.news-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: #e2e8f0;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
}

.side-widget {
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 20px;
    margin-bottom: 20px;
}

/* Interior content pages: real component content (left) + sidebar-menu (right) */
.content-with-sidebar {
    display: grid;
    /* minmax(0, Nfr), not bare Nfr — a grid track's default min size is
       "auto" (its content's min-content size), so wide unbreakable content
       in .main-content (long URLs, a table, a big image) would otherwise
       force that track past its 3fr share and squeeze the sidebar column
       down. minmax(0, ...) caps the minimum at 0 so the fr ratio holds and
       oversized content overflows/wraps inside its own column instead. */
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.content-with-sidebar.no-sidebar {
    grid-template-columns: minmax(0, 1fr);
}

.content-with-sidebar .main-content,
.content-with-sidebar .sidebar-menu-column {
    min-width: 0;
}

.content-with-sidebar .main-content {
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 20px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.side-widget ul {
    list-style: none;
}

.side-widget li {
    margin-bottom: 6px;
}

.side-widget a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.95rem;
}

.side-widget a:hover {
    color: var(--accent);
}

/* 7. Footer */
footer.site-footer {
    background: var(--primary);
    color: var(--white);
    padding: 40px 5% 20px;
    margin-top: 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.footer-col h4 {
    color: var(--accent);
    margin-bottom: 15px;
}

.footer-col p, .footer-col li {
    font-size: 0.88rem;
    color: #cbd5e1;
    margin-bottom: 8px;
    list-style: none;
}

.copyright {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Responsive Design */
@media (max-width: 768px) {
    header.site-header, .top-bar {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .main-content-grid,
    .content-with-sidebar {
        grid-template-columns: 1fr;
    }

    .nav-toggle {
        display: block;
    }

    .nav-links {
        display: none;
    }

    .nav-links > ul {
        flex-direction: column;
        overflow-x: visible;
        padding: 0;
    }

    nav.main-nav.nav-open .nav-links {
        display: block;
    }

    .nav-links li a {
        padding: 12px 5%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/*
 * mod_login (Login module) — restyle Joomla core's own markup/classes.
 * Intentionally not a custom layout: the default template carries the CSRF
 * token, 2FA field and remember-me wiring, which shouldn't be hand-rewritten.
 */
#login-form .pretext,
#login-form .posttext {
    margin-bottom: 10px;
}

#login-form .control-group {
    margin-bottom: 10px;
}

#login-form label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

#login-form .control-group.checkbox label {
    display: inline;
    margin-left: 6px;
}

#login-form input[type="text"],
#login-form input[type="password"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
}

#login-form .icon-user,
#login-form .icon-lock,
#login-form .icon-star,
#login-form .icon-help,
#login-form .icon-arrow-right {
    display: none;
}

#login-form .btn.btn-primary {
    width: 100%;
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    background: var(--primary);
    color: var(--white);
    font-weight: 600;
    cursor: pointer;
}

#login-form .btn.btn-primary:hover {
    background: var(--accent);
    color: var(--primary);
}

#login-form ul.unstyled {
    list-style: none;
    margin-top: 10px;
}

#login-form ul.unstyled li {
    margin-bottom: 4px;
}

#login-form ul.unstyled a {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.85rem;
}

#login-form ul.unstyled a:hover {
    color: var(--accent);
}

#login-form .login-greeting {
    font-size: 0.95rem;
    margin-bottom: 10px;
}

#login-form .logout-button {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*
 * mod_languages (Language Switcher) — restyle Joomla core's own markup.
 * Assumes the module's simple list mode (not "Display as dropdown list",
 * which relies on Bootstrap JS this template doesn't load).
 */
.mod-languages ul.lang-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mod-languages ul.lang-block li {
    margin-bottom: 6px;
}

.mod-languages li {
    margin: 0;
}

.mod-languages a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    color: var(--text-dark);
    font-size: 0.85rem;
}

.mod-languages a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.mod-languages li.lang-active a {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.mod-languages img {
    border: none;
    border-radius: 2px;
}

.mod-languages .label {
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* mod_breadcrumbs — restyle Joomla core's own markup. */
.breadcrumbs-bar {
    margin: 15px 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.breadcrumbs-bar ul.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    gap: 6px;
}

.breadcrumbs-bar li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.breadcrumbs-bar a.pathway {
    color: var(--primary);
    text-decoration: none;
}

.breadcrumbs-bar a.pathway:hover {
    color: var(--accent);
}

.breadcrumbs-bar li.active span {
    color: var(--text-dark);
    font-weight: 600;
}

.breadcrumbs-bar .divider {
    color: var(--text-muted);
}

/*
 * com_content — restyle Joomla core's own markup/classes for the article
 * list (Category Blog / Category List) and single Article views. Not custom
 * layouts: pagination, associations, print/email/edit tools, and article
 * navigation all stay wired through Joomla's own templates.
 */

/* Shared: page/category/article headings */
.blog > .page-header,
.item-page > .page-header {
    margin-bottom: 15px;
}

.blog > .page-header h1,
.item-page > .page-header h1 {
    font-size: 1.6rem;
    color: var(--primary);
}

.item .page-header h2,
.item-page .page-header h2,
.item-title {
    font-size: 1.3rem;
    margin: 0 0 8px;
}

.item .page-header h2 a,
.item-page .page-header h2 a,
.item-title a {
    color: var(--primary);
    text-decoration: none;
}

.item .page-header h2 a:hover,
.item-page .page-header h2 a:hover,
.item-title a:hover {
    color: var(--accent);
}

.page-header .label-warning {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--accent);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
}

.category-desc {
    margin-bottom: 20px;
    color: var(--text-muted);
}

/* Category Blog: grid of article cards */
.items-leading,
.items-row.row-fluid {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

.items-row.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.items-row.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.items-row.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.items-row [class^="span"] {
    width: auto;
}

.items-leading .item,
.items-row .item {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    height: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

.items-leading .item:hover,
.items-row .item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-color: var(--accent);
}

.items-leading .item p.readmore,
.items-row .item p.readmore {
    margin-top: auto;
    padding-top: 10px;
}

.item-image img,
.full-image img {
    max-width: 100%;
    border-radius: 6px;
    margin-bottom: 10px;
}

/* Article meta info block (date/author/category/hits) */
.article-info {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 10px 0;
    padding: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.article-info-term {
    display: none;
}

.article-info dd {
    margin: 0;
}

.article-info [class^="icon-"] {
    display: none;
}

.article-info a {
    color: var(--text-muted);
    text-decoration: underline;
}

.article-info a:hover {
    color: var(--accent);
}

/* Tags */
ul.tags.inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 10px 0;
}

ul.tags.inline a {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    color: var(--text-dark);
    font-size: 0.75rem;
    text-decoration: none;
}

ul.tags.inline a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Read more button — make the call-to-action obvious: a solid pill button
   with a direction icon (previously hidden entirely), bumped up slightly
   in size/weight from a plain text link. */
p.readmore a.btn {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 8px 16px;
    border-radius: 20px;
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

p.readmore a.btn:hover {
    background: var(--accent);
    color: var(--primary);
}

/* joomla.content.readmore always puts the chevron icon *before* the text
   (opposite of the pagebreak "next" link, which shares the same class
   name), so its margin needs to go the other way from the shared default. */
p.readmore [class^="icon-chevron"]::before {
    margin-right: 6px;
    margin-left: 0;
}

/* Print/email/edit tools dropdown — no Bootstrap JS is loaded to open it,
   so render it as a plain static row instead of a hidden dropdown menu. */
.icons .dropdown-toggle {
    display: none;
}

.icons .dropdown-menu {
    position: static;
    display: flex;
    gap: 10px;
    list-style: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 0 10px;
}

/* Category List layout (table) */
table.category {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

table.category th {
    text-align: left;
    padding: 10px 12px;
    background: var(--bg-light);
    color: var(--primary);
    border-bottom: 2px solid var(--border);
}

table.category td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    overflow-wrap: break-word;
    word-break: break-word;
}

table.category tbody tr:hover {
    background: var(--bg-light);
}

table.category a {
    color: var(--primary);
    text-decoration: none;
}

table.category a:hover {
    color: var(--accent);
}

table.category .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--border);
    color: var(--text-dark);
    font-size: 0.75rem;
}

/* Pagination */
.pagination {
    margin: 15px 0;
}

.pagination .counter {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.pagination-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
}

.pagination-list a,
.pagination-list li.disabled a,
.pagination-list li.active a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    color: var(--primary);
    text-decoration: none;
    font-size: 0.85rem;
}

.pagination-list a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pagination-list li.active a {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.pagination-list li.disabled a {
    color: var(--border);
    cursor: default;
}

/* Responsive: collapse the blog grid to one column on small screens */
@media (max-width: 768px) {
    .items-row.cols-2,
    .items-row.cols-3,
    .items-row.cols-4 {
        grid-template-columns: 1fr;
    }
}

/*
 * Heading + meta-info icons (Bootstrap Icons via ::before, same technique
 * fis3d uses) — the article-info dd's don't all have their own icon markup
 * in Joomla core (author/category have none at all), so icons are added
 * here rather than by un-hiding the legacy icon-calendar/icon-eye-open
 * spans, which stay hidden since they have no matching font loaded.
 */
.blog > .page-header h1::before,
.item-page > .page-header h1::before,
.item .page-header h2::before,
.item-page .page-header h2::before,
.item-title::before,
.article-info dd::before {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    line-height: 1;
    vertical-align: -.125em;
}

.blog > .page-header h1::before,
.item-page > .page-header h1::before {
    content: '\f444'; /* journal-text */
    margin-right: 10px;
    color: var(--accent);
}

.item .page-header h2::before,
.item-page .page-header h2::before,
.item-title::before {
    content: '\f38b'; /* file-earmark-text */
    margin-right: 8px;
    color: var(--accent);
}

.article-info dd.create::before,
.article-info dd.modified::before,
.article-info dd.published::before {
    content: '\f1e8'; /* calendar-event */
    margin-right: 4px;
}

.article-info dd.createdby::before {
    content: '\f4da'; /* person-fill */
    margin-right: 4px;
}

.article-info dd.category-name::before {
    content: '\f5af'; /* tag-fill */
    margin-right: 4px;
}

.article-info dd.parent-category-name::before {
    content: '\f2ed'; /* diagram-3-fill */
    margin-right: 4px;
}

.article-info dd.hits::before {
    content: '\f33e'; /* eye-fill */
    margin-right: 4px;
}

/*
 * Load-time animation: header logo (fade + scale in once) and hero banner
 * text (fade + slide up, staggered heading then paragraph). Scoped inside
 * prefers-reduced-motion: no-preference so motion-sensitive visitors just
 * see the final state immediately, no animation at all.
 */
@media (prefers-reduced-motion: no-preference) {
    @keyframes fis2026LogoIn {
        from {
            opacity: 0;
            transform: scale(0.85);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes fis2026FadeInUp {
        from {
            opacity: 0;
            transform: translateY(15px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    .logo-group {
        animation: fis2026LogoIn 0.6s ease both;
    }

    .hero-text h2 {
        animation: fis2026FadeInUp 0.6s ease both;
    }

    .hero-text p {
        animation: fis2026FadeInUp 0.6s ease both 0.15s;
    }
}

/*
 * Hero banner decorative icons — gentle scattered drift, each icon on its
 * own duration/delay/direction so they don't move in visible unison. Purely
 * cosmetic, so this is the one animation on the page that just skips
 * entirely under reduced motion rather than resolving to a static state —
 * there's no "final frame" that means anything on its own.
 */
@media (prefers-reduced-motion: no-preference) {
    @keyframes fis2026IconFloat {
        0%, 100% {
            transform: translate(0, 0) rotate(0deg);
        }
        50% {
            transform: translate(var(--drift-x, 10px), var(--drift-y, -14px)) rotate(var(--drift-rot, 8deg));
        }
    }

    .hero-icon {
        animation: fis2026IconFloat var(--drift-duration, 8s) ease-in-out infinite;
        animation-delay: var(--drift-delay, 0s);
    }

    .hero-icon-1 { --drift-x: 14px;  --drift-y: -16px; --drift-rot: 10deg;  --drift-duration: 9s;  --drift-delay: 0s;    }
    .hero-icon-2 { --drift-x: -12px; --drift-y: 12px;  --drift-rot: -8deg;  --drift-duration: 7.5s; --drift-delay: 0.6s; }
    .hero-icon-3 { --drift-x: 10px;  --drift-y: 18px;  --drift-rot: 6deg;   --drift-duration: 10s;  --drift-delay: 1.2s; }
    .hero-icon-4 { --drift-x: -16px; --drift-y: -10px; --drift-rot: -10deg; --drift-duration: 8.5s; --drift-delay: 0.3s; }
    .hero-icon-5 { --drift-x: 12px;  --drift-y: 14px;  --drift-rot: 9deg;   --drift-duration: 6.5s; --drift-delay: 1.5s; }
    .hero-icon-6 { --drift-x: -10px; --drift-y: -14px; --drift-rot: -6deg;  --drift-duration: 9.5s; --drift-delay: 0.9s; }
    .hero-icon-7 { --drift-x: 8px;   --drift-y: 10px;  --drift-rot: 12deg;  --drift-duration: 7s;   --drift-delay: 0.2s; }
}

/*
 * sidebar-menu "Sidemenu" mod_menu layout — icon + label per item, icon
 * scales up on hover. See html/mod_menu/sidemenu.php.
 */
.sidemenu {
    list-style: none;
}

.sidemenu li {
    margin-bottom: 4px;
}

.sidemenu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.95rem;
}

.sidemenu li a:hover {
    color: var(--accent);
}

.sidemenu li.active > a {
    color: var(--primary);
    font-weight: 600;
}

.sidemenu-icon {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--accent);
    transition: transform 0.2s ease;
}

img.sidemenu-icon {
    object-fit: contain;
}

/* mainnav + topbar-quicklinks "Navicons" mod_menu layout — icon is optional
   per item (see html/mod_menu/navicons.php), sized to sit inline with the
   link text in both the horizontal nav bar and the top-bar quick links. */
.nav-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

img.nav-icon {
    object-fit: contain;
}

.sidemenu li a:hover .sidemenu-icon {
    transform: scale(1.35);
}

.sidemenu .nav-child {
    list-style: none;
    margin: 4px 0 8px 1.5rem;
}

/*
 * com_finder (Smart Search) — restyle Joomla core's own markup/classes.
 * The advanced-search toggle uses data-toggle="collapse" (Bootstrap JS this
 * template doesn't load), so js/template.js adds a small vanilla-JS handler
 * for it; the CSS below matches Bootstrap 2's .collapse/.collapse.in
 * open/closed convention so that handler has something to toggle.
 */
.finder > h1 {
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 15px;
}

#finder-search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}

#finder-search fieldset.word {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border: none;
    padding: 0;
    margin: 0;
}

#finder-search label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

#finder-search input.inputbox {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    min-width: 220px;
    font-size: 0.95rem;
}

#finder-search .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
}

#finder-search .btn.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

#finder-search .btn.btn-primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--primary);
}

#finder-search .icon-search::before {
    font-family: bootstrap-icons !important;
    content: '\f52a'; /* search */
    font-style: normal;
}

#finder-search .icon-list::before {
    font-family: bootstrap-icons !important;
    content: '\f3e1'; /* funnel */
    font-style: normal;
}

#finder-search .icon-white {
    color: inherit;
}

#advancedSearch.collapse {
    display: none;
}

#advancedSearch.collapse.in {
    display: block;
}

#search-query-explained {
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.filter-branch {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 10px 0;
}

.filter-branch .control-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.filter-branch select.inputbox {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    min-width: 160px;
}

#search-result-empty {
    padding: 20px;
    background: var(--bg-light);
    border-radius: 8px;
    text-align: center;
    color: var(--text-muted);
}

ul.search-results {
    list-style: none;
}

ul.search-results > li {
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
}

ul.search-results > li:last-child {
    border-bottom: none;
}

.result-title {
    margin: 0 0 4px;
    font-size: 1.05rem;
}

.result-title a {
    color: var(--primary);
    text-decoration: none;
}

.result-title a:hover {
    color: var(--accent);
}

.result-text {
    color: var(--text-dark);
    font-size: 0.9rem;
    margin: 0 0 4px;
}

.result-url {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.search-pagination {
    margin-top: 15px;
}

.search-pages-counter {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 8px;
}

/*
 * Universal Joomla core form markup — layouts/joomla/form/renderfield.php's
 * .control-group/.control-label/.controls wrapper, and the .well/.well-large
 * box class, are shared by essentially every core component form: com_contact
 * (contact form), com_users (login, registration, password reset/remind,
 * profile edit), com_content (article submission), and more. Styling these
 * generically covers all of them in one place rather than one component at
 * a time — same reasoning as the .control-group rule below.
 *
 * NOTE: com_contact's "Sliders" / "Tabs" presentation style (Options tab)
 * needs Bootstrap's JS accordion/tab behaviour, which this template doesn't
 * load — those sections won't expand/switch correctly. Use "Plain" instead
 * for reliable rendering here; that's what's styled below.
 */
.well {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
}

.well-large {
    padding: 25px;
}

form fieldset {
    border: none;
    padding: 0;
    margin: 0 0 15px;
}

form legend {
    font-size: 1.1rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    width: 100%;
}

.control-group {
    margin-bottom: 12px;
}

.control-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.controls input[type="text"],
.controls input[type="email"],
.controls input[type="password"],
.controls input[type="tel"],
.controls input[type="number"],
.controls input[type="url"],
.controls textarea,
.controls select {
    width: 100%;
    max-width: 420px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
}

.controls textarea {
    max-width: 100%;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
}

.btn.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.btn.btn-primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--primary);
}

dl.dl-horizontal dt {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 8px;
}

dl.dl-horizontal dd {
    margin: 0 0 4px;
}

/* com_contact specifics */
.contact-name {
    color: var(--primary);
}

.thumbnail img {
    max-width: 200px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.contact-form,
.registration,
.com-users {
    margin-top: 10px;
}

/*
 * Joomla core accessibility/utility classes — .element-invisible and .hide
 * are used throughout core views and modules (e.g. mod_search's field label,
 * com_content's table captions) to visually hide content while keeping it
 * available to screen readers (.element-invisible) or fully removing it
 * (.hide). Core only defines these in media/jui/css/bootstrap*.css, which
 * this template never loads, so without this they render as plain visible
 * text/elements instead of being hidden as core intends.
 */
.element-invisible {
    position: absolute;
    padding: 0;
    margin: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.element-invisible:focus {
    width: auto;
    height: auto;
    overflow: auto;
    background: var(--bg-light);
    color: var(--text-dark);
    padding: 1em;
}

.hide {
    display: none;
}

/*
 * A few more Joomla core icon-font glyphs (empty <span class="icon-*">,
 * same missing-font issue as elsewhere) — these carry real meaning (print,
 * email, prev/next direction) so get a real icon via ::before instead of
 * just being hidden.
 */
.icon-print::before,
.icon-envelope::before,
.icon-chevron-left::before,
.icon-chevron-right::before {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    line-height: 1;
    vertical-align: -.125em;
    margin-right: 4px;
}

.icon-print::before {
    content: '\f500'; /* printer-fill */
}

.icon-envelope::before {
    content: '\f32c'; /* envelope-fill */
}

.icon-chevron-left::before {
    /* precedes "ก่อนหน้า" in plugins/content/pagebreak/tmpl/navigation.php */
    content: '\f284'; /* chevron-left */
}

.icon-chevron-right::before {
    /* follows "ต่อไป" in plugins/content/pagebreak/tmpl/navigation.php */
    content: '\f285'; /* chevron-right */
    margin-right: 0;
    margin-left: 4px;
}

/* plugins/content/pagebreak — multi-page article "ก่อนหน้า/ต่อไป" nav */
.pager {
    margin: 20px 0;
}

.pager ul {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    gap: 20px;
}

.pager li {
    list-style: none;
}

.pager a {
    font-weight: 600;
}