/* style.css - PipeClays Keramik Werkstatt */

/* ----------------------------------------
 * CSS Variables
 * ---------------------------------------- */

:root {
  /* Tetradic Colors */
  --color-primary-1: #8E44AD; /* Purple */
  --color-primary-1-dark: #7D3C98;
  --color-primary-2: #1ABC9C; /* Teal */
  --color-primary-2-dark: #16A085;
  --color-accent-1: #E67E22; /* Orange */
  --color-accent-1-dark: #D35400;
  --color-accent-2: #3498DB; /* Blue */
  --color-accent-2-dark: #2980B9;

  /* Neutral Colors */
  --color-text: #333333;
  --color-text-light: #555555;
  --color-text-inverse: #ffffff;
  --color-heading: #222222;
  --color-background-light: #f8f9fa; /* Lighter grey */
  --color-background-white: #ffffff;
  --color-border: #dbdbdb;
  --color-shadow: rgba(0, 0, 0, 0.08);
  --color-shadow-darker: rgba(0, 0, 0, 0.12);
  --color-overlay-dark: rgba(0, 0, 0, 0.5);
  --color-success: var(--color-primary-2);
  --color-error: var(--color-accent-1);

  /* Fonts */
  --font-primary: 'Open Sans', sans-serif;
  --font-heading: 'Raleway', sans-serif;

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

  /* Spacing */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;

  /* Header Height - Match Bulma's default */
  --header-height: 3.25rem; /* 52px */
}

/* ----------------------------------------
 * Global Styles & Resets
 * ---------------------------------------- */

html {
  scroll-behavior: smooth;
  background-color: var(--color-background-white); /* Base background */
  font-size: 16px; /* Base font size */
}

body {
  font-family: var(--font-primary);
  color: var(--color-text);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden; /* Prevent horizontal scroll */
  padding-top: var(--header-height); /* Offset for fixed header */
  background-color: var(--color-background-white);
}

h1, h2, h3, h4, h5, h6, .title, .subtitle {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: 700; /* Raleway Bold */
}

.title {
    color: var(--color-heading); /* Ensure titles are dark */
    font-weight: 700;
}

.subtitle {
    color: var(--color-text-light); /* Lighter color for subtitles */
    font-weight: 400; /* Open Sans Regular for subtitles */
}

p {
  margin-bottom: var(--space-s);
  color: var(--color-text);
}

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

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

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

/* Ensure text contrast */
.has-background-light,
.has-background-white {
    color: var(--color-text); /* Dark text on light backgrounds */
}

.has-background-light *,
.has-background-white * {
     /* Ensure child elements inherit correctly or have specific dark colors */
}

.has-background-light .title,
.has-background-white .title {
    color: var(--color-heading);
}
.has-background-light .subtitle,
.has-background-white .subtitle {
    color: var(--color-text-light);
}

/* ----------------------------------------
 * Layout & Structure (Using Bulma primarily)
 * ---------------------------------------- */

.section {
  padding: var(--space-xl) var(--space-m); /* Consistent section padding */
}

/* Specific background colors */
.has-background-light {
    background-color: var(--color-background-light) !important;
}
.has-background-white {
    background-color: var(--color-background-white) !important;
}

/* Section Title Styling */
.section-title {
    text-align: center;
    margin-bottom: var(--space-l);
    color: var(--color-heading);
    font-weight: 700;
}

.section-title::after { /* Subtle underline accent */
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-primary-1);
    margin: var(--space-xs) auto 0;
}

/* Asymmetrical Balance Helpers */
.asymmetric-offset-left {
    margin-left: 5%;
    margin-right: -5%; /* Adjust container padding if needed */
}
.asymmetric-offset-right {
    margin-right: 5%;
    margin-left: -5%; /* Adjust container padding if needed */
}

/* Responsive adjustments for asymmetry */
@media screen and (max-width: 768px) {
    .asymmetric-offset-left,
    .asymmetric-offset-right {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ----------------------------------------
 * Header / Navigation (Bulma Overrides)
 * ---------------------------------------- */

.navbar.is-fixed-top {
  background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent white */
  backdrop-filter: blur(5px); /* Subtle glassmorphism */
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 2px 4px var(--color-shadow);
  height: var(--header-height);
  z-index: 1030; /* Ensure header is above other content */
}

.navbar-item.logo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-primary-1);
}
.navbar-item.logo:hover {
    color: var(--color-primary-1-dark);
    background-color: transparent !important;
}


