/*
WordPress-specific styles for LedgerLabs Theme
This file contains styles specific to WordPress functionality
that are not found in the base CDN CSS files.

This file maximizes reuse of styles from CDN by leveraging existing CSS custom properties, utility classes, and animations.
*/

/* Sticky Footer Layout */
html {
    height: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 70px; /* Account for fixed header */
    overflow-x: hidden;
    width: 100%;
    margin: 0;
}

/* WordPress Theme Header */
.site-header {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    z-index: 1030;
    transition: all 0.3s ease;
    padding: 0;
    overflow: visible;
}

.site-header.scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    overflow: visible;
}

.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 70px;
    gap: 2rem;
}

.site-branding {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Header Brand/Logo */
.header-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.navbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.navbar-brand:hover {
    transform: scale(1.05);
}

.logo-img {
    height: 40px;
    width: auto;
    display: block;
}

.site-description {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.2;
    font-weight: 400;
}

/* WordPress Navigation */
.main-navigation {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: flex-end;
    overflow: visible;
}

.main-navigation .nav-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation .nav-item {
    position: relative;
}

.main-navigation .nav-link {
    color: var(--text-dark, #2d3748);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    padding: 0.625rem 1rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    white-space: nowrap;
}

.main-navigation .nav-link:hover {
    color: var(--primary-color, #3b7d23);
    background-color: rgba(59, 125, 35, 0.08);
}

/* Ensure dropdown items don't inherit the main nav-link hover styles */
/* Target links that have both nav-link and dropdown-item classes on the same element */
.main-navigation .nav-link.dropdown-item,
.main-navigation .dropdown-menu .nav-link,
.main-navigation .dropdown-item .nav-link {
    color: #4a5568 !important;
}

/* Hover effect on the li element, not the link */
.main-navigation .dropdown-item:hover {
    background-color: rgba(59, 125, 35, 0.08) !important;
}

/* Prevent the link itself from having a background on hover - only the li should */
.main-navigation .dropdown-item .nav-link:hover,
.main-navigation .dropdown-item:hover .nav-link {
    background-color: transparent !important;
    color: var(--primary-color, #3b7d23) !important;
}

/* Button-styled navigation links */
.main-navigation .nav-link.nav-button {
    background: linear-gradient(135deg, var(--primary-color, #3b7d23) 0%, var(--primary-hover, #2d5f1a) 100%);
    color: #ffffff;
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(59, 125, 35, 0.2);
}

.main-navigation .nav-link.nav-button:hover {
    background: linear-gradient(135deg, var(--primary-hover, #2d5f1a) 0%, var(--primary-color, #3b7d23) 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 125, 35, 0.3);
}

/* Dropdown Menu Styles */
.main-navigation .dropdown {
    position: relative;
}

/* Make dropdown parent links clickable - allow pointer events on the link itself */
.main-navigation .dropdown > .nav-link {
    pointer-events: auto;
}

.main-navigation .dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
    z-index: 999;
    pointer-events: auto;
}

.main-navigation .dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.4rem;
    vertical-align: 0.2em;
    border-top: 0.25em solid;
    border-right: 0.25em solid transparent;
    border-bottom: 0;
    border-left: 0.25em solid transparent;
    transition: transform 0.15s ease;
    opacity: 0.8;
}

.main-navigation .dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
}

.main-navigation .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 200px;
    padding: 0.5rem 0;
    margin: 0;
    margin-top: 10px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    transition-delay: 0.05s;
    list-style: none;
    pointer-events: none;
}

/* Keep dropdown open when hovering over the menu itself */
.main-navigation .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
    pointer-events: auto;
}

.main-navigation .dropdown:hover .dropdown-menu,
.main-navigation .dropdown-menu:hover {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
    pointer-events: auto;
}

/* Keep dropdown visible when moving from parent to menu */
.main-navigation .dropdown:hover .dropdown-menu::before {
    pointer-events: auto;
}

/* Ensure dropdown menu items are clickable when visible */
.main-navigation .dropdown:hover .dropdown-menu .nav-link,
.main-navigation .dropdown-menu:hover .nav-link {
    pointer-events: auto;
}

.main-navigation .dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
}

/* Dropdown item links - use !important to override any conflicting styles */
/* Target both: same element with both classes, and descendant structure */
.main-navigation .nav-link.dropdown-item,
.main-navigation .dropdown-item .nav-link {
    color: #4a5568 !important;
    padding: 0.75rem 1.25rem;
    border-radius: 0;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    width: 100%;
    font-weight: 400;
    font-size: 0.875rem;
    min-height: 44px;
}

/* Hover effect on the li element, not the link */
.main-navigation .dropdown-item:hover {
    background-color: rgba(59, 125, 35, 0.08) !important;
}

/* Prevent the link itself from having a background on hover - only the li should */
.main-navigation .dropdown-item .nav-link:hover,
.main-navigation .dropdown-item:hover .nav-link {
    background-color: transparent !important;
    color: var(--primary-color, #3b7d23) !important;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-dark, #2d3748);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.menu-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.menu-toggle-icon {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
    height: 18px;
    position: relative;
}

.hamburger-line {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--text-dark, #2d3748);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: center;
}

.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -1px;
}

.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: rotate(-45deg);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -1px;
}

.menu-toggle-text {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Mobile Navigation */
@media (max-width: 991px) {
    .header-container {
        padding: 0 1rem;
    }
    
    .header-wrapper {
        min-height: 64px;
        gap: 1rem;
    }
    
    .menu-toggle {
        display: flex;
        order: 3;
    }
    
    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        background: white;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        max-height: 0;
        overflow: hidden;
    }
    
    .main-navigation.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .main-navigation .nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 0;
        width: 100%;
    }
    
    .main-navigation .nav-item {
        width: 100%;
    }
    
    .main-navigation .nav-link {
        color: #2d3748;
        padding: 1rem 1.5rem;
        border-radius: 0;
        width: 100%;
        justify-content: space-between;
        font-weight: 500;
        min-height: 48px;
    }
    
    .main-navigation .nav-link:hover {
        color: var(--primary-color, #3b7d23);
        background-color: rgba(59, 125, 35, 0.08);
        transform: none;
    }
    
    /* Button links on mobile */
    .main-navigation .nav-link.nav-button {
        margin: 0.5rem 1rem;
        border-radius: 6px;
        justify-content: center;
    }
    
    .main-navigation .dropdown-menu {
        position: static;
        display: none;
        opacity: 1;
        transform: none;
        box-shadow: none;
        border: none;
        background: rgba(0, 0, 0, 0.02);
        margin: 0;
        padding: 0;
        border-radius: 0;
    }
    
    .main-navigation .dropdown.active .dropdown-menu {
        display: block;
    }
    
    .main-navigation .nav-link.dropdown-item,
    .main-navigation .dropdown-item .nav-link {
        padding-left: 2.5rem;
        font-size: 0.875rem;
        color: #4a5568 !important;
        font-weight: 400;
    }
    
    /* Hover effect on the li element, not the link */
    .main-navigation .dropdown-item:hover {
        background-color: rgba(59, 125, 35, 0.08) !important;
    }
    
    /* Prevent the link itself from having a background on hover - only the li should */
    .main-navigation .dropdown-item .nav-link:hover,
    .main-navigation .dropdown-item:hover .nav-link {
        background-color: transparent !important;
        color: var(--primary-color, #3b7d23) !important;
    }
    
    .main-navigation .dropdown-toggle::after {
        margin-left: auto;
        transform: rotate(-90deg);
    }
    
    .main-navigation .dropdown.active .dropdown-toggle::after {
        transform: rotate(0deg);
    }
    
    .logo-img {
        height: 36px;
    }
}

@media (max-width: 480px) {
    .header-container {
        padding: 0 0.75rem;
    }
    
    .header-wrapper {
        min-height: 60px;
    }
    
    .logo-img {
        height: 32px;
    }
}

/* Main content */
.site-main {
    flex: 1 0 auto; /* Grow to fill available space for sticky footer */
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
    background: #ffffff;
    padding: 2rem;
}

/* WordPress-specific card styling - reuses existing card styles */
.post-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.post-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.post-card .entry-content {
    flex-grow: 1;
    margin-bottom: 1rem;
}

.post-card .entry-footer {
    margin-top: auto;
}

/* Apply existing card hover effects and animations */
.post-card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px) !important;
}

