/*
Theme Name: Kurna
Theme URI: https://example.com/kurna
Author: Themnific
Description: A high-performance, secure, ultra-lightweight directory theme for AI tools using instant client-side rendering.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kurna
*/

/* =============================================
   DESIGN TOKENS
   ============================================= */

:root {

    /* --- Typography --- */
    --font-family-base:           'DM Sans', sans-serif;
    --font-size-base:             1rem;          /* 16px */
    --font-size-sm:               0.875rem;      /* 14px */
    --font-size-xs:               0.8125rem;     /* 13px */
    --font-size-xxs:              0.85rem;       /* filter pills */
    --font-size-label:            0.675rem;      /* sidebar group labels */
    --font-size-filter-btn:       0.90rem;
    --font-size-results-counter:  0.9rem;
    --font-size-card-title:       1.15rem;
    --font-size-card-identity:    1.125rem;
    --font-size-site-title:       1.5rem;
    --font-weight-regular:        400;
    --font-weight-medium:         500;
    --font-weight-semibold:       600;
    --font-weight-bold:           700;
    --font-weight-extrabold:      800;
    --line-height-base:           1.5;

    /* --- Border Radius --- */
    --border-radius-sm:           4px;
    --border-radius-md:           5px;
    --border-radius-lg:           12px;
    --border-radius-xl:           20px;
    --border-radius-pill:         26px;
    --border-radius-full:         50%;

    /* --- Spacing --- */
    --spacing-xs:                 4px;
    --spacing-sm:                 6px;
    --spacing-md:                 12px;
    --spacing-lg:                 16px;
    --spacing-xl:                 20px;
    --spacing-2xl:                24px;
    --spacing-3xl:                30px;
    --spacing-4xl:                40px;
    --spacing-5xl:                60px;

    /* --- Layout --- */
    --sidebar-width:              25%;
    --content-width:              75%;
    --sidebar-padding-inline:     4%;
    --content-padding-inline:     5%;
    --header-padding-block:       14px;
    --header-top-offset:          110px;
    --content-top-offset:         160px;
    --gap-cards:                  1.5rem;
    --card-min-width:             280px;
    --card-identity-img-size:     48px;
    --card-thumb-size:            100px;

    /* --- Transitions --- */
    --transition-fast:            0.15s ease;
    --transition-base:            0.2s ease;

    /* --- Shadows --- */
    --shadow-card-hover:          0 4px 12px rgba(0, 0, 0, 0.05);

    /* --- Z-index --- */
    /* (reserved for future layering) */

    /* --- Color: Text --- */
    --color-text-primary:         #1a1a1a;
    --color-text-secondary:       #555555;
    --color-text-muted:           #666666;
    --color-text-subtle:          #718096;
    --color-text-faint:           #aeb5bd;
    --color-text-nav:             #333333;
    --color-text-sidebar-item:    #4a5568;
    --color-text-sidebar-active:  #1a202c;
    --color-text-card-title:      #1a1a1a;
    --color-text-card-excerpt:    #555555;
    --color-text-card-identity:   #111111;
    --color-text-price:           #666666;
    --color-text-link:            #733ba0;
    --color-text-no-results:      #718096;
    --color-text-filter-label:    #000000;

    /* --- Color: Backgrounds --- */
    --color-bg-body:              #ffffff;
    --color-bg-main:              #f5f5f5;
    --color-bg-card:              #ffffff;
    --color-bg-thumb:             #f0f0f0;
    --color-bg-filter-hover:      #f7fafc;
    --color-bg-filter-active:     #e6e9fc;
    --color-bg-pill:              #ede6fc;
    --color-bg-pill-clear-hover:  #d5cfed;
    --color-bg-identity-img:      transparent;

    /* --- Color: Borders --- */
    --color-border-card:          #e1e1e1;
    --color-border-card-footer:   #ddd;
    --color-border-results-bar:   #edf2f7;
    --color-border-search:        #e2e8f0;
    --color-border-search-focus:  #cbd5e1;
    --color-border-pill:          #ddd7f8;
    --color-border-no-results:    #cbd5e1;
    --color-border-layout:        rgba(0, 0, 0, 0.05);

    /* --- Color: Accent / Brand --- */
    --color-accent-primary:       #5c0ca6;
    --color-accent-primary-dark:  #330a8c;

    /* --- Color: Danger / Destructive --- */
    --color-danger:               #dc3545;
    --color-danger-dark:          #bd2130;

    /* --- Color: Success / Verified --- */
    --color-success:              #28a745;

    /* --- Color: Logo / Site title --- */
    --color-logo:                 #000000;
}

