/* style.css */

/*
  Design System: Corporate
  Trend: Adaptive Typography
  Color Scheme: Split-Complementary
  Animation Style: Smooth Transitions
  Fonts: Playfair Display (Headings), Source Sans Pro (Body)
  Framework: Bulma
*/

/* CSS Variables */
:root {
  /* Color Palette (Split-Complementary) */
  --primary-color: #2c3e50; /* Deep Desaturated Blue - Base */
  --primary-color-rgb: 44, 62, 80;
  --primary-color-darker: #1f2b38;

  --secondary-color: #1abc9c; /* Vibrant Teal - Accent 1 */
  --secondary-color-rgb: 26, 188, 156;
  --secondary-color-darker: #16a085;

  --accent-color: #e67e22; /* Strong Orange - Accent 2 */
  --accent-color-rgb: 230, 126, 34;
  --accent-color-darker: #d35400;

  /* Neutral Colors */
  --text-color-base: #333333; /* Base text color for light backgrounds */
  --text-color-headings: var(--primary-color);
  --text-color-medium: #5a6673; /* Slightly lighter than base for less emphasis */
  --text-color-light: #ffffff; /* For text on dark backgrounds */
  --text-color-subtle: #7f8c8d; /* For placeholders, footers, etc. */

  --background-body: #ffffff;
  --background-light-section: #f4f6f8; /* Very Light Gray/Blueish */
  --background-card: #ffffff;
  
  /* Borders and Lines */
  --border-color-light: #e0e4e8;
  --border-color-medium: #ced4da;

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

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

  /* Spacing */
  --spacing-unit: 1rem;
  --navbar-height: 3.25rem; /* Default Bulma navbar height, can be adjusted */
  
  /* Glassmorphism (subtle) */
  --glass-bg: rgba(255, 255, 255, 0.15); /* Slightly less transparent */
  --glass-blur: 8px;
  --glass-border-color: rgba(255, 255, 255, 0.25);
  --glass-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Global Styles & Resets */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px; /* Base for REM units */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-body);
  color: var(--text-color-base);
  background-color: var(--background-body);
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh; /* Ensure body takes at least full viewport height */
  display: flex; /* For sticky footer pattern */
  flex-direction: column; /* For sticky footer pattern */
}

/* Main content wrapper to push footer down */
.main-container {
  flex: 1 0 auto; /* Allow main content to grow and shrink, but not shrink below its content size */
}


/* Typography */
h1, h2, h3, h4, h5, h6,
.title,
.subtitle {
  font-family: var(--font-family-headings);
  color: var(--text-color-headings);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: calc(var(--spacing-unit) * 0.75); /* Default bottom margin */
}

/* Adaptive Typography using clamp for key heading levels */
.title.is-1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); } /* Adjusted clamp values */
.title.is-2 { font-size: clamp(1.8rem, 3.8vw, 2.8rem); }
.title.is-3 { font-size: clamp(1.4rem, 3vw, 2rem); }
.subtitle { color: var(--text-color-medium); font-weight: 400; }

p {
  margin-bottom: var(--spacing-unit);
  color: var(--text-color-base);
}

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

.section-title { /* Custom class from HTML for main section titles */
    margin-bottom: calc(var(--spacing-unit) * 2.5) !important; /* Slightly reduced margin */
}
.section-subtitle { /* Custom class from HTML for section subtitles */
     color: var(--secondary-color) !important; /* Ensure it overrides Bulma subtitle color if used on subtitle class */
     font-weight: 600;
}


