/*
Theme Name: Rabt Agency
Theme URI: https://rabt.agency
Author: Rabt (ربط)
Author URI: https://rabt.agency
Description: قالب بلاکی اختصاصی آژانس ارتباطات استراتژیک ربط — تک‌صفحه‌ایِ تیره و مینیمال با توکن‌های برند، راست‌چین و mobile-first، آماده توسعه به بلاگ و صفحات بیشتر.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.7.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rabt-agency
Tags: full-site-editing, block-patterns, rtl-language-support, one-column, custom-colors, custom-logo, editor-style, translation-ready
*/

/* ---------------------------------------------------------------------
 * Smooth in-page scrolling (menu anchors) — respects reduced motion.
 * ------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
	scroll-padding-block-start: 2rem;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Belt-and-braces against horizontal scroll: whatever a stray wide child
 * does, the page never scrolls sideways. `clip` (not `hidden`) avoids
 * creating a scroll container, so the fixed cosmos and in-page anchors
 * keep working. */
html,
body {
	overflow-x: clip;
	max-width: 100%;
}

/* ---------------------------------------------------------------------
 * Hero banner: the 4:1 network-map artwork must never be side-cropped —
 * its meaning lives in the two node clusters at the edges. `contain`
 * letterboxes invisibly because the art background matches the base
 * color, so the full map stays visible at every viewport width.
 * ------------------------------------------------------------------- */
.rabt-hero-cover img.wp-block-cover__image-background {
	object-fit: contain;
}

/* ---------------------------------------------------------------------
 * Cosmos background: one fixed canvas behind the whole site, with scroll
 * acting as the camera. Every rule here is gated on `rabt-cosmos-live`,
 * a class only the script itself adds — so without JS, under reduced
 * motion, or on any failure the site keeps its original solid surfaces.
 * ------------------------------------------------------------------- */
.rabt-cosmos {
	position: fixed;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.rabt-cosmos-live .wp-site-blocks {
	position: relative;
	z-index: 1;
}

/* The section bands carry their dark fill as an inline block style, so
 * overriding it needs !important. They become a translucent veil rather
 * than fully transparent: the sky stays visible the whole way down while
 * body copy keeps its contrast. */
.rabt-cosmos-live .rabt-cosmos-veil {
	background-color: rgba(10, 19, 40, 0.46) !important;
}

/* Every band — header and footer included — drops its hairline rule.
 * Against one continuous sky those lines read as seams; without them the
 * whole site is one uninterrupted field. */
.rabt-cosmos-live .rabt-cosmos-veil {
	border-top-width: 0 !important;
	border-bottom-width: 0 !important;
}

/* The hero is the one band that opens straight onto the sky. */
.rabt-cosmos-live .rabt-hero-cover.rabt-cosmos-veil {
	background-color: rgba(10, 19, 40, 0.22) !important;
}

.rabt-cosmos-live .rabt-hero-cover img.wp-block-cover__image-background,
.rabt-cosmos-live .rabt-hero-cover .wp-block-cover__background {
	opacity: 0;
}

.rabt-hero-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* ---------------------------------------------------------------------
 * Buttons — glass rather than a solid slab.
 *
 * A saturated fill sits heavily on the dark sky; a translucent pane with
 * a lit rim belongs to it. The blue bloom on hover is deliberately slow
 * (0.9s) so it reads as something warming up, not a flash.
 *
 * Corner radius is 10px — a hair tighter than the 12px cards, the usual
 * relationship between a control and the card that holds it. A full pill
 * fought both the cards and the site's squared, structural character.
 *
 * The rim is 0.7 alpha, not the 0.5 it looks like it wants: below 0.6 the
 * edge falls under the 3:1 that WCAG 1.4.11 asks of a control boundary,
 * and a button whose outline you cannot find is not a button.
 *
 * These carry !important because the block editor writes colour, radius
 * and padding as inline styles on every single button.
 * ------------------------------------------------------------------- */
.wp-block-button__link {
	background-color: rgba(34, 92, 255, 0.16) !important;
	color: var(--wp--preset--color--white) !important;
	border: 1px solid rgba(138, 178, 251, 0.7) !important;
	border-radius: 10px !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition:
		background-color 0.55s ease,
		border-color 0.55s ease,
		box-shadow 0.9s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background-color: rgba(34, 92, 255, 0.32) !important;
	border-color: var(--wp--preset--color--accent-2) !important;
	box-shadow: 0 0 28px rgba(246, 242, 234, 0.35);
}

/* ---------------------------------------------------------------------
 * Persian sets no inter-letter space: the script is joined, so tracking
 * pulls the ligatures apart. Section eyebrows keep their weight and
 * colour but lose the spacing the block editor baked in.
 * ------------------------------------------------------------------- */
#hero > .wp-block-cover__inner-container > p:first-child,
#about > p:first-child,
#services > p:first-child,
#team > p:first-child,
#contact p[style*="letter-spacing"] {
	letter-spacing: normal !important;
}