/* =============================================
   RESET & BASE STYLES
   ============================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-body);
    margin: 0;
    padding: 0;
    line-height: var(--line-height-base);
    font-weight: var(--font-weight-regular);
    -webkit-font-smoothing: antialiased;
}

ul {
    position: initial;
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-title,
h1, h2, h3, h4, h5, h6, .tool-main-title {
    font-weight: var(--font-weight-bold);
    letter-spacing: -.5px;
}

.tool-main-title{
    font-size: 32px;
}

h1.tool-tagline{
    font-size: 22px;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-text-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.kurna_meta{
    font-size: 11px;
    font-weight: 500;
    padding: 1px 4px;
    text-transform: uppercase;
}

/* =============================================
   FONTS
   ============================================= */

@font-face {
    font-family: 'DM Sans';
    src: url('fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('fonts/dm-sans-v17-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('fonts/dm-sans-v17-latin-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('fonts/dm-sans-v17-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =============================================
   SKIP LINK (Accessibility)
   ============================================= */

.skip-link {
    display: none;
}

/* =============================================
   HEADER
   ============================================= */

.site-header {
    padding: 15px 0;
}

.site-container {
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-title {
    margin: 0;
    font-size: var(--font-size-site-title);
    font-weight: var(--font-weight-extrabold);
    padding: 0 20px;
}

.site-title a {
    color: var(--color-logo);
    text-decoration: none;
}

.main-navigation ul {
    list-style: none;
    display: flex;
    gap: var(--spacing-xl);
    margin: 0;
    padding: 0;
}

.main-navigation ul li a {
    color: var(--color-text-nav);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

/* =============================================
   CONTENT WRAPPER
   ============================================= */

.site-content {
    margin: 0 auto;
    padding: 0;
}

/* =============================================
   DIRECTORY APP WRAPPER
   ============================================= */

.kurna-directory-app {
    padding: 0;
}

/* =============================================
   DIRECTORY HEADER
   ============================================= */

.directory-header {
    margin-bottom: 2rem;
}

.directory-header .text-muted {
    color: var(--color-text-muted);
}

/* =============================================
   DIRECTORY LAYOUT
   ============================================= */

.directory-main-content,
.directory-results-container {
    flex-grow: 1;
    min-width: 0;
    padding: 0 var(--spacing-3xl);
    background-color: var(--color-bg-main);
    overflow: hidden;
}

/* =============================================
   SINGLE TOOL
   ============================================= */

.single-tool-inn {
    background-color: var(--color-bg-main);
}

/* =============================================
   SIDEBAR
   ============================================= */

.sidebar-filters,
.directory-sidebar {
    flex-shrink: 0;
    height: fit-content;
    width: 100%;
    padding: 0 var(--spacing-3xl);
}

.close-sidebar{
    display: none;
}

.filter-reset-control {
    margin-bottom: var(--spacing-3xl);
}

.clear-global-btn,
.filter-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: transparent;
    border: none;
    color: var(--color-danger);
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-fast);
}

.clear-global-btn:hover,
.filter-reset-btn:hover {
    color: var(--color-danger-dark);
}

.specs-sticky-card.card-box {
    padding: 30px;
    background-color: #fff;
    border-radius: var(--border-radius-md);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.07);
}

.specs-sticky-card.card-box h3{
    margin-top: 0;
}

.directory-sidebar .related-tools-card{
    padding: 0 20px;
}

.directory-sidebar  .directory-cards-grid{
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.directory-sidebar .related-tools-card .card-identity-header{
    flex-direction: column;
    align-items: start;
    gap: 0;
}

.specs-details-list {
  background: #fff;
  border-radius: 20px;
  padding: 8px 0;
  list-style: none;
  margin: 0;
}

.specs-details-list h3,
h3.specs-title {
  font-size: 22px;
  font-weight: 800;
  color: #1a1a2e;
  margin: 16px 0 20px;
}

.specs-details-list li {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #ececf3;
  position: relative;
  font-size: 14px;
}

.specs-details-list li:last-child {
  border-bottom: none;
}

/* Icon circle before each item */
.specs-details-list li::before {
  content: "";
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #f1edfb;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.specs-details-list li.starting_price::before {
  background-image: url('icons/currency-dollar.svg');
}

.specs-details-list li.pricing_model::before {
  background-image: url('icons/tag.svg');
}

.specs-details-list li.tool_status::before {
  background-image: url('icons/activity-heartbeat.svg');
}

.specs-details-list li.date_reviewed::before {
  background-image: url('icons/calendar-week.svg');
}



.specs-details-list .spec-label,
.specs-details-list li > strong {
  display: block;
}

.specs-details-list .spec-label strong,
.specs-details-list li > strong {
  display: block;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.3;
}

.specs-details-list .spec-value {
  display: block;
  color: #4a4a5a;
}

/* Pricing model link (purple text) */
.specs-details-list .pricing-pill-link {
  color: #6d28d9;
  font-weight: 600;
  text-decoration: none;
}

/* Status pill */
.specs-details-list .status-pill-link {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 12px;
  background-color: #d4f7e2;
  color: #15803d;
  font-weight: 600;
  font-size: 11px;
  border-radius: 20px;
  text-decoration: none;
}

.specs-details-list li {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.specs-details-list li::before {
  position: absolute;
  left: 0;
  top: 18px;
}

.specs-details-list li {
  padding-left: 72px;
  min-height: 56px;
  justify-content: center;
}

.specs-details-list li strong {
  font-weight: 700;
  color: #1a1a2e;
}



/* Visit Official Site button */
.action-visit-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  padding: 18px 24px;
  width: 100%;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
  /*box-shadow: 0 8px 20px rgba(109, 40, 217, 0.3);*/
}

.action-visit-link:hover {
  opacity: 0.95;
}

/* =============================================
   FILTER GROUPS
   ============================================= */

.filter-group,
.filter-group-panel {
    margin-bottom: 2rem;
}

.filter-group-panel h3 {
    margin: 0 0 15px 0;
    font-size: var(--font-size-label);
    color: var(--color-text-filter-label);
    padding: 0 var(--spacing-xl);
    letter-spacing: 0.4em;
    text-transform: uppercase;
}

.filter-group-panel ul,
.filter-click-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.filter-click-list li,
.filter-group-panel li {
    margin: 0;
    padding: 0;
}

.filter-group-btn,
.filter-click-list button {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px var(--spacing-xl);
    font-size: var(--font-size-filter-btn);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-sidebar-item);
    border-radius: var(--border-radius-pill);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1.2;
}

.filter-group-btn:hover,
.filter-click-list button:hover {
    background-color: var(--color-bg-filter-hover);
    color: var(--color-text-sidebar-active);
}

.filter-click-list button.is-active,
.active-filter {
    background-color: var(--color-bg-filter-active);
    color: var(--color-accent-primary);
    font-weight: var(--font-weight-semibold);
}

/* =============================================
   SEARCH
   ============================================= */

.search-input-wrapper {
    position: relative;
    width: 100%;
    margin-top: 1rem;
    max-width: 500px;
}

.filter-search-field,
.directory-search-field {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border-search);
    border-radius: var(--border-radius-md);
    background-color: var(--color-bg-card);
    font-size: 0.95rem;
    color: var(--color-text-sidebar-active);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.filter-search-field:focus,
.directory-search-field:focus {
    outline: none;
    border-color: var(--color-border-search-focus);
}

/* =============================================
   RESULTS BAR
   ============================================= */

.directory-results-bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: 25px;
    border-bottom: 1px solid var(--color-border-results-bar);
    padding-bottom: 15px;
}

.results-counter {
    font-size: var(--font-size-results-counter);
    color: var(--color-text-subtle);
    font-weight: var(--font-weight-medium);
}

.active-pills-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md) ;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background-color: var(--color-bg-pill);
    border: 1px solid var(--color-border-pill);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xxs);
}

