/* ============================================
   CUSTOM STYLES - All non-header/footer styles
   ============================================ */

/* ============================================
   HERO SECTION - Compact Style
   ============================================ */

.hero-compact {
    background: linear-gradient(to bottom, #242424, #212121) !important;
    padding-top: 8rem !important; /* pt-32 */
    padding-bottom: 4rem !important; /* pb-16 */
}

.hero-compact h1,
.hero-compact p {
    color: #ffffff !important;
}

.hero-compact p {
    opacity: 0.9 !important;
}

/* Prevent horizontal page scroll */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative !important;
}

/* Ensure all main containers don't cause overflow */
.site-content,
#primary,
.content-area,
main {
    /* overflow-x: hidden !important; - Removed to prevent white space below silhouette */
    max-width: 100% !important;
}

/* --- FIX FOR THEME FLEX CONFLICT --- */

/* Override theme's flex display on pages with hero */
body.page .site-content {
    display: block !important;
}

/* If your theme uses different selectors, add these too */
body.page #primary {
    display: block !important;
}

body.page .content-area {
    display: block !important;
}

/* Single Project Template Styles */
body.single-project .site-content {
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
}

body.single-project .site-content section {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
}

/* Project Details Section Grid Layout */
.project-details-grid {
    display: grid !important;
    grid-template-columns: 1fr !important; /* Single column on mobile */
    gap: 3rem !important;
}

@media (min-width: 1024px) {
    .project-details-grid {
        grid-template-columns: 7fr 3fr !important; /* 70/30 split */
        gap: 3rem !important;
    }
}

.project-details-main {
    width: 100% !important;
    min-width: 0 !important; /* Prevent overflow */
}

@media (min-width: 1024px) {
    .project-details-main {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.project-details-sidebar {
    width: 100% !important;
    min-width: 0 !important; /* Prevent overflow */
}

@media (min-width: 1024px) {
    .project-details-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Project Details Section Background */
.project-details-section {
    background-color: #efece7 !important;
}

/* Project Details Card Background */
.project-details-card {
    background-color: #ffffff !important;
}

/* Project Details List Styling */
.project-details-list {
    gap: 1rem !important; /* Reduced spacing between items */
}

.project-details-list > div {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Ensure text-base is 16px */
.project-details-card .text-base {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* Ensure label appears before value in project details */
.project-details-card .flex.items-start > div {
    display: flex !important;
    flex-direction: column !important;
}

.project-details-card .text-sm.text-muted-foreground {
    order: 1 !important;
    margin-bottom: 0.25rem !important;
}

.project-details-card .font-semibold.text-primary {
    order: 2 !important;
}

/* Single Project Hero Section */
.single-project-hero {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    min-height: calc(60vh + 80px + 3rem + 3rem) !important; /* Base height + header + top padding + bottom padding */
    max-height: calc(600px + 80px + 3rem + 3rem) !important;
    margin-top: -80px !important;
    padding-top: calc(80px + 3rem) !important; /* Header height + top padding */
    padding-bottom: 3rem !important; /* Bottom padding */
    z-index: 1 !important;
    display: block !important;
    visibility: visible !important;
    background-color: hsl(var(--color-primary)) !important;
}

.single-project-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
}

.single-project-hero .absolute.inset-0 {
    z-index: 0 !important;
}

/* Position content to respect padding */
.single-project-hero .project-hero-bottom-content {
    bottom: 3rem !important;
    padding-bottom: 0 !important;
}

/* Back button positioning with top padding */
.single-project-hero .absolute.top-4 {
    top: calc(80px + 1rem) !important; /* Header + top padding */
}

.single-project-hero .absolute.top-4 .max-w-4xl {
    max-width: 56rem !important; /* Same width as bottom content */
}

body.single-project .site-content section:first-of-type {
    z-index: 1 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
}

/* Ensure content area doesn't create columns */
body.single-project .content-area,
body.single-project #primary,
body.single-project main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
}

/* Override any grid/flex layout on sections */
body.single-project .site-content > section,
body.single-project #primary > section,
body.single-project .content-area > section,
body.single-project main > section {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
    flex: none !important;
}

/* Ensure sections stack vertically */
body.single-project .site-content {
    display: flex !important;
    flex-direction: column !important;
}

/* Single Member Template Styles - Ensure sections stack vertically */
body.single-member .site-content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
}

body.single-member .site-content section {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* Single News Article Template Styles - Ensure sections stack vertically */
body.single-nyhet .site-content {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
}

body.single-nyhet .site-content section {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
}

/* Ensure content area doesn't create columns */
body.single-nyhet .content-area,
body.single-nyhet #primary,
body.single-nyhet main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
}

/* Override any grid/flex layout on sections */
body.single-nyhet .site-content > section,
body.single-nyhet #primary > section,
body.single-nyhet .content-area > section,
body.single-nyhet main > section {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
    flex: none !important;
}

/* Ensure hero section takes full width */
.hero-full {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* --- HERO SECTION STYLES --- */

/* Full Height Hero */
.hero-full {
    margin-top: -80px !important;
    padding-top: 80px !important;
    padding-bottom: 3rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    min-height: calc(90vh + 3rem) !important;
    max-height: calc(90vh + 3rem) !important;
    height: calc(90vh + 3rem) !important;
    overflow: hidden !important;
}

/* Increase padding on larger screens */
@media (min-width: 768px) {
    .hero-full {
        padding-bottom: 4rem !important;
        min-height: calc(90vh + 4rem) !important;
        max-height: calc(90vh + 4rem) !important;
        height: calc(90vh + 4rem) !important;
    }
}

@media (min-width: 1024px) {
    .hero-full {
        padding-top: calc(80px + 4rem) !important;
        padding-bottom: 5rem !important;
        min-height: calc(90vh + 9rem) !important;
        max-height: calc(90vh + 9rem) !important;
        height: calc(90vh + 9rem) !important;
    }
}

/* Hero Content Container */
.hero-content {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    /* Remove any margin from Tailwind classes if conflicting */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Compact Hero */
.hero-compact {
    margin-top: 0 !important;
    display: block !important;
    padding-top: 8rem !important;
    padding-bottom: 4rem !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* Hero Background Image */
.hero-bg-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.hero-bg-image img {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* Hero Overlays - Ensure full coverage */
.hero-full > .absolute {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
}

.hero-full .bg-gradient-to-t {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
}

/* Hero Glow Effect */
.hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: rgba(208, 168, 67, 0.15);
    filter: blur(120px);
    animation: glow-pulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glow-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Hero Text Styles */
.hero-full h1 {
    color: #fff !important;
    text-align: center;
    margin-bottom: 1.5rem !important;
}

.hero-full p {
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: center;
    margin-bottom: 3rem !important;
}

/* Hero Scroll Indicator */
.hero-scroll-indicator {
    position: absolute !important;
    bottom: 2rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    cursor: pointer;
    animation: scroll-bounce 2s ease-in-out infinite;
    z-index: 10 !important;
}

.hero-scroll-indicator:hover {
    opacity: 0.8;
}

@keyframes scroll-bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(8px);
    }
}

/* Enhanced scroll indicator animation - subtle up/down movement */
.hero-scroll-indicator svg {
    animation: arrow-bounce 2s ease-in-out infinite;
    animation-delay: 0.1s;
}

@keyframes arrow-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(6px);
    }
}

/* Hero Buttons */
.btn-hero-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 1.5rem 2rem !important;
    border-radius: 0.375rem;
    background-color: #D0A843 !important;
    color: #000 !important;
    font-weight: 600;
    font-size: 1.125rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    text-decoration: none !important;
    border: none !important;
}

.btn-hero-primary:hover {
    background-color: rgba(208, 168, 67, 0.9) !important;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
    color: #000 !important;
}

.btn-hero-secondary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 1.5rem 2rem !important;
    border-radius: 0.375rem;
    border: 2px solid #fff !important;
    background-color: transparent !important;
    backdrop-filter: blur(4px);
    color: #fff !important;
    font-weight: 500;
    font-size: 1.125rem;
    transition: all 0.2s;
    text-decoration: none !important;
}

