/* Custom CSS for OMCO Labs Site */
/* Color Scheme:
   - Orange #F97316: CTA buttons, highlights, emphasis
   - Charcoal #2F343A: headers, body text, icons
   - Light Blue #9EC5E5: links, secondary buttons, sub-branding
   - Light Grey #E6E6E6: backgrounds, dividers, cards
*/

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
    --color-orange: #F97316;
    --color-charcoal: #2F343A;
    --color-light-blue: #9EC5E5;
    --color-light-grey: #E6E6E6;
    --color-white: #ffffff;
}

/* ==========================================================================
   Base Typography
   ========================================================================== */
body {
    color: var(--color-charcoal);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-charcoal);
}

/* Links - Darker shade of light blue for better contrast on white */
a {
    color: #5A9BC9; /* Darker light blue for readability */
}

a:hover,
a:focus {
    color: var(--color-orange); /* Orange on hover for emphasis */
    text-decoration: underline;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.navbar {
    background-color: var(--color-white) !important;
}

.bg-inverse-custom {
    background-color: var(--color-white) !important;
}

.navbar-brand {
    color: var(--color-charcoal) !important;
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--color-orange) !important;
}

.navbar-nav .nav-link {
    color: var(--color-charcoal) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--color-orange) !important;
    opacity: 1;
}

/* Active state for internal page links */
.navbar-nav .nav-link.active,
.navbar-nav .active > .nav-link {
    color: var(--color-orange) !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-underline-offset: 4px;
}

/* Hover state for all nav links */
.navbar-nav .nav-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-underline-offset: 4px;
}

/* External link icon styling */
.navbar-nav .icon-arrow-right {
    font-size: 0.7em;
    margin-left: 0.25rem;
    opacity: 0.7;
    vertical-align: middle;
}

/* Mobile nav toggle */
.navbar-toggler {
    color: var(--color-charcoal) !important;
}

/* ==========================================================================
   Hero Section (Jumbotron)
   ========================================================================== */
.jumbotron.bg-inverse,
header.jumbotron.bg-inverse {
    background-color: var(--color-charcoal) !important;
    color: var(--color-white) !important;
}

.jumbotron.bg-inverse h1,
.jumbotron.bg-inverse h2,
.jumbotron.bg-inverse .display-3 {
    color: var(--color-white) !important;
}

/* Hero section modular template */
section.jumbotron.bg-inverse {
    background-color: var(--color-charcoal) !important;
    color: var(--color-white) !important;
}

section.jumbotron.bg-inverse h1,
section.jumbotron.bg-inverse h2 {
    color: var(--color-white) !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
/* Primary buttons - Orange */
.btn-primary {
    background-color: var(--color-orange) !important;
    border-color: var(--color-orange) !important;
    color: var(--color-white) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #E8650F !important; /* Darker orange */
    border-color: #E8650F !important;
    color: var(--color-white) !important;
}

/* Secondary buttons - Light blue outline */
.btn-secondary,
.btn-secondary-outline,
.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--color-light-blue) !important;
    color: var(--color-light-blue) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary-outline:hover,
.btn-secondary-outline:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--color-light-blue) !important;
    border-color: var(--color-light-blue) !important;
    color: var(--color-charcoal) !important;
}

/* Hero buttons - white outline on dark background */
.jumbotron.bg-inverse .btn-secondary-outline,
section.jumbotron.bg-inverse .btn-secondary-outline {
    border-color: var(--color-white) !important;
    color: var(--color-white) !important;
}

.jumbotron.bg-inverse .btn-secondary-outline:hover,
.jumbotron.bg-inverse .btn-secondary-outline:focus,
section.jumbotron.bg-inverse .btn-secondary-outline:hover,
section.jumbotron.bg-inverse .btn-secondary-outline:focus {
    background-color: var(--color-white) !important;
    color: var(--color-charcoal) !important;
}

/* Primary CTA button in hero */
.jumbotron.bg-inverse .btn-primary,
section.jumbotron.bg-inverse .btn-primary {
    background-color: var(--color-orange) !important;
    border-color: var(--color-orange) !important;
    color: var(--color-white) !important;
}

.jumbotron.bg-inverse .btn-primary:hover,
section.jumbotron.bg-inverse .btn-primary:hover {
    background-color: #E8650F !important;
    border-color: #E8650F !important;
}

/* ==========================================================================
   Section Backgrounds
   ========================================================================== */
/* Light grey backgrounds for content sections */
.bg-faded,
.section-intro,
.section-text {
    background-color: var(--color-light-grey) !important;
}

/* White background sections */
.section-features,
#brands {
    background-color: var(--color-white) !important;
}

/* Ecosystem section */
#ecosystem {
    background-color: var(--color-light-grey) !important;
    width: 100%;
}

#ecosystem .container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
}

#ecosystem .ecosystem-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

#ecosystem h2 {
    margin-bottom: 1.5rem;
}

#ecosystem p {
    line-height: 1.7;
}

/* ==========================================================================
   Cards (Brand Cards, Feature Cards)
   ========================================================================== */
.card {
    background-color: var(--color-white);
    border-color: var(--color-light-grey);
}

.card-title {
    color: var(--color-charcoal);
}

.card-subtitle {
    color: #6c757d; /* Muted grey for subtitles */
}

.card-text {
    color: var(--color-charcoal);
}

