/* =============================================================================
   KEY PARTNERS - HELP SCOUT DOCS CUSTOM CSS v7.0
   =============================================================================

   Versione: 7.0.0
   Data: Dicembre 2025

   CHANGELOG v7:
   - FIX: Dropdown risultati ricerca (#serp-dd) - stesso stile della article list
   - FIX: Category cards homepage - box più larghi su desktop/tablet (max-width aumentato)
   - FIX: Centramento cards con padding responsivo

   ============================================================================= */

/* =============================================================================
   1. EXTERNAL RESOURCES
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* =============================================================================
   2. CSS VARIABLES
   ============================================================================= */

:root {
    --kp-navy-primary: #112739;
    --kp-navy-secondary: #18243a;
    --kp-navy-light: #1e3a5f;

    --kp-pink: #cc3366;
    --kp-pink-hover: #b22b2d;
    --kp-pink-light: #e84973;

    --kp-blue-badge: #77add4;
    --kp-blue-light: #e8f4fc;

    --kp-white: #ffffff;
    --kp-gray-50: #f8fafc;
    --kp-gray-100: #f1f5f9;
    --kp-gray-200: #e2e8f0;
    --kp-gray-300: #cbd5e1;
    --kp-gray-400: #94a3b8;
    --kp-gray-500: #64748b;
    --kp-gray-600: #475569;
    --kp-gray-700: #334155;
    --kp-gray-800: #1e293b;

    --kp-font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --kp-spacing-xs: 4px;
    --kp-spacing-sm: 8px;
    --kp-spacing-md: 16px;
    --kp-spacing-lg: 24px;
    --kp-spacing-xl: 32px;
    --kp-spacing-2xl: 48px;

    --kp-radius-sm: 8px;
    --kp-radius-md: 12px;
    --kp-radius-lg: 16px;
    --kp-radius-full: 9999px;

    --kp-shadow-sm: 0 2px 8px rgba(17, 39, 57, 0.06);
    --kp-shadow-card: 0 4px 20px rgba(17, 39, 57, 0.08);
    --kp-shadow-card-hover: 0 20px 40px rgba(17, 39, 57, 0.15);

    --kp-transition-fast: 150ms ease;
    --kp-transition-base: 250ms ease;
    --kp-transition-slow: 350ms ease;

    /* v7: Aumentato max-width per cards più larghe */
    --kp-max-width: 1400px;
    --kp-sidebar-width: 280px;
}

/* =============================================================================
   3. BASE STYLES
   ============================================================================= */

html, body, * {
    font-family: var(--kp-font-family) !important;
}

body {
    background-color: var(--kp-gray-50) !important;
    color: var(--kp-gray-700) !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased !important;
}

/* =============================================================================
   4. HEADER & NAVIGATION
   ============================================================================= */

.navbar {
    background: var(--kp-white) !important;
    border-bottom: 1px solid var(--kp-gray-200) !important;
    box-shadow: none !important;
    min-height: 70px !important;
    display: flex !important;
    align-items: center !important;
}

.navbar-inner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 var(--kp-spacing-xl) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
}

.navbar .brand {
    color: var(--kp-navy-primary) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    text-decoration: none !important;
    letter-spacing: -0.5px !important;
    display: flex !important;
    align-items: center !important;
    max-height: 40px !important;
}

.navbar .brand img {
    max-height: 32px !important;
    width: auto !important;
    object-fit: contain !important;
}

.navbar .nav {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
}

.navbar .nav > li > a {
    color: var(--kp-gray-600) !important;
    font-weight: 500 !important;
    transition: color var(--kp-transition-fast) !important;
}

.navbar .nav > li > a:hover {
    color: var(--kp-navy-primary) !important;
}

/* Link Home nella navbar - nascosto (non serve) */
.navbar .nav > li > a[href="/"] {
    display: none !important;
}

/* Search bar nella navbar */
.navbar #searchBar,
.navbar form#searchBar {
    display: flex !important;
    align-items: center !important;
    background: var(--kp-gray-50) !important;
    border: 1px solid var(--kp-gray-200) !important;
    border-radius: var(--kp-radius-full) !important;
    padding: 8px 16px !important;
    min-width: 280px !important;
    margin-left: auto !important;
}

