/* style.css */

/* --- CSS Variables --- */
:root {
    /* Color Palette (Neutral) */
    --bg-color: #e0e5ec; /* Light grey, classic neumorphism base */
    --bg-color-light: #ffffff;
    --bg-color-dark: #a3b1c6; /* Darker shade for shadows */
    --bg-color-darker-inset: #bec8d2; /* Slightly less dark for insets */
    --bg-color-lighter-highlight: #f0f5fa; /* Slightly lighter for highlights */


    --text-color: #3a3f44; /* Dark grey for body text, good contrast */
    --text-color-light: #7a7a7a;
    --text-color-headings: #2c3e50; /* Darker, slightly desaturated blue for headings */
    --text-color-hero: #FFFFFF;

    --primary-color: #5D7A9B; /* Muted blue, sophisticated primary */
    --primary-color-dark: #48607a;
    --primary-color-light: #d4dde7;

    --accent-color: #E67E22; /* A warm accent like a muted orange */
    --success-color: #2ECC71; /* Muted green for success */
    --info-color: #3498DB; /* Muted info blue */
    --warning-color: #F39C12; /* Muted warning yellow/orange */
    --danger-color: #E74C3C; /* Muted red for danger */

    /* Fonts */
    --font-family-headings: 'Oswald', sans-serif;
    --font-family-body: 'Nunito', sans-serif;

    /* Neumorphism Shadows */
    /* Softer, more spread out shadows for a modern feel */
    --neumorphic-shadow-light: 8px 8px 16px var(--bg-color-dark), -8px -8px 16px var(--bg-color-light);
    --neumorphic-shadow-light-inset: inset 6px 6px 12px var(--bg-color-darker-inset), inset -6px -6px 12px var(--bg-color-lighter-highlight);
    --neumorphic-shadow-pressed: inset 8px 8px 16px var(--bg-color-dark), inset -8px -8px 16px var(--bg-color-light);
    --neumorphic-shadow-flat: 4px 4px 8px var(--bg-color-darker-inset), -4px -4px 8px var(--bg-color-lighter-highlight);
    --neumorphic-shadow-hover: 10px 10px 20px var(--bg-color-dark), -10px -10px 20px var(--bg-color-light);


    /* Transitions */
    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;

    /* Spacing */
    --section-padding: 4rem 1.5rem;
    --card-padding: 1.5rem;

    /* Header Height */
    --header-height: 52px; /* Bulma's default navbar height */
}

/* --- Global Styles --- */
html {
    scroll-behavior: smooth;
    background-color: var(--bg-color);
    font-size: 16px;
}

