/*
Theme Name: Custom
Theme URI: https://bevisible.page/
Author: BeVisible
Description: bevisible.page, websites and landing pages by the BeVisible studio. Block theme made from a-fse-starter (31.10.2026). Look of bevisible.social/ua/sites/: Onest, light page, black pill buttons, red accent.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.1
Text Domain: custom
*/

/*
Class reference (blocks get these in "Additional CSS class"):
  pf_section            full-width section with the top gap of the page (group, align full)
  pf_wrap               content column 1184px inside a section
  pf_hero / hero_grid   first screen: eyebrow, H1 left, lead and buttons right
  eyebrow               small grey label with a red dot (paragraph)
  lead                  bigger intro text (paragraph)
  pf_item [pf_flip]     one project; pf_flip puts the screenshots on the right
  pf_project            two columns: pf_media (screenshots) and pf_text
  pf_shots overlap_ok > pf_laptop (pf_bar + image pf_screen) + image pf_phone; pf_hint under them
                        (overlap_ok tells the layout audit that the phone lies over the laptop on purpose)
  pf_tags (list)        grey pills; pf_lead (paragraph); pf_points (list with bold start)
  Button style "Link to the live site" = is-style-open; "White" = is-style-white
  pf_how > how_wrap     "How we work": heading + numbered list steps
  pf_cta > cta_box      dark rounded block at the end
*/

/* ---------- Base ---------- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
	text-wrap: balance;
	margin: 0;
}

p, li, td, figcaption {
	overflow-wrap: break-word;
}

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

:where(.wp-site-blocks) a:focus-visible,
:where(.wp-site-blocks) button:focus-visible {
	outline: 2px solid var(--wp--preset--color--red);
	outline-offset: 2px;
}

.screen-reader-text:focus {
	z-index: 100000;
}

/* root blocks touch: header, content, footer */
.wp-site-blocks > * {
	margin-block-start: 0;
}
.page_content > * {
	margin-block: 0;
}

/* ---------- Blocks without core layout CSS (disable-layout-styles in inc/setup.php) ---------- */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.wp-block-buttons > .wp-block-button {
	margin: 0;
}
figure.wp-block-image {
	margin: 0;
}

/* ---------- Buttons ---------- */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	white-space: nowrap;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
	padding: 0 24px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--ink);
	background: transparent;
	color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-open > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	font-size: 17px;
	font-weight: 600;
	min-height: 0;
	padding: 12px 22px;
	white-space: normal;
}
.wp-block-button.is-style-open > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: #fff;
}
.wp-block-button.is-style-white > .wp-block-button__link {
	background: #fff;
	color: #000;
	border-color: #fff;
}
.wp-block-button.is-style-white > .wp-block-button__link:hover {
	background: #e9e9ea;
	border-color: #e9e9ea;
	color: #000;
}

/* ---------- Header ---------- */
.site_header_part {
	position: sticky;
	top: 0;
	z-index: 1100;
}
/* the frosted background sits on a pseudo-element: backdrop-filter on the header itself would trap the
   full-screen mobile menu (position: fixed) inside the header's 64px */
.site_header_part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(253, 253, 252, 0.82);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
	backdrop-filter: saturate(1.6) blur(14px);
	border-bottom: 1px solid rgba(231, 231, 228, 0.7);
}
.admin-bar .site_header_part {
	top: 32px;
}
.site_header {
	padding: 0 28px;
}
.header_row {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 1184px;
	height: 64px;
	margin: 0 auto;
}

.site_brand {
	margin: 0;
	flex: 0 0 auto;
	font-size: 19px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
}
.site_brand a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.site_brand a::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	background: var(--bvp-mark) center / contain no-repeat;
}

.main_nav {
	margin-left: auto;
}
.main_nav .wp-block-navigation__container {
	gap: 26px;
}
.main_nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
}
.main_nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--muted);
}