.navbar-item {
    font-weight: 600; /* Open Sans Semi-Bold */
    color: var(--color-text-light);
    transition: color var(--transition-speed-fast) var(--transition-timing), background-color var(--transition-speed-fast) var(--transition-timing);
}

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

.navbar-burger {
    color: var(--color-text-light);
}

.navbar-burger:hover {
    background-color: var(--color-background-light);
    color: var(--color-primary-1);
}

/* Ensure dropdown menu in mobile has correct background */
@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: var(--color-background-white);
        box-shadow: 0 8px 16px var(--color-shadow);
    }
}


/* ----------------------------------------
 * Global Button Styles (Overrides Bulma)
 * ---------------------------------------- */

/* Base Button Style */
.button,
button,
input[type='submit'],
input[type='button'],
input[type='reset'] {
  display: inline-block; /* Align correctly */
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem; /* Ensure consistent base size */
  border-radius: 5px;
  border: 1px solid transparent; /* Start with transparent border */
  padding: 0.75em 1.5em;
  transition: all var(--transition-speed-normal) var(--transition-timing);
  cursor: pointer;
  box-shadow: 0 2px 5px var(--color-shadow);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center; /* Ensure text is centered */
  vertical-align: middle; /* Align correctly with text */
  line-height: 1.5; /* Bulma's default line-height for buttons */
  white-space: nowrap; /* Prevent wrapping */
}

.button:hover,
button:hover,
input[type='submit']:hover,
input[type='button']:hover,
input[type='reset']:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--color-shadow-darker);
}

.button:active,
button:active,
input[type='submit']:active,
input[type='button']:active,
input[type='reset']:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px var(--color-shadow);
}

/* Primary Button Style 1 (Purple - Default Primary) */
.button.is-primary {
  background-color: var(--color-primary-1);
  border-color: var(--color-primary-1);
  color: var(--color-text-inverse);
}
.button.is-primary:hover {
  background-color: var(--color-primary-1-dark);
  border-color: var(--color-primary-1-dark);
  color: var(--color-text-inverse);
}

/* Primary Button Style 2 (Teal - Used in Contact Form via HTML) */
/* No specific CSS needed here if class is applied in HTML */

/* Accent Button (Orange - Header CTA via HTML) */
/* No specific CSS needed here if class is applied in HTML */


/* Link Button Style (Subtle) */
.button.is-link.is-light {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-accent-2);
    text-decoration: none; /* Remove underline for this style */
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    text-transform: none; /* Normal case for links */
    letter-spacing: normal;
    font-weight: 600; /* Slightly bolder */
}
.button.is-link.is-light::after { /* Add arrow */
    content: ' →';
    display: inline-block;
    transition: transform var(--transition-speed-fast) var(--transition-timing);
}
.button.is-link.is-light:hover {
    color: var(--color-accent-2-dark);
    background-color: transparent;
    transform: none;
    box-shadow: none;
    text-decoration: none;
}
.button.is-link.is-light:hover::after {
    transform: translateX(4px);
}


/* 'Read More' style links */
.read-more-link {
    display: inline-block;
    margin-top: var(--space-s);
    font-weight: 600;
    color: var(--color-primary-1);
    text-decoration: none;
    position: relative;
    transition: color var(--transition-speed-fast) var(--transition-timing);
}
.read-more-link::after {
    content: '→';
    display: inline-block;
    margin-left: var(--space-xs);
    transition: transform var(--transition-speed-fast) var(--transition-timing);
}
.read-more-link:hover {
    color: var(--color-primary-1-dark);
}
.read-more-link:hover::after {
    transform: translateX(4px);
}


/* ----------------------------------------
 * Card Styles
 * ---------------------------------------- */

.card {
  background-color: var(--color-background-white);
  box-shadow: 0 5px 15px var(--color-shadow);
  border-radius: 8px;
  border: 1px solid var(--color-border); /* Subtle border */
  overflow: hidden;
  transition: transform var(--transition-speed-normal) var(--transition-timing), box-shadow var(--transition-speed-normal) var(--transition-timing);
  height: 100%; /* Ensure cards in columns have same height if needed */
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack image and content vertically */
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px var(--color-shadow-darker);
}

/* Card Image Container */
.card .card-image {
  overflow: hidden; /* Clip overflowing image parts */
  position: relative; /* For potential overlays or absolute positioning inside */
  /* Optional: Set aspect ratio or fixed height for consistency */
  /* aspect-ratio: 16 / 9; */
   height: 250px; /* Example fixed height */
}

