/* style.css */

/* 1. Root Variables */
:root {
    /* Triadic Color Scheme - Retro Inspired */
    --color-primary: #03A688; /* Vibrant Teal (Used for Bulma's is-primary) */
    --color-primary-dark: #02735E; /* Darker Teal for volumetric effects */
    --color-primary-light: #D1EAE6; /* Light Teal for backgrounds or accents */

    --color-secondary: #F27F0C; /* Warm Orange */
    --color-secondary-dark: #A95808; /* Darker Orange */

    --color-accent: #BF307F; /* Magenta/Purple */
    --color-accent-dark: #802054; /* Darker Magenta/Purple */

    /* Backgrounds */
    --color-background-page: #F5F5F5; /* Light Gray, clean retro */
    --color-background-card: #FFFFFF;
    --color-background-section-highlighted: #E9E9E9; /* Slightly darker gray */
    --color-hero-overlay: rgba(0, 0, 0, 0.4);

    /* Text */
    --color-text-body: #3D3D3D;
    --color-text-headings: #222222;
    --color-text-light: #FFFFFF;
    --color-text-link: var(--color-primary);
    --color-text-link-hover: var(--color-primary-dark);

    /* Borders */
    --color-border-neutral: #DBDBDB;
    --color-border-strong: #4A4A4A;

    /* Fonts */
    --font-heading: 'Inter', sans-serif;
    --font-body: 'IBM Plex Sans', sans-serif;

    /* Spacing & Sizing */
    --spacing-unit: 1rem;
    --header-height: 70px; /* Adjust as needed */

    /* Volumetric UI */
    --volumetric-offset: 4px;
    --volumetric-border-width: 2px;
    --volumetric-transition-speed: 0.1s;

    /* Border Radius */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;
}

/* 2. Base Styles */
html {
    scroll-behavior: smooth;
    background-color: var(--color-background-page);
    font-size: 16px; /* Base font size */
    color: var(--color-text-body);
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    margin: 0;
    padding-top: var(--header-height); /* Offset for fixed header */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-wrapper {
    overflow-x: hidden; /* Prevents horizontal scroll from AOS or other effects */
}

h1, h2, h3, h4, h5, h6,
.title, .subtitle {
    font-family: var(--font-heading);
    color: var(--color-text-headings);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for headings */
}

.title.is-1, .title.is-2, .title.is-3 {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.title.is-4, .title.is-5, .title.is-6 {
    margin-bottom: var(--spacing-unit);
}

.section-title {
    margin-bottom: calc(var(--spacing-unit) * 2.5) !important;
    color: var(--color-text-headings);
    font-weight: 700;
}
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--color-primary);
    margin: 0.5rem auto 0;
    border-radius: var(--border-radius-small);
}


p {
    margin-bottom: var(--spacing-unit);
    color: var(--color-text-body);
}

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

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

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

/* 3. Header & Navigation */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030; /* Bulma's fixed navbar is 30, so header container needs higher */
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    height: var(--header-height);
}

.navbar {
    min-height: var(--header-height);
    background-color: transparent !important; /* Override Bulma's default for transparent wrapper */
}

.navbar-brand .navbar-item.logo-text {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
    padding-left: 0;
}
.navbar-brand .navbar-item.logo-text:hover {
    color: var(--color-primary-dark);
}

.navbar-menu {
    background-color: transparent;
}
@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: rgba(255, 255, 255, 0.98); /* Solid background for mobile menu */
        box-shadow: 0 8px 16px rgba(10,10,10,.1);
        padding: 0.5rem 0;
    }
}


.navbar-item {
    font-family: var(--font-body);
    font-weight: bold;
    color: var(--color-text-body);
    transition: color 0.2s ease;
}

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

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

/* Basic styles for cookie consent - can be moved to style.css */
    .cookie-consent-popup {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.85);
      color: #fff;
      padding: 20px;
      text-align: center;
      z-index: 9999;
      display: none;
      /* Hidden by default */
      font-family: 'IBM Plex Sans', sans-serif;
    }

    .cookie-consent-popup p {
      margin-bottom: 15px;
      font-size: 0.9rem;
    }

    .cookie-consent-popup button {
      background-color: #F0C987;
      /* Pale Gold */
      color: #3D3D3D;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
      border-radius: 5px;
      font-weight: bold;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      transition: background-color 0.3s ease, transform 0.2s ease;
    }

    .cookie-consent-popup button:hover {
      background-color: #e6b86a;
      transform: translateY(-2px);
    }


