/* =====================================================================
   Innobilari.ro — theme layer

   css/tokens.css retints everything the INC template drives through its
   own custom properties. This file handles what a token swap cannot:

     a) the base page — the template assumed a white document
     b) 13 selectors that used --bd-common-white as a BACKGROUND, where
        remapping the token would have broken the 19 places it is used
        as a text colour
     c) 13 hardcoded hex values left in the compiled CSS
     d) three rules that drew chevrons from Font Awesome Pro, which is
        not licensed to us and has been removed
     e) accessibility and motion behaviour the template never had

   Load last, after main.css and tokens.css.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Base document
   --------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var( --inb-bg );
	color: var( --inb-fg-dim );
	font-family: var( --inb-ff-body );
	font-size: var( --inb-fz-body );
	line-height: var( --inb-lh-body );
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var( --inb-ff-heading );
	color: var( --inb-fg );
	line-height: var( --inb-lh-heading );
	letter-spacing: var( --inb-ls-heading );
	font-weight: 700;
}

h1, .h1 { font-size: var( --inb-fz-h1 ); }
h2, .h2 { font-size: var( --inb-fz-h2 ); }
h3, .h3 { font-size: var( --inb-fz-h3 ); }
h4, .h4 { font-size: var( --inb-fz-h4 ); }
h5, .h5 { font-size: var( --inb-fz-h5 ); }
h6, .h6 { font-size: var( --inb-fz-h6 ); }

p {
	font-family: var( --inb-ff-body );
	font-size: var( --inb-fz-body );
	line-height: var( --inb-lh-body );
	color: var( --inb-fg-dim );
}

a {
	color: var( --inb-accent );
	text-decoration: none;
	transition: color var( --inb-dur ) var( --inb-ease );
}

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

/* The accent serif. §8.2 caps this at one or two headings for the whole
   site, so it is opt-in through a class and never applied to an element. */
.inb-accent-type {
	font-family: var( --inb-ff-accent );
	font-weight: 400;
	letter-spacing: 0;
}

/* Small uppercase label above a section title. */
.inb-eyebrow {
	font-family: var( --inb-ff-body );
	font-size: var( --inb-fz-sm );
	font-weight: 500;
	letter-spacing: var( --inb-ls-eyebrow );
	text-transform: uppercase;
	color: var( --inb-accent );
}

img {
	max-width: 100%;
	height: auto;
}

::selection {
	background: var( --inb-accent );
	color: var( --inb-on-accent );
}

hr {
	border: 0;
	border-top: 1px solid var( --inb-hairline-gold );
	opacity: 1;
}


/* ---------------------------------------------------------------------
   2. Backgrounds that were white in the light theme

   These 13 selectors read --bd-common-white as a background. The token
   itself must stay white for the 19 text uses, so each is corrected here.
   --------------------------------------------------------------------- */

.white-bg                                { background: var( --inb-surface-raised ); }
.bd-preloader                            { background: var( --inb-bg ); }
.bd-header__main.header-sticky           { background: rgba( 13, 13, 13, 0.92 );
                                           backdrop-filter: blur( 10px );
                                           -webkit-backdrop-filter: blur( 10px );
                                           border-bottom: 1px solid var( --inb-hairline ); }
.main-menu ul li .submenu                { background: var( --inb-surface-raised );
                                           border: 1px solid var( --inb-hairline ); }
.offcanvas__area,
.offcanvas__wrapper                      { background: var( --inb-bg ); }
.bd-swiper-arrow                         { background: var( --inb-surface-raised );
                                           color: var( --inb-fg ); }
.bd-slider__dot .swiper-pagination-bullet{ background: var( --inb-muted ); }
.bd-slider__dot .swiper-pagination-bullet-active { background: var( --inb-accent ); }
.slider-play-btn .slider-play-btn-icon   { background: var( --inb-accent );
                                           color: var( --inb-on-accent ); }
.bd-dropcap                              { background: var( --inb-accent );
                                           color: var( --inb-on-accent ); }
.pulse-btn                               { background: var( --inb-accent );
                                           color: var( --inb-on-accent ); }


/* ---------------------------------------------------------------------
   3. Hardcoded hex values left in the compiled CSS

   Every one of these was a light-theme border or an invisible-on-dark
   black. Listed with the value they replace.
   --------------------------------------------------------------------- */

/* #d1dbe5 — pagination and generic borders */
.bd-basic-pagination ul li a,
.bd-basic-pagination ul li span { border-color: var( --inb-hairline ); }
.border                         { border-color: var( --inb-hairline ) !important; }

/* #D5D5D5 — offcanvas rules */
.offcanvas__top,
.offcanvas__search input        { border-color: var( --inb-hairline ); }

/* #bfcddb — footer form and copyright rules */
.bd-footer-widget__form input,
.bd-footer-widget__form button,
.bd-footer__copyright.bd-border-top { border-color: var( --inb-hairline ); }

/* #e2ebf4 — feature section divider */
.bd-feature__section::after     { background-color: var( --inb-surface ); }