.navbar #searchBar .search-query,
.navbar form#searchBar input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-size: 0.95rem !important;
    color: var(--kp-gray-600) !important;
    width: 100% !important;
}

.navbar #searchBar .search-query::placeholder,
.navbar form#searchBar input::placeholder {
    color: var(--kp-gray-400) !important;
}

.navbar #searchBar button,
.navbar form#searchBar button {
    background: transparent !important;
    border: none !important;
    color: var(--kp-gray-400) !important;
    padding: 0 !important;
    margin-right: 8px !important;
}

/* =============================================================================
   5. HOMEPAGE - SEARCH SECTION
   ============================================================================= */

#docsSearch {
    background: linear-gradient(180deg, var(--kp-gray-100) 0%, var(--kp-gray-50) 100%) !important;
    padding: var(--kp-spacing-xl) var(--kp-spacing-lg) !important;
    text-align: center !important;
    border-bottom: 1px solid var(--kp-gray-200) !important;
}

#docsSearch h1 {
    color: var(--kp-navy-primary) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: var(--kp-spacing-lg) !important;
}

/* Search Bar - HOMEPAGE */
#docsSearch #searchBar {
    max-width: 580px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: var(--kp-white) !important;
    border-radius: var(--kp-radius-full) !important;
    box-shadow: var(--kp-shadow-card) !important;
    overflow: visible !important;
    padding: 4px !important;
    border: 1px solid var(--kp-gray-200) !important;
    position: relative !important;
}

#docsSearch #searchBar .search-query {
    flex: 1 1 auto !important;
    height: 44px !important;
    padding: 0 var(--kp-spacing-lg) !important;
    border: none !important;
    background: transparent !important;
    font-size: 1rem !important;
    color: var(--kp-gray-700) !important;
    outline: none !important;
    box-shadow: none !important;
}

#docsSearch #searchBar .search-query::placeholder {
    color: var(--kp-gray-400) !important;
}

#docsSearch #searchBar button {
    flex: 0 0 auto !important;
    height: 44px !important;
    padding: 0 var(--kp-spacing-xl) !important;
    background: linear-gradient(135deg, var(--kp-pink) 0%, var(--kp-pink-hover) 100%) !important;
    border: none !important;
    border-radius: var(--kp-radius-full) !important;
    color: var(--kp-white) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--kp-transition-base) !important;
    position: static !important;
}

#docsSearch #searchBar button:hover {
    background: linear-gradient(135deg, var(--kp-pink-hover) 0%, #9a2424 100%) !important;
    transform: scale(1.02) !important;
}

#docsSearch #searchBar button i,
#docsSearch #searchBar button .icon-search {
    display: none !important;
}

/* =============================================================================
   5b. HOMEPAGE - SEARCH DROPDOWN RESULTS (v7 FIX)
   Stile uguale alla articleList della category page
   ============================================================================= */

#docsSearch #searchBar #serp-dd,
#docsSearch #serp-dd,
#searchBar #serp-dd,
#serp-dd {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--kp-white) !important;
    border-radius: var(--kp-radius-lg) !important;
    box-shadow: var(--kp-shadow-card-hover) !important;
    margin-top: var(--kp-spacing-sm) !important;
    z-index: 9999 !important;
    border: 1px solid var(--kp-gray-200) !important;
    overflow: hidden !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Lista risultati - stile articleList */
#serp-dd ul,
#serp-dd .result,
#docsSearch #serp-dd ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#serp-dd ul li,
#serp-dd .result li,
#docsSearch #serp-dd ul li {
    border-bottom: 1px solid var(--kp-gray-100) !important;
    margin: 0 !important;
}

#serp-dd ul li:last-child,
#serp-dd .result li:last-child,
#docsSearch #serp-dd ul li:last-child {
    border-bottom: none !important;
}

#serp-dd ul li a,
#serp-dd .result li a,
#serp-dd a,
#docsSearch #serp-dd ul li a {
    display: flex !important;
    align-items: center !important;
    padding: 16px 20px !important;
    color: var(--kp-gray-700) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    transition: all var(--kp-transition-base) !important;
    position: relative !important;
    background: transparent !important;
}