body {
    font-family: var(--font-family-body);
    color: var(--text-color);
    line-height: 1.7; /* Increased for better readability */
    background-color: var(--bg-color);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Apply top padding for content on specific static pages */
body.privacy-page main,
body.terms-page main,
body.success-page main,
body.about-page main,
body.contacts-page main {
    padding-top: calc(var(--header-height) + 30px); /* header height + some margin */
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6, .title, .subtitle {
    font-family: var(--font-family-headings);
    color: var(--text-color-headings);
    font-weight: 700; /* Oswald is thinner by default */
    /* text-shadow: 1px 1px 1px rgba(0,0,0,0.05); Subtle shadow for depth */
}
.is-1.title { font-size: 3rem; }
.is-2.title { font-size: 2.5rem; }
.is-3.title { font-size: 2rem; }
.is-4.title { font-size: 1.5rem; }


.Oswald-font { font-family: var(--font-family-headings) !important; }
.Nunito-font { font-family: var(--font-family-body) !important; }

.section-title {
    margin-bottom: 3rem !important;
    color: var(--text-color-headings) !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

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

a {
    color: var(--primary-color);
    font-weight: 600; /* Make links slightly bolder */
    transition: color var(--transition-speed) var(--transition-timing);
}
a:hover {
    color: var(--primary-color-dark);
}

/* --- Header / Navbar --- */
.header {
    background-color: var(--bg-color);
    box-shadow: var(--neumorphic-shadow-light);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.navbar {
    background-color: transparent;
    min-height: var(--header-height);
}

.navbar-item, .navbar-link {
    font-family: var(--font-family-body);
    font-weight: 700;
    color: var(--text-color-headings); /* Match heading color for consistency */
    padding: 0.5rem 1rem;
    transition: color var(--transition-speed) var(--transition-timing), background-color var(--transition-speed) var(--transition-timing);
}
.navbar-item:hover, .navbar-link:hover, .navbar-item.is-active {
    background-color: transparent !important; /* Override Bulma hover */
    color: var(--primary-color) !important;
}
.navbar-item.logo-text {
    font-family: var(--font-family-headings);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-color-headings);
}
.navbar-item.logo-text .has-text-primary {
    color: var(--primary-color) !important;
}

.navbar-burger {
    color: var(--text-color-headings);
}
.navbar-burger span {
    background-color: var(--text-color-headings);
    height: 2px; /* Thinner burger lines */
}

@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: var(--bg-color);
        box-shadow: var(--neumorphic-shadow-light-inset);
        padding: 0.5rem 0;
        border-radius: 0 0 10px 10px;
    }
    .navbar-menu.is-active {
         display: block;
    }
    .navbar-item {
        padding: 0.75rem 1.5rem;
    }
}


/* --- Hero Section --- */
.hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.hero.is-fullheight-with-navbar {
    min-height: calc(100vh - var(--header-height));
}

.hero .hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-color-hero) !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}

.hero .hero-subtitle {
    font-size: 1.75rem;
    margin-bottom: 2.5rem;
    color: var(--text-color-hero) !important;
     text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

.hero .hero-body .container p {
    color: var(--text-color-hero) !important;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1rem;
    line-height: 1.7;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

main {
    padding-top: var(--header-height); /* Ensure main content starts after fixed header */
}

/* --- General Section Styling --- */
.section {
    padding: var(--section-padding);
}

/* --- Neumorphic UI Components --- */

/* Buttons Global Styles */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-family-body);
    font-weight: 700;
    border-radius: 10px; /* Softer radius */
    transition: all var(--transition-speed) var(--transition-timing);
    padding: 0.75em 1.75em; /* Adjust padding for better proportions */
    border: none; /* Remove default borders */
}

.neumorphic-button,
input[type="submit"].neumorphic-button,
a.neumorphic-button.button { /* Target <a> tags with Bulma's .button class too */
    background-color: var(--bg-color);
    box-shadow: var(--neumorphic-shadow-light);
    color: var(--text-color-headings);
    text-decoration: none;
    display: inline-block;
}
.neumorphic-button:hover,
input[type="submit"].neumorphic-button:hover,
a.neumorphic-button.button:hover {
    box-shadow: var(--neumorphic-shadow-hover);
    transform: translateY(-3px); /* Slightly more lift */
    color: var(--primary-color);
}
.neumorphic-button:active,
input[type="submit"].neumorphic-button:active,
a.neumorphic-button.button:active {
    box-shadow: var(--neumorphic-shadow-pressed);
    transform: translateY(1px);
}

/* Primary Neumorphic Button */
.button.is-primary.neumorphic-button,
input[type="submit"].is-primary.neumorphic-button {
    background-color: var(--primary-color);
    color: var(--text-color-hero);
    box-shadow: 6px 6px 12px color-mix(in srgb, var(--primary-color) 75%, black),
                -6px -6px 12px color-mix(in srgb, var(--primary-color) 40%, white);
}
.button.is-primary.neumorphic-button:hover,
input[type="submit"].is-primary.neumorphic-button:hover {
    background-color: var(--primary-color-dark);
    color: var(--text-color-hero); /* Ensure text color remains white on hover */
    box-shadow: 8px 8px 16px color-mix(in srgb, var(--primary-color-dark) 75%, black),
                -8px -8px 16px color-mix(in srgb, var(--primary-color-dark) 40%, white);
}
.button.is-primary.neumorphic-button:active,
input[type="submit"].is-primary.neumorphic-button:active {
    background-color: var(--primary-color-dark);
    box-shadow: inset 6px 6px 12px color-mix(in srgb, var(--primary-color-dark) 85%, black),
                inset -6px -6px 12px color-mix(in srgb, var(--primary-color-dark) 50%, white);
}