/* linear-gradient(#000,#000) — the animated underline under a service
   title. Black on graphite is invisible; it becomes the gold hairline. */
.bd-services__title a,
.bd-services-2__title a {
	background-image: linear-gradient( var( --inb-accent ), var( --inb-accent ) ),
	                  linear-gradient( var( --inb-accent ), var( --inb-accent ) );
}


/* ---------------------------------------------------------------------
   4. Chevrons, formerly Font Awesome Pro glyph \f107

   Drawn with borders instead: no icon font, inherits currentColor, and
   lands on the 1.5px line-art stroke §8.3 asks for.
   --------------------------------------------------------------------- */

.bd-accordion .accordion-button::after,
.main-menu ul li.has-dropdown > a::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	background-image: none;
	font-family: inherit;
	transform: rotate( 45deg );
	transform-origin: center;
	transition: transform var( --inb-dur ) var( --inb-ease );
}

.main-menu ul li.has-dropdown > a::after {
	margin-left: 8px;
	vertical-align: 2px;
}

.bd-accordion .accordion-button:not( .collapsed )::after {
	transform: rotate( -135deg );
}


/* ---------------------------------------------------------------------
   5. Buttons

   §8.1 is explicit: gold on white is roughly 2:1 and fails. A gold
   button therefore takes graphite text, never white.
   --------------------------------------------------------------------- */

.bd-btn,
.bd-btn:link,
.bd-btn:visited {
	font-family: var( --inb-ff-body );
	font-weight: 500;
	letter-spacing: 0.02em;
	border-radius: var( --inb-radius );
	background-color: var( --inb-accent );
	color: var( --inb-on-accent );
	border: 1px solid var( --inb-accent );
	transition: background-color var( --inb-dur ) var( --inb-ease ),
	            border-color var( --inb-dur ) var( --inb-ease ),
	            color var( --inb-dur ) var( --inb-ease );
}

.bd-btn:hover,
.bd-btn:focus-visible {
	background-color: var( --inb-accent-hover );
	border-color: var( --inb-accent-hover );
	color: var( --inb-on-accent );
}

/* Secondary: outlined, fills with gold on hover. */
.bd-border-btn,
.bd-border-btn:link,
.bd-border-btn:visited {
	background-color: transparent;
	color: var( --inb-accent );
	border: 1px solid var( --inb-accent );
	border-radius: var( --inb-radius );
}

.bd-border-btn:hover,
.bd-border-btn:focus-visible {
	background-color: var( --inb-accent );
	color: var( --inb-on-accent );
	border-color: var( --inb-accent );
}


/* ---------------------------------------------------------------------
   6. Forms
   --------------------------------------------------------------------- */

input, select, textarea {
	background-color: var( --inb-surface-raised );
	color: var( --inb-fg );
	border: 1px solid var( --inb-hairline );
	border-radius: var( --inb-radius );
	font-family: var( --inb-ff-body );
	font-size: var( --inb-fz-body );
}

input::placeholder,
textarea::placeholder {
	color: var( --inb-muted );
	opacity: 1;
}

input:focus, select:focus, textarea:focus {
	border-color: var( --inb-accent );
	outline: none;
}


/* ---------------------------------------------------------------------
   7. Focus visibility

   §14 requires keyboard navigability end to end with a visible gold
   focus ring. :focus-visible keeps it off mouse clicks.
   --------------------------------------------------------------------- */

:focus-visible {
	outline: var( --inb-focus-ring );
	outline-offset: var( --inb-focus-offset );
	border-radius: var( --inb-radius );
}

/* Skip link — hidden until focused. */
.inb-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	padding: 12px 20px;
	background: var( --inb-accent );
	color: var( --inb-on-accent );
	font-weight: 500;
}

.inb-skip-link:focus {
	left: 0;
}


/* ---------------------------------------------------------------------
   8. Layout helpers
   --------------------------------------------------------------------- */

.inb-hairline {
	border: 0;
	border-top: 1px solid var( --inb-hairline-gold );
}

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


/* ---------------------------------------------------------------------
   9. Motion

   §8.3 caps micro-interactions at 150–300ms and §14 requires
   prefers-reduced-motion to be honoured — that means killing scroll
   animation, tile zoom and any autoplaying video, not just shortening
   them.
   --------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Reveal-on-scroll elements must not stay stuck at opacity 0 when the
	   animation that would have shown them is suppressed. */
	.inb-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	video[autoplay] {
		display: none;
	}

}

/* Reveal-on-scroll, driven by IntersectionObserver in js/main.js rather
   than WOW.js + animate.css. */
.inb-reveal {
	opacity: 0;
	transform: translateY( 16px );
	transition: opacity var( --inb-dur-slow ) var( --inb-ease ),
	            transform var( --inb-dur-slow ) var( --inb-ease );
	will-change: opacity, transform;
}

.inb-reveal.is-visible {
	opacity: 1;
	transform: none;
}