.btn-hero-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
    color: #fff !important;
}

/* Button container */
.hero-full .flex.gap-4 {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

/* --- ANIMATIONS --- */
.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
}

.animation-delay-200 {
    animation-delay: 0.2s;
}

.animation-delay-300 {
    animation-delay: 0.3s;
}

.animation-delay-600 {
    animation-delay: 0.6s;
}

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

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .hero-full h1 {
        font-size: 3.5rem !important;
    }
}

@media (max-width: 768px) {
    .hero-full {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
    }
    
    .hero-full h1 {
        font-size: 3rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-full p {
        font-size: 1.125rem !important;
        margin-bottom: 2rem !important;
    }
    
    .hero-compact h1 {
        font-size: 2rem !important;
    }
    
    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

}

@media (max-width: 480px) {
    .hero-full h1 {
        font-size: 2.5rem !important;
    }
    
    .hero-full p {
        font-size: 1rem !important;
    }
    
}

/* Override any theme conflicting styles */
.hero-full .container {
    max-width: 100% !important;
}

/* Ensure proper stacking context */
.hero-full .relative.z-10 {
    position: relative !important;
    z-index: 10 !important;
}

/* Fix for GeneratePress or other themes */
.hero-full .inside-article,
.hero-full .entry-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure sections after hero don't have weird spacing */
.hero-full + section,
.hero-full + div {
    margin-top: 0 !important;
}

/* Additional theme overrides */
body.page #content {
    display: block !important;
}

body.page .site-main {
    display: block !important;
}
/* ============================================
   PROJECTS SECTION STYLES
   ============================================ */

#projects {
    background-color: #efece7 !important;
    overflow-x: visible !important; /* Allow nav buttons outside container */
    overflow-y: hidden !important; /* Disable vertical scroll */
}

#projects .container {
    overflow: visible !important;
}

/* Filter Buttons */
.project-filter-btn {
    transition: all 0.2s ease;
    background-color: transparent !important;
    color: #1a1a2e !important; /* Theme primary dark color */
    border: 1px solid #b0b0b0 !important; /* Thin, light gray border */
    font-size: 0.8125rem !important; /* 13px - smaller text */
}

.project-filter-btn[data-active="true"] {
    background-color: hsl(var(--color-accent)) !important; /* Accent (golden) background color */
    color: hsl(var(--color-accent-foreground)) !important; /* Accent foreground (dark) text */
    border-color: hsl(var(--color-accent)) !important;
    font-weight: 600 !important;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.project-filter-btn:hover {
    background-color: #e8e8e8 !important; /* Silver/light gray background on hover */
    border-color: #666666 !important; /* Darker on hover */
}

.project-filter-btn[data-active="true"]:hover {
    background-color: hsl(var(--color-accent) / 0.9) !important; /* Slightly lighter accent on hover */
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

/* Project Cards - Use aspect-ratio instead of fixed height for consistency */
.project-card,
.content-card {
    position: relative !important; /* Ensure relative positioning for absolute children */
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex-shrink: 0 !important; /* Prevent shrinking */
    aspect-ratio: 3/4 !important; /* Match content-card-scroller aspect ratio */
    background: transparent !important; /* No background on card container */
    border-radius: 1rem !important; /* Add border-radius to container */
    overflow: hidden !important; /* Hide any overflow */
}

.project-card a,
.content-card a {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important; /* Match parent height */
    min-height: 100% !important; /* Ensure minimum height */
    overflow: hidden !important;
    border-radius: 1rem !important; /* rounded-2xl = 1rem */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    background-color: transparent !important;
    background: transparent !important; /* Remove any background */
    isolation: isolate !important; /* Create new stacking context */
}

/* Ensure image also has rounded corners and no overflow */
.project-card img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
    z-index: 1 !important; /* Base layer */
    border-radius: 1rem !important; /* Match parent border-radius */
    object-position: center !important;
}

.project-card a:hover img {
    transform: scale(1.03);
}

/* Featured Badge - Top Right */
.project-card .absolute.top-3.right-3 {
    position: absolute !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
    z-index: 20 !important;
}

/* Project Info - Bottom 25% - Ensure content is always at bottom */
.project-card .absolute.inset-x-0.bottom-0,
.project-card .content-card__content {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    padding: 1.25rem 1.5rem !important;
    z-index: 15 !important;
    margin-top: auto !important; /* Push to bottom */
}

@media (min-width: 768px) {
    .project-card .absolute.inset-x-0.bottom-0,
    .project-card .content-card__content {
        padding: 1.5rem !important;
    }
}

/* Gradient Overlay - Ensure readability and proper clipping */
.project-card .bg-gradient-to-t {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 100%) !important;
    opacity: 0.95 !important;
    z-index: 10 !important;
    border-radius: 1rem !important; /* Match parent border-radius to prevent black corners */
    pointer-events: none !important; /* Allow clicks to pass through */
}

/* Text styling within cards */
.project-card h3 {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
    font-weight: 700 !important;
}

@media (min-width: 768px) {
    .project-card h3 {
        font-size: 1.5rem !important;
    }
}

.project-card p {
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 0 0.5rem 0 !important; /* Consistent 8px spacing between lines */
}

/* Line 2: Company and Location */
.project-card .text-white\/80 {
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 0.5rem !important; /* 8px spacing */
    font-weight: 400 !important; /* Regular weight (reduced from 500) */
}

/* Line 3: Short excerpt */
.project-card .text-white\/70 {
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 0.75rem !important; /* 12px spacing before pills */
    font-size: 0.875rem !important; /* Slightly smaller for excerpt */
    line-height: 1.4 !important;
    font-weight: 300 !important; /* Light weight (reduced from 400) */
}

