/* style.css */

/*------------------------------------------------------------------
[TABLE OF CONTENTS]

1.  ROOT VARIABLES & GLOBAL RESETS
2.  TYPOGRAPHY
3.  LAYOUT & CONTAINER
4.  HEADER & NAVIGATION
5.  HERO SECTION
6.  BUTTONS (GLOBAL)
7.  CARDS (GENERAL & SPECIFIC)
    7.1. Generic Card
    7.2. Feature Card
    7.3. Gallery Card / Resource Card
    7.4. Testimonial Card
    7.5. Event Item Card
8.  FORMS
9.  MODALS
10. SECTION SPECIFIC STYLES
    10.1. Mission Section
    10.2. Features Section (alternatif-bg)
    10.3. Gallery Section
    10.4. Customer Stories Section (alternatif-bg)
    10.5. Accolades Section
    10.6. Events Calendar Section (alternatif-bg)
    10.7. External Resources Section
    10.8. Community Section (alternatif-bg)
    10.9. Contact Form Section
11. FOOTER
12. UTILITY CLASSES
13. ANIMATIONS & TRANSITIONS
14. RESPONSIVE STYLES
15. SPECIAL PAGE STYLES (Success, Privacy, Terms)
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[1. ROOT VARIABLES & GLOBAL RESETS]
-------------------------------------------------------------------*/
:root {
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Work Sans', sans-serif;

    --color-primary: #282c34; /* Dark, almost black - for text and strong elements */
    --color-secondary: #569CD6; /* Muted Blue - for accents, links */
    --color-accent: #FFC107; /* Amber/Gold - for CTAs or highlights */
    
    --color-text-dark: #222222;
    --color-text-medium: #555555;
    --color-text-light: #F8F8F8;
    --color-text-hero: #FFFFFF;

    --color-bg-light: #FFFFFF;
    --color-bg-neutral: #F0F2F5; /* For alternating sections */
    --color-bg-dark: #1E1E1E; /* For dark mode or specific dark sections */

    --border-color-light: #E0E0E0;
    --border-color-dark: #444444;
    --neo-border: 2px solid var(--color-text-dark);
    --neo-border-light-bg: 2px solid var(--color-text-dark); /* For neo-brutalism on light backgrounds */
    --neo-border-dark-bg: 2px solid var(--color-text-light); /* For neo-brutalism on dark backgrounds */


    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

    --box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
    --box-shadow-md: 0 5px 15px rgba(0, 0, 0, 0.12);
    --box-shadow-neo: 4px 4px 0px var(--color-text-dark); /* Neo-brutalist shadow */

    --header-height: 70px;
    --transition-speed: 0.3s ease;
    --container-max-width: 1140px;
    --container-padding: 15px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-secondary);
    line-height: 1.7;
    color: var(--color-text-medium);
    background-color: var(--color-bg-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.main-wrapper {
    overflow-x: hidden; /* Ensure no horizontal scroll from content */
}


/*------------------------------------------------------------------
[2. TYPOGRAPHY]
-------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6,
.title, .subtitle { /* Bulma compatibility */
    font-family: var(--font-primary);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-dark);
    margin-bottom: 0.75rem; /* Default margin for headings */
}

.title.is-1 { font-size: 3rem; }
.title.is-2 { font-size: 2.5rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); } /* Section titles */
.title.is-3 { font-size: 2rem; }
.title.is-4 { font-size: 1.75rem; }
.title.is-5 { font-size: 1.25rem; }
.title.is-6 { font-size: 1rem; }

.subtitle {
    color: var(--color-text-medium);
    font-weight: 400;
}
.subtitle.is-4 { font-size: 1.25rem; }
.subtitle.is-5 { font-size: 1.1rem; }
.subtitle.is-6 { font-size: 1rem; }


p {
    margin-bottom: 1.25rem;
    color: var(--color-text-medium);
}

a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--transition-speed);
}

a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

strong {
    font-weight: 600;
    color: var(--color-text-dark);
}

.section-title {
    margin-bottom: 2.5rem;
    position: relative;
    color: var(--color-text-dark); /* Ensure high contrast for titles */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.section-title::after { /* Optional: subtle underline for section titles */
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-accent);
    margin: 0.5rem auto 0;
}

/*------------------------------------------------------------------
[3. LAYOUT & CONTAINER]
-------------------------------------------------------------------*/
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

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

