/* Blackhawk — LIGHT (Marcos 2026-10-15: "too dark for a medical template"). Every Blackhawk site renders light:
   App.razor puts .bh-light on <html> and loads this after bh-light.gen.css. Boxed pale column on white, pale brand
   strip on top, dark menu bar and footer; the clinic's brand colours drive buttons, labels and card edges. */

html.bh-light {
    --bhl-ink:          #111111;               /* headings */
    --bhl-text:         #555555;               /* body copy */
    --bhl-muted:        #777777;
    --bhl-surface:      #ffffff;
    --bhl-soft:         #f8f9fa;               /* filter bar, empty media */
    --bhl-tint:         rgba(0, 0, 0, 0.03);
    --bhl-tint-strong:  rgba(0, 0, 0, 0.06);
    --bhl-line:         #e5e7eb;
    --bhl-bar:          #212529;               /* menu bar + footer */
    --bhl-card-shadow:  0 6px 24px rgba(0, 0, 0, 0.08);
}

/* Boxed page (Marcos 2026-10-15): all white; the content column — the .container width (bh-custom.css) plus a
   gutter — is marked only by a thin line on its left and right edges. */
html.bh-light { --bhl-col: 100%; --bhl-gutter: 40px; --bhl-edge: #e9ecef; }   /* gutter = room between the edge and the content; edge = a hairline, lighter than card lines */
@media (min-width: 576px)  { html.bh-light { --bhl-col: min(100%, 540px + 2 * var(--bhl-gutter)); } }
@media (min-width: 768px)  { html.bh-light { --bhl-col: min(100%, 720px + 2 * var(--bhl-gutter)); } }
@media (min-width: 992px)  { html.bh-light { --bhl-col: min(100%, 960px + 2 * var(--bhl-gutter)); } }
@media (min-width: 1200px) { html.bh-light { --bhl-col: min(100%, 1280px + 2 * var(--bhl-gutter)); } }
@media (min-width: 1400px) { html.bh-light { --bhl-col: min(100%, 1480px + 2 * var(--bhl-gutter)); } }
@media (min-width: 1600px) { html.bh-light { --bhl-col: min(100%, 1560px + 2 * var(--bhl-gutter)); } }
/* The two edges are fixed hairlines (a gradient cannot draw under 1px — browsers snap its stops to whole pixels):
   a 1px line scaled to half width renders as a true hairline on high-density screens, the faintest line on others. */
html.bh-light { background-color: #ffffff; }
html.bh-light body { background: transparent; }   /* see-through, or its background paints over the z-index:-1 edges */
html.bh-light body::before,
html.bh-light body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--bhl-edge);
    transform: scaleX(0.5);
    pointer-events: none;
    z-index: -1;
}
html.bh-light body::before { left: calc(50% - var(--bhl-col) / 2); }
html.bh-light body::after  { left: calc(50% + var(--bhl-col) / 2); }
html.bh-light main, html.bh-light section, html.bh-light .page-bg, html.bh-light .brand-slider-area { background-color: transparent !important; }

/* Top strip = the brand's lighter colour (Accent) with white icons; menu bar + footer stay dark for contrast. */
html.bh-light .header-top, html.bh-light .bh-nt-col { background: var(--bh-highlight) !important; }
html.bh-light .te-menu-sidebar-area { background: var(--bhl-bar) !important; }
/* Menu bar: dark grey full width; the black box inside it runs exactly edge-line to edge-line (the content
   column), and the gutter lines the logo up with the content. */
