/* Gekkon Hygiena brand layer — MUST be the last stylesheet in inc_header.jsp.
   The theme (style/demo2) and custom.min.css both hardcode colours, several with
   !important, so this file wins by load order rather than by specificity.

   Palette is taken from gekkonhygiene.com (assets/css/styles.css):
     --brand-primary       #4BC7D0  turquoise — the identity colour: header, accents
     --brand-primary-dark  #2FA8B2  hover tone
     --brand-primary-light #C4FBFF  tints / soft backgrounds
     --brand-ink           #171717  dark from the logo
     --brand-red           #DC2626  CTA colour (.btn--red on the brand site)
     --brand-red-dark      #B91C1C  CTA hover

   Two contrast rules follow from that palette:
   - White text on #4BC7D0 measures 2.0:1. The brand site accepts that in its own
     header, so the header keeps white text + the white logo; everywhere else a
     turquoise fill carries ink text instead.
   - Turquoise AS text on white is also 2.0:1, so links and highlights use
     #1E7A82 — a darkened tint of the same hue (5.1:1 on white). */

:root {
    --brand-primary: #4BC7D0;
    --brand-primary-dark: #2FA8B2;
    --brand-primary-light: #C4FBFF;
    --brand-ink: #171717;
    --brand-text: #1E7A82;
    --brand-red: #DC2626;
    --brand-red-dark: #B91C1C;
}

/* ============================================================
   HEADER / TOP MENU — the brand colour
   ============================================================ */

/* The theme gives .header-bottom (the nav strip) its own white background, which
   would leave the white nav links invisible. On gekkonhygiene.com the nav is part
   of one continuous turquoise header, so all three rows carry the brand colour. */
.header,
.header-bottom,
.sticky-header.fixed {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.header-top,
.header-bottom {
    border-bottom-color: rgba(255, 255, 255, 0.25) !important;
}

.header-bottom .header-right,
.header-bottom .header-right a,
.header-bottom .header-right i {
    color: #fff;
}

.header .top-message,
.header-dropdown a,
.header-menu ul li a,
.header-contact h6,
.header-contact h6 a,
.social-icons a,
.header-icon,
.header-icon i,
.header .header-left a strong {
    color: #fff;
}

.header-dropdown a:hover,
.header-contact h6 a:hover,
.header-icon:hover,
.header-icon:hover i {
    color: var(--brand-ink);
}

/* The header dropdown panel is a white card — keep its links dark. */
.header .header-menu {
    background-color: #fff;
}

.header .header-menu ul li a {
    color: var(--brand-ink);
}

.header-logo {
    max-height: 56px;
}

/* Main nav: white on turquoise, ink on hover/active (as on gekkonhygiene.com). */
.main-nav .menu > li > a {
    color: #fff;
}

.main-nav .menu > li.active > a,
.main-nav .menu > li.show > a,
.main-nav .menu > li:hover > a,
.main-nav .menu > li > a:hover,
.main-nav .menu > li.float-right > a:hover {
    color: var(--brand-ink);
    border-top-color: var(--brand-ink) !important;
}

/* Megamenu / submenu panels are white cards — dark text inside. */
.main-nav .menu .megamenu,
.main-nav .menu ul {
    color: var(--brand-ink);
}

.main-nav .menu .megamenu a,
.main-nav .menu ul li a {
    color: var(--brand-ink);
}

.main-nav .menu .megamenu a:hover,
.main-nav .menu ul li a:hover {
    color: var(--brand-text);
}

/* Cart / wishlist counters sit on turquoise — invert them to ink. */
.header .badge-circle,
.header .cart-count {
    background-color: var(--brand-ink);
    color: #fff;
}

/* ============================================================
   BUTTONS — red, as on gekkonhygiene.com (.btn--red)
   ============================================================ */

.btn-primary,
a.btn-primary,
.btn-primary.text-white {
    background-color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
a.btn-primary:hover,
a.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle,
.add-cart-box .btn-actions .btn-primary:focus,
.add-cart-box .btn-actions .btn-primary:active,
.add-cart-box .btn-actions .btn-primary:active:focus {
    background-color: var(--brand-red-dark) !important;
    border-color: var(--brand-red-dark) !important;
    color: #fff !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    color: #fff !important;
    opacity: 0.55;
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.3);
}

/* Outline variant of the CTA. */
.btn-outline.btn-primary,
.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--brand-red) !important;
    color: var(--brand-red) !important;
}

.btn-outline.btn-primary:hover,
.btn-outline-primary:hover {
    background-color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    color: #fff !important;
}

/* ============================================================
   ACCENTS — turquoise everywhere the theme highlights something
   ============================================================ */

/* Turquoise as text fails contrast on white; use the darkened tint. */
a,
.product_name_href,
.product-default a,
.breadcrumb-item a,
.breadcrumb-item.active {
    color: var(--brand-text);
}

a:hover,
a:focus,
.breadcrumb-item a:hover {
    color: var(--brand-primary-dark);
}

.text-primary {
    color: var(--brand-text) !important;
}

/* Turquoise fills carry ink text, never white. */
.bg-primary,
.badge-primary,
.bg-primary.text-white,
.footer-ribbon.bg-primary,
.footer-ribbon.bg-primary.text-white {
    background-color: var(--brand-primary) !important;
    color: var(--brand-ink) !important;
}

/* Section titles get the brand underline the theme draws in primary. */
.section-title,
.side-menu-title {
    border-color: var(--brand-primary);
}

.side-menu-title {
    background-color: var(--brand-primary);
    color: var(--brand-ink);
}