.columns { /* Basic Bulma-like column setup if not using full Bulma */
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.column {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0.75rem;
}

.column.is-one-third { flex: none; width: 33.3333%; }
.column.is-half { flex: none; width: 50%; }
.column.is-two-thirds { flex: none; width: 66.6666%; }
.column.is-one-quarter { flex: none; width: 25%; }
.column.is-full { flex: none; width: 100%; }
.column.is-centered { margin-left: auto; margin-right: auto; } /* For single centered columns */

.columns.is-centered { justify-content: center; }
.columns.is-multiline { flex-wrap: wrap; }
.columns.is-vcentered { align-items: center; }


/*------------------------------------------------------------------
[4. HEADER & NAVIGATION]
-------------------------------------------------------------------*/
.header {
    background-color: var(--color-bg-light);
    box-shadow: var(--box-shadow-light);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--header-height);
    display: flex;
    align-items: center;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.navbar-brand .logo-text {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.navbar-brand .logo-text:hover {
    color: var(--color-secondary);
}
.navbar-brand .logo-accent {
    color: var(--color-accent);
}

.navbar-menu {
    display: flex;
    align-items: center;
}

.navbar-start {
    display: flex;
    align-items: center;
    margin-left: auto; /* Pushes items to the right on desktop */
}

.navbar-item {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-medium);
    text-decoration: none;
    transition: color var(--transition-speed), background-color var(--transition-speed);
    position: relative;
}

.navbar-item:hover,
.navbar-item.is-active {
    color: var(--color-secondary);
    background-color: transparent; /* No background on hover for minimalist look */
}

.navbar-item::after { /* Underline effect for active/hover */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width var(--transition-speed);
}

.navbar-item:hover::after,
.navbar-item.is-active::after {
    width: 70%;
}


.navbar-burger {
    display: none; /* Hidden on desktop */
    cursor: pointer;
    height: 3.25rem;
    position: relative;
    width: 3.25rem;
    margin-left: auto; /* Push to the right on mobile */
    border: none;
    background: none;
}

.navbar-burger span {
    background-color: var(--color-primary);
    display: block;
    height: 2px;
    left: 50%;
    margin-left: -8px; /* Half of width */
    position: absolute;
    top: 50%;
    margin-top: -1px; /* Half of height */
    transition: transform var(--transition-speed), opacity var(--transition-speed);
    width: 16px;
}
.navbar-burger span:nth-child(1) { transform: translateY(-5px); }
.navbar-burger span:nth-child(3) { transform: translateY(5px); }

.navbar-burger.is-active span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.navbar-burger.is-active span:nth-child(2) { opacity: 0; }
.navbar-burger.is-active span:nth-child(3) { transform: translateY(0) rotate(-45deg); }


/*------------------------------------------------------------------
[5. HERO SECTION]
-------------------------------------------------------------------*/
.hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    color: var(--color-text-hero); /* Ensure text is white */
    /* min-height: calc(100vh - var(--header-height)); Remove this if not full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--header-height); /* Account for fixed header */
}

.hero::before { /* Overlay for text readability */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)); Replaced by HTML inline style */
    z-index: 1;
}

.hero .hero-body {
    position: relative;
    z-index: 2;
    padding: 3rem 1.5rem; /* Adjust padding as needed */
}

.hero .title,
.hero .subtitle {
    color: var(--color-text-hero); /* Explicitly white for Hero */
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7); /* Enhance readability on complex backgrounds */
}
.hero .title.is-1 {
    font-size: 3.5rem; /* Larger for hero */
    font-weight: 700;
    margin-bottom: 1rem;
}
.hero .subtitle.is-4 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    max-width: 700px; /* Constrain subtitle width */
    margin-left: auto;
    margin-right: auto;
}

/* Parallax-like effect for hero background (can be enhanced with JS) */
.hero {
    background-attachment: fixed; /* Simple parallax */
}


/*------------------------------------------------------------------
[6. BUTTONS (GLOBAL)]
-------------------------------------------------------------------*/
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: var(--neo-border); /* Neo-brutalism border */
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--border-radius-sm); /* Subtle rounding */
    transition: all var(--transition-speed);
    text-decoration: none;
    color: var(--color-primary); /* Default text color for buttons */
    background-color: var(--color-bg-light); /* Default background */
    box-shadow: var(--box-shadow-neo); /* Neo-brutalist shadow */
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    text-decoration: none;
    box-shadow: 2px 2px 0px var(--color-text-dark); /* Slightly adjusted shadow on hover */
    transform: translate(2px, 2px); /* Shift for neo-brutalist effect */
}
.button:active, button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active {
    box-shadow: 0px 0px 0px var(--color-text-dark);
    transform: translate(4px, 4px);
}


