/*!
 * Remote Sensei design-system rules that must apply SITE-WIDE.
 *
 * Why this file exists at all, rather than a page stylesheet or a SCSS partial:
 * it does a job SCSS cannot do: it prints BEFORE main.min.css and every page
 * sheet, so its rules lose every tie.
 * Sections 3 and 4 came from style.css (2026-11-06) and sat in exactly this
 * cascade slot there (style.css was enqueued right after this file), so moving
 * them changed nothing.
 *
 * Deliberately LOW SPECIFICITY (single class, no ids, no !important) so every page
 * stylesheet still wins a tie. It is loaded right after rs-cf7-base for that reason.
 * Section 3 is the exception: inherited rules, kept byte-for-byte, !important included.
 *
 * Hand-authored. This is not a SCSS build output — do not look for a .scss source.
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * 1. Social icons — interaction states
 *
 * Source of truth: Figma "Remote Sensei Universe 🌎", component set `socials`
 * (node 30888:20778). Variants are size (S|M) x color (black|teal|white) x
 * state (default|hover|click|disabled).
 *
 * The three colour variants differ ONLY in their default fill:
 *     black #34383c   teal #408897   white #fffffe
 * and all three share the same three interaction states:
 *     hover #f35b54   click #d9514b   disabled #d8e2e3
 *
 * So the DEFAULT colour is deliberately not set here — it is inherited from
 * whatever context the icon sits in, which already varies correctly by placement
 * (dark teal hero, white footer, light body). Only the states are global, because
 * only the states are the same everywhere. Setting a default here would repaint
 * every social icon on the site and is not what the design system asks for.
 *
 * Motion: Figma SMART_ANIMATE, 150ms, ease-in.
 * ───────────────────────────────────────────────────────────────────────────── */

/* `a.rs-social-link`, not `.rs-social-link`: newstyle.css's `.rs-social-icon` rule
   sets `transition: all .3s` at equal (0,1,0) specificity and loads later, so a bare
   class loses the duration and the footer icon eases over 300ms instead of the 150ms
   the design system specifies. Element+class (0,1,1) settles it. Measured on /blog/. */
a.rs-social-link {
	transition: color 150ms ease-in;
}

.rs-social-link:hover,
.rs-social-link:focus-visible {
	color: #f35b54;
}

/* :active must come after :hover to win — a click is also a hover. */
.rs-social-link:active {
	color: #d9514b;
}

.rs-social-link[aria-disabled="true"],
.rs-social-link.disabled {
	color: #d8e2e3;
	pointer-events: none;
}

/* The glyph inherits, so a colour set on the <a> reaches the <i> even where a
   page stylesheet colours the icon rather than the link. */
