/* style.css */

:root {
    /* Fonts */
    --font-primary: 'Raleway', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;

    /* Pastel Color Palette */
    --color-background-main: #f9f5f0; /* Light Pastel Beige */
    --color-text-primary: #333333;    /* Dark Grey for body text */
    --color-text-headings: #222222; /* Darker Grey/Charcoal for headings */
    --color-text-light: #FFFFFF;

    --primary-color: #b28fb9;         /* Pastel Purple */
    --primary-hover-color: #a17fa8;   /* Darker Pastel Purple */
    --accent-color: #f0a070;          /* Pastel Orange/Peach for accents */

    --card-background-color: #ffffff;
    --card-border-color: #e0e0e0;
    --card-shadow: 0 4px 12px rgba(0,0,0,0.08);
    --card-hover-shadow: 0 6px 16px rgba(0,0,0,0.12);

    --footer-background-color: #e6dee9; /* Light Pastel for footer */
    --footer-text-color: #333333;
    --footer-link-color: #584a5c;
    --footer-link-hover-color: var(--primary-color);

    --input-border-color: #d3c0d8;
    --input-focus-border-color: var(--primary-color);
    --input-background-color: #fdfcff;


    /* Sizes & Spacing */
    --navbar-height: 52px; /* Default Bulma navbar height for is-fixed-top */
    --section-padding-vertical: 4rem;
    --section-padding-vertical-mobile: 2.5rem;
    --border-radius-base: 6px;
    --border-radius-large: 8px;
}

/* Base HTML Element Styling */
html {
    scroll-behavior: smooth;
    background-color: var(--color-background-main);
}

body {
    font-family: var(--font-secondary);
    color: var(--color-text-primary);
    line-height: 1.6;
    font-size: 16px; /* Base font size */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.title, .subtitle { /* Bulma classes */
    font-family: var(--font-primary);
    color: var(--color-text-headings);
    font-weight: 700; /* Raleway bold */
}
/* Ensure Bulma titles use our variable */
.title { color: var(--color-text-headings); }
.subtitle { color: var(--color-text-primary); } /* Subtitles can be slightly lighter */

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

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

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

/* Bulma Overrides & Complements */
.section {
    padding: var(--section-padding-vertical) 1.5rem;
}

@media screen and (max-width: 768px) {
    .section {
        padding: var(--section-padding-vertical-mobile) 1rem;
    }
}

.container {
    max-width: 1140px; 
    margin-left: auto;
    margin-right: auto;
}


/* Header & Navbar */
.navbar.is-fixed-top {
    /* background-color value is in HTML inline style */
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: background-color 0.3s ease;
}

.navbar-item, .navbar-link {
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--color-text-primary); /* Dark text for light navbar */
    transition: color 0.3s ease, background-color 0.3s ease;
}

.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    background-color: transparent !important; 
    color: var(--primary-color) !important;
}

.navbar-burger span {
    background-color: var(--color-text-headings) !important; 
    height: 2px;
}
.navbar-burger:hover {
    background-color: rgba(0,0,0,0.05);
}

.navbar-brand .navbar-item img {
    max-height: 2.5rem; /* Adjust logo size */
}

/* Hero Section */
#hero.hero {
    position: relative; 
    overflow: hidden; 
    /* background-color set inline in HTML */
}

.hero-background-image { /* This class is on an <img> tag */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    background-size: cover; /* For completeness, though object-fit is primary here */
    background-repeat: no-repeat;
}

.hero-background-overlay { /* Overlay div */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)); /* Dark overlay for text contrast */
    z-index: 1;
}

#hero .hero-body {
    position: relative;
    z-index: 2; /* Content above overlay */
    padding-top: calc(var(--navbar-height) + 2rem); 
}

#hero .title, #hero .subtitle {
    color: var(--color-text-light) !important; /* VITAL: Ensure white text on hero */
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7); /* Enhanced text shadow for readability */
}
#hero .title.is-1 {
    font-size: 3rem; 
    font-weight: 800; /* Raleway extra bold */
}
#hero .subtitle.is-3 {
    font-size: 1.5rem; 
    font-weight: 400; /* Raleway regular */
}

@media screen and (min-width: 769px) {
    #hero .title.is-1 {
        font-size: 3.8rem;
    }
    #hero .subtitle.is-3 {
        font-size: 1.75rem;
    }
}


/* General Section Styling */
.section-title {
    font-family: var(--font-primary);
    color: var(--color-text-headings);
    font-weight: 700;
    margin-bottom: 2.5rem !important; 
    text-align: center;
}
.section-title.is-2 { font-size: 2.5rem; }