/* Freccia animata come articleList */
#serp-dd ul li a::after,
#serp-dd .result li a::after,
#docsSearch #serp-dd ul li a::after {
    content: '\2192' !important;
    position: absolute !important;
    right: 20px !important;
    opacity: 0 !important;
    transform: translateX(-8px) !important;
    transition: all var(--kp-transition-base) !important;
    color: var(--kp-pink) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

#serp-dd ul li:hover,
#serp-dd .result li:hover,
#docsSearch #serp-dd ul li:hover {
    background: var(--kp-gray-50) !important;
}

#serp-dd ul li:hover a,
#serp-dd ul li a:hover,
#serp-dd .result li:hover a,
#docsSearch #serp-dd ul li:hover a {
    color: var(--kp-pink) !important;
    padding-left: 28px !important;
}

#serp-dd ul li:hover a::after,
#serp-dd ul li a:hover::after,
#serp-dd .result li:hover a::after,
#docsSearch #serp-dd ul li:hover a::after {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Active state */
#serp-dd ul li.active a,
#serp-dd .result li.active a {
    background: rgba(204, 51, 102, 0.05) !important;
    color: var(--kp-pink) !important;
}

/* Categoria/breadcrumb nei risultati */
#serp-dd ul li a small,
#serp-dd ul li a span.category,
#serp-dd .result li a small {
    display: block !important;
    color: var(--kp-gray-400) !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    margin-top: 4px !important;
}

/* Nessun risultato */
#serp-dd .no-results,
#serp-dd p {
    padding: var(--kp-spacing-lg) var(--kp-spacing-xl) !important;
    color: var(--kp-gray-500) !important;
    text-align: center !important;
    font-style: italic !important;
}

/* =============================================================================
   6. HOMEPAGE - CATEGORY CARDS (RIFATTO COMPLETAMENTE - STILE WHEREBY)
   ============================================================================= */

/* Reset totale del container padre */
body .category-list,
.category-list {
    all: unset !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    width: calc(100% - 80px) !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 60px 40px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    align-items: stretch !important;
}

/* Card singola */
body .category-list .category,
.category-list .category,
a.category {
    all: unset !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-top: 4px solid var(--kp-navy-primary) !important;
    border-radius: 8px !important;
    padding: 32px 24px !important;
    min-height: 160px !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

body .category-list .category:hover,
.category-list .category:hover,
a.category:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}

.category-list .category h3 {
    color: var(--kp-navy-primary) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    margin: 0 0 var(--kp-spacing-sm) 0 !important;
    transition: color var(--kp-transition-base) !important;
}

.category-list .category:hover h3 {
    color: var(--kp-pink) !important;
}

.category-list .category > p:not(.article-count) {
    color: var(--kp-gray-500) !important;
    font-size: 1rem !important;
    margin: 0 0 var(--kp-spacing-md) 0 !important;
    line-height: 1.5 !important;
}

.category-list .category .article-count {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--kp-blue-light) !important;
    color: var(--kp-blue-badge) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: var(--kp-radius-full) !important;
    transition: all var(--kp-transition-base) !important;
    word-spacing: 3px !important;
}

.category-list .category:hover .article-count {
    background: var(--kp-pink) !important;
    color: var(--kp-white) !important;
}

/* =============================================================================
   7. LAYOUT - CATEGORY & ARTICLE PAGES
   ============================================================================= */

/* Override globale container Help Scout */
body,
body > div,
body > .container,
body > .container-fluid,
.docs-wrapper,
.docs-content,
.main-content,
#main,
main,
.wrapper,
[class*="container"] {
    max-width: 100% !important;
    width: 100% !important;
}

.row-fluid::before,
.row-fluid::after {
    content: none !important;
    display: none !important;
}

.row-fluid {
    display: flex !important;
    flex-direction: row !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 32px 40px !important;
    gap: 32px !important;
    box-sizing: border-box !important;
}

