/* ============================================================
   kotlis-fixes.css  v2.0  — DARK MODE ONLY
   
   The theme is dark-only. These rules impose the dark chrome
   (header, body, counter strip, sidebar, content areas) using
   the exact palette from the original dark template:
     #2A2A2E  body / page background  (.dark-bg in template)
     #272729  details panel / fixed content bars
     #292929  buttons, scroll-nav, counter element, sidebar social
     #212121  arrow button
     #000     left slide-counter strip (black, distinct from grey)
   ============================================================ */

/* ----------------------------------------------------------
   1. WP ADMIN BAR offset
   ---------------------------------------------------------- */
.admin-bar .main-header        { top: 32px !important; }
.admin-bar #wrapper            { padding-top: 122px !important; }
@media screen and (max-width: 600px) {
    .admin-bar .main-header    { top: 0 !important; }
    .admin-bar #wrapper        { padding-top: 90px !important; }
}

/* ----------------------------------------------------------
   2. GLOBAL DARK CHROME
   ---------------------------------------------------------- */

/* 2a. Base page colour */
html, body                     { background: #2A2A2E !important; color: #fff; }
.loader-wrap                   { background: #2A2A2E !important; }
#main                          { background: #2A2A2E; }

/* 2b. Fixed header */
.main-header                   { background: #2A2A2E !important; }

/* 2c. Navigation — white text */
.nav-holder nav li a           { color: #fff !important; }
.nav-holder nav li a.act-link,
.nav-holder nav li a:hover     { color: rgba(255,255,255,0.55) !important; }
.nav-holder nav li ul          { background: #212121 !important; }
.nav-holder nav li ul li a     { color: #ccc !important; }
.nav-button span               { background: #fff !important; }
.share-btn, .share-btn span,
.share-btn i                   { color: #fff !important; }
/* sb-button 3-dot trigger: original CSS uses background:#000 (visible on white header).
   On our dark header we need #fff — target the ::before pseudo-element. */
.sb-button_point:before        { background: #fff !important; }
.sb-button .sb-button_point    { background: transparent !important; }

/* 2d. Search — always dark background, white text, no submit button */
.search-button, .search-button i { color: #fff !important; }
.search-input                  { background: #2A2A2E !important; }
.search-input:before           { color: #fff !important; }
.search-input input,
.search-input input:focus,
.search-input input:active     {
    background: #2A2A2E !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,0.25) !important;
    caret-color: #fff;
}
.search-input input::placeholder,
.search-input input::-webkit-input-placeholder,
.search-input input::-moz-placeholder,
.search-input input:-ms-input-placeholder {
    color: rgba(255,255,255,0.45) !important;
}

/* 2e. Left slide-counter strip
   Strip BG = GREY (#2A2A2E) — blends with the dark page.
   Number box inside = BLACK (#000) — distinct contrast element. */
.slider-counter_wrap           { background: #2A2A2E !important; }
.slider-counter_wrap .swiper-counter,
.slider-counter_wrap .fw-carousel-counter,
.slider-counter_wrap .count-folio { background: #000 !important; }

/* 2f. Off-canvas sidebar */
.hiiden-sidebar-wrap           { background: #2A2A2E !important; }
.sb-widget-wrap                { border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
.sb-widget-wrap h3             { color: #fff !important; }
.sb-widget p                   { color: rgba(255,255,255,0.6) !important; }
.enteremail                    {
    background: #212121 !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}
.enteremail::placeholder       { color: rgba(255,255,255,0.4) !important; }
.subscribe-button              {
    background: #292929 !important;
    color: #fff !important;
}
.sidebar-social li a           { background: #292929 !important; color: #fff !important; }
.sb-overlay                    { background: rgba(0,0,0,0.6) !important; }

/* ----------------------------------------------------------
   3. SLIDER-DETAILS PAGE (index2 / front page)
   hero-slider_details_wrap is already #272729 in the CSS.
   hero-slider_control-wrap uses the .dark-gradient class —
   already has the correct gradient in the CSS.
   We only add what is missing.
   ---------------------------------------------------------- */

/* Slide title and description text */
.fs-slider_align_title h2,
.fs-slider_align_title h2 a    { color: #fff !important; }
.fs-slider_align_title p       { color: rgba(255,255,255,0.8) !important; }
.fs-slider_align_title a.btn   { background: #292929 !important; color: #fff !important; }

/* Details panel text */
.hero-slider_details li        { color: #fff; }
.hero-slider_details li span   { color: rgba(255,255,255,0.55); }

/* Pagination numbers — ABOVE the details box */
.hlaf-slider-pag               { bottom: 230px !important; z-index: 130 !important; }

/* Arrow link — always visible */
.hero-slider_details_url       {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

/* dark-gradient: restore original gradient (never override with solid) */
.dark-gradient, .thumb-info {
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%) !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%) !important;
}

/* Counter elements */
.scroll-down-wrap span         { color: #fff; }
.mousey                        { border-color: rgba(255,255,255,0.6); }
.scroller                      { background: rgba(255,255,255,0.6); }

/* ----------------------------------------------------------
   4. CAROUSEL HOME PAGE (front-page / index.html variant)
   ---------------------------------------------------------- */
.bottom-panel                  { background: #2A2A2E; }
.fw-carousel-counter span,
.fw-carousel-counter           { color: #fff; }
.half-scrollbar                { background: rgba(255,255,255,0.15); }

/* ----------------------------------------------------------
   5. COLUMN-IMAGE PAGES (About, Contacts, Blog, Portfolio singles)
   Column-image = left photo strip. Column-wrapper = content area.
   The original CSS has body=#fff; we override everything.
   ---------------------------------------------------------- */
.column-wrapper                { background: #2A2A2E !important; }
.column-wrapper_text           { color: rgba(255,255,255,0.85); }

/* All text elements in content columns */
.column-wrapper h1, .column-wrapper h2,
.column-wrapper h3, .column-wrapper h4 { color: #fff; }
.column-wrapper p              { color: rgba(255,255,255,0.8); }
.column-wrapper span           { color: rgba(255,255,255,0.7); }
.column-wrapper a:not(.btn):not(.to-top-btn) { color: rgba(255,255,255,0.8); }
.column-wrapper a:hover:not(.btn) { color: #fff; }
.column-wrapper li             { color: rgba(255,255,255,0.8); }
.column-wrapper label          { color: rgba(255,255,255,0.7); }

/* Section headings */
.section-title                 { border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
.section-title h3              { color: #fff !important; }
.section-title h4              { color: rgba(255,255,255,0.55) !important; }
.section-number                { color: rgba(255,255,255,0.12) !important; }

/* Scroll nav bar at bottom of column pages */
.scroll-nav-wrap,
.fixed-bottom-content          { background: #272729 !important; }
.scroll-nav li a               { color: rgba(255,255,255,0.7) !important; }
.scroll-nav li a.act-scrlink   { color: #fff !important; }

/* Fixed column decoration (top-right corner lines) */
.fixed-column-dec              { border-color: rgba(255,255,255,0.3) !important; }

/* Column image overlay — keep it */
.column-image .overlay         { background: rgba(0,0,0,0.5) !important; }

/* Column title text (over the image) */
.column-title h2               { color: #fff !important; }
.column-title h3               { color: rgba(255,255,255,0.8) !important; }

/* ----------------------------------------------------------
   6. ABOUT PAGE specific elements
   ---------------------------------------------------------- */
.serv-text h3, .serv-item h3   { color: #fff; }
.serv-text p                   { color: rgba(255,255,255,0.7); }
.serv-price                    { background: #292929 !important; color: rgba(255,255,255,0.7) !important; }
.serv-price span               { color: #fff !important; }

/* Skill bars */
.skillbar-bg                   { background: rgba(255,255,255,0.1) !important; }
.skill-bar-percent             { color: rgba(255,255,255,0.6) !important; }

/* Team section */
.team-box h4                   { color: #fff; }
.team-box p                    { color: rgba(255,255,255,0.6); }

/* Facts / inline-facts */
.inline-facts                  { border-color: rgba(255,255,255,0.1) !important; }
.milestone-counter, .facts-holder span,
.inline-facts h6               { color: #fff !important; }
.inline-facts p                { color: rgba(255,255,255,0.6) !important; }

/* sec-dec accent lines */
.sec-dec                       { background: rgba(255,255,255,0.2) !important; }

/* ----------------------------------------------------------
   7. CONTACTS PAGE
   ---------------------------------------------------------- */
.contact-details li span       { color: rgba(255,255,255,0.5); }
.contact-details li a,
.contact-details li            { color: rgba(255,255,255,0.85); }

/* Contact form inputs */
.custom-form input[type=text],
.custom-form input[type=email],
.custom-form textarea          {
    background: #212121 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}
.custom-form input::placeholder,
.custom-form textarea::placeholder,
.custom-form input::-webkit-input-placeholder,
.custom-form textarea::-webkit-input-placeholder { color: rgba(255,255,255,0.4) !important; }
.custom-form button, #submit   {
    background: #292929 !important;
    color: #fff !important;
}
.custom-form button:hover      { background: #3a3a3e !important; }

/* ----------------------------------------------------------
   8. BLOG & SINGLE POST
   ---------------------------------------------------------- */
.post, .fw-post, .single-post  { border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
.post h2, .post h2 a,
.fw-post h2, .fw-post h2 a     { color: #fff !important; }
.blog-text p, .blog-text       { color: rgba(255,255,255,0.8); }
.blog-title-opt li a           { color: rgba(255,255,255,0.55) !important; }
.blog-title-opt li a:hover     { color: #fff !important; }
.pr-tags span                  { color: rgba(255,255,255,0.5) !important; }
.pr-tags ul li a               {
    color: rgba(255,255,255,0.7) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}
.pr-tags ul li a:hover         { color: #fff !important; }
blockquote                     {
    border-left: 3px solid rgba(255,255,255,0.2) !important;
    color: rgba(255,255,255,0.65) !important;
}

/* ----------------------------------------------------------
   9. PORTFOLIO LISTING PAGES
   ---------------------------------------------------------- */
.thumb-info h3, .thumb-info h3 a { color: #fff !important; }
.thumb-info p                  { color: rgba(255,255,255,0.7) !important; }
.filter-title                  { color: rgba(255,255,255,0.6) !important; background: #292929 !important; }
.filter-title a                { color: rgba(255,255,255,0.8) !important; }
.count-folio, .count-folio div { color: #fff !important; }
.bottom-filter-wrap            { background: #272729 !important; }

/* ----------------------------------------------------------
   10. PORTFOLIO SINGLE PAGE
   ---------------------------------------------------------- */
.fix-pr-det                    { background: #272729 !important; }
.fix-pr-det h3, .fix-pr-det p,
.fix-pr-det span, .fix-pr-det a { color: rgba(255,255,255,0.85) !important; }
.fix-pr-det a:hover            { color: #fff !important; }

.caption-wrap ul li            { border-color: rgba(255,255,255,0.1) !important; }
.caption-wrap ul li span       { color: rgba(255,255,255,0.5) !important; }
.caption-wrap ul li a          { color: #fff !important; }

.content-nav-fixed             { background: #272729 !important; }
.content-nav-fixed li a        { color: rgba(255,255,255,0.7) !important; }
.content-nav-fixed li a:hover  { color: #fff !important; }
.content-nav-fixed li a span strong { color: #fff !important; }

/* single-carousel-control (portfolio carousel single) */
.single-carousel-control .fw-carousel-counter { background: #212121 !important; color: #fff !important; }
.single-carousel-control_list li { background: #292929 !important; color: #fff !important; }
.single-carousel-control_list.no-scb li { background: #292929 !important; }

/* pr-det sections */
.pr-det-container p, .pr-det-container span { color: rgba(255,255,255,0.8) !important; }
.pr-det-container h3           { color: #fff !important; }

/* ----------------------------------------------------------
   11. FOOTER
   ---------------------------------------------------------- */
.min-footer                    { background: #212121 !important; border-top: 1px solid rgba(255,255,255,0.08) !important; }
.footer-inner                  { border-top: 1px solid rgba(255,255,255,0.08) !important; }
.policy-box span               { color: rgba(255,255,255,0.5) !important; }
.to-top-btn, .to-top-btn i    { color: #fff !important; }
.to-top-btn:hover              { color: rgba(255,255,255,0.6) !important; }

/* ----------------------------------------------------------
   12. BUTTONS — dark background, white text
   ---------------------------------------------------------- */
.btn, .btn.fl-btn,
.btn.float-btn, .flat-btn      {
    background: #292929 !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.1) !important;
}
.btn:hover, .float-btn:hover   { background: #3a3a3e !important; }
.color-bg                      { background: #292929 !important; color: #fff !important; }

/* ----------------------------------------------------------
   13. HORIZONTAL PORTFOLIO CONTAINER
   ---------------------------------------------------------- */
#portfolio_horizontal_container { background: #2A2A2E; }

/* ----------------------------------------------------------
   14. LOGO
   Position is set here; height/width are controlled by the
   kotlis_dynamic_css() function so Kotlis Settings > Logo height
   applies immediately. Width is always auto — no cropping.
   ---------------------------------------------------------- */
.logo-holder {
    position: absolute !important;
    left: 80px !important;
    z-index: 11 !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
}
.logo-holder img {
    width: auto !important;
    display: block;
    object-fit: contain;
}
.custom-logo-link {
    position: absolute !important;
    left: 80px !important;
    z-index: 11 !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
}
.custom-logo-link img { width: auto !important; object-fit: contain; }

/* ----------------------------------------------------------
   15. data-bg lazy-load utility
   ---------------------------------------------------------- */
.bg {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ----------------------------------------------------------
   16. WP ENTRY-CONTENT wrapper — must not add padding
   ---------------------------------------------------------- */
.entry-content { margin: 0 !important; padding: 0 !important; }

/* ----------------------------------------------------------
   17. RESPONSIVE — WP-specific output fixes
   ---------------------------------------------------------- */
.single-content-section .container,
.single-content-section .small-container {
    width: 100%; box-sizing: border-box;
    padding-left: 16px; padding-right: 16px;
}
.blog-media.fl-wrap img, .blog-text img,
.single-post img, .pr-det-container img,
.respimg                       { max-width: 100%; height: auto; display: block; }
.wp-block-embed__wrapper,
.blog-text iframe, .single-post iframe { max-width: 100%; }
.comment-form input, .comment-form textarea { max-width: 100%; box-sizing: border-box; }
@media only screen and (max-width: 900px) {
    .gallery-items.three-column .gallery-item { width: 50%; }
}
@media only screen and (max-width: 600px) {
    .gallery-items.three-column .gallery-item,
    .gallery-items .gallery-item { width: 100%; }
}
@media only screen and (max-width: 768px) {
    .fw-post h2                { font-size: 22px; line-height: 1.3; }
    .caption-wrap ul li        { width: 50%; }
}
@media only screen and (max-width: 640px) {
    .services-item, .team-box, .skill-item { width: 100%; }
    .caption-wrap ul li        { width: 100%; margin-bottom: 8px; }
}
@media only screen and (max-width: 530px) {
    .footer-inner              { flex-direction: column; gap: 12px; }
    .hiiden-sidebar-wrap       { width: 100% !important; right: -100% !important; }
}

/* ----------------------------------------------------------
   18. ADDITIONAL DARK OVERRIDES — elements found in audit
   ---------------------------------------------------------- */

/* Home-main slideshow pages (index3, index4) */
.home-main_container               { background: #2A2A2E !important; }
.multi-slideshow-wrap_3            { background: #272729 !important; }

/* Testimonials */
.testi-item p                      { color: rgba(255,255,255,0.8) !important; }
.testi-item h4, .testi-item span   { color: #fff !important; }

/* Author box (blog single) */
.author-social a                   { background: #292929 !important; color: #fff !important; }
.author-content h5                 { color: #fff !important; }
.author-box                        { background: #272729 !important; border-color: rgba(255,255,255,0.08) !important; }

/* Thumbnail container (portfolio listing hover panel) */
.thumbnail-container               { background: rgba(42,42,46,0.92) !important; }
.thumbnail-container h3            { color: #fff !important; }
.thumbnail-container span          { color: rgba(255,255,255,0.6) !important; }

/* Swiper pagination bullets in slideshow variants */
.swiper-pagination-bullet          { background: rgba(255,255,255,0.4) !important; }
.swiper-pagination-bullet-active   { background: #fff !important; }

/* Gallery filter buttons (portfolio listing pages) */
.gallery-filter-active,
.gallery-filters a.gallery-filter-active { 
    color: #fff !important; 
    background: #292929 !important;
}
.gallery-filters a                 { color: rgba(255,255,255,0.6) !important; }
.gallery-filters a:hover           { color: #fff !important; }

/* Fixed bottom content white variant */
.fixed-bottom-content.fbc_white    { background: #272729 !important; }

/* content-nav (used in some portfolio pages differently from content-nav-fixed) */
.content-nav li a.ln,
.content-nav li a.rn               { color: rgba(255,255,255,0.8) !important; }

/* slide-progress bar */
.slide-progress                    { background: rgba(255,255,255,0.15) !important; }
.slide-progress span               { background: #fff !important; }

/* Tags in comment/post */
.tagcloud a                        { background: #292929 !important; color: rgba(255,255,255,0.8) !important; border-color: rgba(255,255,255,0.1) !important; }
.tagcloud a:hover                  { color: #fff !important; }

/* Comment form fields */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea             {
    background: #212121 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}
.comment-form input::placeholder,
.comment-form textarea::placeholder { color: rgba(255,255,255,0.4) !important; }
.comment-form label                { color: rgba(255,255,255,0.7) !important; }
.comment-notes, .required          { color: rgba(255,255,255,0.5) !important; }
.comment-list .comment-author .fn  { color: #fff !important; }
.comment-list .comment-meta a,
.comment-list .comment-metadata a  { color: rgba(255,255,255,0.5) !important; }
.comment-body p                    { color: rgba(255,255,255,0.8) !important; }
.comment-respond h3                { color: #fff !important; }

/* WP pagination (blog / archive) */
.page-numbers                      { color: rgba(255,255,255,0.7) !important; }
.page-numbers.current              { background: #292929 !important; color: #fff !important; }
.page-numbers:hover                { color: #fff !important; }

/* Mobile nav panel (slides in from right on mobile) */
.nav-holder                        { background: #2A2A2E; }
@media only screen and (max-width: 1064px) {
    .nav-holder.vismobmenu         { background: #2A2A2E !important; }
    .nav-holder nav li a           { border-bottom-color: rgba(255,255,255,0.08) !important; }
    .nav-holder nav li ul          { background: #212121 !important; }
    .nav-holder.main-menu .close-nav { color: #fff !important; }
}

/* Image overlay - ensure it works on dark pages too */
.hov_zoom .box-media-zoom         { color: #fff; }
.box-media-zoom i                  { color: #fff; }

/* WP Gallery block (if used in content) */
.wp-block-gallery figure figcaption { background: rgba(42,42,46,0.85) !important; color: #fff !important; }

/* ----------------------------------------------------------
   19. SEARCH RESULTS PAGE — missing footer
   ---------------------------------------------------------- */
.search-results .column-wrapper    { background: #2A2A2E !important; }
.search-results .post h2 a         { color: #fff !important; }

/* ----------------------------------------------------------
   20. RESPONSIVE ENHANCEMENTS
   ---------------------------------------------------------- */

/* Column-image left strip — never gets too narrow */
@media only screen and (max-width: 1064px) {
    .column-image                  { min-height: 300px; }
}

/* Home page sliders — ensure counter is visible on small screens */
@media only screen and (max-width: 768px) {
    .slider-counter_wrap           { width: 50px !important; }
    .swiper-counter, .fw-carousel-counter { font-size: 12px !important; }
}

/* Portfolio gallery responsive images */
.gallery-item img,
.grid-item-holder img              { max-width: 100%; height: auto; display: block; }

/* Horizontal portfolio scrolling container */
@media only screen and (max-width: 768px) {
    .hor-content                   { overflow-x: auto; }
}

/* Blog sidebar meta text */
@media only screen and (max-width: 640px) {
    .blog-title-opt                { flex-wrap: wrap; gap: 4px; }
    .blog-title-opt li             { font-size: 11px; }
}

/* ----------------------------------------------------------
   21. COURSE CATALOGUE ENHANCEMENTS
   ---------------------------------------------------------- */

/* Category label inside course card */
.nz-course-cat {
    display: inline-block;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kotlis-accent, #009696);
    margin-bottom: 5px;
}

/* Gallery item link icon for courses (arrow → instead of search zoom) */
.archive-course .box-media-zoom i,
.archive-course .box-media-zoom { color: #fff; }

/* Improve thumb-info layout for courses (more text) */
.vis-thumb-info .thumb-info {
    padding: 20px 16px !important;
}
.vis-thumb-info .thumb-info h3 {
    font-size: 16px !important;
    margin-bottom: 6px !important;
}
.vis-thumb-info .thumb-info p {
    font-size: 12px !important;
    line-height: 1.55 !important;
    max-height: 3.1em;
    overflow: hidden;
}

/* ----------------------------------------------------------
   22. SIDEBAR FORM ENHANCEMENTS
   ---------------------------------------------------------- */
.sb-widget-wrap .kotlis-form-tabs button { transition: background .2s, color .2s; }
.sb-widget-wrap .sidebar-form .btn       { margin-top: 4px; }

/* ----------------------------------------------------------
   23. SKILL BARS — animation on scroll into view
   ---------------------------------------------------------- */
.nz-skill-fill { width: 0; }

/* ----------------------------------------------------------
   24. CALENDAR PAGE
   ---------------------------------------------------------- */
@media only screen and (max-width: 640px) {
    .nz-filter-bar       { flex-direction: column; }
    .nz-filter-select    { width: 100%; }
    .nz-cal-image        { min-height: 180px; }
    .nz-cal-actions      { flex-direction: column; align-items: flex-start; padding: 16px; }
}

/* ----------------------------------------------------------
   25. TRAINER DIRECTORY
   ---------------------------------------------------------- */
.archive-trainer .thumb-info h3 { font-size: 15px !important; }
.archive-trainer .thumb-info p  { font-size: 12px !important; }

/* ----------------------------------------------------------
   26. COURSE DETAIL PAGE — panel open by default
   ---------------------------------------------------------- */

/* On single portfolio/course pages, the fix-pr-det panel is
   rendered without hid-det so it's visible by default.
   The JS adds style="right:0" via the inline script. */
.single-portfolio .fix-pr-det,
.single-course .fix-pr-det {
    right: 0 !important;
    transition: none !important;
}

/* Hide the det-overlay on course pages (no dark backdrop needed) */
.single-portfolio .det-overlay,
.single-course .det-overlay {
    display: none !important;
}

/* Event rows in the panel */
.nz-ev-row:last-child { border-bottom: none !important; }

/* Related course thumbnails */
.thumbnail-item {
    position: relative;
    overflow: hidden;
    display: block;
    cursor: pointer;
}
.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.thumbnail-item:hover img { transform: scale(1.05); }
.thumbnail-item-title {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.75));
    padding: 20px 12px 10px;
}
.thumbnail-item-title h3 {
    color: #fff !important;
    font-size: 12px !important;
    margin: 0 !important;
    line-height: 1.4;
}
.thumbnail-item-title h3 span {
    display: block;
    font-size: 10px;
    color: var(--kotlis-accent, #009696);
    margin-top: 2px;
}

/* Counter arrows for event pagination */
#nz-ev-prev, #nz-ev-next {
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s;
}
#nz-ev-prev:hover, #nz-ev-next:hover { opacity: 1; }

/* ----------------------------------------------------------
   COURSE SINGLE PAGE (portfolio-single component reuse)
   ---------------------------------------------------------- */

/* Panel open by default — vis-det sets right:0 via original CSS */
.single-portfolio .fix-pr-det { transition: none; }

/* No overlay on course detail page */
.single-portfolio .det-overlay { display: none !important; }

/* Course category label inside panel */
.nz-cat-label {
    font-size: 10px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--kotlis-accent, #009696);
    margin: -6px 0 10px;
}

/* Learning objectives list */
.nz-objectives-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 14px;
}
.nz-objectives-list li {
    padding: 3px 0 3px 14px;
    position: relative;
    font-size: 12px;
    color: rgba(255,255,255,.75);
    line-height: 1.5;
}
.nz-objectives-list li:before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--kotlis-accent, #009696);
}

/* Sessions section inside content-nav area */
#nz-sessions-wrap { border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px; margin-top: 16px; }
.nz-sessions-heading {
    font-size: 10px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    margin-bottom: 12px;
}
.nz-no-sessions { color: rgba(255,255,255,.4); font-size: 12px; }
.nz-no-sessions a { color: var(--kotlis-accent, #009696); }

/* Event rows */
.nz-ev-row {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.nz-ev-row:last-child { border-bottom: none; }
.nz-ev-date {
    font-size: 12px;
    font-weight: 700;
    color: var(--kotlis-accent, #009696);
    margin-bottom: 4px;
}
.nz-ev-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    color: rgba(255,255,255,.6);
}
.nz-ev-price { color: #fff; font-weight: 700; }

/* Pagination arrows inside panel */
.nz-ev-nav {
    list-style: none;
    padding: 10px 0 0;
    margin: 0;
    display: flex;
    gap: 12px;
}
.nz-ev-nav li a { color: rgba(255,255,255,.6); font-size: 18px; }
.nz-ev-nav li a:hover { color: #fff; }

/* Related course thumbnails strip */
.nz-thumb-course {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
}
.nz-thumb-course img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.nz-thumb-course:hover img { transform: scale(1.06); }
.nz-thumb-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.8));
    padding: 20px 10px 8px;
}
.nz-thumb-info h3 {
    color: #fff !important;
    font-size: 11px !important;
    margin: 0 !important;
    line-height: 1.35;
}
.nz-thumb-info h3 span {
    display: block;
    font-size: 10px;
    color: var(--kotlis-accent, #009696);
    margin-top: 2px;
}

/* Bottom bar label */
#nz-ev-label { color: rgba(255,255,255,.7); }
#nz-ev-prev, #nz-ev-next { cursor: pointer; transition: opacity .2s; }
#nz-ev-prev:hover, #nz-ev-next:hover { opacity: .7; }

/* =============================================================
   TYPOGRAPHY — body text size (best practice: 16px)
   ============================================================= */
body, p {
    font-size: 16px !important;
    line-height: 1.75 !important;
}
.column-wrapper p,
.column-wrapper_text p,
.pr-det-container p,
.blog-text p,
.serv-text p,
.single-post p,
.entry-content p {
    font-size: 16px !important;
    line-height: 1.75 !important;
}
/* Keep small utility text intentionally small */
.nz-cat-label,
.event-status-badge,
.nz-ev-date,
.nz-ev-meta span,
.nz-ev-meta strong,
.nz-sessions-heading,
.caption-wrap ul li span,
.section-number,
.filter-title,
.blog-title-opt li,
.thumb-info p,
.nz-book-btn {
    font-size: 12px !important;
    line-height: 1.5 !important;
}
.thumb-info h3 a { font-size: 15px !important; }
.caption-wrap ul li { font-size: 14px !important; }

/* =============================================================
   COURSE SINGLE (portfolio-single.html exact structure)
   ============================================================= */

/* Category label above title */
.nz-cat-label {
    display: block;
    font-size: 10px !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kotlis-accent, #009696);
    margin-bottom: 6px;
}

/* Objectives bullet list inside the panel */
.nz-obj-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 14px;
}
.nz-obj-list li {
    padding: 3px 0 3px 14px;
    position: relative;
    font-size: 13px !important;
    color: rgba(255,255,255,.78);
    line-height: 1.5;
}
.nz-obj-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--kotlis-accent, #009696);
}

/* Sessions section inside content-nav */
#nz-sessions-nav {
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 16px;
    margin-top: 4px;
}
.nz-sessions-heading {
    display: block;
    font-size: 10px !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
    margin-bottom: 10px;
}
.nz-no-sessions {
    font-size: 13px !important;
    color: rgba(255,255,255,.4);
}
.nz-no-sessions a { color: var(--kotlis-accent, #009696); }

/* Event rows */
.nz-ev-row {
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.nz-ev-row:last-child { border-bottom: none; }
.nz-ev-date {
    font-size: 12px !important;
    font-weight: 700;
    color: var(--kotlis-accent, #009696);
    margin-bottom: 4px;
    letter-spacing: .02em;
}
.nz-ev-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 11px !important;
    color: rgba(255,255,255,.55);
}
.nz-ev-meta strong {
    color: #fff;
    font-weight: 700;
    font-size: 12px !important;
}
.nz-ev-meta i { color: var(--kotlis-accent, #009696); margin-right: 3px; }

/* Book button */
.nz-book-btn {
    display: inline-block;
    padding: 3px 9px;
    background: var(--kotlis-accent, #009696);
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    line-height: 1.6;
}
.nz-book-btn:hover { opacity: .85; }

/* content-nav arrows + page indicator */
.content-nav ul { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
#nz-ev-indicator { font-size: 11px !important; color: rgba(255,255,255,.4); }

/* Bottom-bar event nav arrows */
#nz-ev-prev, #nz-ev-next { cursor: pointer; transition: opacity .2s; }

/* Related-courses thumbnail strip */
.nz-related-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
}
.nz-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.nz-related-thumb:hover img { transform: scale(1.06); }
.nz-related-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.82));
    padding: 22px 10px 8px;
}
.nz-related-info strong {
    display: block;
    color: #fff;
    font-size: 11px !important;
    line-height: 1.35;
    margin-bottom: 2px;
}
.nz-related-info span {
    display: block;
    font-size: 10px !important;
    color: var(--kotlis-accent, #009696);
}

/* =============================================================
   COURSE CATALOG (portfolio5 / Masonry 2 overrides)
   ============================================================= */
.archive-course .thumb-info p { font-size: 13px !important; line-height: 1.55 !important; }
.archive-course .thumb-info h3 a { font-size: 15px !important; }

/* =============================================================
   DARK FIX-PR-DET PANEL (dark theme colours)
   ============================================================= */
.fix-pr-det { background: #272729 !important; }
.fix-pr-det .pr-det-container { color: rgba(255,255,255,.85); }
.fix-pr-det h2 { color: #fff !important; font-size: 22px !important; }
.fix-pr-det p  { color: rgba(255,255,255,.82) !important; font-size: 15px !important; line-height: 1.7 !important; }
.fix-pr-det .caption-wrap ul li span  { color: rgba(255,255,255,.45) !important; font-size: 10px !important; letter-spacing:.07em; text-transform:uppercase; }
.fix-pr-det .caption-wrap ul li       { color: rgba(255,255,255,.88) !important; font-size: 14px !important; }
.fix-pr-det .act-closedet.closedet_style { color: rgba(255,255,255,.5); }
.fix-pr-det .act-closedet.closedet_style:hover { color: #fff; }