/* Pills/Tags */
.project-card .bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(4px) !important;
    position: relative !important;
    z-index: 20 !important; /* Above gradient and image */
    font-size: 0.75rem !important; /* 12px */
    padding: 0.25rem 0.625rem !important; /* Smaller padding */
    line-height: 1.2 !important;
}

.project-card .inline-flex {
    position: relative !important;
    z-index: 20 !important;
    font-size: 0.75rem !important;
}

/* Featured Badge - smaller and refined */
.project-card .absolute.top-3.right-3 {
    font-size: 0.7rem !important; /* Even smaller for featured badge */
    padding: 0.25rem 0.5rem !important;
    line-height: 1.2 !important;
}

/* Hide scrollbar but keep functionality */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Projects carousel wrapper - ensure proper positioning context */
#projects .relative {
    position: relative !important;
    min-height: 575px !important; /* Match new card height */
}

/* Snap scroll - TEMPORARILY DISABLED */
/* Projects Scroller Container - Ensure 3 cards visible on desktop */
#project-scroller {
    -webkit-overflow-scrolling: touch;
    min-height: 575px !important; /* Match new card height */
    height: auto !important;
    display: flex !important; /* Ensure flex display */
    padding-left: 0 !important;
    padding-right: 2rem !important; /* Add padding-right so last card is visible on mobile/tablet */
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: auto !important; /* Allow horizontal scroll */
    overflow-y: hidden !important; /* Disable vertical scroll */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    gap: 1.5rem !important; /* Ensure gap between cards (matches gap-6 from Tailwind) */
    width: 100% !important; /* Full width of container */
}

@media (min-width: 1280px) {
    /* On desktop: ensure 3rd card is fully visible */
    #project-scroller {
        padding-right: 4rem !important; /* Extra padding to ensure 3rd card is fully visible */
    }
}

/* Ensure content-card-scroller cards in #project-scroller have correct sizing */
#project-scroller .content-card-scroller {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    aspect-ratio: 3/4 !important; /* Ensure consistent aspect ratio */
}

/* Ensure project-card also uses same sizing (for backwards compatibility) */
#project-scroller .project-card {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    aspect-ratio: 3/4 !important; /* Match content-card-scroller aspect ratio */
}

/* Unified sizing for both classes - per spec */
#project-scroller .project-card,
#project-scroller .content-card-scroller {
    /* Match content-card-scroller widths from spec - ensure 3 cards visible on desktop */
    width: 78vw !important; /* Mobile */
    min-width: 78vw !important;
    max-width: 78vw !important;
}

@media (min-width: 640px) {
    #project-scroller .project-card,
    #project-scroller .content-card-scroller {
        width: 60vw !important;
        min-width: 60vw !important;
        max-width: 60vw !important;
    }
}

@media (min-width: 768px) {
    #project-scroller .project-card,
    #project-scroller .content-card-scroller {
        width: 42vw !important;
        min-width: 42vw !important;
        max-width: 42vw !important;
    }
}

@media (min-width: 1024px) {
    #project-scroller .project-card,
    #project-scroller .content-card-scroller {
        width: 36vw !important;
        min-width: 36vw !important;
        max-width: 36vw !important;
    }
}

@media (min-width: 1280px) {
    /* At 1280px: 3 cards × 28vw = 84vw + 2 gaps (1.5rem each) ≈ 86vw total */
    /* Container needs padding-right to show last card fully */
    #project-scroller {
        padding-right: 4rem !important; /* Extra padding to ensure 3rd card is fully visible */
    }
    
    /* Default size for non-featured cards */
    #project-scroller .project-card:not(.featured),
    #project-scroller .content-card-scroller:not(.featured) {
        width: 28vw !important; /* Per spec: 28vw for normal cards */
        min-width: 28vw !important;
        max-width: 28vw !important;
    }
    
    /* Featured cards get larger size */
    #project-scroller .project-card.featured,
    #project-scroller .content-card-scroller.featured {
        width: 32vw !important; /* Per spec: 32vw for featured cards */
        min-width: 32vw !important;
        max-width: 32vw !important;
    }
}

/* Navigation buttons - larger and more prominent */
.project-nav-prev,
.project-nav-next {
    transition: opacity 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    position: absolute !important;
    top: 50% !important;
    z-index: 20 !important;
    background: #ffffff !important; /* White background */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 3.5rem !important; /* Increased from 3rem */
    height: 3.5rem !important; /* Increased from 3rem */
    border-radius: 9999px !important;
    pointer-events: auto !important;
    border: none !important; /* No border */
    box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.15), 0 4px 8px -2px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow */
}

.project-nav-prev {
    left: -1.5rem !important; /* Position outside container */
    transform: translateY(-50%) !important;
}

.project-nav-next {
    right: -1.5rem !important; /* Position outside container */
    transform: translateY(-50%) !important;
}

/* Ensure SVG icons are visible - black on white background */
.project-nav-prev svg,
.project-nav-next svg {
    display: block !important;
    width: 2rem !important; /* Increased from 1.5rem to 2rem */
    height: 2rem !important;
    color: #000000 !important; /* Black icon on white background */
    stroke: #000000 !important; /* Black stroke */
    stroke-width: 3 !important; /* Thicker stroke */
    fill: none !important;
}

.project-nav-prev svg path,
.project-nav-next svg path {
    stroke: #000000 !important; /* Black stroke */
    stroke-width: 3 !important; /* Thicker stroke */
}

.project-nav-prev:hover,
.project-nav-next:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-50%) scale(1.05) !important;
}

/* Line clamp for text */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Gradient overlay */
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

/* View All Projects Button */
#projects a[href*="projekt"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    height: 2.75rem !important;
    padding: 0.5rem 2rem !important;
    background-color: #1a1a2e !important;
    color: #ffffff !important;
    border-radius: 0.375rem !important;
    font-weight: 600 !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    border: none !important;
}

#projects a[href*="projekt"]:hover {
    background-color: rgba(26, 26, 46, 0.9) !important;
    transform: translateY(-1px) !important;
}

#projects a[href*="projekt"] svg {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#projects a[href*="projekt"]:hover svg {
    transform: translateX(4px) !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .project-nav-prev,
    .project-nav-next {
        display: none !important;
    }
}

/* ============================================
   PROJEKT PAGE - GRID LAYOUT
   ============================================ */

.project-grid-item {
    transition: transform 0.3s ease;
}

.project-grid-item:hover {
    transform: translateY(-4px);
}

/* Ensure rounded corners on the link container */
.project-grid-item a {
    position: relative !important;
    display: block !important;
    border-radius: 1rem !important; /* rounded-2xl */
    overflow: hidden !important;
    height: 350px !important;
}