.row-fluid .span3 {
    float: none !important;
    flex: 0 0 200px !important;
    width: 200px !important;
    max-width: 200px !important;
    min-width: 200px !important;
    order: 1 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.row-fluid .span9 {
    float: none !important;
    flex: 0 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 1150px !important;
    order: 2 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: var(--kp-white) !important;
    border-radius: var(--kp-radius-lg) !important;
    padding: 32px !important;
    box-shadow: var(--kp-shadow-card) !important;
}

/* Content Wrapper - FIX larghezza */
.contentWrapper {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    min-height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* =============================================================================
   8. SIDEBAR - SEARCH BAR (INLINE)
   ============================================================================= */

.span3 #searchBar,
.span3 form#searchBar,
.span3 #searchBar.sm,
.span3 form.sm {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: var(--kp-white) !important;
    border-radius: var(--kp-radius-full) !important;
    box-shadow: var(--kp-shadow-sm) !important;
    padding: 4px !important;
    border: 1px solid var(--kp-gray-200) !important;
    margin-bottom: var(--kp-spacing-lg) !important;
    position: relative !important;
    overflow: visible !important;
}

.span3 #searchBar .search-query,
.span3 form.sm .search-query,
.span3 .sm .search-query {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 var(--kp-spacing-md) !important;
    border: none !important;
    border-radius: var(--kp-radius-full) !important;
    font-size: 0.9rem !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--kp-gray-700) !important;
}

.span3 #searchBar .search-query::placeholder,
.span3 .sm .search-query::placeholder {
    color: var(--kp-gray-400) !important;
}

.span3 #searchBar button,
.span3 form.sm button,
.span3 .sm button {
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    background: var(--kp-pink) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all var(--kp-transition-base) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    margin: 0 !important;
}

.span3 #searchBar button:hover,
.span3 form.sm button:hover {
    background: var(--kp-pink-hover) !important;
    transform: scale(1.05) !important;
}

.span3 #searchBar button .sr-only,
.span3 #searchBar button span,
.span3 form.sm button .sr-only,
.span3 form.sm button span {
    display: none !important;
}

.span3 #searchBar button .icon-search,
.span3 #searchBar button i.icon-search,
.span3 form.sm button .icon-search {
    display: none !important;
}

.span3 #searchBar button::before,
.span3 form.sm button::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    content: "\f002" !important;
    color: var(--kp-white) !important;
    font-size: 14px !important;
}

/* Sidebar search dropdown - stesso stile */
.span3 #searchBar #serp-dd,
.span3 #searchBar .sb {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--kp-white) !important;
    border-radius: var(--kp-radius-lg) !important;
    box-shadow: var(--kp-shadow-card-hover) !important;
    margin-top: var(--kp-spacing-sm) !important;
    z-index: 9999 !important;
    border: 1px solid var(--kp-gray-200) !important;
    overflow: hidden !important;
}

.span3 #searchBar #serp-dd ul,
.span3 #searchBar .sb ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.span3 #searchBar #serp-dd ul li,
.span3 #searchBar .sb ul li {
    border-bottom: 1px solid var(--kp-gray-100) !important;
}

.span3 #searchBar #serp-dd ul li:last-child,
.span3 #searchBar .sb ul li:last-child {
    border-bottom: none !important;
}

.span3 #searchBar #serp-dd ul li a,
.span3 #searchBar .sb ul li a {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    color: var(--kp-gray-700) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    transition: all var(--kp-transition-base) !important;
    position: relative !important;
}

.span3 #searchBar #serp-dd ul li a::after,
.span3 #searchBar .sb ul li a::after {
    content: '\2192' !important;
    position: absolute !important;
    right: 14px !important;
    opacity: 0 !important;
    transform: translateX(-8px) !important;
    transition: all var(--kp-transition-base) !important;
    color: var(--kp-pink) !important;
    font-weight: 700 !important;
}

.span3 #searchBar #serp-dd ul li:hover,
.span3 #searchBar .sb ul li:hover {
    background: var(--kp-gray-50) !important;
}

.span3 #searchBar #serp-dd ul li:hover a,
.span3 #searchBar .sb ul li:hover a {
    color: var(--kp-pink) !important;
    padding-left: 22px !important;
}

.span3 #searchBar #serp-dd ul li:hover a::after,
.span3 #searchBar .sb ul li:hover a::after {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* =============================================================================
   9. SIDEBAR - CATEGORIES MENU
   ============================================================================= */

.span3 h3 {
    color: var(--kp-gray-400) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin: 0 0 var(--kp-spacing-md) 0 !important;
    padding-left: 12px !important;
}

