/* style.css */

:root {
    /* Neomorphism Base Colors */
    --bg-color: #dde1e7; /* Light greyish blue - main background */
    --bg-color-darker: #c8cdd3;
    --bg-color-lighter: #f4f6f9;

    --text-color: #333740; /* Dark grey for readability */
    --text-color-light: #5a5f6b;
    --heading-color: #222222; /* Darker for headings, good contrast */

    /* Tetradic Color Scheme */
    --primary-color: #6A5ACD;   /* SlateBlue - Main action color */
    --primary-color-dark: #5445a5;
    --primary-color-light: #8c7ae6;
    
    --secondary-color: #FFA500; /* Orange - Accent */
    --secondary-color-dark: #cc8400;
    --secondary-color-light: #ffc04d;

    --tertiary-color: #20B2AA;  /* LightSeaGreen - Accent */
    --tertiary-color-dark: #17887e;
    --tertiary-color-light: #38ded1;

    --quaternary-color: #DB7093; /* PaleVioletRed - Accent */
    --quaternary-color-dark: #b85b7a;
    --quaternary-color-light: #ef91ae;

    /* Neomorphism Shadows & Effects */
    --shadow-distance: 6px;
    --shadow-blur: 12px;
    --shadow-light-rgb: 255, 255, 255; /* For direct use in rgba */
    --shadow-dark-rgb: 186, 190, 204; /* For direct use in rgba */

    /* Typography */
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Archivo Black', sans-serif;

    /* Borders and Radii */
    --border-radius-soft: 12px;
    --border-radius-medium: 20px;
    --border-radius-large: 30px; /* For biomorphic touches */
    --border-color: #d1d9e6;

    /* Transitions - for "hand-drawn" feel, use custom cubic-beziers */
    --transition-speed: 0.3s;
    --transition-ease: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Bouncy feel */
    --transition-subtle: 0.2s ease-in-out;
}

/* Global Styles & Bulma Overrides */
body {
    background-color: var(--bg-color);
    font-family: var(--font-primary);
    color: var(--text-color);
    line-height: 1.7;
    overflow-x: hidden; /* Prevent horizontal scroll from AOS/animations */
}

html.has-navbar-fixed-top .section.page-content,
html.has-navbar-fixed-top .container.page-content {
    padding-top: calc(3.25rem + 40px); /* Bulma navbar height + extra space */
}
.main-content-padding { /* For generic pages like about, terms, privacy */
    padding-top: 100px; /* 3.25rem navbar + margin */
    padding-bottom: 40px;
}


h1, h2, h3, h4, h5, h6, .title, .subtitle {
    font-family: var(--font-secondary);
    color: var(--heading-color);
    text-shadow: 1px 1px 2px rgba(var(--shadow-dark-rgb), 0.1);
}

.title {
    color: var(--heading-color);
}
.subtitle {
    color: var(--text-color-light);
}