/* Peyda ships three weights (400 / 700 / 900). Headings stay at Bold —
 * 600 would only round back up to 700 anyway — but a hair of negative
 * tracking tightens the display sizes so Bold reads sharp, not blocky. */
.wp-block-heading,
h1, h2, h3 {
	letter-spacing: -0.01em;
}

#hero h1 {
	letter-spacing: -0.015em;
}

/* ---------------------------------------------------------------------
 * Cards: the 3px accent bar repeated across eight tiles turned into
 * stripes, so it is gone. Hover adds no colour — just a 2px lift, a
 * deep soft shadow, and a barely-there lightening of the existing slate
 * edge. Quiet and premium, no electric blue anywhere.
 * ------------------------------------------------------------------- */
#services .wp-block-column,
.rabt-card {
	border-top-color: var(--wp--preset--color--outline) !important;
	border-top-width: 1px !important;
	transition:
		transform 0.35s cubic-bezier(0.22, 0.9, 0.3, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

/* Every card takes the same frosted glass as the contact panel: a
 * translucent fill over an 8px blur, so the cosmos reads faintly through
 * each one and the whole site shares a single material. The inline solid
 * fill the editor writes needs !important to give way. */
#services .wp-block-column,
#team .rabt-card,
.rabt-card {
	background-color: rgba(16, 30, 59, 0.42) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

#services .wp-block-column:hover,
.rabt-card:hover {
	transform: translateY(-2px);
	border-color: #33466B !important;
	box-shadow: 0 8px 30px rgba(2, 8, 23, 0.55);
}

/* ---------------------------------------------------------------------
 * Team: drop every blue edge. The electric ring around each portrait
 * and the bluish card border both go — the card carries only the same
 * quiet slate as everything else, and the photo sits borderless.
 * ------------------------------------------------------------------- */
#team .rabt-card {
	border-color: var(--wp--preset--color--outline) !important;
}

#team .wp-block-image img {
	border: 0 !important;
}

/* ---------------------------------------------------------------------
 * Team portrait flip. The scaffold is built by team.js; these rules give
 * it depth and motion. Without the script the plain portrait and the
 * social row below it render exactly as before.
 * ------------------------------------------------------------------- */
.rabt-flip {
	perspective: 1000px;
	margin-block-end: 0.5rem;
}

.rabt-flip-inner {
	position: relative;
	aspect-ratio: 4 / 3;
	transition: transform 1.05s cubic-bezier(0.4, 0.1, 0.2, 1);
	transform-style: preserve-3d;
}

.rabt-card.is-flipped .rabt-flip-inner {
	transform: rotateY(180deg);
}

.rabt-flip-face {
	position: absolute;
	inset: 0;
	border-radius: 8px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.rabt-flip-front {
	margin: 0;
}

.rabt-flip-front .wp-block-image,
.rabt-flip-front figure,
.rabt-flip-front img {
	margin: 0;
	width: 100%;
	height: 100%;
}

.rabt-flip-front img {
	object-fit: cover;
}

.rabt-flip-back {
	transform: rotateY(180deg);
}

.rabt-flip-back img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.7);
}

.rabt-flip-veil {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: rgba(10, 19, 40, 0.72);
}

.rabt-flip-actions {
	display: flex;
	gap: 14px;
}

/* Shared icon-button shape, used on the flip back and — restyled — for
 * the resting social row. Glass discs that echo the site's buttons. */
.rabt-ib,
.rabt-social .wp-block-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--wp--preset--color--contrast);
	background-color: rgba(34, 92, 255, 0.16);
	border: 1px solid rgba(138, 178, 251, 0.7);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.5s ease;
}

.rabt-ib:hover,
.rabt-ib:focus-visible {
	background-color: rgba(34, 92, 255, 0.34);
	border-color: var(--wp--preset--color--accent-2);
	transform: translateY(-2px);
	box-shadow: 0 0 22px rgba(34, 92, 255, 0.45);
	color: #fff;
}

/* ---------------------------------------------------------------------
 * Resting social row: centred, real icon buttons rather than bare glyphs,
 * and it fades out the moment the portrait turns.
 * ------------------------------------------------------------------- */
