/*!
Theme Name: dacotrans
Theme URI: http://underscores.me/
Author: Chris X
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dacotrans_theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

dacotrans is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Fonts
--------------------------------------------- */
@font-face {
	font-family: "Google Sans Flex";
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url("fonts/GoogleSansFlex-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Google Sans Flex";
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url("fonts/GoogleSansFlex-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Variables
--------------------------------------------- */
:root {
	--color-brand: #005781;
	--color-text: #0E242F;
	--color-text-light: #717F85;
	--color-text-alt: #8fb1c1;
	--color-bg-dark: #0E242F;
	--color-bg-blue: #005781;
	--color-bg-light: #D9E3E7;
	--color-bg-light-grey: #F1F1F1;
	--color-bg-navy: #001C29;
	--color-arrow-grey: #B8B8B8;

	--border-radius: 5px;
	--transition: all .2s ease-in-out;

	--header-height: 110px;
	--hero-overlap: 2.5rem;
	--promo-bar-height: 0px;
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Promo Bar
	- Navigation
	- Buttons
	- Section Title
	- Link Arrow
	- Hero
	- Despre noi
	- Stats
	- Produse
	- Productie proprie
	- Transport
	- Footer
	- Despre Noi Page (Intro, Banner, Info, Gallery)
	- Produse Categorii (accordion product-spec tables)
	- Blog (archive cards, pagination, single post, related posts)
	- Contact (intro, map, offices, form)
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
	transition: var(--transition);
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--color-text);
	font-family: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
	font-size: 1.125rem; /* 18px */
	font-weight: 400;
	overflow-wrap: break-word;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--color-brand);
	transition: var(--transition);
}

a:hover,
a:focus,
a:active {
	color: initial;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

.container {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/**
 * Reusable vertical spacing for full-width homepage/landing sections.
 * Apply alongside a section's own class, e.g. <section class="despre-noi section-padding">.
 */
.section-padding {
	padding-top: 3.5rem; /* ~56px on small screens */
	padding-bottom: 3.5rem;
}

@media screen and (min-width: 62em) {
	.section-padding {
		padding-top: 6.25rem; /* 100px */
		padding-bottom: 6.25rem;
	}
}

/* Promo Bar
--------------------------------------------- */

/**
 * Fixed, dismissible bar above the header. Text/link are editable from
 * Appearance > Customize > Promo Bar (see inc/customizer.php,
 * template-parts/content-promo-bar.php). Dismissal is remembered in
 * localStorage by js/promo-bar.js, which keeps --promo-bar-height (used
 * here for body's top padding and below to offset the sticky header)
 * in sync with the bar's actual height — it can wrap to two lines on
 * narrow screens, so this can't be a hardcoded constant.
 */
body {
	padding-top: var(--promo-bar-height);
}

/* Hides the bar instantly (before promo-bar.js even runs) when
   header.php's inline anti-flash script has already added this class
   for a visitor who dismissed it on a previous visit. */
html.promo-bar-dismissed #promo-bar {
	display: none;
}

.promo-bar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	width: 100%;
	background-color: var(--color-brand);
	color: #fff;
}

/* The WP admin toolbar is also fixed at top:0 with a much higher z-index,
   so for logged-in visitors it would otherwise sit on top of (hiding) the
   promo bar. Standard WP pattern: offset by its height, which changes at
   its own 782px breakpoint (independent of this theme's own breakpoints). */
body.admin-bar .promo-bar {
	top: 32px;
}

@media screen and (max-width: 782px) {

	body.admin-bar .promo-bar {
		top: 46px;
	}
}

.promo-bar-inner {
	position: relative;
	padding: 0.75em 44px 0.75em 20px;
	text-align: center;
}

.promo-bar__text {
	margin: 0;
	font-size: 0.875rem;
}

.promo-bar__link {
	margin-left: 0.5em;
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

.promo-bar__link:hover,
.promo-bar__link:focus {
	text-decoration: none;
	color: #fff;
}

.promo-bar__close {
	position: absolute;
	top: 50%;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: none;
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
	transition: var(--transition);
}

.promo-bar__close:hover,
.promo-bar__close:focus {
	opacity: 0.75;
}

/* Site header
--------------------------------------------- */
.site-header {
	position: sticky;
	top: var(--promo-bar-height);
	z-index: 100;
	background-color: #f2f2f2;
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 20px;
	padding-bottom: 20px;
}

.site-branding {
	display: flex;
	align-items: center;
}

.site-branding img {
	display: block;
	height: auto;
	max-height: 70px;
	width: auto;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: auto;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	padding-left: 1em;
}

.main-navigation ul ul a {
	width: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	padding: 0.6em 0.9em;
	text-decoration: none;
}

/* Hamburger toggle button (mobile). */
.menu-toggle {
	position: relative;
	display: block;
	width: 44px;
	height: 44px;
	margin-left: auto;
	background: transparent;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

.menu-toggle-bar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 2px;
	background-color: #333;
	transform: translate(-50%, -50%);
	transition: background-color 0.25s ease;
}

.menu-toggle-bar::before,
.menu-toggle-bar::after {
	content: "";
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background-color: #333;
	transition: transform 0.25s ease, top 0.25s ease;
}

.menu-toggle-bar::before {
	top: -8px;
}

.menu-toggle-bar::after {
	top: 8px;
}

.main-navigation.toggled .menu-toggle-bar {
	background-color: transparent;
}

.main-navigation.toggled .menu-toggle-bar::before {
	top: 0;
	transform: rotate(45deg);
}

.main-navigation.toggled .menu-toggle-bar::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Small menu. */
@media screen and (max-width: 61.99em) {

	.site-header-inner {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.site-branding img {
		max-height: 40px;
	}

	.main-navigation.toggled ul {
		display: block;
	}

	#primary-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		padding: 0 20px;
		background-color: #fff;
		box-shadow: 0 5px 30px rgba(0, 0, 0, 0.075);
		z-index: 9999;
		transform: translateY(-8px);
		transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.25s ease, transform 0.25s ease, visibility 0.3s ease;
	}

	.main-navigation.toggled #primary-menu {
		max-height: 500px;
		padding: 0.5em 20px;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

@media screen and (min-width: 62em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation {
		width: auto;
	}

	.main-navigation ul {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: wrap;
	}

	.main-navigation ul ul {
		box-shadow: 0 5px 30px rgba(0, 0, 0, 0.075);
		float: left;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 99999;
		background-color: #fff;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0.25s ease;
		border-radius: var(--border-radius);
		padding-left: 0;
	}

	.main-navigation ul ul ul {
		left: 100%;
		top: 0;
	}

	.main-navigation ul ul li:hover > ul,
	.main-navigation ul ul li.focus > ul {
		opacity: 1;
		visibility: visible;
	}

	.main-navigation ul ul a {
		width: 200px;
	}

	.main-navigation ul li:hover > ul,
	.main-navigation ul li.focus > ul {
		opacity: 1;
		visibility: visible;
	}
}

/* Buttons
--------------------------------------------- */
.btn {
	display: inline-block;
	padding: 1.2em 1.75em;
	background-color: var(--color-brand);
	color: #fff;
	font-size: 0.875rem; /* 14px */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	border-radius: var(--border-radius);
	transition: filter 0.2s ease;
}

.btn:hover,
.btn:focus {
	filter: brightness(0.88);
	color: #fff;
}

/* Dark variant — same sizing/weight/uppercase as .btn, just a different
   background. Combine with .btn: class="btn btn--dark". */
.btn--dark {
	background-color: var(--color-bg-navy);
}

/* Section Title
--------------------------------------------- */

/**
 * Reusable eyebrow + heading pair for section intros.
 * Apply to any two adjacent elements, e.g.:
 * <p class="section-title-small">Eyebrow</p>
 * <h2 class="section-title-large">Heading</h2>
 */
.section-title-small {
	display: block;
	margin: 0 0 0.75em;
	color: var(--color-brand);
	font-size: 0.875rem; /* 14px */
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.section-title-large {
	margin: 0 0 0.75em;
	color: var(--color-text);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
}

@media screen and (min-width: 62em) {

	.section-title-large {
		font-size: 3rem; /* 48px */
	}
}

/* Link Arrow
--------------------------------------------- */

/**
 * Reusable "read more" text link with a long arrow.
 * Works on a plain <a class="link-arrow"> or a Gutenberg Button block
 * link (add "link-arrow" as an Additional CSS Class in the block editor).
 * The arrow is a background SVG so its color (--color-arrow-grey) is
 * independent of the link's brand-colored text; keep the SVG's baked-in
 * stroke value in sync with the variable if it ever changes.
 */
.link-arrow,
.wp-block-button__link.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	color: var(--color-brand);
	font-size: 1.125rem; /* 18px */
	font-weight: 600;
	text-decoration: none;
}

.link-arrow:hover,
.link-arrow:focus,
.wp-block-button__link.link-arrow:hover,
.wp-block-button__link.link-arrow:focus {
	color: var(--color-text);
	text-decoration: underline;
}

.link-arrow::after {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 1.7em;
	height: 0.6em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10' viewBox='0 0 24 10' fill='none'%3E%3Cpath d='M0 5H23M23 5L18 1M23 5L18 9' stroke='%23B8B8B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: var(--transition);
}

.link-arrow:hover::after,
.link-arrow:focus::after,
.wp-block-button__link.link-arrow:hover::after,
.wp-block-button__link.link-arrow:focus::after {
	transform: translateX(0.35em);
}

/* Hero
--------------------------------------------- */
.hero {
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: var(--color-bg-dark);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
}

.hero-box {
	position: relative;
	z-index: 1; /* keep above .hero__video, which is also absolutely positioned inside .hero */
	padding: 1.75em 24px;
	background-color: rgba(0, 28, 41, 0.85); /* #001C29 @ 85% */
	color: #fff;
	animation: dacotrans-hero-box-in 0.8s 0.2s ease-out both;
}

@keyframes dacotrans-hero-box-in {
	from {
		opacity: 0;
		transform: translateY(40px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

	.hero-box {
		animation: none;
	}
}

.hero-box__title {
	margin: 0 0 0.5em;
	color: #fff;
	font-size: 1.5rem;
}

.hero-box__excerpt {
	margin: 0 0 1.5em;
}

.hero-box__excerpt > *:last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 62em) {

	.hero {
		height: calc(100vh - var(--header-height) - var(--hero-overlap));
	}

	.hero-inner {
		display: block;
		position: static;
	}

	.hero-box {
		position: absolute;
		right: 0;
		bottom: calc(var(--hero-overlap) * -1);
		width: 50%;
		padding: 2.5em 3em;
	}

	.hero-box__title {
		font-size: 2rem;
	}
}

/* Despre noi
--------------------------------------------- */

/**
 * Two-column homepage intro section. Content is authored in the block
 * editor on the front page (Acasa): a Group block ("despre-noi__col-left")
 * holds the section title, paragraph, and the "Citește mai mult" link (as
 * its last child); a second Group block ("despre-noi__col-right") holds
 * the right-column paragraphs. Flexbox (not grid) sizes each column to its
 * own content height independently, so a tall right column never inflates
 * the row the left column/CTA sit in. On mobile, the left column is
 * flattened via display:contents so its "Citește mai mult" link can be
 * pushed to the very end with order, after the right column.
 */
.despre-noi__content {
	display: flex;
	flex-direction: column;
}

.despre-noi__col-left *,
.despre-noi__col-right * {
	/* Cancel WordPress's own inter-block spacing (block-supports layout gap,
	   applied via the auto-injected .wp-block-group__inner-container wrapper)
	   so paragraphs/headings space out using only their own margin-bottom. */
	margin-top: 0;
}

.despre-noi__col-left > * > *:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 61.99em) {

	.hero-inner {
		padding: 0;
	}

	.despre-noi__col-left {
		display: contents;
	}

	.despre-noi__col-left .link-arrow-wrap {
		order: 10;
	}
}

@media screen and (min-width: 62em) {

	.despre-noi__content {
		flex-direction: row;
		align-items: flex-start;
		gap: 0 4rem;
	}

	.despre-noi__col-left,
	.despre-noi__col-right {
		flex: 1 1 0;
	}
}

/* Stats
--------------------------------------------- */

/**
 * Dark full-width stats band. Content (icon/number/label x 4) comes from
 * the "Stats Section" meta box on the front page, not the block editor.
 * `overflow: hidden` keeps the icons' drop-in animation clipped to the
 * section, and `position: relative` gives it a containing block to clip
 * against. The 70px vertical padding is a deliberate one-off, distinct
 * from the .section-padding (100px) convention used elsewhere.
 */
.stats {
	position: relative;
	overflow: hidden;
	padding-top: 3rem;
	padding-bottom: 3rem;
	background-color: var(--color-bg-dark);
}

.stats__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem 2rem;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: left;
}

.stat-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	margin-bottom: 1rem;
	opacity: 0;
	transform: translateY(-40px);
	transition: transform 0.6s ease, opacity 0.6s ease;
}

.stat-item__icon img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

.stats--in-view .stat-item:nth-child(1) .stat-item__icon {
	transition-delay: 0s;
}

.stats--in-view .stat-item:nth-child(2) .stat-item__icon {
	transition-delay: 0.15s;
}

.stats--in-view .stat-item:nth-child(3) .stat-item__icon {
	transition-delay: 0.3s;
}

.stats--in-view .stat-item:nth-child(4) .stat-item__icon {
	transition-delay: 0.45s;
}

.stats--in-view .stat-item__icon {
	opacity: 1;
	transform: translateY(0);
}

.stat-item__number {
	margin: 0;
	color: #fff;
	font-size: 2.5rem;
	font-weight: 600;
}

.stat-item__label {
	margin: 0;
	color: #fff;
	font-size: 1.125rem;
	font-weight: 400;
}

@media screen and (min-width: 48em) {

	.stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 62em) {

	.stats {
		padding-top: 4.375rem; /* 70px */
		padding-bottom: 4.375rem;
	}

	.stats__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.stat-item {
		align-items: flex-start;
	}

	.stat-item__number {
		font-size: 4.25rem; /* 68px */
	}

	.stat-item__label {
		font-size: 1.25rem; /* 20px */
	}
}

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

	.stat-item__icon {
		transition: none;
	}
}

