/* style.css */

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

1.  CSS Variables
2.  Global Resets & Base Styles
3.  Utility Classes
4.  Layout (Bulma handles most, minor tweaks)
5.  Component Styling
    - Navbar
    - Buttons
    - Forms (Inputs, Textarea)
    - Cards (General, Volumetric, Resource, Blog)
    - Progress Bars
    - Tabs
    - Timeline
    - Footer
6.  Section-Specific Styles
    - Hero
    - Our Process
    - Methodology
    - Pricing
    - History
    - Customer Stories
    - Gallery
    - Blog
    - Partners
    - External Resources
    - Contact
7.  Page-Specific Styles
    - success.html
    - privacy.html & terms.html
8.  Animations & Transitions
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[1. CSS Variables]
-------------------------------------------------------------------*/
:root {
    --primary-color: #0D7377; /* Dark Teal */
    --action-color: #32E0C4; /* Bright Mint Green */
    --action-color-darker: #2AA894; /* Darker Mint Green for hover */
    --accent-color-1: #F08A5D; /* Terracotta/Coral */
    --accent-color-2: #E2D784; /* Pale Gold */

    --text-color: #363636; /* Bulma's default dark grey */
    --heading-color: #1A2E35; /* Darker Teal/Blue, almost black */
    --light-text-color: #FFFFFF;
    --subtle-text-color: #7a7a7a;

    --background-color: #FDFDFD;
    --light-section-background: #F5F5F5; /* Matches Bulma's .has-background-light */
    --card-background-color: #FFFFFF;
    --border-color: #DBDBDB; /* Bulma's default */

    --navbar-background: var(--card-background-color);
    --navbar-height: 3.25rem; /* Default Bulma navbar height */
    --navbar-item-color: var(--text-color);
    --navbar-item-hover-color: var(--action-color);
    --navbar-item-hover-background-color: transparent; /* Or a very subtle color */

    --footer-background: var(--heading-color);
    --footer-text-color: #B0BEC5; /* Light grey for footer text */
    --footer-link-color: var(--action-color);
    --footer-link-hover-color: var(--light-text-color);

    --font-primary: 'Space Grotesk', sans-serif;
    --font-secondary: 'DM Sans', sans-serif;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --shadow-volumetric: 0 5px 10px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.08);
    --shadow-volumetric-hover: 0 8px 15px rgba(0,0,0,0.15), 0 5px 5px rgba(0,0,0,0.1);


    --border-radius-sm: 0.25rem; /* 4px */
    --border-radius-md: 0.5rem;  /* 8px */
    --border-radius-lg: 0.75rem; /* 12px */

    --transition-speed-fast: 0.15s;
    --transition-speed-normal: 0.3s;
    --transition-easing: ease-in-out;
}

/*------------------------------------------------------------------
[2. Global Resets & Base Styles]
-------------------------------------------------------------------*/
html {
    scroll-behavior: smooth;
    background-color: var(--background-color);
    font-size: 16px; /* Base font size */
}

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

h1, h2, h3, h4, h5, h6,
.title, .subtitle {
    font-family: var(--font-primary);
    color: var(--heading-color);
    font-weight: 700;
}

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

a {
    color: var(--action-color);
    transition: color var(--transition-speed-fast) var(--transition-easing);
    text-decoration: none;
}
a:hover {
    color: var(--primary-color);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Ensure sections have appropriate padding */
.section {
    padding: 3rem 1.5rem; /* Default Bulma padding, can be overridden */
}

@media screen and (min-width: 769px) {
    .section {
        padding: 4rem 1.5rem;
    }
}


/*------------------------------------------------------------------
[3. Utility Classes]
-------------------------------------------------------------------*/
.volumetric-button {
    box-shadow: var(--shadow-volumetric);
    transition: transform var(--transition-speed-normal) var(--transition-easing),
                box-shadow var(--transition-speed-normal) var(--transition-easing);
    border-radius: var(--border-radius-md);
    font-weight: 500;
}
.volumetric-button:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--shadow-volumetric-hover);
}

.volumetric-card {
    background-color: var(--card-background-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-speed-normal) var(--transition-easing),
                box-shadow var(--transition-speed-normal) var(--transition-easing);
    overflow: hidden; /* Important for border-radius on images */
    display: flex;
    flex-direction: column;
    height: 100%; /* For consistent card heights in a row */
}
.volumetric-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.volumetric-input {
    box-shadow: var(--shadow-sm) inset;
    border-radius: var(--border-radius-md) !important; /* Override Bulma */
    transition: box-shadow var(--transition-speed-normal) var(--transition-easing),
                border-color var(--transition-speed-normal) var(--transition-easing);
}
.volumetric-input:focus {
    box-shadow: 0 0 0 0.125em rgba(var(--action-color), 0.25), var(--shadow-sm) inset !important; /* Bulma focus style */
    border-color: var(--action-color) !important;
}

