/* style.css */

:root {
  /* Neutral Color Scheme */
  --color-background: #eef1f5;
  --color-background-alt: #f8f9fa;
  --color-surface: #eef1f5;
  --color-text-primary: #333740;
  --color-text-secondary: #555c69;
  --color-heading: #2d3138;

  /* Accent Colors */
  --color-primary: #6a7f9e; /* Muted blue/grey */
  --color-primary-darker: #52657f;
  --color-primary-lighter: #8c9eb8;
  --color-secondary-accent: #769fcd; /* Brighter blue */
  --color-success: #4CAF50;
  --color-success-darker: #45a049;
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-darker);

  /* Neomorphism Shadows */
  --shadow-light-source: rgba(255, 255, 255, 0.9);
  --shadow-dark-source: rgba(163, 177, 198, 0.7);
  
  --neumorphic-offset: 6px;
  --neumorphic-blur: 12px;

  --neumorphic-shadow-raised: 
    var(--neumorphic-offset) var(--neumorphic-offset) var(--neumorphic-blur) var(--shadow-dark-source), 
    calc(-1 * var(--neumorphic-offset)) calc(-1 * var(--neumorphic-offset)) var(--neumorphic-blur) var(--shadow-light-source);
  
  --neumorphic-shadow-pressed: 
    inset var(--neumorphic-offset) var(--neumorphic-offset) var(--neumorphic-blur) var(--shadow-dark-source), 
    inset calc(-1 * var(--neumorphic-offset)) calc(-1 * var(--neumorphic-offset)) var(--neumorphic-blur) var(--shadow-light-source);

  --neumorphic-shadow-soft-raised: 
    calc(var(--neumorphic-offset) / 1.5) calc(var(--neumorphic-offset) / 1.5) calc(var(--neumorphic-blur) / 1.5) var(--shadow-dark-source), 
    calc(-1 * var(--neumorphic-offset) / 1.5) calc(-1 * var(--neumorphic-offset) / 1.5) calc(var(--neumorphic-blur) / 1.5) var(--shadow-light-source);
  
  /* Volumetric UI Shadows */
  --volumetric-shadow: 0 10px 20px rgba(45, 49, 56, 0.15), 0 6px 6px rgba(45, 49, 56, 0.1);

  /* Fonts */
  --font-family-headings: 'Playfair Display', serif;
  --font-family-body: 'Source Sans Pro', sans-serif;

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

  /* Other */
  --border-radius-base: 12px; 
  --border-radius-large: 20px;
  --header-height: 70px;
  --section-padding-vertical: 4rem;
  --section-padding-horizontal: 1.5rem;
}

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

body {
  font-family: var(--font-family-body);
  color: var(--color-text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-top: var(--header-height); /* Offset fixed header */
}

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

.title {
  color: var(--color-heading);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}
.subtitle {
  color: var(--color-text-secondary);
  font-family: var(--font-family-body);
  font-weight: 400;
}

p {
  margin-bottom: 1rem;
  color: var(--color-text-primary);
}

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

/* === LAYOUT & SECTIONS === */
.section {
  padding: var(--section-padding-vertical) var(--section-padding-horizontal);
  background-color: var(--color-background);
}
.neomorphic-section-alt {
  background-color: var(--color-background-alt);
}

.section-title {
  margin-bottom: 1.5rem !important;
  text-align: center;
  color: var(--color-heading);
  font-size: 2.5rem;
  font-weight: 700;
}
.section-subtitle {
  margin-bottom: 3rem !important;
  text-align: center;
  color: var(--color-text-secondary);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* === HEADER / NAVBAR === */
.header.neomorphic-navbar {
  background-color: var(--color-surface);
  box-shadow: var(--neumorphic-shadow-raised);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1020; /* Ensure above AOS animations which can have z-index */
  height: var(--header-height);
  transition: background-color var(--transition-speed-normal) var(--transition-easing);
}
.header.neomorphic-navbar .navbar {
  background-color: transparent;
  min-height: var(--header-height);
}
.logo-text {
  font-family: var(--font-family-headings);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--color-heading);
  display: flex;
  align-items: center;
}
.logo-main { color: var(--color-primary); }
.logo-sub {
  color: var(--color-text-secondary);
  font-size: 0.7em;
  margin-left: 4px;
  font-weight: 400;
}
.navbar-item {
  font-family: var(--font-family-body);
  font-weight: 600;
  color: var(--color-text-primary);
  transition: color var(--transition-speed-fast) var(--transition-easing), 
              transform var(--transition-speed-fast) var(--transition-easing);
  padding: 0.5rem 1rem;
}
.navbar-item:hover, .navbar-item.is-active {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  transform: translateY(-2px);
}
.navbar-burger {
  color: var(--color-text-primary);
  height: var(--header-height);
  width: var(--header-height);
}
.navbar-burger:hover { background-color: rgba(0,0,0,0.05); }
.navbar-burger span {
  background-color: var(--color-text-primary);
  height: 2px;
  left: calc(50% - 8px);
  width: 16px;
}
.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); }