/* Produse
--------------------------------------------- */

/**
 * Homepage product showcase. Header reuses the .section-title-small /
 * .section-title-large pattern from Despre noi. Content (header text +
 * the 4 items) comes from the "Produse Section" meta box, not blocks.
 *
 * The scroll-pinned desktop behaviour and the mobile fade-in reveal are
 * both progressive enhancements: everything below only activates once
 * js/produse.js adds ".js-ready" to .produse-showcase. Without it (JS
 * disabled, or IntersectionObserver unsupported), all 4 items just show
 * as a plain stacked list — nothing is ever permanently hidden by CSS.
 */
.produse {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* A light overlay so the section's existing dark text stays readable
   over whatever background image is chosen, without needing to change
   any text colors. Only added when a background image is actually set
   (.produse--has-bg), via the section-level meta box field. */
.produse--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(255, 255, 255, 0.35);
}

.produse__header,
.produse-showcase {
	position: relative;
	z-index: 1;
}

.produse__header {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 3rem;
}

.produse-item {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.5rem 0;
}

.produse-item__media {
	overflow: hidden;
	border-radius: var(--border-radius);
}

.produse-item__img {
	display: block;
	width: 100%;
	height: auto;
}

.produse-item__content {
	background-color: var(--color-bg-dark);
	padding: 3rem;
	box-shadow: var(--color-brand) 20px 20px 0;
}

.produse-item__title {
	display: inline-block;
	margin: 0 0 0.5em;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: solid 3px var(--color-bg-blue);
}

.produse-item__title:hover,
.produse-item__title:focus {
	color: var(--color-brand);
}

.produse-item__desc {
	margin: 0;
	color: #fff;
}

/* .produse-item__content has a dark card background, so the link-arrow's
   default brand-blue text (and --color-text hover) would have poor
   contrast there — override to white, same as the title/description. */
.link-arrow.produse-item__link {
	margin-top: 0.5rem;
	color: #fff;
}

.link-arrow.produse-item__link:hover,
.link-arrow.produse-item__link:focus {
	color: var(--color-bg-light);
}

