/* style.css */

:root {
    /* Typography */
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Lato', sans-serif;

    /* Analogous Color Scheme (Blue Base) */
    --color-primary: #3498db; /* Bright Blue */
    --color-primary-dark: #2980b9; /* Darker Blue */
    --color-primary-light: #5dade2; /* Lighter Blue */

    --color-analogous-accent: #1abc9c; /* Teal - Analogous to Blue */
    --color-analogous-accent-dark: #16a085; /* Darker Teal */

    /* Neutral & Text Colors */
    --color-text-base: #333333; /* Dark Gray for body text */
    --color-text-headings: #222222; /* Very Dark Gray/Black for main headings (high contrast) */
    --color-text-subtle: #555555; /* Medium Gray for subtitles, less emphasis */
    --color-text-inverted: #ffffff; /* White text for dark backgrounds */

    /* Background Colors */
    --color-background-body: #f4f7f6; /* Very Light Gray/Off-White */
    --color-background-card: #ffffff; /* White for cards */
    --color-background-section-alt: #e9ecef; /* Slightly darker for alternating sections */
    --color-background-footer: #2c3e50; /* Dark Slate Blue for footer */

    /* Brutalist Elements */
    --border-brutalist: 2px solid var(--color-text-headings);
    --shadow-brutalist: 4px 4px 0px var(--color-text-headings);
    --shadow-brutalist-hover: 6px 6px 0px var(--color-primary);

    /* Transitions & Durations */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-easing: ease-in-out;

    /* Spacing */
    --navbar-height: 52px; /* Standard Bulma navbar height */
    --padding-section-vertical: 4rem;
    --padding-section-horizontal: 1.5rem;
}

/* Global Reset & Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

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

/* Headings */
h1, h2, h3, h4, h5, h6,
.title,
.subtitle {
    font-family: var(--font-primary);
    color: var(--color-text-headings);
    font-weight: 700; /* Default bold for Roboto */
    line-height: 1.3;
    margin-bottom: 1rem; /* Default margin for Bulma titles */
}

.title.is-1 { font-size: 3rem; font-weight: 900; }
.title.is-2 { font-size: 2.5rem; font-weight: 900; }
.title.is-3 { font-size: 2rem; }
.title.is-4 { font-size: 1.5rem; }
.title.is-5 { font-size: 1.25rem; }
.title.is-6 { font-size: 1rem; }

.subtitle {
    color: var(--color-text-subtle);
    font-weight: 400; /* Lato regular for subtitles if preferred */
}

p {
    margin-bottom: 1rem;
}

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

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

img {
    max-width: 100%;
    height: auto;
    display: block; /* Remove bottom space */
}

/* Bulma Overrides & Enhancements */
.section {
    padding: var(--padding-section-vertical) var(--padding-section-horizontal);
}

/* Global Button Styles */
.button,
button,
input[type='submit'],
input[type='button'],
input[type='reset'] {
    font-family: var(--font-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0; /* Brutalist */
    border: var(--border-brutalist);
    box-shadow: var(--shadow-brutalist);
    transition: transform var(--transition-speed-fast) var(--transition-easing),
                box-shadow var(--transition-speed-fast) var(--transition-easing),
                background-color var(--transition-speed-fast) var(--transition-easing),
                color var(--transition-speed-fast) var(--transition-easing);
    padding: 0.75em 1.5em;
    cursor: pointer;
}

.button:hover,
button:hover,
input[type='submit']:hover,
input[type='button']:hover,
input[type='reset']:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutalist-hover);
}

.button:active,
button:active,
input[type='submit']:active,
input[type='button']:active,
input[type='reset']:active {
    transform: translate(0px, 0px);
    box-shadow: none;
}

.button.is-primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverted);
    border-color: var(--color-text-headings); /* Match brutalist border */
}
.button.is-primary:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-text-inverted);
}

