/* style.css */

/* -----------------------------------------------------------------------------
TABLE OF CONTENTS:
--------------------------------------------------------------------------------
1.  CSS Variables
2.  Global Styles (Body, HTML, Typography Base)
3.  Bulma Overrides & Enhancements (Minimal)
4.  Layout Components (Navbar, Footer)
5.  Global UI Components (Buttons, Forms, Cards)
6.  Section Specific Styles
    - Hero Section
    - Pricing Section
    - Instructors Section
    - Portfolio Section
    - Innovation Section
    - Events & Events Calendar Section
    - Press Section
    - External Resources Section
    - Contact Form Section
7.  Page Specific Styles (Success, Privacy, Terms)
8.  Utility Classes & Animations
----------------------------------------------------------------------------- */

/* 1. CSS Variables
----------------------------------------------------------------------------- */
:root {
    --primary-color: #1A237E; /* Deep Indigo */
    --primary-color-rgb: 26, 35, 126;
    --primary-color-dark: #121858; /* Darker Indigo */
    --primary-color-light: #5359a3; /* Lighter Indigo */

    --secondary-color: #FFCA28; /* Amber/Yellow */
    --secondary-color-rgb: 255, 202, 40;
    --secondary-color-dark: #FFB300; /* Darker Amber */

    --accent-color-1: #00BCD4; /* Cyan */
    --accent-color-1-rgb: 0, 188, 212;
    --accent-color-1-dark: #0097A7; /* Darker Cyan */

    --accent-color-2: #4CAF50; /* Green */
    --accent-color-2-rgb: 76, 175, 80;
    --accent-color-2-dark: #388E3C; /* Darker Green */

    --text-dark: #333333;
    --text-light: #E8EAF6;
    --text-headings-dark-bg: #FFFFFF;
    --text-headings-light-bg: #1A237E; /* This is already dark and contrasty */
    --text-hero: #FFFFFF;

    --bg-light-1: #FFFFFF;
    --bg-light-2: #F5F5F5;
    --bg-light-3: #E8EAF6; /* Portfolio, Press */

    --bg-dark-1: #1A237E; /* Contact form section */
    --bg-dark-2: #0F172A; /* Footer */
    --bg-hero-overlay: rgba(10, 10, 40, 0.7);

    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Merriweather', serif;

    --navbar-height: 3.25rem; /* Bulma's default */
    --navbar-height-effective: 60px; /* For padding calculations to clear fixed navbar */

    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;

    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.07);
    --shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-strong: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-futuristic: 0 0 15px rgba(var(--accent-color-1-rgb), 0.3);

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

/* 2. Global Styles
----------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    background-color: var(--bg-light-1); /* Fallback background */
    font-size: 16px; /* Base font size */
}

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

/* Typography Base */
h1, h2, h3, h4, h5, h6,
.title, .subtitle {
    font-family: var(--font-heading);
    color: var(--text-headings-light-bg); /* Default for light backgrounds */
    font-weight: 700;
}
/* Ensure titles in sections are properly centered if Bulma's .has-text-centered is used */
.section .title.is-2.has-text-centered {
    margin-bottom: 2.5rem; /* Default Bulma is 1.5rem, increase for visual hierarchy */
}
@media screen and (min-width: 769px) {
    .section .title.is-2.has-text-centered {
        margin-bottom: 3.5rem;
    }
}


p {
    margin-bottom: 1rem;
    font-family: var(--font-body);
}

a {
    color: var(--accent-color-1);
    transition: color var(--transition-speed) var(--transition-easing),
                opacity var(--transition-speed) var(--transition-easing);
    text-decoration: none;
    font-weight: 500; /* Merriweather normal is 400, bold is 700. 500 can be used if font supports it or it will fallback*/
}
a:hover {
    color: var(--accent-color-1-dark);
    text-decoration: underline;
}