.produse-showcase.js-ready .produse-item {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.produse-showcase.js-ready .produse-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media screen and (min-width: 62em) {

	.produse__header {
		flex-direction: row;
		align-items: flex-start;
		gap: 0 4rem;
	}

	.produse__header-left,
	.produse__header-right {
		flex: 1 1 0;
	}

	.produse-item__title {
		font-size: 2.5rem;
	}

	.produse-showcase.js-ready {
		position: relative;
		height: 400vh; /* 4 items x 100vh of scroll to step through */
	}

	.produse-showcase.js-ready .produse-showcase__sticky {
		position: sticky;
		top: var(--header-height);
		height: calc(100vh - var(--header-height));
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.produse-showcase.js-ready .produse-showcase__inner {
		position: relative;
		width: 100%;
		height: 60%;
	}

	.produse-showcase.js-ready .produse-item {
		position: absolute;
		inset: 0;
		flex-direction: row;
		align-items: center;
		gap: 4rem;
		padding: 0;
		transform: none;
		pointer-events: none;
		transition: opacity 0.6s ease;
	}

	.produse-showcase.js-ready .produse-item.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	.produse-showcase.js-ready .produse-item__media {
		display: flex;
		align-items: center;
		height: 100%;
		flex: 1 1 55%;
		/* Deliberately NOT clipped here — this is what lets the image below
		   break out past this column and reach full viewport width during
		   its entrance. The only clip boundary left is the pinned stage
		   itself (.produse-showcase__sticky), which is edge-to-edge. */
		overflow: visible;
	}

	/*
	 * Incoming/default state: huge, at (roughly) the width of the browser
	 * viewport. --produse-huge-scale is computed by js/produse.js as
	 * (viewport width / this image's normal rendered width) — measured
	 * per image, per resize — so this actually reaches full page width
	 * instead of an arbitrary guessed scale. Settling to scale(1) shrinks
	 * it back down to fit exactly in the layout below.
	 */
	.produse-showcase.js-ready .produse-item__img {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 100%;
		transform: scale(var(--produse-huge-scale, 2.2));
		transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.produse-showcase.js-ready .produse-item.is-active .produse-item__img {
		transform: scale(1);
	}

	.produse-showcase.js-ready .produse-item__content {
		flex: 1 1 40%;
	}
}

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

	.produse-showcase.js-ready .produse-item,
	.produse-showcase.js-ready .produse-item__img {
		transition: none;
	}
}

/* Productie proprie
--------------------------------------------- */

/**
 * Full-bleed section: two videos stacked back to back with no gap
 * between them, each full width. Content (which video files play) comes
 * from the "Productie proprie Section" meta box. The whole section is a
 * single link to the Productie page — videos autoplay/muted/loop with no
 * controls, so there's no interactive element inside the link to
 * conflict with click-through.
 */
.productie {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.productie__item {
	position: relative;
}

.productie__video {
	display: block;
	width: 100%;
	height: 16rem;
	object-fit: cover;
}

@media screen and (min-width: 62em) {

	.productie__video {
		height: 24rem;
	}
}

/**
 * Overlay word on each video, left-aligned. font-size uses clamp() so it
 * scales fluidly with viewport width (up to 13rem on large displays)
 * rather than jumping at a couple of fixed breakpoints — that's what
 * keeps a long word like "PRODUCTIE" from overflowing a narrow screen
 * at some in-between width a fixed breakpoint wouldn't have covered.
 *
 * Settled state (opacity/transform below) is also the plain, no-JS
 * default — js/productie-video-labels.js is what hides a label
 * (.productie__label--pending) and re-triggers it in from the left the
 * first time its video scrolls into view; without JS the word simply
 * shows immediately in its resting position, which is a fine fallback.
 * The entrance animation itself (no fill-mode) is only ever active
 * during .is-animating; once it ends the script drops both classes,
 * landing back on these exact settled values with no visual jump, so
 * :hover's opacity change afterward is never fighting a filled
 * animation end-state.
 */
.productie__label {
	position: absolute;
	top: 50%;
	left: 1.5rem;
	transform: translate(0, -50%);
	opacity: 1;
	color: #fff;
	font-size: clamp(2.5rem, 13vw, 13rem);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.productie__item:hover .productie__label {
	opacity: 0.5;
}

.productie__label--pending {
	opacity: 0;
	transform: translate(-3rem, -50%);
}

.productie__label--pending.is-animating {
	animation: productie-label-in 0.9s ease-out;
}

@keyframes productie-label-in {
	from {
		opacity: 0;
		transform: translate(-3rem, -50%);
	}

	to {
		opacity: 1;
		transform: translate(0, -50%);
	}
}

/* Transport
--------------------------------------------- */

/**
 * Two-column homepage section, same authoring pattern as Despre noi: two
 * Group blocks in the front page's content ("transport__col-left" and
 * "transport__col-right"), picked out via dacotrans_theme_get_content_section()
 * so both sections can share the same block-editor content area.
 *
 * Both columns are normal, in-flow flex children (no position:absolute,
 * no negative margins) so the section's height is always just "however
 * tall its content naturally is" — it can never collapse or overlap a
 * neighboring section. The image uses a fixed height (18rem mobile,
 * 28rem desktop) rather than trying to stretch to pixel-match the text
 * column's height: predictable and resize-stable beats pixel-perfect here,
 * since a fixed height can never distort/rescale as the viewport changes —
 * only its width (100%) responds, and object-fit:cover crops accordingly.
 */
.transport {
	background-color: #f1f1f1;
	background-image: url('/wp-content/uploads/2026/08/truck.jpg');
    background-repeat: no-repeat;
	background-size: 250px;
    background-position: center right;

}

.transport-inner {
	display: flex;
	flex-direction: column;
	width: 65%;
}

.transport__col-left {
	padding: 0 20px;
}

@media screen and (min-width: 62em) {

	.transport-inner {
		flex-direction: row;
		align-items: center;
		gap: 0 4rem;
		width: 50%;
	}

	.transport__col-left {
		flex: 1 1 50%;
		padding-left: max(20px, calc((100vw - 1400px) / 2));
		padding-right: 0;
	}

	.transport {
		background-size: 400px;
	}
}

/* Small mobile — adjust value as needed */
@media (max-width: 38em) {
    .transport {
        background-position: 250px center;
    }
}
/* Footer
--------------------------------------------- */

/**
 * Global 4-column footer. Every column (and the bottom bar) is a
 * registered widget area — see inc/widgets.php ('footer-1' through
 * 'footer-4', plus 'footer-bottom') — so titles, link lists, addresses,
 * phone numbers, and copyright text are all editable from
 * Appearance > Widgets with no code changes. The column 1 logo comes
 * from the Customizer's Site Identity, same source as the header.
 */
.site-footer {
	background-color: var(--color-bg-light);
}

.footer-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
	text-align: center;
}

.footer-col--1 .custom-logo-link {
	margin: 0 auto 1.5rem;
}

.footer-col__title {
	margin: 0 0 1em;
	color: var(--color-brand);
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
}

.footer-widget {
	margin-bottom: 1rem;
}

.footer-widget:last-child {
	margin-bottom: 0;
}

.footer-widget p {
	margin: 0;
	font-size: .95rem;
}

.footer-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-widget li {
	margin-bottom: 0.75em;
}

.footer-widget li:last-child {
	margin-bottom: 0;
}

.footer-widget a {
	color: var(--color-text);
	text-decoration: none;
	transition: var(--transition);
}

.footer-widget a:hover,
.footer-widget a:focus {
	color: var(--color-brand);
}

.footer-bottom {
	border-top: 1px solid rgba(14, 36, 47, 0.12);
}

/*
 * dynamic_sidebar('footer-bottom') can output either one widget (holding
 * both the copyright paragraph and the links list as children) or several
 * separate widgets, depending on how the admin builds it — so both
 * .footer-bottom-inner (multiple widgets) and .footer-bottom-widget (one
 * widget's own children) are flexed the same way, and whichever level
 * actually has more than one child is the one that visibly splits apart.
 */
.footer-bottom-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	font-size: 0.875rem;
	text-align: center;
}

.footer-bottom-inner p {
	margin: 0;
	color: var(--color-text-light);
	font-size: .9rem;
	font-weight: 500;
}

.footer-bottom-widget {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.footer-bottom-widget ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5em 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-bottom-widget a {
	color: var(--color-text);
	text-decoration: none;
}

.footer-bottom-widget a:hover,
.footer-bottom-widget a:focus {
	color: var(--color-brand);
}

@media screen and (min-width: 48em) {

	.footer-cols {
		grid-template-columns: repeat(2, 1fr);
		text-align: left;
	}

	.footer-col--1 .custom-logo-link {
		margin-left: 0;
		margin-right: 0;
	}

	.footer-bottom-inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	.footer-bottom-widget {
		flex-direction: row;
		justify-content: space-between;
		flex: 1 1 auto;
	}

	.footer-bottom-widget ul {
		justify-content: flex-end;
	}
}

@media screen and (min-width: 62em) {

	.footer-cols {
		grid-template-columns: repeat(4, 1fr);
		gap: 3rem;
	}
}

/* Despre Noi Page (Intro, Banner, Info, Gallery)
--------------------------------------------- */

/**
 * Section 1 — Intro (white bg). Two-column layout, same authoring
 * pattern as the homepage's Despre noi/Transport sections: Group blocks
 * classed "despre-intro__col-left" (small title + big title, reusing
 * .section-title-small/.section-title-large) and "despre-intro__col-right"
 * (paragraph), picked out via dacotrans_theme_get_content_section().
 */
.despre-intro__content {
	display: flex;
	flex-direction: column;
}

.despre-intro__col-left *,
.despre-intro__col-right * {
	margin-top: 0;
}

.despre-intro__col-left > * > *:last-child,
.despre-intro__col-right > * > *:last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 62em) {

	.despre-intro__content {
		flex-direction: row;
		align-items: flex-start;
		gap: 0 4rem;
	}

	.despre-intro__col-left,
	.despre-intro__col-right {
		flex: 1 1 0;
	}
}

/**
 * Section 2 — full-bleed banner video (autoplay/muted/loop). Video comes
 * from the "Despre noi — Banner Section" meta box, not the block editor
 * (it's section chrome, same reasoning as the Hero/Productie background
 * media). Fixed height at each breakpoint rather than trying to
 * pixel-match anything — predictable and resize-stable.
 */
.despre-banner__video {
	display: block;
	width: 100%;
	height: 20rem;
	object-fit: cover;
	object-position: center;
}

@media screen and (min-width: 62em) {

	.despre-banner__video {
		height: 32rem;
	}
}

/**
 * Section 3 — Info (dark blue bg). An H2 title spanning the full width,
 * a left-column paragraph, and a right-column Timeline Slides slider —
 * title + left column are top-level block-editor siblings
 * ("despre-info__title", "despre-info__col-left"), the right column is
 * the .despre-info__slider markup below (meta-box driven, not block
 * content). CSS Grid lets the title span both columns above them.
 *
 * From the 62em breakpoint (where col-left/col-right actually sit side
 * by side), the section's own background is split 50/50 — brand blue
 * under the text half, --color-bg-dark under the slider half — via a
 * plain linear-gradient on the section itself. The <section> is
 * full-bleed (only the .container inside it is width-constrained), so
 * that right half naturally reaches the true viewport edge without any
 * extra full-bleed markup, while .despre-info__content's grid (and the
 * slider inside it) stays exactly where it already was, still aligned
 * to the normal .container gutter. On mobile the columns stack, so
 * there's no side-by-side split to speak of — the section itself stays
 * solid brand blue, and only .despre-info__col-right (the slider block)
 * gets --color-bg-dark, as its own contained box.
 */
.despre-info {
	background-color: var(--color-brand);
	color: #fff;
}

.despre-info__col-right {
	margin-left: -20px;
	margin-right: -20px;
	margin-bottom: -3.5rem; /* cancels .section-padding's bottom padding, so the dark box reaches the section's true bottom edge instead of leaving it showing through as blue */
	padding: 3.5rem 20px calc(2rem + 3.5rem) 40px;
	background-color: var(--color-bg-dark);
}

@media screen and (min-width: 62em) {

	.despre-info__col-right {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
		padding: 0 0 0 40px;
		background-color: transparent;
	}
}

@media screen and (min-width: 62em) {

	.despre-info {
		background: linear-gradient(to right, var(--color-brand) 50%, var(--color-bg-dark) 50%);
	}
}

.despre-info__content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.despre-info__title {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
}

.despre-info__col-left *,
.despre-info__col-right * {
	margin-top: 0;
}

.despre-info__col-left > *:last-child,
.despre-info__col-right > *:last-child {
	margin-bottom: 0;
}

.despre-info__col-left {
	padding-bottom: 1.5rem;
}

@media screen and (min-width: 62em) {

	.despre-info__content {
		grid-template-columns: 1fr 1fr;
		gap: 2rem 4rem;
	}

	.despre-info__title {
		font-size: 2.5rem;
	}

	.despre-info__col-left {
		padding-bottom: 0;
	}
}

/**
 * Timeline Slides slider (Section 3 right column). Slides swap via a
 * hard display:none/block toggle (not a crossfade) — each slide's
 * paragraph can be a different length, and an absolutely-positioned
 * overlay would need a fixed height that either crops or leaves gaps.
 * Without JS (no ".js-ready"), every slide just shows stacked in a plain
 * readable list and the nav arrows stay hidden, since they wouldn't
 * function anyway.
 */
.despre-info__slide {
	margin-bottom: 2rem;
}

.despre-info__slider.js-ready .despre-info__slide {
	display: none;
	margin-bottom: 0;
}

.despre-info__slider.js-ready .despre-info__slide.is-active {
	display: block;
}

.despre-info__slide-year {
	margin: 0 0 0.5em;
	font-size: 5rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
}

.despre-info__slide-text {
	margin: 0;
}

.despre-info__nav-wrap {
	display: none;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
}

.despre-info__slider.js-ready .despre-info__nav-wrap {
	display: flex;
}

.despre-info__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.15);
	cursor: pointer;
}

