html {
    margin: 0;
    padding: 0;
    background-color: transparent !important;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body {
    background-image: url('/tile.svg') ;
    background-repeat: repeat;
    background-size: 120px 120px;
    background-position: 0 0;
    background-color: #000000;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: 'Roboto Mono', monospace;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    position: relative;
    height: auto;
}

/* Ensure strong text stays white across the site */
strong {
    color: #ffffff;
}

.header-container {
    background-color: transparent;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.3s ease;
    overflow: visible;
    position: relative;
}

.header-container.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0;
    background-color: #111111;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    height: auto;
}

/* Homepage navbar hiding is handled by inline styles and JavaScript in index.php */

.header-container.is-fixed .logo-container {
    display: none;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Homepage: navbar wrapper when fixed */
#navbar-wrapper.is-fixed {
    background-color: #111111;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#navbar-wrapper.is-fixed .navbar {
    margin: 0;
}

/* Homepage: navbar brand (logo) positioning when fixed */
#navbar-wrapper.is-fixed .navbar-brand {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    order: 2 !important;
}

/* Homepage: navbar menu positioning when fixed */
#navbar-wrapper.is-fixed .navbar-menu {
    order: 1 !important;
    margin-right: 4.5rem !important;
}

/* Ensure homepage dropdowns match other pages - override any homepage-specific styles */
#navbar-wrapper.is-fixed .navbar-dropdown {
    background-color: #1a1a1a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

@media screen and (min-width: 1024px) {
    #navbar-wrapper.is-fixed .navbar-dropdown {
        padding: 0.5rem 0 !important;
        min-width: 200px !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
        border-radius: 0 0 4px 4px !important;
    }
    
    #navbar-wrapper.is-fixed .navbar-dropdown .navbar-item {
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap !important;
    }
    
    #navbar-wrapper.is-fixed .navbar-dropdown .navbar-item:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
}

/* Homepage: navbar inner div when wrapper is fixed */
#navbar-wrapper.is-fixed .navbar > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Mobile: homepage navbar wrapper positioning */
@media screen and (max-width: 1023px) {
    #navbar-wrapper.is-fixed .navbar > div {
        position: relative;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Hamburger on left */
    #navbar-wrapper.is-fixed .navbar .navbar-burger {
        position: absolute;
        left: 1rem;
        z-index: 10;
        pointer-events: auto;
        cursor: pointer;
    }
    
    /* Ensure hamburger is clickable and not blocked */
    #navbar-wrapper.is-fixed .navbar .navbar-brand {
        pointer-events: none;
    }
    
    #navbar-wrapper.is-fixed .navbar .navbar-brand .navbar-burger,
    #navbar-wrapper.is-fixed .navbar .navbar-brand .logo-in-nav {
        pointer-events: auto;
    }
    
    /* Logo on right */
    #navbar-wrapper.is-fixed .navbar .navbar-brand {
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
        order: 2 !important;
        padding-right: 1rem !important;
    }
    
    #navbar-wrapper.is-fixed .navbar .logo-in-nav {
        margin-left: auto;
    }
    
    /* Menu positioning - remove margins on mobile to prevent overflow */
    #navbar-wrapper.is-fixed .navbar .navbar-menu {
        order: 1 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ensure navbar menu items don't overflow */
    #navbar-wrapper.is-fixed .navbar .navbar-menu .navbar-start {
        width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }
}