/* Read more link style */
.read-more-link {
    display: inline-block;
    color: var(--accent-color-1);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    padding: 0.3em 0;
    position: relative;
}
.read-more-link::after {
    content: '→';
    margin-left: 0.5em;
    transition: transform var(--transition-speed) var(--transition-easing);
}
.read-more-link:hover::after {
    transform: translateX(5px);
}
.read-more-link:hover {
    color: var(--accent-color-1-dark);
    text-decoration: none;
}


/* 3. Bulma Overrides & Enhancements
----------------------------------------------------------------------------- */
.section {
    padding: 4rem 1.5rem; /* Default Bulma section padding is 3rem 1.5rem */
}
@media screen and (min-width: 769px) {
    .section {
        padding: 5rem 1.5rem;
    }
}

/* Ensure images within Bulma's figure.image use object-fit: cover */
.image img,
.card-image figure img { /* Specific for cards as per strict rule */
    object-fit: cover;
    width: 100%;
    height: 100%; /* Important for aspect ratio containers */
}

/* 4. Layout Components
----------------------------------------------------------------------------- */
/* Navbar */
.navbar.is-fixed-top {
    background-color: rgba(var(--primary-color-rgb), 0.95) !important; /* From HTML, ensure it overrides Bulma */
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.navbar-item, .navbar-link {
    color: var(--text-light);
    font-family: var(--font-heading);
    font-weight: 600;
    transition: background-color var(--transition-speed) var(--transition-easing), color var(--transition-speed) var(--transition-easing);
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active { /* For current page or hover */
    background-color: rgba(var(--secondary-color-rgb), 0.15) !important;
    color: var(--secondary-color) !important;
}
.navbar-burger span {
    background-color: var(--text-light);
}
.navbar-burger:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.navbar-menu {
    background-color: rgba(var(--primary-color-rgb), 0.98); /* For mobile dropdown */
}
@media screen and (max-width: 1023px) {
    .navbar-menu.is-active {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: var(--navbar-height);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }
     .navbar-item {
        border-bottom: 1px solid rgba(var(--text-light-rgb, 232, 234, 246), 0.1);
    }
}

/* Footer */
.footer {
    background-color: var(--bg-dark-2);
    color: var(--text-light);
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.footer .title {
    color: var(--text-headings-dark-bg);
    font-family: var(--font-heading);
}
.footer p, .footer ul li {
    color: #CBD5E1; /* Lighter than --text-light for subtlety */
    font-family: var(--font-body);
}
.footer a {
    color: var(--accent-color-1); /* Cyan links */
    font-weight: normal;
}
.footer a:hover {
    color: var(--secondary-color); /* Yellow hover */
    text-decoration: underline;
}
.footer hr {
    background-color: #334155; /* Slightly lighter border for dark bg */
}
.footer .content p {
    color: #94A3B8; /* For copyright text */
}

/* Social links in footer are text based, styled by general 'footer a' */

/* 5. Global UI Components
----------------------------------------------------------------------------- */
/* Buttons */
.button {
    font-family: var(--font-heading);
    font-weight: 700;
    border-radius: var(--border-radius-small);
    transition: transform var(--transition-speed) var(--transition-easing),
                background-color var(--transition-speed) var(--transition-easing),
                box-shadow var(--transition-speed) var(--transition-easing),
                border-color var(--transition-speed) var(--transition-easing);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.8em 1.8em;
}
.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.button:active {
    transform: translateY(0px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Primary Button Style (Yellow on Dark Blue text) */
.button.is-primary,
input[type="submit"].button.is-primary { /* For success.html and general forms */
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border-color: var(--secondary-color);
}
.button.is-primary:hover,
input[type="submit"].button.is-primary:hover {
    background-color: var(--secondary-color-dark);
    color: var(--primary-color-dark);
    border-color: var(--secondary-color-dark);
}

/* Outlined Primary Button (Used in Navbar) */
.button.is-primary.is-outlined {
    background-color: transparent;
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}
.button.is-primary.is-outlined:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color); /* Text becomes dark on yellow hover */
}

/* Link Button (Used for events) */
.button.is-link.is-outlined {
    background-color: transparent;
    border-color: var(--accent-color-1);
    color: var(--accent-color-1);
}
.button.is-link.is-outlined:hover {
    background-color: var(--accent-color-1);
    color: var(--bg-light-1);
}

/* Forms - Futurist Input Styles (For Contact Section) */
.label.has-text-white {
    color: var(--text-light) !important;
    font-family: var(--font-heading);
    font-weight: 600;
}

.futuristic-input,
.futuristic-select .select select, /* Target the select element itself */
.futuristic-textarea {
    background-color: rgba(255, 255, 255, 0.05); /* Very subtle on dark bg */
    border: 1px solid rgba(var(--accent-color-1-rgb), 0.5);
    color: var(--text-light);
    border-radius: var(--border-radius-small);
    transition: all var(--transition-speed) ease;
    padding: 0.85em 1.2em;
    font-family: var(--font-body);
    font-size: 1rem;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.futuristic-input::placeholder,
.futuristic-textarea::placeholder {
    color: rgba(var(--text-light-rgb, 232, 234, 246), 0.6);
}
.futuristic-input:focus,
.futuristic-select .select select:focus,
.futuristic-textarea:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--secondary-color);
    /* Bulma-like focus shadow, adapted for dark theme */
    box-shadow: 0 0 0 0.125em rgba(var(--secondary-color-rgb), 0.35), inset 0 1px 3px rgba(0,0,0,0.1);
    outline: none;
}
.futuristic-select .select:not(.is-multiple):not(.is-loading)::after { /* Select arrow */
    border-color: var(--accent-color-1);
    transition: border-color var(--transition-speed) var(--transition-easing);
}
.futuristic-select .select:hover::after {
    border-color: var(--secondary-color);
}
.checkbox.has-text-light, .checkbox.has-text-light a {
    color: var(--text-light) !important;
}
.checkbox.has-text-light a:hover {
    color: var(--secondary-color) !important;
}


/* Cards - General */
.card { /* Base card style for all card types if not specifically classed */
    background-color: var(--bg-light-1);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-medium);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    overflow: hidden; /* Important for child elements like images */
    display: flex; /* For STROGO rule */
    flex-direction: column; /* For STROGO rule */
    /* align-items: center; /* This centers .card-image and .card-content wrappers */
    /* height: 100%; /* Make cards in a row equal height if desired, Bulma column handles this mostly */
}
.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-strong);
}
.card .card-image { /* Container for image */
    /* width: 100%; /* Ensure it spans card width before centering */
    /* align-self: stretch; /* If card is align-items:center, this helps image container take full width */
    overflow: hidden;
}
.card .card-image figure { /* Bulma's figure for responsive images */
    margin: 0; /* Reset margin if any */
}
.card .card-content {
    padding: 1.5rem;
    width: 100%; /* Ensure content area takes full width */
    text-align: left; /* Default text align, can be centered per card type */
}
.card .title, .card .subtitle { /* General title/subtitle styling in cards */
    color: var(--text-headings-light-bg);
}
.card .subtitle {
    color: var(--accent-color-1);
    font-weight: 400; /* Lighter subtitle */
}
.card .content {
    color: var(--text-dark);
    line-height: 1.7;
}

