/* eKitwi Custom Styles */

/* Color Palette */
:root {
    --primary-color: #97B4DE;
    --secondary-color: #2A2829;
    --accent-color: #97B4DE;
    --text-dark: #2A2829;
    --text-light: #F0EBE5;
    --background-light: #F0EBE5;
    --background-dark: #2A2829;
    --divs-color: #DCD0BE;
    --title-color: #DCD0BE;
}

/* Mobile First Styles */

/* 1. Mobile (Default - max 767px) */
/* Adjust containers for small screens */
.ui.container {
    width: 95% !important;
    margin-left: 2.5% !important;
    margin-right: 2.5% !important;
}

/* Make grid stack by default on mobile */
.ui.grid > .column, .ui.grid > .row > .column {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Hide desktop-only navigation items */
.desktop-only {
    display: none !important;
}

/* Mobile-only bits */
.mobile-only {
    display: block !important;
}

/* Adjust text sizes for small screens */
h1 { font-size: 1.8rem !important; }
h2 { font-size: 1.5rem !important; }
body { font-size: 14px; }

/* 2. Tablet (min 768px) */
@media only screen and (min-width: 768px) {
    .ui.container {
        width: 723px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    h1 { font-size: 2.2rem !important; }
    h2 { font-size: 1.8rem !important; }
    body { font-size: 15px; }
    
    .desktop-only {
        display: block !important;
    }
    .mobile-only {
        display: none !important;
    }
}

/* 3. Computer / Desktop (min 992px) */
@media only screen and (min-width: 992px) {
    .ui.container {
        width: 933px !important;
    }
    h1 { font-size: 2.5rem !important; }
    body { font-size: 16px; }
}

/* 4. Large Screens (min 1200px) */
@media only screen and (min-width: 1200px) {
    .ui.container {
        width: 1127px !important;
    }
}

/* Global Styles */
body {
    font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    color: var(--text-dark);
    background-color: var(--background-light);
}

/* Ensure dark text on light backgrounds */
.ui.segment,
.ui.segments .segment {
    color: var(--text-dark);
}

.ui.message {
    color: var(--text-dark);
}

/* Brand Name Styling */
.brand-name {
    font-weight: 700;
    font-size: 1.8em;
    color: var(--title-color);
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.brand-logo {
    height: 1.2em;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

/* Navigation */
.navbar {
    border-radius: 0 !important;
    border: none !important;
    margin-bottom: 0 !important;
    background-color: white !important;
}

.ui.menu {
    background-color: white;
}

.ui.menu .item {
    color: var(--text-dark);
}

.ui.menu .item:hover {
    background-color: rgba(220, 208, 190, 0.15) !important;
}

/* Dashboard Navigation - Dark Background */
.ui.inverted.menu.navbar {
    background-color: var(--background-dark) !important;
}

.ui.inverted.menu .item {
    color: var(--text-light) !important;
}

.ui.inverted.menu .item:hover {
    background-color: rgba(151, 180, 222, 0.2) !important;
}

.ui.inverted.menu .active.item {
    background-color: rgba(151, 180, 222, 0.3) !important;
}

.ui.inverted.menu .brand-name {
    color: var(--title-color) !important;
}

/* Dashboard Tab Navigation */
.masthead .ui.secondary.pointing.menu {
    border-bottom-color: rgba(240, 235, 229, 0.3);
}

.masthead .ui.secondary.pointing.menu .item {
    color: var(--text-light);
    border-color: transparent;
}

.masthead .ui.secondary.pointing.menu .item:hover {
    background-color: rgba(151, 180, 222, 0.15);
    color: var(--text-light);
}

.masthead .ui.secondary.pointing.menu .active.item {
    border-color: var(--primary-color);
    color: var(--text-light);
}

/* Hero Section (Homepage) */
.masthead {
    background: var(--background-dark);
    padding: 4em 0 6em !important;
    margin-bottom: 0 !important;
}

.hero-content {
    padding: 4em 0;
}

.hero-title {
    font-size: 4em !important;
    margin-bottom: 0.5em !important;
    color: var(--text-light) !important;
}

.hero-description {
    font-size: 1.4em;
    margin: 2em 0;
    line-height: 1.6;
    color: var(--text-light) !important;
}

/* Feature Cards */
.feature-card {
    width: 100% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

.feature-card .header {
    color: var(--primary-color) !important;
    margin-bottom: 0.5em !important;
}

/* Stats Section */
.stats-section {
    background-color: var(--background-light);
    padding: 3em 0 !important;
    color: var(--text-dark);
}

.ui.statistic > .value {
    color: var(--primary-color) !important;
}

/* CTA Section */
.cta-section {
    background: var(--divs-color);
    padding: 4em 0 !important;
    color: var(--text-dark);
}

.cta-text {
    font-size: 1.2em;
    margin: 1.5em 0;
    color: var(--text-dark);
}

/* Page Header (for all pages except homepage) */
.page-header {
    background: var(--background-dark);
    color: var(--text-light);
    padding: 3em 0 !important;
    margin-bottom: 0 !important;
}

.page-header .header {
    color: var(--text-light) !important;
    font-size: 2.5em !important;
}

.page-header .sub.header {
    color: var(--text-light) !important;
    opacity: 0.85;
    font-size: 1.2em !important;
    margin-top: 0.5em;
}

/* Pricing Page Styles */
.billing-toggle {
    margin: 2em 0 !important;
}

.billing-toggle .button {
    padding: 1em 2em !important;
}

.pricing-cards {
    margin-top: 3em !important;
}

.pricing-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
}

.pricing-card.featured {
    border: 2px solid var(--primary-color) !important;
    box-shadow: 0 8px 24px rgba(33, 133, 208, 0.2) !important;
}

.price-header {
    margin: 1.5em 0 !important;
    text-align: center;
}

.price-header .price {
    font-size: 3em !important;
    color: var(--primary-color) !important;
    font-weight: 700;
}

.price-header .period {
    font-size: 1.2em;
    color: var(--text-dark);
    opacity: 0.7;
}

.features-list {
    margin: 2em 0 !important;
    text-align: left !important;
}

.features-list .item {
    padding: 0.5em 0 !important;
}

.disabled-feature {
    color: var(--text-light) !important;
    text-decoration: line-through;
}

.faq-section {
    background-color: var(--background-light);
    padding: 3em 0 !important;
    color: var(--text-dark);
}

.ui.accordion {
    margin-top: 2em;
}

/* Developer Page Styles */
.ui.steps {
    margin: 2em 0;
}

.ui.segment pre {
    background-color: var(--background-dark);
    color: var(--text-light);
    padding: 1.5em;
    border-radius: 6px;
    overflow-x: auto;
}

/* ==============================
   Panel (generic dashboard hub)
   ============================== */

.panel-body {
    background-color: var(--background-light);
}

.panel-topbar {
    border-radius: 0 !important;
    border: none !important;
}

.panel-topbar .item,
.panel-topbar .header.item {
    color: var(--text-light) !important;
}

.panel-content {
    padding-top: 7.25em;
    padding-bottom: 3em;
}

.panel-sidebar {
    background: var(--background-dark) !important;
}

.panel-sidebar .item,
.panel-sidebar .header {
    color: var(--text-light) !important;
}

.panel-brand .header {
    margin-bottom: 0.5em;
}

.panel-hero {
    margin-top: 1.25em;
}

.panel-product-card {
}

.panel-product-card .header i.icon {
    color: var(--primary-color) !important;
}

.ui.segment pre code {
    font-family: 'Courier New', monospace;
    font-size: 0.95em;
    line-height: 1.6;
}

.developer-tools {
    background-color: var(--background-light);
    color: var(--text-dark);
}

/* CV logos (Developer page) */
.cv-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 0.5em;
    border-radius: 3px;
}

.cv-logo-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
}

.cv-logo-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35em 0.5em;
    border: 1px solid var(--divs-color);
    border-radius: 6px;
    background: var(--background-light);
}

.cv-logo-tile--dark {
    background: var(--background-dark);
}

.cv-logo-tile .cv-logo {
    margin-right: 0;
    height: 28px;
    width: auto;
    max-width: 120px;
}

/* Login Page Styles */
.login-page {
    background: var(--background-dark);
    min-height: 100vh;
}

.login-container {
    min-height: calc(100vh - 500px);
    padding: 2em 0;
}

.login-container .column {
    max-width: 500px;
}

.login-container .header {
    margin-bottom: 1.5em;
    color: var(--text-light) !important;
}

.login-container .header .brand-name {
    color: var(--title-color) !important;
}

.login-container .sub.header {
    color: var(--text-light) !important;
    opacity: 0.9;
}

.login-container .ui.segment {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.social-login {
    padding: 1em !important;
    border: none !important;
    box-shadow: none !important;
}

.social-login .button {
    margin: 0.5em 0 !important;
    background: white !important;
    border: 1px solid rgba(34, 36, 38, 0.15) !important;
}

.social-login .button:hover {
    background: #f8f8f8 !important;
}

.forgot-password {
    color: var(--primary-color);
    font-weight: 600;
}

.login-features {
    background-color: white;
    padding: 3em 0 !important;
    color: var(--text-dark);
}

.login-features .icon {
    color: var(--primary-color);
    margin-bottom: 0.5em;
}

/* Footer Styles */
.footer.segment {
    padding: 3em 0 2em !important;
    margin-top: 0 !important;
    background-color: white;
    color: var(--text-dark);
}

/* Responsive Adjustments */
@media only screen and (max-width: 767px) {
    .hero-title {
        font-size: 2.5em !important;
    }
    
    .hero-description {
        font-size: 1.1em;
    }
    
    .page-header .header {
        font-size: 2em !important;
    }
    
    .price-header .price {
        font-size: 2.5em !important;
    }
    
    .ui.cards > .card {
        margin-bottom: 1em;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ui.card {
    background-color: white;
    border: 1px solid var(--divs-color);
    animation: fadeIn 0.6s ease-out;
    color: var(--text-dark);
}

/* Utility Classes */
.text-center {
    text-align: center !important;
}

.mt-1 { margin-top: 1em !important; }
.mt-2 { margin-top: 2em !important; }
.mt-3 { margin-top: 3em !important; }

.mb-1 { margin-bottom: 1em !important; }
.mb-2 { margin-bottom: 2em !important; }
.mb-3 { margin-bottom: 3em !important; }

.pt-1 { padding-top: 1em !important; }
.pt-2 { padding-top: 2em !important; }
.pt-3 { padding-top: 3em !important; }

.pb-1 { padding-bottom: 1em !important; }
.pb-2 { padding-bottom: 2em !important; }
.pb-3 { padding-bottom: 3em !important; }