.image-text-overlay {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.image-text-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)); /* Darker overlay for better contrast */
    z-index: 1;
}
.image-text-overlay .hero-body,
.image-text-overlay .content, /* For other elements if used */
.image-text-overlay .title,
.image-text-overlay .subtitle {
    position: relative;
    z-index: 2;
    color: var(--light-text-color) !important; /* Ensure white text */
}
.image-text-overlay .title, .image-text-overlay .subtitle {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

.section-title {
    text-align: center;
    margin-bottom: 3rem !important; /* Increase spacing */
    color: var(--heading-color) !important;
    font-weight: 700;
}

.has-text-primary { color: var(--action-color) !important; }
.has-background-primary { background-color: var(--action-color) !important; }
.button.is-primary {
    background-color: var(--action-color) !important;
    border-color: transparent;
    color: var(--heading-color) !important; /* Dark text on bright button */
}
.button.is-primary:hover {
    background-color: var(--action-color-darker) !important;
    color: var(--heading-color) !important;
}
.button.is-link {
    background-color: var(--primary-color) !important;
    border-color: transparent;
    color: var(--light-text-color) !important;
}
.button.is-link:hover {
    background-color: var(--heading-color) !important; /* Darker primary */
    color: var(--light-text-color) !important;
}

/*------------------------------------------------------------------
[5. Component Styling]
-------------------------------------------------------------------*/

/* Navbar */
.navbar.is-fixed-top {
    background-color: var(--navbar-background);
    box-shadow: var(--shadow-md);
    height: var(--navbar-height);
}
.navbar-brand .navbar-item strong {
    color: var(--primary-color);
}
.navbar-item, .navbar-link {
    font-family: var(--font-primary);
    color: var(--navbar-item-color);
    transition: color var(--transition-speed-fast) var(--transition-easing),
                background-color var(--transition-speed-fast) var(--transition-easing);
    font-weight: 500;
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    color: var(--navbar-item-hover-color) !important;
    background-color: var(--navbar-item-hover-background-color) !important;
}
.navbar-dropdown .navbar-item {
    color: var(--text-color);
}
.navbar-dropdown .navbar-item:hover {
    color: var(--action-color);
    background-color: #f5f5f5; /* Light hover for dropdown */
}
.navbar-burger span {
    background-color: var(--primary-color);
}
@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: var(--navbar-background);
        box-shadow: 0 8px 16px rgba(10,10,10,.1);
        padding: 0.5rem 0;
    }
}


/* Buttons (Global Styles) */
.button, button, input[type="submit"], input[type="button"], input[type="reset"] {
    font-family: var(--font-primary);
    border-radius: var(--border-radius-md) !important;
    transition: all var(--transition-speed-normal) var(--transition-easing);
    font-weight: 500;
    /* Add volumetric effect to all buttons by default if desired */
}
.button.volumetric-button, /* Apply to all buttons with this class */
button.volumetric-button { /* Apply to native buttons too */
    /* Styles are already defined in .volumetric-button */
}
/* Ensure default Bulma buttons also get some volumetric feel if not specifically classed */
.button:not(.is-text):not(.is-ghost) {
    box-shadow: var(--shadow-sm);
}
.button:not(.is-text):not(.is-ghost):hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}


/* Forms */
.input, .textarea {
    font-family: var(--font-secondary);
    border-radius: var(--border-radius-md) !important; /* Overrides Bulma's default */
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm) inset;
    transition: border-color var(--transition-speed-fast) var(--transition-easing),
                box-shadow var(--transition-speed-fast) var(--transition-easing);
}
.input:focus, .textarea:focus,
.input.is-focused, .textarea.is-focused,
.input:active, .textarea:active,
.input.is-active, .textarea.is-active {
    border-color: var(--action-color) !important;
    box-shadow: 0 0 0 0.125em rgba(var(--action-color), 0.25) !important; /* Keep Bulma's focus glow */
}
.label {
    font-family: var(--font-primary);
    color: var(--heading-color);
    font-weight: 500;
}

/* Cards */
.card { /* Base Bulma card, enhanced by .volumetric-card */
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensures cards in a row are same height */
    background-color: var(--card-background-color);
}
.card-image-container { /* Custom container for images */
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Default height, can be overridden per section */
    height: 200px; 
    background-color: #eee; /* Placeholder bg */
}
.card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-speed-normal) var(--transition-easing);
}
.volumetric-card:hover .card-image-container img {
    transform: scale(1.05);
}
.card-content {
    flex-grow: 1; /* Pushes card-footer down */
    padding: 1.5rem;
}
.card-content .title, .card-content .subtitle {
    margin-bottom: 0.75rem;
}
.card-content .content p:last-child {
    margin-bottom: 0;
}
.card-footer {
    border-top: 1px solid var(--border-color);
    background-color: transparent; /* Ensure no odd background from Bulma */
}
.card-footer-item {
    font-family: var(--font-primary);
    color: var(--action-color);
    font-weight: 500;
}
.card-footer-item:hover {
    color: var(--primary-color);
    background-color: #fafafa;
}