/* Flat Neumorphic Button */
.neumorphic-button-flat {
    background-color: var(--bg-color);
    box-shadow: var(--neumorphic-shadow-flat);
    color: var(--text-color);
}
.neumorphic-button-flat:hover {
    box-shadow: var(--neumorphic-shadow-light-inset); /* Inset on hover for subtle press */
    background-color: color-mix(in srgb, var(--bg-color) 95%, black);
}

/* Inputs and Textareas */
.input.neumorphic-input,
.textarea.neumorphic-textarea {
    background-color: var(--bg-color);
    border: none;
    border-radius: 10px;
    box-shadow: var(--neumorphic-shadow-light-inset);
    padding: 0.9em 1.2em; /* Adjusted padding */
    color: var(--text-color);
    font-family: var(--font-family-body);
    font-size: 1rem;
    transition: box-shadow var(--transition-speed) var(--transition-timing);
}
.input.neumorphic-input::placeholder,
.textarea.neumorphic-textarea::placeholder {
    color: var(--text-color-light);
}
.input.neumorphic-input:focus,
.textarea.neumorphic-textarea:focus {
    outline: none;
    box-shadow: var(--neumorphic-shadow-light-inset), 0 0 0 3px var(--primary-color-light);
}

/* Cards */
.card.neumorphic-card {
    background-color: var(--bg-color);
    border-radius: 15px;
    box-shadow: var(--neumorphic-shadow-light);
    transition: all var(--transition-speed) var(--transition-timing);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card.neumorphic-card:hover {
    box-shadow: var(--neumorphic-shadow-hover);
    transform: translateY(-6px); /* More pronounced hover lift */
}

.card.neumorphic-card .image-container { /* Handles image wrapper within card */
    width: 100%;
    height: 220px; /* Consistent height for card images */
    overflow: hidden;
    display: flex; /* Added for centering if image is smaller, but object-fit:cover handles most */
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color-darker-inset); /* Placeholder bg for images */
}
.card.neumorphic-card .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.card.neumorphic-card:hover .image-container img {
    transform: scale(1.05); /* Subtle zoom on card hover */
}

.card.neumorphic-card .card-content {
    padding: var(--card-padding);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* text-align: center; /* Uncomment if card content should be centered */
}
.card.neumorphic-card .card-content .title,
.card.neumorphic-card .card-content .subtitle {
    color: var(--text-color-headings);
}
.card.neumorphic-card .card-content .content {
    font-family: var(--font-family-body);
    color: var(--text-color);
    flex-grow: 1;
    font-size: 0.95rem; /* Slightly smaller for card content */
    line-height: 1.6;
}
.card.neumorphic-card .card-content .button {
    margin-top: auto;
    align-self: flex-start; /* Default button alignment */
    /* align-self: center; /* Uncomment for centered button */
}


.neumorphic-card-flat {
    background-color: var(--bg-color);
    border-radius: 12px;
    padding: var(--card-padding);
    box-shadow: var(--neumorphic-shadow-flat);
    margin-bottom: 1.5rem;
}
.neumorphic-card-flat .title {
    margin-bottom: 0.75rem;
}

/* Progress Indicators */
.progress {
    border-radius: 8px;
    box-shadow: var(--neumorphic-shadow-light-inset);
    background-color: var(--bg-color-darker-inset) !important;
    height: 1.2rem; /* Slightly thicker progress bar */
}
.progress::-webkit-progress-bar {
    background-color: transparent;
}
.progress::-webkit-progress-value {
    border-radius: 8px;
    background-color: var(--primary-color);
    box-shadow: var(--neumorphic-shadow-flat); /* Give the value itself a slight pop */
}
.progress.is-primary::-webkit-progress-value { background-color: var(--primary-color); }
.progress.is-info::-webkit-progress-value { background-color: var(--info-color); }
.progress.is-success::-webkit-progress-value { background-color: var(--success-color); }
.progress.is-warning::-webkit-progress-value { background-color: var(--warning-color); }
.progress.is-danger::-webkit-progress-value { background-color: var(--danger-color); }
.progress.is-link::-webkit-progress-value { background-color: var(--info-color); }


