/* 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 { 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; }
/* Sticky keeps the box as it was (Marcos 2026-10-16: "the left and right padding of header changes"): the vendor's
   .te-sticky_menu rule zeroes the box's padding and border once the bar sticks, so the logo and the call button jumped
   sideways. Desktop only — below 992px the vendor box is borderless and unpadded in both states. */
@media (min-width: 992px) {
    html.bh-light .header-area.style-3 .te-header-menu-area.te-sticky_menu .menu-wrapper {
        padding-left: 20px;
        padding-right: 8px;
        border: 1px solid #1C1C1C;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    html.bh-light .header-area.style-3 .te-header-menu-area.te-sticky_menu .menu-wrapper { padding-left: 0; padding-right: 0; }
}
/* Top strip (Marcos 2026-10-16: centred, and ~18px shorter): its visible band is the space above the fixed menu bar,
   which style-3 puts at top:70px. The bar moves up to 52px and the strip loses the same 18px, so the 26px row sits
   centred (13px each side) and everything below moves up together. The sticky bar keeps its own top:0. */
@media (min-width: 992px) {
    html.bh-light .header-area.style-3 .header-top { padding-top: 13px; padding-bottom: 34px; }
    html.bh-light .header-area.style-3 .te-header-menu-area:not(.te-sticky_menu) { top: 52px; }
}

/* Hero: a deeper shade over the photo/video so the headline reads (Marcos 2026-10-16) — darkest behind the text on
   the left, easing off to the right so the picture still shows. Was a flat rgba(0,0,0,.55) in bh-custom.css. */
html.bh-light .slider-area .te-video-bg::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.62) 50%, rgba(0, 0, 0, 0.45) 100%);
}
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; }

/* Paragraph breaks in multi-paragraph copy (CEO message, team biography, about text). */
html.bh-light .te-section-desc p + p, html.bh-light .te-about-info-content p + p { margin-top: 1em; }

/* Loader (Marcos 2026-10-16: "remove that green curtain… a wow factor spinning instead"). First load and page changes
   share ONE look: a white cover (the page's own colour, so nothing flashes) with three brand rings spinning at
   different speeds around a pulsing core. It fades away once the page has finished rendering (bhPostRender). */