.rs-social-link > i,
.rs-social-link > svg {
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.rs-social-link {
		transition: none;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 2. Bootstrap tooltip skin
 *
 * Bootstrap's own tooltip CSS ships in both Bootstrap copies, so this only
 * restyles it to match the panel it replaces (the old hand-rolled
 * .rs-bsp-factcheck-panel: dark, 14px, generous line-height, wide).
 *
 * Bootstrap 5.3 reads these custom properties off .tooltip, so no selector
 * fights are needed — see getbootstrap.com/docs/5.3/components/tooltips/#css.
 * ───────────────────────────────────────────────────────────────────────────── */

.tooltip {
	--bs-tooltip-max-width: 420px;
	--bs-tooltip-padding-x: 16px;
	--bs-tooltip-padding-y: 14px;
	--bs-tooltip-font-size: 14px;
	--bs-tooltip-color: #d8e2e3;
	--bs-tooltip-bg: rgba(41, 45, 49, 0.97);
	--bs-tooltip-border-radius: 4px;
	--bs-tooltip-opacity: 1;
}

/* Bootstrap sets `text-align: center` on .tooltip-inner itself, not via a custom
   property, so left-aligning has to happen on that element — setting it on .tooltip
   loses to Bootstrap's own rule. The panel this replaces was left-aligned, and three
   lines of centred prose is hard to read. */
.tooltip .tooltip-inner {
	text-align: left;
	line-height: 1.5;
}

/* An element that carries a tooltip should say so on hover, the way the old
   fact-check trigger did with cursor:help. */
.rs-has-tooltip {
	cursor: help;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 3. Element atoms (from style.css)
 *
 * The only style.css rules that still decide something site-wide, measured with
 * computed styles on every template family at 375/800/1000/1440. Kept as they were;
 * changing them is a design call, not a cleanup.
 * ───────────────────────────────────────────────────────────────────────────── */

/* Anchor jumps land below the fixed header. */
:target {
	scroll-margin-top: 162px;
}

/* Links go coral on hover and press. Beats main.min.css's `a` (0,0,1), which only
   swaps a custom property on hover. The resting `a` colour comes from main.min.css. */
a:active, a:hover {
	color: #f35b54;
}

/* reCAPTCHA v3 badge; the forms carry the required notice in text instead. */
.grecaptcha-badge {
	visibility: hidden;
}

/* index.php (the fallback template) prints this title on default-template pages. */
h1.entry-title {
	display: none;
}

form input:focus, textarea:focus {
	border-color: #FFC94B !important;
}

/* Removes the browser focus ring from buttons. An accessibility debt kept as-is so
   this move changes nothing; replace it with a visible :focus-visible style. */
.yello_btn_style_form [type=button]:focus, [type=submit]:focus, button:focus-visible {
	outline: none !important;
}

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
	padding: 0.5rem 0.75rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 4. Blog card — template-parts/blog-card.php (from style.css)
 *
 * One card, many lists: /blog/, category, tag, date, search, the author archive,
 * template-resource.php and template-asana-vs-index.php. This is its single owner;
 * pages/post-list.scss and friends lay out the list around it, not the card.
 * ───────────────────────────────────────────────────────────────────────────── */

/* Every card list, not only singular pages: /blog/, search and the archives are not
   singular any more, and their avatars sat 3px low without this. */
.blog_post_list .post_meta img {
	position: relative;
	top: -3px;
}

.post_content .post_meta img.avatar.avatar-24.photo {
	border: 1px solid #fff;
	border-radius: 100%;
	display: inline-block !important;
	margin-bottom: -5px !important;
	margin-right: 4px !important;
	width: 24px;
	height: 24px;
}

.post_item {
	display: flex;
	padding-bottom: 40px;
	border-bottom: 1px solid #D8E2E3;
	margin-bottom: 40px;
}

/* The card owns its link decoration: main.min.css (Bootstrap 5.3) underlines every
   `a`. `.post_item a` is (0,1,1) and beats a bare `a` on specificity, so this holds
   whatever the load order. */
.post_item a,
.post_item a:hover,
.post_item a:focus {
	text-decoration: none;
}

.post_item:last-child {
	margin-bottom: 20px;
}

.post_img {
	flex: 0 0 362px;
	margin-right: 30px;
}

/* Fixed 362x264 cover, cropped (Figma 3833:4129; Raman's review on the author
   page, 2026-10-01) — uploads come in every aspect ratio, so a width cap alone gave
   each card a different height. */
.post_img img {
	display: block;
	width: 362px;
	height: 264px;
	object-fit: cover;
	border-radius: 4px;
}

.post_meta p {
	font-family: 'Hind Madurai' !important;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 100%;
	color: #A0BABD;
	margin-bottom: 0;
}

.post_meta p span {
	font-family: 'Hind Madurai';
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 160%;
	color: #678689;
}

/* The DATE is the last span; it takes the byline's own black-second so "By ... on
   <date>" reads as one colour around the teal author link (Raman's review on
   /asana-vs-other-apps-comparison/, 2026-09-25; applied to every blog card on
   Oskar's call). The author span is untouched: its <a> keeps its own teal. */
.post_meta p > span:last-of-type {
	color: #5D636A;
	font-weight: 400; /* the date is regular, only the author name is bold (Figma 27892:20785) */
}

.post_content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-bottom: 10px;
}

.post_content h3 {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 130%;
	color: #34383C;
	margin-top: 15px;
	margin-bottom: 10px;
}

.post_content h3 a {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 130%;
	color: #34383C;
}

.post_content p {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 165%;
	color: #5D636A;
	margin-bottom: 13px;
}

.post_content a {
	font-family: 'Hind Madurai';
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	color: #408897;
}

/* Hovering any of the card's three links — image, title, read-more — turns the
   title AND the read-more coral together (Raman's review, 2026-10-01). */
.post_content a:hover,
.post_item:has(.post_img a:hover, h3 a:hover, a.blog_btn:hover) :is(h3 a, a.blog_btn) {
	color: var(--rs-coral-00, #F35B54);
}

.post_content a i {
	margin-left: 10px;
}

@media only screen and (max-width: 767px) {
	.post_item {
		display: inline-block;
		width: 100%; /* a card with no image otherwise shrinks to its text */
		padding-bottom: 30px;
		margin-bottom: 30px;
	}
	.post_img {
		margin-right: 0;
	}
	.post_img img {
		width: 100%;
		height: auto;
		aspect-ratio: 335 / 246; /* Figma 5021:5243 */
	}
	.post_meta p {
		font-size: 14px;
		line-height: 100%;
	}
	.post_meta {
		margin-top: 10px;
	}
	.post_meta p span {
		font-size: 16px;
		line-height: 160%;
	}
	/* Title = DS heading-mobile-H3 (Figma 4044:4660), excerpt = DS Blog-mobile-M
	   (Figma 4044:4661) — Raman's call, 2026-10-02. The excerpt is scoped to `h3 + p`
	   because a bare `.post_content p` also caught the byline <p>. */
	.post_content h3 {
		font-weight: 700;
		font-size: 24px;
		line-height: 130%;
	}
	.post_content h3 + p {
		font-size: 16px;
		line-height: 160%;
	}
	.post_content h3 a {
		font-weight: 700;
		font-size: 24px;
		line-height: 130%;
	}
}