.section-title {
    margin-bottom: 2rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    position: relative;
    display: inline-block;
    padding-bottom: 0.5rem;
}
.section-title::after { /* Subtle underline accent */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

p, .content p {
    font-family: var(--font-primary);
    color: var(--text-color);
    font-size: 1.05rem; /* Slightly larger for readability */
}

.content {
    color: var(--text-color);
}
.content strong {
    color: var(--heading-color);
}

a {
    color: var(--primary-color);
    transition: color var(--transition-subtle);
}
a:hover {
    color: var(--primary-color-dark);
}

.has-text-justified {
    text-align: justify;
}

/* Neomorphic Base Styles */
.neomorphic-button,
.neomorphic-card,
.neomorphic-card-flat,
.neomorphic-card-resource,
.neomorphic-input,
.neomorphic-textarea,
.neomorphic-section-inset,
.neomorphic-header,
.neomorphic-footer,
.neomorphic-tag,
.neomorphic-card-timeline,
.neomorphic-image {
    background-color: var(--bg-color);
    border-radius: var(--border-radius-soft);
    transition: all var(--transition-speed) var(--transition-ease);
}

/* Extruded Neomorphism */
.neomorphic-button,
.neomorphic-card,
.neomorphic-header,
.neomorphic-footer,
.neomorphic-tag,
.neomorphic-image {
    box-shadow: 
        var(--shadow-distance) var(--shadow-distance) var(--shadow-blur) rgba(var(--shadow-dark-rgb), 0.7),
        calc(-1 * var(--shadow-distance)) calc(-1 * var(--shadow-distance)) var(--shadow-blur) rgba(var(--shadow-light-rgb), 0.7);
}

/* Inset Neomorphism */
.neomorphic-input,
.neomorphic-textarea,
.neomorphic-section-inset,
.neomorphic-card-timeline { /* Timeline items can be inset */
    box-shadow: 
        inset var(--shadow-distance) var(--shadow-distance) var(--shadow-blur) rgba(var(--shadow-dark-rgb), 0.7),
        inset calc(-1 * var(--shadow-distance)) calc(-1 * var(--shadow-distance)) var(--shadow-blur) rgba(var(--shadow-light-rgb), 0.7);
}

/* Flat Neomorphism (subtle elevation) */
.neomorphic-card-flat, .neomorphic-card-resource {
    box-shadow: 
        calc(var(--shadow-distance) / 2) calc(var(--shadow-distance) / 2) calc(var(--shadow-blur) / 2) rgba(var(--shadow-dark-rgb), 0.5),
        calc(-1 * var(--shadow-distance) / 2) calc(-1 * var(--shadow-distance) / 2) calc(var(--shadow-blur) / 2) rgba(var(--shadow-light-rgb), 0.5);
}


/* Component Styles */

/* Navbar */
.navbar.is-neomorphic-header {
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}
.navbar-item, .navbar-link {
    font-family: var(--font-primary);
    font-weight: bold;
    color: var(--text-color);
    transition: all var(--transition-subtle);
}
.navbar-item:hover, .navbar-link:hover {
    background-color: var(--bg-color-darker) !important;
    color: var(--primary-color) !important;
    transform: translateY(-2px);
}
.navbar-burger span {
    background-color: var(--primary-color);
    height: 3px;
    width: 20px;
}
.navbar-burger:hover {
    background-color: var(--bg-color-darker);
}

/* Global Button Styles */
.button, button, input[type="submit"], input[type="button"], .neomorphic-button {
    font-family: var(--font-secondary);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    padding: 0.8em 1.8em;
    transition: all var(--transition-speed) var(--transition-ease);
    cursor: pointer;
    border-radius: var(--border-radius-soft);
}

.button.is-primary, .neomorphic-button.is-primary { /* For main CTA buttons */
    background-color: var(--primary-color);
    color: #FFFFFF; /* White text for contrast */
    box-shadow: 
        var(--shadow-distance) var(--shadow-distance) var(--shadow-blur) rgba(var(--primary-color-dark), 0.4),
        calc(-1 * var(--shadow-distance)) calc(-1 * var(--shadow-distance)) var(--shadow-blur) rgba(var(--primary-color-light), 0.4),
        inset 0 0 0 0 transparent; /* For active state */
}

.neomorphic-button { /* If not using .is-primary explicitly */
    background-color: var(--bg-color);
    color: var(--primary-color);
     box-shadow: 
        var(--shadow-distance) var(--shadow-distance) var(--shadow-blur) rgba(var(--shadow-dark-rgb), 0.7),
        calc(-1 * var(--shadow-distance)) calc(-1 * var(--shadow-distance)) var(--shadow-blur) rgba(var(--shadow-light-rgb), 0.7);
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, .neomorphic-button:hover {
    transform: translateY(-3px) scale(1.03); /* Subtle organic lift */
    filter: brightness(1.1);
}
.button.is-primary:hover, .neomorphic-button.is-primary:hover {
    background-color: var(--primary-color-light);
    box-shadow: 
        calc(var(--shadow-distance) + 2px) calc(var(--shadow-distance) + 2px) calc(var(--shadow-blur) + 4px) rgba(var(--primary-color-dark), 0.5),
        calc(-1 * (var(--shadow-distance) + 2px)) calc(-1 * (var(--shadow-distance) + 2px)) calc(var(--shadow-blur) + 4px) rgba(var(--primary-color-light), 0.5),
        inset 2px 2px 4px rgba(var(--primary-color-dark),0.2),
        inset -2px -2px 4px rgba(var(--primary-color-light),0.2);
}

.button:active, button:active, input[type="submit"]:active, input[type="button"]:active, .neomorphic-button:active {
    transform: translateY(1px) scale(0.98); /* Pressed effect */
    box-shadow: 
        inset var(--shadow-distance) var(--shadow-distance) var(--shadow-blur) rgba(var(--shadow-dark-rgb), 0.7),
        inset calc(-1 * var(--shadow-distance)) calc(-1 * var(--shadow-distance)) var(--shadow-blur) rgba(var(--shadow-light-rgb), 0.7);
}
.button.is-primary:active, .neomorphic-button.is-primary:active {
    background-color: var(--primary-color-dark);
    box-shadow: 
        inset var(--shadow-distance) var(--shadow-distance) var(--shadow-blur) rgba(var(--primary-color-dark),0.6),
        inset calc(-1 * var(--shadow-distance)) calc(-1 * var(--shadow-distance)) var(--shadow-blur) rgba(var(--primary-color-light),0.3);
}


/* Cards */
.card.neomorphic-card, .card.neomorphic-card-flat, .card.neomorphic-card-resource {
    height: 100%; /* Ensure cards in a row have same height if content varies */
    display: flex;
    flex-direction: column;
    text-align: center; /* Center inline content */
    padding: 1.5rem;
}
.card.neomorphic-card:hover, .card.neomorphic-card-flat:hover, .card.neomorphic-card-resource:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
        calc(var(--shadow-distance) + 4px) calc(var(--shadow-distance) + 4px) calc(var(--shadow-blur) + 8px) rgba(var(--shadow-dark-rgb), 0.8),
        calc(-1 * (var(--shadow-distance) + 4px)) calc(-1 * (var(--shadow-distance) + 4px)) calc(var(--shadow-blur) + 8px) rgba(var(--shadow-light-rgb), 0.8);
}
.card .card-image { /* Bulma's card-image */
    margin-bottom: 1rem;
    display: flex; /* Center image within this container */
    justify-content: center;
    align-items: center;
}
.card .card-image .image-container { /* Custom container for consistent image display */
    width: 100%;
    overflow: hidden;
    border-radius: var(--border-radius-soft); /* Match card's radius if image touches edge */
}
.card .card-image img {
    display: block;
    width: 100%;
    height: 200px; /* Fixed height for images in cards */
    object-fit: cover;
    border-radius: var(--border-radius-soft); /* Softer edges for images */
    margin: 0 auto; /* Centering block element */
}
.card .card-content {
    flex-grow: 1; /* Allow content to take remaining space */
    padding: 0.5rem; /* Reduced padding as card itself has padding */
    text-align: center;
}
.card .card-content .title {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}
.card .card-content p:not(.title):not(.subtitle) {
    font-size: 0.95rem;
    color: var(--text-color-light);
}
.neomorphic-card-resource a {
    text-decoration: none;
}
.neomorphic-card-resource .title a {
    color: var(--primary-color);
    transition: color var(--transition-subtle);
}
.neomorphic-card-resource .title a:hover {
    color: var(--secondary-color);
}

/* Forms */
.field label.label {
    color: var(--heading-color);
    font-family: var(--font-secondary);
    margin-bottom: 0.75rem;
}
.input.neomorphic-input,
.textarea.neomorphic-textarea {
    background-color: var(--bg-color);
    border: none;
    color: var(--text-color);
    padding: 1em;
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: all var(--transition-speed) var(--transition-ease);
}
.input.neomorphic-input::placeholder,
.textarea.neomorphic-textarea::placeholder {
    color: var(--text-color-light);
    opacity: 0.7;
}
.input.neomorphic-input:focus,
.textarea.neomorphic-textarea:focus {
    outline: none;
    box-shadow: 
        inset calc(var(--shadow-distance) / 2) calc(var(--shadow-distance) / 2) calc(var(--shadow-blur) / 2) rgba(var(--shadow-dark-rgb), 0.7),
        inset calc(-1 * var(--shadow-distance) / 2) calc(-1 * var(--shadow-distance) / 2) calc(var(--shadow-blur) / 2) rgba(var(--shadow-light-rgb), 0.7),
        0 0 0 2px var(--primary-color-light); /* Focus ring */
}

/* Modals (Bulma) */
.modal-content, .modal-card {
    border-radius: var(--border-radius-medium);
    background-color: var(--bg-color); /* Neomorphic modal background */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Standard shadow for modals for pop */
    padding: 10px; /* Added padding around modal content */
}
.modal-card-head, .modal-card-foot {
    background-color: var(--bg-color-lighter);
    border-color: var(--border-color);
}
.modal-card-title {
    color: var(--heading-color);
}
.modal-background {
    background-color: rgba(10, 10, 10, 0.75); /* Darker backdrop for better focus */
}
.modal-close { /* Enhance close button */
    background-color: rgba(var(--shadow-dark-rgb), 0.3) !important;
    border-radius: 50%;
    transition: background-color var(--transition-subtle);
}
.modal-close:hover {
    background-color: rgba(var(--shadow-dark-rgb), 0.6) !important;
}

/* Timeline (Bulma Timeline Extension or custom) */
.timeline.is-centered .timeline-item .timeline-marker {
    background-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--bg-color), 0 0 0 6px var(--primary-color); /* Neomorphic touch */
}
.timeline.is-centered .timeline-item .timeline-marker.is-icon i {
    color: white; /* Assuming FontAwesome is used */
}
.timeline.is-centered .timeline-header .tag {
    background-color: var(--primary-color);
    color: white;
    font-family: var(--font-secondary);
    padding: 0.5em 1em;
}
.neomorphic-card-timeline { /* Timeline item content box */
    padding: 1rem;
    margin-left: 1rem; /* Adjust as per timeline structure */
    margin-right: 1rem;
    border-radius: var(--border-radius-soft);
}
.timeline-content .heading {
    font-family: var(--font-secondary);
    color: var(--primary-color);
    margin-bottom: 0.3rem;
}