.pill-prefix {
    color: var(--color-accent-primary);
    font-weight: var(--font-weight-semibold);
}

.pill-label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.pill-clear,
.filter-pill-remove-btn {
    background: transparent;
    border: none;
    color: var(--color-text-faint);
    cursor: pointer;
    padding: 2px var(--spacing-xs);
    width: 22px;
    height: 22px;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-full);
    line-height: 1;
    transition: all var(--transition-fast);
}

.pill-clear:hover,
.filter-pill-remove-btn:hover {
    color: var(--color-accent-primary);
    background-color: var(--color-bg-pill-clear-hover);
}

.inline-clear-all-link {
    background: transparent;
    border: none;
    color: var(--color-danger);
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-md);
    transition: text-decoration var(--transition-fast);
}

.inline-clear-all-link:hover {
    text-decoration: underline;
}

/* =============================================
   CARDS GRID
   ============================================= */

.cards-grid,
.directory-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
    gap: var(--gap-cards);
}

/* =============================================
   TOOL CARD
   ============================================= */

.tool-card,
.tool-directory-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-card);
    border-radius: var(--border-radius-md);
    padding: 1.25rem;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.tool-card:hover,
.tool-directory-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.tool-card {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.tool-directory-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tool-card-thumb {
    width: var(--card-thumb-size);
    height: var(--card-thumb-size);
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    background-color: var(--color-bg-thumb);
    flex-shrink: 0;
}

.tool-card-content {
    flex-grow: 1;
    min-width: 0;
}

.tool-card-title {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-bold);
}

