/*
Theme Name:  MBeton
Theme URI:   https://mbeton.ro
Description: MBeton — Twenty Twenty-Five child theme for mbeton.ro (concrete
             production + construction works). Mobile-first nav, GOV.UK-style
             usability, industrial anthracite/safety-orange palette,
             fast-contact CTAs.
Author:      agency-sites / wpstack
Template:    twentytwentyfive
Version:     0.1.0
Text Domain: mbeton
*/

/* ── Header brand row ─────────────────────────────────────────────── */
.site-logo img { display: block; height: auto; }

/* ── Dark navigation bar — classic menu (editable in Appearance → Menus) ── */
.site-nav-bar { padding: 0 !important; }
.mb-nav { width: 100%; }
.mb-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.mb-menu li { position: relative; }
.mb-menu a {
	display: block; color: #fff; text-decoration: none;
	padding: 0.8rem 0.9rem; font-weight: 600; font-size: 0.98rem;
	touch-action: manipulation;
}
.mb-menu > li:hover, .mb-menu > li:focus-within { background: #9A3412; }
.mb-menu .sub-menu {
	list-style: none; margin: 0; padding: 0; display: none;
	position: absolute; left: 0; top: 100%; min-width: 260px; z-index: 60;
	background: #1E2630; box-shadow: 0 10px 28px rgba(0,20,50,.3);
}
/* Hover/focus-open is desktop-only. Keep it scoped: an unscoped :hover/:focus-within
   rule out-specifies `.is-sub-open` (0,3,1 vs 0,3,0), and on touch the tapped chevron
   keeps the li hovered+focused — a mobile `display:none` counter-rule would then pin
   the submenu shut even with `.is-sub-open` set. */
@media (min-width: 782px) {
	.mb-menu > li:hover > .sub-menu, .mb-menu > li:focus-within > .sub-menu { display: block; }
}
.mb-menu .sub-menu a { padding: 0.55rem 1rem; font-weight: 500; }
.mb-menu .sub-menu li:hover { background: #9A3412; }
.mb-menu-empty { color: #fff; padding: 0.8rem 0.9rem; display: inline-block; text-decoration: underline; }

/* Submenu disclosure button (injected by nav.js next to each parent link).
   Desktop opens the submenu on hover, so the button is mobile-only. It's a
   separate tap target from the link: tap the label to navigate, tap the
   chevron to expand — no more "second tap opens the parent page". */
.mb-sub-toggle { display: none; background: transparent; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }

/* mobile hamburger */
.mb-nav-toggle { display: none; background: transparent; border: 0; cursor: pointer; padding: 0.8rem 0.6rem; touch-action: manipulation; }
.mb-nav-toggle__icon, .mb-nav-toggle__icon::before, .mb-nav-toggle__icon::after { display: block; width: 30px; height: 3px; background: #fff; }
.mb-nav-toggle__icon { position: relative; }
.mb-nav-toggle__icon::before, .mb-nav-toggle__icon::after { content: ""; position: absolute; left: 0; }
.mb-nav-toggle__icon::before { top: -9px; }
.mb-nav-toggle__icon::after { top: 9px; }

/* ── Masthead: brand left, contact CTAs right ─────────────────────── */
.site-header { --mb-h: 40px; }
.site-masthead .masthead-row { width: 100%; }
.site-masthead .wp-block-site-title { margin: 0; }
.site-masthead .wp-block-site-title,
.site-masthead .wp-block-site-title a {
	color: #1E2630; text-decoration: none;
	text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em;
	font-size: 1.55rem; line-height: 1.2;
}
.masthead-contact { flex: 0 0 auto; }
.masthead-email { margin: 0; font-size: 0.95rem; }
.masthead-email a { color: #5A6678; text-decoration: none; }
.masthead-email a:hover { color: #C2410C; text-decoration: underline; }
/* Phone CTA — the one action a prospect needs. Big tap target. */
.call-cta { margin: 0; }
.call-cta a {
	display: inline-flex; align-items: center; justify-content: center;
	height: var(--mb-h, 40px); padding: 0 1.1rem; border-radius: 4px;
	background: #C2410C; color: #fff !important;
	font-weight: 700; font-size: 1rem; text-decoration: none;
	white-space: nowrap; touch-action: manipulation;
}
.call-cta a:hover { background: #9A3412; }

.nav-row { width: 100%; }
.nav-row .mb-nav { width: 100%; flex: 1 1 auto; }

/* mobile submenu chevron (disclosure) */
@media (max-width: 781px) {
	/* Parent row = link + chevron side by side (separate, NON-overlapping tap
	   targets — the old absolute button over the link caused real-finger taps to
	   land on the link). The submenu wraps to its own full-width row below. */
	.mb-menu .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
	.mb-menu .menu-item-has-children > a { flex: 1 1 auto; }
	.mb-menu .menu-item-has-children > .sub-menu { flex-basis: 100%; }
	.mb-sub-toggle {
		display: flex; align-items: center; justify-content: center;
		flex: 0 0 3.4rem; align-self: stretch; min-height: 3rem;
	}
	.mb-sub-toggle__icon {
		display: block; width: 0.5rem; height: 0.5rem;
		border-right: 2px solid #C2410C; border-bottom: 2px solid #C2410C;
		transform: translateY(-15%) rotate(45deg); transition: transform 0.2s;
	}
	.mb-menu .is-sub-open > .mb-sub-toggle .mb-sub-toggle__icon { transform: translateY(15%) rotate(-135deg); }
}

/* Nav bar sits on anthracite (primary-darker); white menu links from the base
   rules above apply as-is. */
.site-nav-bar { border-bottom: 1px solid #D7DEE7; }

@media (max-width: 600px) {
	.site-masthead .wp-block-site-title,
	.site-masthead .wp-block-site-title a { font-size: 1.2rem; }
	/* Email is chrome, not action — the phone CTA is the action. Reclaim space. */
	.masthead-email { display: none; }
	.site-header { --mb-h: 36px; }
}
@media (max-width: 781px) {
	/* Gutter: align bar contents with the body content (root padding 1.25rem)
	   so the brand / CTA aren't glued to the screen edges. */
	.site-masthead .masthead-row,
	.nav-row { padding-inline: 1.25rem; box-sizing: border-box; }
	.nav-row { padding-block: 0.4rem; align-items: center; row-gap: 0.5rem; justify-content: space-between; }
	.nav-row { flex-wrap: wrap; }
	.mb-nav-toggle { order: 1; }
	.mb-nav { order: 3; width: 100%; }
	/* Mobile submenu chevron sits on the dark bar — make it visible there. */
	.mb-sub-toggle__icon { border-color: #fff; }
}

/* ── Links: underline body content, not chrome (GOV.UK) ───────────── */
.wp-block-post-content a, .entry-content a,
.wp-block-post-excerpt a { text-decoration: underline; text-underline-offset: 0.12em; }
.site-header a, .site-footer a, .wp-block-navigation a, .wp-block-button__link { text-decoration: none; }

/* ── Visible focus state (GOV.UK yellow) ──────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.wp-element-button:focus,
.wp-block-navigation-item__content:focus-visible {
	outline: 3px solid #FCD116;
	outline-offset: 0;
	box-shadow: 0 4px 0 0 #1E2630;
}

/* ── News cards (grid with images + branded placeholder) ──────────── */
.news-cards .wp-block-post {
	background: #fff;
	border: 1px solid #D7DEE7;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.news-cards .wp-block-post-featured-image { margin: 0; }
.news-cards .wp-block-post-featured-image img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	aspect-ratio: 16 / 9;
}
.news-cards .wp-block-post-title {
	font-size: 1.05rem; line-height: 1.3; margin: 0;
	display: -webkit-box !important; -webkit-line-clamp: 3; line-clamp: 3;
	-webkit-box-orient: vertical; overflow: hidden;
}
.news-cards .wp-block-post-title a { display: inline; }
.news-cards .wp-block-post { min-height: 100%; }
.news-cards .wp-block-post-title a { text-decoration: none; }
.news-cards .wp-block-post-title a:hover { text-decoration: underline; }
.news-cards .wp-block-post-date { color: #5A6678; font-size: 0.85rem; }
/* Card excerpt + read-more. The ellipsis lives on the read-more line
   ("… Citește mai mult"), kept off the excerpt copy (excerpt trim filter). */
.news-cards .wp-block-post-excerpt { margin: 0.15rem 0 0; }
/* No line-clamp: clamp forces a trailing "…". Length is bounded by the
   24→18-word excerpt trim instead, so the only ellipsis is the read-more line. */
.news-cards .wp-block-post-excerpt__excerpt {
	margin: 0; font-size: 0.9rem; line-height: 1.5; color: #475569;
}
.news-cards .wp-block-post-excerpt__more-text { margin: 0.55rem 0 0; }
.news-cards .wp-block-post-excerpt__more-link { color: #C2410C; font-weight: 600; text-decoration: none; }
.news-cards .wp-block-post-excerpt__more-link:hover { text-decoration: underline; }

/* ── Page body rhythm ─────────────────────────────────────────────── */
.wp-block-post-content { line-height: 1.7; }
.wp-block-post-title { margin-bottom: 1rem; }

/* breadcrumbs */
.mb-breadcrumbs { font-size: 0.85rem; color: #5A6678; margin-bottom: 1.25rem; }
.mb-breadcrumbs a { color: #5A6678; text-decoration: none; }
.mb-breadcrumbs a:hover { color: #C2410C; text-decoration: underline; }
.mb-breadcrumbs [aria-current] { color: #0F172A; }
.mb-bc-sep { color: #9AA5B4; margin: 0 0.2rem; }

/* search results list */
.search-results .wp-block-post { border-bottom: 1px solid #E2E8F0; padding-bottom: 1.4rem; }
.search-results .wp-block-post-title { font-size: 1.3rem; margin: 0 0 0.3rem; }
.search-results .wp-block-post-title a { text-decoration: none; }
.search-results .wp-block-post-title a:hover { text-decoration: underline; }

/* long-title posts: the full original title kept as a subtitle under the H1 */
.post-subtitle {
	font-size: 1.15rem; color: #5A6678; font-weight: 400;
	line-height: 1.45; margin: -0.25rem 0 1.5rem;
}

/* hero video background fills the cover */
.wp-block-cover__video-background { object-fit: cover; }

/* mobile: hide the hero banner entirely (video + poster). It's video-only
   with no text, so there's nothing to keep — the page starts at the first
   content section. :has() scopes it to the video-cover; other covers untouched. */
@media (max-width: 781px) {
	.home .wp-block-cover:has(> .wp-block-cover__video-background) { display: none; }
}

/* homepage: hero touches the nav (no white gap) */
.home main { margin-top: 0 !important; }
.home main .wp-block-post-content > :first-child { margin-top: 0 !important; }

/* single post: capped featured image */
.single-feat img { max-height: 360px; width: 100%; object-fit: cover; border-radius: 6px; }

/* File / document blocks — compact download rows, not giant buttons */
.wp-block-file {
	display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
	margin: 0; padding: 0.6rem 0; border-bottom: 1px solid #E2E8F0;
}
.wp-block-file > a:first-child { font-weight: 500; text-decoration: underline; text-underline-offset: 0.12em; }
.wp-block-file__button {
	background: transparent !important; color: #C2410C !important;
	border: 1px solid #D7DEE7 !important; border-radius: 4px !important;
	padding: 0.25rem 0.75rem !important; font-size: 0.85rem !important;
	font-weight: 600 !important; margin-left: auto !important; min-width: 0 !important;
}
.wp-block-file__button:hover { background: #FEF0E6 !important; }

/* ── Gravity Forms — light brand polish ───────────────────────────── */
.gform_wrapper .gfield_label { font-weight: 600; color: #0F172A; }
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
	border: 1px solid #D7DEE7; border-radius: 4px;
	padding: 0.6rem 0.7rem; font-size: 1rem;
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	outline: 3px solid #FCD116; outline-offset: 0; border-color: #C2410C;
}
/* Where GF's Orbital framework DOES style a button (e.g. the first-page "next"),
   brand it through GF's own tokens. Scoped to .mbeton-form .gform_wrapper so it
   out-specifies GF's own token definition (which only used a single class). */
.mbeton-form .gform_wrapper {
	--gf-color-primary: #C2410C;
	--gf-color-primary-rgb: 0, 73, 144;
	--gf-ctrl-btn-bg-color-primary: #C2410C;
	--gf-ctrl-btn-bg-color-primary-hover: #9A3412;
	--gf-ctrl-btn-color-primary: #fff;
	--gf-ctrl-btn-bg-color-secondary: #fff;
	--gf-ctrl-btn-bg-color-secondary-hover: #FEF0E6;
	--gf-ctrl-btn-color-secondary: #C2410C;
	--gf-ctrl-btn-border-color-secondary: #C2410C;
}

/* Elsewhere GF renders buttons browser-native (framework button CSS not loaded),
   so these plain rules win on their own — no !important. One block, every form. */
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button {
	background: #C2410C; color: #fff; border: 0; border-radius: 4px;
	padding: 0.7rem 1.7rem; font-weight: 700; cursor: pointer; box-shadow: none;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_next_button:hover { background: #9A3412; }
.gform_wrapper .gform_previous_button,
.gform_wrapper .gform_save_link,
.gform_wrapper .gform_button_select_files {
	background: #fff; color: #C2410C; border: 1px solid #C2410C; border-radius: 4px;
	padding: 0.6rem 1.4rem; font-weight: 600; cursor: pointer; box-shadow: none;
}
.gform_wrapper .gform_previous_button:hover,
.gform_wrapper .gform_save_link:hover,
.gform_wrapper .gform_button_select_files:hover { background: #FEF0E6; }
.gform_wrapper .gform_page_footer { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }

/* Multi-step progress bar — brand blue + breadcrumb-style step label. The extra
   .gform_wrapper out-specifies GF's own rules, so still no !important. */
.mbeton-form .gform_wrapper .gf_progressbar_title { font-size: 0.85rem; color: #5A6678; font-weight: 400; margin: 0 0 0.4rem; }
.mbeton-form .gform_wrapper .gf_progressbar { background-color: #E6ECF3; border-radius: 999px; overflow: hidden; }
.mbeton-form .gform_wrapper .gf_progressbar .gf_progressbar_percentage { background-color: #C2410C; }
.mbeton-form .gform_wrapper .gf_progressbar .gf_progressbar_percentage span { color: #fff; font-weight: 600; }

/* GDPR "nota de informare" — scrollable, formatted box (replaces the buggy ToS
   textarea that showed raw HTML tags). */
.gf-nota-box {
	max-height: 320px; overflow-y: auto;
	border: 1px solid #D7DEE7; border-radius: 4px;
	padding: 1rem 1.25rem; background: #fff;
	font-size: 0.92rem; line-height: 1.55; color: #0F172A;
}
.gf-nota-box h3, .gf-nota-box h4 { color: #C2410C; margin: 1.1rem 0 0.4rem; font-size: 1rem; }
.gf-nota-box h3 { font-size: 1.05rem; }
.gf-nota-box > :first-child { margin-top: 0; }
.gf-nota-box p { margin: 0 0 0.7rem; }

/* ── Cookie banner (cookie-law-info) — brand the buttons, kill the greens ── */
#cookie-law-info-bar .wt-cli-accept-btn,
#cookie-law-info-bar .cli_action_button.wt-cli-accept-all-btn,
.wt-cli-privacy-accept-btn,
.cli_setting_save_button {
	background: #C2410C !important;
	color: #fff !important;
	border: 1px solid #C2410C !important;
}
#cookie-law-info-bar .wt-cli-reject-btn {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,0.6) !important;
}

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 781px) {
	.mb-nav-toggle { display: inline-flex; align-items: center; }
	.mb-nav { display: none; }
	.mb-nav.is-open { display: block; padding-bottom: 0.5rem; }
	.mb-menu { flex-direction: column; }
	.mb-menu .sub-menu { position: static; box-shadow: none; min-width: 0; }
	.mb-menu .is-sub-open > .sub-menu { display: block; }
	.mb-menu .sub-menu a { padding-left: 1.8rem; }
}

/* ── Birth-date picker (jQuery-UI) ────────────────────────────────────
   Width is matched to the date input in JS (gf-datepicker-tweaks.php
   beforeShow). Here: a small gap below the field, soft grey palette
   (not stark black), rounded card. */
.ui-datepicker.ui-widget {
	margin-top: 6px;
	box-sizing: border-box;
	padding: 8px;
	background: #ffffff;
	border: 1px solid #D7DEE7;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0,20,50,0.12);
	font-family: inherit;
	color: #475569;
}
/* Header is a flex row: [‹] [ month  year ] [›] — prev/next are real flex
   items (not absolute), so they never overlap the month/year dropdowns. */
.ui-datepicker .ui-datepicker-header {
	display: flex; align-items: center; gap: 4px;
	background: transparent; border: 0; padding: 2px 0 8px; color: #334155;
}
.ui-datepicker .ui-datepicker-title {
	order: 1; flex: 1 1 auto; display: flex; gap: 6px; justify-content: center; padding: 0;
}
.ui-datepicker .ui-datepicker-month,
.ui-datepicker .ui-datepicker-year {
	border: 1px solid #D7DEE7; border-radius: 4px; padding: 2px 4px;
	color: #334155; background: #fff; max-width: 100%;
}
/* Prev/next: hide jQuery-UI's text + icon-sprite, draw a clean grey chevron. */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: relative; flex: 0 0 1.6em; width: 1.6em; height: 1.6em; cursor: pointer;
	text-indent: -9999px; overflow: hidden;
}
.ui-datepicker .ui-datepicker-prev { order: 0; }
.ui-datepicker .ui-datepicker-next { order: 2; }
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon { display: none; }
.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 0.45em; height: 0.45em;
	border-right: 2px solid #5A6678; border-bottom: 2px solid #5A6678;
}
.ui-datepicker .ui-datepicker-prev::after { transform: translate(-30%,-50%) rotate(135deg); }
.ui-datepicker .ui-datepicker-next::after { transform: translate(-70%,-50%) rotate(-45deg); }
.ui-datepicker .ui-datepicker-prev:hover::after,
.ui-datepicker .ui-datepicker-next:hover::after { border-color: #C2410C; }
.ui-datepicker table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ui-datepicker th { color: #8B97A7; font-weight: 600; padding: 4px 0; }
.ui-datepicker td a,
.ui-datepicker td span {
	display: block; text-align: center; padding: 6px 0; border-radius: 4px;
	color: #475569; text-decoration: none; border: 0; background: transparent;
}
.ui-datepicker td a:hover { background: #FEF0E6; color: #C2410C; }
.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-highlight { background: #C2410C; color: #ffffff; }
.ui-datepicker td.ui-datepicker-unselectable span { color: #C2CAD5; }
/* GF's calendar trigger (the icon right of the date input): bigger, a little
   gap from the field, vertically centred, and softened from black to grey. */
.ginput_container_date .ui-datepicker-trigger {
	width: 24px; height: 24px; margin-left: 10px; vertical-align: middle;
	cursor: pointer; opacity: 0.5; transition: opacity 0.15s ease;
}
.ginput_container_date .ui-datepicker-trigger:hover,
.ginput_container_date .ui-datepicker-trigger:focus { opacity: 0.85; }

/* ── Buttons: uniform size, filled or outline ─────────────────────────
   Same box for every button in a wp:buttons row. The outline style gets
   its 2px border absorbed into the padding so filled + outline render
   pixel-identical heights (the hero pair was visibly mismatched). */
.wp-block-button .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 3rem; padding: 0.7rem 1.6rem; line-height: 1.2;
	box-sizing: border-box;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 2px;
	padding: calc(0.7rem - 2px) calc(1.6rem - 2px);
}

/* Tables (concrete-class grid on /servicii/): never force horizontal
   page scroll on phones — scroll the table itself. */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { min-width: 480px; }

/* Card images inside columns (front-page services grid): uniform 4:3
   crop instead of whatever aspect the source photo had — the drone shots
   rendered as squat strips at column width. */
.wp-block-columns .wp-block-image img {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}