/* Project image - ensure it's absolutely positioned */
.project-grid-item img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.project-grid-item:hover img {
    transform: scale(1.05) !important;
}

/* Gradient overlay - hidden by default */
.project-grid-item .bg-gradient-to-t {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 10 !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%) !important;
}

.project-grid-item:hover .bg-gradient-to-t {
    opacity: 1 !important;
}

/* Project info container - hidden by default, shown on hover */
.project-grid-item a > div:last-child {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 1.25rem 1.5rem !important;
    opacity: 0 !important;
    transform: translateY(1rem) !important;
    transition: all 0.3s ease !important;
    z-index: 20 !important;
    background: transparent !important;
}

.project-grid-item:hover a > div:last-child {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Match homepage project card styling */
.project-grid-item h3 {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
}

@media (min-width: 768px) {
    .project-grid-item h3 {
        font-size: 1.5rem !important;
    }
}

.project-grid-item .text-white\/80 {
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 0.5rem !important;
    font-weight: 400 !important;
}

.project-grid-item .text-white\/70 {
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    font-weight: 300 !important;
}

.project-grid-item .bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(4px) !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.625rem !important;
    line-height: 1.2 !important;
}

/* Featured badge */
.project-grid-item .absolute.top-3 {
    position: absolute !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
    z-index: 20 !important;
    font-size: 0.7rem !important; /* Smaller font for featured badge */
    padding: 0.25rem 0.5rem !important;
    line-height: 1.2 !important;
}

/* Responsive grid card heights */
@media (max-width: 1024px) {
    .project-grid-item a {
        height: 300px !important;
    }
}

@media (max-width: 640px) {
    .project-grid-item a {
        height: 250px !important;
    }
}

/* ============================================
   KONTAKT PAGE - OPENING HOURS STYLING
   ============================================ */

.opening-hours-content {
    color: #666666;
}

.opening-hours-content p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

.opening-hours-content p:not(:first-child) {
    margin-top: 0.25rem;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .opening-hours-content p {
        font-size: 14px;
    }
}

/* ============================================
   WPFORMS CONTACT FORM STYLING
   ============================================ */

/* Match WPForms inputs to theme styling */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container textarea,
.wpforms-container select {
    display: flex !important;
    width: 100% !important;
    border-radius: 0.375rem !important; /* rounded-md */
    border: 1px solid #d4d4d4 !important; /* border-neutral-300 */
    padding: 0.5rem 0.75rem !important; /* px-3 py-2 */
    font-size: 1rem !important;
    line-height: 1.5 !important;
    background-color: #ffffff !important;
    color: #1a1a2e !important; /* text-primary */
    transition: all 0.2s ease !important;
}

.wpforms-container input[type="text"]::placeholder,
.wpforms-container input[type="email"]::placeholder,
.wpforms-container input[type="tel"]::placeholder,
.wpforms-container textarea::placeholder {
    color: #a3a3a3 !important; /* placeholder:text-neutral-400 */
}

.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container input[type="tel"]:focus,
.wpforms-container input[type="url"]:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
    outline: none !important;
    border-color: #d0a843 !important; /* accent color */
    box-shadow: 0 0 0 2px rgba(208, 168, 67, 0.2) !important;
}

/* Textarea min height */
.wpforms-container textarea {
    min-height: 150px !important;
}

/* Labels */
.wpforms-container .wpforms-field-label {
    display: block !important;
    font-size: 0.875rem !important; /* text-sm */
    font-weight: 500 !important; /* font-medium */
    margin-bottom: 0.5rem !important; /* mb-2 */
    color: #1a1a2e !important; /* text-primary */
}

/* Required asterisk */
.wpforms-container .wpforms-required-label {
    color: #ef4444 !important; /* red for required */
}

/* Submit Button */
.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 2.5rem !important; /* h-10 */
    border-radius: 0.375rem !important; /* rounded-md */
    padding: 0.5rem 1rem !important; /* px-4 py-2 */
    background-color: #d0a843 !important; /* bg-accent */
    color: #1a1a2e !important; /* text-primary */
    font-weight: 600 !important; /* font-semibold */
    transition: all 0.2s ease !important;
    border: none !important;
    cursor: pointer !important;
}

.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover {
    background-color: rgba(208, 168, 67, 0.9) !important; /* hover:bg-accent/90 */
    transform: translateY(-1px) !important;
}

.wpforms-container button[type="submit"]:focus,
.wpforms-container .wpforms-submit:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(208, 168, 67, 0.5) !important;
}

/* Form field spacing - More specific selectors with higher specificity */
.wpforms-container .wpforms-field {
    margin-bottom: 0.5rem !important; /* Reduced to 0.5rem (8px) */
    padding-bottom: 0 !important;
}

.wpforms-container div.wpforms-field {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0 !important;
}

.wpforms-container .wpforms-field-container .wpforms-field {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0 !important;
}

.wpforms-container .wpforms-field-container > .wpforms-field {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0 !important;
}

/* Override any row/column layouts */
.wpforms-container .wpforms-field-row {
    margin-bottom: 0.5rem !important;
}

/* Ensure last field has no bottom margin */
.wpforms-container .wpforms-field:last-child {
    margin-bottom: 0 !important;
}

/* Error messages */
.wpforms-container .wpforms-error {
    color: #ef4444 !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
}

/* Success message */
.wpforms-container .wpforms-confirmation-container-full {
    background-color: #dcfce7 !important; /* bg-green-100 */
    color: #15803d !important; /* text-green-700 */
    padding: 1rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
}

/* Remove default WPForms styling that conflicts */
.wpforms-container {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.wpforms-container .wpforms-form {
    padding: 0 !important;
}

/* Field descriptions */
.wpforms-container .wpforms-field-description {
    color: #737373 !important; /* text-neutral-500 */
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
}

@media (max-width: 768px) {
    #projects {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    #projects h2 {
        font-size: 2rem !important;
    }

    .project-filter-btn {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
    }
}

/* ============================================
   ABOUT SECTION STYLES
   ============================================ */

#about {
    background-color: #ffffff !important;
}

#about .text-accent {
    color: #D0A843 !important;
}

/* Decorative element behind image */
#about .bg-accent\/20 {
    background-color: rgba(208, 168, 67, 0.2) !important;
}

/* Responsive spacing */
@media (max-width: 1024px) {
    #about .grid {
        gap: 3rem !important;
    }
}

@media (max-width: 768px) {
    #about {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    #about h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    #about p {
        font-size: 1rem !important;
    }
}

/* ============================================
   CONTACT SECTION STYLES
   ============================================ */

/* Section background */
#contact {
    background-color: #efece7 !important;
    position: relative;
    margin-bottom: 0 !important;
    padding-bottom: 6rem !important; /* Space for top half of silhouette */
}

@media (min-width: 768px) {
    #contact {
        padding-bottom: 7rem !important; /* Adjusted for larger silhouette */
    }
}