.button.is-link { /* Using analogous accent for links */
    background-color: var(--color-analogous-accent);
    color: var(--color-text-inverted);
    border-color: var(--color-text-headings);
}
.button.is-link:hover {
    background-color: var(--color-analogous-accent-dark);
    color: var(--color-text-inverted);
}

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


/* Input Fields */
.input,
.textarea {
    font-family: var(--font-secondary);
    border-radius: 0;
    border: var(--border-brutalist);
    box-shadow: none; /* Override Bulma's default shadow */
    padding: 0.75em 1em;
    transition: border-color var(--transition-speed-normal) var(--transition-easing),
                box-shadow var(--transition-speed-normal) 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(--color-primary);
    box-shadow: 0 0 0 0.125em rgba(52, 152, 219, 0.25); /* Bulma's focus, adapted */
}

/* Navbar */
.navbar.is-fixed-top {
    border-bottom: var(--border-brutalist);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for fixed navbar */
    background-color: var(--color-background-card);
}

.navbar-item .logo-text {
    font-family: var(--font-primary);
    font-weight: 900;
    font-size: 1.75rem;
    color: var(--color-primary);
}

.navbar-item, .navbar-link {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--color-text-headings);
    transition: background-color var(--transition-speed-fast) var(--transition-easing),
                color var(--transition-speed-fast) var(--transition-easing);
}
.navbar-item:hover, .navbar-link:hover {
    background-color: var(--color-background-medium);
    color: var(--color-primary);
}
.navbar-burger span {
    background-color: var(--color-text-headings);
    height: 2px; /* Brutalist burger lines */
}
.navbar-burger span:nth-child(1) { top: calc(50% - 6px); }
.navbar-burger span:nth-child(2) { top: calc(50% - 1px); }
.navbar-burger span:nth-child(3) { top: calc(50% + 4px); }

/* Hero Section */
.hero#hero {
    /* Natural height is preferred, but fullheight is in HTML */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    /* Dark overlay for text readability on background image */
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), var(--bg-image-url);
}
/* This is a fallback if var(--bg-image-url) is not set directly via style attribute */
.hero#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.4); /* Overlay */
    z-index: 1;
}
.hero#hero .hero-body {
    position: relative;
    z-index: 2; /* Content above overlay */
    text-align: center;
}
.hero#hero .hero-text-background { /* Container for text within hero */
    background-color: rgba(0, 0, 0, 0.6); /* Slightly more opaque background for text block */
    padding: 1.5rem 2rem;
    display: inline-block;
    border-radius: 0; /* Brutalist */
}
.hero#hero .title,
.hero#hero .subtitle {
    color: var(--color-text-inverted) !important; /* Ensure white text */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Stronger shadow for readability */
}

/* Content Pages (Privacy, Terms) Padding */
.page-content-padding {
    padding-top: calc(var(--navbar-height) + 40px); /* 52px + 40px = 92px. User requested 100px. */
}
/* Overriding specific section padding for these pages */
body > #main-container > section.section > .container.content[style*="padding-top: 80px"] {
    padding-top: calc(var(--navbar-height) + 48px) !important; /* ~100px total */
}


/* Section Title Centering */
.section-title.has-text-centered,
.has-text-centered .section-title { /* If parent is centered */
    margin-left: auto;
    margin-right: auto;
}

/* Skewed Sections (Curved Grids) - Subtle effect */
.skew-section {
    transform: skewY(-1.5deg);
    margin: 2rem 0; /* Create space for the skew */
}
.skew-section > .container {
    transform: skewY(1.5deg); /* Counter-skew content */
}

/* Card Styling (Global) */
.card {
    background-color: var(--color-background-card);
    border: var(--border-brutalist);
    border-radius: 0; /* Brutalist */
    box-shadow: var(--shadow-brutalist);
    transition: transform var(--transition-speed-normal) var(--transition-easing),
                box-shadow var(--transition-speed-normal) var(--transition-easing);
    height: 100%; /* For consistent height in columns */
    display: flex;
    flex-direction: column;
    /* align-items: center; /* This centers the .card-image and .card-content blocks if they are not full width */
    text-align: center; /* Centers inline/inline-block content within the card */
    overflow: hidden; /* Prevents shadow clipping issues sometimes */
}