#team .rabt-social {
	justify-content: center;
	gap: 12px !important;
	/* auto, not a fixed gap: this pins the social row to the very bottom of
	 * every card, so all four rows align however long each bio runs. */
	margin-block-start: auto !important;
	padding-block-start: 1rem;
	transition: opacity 0.35s ease;
}

/* ---------------------------------------------------------------------
 * Team bio bullets. The 40px indent plus a plain white disc pushed every
 * line over and hung the wraps; here the list is flush to the same right
 * edge as the name and role, with a small brand star sitting in a narrow
 * right-hand gutter so wrapped lines stay aligned in one clean block.
 * ------------------------------------------------------------------- */
#team .wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#team .wp-block-list li {
	position: relative;
	padding-inline-start: 1.4em;
	margin-block-end: 0.35rem;
}

#team .wp-block-list li::before {
	content: "\2726";
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: auto;
	top: 0.12em;
	font-size: 0.72em;
	line-height: 1.9;
	color: var(--wp--preset--color--accent-2);
}

.rabt-card.is-flipped .rabt-social {
	opacity: 0;
	pointer-events: none;
}

#team .rabt-social .wp-block-social-link {
	margin: 0 !important;
	padding: 0;
}

#team .rabt-social .wp-block-social-link a {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	padding: 0;
}

#team .rabt-social .wp-block-social-link svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

#team .rabt-social .wp-block-social-link:hover {
	background-color: rgba(34, 92, 255, 0.34);
	border-color: var(--wp--preset--color--accent-2);
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------------
 * Vertical rhythm: every band used the same 5.5rem, which flattens the
 * page into a list. The two catalogue sections now breathe wider than
 * the two short ones, and all of it scales with the viewport.
 * ------------------------------------------------------------------- */
#about,
#contact {
	padding-block: clamp(4rem, 9vw, 6.5rem) !important;
}

#services,
#team {
	padding-block: clamp(4.5rem, 11vw, 8rem) !important;
}

/* ---------------------------------------------------------------------
 * Header + footer: the same hover language as the rest of the site, so
 * the chrome no longer feels untouched. Nav links grow a brand underline
 * and warm to white; the site name eases to accent rather than snapping;
 * footer links transition smoothly instead of jumping.
 * ------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	transition: color 0.3s ease;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -5px;
	height: 1.5px;
	background: var(--wp--preset--color--contrast);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--white);
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

/* The mobile overlay menu is dark on its own; the underline would float
 * oddly there, so links just warm to accent instead. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* ---------------------------------------------------------------------
 * Nav dropdowns (up to 3 levels). Core handles the opening logic (hover,
 * click and keyboard), nesting and RTL mirroring; everything here is
 * presentation: the site's own dark palette instead of core's white box,
 * softer motion, child labels aligned under their parent, and a visible
 * marker for the mobile accordion.
 * ------------------------------------------------------------------- */
.wp-block-navigation {
	/* Inner padding of the flyout card. The card is pulled outward by this
	 * same amount so a child label starts exactly under its parent's. */
	--rabt-drop-pad: 0.9rem;
	/* Drop from a top-level item down to just below the header's separator
	 * rule (header padding-bottom + border + a little air). Single place to
	 * adjust if the header's padding ever changes. */
	--rabt-drop-offset: 33px;
	/* One easing/duration for the panel, the chevron and the item colour,
	 * so the whole interaction moves as one piece. */
	--rabt-drop-ease: 0.28s cubic-bezier(0.22, 0.9, 0.3, 1);
}

/* Not gated on :not(.has-background)/:not(.has-text-color): the submenu
 * inherits the nav block's overlay colour classes, so core's own guarded
 * default never applies here anyway. Base #0A1328 (not surface #101E3B) —
 * the flyout has to read as the same material as the header band above it. */
.wp-block-navigation__submenu-container {
	background-color: rgba(10, 19, 40, 0.92) !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(2, 8, 23, 0.55);
	color: var(--wp--preset--color--contrast-2) !important;
	/* !important: core zeroes this via `.wp-block-navigation ul { padding: 0 }`,
	 * which outranks a single-class selector. */
	padding-block: 0.4rem !important;
	padding-inline: var(--rabt-drop-pad) !important;
}

/* Core pads each submenu link 0.5em 1em, which pushes the label out of
 * line with the parent above it. The padding moves to the card instead,
 * so labels align; !important because core's rule is 5 classes deep. */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: inherit;
	padding-block: 0.5rem !important;
	padding-inline: 0 !important;
	transition: color var(--rabt-drop-ease);
}

/* No background wash on hover: the Warm Bone underline that every nav item
 * already grows is the entire affordance here. */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--white);
}