.card .card-image img {
  display: block;
  width: 100%;
  height: 100%; /* Fill the container */
  object-fit: cover; /* Scale while preserving aspect ratio, cropping if needed */
  object-position: center center; /* Center the image within its container */
  transition: transform var(--transition-speed-normal) var(--transition-timing);
}

.card:hover .card-image img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

/* Card Content */
.card .card-content {
  padding: var(--space-m);
  flex-grow: 1; /* Allow content to fill remaining space */
  display: flex;
  flex-direction: column; /* Stack content vertically */
}

.card .card-content .title,
.card .card-content .subtitle {
  margin-bottom: var(--space-s);
  color: var(--color-heading);
}
.card .card-content .title {
    font-size: 1.25rem; /* Adjust card title size */
}
.card .card-content .subtitle {
    color: var(--color-text-light);
    font-size: 0.9rem;
}
.card .card-content p {
    color: var(--color-text);
    margin-bottom: var(--space-m); /* Space before button/link */
    flex-grow: 1; /* Push button to bottom if needed */
}
.card .card-content .button,
.card .card-content .read-more-link {
    margin-top: auto; /* Align button/link to the bottom */
    align-self: flex-start; /* Align button to the left */
}


/* Center content within cards */
.card.has-text-centered .card-content {
    text-align: center;
    align-items: center; /* Center items horizontally */
}
.card.has-text-centered .card-content .button,
.card.has-text-centered .card-content .read-more-link {
    align-self: center; /* Center button */
}
.card.has-text-centered .card-image {
    /* Image container usually doesn't need centering if img fills it */
}

/* Resource Card Specific Styling */
.resource-card .card-content h4 a {
    color: var(--color-heading);
    text-decoration: none;
}
.resource-card .card-content h4 a:hover {
    color: var(--color-primary-1);
    text-decoration: underline;
}


/* ----------------------------------------
 * Section Specific Styles
 * ---------------------------------------- */

/* Hero Section */
#hero.hero {
  /* Background image set in HTML via style */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  color: var(--color-text-inverse); /* Default white text */
}

#hero .hero-body {
    position: relative; /* Ensure content is above overlay */
    z-index: 2;
    /* Dark overlay is applied via linear-gradient in HTML style attribute */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh; /* Ensure reasonable height */
    padding: var(--space-xl) var(--space-m);
}

#hero .container {
     max-width: 800px; /* Limit content width */
}


#hero .title,
#hero .subtitle {
    color: var(--color-text-inverse) !important; /* IMPORTANT to override Bulma */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Stronger shadow for readability */
}

#hero .title {
    font-size: clamp(2.5rem, 6vw, 3.5rem); /* Responsive font size */
    margin-bottom: var(--space-s);
    line-height: 1.2;
}

#hero .subtitle {
    font-size: clamp(1.1rem, 3vw, 1.3rem); /* Responsive font size */
    margin-bottom: var(--space-l);
    font-weight: 400;
    max-width: 600px; /* Limit subtitle width */
    margin-left: auto;
    margin-right: auto;
}

#hero .button.is-primary {
    font-size: 1.1rem;
    padding: 1em 2em;
}

/* Workshops Section */
#workshops .card .card-image {
    height: 220px; /* Specific height for workshop cards */
}

/* Our Process Section */
#process .content h4 {
    color: var(--color-primary-1);
    margin-top: var(--space-m);
    margin-bottom: var(--space-xs);
    font-weight: 700;
}
#process figure.image {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px var(--color-shadow);
}

/* Statistical Widgets */
.statistic-widget .box {
    text-align: center;
    padding: var(--space-m);
    background-color: var(--color-background-white);
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--color-shadow);
    transition: transform var(--transition-speed-normal) var(--transition-timing), box-shadow var(--transition-speed-normal) var(--transition-timing);
    border: 1px solid var(--color-border);
}
.statistic-widget .box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px var(--color-shadow-darker);
}
.statistic-widget .heading {
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-xs);
    letter-spacing: 1px;
    font-weight: 600;
}
.statistic-widget .title {
    color: var(--color-primary-2); /* Teal */
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
}