/* Specific Card Styles from HTML */
/* Futuristic Card (Pricing) */
.futuristic-card { /* Extends .card properties */
    border: 1px solid transparent; /* For hover effect */
}
.futuristic-card:hover {
    border-color: var(--accent-color-1);
}
.futuristic-card .card-content .title {
    font-size: 1.5rem; /* Adjust as needed */
    margin-bottom: 0.5rem;
}
.futuristic-card .card-content .subtitle { /* Price */
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.futuristic-card .button {
    margin-top: 1.5rem;
}

/* Instructor Card */
.instructor-card {
    text-align: center; /* Center text content */
}
.instructor-card .card-image figure.image { /* Ensure image container might have specific radius */
    border-top-left-radius: var(--border-radius-medium);
    border-top-right-radius: var(--border-radius-medium);
    overflow: hidden;
}
.instructor-card .card-image img {
    /* object-position: top center; If headshots are consistently framed */
}
.instructor-card .card-content .title {
    margin-bottom: 0.25rem;
}
.instructor-card .card-content .subtitle {
    margin-bottom: 0.75rem;
}

/* Portfolio Card */
.portfolio-card {
    /* Similar to instructor card if image is on top */
}
.portfolio-card .card-image {
    /* background-color: #000; To ensure image area is distinct if image fails to load */
}
.portfolio-card .card-content .title {
    font-size: 1.25rem;
}

/* Resource Card (External Resources) */
.resource-card {
    box-shadow: var(--shadow-light);
}
.resource-card .card-content .title a {
    color: var(--primary-color);
    font-size: 1.15rem;
}
.resource-card .card-content .title a:hover {
    color: var(--primary-color-dark);
}
.resource-card .card-content p {
    font-size: 0.9rem;
    color: var(--text-dark);
    opacity: 0.8;
}

/* Event Box (Used in Events Section) */
.event-box {
    background: linear-gradient(135deg, rgba(var(--bg-light-1-rgb),1) 0%, rgba(var(--bg-light-3-rgb),0.5) 100%);
    border-left: 5px solid var(--accent-color-1);
    box-shadow: var(--shadow-medium);
    border-radius: var(--border-radius-small);
}
.event-box .title {
    color: var(--primary-color);
}


/* 6. Section Specific Styles
----------------------------------------------------------------------------- */
/* Hero Section */
.hero#hero {
    color: var(--text-hero); /* All text inside hero should be white */
    position: relative; /* For parallax or overlay */
}
.hero#hero .hero-background-overlay { /* From HTML */
    background-color: var(--bg-hero-overlay);
}
.hero#hero .title,
.hero#hero .subtitle,
.hero#hero p {
    color: var(--text-hero) !important; /* Ensure override */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Enhance readability */
}
.hero#hero .title.is-1 {
    font-size: 3rem; /* Adjust as needed */
    margin-bottom: 1rem;
}
.hero#hero .subtitle.is-3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 400; /* Lighter subtitle */
}
.hero#hero p.is-size-5 {
    line-height: 1.8;
}
.hero#hero .button.is-primary { /* The yellow button */
    /* Styles already defined globally */
    min-width: 200px;
    padding: 1em 2em;
}