/* Switch Component */
.neomorphic-switch-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}
.neomorphic-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.neomorphic-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.neomorphic-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-color-darker);
    border-radius: 34px;
    transition: var(--transition-subtle);
    box-shadow: 
        inset 3px 3px 5px rgba(var(--shadow-dark-rgb),0.6),
        inset -3px -3px 5px rgba(var(--shadow-light-rgb),0.6);
}
.neomorphic-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--bg-color);
    border-radius: 50%;
    transition: var(--transition-subtle);
    box-shadow: 
        2px 2px 4px rgba(var(--shadow-dark-rgb),0.5),
        -2px -2px 4px rgba(var(--shadow-light-rgb),0.5);
}
input:checked + .neomorphic-slider {
    background-color: var(--primary-color);
    box-shadow: 
        inset 3px 3px 5px rgba(var(--primary-color-dark),0.6),
        inset -3px -3px 5px rgba(var(--primary-color-light),0.6);
}
input:checked + .neomorphic-slider:before {
    transform: translateX(26px);
    box-shadow: 
        2px 2px 4px rgba(var(--primary-color-dark),0.5),
        -2px -2px 4px rgba(var(--primary-color-light),0.5);
}
.neomorphic-switch-container span {
    color: var(--text-color);
}

/* Section Styles */