@media (min-width: 1024px) {
    #contact {
        padding-bottom: 8rem !important; /* Adjusted for larger silhouette */
    }
}

/* Background pattern overlay */
#contact .opacity-\[0\.06\] {
    opacity: 0.06 !important;
}

/* Contact form card background */
.contact-form-wrapper {
    background-color: #ffffff !important;
    border: 1px solid hsl(var(--border, 0 0% 89.8%)) !important;
    border-radius: 1rem !important;
    padding: 2rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* Contact section grid spacing */
#contact .space-y-6 > * + * {
    margin-top: 1.5rem;
}

#contact .space-y-2 > * + * {
    margin-top: 0.5rem;
}

/* Contact info hover effect */
.contact-info a {
    text-decoration: none !important;
    transition: transform 0.3s ease;
}

.contact-info a:hover {
    transform: translateX(4px);
}

/* Icon background colors */
.bg-accent\/10 {
    background-color: rgba(208, 168, 67, 0.1) !important;
}

.contact-info .group:hover .bg-accent\/10 {
    background-color: rgba(208, 168, 67, 0.2) !important;
}

/* Text color utilities */
.text-neutral-600 {
    color: #666666 !important; /* Changed from #525252 to match reference website */
}

.text-muted-foreground {
    color: #666666 !important; /* Reference website muted text color */
}

.contact-info .group:hover .text-neutral-600 {
    color: #D0A843 !important;
}

/* WPForms specific styling */
.contact-form-wrapper .wpforms-container {
    margin: 0 !important;
    padding: 0 !important;
}

.contact-form-wrapper .wpforms-field-label {
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
}

.contact-form-wrapper .wpforms-required-label {
    color: #D0A843 !important;
}

.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="email"],
.contact-form-wrapper textarea {
    width: 100% !important;
    background-color: #efece7 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
}

.contact-form-wrapper input[type="text"]:focus,
.contact-form-wrapper input[type="email"]:focus,
.contact-form-wrapper textarea:focus {
    background-color: #efece7 !important;
    border-color: #D0A843 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(208, 168, 67, 0.1) !important;
}

.contact-form-wrapper textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Submit button */
.contact-form-wrapper button[type="submit"],
.contact-form-wrapper .wpforms-submit,
.contact-form-wrapper input[type="submit"] {
    width: 100% !important;
    height: 3rem !important;
    background-color: #D0A843 !important;
    color: #1a1a2e !important;
    border: none !important;
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 0.5rem 1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.contact-form-wrapper button[type="submit"]:hover,
.contact-form-wrapper .wpforms-submit:hover,
.contact-form-wrapper input[type="submit"]:hover {
    background-color: rgba(208, 168, 67, 0.9) !important;
    transform: translateY(1px) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.contact-form-wrapper button[type="submit"]:active,
.contact-form-wrapper .wpforms-submit:active,
.contact-form-wrapper input[type="submit"]:active {
    transform: translateY(2px) !important;
}

/* Form field spacing */
.contact-form-wrapper .wpforms-field {
    margin-bottom: 1.5rem !important;
}

/* Privacy text */
.contact-form-wrapper .wpforms-privacy-text,
.contact-form-wrapper .wpforms-field-description {
    font-size: 0.75rem !important;
    color: #737373 !important;
    text-align: center !important;
    margin-top: 1rem !important;
}

/* Error styling */
.contact-form-wrapper .wpforms-error {
    color: #dc2626 !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
}

/* Success message */
.contact-form-wrapper .wpforms-confirmation-container {
    background-color: #f0fdf4 !important;
    border: 1px solid #86efac !important;
    color: #166534 !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
}

/* Responsive */
@media (max-width: 1024px) {
    #contact .grid {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }
}

/* Medlemmar CTA Button - No Hover Effects, Keep Dark Background and White Text */
.medlemmar-cta-button {
    background-color: hsl(220 26% 14%) !important; /* Dark navy - #1a1a2e */
    color: hsl(0 0% 100%) !important; /* White */
    text-decoration: none !important;
}

.medlemmar-cta-button:hover,
.medlemmar-cta-button:focus,
.medlemmar-cta-button:active,
.medlemmar-cta-button:visited {
    background-color: hsl(220 26% 14%) !important; /* Dark navy - #1a1a2e */
    color: hsl(0 0% 100%) !important; /* White */
    text-decoration: none !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Om föreningen Board Section Background */
section.om-foreningen-board-section-bg {
    background-color: #efece7 !important;
}

/* Om föreningen Board Cards - Whitish Background */
.om-foreningen-board-card {
    background-color: #ffffff !important;
    color: hsl(var(--foreground)) !important;
}

/* Om föreningen Board Role Text - Golden Accent Color */
.om-foreningen-board-card .text-accent,
.om-foreningen-board-section-bg .text-accent {
    color: #D0A843 !important;
}

/* Om föreningen Work Groups Cards - Whitish Background */
.om-foreningen-work-group-card {
    background-color: #ffffff !important;
    color: hsl(var(--foreground)) !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Force clipping of all child overflow */
    contain: layout style !important;
}

.om-foreningen-work-group-card:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}

/* Work Groups Accordion Styles */
.work-group-accordion-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    transition: max-height 0.3s ease-out;
    max-height: 0;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
}

/* Hide scrollbar for webkit browsers */
.work-group-accordion-content::-webkit-scrollbar,
.om-foreningen-work-group-card .work-group-accordion-content::-webkit-scrollbar,
.om-foreningen-work-group-card .work-group-accordion::-webkit-scrollbar,
.om-foreningen-work-group-card > div.p-6.pt-0::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

.work-group-accordion-content.hidden {
    display: none !important;
    max-height: 0 !important;
}

/* Ensure accordion content aligns with parent - prevent overflow and scrollbar */
.om-foreningen-work-group-card > div.p-6.pt-0 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
}

.om-foreningen-work-group-card > div.p-6.pt-0::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Force all content inside padded container to respect width */
.om-foreningen-work-group-card > div.p-6.pt-0 > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Ensure accordion content respects parent padding */
.om-foreningen-work-group-card > div.p-6.pt-0 .work-group-accordion-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.om-foreningen-work-group-card .work-group-accordion {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    position: relative !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
    min-width: 0 !important; /* Critical for flex children */
}

.om-foreningen-work-group-card .work-group-accordion::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Ensure accordion items don't overflow */
.om-foreningen-work-group-card .work-group-accordion-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
}

/* Ensure inner content respects parent width - no overflow - VERY SPECIFIC */
.om-foreningen-work-group-card .work-group-accordion-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    position: relative !important;
}

/* All direct children of accordion content - strict width constraints */
.om-foreningen-work-group-card .work-group-accordion-content > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important; /* Prevent flex items from overflowing */
}