/* Card Styling */
.card {
    background-color: var(--card-background-color);
    border: 1px solid var(--card-border-color);
    box-shadow: var(--card-shadow);
    border-radius: var(--border-radius-base);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    /* align-items: center; /* This centers child blocks if not full width. Often not for the whole card. */
    /* text-align: center; /* This centers text inside card-content if applied here. */
}

.card:hover {
    box-shadow: var(--card-hover-shadow);
    transform: translateY(-5px);
}

.card .card-image {
    border-top-left-radius: var(--border-radius-base);
    border-top-right-radius: var(--border-radius-base);
    overflow: hidden; 
}

/* STROGO: Card image containers fixed height + object-fit: cover */
.card .card-image figure.image { 
    height: 220px; /* Fixed height for card images */
    padding-top: 0; 
    position: relative;
    overflow: hidden;
    margin: 0; 
    background-color: #f0f0f0; /* Placeholder bg for images */
}

.card .card-image figure.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* Center the image within its bounds */
    display: block; 
    position: static; 
}


.card .card-content {
    padding: 1.5rem;
    color: var(--color-text-primary);
    flex-grow: 1; 
}
/* STROGO: All .card ... elements should use centering of content. */
.card.has-text-centered, /* If Bulma class is used */
#instructors .card .card-content, /* Specific for instructors */
#our-process .card .card-content, /* Specific for process steps */
#innovation .card .card-content  /* Specific for innovation icon cards */
{
    text-align: center;
}
/* General centering for images within .card-image if not covered by object-fit */
.card .card-image figure.image {
    display: flex;
    align-items: center;
    justify-content: center;
}


.card .card-content .title { 
    color: var(--color-text-headings);
    margin-bottom: 0.75rem;
}
.card .card-content .subtitle {
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

/* Specific Section Adjustments */

/* Innovation Section - Icons in Cards */
#innovation .card .icon img {
    width: 64px;
    height: 64px;
}

/* Our Process Section - Numbered Cards */
#our-process .card {
    padding: 1.5rem; 
}
#our-process .card .title.is-1 { /* The number */
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}
#our-process .card .title.is-5 { /* The step title */
    margin-bottom: 0.5rem;
}

/* Instructors Section - Profile Cards */
#instructors .card .card-image figure.image {
    height: 300px; /* Taller images for profiles */
}
#instructors .card { text-align: center; } /* Ensure text content is centered */


/* External Resources Section - Link Cards */
#external-resources .card .title.is-5 a {
    color: var(--color-text-headings); 
    font-weight: 600;
}
#external-resources .card .title.is-5 a:hover {
    color: var(--primary-color);
}
#external-resources .card .content.is-small {
    font-size: 0.875rem;
    line-height: 1.5;
}


/* Clientele Section - Logos */
.logos-clientela img {
    max-height: 60px;
    width: auto;
    margin: 0.5rem auto; 
    filter: grayscale(80%); 
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.logos-clientela img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Contact Form */
.field .label {
    color: var(--color-text-headings);
    font-weight: 600; 
    margin-bottom: 0.5em;
}
.input, .textarea {
    font-family: var(--font-secondary);
    background-color: var(--input-background-color);
    border: 1px solid var(--input-border-color);
    border-radius: var(--border-radius-base);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    padding: 0.85em 1.1em; /* Modern padding */
    font-size: 1rem;
}
.input::placeholder, .textarea::placeholder {
    color: #a0a0a0;
    font-style: italic;
    font-weight: 400;
}
.input:focus, .textarea:focus {
    border-color: var(--input-focus-border-color);
    box-shadow: 0 0 0 0.125em rgba(178, 143, 185, 0.25), inset 0 1px 3px rgba(0,0,0,0.06); 
    outline: none;
}
.textarea {
    min-height: 120px;
    resize: vertical;
}

/* Global Button Styles */
.button, button, input[type="submit"], input[type="button"], input[type="reset"] {
    font-family: var(--font-primary);
    font-weight: 700; /* Raleway bold */
    border-radius: var(--border-radius-base);
    padding: 0.85em 1.75em; /* Modern padding */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: 1px solid transparent; 
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    letter-spacing: 0.5px;
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active {
    transform: translateY(0px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.button.is-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--color-text-light);
}
.button.is-primary:hover {
    background-color: var(--primary-hover-color);
    border-color: var(--primary-hover-color);
    color: var(--color-text-light);
}

.button.is-large {
    font-size: 1.15rem; 
    padding: 0.9em 2em;
}

/* "Read More" link style */
.read-more-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-family: var(--font-secondary);
    font-weight: 600; 
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}
.read-more-link::after {
    content: ' →'; 
    display: inline-block;
    margin-left: 0.3em;
    transition: transform 0.3s ease;
}
.read-more-link:hover {
    color: var(--primary-hover-color);
    text-decoration: underline;
}
.read-more-link:hover::after {
    transform: translateX(4px);
}


/* Footer */
.footer {
    background-color: var(--footer-background-color);
    color: var(--footer-text-color);
    padding: 3rem 1.5rem; 
    font-size: 0.95rem;
}
.footer .title.is-5 {
    color: var(--color-text-headings);
    font-family: var(--font-primary);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}
.footer a { /* VITAL: Text-based social links styling */
    color: var(--footer-link-color);
    font-weight: 600; 
    display: inline-block; /* For better spacing if needed */
    padding: 0.2em 0; /* Minimal padding for text links */
}
.footer a:hover {
    color: var(--footer-link-hover-color);
    text-decoration: underline;
}
.footer hr {
    /* background-color value is in HTML inline style */
    height: 1px;
    border: none;
    margin: 2rem 0;
}
.footer .content p {
    margin-bottom: 0.5rem; 
}
.footer .is-size-7 { 
    color: #555;
    margin-top: 1rem;
}

/* Special Page Styling */

/* success.html */
body.success-page { 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-background-main); 
}
.success-page main { /* VITAL: Centering content */
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}
.success-content {
    background-color: var(--card-background-color);
    padding: 2.5rem 3rem;
    border-radius: var(--border-radius-large);
    box-shadow: var(--card-shadow);
    max-width: 600px;
}
.success-content .icon.is-large svg, /* For SVG icons */
.success-content .icon.is-large img  /* For image icons */
{ 
    width: 4rem;
    height: 4rem;
    color: #2eb85c; /* Success green */
}
.success-content .title {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}
.success-content .subtitle {
    margin-bottom: 2rem;
}