.navbar-menu.is-active {
  background-color: var(--color-surface);
  box-shadow: var(--neumorphic-shadow-raised);
  border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
}

/* === HERO SECTION === */
#hero {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero-title {
  font-size: 3.5rem;
  color: #FFFFFF !important;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}
.hero-subtitle {
  font-size: 1.25rem;
  color: #f0f0f0 !important;
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-family-body);
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

/* === GLOBAL BUTTON STYLES === */
.button, button, input[type="submit"], input[type="button"], input[type="reset"] {
  font-family: var(--font-family-body);
  font-weight: 600;
  border-radius: var(--border-radius-base);
  transition: all var(--transition-speed-normal) var(--transition-easing);
  border: none;
  padding: 0.75em 1.5em;
  cursor: pointer;
}
.neomorphic-button,
input[type="submit"].neomorphic-button,
button.neomorphic-button {
  background-color: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--neumorphic-shadow-raised);
}
.neomorphic-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--neumorphic-shadow-soft-raised);
  color: var(--color-primary-darker);
}
.neomorphic-button:active,
.neomorphic-button.is-active {
  box-shadow: var(--neumorphic-shadow-pressed);
  transform: translateY(1px);
  color: var(--color-primary-darker);
}
.neomorphic-button-cta {
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-size: 1.1rem;
  padding: 0.8em 1.8em;
  box-shadow: var(--volumetric-shadow);
}
.neomorphic-button-cta:hover {
  background-color: var(--color-primary-darker);
  color: #FFFFFF;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 24px rgba(45, 49, 56, 0.2), 0 8px 8px rgba(45, 49, 56, 0.18);
}
.neomorphic-button-cta:active {
  background-color: var(--color-primary-darker);
  color: #FFFFFF;
  transform: translateY(0px) scale(0.98);
  box-shadow: var(--neumorphic-shadow-pressed);
}
/* Bulma specific button overrides if neomorphic-button is also applied */
.button.is-primary.neomorphic-button { background-color: var(--color-primary); color: #fff; }
.button.is-primary.neomorphic-button:hover { background-color: var(--color-primary-darker); }
.button.is-success.neomorphic-button { background-color: var(--color-success); color: #fff; }
.button.is-success.neomorphic-button:hover { background-color: var(--color-success-darker); }
.button.is-link.neomorphic-button-event { background-color: var(--color-secondary-accent); color: #fff; }
.button.is-link.neomorphic-button-event:hover { background-color: var(--color-primary-darker); }


/* === GLOBAL CARD STYLES === */
.card.neomorphic-card {
  background-color: var(--color-surface);
  border-radius: var(--border-radius-large);
  box-shadow: var(--neumorphic-shadow-raised);
  transition: transform var(--transition-speed-normal) var(--transition-easing), 
              box-shadow var(--transition-speed-normal) var(--transition-easing);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card.neomorphic-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: var(--volumetric-shadow);
}
.card.neomorphic-card .card-image { /* Bulma .card-image wrapper */
  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
  overflow: hidden;
  display: flex; /* For STROGO requirement */
  align-items: center; /* For STROGO requirement */
  justify-content: center; /* For STROGO requirement */
}
.card.neomorphic-card .image-container { /* Custom class from HTML for direct image parent */
  position: relative;
  width: 100%; /* Ensure container takes full width of card-image area */
  /* min-height ensures a minimum size, but Bulma's aspect ratio classes on figure are preferred */
   min-height: 200px; 
}
.card.neomorphic-card .image-container figure.image { /* Target Bulma's figure */
  width: 100%;
  height: 100%; /* Make figure fill the image-container */
  margin: 0; /* Remove any default figure margin */
}
.card.neomorphic-card .image-container img,
.card.neomorphic-card .card-image figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card.neomorphic-card .is-rounded {
    border-radius: 50% !important;
}
.card.neomorphic-card .card-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left; /* Default unless .has-text-centered is used */
}
.card.neomorphic-card .card-content .title,
.card.neomorphic-card .card-content .card-title {
  margin-bottom: 0.75rem;
  color: var(--color-heading);
  font-size: 1.3rem;
  line-height: 1.3;
}
.card.neomorphic-card .card-content .content {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.card.neomorphic-card .card-content .content p:last-child {
  margin-bottom: 0;
}
.card.neomorphic-card .has-text-centered, 
.card.neomorphic-card .card-content.has-text-centered {
    text-align: center;
}
.card.neomorphic-card .card-content.has-text-centered .title,
.card.neomorphic-card .card-content.has-text-centered .content {
    text-align: center; /* Ensure nested elements also center if parent has class */
}


/* === FORM ELEMENTS === */
.input, .textarea {
  font-family: var(--font-family-body);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-radius: var(--border-radius-base);
  box-shadow: var(--neumorphic-shadow-pressed);
  border: 1px solid transparent;
  padding: 0.75em 1em;
  transition: box-shadow var(--transition-speed-normal) var(--transition-easing);
}
.input::placeholder, .textarea::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.7;
}
.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) !important;
  box-shadow: var(--neumorphic-shadow-pressed), 0 0 0 0.125em rgba(106, 127, 158, 0.25) !important;
}
.label {
  color: var(--color-heading);
  font-weight: 600;
  font-family: var(--font-family-body);
}