.nav-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.nav-list li {
    border-bottom: none !important;
    margin-bottom: 4px !important;
}

.nav-list li:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.nav-list li a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    color: var(--kp-gray-700) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    transition: all var(--kp-transition-fast) !important;
    border-left: none !important;
    border-radius: var(--kp-radius-sm) !important;
}

.nav-list li a:hover {
    background: var(--kp-gray-100) !important;
    color: var(--kp-gray-800) !important;
    border-left-color: transparent !important;
}

.nav-list li.active a {
    background: var(--kp-gray-100) !important;
    color: var(--kp-gray-800) !important;
    border-left-color: transparent !important;
    font-weight: 600 !important;
}

.nav-list li a i,
.nav-list li a .icon-arrow {
    display: none !important;
}

/* =============================================================================
   10. CATEGORY PAGE - HEADER & SORT DROPDOWN (FIX TESTO VISIBILE)
   ============================================================================= */

/* Breadcrumb */
.breadcrumb,
.crumb,
.crumbs {
    color: var(--kp-gray-400) !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    margin-bottom: var(--kp-spacing-md) !important;
}

.breadcrumb a,
.crumb a,
.crumbs a {
    color: var(--kp-gray-400) !important;
    text-decoration: none !important;
}

.breadcrumb a:hover,
.crumb a:hover,
.crumbs a:hover {
    color: var(--kp-gray-600) !important;
    text-decoration: underline !important;
}

#categoryHead {
    margin-bottom: var(--kp-spacing-xl) !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--kp-spacing-sm) !important;
}

#categoryHead h1 {
    color: var(--kp-navy-primary) !important;
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

#categoryHead .descrip {
    color: var(--kp-gray-500) !important;
    font-size: 1.05rem !important;
    margin: var(--kp-spacing-sm) 0 0 0 !important;
    width: 100% !important;
    line-height: 1.6 !important;
    max-width: 700px !important;
}

/* SORT DROPDOWN - Nascosto */
.sort {
    display: none !important;
}

.sort select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding: 12px 44px 12px 16px !important;
    border: 1px solid var(--kp-gray-200) !important;
    border-radius: var(--kp-radius-md) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: var(--kp-gray-700) !important;
    background-color: var(--kp-white) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    min-width: 200px !important;
    cursor: pointer !important;
    transition: all var(--kp-transition-base) !important;
    box-shadow: var(--kp-shadow-sm) !important;
}

.sort select option {
    color: var(--kp-gray-700) !important;
    background: var(--kp-white) !important;
    padding: 10px !important;
}

.sort select:hover {
    border-color: var(--kp-gray-300) !important;
}

.sort select:focus {
    border-color: var(--kp-pink) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(204, 51, 102, 0.1) !important;
}

/* =============================================================================
   11. CATEGORY PAGE - ARTICLE LIST (CARD STYLE)
   ============================================================================= */