/* privacy.html & terms.html */
body.legal-page main { /* VITAL: Padding for fixed header */
    padding-top: calc(var(--navbar-height) + 3rem); 
    padding-bottom: 3rem;
}
.legal-page .section-title {
    margin-bottom: 2rem;
}
.legal-page .content h1, /* Ensure h1 is also styled if used as main title */
.legal-page .content h2, 
.legal-page .content h3 { 
    font-family: var(--font-primary);
    color: var(--color-text-headings);
    margin-top: 2em;
    margin-bottom: 0.75em;
}
.legal-page .content h1 { font-size: 2em; }
.legal-page .content h2 { font-size: 1.75em; }
.legal-page .content h3 { font-size: 1.5em; }

.legal-page .content ul, .legal-page .content ol {
    margin-left: 2em;
    margin-bottom: 1em;
}
.legal-page .content ul { list-style: disc; }
.legal-page .content ol { list-style: decimal; }


/* Parallax Background Utility (for sections with CSS background-image) */
.parallax-background-section {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Any background image on sections must have a dark overlay for text readability if text is directly on it */
.section-with-bg-image-text { /* Example class */
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.section-with-bg-image-text::before { /* Overlay */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Adjust opacity as needed */
    z-index: 1;
}
.section-with-bg-image-text > .container { /* Ensure content is above overlay */
    position: relative;
    z-index: 2;
}
.section-with-bg-image-text .title,
.section-with-bg-image-text .subtitle,
.section-with-bg-image-text p {
    color: var(--color-text-light); /* Assuming text needs to be light on dark overlay */
}


/* Cookie Consent Popup */
#cookiePopup {
    /* Styles are mostly inline in HTML; z-index is crucial */
    z-index: 9999 !important; 
}
#cookiePopup p {
    color: var(--color-text-light); 
    margin-bottom: 15px; /* From inline */
}
#cookiePopup button#acceptCookie { /* From HTML */
    background-color: var(--primary-color); /* Match theme */
    color: var(--color-text-light);
    border: none;
    padding: 10px 25px;
    border-radius: var(--border-radius-base);
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}
#cookiePopup button#acceptCookie:hover {
    background-color: var(--primary-hover-color);
}


/* Responsive adjustments */
@media screen and (max-width: 768px) {
    #hero .title.is-1 {
        font-size: 2.5rem;
    }
    #hero .subtitle.is-3 {
        font-size: 1.3rem;
    }
    .section-title.is-2 {
        font-size: 2rem;
    }
    .button.is-large {
        font-size: 1rem;
        padding: 0.8em 1.5em;
    }
    .footer .columns {
        text-align: center; 
    }
    .footer .column {
        margin-bottom: 1.5rem;
    }
    /* Make Our Process cards stack nicely */
    #our-process .columns.is-multiline .column.is-one-quarter {
        width: 100%; /* Full width on mobile */
        flex: none; /* Override Bulma's flex basis for columns */
    }
}