.button.is-primary {
    background-color: var(--color-accent);
    color: var(--color-primary); /* Text color for primary button */
    border-color: var(--color-primary);
    box-shadow: 4px 4px 0px var(--color-primary);
}
.button.is-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.button.is-secondary {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
    border-color: var(--color-primary);
    box-shadow: 4px 4px 0px var(--color-primary);
}
.button.is-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}

.button.is-link { /* For modal triggers, etc. */
    background-color: transparent;
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    box-shadow: none;
}
.button.is-link:hover {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
    transform: none; /* No shift for link buttons */
    box-shadow: none;
}

.button.is-large {
    padding: 1rem 2rem;
    font-size: 1.15rem;
}
.button.is-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}


/*------------------------------------------------------------------
[7. CARDS (GENERAL & SPECIFIC)]
-------------------------------------------------------------------*/

/* 7.1. Generic Card */
.card {
    background-color: var(--color-bg-light);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-md);
    overflow: hidden; /* Ensures content respects border-radius */
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    border: 1px solid var(--border-color-light);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.card .card-image,
.card .image-container { /* For image wrappers */
    width: 100%;
    overflow: hidden; /* Crucial for object-fit */
    /* Fixed height example, adjust as needed per card type */
     height: 200px; /* Example fixed height */
}

.card .card-image img,
.card .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area, might crop */
    display: block; /* Removes bottom space under image */
    transition: transform 0.4s ease-out;
}

.card:hover .card-image img,
.card:hover .image-container img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

.card .card-content {
    padding: 1.5rem;
    text-align: left; /* Default for content, can be overridden */
    flex-grow: 1; /* Allows content to fill space if card is flex item */
    display: flex;
    flex-direction: column;
}
.card .card-content .title,
.card .card-content .subtitle {
    margin-bottom: 0.5rem;
}
.card .card-content p:last-child {
    margin-bottom: 0;
}
.card .card-content .button {
    margin-top: auto; /* Pushes button to bottom if card-content is flex column */
    align-self: flex-start; /* Align button to left */
}


/* 7.2. Feature Card */
.feature-card {
    text-align: center; /* Center content within feature card */
}
.feature-card .card-image {
    height: 220px; /* Specific height for feature images */
}
.feature-card .card-content .title.is-4 {
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}
.feature-card .card-content .subtitle.is-6 {
    color: var(--color-text-medium);
    line-height: 1.6;
}

/* 7.3. Gallery Card / Resource Card */
.gallery-card, .resource-card {
    /* Uses generic card styles. Specific adjustments if needed */
}
.gallery-card .card-image {
    height: 250px; /* Slightly taller for gallery items */
}
.resource-card .card-content .title a {
    color: var(--color-primary);
}
.resource-card .card-content .title a:hover {
    color: var(--color-secondary);
}
.resource-card .resource-description {
    font-size: 0.9rem;
    color: var(--color-text-medium);
    line-height: 1.5;
}


/* 7.4. Testimonial Card */
.testimonial-card {
    background-color: var(--color-bg-light);
    border-left: 5px solid var(--color-accent); /* Accent border */
    padding: 1.5rem;
}
.testimonial-card .media {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.testimonial-card .media-left {
    margin-right: 1rem;
}
.testimonial-card .media-left .image.is-64x64 img {
    border-radius: 50%;
    border: 2px solid var(--color-accent);
}
.testimonial-card .media-content .title {
    margin-bottom: 0.25rem;
    color: var(--color-primary);
}
.testimonial-card .media-content .subtitle {
    font-style: italic;
    color: var(--color-text-medium);
}
.testimonial-card .content {
    font-size: 0.95rem;
    line-height: 1.8;
}

/* 7.5. Event Item Card */
.event-item.card {
    border-left: 4px solid var(--color-secondary); /* Event accent */
    margin-bottom: 1.5rem; /* Space between event items */
}
.event-item .card-content .title.is-4 {
    color: var(--color-primary);
}
.event-item .card-content .subtitle.is-6 {
    color: var(--color-text-medium);
    font-weight: 500;
    margin-bottom: 0.75rem;
}
.event-item .card-content time {
    font-weight: bold;
    color: var(--color-secondary);
}


/*------------------------------------------------------------------
[8. FORMS]
-------------------------------------------------------------------*/
.field:not(:last-child) {
    margin-bottom: 1rem;
}

.label {
    color: var(--color-text-dark);
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.input, .textarea, .select select {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: var(--font-secondary);
    line-height: 1.5;
    color: var(--color-text-medium);
    background-color: var(--color-bg-light);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-sm);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.input:focus, .textarea:focus, .select select:focus {
    outline: 0;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-secondary), 0.25); /* Check variable usage */
}
.input.is-medium, .textarea.is-medium, .select.is-medium select {
    font-size: 1.1rem;
    padding: 0.9rem 1.2rem;
}