/* The chevron flips via a core rule that ships no transition of its own. */
.wp-block-navigation__submenu-icon svg {
	transition: transform var(--rabt-drop-ease);
}

@media not (prefers-reduced-motion) {
	.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		transition: opacity var(--rabt-drop-ease), transform var(--rabt-drop-ease) !important;
		transform: translateY(-8px);
	}

	.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
	.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
	.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		transform: translateY(0);
	}
}

/* Desktop/tablet flyouts only. Inside the mobile overlay core switches the
 * submenu to `position: static`, where `top`/`inset` are simply ignored. */
@media (min-width: 600px) {
	.wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
		top: calc(100% + var(--rabt-drop-offset));
		inset-inline-start: calc(-1 * var(--rabt-drop-pad));
	}

	/* Bridges the gap the offset just opened up, so the pointer can travel
	 * from the parent item into the flyout without crossing dead space and
	 * closing it. Only hoverable while the panel is open — core keeps the
	 * closed panel at width/height 0 with overflow hidden. */
	.wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		bottom: 100%;
		inset-inline: 0;
		height: var(--rabt-drop-offset);
	}
}

/* The mobile overlay paints its own full-bleed dark background and forces
 * `background: transparent !important` on everything inside it, so the
 * card chrome above would float a stray second panel on top of it. Here it
 * flattens into a plain accordion — with a brand star marking each child,
 * since core hides the chevron there and indentation alone doesn't read as
 * "this belongs to the item above". Same star as the team-bio bullets. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	content: "\2726";
	align-self: center;
	margin-inline-end: 0.5em;
	font-size: 0.7em;
	color: var(--wp--preset--color--accent-2);
}
.wp-block-site-title a {
	color: var(--wp--preset--color--contrast) !important;
	transition: color 0.3s ease !important;
}

.wp-block-site-title a:hover {
	color: var(--wp--preset--color--white) !important;
}

.wp-block-site-logo img {
	transition: opacity 0.3s ease, filter 0.3s ease;
}

.wp-block-site-logo:hover img {
	opacity: 0.82;
}

footer a {
	transition: color 0.3s ease, opacity 0.3s ease;
}

/* Footer contact links (phone + email): Warm Bone at rest, warming to
 * blue on hover — the reverse of the resting state they had before. */
footer a[href^="tel:"],
footer a[href^="mailto:"] {
	color: var(--wp--preset--color--contrast) !important;
}

footer a[href^="tel:"]:hover,
footer a[href^="mailto:"]:hover {
	color: var(--wp--preset--color--accent-2) !important;
}

/* ---------------------------------------------------------------------
 * Contact form. A glass panel over the cosmos — the sky shows through
 * the pane and through every field — laid out on a two-column grid that
 * collapses to one on small screens. Fields inherit the button's glass
 * language so the whole section reads as one material.
 * ------------------------------------------------------------------- */
.rabt-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.1rem 1.25rem;
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	background: rgba(16, 30, 59, 0.42);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 16px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 20px 60px rgba(2, 8, 23, 0.45);
}

.rabt-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.rabt-field--wide {
	grid-column: 1 / -1;
}

.rabt-field label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.rabt-form input,
.rabt-form textarea {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 0.98rem;
	color: var(--wp--preset--color--contrast);
	background: rgba(10, 19, 40, 0.55);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 10px;
	padding: 0.75rem 0.95rem;
	transition:
		border-color 0.3s ease,
		box-shadow 0.4s ease,
		background-color 0.3s ease;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.rabt-form textarea {
	resize: vertical;
	min-height: 130px;
	line-height: 1.9;
}

.rabt-form input::placeholder,
.rabt-form textarea::placeholder {
	color: var(--wp--preset--color--contrast-3);
}

.rabt-form input:hover,
.rabt-form textarea:hover {
	border-color: #33466B;
}

.rabt-form input:focus,
.rabt-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent-2);
	background: rgba(34, 92, 255, 0.1);
	box-shadow: 0 0 0 3px rgba(34, 92, 255, 0.22);
}

/* The honeypot never shows to a human. Hidden with the clip technique,
 * NOT a -9999px offset — that offset pushed a 10,000px scroll region off
 * the side of the page and was the source of the horizontal scroll. */
.rabt-form {
	position: relative;
}

.rabt-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.rabt-form__note {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	font-size: 0.95rem;
	border: 1px solid transparent;
}

.rabt-form__note--ok {
	color: #BFE9D6;
	background: rgba(29, 158, 117, 0.16);
	border-color: rgba(29, 158, 117, 0.5);
}