.card:hover {
    transform: translate(-3px, -3px);
    box-shadow: var(--shadow-brutalist-hover);
}

.card .card-image { /* Bulma's .card-image */
    border-bottom: var(--border-brutalist);
    position: relative; /* For aspect ratio trick if figure is used */
    width: 100%; /* Ensure it spans the card width */
    display: flex; /* To center the figure/img if it's smaller */
    justify-content: center;
    align-items: center;
}

.card .card-image figure { /* Bulma's figure inside card-image */
    margin: 0; /* Reset margin */
    width: 100%;
    /* Fixed height for image containers as requested */
    height: 200px; /* Example fixed height, adjust as needed or per card type */
}
/* Specific card types can have different image heights */
.feature-card .card-image figure { height: 220px; }
.instructor-card .card-image figure { height: 250px; } /* For 1:1, this will be square */
.blog-card .card-image figure { height: 200px; }


.card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crucial for fixed height containers */
    display: block;
    border-radius: 0;
}

.card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to fill space */
    text-align: center; /* Center text content */
}
.card .card-content .title,
.card .card-content .subtitle {
    margin-left: auto; /* Center block-level titles/subtitles if they don't span full width */
    margin-right: auto;
}
.card .card-content .subtitle {
    color: var(--color-text-subtle);
}

/* "Read More" Link Styling */
a.read-more-link,
.button.is-link.is-small { /* If using Bulma button for it */
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--font-primary);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-analogous-accent);
    padding: 0.5em 0; /* Underline effect space */
    position: relative;
    text-decoration: none !important;
}

a.read-more-link::after,
.button.is-link.is-small::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-analogous-accent);
    transform: scaleX(0.8);
    transform-origin: bottom right;
    transition: transform var(--transition-speed-normal) var(--transition-easing);
}

a.read-more-link:hover::after,
.button.is-link.is-small:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.button.is-link.is-small { /* Specific styling if using Bulma's button */
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding-left: 0;
    padding-right: 0;
}
.button.is-link.is-small:hover {
    color: var(--color-analogous-accent-dark) !important;
    transform: none !important; /* Prevent button's default transform */
}


/* Progress Indicators */
.progress {
    border-radius: 0;
    height: 1.25rem; /* Slightly thicker */
    border: 1px solid var(--color-text-subtle); /* Brutalist touch */
    background-color: var(--color-background-medium);
}
.progress::-webkit-progress-bar {
    background-color: var(--color-background-medium);
    border-radius: 0;
}
.progress.is-primary::-webkit-progress-value { background-color: var(--color-primary); border-radius: 0;}
.progress.is-success::-webkit-progress-value { background-color: var(--color-analogous-accent); border-radius: 0;}
.progress.is-info::-webkit-progress-value { background-color: var(--color-primary-light); border-radius: 0;}

.progress::-moz-progress-bar {
    border-radius: 0;
}
.progress.is-primary::-moz-progress-bar { background-color: var(--color-primary); }
.progress.is-success::-moz-progress-bar { background-color: var(--color-analogous-accent); }
.progress.is-info::-moz-progress-bar { background-color: var(--color-primary-light); }


/* Success Stories / Testimonials */
.testimonial-card .media-left img.is-rounded {
    border-radius: 0 !important; /* Override Bulma for brutalist */
    border: var(--border-brutalist);
    padding: 3px;
}
.testimonial-card .media-content {
    text-align: left; /* Testimonial text can be left-aligned for readability */
}

