/* =============================================
   Pearl IT Systems — Site Styles
   ============================================= */

/* --- Default theme (Ocean Blue) applied via :root, overridden by [data-theme] --- */
:root {
    --pearl-primary: #0f4c81;
    --pearl-secondary: #1a73b5;
    --pearl-accent: #0ea5e9;
    --pearl-dark: #0b3a5d;
    --pearl-light: #f0f7ff;
}

/* --- Theme palettes (all WCAG AA tested against white text) --- */
[data-theme="ocean"] {
    --pearl-primary: #0f4c81;
    --pearl-secondary: #1a73b5;
    --pearl-accent: #0ea5e9;
    --pearl-dark: #0b3a5d;
    --pearl-light: #f0f7ff;
}

[data-theme="emerald"] {
    --pearl-primary: #065f46;
    --pearl-secondary: #059669;
    --pearl-accent: #34d399;
    --pearl-dark: #064e3b;
    --pearl-light: #ecfdf5;
}

[data-theme="amethyst"] {
    --pearl-primary: #5b21b6;
    --pearl-secondary: #7c3aed;
    --pearl-accent: #a78bfa;
    --pearl-dark: #4c1d95;
    --pearl-light: #f5f3ff;
}

[data-theme="slate"] {
    --pearl-primary: #334155;
    --pearl-secondary: #475569;
    --pearl-accent: #94a3b8;
    --pearl-dark: #1e293b;
    --pearl-light: #f1f5f9;
}

[data-theme="ruby"] {
    --pearl-primary: #9f1239;
    --pearl-secondary: #be123c;
    --pearl-accent: #fb7185;
    --pearl-dark: #881337;
    --pearl-light: #fff1f2;
}

[data-theme="teal"] {
    --pearl-primary: #115e59;
    --pearl-secondary: #0d9488;
    --pearl-accent: #5eead4;
    --pearl-dark: #134e4a;
    --pearl-light: #f0fdfa;
}


html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #333;
}

/* --- Utility --- */
.text-pearl {
    color: var(--pearl-primary) !important;
}

.bg-pearl {
    background-color: var(--pearl-primary) !important;
}

.btn-pearl {
    background-color: var(--pearl-primary);
    color: #fff;
    border: none;
}

.btn-pearl:hover {
    background-color: var(--pearl-dark);
    color: #fff;
}

.ls-wide {
    letter-spacing: 0.08em;
}

/* --- Navbar --- */
.brand-logo {
    height: 36px;
    width: auto;
}

.brand-logo-sm {
    height: 24px;
    width: auto;
    vertical-align: middle;
}

/* Responsive tweaks for mobile to ensure logo displays and nav doesn't hide it */
.navbar-brand .brand-logo {
    display: inline-block;
    max-height: 36px;
}

@media (max-width: 575.98px) {
    .navbar-brand .brand-logo {
        max-height: 28px;
    }
    /* Keep the company name visible on small screens but prevent overflow.
       Use ellipsis and reduce font-size so it fits beside the logo. */
    .navbar-brand .brand-text {
        display: inline-block;
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100vw - 96px); /* leave room for toggler and logo */
        vertical-align: middle;
    }
}

.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500;
    transition: color 0.2s;
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
    color: #fff !important;
}

/* --- Hero --- */
.hero-section {
    background: linear-gradient(135deg, var(--pearl-primary) 0%, var(--pearl-secondary) 50%, var(--pearl-accent) 100%);
    padding: 6rem 0;
    min-height: 500px;
}

@media (max-width: 767.98px) {
    .hero-section {
        padding: 4rem 0;
        min-height: auto;
    }

    .hero-section h1 {
        font-size: 2rem;
    }
}

/* --- Service Cards --- */
.service-card {
    border-radius: 1rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1) !important;
}

/* --- About Visual --- */
.about-visual {
    border: 2px solid var(--pearl-light);
}

/* --- CTA Section --- */
.cta-section {
    background: linear-gradient(135deg, var(--pearl-dark) 0%, var(--pearl-primary) 100%);
}

/* --- Inner Page Hero --- */
.page-hero {
    background: linear-gradient(135deg, var(--pearl-primary) 0%, var(--pearl-secondary) 100%);
    padding: 4.5rem 0;
    min-height: 280px;
}

/* --- Outline Button Variant --- */
.btn-outline-pearl {
    color: var(--pearl-primary);
    border: 2px solid var(--pearl-primary);
    background-color: transparent;
}

.btn-outline-pearl:hover {
    background-color: var(--pearl-primary);
    color: #fff;
}

/* --- Footer --- */
.footer-link:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* --- Focus styles --- */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--pearl-accent);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}