/* Card buttons */
.card .btn-primary {
    background-color: var(--color-orange) !important;
    border-color: var(--color-orange) !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.section-footer.bg-inverse,
footer.bg-inverse {
    background-color: var(--color-charcoal) !important;
    color: var(--color-white) !important;
}

.section-footer h5,
.section-footer h6 {
    color: var(--color-white) !important;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.section-footer a {
    color: var(--color-light-blue) !important;
    transition: color 0.2s ease;
}

.section-footer a:hover,
.section-footer a:focus {
    color: var(--color-white) !important;
    text-decoration: none;
}

.section-footer small {
    color: rgba(255, 255, 255, 0.7);
}

/* Social icons spacing */
.social-icons a {
    display: inline-block;
    margin-right: 1rem;
    font-size: 1.5rem;
    color: var(--color-light-blue) !important;
}

.social-icons a:hover {
    color: var(--color-white) !important;
}

/* ==========================================================================
   Default Page Template (About, Contact, Privacy)
   ========================================================================== */
.default-page {
    padding: 3rem 0;
    min-height: 60vh;
}

.default-page .container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
}

.default-content {
    color: var(--color-charcoal);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.default-content h1 {
    color: var(--color-charcoal);
    margin-bottom: 2rem;
    font-size: 2.5rem;
}

.default-content h2 {
    color: var(--color-charcoal);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.default-content h3 {
    color: var(--color-charcoal);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.default-content p {
    line-height: 1.7;
    margin-bottom: 1rem;
}

.default-content ul,
.default-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.default-content li {
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.default-content a {
    color: #5A9BC9; /* Darker light blue for readability */
}

.default-content a:hover {
    color: var(--color-orange);
}

/* Responsive adjustments for default pages */
@media (max-width: 767px) {
    .default-page {
        padding: 2rem 0;
    }

    .default-page .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .default-content h1 {
        font-size: 2rem;
    }
}

/* ==========================================================================
   Icons
   ========================================================================== */
[class^="icon-"],
[class*=" icon-"] {
    color: var(--color-charcoal);
}

.bg-inverse [class^="icon-"],
.bg-inverse [class*=" icon-"],
.jumbotron.bg-inverse [class^="icon-"],
.jumbotron.bg-inverse [class*=" icon-"] {
    color: var(--color-white);
}

/* ==========================================================================
   Emphasis and Highlights
   ========================================================================== */
strong,
b {
    color: var(--color-charcoal);
}

/* Orange emphasis for special highlights */
.text-primary,
.text-highlight {
    color: var(--color-orange) !important;
}

/* Light blue for sub-branding */
.text-secondary,
.text-info {
    color: var(--color-light-blue) !important;
}

/* ==========================================================================
   Dividers and Borders
   ========================================================================== */
hr {
    border-color: var(--color-light-grey);
}

.card {
    border-color: var(--color-light-grey);
}

/* ==========================================================================
   Form Elements
   ========================================================================== */
.form-control {
    border-color: var(--color-light-grey);
    color: var(--color-charcoal);
}

.form-control:focus {
    border-color: var(--color-light-blue);
    box-shadow: 0 0 0 0.2rem rgba(158, 197, 229, 0.25);
}

/* ==========================================================================
   Dropdown Menus
   ========================================================================== */
.dropdown-menu {
    background-color: var(--color-white);
    border-color: var(--color-light-grey);
}

.dropdown-item {
    color: var(--color-charcoal);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-light-grey);
    color: var(--color-orange);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

/* Tablet and mobile - collapsed navigation */
@media (max-width: 991px) {
    /* Hide expanded nav on tablets, show hamburger instead */
    /* Use ID selector + !important to override landio.css compiled rule:
       @media (min-width: 48em) { #collapsingNavbar { display: block !important } } */
    #collapsingNavbar.navbar-toggleable-custom {
        display: none !important;
        background-color: var(--color-white);
        width: 100%;
        padding: 1rem 0;
    }

    #collapsingNavbar.navbar-toggleable-custom.in,
    #collapsingNavbar.navbar-toggleable-custom.show,
    #collapsingNavbar.navbar-toggleable-custom.collapsing {
        display: block !important;
    }

    .navbar-toggleable-custom .nav-link {
        color: var(--color-charcoal) !important;
        padding: 0.75rem 1rem;
        display: block;
    }

    .navbar-toggleable-custom .nav-link:hover {
        color: var(--color-orange) !important;
    }

    .navbar-toggleable-custom .navbar-nav {
        flex-direction: column;
        width: 100%;
    }

    .navbar-toggleable-custom .nav-item {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--color-light-grey);
    }

    .navbar-toggleable-custom .nav-item:last-child {
        border-bottom: none;
    }

    /* Show hamburger on tablets */
    .hidden-lg-up {
        display: inline-block !important;
    }

    /* Hide elements meant for desktop only */
    .hidden-md-down {
        display: none !important;
    }
}

/* Desktop - expanded navigation */
@media (min-width: 992px) {
    .navbar-toggleable-custom {
        display: block !important;
        background-color: transparent;
    }

    .hidden-lg-up {
        display: none !important;
    }
}

/* ==========================================================================
   Brands Grid (Product Cards)
   ========================================================================== */
.brands-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.brands-grid .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.brands-grid .card-block {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.5rem;
}

.brands-grid .card-text {
    flex-grow: 1;
}

.brands-grid .btn {
    margin-top: auto;
    align-self: center;
}

/* Ensure equal height cards */
.h-100 {
    height: 100% !important;
}

/* Margin bottom utility */
.mb-4 {
    margin-bottom: 1.5rem !important;
}

/* Tablet adjustments - 2 columns with centered 3rd card */
@media (min-width: 576px) and (max-width: 991px) {
    .brands-grid > div {
        margin-bottom: 1.5rem;
    }

    /* Center the third card when it's alone on its row */
    .brands-grid > div:last-child:nth-child(odd) {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Desktop - 3 columns */
@media (min-width: 992px) {
    .brands-grid {
        justify-content: space-between;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
/* Orange accent text */
.accent-orange {
    color: var(--color-orange) !important;
}

/* Charcoal text on light backgrounds */
.text-dark {
    color: var(--color-charcoal) !important;
}