/* style.css */

:root {
    /* Fonts */
    --font-primary: 'Archivo Black', sans-serif;
    --font-secondary: 'Roboto', sans-serif;

    /* Pastel Colors */
    --color-primary: #A7D7C5;       /* Soft Mint/Teal */
    --color-primary-darker: #82b4a1;/* Darker Mint/Teal for hover */
    --color-secondary: #F5CEC7;     /* Light Peach */
    --color-accent: #E7F0C3;       /* Pale Yellow */
    --color-background-light: #FEFBF6; /* Very Light Off-White */
    --color-background-medium: #F7F7F7; /* Light Gray */
    --color-text-dark: #333333;
    --color-text-heading: #222222; /* Darker for headings */
    --color-text-light: #FFFFFF;
    --color-text-medium: #5A5A5A; /* Slightly darker medium for better contrast */

    --color-success: #79C79F;       /* Pastel Green */
    --color-success-darker: #63b089;
    --color-info: #82C0D9;         /* Pastel Blue */
    --color-warning: #F4D35E;       /* Pastel Yellow-Orange */
    --color-danger: #EFA6A6;        /* Pastel Red */
    --color-light-bulma: #f5f5f5;   /* Bulma's light */
    --color-light-bulma-darker: #e8e8e8;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-small: 0.5rem;
    --spacing-medium: 1rem;
    --spacing-large: 2rem;
    --spacing-xlarge: 3rem;
    --spacing-xxlarge: 4rem;


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

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;

    /* Navbar height */
    --navbar-height: 5.25rem; /* Bulma default is 3.25rem, but with padding can be more */
}

/* Global Styles */
html {
    scroll-behavior: smooth;
    background-color: var(--color-background-light);
}

body {
    font-family: var(--font-secondary);
    color: var(--color-text-dark);
    line-height: 1.6;
    font-size: 16px; /* Base font size */
    background-color: var(--color-background-light);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--color-text-heading);
    font-weight: normal; /* Archivo Black is already bold */
}

.title { font-family: var(--font-primary); color: var(--color-text-heading); }
.subtitle { font-family: var(--font-secondary); color: var(--color-text-medium); }

a {
    color: var(--color-primary);
    transition: color var(--transition-speed) var(--transition-timing);
}
a:hover {
    color: var(--color-primary-darker);
}

.section {
    padding: var(--spacing-xlarge) 1.5rem;
}
.section-padding { padding: var(--spacing-xlarge) 1.5rem; }
.section-padding-large { padding: var(--spacing-xxlarge) 1.5rem; }
.section-padding-small { padding: var(--spacing-large) 1.5rem; }


.section-title {
    font-family: var(--font-primary);
    color: var(--color-text-heading);
    margin-bottom: var(--spacing-large) !important;
    text-align: center;
    position: relative;
    padding-bottom: var(--spacing-medium);
    font-size: 2.5rem; /* Default title size */
}
.section-title.is-2 { font-size: 2.5rem; }
.section-title.is-1 { font-size: 3rem; }

.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--color-primary);
    margin: var(--spacing-medium) auto 0;
    border-radius: 2px;
}

/* Global Button Styles */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-secondary);
    font-weight: bold;
    border-radius: var(--border-radius-medium);
    padding: 0.8em 1.8em;
    transition: background-color var(--transition-speed) var(--transition-timing),
                color var(--transition-speed) var(--transition-timing),
                transform var(--transition-speed) var(--transition-timing),
                box-shadow var(--transition-speed) var(--transition-timing);
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    cursor: pointer;
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.15);
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.button.is-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-dark);
}
.button.is-primary:hover {
    background-color: var(--color-primary-darker);
    border-color: var(--color-primary-darker);
    color: var(--color-text-dark);
}
.button.is-primary strong { color: inherit; }


.button.is-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-text-dark);
}
.button.is-success:hover {
    background-color: var(--color-success-darker);
    border-color: var(--color-success-darker);
    color: var(--color-text-dark);
}

.button.is-light {
    background-color: var(--color-light-bulma);
    border-color: #dbdbdb;
    color: var(--color-text-dark);
}
.button.is-light:hover {
    background-color: var(--color-light-bulma-darker);
    border-color: #b5b5b5;
    color: var(--color-text-dark);
}

.button.is-large { padding: 1em 2.2em; font-size: 1.1rem; }
.button.is-small { padding: 0.6em 1.2em; font-size: 0.8rem; }
.button.is-fullwidth { width: 100%; }