.rabt-form__note--err {
	color: #F4B8B0;
	background: rgba(216, 90, 48, 0.16);
	border-color: rgba(216, 90, 48, 0.5);
}

.rabt-form__submit {
	align-items: flex-start;
	margin-block-start: 0.25rem;
}

.rabt-form__submit .wp-block-button__link {
	cursor: pointer;
	font-size: 1rem;
	padding: 0.9rem 2.6rem;
}

@media (max-width: 640px) {
	.rabt-form {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Back-to-top disc (bottom-left). Same glass language as the buttons,
 * hidden until backtotop.js flags it in past the first screen. It floats
 * gently so it feels part of the drifting cosmos, and warms on hover.
 * ------------------------------------------------------------------- */
.rabt-totop {
	position: fixed;
	left: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 40;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--accent-2);
	background-color: rgba(16, 30, 59, 0.55);
	border: 1px solid rgba(138, 178, 251, 0.7);
	border-radius: 50%;
	cursor: pointer;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 6px 22px rgba(2, 8, 23, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition:
		opacity 0.4s ease,
		visibility 0.4s ease,
		transform 0.4s cubic-bezier(0.22, 0.9, 0.3, 1),
		border-color 0.3s ease,
		background-color 0.3s ease,
		box-shadow 0.5s ease;
}

.rabt-totop.is-in {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	animation: rabt-totop-float 4.5s ease-in-out infinite;
}

.rabt-totop:hover,
.rabt-totop:focus-visible {
	color: var(--wp--preset--color--white);
	background-color: rgba(34, 92, 255, 0.3);
	border-color: var(--wp--preset--color--accent-2);
	box-shadow: 0 0 26px rgba(34, 92, 255, 0.5);
	outline: none;
}

@keyframes rabt-totop-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
	.rabt-totop.is-in {
		animation: none;
	}
}

/* ---------------------------------------------------------------------
 * Scroll reveal. The class is only ever added by reveal.js, so without
 * JS — or under reduced motion, where the script never runs — every
 * element renders in its final state.
 * ------------------------------------------------------------------- */
.rabt-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.rabt-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------------
 * Equal-height cards: pin the last element (e.g. social icons)
 * to the bottom of the card, whatever the content length.
 * ------------------------------------------------------------------- */
.rabt-card {
	display: flex;
	flex-direction: column;
}

.rabt-card > :last-child {
	margin-block-start: auto !important;
	padding-block-start: 0.75rem;
}

/* ---------------------------------------------------------------------
 * Team portraits keep a fixed ratio so rows stay aligned.
 * ------------------------------------------------------------------- */
.rabt-portrait img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* ---------------------------------------------------------------------
 * Footer: divider between the info column and the logo column.
 * Logical properties keep it correct in both RTL and LTR; applied only
 * on desktop so stacked mobile columns get no stray rule or padding.
 * ------------------------------------------------------------------- */
@media (min-width: 782px) {
	.rabt-footer-divider {
		border-inline-end: 1px solid var(--wp--preset--color--outline);
		padding-inline-end: 3rem;
	}
}

/* ---------------------------------------------------------------------
 * Responsive visibility utilities. Add as an "Additional CSS class" on
 * any block (Advanced panel), or on inline <br>, to hide it per device:
 *   .rabt-hide-mobile  → hidden ≤ 600px
 *   .rabt-hide-tablet  → hidden 601–781px
 *   .rabt-hide-desktop → hidden ≥ 782px
 * ------------------------------------------------------------------- */
@media (max-width: 600px) {
	.rabt-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 601px) and (max-width: 781px) {
	.rabt-hide-tablet {
		display: none !important;
	}
}

@media (min-width: 782px) {
	.rabt-hide-desktop {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------
 * Warm Bone text pass. The brand's warm neutral (#F6F2EA = contrast)
 * replaces harsh pure white on headings and the softer grey on service
 * descriptions, so body copy reads warm and editorial, not cool-grey.
 * Site title and nav keep their own colours (not heading blocks).
 * ------------------------------------------------------------------- */
.wp-block-heading {
	color: var(--wp--preset--color--contrast) !important;
}

#services .wp-block-column p {
	color: var(--wp--preset--color--contrast-2) !important;
}

/* ---------------------------------------------------------------------
 * Section eyebrows hidden on every device (hero, about, services, team).
 * The small accent label above each section heading. Contact's eyebrow
 * is intentionally kept.
 * ------------------------------------------------------------------- */
#hero > .wp-block-cover__inner-container > p:first-child,
#about > p:first-child,
#services > p:first-child,
#team > p:first-child,
#contact > p:first-child {
	display: none !important;
}