.despre-info__nav:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

.despre-info__nav::before {
	content: "";
	width: 10px;
	height: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.despre-info__nav--prev::before {
	transform: rotate(90deg);
}

.despre-info__nav--next::before {
	transform: rotate(-90deg);
}

/**
 * Section 4 — Gallery (light grey bg). Title/paragraph stay contained
 * and centered like every other section, but the images run as a
 * full-width, edge-to-edge marquee: .despre-gallery__marquee clips
 * overflow, .despre-gallery__track holds two back-to-back renders of the
 * same Gallery block (see the PHP template for why two separate renders
 * rather than one duplicated copy) and animates from translateX(0) to
 * translateX(-50%) — exactly one copy's width — on an infinite loop, so
 * the reset is invisible. Pausing on hover is a plain animation-play-state
 * toggle (the ":hover" rule below) — js/despre-gallery-marquee.js only
 * adds one more pause condition on top of that: keeping the marquee
 * paused for as long as the native WP lightbox is open, since ":hover"
 * stops matching once the lightbox's own overlay covers the viewport
 * (the cursor is no longer "over" the marquee element at that point),
 * and a moving source thumbnail underneath an open lightbox caused a
 * visibly wrong frame while the lightbox's own transition was running.
 * The Gallery block's own
 * grid/column layout is overridden to a single non-wrapping row of
 * fixed-HEIGHT (not fixed-size) cells, since a marquee needs one
 * continuous strip rather than the block's normal wrapping grid.
 * object-fit:contain (not cover) is deliberate — these are certificate
 * photos, and cropping them would cut off text.
 *
 * Cells are fixed-height/auto-width, not fixed-width squares: every
 * certificate photo is portrait, so forcing them into a square box left
 * empty letterboxed space on either side of the actual visible photo
 * (object-fit:contain centers the photo but doesn't shrink the box).
 * WP core's own zoom-icon button is positioned "top:16px; right:16px"
 * relative to that box's corner (see the "Native WP lightbox" comment
 * further down) — with a square box that corner sat in the blank
 * letterbox padding, off to the right of the actual photo. Sizing the
 * box to the photo's own aspect ratio (fixed height, auto width) makes
 * the box hug the visible photo exactly, so the button's corner lands
 * on the photo again.
 */
.despre-gallery {
	background-color: var(--color-bg-light-grey);
}

.despre-gallery__title {
	margin: 0 0 0.75em;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.despre-gallery__text {
	max-width: 46em;
	margin: 0 0 2.5rem;
}

.despre-gallery__marquee {
	width: 100%;
	overflow: hidden;
}

.despre-gallery__track {
	display: flex;
	width: max-content;
	animation: despre-gallery-marquee 90s linear infinite;
}

.despre-gallery__marquee:hover .despre-gallery__track {
	animation-play-state: paused;
}

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

	.despre-gallery__track {
		animation: none;
	}
}

.despre-gallery__track .despre-gallery__items.wp-block-gallery {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 1rem !important;
	margin: 0 0.5rem !important;
}

.despre-gallery__track .despre-gallery__items .wp-block-image {
	display: block !important;
	flex: 0 0 auto !important;
	width: auto !important;
	height: 12rem;
	margin: 0;
}

.despre-gallery__track .despre-gallery__items .wp-block-image img {
	display: block;
	width: auto !important;
	height: 100% !important;
	object-fit: contain !important;
}

@keyframes despre-gallery-marquee {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media screen and (min-width: 62em) {

	.despre-gallery__track .despre-gallery__items .wp-block-image {
		height: 16rem;
	}
}

/**
 * Native WP lightbox overlay (opened by clicking a gallery image). Core's
 * own JS sizes ".lightbox-image-container" from a CSS custom property
 * that's derived from the THUMBNAIL's clicked rect (used for the
 * zoom-from-thumbnail animation) — not from each image's own natural
 * size. Since every thumbnail in our grid is the same fixed size, every
 * image was ending up in an almost-identical container box regardless of
 * its own dimensions, which is why differently-shaped images looked
 * "too small"/"too large" relative to each other, and why plain
 * width/height:auto didn't help (it was resolving against that same
 * container, not each image's intrinsic size).
 *
 * Fix: give every image the exact same fixed, viewport-relative box
 * (90vw × 85vh, identical for all of them — no more size inconsistency
 * between images) and let object-fit:contain fit each image's own
 * aspect ratio within it (no cropping, ever). object-fit:contain also
 * needs !important to beat the inline object-fit:cover style WP's JS
 * sets on the <img> itself — a stylesheet's !important is the one thing
 * that outranks a plain inline style in the cascade.
 *
 * min-width/min-height MUST also be pinned here. Core's own
 * ".wp-lightbox-overlay .wp-block-image img" rule sets
 * "min-height: var(--wp--lightbox-image-height)" (no !important) —
 * that's core's own per-image zoom-animation size, computed from that
 * image's aspect ratio, and for taller images it comes out bigger than
 * our fixed 85vh box. min-height always wins over max-height when the
 * two conflict (that's the CSS spec, not a bug), so without overriding
 * min-height too, tall images were being forced past 85vh and clipped
 * by the container's overflow:hidden — THIS, not the marquee/hover
 * pausing, was the real source of the "cropped zoomed image" bug.
 */
.wp-lightbox-overlay .lightbox-image-container,
.wp-lightbox-overlay .lightbox-image-container img {
	width: 90vw !important;
	height: 85vh !important;
	min-width: 90vw !important;
	min-height: 85vh !important;
	max-width: 90vw !important;
	max-height: 85vh !important;
}

.wp-lightbox-overlay .lightbox-image-container img {
	object-fit: contain !important;
}

/* Despre noi — Puncte de lucru (Section 5)
--------------------------------------------- */

/**
 * Title + paragraph mirror the Certificari gallery section's exactly
 * (same font-size, same max-width on the paragraph), then 2 fixed
 * columns — each an image, a title, and a paragraph — stacked on mobile,
 * side by side from the same 62em breakpoint used everywhere else.
 */
.despre-puncte__title {
	margin: 0 0 0.75em;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.despre-puncte__text {
	max-width: 46em;
	margin: 0 0 2.5rem;
}

.despre-puncte__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

.despre-puncte__col-img {
	display: block;
	width: 100%;
	height: 16rem;
	object-fit: cover;
}

.despre-puncte__col-body {
	padding: 1.5rem;
	background-color: var(--color-bg-light-grey);
}

.despre-puncte__col-title {
	margin: 0 0 0.5em;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.despre-puncte__col-text {
	margin: 0;
}

.despre-puncte__text p,
.despre-puncte__col-text p {
	margin-top: 0;
}

.despre-puncte__text p:last-child,
.despre-puncte__col-text p:last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 62em) {

	.despre-puncte__cols {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}

	.despre-puncte__col-img {
		height: 20rem;
	}

	.despre-puncte__col-body {
		padding: 2rem;
	}
}

/* Despre noi — Sustenabilitate (Section 6)
--------------------------------------------- */

/**
 * Text left (light background) / full-bleed image right — same layout
 * mechanics as .productie-showcase (see that section's own comment for
 * why the calc() is there: it aligns the text's OUTER edge with the
 * site's normal .container gutter while the image still reaches the
 * true viewport edge), just a single plain image instead of a
 * slideshow, so there's no slider markup/JS here at all.
 */
.despre-sustenabilitate {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.despre-sustenabilitate__text {
	display: flex;
	align-items: center;
	padding: 2.5rem 20px;
	background-color: var(--color-bg-light-grey);
}

.despre-sustenabilitate__heading {
	margin: 0 0 0.75em;
	font-size: 2.5rem;
}

.despre-sustenabilitate__paragraph {
	margin: 0;
}

.despre-sustenabilitate__paragraph p {
	margin-top: 0;
}

.despre-sustenabilitate__paragraph p:last-child {
	margin-bottom: 0;
}

/**
 * Optional thumbnails right after the paragraph (e.g. 3 certificate
 * photos). Same fixed-height/auto-width + object-fit:contain treatment
 * as the Certificari gallery marquee (see that section's own comment) —
 * shown at their natural aspect ratio, no cropping.
 */
.despre-sustenabilitate__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.5rem;
}

.despre-sustenabilitate__thumb {
	display: block;
	width: auto;
	height: 15rem;
	max-width: 100%;
	object-fit: contain;
	background-color: #fff;
	border: 1px solid var(--color-bg-light);
	padding: 0.5rem;
}

.despre-sustenabilitate__image {
	display: block;
	width: 100%;
	height: 20rem;
	object-fit: cover;
}

@media screen and (min-width: 62em) {

	.despre-sustenabilitate {
		flex-direction: row;
	}

	.despre-sustenabilitate__text {
		width: 50%;
		padding: 3rem 3rem 3rem max(20px, calc((100vw - 1400px) / 2));
	}

	/**
	 * height:auto + align-self:stretch (rather than a fixed height like
	 * the mobile rule above) lets the image grow to match the text
	 * column's actual height — which now varies since the paragraph can
	 * hold more than one <p> via wpautop(). A fixed height here would
	 * leave a gap under the image whenever the text runs taller than
	 * that fixed value. min-height keeps it from looking short when the
	 * text is brief.
	 */
	.despre-sustenabilitate__image {
		width: 50%;
		height: auto;
		min-height: 28rem;
		align-self: stretch;
	}
}

/* Despre noi — Proiectele noastre (Section 7)
--------------------------------------------- */

/**
 * Title + paragraph mirror the Puncte de lucru section's exactly (same
 * font-size, same max-width, same wpautop multi-paragraph handling). No
 * bottom padding on the section itself — the slider is the last thing on
 * the page and should sit flush against whatever follows, with its own
 * box/media padding providing whatever spacing is needed.
 *
 * Below that, a full-width (not container-contained) slider: each slide
 * is a project image (.despre-proiecte__media, fixed height at every
 * breakpoint so the image portion always looks bannerlike) plus a text
 * box. The box reuses the homepage hero's visual style (dark translucent
 * background, white text, same title scale) — see .hero-box — but on
 * desktop it's pinned to the image's full height (top:0 to bottom:0, so
 * it touches both edges) and capped at max-width:40% instead of a fixed
 * width, left-aligned instead of the hero's right. Its left padding is
 * pushed out further than the hero's own (4.5rem instead of 3em) so the
 * prev arrow — which sits at a fixed left:1rem regardless of the box —
 * never overlaps the text.
 *
 * On MOBILE the box is not overlaid at all: it drops out of
 * position:absolute and becomes a normal block sitting right below the
 * image, since a 40%-wide box would be unreadably narrow on a phone.
 * That's also why slides swap with a hard display:none/block instead of
 * a crossfade — see js/despre-proiecte-slider.js's own comment.
 */
.despre-proiecte.section-padding {
	padding-bottom: 0;
}

.despre-proiecte__title {
	margin: 0 0 0.75em;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.despre-proiecte__text {
	max-width: 46em;
	margin: 0 0 2.5rem;
}

.despre-proiecte__text p {
	margin-top: 0;
}

.despre-proiecte__text p:last-child {
	margin-bottom: 0;
}

.despre-proiecte__slider {
	position: relative;
	width: 100%;
}

.despre-proiecte__slide {
	position: relative;
	display: block;
	width: 100%;
}

.despre-proiecte__slider.js-ready .despre-proiecte__slide {
	display: none;
}

.despre-proiecte__slider.js-ready .despre-proiecte__slide.is-active {
	display: block;
}

.despre-proiecte__media {
	position: relative;
	width: 100%;
	height: 26rem;
	overflow: hidden;
}

.despre-proiecte__slide-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.despre-proiecte__box {
	width: 100%;
	padding: 1.75em 24px;
	background-color: rgba(0, 28, 41, 0.85);
	color: #fff;
}

.despre-proiecte__box-title {
	margin: 0 0 0.5em;
	color: #fff;
	font-size: 1.5rem;
}

.despre-proiecte__box-text {
	margin: 0;
}

.despre-proiecte__nav {
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 13rem;
	transform: translateY(-50%);
	width: 2.75rem;
	height: 2.75rem;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	z-index: 1;
}

.despre-proiecte__slider.js-ready .despre-proiecte__nav {
	display: flex;
}

.despre-proiecte__nav:hover {
	background-color: #fff;
}

.despre-proiecte__nav::before {
	content: "";
	width: 10px;
	height: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23001C29' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.despre-proiecte__nav--prev {
	left: 1rem;
}

.despre-proiecte__nav--prev::before {
	transform: rotate(90deg);
}

.despre-proiecte__nav--next {
	right: 1rem;
}

.despre-proiecte__nav--next::before {
	transform: rotate(-90deg);
}

@media screen and (min-width: 62em) {

	.despre-proiecte__media {
		height: 40rem;
	}

	.despre-proiecte__nav {
		top: 20rem;
	}

	.despre-proiecte__box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: auto;
		max-width: 40%;
		padding: 2.5em 3em 2.5em 4.5rem;
	}

	.despre-proiecte__box-title {
		font-size: 2rem;
	}
}

/* Produse Categorii (accordion product-spec tables)
--------------------------------------------- */

/**
 * Shared by all 4 Produse pages (see template-parts/content-produse-categorii.php
 * and page-produse-metalurgice.php / page-plase.php / page-profile-laminate.php /
 * page-produse-fasonate.php) — one accordion per "Categorie produs" post
 * assigned to that page. js/produse-accordion.js adds "js-ready" and takes
 * over expand/collapse + filtering; without it every panel just stays
 * fully expanded (see the ":not(.js-ready)" rule below) and every table
 * row shows its own Tip value, so the page is still fully readable.
 */
/**
 * Section 1 — Intro (white bg), the page's own heading — same authoring
 * pattern and markup shape as the Despre noi page's intro: Group blocks
 * classed "produse-intro__col-left" (small title + big title) and
 * "produse-intro__col-right" (paragraph), picked out via
 * dacotrans_theme_get_content_section().
 */
.produse-intro__content {
	display: flex;
	flex-direction: column;
}

.produse-intro__col-left *,
.produse-intro__col-right * {
	margin-top: 0;
}

.produse-intro__col-left > * > *:last-child,
.produse-intro__col-right > * > *:last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 62em) {

	.produse-intro__content {
		flex-direction: row;
		align-items: flex-start;
		gap: 0 4rem;
	}

	.produse-intro__col-left,
	.produse-intro__col-right {
		flex: 1 1 0;
	}
}

/**
 * Produse pages, Section 1+2 merged — the banner image as a full-bleed
 * background with the intro text (same .produse-intro__content grid
 * used elsewhere) overlaid directly on top of it in a translucent dark
 * box — see content-produse-hero.php. The box is absolutely positioned
 * over the image (not stacked below it in normal flow), so the
 * section's total height is just the image's own height; text-shadow
 * on the text itself as a second layer of legibility on top of that.
 */
.produse-hero {
	position: relative;
	width: 100%;
}

.produse-hero__bg {
	display: block;
	width: 100%;
	height: 24rem;
	object-fit: cover;
	object-position: center;
}

.produse-hero__box {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.25em 0;
	background-color: rgba(0, 28, 41, 0.85); /* #001C29 @ 85%, same as .hero-box */
	color: #fff;
}

.produse-hero__box .section-title-small,
.produse-hero__box .section-title-large,
.produse-hero__box .produse-intro__col-right p {
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

@media screen and (min-width: 62em) {

	.produse-hero__bg {
		height: 32rem;
	}

	.produse-hero__box {
		padding: 2rem 0;
	}
}

.produse-accordion {
	border: 1px solid var(--color-bg-light);
	margin-bottom: 1.5rem;
}

.produse-accordion:last-child {
	margin-bottom: 0;
}

.produse-accordion__header {
	margin: 0;
}

.produse-accordion__toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	width: 100%;
	height: 150px;
	padding: 1em 1.25em;
	background-color: var(--color-brand);
	color: #fff;
	border: none;
	border-radius: 0;
	overflow: hidden;
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 700;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
	transition: var(--transition);
}

.produse-accordion__toggle:hover,
.produse-accordion__toggle:focus {
	filter: brightness(0.92);
}

/**
 * Optional background photo (set via the "Categorie produs" admin screen,
 * see inc/product-category-cpt.php's "Imagine buton accordion" field) —
 * fills the whole 150px-tall button, with a dark overlay on top so the
 * title/chevron (kept above both via z-index) stay readable regardless
 * of the photo underneath.
 */
.produse-accordion__toggle-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.produse-accordion__toggle-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 28, 41, 0.55); /* #001C29 @ 55% */
	z-index: 1;
}