/* Form Elements */
.input, .textarea {
    font-family: var(--font-secondary);
    border-radius: var(--border-radius-small);
    border: 1px solid #dbdbdb;
    padding: 0.75em 1em;
    transition: border-color var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    background-color: var(--color-text-light); /* White background for inputs */
    color: var(--color-text-dark);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.input::placeholder, .textarea::placeholder {
    color: #b0b0b0;
}
.input:focus, .textarea:focus,
.input:active, .textarea:active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.125em rgba(167, 215, 197, 0.25); /* Primary color with alpha */
}
.label {
    font-family: var(--font-secondary);
    color: var(--color-text-medium);
    font-weight: bold;
    font-size: 0.9rem;
}
.field:not(:last-child) {
    margin-bottom: 1.25rem; /* More spacing between fields */
}

/* Header & Navbar */
.header {
    /* Placeholder if needed for non-fixed scenarios or additional styling */
}
.navbar.is-fixed-top {
    background-color: rgba(254, 251, 246, 0.9); /* Semi-transparent background */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    min-height: var(--navbar-height);
}
.navbar-brand .navbar-item.logo-text {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    color: var(--color-primary) !important;
    font-weight: bold;
}
.navbar-item {
    font-family: var(--font-secondary);
    font-weight: 500; /* Roboto medium */
    color: var(--color-text-medium);
    transition: color var(--transition-speed) var(--transition-timing);
    padding: 0.5rem 1rem;
}
.navbar-item:hover, .navbar-item.is-active {
    background-color: transparent !important;
    color: var(--color-primary) !important;
}
.navbar-burger span {
    background-color: var(--color-primary);
    height: 2px; /* Thinner burger lines */
}
.navbar-menu.is-active {
    background-color: var(--color-background-light);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border-top: 1px solid var(--color-background-medium);
}
@media screen and (max-width: 1023px) {
    .navbar-menu .navbar-item {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--color-background-medium);
    }
    .navbar-menu .navbar-item:last-child { border-bottom: none; }
}


/* Hero Section */
#hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    color: var(--color-text-light);
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6));
    z-index: 1;
}
#hero .hero-body > .container {
    position: relative;
    z-index: 2;
}
#hero .hero-title {
    font-size: 3.5rem; /* Larger hero title */
    color: var(--color-text-light);
    text-shadow: 2px 2px 6px rgba(0,0,0,0.5);
    margin-bottom: var(--spacing-medium);
}
#hero .hero-subtitle {
    font-size: 1.5rem;
    color: var(--color-text-light);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    margin-bottom: var(--spacing-large);
    font-weight: 400;
}
@media screen and (max-width: 768px) {
    #hero .hero-title { font-size: 2.5rem; }
    #hero .hero-subtitle { font-size: 1.2rem; }
}

/* Parallax Background Effect */
.has-parallax-background {
    background-attachment: fixed; /* Simple parallax */
}

