@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

:root {
    --primary: #0a475f;
    --accent: #e4282b;
}

body {
    font-family: "Inter", sans-serif;
}

.bg-primary {
    background-color: var(--primary);
}

.text-primary {
    color: var(--primary);
}

.bg-accent {
    background-color: var(--accent);
}

.text-accent {
    color: var(--accent);
}

.nav-link.active {
    color: #1a4a6e;
    background-color: #e8f0f7;
    font-weight: 700;
    border-bottom: 2px solid #1a4a6e;
}

.mobile-link.active {
    color: #1a4a6e;
    background-color: #e8f0f7;
    font-weight: 700;
    border-left: 3px solid #1a4a6e;
}

.mobile-link {
    padding: 10px 12px;
    border-radius: 6px;
    font-weight: 500;
    color: #374151;
}

.mobile-link:hover {
    background: #f3f4f6;
    color: var(--primary);
}

.gallery-item-animate {
    animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.gallery-item-hide {
    animation: fadeOutDown 0.4s ease-in forwards;
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }
}

/* Animation for filtering items */
.gallery-item-animate {
    display: block !important;
    animation: fadeInScale 0.4s ease forwards;
}

.gallery-item-hide {
    display: none !important;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Fix for scrolling white space issue */
html,
body {
    overflow-x: hidden;
    position: relative;
}

/* Ensure main container has proper background */
main {
    position: relative;
    overflow-x: hidden;
}

/* Ensure form elements don't cause overflow */
input,
select,
button {
    max-width: 100%;
}

/* Fix for button z-index and positioning */
button[type="submit"] {
    position: relative;
    z-index: 10;
    background-color: var(--primary);
}

/* Prevent white space from appearing */
section {
    position: relative;
    width: 100%;
}
.faq-description ul {
    list-style-type: disc !important;
    margin-left: 1.5rem !important;
    margin-bottom: 1rem !important;
}
.faq-description ol {
    list-style-type: decimal !important;
    margin-left: 1.5rem !important;
}
.faq-description li {
    margin-bottom: 0.25rem !important;
    display: list-item !important;
}
.faq-description b,
.faq-description strong {
    font-weight: bold !important;
}
/* ==========================================================================
   CKEditor Content Styles & Tailwind Preflight Overrides
   ========================================================================== */

/* 1. Reset Base Margins & Font Styles */
.ck-content p {
    margin-bottom: 1.25rem;
}

.ck-content strong,
.ck-content b {
    font-weight: 700 !important;
}

.ck-content i,
.ck-content em {
    font-style: italic !important;
}

/* Fix Inline Styles (Font Color & Background) */
.ck-content [style*="color"] {
    color: attr(style) !important; /* Preserves specific inline colors */
}

/* 2. Headings (Re-applying sizes stripped by Tailwind Preflight) */
.ck-content h1 {
    font-size: 2.25rem !important; /* 36px */
    line-height: 2.5rem !important;
    font-weight: 800 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
}

.ck-content h2 {
    font-size: 1.75rem !important; /* 28px */
    line-height: 2.25rem !important;
    font-weight: 700 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.85rem !important;
}

.ck-content h3 {
    font-size: 1.35rem !important; /* 21px */
    line-height: 1.75rem !important;
    font-weight: 600 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.75rem !important;
}

/* 3. Links & Horizontal Rules */
.ck-content a {
    color: #2563eb !important; /* Tailwind Blue 600 */
    text-decoration: underline !important;
    transition: color 0.2s ease;
}

.ck-content a:hover {
    color: #1d4ed8 !important; /* Tailwind Blue 700 */
}

.ck-content hr {
    border: none !important;
    border-top: 1px solid #e5e7eb !important; /* Light gray line */
    margin: 2rem 0 !important;
}

/* 4. Lists (Unordered & Ordered) */
.ck-content ul {
    list-style-type: disc !important;
    margin-left: 1.5rem !important;
    margin-bottom: 1.25rem !important;
    display: block !important;
}

.ck-content ol {
    list-style-type: decimal !important;
    margin-left: 1.5rem !important;
    margin-bottom: 1.25rem !important;
    display: block !important;
}

.ck-content li {
    display: list-item !important;
    margin-bottom: 0.35rem !important;
}

/* Nested lists */
.ck-content ul ul,
.ck-content ol ul {
    list-style-type: circle !important;
    margin-bottom: 0 !important;
}

/* 5. Images & Linked Images */
.ck-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0.5rem;
    margin: 1.5rem auto !important;
}

.ck-content a img {
    display: inline-block !important; /* Fixes linked images styling */
}

/* 6. Text Alignment */
.ck-content .text-align-left { text-align: left !important; }
.ck-content .text-align-center { text-align: center !important; }
.ck-content .text-align-right { text-align: right !important; }
.ck-content .text-align-justify { text-align: justify !important; }

/* 7. Tables & Blockquotes */
.ck-content table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 1.5rem 0 !important;
}

.ck-content table td,
.ck-content table th {
    border: 1px solid #e5e7eb !important;
    padding: 0.75rem !important;
}

.ck-content blockquote {
    border-left: 4px solid #3b82f6 !important;
    padding-left: 1rem !important;
    color: #4b5563 !important;
    font-style: italic !important;
    margin: 1.5rem 0 !important;
}