/* Navbar (Fixed) */
.header .navbar.is-fixed-top {
  background-color: rgba(255, 255, 255, 0.85); /* Slightly more opaque */
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.07); /* Softer shadow */
  min-height: var(--navbar-height); /* Ensure navbar has min height */
}
.navbar-item img {
  max-height: calc(var(--navbar-height) - 1.25rem); /* Adjust logo size */
}
.navbar-item,
.navbar-link {
  font-family: var(--font-family-body);
  font-weight: 600;
  color: var(--primary-color) !important; /* Stronger navbar link color */
  transition: color var(--transition-speed-fast) var(--transition-easing), background-color var(--transition-speed-fast) var(--transition-easing);
}
.navbar-item:hover,
.navbar-link:hover,
.navbar-item.is-active {
  background-color: transparent !important;
  color: var(--secondary-color) !important;
}
.navbar-burger span {
  background-color: var(--primary-color);
  height: 2px;
}
.navbar-menu.is-active {
    background-color: var(--background-body);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* Hero Section */
#hero.hero {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  /* Dark overlay is applied via inline style linear-gradient in HTML */
}
#hero .hero-body {
  position: relative;
  z-index: 2; /* Content above overlay */
  padding: calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 1.5); /* More padding */
}
#hero .title,
#hero .subtitle {
  color: var(--text-color-light) !important; /* Strictly white */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Enhanced shadow for readability */
}
#hero .button.is-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--text-color-light);
  font-size: 1.1rem; /* Larger CTA button */
  padding: 0.9em 1.8em;
}
#hero .button.is-primary:hover {
  background-color: var(--accent-color-darker);
  border-color: var(--accent-color-darker);
  transform: translateY(-3px) scale(1.03); /* More pronounced hover */
}

/* Global Button Styles (enhancing Bulma's .button) */
.button, button, input[type="submit"], input[type="button"], input[type="reset"] {
  font-family: var(--font-family-body);
  font-weight: 600;
  border-radius: 6px; /* Slightly more rounded */
  padding: 0.7em 1.4em; /* Standardized padding */
  transition: all var(--transition-speed-normal) var(--transition-easing);
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.07); /* Subtle default shadow */
  letter-spacing: 0.5px; /* Add some letter spacing */
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active {
  transform: translateY(0px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* Bulma button class overrides */
.button.is-primary {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-color-light);
}
.button.is-primary:hover {
  background-color: var(--secondary-color-darker);
  border-color: var(--secondary-color-darker);
}
.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(--text-color-light);
}

.button.is-accent { /* Custom style using --accent-color */
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--text-color-light);
}
.button.is-accent:hover {
  background-color: var(--accent-color-darker);
  border-color: var(--accent-color-darker);
}

.button.is-link { /* Using primary color for .is-link */
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-color-light);
}
.button.is-link:hover {
    background-color: var(--primary-color-darker);
    border-color: var(--primary-color-darker);
}
.button.is-link.is-outlined {
  background-color: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.button.is-link.is-outlined:hover {
  background-color: var(--primary-color);
  color: var(--text-color-light);
}


/* Sections General Styling */
.section {
  padding: calc(var(--spacing-unit) * 3.5) calc(var(--spacing-unit) * 1.5);
  /* height: auto; Natural height based on content */
}
.section.has-background-light {
  background-color: var(--background-light-section);
}
.section.has-background-primary { /* For sections with dark primary background */
    background-color: var(--primary-color);
}
.section.has-background-primary .title,
.section.has-background-primary .subtitle,
.section.has-background-primary p,
.section.has-background-primary .label,
.section.has-background-primary li,
.section.has-background-primary .content {
    color: var(--text-color-light) !important; /* Important to override Bulma defaults */
}
.section.has-background-primary a {
    color: var(--secondary-color);
}
.section.has-background-primary a:hover {
    color: var(--accent-color); /* Contrasting hover for links on dark bg */
}


/* Cards Styling */
.card {
  background-color: var(--background-card);
  border-radius: 10px; /* More modern radius */
  box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.07); /* Softer, consistent shadow */
  transition: transform var(--transition-speed-normal) var(--transition-easing), 
              box-shadow var(--transition-speed-normal) var(--transition-easing);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Important for child elements and border-radius */
}
.card:hover {
  transform: translateY(-6px) scale(1.015); /* Subtler scale, more Y transform */
  box-shadow: 0 12px 30px rgba(var(--primary-color-rgb), 0.1);
}