/* Add animation classes for WordPress elements */
.post-card {
    /* Reuse existing animation utilities */
    transition: all 0.3s ease;
}

.post-card.fade-in {
    opacity: 0;
    animation: fadeIn 0.4s ease-out forwards;
}

.post-card.fade-in-up {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.4s ease-out forwards;
}

/* Entry Meta Styling */
.entry-meta {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.entry-meta i {
    color: var(--primary-color);
}

/* Entry Thumbnail */
.entry-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-sm);
    transition: transform 0.3s ease;
}

.entry-thumbnail img:hover {
    transform: scale(1.02);
}

/* Tags Styling */
.entry-tags .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--border-radius-sm);
}

/* Social Sharing */
.social-sharing {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 1rem;
}

.social-sharing .btn-group {
    display: inline-flex;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.social-sharing .btn-group .btn {
    border-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    /* Reuse existing button transition */
    transition: var(--btn-transition);
}

.social-sharing .btn-group .btn:first-child {
    border-top-left-radius: var(--border-radius-sm);
    border-bottom-left-radius: var(--border-radius-sm);
}

.social-sharing .btn-group .btn:last-child {
    border-top-right-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
    border-right: none;
}

.social-sharing .btn-group .btn:hover {
    /* Reuse existing button hover effects */
    transform: var(--btn-hover-transform);
    box-shadow: var(--btn-hover-shadow);
}

/* Posts Navigation */
.posts-navigation {
    margin-top: 2rem;
}

.posts-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.posts-navigation .nav-previous,
.posts-navigation .nav-next {
    flex: 1;
}

.posts-navigation .nav-previous {
    text-align: left;
}

.posts-navigation .nav-next {
    text-align: right;
}

.posts-navigation a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    /* Reuse existing button base styles */
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    transition: var(--btn-transition);
    border: none;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: white;
}