.articleList {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.articleList li {
    border: 1px solid var(--kp-gray-200) !important;
    border-radius: var(--kp-radius-md) !important;
    background: var(--kp-white) !important;
    transition: all var(--kp-transition-base) !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
}

.articleList li:last-child {
    border-bottom: 1px solid var(--kp-gray-200) !important;
    margin-bottom: 0 !important;
}

.articleList li a {
    display: flex !important;
    align-items: center !important;
    padding: 16px 20px !important;
    color: var(--kp-gray-800) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all var(--kp-transition-base) !important;
    position: relative !important;
    gap: 14px !important;
}

/* Icona rimossa - l'emoji nel titolo fa da icona */
.articleList li a::before {
    display: none !important;
}

/* Freccia a destra */
.articleList li a::after {
    content: '\2192' !important;
    position: absolute !important;
    right: 24px !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: all var(--kp-transition-base) !important;
    color: var(--kp-gray-400) !important;
    font-weight: 400 !important;
    font-size: 1.2rem !important;
}

.articleList li:hover {
    border-color: var(--kp-gray-300) !important;
    box-shadow: var(--kp-shadow-sm) !important;
}

.articleList li:hover a {
    color: var(--kp-gray-900) !important;
}

.articleList li:hover a::after {
    color: var(--kp-gray-600) !important;
    transform: translateX(4px) !important;
}

.articleList li a i,
.articleList li a .icon-article-doc,
.articleList li a [class*="icon"] {
    display: none !important;
}

/* Meta info sotto il titolo (se presente) */
.articleList li .meta,
.articleList li .article-meta,
.articleList li time,
.articleList li .updated {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: var(--kp-gray-400) !important;
    margin-top: 4px !important;
}

/* =============================================================================
   12. ARTICLE PAGE - FIX CONTAINER E BORDER-RADIUS
   ============================================================================= */

/* Container articolo con bordi arrotondati */
#fullArticle,
.span9 .contentWrapper {
    background: var(--kp-white) !important;
    border-radius: var(--kp-radius-lg) !important;
    padding: 40px 48px !important;
    box-shadow: var(--kp-shadow-card) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Quando span9 è l'unico figlio (no sidebar) */
.row-fluid .span9:only-child,
.row-fluid .span9:first-child:last-child {
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* Se la sidebar è nascosta */
.row-fluid:not(:has(.span3)) .span9,
.row-fluid .span3:empty + .span9 {
    max-width: 900px !important;
    margin: 0 auto !important;
}

#fullArticle .title,
#fullArticle h1:first-of-type {
    color: var(--kp-navy-primary) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: var(--kp-spacing-lg) !important;
    padding-bottom: var(--kp-spacing-md) !important;
    border-bottom: 2px solid var(--kp-gray-100) !important;
    line-height: 1.3 !important;
}

#fullArticle h2 {
    color: var(--kp-navy-primary) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin: var(--kp-spacing-xl) 0 var(--kp-spacing-md) 0 !important;
}

#fullArticle h3 {
    color: var(--kp-navy-secondary) !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    margin: var(--kp-spacing-lg) 0 var(--kp-spacing-sm) 0 !important;
}

#fullArticle p {
    color: var(--kp-gray-700) !important;
    font-size: 1rem !important;
    line-height: 1.8 !important;
    margin-bottom: var(--kp-spacing-md) !important;
}

#fullArticle a:not(.printArticle) {
    color: var(--kp-pink) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    position: relative !important;
}

#fullArticle a:not(.printArticle)::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--kp-pink) !important;
    transition: width var(--kp-transition-base) !important;
}

#fullArticle a:not(.printArticle):hover::after {
    width: 100% !important;
}

#fullArticle ul,
#fullArticle ol {
    margin: var(--kp-spacing-md) 0 !important;
    padding-left: var(--kp-spacing-xl) !important;
}

#fullArticle li {
    margin-bottom: var(--kp-spacing-xs) !important;
    line-height: 1.7 !important;
}

#fullArticle img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: var(--kp-radius-md) !important;
    box-shadow: var(--kp-shadow-card) !important;
    margin: var(--kp-spacing-md) 0 !important;
}

#fullArticle .video,
#fullArticle .video-loom,
#fullArticle iframe {
    border-radius: var(--kp-radius-md) !important;
    overflow: hidden !important;
    margin: var(--kp-spacing-lg) 0 !important;
    max-width: 100% !important;
}

#fullArticle blockquote,
#fullArticle .callout {
    background: var(--kp-gray-50) !important;
    border-left: 4px solid var(--kp-pink) !important;
    padding: var(--kp-spacing-md) !important;
    margin: var(--kp-spacing-lg) 0 !important;
    border-radius: 0 var(--kp-radius-sm) var(--kp-radius-sm) 0 !important;
}

.printArticle {
    color: var(--kp-gray-400) !important;
}

.printArticle:hover {
    color: var(--kp-pink) !important;
}

.printArticle i {
    display: none !important;
}

.articleRatings {
    margin-top: var(--kp-spacing-xl) !important;
    padding: var(--kp-spacing-lg) !important;
    background: var(--kp-gray-50) !important;
    border-radius: var(--kp-radius-lg) !important;
    text-align: center !important;
}

.articleFoot {
    margin-top: var(--kp-spacing-xl) !important;
    padding-top: var(--kp-spacing-md) !important;
    border-top: 1px solid var(--kp-gray-200) !important;
}

.articleFoot .lu {
    color: var(--kp-gray-400) !important;
    font-size: 0.85rem !important;
    font-style: italic !important;
}