/* STROGO: Card image centering and fixed height */
.card-image { /* Bulma's class for image wrapper */
  display: flex; /* Centers the figure/img if it's not full width */
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  position: relative; /* For potential overlays on image */
}
.card-image figure { /* Bulma's figure inside card-image */
    margin: 0;
    width: 100%;
    height: 100%; /* Figure takes full height of card-image */
    display: flex; /* Helps with img if it has display issues */
}
.card-image img {
  display: block;
  width: 100%;
  height: 100%; /* Fill the figure which fills card-image */
  object-fit: cover;
  transition: transform var(--transition-speed-slow) var(--transition-easing);
}
.card:hover .card-image img {
  transform: scale(1.08); /* Slightly less zoom on hover */
}

/* Specific fixed heights for card images in different sections */
.clientele .card .card-image, /* Success stories */
.events .card .card-image,   /* Event cards */
.external-resources .card .card-image { /* If external resources had images */
    height: 220px; /* Consistent height for landscape-ish images */
}
/* Team member cards have specific image styling below */

.card-content {
  padding: calc(var(--spacing-unit) * 1.25); /* Adjusted padding */
  flex-grow: 1;
  width: 100%;
  text-align: left; /* Default unless card is .has-text-centered */
}
.card-content .title {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-size: 1.3rem; /* Slightly smaller for card titles */
    color: var(--primary-color);
}
.card-content .subtitle {
    font-size: 0.9rem;
    color: var(--text-color-medium);
    margin-bottom: var(--spacing-unit);
}
.card-content .content { /* Bulma's .content class */
    font-size: 0.9rem; /* Slightly smaller text in cards */
    color: var(--text-color-base);
    line-height: 1.6;
}
/* STROGO: Centering content within card if needed */
.card.has-text-centered .card-content {
    text-align: center;
}
.card.has-text-centered .card-content .button { /* Center button if card is centered */
    margin-left: auto;
    margin-right: auto;
}

/* Team Member Cards */
.team-member-card {
    text-align: center;
}
.team-member-card .card-image {
    padding-top: var(--spacing-unit); /* Space for circular image */
    height: auto; /* Let content define height */
}
.team-member-card .card-image img {
  border-radius: 50% !important;
  width: 130px !important; /* Slightly smaller */
  height: 130px !important;
  border: 4px solid var(--background-light-section);
  margin: 0 auto var(--spacing-unit) auto; /* Margin bottom for spacing */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.team-member-card .card-content .title {
    font-size: 1.15rem; /* Specific size for team member names */
}
.team-member-card .card-content .subtitle {
    font-size: 0.85rem; /* Specific size for role */
}

/* Pricing Cards */
.pricing-card.is-featured {
  border: 3px solid var(--accent-color); /* Thicker border */
  box-shadow: 0 10px 35px rgba(var(--accent-color-rgb), 0.2);
  transform: scale(1.03); /* Default scale for featured */
}
.pricing-card.is-featured:hover {
  transform: scale(1.05) translateY(-5px); /* Enhanced hover for featured */
}
.pricing-card .card-header-title { /* For Bulma card header if used */
    font-size: 1.2rem;
    justify-content: center;
}
.pricing-card .price-tag {
  color: var(--primary-color);
  margin-bottom: var(--spacing-unit);
  font-size: 2.5rem; /* Prominent price */
}
.pricing-card .price-tag .price-period {
  font-size: 0.5em; /* Relative to parent .price-tag */
  font-weight: 400;
  color: var(--text-color-subtle);
  display: block; /* Period on new line or adjust as needed */
  margin-top: -0.5em;
}
.pricing-card ul {
  list-style: none;
  margin-left: 0;
  margin-bottom: calc(var(--spacing-unit) * 1.5);
  text-align: left;
}
.pricing-card ul li {
  padding: calc(var(--spacing-unit) * 0.6) 0;
  border-bottom: 1px solid var(--border-color-light);
  font-size: 0.9rem;
}
.pricing-card ul li:last-child { border-bottom: none; }
.pricing-card ul li::before {
  content: "✓";
  color: var(--secondary-color);
  margin-right: calc(var(--spacing-unit) * 0.75);
  font-weight: bold;
}

/* Resource Cards (from external-resources section) */
.resource-card .card-content {
    padding: var(--spacing-unit);
}
.resource-card .title a { /* Title is a link */
    color: var(--primary-color);
    font-size: 1.05rem; /* Smaller for these cards */
    font-weight: 600;
}
.resource-card .title a:hover {
    color: var(--secondary-color);
}
.resource-card p.is-size-7 { /* Description */
    color: var(--text-color-medium);
    font-size: 0.8rem !important;
    line-height: 1.5;
}

/* Glassmorphism effect for selected cards (optional, add .is-glass class in HTML) */
.card.is-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border-color);
  box-shadow: var(--glass-shadow);
}
.card.is-glass .card-content .title,
.card.is-glass .card-content .subtitle,
.card.is-glass .card-content .content,
.card.is-glass .card-content p {
    color: var(--text-color-light); /* Text on glass needs to be light for contrast */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.card.is-glass .card-content a {
    color: var(--secondary-color); /* Light links on glass */
}


/* Forms (Enhancing Bulma) */
.label {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 0.95rem; /* Slightly larger labels */
  margin-bottom: calc(var(--spacing-unit) * 0.4);
}
.input, .textarea, .select select {
  border-radius: 6px;
  border: 1px solid var(--border-color-medium);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03); /* Subtle inset shadow */
  transition: border-color var(--transition-speed-normal) var(--transition-easing), 
              box-shadow var(--transition-speed-normal) var(--transition-easing);
  font-size: 1rem;
  padding: 0.8em 1em; /* Slightly more padding */
  color: var(--text-color-base);
}
.input::placeholder, .textarea::placeholder {
    color: var(--text-color-subtle);
    opacity: 0.8;
}
.input:focus, .textarea:focus, .select select:focus,
.input.is-focused, .textarea.is-focused, .select.is-focused select,
.input:active, .textarea:active, .select select:active,
.input.is-active, .textarea.is-active, .select.is-active select {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 0.125em rgba(var(--secondary-color-rgb), 0.25), inset 0 1px 2px rgba(0,0,0,0.03);
}
.select::after { /* Arrow for select */
  border-color: var(--secondary-color);
  right: 1.125em;
  z-index: 4;
  height: 0.7em; /* Custom arrow size */
  width: 0.7em;
  margin-top: -0.45em; /* Adjust vertical position */
}
.checkbox label, .radio label {
    color: var(--text-color-base);
    font-size: 0.95rem;
    padding-left: 0.5em; /* Space between checkbox and text */
}