.produse-accordion__title,
.produse-accordion__chevron {
	position: relative;
	z-index: 2;
}

.produse-accordion__chevron {
	flex-shrink: 0;
	width: 14px;
	height: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.25s ease;
}

.produse-accordion.is-open .produse-accordion__chevron {
	transform: rotate(180deg);
}

.produse-accordion__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.35s ease;
}

/* No-JS fallback: everything just stays open. */
.produse-categorii:not(.js-ready) .produse-accordion__panel {
	max-height: none;
}

.produse-accordion__content {
	padding: 1.5em 1.25em;
}

.produse-accordion__banner {
	display: block;
	width: 100%;
	height: 14rem;
	object-fit: cover;
	margin-bottom: 1.5em;
}

@media screen and (min-width: 48em) {

	.produse-accordion__banner {
		height: 20rem;
	}
}

.produse-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
	margin-bottom: 1.5em;
}

.produse-filters__select {
	flex: 1 1 100%;
	padding: 0.6em 2.5em 0.6em 1em;
	border: 1px solid var(--color-bg-light);
	border-radius: var(--border-radius);
	background-color: #fff;
	color: var(--color-text);
	font-family: inherit;
	font-size: 0.9375rem;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005781' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1em center;
	background-size: 1em;
}

.produse-filters__pdf {
	font-size: 0.9375rem;
}

