/* ItaliaWP2 Components — Frontend styles */

/* ── Tabs orizzontali ─────────────────────────────────────────────── */
.nav-tabs .nav-link {
    border: none !important;
    border-bottom: 5px solid transparent !important;  /* era 3px */
    border-radius: 0 !important;
    color: #555 !important;
}

.nav-tabs .nav-link:hover {
    color: #0066cc !important;
    border-bottom-color: #b3d0f0 !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #0066cc !important;
    font-weight: 600 !important;
    background: transparent !important;
    border-bottom: 5px solid #0066cc !important;
}

/* ── Tabs verticali ───────────────────────────────────────────────── */
.iwp2-tabs-vertical {
    align-items: flex-start;
}

.iwp2-tabs-vertical .nav-tabs-vertical {
    border-bottom: none;
    border-right: 1px solid #dee2e6;
    min-width: 160px;
}

.iwp2-tabs-vertical .nav-tabs-vertical .nav-link {
    border: none !important;
    border-bottom: none !important;
    border-right: 3px solid transparent !important;
    border-radius: 0 !important;
    text-align: left;
    margin-right: -1px;
    color: #555 !important;
}

.iwp2-tabs-vertical .nav-tabs-vertical .nav-link:hover {
    color: #0066cc !important;
    border-right-color: #b3d0f0 !important;
}

.iwp2-tabs-vertical .nav-tabs-vertical .nav-link.active {
    color: #0066cc !important;
    font-weight: 600 !important;
    background: transparent !important;
    border-right: 3px solid #0066cc !important;
    border-bottom: none !important;
}

.iwp2-tabs-vertical .tab-content {
    flex: 1;
    padding-left: 1.5rem;
}

/* Nasconde frecce slick carousel sulle nostre tabs */
[id^="iwp2-tabs"] .slick-prev,
[id^="iwp2-tabs"] .slick-next {
    display: none !important;
}

/* ── Accordion ────────────────────────────────────────────────────── */
.collapse-header button {
    text-decoration: none !important;
    font-size: 24px !important;
}

/* ── Card Grid ────────────────────────────────────────────────────── */
.iwp2-card-grid {
    display: grid;
    gap: 24px;
    margin-bottom: 24px;
    align-items: stretch;
}

.iwp2-card-grid > br,
.iwp2-card-grid > p {
    display: none;
}

.iwp2-card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.iwp2-card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.iwp2-card-grid-4 { grid-template-columns: repeat(4, 1fr); }

.iwp2-card-grid .card-wrapper {
    margin: 0 !important;
}

@media (max-width: 1100px) {
    .iwp2-card-grid-2,
    .iwp2-card-grid-3,
    .iwp2-card-grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1101px) and (max-width: 1300px) {
    .iwp2-card-grid-3,
    .iwp2-card-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Card ─────────────────────────────────────────────────────────── */
.card-wrapper,
.card-wrapper .card {
    height: auto !important;
    min-height: 0 !important;
}

.iwp2-card-grid > .card-wrapper {
    height: 100%;
}

.iwp2-card-grid > .card-wrapper .card {
    height: 100%;
    min-height: 0 !important;
}

.card-wrapper > .card {
    border: 1px solid rgba(0,0,0,.125) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
    background-color: #fff !important;
}

.card-wrapper .card::after {
    display: none !important;
}

.card-wrapper .read-more {
    position: static !important;
    display: inline-flex !important;
    margin-top: 12px;
    font-family: var(--font-base) !important;
}

.card-wrapper .card-body {
    font-size: var(--text-size-desktop) !important;
    font-family: var(--font-base) !important;
}

.card-wrapper .card-title {
    font-size: 1.15rem !important;
    font-family: var(--font-base) !important;
    font-weight: 700 !important;
}

.card-wrapper .card-text {
    font-size: var(--text-size-desktop) !important;
    font-family: var(--font-base) !important;
}

@media (max-width: 991px) {
    .card-wrapper .card-body,
    .card-wrapper .card-text {
        font-size: var(--text-size-tablet) !important;
    }
}

@media (max-width: 575px) {
    .card-wrapper .card-body,
    .card-wrapper .card-text {
        font-size: var(--text-size-mobile) !important;
    }
}

/* ── Callout ──────────────────────────────────────────────────────── */
.callout,
.callout p,
.callout h5,
.callout ul,
.callout ol,
.callout li {
    font-family: var(--font-base) !important;
    color: #3d3d3d !important;
    font-weight: 400 !important;
}

.callout {
    padding: 1.25rem 1.5rem !important;
    margin: 1.5rem 0 !important;
    border: 1px solid #e0e0e0 !important;
    border-left: 5px solid #5a6772 !important;
    border-radius: 4px !important;
    background-color: #f8f9fa !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.callout h5 {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #5a6772 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.callout h5::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
}

.callout p:last-child { margin-bottom: 0 !important; }

/* success */
.callout-success {
    border-left-color: #00cf86 !important;
    background-color: #f0fdf8 !important;
}
.callout-success h5 { color: #008f5d !important; }
.callout-success h5::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
}

/* warning */
.callout-warning {
    border-left-color: #f0a800 !important;
    background-color: #fffbf0 !important;
}
.callout-warning h5 { color: #a07000 !important; }
.callout-warning h5::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3E%3Cpath d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3E%3Cpath d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z'/%3E%3C/svg%3E");
}

/* danger */
.callout-danger {
    border-left-color: #d9364f !important;
    background-color: #fff5f7 !important;
}
.callout-danger h5 { color: #a01030 !important; }
.callout-danger h5::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* note */
.callout-note {
    border-left-color: #0066cc !important;
    background-color: #f0f7ff !important;
}
.callout-note h5 { color: #004d99 !important; }