/* Pricing Toggle Switch (Bulma's .switch) */
.pricing-toggle {
    margin-bottom: calc(var(--spacing-unit) * 2.5);
    font-size: 1.05rem;
    color: var(--text-color-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pricing-toggle .switch[type="checkbox"] {
    margin: 0 var(--spacing-unit);
}
.pricing-toggle .switch[type="checkbox"] + label::before {
  background: var(--border-color-medium);
  border-radius: 1em;
  width: 3.5em; /* Larger switch */
  height: 1.75em;
}
.pricing-toggle .switch[type="checkbox"] + label::after { /* The moving part */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    width: 1.35em; /* Adjust knob size */
    height: 1.35em;
    top: 0.2em; /* Adjust knob position */
    left: 0.2em;
}
.pricing-toggle .switch[type="checkbox"]:checked + label::before {
  background: var(--secondary-color);
}
.pricing-toggle .switch[type="checkbox"]:checked + label::after {
    left: 1.95em; /* Adjust knob position when checked */
}

/* Progress Indicators (Bulma's .progress) */
.progress.is-primary::-webkit-progress-value { background-color: var(--secondary-color); }
.progress.is-primary::-moz-progress-bar { background-color: var(--secondary-color); }
.progress.is-primary::-ms-fill { background-color: var(--secondary-color); }
.progress.is-primary {
    background-color: var(--border-color-light);
    border-radius: 20px; /* Rounded progress bar */
    height: 1.2rem; /* Thicker progress bar */
}
.progress.is-primary::-webkit-progress-bar { /* For track styling */
    background-color: var(--border-color-light);
    border-radius: 20px;
}


/* Footer */
.footer {
  background-color: var(--primary-color);
  color: var(--text-color-subtle); /* Default text in footer */
  padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
  margin-top: auto; /* For sticky footer with body flex */
  flex-shrink: 0; /* Prevent footer from shrinking */
}
.footer .title.footer-title {
  color: var(--text-color-light);
  margin-bottom: var(--spacing-unit);
  font-size: 1.15rem; /* Slightly smaller footer titles */
}
.footer p { /* Paragraphs directly in footer columns */
    color: var(--text-color-subtle);
    font-size: 0.9rem;
}
.footer a {
  color: var(--secondary-color);
  font-weight: 500; /* Bolder links in footer */
}
.footer a:hover {
  color: var(--text-color-light);
  text-decoration: underline;
}
.footer ul {
  list-style: none;
  margin-left: 0;
}
.footer ul li {
  margin-bottom: calc(var(--spacing-unit) * 0.4);
}
.footer .content p { /* For copyright text or similar */
  color: var(--text-color-subtle);
  font-size: 0.85rem;
}
/* Footer social media text links */
.footer .column ul li a[target="_blank"] {
    /* Existing 'a' styling is good, can add more specific if needed */
}


/* Page Specific Styles */

/* success.html: Page takes full viewport height and centers content */
body.success-page .main-container {
    display: flex; /* Override default main-container flex if needed here */
    flex-direction: column;
    flex-grow: 1; /* Make main container take all available vertical space */
}
/* The section on success.html with classes: section page-content is-flex is-align-items-center is-justify-content-center */
/* It will be targeted by the existing .page-content.is-flex... rule below for centering */
.page-content.is-flex.is-align-items-center.is-justify-content-center {
    flex-grow: 1; /* Ensure this section fills space if parent is flex column */
    width: 100%;
    min-height: 0; /* Override any previous min-height if not desired here */
    /* Padding for the content inside */
    padding-top: calc(var(--navbar-height) + var(--spacing-unit));
    padding-bottom: var(--spacing-unit);
}
/* If success.html has its own body class for very specific 100vh handling */
body.success-page-fullscreen { /* Alternative approach: Add this class to body on success.html */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
body.success-page-fullscreen .header, body.success-page-fullscreen .footer {
    display: none; /* Hide header/footer for true fullscreen message */
}
body.success-page-fullscreen .main-container {
    flex-grow: 0; /* Don't grow if body is handling centering */
}
/* Icon on success page */
.success-page-content figure img { /* Assuming .success-page-content is the container div on success.html */
    max-width: 100px; /* Control icon size */
    margin-bottom: var(--spacing-unit) !important;
}
.success-page-content .title.is-1 {
    color: var(--secondary-color); /* Highlight success title */
}

/* privacy.html & terms.html: Add top padding to content area */
.legal-page-content { /* Add this class to the main content section of legal pages */
    padding-top: calc(var(--navbar-height) + var(--spacing-unit) * 2.5) !important;
    padding-bottom: calc(var(--spacing-unit) * 3);
}
.legal-page-content .title.is-1 {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.legal-page-content .content h3,
.legal-page-content .content h4 {
    margin-top: calc(var(--spacing-unit) * 2);
    margin-bottom: var(--spacing-unit);
    color: var(--primary-color);
    font-weight: 600; /* Slightly bolder subheadings in legal */
}
.legal-page-content .content ul {
    list-style-position: outside; /* Ensure bullets are outside */
    margin-left: calc(var(--spacing-unit) * 1.5); /* Proper indentation for lists */
    padding-left: var(--spacing-unit);
}
.legal-page-content .content li {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}


/* Utility Classes */
.has-text-shadow-soft {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.has-bg-img { /* For elements with CSS background images */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* Overlay for text on background images (if not done inline in HTML) */
.has-overlay::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(var(--primary-color-rgb),0.5), rgba(var(--primary-color-rgb),0.7)); /* Use primary color for overlay */
    z-index: 1;
}
.has-overlay > * { /* Content should be above overlay */
    position: relative;
    z-index: 2;
}


/* 'Read More' Link Styling */
.read-more-link {
  display: inline-block;
  font-weight: 700; /* Bolder */
  color: var(--accent-color);
  padding: calc(var(--spacing-unit)*0.2) 0;
  position: relative;
  text-decoration: none;
  border-bottom: 2px solid transparent; /* Prepare space for underline */
  transition: color var(--transition-speed-fast) var(--transition-easing), border-color var(--transition-speed-fast) var(--transition-easing);
}
.read-more-link:hover {
  color: var(--accent-color-darker);
  border-bottom-color: var(--accent-color-darker); /* Underline on hover */
  text-decoration: none;
}
.read-more-link::after { /* Optional arrow */
  content: " \02192"; /* Right arrow unicode */
  display: inline-block;
  margin-left: 0.3em;
  transition: transform var(--transition-speed-fast) var(--transition-easing);
}
.read-more-link:hover::after {
  transform: translateX(4px);
}


/* Media Logos Section (from ./) */
.media-logo img {
  max-width: 110px;
  max-height: 45px;
  filter: grayscale(100%) opacity(0.55); /* More subtle */
  transition: filter var(--transition-speed-normal) var(--transition-easing), 
              opacity var(--transition-speed-normal) var(--transition-easing),
              transform var(--transition-speed-fast) var(--transition-easing);
}
.media-logo:hover img { /* Hover on the container for better interaction */
  filter: grayscale(0%) opacity(1);
  transform: scale(1.1);
}

/* Cookie Consent Popup (Enhancing inline styles from HTML) */
#cookie-popup {
  font-family: var(--font-family-body);
  background-color: rgba(var(--primary-color-rgb), 0.97) !important; /* Slightly more opaque */
  padding: calc(var(--spacing-unit) * 1.25) !important;
  font-size: 0.9rem;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
#cookie-popup p {
    color: var(--text-color-light) !important;
    margin-bottom: calc(var(--spacing-unit) * 0.75) !important;
    line-height: 1.5;
}
#cookie-popup p a {
  color: var(--secondary-color) !important;
  font-weight: 600;
  text-decoration: underline !important;
}
#cookie-popup p a:hover {
    color: var(--text-color-light) !important;
}
#cookie-popup #accept-cookies {
  background-color: var(--secondary-color) !important;
  color: var(--text-color-light) !important;
  padding: 0.7em 1.5em !important; /* Larger click target */
  font-size: 0.9rem;
  font-weight: 700; /* Bolder button text */
  border-radius: 5px;
  border: none !important;
  transition: background-color var(--transition-speed-fast) var(--transition-easing), transform var(--transition-speed-fast) var(--transition-easing);
}
#cookie-popup #accept-cookies:hover {
  background-color: var(--secondary-color-darker) !important;
  transform: scale(1.03);
}