.textarea {
    resize: vertical;
    min-height: 120px;
}

.select {
    position: relative;
    display: inline-block;
    width: 100%;
}
.select::after { /* Dropdown arrow */
    content: "";
    position: absolute;
    top: 50%;
    right: 1em;
    margin-top: -0.1875em; /* Adjust for arrow size */
    width: 0.375em;
    height: 0.375em;
    border: 2px solid var(--color-text-dark);
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
    pointer-events: none;
}
.select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.5em; /* Space for arrow */
}

.checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.95rem;
}
.checkbox input[type="checkbox"] {
    margin-right: 0.5em;
    width: 1.1em;
    height: 1.1em;
    accent-color: var(--color-secondary);
}
.field.is-grouped.is-centered {
    display: flex;
    justify-content: center;
}


/*------------------------------------------------------------------
[9. MODALS]
-------------------------------------------------------------------*/
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Prevent scrollbars on modal itself */
}
.modal.is-active {
    display: flex;
}

.modal-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 10, 0.80); /* Darker, more opaque */
    /* Glassmorphism attempt - subtle */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-card {
    background-color: var(--color-bg-light);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-md);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px); /* Max height with some margin */
    width: 90%;
    max-width: 800px; /* Max width of modal card */
    margin: 20px;
    overflow: hidden; /* Important for inner scroll */
    position: relative; /* For z-index context */
    animation: fadeInModal 0.3s ease-out;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-card-head, .modal-card-foot {
    background-color: var(--color-bg-neutral);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color-light); /* Head */
    border-top: 1px solid var(--border-color-light); /* Foot */
}
.modal-card-head {
    justify-content: space-between;
}
.modal-card-title {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin: 0;
}
.modal-card-foot {
    justify-content: flex-end;
}
.modal-card-foot .button:not(:last-child) {
    margin-right: 0.5rem;
}

.modal-card-body {
    padding: 1.5rem 2rem;
    overflow-y: auto; /* Enable scroll for long content */
    flex-grow: 1;
}
.modal-card-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-sm);
    margin-bottom: 1rem;
}

.delete { /* Close button for modal */
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: rgba(10,10,10,.2);
    border: none;
    border-radius: 290486px; /* essentially circle */
    cursor: pointer;
    display: inline-block;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 0; /* Hide text if any */
    height: 24px;
    max-height: 24px;
    max-width: 24px;
    min-height: 24px;
    min-width: 24px;
    outline: none;
    position: relative;
    vertical-align: top;
    width: 24px;
    transition: background-color var(--transition-speed);
}
.delete:hover {
    background-color: rgba(10,10,10,.3);
}
.delete::before, .delete::after {
    background-color: white;
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform-origin: center center;
}
.delete::before { height: 2px; width: 50%; }
.delete::after { height: 50%; width: 2px; }


/*------------------------------------------------------------------
[10. SECTION SPECIFIC STYLES]
-------------------------------------------------------------------*/

/* 10.1. Mission Section */
#mission .content {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#mission .content p {
    font-size: 1.1rem; /* Slightly larger for mission statement */
    line-height: 1.8;
}

/* 10.2. Features Section (alternatif-bg) */
/* Uses .feature-card, defined in Card styles */

/* 10.3. Gallery Section */
/* Uses .gallery-card, defined in Card styles */

/* 10.4. Customer Stories Section (alternatif-bg) */
/* Uses .testimonial-card, defined in Card styles */

