/* CSS Custom Properties for centralized content width management */
:root {
    --content-max-width: 1200px;
    --content-padding: 20px;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base typography and layout */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #2d3748 !important;
    background-color: #ffffff !important;
}

.container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
}

/* Override Bulma section padding to ensure consistent alignment */
.section {
    padding: 3rem 0 !important; /* Only vertical padding, no horizontal padding */
}

/* Bulma Overrides for Color Palette - Enhanced specificity */
/* Force Bulma primary buttons to use orange for CTAs */
html body .button.is-primary,
.button.is-primary {
    background-color: #FF9900 !important;
    border-color: #FF9900 !important;
    color: white !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
}

html body .button.is-primary:hover,
html body .button.is-primary:focus,
.button.is-primary:hover,
.button.is-primary:focus {
    background-color: #e88600 !important;
    border-color: #e88600 !important;
    color: white !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2) !important;
}

html body .button.is-primary.is-outlined,
.button.is-primary.is-outlined {
    background-color: #006D77 !important;
    border-color: #006D77 !important;
    color: white !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
}

html body .button.is-primary.is-outlined:hover,
html body .button.is-primary.is-outlined:focus,
.button.is-primary.is-outlined:hover,
.button.is-primary.is-outlined:focus {
    background-color: transparent !important;
    border-color: #006D77 !important;
    color: #006D77 !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2) !important;
}

/* Universal button styling */
.button,
.tech-button,
button {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    line-height: 1.3 !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    height: auto !important;
    min-height: 24px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    transition: box-shadow 0.3s ease !important;
}

.button:hover,
.tech-button:hover,
button:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Language selector styling */
.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem 1rem !important; /* Maintain proper padding for multi-line text */
}

/* Font Awesome Icon Fix - Ensure icons display properly */
.icon {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
}

.fas, .fab, .far, .fal, .fad, .fat {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro" !important;
    font-weight: 900 !important;
    display: inline-block !important;
}

.fab {
    font-weight: 400 !important;
}

/* Ensure icons in buttons display correctly */
.button .icon {
    margin-right: 0.5rem !important;
}

.button .icon:last-child {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

.button .icon:first-child:last-child {
    margin: 0 !important;
}

/* Override Bulma navbar to use turquoise */
.navbar.is-primary {
    background-color: #006D77 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.navbar.is-primary .navbar-item,
.navbar.is-primary .navbar-link {
    color: white !important;
}

.navbar.is-primary .navbar-item:hover,
.navbar.is-primary .navbar-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

/* Force navbar menu to always be visible and stay on one line */
.navbar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-height: 3.25rem !important;
}

.navbar-brand {
    flex-shrink: 1 !important;
}

.navbar-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

.navbar-start {
    display: flex !important;
    align-items: center !important;
    margin-right: auto !important;
}

.navbar-end {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
}

/* Force single line on ALL screen sizes */
@media screen and (max-width: 1023px) {
    .navbar-menu {
        display: flex !important;
        position: static !important;
        background-color: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}

/* Override Bulma titles and headings to use turquoise */
.title {
    color: #006D77 !important;
}

.title.is-1,
.title.is-2,
.title.is-3,
.title.is-4,
.title.is-5,
.title.is-6 {
    color: #006D77 !important;
}

/* Force all card titles and blog post links to be turquoise */
.card-content .title,
.card-content .title a,
.card .title,
.card .title a {
    color: #006D77 !important;
}

.card-content .title a:hover,
.card .title a:hover {
    color: #004d57 !important;
}

/* Override Bulma tag styling for language switcher */
.tag.is-primary {
    background-color: #006D77 !important;
    color: white !important;
}

.tag.is-light {
    background-color: #f7fafc !important;
    color: #2d3748 !important;
}

.tag.is-light:hover {
    background-color: #006D77 !important;
    color: white !important;
}

/* Override body colors */
body {
    background-color: #ffffff !important;
    color: #2d3748 !important;
}

/* Services Section Styling */
.service-tile {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: none !important;
    background: #ffffff !important;
    padding: 2rem !important;
    height: 100% !important;
}

.service-tile:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0, 109, 119, 0.1) !important;
}

.service-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-tile .title {
    margin-bottom: 1rem !important;
}

.service-tile .content {
    color: #2d3748 !important;
    line-height: 1.6 !important;
}