/* Scroll Animation */
.scroll-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s var(--transition-timing), transform 0.7s var(--transition-timing);
}
.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Card Styles */
.card {
    background-color: var(--color-text-light); /* White cards */
    border-radius: var(--border-radius-large);
    box-shadow: 0 6px 20px rgba(0,0,0,0.07);
    transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    display: flex;
    flex-direction: column;
    height: 100%; /* For consistent height in Bulma columns */
    overflow: hidden; /* To ensure image border-radius is clipped */
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.card .card-image { /* Bulma class for image wrapper */
    border-top-left-radius: var(--border-radius-large);
    border-top-right-radius: var(--border-radius-large);
    overflow: hidden; /* Crucial for img inside to respect radius */
}
.card .card-image figure.image { /* Bulma figure */
    margin: 0; /* Override Bulma's default margin for figure */
    height: 100%; /* Make figure fill its container */
}
.card .card-image img {
    object-fit: cover;
    width: 100%;
    height: 100%; /* Fill the figure (e.g., is-16by9, is-4by3) */
    display: block;
}
.card .card-content {
    padding: var(--spacing-large);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.card .card-content .title { color: var(--color-text-heading); }
.card .card-content .subtitle { color: var(--color-text-medium); }
.card .card-content .content {
    font-family: var(--font-secondary);
    color: var(--color-text-medium);
    font-size: 0.95rem;
    line-height: 1.7;
    flex-grow: 1;
}
.card .card-content .button { margin-top: auto; } /* Push button to bottom */

/* Specific Card Type Styles */
.instructor-card .card-content { text-align: center; }
.instructor-card .card-image { max-height: 300px; } /* Example max height */

.success-story-card .media-left img { border-radius: 50%; }
.success-story-card .content { font-style: italic; }

.event-card .card-content .title, .blog-post-card .card-content .title {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-small) !important;
}
.event-card .card-content .subtitle, .blog-post-card .card-content .subtitle {
    font-size: 0.85rem;
    color: var(--color-text-medium);
    margin-bottom: var(--spacing-medium) !important;
}

.read-more-link {
    color: var(--color-primary);
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    margin-top: var(--spacing-medium);
    transition: color var(--transition-speed) var(--transition-timing), transform var(--transition-speed) var(--transition-timing);
}
.read-more-link:hover {
    color: var(--color-primary-darker);
    text-decoration: none;
    transform: translateX(4px);
}
.read-more-link::after {
    content: ' →'; /* Simple arrow */
}


/* Statistics Section */
.statistics-section .progress {
    height: 12px;
    border-radius: var(--border-radius-small);
    margin-top: var(--spacing-xs);
}
.stat-number {
    font-family: var(--font-primary);
    color: var(--color-primary);
    font-size: 2.5rem;
    line-height: 1;
}
.stat-label {
    font-family: var(--font-secondary);
    color: var(--color-text-medium);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: var(--spacing-small);
}
.stat-description {
    font-family: var(--font-secondary);
    color: var(--color-text-medium);
    font-size: 0.9rem;
    margin-top: var(--spacing-medium);
    line-height: 1.6;
}
.progress.is-primary::-webkit-progress-value { background-color: var(--color-primary); }
.progress.is-primary::-moz-progress-bar { background-color: var(--color-primary); }
.progress.is-success::-webkit-progress-value { background-color: var(--color-success); }
.progress.is-success::-moz-progress-bar { background-color: var(--color-success); }
.progress.is-info::-webkit-progress-value { background-color: var(--color-info); }
.progress.is-info::-moz-progress-bar { background-color: var(--color-info); }


/* Innovation Section */
.innovation-section .switch[type="checkbox"] + label::before {
    background-color: var(--color-background-medium); /* Off state */
}
.innovation-section .switch[type="checkbox"]:checked + label::before {
    background-color: var(--color-primary) !important; /* On state */
}
.innovation-section .switch[type="checkbox"] + label::after { /* The toggle circle */
    background-color: var(--color-text-light);
}
.innovation-section h3.title { margin-top: var(--spacing-large); }
.innovation-section h3.title:first-child { margin-top: 0; }


/* Pricing Section */
.pricing-card {
    border: 2px solid transparent;
    position: relative;
}
.pricing-card.popular-plan {
    border-color: var(--color-accent);
    box-shadow: 0 10px 30px rgba(231, 240, 195, 0.6);
    transform: scale(1.03); /* Slighty larger */
}
.popular-badge {
    background-color: var(--color-accent);
    color: var(--color-text-dark);
    font-family: var(--font-secondary);
    font-weight: bold;
    padding: var(--spacing-small) var(--spacing-medium);
    border-radius: var(--border-radius-small);
    position: absolute;
    top: -18px; /* Position it nicely */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    text-transform: uppercase;
    z-index: 1;
}
.pricing-card .card-content { text-align: center; }
.pricing-card .price-tag {
    font-family: var(--font-primary);
    color: var(--color-primary);
    margin: var(--spacing-medium) 0 var(--spacing-large) 0;
    font-size: 2.8rem;
}
.pricing-card .price-tag .price-period {
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    color: var(--color-text-medium);
    font-weight: normal;
    margin-left: var(--spacing-xs);
}
.pricing-card hr {
    background-color: var(--color-background-medium);
    height: 1px;
    margin: var(--spacing-medium) 0;
}
.pricing-card ul {
    list-style: none;
    margin: 0 0 var(--spacing-large) 0;
    padding: 0;
    text-align: left;
}
.pricing-card ul li {
    font-family: var(--font-secondary);
    color: var(--color-text-medium);
    padding: var(--spacing-small) 0;
    font-size: 0.95rem;
}
.pricing-card ul li .icon-text .icon { color: var(--color-success); margin-right: var(--spacing-small); }
.pricing-card ul li:not(:last-child) {
    border-bottom: 1px solid var(--color-background-medium);
}

/* External Resources Section */
.resource-card .card-content .title a {
    color: var(--color-primary);
    font-size: 1.1rem; /* Smaller title for resource links */
}
.resource-card .card-content .title a:hover {
    color: var(--color-primary-darker);
}

/* Contact Section */
.contact-section .contact-details p {
    font-size: 1rem;
    margin-bottom: var(--spacing-medium);
    color: var(--color-text-medium);
}
.contact-section .contact-details .icon {
    color: var(--color-primary);
    margin-right: var(--spacing-small);
}
.contact-form-card {
    background-color: var(--color-text-light);
    border-radius: var(--border-radius-large);
    padding: var(--spacing-medium); /* Padding around the form within the card */
}


/* Footer */
.footer {
    background-color: var(--color-background-medium);
    color: var(--color-text-medium);
    padding-top: var(--spacing-xlarge);
    padding-bottom: var(--spacing-xlarge);
}
.footer .title.is-5, .footer .title.is-6 {
    color: var(--color-text-heading);
    font-family: var(--font-primary);
}
.footer p, .footer ul li {
    font-size: 0.9rem;
    color: var(--color-text-medium);
}
.footer ul { list-style: none; margin-left: 0; }
.footer ul li a {
    color: var(--color-text-medium);
    padding: var(--spacing-xs) 0;
    display: inline-block;
}
.footer ul li a:hover {
    color: var(--color-primary);
    text-decoration: none;
}
.footer hr { background-color: #d3d3d3; height: 1px; }
.footer .content.has-text-centered p { font-size: 0.85rem; }

/* Footer social links (text-based) */
.footer .column p a[target="_blank"] {
    font-family: var(--font-secondary);
    color: var(--color-text-medium);
    padding: var(--spacing-small) 0;
    display: inline-block;
    transition: color var(--transition-speed) var(--transition-timing), transform var(--transition-speed) var(--transition-timing);
}
.footer .column p a[target="_blank"]:hover {
    color: var(--color-primary);
    transform: translateX(3px);
    text-decoration: none;
}

/* Page Specific Styles */

/* success.html */
body.success-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-background-light);
}
.success-page .header, .success-page .footer {
    flex-shrink: 0;
}
.success-page main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-large);
}
.success-content-wrapper { /* Wrapper for content on success page */
    background-color: var(--color-text-light);
    padding: var(--spacing-xlarge) var(--spacing-xxlarge);
    border-radius: var(--border-radius-large);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    max-width: 600px;
}
.success-content-wrapper .icon.is-large { /* Bulma icon size */
    font-size: 4rem; /* Custom larger size */
    color: var(--color-success);
    margin-bottom: var(--spacing-medium);
}
.success-content-wrapper .title {
    color: var(--color-text-heading);
    margin-bottom: var(--spacing-medium);
}
.success-content-wrapper .subtitle {
    color: var(--color-text-medium);
    margin-bottom: var(--spacing-large);
}