/* Instructors Section */
#instructors .card {
    text-align: center; /* Center content */
}
#instructors .card .card-image {
    height: auto; /* Let image define height */
    aspect-ratio: 1 / 1; /* Make image container square */
    max-width: 180px; /* Max width for the image container */
    border-radius: 50%; /* Circular mask */
    margin: var(--space-m) auto var(--space-s) auto; /* Center horizontally and add vertical space */
    border: 5px solid var(--color-background-white);
    box-shadow: 0 4px 10px var(--color-shadow);
    position: relative;
}
#instructors .card .card-image img {
    border-radius: 50%; /* Ensure image inside is also rounded */
    object-fit: cover;
    width: 100%;
    height: 100%;
}
#instructors .card .card-content {
    padding-top: 0; /* Adjust padding since image has margin */
}
#instructors .card .title {
    margin-bottom: var(--space-xs);
    font-size: 1.2rem;
}
#instructors .card .subtitle {
    color: var(--color-primary-1); /* Accent color for subtitle */
    margin-bottom: var(--space-s);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Innovation Section */
#innovation .content h4 {
    color: var(--color-accent-2); /* Blue */
    margin-top: var(--space-m);
    margin-bottom: var(--space-xs);
    font-weight: 700;
}
#innovation figure.image {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px var(--color-shadow);
}


/* Insights Section */
#insights .insight-card {
    margin-bottom: var(--space-m);
}
#insights .insight-card .card-image {
    height: 200px; /* Example fixed height for insight previews */
}


/* Case Studies Section */
#casestudies .card .card-image {
    height: 250px; /* Example height for case study images */
}


/* Press Section */
#press .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#press figure.image {
    opacity: 0.7;
    transition: opacity var(--transition-speed-normal) var(--transition-timing), filter var(--transition-speed-normal) var(--transition-timing);
    filter: grayscale(50%); /* Subdue logos initially */
    margin-bottom: var(--space-s);
}
#press figure.image:hover {
    opacity: 1;
    filter: grayscale(0%);
}
#press p {
    font-style: italic;
    color: var(--color-text-light);
    font-size: 0.9rem;
}

/* Partners Section */
#partners .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#partners figure.image {
    height: 64px; /* Fixed height */
    width: auto; /* Auto width */
    max-width: 150px; /* Max width */
    opacity: 0.8;
    transition: opacity var(--transition-speed-normal) var(--transition-timing), filter var(--transition-speed-normal) var(--transition-timing);
    filter: grayscale(30%);
    margin-bottom: var(--space-s);
}
#partners figure.image img {
    object-fit: contain; /* Fit logo within container */
    height: 100%;
    width: 100%;
}
#partners figure.image:hover {
    opacity: 1;
    filter: grayscale(0%);
}
#partners p {
    color: var(--color-text-light);
     font-size: 0.9rem;
}

/* External Resources Section */
#resources .resource-card {
    margin-bottom: var(--space-m);
}
#resources .resource-card .button.is-link.is-light {
    margin-top: auto; /* Align button to bottom */
}

/* Contact Section */
#contact {
    /* Background can be white or light */
}
#contact .icon { /* Style Bulma icons if used */
    color: var(--color-primary-1);
    margin-right: var(--space-xs);
    vertical-align: middle; /* Align icons better */
}
#contact strong {
    color: var(--color-heading);
    font-weight: 600;
}
#contact a {
    word-break: break-all; /* Prevent long links overflowing */
}
#contact .column > h4 { /* Titles within columns */
    margin-bottom: var(--space-m);
    font-size: 1.4rem;
}


/* Contact Form Specific Styles */
.contact-form .label {
    color: var(--color-heading);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: var(--space-xs);
}

.contact-form .input,
.contact-form .textarea {
    border-radius: 5px;
    border: 1px solid var(--color-border);
    box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.05);
    transition: border-color var(--transition-speed-fast) var(--transition-timing), box-shadow var(--transition-speed-fast) var(--transition-timing);
    font-size: 1rem;
    padding: 0.75em; /* Consistent padding */
}
.contact-form .input::placeholder,
.contact-form .textarea::placeholder {
    color: #aaa; /* Lighter placeholder text */
}

.contact-form .input:focus,
.contact-form .textarea:focus {
    outline: none; /* Remove default outline */
    border-color: var(--color-primary-1);
    box-shadow: 0 0 0 0.125em rgba(142, 68, 173, 0.25); /* Purple focus glow */
}

.contact-form .textarea {
    min-height: 120px; /* Ensure decent height */
}

.contact-form .checkbox {
    font-size: 0.9rem;
}

.contact-form .checkbox input[type="checkbox"] {
    margin-right: var(--space-xs);
}

.contact-form .checkbox + a { /* Style privacy link */
    margin-left: var(--space-xs);
    color: var(--color-primary-1);
    font-size: 0.9rem;
}
.contact-form .checkbox + a:hover {
    color: var(--color-primary-1-dark);
}