/* 4. Hero Section */
.hero-section {
    position: relative; /* For parallax child */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--color-text-light);
    overflow: hidden; /* Contain parallax elements if they use transforms */
}

.hero-section .hero-body {
    position: relative; /* To ensure content is above parallax layers */
    z-index: 2;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-text-light) !important; /* Explicitly white */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--color-text-light) !important; /* Explicitly white */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
    margin-top: var(--spacing-unit);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.hero-section .parallax-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-attachment: fixed; /* Simple parallax */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1; /* Behind hero-body content */
    opacity: 0.7; /* Adjust opacity for desired effect */
    transform: translateZ(-1px) scale(1.1); /* For a subtle depth, if not using fixed */
}

/* 5. General Section Styling */
.section {
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 1.5);
}

.section-highlighted {
    background-color: var(--color-background-section-highlighted);
}

.content p:not(:last-child),
.content dl:not(:last-child),
.content ol:not(:last-child),
.content ul:not(:last-child),
.content blockquote:not(:last-child),
.content pre:not(:last-child),
.content table:not(:last-child) {
    margin-bottom: var(--spacing-unit);
}
.content figure {
    margin-left: 0;
    margin-right: 0;
    margin-top: calc(var(--spacing-unit) * 1.5);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.content figure img {
    border-radius: var(--border-radius-medium);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.content figcaption {
    margin-top: calc(var(--spacing-unit) / 2);
    color: var(--color-text-body);
    opacity: 0.8;
}


/* 6. Volumetric UI Elements (General) */
.volumetric-element {
    background-color: var(--color-background-card);
    border: var(--volumetric-border-width) solid var(--color-border-strong);
    box-shadow: var(--volumetric-offset) var(--volumetric-offset) 0 0 var(--color-border-strong);
    transition: transform var(--volumetric-transition-speed) ease-out, box-shadow var(--volumetric-transition-speed) ease-out;
    border-radius: var(--border-radius-medium);
}

.volumetric-element:hover {
    transform: translate(calc(var(--volumetric-offset) / -2), calc(var(--volumetric-offset) / -2));
    box-shadow: calc(var(--volumetric-offset) * 1.5) calc(var(--volumetric-offset) * 1.5) 0 0 var(--color-border-strong);
}
.volumetric-element:active {
    transform: translate(calc(var(--volumetric-offset) / 2), calc(var(--volumetric-offset) / 2));
    box-shadow: calc(var(--volumetric-offset) / 2) calc(var(--volumetric-offset) / 2) 0 0 var(--color-border-strong);
}


/* 7. Button Styles (Global) */
.button.volumetric-button {
    font-family: var(--font-heading);
    font-weight: bold;
    border-radius: var(--border-radius-medium);
    border-width: var(--volumetric-border-width);
    transition: transform var(--volumetric-transition-speed) ease-out, 
                box-shadow var(--volumetric-transition-speed) ease-out,
                background-color 0.2s ease;
    padding: 0.75em 1.5em; /* Increased padding for better feel */
}

.button.volumetric-button.is-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary-dark);
    box-shadow: var(--volumetric-offset) var(--volumetric-offset) 0 0 var(--color-primary-dark);
    color: var(--color-text-light);
}
.button.volumetric-button.is-primary:hover {
    background-color: color-mix(in srgb, var(--color-primary) 90%, white);
    transform: translate(calc(var(--volumetric-offset) / -2), calc(var(--volumetric-offset) / -2));
    box-shadow: calc(var(--volumetric-offset) * 1.5) calc(var(--volumetric-offset) * 1.5) 0 0 var(--color-primary-dark);
    color: var(--color-text-light); /* Ensure text color remains on hover */
}
.button.volumetric-button.is-primary:active {
    background-color: var(--color-primary-dark);
    transform: translate(calc(var(--volumetric-offset) / 2), calc(var(--volumetric-offset) / 2));
    box-shadow: calc(var(--volumetric-offset) / 2) calc(var(--volumetric-offset) / 2) 0 0 var(--color-primary-dark);
    color: var(--color-text-light);
}

