/**
 * Teal Color Scheme
 * Only colour-related properties. Base theme handles spacing, sizing, positioning.
 *
 * TOKEN CONTRACT (see readme.txt / css/accessibility.css section 10):
 *   --bs-primary  the true brand colour. Borders, icons, focus rings, subtle
 *                 tints, outline buttons — all non-text (3:1) surfaces.
 *   --brand-fill  solid fills that carry WHITE text: the header navbar
 *                 (.bg-primary), the promotional banner, .btn-primary, badges,
 *                 gradient starts. Must be >= 4.5:1 under white.
 *   --brand-text  small brand-coloured TEXT: links, footer headings, primary
 *                 menu, gradient end stops. Must be >= 4.5:1 on white AND on
 *                 the #fff8ef cream surfaces.
 *
 *   White on #00b6b4 is only 2.51:1, so the solid-fill and text tokens are deeper.
 *   The raw #00b6b4 stays on --bs-primary for borders, icons and focus rings.
 *
 * The token block MUST use the selector list `:root, [data-bs-theme=light]`.
 * style.css declares the Bootstrap brand vars on that same list, and header.php
 * sets data-bs-theme="light" on BOTH <html> and <body>. A bare `:root` block
 * only reaches <html>; <body> then re-matches [data-bs-theme=light] from
 * accessibility.css and overwrites it for the entire subtree. Matching the list
 * makes this scheme win on <body> and inside every nested data-bs-theme="light"
 * container (e.g. the header search offcanvas).
 *
 * There are deliberately NO element-shape selectors for the navbar here. It is
 * painted by accessibility.css's `.bg-primary { background-color: var(--brand-fill) }`,
 * so it cannot break again when the header markup changes. (The old
 * `nav.navbar.navbar-expand-lg.bg-primary.clearfix` rule silently stopped
 * matching when the navbar moved to navbar-expand-xl.)
 */

:root,
[data-bs-theme=light] {
    --bs-primary: #00b6b4;
    --bs-primary-rgb: 0, 182, 180;
    --bs-primary-dark: #00706f;
    --bs-primary-text-emphasis: #00706f;
    --bs-primary-bg-subtle: #d9f4f4;
    --bs-primary-border-subtle: #99e2e1;

    /* AA fill / text split — see the contract above. */
    --brand-fill: #008381;   /* white on it = 4.60:1 */
    --brand-text: #007978;   /* 5.24:1 on white, 4.97:1 on #fff8ef cream */

    /* Links are small text: never point these at the raw brand colour. */
    --bs-link-color: var(--brand-text);
    --bs-link-hover-color: var(--bs-primary-dark);

    --bs-accordion-active-bg: var(--brand-fill);
    --bs-accordion-border-color: var(--bs-primary);
    --bs-progress-bar-bg: var(--bs-primary);
    --bs-list-group-active-bg: var(--brand-fill);
    --bs-list-group-active-border-color: var(--brand-fill);

    /* theme-polish.css loads AFTER this file and falls back to Bootstrap red
       for these two tints; re-declare them in this scheme's hue. */
    --ui-primary-soft: rgba(0, 182, 180, .08) !important;
    --ui-primary-tint: rgba(0, 182, 180, .15) !important;
}

/* Notice Text */
.notice-text h4 {
    color: var(--brand-text);
}

/* Site Notice & Black Backgrounds */
.site-notice.text-bg-black,
.has-black-background-color,
.text-bg-black {
    background-color: var(--brand-fill) !important;
}

/* Footer Social Icons — icons are non-text (3:1), so the raw brand colour. */
.footer .fa-brands,
.footer .fab {
    color: var(--bs-primary) !important;
}

.footer a.phone {
    color: var(--brand-text) !important;
}

/* Accordion */
.accordion-button:not(.collapsed) {
    background-color: var(--brand-fill) !important;
}

/* Primary Text Color */
.text-primary,
.has-orange-color {
    color: var(--brand-text) !important;
}

/* Primary Buttons — white label, so the AA fill rather than the raw brand. */
.btn-primary,
.button.wp-element-button,
.woocommerce-MyAccount-content .button {
    --bs-btn-bg: var(--brand-fill);
    --bs-btn-border-color: var(--brand-fill);
    --bs-btn-hover-bg: var(--bs-primary-dark);
    --bs-btn-hover-border-color: var(--bs-primary-dark);
    --bs-btn-active-bg: var(--bs-primary-dark);
    --bs-btn-active-border-color: var(--bs-primary-dark);
    --bs-btn-disabled-bg: var(--brand-fill);
    --bs-btn-disabled-border-color: var(--brand-fill);
}

/* Outline Buttons — resting label is text, the hover state is a white-on-fill. */
.btn-outline-primary {
    --bs-btn-color: var(--brand-text);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--brand-fill);
    --bs-btn-hover-border-color: var(--brand-fill);
    --bs-btn-active-bg: var(--brand-fill);
    --bs-btn-active-border-color: var(--brand-fill);
    --bs-btn-disabled-color: var(--brand-text);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* Card CTA pill — brand-matched. (blue/bright-blue/dark used to hardcode an
   orange #d35421 here, which was the brand colour leaking into other schemes.) */
a.btn.btn-sm.btn-outline-white.stretched-link.text-uppercase {
    background-color: var(--brand-fill);
    border-color: var(--brand-fill);
}

a.btn.btn-sm.btn-outline-white.stretched-link.text-uppercase:hover {
    background-color: var(--bs-primary-dark);
    border-color: var(--bs-primary-dark);
    color: #fff;
}

/* Widget Containers */
.bg-gray {
    background-color: #f8f9fa;
}

/* Widget Headers */
.widget_product_categories h3,
.bapf_head h3 {
    color: #333;
}

/* Product Categories — no background color on cat-item links; the
   offcanvas filter sets its own surface. */
.product-categories .cat-item a {
    color: #495057;
    border-color: #e9ecef;
}

.product-categories .cat-item a:hover {
    color: #fff;
    border-color: var(--bs-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Current Active Category */
.product-categories .cat-item.current-cat a {
    color: #fff;
    border-color: var(--bs-primary);
}

.product-categories .cat-item.current-cat a:hover {
    color: #fff;
}

/* Filter Widgets */
.berocket_single_filter_widget {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.bapf_head h3 {
    color: #333;
}

/* Select Elements */
.bapf_body select {
    border-color: #ced4da;
    color: #495057;
    background-color: #fff;
}

.bapf_body select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 0, 182, 180), 0.1);
}

/* Select2 Styling */
.select2-container--default .select2-selection--multiple {
    border-color: #ced4da;
}

.select2-container--default .select2-selection--multiple:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 0, 182, 180), 0.1);
}

/* Accessibility Focus States */
.product-categories .cat-item a:focus {
    outline-color: var(--bs-primary);
}

.bapf_body select:focus-visible {
    outline-color: var(--bs-primary);
}

/* Print Styles - Color Only */
@media print {
    .product-categories .cat-item a {
        color: #000;
        background-color: transparent;
        border-color: transparent;
    }
}