/* Modern CSS for SoluEngine Ltd. - Based on Simple Design System */

html { color-scheme: light; }

/* Modern CSS for SoluEngine Ltd. - Based on Simple Design System */

/* ===== CSS CUSTOM PROPERTIES (DESIGN TOKENS) ===== */
:root {
    /* Colors - Based on Simple Design System */
    --color-white: #FFFFFF;
    --color-background: #F5F5F5;
    --color-text-primary: #1E1E1E;
    --color-text-secondary: #757575;
    --color-text-tertiary: #B3B3B3;
    --color-brand-primary: #2C2C2C;
    --color-border: #D9D9D9;
    --color-border-subtle: rgba(0, 0, 0, 0.1);
    
    /* Typography Scale - Following Simple Design System */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-hero: 72px;
    --font-size-hero-mobile: 48px;
    --font-size-heading: 24px;
    --font-size-body: 16px;
    --font-size-small: 14px;
    --line-height-tight: 1.2;
    --line-height-base: 1.4;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-hero: -0.03em;
    
    /* Spacing Scale - 8px Grid System */
    --space-100: 8px;
    --space-200: 12px;
    --space-300: 16px;
    --space-400: 24px;
    --space-600: 32px;
    --space-800: 48px;
    --space-1200: 64px;
    --space-1600: 96px;
    --space-2400: 160px;
    
    /* Border Radius */
    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 16px;
    
    /* Shadows - Following Simple Design System */
    --shadow-100: 0px 1px 4px 0px rgba(12, 12, 13, 0.05), 0px 1px 4px 0px rgba(12, 12, 13, 0.1);
    --shadow-200: 0px 4px 4px -1px rgba(12, 12, 13, 0.05), 0px 4px 4px -1px rgba(12, 12, 13, 0.1);
    --shadow-300: 0px 4px 4px -4px rgba(12, 12, 13, 0.05), 0px 16px 32px -4px rgba(12, 12, 13, 0.1);
    
    /* Layout */
    --max-width-content: 1200px;
    --max-width-card: 440px;
}

/* ===== RESET & BASE STYLES ===== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-background) 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== LAYOUT COMPONENTS ===== */
.page-container {
    min-height: 100vh;
    /* background moved to body */
    padding: 0 var(--space-400);
}

/* ===== TWO-COLUMN LAYOUT ===== */
.two-column-layout {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    padding: var(--space-400) 0; /* Remove horizontal padding */
    max-width: var(--max-width-content); /* Use defined max-width */
    margin: 0 auto; /* Center the layout */
    justify-content: center; /* Center columns horizontally */
}

/* Robust viewport height support */
@supports (height: 100dvh) {
  .two-column-layout { min-height: 100dvh; }
}
@supports (height: 100svh) {
  .two-column-layout { min-height: 100svh; }
}

.left-column {
    flex: 1; /* Take equal space */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center vertically */
    padding: var(--space-400) 0;
    gap: var(--space-600);
    text-align: center;
}

.right-column {
    flex: 1; /* Take equal space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    gap: var(--space-400);
    padding: var(--space-400) 0;
    align-items: flex-start; /* Align to left edge */
}


.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.company-logo {
    width: clamp(240px, 26vw, 320px);
    height: auto;
    border-radius: var(--radius-medium);
    border: 3px solid var(--color-border-subtle);
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-300);
    align-items: center;
}

.hero-title {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-hero);
    margin: 0;
    color: var(--color-text-primary);
}

.hero-subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: var(--line-height-tight);
    margin: 0;
    color: var(--color-text-secondary);
    max-width: 560px;
}

/* General Section Styling */
.section-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: var(--space-300);
    padding-left: 20px;
}

.section-title {
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 700;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin: 0;
    color: var(--color-text-primary);
}

.card-body {
    padding: var(--space-300);
}

.card-text {
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    margin: 0;
    color: var(--color-text-secondary);
}

.lead {
    font-size: 18px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

/* Remove specific card styling for About Us */
.about-section .card-body {
    position: relative;
    padding: 20px;
}

.about-section .card-body::before {
    content: none; /* Remove the decorative line */
}

/* ===== CONTACT COMPONENTS ===== */
.contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-400);
    padding-left: 0; /* Ensure alignment */
}

.contact-item {
    display: flex;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: var(--space-400);
    padding: 20px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-100);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
    width: 100%;
    max-width: 400px; /* Limit width */
}

.contact-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-200);
    background: var(--color-background);
    border-color: var(--color-border);
}

.contact-link:focus {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

.contact-avatar {
    width: 44px; height: 44px;
    border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #EAF0FF; /* soft tint for icon plate */
    border: 1px solid var(--color-border);
}

.icon-20 {
    width: 20px;
    height: 20px;
}

.contact-platform {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.contact-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.contact-subtitle {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* remove no-longer-used styles */
.contact-action, .contact-chevron { display: none; }
.contact-value { background: transparent; border: 0; padding: 0; border-radius: 0; }

.email-link:hover .contact-value {
    color: var(--color-brand-primary);
}

.social-link:hover .contact-value {
    color: var(--color-brand-primary);
}

/* ===== RESPONSIVE DESIGN ===== */

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet and Mobile Styles */
@media (max-width: 768px) {
    .two-column-layout {
        flex-direction: column;
        padding: var(--space-400) 0; /* Adjust padding for smaller screens */
    }

    .left-column {
        flex: none;
        width: 100%;
        padding: var(--space-400) 0;
        margin-bottom: var(--space-400);
    }

    .right-column {
        flex: none;
        width: 100%;
        padding: 0;
        align-items: center;
        text-align: center;
    }

    .right-column .contact-list {
        align-items: stretch;      /* cards take full width */
        width: 100%;
    }

    .right-column .contact-link {
        max-width: 100%;
        width: 100%;
        justify-content: flex-start; /* left-align card content */
        text-align: left; /* ensure inner text aligns left */
    }

    .company-logo {
        width: 180px;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-subtitle {
        font-size: var(--font-size-body);
    }

    .mobile-constrained {
        width: 100%;
        max-width: var(--max-width-card);
        margin-left: auto;
        margin-right: auto;
    }

    .about-section .lead {
        text-align: left;
    }

    /* left-align text inside Contact cards */
    .right-column .contact-text {
        align-items: flex-start;
    }
}

/* Mobile Specific Adjustments */
@media (max-width: 480px) {
    .two-column-layout {
        padding: var(--space-300);   /* balanced side padding */
    }

    .left-column,
    .right-column {
        padding: var(--space-300) 0; /* even vertical spacing */
    }

    .right-column {
        gap: var(--space-300);
        max-width: 100%;
        align-items: center;
    }

    .contact-link {
        padding: var(--space-300);
        max-width: 100%;
        width: 100%;
    }
}

/* Desktop Height-based Compact Styles */
@media (min-width: 1024px) and (max-height: 840px) {
    .left-column {
        flex: 0 0 250px; /* Slightly smaller fixed width */
    }
    .company-logo { max-width: 140px; }
    .hero-title { font-size: clamp(36px, 4.8vw, 56px); }
    .hero-subtitle { font-size: 16px; }
    .right-column { gap: var(--space-300); }
}

/* ===== ACCESSIBILITY & INTERACTION STATES ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== FOCUS STYLES ===== */
*:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

/* ===== PRINT STYLES ===== */
@media print {
    .page-container {
        background: white;
        padding: 0;
    }
    
    .hero-section,
    .content-grid {
        break-inside: avoid;
    }
    
    .contact-link {
        color: var(--color-text-primary) !important;
        text-decoration: underline;
    }
}