.lang_switch {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: #fff;
}
.lang_switch a {
	padding: 6px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.lang_switch a:hover {
	color: var(--wp--preset--color--ink);
}
.lang_switch a.is-current {
	background: var(--wp--preset--color--ink);
	color: #fff;
}

.header_cta {
	flex: 0 0 auto;
}
.header_cta .wp-block-button__link {
	min-height: 40px;
	padding: 0 18px;
	font-size: 15px;
}

/* mobile menu (overlay) from 1000px down */
@media (max-width: 999px) {
	.site_header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.site_header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.main_nav {
		order: 4;
		margin-left: 0;
	}
	.lang_switch {
		margin-left: auto;
	}
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}
.wp-block-navigation__responsive-container-open svg {
	width: 28px;
	height: 28px;
}
.main_nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--paper) !important;
	padding: 20px 18px 32px;
}
.main_nav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px !important;
	align-items: flex-start !important;
}
.main_nav .is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start !important;
	gap: 18px !important;
}
.main_nav .is-menu-open .wp-block-navigation-item__content {
	font-size: 26px;
	letter-spacing: -0.02em;
}

/* ---------- Sections ---------- */
.pf_section {
	padding: 120px 28px 0;
}
.pf_wrap {
	max-width: 1184px;
	margin: 0 auto;
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 26px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}
.eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
}

/* ---------- First screen ---------- */
.pf_section.pf_hero {
	padding-top: 92px;
}
.hero_grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 56px;
	align-items: start;
}
.hero_grid h1 mark,
.pf_hero h1 mark {
	background: transparent;
}
.pf_hero .lead {
	margin: 0 0 28px;
	font-size: 18px;
	line-height: 1.55;
}

/* ---------- Projects ---------- */
.pf_project {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 56px;
	align-items: start;
}
.pf_flip .pf_project {
	grid-template-columns: 1fr 1.25fr;
}
.pf_flip .pf_media {
	order: 2;
}
.pf_media,
.pf_text {
	min-width: 0;
}

.pf_shots {
	position: relative;
	padding: 0 0 40px min(112px, 20%);
}
.pf_laptop {
	padding: 0 10px 10px;
	border-radius: 14px;
	background: #1e1e24;
	box-shadow: var(--wp--preset--shadow--frame);
}
/* address bar: three dots + the domain in a pill */
.pf_shots .pf_bar {
	position: relative;
	height: 34px;
	margin: 0;
	padding: 0 16px 0 68px;
	overflow: hidden;
	font-size: 12px;
	line-height: 34px;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #b5b5bd;
	isolation: isolate;
}
.pf_shots .pf_bar::after {
	content: "";
	position: absolute;
	left: 56px;
	right: 4px;
	top: 4.5px;
	height: 25px;
	z-index: -1;
	border-radius: 6px;
	background: #2c2c33;
}
.pf_shots .pf_bar::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 12px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #4a4a52;
	box-shadow: 16px 0 0 #4a4a52, 32px 0 0 #4a4a52;
}
/* the whole home page of the site scrolls inside the laptop screen */
.pf_laptop .pf_screen {
	aspect-ratio: 16 / 10;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 6px;
	background: #fff;
	scrollbar-width: thin;
	scrollbar-color: #9a9aa2 transparent;
}
.pf_laptop .pf_screen img {
	display: block;
	width: 100%;
	height: auto;
}
.pf_shots .pf_phone {
	position: absolute;
	left: 0;
	bottom: 0;
	width: clamp(96px, 25.5%, 160px);
	padding: 6px;
	border-radius: 26px;
	background: #1e1e24;
	box-shadow: 0 18px 40px rgba(22, 22, 26, 0.28);
}
.pf_shots .pf_phone img {
	display: block;
	width: 100%;
	aspect-ratio: 390 / 844;
	object-fit: cover;
	object-position: top;
	border-radius: 20px;
}
.pf_media .pf_hint {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}

.pf_text .pf_tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.pf_text .pf_tags li {
	margin: 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--soft);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}