/* Nested divs inside accordion content - all levels */
.om-foreningen-work-group-card .work-group-accordion-content div {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important; /* Critical for flex children */
}

/* Ensure all text elements inside respect width and don't overflow */
.om-foreningen-work-group-card .work-group-accordion-content p,
.om-foreningen-work-group-card .work-group-accordion-content > div > div,
.om-foreningen-work-group-card .work-group-accordion-content span,
.om-foreningen-work-group-card .work-group-accordion-content .block,
.om-foreningen-work-group-card .work-group-accordion-content .pb-0\.5 {
    max-width: 100% !important;
    width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
}

/* Ensure spacing classes don't cause overflow */
.om-foreningen-work-group-card .work-group-accordion-content .space-y-1,
.om-foreningen-work-group-card .work-group-accordion-content .space-y-2 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* Specifically target the flex items inside accordion content - constrain width strictly */
.om-foreningen-work-group-card .work-group-accordion-content .flex.items-start.gap-4 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
    gap: 1rem !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important; /* Critical for flex containers */
    display: flex !important; /* Ensure it's flex */
    align-items: flex-start !important;
}

/* Ensure flex children don't overflow - SVG gets flex-shrink: 0, text gets flex-shrink: 1 */
.om-foreningen-work-group-card .work-group-accordion-content .flex.items-start.gap-4 > *:not(svg):not(.flex-shrink-0) {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: calc(100% - 24px - 1rem) !important; /* Account for SVG (24px) + gap (1rem) */
    box-sizing: border-box !important;
}

/* SVG icon should not cause overflow - fixed size */
.om-foreningen-work-group-card .work-group-accordion-content .flex.items-start.gap-4 svg,
.om-foreningen-work-group-card .work-group-accordion-content .flex.items-start.gap-4 .flex-shrink-0 {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    box-sizing: border-box !important;
}

/* Text in flex items should wrap and not overflow - account for SVG + gap */
.om-foreningen-work-group-card .work-group-accordion-content .flex.items-start.gap-4 .flex-1,
.om-foreningen-work-group-card .work-group-accordion-content .flex.items-start.gap-4 p,
.om-foreningen-work-group-card .work-group-accordion-content .flex.items-start.gap-4 > p {
    min-width: 0 !important;
    width: 0 !important; /* Force flex-1 to shrink */
    flex: 1 1 0% !important;
    max-width: calc(100% - 40px) !important; /* Account for SVG (24px) + gap (16px) */
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-x: hidden !important;
}

/* All nested elements - prevent overflow */
.om-foreningen-work-group-card .work-group-accordion-content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important; /* Critical for nested flex/grid */
}

/* Force border-t to show on second accordion with even higher specificity */
div.om-foreningen-work-group-card div.work-group-accordion-item.border-t,
div.om-foreningen-work-group-card div.border-t.work-group-accordion-item,
.om-foreningen-work-group-card .work-group-accordion-item.border-t.border-b {
    border-top: 0.5px solid #e0e0e0 !important;
    border-top-width: 0.5px !important;
    border-top-style: solid !important;
    border-top-color: #e0e0e0 !important;
}

/* Accordion Item - Remove Background and ensure proper width */
.work-group-accordion-item {
    background-color: transparent !important;
    background: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure button trigger also respects width */
.work-group-accordion-trigger {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Accordion Trigger - No Background, Dark Text */
.work-group-accordion-trigger {
    cursor: pointer;
    outline: none;
    background-color: transparent !important;
    background: none !important;
    color: #1c1c1c !important;
    border: none !important;
}

.work-group-accordion-trigger span {
    color: #1c1c1c !important;
}

.work-group-accordion-trigger:hover {
    background-color: transparent !important;
    background: none !important;
    color: #1c1c1c !important;
}

.work-group-accordion-trigger:active {
    background-color: transparent !important;
    background: none !important;
}

.work-group-accordion-trigger:focus {
    background-color: transparent !important;
    background: none !important;
}

.work-group-accordion-trigger:focus {
    outline: 2px solid hsl(var(--accent));
    outline-offset: 2px;
}

/* Group Name - Dark Text */
.om-foreningen-work-group-card h3 {
    color: #1c1c1c !important;
}

.accordion-chevron {
    transition: transform 0.2s ease-out;
    color: #1c1c1c !important;
}

.accordion-chevron.rotate-180 {
    transform: rotate(180deg);
}

/* Accordion item borders for dividers - Thin and light gray - Consistent style */
div.om-foreningen-work-group-card div.work-group-accordion-item.border-b,
.om-foreningen-work-group-card .work-group-accordion-item.border-b {
    border-bottom: 0.5px solid #e0e0e0 !important;
    border-bottom-width: 0.5px !important;
    border-bottom-style: solid !important;
    border-bottom-color: #e0e0e0 !important;
    border-left: none !important;
    border-right: none !important;
}

/* Ensure border-b on second accordion item also has same style */
div.om-foreningen-work-group-card div.work-group-accordion-item.border-t.border-b,
.om-foreningen-work-group-card .work-group-accordion-item.border-t.border-b {
    border-bottom: 0.5px solid #e0e0e0 !important;
    border-bottom-width: 0.5px !important;
    border-bottom-style: solid !important;
    border-bottom-color: #e0e0e0 !important;
}

/* Line divider between accordions - Thin and light gray - Exact same style as bottom border */
div.om-foreningen-work-group-card div.work-group-accordion-item.border-t,
div.om-foreningen-work-group-card div.border-t.work-group-accordion-item,
div.om-foreningen-work-group-card div.work-group-accordion-item.border-t.border-b,
.om-foreningen-work-group-card .work-group-accordion-item.border-t.border-b {
    border-top: 0.5px solid #e0e0e0 !important;
    border-top-width: 0.5px !important;
    border-top-style: solid !important;
    border-top-color: #e0e0e0 !important;
    border-left: none !important;
    border-right: none !important;
}

/* Ensure both borders on second accordion have identical style */
div.om-foreningen-work-group-card div.work-group-accordion-item.border-t.border-b,
.om-foreningen-work-group-card .work-group-accordion-item.border-t.border-b {
    border-top: 0.5px solid #e0e0e0 !important;
    border-top-width: 0.5px !important;
    border-top-style: solid !important;
    border-top-color: #e0e0e0 !important;
    border-bottom: 0.5px solid #e0e0e0 !important;
    border-bottom-width: 0.5px !important;
    border-bottom-style: solid !important;
    border-bottom-color: #e0e0e0 !important;
    border-left: none !important;
    border-right: none !important;
}

.om-foreningen-work-group-card .work-group-accordion-item:last-child {
    border-bottom: none !important;
}


@media (max-width: 768px) {
    #contact {
        padding-top: 4rem !important;
        padding-bottom: 5rem !important;
    }
    
    .contact-form-wrapper {
        padding: 1.5rem !important;
    }
}

/* ============================================
   SUPPLIERS SECTION STYLES
   ============================================ */

/* Suppliers Section Background */
section.suppliers-section-bg {
    background-color: #efece7 !important;
}

/* Supplier Card Styles - From Reference */
.supplier-card {
    background-color: hsl(var(--card)) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;
    transition-property: all !important;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
    transition-duration: .15s !important;
}

.supplier-card:hover {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25) !important;
    transform: translateY(-.5rem) !important;
    border-color: hsl(var(--accent)) !important;
}