/* Pagination */
.pagination-nav {
    margin: 3rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.pagination-info {
    text-align: center;
}

.pagination-summary {
    color: #64748b;
    font-size: 0.875rem;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-pages {
    display: flex;
    gap: 0.25rem;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    color: #64748b;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    min-width: 40px;
    justify-content: center;
}

.pagination-btn:hover {
    background: #f7fafc;
    border-color: #cbd5e1;
    color: #006D77;
}

.pagination-current {
    background: #006D77;
    border-color: #006D77;
    color: white;
}

.pagination-current:hover {
    background: #006D77;
    border-color: #006D77;
    color: white;
}

.pagination-prev,
.pagination-next {
    padding: 0.5rem 1rem;
}

.pagination-ellipsis {
    padding: 0.5rem 0.25rem;
    color: #94a3b8;
    font-weight: 500;
}

/* Main content */
.main {
    min-height: calc(100vh - 120px);
    padding: 2rem 0;
}

/* Hero section - Force vertical stacking and align with other content */
.hero-content-column {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-left: 0 !important; /* Remove Bulma column padding to align with .mb-6 content */
    padding-right: 0 !important; /* Remove all column padding for perfect alignment */
}

.hero-text-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.hero-text-content .title {
    display: block !important;
    width: 100% !important;
    line-height: 1.1 !important;
    margin-bottom: 2.3rem !important;
}

.hero-text-content .subtitle {
    margin-bottom: 1.5rem !important;
    display: block !important;
    width: 100% !important;
}

.hero-text-content .button {
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-self: flex-start !important;
}

/* Blog header */
.blog-header {
    text-align: center;
    margin-bottom: 3rem;
}

.blog-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #006D77;
    margin-bottom: 0.5rem;
}

.blog-count {
    color: #64748b;
    font-size: 1rem;
}

/* Blog grid and cards */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.blog-card {
    background: #f7fafc;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.blog-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #64748b;
}

.blog-date {
    font-weight: 500;
}

.blog-title {
    margin-bottom: 1rem;
}

.blog-title a {
    color: #006D77;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.blog-title a:hover {
    color: #006D77;
}

.blog-excerpt {
    color: #64748b;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.tag {
    background: #f7fafc;
    color: #2d3748;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s;
}

.tag:hover {
    background: #e2e8f0;
    color: #006D77;
}

.read-more {
    color: #00d1b2;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
}

.read-more:hover {
    text-decoration: underline;
}

/* Individual blog post */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
    background: #f7fafc;
    border-radius: 12px;
    padding: 3rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.blog-post-header {
    margin-bottom: 2rem;
    text-align: center;
}

.blog-post-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #006D77;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.featured-image {
    margin: 2rem 0;
}

.featured-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.blog-post-content {
    margin-bottom: 2rem;
}

.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6 {
    color: #1e293b;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.blog-post-content h2 {
    font-size: 1.5rem;
}

.blog-post-content h3 {
    font-size: 1.25rem;
}

.blog-post-content p {
    margin-bottom: 1rem;
    color: #374151;
    line-height: 1.7;
}

.blog-post-content pre {
    background: #f8fafc;
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid #e2e8f0;
}

.blog-post-content code {
    background: #f1f5f9;
    color: #dc2626;
    padding: 0.125rem 0.25rem;
    border-radius: 3px;
    font-size: 0.875rem;
}

.blog-post-content pre code {
    background: none;
    color: inherit;
    padding: 0;
}

.blog-post-content blockquote {
    border-left: 4px solid #006D77;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #2d3748;
}

.blog-post-content ul,
.blog-post-content ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.blog-post-content li {
    margin-bottom: 0.5rem;
}

.blog-post-footer {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #e5e5e5;
}

.back-link {
    color: #006D77;
    text-decoration: none;
    font-weight: 500;
}

.back-link:hover {
    text-decoration: underline;
}

/* Responsive design */
@media (max-width: 768px) {
    /* Pagination responsive */
    .pagination-controls {
        gap: 0.25rem;
    }
    
    .pagination-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
        min-width: 36px;
    }
    
    .pagination-prev,
    .pagination-next {
        padding: 0.4rem 0.8rem;
    }
}

/* Tech Stack Section Styles */
.tech-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.tech-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 1rem; /* Match normal text size (16px) */
    font-weight: 400; /* Normal text weight instead of 600 */
    background-color: transparent;
    color: #2d3748;
    border: 1px solid;
    border-radius: 8px;
    cursor: default;
    transition: all 0.2s ease;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    pointer-events: none;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    height: auto !important;
    min-height: 48px !important; /* Uniform minimum height */
}

.tech-button i {
    color: #2d3748;
    transition: color 0.2s ease;
    flex-shrink: 0 !important;
}

.tech-button span {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
    flex: 1 !important;
    font-weight: 400 !important; /* Normal text weight */
    text-transform: none !important; /* No text transformation */
}

/* Amazon Ecosystem - Yellow border */
.tech-button.amazon-tech {
    border-color: #FFD600;
}

/* Platform Integration - Blue border */
.tech-button.platform-tech {
    border-color: #1565C0;
}

/* Custom Development & Automation - Red border */
.tech-button.development-tech {
    border-color: #E53935;
}

/* Responsive tech stack */
@media (max-width: 768px) {
    .tech-buttons-container {
        gap: 8px;
    }
    
    .tech-button {
        font-size: 0.875rem; /* Slightly smaller on mobile (14px) but still readable */
        padding: 6px 12px;
        gap: 6px;
        min-height: 40px !important; /* Smaller uniform height on mobile */
    }
    
    .tech-button span {
        font-size: 0.875rem; /* Match button font size */
    }
}