.tool-card-title a {
    color: var(--color-text-card-title);
}

.tool-card-excerpt,
.card-excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-text-card-excerpt);
    line-height: var(--line-height-base);
    margin: 0 0 1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-identity-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.card-identity-header img {
    width: var(--card-identity-img-size);
    height: var(--card-identity-img-size);
    border-radius: var(--border-radius-sm);
    object-fit: cover;
}

.card-identity-header h2 {
    font-size: var(--font-size-card-identity);
    margin: 0;
    padding: 0;
}

.card-identity-header h2 a {
    text-decoration: none;
    color: var(--color-text-card-identity);
}

.verified-indicator {
    color: var(--color-success);
    font-size: var(--font-size-sm);
    margin-left: var(--spacing-xs);
}

.card-footer-metrics {
    margin-top: auto;
    border-top: 1px solid var(--color-border-card-footer);
    padding-top: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-badge-string {
    font-size: var(--font-size-xs);
    color: var(--color-text-price);
}

.view-specs-link,
.tool-view-link {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    color: var(--color-text-link);
}

/* =============================================
   NO RESULTS STATE
   ============================================= */

.directory-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-5xl) var(--spacing-4xl);
    border: 1px dashed var(--color-border-no-results);
    border-radius: var(--border-radius-lg);
    color: var(--color-text-no-results);
    font-size: var(--font-size-base);
}

.directory-no-results p {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

.directory-no-results .button {
    margin-top: 0.5rem;
}

/* =============================================
   SPEC SIDEBAR
   ============================================= */



.directory-layout-grid input[type=checkbox]{
	display: none;
}
.show-menu {
	padding:14px 30px;
	height:40px;
	background-image: none;
	margin:0 0;
	position: relative;
	z-index:99;
	font-size:12px;
	line-height:12px;
	text-transform:uppercase;
	cursor:pointer;
    display: none;
    background-color: var(--color-bg-filter-active);
    color: var(--color-accent-primary);
    font-weight: 500;
}

.close_menu{ display:none;}
.directory-layout-grid  [type="checkbox"]:checked + label .close_menu{ display:inline;}

.specs-details-list{
    margin: 0 0 25px 0;
}

.main_button{
    background-color: var(--color-bg-filter-active);
    color: var(--color-accent-primary);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-pill);
    border:1px solid var(--color-border-pill);
    font-size: 15px;

    padding: 8px 15px;
}

.main_button:hover{
    background-color: var(--color-bg-pill-clear-hover);
    text-decoration: none;
}

/* =============================================
   RELATED TOOLS
   ============================================= */