/* === ACCORDION === */
.accordion-container { max-width: 800px; margin: 0 auto; }
.accordion-item.neomorphic-accordion {
  background-color: var(--color-surface);
  margin-bottom: 1rem;
  border-radius: var(--border-radius-base);
  box-shadow: var(--neumorphic-shadow-soft-raised);
  transition: box-shadow var(--transition-speed-normal) var(--transition-easing);
}
.accordion-item.neomorphic-accordion:hover { box-shadow: var(--neumorphic-shadow-raised); }
.accordion-header {
  background-color: transparent;
  border: none;
  width: 100%;
  text-align: left;
  padding: 1rem 1.5rem;
  font-family: var(--font-family-headings);
  font-size: 1.2rem;
  color: var(--color-heading);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--border-radius-base);
}
.accordion-header:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.accordion-icon {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-primary);
  transition: transform var(--transition-speed-fast) var(--transition-easing);
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.5rem;
  transition: max-height var(--transition-speed-normal) var(--transition-easing), 
              padding var(--transition-speed-normal) var(--transition-easing);
  color: var(--color-text-secondary);
}
.accordion-content p { margin-bottom: 0.75rem; }
.accordion-content p:last-child { margin-bottom: 0; }
.accordion-item.neomorphic-accordion .accordion-content[style*="max-height"] { padding: 1rem 1.5rem; }