/* Switches */
.neumorphic-switch-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: var(--font-family-body);
    color: var(--text-color);
}
.neumorphic-switch {
    position: relative;
    width: 54px; /* Slightly wider */
    height: 30px; /* Slightly taller */
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-color);
    outline: none;
    border-radius: 20px;
    box-shadow: var(--neumorphic-shadow-light-inset);
    transition: var(--transition-speed) var(--transition-timing);
    margin-right: 12px;
}
.neumorphic-switch:before {
    content: '';
    position: absolute;
    width: 22px; /* Larger handle */
    height: 22px;
    border-radius: 50%;
    top: 4px;
    left: 4px;
    background: var(--bg-color-lighter-highlight);
    box-shadow: var(--neumorphic-shadow-flat);
    transition: var(--transition-speed) var(--transition-timing);
}
.neumorphic-switch:checked {
    background: var(--primary-color);
    box-shadow: inset 3px 3px 5px color-mix(in srgb, var(--primary-color) 80%, black),
                inset -3px -3px 5px color-mix(in srgb, var(--primary-color) 50%, white);
}
.neumorphic-switch:checked:before {
    left: 28px; /* 54px - 4px - 22px */
    background: var(--bg-color-light);
}


/* --- Section Specific Styles --- */

/* Mission Section */
.mission-content p {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Key Steps Section */
.key-steps-section .neumorphic-card-flat {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.key-steps-section .neumorphic-card-flat .progress {
    margin-top: auto;
}

/* Resources Section */
.external-links-container .resource-item {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    transition: box-shadow var(--transition-speed) var(--transition-timing);
}
.external-links-container .resource-item:hover {
    box-shadow: var(--neumorphic-shadow-light);
}
.external-links-container .resource-item h4 a {
    color: var(--text-color-headings);
    font-weight: 700;
}
.external-links-container .resource-item h4 a:hover {
    color: var(--primary-color);
}

/* Partners Section */
.partner-logo img {
    border-radius: 10px;
    box-shadow: var(--neumorphic-shadow-flat);
    transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    background-color: var(--bg-color-light);
    padding: 8px;
}
.partner-logo img:hover {
    transform: scale(1.08) translateY(-3px); /* Enhanced hover */
    box-shadow: var(--neumorphic-shadow-light);
}
.partners .column p {
    margin-top: 0.75rem;
    font-weight: 600;
}


/* Contact Section */
#contactForm .field {
    margin-bottom: 1.75rem; /* More space between fields */
}
#contactForm .label {
    color: var(--text-color-headings);
    font-weight: 700; /* Bolder labels */
    font-size: 1rem;
    margin-bottom: 0.75rem; /* Space below label */
}
.contact-details {
    margin-top: 3rem; /* More space above contact details */
    padding: 1.5rem;
    background-color: var(--bg-color);
    border-radius: 12px;
    box-shadow: var(--neumorphic-shadow-flat);
}
.contact-details p {
    margin-bottom: 0.75rem;
    font-size: 1rem;
}
.contact-details strong {
    color: var(--text-color-headings);
}