.related-tool-item{
    overflow: hidden;
    position: relative;
    margin: 0 0 15px 0;
}

.related-tool-title{
    font-weight: 500;
}

.related-tool-link:hover {
    text-decoration: none;
}

.related-tool-thumb{
    max-width: 60px;
    margin: 0 25px 0 0;
    float: left;
}

.related-tool-thumb,
.related-tool-thumb img{
    border-radius: var(--border-radius-sm)  ;
}

.related-tool-pricing {
    color: var(--color-accent-primary);
    background-color: var(--color-bg-filter-active);
    border-radius: var(--border-radius-sm)  ;

    position: absolute;
    top: 8px;
    left: 8px;
}

/* =============================================
   UTILITY
   ============================================= */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

[x-cloak] {
    display: none !important;
}


/* ================================================
   SINGLE TOOL PAGE — aicurated.io
   ================================================ */

/* --- Hero Section --- */

.tool-identity-row {
    display: flex;
    align-items: flex-start;
    gap: 2.1rem;
}

.tool-hero-thumb {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    border-radius:var(--border-radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border-card);
    background: var(--color-bg-thumb);
}

.tool-hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tool-hero-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tool-main-title {
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--color-text-card-identity);
    margin: 0;
    line-height: 1.2;
}

.tool-tagline {
    font-size: 1rem;
    font-weight: 400;
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.editorial-notes-content{
    margin: 0 0 40px 0;
}

.term-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: flex-start;
}

.term-pill-list a,
.term-pill-list span,
.term-pill-list li {
    white-space: nowrap;
}

.feature-pill-link,
.integration-pill-link {
    font-size: 12px;
    font-weight: 500;
    background: var(--color-bg-pill);
    color: var(--color-accent-primary);
    border-radius: var(--border-radius-pill);
    padding: var(--spacing-sm) 8px;
}

.tool-meta-status {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.tool-meta-category{
    margin: 10px 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    display: flex;
    gap: 0.8rem;

    align-items:center;
}

.tool-meta-category strong,
.tool-meta-status strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.category-pill-link{
    display: inline-block;
    background: var(--color-bg-pill);
    color: var(--color-accent-primary);
    border: 1px solid var(--color-border-pill);
    border-radius: 999px;
    padding: 0.4em 0.95em;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    line-height: 1.1;
}

.category-pill-link:hover,
.status-pill-link:hover {
    background: var(--color-bg-filter-active);
    color: var(--color-accent-primary-dark);
}

/* --- Body Grid --- */

.tool-body-grid {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* --- Card Box --- */



.card-box > h2:first-child {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent-primary);
    margin: 0 0 1.5rem;
}

/* --- Tool Sections --- */

.tool-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--color-border-card-footer);
}

.tool-section:last-child,
.tool-integrations {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.tool-integrations,
.tool-features-block,
.tool-integrations-block {
    margin-bottom: 60px;
}

.tool-section__title,
.tool-pricing__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 1rem;
}

.tool-section__text {
    line-height: 1.7;
    margin: 0 0 0.85rem;
}

.tool-section__text:last-child {
    margin-bottom: 0;
}

/* --- Pricing Block --- */

.tool-pricing {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--color-border-card-footer);
}

.tool-pricing p {
    line-height: 1.7;
    margin: 0;
}

/* --- Feature List --- */

.feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.feature-list__item {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
}

.feature-list__icon {
    color: var(--color-success);
    font-weight: 700;
    flex-shrink: 0;
}

.feature-list__text {
    margin: 0;
    line-height: 1.5;
    font-size: 0.95rem;
}

/* --- Use Cases --- */

.usecase-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.usecase-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.usecase-item__number {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background: var(--color-bg-pill);
    color: var(--color-accent-primary);
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
}

.usecase-item__body {
    flex: 1;
}

.usecase-item__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.3rem;
}