/* Logo Container Styles - From Reference */
.supplier-logo-container {
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
    border-radius: var(--radius) !important;
    padding: 2rem !important; /* p-8 */
    min-height: 180px !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;
    transition-property: all !important;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
    transition-duration: .3s !important;
}

.supplier-logo-container:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1) !important;
}

/* Logo Image Styles - From Reference */
.supplier-logo {
    max-width: 100% !important;
    max-height: 140px !important;
    object-fit: contain !important;
}

/* Category Pill - Silverish */
.supplier-category-pill {
    background-color: #e5e7eb !important; /* Silverish gray */
    border-color: #d1d5db !important;
    color: #374151 !important;
}

/* Supplier Button - efece7 background, turns goldenish on hover */
section.suppliers-section-bg .supplier-button {
    background-color: #efece7 !important;
    color: hsl(var(--primary)) !important;
    border-color: #e5e7eb !important; /* neutral-200 */
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
    transition-duration: .15s !important;
}

section.suppliers-section-bg a.supplier-button {
    background-color: #efece7 !important;
}

.suppliers-section-bg .supplier-button:hover {
    background-color: hsl(var(--accent)) !important;
    color: hsl(var(--accent-foreground)) !important;
    border-color: hsl(var(--accent)) !important;
}

/* Premium Badge Gradient - From Reference */
.supplier-premium-badge {
    background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.supplier-card.animate-fade-in {
    animation: fade-in .6s ease-out !important;
}

/* Premium Badge - Golden Gradient Pill with Dot */
section.suppliers-section-bg .supplier-premium-pill {
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 9999px !important; /* rounded-full */
    border-width: 0px !important; /* border-0 */
    border-color: transparent !important; /* border-transparent */
    /* Gradient background - from accent (golden) to yellow-400 - Direct colors */
    background: linear-gradient(to right, #D0A843, #facc15) !important;
    background-color: transparent !important; /* Override bg-primary */
    background-image: linear-gradient(to right, #D0A843, #facc15) !important;
    padding-left: 0.625rem !important; /* px-2.5 */
    padding-right: 0.625rem !important;
    padding-top: 0.125rem !important; /* py-0.5 */
    padding-bottom: 0.125rem !important;
    font-size: 0.75rem !important; /* text-xs */
    line-height: 1rem !important;
    font-weight: 600 !important; /* font-semibold */
    color: hsl(var(--foreground)) !important; /* text-foreground */
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important; /* transition-colors */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 0.15s !important;
    flex-shrink: 0 !important; /* shrink-0 */
}

/* Override ALL Tailwind classes to ensure gradient shows */
section.suppliers-section-bg .supplier-premium-pill.bg-primary,
section.suppliers-section-bg .supplier-premium-pill.bg-gradient-to-r,
section.suppliers-section-bg .supplier-premium-pill.from-accent,
section.suppliers-section-bg .supplier-premium-pill.to-yellow-400 {
    background: linear-gradient(to right, #D0A843, #facc15) !important;
    background-color: transparent !important;
    background-image: linear-gradient(to right, #D0A843, #facc15) !important;
}

/* Force gradient to show - override any inline or Tailwind styles */
section.suppliers-section-bg div.supplier-premium-pill {
    background: linear-gradient(to right, #D0A843, #facc15) !important;
    background-image: linear-gradient(to right, #D0A843, #facc15) !important;
}

/* ============================================
   SUPPLIER STYLES EXTRACTED FROM REFERENCE.CSS
   ============================================ */

/* Supplier Card - Whitish background with box-shadow from reference.css */
section.suppliers-section-bg .rounded-lg.bg-card {
    background-color: hsl(var(--card)) !important; /* Usually white/whitish */
    border-width: 1px !important;
    border-color: hsl(var(--border)) !important;
    border-radius: var(--radius) !important; /* This should be 0.5rem (8px) typically */
    color: hsl(var(--card-foreground)) !important;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    transition-property: all !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 0.15s !important;
}

/* Ensure card has white background explicitly and proper border radius */
section.suppliers-section-bg .rounded-lg.bg-card.shadow-sm {
    background-color: #ffffff !important;
}

/* Make sure border-radius is applied to cards - rounded-lg = 0.5rem (8px) */
section.suppliers-section-bg .rounded-lg.bg-card {
    border-radius: 0.5rem !important; /* 8px - equivalent to rounded-lg */
}

section.suppliers-section-bg .rounded-lg.bg-card:hover {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25) !important;
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    transform: translateY(-.5rem) !important;
    border-color: hsl(var(--accent)) !important;
}

/* Duration transition from reference.css */
section.suppliers-section-bg .duration-300 {
    transition-duration: 0.3s !important;
}

/* Logo container styles */
.suppliers-section-bg .bg-white.rounded-lg {
    background-color: rgb(255 255 255 / 1) !important;
    border-radius: var(--radius) !important;
    padding: 2rem !important;
    min-height: 180px !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;
    transition-property: all !important;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
    transition-duration: .3s !important;
}

.suppliers-section-bg .bg-white.rounded-lg:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1) !important;
}

/* Logo image styles */
.suppliers-section-bg .object-contain {
    object-fit: contain !important;
    max-width: 100% !important;
    max-height: 140px !important;
}

/* Ensure transitions work */
.suppliers-section-bg .transition-all {
    transition-property: all !important;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
    transition-duration: .15s !important;
}

.suppliers-section-bg .duration-300 {
    transition-duration: .3s !important;
}

/* ============================================
   MAXIMUM SPECIFICITY OVERRIDE FOR ACCORDION CONTENT WIDTH
   ============================================ */

/* Maximum specificity override for accordion content width - prevent overflow */
div.om-foreningen-work-group-card div.p-6.pt-0 div.work-group-accordion div.work-group-accordion-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-width: 0 !important;
    /* Ensure content doesn't exceed parent */
    display: block !important;
}

/* Maximum specificity for direct children of accordion content */
div.om-foreningen-work-group-card div.p-6.pt-0 div.work-group-accordion div.work-group-accordion-content > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
    /* Ensure nested content respects width */
    display: block !important;
}

/* Maximum specificity for all nested elements inside accordion content */
div.om-foreningen-work-group-card div.p-6.pt-0 div.work-group-accordion div.work-group-accordion-content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
}

/* Specific rule for space-y containers */
div.om-foreningen-work-group-card div.p-6.pt-0 div.work-group-accordion div.work-group-accordion-content > div > div.space-y-1,
div.om-foreningen-work-group-card div.p-6.pt-0 div.work-group-accordion div.work-group-accordion-content > div > div.space-y-2 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
}