/* --- Modals --- */
.modal-card.neumorphic-modal {
    background-color: var(--bg-color);
    border-radius: 15px;
    box-shadow: var(--neumorphic-shadow-light); /* More prominent shadow for modals */
    border: none;
    max-width: 700px; /* Control modal width */
}
.modal-card-head,
.modal-card-foot {
    background-color: var(--bg-color);
    border-color: color-mix(in srgb, var(--bg-color-dark) 30%, transparent);
    padding: 1.25rem 1.5rem; /* Consistent padding */
}
.modal-card-head {
    border-radius: 15px 15px 0 0;
}
.modal-card-foot {
    border-radius: 0 0 15px 15px;
    justify-content: flex-end; /* Align buttons to the right */
}
.modal-card-foot .button:not(:last-child) {
    margin-right: 0.75rem;
}
.modal-card-title {
    color: var(--text-color-headings);
    font-family: var(--font-family-headings);
    font-size: 1.5rem;
}
.modal-card-body {
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 1.5rem;
    line-height: 1.7;
}
.modal-card-body .gallery-workshop img, /* HTML uses columns > column > figure > img */
.modal-card-body .columns .column .image img {
    border-radius: 8px;
    box-shadow: var(--neumorphic-shadow-flat);
    margin-bottom: 1rem;
}
.modal-card-body .columns {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}
.modal-card-body .columns .column {
    padding: 0.5rem;
}


/* --- Footer --- */
.footer.neumorphic-footer {
    background-color: var(--bg-color);
    padding: 3.5rem 1.5rem; /* More padding */
    border-top: 1px solid color-mix(in srgb, var(--bg-color-dark) 25%, transparent);
    box-shadow: inset 0px 5px 10px -5px var(--bg-color-darker-inset);
    color: var(--text-color);
}
.footer .title {
    color: var(--text-color-headings);
    font-family: var(--font-family-headings);
    margin-bottom: 1.25rem;
}
.footer .logo-text .has-text-primary {
    color: var(--primary-color) !important;
}
.footer ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0; /* Reset Bulma's ul padding */
}
.footer ul li {
    margin-bottom: 0.6rem;
}
.footer ul li a {
    color: var(--text-color); /* Regular text color for footer links */
    font-family: var(--font-family-body);
    font-weight: 500; /* Normal weight for footer links */
    transition: color var(--transition-speed) var(--transition-timing);
}
.footer ul li a:hover {
    color: var(--primary-color);
    text-decoration: none; /* No underline, color change is enough */
}
.footer .content p {
    color: var(--text-color);
    font-size: 0.9rem;
}
.footer hr {
    background-color: color-mix(in srgb, var(--bg-color-dark) 30%, transparent);
    height: 1px;
    margin: 2.5rem 0;
}


/* --- Specific Page Styles --- */

/* success.html */
body.success-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.success-page main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}
.success-page .neumorphic-card {
    max-width: 600px;
    width: 100%;
    padding: 2.5rem; /* More padding for the success card */
}
.success-page .icon.is-large .fa, /* If using FontAwesome */
.success-page .success-icon /* Generic class for SVG or other icons */
{
    font-size: 4rem; /* Larger icon */
    color: var(--success-color);
    margin-bottom: 1.5rem;
    display: block; /* Ensure it takes space */
}
.success-page .title {
    margin-bottom: 1rem;
}
.success-page .subtitle {
    margin-bottom: 2rem;
    color: var(--text-color);
}


/* privacy.html, terms.html */
.privacy-page .content-section,
.terms-page .content-section,
.about-page .content-section,
.contacts-page .content-section { /* Added about and contacts */
    background-color: var(--bg-color);
    padding: 2.5rem; /* More padding */
    border-radius: 15px;
    box-shadow: var(--neumorphic-shadow-light);
    margin-top: 1rem; /* Reduced from 2rem as body already has padding-top */
    margin-bottom: 2rem;
}
.privacy-page .content-section h1, .privacy-page .content-section h2,
.terms-page .content-section h1, .terms-page .content-section h2,
.about-page .content-section h1, .about-page .content-section h2,
.contacts-page .content-section h1, .contacts-page .content-section h2 {
    margin-bottom: 1.5rem;
    color: var(--text-color-headings);
}
.privacy-page .content-section p, .privacy-page .content-section ul,
.terms-page .content-section p, .terms-page .content-section ul,
.about-page .content-section p, .about-page .content-section ul,
.contacts-page .content-section p, .contacts-page .content-section ul {
    margin-bottom: 1rem;
    color: var(--text-color);
    line-height: 1.8; /* More line height for long texts */
}
.privacy-page .content-section ul,
.terms-page .content-section ul,
.about-page .content-section ul,
.contacts-page .content-section ul {
    list-style-position: outside; /* Better alignment for lists */
    padding-left: 1.5rem; /* More indent */
}
.privacy-page .content-section ul li,
.terms-page .content-section ul li,
.about-page .content-section ul li,
.contacts-page .content-section ul li {
    margin-bottom: 0.5rem;
}