.button.volumetric-button.is-accent { /* For hero button example */
    background-color: var(--color-secondary);
    border-color: var(--color-secondary-dark);
    box-shadow: var(--volumetric-offset) var(--volumetric-offset) 0 0 var(--color-secondary-dark);
    color: var(--color-text-light);
}
.button.volumetric-button.is-accent:hover {
    background-color: color-mix(in srgb, var(--color-secondary) 90%, white);
    transform: translate(calc(var(--volumetric-offset) / -2), calc(var(--volumetric-offset) / -2));
    box-shadow: calc(var(--volumetric-offset) * 1.5) calc(var(--volumetric-offset) * 1.5) 0 0 var(--color-secondary-dark);
    color: var(--color-text-light);
}
.button.volumetric-button.is-accent:active {
    background-color: var(--color-secondary-dark);
    transform: translate(calc(var(--volumetric-offset) / 2), calc(var(--volumetric-offset) / 2));
    box-shadow: calc(var(--volumetric-offset) / 2) calc(var(--volumetric-offset) / 2) 0 0 var(--color-secondary-dark);
    color: var(--color-text-light);
}


/* 8. Card Styles */
.card { /* General Bulma card, extended */
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure cards in a row take same height if needed */
    border-radius: var(--border-radius-large); /* Softer radius for cards */
    overflow: hidden; /* Important for image radius and volumetric effect */
}

.card.volumetric-element { /* Override if using both Bulma card and volumetric */
    border-radius: var(--border-radius-large); /* Ensure consistency */
}

.card .card-image.image-container { /* For images that need fixed height and cover */
    height: 200px; /* Standard height for card top images */
    overflow: hidden;
    position: relative; /* For potential overlay on image */
    border-top-left-radius: calc(var(--border-radius-large) - var(--volumetric-border-width));
    border-top-right-radius: calc(var(--border-radius-large) - var(--volumetric-border-width));
}

.card .card-image.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Remove extra space below image */
    transition: transform 0.3s ease-out;
}
.card:hover .card-image.image-container img {
    transform: scale(1.05);
}

.card .card-content {
    padding: calc(var(--spacing-unit) * 1.5);
    flex-grow: 1; /* Allows content to fill space, useful for varying text lengths */
    display: flex;
    flex-direction: column;
}
.card .card-content .card-title {
    color: var(--color-text-headings);
    margin-bottom: calc(var(--spacing-unit) * 0.75);
}
.card .card-content p:last-child {
    margin-bottom: 0;
}

/* Specific card types */
.methodology-card .card-image.image-container {
    height: 220px;
}
.instructor-card .card-image.image-container img.is-rounded {
    width: 150px; /* For circular instructor images */
    height: 150px;
    border-radius: 50% !important;
    margin: var(--spacing-unit) auto; /* Center the rounded image */
    border: 4px solid var(--color-primary-light);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.instructor-card .card-image.image-container { /* Override default card image container for instructors */
    height: auto;
    border-radius: 0;
}

.webinar-card .card-image.image-container {
    height: 180px;
}

.customer-story-card .media-left .image.is-64x64 img.is-rounded {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 2px solid var(--color-primary);
}
.customer-story-card .card-content {
    background-color: var(--color-primary-light);
    border-radius: var(--border-radius-medium);
    padding: var(--spacing-unit);
}
.customer-story-card.volumetric-element {
    border-color: var(--color-primary-dark); /* Match the content color */
    box-shadow: var(--volumetric-offset) var(--volumetric-offset) 0 0 var(--color-primary-dark);
}

.resource-card {
    padding: var(--spacing-unit);
    background-color: var(--color-surface);
}
.resource-card .card-title a {
    color: var(--color-secondary);
    font-weight: bold;
}
.resource-card .card-title a:hover {
    color: var(--color-secondary-dark);
}


/* 9. Form Styles */
.contact-form {
    padding: calc(var(--spacing-unit) * 2) !important; /* Bulma p-5 override */
    background-color: var(--color-surface); /* Card background for form */
}

.label.form-label {
    color: var(--color-text-headings);
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

.input.volumetric-input,
.textarea.volumetric-input {
    background-color: var(--color-background-page); /* Slightly off-white for input fields */
    border: var(--volumetric-border-width) solid var(--color-border-neutral);
    box-shadow: inset 2px 2px 3px rgba(0,0,0,0.06); /* Inset shadow for typed-in feel */
    border-radius: var(--border-radius-small);
    color: var(--color-text-body);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input.volumetric-input:focus,
.textarea.volumetric-input:focus {
    border-color: var(--color-primary);
    box-shadow: inset 2px 2px 3px rgba(0,0,0,0.06), 0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent);
    outline: none;
}
.input.volumetric-input::placeholder,
.textarea.volumetric-input::placeholder {
    color: color-mix(in srgb, var(--color-text-body) 60%, transparent);
}

.checkbox label { /* Ensure checkbox label is also well-styled */
    color: var(--color-text-body);
}
.checkbox input[type="checkbox"] {
    margin-right: 0.5em;
    transform: scale(1.1); /* Slightly larger checkbox */
}
.checkbox a { /* For privacy policy link */
    font-weight: bold;
}

.contact-details p {
    margin-bottom: calc(var(--spacing-unit) / 2);
}
.contact-details strong {
    color: var(--color-text-headings);
}

/* 10. Progress Bar Styles */
.progress.is-primary {
    height: 10px;
    border-radius: var(--border-radius-large); /* Make it pill-shaped */
}
.progress.is-primary::-webkit-progress-value {
    background-color: var(--color-primary);
    border-radius: var(--border-radius-large);
}
.progress.is-primary::-moz-progress-bar {
    background-color: var(--color-primary);
    border-radius: var(--border-radius-large);
}
.progress.is-primary::-ms-fill {
    background-color: var(--color-primary);
    border-radius: var(--border-radius-large);
}


/* 11. Footer Styles */
.footer {
    background-color: var(--color-text-headings); /* Dark footer */
    color: color-mix(in srgb, var(--color-text-light) 80%, transparent);
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 1.5);
}
.footer .title.footer-title {
    color: var(--color-text-light);
    margin-bottom: calc(var(--spacing-unit) * 1.2);
    font-size: 1.25rem;
}
.footer ul {
    list-style: none;
    margin-left: 0;
}
.footer ul li {
    margin-bottom: calc(var(--spacing-unit) / 2);
}
.footer a {
    color: color-mix(in srgb, var(--color-text-light) 85%, transparent);
    font-weight: normal;
}
.footer a:hover {
    color: var(--color-primary-light);
    text-decoration: underline;
}
.footer .content p { /* For copyright */
    color: color-mix(in srgb, var(--color-text-light) 70%, transparent);
    font-size: 0.9rem;
}

/* 12. Specific Page Styles */

/* success.html - Centered content */
.success-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-height)); /* Full viewport height minus header */
    text-align: center;
    padding: var(--spacing-unit);
}
.success-page-container .icon {
    color: var(--color-primary);
    font-size: 4rem; /* Large icon */
    margin-bottom: var(--spacing-unit);
}
.success-page-container .title {
    color: var(--color-text-headings);
}
.success-page-container .subtitle {
    color: var(--color-text-body);
}