.usecase-item__text {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* --- Strengths & Weaknesses --- */

.pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.pros-cons__heading {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.85rem;
}

.pros-cons__column--pros .pros-cons__heading {
    color: var(--color-success);
}

.pros-cons__column--cons .pros-cons__heading {
    color: var(--color-danger);
}

.pros-cons__list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.pros-cons__item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.pros-cons__icon {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}

.pros-cons__item--pro .pros-cons__icon {
    color: var(--color-success);
}

.pros-cons__item--con .pros-cons__icon {
    color: var(--color-danger);
}

.pros-cons__text {
    line-height: 1.5;
    margin: 0;
}

/* --- Audience --- */

.audience-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.audience-item {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
}

.audience-item__icon {
    color: var(--color-accent-primary);
    font-size: 0.55rem;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}

.audience-item__text {
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

/* --- FAQ --- */

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

.faq-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border-card-footer);
}

.faq-item:first-child {
    padding-top: 0;
}

.faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.faq-item__question {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.35rem;
}

.faq-item__answer {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* --- Integrations --- */

.tool-integrations p {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* --- Links inside content --- */

.entry-content a {
    color: var(--color-text-link);
    text-decoration: none;
}

.entry-content a:hover {
    text-decoration: underline;
}

/* --- Responsive --- */

@media (max-width: 600px) {
    .tool-identity-row {
        flex-direction: column;
        gap: 1rem;
    }

    .tool-hero-thumb {
        width: 70px;
        height: 70px;
    }

    .tool-main-title {
        font-size: 1.4rem;
    }

    .card-box {
        padding: 1.25rem 0;
    }

    .pros-cons {
        grid-template-columns: 1fr;
    }

    .pros-cons__column--cons {
        padding-top: 1rem;
        border-top: 1px solid var(--color-border-card-footer);
    }
}

/* =============================================
   MOBILE FIRST - for desktops
   ============================================= */

@media (min-width: 768px) {
    .directory-results-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

}

@media (min-width: 1024px) {
    .site-header {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        padding: var(--header-padding-block) var(--sidebar-padding-inline);
    }

    .site-header .site-container {
        padding: 0;
    }

    .directory-container,
    .directory-layout-grid {
        display: flex;
        gap: 0;
    }

    .sidebar-filters,
    .directory-sidebar {
        width: var(--sidebar-width);
        padding: var(--content-top-offset) var(--sidebar-padding-inline);
    }

    .single-tool-inn {
        width: var(--content-width);
        padding: var(--content-top-offset) var(--content-padding-inline);
        display: flex;
        gap: var(--spacing-4xl);
        align-items: flex-start;
        border-left: 1px solid var(--color-border-layout);
    }

    .single-tool-inn main {
        flex: 2.7;
    }

    .single-tool-inn aside {
        flex: 1.3;
    }

    .directory-results-container {
        padding: var(--content-top-offset) var(--content-padding-inline);
        border-left: 1px solid var(--color-border-layout);
    }

    .sidebar-clear-container,
    .filter-reset-control {
        position: absolute;
        top: var(--header-top-offset);
        left: var(--sidebar-padding-inline);
        padding: 0 var(--spacing-xl);
    }
}

/* =============================================
   MOBILE - rewrite desktops
   ============================================= */

@media (max-width: 1024px) {

    .site-title {
        padding: 0 10px;
    }
    

    .show-menu,
    .close-sidebar,
    .directory-layout-grid [type="checkbox"]:checked ~ .directory-sidebar {
        display: block !important;
    }

    .close-sidebar{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 30px;
        background-color: var(--color-text-link);
        color: var(--color-bg-pill);
        cursor: pointer;
        z-index: 99;
    }


    .directory-sidebar{
        display: none;
        padding: 20px 10px;
        position: relative;
    }

}
/* ═══════════════════════════════════════════════════════════════════════════
   SCHEMA / SEO ADDITIONS — Breadcrumb Navigation
   ═══════════════════════════════════════════════════════════════════════════ */

.kurna-breadcrumb {
    padding: 10px 0 4px;
    font-size: 0.825rem;
    margin:-10px 0 15px 0;
}

.kurna-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.kurna-breadcrumb li {
    display: flex;
    align-items: center;
}

.kurna-breadcrumb li.breadcrumb-sep {
    color: #ccc;
    font-size: 0.9em;
    user-select: none;
}

.kurna-breadcrumb a {
    color: #666;
    text-decoration: none;
}

.kurna-breadcrumb a:hover {
    text-decoration: underline;
    color: #333;
}