/* Gallery Section */
#gallery .image figure {
    border: var(--border-brutalist);
    box-shadow: var(--shadow-brutalist);
    transition: transform var(--transition-speed-normal) var(--transition-easing),
                box-shadow var(--transition-speed-normal) var(--transition-easing);
    height: 250px; /* Consistent height for gallery items */
}
#gallery .image figure:hover {
    transform: translate(-2px, -2px) scale(1.02);
    box-shadow: var(--shadow-brutalist-hover);
}
#gallery .image figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Footer */
.footer {
    background-color: var(--color-background-footer);
    color: var(--color-text-inverted);
    padding: 3rem var(--padding-section-horizontal) 2rem; /* Reduced bottom padding */
    border-top: 5px solid var(--color-primary); /* Brutalist accent */
}
.footer .title {
    color: var(--color-text-inverted);
    font-weight: 700;
}
.footer a {
    color: var(--color-primary-light);
    font-weight: normal; /* Normal weight for footer links */
    text-decoration: none;
}
.footer a:hover {
    color: var(--color-text-inverted);
    text-decoration: underline;
}
.footer .content p {
    color: #bdc3c7; /* Lighter gray for footer paragraph text */
}
.footer ul {
    list-style: none;
    margin-left: 0;
}
.footer ul li {
    margin-bottom: 0.5rem;
}

/* Footer Social Links (Text-based) */
.footer .social-links-list li a {
    /* Style as text, but can add subtle icon-like spacing or look */
    padding: 0.25rem 0;
    display: inline-block; /* To allow padding */
}
/* If you want to add pseudo-elements for icons later: */
/* .footer .social-links-list li a::before {
    content: '['; margin-right: 0.3em;
}
.footer .social-links-list li a::after {
    content: ']'; margin-left: 0.3em;
} */


/* Success Page */
body.success-page { /* Add this class to body of success.html */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.success-page #main-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.success-page .hero.is-fullheight { /* Bulma's fullheight for hero on success page */
    flex-grow: 1; /* Make hero take available space */
    display: flex; /* For centering hero-body */
    align-items: center;
    justify-content: center;
}
.success-page .hero-body {
    width: 100%;
    text-align: center;
}
.success-page .success-icon {
    font-size: 5rem;
    color: var(--color-analogous-accent); /* Greenish for success */
    line-height: 1;
    margin-bottom: 1rem;
    font-weight: 900; /* Bolder checkmark */
}

/* Parallax and Glassmorphism (Placeholders / Subtle Implementations) */
/* Parallax: Best done with JS for wider compatibility and control.
   CSS-only parallax can be limited. Example for a fixed background: */
/* .parallax-section {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} */

/* Glassmorphism: Use sparingly, can clash with brutalism.
   Apply to small, overlaying elements. */
/* .glass-panel {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0; // Keep brutalist edges
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} */

/* Utility Classes */
.text-center { text-align: center; }
.margin-auto { margin-left: auto; margin-right: auto; }
.no-border-radius { border-radius: 0 !important; }
.full-width { width: 100%; }


/* Specific section adjustments if needed */
#instructors .card .card-image figure {
    height: 280px; /* Slightly taller for instructor portraits */
}

#blog .card .card-image figure {
    height: 220px; /* Standard blog image height */
}


/* Responsive adjustments */
@media screen and (max-width: 1023px) { /* Tablet and below */
    .skew-section {
        transform: none; /* Disable skew on smaller screens if it causes layout issues */
        margin: 0;
    }
    .skew-section > .container {
        transform: none;
    }
    .page-content-padding {
        padding-top: calc(var(--navbar-height) + 20px);
    }
    body > #main-container > section.section > .container.content[style*="padding-top: 80px"] {
        padding-top: calc(var(--navbar-height) + 20px) !important;
    }
}

@media screen and (max-width: 768px) { /* Mobile */
    .title.is-1 { font-size: 2.5rem; }
    .title.is-2 { font-size: 2rem; }

    .section {
        padding: calc(var(--padding-section-vertical) * 0.75) var(--padding-section-horizontal);
    }

    .columns.is-centered .column.is-two-thirds {
        width: 90%; /* Allow wider content on mobile for readability */
    }

    .card {
        box-shadow: 3px 3px 0px var(--color-text-headings); /* Smaller shadow on mobile */
    }
    .card:hover {
        box-shadow: 5px 5px 0px var(--color-primary);
    }
}