/* ========================================================================= */
/* wagtailembedded video responsive */
.responsive-object {
    position: relative;
}

.responsive-object iframe,
.responsive-object object,
.responsive-object embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ========================================================================= */
/* mobile navbar css */
/* Optional: Basic transition for dark mode */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Specific styles for mobile menu animation */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

#mobile-menu.open {
    max-height: 500px;
    /* Adjust this value based on your mobile menu's max possible height */
    opacity: 1;
}

/* ========================================================================= */
/* travel blog listing css */
.hero-bg {
    background-image: linear-gradient(to right top, #6EE7B7, #3B82F6);
}

.dark .hero-bg {
    background-image: linear-gradient(to right top, #14B8A6, #2563EB);
}

/* ========================================================================= */
/* Accordion css */
.accordion-content {
    transition: max-height 0.3s ease-out, opacity 0.2s ease;
}

/* ========================================================================= */
/* waitail-codeblock css */
.custom-code-block {
    position: relative;
    /* margin: 1.5em 0; */
    margin-top: 2px;
}

.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1em;
    background: #2d2d2d;
    color: white;
    border-radius: 4px 4px 0 0;
    margin-bottom: -7px;
    /* Pulls the code up */
    position: relative;
    z-index: 1;
}

.language-label {
    text-transform: uppercase;
    font-weight: bold;
    font-family: monospace;
}

.copy-button,
.download-button {
    background: #4a6da7;
    color: white;
    border: none;
    padding: 0.25em 0.75em;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8em;
}

.copy-button {
    background: #4a6da7;
    color: white;
}

.download-button {
    background: #5a9e56;
    color: white;
}

.copy-button:hover {
    background: #3a5a8f;
}

.download-button:hover {
    background: #4a8e46;
}

/* ========================================================================= */
/* share social media icons */
.social-sharing-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin: 20px auto; */
}

/* #007bff */
.share-icon-button {
    background-color: transparent;
    color: green;
    /* padding: 10px; */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.share-icon-button:hover {
    color: #0056b3;
    background-color: rgba(0, 123, 255, 0.1);
}

/* Light mode styles */
.social-icons-popup {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 15px;
    z-index: 1000;
    white-space: nowrap;
    animation: fadeIn 0.3s ease-out;
}

.social-icons-popup a {
    color: #4b5563;
    font-size: 24px;
    transition: color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
}

/* Mobile-specific adjustments */
@media (max-width: 640px) {
    .social-icons-popup {
        left: auto;
        right: 0;
        transform: translateX(0);
    }

    /* Optional: If you want it to appear above the share icon instead */
    /* .social-icons-popup {
        top: auto;
        bottom: calc(100% + 10px);
        left: 0;
        right: auto;
        transform: translateX(0);
    } */
}

/* Dark mode styles */
.dark .social-icons-popup,
.dark-mode .social-icons-popup,
[data-theme="dark"] .social-icons-popup {
    background-color: #1f2937;
    border-color: #374151;
    border-width: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.dark .social-icons-popup a,
.dark-mode .social-icons-popup a,
[data-theme="dark"] .social-icons-popup a {
    color: #d1d5db;
}

.social-icons-popup.show {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

/* Hover effects (same for both modes) */
.social-icons-popup a .fa-facebook:hover {
    color: #3b5998;
    transform: scale(1.1);
}

.social-icons-popup a .fa-instagram:hover {
    color: #983b6d;
    transform: scale(1.1);
}

.social-icons-popup a .fa-twitter:hover {
    color: #1da1f2;
    transform: scale(1.1);
}

.social-icons-popup a .fa-linkedin:hover {
    color: #0077b5;
    transform: scale(1.1);
}

.social-icons-popup a .fa-envelope:hover {
    color: #c71610;
    transform: scale(1.1);
}

.social-icons-popup a .fa-whatsapp:hover {
    color: #25d366;
    transform: scale(1.1);
}

.social-icons-popup a .fa-telegram:hover {
    color: #0088CC;
    transform: scale(1.1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* RichText Custom Styling */
/* app.css */
.richtext p {
    margin-bottom: 1rem;
    /* space between paragraphs */
}

.richtext ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.richtext ol {
    list-style-type: decimal;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.richtext a {
    color: #2563eb;
    /* Tailwind blue-600 */
    /* text-decoration: underline; */
    font-style: italic;
}

.richtext a:hover {
    text-decoration: underline;
}

.richtext img {
    margin-bottom: 1.5rem;
    margin-top: 0;
}

.affiliate-box p {
    margin-bottom: 1rem;
    /* space between paragraphs */
}

.affiliate-box a {
    color: #2563eb;
    /* Tailwind blue-600 */
    /* text-decoration: underline; */

}