@media screen and (min-width: 48em) {

	.produse-filters__select {
		flex: 0 1 220px;
	}

	.produse-filters__pdf {
		margin-left: auto;
	}
}

.produse-table-wrap {
	overflow-x: auto;
}

.produse-table {
	width: 100%;
	min-width: 40rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.produse-table th,
.produse-table td {
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--color-bg-light);
	text-align: left;
	white-space: nowrap;
}

.produse-table th {
	color: var(--color-text-light);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.produse-table__nr-cell {
	color: var(--color-text-light);
}

.produse-table td.produse-table__tip-cell {
	white-space: normal;
	max-width: 16rem;
}

.produse-table__nota {
	display: block;
	margin-top: 0.25em;
	color: var(--color-text-light);
	font-size: 0.8125rem;
	font-weight: 400;
}

/* Consecutive rows sharing the same Tip look like one merged cell: the
   repeated text is hidden (not removed — filtering needs it on every
   row) and every row but the last of the group drops its bottom border,
   so only the group's final row shows the divider. */
.produse-table__row--tip-repeat .produse-table__tip-cell {
	visibility: hidden;
}

.produse-table__row:not(.produse-table__row--tip-group-end) .produse-table__tip-cell {
	border-bottom: none;
}

.produse-table__cta.link-arrow {
	font-size: 0.9375rem;
}

/* Productie Page (Hero, Showcase sections)
--------------------------------------------- */

/**
 * Two-column intro grid — same shape as .produse-intro__content.
 */
.productie-page-intro__content {
	display: flex;
	flex-direction: column;
}

.productie-page-intro__col-left *,
.productie-page-intro__col-right * {
	margin-top: 0;
}

@media screen and (min-width: 62em) {

	.productie-page-intro__content {
		flex-direction: row;
		align-items: flex-start;
		gap: 0 4rem;
	}

	.productie-page-intro__col-left,
	.productie-page-intro__col-right {
		flex: 1 1 0;
	}
}

/**
 * Section 1+2 merged — the banner image as a full-bleed background with
 * the intro text (.productie-page-intro__content, above) overlaid
 * directly on top of it in a translucent dark box — see
 * content-productie-page-hero.php. Same technique as the 4 Produse
 * pages' .produse-hero: the box is absolutely positioned over the
 * image (not stacked below it in normal flow), so the section's total
 * height is just the image's own height; text-shadow on the text
 * itself as a second layer of legibility on top of that.
 */
.productie-page-hero {
	position: relative;
	width: 100%;
}

.productie-page-hero__bg {
	display: block;
	width: 100%;
	height: 24rem;
	object-fit: cover;
	object-position: center;
}

.productie-page-hero__box {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.25em 0;
	background-color: rgba(0, 28, 41, 0.85); /* #001C29 @ 85%, same as .hero-box */
	color: #fff;
}

.productie-page-hero__box .section-title-small,
.productie-page-hero__box .section-title-large,
.productie-page-hero__box .productie-page-intro__col-right p {
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

@media screen and (min-width: 62em) {

	.productie-page-hero__bg {
		height: 32rem;
	}

	.productie-page-hero__box {
		padding: 2rem 0;
	}
}

/**
 * Showcase sections: a text box + an image slideshow, side by side on
 * desktop. The slideshow always breaks out to its own OUTER edge of the
 * viewport (full-bleed), while the text box's OUTER edge lines up with
 * the site's normal .container gutter (max-width: 1400px, 20px padding —
 * see .container) via the same "half of (100vw - 1400px)" calc() already
 * used elsewhere in this stylesheet for edge-aligned positioning. The
 * default layout is text-left/slideshow-right; .productie-showcase--reverse
 * flips which side each one is on (slideshow-left/text-right) while
 * keeping the text markup FIRST in the DOM in both cases, so reading/tab
 * order always hits the text before the slideshow.
 */
.productie-showcase {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.productie-showcase__text {
	display: flex;
	align-items: center;
	padding: 2.5rem 20px;
}

.productie-showcase__text-inner {
	max-width: auto;
}

.productie-showcase__heading {
	margin: 0 0 0.75em;
	font-size: 2.5rem;
}

.productie-showcase__paragraph {
	margin: 0;
}

/**
 * Optional specs table (label/value rows, e.g. "Material" / "Sarma
 * zincata ..."), right after the paragraph. minmax(0, ...) on both
 * columns is deliberate — without it a long unbroken value can blow out
 * the grid's track width instead of wrapping within its own column.
 */
.productie-showcase__specs {
	margin-top: 1.5rem;
}

.productie-showcase__spec {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	gap: 0.5rem 1.5rem;
	padding: 0.85em 0;
	border-bottom: 1px solid var(--color-bg-light);
}

.productie-showcase__spec-label {
	color: var(--color-text-light);
}

.productie-showcase__spec-value {
	font-weight: 700;
}

/**
 * Optional "Descarca fisa tehnica" QR code, right after the specs
 * table — deliberately NOT a link to the PDF; the PDF is only meant to
 * be reachable by scanning the code with a phone, not by clicking it
 * on the page itself.
 */
.productie-showcase__fisa {
	margin-top: 2rem;
}

.productie-showcase__fisa-label {
	margin: 0 0 0.75em;
	font-weight: 700;
}

.productie-showcase__fisa-qr {
	display: block;
}

.qr-code {
	display: block;
	width: 140px;
	height: 140px;
}

.productie-showcase__slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 20rem;
}

.productie-showcase__slide {
	display: block;
	width: 100%;
	height: 20rem;
	object-fit: cover;
}

.productie-showcase__slider.js-ready .productie-showcase__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.productie-showcase__slider.js-ready .productie-showcase__slide.is-active {
	opacity: 1;
}

.productie-showcase__nav {
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.75rem;
	height: 2.75rem;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	z-index: 1;
}

.productie-showcase__slider.js-ready .productie-showcase__nav {
	display: flex;
}

.productie-showcase__nav:hover {
	background-color: #fff;
}

.productie-showcase__nav::before {
	content: "";
	width: 10px;
	height: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23001C29' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.productie-showcase__nav--prev {
	left: 1rem;
}

.productie-showcase__nav--prev::before {
	transform: rotate(90deg);
}

.productie-showcase__nav--next {
	right: 1rem;
}

.productie-showcase__nav--next::before {
	transform: rotate(-90deg);
}

@media screen and (min-width: 62em) {

	.productie-showcase {
		flex-direction: row;
	}

	.productie-showcase__text {
		width: 50%;
		padding: 3rem 3rem 3rem max(20px, calc((100vw - 1400px) / 2));
	}

	/**
	 * height:auto + align-self:stretch (rather than a fixed height) lets
	 * the slider grow to match the text column's actual height, which
	 * now varies with the optional specs table/QR code — same technique
	 * as .despre-sustenabilitate__image. min-height keeps it from
	 * looking short when the text column is brief.
	 *
	 * The slide <img> itself ALSO needs height:100% (not a fixed rem),
	 * and not just for the ".js-ready" state below — js/productie-showcase-slider.js
	 * deliberately skips adding "js-ready" for a single-image section
	 * (no nav/crossfade needed for just one image), which is the common
	 * case, so a fixed-height fallback here would leave a visible gap
	 * under a single image whenever the text column (and therefore the
	 * now-dynamic slider height) is taller than that fixed value.
	 */
	.productie-showcase__slider {
		width: 50%;
		height: auto;
		min-height: 28rem;
		align-self: stretch;
	}

	.productie-showcase__slide {
		height: 100%;
	}

	.productie-showcase--reverse {
		flex-direction: row-reverse;
	}

	.productie-showcase--reverse .productie-showcase__text {
		padding: 3rem max(20px, calc((100vw - 1400px) / 2)) 3rem 3rem;
	}
}

/* Servicii Transport Page (Intro, Banner, Boxes)
--------------------------------------------- */

/**
 * Intro + banner mirror the Despre noi/Produse/Productie pages exactly
 * (same two-column intro, same full-width banner image).
 */
.servicii-transport-intro__content {
	display: flex;
	flex-direction: column;
}

.servicii-transport-intro__col-left *,
.servicii-transport-intro__col-right * {
	margin-top: 0;
}

@media screen and (min-width: 62em) {

	.servicii-transport-intro__content {
		flex-direction: row;
		align-items: flex-start;
		gap: 0 4rem;
	}

	.servicii-transport-intro__col-left,
	.servicii-transport-intro__col-right {
		flex: 1 1 0;
	}
}

.servicii-transport-banner__img {
	display: block;
	width: 100%;
	height: 20rem;
	object-fit: cover;
}

@media screen and (min-width: 62em) {

	.servicii-transport-banner__img {
		height: 32rem;
	}
}

/**
 * Boxes grid: 1 column mobile, 3 per row on desktop. Each box's title
 * (icon + H2) sits full width, then Gama dimensionala / Mod de livrare /
 * UM sit side by side in one row, each as a small label with its value
 * directly beneath.
 */
.servicii-transport-boxes__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

.servicii-transport-box {
	padding: 2rem;
	border: 1px solid var(--color-bg-light);
	box-shadow: rgba(0, 0, 0, 0.1) 0 10px 30px;
	transition: transform 0.25s ease;
}

.servicii-transport-box:hover {
	transform: translateY(-0.5rem);
}

.servicii-transport-box__title {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0 0 1.5em;
	font-size: 1.75rem;
	line-height: 2rem;
}

.servicii-transport-box__icon {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	object-fit: contain;
}

.servicii-transport-box__specs {
	display: flex;
	gap: 1rem;
}

.servicii-transport-box__spec {
	flex: 1 1 0;
}

.servicii-transport-box__spec-label {
	display: block;
	margin-bottom: 0.35em;
	color: var(--color-brand);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.servicii-transport-box__spec-value {
	display: block;
	font-size: 1.25rem;
}

@media screen and (min-width: 48em) {

	.servicii-transport-boxes__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Blog (archive cards, pagination, single post, related posts)
--------------------------------------------- */

/**
 * Narrower content-width variant of .container — used for the single
 * post's article body (1000px vs the site's normal 1400px), so long
 * lines of body copy stay readable. The related-posts section below
 * the article uses the normal, full-width .container instead.
 */
.container--narrow {
	max-width: 1000px;
}

.blog-header {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}

/**
 * 2-per-row card grid on the blog archive (home.php). The related-posts
 * section reuses this with the --3 modifier for a 3-per-row layout —
 * both share the same .blog-card markup (template-parts/content-blog-card.php).
 */
.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem 2rem;
}

@media screen and (min-width: 48em) {

	.blog-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width: 62em) {

	.blog-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.blog-card {
	display: flex;
	flex-direction: column;
	margin-bottom: 50px;
}

.blog-card__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--border-radius);
	background-color: var(--color-bg-light-grey);
}

.blog-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-card__title {
	margin: 1.25rem 0 0;
	font-size: 1.5rem;
	line-height: 1.3;
}

.blog-card__title a {
	color: var(--color-text);
	text-decoration: none;
}

.blog-card__title a:hover,
.blog-card__title a:focus {
	color: var(--color-brand);
}

.blog-card__meta,
.blog-single__meta {
	display: flex;
	align-items: center;
	gap: 0.5em;
	color: var(--color-text-light);
	font-size: 0.875rem; /* 14px */
}

.blog-card__meta {
	margin-top: 0.6rem;
}

.blog-card__meta .icon-calendar,
.blog-single__meta .icon-calendar {
	flex-shrink: 0;
	color: var(--color-brand);
}

.blog-card__excerpt {
	margin: 0.75rem 0 1.25rem;
	color: var(--color-text-light);
}

.blog-card__link {
	margin-top: auto;
}

/* Blog single post
--------------------------------------------- */
.blog-single__header {
	margin: 0 0 2rem;
}

.blog-single__title {
	margin: 3rem 0 0.75em;
	font-size: 1.75rem;
	line-height: 1.2;
}

.blog-single__thumb {
	margin: 2rem 0;
	border-radius: var(--border-radius);
	overflow: hidden;
}

.blog-single__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (min-width: 62em) {

	.blog-single__title {
		font-size: 2.25rem;
	}
}

/* Blog pagination
--------------------------------------------- */
.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 3.5rem;
	margin-bottom: 3.5rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.5rem;
	border-radius: var(--border-radius);
	background-color: var(--color-bg-light-grey);
	color: var(--color-text);
	font-weight: 600;
	text-decoration: none;
	transition: var(--transition);
}

.pagination .page-numbers.current,
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus {
	background-color: var(--color-brand);
	color: #fff;
}

.pagination .page-numbers.dots {
	background: none;
}

/* Related posts ("S-ar putea să-ți mai placă") — full page width,
   unlike the narrower article above it. */
.blog-related__title {
	margin-bottom: 2.5rem;
}

/* Contact (intro, map, offices, form)
--------------------------------------------- */

/**
 * Intro (2 titles left + paragraph right) — identical shape/reasoning
 * to .produse-intro__* etc.: two Group blocks classed "contact-intro__
 * col-left"/"contact-intro__col-right", picked out via
 * dacotrans_theme_get_content_section().
 */
.contact-intro__content {
	display: flex;
	flex-direction: column;
}

.contact-intro__col-left *,
.contact-intro__col-right * {
	margin-top: 0;
}

.contact-intro__col-left > * > *:last-child,
.contact-intro__col-right > * > *:last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 62em) {

	.contact-intro__content {
		flex-direction: row;
		align-items: flex-start;
		gap: 0 4rem;
	}

	.contact-intro__col-left,
	.contact-intro__col-right {
		flex: 1 1 0;
	}
}