/* Hero Section */
#hero {
    position: relative; /* For parallax or pseudo-elements */
    color: #FFFFFF; /* IMPORTANT: Hero text is white */
}
#hero .hero-body {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* For z-index stacking if needed */
    z-index: 1;
}
#hero .title.is-1 {
    font-size: 3.5rem; /* Larger for hero */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    color: #FFFFFF;
}
#hero .subtitle.is-3 {
    font-size: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
    color: #FFFFFF;
}
/* Parallax effect for hero background image (if using CSS only) */
#hero[style*="background-image"] {
    background-attachment: fixed; /* Simple parallax */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Statistics Section */
#statistics .stat-number {
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}
#statistics .card {
    padding: 2rem 1rem;
}

/* Gallery Section */
#gallery .card-image {
    cursor: pointer;
}
#gallery .card {
    overflow: hidden; /* Ensure image corners match card radius if image is full */
}
#gallery .card-image img {
    transition: transform 0.4s ease;
}
#gallery .card-image:hover img {
    transform: scale(1.1);
}

/* Sustainability Section */
#sustainability .neomorphic-image {
    display: block;
    margin: 0 auto; /* Center image if column is wider */
    max-width: 100%;
}

/* External Resources Section */
#external-resources .card.neomorphic-card-resource {
    text-align: left; /* Override global card center for this type */
    background: var(--bg-color-lighter); /* Slightly different bg */
}
#external-resources .card.neomorphic-card-resource .title {
    font-size: 1.1rem;
    text-align: left;
}
#external-resources .card.neomorphic-card-resource p.is-size-6 {
    font-size: 0.9rem;
    text-align: left;
    color: var(--text-color);
}