/* Use the Teal button style defined globally but target it specifically */
.contact-form .button.is-primary {
    background-color: var(--color-primary-2);
    border-color: var(--color-primary-2);
}
.contact-form .button.is-primary:hover {
    background-color: var(--color-primary-2-dark);
    border-color: var(--color-primary-2-dark);
}

#form-status { /* Style the form status message area */
    font-weight: 600;
    margin-top: var(--space-m);
    padding: var(--space-s);
    border-radius: 5px;
    display: none; /* Hidden by default */
}
#form-status.success {
    color: var(--color-success);
    background-color: rgba(26, 188, 156, 0.1); /* Light teal background */
    border: 1px solid rgba(26, 188, 156, 0.3);
    display: block;
}
#form-status.error {
    color: var(--color-error);
     background-color: rgba(230, 126, 34, 0.1); /* Light orange background */
    border: 1px solid rgba(230, 126, 34, 0.3);
    display: block;
}

/* ----------------------------------------
 * Footer Styles
 * ---------------------------------------- */

.footer {
  background-color: var(--color-background-light);
  padding: var(--space-l) var(--space-m);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-light);
}

.footer .title {
    color: var(--color-heading);
    margin-bottom: var(--space-m);
    font-size: 1.1rem; /* Slightly smaller footer titles */
    font-weight: 700;
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer ul li {
    margin-bottom: var(--space-xs);
}

.footer a {
    color: var(--color-text-light);
    text-decoration: none;
}

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

/* Footer Social Links (Text) */
.footer .social-links a {
    display: inline-block; /* Keep inline */
    margin: 0 var(--space-xs);
    padding: var(--space-xs) 0; /* Padding top/bottom only */
    color: var(--color-text-light);
    font-weight: 600;
    transition: color var(--transition-speed-fast) var(--transition-timing);
    text-decoration: none; /* Remove underline */
    position: relative;
}

/* Optional: Add subtle effect on hover */
.footer .social-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    display: block;
    margin-top: 2px;
    right: 0;
    background: var(--color-primary-1);
    transition: width .2s ease;
    -webkit-transition: width .2s ease;
}

.footer .social-links a:hover::after {
    width: 100%;
    left: 0;
    background-color: var(--color-primary-1);
}


.footer hr {
    background-color: var(--color-border);
    height: 1px;
    border: none;
    margin: var(--space-l) 0 var(--space-m) 0;
}

.footer .content p {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: 0;
}


/* ----------------------------------------
 * Specific Page Styles
 * ---------------------------------------- */

/* Privacy & Terms Pages */
.privacy-policy-page main, /* Target main element within the page */
.terms-page main {
    padding-top: var(--space-l); /* Add padding inside main, not body */
    padding-bottom: var(--space-xl);
}
.privacy-policy-page .container,
.terms-page .container {
    max-width: 800px; /* Limit width for readability */
}
.privacy-policy-page h1,
.terms-page h1 {
    margin-bottom: var(--space-l);
    font-size: 2rem;
    text-align: center;
}
.privacy-policy-page h2,
.terms-page h2 {
    margin-top: var(--space-l);
    margin-bottom: var(--space-s);
    color: var(--color-primary-1);
    font-size: 1.5rem;
}
.privacy-policy-page p,
.terms-page p {
    margin-bottom: var(--space-m);
}
.privacy-policy-page ul,
.terms-page ul {
    margin-left: var(--space-m);
    margin-bottom: var(--space-m);
}

/* Success Page */
.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(--space-l);
    background-color: var(--color-background-white); /* Keep consistent background */
}

.success-page-container .icon-success { /* Placeholder for an icon */
    /* If using Font Awesome or similar: */
    /* display: inline-block; */
    /* font-size: 4rem; */
    /* color: var(--color-success); */
    /* margin-bottom: var(--space-m); */
    /* animation: popIn 0.5s ease-out forwards; */

    /* Simple SVG checkmark example */
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-m);
    animation: popIn 0.5s ease-out forwards;
}
.success-page-container .icon-success svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--color-success);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}


@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    80% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.success-page-container h1 {
    color: var(--color-heading);
    margin-bottom: var(--space-s);
    font-size: 1.8rem;
}

.success-page-container p {
    color: var(--color-text-light);
    margin-bottom: var(--space-l);
    max-width: 500px;
}

.success-page-container .button {
    /* Use global button styles */
}


/* ----------------------------------------
 * Utilities
 * ---------------------------------------- */