/* Full-width Google Map, replacing the usual image banner. */
.contact-map {
	width: 100%;
	height: 24rem;
}

.contact-map__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media screen and (min-width: 62em) {

	.contact-map {
		height: 36rem;
	}
}

/* Office / contact boxes. */
.contact-offices__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media screen and (min-width: 48em) {

	.contact-offices__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width: 62em) {

	.contact-offices__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.contact-office {
	padding: 2rem;
	background-color: var(--color-bg-light-grey);
	border-radius: var(--border-radius);
}

.contact-office__title {
	margin: 0 0 1.25rem;
	font-size: 1.25rem;
}

.contact-office__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-office__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-bottom: 0.5em;
	color: var(--color-text);
}

.contact-office__row-label {
	color: var(--color-text);
	font-weight: 600;
}

.contact-office__row-value a {
	text-decoration: none;
}

.contact-office__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.contact-office__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.6em 1.1em;
	background-color: transparent;
	border: 1px solid var(--color-brand);
	border-radius: var(--border-radius);
	color: var(--color-brand);
	font-size: 0.875rem; /* 14px */
	font-weight: 600;
	text-decoration: none;
	transition: var(--transition);
}

.contact-office__button:hover,
.contact-office__button:focus {
	background-color: var(--color-brand);
	color: #fff;
}

