/* style.css */

:root {
  /* Color Palette - Tetradic */
  --primary-color-1: #0A2463; /* Deep Blue (Prussian Blue like) */
  --primary-color-2: #FACC15; /* Amber/Gold */
  --accent-color-1: #3E92CC;  /* Steel Blue */
  --accent-color-2: #D62828;  /* Imperial Red */

  /* Neutral Colors */
  --text-dark: #222222;
  --text-medium: #555555;
  --text-light: #FFFFFF;
  --bg-light: #F8F9FA; /* Very light gray for general background */
  --bg-section-light: #FFFFFF; /* White for sections like "Our Process" */
  --bg-section-alt: #E9ECEF; /* Slightly darker light gray for alternating sections */
  --bg-dark: #333333; /* Footer background */
  --border-color: #DEE2E6;
  --card-bg: #FFFFFF;
  --card-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  --card-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);

  /* Bulma Overrides/Enhancements */
  --bulma-primary: var(--primary-color-1);
  --bulma-primary-invert: var(--text-light);
  --bulma-link: var(--accent-color-1);
  --bulma-link-hover: var(--primary-color-1);
  --bulma-info: var(--accent-color-1);
  --bulma-success: #28A745; /* Green */
  --bulma-warning: var(--primary-color-2);
  --bulma-danger: var(--accent-color-2);

  /* Fonts */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Spacing */
  --spacing-tiny: 0.25rem;
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.5rem; /* Adjusted for less empty space */
  --spacing-xlarge: 2.5rem; /* Adjusted */
  --navbar-height: 52px; /* Default Bulma navbar height */

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

  /* Border Radius */
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 12px;
}

/* Bulma variable overrides */
.button.is-primary {
  background-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
  border-color: transparent !important;
}
.button.is-primary:hover, .button.is-primary:focus {
  background-color: color-mix(in srgb, var(--bulma-primary) 85%, black) !important;
}
.button.is-primary.is-outlined {
    background-color: transparent !important;
    border-color: var(--bulma-primary) !important;
    color: var(--bulma-primary) !important;
}
.button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus {
    background-color: var(--bulma-primary) !important;
    color: var(--bulma-primary-invert) !important;
}
.input:focus, .textarea:focus, .select select:focus {
    border-color: var(--bulma-primary) !important;
    box-shadow: 0 0 0 0.125em color-mix(in srgb, var(--bulma-primary) 25%, white) !important;
}
.input, .textarea, .select select {
    border-radius: var(--border-radius-small) !important;
}
.label {
    color: var(--text-dark) !important;
    font-family: var(--font-body);
    font-weight: 500;
}


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

body {
  font-family: var(--font-body);
  color: var(--text-medium);
  background-color: var(--bg-light);
  line-height: 1.7;
  overflow-x: hidden;
  padding-top: var(--navbar-height); /* For fixed navbar */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6, .title, .subtitle {
  font-family: var(--font-heading);
  color: var(--text-dark);
  font-weight: 700;
}
.title.is-1 { font-size: 3rem; }
.title.is-2 { font-size: 2.5rem; }
.title.is-3 { font-size: 2rem; }
.title.is-4 { font-size: 1.5rem; }
.title.is-5 { font-size: 1.25rem; }

p {
  margin-bottom: var(--spacing-medium);
  font-family: var(--font-body);
  color: var(--text-medium);
}

a {
  color: var(--bulma-link);
  transition: color var(--transition-speed) var(--transition-timing);
  font-weight: 500;
}
a:hover {
  color: var(--bulma-link-hover);
}

/* Global Button Styles */
.button, button, input[type='submit'], input[type='button'] {
  font-family: var(--font-body);
  font-weight: 700 !important;
  border-radius: var(--border-radius-medium) !important;
  transition: all var(--transition-speed) var(--transition-timing) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.8em 1.8em !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  border: none !important; /* Remove default borders for custom look */
}

.button:hover, button:hover, input[type='submit']:hover, input[type='button']:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* Header & Navbar */
.header.is-fixed-top .navbar {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.navbar-item, .navbar-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-medium);
}
.navbar-item:hover, .navbar-link:hover {
  background-color: transparent !important;
  color: var(--primary-color-1) !important;
}
.navbar-burger span {
  background-color: var(--text-dark) !important;
  height: 2px;
}
.navbar-brand .navbar-item { /* For logo/brand name */
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color-1) !important;
}
.navbar-menu {
    box-shadow: none; /* remove Bulma's mobile menu shadow if not desired */
}
@media screen and (max-width: 1023px) {
    .navbar-menu.is-active {
        background-color: var(--card-bg);
        box-shadow: 0 8px 16px rgba(0,0,0,.1);
    }
}