.posts-navigation a:hover {
    transform: var(--btn-hover-transform);
    box-shadow: var(--btn-hover-shadow);
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-color) 100%);
    color: white;
    text-decoration: none;
}

.posts-navigation a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Comments Section */
.comments-area {
    margin-top: 2rem;
}

.comments-area .card {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

/* WordPress Footer */
.site-footer {
    background-color: #f8f9fa;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: auto; /* Push footer to bottom */
    padding: 0;
    flex-shrink: 0; /* Prevent footer from shrinking */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.footer-wrapper {
    display: flex;
    flex-direction: column;
}

/* Footer Top Section */
.footer-top {
    padding: 3rem 0 2rem;
    border-bottom: none; /* Border moved to footer-bottom */
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    align-items: start;
    justify-items: start;
}

.footer-column {
    display: flex;
    flex-direction: column;
}

/* Footer Brand Column */
.footer-column-brand {
    max-width: 100%;
}

/* Social Media Section */
.footer-social {
    margin-top: 1.5rem;
}

.footer-social-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark, #2d3748);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    color: var(--text-dark, #2d3748);
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.social-icon i {
    font-size: 18px;
    line-height: 1;
}

.social-icon:hover {
    background-color: var(--primary-color, #3b7d23);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(59, 125, 35, 0.3);
}

.footer-brand {
    margin-bottom: 1rem;
}

.footer-logo-link {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.footer-logo-link:hover {
    transform: scale(1.05);
}

.footer-logo-img {
    height: 40px;
    width: auto;
    display: block;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.footer-logo-link:hover .footer-logo-img {
    opacity: 1;
}

.footer-description {
    color: var(--text-muted, #6b7280);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0.5rem 0 0;
}

/* Footer Column Titles */
.footer-column-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark, #2d3748);
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Footer Menu */
.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.footer-menu li {
    margin: 0;
    line-height: 1.4;
}

.footer-menu a {
    color: var(--text-muted, #6b7280);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    display: inline-block;
    padding: 0.125rem 0;
    line-height: 1.4;
}

.footer-menu a:hover {
    color: var(--primary-color, #3b7d23);
    transform: translateX(4px);
}

/* Company Info */
.company-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.company-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark, #2d3748);
    margin: 0;
}

.company-address {
    font-style: normal;
    font-size: 0.875rem;
    color: var(--text-muted, #6b7280);
    line-height: 1.6;
    margin: 0;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.contact-details p {
    margin: 0;
    font-size: 0.875rem;
}

.contact-link {
    color: var(--primary-color, #3b7d23);
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
}

.contact-link:hover {
    color: var(--primary-hover, #2d5f1a);
    transform: translateX(2px);
}

/* Footer Bottom Section - Full Width */
.footer-bottom {
    width: 100%;
    max-width: 100%;
    padding: 1.5rem 0;
    background-color: rgba(0, 0, 0, 0.02);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 0;
    overflow-x: hidden;
}

.footer-bottom-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}


.copyright {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted, #6b7280);
    font-weight: 400;
    line-height: 1.6;
}

.legal-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.legal-link {
    color: var(--text-muted, #6b7280);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    padding: 0.25rem 0;
}

.legal-link:hover {
    color: var(--primary-color, #3b7d23);
    text-decoration: underline;
}

/* Footer Responsive Styles */
@media (max-width: 991px) {
    .footer-container {
        padding: 0 1rem;
    }
    
    .footer-bottom-container {
        padding: 0 1rem;
    }
    
    .footer-top {
        padding: 2.5rem 0 1.5rem;
    }
    
    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .footer-column-brand {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    /* Keep logos centered on mobile */
    .header-brand,
    .navbar-brand,
    .footer-brand,
    .footer-logo-link {
        text-align: center !important;
    }
    
    .footer-brand {
        display: flex;
        justify-content: center;
    }
    
    /* Mobile text alignment - left align and justify */
    body,
    .site-main,
    p,
    .entry-content,
    .entry-content p,
    .post-content,
    .post-content p,
    .page-content,
    .page-content p,
    .widget,
    .widget p,
    .footer-description,
    .company-address,
    .copyright {
        text-align: left !important;
    }
    
    /* Justify paragraphs on mobile */
    p,
    .entry-content p,
    .post-content p,
    .page-content p,
    .widget p,
    .footer-description {
        text-align: justify !important;
    }
    
    .footer-top {
        padding: 2rem 0 1.5rem;
    }
    
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-column {
        text-align: left !important;
    }
    
    /* Keep logo column centered, but description should be left */
    .footer-column-brand {
        text-align: center !important;
    }
    
    .footer-column-brand .footer-description {
        text-align: left !important;
    }
    
    .footer-column-brand .footer-description {
        text-align: justify !important;
    }
    
    .footer-column-title {
        text-align: left !important;
    }
    
    .footer-menu {
        align-items: flex-start;
    }
    
    .company-info {
        align-items: flex-start;
    }
    
    .company-address {
        text-align: left !important;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: left !important;
        gap: 1rem;
    }
    
    .legal-links {
        justify-content: flex-start;
    }
    
    /* Center social icons on mobile */
    .social-icons {
        justify-content: center !important;
    }
    
    .footer-column-brand .social-icons {
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .footer-container {
        padding: 0 0.75rem;
    }
    
    .footer-bottom-container {
        padding: 0 0.75rem;
    }
    
    .footer-top {
        padding: 1.5rem 0 1rem;
    }
    
    .footer-bottom {
        padding: 1rem 0;
    }
}