/* =====================================================================
   Innobilari.ro — site components

   Our own UI, as opposed to css/theme.css which corrects the INC
   template's existing rules. Everything here is new: the wordmark,
   header, offcanvas navigation, language switcher, sticky mobile CTA
   and footer.

   All values come from the tokens in css/tokens.css. No literal colours.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Wordmark

   Standing in for a logo file, which has not been supplied yet
   (docs/open-items.md item 2). Deliberately a wordmark rather than an
   <img> pointing at a file that does not exist.
   --------------------------------------------------------------------- */

.inb-wordmark {
	display: inline-block;
	font-family: var( --inb-ff-heading );
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.01em;
	color: var( --inb-fg );
	text-decoration: none;
	white-space: nowrap;
}

.inb-wordmark:hover { color: var( --inb-fg ); }

/* The ".ro" is set in gold so the mark reads as a brand rather than a
   line of text. Applied via ::after so the markup stays a plain string. */
.inb-wordmark::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 6px;
	border-radius: 50%;
	background: var( --inb-accent );
	vertical-align: middle;
}

.inb-wordmark--footer { font-size: 1.5rem; margin-bottom: 18px; }


/* ---------------------------------------------------------------------
   2. Header
   --------------------------------------------------------------------- */

.bd-header__section {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
}

.bd-header__main {
	padding: 18px 0;
	transition: background-color var( --inb-dur ) var( --inb-ease ),
	            padding var( --inb-dur ) var( --inb-ease );
}

/* .header-sticky is toggled by js/main.js once the page scrolls. Its
   background and hairline are defined in theme.css alongside the other
   corrections to template-owned selectors. */
.bd-header__main.header-sticky { padding: 10px 0; }

/* The header row. Only the navigation may shrink; the brand and the action
   cluster keep their intrinsic width, so the CTA can never be pushed off the
   edge of the viewport by a long menu. */
.inb-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.inb-header__inner > .logo { flex: 0 0 auto; }

.inb-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	min-width: 0;      /* lets the nav actually shrink instead of overflowing */
}

.main-menu { min-width: 0; }

.main-menu ul {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-menu ul li { position: relative; }

.main-menu ul li > a {
	display: inline-block;
	padding: 10px 0;
	font-family: var( --inb-ff-body );
	font-size: 0.9375rem;
	font-weight: 500;
	color: var( --inb-fg );
	text-decoration: none;

	/* The template set nav links in wide-tracked uppercase, which made every
	   label far wider than its text and wrapped the longer ones onto three
	   lines. Sentence case at normal tracking reads better and fits. */
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
}

/* Submenu items may wrap — they are in a fixed-width dropdown. */
.main-menu ul li .submenu li > a { white-space: normal; }

.main-menu ul li > a:hover,
.main-menu ul li:hover > a { color: var( --inb-accent ); }

/* Dropdown */
.main-menu ul li .submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 260px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 10px 0;
	border-radius: var( --inb-radius );
	box-shadow: var( --inb-shadow-md );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 8px );
	transition: opacity var( --inb-dur ) var( --inb-ease ),
	            transform var( --inb-dur ) var( --inb-ease ),
	            visibility var( --inb-dur ) var( --inb-ease );
}

.main-menu ul li:hover .submenu,
.main-menu ul li:focus-within .submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.main-menu ul li .submenu li > a {
	display: block;
	padding: 9px 22px;
	font-size: 0.9375rem;
	color: var( --inb-fg-dim );
}

/* Submenu hover.

   The template fills the row on hover by growing an ::before to full width,
   coloured --bd-theme-primary, which our tokens map to gold. It then set the label
   to --bd-common-white; our own earlier override set it to gold. Either way the
   result was unreadable - white on gold is about 2:1 and fails outright (§8.1),
   and gold on gold is invisible.

   The fill is kept, because it matches the primary button treatment and gives a
   clear affordance; the label takes graphite, which is the pairing §8.1 mandates
   for anything sitting on gold and measures about 8.6:1.

   All three selectors are needed: the template keys its rule off the li being
   hovered, ours off the anchor, and the chevron on a nested submenu is a separate
   ::after that inherits neither. */
.main-menu ul li .submenu li > a:hover,
.main-menu ul li .submenu li:hover > a,
.main-menu ul li .submenu li:hover > a::after {
	color: var( --inb-on-accent );
}

/* Language switcher */
.inb-lang-switch {
	align-items: center;
	margin-left: 28px;
	padding: 6px 12px;
	border: 1px solid var( --inb-hairline );
	border-radius: var( --inb-radius );
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var( --inb-fg-dim );
	text-transform: uppercase;
}

.inb-lang-switch:hover {
	color: var( --inb-on-accent );
	background: var( --inb-accent );
	border-color: var( --inb-accent );
}

.inb-header-cta {
	margin-left: 16px;
	padding: 11px 24px;
	font-size: 0.9375rem;
}


/* ---------------------------------------------------------------------
   3. Mobile menu trigger
   --------------------------------------------------------------------- */

.inb-burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;              /* 44px is the minimum comfortable touch target */
	height: 44px;
	margin-left: 12px;
	padding: 0 9px;
	background: transparent;
	border: 1px solid var( --inb-hairline );
	border-radius: var( --inb-radius );
	cursor: pointer;
}

.inb-burger span {
	display: block;
	height: 1.5px;
	width: 100%;
	background: var( --inb-fg );
	transition: background var( --inb-dur ) var( --inb-ease );
}

.inb-burger:hover span { background: var( --inb-accent ); }