/* Pricing Section */
#pricing { background-color: var(--bg-light-2); }

/* Instructors Section */
#instructors { background-color: var(--bg-light-1); }

/* Portfolio Section */
#portfolio { background-color: var(--bg-light-3); }
#portfolio .subtitle { color: var(--primary-color-light); }

/* Innovation Section */
#innovation { background-color: var(--bg-light-1); }
#innovation ul {
    list-style: none;
    padding-left: 0;
}
#innovation ul li {
    padding-left: 1.5em;
    position: relative;
    margin-bottom: 0.75em;
}
#innovation ul li::before {
    content: "◈"; /* Futuristic bullet */
    color: var(--accent-color-1);
    position: absolute;
    left: 0;
    font-size: 1em;
    line-height: inherit;
}

/* Events & Events Calendar Section */
#events { background-color: var(--bg-light-2); }
#events .subtitle { color: var(--primary-color-light); }
#events-calendar { background-color: var(--bg-light-1); }
#events-calendar .subtitle { color: var(--primary-color-light); }
#events-calendar .table {
    box-shadow: var(--shadow-light);
    border-radius: var(--border-radius-small);
    overflow: hidden;
}
#events-calendar .table th {
    background-color: var(--primary-color);
    color: var(--text-headings-dark-bg);
    border-color: var(--primary-color-dark);
}
#events-calendar .table td {
    vertical-align: middle;
}
#events-calendar .table .button.is-small {
    padding: 0.4em 0.8em;
    font-size: 0.8rem;
}