/* Hero Section */
#hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative; /* For parallax or pseudo-elements */
}
#hero .hero-title {
  color: var(--text-light) !important; /* Enforced by HTML but good to have in CSS */
  font-weight: 700;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
#hero .hero-subtitle {
  color: var(--text-light) !important; /* Enforced by HTML */
  font-weight: 400;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
#hero .hero-foot .icon svg {
  animation: bounceArrow 2s infinite;
}
@keyframes bounceArrow {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-10px);}
  60% {transform: translateY(-5px);}
}

/* Common Section Styles */
section.section {
  padding: var(--spacing-xlarge) var(--spacing-large) !important; /* Responsive padding */
}
#our-process, #team, #projects, #external-resources {
    background-color: var(--bg-section-light);
}
#case-studies, #testimonials, #gallery, #contact {
    background-color: var(--bg-section-alt);
}
.section-title {
  font-family: var(--font-heading);
  color: var(--text-dark) !important;
  margin-bottom: var(--spacing-medium) !important;
  position: relative;
  display: inline-block;
}
.title.has-text-centered.section-title::after {
  content: '';
  display: block;
  width: 70px;
  height: 4px;
  background-color: var(--primary-color-2);
  margin: var(--spacing-small) auto var(--spacing-xlarge); /* Increased bottom margin for spacing */
}
.section .subtitle {
  font-family: var(--font-body);
  color: var(--text-medium) !important;
  max-width: 800px; /* Wider for more text */
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
  font-size: 1.1rem;
}

/* Card Styles (General) */
.card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-large); /* Softer, more modern radius */
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--transition-speed) var(--transition-timing), transform var(--transition-speed) var(--transition-timing);
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensures cards in a row align footers */
  overflow: hidden; /* Ensures child elements respect border radius */
}
.card:hover {
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-5px);
}

.card .card-image {
  text-align: center; /* Centers the figure if it's not full width */
  position: relative;
  overflow: hidden; /* Crucial for img object-fit and radius */
}
.card .card-image figure.image {
  margin: 0 auto; /* Centers the figure block */
  display: block;
  background-color: var(--bg-light); /* Placeholder bg for images */
}
.card .card-image img {
  object-fit: cover;
  width: 100%;
  height: 200px; /* Fixed height for image area as requested */
  display: block; /* Remove extra space below image */
  border-top-left-radius: 0; /* Image itself doesn't need radius if card overflow is hidden */
  border-top-right-radius: 0;
}
/* Specific card image heights if needed */
#team .card .card-image img { height: 240px; } /* For 1by1 team photos */
#gallery figure.image img { height: 100%; } /* Gallery images use figure's aspect ratio height */


.card .card-content {
  padding: var(--spacing-large);
  text-align: center; /* Centers text and inline-block elements */
  flex-grow: 1; /* Allows card content to take available space */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Content starts from top */
}
.card .card-content .title,
.card .card-content .subtitle {
  margin-bottom: var(--spacing-small) !important; /* Tighter spacing in cards */
  font-family: var(--font-heading);
}
.card .card-content .title { color: var(--text-dark) !important; }
.card .card-content .subtitle { color: var(--text-medium) !important; font-size: 0.9rem; font-weight: 500; }
.card .card-content .content {
  font-family: var(--font-body);
  color: var(--text-medium);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: var(--spacing-medium);
}


/* Specific Section Card Styles */
/* Our Process Section */
#our-process .process-card {
  border-top: 4px solid var(--primary-color-1);
}
#our-process .process-card .icon svg {
  width: 50px;
  height: 50px;
  color: var(--primary-color-1);
}
#our-process .process-card .title {
    margin-top: var(--spacing-small);
}

/* Testimonials Section */
#testimonials .testimonial-card {
  background-color: var(--card-bg);
  border-left: 5px solid var(--accent-color-1);
  padding: var(--spacing-large);
  border-radius: var(--border-radius-medium);
}
#testimonials .testimonial-card p.is-size-5 {
  font-style: italic;
  color: var(--text-medium) !important;
  margin-bottom: var(--spacing-medium);
}
#testimonials .testimonial-card p.title.is-6 { /* Author */
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin-top: var(--spacing-medium) !important;
}

/* Gallery Section */
#gallery .column figure {
  border-radius: var(--border-radius-medium);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
}
#gallery .column figure:hover {
  transform: scale(1.05);
  box-shadow: var(--card-hover-shadow);
}
#gallery .column figure img {
    height: 100%; /* Use the aspect ratio from Bulma's figure */
    object-fit: cover;
}