/* ---------------------------------------------------------------------
   4. Offcanvas navigation

   Bootstrap 5.3's own component, replacing the abandoned meanmenu jQuery
   plugin. Bootstrap handles focus trapping, Escape-to-close and
   aria-expanded; only the appearance is set here.
   --------------------------------------------------------------------- */

.inb-offcanvas {
	width: min( 92vw, 400px );
	background-color: var( --inb-bg );
	color: var( --inb-fg );
	border-left: 1px solid var( --inb-hairline );
}

.inb-offcanvas .offcanvas-header {
	padding: 22px 24px;
	border-bottom: 1px solid var( --inb-hairline );
}

.inb-offcanvas .offcanvas-body { padding: 24px; }

/* Bootstrap's close button is a dark SVG; invert it for a dark panel. */
.inb-offcanvas__close { filter: invert( 1 ) grayscale( 1 ); opacity: 0.7; }
.inb-offcanvas__close:hover { opacity: 1; }

.inb-offcanvas__nav,
.inb-offcanvas__sub { margin: 0; padding: 0; list-style: none; }

.inb-offcanvas__nav > li { border-bottom: 1px solid var( --inb-hairline ); }

.inb-offcanvas__nav > li > a {
	display: block;
	padding: 15px 0;
	font-family: var( --inb-ff-heading );
	font-size: 1.0625rem;
	font-weight: 600;
	color: var( --inb-fg );
}

.inb-offcanvas__nav > li > a:hover { color: var( --inb-accent ); }

.inb-offcanvas__sub { padding: 0 0 12px 14px; border-left: 1px solid var( --inb-hairline-gold ); }

.inb-offcanvas__sub li a {
	display: block;
	padding: 8px 0;
	font-size: 0.9375rem;
	color: var( --inb-fg-dim );
}

.inb-offcanvas__sub li a:hover { color: var( --inb-accent ); }

.inb-offcanvas__foot { margin-top: 30px; }


/* ---------------------------------------------------------------------
   5. Sticky mobile CTA

   Guide 8.4. Hidden until js/main.js adds .is-visible, which happens once
   the page has scrolled past the hero, so it never covers it.
   --------------------------------------------------------------------- */

.inb-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	gap: 1px;
	background: var( --inb-hairline );
	border-top: 1px solid var( --inb-hairline-gold );
	transform: translateY( 100% );
	transition: transform var( --inb-dur-slow ) var( --inb-ease );
}

.inb-sticky-cta.is-visible { transform: none; }

.inb-sticky-cta a {
	flex: 1 1 0;
	padding: 16px 10px;
	font-family: var( --inb-ff-body );
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.inb-sticky-cta__primary {
	background: var( --inb-accent );
	color: var( --inb-on-accent );
}

.inb-sticky-cta__secondary {
	background: var( --inb-surface-raised );
	color: var( --inb-fg );
}

/* Keep the bar from covering the end of the page. */
@media ( max-width: 991.98px ) {
	body { padding-bottom: 56px; }
}


/* ---------------------------------------------------------------------
   6. Footer
   --------------------------------------------------------------------- */

.bd-footer__area {
	margin-top: 80px;
	padding-top: 70px;
	background: var( --inb-surface-raised );
	border-top: 1px solid var( --inb-hairline-gold );
}

.bd-footer__col { margin-bottom: 40px; }

.bd-footer__tagline {
	max-width: 42ch;
	font-size: 0.9375rem;
	color: var( --inb-muted );
}

.bd-footer__title {
	margin-bottom: 18px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var( --inb-ls-eyebrow );
	text-transform: uppercase;
	color: var( --inb-accent );
}

.bd-footer__list { margin: 0; padding: 0; list-style: none; }

.bd-footer__list li { margin-bottom: 10px; }

.bd-footer__list li a {
	font-size: 0.9375rem;
	color: var( --inb-fg-dim );
}

.bd-footer__list li a:hover { color: var( --inb-accent ); }

.bd-footer__address {
	margin: 0;
	font-size: 0.9375rem;
	font-style: normal;
	color: var( --inb-fg-dim );
}

.bd-footer__bottom {
	margin-top: 20px;
	padding: 24px 0 30px;
	border-top: 1px solid var( --inb-hairline );
}

.bd-footer__legal {
	margin: 0;
	font-size: 0.8125rem;
	color: var( --inb-muted );
}

.bd-footer__legal strong { color: var( --inb-fg-dim ); font-weight: 600; }

.bd-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bd-footer__legal-links li a {
	font-size: 0.8125rem;
	color: var( --inb-muted );
}

.bd-footer__legal-links li a:hover { color: var( --inb-accent ); }

@media ( min-width: 992px ) {
	.bd-footer__legal-links { justify-content: flex-end; }
}

@media ( max-width: 991.98px ) {
	.bd-footer__legal { margin-bottom: 14px; }
}


/* ---------------------------------------------------------------------
   7. Breadcrumb
   --------------------------------------------------------------------- */

.inb-breadcrumb .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 8px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
}

.inb-breadcrumb .breadcrumb li { display: flex; align-items: center; gap: 8px; }

/* Separator drawn in CSS rather than typed into the markup, so it is not
   read out by a screen reader as content. */
.inb-breadcrumb .breadcrumb li + li::before {
	content: "";
	width: 4px;
	height: 4px;
	border-right: 1.5px solid var( --inb-muted );
	border-top: 1.5px solid var( --inb-muted );
	transform: rotate( 45deg );
}

.inb-breadcrumb .breadcrumb a { color: var( --inb-muted ); }
.inb-breadcrumb .breadcrumb a:hover { color: var( --inb-accent ); }
.inb-breadcrumb .breadcrumb [aria-current="page"] { color: var( --inb-fg-dim ); }