/* Progress Bars */
.progress {
    height: 0.75rem !important; /* Slimmer progress bar */
    border-radius: var(--border-radius-sm);
}
.progress::-webkit-progress-value {
    background-color: var(--action-color) !important;
    border-radius: var(--border-radius-sm);
}
.progress::-moz-progress-bar {
    background-color: var(--action-color) !important;
    border-radius: var(--border-radius-sm);
}
.progress::-ms-fill {
    background-color: var(--action-color) !important;
    border-radius: var(--border-radius-sm);
}

/* Tabs (used for Pricing) */
.tabs.is-toggle li.is-active a {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--light-text-color);
    z-index: 1;
}
.tabs.is-toggle a {
    border-radius: var(--border-radius-md) !important; /* Ensure volumetric feel for individual tabs */
    margin: 0 0.25rem;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-speed-normal), color var(--transition-speed-normal), box-shadow var(--transition-speed-normal);
}
.tabs.is-toggle a:hover {
    background-color: var(--light-section-background);
    border-color: var(--border-color);
    color: var(--primary-color);
    box-shadow: var(--shadow-md);
}
.tabs ul {
    border-bottom-style: none; /* Remove Bulma's default bottom border for toggle tabs */
}

/* Timeline */
.timeline .timeline-header {
    background-color: var(--action-color);
    color: var(--heading-color);
    font-weight: bold;
    border-radius: var(--border-radius-md);
    padding: 0.25rem 0.75rem;
}
.timeline .timeline-item .timeline-marker.is-primary {
    background-color: var(--primary-color);
    border: 3px solid var(--action-color);
}
.timeline .timeline-item .timeline-content {
    background-color: var(--card-background-color);
    padding: 1rem;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}
.timeline .timeline-item .timeline-content .heading {
    font-family: var(--font-primary);
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

/* Footer */
.footer {
    background-color: var(--footer-background);
    color: var(--footer-text-color);
    padding: 3rem 1.5rem 3rem; /* Less bottom padding because of .content */
}
.footer .title {
    color: var(--light-text-color) !important;
    font-family: var(--font-primary);
}
.footer a {
    color: var(--footer-link-color);
    font-weight: 500;
}
.footer a:hover {
    color: var(--footer-link-hover-color);
    text-decoration: underline;
}
.footer .content p {
    color: var(--footer-text-color);
}


/*------------------------------------------------------------------
[6. Section-Specific Styles]
-------------------------------------------------------------------*/

/* Hero Section */
.hero#hero {
    /* Fullheight is handled by Bulma class, background image & overlay by .image-text-overlay */
}
.hero#hero .title.is-1 {
    font-size: 3.5rem; /* Larger title */
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.hero#hero .subtitle.is-3 {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 2.5rem;
}
@media screen and (max-width: 768px) {
    .hero#hero .title.is-1 { font-size: 2.5rem; }
    .hero#hero .subtitle.is-3 { font-size: 1.25rem; }
}

/* Our Process Section */
#process .box { /* .volumetric-card is applied in HTML */
    padding: 2rem;
    text-align: center; /* Center content within the process boxes */
}
#process .box .title.is-4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* Methodology Section */
#methodology .content {
    font-size: 1.125rem; /* Slightly larger text for readability */
    line-height: 1.7;
}

/* Pricing Section */
#pricing .pricing-plans {
    margin-top: 2rem;
}
#pricing .card .card-header-title {
    color: var(--primary-color);
    font-weight: bold;
}
#pricing .card .content ul {
    list-style: disc;
    margin-left: 20px;
    text-align: left;
}
#pricing .card .content ul li {
    margin-bottom: 0.5rem;
}
#pricing .card .title.is-3 {
    color: var(--heading-color);
    margin-top: 1rem;
}
#pricing .card-footer-item {
    background-color: var(--action-color);
    color: var(--heading-color);
    font-weight: bold;
}
#pricing .card-footer-item:hover {
    background-color: var(--action-color-darker);
    color: var(--heading-color);
}

/* History Section */
#history .content {
    font-size: 1.1rem;
}

/* Customer Stories Section */
#customer-stories .card-image-container {
    height: 250px; /* Specific height for testimonials */
}
#customer-stories .card-content .title.is-5 {
    color: var(--primary-color);
}
#customer-stories .card-content .subtitle.is-6 {
    color: var(--accent-color-1);
    font-style: italic;
    margin-bottom: 1rem;
}