html.bh-light .te-header-menu-area { background: var(--bhl-bar) !important; }
html.bh-light .te-header-menu-area > .container { max-width: var(--bhl-col); }
html.bh-light .te-header-menu-area .menu-wrapper {
    background: #111111 !important;
    padding-left: calc(var(--bhl-gutter) - 13.5px);   /* 13.5px = the vendor container padding already inside it */
    padding-right: calc(var(--bhl-gutter) - 13.5px);
}
html.bh-light footer, html.bh-light .footer { background: var(--bhl-bar) !important; }
html.bh-light footer, html.bh-light footer p, html.bh-light footer li, html.bh-light footer a { color: #dddddd; }
html.bh-light .bh-cookie-consent { background: var(--bhl-bar) !important; }

/* Cards: white, thin line, soft shadow, brand edge on top. */
html.bh-light .te-info-card,
html.bh-light .te-info-card.style-2 {
    background: var(--bhl-surface) !important;
    border: 1px solid var(--bhl-line) !important;
    border-top: 4px solid var(--bh-accent) !important;
    border-radius: 12px;
    box-shadow: var(--bhl-card-shadow);
}
html.bh-light .te-info-card .title, html.bh-light .te-info-card h3, html.bh-light .te-info-card h4,
html.bh-light .te-info-card h3 a, html.bh-light .te-info-card h4 a { color: var(--brand-primary) !important; }
html.bh-light .te-info-card .desc, html.bh-light .te-study-meta, html.bh-light .bh-study-status { color: var(--bhl-muted) !important; }

/* Section labels and counts take the brand accent instead of the vendor orange. */
html.bh-light .short-title, html.bh-light .study-filter-count-number { color: var(--bh-accent) !important; }
html.bh-light .study-filter-count-label { color: var(--bhl-muted) !important; }

/* Study filter bar. */
html.bh-light .study-filter-bar-inner { background: var(--bhl-soft) !important; border: 1px solid var(--bhl-line); }
html.bh-light .study-filter-bar-inner input,
html.bh-light .study-filter-bar-inner select,
html.bh-light .study-filter-bar-inner option { background: #ffffff !important; color: #212529 !important; border-color: #dee2e6 !important; }

/* Buttons: brand fill, white label, darker on hover. */
html.bh-light .te-theme-btn { background: var(--bh-accent) !important; border-color: var(--bh-accent) !important; color: #ffffff !important; }
html.bh-light .te-theme-btn * { color: #ffffff !important; }
html.bh-light .te-theme-btn:hover { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }

/* Forms on white. */
html.bh-light input:not([type=checkbox]):not([type=radio]):not([type=color]),
html.bh-light select, html.bh-light textarea {
    background-color: #ffffff;
    color: #212529;
    border-color: #ced4da;
}
html.bh-light input::placeholder, html.bh-light textarea::placeholder { color: #8a8f98; }

/* Empty video frame reads as a soft panel, not a black hole. */
html.bh-light .bh-ceo-video { background: var(--bhl-soft) !important; }

/* Text on the dark bars stays light (the generated rules turn plain links/headings dark). */
html.bh-light .te-header-menu-area a, html.bh-light .te-header-menu-area span, html.bh-light .te-header-menu-area i,
html.bh-light .te-menu-sidebar-area, html.bh-light .te-menu-sidebar-area h1, html.bh-light .te-menu-sidebar-area h2,
html.bh-light .te-menu-sidebar-area h3, html.bh-light .te-menu-sidebar-area h4, html.bh-light .te-menu-sidebar-area h5,
html.bh-light .te-menu-sidebar-area a, html.bh-light .te-menu-sidebar-area p, html.bh-light .te-menu-sidebar-area span,
html.bh-light .bh-cookie-consent a, html.bh-light .bh-cookie-consent button, html.bh-light .bh-cookie-consent p,
html.bh-light .tc-lang-btn, html.bh-light .tc-lang-btn span { color: #ffffff !important; }
html.bh-light .te-header-menu-area a:hover, html.bh-light .te-menu-sidebar-area a:hover { color: var(--bh-accent) !important; }
html.bh-light .bh-cookie-consent__link { text-decoration: underline; }
html.bh-light .header-top a, html.bh-light .header-top span, html.bh-light .header-top i { color: #ffffff !important; }

/* Back-to-top ring takes the brand, on white. */
html.bh-light .progress-wrap { background: #ffffff; box-shadow: inset 0 0 0 2px var(--bhl-line); }
html.bh-light .progress-wrap::after { color: var(--bh-accent); }
html.bh-light .progress-wrap svg.progress-circle path { stroke: var(--bh-accent); }
html.bh-light .progress-wrap svg path { fill: #ffffff; }

/* Chat launcher: white label on the brand fill (the generic button rule turned it dark). */
html.bh-light .tc-chat-launch, html.bh-light .tc-chat-launch-text, html.bh-light .tc-chat-launch-ico { color: #ffffff !important; }