.header-container.is-fixed .hero-section-text {
    display: none;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0 2rem 0;
    max-width: 100%;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.logo {
    max-width: 100%;
    height: auto;
    max-height: 120px;
    transition: all 0.3s ease;
}

.logo-small {
    max-height: 32px;
    height: 32px;
    width: auto;
    transition: all 0.3s ease;
    display: block;
}

.logo-in-nav {
    padding: 0.25rem 0.5rem !important;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    height: auto !important;
    min-height: auto !important;
    margin: 0 !important;
}

.hero-section-text {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.content-section {
    background-color: rgb(106, 106, 106);
    border: 1px solid rgb(255, 255, 255);
    border-radius: 2px;
    margin: 0rem 0;
    color: white;
    text-align: left;
    position: relative;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

/* Typography for main content (inside pages and news articles) - Desktop */
.content-section h1,
.content-section-community h1,
#content h1,
.news-content h1 {
    font-size: 1.6em;
    font-weight: 300;
    font-family: 'Roboto Mono', monospace;
    color: white;
    margin: 0;
}

.content-section h2,
.content-section-community h2,
#content h2,
.news-content h2 {
    font-size: 1.4em;
    font-weight: 300;
    font-family: 'Roboto Mono', monospace;
    color: white;
    margin: 0;
}

.content-section h3,
.content-section-community h3,
#content h3,
.news-content h3 {
    font-size: 1.2em;
    font-weight: 300;
    font-family: 'Roboto Mono', monospace;
    color: white;
    margin: 0;
}

.content-section h4,
.content-section-community h4,
#content h4,
.news-content h4 {
    font-size: 1.1em;
    font-weight: 300;
    font-family: 'Roboto Mono', monospace;
    color: white;
    margin: 0;
}

.content-section p,
.content-section-community p,
#content p,
.news-content p {
    font-size: 1.0em;
    margin: 0;
    margin-bottom: 0.9em;
}

/* Desktop: Images in inside page content area */
@media (min-width: 1024px) {
    #content img {
        height: auto;
    }
}

/* News article specific styles */
.news-date-subtitle {
    color: #999;
    font-size: 0.9em;
    margin-bottom: 1.5rem;
}

.date-subtitle-separator {
    margin: 0 0.5em;
}

.back-to-news-link {
    margin-top: 2rem;
}

.content-section-community {
    overflow: visible;
}

.community-header-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: 50% center;
    display: block;
    border-bottom:1px solid #363535;
    filter: grayscale(20%);
}

/* Content section background variations */
.content-section-summary {
    background-color: rgb(30, 30, 30);
}

/* Event section styles */


.event-section h3 {
    font-size: 1.8em;
    font-weight: 400;
    font-family: 'Roboto Mono', monospace;
    color: #222222;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    padding-top: 1rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
    
}

.content-section-events-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.content-section-events-container h3 {
    text-align: center;
}

.content-section-events-container h3 span {
    display: inline-block;
}


.content-section-events {
    width: 100%;
}

.content-section-events.is-flex {
    flex-direction: row;
    align-items: stretch;
    gap: 0rem;
    padding: 0.5rem;
    width: 100%;
}

.date-box-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.56rem;
    padding: 0.28rem;
    background-color: white;
    margin: 0 0 0.56rem 0!important;
    box-sizing: border-box;
    overflow: hidden;
}

.date-box {    
    padding: 0rem;
    color: #ffffff;
    background-color: #111111;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: auto;
}



.date-box .date {
    font-size: 0.84rem;
    font-weight: bold;
    text-align: center;
    position: relative;
    z-index: 1;
}

.date-box .month {
    font-size: 0.5rem;
    font-weight: normal;
    text-transform: uppercase;
    opacity: 0.8;
    text-align: center;
    position: relative;
    z-index: 1;
}

.date{
    font-size: 2rem!important;
}

.month{
    font-size: 1.2rem!important;
}

.event-details {
    flex: 1;
    color: #222222;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.event-details h4 {
    font-size: 1.25rem;
    font-weight: 400;
    text-align: left;
    padding-left: 1rem;
    vertical-align: middle;
}

.event-details p {
    font-size: 0.95rem;
    text-align: left;
    padding-left: 1rem;
    vertical-align: middle;
    margin-bottom: 0em!important;
}

.event-card {
    background-color: white;
    padding: 0;
    color: #000000;
}

.event-card h3 {
    margin-bottom: 0.56em !important;
    font-size: 1.4em !important;
    font-weight: 300 !important;
    font-family: 'Roboto Mono', monospace !important;
    color: #000000 !important;
}

.event-card p {
    margin-bottom: 0.84em !important;
    font-size: 1em !important;
    line-height: 1.12 !important;
    color: #000000 !important;
}

.event-card .event-meta {
    margin-bottom: 0.56em !important;
    color: #000000 !important;
}

/* Ensure event meta (time, location) is left aligned everywhere */
.event-meta {
    text-align: left;
}

/* Override strong color for event meta labels like Time: and Location: */
.event-meta strong {
    color: #000000 !important;
}

.event-card a {
    color: #000000 !important;
}

.event-date-display {
    background-color: #111111;
    padding: 0.5rem;
    color: white;
    text-transform: uppercase;
    text-align: center;
}

.event-content-column {
    width: 85%;
    text-align: left;
}

.event-content-column h3 {
    text-align: left;
}

.event-date-column {
    width: 15%;
    flex: 0 0 15%;
}

.date-box-container .column {
    padding: 0 !important;
}

/* Month heading styles for events page */
.events-month-heading {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.5em;
    font-weight: 600;
    color: white;
    text-align: left;
}

/* Responsive styles for month headings */
@media (max-width: 768px) {
    .events-month-heading {
        font-size: 1.3em;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        text-align: left;
    }
    
    /* Ensure event titles are left-aligned on mobile */
    .event-content-column h3 {
        text-align: left !important;
    }
}