/* Contact form — centered, narrower than the page's normal .container. */
.contact-form-section {
	background-color: var(--color-bg-light-grey);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.contact-form {
	max-width: 700px;
	margin: 0 auto;
	padding: 2rem;
	background-color: #fff;
	border-radius: var(--border-radius);
}

@media screen and (min-width: 48em) {

	.contact-form {
		padding: 3rem;
	}
}

.contact-form__title {
	margin: 0 0 1.5rem;
	font-size: 1.5rem;
}

.contact-form__notice {
	padding: 0.9em 1.2em;
	margin: 0 0 1.5rem;
	border-radius: var(--border-radius);
	font-size: 0.9375rem;
}

.contact-form__notice--success {
	background-color: #e5f3ea;
	color: #1e6b3a;
}

.contact-form__notice--error {
	background-color: #fbe8e8;
	color: #a3312f;
}

.contact-form__field {
	margin: 0 0 1.25rem;
}

.contact-form__field label {
	display: block;
	margin-bottom: 0.5em;
	color: var(--color-text);
	font-size: 0.875rem;
	font-weight: 600;
}

.contact-form__field input[type="text"],
.contact-form__field input[type="email"],
.contact-form__field input[type="tel"],
.contact-form__field select,
.contact-form__field textarea {
	display: block;
	width: 100%;
	padding: 0.75em 1em;
	background-color: #fff;
	border: 1px solid var(--color-bg-light);
	border-radius: var(--border-radius);
	color: var(--color-text);
	font-family: inherit;
	font-size: 1rem;
}

.contact-form__field input[type="text"]:focus,
.contact-form__field input[type="email"]:focus,
.contact-form__field input[type="tel"]:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
	outline: none;
	border-color: var(--color-brand);
}

.contact-form__field textarea {
	resize: vertical;
}

.contact-form__field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	font-size: 0.875rem;
	font-weight: 400;
}

.contact-form__field--checkbox input[type="checkbox"] {
	margin-top: 0.2em;
	flex-shrink: 0;
}

.contact-form__submit {
	margin: 2rem 0 0;
}

/* Honeypot — off-screen, not display:none (which some bots skip). */
.contact-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
	width: 200px;
	height: auto;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

#primary-menu .menu-item a {
	font-size: 0.95rem;
	color: var(--color-text);
}

#primary-menu .menu-item a:hover,
#primary-menu .menu-item a:focus {
	color: var(--color-brand);
}

#primary-menu .current-menu-item a {
	font-weight: 600;
	color: var(--color-brand);
}

#primary-menu > .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.35em;
	height: 0.35em;
	margin-left: 0.4em;
	margin-bottom: 0.15em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	vertical-align: middle;
}