/* Maximum specificity for flex items with gap inside accordion - ensure no overflow */
div.om-foreningen-work-group-card div.p-6.pt-0 div.work-group-accordion div.work-group-accordion-content div.flex.items-start.gap-4 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
    /* Ensure flex items can shrink below content size */
    align-items: flex-start !important;
    display: flex !important;
    /* Ensure gap doesn't cause overflow */
    gap: 1rem !important;
}

/* Maximum specificity for text in flex items - allow proper shrinking without calc */
div.om-foreningen-work-group-card div.p-6.pt-0 div.work-group-accordion div.work-group-accordion-content div.flex.items-start.gap-4 p.flex-1,
div.om-foreningen-work-group-card div.p-6.pt-0 div.work-group-accordion div.work-group-accordion-content div.flex.items-start.gap-4 > p {
    min-width: 0 !important;
    width: 0 !important;
    flex: 1 1 0% !important;
    /* Remove calc - let flex handle it naturally with gap */
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

/* Ensure SVG doesn't cause overflow - fixed size only */
div.om-foreningen-work-group-card div.p-6.pt-0 div.work-group-accordion div.work-group-accordion-content div.flex.items-start.gap-4 svg {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    box-sizing: border-box !important;
}

/* ============================================
   ABSOLUTE FINAL OVERRIDE - Force all elements to respect parent width
   ============================================ */
/* Nuclear option: Force clipping at card level for ALL elements */
div.om-foreningen-work-group-card,
div.om-foreningen-work-group-card *,
div.om-foreningen-work-group-card *::before,
div.om-foreningen-work-group-card *::after {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Force the padded container and all its children to respect width */
div.om-foreningen-work-group-card > div.p-6.pt-0,
div.om-foreningen-work-group-card > div.p-6.pt-0 * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Force flex containers to not exceed parent */
div.om-foreningen-work-group-card div.flex.items-start.gap-4 {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Force all text elements to wrap */
div.om-foreningen-work-group-card p,
div.om-foreningen-work-group-card span,
div.om-foreningen-work-group-card div {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
}

/* ==================================================
   MEMLEMMAR SECTION STYLES
================================================== */

/* Medlemmar Section Background */
.medlemmar-section-bg {
    background-color: #EEEDE6 !important;
}

/* Member Sort Button - No background, just border, aligned right */
.member-sort-button {
    background-color: transparent !important;
    background: none !important;
    border: 1px solid #d9d9d9 !important;
    color: hsl(var(--foreground)) !important;
    max-width: 200px !important;
    width: 200px !important;
    margin-left: auto !important; /* Push to right */
}

.member-sort-button:hover {
    background-color: transparent !important;
    border-color: #d9d9d9 !important;
}

/* Member Cards - White background */
.member-card {
    background-color: #ffffff !important;
}

/* Member Card Logo/Name Area - Golden background with padding */
.member-card-logo-area {
    background-color: #D0A8430D !important;
    /* Fallback for browsers that don't support 8-digit hex */
    background-color: rgba(208, 168, 67, 0.05) !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* Member Card Content Section - Spacing between items */
.member-card-content {
    gap: 1rem !important;
}

.member-card-content > * {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Member Card - Remove underlines from text */
.member-card-link,
.member-card-link:hover,
.member-card-link:focus,
.member-card-link:visited,
.member-card-link *,
.member-card,
.member-card a,
.member-card a:hover,
.member-card a:focus,
.member-card a:visited,
.member-card h3,
.member-card h3:hover,
.member-card p,
.member-card span,
.member-card div,
.member-card .group:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Ensure links inside member cards have no underline */
a.member-card-link,
.member-card a,
.member-card a * {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Featured Badge - Filled star icon aligned with font size */
.member-featured-badge .member-star-icon {
    width: 12px !important;
    height: 12px !important;
    fill: currentColor !important;
}

/* Member Card Company Name - Blackish color from theme */
.member-card-company-name {
    color: #1c1c1c !important; /* Blackish color from theme */
}

.member-card-company-name:hover {
    color: hsl(var(--accent)) !important; /* Accent color on hover */
}

/* Member Card Logo Area Company Name - Blackish color */
.member-card-logo-name {
    color: #1c1c1c !important; /* Blackish color from theme */
}

/* Member Card Description and Location - Reduce spacing */
.member-card-description {
    margin-bottom: 0.5rem !important; /* Reduce space below description */
}

.member-card-location {
    margin-top: 0 !important; /* Remove default margin */
}

/* Member Service Pills - Silverish background with black font, consistent borders */
.member-service-pill {
    background-color: #e5e5e5 !important; /* Silverish gray */
    border: 1px solid #d0d0d0 !important; /* Consistent border on all sides */
    border-top-width: 1px !important;
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;
    border-left-width: 1px !important;
    border-top-style: solid !important;
    border-right-style: solid !important;
    border-bottom-style: solid !important;
    border-left-style: solid !important;
    border-top-color: #d0d0d0 !important;
    border-right-color: #d0d0d0 !important;
    border-bottom-color: #d0d0d0 !important;
    border-left-color: #d0d0d0 !important;
    color: #000000 !important; /* Black font */
    padding-top: 0.375rem !important; /* Consistent top padding */
    padding-bottom: 0.375rem !important; /* Consistent bottom padding */
}

.member-service-pill:hover {
    background-color: #d5d5d5 !important;
    border-color: #c0c0c0 !important;
    border-top-color: #c0c0c0 !important;
    border-right-color: #c0c0c0 !important;
    border-bottom-color: #c0c0c0 !important;
    border-left-color: #c0c0c0 !important;
    color: #000000 !important;
}

/* ============================================
   STOCKHOLM SILHOUETTE SECTION
   ============================================ */

.footer-silhouette-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 9rem !important; /* Reduced from 13rem for mobile - makes it appear wider */
    pointer-events: none !important;
    margin-bottom: -2rem !important;
    padding: 0 !important;
    z-index: 0 !important;
    background-repeat: repeat-x !important;
    background-position: center bottom !important;
    background-size: auto 100% !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    filter: brightness(1.2) contrast(1.1) !important;
    -webkit-filter: brightness(1.2) contrast(1.1) !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
    isolation: isolate !important;
    will-change: auto !important;
    background-blend-mode: normal !important;
}

@media (min-width: 768px) {
    .footer-silhouette-wrapper {
        height: 15rem !important;
        margin-bottom: -3rem !important;
    }
}

@media (min-width: 1024px) {
    .footer-silhouette-wrapper {
        height: 17rem !important;
        margin-bottom: -4rem !important;
    }
}