.has-text-centered {
    text-align: center !important;
}
.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-s); }
.mt-3 { margin-top: var(--space-m); }
.mt-4 { margin-top: var(--space-l); }
.mt-5 { margin-top: var(--space-xl); }

.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-s); }
.mb-3 { margin-bottom: var(--space-m); }
.mb-4 { margin-bottom: var(--space-l); }
.mb-5 { margin-bottom: var(--space-xl); }

/* ----------------------------------------
 * Animations (AOS defaults are fine, add custom if needed)
 * ---------------------------------------- */

/* AOS initialization is via JS, these styles ensure smooth transitions */
[data-aos] {
    opacity: 0;
    transition-property: transform, opacity;
}
[data-aos].aos-animate {
    opacity: 1;
}

/* Example: Customize AOS fade-up */
[data-aos="fade-up"] {
    transform: translateY(30px);
}
[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
}

/* Morphing Effect Example (Subtle Background Shape) */
/* Apply this class to a section for a subtle effect */
.morphing-background::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, var(--color-primary-1), var(--color-accent-2));
    opacity: 0.1;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    z-index: -1;
    animation: morph 15s ease-in-out infinite both alternate;
    will-change: border-radius, transform; /* Optimize animation */
}

@keyframes morph {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        border-radius: 50% 50% 30% 70% / 40% 60% 40% 60%;
        transform: translate(20px, -10px) rotate(90deg) scale(1.1);
    }
    50% {
        border-radius: 67% 33% 47% 53% / 37% 50% 50% 63%;
        transform: translate(-10px, 15px) rotate(180deg) scale(0.9);
    }
     75% {
        border-radius: 33% 67% 58% 42% / 53% 40% 60% 47%;
         transform: translate(15px, 5px) rotate(270deg) scale(1.05);
    }
    100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        transform: translate(0, 0) rotate(360deg) scale(1);
    }
}

/* ----------------------------------------
 * Responsiveness
 * ---------------------------------------- */

/* Tablet and smaller */
@media screen and (max-width: 1023px) {
    .section {
        padding: var(--space-l) var(--space-s);
    }
    #hero .hero-body {
        min-height: 60vh;
    }

    .columns.is-centered .column.is-one-quarter {
        /* Adjust widget columns for smaller screens */
        flex: none;
        width: calc(50% - var(--space-m)); /* Adjust width considering gap */
        margin: calc(var(--space-m) / 2);
    }
     .columns.is-centered .column.is-one-fifth {
        /* Partner logos */
         flex: none;
        width: calc(33.333% - var(--space-m));
        margin: calc(var(--space-m) / 2);
     }
}

/* Mobile */
@media screen and (max-width: 768px) {
    body {
       /* Adjust base font size for mobile? */
       /* font-size: 15px; */
    }
    .section {
        padding: var(--space-l) var(--space-s); /* Maintain good padding */
    }
     .section-title {
        margin-bottom: var(--space-m);
        font-size: 1.8rem;
    }
    #hero .hero-body {
        min-height: 50vh;
        padding: var(--space-l) var(--space-s);
    }

    /* Stack columns and ensure proper spacing */
    .columns.is-mobile > .column { /* Target Bulma mobile columns */
        margin-bottom: var(--space-m);
    }
    .columns.is-multiline > .column:last-child {
         margin-bottom: 0; /* Remove margin from last item */
    }

     .columns.is-centered .column.is-one-quarter,
     .columns.is-centered .column.is-one-fifth,
     .columns.is-centered .column.is-one-third,
     .columns.is-centered .column.is-two-thirds,
     .columns .column.is-half { /* Make columns full width on mobile */
        flex: none;
        width: 100%;
        margin-left: 0; /* Reset offsets */
        margin-right: 0;
        margin-bottom: var(--space-m); /* Add margin between stacked columns */
     }
    .columns .column:last-child {
        margin-bottom: 0; /* Remove bottom margin for the last column */
    }


    /* Adjust footer layout */
    .footer .columns {
        text-align: center;
    }
    .footer .column {
        margin-bottom: var(--space-l); /* Increase space between footer sections */
    }
    .footer .column:last-child {
        margin-bottom: 0;
    }
    .footer .social-links a {
        margin: 0 8px; /* Adjust spacing */
    }

    #contact .columns {
        flex-direction: column-reverse; /* Show form below contact details */
    }

    .success-page-container h1 {
        font-size: 1.5rem;
    }
    .success-page-container .icon-success {
        width: 60px;
        height: 60px;
    }

}