/* Gallery Section */
#gallery .card-image-container {
    height: 180px; /* Smaller height for gallery thumbnails */
}
#gallery .volumetric-card {
    padding: 0.5rem; /* Add some padding around the image container if desired */
    background-color: var(--card-background-color);
}
#gallery .column {
    padding: 0.75rem; /* Adjust spacing between gallery items */
}

/* Blog Section */
#blog .card-image-container {
    height: 220px; /* Height for blog post images */
}
#blog .card-content .title.is-4 {
    margin-bottom: 0.5rem;
    line-height: 1.3;
    color: var(--heading-color);
}
#blog .card-content .subtitle.is-6 {
    color: var(--subtle-text-color);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
#blog .card-content .content a.button { /* "Read more" button */
    margin-top: 1rem;
    background-color: transparent;
    border: 1px solid var(--action-color);
    color: var(--action-color);
    padding-left: 1em;
    padding-right: 1em;
}
#blog .card-content .content a.button:hover {
    background-color: var(--action-color);
    color: var(--heading-color);
}

/* Partners Section */
#partners img {
    max-height: 60px; /* Control partner logo size */
    width: auto;
    margin: 0 auto; /* Center logos */
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter var(--transition-speed-normal), opacity var(--transition-speed-normal);
}
#partners img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* External Resources Section */
#external-resources .resource-card {
    /* .volumetric-card styles apply */
}
#external-resources .resource-card .title.is-5 a {
    color: var(--primary-color);
    text-decoration: none;
}
#external-resources .resource-card .title.is-5 a:hover {
    color: var(--action-color);
    text-decoration: underline;
}
#external-resources .resource-card .content {
    font-size: 0.95rem;
    color: var(--subtle-text-color);
}

/* Contact Section */
#contact form {
    background-color: var(--card-background-color);
    padding: 2.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
}
@media screen and (max-width: 768px) {
    #contact form { padding: 1.5rem; }
}

/*------------------------------------------------------------------
[7. Page-Specific Styles]
-------------------------------------------------------------------*/

/* success.html */
.success-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    background-color: var(--light-section-background);
}
.success-page-container .icon { /* For a success icon */
    color: var(--action-color);
    font-size: 5rem; /* Requires FontAwesome or similar */
    margin-bottom: 1.5rem;
}
.success-page-container .title {
    color: var(--heading-color);
    margin-bottom: 1rem;
}
.success-page-container .subtitle {
    color: var(--text-color);
    margin-bottom: 2rem;
}
.success-page-container .button {
    min-width: 180px;
}

/* privacy.html & terms.html */
.privacy-page-container,
.terms-page-container {
    padding-top: calc(var(--navbar-height) + 40px); /* Approx 100px for Bulma default navbar */
    padding-bottom: 3rem;
}
.privacy-page-container .content,
.terms-page-container .content {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--card-background-color);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}
.privacy-page-container .content h1, .privacy-page-container .content h2,
.terms-page-container .content h1, .terms-page-container .content h2 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    margin-top: 2rem;
}
.privacy-page-container .content h1:first-child,
.terms-page-container .content h1:first-child {
    margin-top: 0;
}
.privacy-page-container .content p,
.terms-page-container .content p {
    margin-bottom: 1rem;
    line-height: 1.7;
}
.privacy-page-container .content ul,
.terms-page-container .content ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}


/*------------------------------------------------------------------
[8. Animations & Transitions]
-------------------------------------------------------------------*/
/* ScrollReveal initial states (elements will be revealed by JS) */
[data-scrollreveal] {
    opacity: 0;
    transform: translateY(30px);
    transition-property: opacity, transform;
    transition-duration: 0.6s; /* Control reveal speed */
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Spring-like easing */
}
/* This is a basic setup, ScrollReveal.js config handles the actual animation properties like delay, distance, origin. */

/* Smooth transitions for links and buttons are already defined */

/* Parallax (basic - for more advanced, JS is needed) */
.parallax-background {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Microinteractions - hover effects already added to buttons, cards, links. */

/* Cookie Consent Popup (from HTML) */
#cookieConsentPopup {
    /* Basic styles are inline in HTML for initial load without CSS.
       You can enhance them here if needed, but per instructions, it's minimal CSS in HTML. */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
#cookieConsentPopup p a {
    /* Style specifically for the privacy policy link in cookie popup */
    /* color: var(--action-color); (Already handled by inline style) */
    font-weight: bold;
}
#cookieConsentPopup button#acceptCookieButton {
    /* background-color: var(--action-color); (Already handled by inline style) */
    /* color: var(--heading-color); */
    border-radius: var(--border-radius-sm) !important;
    font-weight: bold;
}
@media screen and (max-width: 768px) {
    .hero#hero .title.is-1 {
        font-size: 16px;
    }
}