/* =============================================================================
   13. FOOTER (NASCOSTO)
   ============================================================================= */

footer,
footer.center {
    display: none !important;
    visibility: hidden !important;
}

/* =============================================================================
   14. RESPONSIVE
   ============================================================================= */

/* Mobile */
@media screen and (max-width: 768px) {

    body {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    .navbar {
        min-height: 60px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        width: calc(100% + 32px) !important;
    }

    .navbar .brand {
        font-size: 1.25rem !important;
    }

    #docsSearch {
        padding: var(--kp-spacing-lg) var(--kp-spacing-md) !important;
    }

    #docsSearch h1 {
        font-size: 1.25rem !important;
    }

    #docsSearch #searchBar {
        flex-direction: column !important;
        padding: var(--kp-spacing-sm) !important;
        border-radius: var(--kp-radius-lg) !important;
    }

    #docsSearch #searchBar .search-query {
        width: 100% !important;
        height: 44px !important;
        text-align: center !important;
        margin-bottom: var(--kp-spacing-sm) !important;
        background: var(--kp-gray-50) !important;
        border: 1px solid var(--kp-gray-200) !important;
        border-radius: var(--kp-radius-md) !important;
    }

    #docsSearch #searchBar button {
        width: 100% !important;
        height: 44px !important;
        border-radius: var(--kp-radius-md) !important;
    }

    /* Homepage cards - 1 colonna su mobile */
    body .category-list,
    .category-list {
        grid-template-columns: 1fr !important;
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
        padding: 32px 16px !important;
        gap: 16px !important;
        margin: 0 auto !important;
    }

    body .category-list .category,
    .category-list .category,
    a.category {
        min-height: 120px !important;
        padding: 24px 20px !important;
    }

    .row-fluid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        gap: 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .row-fluid .span3 {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        order: 1 !important;
        box-sizing: border-box !important;
    }

    .row-fluid .span9 {
        flex: 1 1 auto !important;
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .span3 #searchBar,
    .span3 form.sm {
        flex-direction: row !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .contentWrapper {
        padding: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #fullArticle {
        padding: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #fullArticle .title,
    #fullArticle h1:first-of-type {
        font-size: 1.4rem !important;
    }

    #categoryHead h1 {
        font-size: 1.4rem !important;
    }

    .sort select {
        width: 100% !important;
        min-width: unset !important;
    }

    footer {
        padding: var(--kp-spacing-lg) var(--kp-spacing-md) !important;
    }
}

/* Tablet e Desktop - 3 colonne (769px+) */
@media screen and (min-width: 769px) {

    .row-fluid {
        flex-direction: row !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 32px 40px !important;
        gap: 32px !important;
        margin: 0 !important;
    }

    .row-fluid .span3 {
        flex: 0 0 200px !important;
        width: 200px !important;
        max-width: 200px !important;
        min-width: 200px !important;
    }

    .row-fluid .span9 {
        flex: 0 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 1150px !important;
    }

    .contentWrapper,
    #fullArticle {
        padding: 0 !important;
    }

    /* Homepage cards - 3 colonne come Whereby */
    body .category-list,
    .category-list {
        grid-template-columns: repeat(3, 1fr) !important;
        width: calc(100% - 80px) !important;
        max-width: 1100px !important;
        padding: 60px 40px !important;
        gap: 24px !important;
        margin: 0 auto !important;
    }

    body .category-list .category,
    .category-list .category,
    a.category {
        min-height: 160px !important;
        padding: 32px 24px !important;
    }

    .category-list .category h3 {
        font-size: 1.15rem !important;
    }
}

/* =============================================================================
   15. UTILITIES
   ============================================================================= */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html {
    scroll-behavior: smooth !important;
}

*:focus-visible {
    outline: 2px solid var(--kp-pink) !important;
    outline-offset: 2px !important;
}

@media print {
    .navbar, .span3, .articleRatings, footer {
        display: none !important;
    }

    .row-fluid {
        display: block !important;
    }

    .row-fluid .span9 {
        width: 100% !important;
    }

    #fullArticle {
        box-shadow: none !important;
        padding: 0 !important;
    }
}

/* =============================================================================
   END v7.0
   ============================================================================= */