/* Footer */
.footer.neomorphic-footer {
    background-color: var(--bg-color-darker); /* Darker base for footer */
    color: var(--text-color);
    padding: 3rem 1.5rem 3rem;
    border-top: 1px solid var(--border-color);
}
.footer .title.footer-title {
    color: var(--heading-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}
.footer ul {
    list-style: none;
    margin-left: 0;
}
.footer ul li {
    margin-bottom: 0.5rem;
}
.footer ul li a {
    color: var(--text-color);
    text-decoration: none;
    transition: color var(--transition-subtle), transform var(--transition-subtle);
    display: inline-block; /* For transform */
}
.footer ul li a:hover {
    color: var(--primary-color);
    transform: translateX(3px) scale(1.05); /* Subtle "hand-drawn" shift */
}
.footer .neomorphic-hr {
    height: 2px;
    background-image: linear-gradient(to right, transparent, var(--border-color), transparent);
    border: 0;
    margin: 2rem 0;
}
.footer .content p {
    color: var(--text-color-light);
    font-size: 0.9rem;
}

/* "Read More" Link Style */
.read-more-link {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--font-secondary);
    color: var(--secondary-color);
    text-decoration: none;
    padding: 0.5em 0;
    position: relative;
    transition: color var(--transition-subtle);
}
.read-more-link::after {
    content: '→';
    margin-left: 0.5em;
    transition: transform var(--transition-subtle);
    display: inline-block;
}
.read-more-link:hover {
    color: var(--secondary-color-dark);
}
.read-more-link:hover::after {
    transform: translateX(5px);
}

/* Page-Specific Styles */

/* success.html */
.success-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    background-color: var(--bg-color);
}
.success-page-container .neomorphic-card {
    max-width: 600px;
    width: 100%;
    padding: 2rem;
}
.success-page-container .icon.is-large .fa { /* If using FontAwesome */
    font-size: 4rem;
    color: var(--tertiary-color); /* Green for success */
}
.success-page-container .title {
    color: var(--tertiary-color);
    margin-top: 1rem;
}

/* privacy.html, terms.html */
.privacy-content, .terms-content {
    background-color: var(--bg-color-lighter);
    padding: 2rem;
    border-radius: var(--border-radius-medium);
    margin: 0 auto; /* Center if inside a wider container */
    box-shadow: 
        var(--shadow-distance) var(--shadow-distance) var(--shadow-blur) rgba(var(--shadow-dark-rgb), 0.3),
        calc(-1 * var(--shadow-distance)) calc(-1 * var(--shadow-distance)) var(--shadow-blur) rgba(var(--shadow-light-rgb), 0.3);
}
.privacy-content h1, .terms-content h1,
.privacy-content h2, .terms-content h2,
.privacy-content h3, .terms-content h3 {
    color: var(--heading-color);
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}
.privacy-content p, .terms-content p,
.privacy-content li, .terms-content li {
    margin-bottom: 1em;
    line-height: 1.8;
    color: var(--text-color);
}
.privacy-content ul, .terms-content ul {
    list-style-position: outside;
    padding-left: 20px;
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .title.is-1 {
        font-size: 2.5rem !important; /* For hero mainly */
    }
    .subtitle.is-3 {
        font-size: 1.2rem !important; /* For hero mainly */
    }
    .section {
        padding: 2rem 1rem;
    }
    .columns.is-centered .column.is-two-thirds {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .navbar-menu {
        background-color: var(--bg-color);
        box-shadow: 0 8px 16px rgba(10,10,10,.1);
        padding: 0.5rem 0;
        border-radius: 0 0 var(--border-radius-soft) var(--border-radius-soft);
    }
    .navbar-item:hover, .navbar-link:hover {
        background-color: var(--bg-color-darker) !important;
    }
    html.has-navbar-fixed-top .section.page-content,
    html.has-navbar-fixed-top .container.page-content {
        padding-top: calc(3.25rem + 20px); 
    }
    .main-content-padding {
        padding-top: 80px;
    }
}

@media screen and (max-width: 1023px) {
    .navbar.is-fixed-top {
        position: fixed !important; /* Ensure it stays fixed even with Bulma's own logic */
    }
}

/* AOS Animation Customization (if needed) */
[data-aos] {
    /* transition-timing-function: var(--transition-ease); */ /* Can customize AOS easing */
}

/* Final style for fixed background images with overlays (as per HTML structure) */
[style*="background-image"][style*="linear-gradient"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

[data-aos^="fade"][data-aos^="fade"] {
  opacity: 1;
  transition-property: opacity,transform;
}