/* 10.5. Accolades Section */
#accolades .accolade-logo img {
    filter: grayscale(50%); /* Desaturate logos slightly for neutral theme */
    transition: filter var(--transition-speed);
    max-height: 80px; /* Control logo size */
    width: auto;
}
#accolades .accolade-logo:hover img {
    filter: grayscale(0%);
}
#accolades .column p {
    font-size: 0.9rem;
    color: var(--color-text-medium);
}

/* 10.6. Events Calendar Section (alternatif-bg) */
/* Uses .event-item, defined in Card styles */

/* 10.7. External Resources Section */
/* Uses .resource-card, defined in Card styles */

/* 10.8. Community Section (alternatif-bg) */
#community .is-size-5 {
    font-size: 1.15rem;
    line-height: 1.7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}
.social-links-community .button {
    margin: 0.5rem;
    min-width: 150px; /* Ensure buttons have decent width */
}
.social-links-community .button.is-facebook { background-color: #3b5998; color: white; border-color: #3b5998; box-shadow: 4px 4px 0px #293e6a;}
.social-links-community .button.is-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color: white; border: none; box-shadow: 4px 4px 0px #833AB4;}
.social-links-community .button.is-twitter { background-color: #1DA1F2; color: white; border-color: #1DA1F2; box-shadow: 4px 4px 0px #0c85d0;}

.social-links-community .button:hover {
    opacity: 0.9;
    transform: translate(2px, 2px); /* Keep neo-brutalist hover */
}
.social-links-community .button.is-facebook:hover { box-shadow: 2px 2px 0px #293e6a;}
.social-links-community .button.is-instagram:hover { box-shadow: 2px 2px 0px #833AB4;}
.social-links-community .button.is-twitter:hover { box-shadow: 2px 2px 0px #0c85d0;}


/* 10.9. Contact Form Section */
#contact-form-section .columns.is-centered .column.is-two-thirds {
    background-color: var(--color-bg-light);
    padding: 2.5rem;
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-md);
}


/*------------------------------------------------------------------
[11. FOOTER]
-------------------------------------------------------------------*/
.footer {
    background-color: var(--color-primary); /* Dark footer */
    color: var(--color-text-light);
    padding: 3rem 1.5rem 2rem;
    border-top: 4px solid var(--color-accent); /* Neo-brutalist accent */
}

.footer .footer-title {
    color: var(--color-text-light);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
.footer .footer-title .logo-accent {
    color: var(--color-accent);
}

.footer p {
    color: rgba(248, 248, 248, 0.8); /* Slightly less bright than titles */
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.footer ul {
    list-style: none;
    padding-left: 0;
}
.footer ul li {
    margin-bottom: 0.5rem;
}
.footer ul li a {
    color: rgba(248, 248, 248, 0.8);
    text-decoration: none;
    transition: color var(--transition-speed), padding-left var(--transition-speed);
}
.footer ul li a:hover {
    color: var(--color-accent);
    padding-left: 5px; /* Subtle hover effect */
    text-decoration: underline;
}

.footer .footer-social-links a {
    display: inline-block;
    padding: 0.3rem 0; /* Minimal padding for text links */
    font-weight: 500;
}
/* No special icon styles for text links as per instruction, hover effect from general 'a' tag is enough */

/*------------------------------------------------------------------
[12. UTILITY CLASSES]
-------------------------------------------------------------------*/
.has-text-centered { text-align: center !important; }
.has-text-left { text-align: left !important; }
.has-text-right { text-align: right !important; }
.has-text-justified { text-align: justify !important; }

.has-text-white { color: var(--color-text-hero) !important; }
.has-text-dark { color: var(--color-text-dark) !important; }
.has-text-primary { color: var(--color-primary) !important; }
.has-text-secondary { color: var(--color-secondary) !important; }
.has-text-accent { color: var(--color-accent) !important; }

.is-hidden { display: none !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }


/*------------------------------------------------------------------
[13. ANIMATIONS & TRANSITIONS]
-------------------------------------------------------------------*/
/* ScrollReveal will handle element appearance.
   These are for initial states or CSS-driven transitions. */
.reveal-on-scroll {
    opacity: 0; /* Initial state for ScrollReveal */
    /* transform: translateY(20px); Initial state for ScrollReveal */
    /* Transition will be handled by ScrollReveal JS */
}

/* Micro-interactions */
/* Buttons: Handled in button styles
   Links: Handled in typography
   Forms: Handled in form input focus
*/
/* Image hover zoom: Handled in card image styles */


/* Parallax-like effect for elements (can be combined with JS) */
[data-parallax-speed] {
    transition: transform 0.1s ease-out; /* Smooth out JS updates */
}

/*------------------------------------------------------------------
[14. RESPONSIVE STYLES]
-------------------------------------------------------------------*/
@media screen and (max-width: 1023px) { /* Tablet and below */
    .navbar-menu {
        display: none; /* Hide menu on mobile */
        position: absolute;
        left: 0;
        top: var(--header-height);
        width: 100%;
        background-color: var(--color-bg-light);
        box-shadow: 0 8px 16px rgba(10,10,10,.1);
        padding: 0.5rem 0;
        flex-direction: column;
        text-align: center;
    }
    .navbar-menu.is-active {
        display: flex; /* Show when active */
    }
    .navbar-start {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
    }
    .navbar-item {
        display: block;
        width: 100%;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-color-light);
    }
    .navbar-item:last-child {
        border-bottom: none;
    }
    .navbar-item::after { /* Adjust mobile nav item hover indicator */
        left: 0;
        transform: none;
        height: 100%;
        width: 3px;
        top:0;
    }
     .navbar-item:hover::after,
    .navbar-item.is-active::after {
        width: 3px;
        height: 100%;
    }

    .navbar-burger {
        display: block; /* Show burger on mobile */
    }

    .columns {
        margin-left: 0;
        margin-right: 0;
    }
    .column {
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
        width: 100% !important; /* Stack columns on mobile by default */
        flex: none !important;
    }
    .column.is-two-thirds, .column.is-half, .column.is-one-third, .column.is-one-quarter {
      /* Already 100% by default rule above, can be more specific if needed */
    }
    .footer .columns .column {
        margin-bottom: 2rem;
    }
    .footer .columns .column:last-child {
        margin-bottom: 0;
    }

    .hero .title.is-1 { font-size: 2.5rem; }
    .hero .subtitle.is-4 { font-size: 1.2rem; }

    .section-title.is-2 { font-size: 2rem; }

}

@media screen and (max-width: 768px) { /* Mobile */
    html {
        font-size: 15px; /* Slightly smaller base for mobile */
    }
    .hero .title.is-1 { font-size: 2.2rem; }
    .hero .subtitle.is-4 { font-size: 1.1rem; }

    .button.is-large {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
    .modal-card {
        width: calc(100% - 20px); /* Full width with small margin */
        margin: 10px;
        max-height: calc(100vh - 20px);
    }
    .modal-card-body {
        padding: 1rem 1.25rem;
    }
    #contact-form-section .columns.is-centered .column.is-two-thirds {
        padding: 1.5rem;
    }
}

/*------------------------------------------------------------------
[15. SPECIAL PAGE STYLES (Success, Privacy, Terms)]
-------------------------------------------------------------------*/
.page-minimal-vh {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: var(--header-height); /* Account for fixed header */
}

.success-page-content,
.static-page-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem var(--container-padding);
}
.success-page-content .icon-success {
    font-size: 4rem;
    color: var(--color-accent); /* Or a green for success */
    margin-bottom: 1rem;
}
.success-page-content .title {
    color: var(--color-primary);
}
.success-page-content p {
    max-width: 500px;
    margin-bottom: 1.5rem;
}
.success-page-content .button {
    margin-top: 1rem;
}

/* For privacy and terms pages - content styling */
.static-page-container {
    padding-top: calc(var(--header-height) + 3rem); /* Header height + extra space */
    padding-bottom: 3rem;
    max-width: 900px; /* Content width for readability */
    margin-left: auto;
    margin-right: auto;
}
.static-page-container h1,
.static-page-container h2,
.static-page-container h3 {
    color: var(--color-primary);
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}
.static-page-container h1 { font-size: 2.2rem; }
.static-page-container h2 { font-size: 1.8rem; }
.static-page-container h3 { font-size: 1.5rem; }

.static-page-container p,
.static-page-container li {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-medium);
}
.static-page-container ul,
.static-page-container ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

/* Cookie Popup basic styles (as per prompt to be in HTML, but if needed) */
/* #cookiePopup { ... } -- already in HTML inline style */
/* #acceptCookie { ... } -- already in HTML inline style */