/* Light mode (default) */
:root {
    --navbar-bg: #F1663A;
    --navbar-text: white;
    --navbar-hover: #f1b73a;
    --body-bg: white;
    --body-text: #363636;
    --heading-color: #363636;
    --box-bg: white;
    --menu-label: #485fc7;
    --menu-link: #222222;
    --menu-hover-bg: #eff1f5;
    --menu-hover-text: #485fc7;
    --footer-bg: #f5f5f5;
    --footer-text: #4a4a4a;
    --card: #f5f5f5;
}

/* Dark mode overrides */
body.dark-mode {
    --navbar-bg: #38160c;
    --navbar-text: #f5f5f5;
    --navbar-hover: #333;
    --body-bg: #000;
    --body-text: #f5f5f5;
    --heading-color: #f5f5f5;
    --box-bg: #000;
    --menu-label: #99aaff;
    --menu-link: #ccc;
    --menu-hover-bg: #3d3d3d;
    --menu-hover-text: #fff;
    --footer-bg: #1a1a1a;
    --footer-text: #ccc;
    --card: #1a1a1a;
}

/* Base styles using variables */
html, html, body {
    min-height: 100vh;
    background-color: var(--body-bg) !important;
    color: var(--body-text) !important;
  }

h1, h2, h3, h4, .title {
    color: var(--heading-color) !important;
}

strong, .subtitle {
    color: var(--heading-color) !important;
}

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

.navbar-item, .navbar-link, .navbar-menu a {
    color: var(--navbar-text) !important;
}

.navbar-menu {
    background-color: var(--navbar-bg) !important;
}

.navbar-menu a:hover {
    background-color: var(--navbar-hover) !important;
}

.navbar-start {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.navbar-start .navbar-item {
    display: flex;
    align-items: center;
}

.box {
    background-color: var(--box-bg) !important;
    color: var(--body-text) !important;
}

.card {
    background-color: var(--card) !important;
}

.menu-label {
    color: var(--menu-label) !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.menu-list a {
    background-color: var(--box-bg) !important;
    color: var(--menu-link) !important;
}

.menu-list .menu-list a:hover {
    background-color: var(--menu-hover-bg) !important;
    color: var(--menu-hover-text) !important;
}

.footer {
    background-color: var(--footer-bg) !important;
    color: var(--footer-text) !important;
}

.navbar-dropdown {
    background-color: var(--navbar-bg) !important;
}

/* Custom styles for product grid */
.unas-products .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.unas-products .card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}