@media (max-width: 414px) {
    .events-month-heading {
        font-size: 1.2em;
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
        text-align: left;
    }
    
    /* Ensure event content column is responsive on mobile */
    .event-content-column {
        width: 100% !important;
        flex: 1 1 auto !important;
        min-width: 0;
        overflow-wrap: break-word;
        word-wrap: break-word;
        text-align: left !important;
    }
    
    /* Ensure event titles are left-aligned on mobile */
    .event-content-column h3 {
        text-align: left !important;
    }
    
    .event-date-column {
        width: auto !important;
        flex: 0 0 auto !important;
        min-width: 60px;
    }
    
    .date-box-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.2rem !important;
    }
    
    /* Ensure container doesn't overflow */
    .content-section-events-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        box-sizing: border-box !important;
    }
    
    /* Center the heading on mobile */
    .content-section-events-container h3 {
        text-align: center !important;
        width: 100% !important;
    }
    
    .content-section-events-container h3 span {
        display: inline-block !important;
        width: auto !important;
    }
    
    /* Ensure container doesn't overflow */
    .content-section-events-container {
        overflow-x: hidden !important;
    }
    
    /* Ensure main container doesn't cause overflow */
    main.container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
}

/* Desktop: Ensure main content area on inside pages uses same max-width as other pages */
/* This ensures inside pages match the max-width used on homepage, events, and blog pages */
@media (min-width: 1024px) {
    main.container,
    main#main-content {
        max-width: 1040px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* Footer styles */
.footer-custom {
    background-color: transparent;
    color: white;
    max-width: 100% !important;
    margin: 0;
    padding: 0;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.footer-custom > div[style*="background-color: #e0e0e0"] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.footer-content {
    font-size: 1.2em;
    font-weight: 200;
}

.footer-link {
    color: white !important;
    text-decoration: underline !important;
}

/* Footer sitemap responsive - line break after section names on mobile */
@media (max-width: 768px) {
    .footer-content p strong {
        display: block;
        margin-bottom: 0.25rem;
    }
}


.hero-section {
    text-align: left;
    padding: 0rem 0;
    max-width: 1040px;
    margin: 0 auto;
    
}

.hero-section-text {
    text-align: center;
    margin: 0 auto;
    max-width: 850px;
}
.hero-section h2 {
    font-size: 2.2em;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    color: rgb(255, 255, 255);
    line-height: 1.5;
    text-align: center;
    padding: 0rem 0;
 
}

.hero-section-text {
    text-align: center;
    margin: 0 auto;
    max-width: 850px;
}

.hero-section h3 {
    font-size: 2.2em;
    font-weight: 400;
    font-family: 'Roboto Mono', monospace;
    color: rgb(255, 255, 255);
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    margin-top: 2rem;
}

/* Highlight classes - background images removed, classes kept for compatibility */

.belief-box {
    background-color: rgb(106, 106, 106);
    border: 1px solid rgb(255, 255, 255);
    border-radius: 2px;
    margin: 0;
    color: white;
    text-align: left;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.belief-item {
    font-size: 1.2rem!important;
    color: rgb(255, 255, 255);
    padding: 1rem;
    text-align: center;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #111111;
}

.belief-item p {
    margin: 0;
}

.content-section-wrapper {
    text-align: center;
    padding: 0rem 0;
    max-width: 1040px;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.columns.is-multiline {
    align-items: stretch;
}

.columns.is-multiline .column {
    display: flex;
}

.cta-button {
    margin-top: auto;
    background-color: white;
    color: #333333;
    border: 2px solid white;
    border-radius: 0;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: 'Roboto Mono', monospace;
}

.cta-button:hover {
    background-color: #f8e4e4;
    color: rgb(0, 0, 0);
    border-color: white;
}

.cta-button:active {
    background-color: #e8d4d4;
}

.homepage-button {
    display: inline-block;
    background-color: rgb(106, 106, 106);
    border: 1px solid rgb(255, 255, 255);
    border-radius: 2px;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    font-family: 'Roboto Mono', monospace;
    font-size: 1em;
    font-weight: 300;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
}

.homepage-button:hover {
    background-color: rgb(136, 136, 136);
    color: white;
    text-decoration: none;
}

h3 {
    font-size: 1.8em;
    font-weight: 300;
    font-family: 'Roboto Mono', monospace;
}

h4 {
    font-size: 1.6em;
    font-weight: 300;
    font-family: 'Roboto Mono', monospace;
}

p{
    margin-bottom: 1.5em;
    font-size: 1em;
}

a{
    color:#4A9EFF;
    text-decoration:underline;
    text-underline-offset: 0.3em;
}

a:hover {
    color:#ffffff;
    text-decoration:underline;
    text-underline-offset: 0.3em;
}
/* Override general link styles for footer */
footer a,
footer div a,
footer .content a,
footer .container a,
.footer a,
.footer div a,
.footer .content a,
.footer .container a,
body footer a,
body footer div a,
body footer .content a,
body footer .container a,
body .footer a,
body .footer div a,
body .footer .content a,
body .footer .container a {
    color: white !important;
    text-decoration: underline !important;
}

ul {
    list-style-type: disc;
    padding-left: 2em;
}

li {
    margin-bottom: 0.5em;
    font-size: 0.935em;
}


/* Twemoji styling - force small size */
img.emoji,
.emoji,
img[src*="twemoji"],
img[src*="emoji"] {
    height: 1.5em !important;
    width: 1.5em !important;
    margin: 0 0.05em 0 0.1em !important;
    vertical-align: -0.1em !important;
    display: inline-block !important;
    max-height: 1.5em !important;
    max-width: 1.5em !important;
    min-height: 1.5em !important;
    min-width: 1.5em !important;
    object-fit: contain !important;
}




@media (max-width: 768px) {
    body {
        padding-left: 0;
        padding-right: 0;
    }
    
    .container {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Typography for main content (inside pages and news articles) - Responsive */
    .content-section h1,
    .content-section-community h1,
    #content h1,
    .news-content h1 {
        font-size: 1.4em;
    }
    
    .content-section h2,
    .content-section-community h2,
    #content h2,
    .news-content h2 {
        font-size: 1.2em;
    }
    
    .content-section h3,
    .content-section-community h3,
    #content h3,
    .news-content h3 {
        font-size: 1.1em;
    }
    
    .content-section h4,
    .content-section-community h4,
    #content h4,
    .news-content h4 {
        font-size: 1.0em;
    }
    
    .content-section p,
    .content-section-community p,
    #content p,
    .news-content p {
        font-size: 0.9em;
    }
    
    h3 {
        font-size: 1.7em;
    }
    
    /* Reduce spacing between belief items on mobile - max 15px gap */
    .hero-section .columns.is-multiline {
        gap: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .hero-section .columns.is-multiline .column {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .hero-section .columns.is-multiline .column:not(:last-child) {
        margin-bottom: 15px !important;
    }
    
    .hero-section .belief-box {
        margin-bottom: 0 !important;
    }
    
    h4 {
        font-size: 1.5em;
    }
    
    p {
        font-size: 1em;
    }
    li {
        font-size: 1em;
    }
    
    .logo {
        max-height: 80px;
    }
    
    .header-container {
        padding: 1rem 0 0rem 0;
        margin: 0 !important; /* Remove margin to eliminate white gap on mobile */
    }
    
    .content-section {
        margin: 0.5rem 0;
    }
    
    .community-header-image {
        height: 200px;
    }

    .hero-section h2 {
        font-size: 1.7em;
        
    }
    .hero-section h3 {
        font-size: 1.7em;
        
    }
    
    .event-card {
        padding: 0 !important;
    }
    
    .event-card h3 {
        font-size: 1.2em !important;
        margin-bottom: 0.45em !important;
        font-weight: 300 !important;
        font-family: 'Roboto Mono', monospace !important;
    }
    
    .event-card p {
        font-size: 1em !important;
        margin-bottom: 0.7em !important;
        line-height: 1.1 !important;
    }
    
    .date-box-container {
        gap: 0.45rem !important;
        padding: 0.22rem !important;
        margin-bottom: 0.45rem !important;
    }
    
    .date {
        font-size: 2rem !important;
    }
    
    .month {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 414px) {
    body {
        padding-left: 2%;
        padding-right: 2%;
    }

    /* Typography for main content (inside pages and news articles) - Responsive */
    .content-section h1,
    .content-section-community h1,
    #content h1,
    .news-content h1 {
        font-size: 1.4em;
    }
    
    .content-section h2,
    .content-section-community h2,
    #content h2,
    .news-content h2 {
        font-size: 1.2em;
    }
    
    .content-section h3,
    .content-section-community h3,
    #content h3,
    .news-content h3 {
        font-size: 1.1em;
    }
    
    .content-section h4,
    .content-section-community h4,
    #content h4,
    .news-content h4 {
        font-size: 1.0em;
    }
    
    .content-section p,
    .content-section-community p,
    #content p,
    .news-content p {
        font-size: 0.9em;
    }

    h3 {
        font-size: 1.4em;
    }
    
    h4 {
        font-size: 1.2em;
    }
    
    p {
        font-size: 0.8em;
    }
    
    li {
        font-size: 0.8em;
    }
    
    .container {
        padding-left: 0%;
        padding-right: 0%;
    }
    
    .content-section {
        padding: 0rem;
        margin: 0.5rem 0;
    }
    
    .community-header-image {
        width: 100%;
        height: 200px;
    }
    
    .hero-section,
    .content-section-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    .hero-section h2 {
        font-size: 1.3em;
        
    }
    .hero-section h3 {
        font-size: 1.3em;
        
    }
    
    .event-card {
        padding: 0 !important;
    }
    
    .event-card h3 {
        font-size: 1.2em !important;
        margin-bottom: 0.4em !important;
        font-weight: 300 !important;
        font-family: 'Roboto Mono', monospace !important;
    }
    
    .event-card p {
        font-size: 0.8em !important;
        margin-bottom: 0.6em !important;
        line-height: 1.05 !important;
    }
    
    .date-box-container {
        gap: 0.4rem !important;
        padding: 0.2rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    .date {
        font-size: 2rem !important;
    }
    
    .month {
        font-size: 1.2rem !important;
    }
}

@media (min-width: 415px) and (max-width: 768px) {
    body {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Typography for main content (inside pages and news articles) - Responsive */
    .content-section h1,
    .content-section-community h1,
    #content h1,
    .news-content h1 {
        font-size: 1.4em;
    }
    
    .content-section h2,
    .content-section-community h2,
    #content h2,
    .news-content h2 {
        font-size: 1.2em;
    }
    
    .content-section h3,
    .content-section-community h3,
    #content h3,
    .news-content h3 {
        font-size: 1.1em;
    }
    
    .content-section h4,
    .content-section-community h4,
    #content h4,
    .news-content h4 {
        font-size: 1.0em;
    }
    
    .content-section p,
    .content-section-community p,
    #content p,
    .news-content p {
        font-size: 0.9em;
    }
    
    h3 {
        font-size: 1.4em;
    }
    
    h4 {
        font-size: 1.2em;
    }
    
    p {
        font-size: 0.8em;
    }
    
    li {
        font-size: 1em;
    }

    .container {
        padding-left: 0%;
        padding-right: 0%;
    }
    
    .content-section {
        padding: 0rem;
        margin: 0.5rem 0;
    }
    
    .community-header-image {
        width: 100%;
        height: 250px;
    }
    
    .hero-section,
    .content-section-wrapper {
        padding-left: 2%;
        padding-right: 2%;
    }
    .hero-section h2 {
        font-size: 1.5em;
        
    }
    .hero-section h3 {
        font-size: 1.5em;
        
    }
    
    .event-card {
        padding: 0 !important;
    }
    
    .event-card h3 {
        font-size: 1.2em !important;
        margin-bottom: 0.5em !important;
        font-weight: 300 !important;
        font-family: 'Roboto Mono', monospace !important;
    }
    
    .event-card p {
        font-size: 0.8em !important;
        margin-bottom: 0.75em !important;
        line-height: 1.08 !important;
    }
    
    .date-box-container {
        gap: 0.5rem !important;
        padding: 0.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .date {
        font-size: 2rem !important;
    }
    
    .month {
        font-size: 1.2rem !important;
    }
}

/* Minimal Navigation Styles */
.navbar {
    font-family: 'Roboto Mono', monospace;
    background-color: #111111 !important;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.header-container .container {
    max-width: 1040px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible;
}

.header-container .navbar {
    margin: 0;
    max-width: 1040px;
    width: 1040px;
    transition: all 0.3s ease;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 1080px) {
    .header-container .navbar {
        width: calc(100% - 2rem);
        max-width: 1040px;
        left: 0;
        transform: none;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

.header-container.is-fixed .navbar {
    border-bottom: none;
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 1040px;
    max-width: 1040px;
    margin: 0 auto;
}

@media (max-width: 1080px) {
    .header-container {
        margin: 0 !important; /* Remove margin to eliminate white gap on mobile */
    }
    
    .header-container.is-fixed {
        padding: 0 !important;
        margin: 0 !important;
        top: 0;
    }
    
    .header-container.is-fixed .navbar {
        width: 100%;
        max-width: 100%;
        left: 0;
        transform: none;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .header-container.is-fixed .navbar > div {
        padding: 0.25rem 1rem !important;
        margin: 0 !important;
    }
}

/* Desktop: ensure no white gap at top */
@media (min-width: 1081px) {
    .header-container {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .header-container .navbar {
        margin: 0 !important;
    }
}

.header-container.is-fixed .navbar .navbar-brand {
    display: flex;
    align-items: center;
    margin-left: auto; /* Move logo to the right */
    order: 2; /* Place after navbar-menu */
}

.header-container.is-fixed .navbar > div {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-container.is-fixed .navbar .navbar-menu {
    order: 1; /* Place menu before logo */
    margin-right: 4.5rem !important; /* Widen gap between navigation and logo */
}

/* Mobile: ensure logo moves to right when fixed */
@media screen and (max-width: 1023px) {
    .header-container.is-fixed .navbar > div {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: relative;
        padding-left: 0 !important; /* Remove left padding to allow hamburger alignment */
        padding-right: 0 !important; /* Remove right padding to allow logo alignment */
    }
    
    .header-container.is-fixed .navbar .navbar-brand {
        display: flex;
        align-items: center;
        margin-left: auto !important; /* Move navbar-brand container to the right */
        order: 2;
        padding-right: 1rem; /* Add padding to align logo with content edge */
    }
    
    /* Keep burger menu on left side, aligned with content */
    .header-container.is-fixed .navbar .navbar-burger {
        position: absolute;
        left: 1rem; /* Align with main content padding */
        z-index: 10;
    }
    
    /* Logo moves to right within navbar-brand */
    .header-container.is-fixed .navbar .logo-in-nav {
        margin-left: auto;
    }
    
    .header-container.is-fixed .navbar .navbar-menu {
        order: 1;
        margin-left: 3rem; /* Space for burger menu */
        margin-right: 3.5rem !important; /* Widen gap between navigation and logo on mobile */
    }
}


#main-content {
    transition: padding-top 0.3s ease;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* Mobile: Add gap between sticky navbar and content section */
@media screen and (max-width: 768px) {
    #main-content {
        margin-top: 1.2rem;
    }
    
    .header-container.is-fixed ~ main#main-content {
        padding-top: 1.5rem;
    }
    
    .header-container.is-fixed ~ main#main-content .content-section:first-child,
    .header-container.is-fixed ~ main#main-content .content-section-wrapper:first-child .content-section:first-child {
        margin-top: 1.5rem !important;
    }
}

@media screen and (max-width: 768px) {
    /* Fix iOS scrolling - ensure html and body are scrollable */
    html {
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        height: 100%;
        position: relative;
    }
    
    body {
        margin: 0;
        padding: 0;
        position: relative;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto;
        min-height: 100vh;
        /* Ensure flex doesn't prevent scrolling */
        flex: 1 0 auto;
    }
    
    .header-container {
        padding: 2rem 0 0rem 0;
        margin: 0 !important; /* Remove top margin to eliminate white gap */
        flex-shrink: 0;
    }
    
    .header-container .navbar {
        margin: 0.75rem 0 0rem 0; /* Reduced bottom margin for responsive */
        max-width: 100%;
        width: 100%;
        left: 0;
        transform: none;
    }
    
    .header-container .navbar > div {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0.25rem 1rem !important;
    }
    
    /* Add gap between sticky navbar and main content section */
    .header-container.is-fixed ~ main#main-content .content-section:first-child,
    .header-container.is-fixed ~ main#main-content .content-section-wrapper:first-child .content-section:first-child {
        margin-top: 0.75rem !important;
    }
    
    /* Ensure main content and sections don't prevent body scrolling */
    main.container,
    main#main-content {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        position: relative;
        flex-shrink: 0;
        overflow: visible !important;
        height: auto;
    }
    
    .content-section-wrapper,
    .content-section {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        position: relative;
        overflow: visible !important;
    }
    
    /* Ensure footer doesn't prevent scrolling */
    footer.footer-custom {
        flex-shrink: 0;
    }
}

.navbar.is-dark {
    background-color: #111111 !important;
}

.navbar-brand {
    background-color: transparent !important;
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center;
    display: flex;
    line-height: 1 !important;
}

.navbar-menu {
    background-color: #111111 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.navbar-start {
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
}

/* Desktop: align "Home" with main content on non-homepage pages */
@media (min-width: 1081px) {
    /* The navbar div has inline padding: 0.25rem 1rem */
    /* Content sections are inside main.container which uses Bulma's default container padding (0.75rem) */
    /* To align "Home" with content, we need to match the container's left padding */
    /* Override the inline padding to match Bulma's container padding */
    .header-container .navbar > div {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

.navbar-item,
.navbar-link {
    color: rgba(255, 255, 255, 0.95) !important;
    background-color: transparent !important;
    transition: color 0.2s, background-color 0.2s;
    padding: 0.5rem 0.75rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* Use Bulma's default chevron behavior with adequate spacing */
.navbar-link {
    padding-right: 0.75rem !important; /* match .navbar-item */
    position: relative;
}

/* Ensure regular navbar items (without dropdowns) have same padding as dropdown items */
.navbar-item:not(.has-dropdown) {
    padding-right: 2.25rem !important; /* Match dropdown items padding */
}

/* Add spacing between menu item text and Bulma's default chevron */
.navbar-item.has-dropdown .navbar-link {
    padding-right: 2.25rem !important; /* Make room for chevron with spacing */
}

.navbar-item.has-dropdown .navbar-link::after {
    margin-left: 1.5rem !important; /* Adequate spacing between text and chevron */
    color: white !important; /* Ensure chevron is white */
    border-color: white !important; /* Ensure chevron border is white */
    border-top-color: white !important; /* Bulma chevron uses border-top */
}

/* Mobile: ensure adequate spacing on smaller screens */
@media screen and (max-width: 1023px) {
    /* Ensure regular navbar items (without dropdowns) have same padding as dropdown items on mobile */
    .navbar-item:not(.has-dropdown) {
        padding-right: 2.75rem !important; /* Match dropdown items padding on mobile */
    }
    
    .navbar-item.has-dropdown .navbar-link {
        padding-right: 2.75rem !important; /* Extra room for chevron on mobile */
    }
    
    .navbar-item.has-dropdown .navbar-link::after {
        margin-left: 1.75rem !important; /* More spacing on mobile for better touch targets */
        color: white !important; /* Ensure chevron is white on mobile */
        border-color: white !important; /* Ensure chevron border is white on mobile */
        border-top-color: white !important; /* Bulma chevron uses border-top - ensure white on mobile */
    }
}

.navbar-item:hover,
.navbar-link:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Remove background color change on hover for top-level navigation items (non-dropdown and dropdown links) on desktop */
@media screen and (min-width: 1024px) {
    .navbar-item:not(.has-dropdown):hover {
        background-color: transparent !important;
    }
    
    /* Remove background color change on hover for dropdown navigation links (not the containing div) */
    .navbar-item.has-dropdown .navbar-link:hover {
        background-color: transparent !important;
    }
}

.navbar-item.is-active {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Add bottom border to entire menu when active/hovered/clicked */
.navbar-menu.is-active {
    border-bottom: 1px solid #666666 !important;
    border-left: 1px solid #666666 !important;
    border-right: 1px solid #666666 !important;
    padding-bottom: 1rem !important; /* Increased bottom padding */
}


/* Global dropdown styles - consistent across all pages */
.navbar-dropdown {
    background-color: #1a1a1a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.navbar-dropdown .navbar-item {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Desktop dropdown styles - consistent dimensions and styling */
@media screen and (min-width: 1024px) {
    .navbar-dropdown {
        padding: 0.5rem 0 !important;
        min-width: 200px !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
        border-radius: 0 0 4px 4px !important;
    }
    
    .navbar-dropdown .navbar-item {
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap !important;
    }
}

.navbar-dropdown .navbar-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.navbar-dropdown hr.navbar-divider {
    background-color: rgba(255, 255, 255, 0.1) !important;
    margin: 0.5rem 0 !important;
}

.navbar-dropdown h6.navbar-item {
    padding: 0.5rem 0.75rem !important;
    margin: 0 !important;
    pointer-events: none;
}

.navbar-burger {
    color: white;
}

.navbar-burger span {
    background-color: white;
}

@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: #111111 !important;
        max-height: none !important;
    }
    
    .navbar-menu.is-active {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        z-index: 1000;
        border-bottom: 1px solid #666666 !important;
        border-left: 1px solid #666666 !important;
        border-right: 1px solid #666666 !important;
        padding-bottom: 1rem !important; /* Increased bottom padding on mobile */
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    .navbar {
        position: relative;
        overflow: visible;
    }
    
    .navbar > div {
        position: relative;
        overflow: visible;
    }
    
    .navbar-start {
        flex-direction: column;
        width: 100%;
        align-items: flex-start !important; /* Left align all menu items */
        text-align: left !important;
        box-sizing: border-box !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Homepage: ensure navbar menu doesn't overflow on mobile */
    #navbar-wrapper.is-fixed .navbar .navbar-menu.is-active {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    #navbar-wrapper.is-fixed .navbar .navbar-menu .navbar-start {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }
    
    .navbar-item,
    .navbar-link {
        text-align: left !important;
        justify-content: flex-start !important;
        width: 100%;
    }
    
    .navbar-item.has-dropdown {
        width: 100%;
    }
    
    .navbar-dropdown {
        position: static !important;
        display: none;
        width: 100% !important;
        min-width: 100% !important;
        box-shadow: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 0 !important;
        padding: 0 !important;
        background-color: #1a1a1a !important;
    }
    
    .navbar-item.has-dropdown.is-active .navbar-dropdown {
        display: block !important;
    }
    
    .navbar-dropdown .navbar-item {
        text-align: left !important;
        justify-content: flex-start !important;
        padding-left: 2rem !important; /* Indent submenu items */
        padding-right: 1rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        width: 100%;
        white-space: normal !important; /* Allow wrapping on mobile */
    }
    
    /* Ensure dropdown links are clickable and visible */
    .navbar-item.has-dropdown .navbar-link {
        cursor: pointer;
        pointer-events: auto;
        user-select: none; /* Prevent text selection when tapping */
    }
    
    /* Rotate chevron when dropdown is active on mobile */
    .navbar-item.has-dropdown.is-active .navbar-link::after {
        transform: rotate(180deg) !important;
        transition: transform 0.3s ease;
    }
    
    /* Ensure dropdown items are clickable */
    .navbar-dropdown .navbar-item a {
        display: block;
        width: 100%;
        cursor: pointer;
    }
}

/* News list two-column layout */
.news-two-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1080px;
    margin: 0 auto;
}

.news-item-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* News embed styles for LinkedIn and other social media embeds */
.news-embed {
    position: relative;
    width: 100%;
    max-width: 504px;
    height: 601px;
    margin: 0 auto 1rem auto;
    overflow: hidden;
}

.embed-responsive-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.embed-responsive-wrapper iframe {
    width: 504px !important;
    height: 601px !important;
    border: none !important;
    display: block;
    margin: 0;
    overflow: hidden;
    scrolling: no;
}

/* Fallback for embeds that don't use the wrapper */
.news-embed iframe {
    width: 504px !important;
    height: 601px !important;
    border: none !important;
    display: block;
    margin: 0;
}

/* Blog post preview container - match embed dimensions */
.news-article-preview {
    width: 100%;
    max-width: 504px;
    min-height: 601px;
    margin: 0 auto 1rem auto;
    padding: 1rem;
    background-color: white;
    color: #222;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.news-article-preview h3,
.news-article-preview h4 {
    margin-top: 0;
}

.news-article-preview .read-more-link {
    margin-top: auto;
    padding-top: 1rem;
}

@media (max-width: 768px) {
    .news-two-column {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .news-embed {
        width: 100%;
        max-width: 100%;
        height: auto;
        overflow: visible;
        padding: 0;
        margin: 0 auto;
        display: block;
    }
    
    .embed-responsive-wrapper {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 400px;
        padding-bottom: 0;
        position: relative;
        overflow: visible;
        margin: 0;
        display: block;
    }
    
    .embed-responsive-wrapper iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: 601px !important;
        min-height: 400px;
        position: relative !important;
        transform: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0;
        border: none !important;
    }
    
    .news-embed iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: 601px !important;
        min-height: 400px;
        transform: none !important;
        position: relative !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: none !important;
    }
    
    .news-article-preview {
        width: 100%;
        max-width: 100%;
        min-height: 400px;
    }
}

@media (max-width: 550px) {
    .news-embed {
        width: 100%;
        height: auto;
        overflow: visible;
        padding: 0;
        display: block;
    }
    
    .embed-responsive-wrapper {
        width: 100%;
        height: auto;
        min-height: 300px;
        padding-bottom: 0;
        position: relative;
        overflow: visible;
        margin: 0;
        display: block;
    }
    
    .embed-responsive-wrapper iframe {
        width: 100% !important;
        height: 601px !important;
        min-height: 300px;
        max-height: none;
        position: relative !important;
        transform: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0;
        border: none !important;
    }
    
    .news-embed iframe {
        width: 100% !important;
        height: 601px !important;
        min-height: 300px;
        transform: none !important;
        position: relative !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: none !important;
    }
    
    .news-article-preview {
        width: 100%;
        min-height: 300px;
    }
}

/* Newsletter Form Styles */
.newsletter-section .input {
    font-family: 'Roboto Mono', monospace;
}

.newsletter-form .input::placeholder {
    color: #aaaaaa;
    opacity: 1;
}

.newsletter-form .input:-ms-input-placeholder {
    color: #aaaaaa;
}

.newsletter-form .input::-ms-input-placeholder {
    color: #aaaaaa;
}

/* Also target newsletter-section for backwards compatibility */
.newsletter-section .input::placeholder {
    color: #aaaaaa;
    opacity: 1;
}

.newsletter-section .input:-ms-input-placeholder {
    color: #aaaaaa;
}

.newsletter-section .input::-ms-input-placeholder {
    color: #aaaaaa;
}

.newsletter-form .input:focus {
    border-color: #4A9EFF;
    box-shadow: 0 0 0 0.125em rgba(74, 158, 255, 0.25);
}

.newsletter-section .input:focus {
    border-color: #4A9EFF;
    box-shadow: 0 0 0 0.125em rgba(74, 158, 255, 0.25);
}

.newsletter-form .button:disabled,
.newsletter-section .button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Newsletter Form Layout */
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.newsletter-form .field {
    margin-bottom: 0;
}

@media (min-width: 769px) {
    .newsletter-form {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .newsletter-form .newsletter-field {
        flex: 1;
    }
    
    .newsletter-form .newsletter-field .input {
        width: 100%;
    }
    
    .newsletter-form .newsletter-button-field {
        flex: 0 0 auto;
    }
    
    .newsletter-form .newsletter-button-field .button {
        white-space: nowrap;
    }
}