/* privacy.html, terms.html */
body.privacy-page main,
body.terms-page main {
    padding-top: calc(var(--navbar-height) + var(--spacing-large));
    padding-bottom: var(--spacing-large);
    background-color: var(--color-text-light); /* White background for content area */
}
.privacy-page .section, .terms-page .section {
    padding-top: 0; /* Already handled by main's padding */
    padding-bottom: var(--spacing-large);
    background-color: transparent; /* Content is on main's bg */
}
.privacy-page .container, .terms-page .container {
    max-width: 800px; /* Readable width for text content */
    margin-left: auto;
    margin-right: auto;
}
.privacy-page h1.title, .terms-page h1.title { /* Ensure .title class is on h1 */
    font-family: var(--font-primary);
    color: var(--color-text-heading);
    margin-bottom: var(--spacing-large);
    text-align: left;
}
.privacy-page h1.title::after, .terms-page h1.title::after {
    display: none; /* Remove global underline for these main page titles */
}
.privacy-page h2, .terms-page h2 {
    font-family: var(--font-primary);
    color: var(--color-text-heading);
    font-size: 1.75rem;
    margin-top: var(--spacing-xlarge);
    margin-bottom: var(--spacing-medium);
}
.privacy-page p, .terms-page p,
.privacy-page li, .terms-page li {
    font-family: var(--font-secondary);
    color: var(--color-text-medium);
    line-height: 1.8;
    margin-bottom: var(--spacing-medium);
    font-size: 1rem;
}
.privacy-page ul, .terms-page ul {
    list-style-position: outside;
    margin-left: var(--spacing-large);
    padding-left: var(--spacing-medium);
}
.privacy-page ul li, .terms-page ul li {
    margin-bottom: var(--spacing-small);
}


/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .section { padding: var(--spacing-large) 1rem; }
    .section-padding { padding: var(--spacing-large) 1rem; }
    .section-padding-large { padding: var(--spacing-xlarge) 1rem; }
    .section-padding-small { padding: var(--spacing-medium) 1rem; }

    .section-title { font-size: 2rem; margin-bottom: var(--spacing-medium) !important; }
    .section-title.is-1 { font-size: 2.5rem; }

    .columns.is-centered .column.is-one-third,
    .columns.is-centered .column.is-half {
        max-width: 90%; /* Prevent cards from being too narrow on mobile in centered columns */
        margin-left: auto;
        margin-right: auto;
    }

    .pricing-card.popular-plan {
        transform: scale(1); /* Disable slight zoom on mobile for popular plan */
    }
}