/*
 * SM-WebCMS additions on top of Porto (loaded after the Porto skin, before the
 * generated custom.{hash}.css). Only what Porto has no class for lives here.
 */

/* Accessibility: skip link */
.cms-skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: .75rem 1rem; background: var(--primary); color: var(--primary-inverse, #fff); }
.cms-skip-link:focus { left: 1rem; top: 1rem; }

/* Thai: tone marks above and vowels below need more room than Porto's Latin line heights */
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3,
html[lang="th"] h4, html[lang="th"] h5, html[lang="th"] h6,
html[lang="th"] .page-header h1 { line-height: 1.45; }
html[lang="th"] body { word-break: normal; line-break: auto; }

/* Logo as text when no image is set */
.cms-logo-text { display: inline-block; font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--dark); letter-spacing: -.5px; text-decoration: none; }
.cms-logo-text:hover { text-decoration: none; color: var(--primary); }
.header-transparent .cms-logo-text, .cms-logo-text.text-color-light { color: #fff; }
#header .header-logo img { max-width: none; object-fit: contain; }

/* Language switcher */
.cms-lang-switch .dropdown-menu { min-width: 0; }
.cms-lang-switch .cms-lang-code { text-transform: uppercase; font-weight: 600; }

/* Builder: section background video */
.cms-section-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }

/* Slider block (layer positions come from /sliders/{id}.css) */
.cms-slider .cms-slide { position: relative; overflow: hidden; }
.cms-slider .cms-slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cms-slider .cms-slide-overlay { position: absolute; inset: 0; z-index: 1; background: #000; opacity: .5; }
.cms-slider .cms-slide-link { position: absolute; inset: 0; z-index: 2; }
.cms-slider .cms-layer { position: absolute; z-index: 3; }
.cms-slider:not(.owl-loaded) > .cms-slide ~ .cms-slide { display: none; }

/* Forms rendered by the form block */
.cms-form-feedback:empty { display: none; }

/* Content body coming from the rich-text editor */
.cms-content img { max-width: 100%; height: auto; }
.cms-content table { width: 100%; margin-bottom: 1rem; }
.cms-content table td, .cms-content table th { border: 1px solid rgba(0, 0, 0, .1); padding: .5rem .75rem; }
.cms-content blockquote { border-left: 5px solid var(--primary); padding: .5rem 1.25rem; font-style: italic; }
.cms-content iframe { max-width: 100%; }

/* Posts without a featured image keep the Porto date badge aligned */
.post.post-large.cms-no-image .post-date { margin-top: 0; }

/* Pagination centred under listings */
.cms-pagination .pagination { justify-content: center; }

/* Comment replies */
.comment-block .cms-reply-to { font-size: .85em; }
.post-leave-comment .cms-replying { display: none; }
.post-leave-comment.is-replying .cms-replying { display: block; }

/* Preview ribbon for editors */
.cms-preview-bar { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 10001; padding: .5rem 1rem; border-radius: 999px; background: rgba(33, 37, 41, .92); color: #fff; font-size: 13px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.cms-preview-bar a { color: #fff; text-decoration: underline; }

/* Maintenance page */
.cms-maintenance { min-height: 100vh; display: flex; align-items: center; }

/* Light footer (Customizer > Footer > Dark footer off) */
#footer.cms-footer-light { background: #f7f7f7; border-top: 1px solid rgba(0, 0, 0, .06); }
#footer.cms-footer-light, #footer.cms-footer-light p, #footer.cms-footer-light a:not(.btn) { color: #5f5f5f; }
#footer.cms-footer-light h5, #footer.cms-footer-light .cms-logo-text { color: var(--dark); }
#footer.cms-footer-light a:not(.btn):hover { color: var(--primary); }
#footer.cms-footer-light .footer-copyright { background: #efefef; border-top: 0; }
#footer.cms-footer-light .footer-copyright p { color: #5f5f5f; }
.cms-avatar { width: 48px; height: 48px; font-size: 18px; }
/* Slider layers: text takes the layer colour (slider CSS) or light text on dark slides */
.cms-slider .cms-slide.section-text-light { color: #fff; }
.cms-slider .cms-layer h1, .cms-slider .cms-layer h2, .cms-slider .cms-layer h3, .cms-slider .cms-layer h4,
.cms-slider .cms-layer p, .cms-slider .cms-layer span, .cms-slider .cms-layer div { color: inherit; }
.cms-lang-switch .dropdown-item.active, .cms-lang-switch .dropdown-item:active { background-color: var(--primary); color: var(--primary-inverse, #fff); }

/* Accessibility (Phase 9, WCAG 2.1 AA contrast). Porto's grey body text (#777)
   is a hair under 4.5:1 on white and on Porto's #f4f4f4 boxes; #6e6e6e looks the same and passes on both. Light-grey
   helper text and the dark footer's grey text are lifted to readable values.
   Brand colours chosen in the customizer are left as they are. */
:root { --default: #6e6e6e; }
.post .post-meta, .post .post-meta a:not(:hover), .simple-post-list .post-meta { color: #6b6b6b; }
.comments .comment .comment-block .date { color: #626262 !important; }
.text-color-grey { color: #6b6b6b !important; }
#footer:not(.cms-footer-light) p, #footer:not(.cms-footer-light) .list-icons li { color: #a3a3a3; }
#footer:not(.cms-footer-light) .footer-copyright p { color: #9a9a9a; }
.page-header .breadcrumb > li.active { color: #a3a3a3; }
.page-header-modern.bg-color-grey .breadcrumb > li.active { color: #5f5f5f; }
.cms-skip-link { background: #212529; color: #fff; }
#footer:not(.cms-footer-light) a:not(.btn):not(:hover) { color: #b0b0b0; }
.simple-post-list li .post-info .post-meta, .post.post-medium .post-meta, .post .post-meta span { color: #6b6b6b !important; }
.comment-block .comment-by strong { color: #4f4f4f; }

/* ---------------------------------------------------------------------------
 * Design-kit blocks (button group, badge, feature, statistic, testimonial, logo
 * strip, chips; section bands and column cards): neutral structure that works
 * with any design. Each theme's design layer (cms-design.css + the theme's
 * design.css) gives them their look.
 * ------------------------------------------------------------------------- */
.sk-buttons-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sk-buttons-note { margin: 14px 0 0; font-size: .875rem; opacity: .8; }
.sk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.sk-btn-link { padding-left: 0; padding-right: 0; background: none; border-color: transparent; text-decoration: none; }
.sk-btn-outline { background: transparent; border: 1px solid currentColor; }
@media (max-width: 575.98px) { .sk-buttons-stack { flex-direction: column; align-items: stretch; } .sk-buttons-stack .sk-btn { width: 100%; } }
.sk-badge { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; }
.sk-badge-wrap { margin-bottom: 1rem; }
.sk-feature { margin-bottom: 1.5rem; }
.sk-feature-number, .sk-feature-tag { display: inline-block; margin-bottom: .75rem; }
.sk-feature-icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: .75rem; font-size: 1.5rem; }
.sk-feature-title { font-size: 1.125rem; margin: 0 0 .4rem; }
.sk-feature-text { margin: 0; }
.sk-feature-link { display: inline-block; margin-top: .75rem; font-weight: 600; }
.sk-feature-inline { display: flex; gap: 1rem; align-items: flex-start; }
.sk-feature-inline .sk-feature-icon { flex: none; margin: 0; }
.sk-feature-center { text-align: center; }
.sk-stat { margin-bottom: 1.5rem; }
.sk-stat-value { font-size: 3rem; line-height: 1.1; font-weight: 700; margin: 0; }
.sk-stat-label { margin: .35rem 0 0; }
.sk-stat-icon { display: block; font-size: 1.75rem; margin-bottom: .5rem; }
.sk-testimonial { margin: 0 0 1.5rem; }
.sk-testimonial-quote { margin: .75rem 0 1rem; padding: 0; border: 0; }
.sk-testimonial-quote p { margin: 0; }
.sk-testimonial-by { display: flex; align-items: center; gap: .75rem; }
.sk-testimonial-by strong { display: block; }
.sk-testimonial-role { display: block; font-size: .875rem; opacity: .75; }
.sk-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.sk-avatar-initials { display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .08); font-weight: 700; }
.sk-testimonial-centered { text-align: center; }
.sk-testimonial-centered .sk-testimonial-by { justify-content: center; }
.sk-testimonial-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 1rem; }
.sk-stars { color: #b7791f; letter-spacing: 2px; }
.sk-logos { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px 32px; align-items: center; grid-template-columns: repeat(2, 1fr); }
.sk-logos li { display: flex; justify-content: center; }
.sk-logos img { max-height: 40px; max-width: 100%; width: auto; object-fit: contain; }
@media (min-width: 768px) { .sk-logos-3 { grid-template-columns: repeat(3, 1fr); } .sk-logos-4 { grid-template-columns: repeat(4, 1fr); } .sk-logos-5, .sk-logos-6, .sk-logos-7, .sk-logos-8 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .sk-logos-5 { grid-template-columns: repeat(5, 1fr); } .sk-logos-6 { grid-template-columns: repeat(6, 1fr); } .sk-logos-7 { grid-template-columns: repeat(7, 1fr); } .sk-logos-8 { grid-template-columns: repeat(8, 1fr); } }
.sk-logos-muted img { filter: grayscale(1); opacity: .7; }
.sk-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sk-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border: 1px solid rgba(0, 0, 0, .15); border-radius: 999px; text-decoration: none; color: inherit; }
.sk-col-card { height: 100%; padding: 24px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; background: #fff; }
.sk-card-dark { background: #111; color: #ddd; }
.sk-mark { background: #fff3a8; color: inherit; padding: 0 .15em; }