.pf_text h2 {
	margin: 0 0 14px;
}
.pf_text .pf_lead {
	margin: 0 0 20px;
	font-size: 18px;
	line-height: 1.6;
}
.pf_text .pf_points {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.pf_text .pf_points li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 22px;
	line-height: 1.55;
}
.pf_text .pf_points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
}
.pf_text .pf_points strong {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/* ---------- How we work ---------- */
.how_wrap {
	max-width: 760px;
	margin: 0 auto;
}
.how_wrap h2 {
	margin: 0 0 20px;
}
.how_wrap .steps {
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
	border-top: 1px solid var(--wp--preset--color--line);
}
.how_wrap .steps li {
	position: relative;
	margin: 0;
	padding: 24px 0 24px 54px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	counter-increment: step;
	color: var(--wp--preset--color--muted);
}
.how_wrap .steps li::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 29px;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}
.how_wrap .steps strong {
	display: block;
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

/* ---------- Final call to action ---------- */
.cta_box {
	max-width: 1184px;
	margin: 0 auto;
	padding: 80px 56px;
	border-radius: var(--wp--custom--radius-big);
	background: var(--wp--preset--color--ink);
	text-align: center;
	color: #b9b9bf;
}
.cta_box h2 {
	max-width: 820px;
	margin: 0 auto 20px;
	color: #fff;
}
.cta_box .lead {
	max-width: 640px;
	margin: 0 auto;
	font-size: 19px;
	line-height: 1.55;
}
.cta_box .wp-block-buttons {
	justify-content: center;
	margin-top: 32px;
}

/* ---------- Footer ---------- */
.site_footer_part {
	margin-top: 128px;
	padding: 0 28px;
	background: var(--wp--preset--color--deep);
	color: #fff;
}
.site_footer {
	max-width: 1184px;
	margin: 0 auto;
	padding: 64px 0 40px;
}
.footer_grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 40px;
}
.site_footer .site_brand a {
	color: #fff;
}
.site_footer .site_brand a::before {
	background-image: var(--bvp-mark-inv);
}
.footer_about .footer_text {
	max-width: 290px;
	margin: 18px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: #9a9aa0;
}
.footer_col .footer_title {
	margin: 0 0 14px;
	font-size: 13px;
	color: #8a8a90;
}
.footer_col .footer_list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer_col .footer_list li {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.5;
}
.site_footer a {
	color: #fff;
	text-decoration: none;
}
.site_footer a:hover {
	color: #c9c9cf;
}
.footer_bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 13px;
	color: #8a8a90;
}
.footer_bottom p {
	margin: 0;
}
.footer_bottom a {
	color: #c9c9cf;
}

/* ---------- 404 ---------- */
.nf_hero h1 {
	margin: 0 0 20px;
}
.nf_hero .lead {
	max-width: 560px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1099px) {
	.hero_grid,
	.pf_project,
	.pf_flip .pf_project {
		gap: 40px;
	}
	.footer_grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Phone ---------- */
@media (max-width: 781px) {
	.admin-bar .site_header_part {
		top: 46px;
	}
	.site_header {
		padding: 0 18px;
	}
	.header_row {
		gap: 12px;
		height: 58px;
	}
	.header_cta {
		display: none;
	}
	.pf_section {
		padding: 88px 18px 0;
	}
	.pf_section.pf_hero {
		padding-top: 52px;
	}
	.hero_grid,
	.pf_project,
	.pf_flip .pf_project {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.hero_grid {
		gap: 24px;
	}
	.pf_flip .pf_media {
		order: 0;
	}
	.pf_hero .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.pf_hero .wp-block-button__link {
		width: 100%;
	}
	.pf_shots {
		padding-bottom: 32px;
	}
	.pf_shots .pf_phone {
		padding: 4px;
		border-radius: 18px;
	}
	.pf_shots .pf_phone img {
		border-radius: 14px;
	}
	.how_wrap .steps li {
		padding: 20px 0 20px 44px;
	}
	.how_wrap .steps li::before {
		top: 25px;
	}
	.cta_box {
		padding: 48px 22px;
		border-radius: 22px;
	}
	.cta_box .wp-block-button,
	.cta_box .wp-block-button__link {
		width: 100%;
	}
	.site_footer_part {
		margin-top: 88px;
		padding: 0 18px;
	}
	.site_footer {
		padding: 48px 0 40px;
	}
	.footer_grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.footer_bottom {
		flex-direction: column;
	}
}

@media (max-width: 380px) {
	.site_brand {
		font-size: 17px;
	}
	.site_brand a::before {
		width: 26px;
		height: 26px;
	}
	.lang_switch a {
		padding: 6px 7px;
		font-size: 11px;
	}
}