html.bh-light .bh-preloader-bars, html.bh-light .bh-nt-col, html.bh-light .bh-nt-spinner { display: none !important; }
html.bh-light #preloader { background: #ffffff !important; opacity: 1; transition: opacity 0.45s ease; }
html.bh-light #preloader.loaded { opacity: 0; }
html.bh-light #bh-nav-transition { background: #ffffff; opacity: 0; transition: opacity 0.35s ease; }
html.bh-light #bh-nav-transition.bh-nt-covering { opacity: 1; }
html.bh-light #bh-nav-transition.bh-nt-revealing { opacity: 0; transition-duration: 0.45s; }
.bhl-loader { display: none; }
html.bh-light .bhl-loader {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: 96px; height: 96px;
    margin: -48px 0 0 -48px;
}
html.bh-light .bhl-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid transparent;
}
html.bh-light .bhl-ring--a { border-top-color: var(--bh-highlight, #00A35A); border-right-color: var(--bh-highlight, #00A35A); animation: bhlSpin 1.1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite; }
html.bh-light .bhl-ring--b { inset: 12px; border-bottom-color: var(--brand-primary, #006B38); border-left-color: var(--brand-primary, #006B38); animation: bhlSpin 1.5s linear infinite reverse; }
html.bh-light .bhl-ring--c { inset: 24px; border-top-color: #212529; animation: bhlSpin 0.8s linear infinite; }
html.bh-light .bhl-core {
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--bh-highlight, #00A35A);
    animation: bhlPulse 1.1s ease-in-out infinite;
}
@keyframes bhlSpin { to { transform: rotate(360deg); } }
@keyframes bhlPulse { 0%, 100% { transform: scale(0.6); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    html.bh-light .bhl-ring, html.bh-light .bhl-core { animation-duration: 3s; }
}

/* Cookie bar Accept: the brand fill; on hover the darker brand colour with a white label (the vendor's a11y rule
   keeps a dark label on the lighter fill). */
html.bh-light .bh-cookie-consent__btn--accept:hover { background: var(--brand-primary) !important; color: #ffffff !important; }

/* "Reload" link on the connection-lost bar: the brand colour, not the shared app.css orange. */
html.bh-light #blazor-error-ui a.reload { color: var(--bh-highlight) !important; }   /* the bar is dark (#1a1a2e): the lighter brand colour reads on it */

/* Location page: the site video starts exactly at the menu bar's bottom edge. On desktop the bar is fixed and
   overlaps the page by 80px (bar 52px→153px, in-flow top strip 73px — both set above); below 992px the bar is in
   the flow, so no offset. The fade-in keeps its fade but not its slide, which would open a gap. */
@media (min-width: 992px) {
    html.bh-light .bh-site-video-wrap { margin-top: 80px; }
}
html.bh-light .bh-site-video-wrap.wow { animation-name: fadeIn !important; }

/* Home hero a little taller (Marcos 2026-10-16) — was min(56.25vw, 68vh). */
/* flex-shrink: the body is a fixed-height flex column, which squeezed the hero below its own height (592px at 1440x900). */
html.bh-light .slider-area.style-1 { height: calc(min(60vw, 78vh) + 100px); flex-shrink: 0; }   /* +150px over two asks, then trimmed to +100px: Marcos 2026-10-16 */
@media only screen and (max-width: 767px) {
    html.bh-light .slider-area.style-1 { height: auto; }
}

/* Top strip separators between phone, email and address. The vendor gap (33px) is too wide with a dash between. */
html.bh-light .header-top .te-header-contact-info { gap: 10px 14px; }
html.bh-light .header-top .bh-top-sep { color: rgba(255, 255, 255, 0.7) !important; font-weight: 400; }

/* Team circles shrink with their column (now 4 per row on desktop, 2 on tablet; iPad: the fixed 370/300px circle spilled past a 240px column and pushed
   the whole page sideways — Marcos 2026-10-16). Same look wherever the column is wide enough. */
html.bh-light .te-team-card.style-2 .image-wrapper { max-width: 100%; height: auto; aspect-ratio: 1 / 1; }
html.bh-light .te-team-card.style-2 .image { max-width: 96%; height: auto; aspect-ratio: 1 / 1; border-width: 4px; }   /* thinner ring, bigger photo (Marcos 2026-10-16) */
/* More air between team cards. */
html.bh-light .team-area .row > [class*="col-"]:has(> .te-team-card) { padding-left: 30px; padding-right: 30px; margin-bottom: 36px; }

/* Phone menu panel never wider than the screen: at 350px fixed it ran off the left edge on phones under ~390px,
   eating its own left padding. */
html.bh-light .te-menu-sidebar-area, html.bh-light .te-menu-sidebar-area .te-menu-sidebar-wrapper { max-width: 100vw; }

/* Hero text vertically centred in the part of the banner you can see (Marcos 2026-10-16). On desktop the fixed menu
   bar covers the banner's top 80px, so that much top padding centres it in the visible part. */
html.bh-light .slider-area .te-single-slider .te-slider-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}
@media (min-width: 992px) {
    html.bh-light .slider-area .te-single-slider .te-slider-container { padding-top: 80px; }
}
html.bh-light .slider-area .te-single-slider .te-slider-container > .te-slider-column { flex: 0 0 auto; align-self: stretch; width: 100%; max-width: none; }   /* full width, as before the move */

/* Green strip lines up with the menu bar below it (Marcos 2026-10-16): same column width, and the same inner edges
   the menu box gives the logo (13.5px container + 20px box padding) and the call button (13.5px + 8px). */
@media (min-width: 992px) {
    html.bh-light .header-top > .container { max-width: var(--bhl-col); padding-left: 33.5px; padding-right: 21.5px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    html.bh-light .header-top > .container { padding-left: 13.5px; padding-right: 13.5px; }   /* the vendor box has no padding here */
}

/* Custom content blocks (About + optionally Home): picture with soft corners beside the text, same rhythm as the CEO block. */
html.bh-light .bh-content-section { padding: 0; display: flow-root; }   /* gap = the .bh-area-gap spacer; flow-root keeps the inner .row gutter from eating it */
html.bh-light .bh-content-section__image { border-radius: 14px; overflow: hidden; box-shadow: var(--bhl-card-shadow); }
html.bh-light .bh-content-section__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (min-width: 992px) {
    html.bh-light .bh-content-section__text { padding: 0 24px; }
}

/* More room under the CEO video block before the next section (Marcos 2026-10-16). */
html.bh-light #about.about-us-area { margin-bottom: 50px; }
/* Section tiles (2 across) and reading list. */
html.bh-light .bh-content-section__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
@media (max-width: 575px) { html.bh-light .bh-content-section__items { grid-template-columns: 1fr; } }
html.bh-light .bh-content-section__item { background: #fff; border: 1px solid var(--bhl-line); border-top: 3px solid var(--bh-accent); border-radius: 10px; padding: 14px 16px; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
html.bh-light .bh-content-section__item-title { display: block; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 18px; color: var(--bhl-ink); text-transform: uppercase; letter-spacing: .3px; }
html.bh-light .bh-content-section__item-text { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--bhl-text); }
html.bh-light .bh-content-section__links { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
html.bh-light .bh-content-section__links a { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--bhl-line); border-radius: 10px; background: #fff; color: var(--bhl-ink); font-size: 15px; line-height: 1.45; transition: border-color .2s, box-shadow .2s; }
html.bh-light .bh-content-section__links a:hover { border-color: var(--bh-accent); box-shadow: 0 4px 14px rgba(0,0,0,.06); color: var(--brand-primary) !important; }
html.bh-light .bh-content-section__links i { color: var(--bh-accent); margin-top: 4px; font-size: 13px; }
/* FAQ: questions that open to their answers (native <details>, no script). */
html.bh-light .bh-content-section__faq { margin-top: 22px; display: grid; gap: 10px; }
html.bh-light .bh-content-section__faq-item { background: #fff; border: 1px solid var(--bhl-line); border-radius: 10px; padding: 0 16px; transition: border-color .2s; }
html.bh-light .bh-content-section__faq-item[open] { border-color: var(--bh-accent); box-shadow: 0 4px 14px rgba(0,0,0,.05); }
html.bh-light .bh-content-section__faq-item summary { cursor: pointer; list-style: none; padding: 14px 28px 14px 0; position: relative; font-weight: 600; color: var(--bhl-ink); font-size: 16px; }
html.bh-light .bh-content-section__faq-item summary::-webkit-details-marker { display: none; }
html.bh-light .bh-content-section__faq-item summary::after { content: "+"; position: absolute; right: 0; top: 10px; font-size: 22px; color: var(--bh-accent); font-weight: 400; }
html.bh-light .bh-content-section__faq-item[open] summary::after { content: "–"; }
html.bh-light .bh-content-section__faq-item p { padding-bottom: 14px; margin: 0; color: var(--bhl-text); line-height: 1.6; }
/* A section without a picture (e.g. the FAQ) spans the column and lines up with the page's other content edges. */
html.bh-light .bh-content-section__text--full .bh-content-section__text { padding: 0; }
/* The theme's standard gap between areas = five body lines (5 × 26px). */
.bh-area-gap { height: 130px; height: 5lh; }

/* Contact lines under "Get in Touch": address, phone, email with brand icons. */
html.bh-light .bh-contact-lines { list-style: none; padding: 0; margin: 6px 0 26px; display: grid; gap: 10px; }
html.bh-light .bh-contact-lines li { display: flex; align-items: center; gap: 12px; font-size: 17px; }
html.bh-light .bh-contact-lines i { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bh-accent) 12%, #fff); color: var(--bh-accent); font-size: 15px; flex: 0 0 36px; }
html.bh-light .bh-contact-lines a { color: var(--bhl-ink); }
html.bh-light .bh-contact-lines a:hover { color: var(--brand-primary) !important; }

/* Map pin: a floating brand pin with a pulsing ring and the clinic's name on a white card (replaces the flat dot + green tag). */
.bhl-map-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: auto; cursor: pointer; }
.bhl-map-pin__card { background: #fff; color: #111; border-radius: 12px; padding: 8px 14px; box-shadow: 0 10px 28px rgba(0,0,0,.18); font: 600 14px/1.3 "Rajdhani", sans-serif; white-space: nowrap; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; animation: bhlFloat 3s ease-in-out infinite; }
.bhl-map-pin__card small { display: block; font-weight: 500; color: #666; font-size: 12px; }
.bhl-map-pin__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bh-accent, #00A35A); flex: 0 0 10px; }
.bhl-map-pin__icon { width: 46px; height: 46px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--bh-accent, #00A35A); box-shadow: 0 8px 20px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; animation: bhlFloat 3s ease-in-out infinite; }
.bhl-map-pin__icon i { transform: rotate(45deg); color: #fff; font-size: 18px; }
.bhl-map-pin__pulse { position: absolute; bottom: -10px; width: 22px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.18); }
.bhl-map-pin__pulse::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid var(--bh-accent, #00A35A); animation: bhlPulseRing 2s ease-out infinite; }
@keyframes bhlFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.bhl-map-pin__icon { animation-name: bhlFloatPin; }
@keyframes bhlFloatPin { 0%, 100% { transform: rotate(-45deg) translate(0, 0); } 50% { transform: rotate(-45deg) translate(6px, -6px); } }
@keyframes bhlPulseRing { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bhl-map-pin__card, .bhl-map-pin__icon, .bhl-map-pin__pulse::after { animation: none; } }
.bhl-map-pin__card > span:last-child > span { display: block; }
.bhl-map-pin__hint { display: block; color: var(--bh-accent, #00A35A); font: 600 11px/1.2 "Rajdhani", sans-serif; letter-spacing: .4px; text-transform: uppercase; margin-top: 2px; }
.bhl-map-pin:hover .bhl-map-pin__card, .bhl-map-pin:focus-visible .bhl-map-pin__card { box-shadow: 0 12px 30px rgba(0,0,0,.24); outline: 2px solid var(--bh-accent, #00A35A); }
.bhl-map-pin:focus-visible { outline: none; }