/* === SPECIFIC SECTION STYLES === */
#features .card.neomorphic-card .image-container { min-height: 220px; }
#innovation .image-container img { border-radius: var(--border-radius-large); box-shadow: var(--volumetric-shadow); }
#innovation .content p { font-size: 1.05rem; line-height: 1.7; }
.neomorphic-link { font-weight: 600; color: var(--color-primary); text-decoration: underline; }
.neomorphic-link:hover { color: var(--color-primary-darker); }
#testimonials .media-left .image.is-96x96 img {
  width: 96px; height: 96px; object-fit: cover;
  border: 3px solid var(--color-surface); box-shadow: var(--neumorphic-shadow-soft-pressed);
}
#testimonials .card-content .content { font-style: italic; font-size: 1rem; color: var(--color-text-primary); }
#behind-the-scenes .card.neomorphic-card .image-container { min-height: 250px; }
#behind-the-scenes .card.neomorphic-card .card-content { padding-top: 1rem; padding-bottom: 1rem; }
.event-list { display: flex; flex-direction: column; gap: 1.5rem; }
.event-item.neomorphic-box {
  background-color: var(--color-surface); padding: 1.5rem; border-radius: var(--border-radius-base);
  box-shadow: var(--neumorphic-shadow-soft-raised); transition: box-shadow var(--transition-speed-normal) var(--transition-easing);
}
.event-item.neomorphic-box:hover { box-shadow: var(--neumorphic-shadow-raised); }
.event-item .event-title { font-size: 1.3rem; margin-bottom: 0.5rem; }
.event-item p { font-size: 0.95rem; color: var(--color-text-secondary); margin-bottom: 0.75rem; }
.event-item strong { color: var(--color-text-primary); }
.client-logos img { max-height: 60px; width: auto; filter: grayscale(80%) opacity(0.7); transition: filter var(--transition-speed-normal) var(--transition-easing); margin: 1rem; }
.client-logos img:hover { filter: grayscale(0%) opacity(1); }
#external-resources .card.resource-card { min-height: 180px; }
#external-resources .card-content .title a { color: var(--color-heading); font-size: 1.15rem; }
#external-resources .card-content .title a:hover { color: var(--color-primary); }
#external-resources .card-content p { font-size: 0.9rem; color: var(--color-text-secondary); }
#external-resources .card-content .is-size-7 { margin-bottom: 0.5rem; }
#contact-cta { background-color: var(--color-background-alt); }

/* === FOOTER === */
.footer.neomorphic-footer {
  background-color: var(--color-surface);
  padding: 3rem 1.5rem 2rem;
  box-shadow: var(--neumorphic-shadow-pressed);
  color: var(--color-text-secondary);
}
.footer.neomorphic-footer .title.footer-title { color: var(--color-heading); font-size: 1.2rem; margin-bottom: 1rem; }
.footer.neomorphic-footer p, .footer.neomorphic-footer li { font-size: 0.95rem; color: var(--color-text-secondary); }
.footer.neomorphic-footer ul { list-style: none; margin-left: 0; }
.footer.neomorphic-footer ul li { margin-bottom: 0.5rem; }
.footer.neomorphic-footer a.neomorphic-link-footer { color: var(--color-text-secondary); font-weight: 500; }
.footer.neomorphic-footer a.neomorphic-link-footer:hover { color: var(--color-primary); text-decoration: underline; }
.footer.neomorphic-footer .content p { margin-top: 2rem; font-size: 0.85rem; }