/* Responsive Adjustments */
@media screen and (max-width: 1023px) { /* Tablet */
    .pricing-card.is-featured {
        /* Keep featured slightly larger or more distinct */
        transform: scale(1.02) translateY(-3px);
    }
    .pricing-card.is-featured:hover {
        transform: scale(1.04) translateY(-6px);
    }
}

@media screen and (max-width: 768px) { /* Mobile */
  html {
    font-size: 15px;
  }
  .section {
    padding: calc(var(--spacing-unit) * 2.5) var(--spacing-unit);
  }
  #hero .hero-body {
    padding: calc(var(--spacing-unit) * 3.5) var(--spacing-unit);
  }
  .columns.is-multiline .column { /* Make all columns stack on mobile */
    width: 100% !important; /* Override Bulma's specific column widths like is-one-third */
    flex: none !important;
    margin-bottom: var(--spacing-unit) !important; /* Ensure spacing between stacked cards */
  }
  .columns.is-multiline .column:last-child {
      margin-bottom: 0 !important;
  }
  .footer .columns {
    text-align: center;
  }
  .footer .columns .column {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
  }
  .pricing-toggle {
    flex-direction: column;
  }
  .pricing-toggle .switch[type="checkbox"] {
    margin-top: calc(var(--spacing-unit) * 0.75);
    margin-left: 0; /* Reset margin if it was horizontal */
  }
  .legal-page-content {
    padding-top: calc(var(--navbar-height) + var(--spacing-unit) * 1.5) !important;
  }
  .button, button, input[type="submit"], input[type="button"], input[type="reset"] {
    padding: 0.8em 1.2em; /* Adjust button padding for mobile */
    font-size: 0.95rem;
  }
  #hero .button.is-primary {
    font-size: 1rem;
    padding: 0.8em 1.5em;
  }
}