/* ==========================================================================
   blog.css
   Blog listing cards, the blog search box, the industry dropdown and the
   Table of Contents widget on posts.

   01. Blog Listing Card
   02. Search Box
   03. Industry Dropdown and Topic Menu
   04. Table of Contents Widget
   ========================================================================== */

/* ==== 01. Blog Listing Card ==== */

/* Typography and layout styling */
.elementor .blog-section .elementor-post-date,
.elementor .blog-section .elementor-post__title,
.elementor .blog-section .elementor-post__read-more {
    color: var(--content-primary);
    font-style: normal;
}

/* Post date and title type come from typography.css (o14 and h20) */

/* Title link styling */
.elementor .blog-section .elementor-post__title a {
    text-decoration: none !important;
}

/* Read more positioning */
.elementor .blog-section .elementor-post__read-more {
    text-decoration: underline;
    margin-top: auto;
    padding-top: 16px;
}

.elementor .blog-section .elementor-post__read-more a:hover {
    text-decoration: none !important;
}

/* Post item container layout */
.elementor .blog-section .elementor-post {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Post content layout and positioning */
.elementor .blog-section .elementor-post__text {
    position: relative;
    padding-top: 1.5em;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Date positioning */
.blog-section .elementor-post__meta-data {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* Thumbnail spacing */
.elementor .blog-section .elementor-post__thumbnail__link {
    margin-bottom: 20px !important;
}

/* ==== 02. Search Box ==== */

/* Wrapper for input and icon */
.custom-search-form .search-wrapper {
    position: relative;
    width: 100%;
}

/* Tabler icon positioning */
.custom-search-form .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Search input */
.custom-search-form input[type="search"] {
    width: 100%;
    padding: 10px 12px 10px 40px; /* space for the icon */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

/* Input focus */
.custom-search-form input[type="search"]:focus {
    border-color: var(--color-brand-60);
    outline: none;
}

/* ==== 03. Industry Dropdown and Topic Menu ==== */

/* Container */
.industry-dropdown {
    position: relative;
    display: inline-block;
    font-family: inherit;
}

/* Toggle button (merged) */
.industry-dropdown .dropdown-toggle {
    background-color: var(--color-black-a100);
    color: var(--color-white-a100);
    padding: 12px 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Arrow */
.industry-dropdown .dropdown-toggle .arrow {
    font-size: 12px;
}

/* Keep the button dark with white text on hover */
.industry-dropdown .dropdown-toggle:hover,
.industry-dropdown .dropdown-toggle:focus,
.industry-dropdown:hover .dropdown-toggle {
    background-color: var(--color-black-a100) !important;
    color: var(--color-white-a100);
}

/* Dropdown menu */
.industry-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: var(--color-gray-10); /* light gray background */
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 999;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Show menu on hover */
.industry-dropdown:hover .dropdown-menu {
    display: block;
}

/* Menu links */
.industry-dropdown .dropdown-menu li a {
    display: block;
    padding: 10px 16px;
    color: var(--color-black-a100);
    text-decoration: none; /* no underline by default */
    transition: all 0.2s ease;
}

/* Hover effect on items: underline + darker gray */
.industry-dropdown .dropdown-menu li a:hover {
    background-color: var(--color-gray-20); /* slightly darker gray */
    text-decoration: underline;
}

/* Style the category tags */
.topic-menu .elementor-item-active {
    color: var(--content-primary) !important;
}

/* ==== 04. Table of Contents Widget ==== */
.elementor-toc__header {
    padding-bottom: 0 !important;
}
.elementor-toc__body {
    padding-top: 0 !important;
}

.elementor-toc__header-title {
    color: var(--content-primary);
    font-size: 16px;
    font-weight: var(--weight-regular);
    line-height: var(--lh-medium);
    padding-bottom: 0px !important;
}

/* Style the entire TOC row (bullet + text) */
.elementor-widget-table-of-contents .elementor-toc__list-item-text-wrapper {
    display: flex;
    align-items: flex-start; /* Align items to top */
    gap: 0.5em;
    padding: 12px 0 8px 8px;
    border-top: 1px solid var(--color-line-primary);
    width: 100%;
    box-sizing: border-box;
}

/* Make the bullets uniform size and color */
.elementor-widget-table-of-contents .elementor-toc__list-wrapper svg.e-font-icon-svg {
    width: 8px;
    height: 8px;
    fill: var(--color-brand-60);
    flex-shrink: 0;
    margin-top: 3px; /* aligns the bullet with the first line of text */
}

/* Style the link inside the item */
.elementor-widget-table-of-contents .elementor-toc__list-item-text {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--content-primary);
    line-height: var(--lh-tight);
    text-decoration: none;
    flex-grow: 1;
    font-weight: var(--font-weight-500);
    font-family: var(--typography-font-primary);
}

/* Override active item color in TOC */
.elementor-widget-table-of-contents .elementor-toc__list-item-text.elementor-item-active {
    color: var(--content-primary) !important;
}