/* Press Section */
#press { background-color: var(--bg-light-3); }
#press .subtitle { color: var(--primary-color-light); }
#press img {
    max-height: 60px; /* Control partner logo size */
    width: auto;
    margin: 0 auto 10px auto; /* Center logos */
    filter: grayscale(80%);
    opacity: 0.7;
    transition: filter var(--transition-speed) var(--transition-easing), opacity var(--transition-speed) var(--transition-easing);
}
#press img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* External Resources Section */
#external-resources { background-color: var(--bg-light-1); }
#external-resources .subtitle { color: var(--primary-color-light); }

/* Contact Form Section */
#contact-form-section {
    background-color: var(--bg-dark-1);
    background-image: var(--bg-contact-image, none); /* Placeholder for potential image */
    background-size: cover;
    background-position: center;
    position: relative;
}
#contact-form-section .title,
#contact-form-section .subtitle {
    color: var(--text-headings-dark-bg);
}
#contact-form-section .subtitle {
    opacity: 0.9;
}


/* 7. Page Specific Styles
----------------------------------------------------------------------------- */
/* Success Page */
.success-page-container { /* Add this class to body or main wrapper of success.html */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 20px;
    background-color: var(--bg-light-2);
}
.success-page-content {
    background-color: var(--bg-light-1);
    padding: 2.5rem 3rem;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-strong);
    max-width: 600px;
}
.success-page-content .icon.is-large .fa-check-circle { /* Assuming FontAwesome is used */
    font-size: 4rem;
    color: var(--accent-color-2); /* Green for success */
}
.success-page-content .title {
    color: var(--text-headings-light-bg);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.success-page-content p {
    color: var(--text-dark);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}
.success-page-content .button {
    min-width: 180px;
}

/* Privacy & Terms Pages */
.privacy-page-container,
.terms-page-container { /* Add this class to main content wrapper of privacy.html / terms.html */
    padding-top: calc(var(--navbar-height-effective) + 40px); /* 60px + 40px = 100px */
    padding-bottom: 40px;
    min-height: calc(100vh - var(--navbar-height-effective)); /* Ensure content fills screen if short */
}
.privacy-page-container .content h1, .terms-page-container .content h1,
.privacy-page-container .content h2, .terms-page-container .content h2,
.privacy-page-container .content h3, .terms-page-container .content h3 {
    color: var(--text-headings-light-bg);
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.privacy-page-container .content p, .terms-page-container .content p,
.privacy-page-container .content ul, .terms-page-container .content ul,
.privacy-page-container .content ol, .terms-page-container .content ol {
    color: var(--text-dark);
    font-family: var(--font-body);
    line-height: 1.7;
}

/* 8. Utility Classes & Animations
----------------------------------------------------------------------------- */
/* Parallax-like effect for backgrounds (if needed beyond hero) */
.has-parallax-background {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Text on image readability overlay */
.has-text-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4));
    z-index: 1;
}
.has-text-overlay > * { /* Ensure content is above overlay */
    position: relative;
    z-index: 2;
}

/* Responsive adjustments if needed beyond Bulma */
@media screen and (max-width: 768px) {
    .hero#hero .title.is-1 {
        font-size: 2.2rem;
    }
    .hero#hero .subtitle.is-3 {
        font-size: 1.2rem;
    }
    .section {
        padding: 3rem 1rem;
    }
     .futuristic-card .card-content .title {
        font-size: 1.3rem;
    }
}

/* Ensure contrast for section titles (already dark #1A237E on light backgrounds) */
/* If a light title was used on a light background, this would be needed:
.section-title-light-on-light {
    color: #f0f0f0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
*/
.subtitle.is-6,.subtitle.is-5{
margin-top: 10px !important;
}