/* about.html specific */
.about-page .team-member-card {
    text-align: center; /* Centers text below image */
}
.about-page .team-member-card .image-container {
    width: 180px; /* Larger team member image */
    height: 180px;
    border-radius: 50%;
    margin: 0 auto 1.5rem auto; /* Center the image and more space below */
    box-shadow: var(--neumorphic-shadow-light);
    overflow: hidden; /* Ensure image stays circular */
}
.about-page .team-member-card .image-container img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Cookie Consent Popup */
#cookieConsentPopup {
    font-family: var(--font-family-body);
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1); /* Add shadow to popup */
}
#cookieConsentPopup p {
    color: var(--text-color-hero) !important;
    font-size: 0.95rem;
    line-height: 1.5;
}
#acceptCookieButton {
    font-family: var(--font-family-headings);
    background-color: var(--success-color) !important;
    border-radius: 8px !important;
    padding: 0.6em 1.5em !important;
    font-size: 0.95rem !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2), -2px -2px 5px rgba(255,255,255,0.1);
}
#acceptCookieButton:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Read More links in cards */
.card-content a.read-more-link { /* Assuming a class like 'read-more-link' */
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    display: inline-block;
    margin-top: 0.5rem;
    position: relative; /* For pseudo-element underline */
}
.card-content a.read-more-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 2px;
    right: 0;
    background: var(--primary-color);
    transition: width .3s ease;
}
.card-content a.read-more-link:hover::after {
    width: 100%;
    left: 0;
    background: var(--primary-color-dark);
}
.card-content a.read-more-link:hover {
    color: var(--primary-color-dark);
}


/* --- Responsive Adjustments --- */
@media screen and (max-width: 768px) {
    .hero .hero-title {
        font-size: 2.8rem; /* Adjusted for mobile */
    }
    .hero .hero-subtitle {
        font-size: 1.5rem; /* Adjusted for mobile */
    }
    .section {
        padding: 3rem 1rem;
    }
    .section-title {
        font-size: 2rem; /* Adjusted for mobile */
        margin-bottom: 2rem;
    }
    .columns.is-centered .column.is-two-thirds {
        width: 100%; /* Full width for main content columns on mobile */
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .footer .columns {
        text-align: left; /* Align left on mobile for better readability */
    }
     .footer .column:not(:last-child) {
        margin-bottom: 2rem;
    }
    .modal-card {
        width: 95%;
        margin: 1rem auto;
    }
    .modal-card-head, .modal-card-foot, .modal-card-body {
        padding: 1rem;
    }
    .modal-card-title {
        font-size: 1.3rem;
    }

    /* Ensure cards stack nicely and don't force same height on mobile if it looks bad */
    .columns.is-multiline .column .card.neumorphic-card {
        height: auto; /* Let height be natural on mobile if rows break */
    }
}

@media screen and (max-width: 480px) {
    .hero .hero-title {
        font-size: 2.2rem;
    }
    .hero .hero-subtitle {
        font-size: 1.2rem;
    }
    .button, button, input[type="submit"], input[type="button"] {
        padding: 0.6em 1.2em; /* Smaller padding on very small screens */
        font-size: 0.9rem;
    }
    .input.neumorphic-input, .textarea.neumorphic-textarea {
        padding: 0.8em 1em;
        font-size: 0.95rem;
    }
}
*{
    opacity: 1 !important;
}