/* override for code blocks to ensure proper styling */
.blog-post-content pre.prettyprint,
pre.prettyprint {
    background-color: #f8f9fa !important;
    border: 1px solid #e1e1e8 !important;
    border-radius: 6px !important;
    padding: 1rem !important;
    overflow-x: auto !important;
    margin: 1.5rem 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
}

/* Clients Section Styling - Clean Grid Layout */

/* Custom column sizing for 5 logos */
.client-column.is-one-fifth-desktop {
    flex: none;
    width: 20%; /* 5 logos per row on desktop */
}

.client-logo {
    max-width: 95%; /* Increased from 90% for bigger logos */
    max-height: 160px; /* Increased from 140px for bigger logos */
    width: auto;
    height: auto;
    object-fit: contain; /* Ensures aspect ratio is maintained */
    filter: grayscale(0);
    opacity: 1;
    transition: transform 0.3s ease, filter 0.3s ease; /* Smooth hover effect */
}

.client-logo:hover {
    transform: scale(1.05); /* Slight scale on hover */
    filter: brightness(1.1); /* Slight brightness increase */
}

/* Force vertical centering for client logos */
.columns.is-vcentered {
    align-items: center !important;
}

.columns.is-vcentered .column {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 180px !important; /* Increased for bigger logos */
    padding: 0.9rem; /* DESKTOP PADDING CONTROL: Increase this for more space between logos */
}

/* Responsive adjustments for client logos */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Tablet: 5 logos in one row */
    .client-column.is-one-fifth-desktop {
        width: 20%;
    }
}

@media (max-width: 768px) {
    /* Mobile: 2 logos per row, then 1 in last row */
    .client-column {
        width: 50% !important; /* Override any other width settings */
    }
    
    .client-logo {
        max-width: 90%; /* Increased from 85% for bigger mobile logos */
        max-height: 140px; /* Increased from 120px for bigger mobile logos */
    }
    
    .columns.is-vcentered .column {
        min-height: 160px !important; /* Increased for bigger logos */
        padding: 0.5rem; /* MOBILE PADDING CONTROL: Adjust this for mobile spacing */
    }
}

/* Extra safety for very narrow screens */
@media (max-width: 480px) {
    .client-logo {
        max-width: 85%; /* Increased from 80% for bigger logos on small screens */
        max-height: 120px; /* Increased from 100px */
    }
    
    .columns.is-vcentered .column {
        padding: 0.5rem; /* NARROW SCREEN PADDING: Adjust this for very small screens */
        min-height: 140px !important; /* Increased for bigger logos */
    }
}

/* Footer styles */
footer.footer {
    background-color: #f7fafc; /* matches request */
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    border-top: 1px solid #006D77; /* thin green line at top */
    text-align: left !important; /* force left alignment on all screen sizes */
}

footer.footer * {
    text-align: left !important; /* ensure all footer content stays left aligned */
}

/* Exception: copyright section should remain centered */
footer.footer .has-text-centered,
footer.footer .has-text-centered * {
    text-align: center !important;
}

/* Footer font sizes - content class same as other text */
footer.footer .content {
    font-size: 1rem; /* same as other footer text */
}

footer.footer p:not(.content p) {
    font-size: 1rem; /* normal font size for other paragraphs */
}

/* Footer links styling - using centralized container padding */
.footer-links {
    list-style: none;
    margin: 0;
    padding: 0; /* rely on container padding for consistent width */
}

/* Footer contact icons styling */
.footer .icon-text .icon {
    color: #006D77 !important; /* green color */
    font-size: 1.2rem; /* slightly bigger */
    margin-top: 5px; /* move down slightly for better alignment */
    flex-shrink: 0; /* prevent icon from shrinking */
}

.footer .icon-text .icon i {
    color: #006D77 !important; /* ensure the icon itself is green */
}

/* Ensure icon-text layout stays horizontal when possible */
.footer .icon-text {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
}

.footer .icon-text span:not(.icon) {
    flex: 1 1 auto; /* allow text to grow but not shrink below content */
    min-width: 0; /* allow text to wrap if needed */
}

/* Footer styling - clean and simple */
.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Tablet responsive */
@media (min-width: 769px) and (max-width: 1023px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 1rem; /* Indent links to emphasize heading */
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    transition: color 0.2s ease;
    text-decoration: none;
}

.footer-links a:hover {
    color: #006D77 !important;
}

.footer .icon-text {
    align-items: center;
}

.footer .icon-text a:hover {
    color: #006D77 !important;
}

/* Indent contact section content to emphasize heading */
.footer-column .content {
    padding-left: 1rem;
}

.footer-divider {
    border: 0;
    height: 1px;
    background: #006D77; /* green line in footer */
    margin: 1.5rem 0;
}

/* End of footer styles */