/* Barber Park Website Styles */

/* Callout Box Styles */
.callout-info {
    background-color: #e6f3ff;
    border: 2px solid #4a90e2;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
    font-family: Verdana, Arial, sans-serif;
}

.callout-info h3, .callout-info h4 {
    color: #2c5aa0;
    margin-top: 0;
    margin-bottom: 10px;
}

.callout-warning {
    background-color: #fff3e0;
    border: 2px solid #ff9800;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
    font-family: Verdana, Arial, sans-serif;
}

.callout-warning h3, .callout-warning h4 {
    color: #e65100;
    margin-top: 0;
    margin-bottom: 10px;
}

.callout-tip {
    background-color: #e8f5e8;
    border: 2px solid #4caf50;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
    font-family: Verdana, Arial, sans-serif;
}

.callout-tip h3, .callout-tip h4 {
    color: #2e7d32;
    margin-top: 0;
    margin-bottom: 10px;
}

.callout-fact {
    background-color: #f3e5f5;
    border: 2px solid #9c27b0;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
    font-family: Verdana, Arial, sans-serif;
}

.callout-fact h3, .callout-fact h4 {
    color: #7b1fa2;
    margin-top: 0;
    margin-bottom: 10px;
}

.callout-success {
    background-color: #e6f7ff;
    border: 2px solid #00acc1;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
    font-family: Verdana, Arial, sans-serif;
}

.callout-success h3, .callout-success h4 {
    color: #006978;
    margin-top: 0;
    margin-bottom: 10px;
}

/* General styles for callout content */
.callout-info p, .callout-warning p, .callout-tip p, .callout-fact p, .callout-success p {
    margin-bottom: 10px;
    line-height: 1.4;
}

.callout-info ul, .callout-warning ul, .callout-tip ul, .callout-fact ul, .callout-success ul {
    margin: 10px 0;
    padding-left: 20px;
}

.callout-cta {
    background-color: #f0f8ff;
    border: 2px solid #4CAF50;
    border-radius: 8px;
    padding: 20px;
    margin: 25px 0;
    text-align: center;
    font-family: Verdana, Arial, sans-serif;
}

.callout-cta h3, .callout-cta h4 {
    color: #2e8b57;
    margin-top: 0;
    margin-bottom: 10px;
}

.callout-cta-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 15px;
    margin: 20px 0;
}

.callout-cta-item {
    background-color: white;
    padding: 15px;
    border-radius: 6px;
    flex: 1;
    min-width: 200px;
}

.callout-cta a {
    text-decoration: none;
    color: #2e8b57;
}

.callout-advice {
    background-color: #fff9e6;
    border: 2px solid #cc9900;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
    font-family: Verdana, Arial, sans-serif;
}

.callout-advice h3, .callout-advice h4 {
    color: #cc9900;
    margin-top: 0;
    margin-bottom: 10px;
}

/* Responsive design for mobile */
@media (max-width: 600px) {
    .callout-info, .callout-warning, .callout-tip, .callout-fact, .callout-success, .callout-cta, .callout-advice {
        padding: 12px;
        margin: 15px 0;
    }
    
    .callout-cta-grid {
        flex-direction: column;
        gap: 10px;
    }
    
    .callout-cta-item {
        min-width: auto;
    }
}