/* HappyDent Clinic — fixes specifice WP/FSE, nu exista in prototipul Webflow original */

body { margin: 0; }
.wp-block-group.page-hero { padding: 120px 24px 48px; text-align: center; }
.wp-block-group.blog-article-shell { padding: 40px 24px 80px; margin: 0 auto; }
.blog-article-shell img { border-radius: 20px; max-width: 100%; height: auto; }
.blog-article-shell p { color: #5C4B66; font-size: 18px; line-height: 1.7; }
.blog-article-shell h2 { color: #54267B; margin-top: 40px; }

/* Phone bar above the main nav — both clinics visible at all times */
.hdc-phone-bar { background: #2D1240; color: #fff; font-family: 'Geist', sans-serif; font-size: 13px; display: flex; justify-content: center; gap: 32px; padding: 8px 24px; flex-wrap: wrap; }
.hdc-phone-bar a { color: rgba(255,255,255,.9); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.hdc-phone-bar a:hover { color: #E85A9B; }
.hdc-phone-bar svg { flex-shrink: 0; }
@media (max-width: 600px) { .hdc-phone-bar { gap: 12px; font-size: 12px; } }

/* Mega-menu: JS-controlled open/close, avoid flash on load */
.mega-menu-trigger { transition: height .25s ease; }
.mega-menu.is-open .mega-menu-trigger { box-shadow: 0 20px 40px rgba(84,38,123,.12); }

/* Wider, multi-column dropdowns for the longer menus (declutters the single long list) */
.mega-menu-trigger.is-wide { min-width: 34rem; }
.mega-menu-actions.is-cols-2 { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.mega-menu-actions.is-cols-3 { grid-template-columns: 1fr 1fr 1fr; column-gap: 20px; }
@media (max-width: 1200px) {
  .mega-menu-trigger.is-wide { min-width: 22rem; }
  .mega-menu-actions.is-cols-3 { grid-template-columns: 1fr 1fr; }
}

.mobile-nav-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; }
.mobile-nav-toggle span { display: block; width: 24px; height: 2px; background: #2B1B33; }

/* This menu has 8 top-level items (Acasă/Despre noi/Servicii/Stomatologie
   LASER/Reabilitări LASER/Tarife/Blog/Contact) plus the phone bar and CTA
   button — genuinely more than fits in one row below ~1400px, not just
   phone-sized screens. 991px left a wide band of real desktop/laptop widths
   where everything crammed into one unreadable row instead of collapsing
   to the hamburger menu. */
@media (max-width: 1400px) {
  .mobile-nav-toggle { display: flex; }
  .nav-layout { display: none; flex-direction: column; width: 100%; position: absolute; top: 100%; left: 0; background: #fff; padding: 16px 24px; box-shadow: 0 12px 32px rgba(84,38,123,.12); max-height: 80vh; overflow-y: auto; }
  .nav-layout.is-mobile-open { display: flex; }
  .nav-links-wrap { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
  .mega-menu { width: 100%; }
  .mega-menu-trigger { position: static; height: auto !important; overflow: visible !important; display: block; padding-left: 16px; }
  .mega-menu-actions { flex-direction: column; }
  .mega-menu-trigger.is-wide, .mega-menu-actions.is-cols-2, .mega-menu-actions.is-cols-3 { min-width: 0; grid-template-columns: 1fr; }
}

.footer-socials-list { display: flex; gap: 12px; }
.footer-social-link { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: #fff; }

/* CRITICAL FIX: appending the raw Caliora treatment/condition-page CSS files
   introduced duplicate :root declarations for the brand color tokens, and
   because they were appended AFTER happydent-colors.css, the cascade let
   Caliora's original demo colors (#8f7868 tan, #0e3e68 blue) win over the
   HappyDent pink/purple remap on every real-Caliora-class component
   (nav pills, mega-menu, hero-stats, treatment cards, CTA, etc). This file
   loads last, so re-asserting the correct values here wins the cascade back. */
:root {
  --_colors---brand-accent-primary--brand-accent-default: #E85A9B;
  --_colors---accent-secondary--accent-secondary-default: #54267B;
}

/* Mega-menu: fix dropdown positioning + hover dead-zone.
   Real Caliora CSS never sets position:relative on .mega-menu, so the
   absolutely-positioned .mega-menu-trigger falls back to the nearest
   positioned ancestor (.nav, which spans the full header width) instead of
   the individual menu item — misaligning every dropdown far from its link.
   It also means the open dropdown never extends .mega-menu's own hoverable
   box (position:absolute children don't grow their parent's box), so moving
   the mouse from the link down into the dropdown exits the hover area and
   closes it immediately. Fix: scope positioning to each menu item locally,
   and use a hover-intent delay (see interactions.js) that treats the link
   and its dropdown as one continuous zone. */
.mega-menu { position: relative; }
.mega-menu-trigger { left: 0; right: auto; margin-top: 4px; }
.mega-menu-trigger.is-wide { left: 50%; transform: translateX(-50%); }

/* Caliora's .main has small padding on every side (its "floating rounded
   card" hero look), but at the very top that padding shows as a bare white
   gap above the hero before the nav overlay reaches it. Hero should sit
   flush with the viewport top; keep the side/bottom padding intact. */
.main { padding-top: 0; }
.hero-stats, .hero-primary { border-top-left-radius: 0; border-top-right-radius: 0; }

/* The imported Caliora CSS resets list/link base styles broadly enough that
   it leaks into the WP admin toolbar (#wpadminbar is also a <ul>/<li>
   structure), breaking its layout for logged-in admins only — logged-out
   visitors never see the toolbar at all. Re-assert its own base rules with
   enough priority to win regardless of load order. */
html { margin-top: 32px !important; }
#wpadminbar, #wpadminbar * { box-sizing: content-box !important; }
#wpadminbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 32px !important; z-index: 99999 !important; background: #1d2327 !important; }
#wpadminbar ul, #wpadminbar li { list-style: none !important; margin: 0 !important; padding: 0 !important; float: left !important; }
#wpadminbar > * { position: static !important; }
#wpadminbar .ab-item, #wpadminbar a.ab-item, #wpadminbar > #wp-toolbar span.ab-label, #wpadminbar > #wp-toolbar span.noticon {
  color: #eee !important; font-size: 13px !important; line-height: 32px !important; height: 32px !important; padding: 0 8px !important; display: block !important; text-decoration: none !important;
}
#wpadminbar .ab-sub-wrapper { position: absolute !important; display: none !important; width: 100% !important; background: #1d2327 !important; }
#wpadminbar li:hover > .ab-sub-wrapper, #wpadminbar li.hover > .ab-sub-wrapper { display: block !important; }
#wpadminbar .ab-submenu .ab-item { padding-left: 16px !important; }
@media (max-width: 782px) {
  html { margin-top: 46px !important; }
  #wpadminbar { height: 46px !important; }
  #wpadminbar .ab-item { line-height: 46px !important; height: 46px !important; }
}

/* --text-colors--inverse-text resolves through a color-mix() chain off the
   brand-accent tokens (brand-accent-10 = 10% brand pink + 90% white), which
   lands too close to dark backgrounds to read (the CTA circle heading, the
   dark-mode section labels). Force true white for any text meant to sit on
   a dark section. */
:root { --text-colors--inverse-text: #ffffff; }
.section.dark-base, .section.dark-subtle, .hero-primary, .hero-stats, .cta-section {
  --text-colors--inverse-text: #ffffff;
}

/* Separate variable, same bug: --text-colors--muted-text is what .stats-large-item,
   .dark-base, .treatment-card-tag, .brand-slogan and .footer-brand-slogan actually
   use for text color (not inverse-text), and it resolves to a mid-tone pink
   (35% brand pink + 65% white) — legible on a light background, illegible on
   the dark photo panels/pills these all render on. Verified via computed
   styles in a live proxy render: contrast ratio was ~1:1 against the actual
   dark background before this fix. */
:root { --text-colors--muted-text: #f5eaf0; }
.cta-section .heading-fluid { color: #fff; }

/* Systemic issue found via a live-rendered contrast audit: Caliora's real
   light/dark "variant" system is driven by Webflow's per-project compiled
   hash classes (w-variant-XXXXXXXX), which don't exist in this build — only
   the base (light-mode) CSS was importable. So every `data-wf--*--variant=
   "dark"` attribute in our markup is inert: elements render their default
   light-mode color even when explicitly marked as the dark variant. Rather
   than fight the hash system, style directly off the data-attributes we
   actually emit, and off dark-section ancestors as a catch-all.
   Confirmed broken before this fix: "Programează-te acum" (large-link-text,
   contrast ~1.15:1) and label pills like "Cabinetul / nostru" (~1.02:1). */
[data-wf--label--variant="dark"] .label-wrap { background-color: rgba(255,255,255,.14); color: #fff; }
.section.dark-base .large-link-block,
.section.dark-subtle .large-link-block,
.cta-section .large-link-block { color: #fff; }
.section.dark-base .label-wrap,
.section.dark-subtle .label-wrap { background-color: rgba(255,255,255,.14); color: #fff; }

/* Two conflicting real-CSS rules exist for .team-role-name: an earlier
   clamp(2rem,4vw,5rem) and a later, uncapped 7vw that wins the cascade.
   Uncapped vw sizing on 6 stacked role names read as wildly oversized
   relative to the icon+caption column beside it at in-between viewport
   widths. Reassert the clamp so it scales but never runs away. */
.team-role-name { font-size: clamp(1.75rem, 4vw, 3.5rem) !important; }

/* Team grid: Caliora's own behavior is a horizontal-scroll carousel
   (each card locked to 80vw), which strands the last card alone on its own
   row with a lot of empty space once there are only 4 items — reads as
   broken rather than a deliberate carousel. A responsive grid keeps every
   card the same width and wraps evenly instead. */
.team-list { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }
.team-grid-item { width: 100% !important; max-width: none !important; }
.team-grid-wrap { overflow: visible !important; }

/* More breathing room between a section's intro heading and the content
   grid below it, and keep both about-cards columns starting at the same
   vertical position instead of drifting apart. */
.primary-content-block { margin-bottom: 40px; }
.about-cards { align-items: flex-start; }
.about-card-1st-col, .about-card-2nd-col { margin-top: 0; }

/* Simple lightbox for gallery images: Webflow's own w-lightbox JS isn't
   present on this build, so plain <a target="_blank"> just opened the raw
   file in a new tab. A minimal in-page modal instead. */
.hdc-lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(20,10,30,.92); z-index: 100000; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; }
.hdc-lightbox-overlay.is-open { display: flex; }
.hdc-lightbox-overlay img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; }