/* privacy.html, terms.html - Top padding */
.privacy-page-container,
.terms-page-container {
    padding-top: calc(var(--header-height) + var(--spacing-unit) * 2); /* Ensure content is below fixed header */
    padding-bottom: calc(var(--spacing-unit) * 2);
    max-width: 800px; /* Readable width for text-heavy pages */
    margin-left: auto;
    margin-right: auto;
}
.privacy-page-container .content h1, .privacy-page-container .content h2, .privacy-page-container .content h3,
.terms-page-container .content h1, .terms-page-container .content h2, .terms-page-container .content h3 {
    margin-top: calc(var(--spacing-unit) * 2);
    margin-bottom: var(--spacing-unit);
    color: var(--color-text-headings);
}


/* 13. Animations & Transitions (AOS is handled by library, these are micro-interactions) */
/* Hover effects for cards and buttons are already defined */

/* Micro-animation for links */
a.navbar-item, .footer a, .card a:not(.button) {
    position: relative;
    text-decoration: none;
}

a.navbar-item::after, .footer a::after, .card a:not(.button)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 2px; /* Space between text and underline */
    right: 0;
    background: var(--color-primary); /* Or respective link hover color */
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
}


/* Prevent default underline on hover if using custom one */
a.navbar-item:hover, .footer a:hover, .card a:not(.button):hover {
    text-decoration: none;
}


/* 14. Responsive Styles (Bulma handles most grid responsiveness) */
@media screen and (max-width: 768px) {
    .hero-title {
        font-size: 2.2rem;
    }
    .hero-subtitle {
        font-size: 1.2rem;
    }
    .section {
        padding: calc(var(--spacing-unit) * 2) var(--spacing-unit);
    }
    .columns.is-centered .column.is-two-thirds {
        width: 90%; /* More space on mobile */
    }
     .columns.is-multiline .column.is-one-third,
     .columns.is-multiline .column.is-half,
     .columns.is-multiline .column.is-two-fifths {
        width: 100%; /* Stack cards on mobile */
        margin-bottom: var(--spacing-unit);
    }
    .contact-form {
        padding: var(--spacing-unit) !important;
    }
}