/* External Resources Section */
.resource-list {
  list-style: none;
  margin-left: 0;
}
.resource-list li {
  background-color: var(--card-bg);
  padding: var(--spacing-large);
  margin-bottom: var(--spacing-medium);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--card-shadow);
  transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
  border-left: 4px solid var(--accent-color-1);
}
.resource-list li:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-hover-shadow);
}
.resource-list .resource-title a {
  font-family: var(--font-heading);
  color: var(--primary-color-1) !important;
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-timing);
}
.resource-list .resource-title a:hover {
  color: var(--accent-color-1) !important;
  text-decoration: underline;
}
.resource-list li p {
  font-family: var(--font-body);
  color: var(--text-medium);
  font-size: 0.9rem;
  margin-top: var(--spacing-small);
}

/* Contact Form */
#contact-form .input, #contact-form .textarea {
  border-radius: var(--border-radius-small) !important;
  border-color: var(--border-color) !important;
  font-family: var(--font-body);
  padding: 0.9em !important; /* Modern padding */
}
#contact-form .input:focus, #contact-form .textarea:focus {
  border-color: var(--primary-color-1) !important;
  box-shadow: 0 0 0 0.125em color-mix(in srgb, var(--primary-color-1) 25%, white) !important;
}

/* Footer */
.footer {
  background-color: var(--bg-dark) !important;
  color: #CCCCCC !important; /* Light gray text for footer */
  padding: var(--spacing-xlarge) var(--spacing-large) var(--spacing-medium) !important;
}
.footer .title {
  color: var(--text-light) !important;
  font-family: var(--font-heading);
  margin-bottom: var(--spacing-medium);
}
.footer a {
  color: #CCCCCC !important;
  font-family: var(--font-body);
  font-weight: 400;
  transition: color var(--transition-speed) var(--transition-timing);
}
.footer a:hover {
  color: var(--primary-color-2) !important; /* Accent color for hover */
}
.footer hr {
    background-color: #555555;
    height: 1px;
}
.footer .content p { /* Copyright and other text */
    color: #CCCCCC;
    font-family: var(--font-body);
}

/* Parallax Background Effect (simple) */
.parallax-background {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Success Page Styles */
.success-page-container {
  min-height: calc(100vh - var(--navbar-height)); /* Full viewport height minus navbar */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-large);
  background: linear-gradient(135deg, var(--accent-color-1) 0%, var(--primary-color-1) 100%);
  color: var(--text-light);
}
.success-page-container .title,
.success-page-container .subtitle {
  color: var(--text-light) !important;
  font-family: var(--font-heading);
}
.success-page-container .icon svg {
  width: 80px;
  height: 80px;
  color: var(--primary-color-2); /* Bright accent for success icon */
  margin-bottom: var(--spacing-large);
}
.success-page-container .button {
  margin-top: var(--spacing-large);
}

/* Privacy & Terms Pages Content Area */
.main-content-page { /* Apply this class to the container of text on privacy/terms pages */
  padding-top: calc(var(--navbar-height) + var(--spacing-xlarge)); /* Space from fixed header */
  padding-bottom: var(--spacing-xlarge);
  background-color: var(--card-bg); /* Use card-bg for clean text page */
  min-height: calc(100vh - var(--navbar-height) - 130px); /* Adjust 130px based on footer height */
}
.main-content-page .container {
    max-width: 800px; /* Readable text width */
}
.main-content-page h1, .main-content-page h2, .main-content-page h3 {
    margin-bottom: var(--spacing-medium);
    margin-top: var(--spacing-large);
    color: var(--text-dark);
}
.main-content-page p, .main-content-page li {
    font-family: var(--font-body);
    color: var(--text-medium);
    line-height: 1.8;
}

/* Read More Link Style */
.read-more-link {
  font-family: var(--font-body);
  color: var(--accent-color-1);
  font-weight: 700;
  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);
  font-size: 0.9rem;
}
.read-more-link::after {
  content: ' →';
  margin-left: 4px;
  display: inline-block;
  transition: transform var(--transition-speed) var(--transition-timing);
}
.read-more-link:hover {
  color: var(--primary-color-1);
  transform: translateX(4px);
}
.read-more-link:hover::after {
    transform: translateX(2px);
}


/* Responsive Adjustments (Bulma handles most) */
@media screen and (max-width: 768px) {
  .title.is-1 { font-size: 2.5rem; }
  .title.is-2 { font-size: 2rem; }
  .title.is-3 { font-size: 1.75rem; }
  section.section {
    padding: var(--spacing-large) var(--spacing-medium) !important;
  }
  .section .subtitle {
    font-size: 1rem;
  }
  .card .card-image img {
    height: 180px; /* Adjust card image height for smaller screens */
  }
}

/* AOS Animation Customization (optional, if default AOS is not enough) */
[data-aos="fade-up"] {
  transition-property: transform, opacity;
}