/* === SPECIFIC PAGE STYLES === */
/* success.html */
body.page-success { display: flex; flex-direction: column; min-height: 100vh; }
body.page-success .header { flex-shrink: 0; }
body.page-success main {
    flex-grow: 1; display: flex; align-items: center; justify-content: center;
}
body.page-success .success-content-wrapper { text-align: center; padding: 2rem; }
body.page-success .success-content-wrapper .icon.checkmark::before {
    content: ''; display: inline-block; width: 25px; height: 50px;
    border: solid var(--color-success); border-width: 0 10px 10px 0;
    transform: rotate(45deg); margin-bottom: 1.5rem;
}
body.page-success .success-content-wrapper h1 { font-size: 2.5rem; color: var(--color-heading); margin-bottom: 0.5rem; }
body.page-success .success-content-wrapper p { font-size: 1.1rem; color: var(--color-text-secondary); margin-bottom: 1.5rem; }
body.page-success .footer { flex-shrink: 0; }

/* privacy.html & terms.html */
body.page-privacy main, body.page-terms main {
  padding-top: calc(100px - var(--header-height)); /* Total 100px from viewport top for first element in main */
  padding-bottom: 2rem; /* Space before footer */
}
.legal-page-content-wrapper {
    background-color: var(--color-background-alt); padding: 2.5rem;
    border-radius: var(--border-radius-large); box-shadow: var(--neumorphic-shadow-soft-raised);
    max-width: 800px; margin: 0 auto;
}
.legal-page-content-wrapper h1.title { margin-bottom: 2rem; text-align: center; font-size: 2.2rem;}
.legal-page-content-wrapper h2.title.is-4 { margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.5rem; color: var(--color-primary); }
.legal-page-content-wrapper p, .legal-page-content-wrapper li { line-height: 1.7; margin-bottom: 1rem; }
.legal-page-content-wrapper ul { list-style: disc; margin-left: 1.5rem; padding-left: 0.5rem; }

/* === UTILITY & ANIMATIONS === */
.read-more-link {
  display: inline-block; font-weight: 600; color: var(--color-primary);
  text-decoration: none; padding: 0.25em 0; position: relative;
}
.read-more-link::after {
  content: ''; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0;
  background-color: var(--color-primary); transform: scaleX(0);
  transform-origin: bottom right; transition: transform var(--transition-speed-normal) var(--transition-easing);
}
.read-more-link:hover::after { transform: scaleX(1); transform-origin: bottom left; }
.read-more-link:hover { color: var(--color-primary-darker); }

/* === RESPONSIVE ADJUSTMENTS === */
@media screen and (max-width: 1023px) { /* Bulma's tablet breakpoint */
  .navbar-menu { box-shadow: var(--neumorphic-shadow-raised); border-radius: 0 0 var(--border-radius-base) var(--border-radius-base); padding: 0.5rem 0; }
  .navbar-item { padding: 0.75rem 1rem; }
  .section-title { font-size: 2rem; }
  .hero-title { font-size: 2.8rem; }
  .hero-subtitle { font-size: 1.1rem; }
}
@media screen and (max-width: 768px) { /* Bulma's mobile breakpoint */
  :root { --section-padding-vertical: 3rem; --section-padding-horizontal: 1rem; }
  .section-title { font-size: 1.8rem; }
  .section-subtitle { margin-bottom: 2rem; }
  .hero-title { font-size: 2.2rem; }
  .hero-subtitle { font-size: 1rem; }
  .button, button, input[type="submit"], input[type="button"], input[type="reset"] { font-size: 0.95rem; }
  .neomorphic-button-cta { font-size: 1rem; padding: 0.7em 1.5em; }
  .footer.neomorphic-footer .columns { text-align: center; }
  .footer.neomorphic-footer .column:not(:last-child) { margin-bottom: 1.5rem; }
  body.page-privacy main, body.page-terms main { padding-top: calc(80px - var(--header-height)); } /* Adjust if 100px is too much on mobile */
  .legal-page-content-wrapper { padding: 1.5rem; }
  .legal-page-content-wrapper h1.title { font-size: 1.8rem;}
  .legal-page-content-wrapper h2.title.is-4 { font-size: 1.3rem;}
}