/* Custom CSS Code */

/* ===========================================================================
   Steaks.com - site fixes
   Added 2026-08-21. This file is enqueued by functions.php with filemtime()
   as its version, so edits here bust the cache automatically. style.css is
   enqueued with a hardcoded version and does not, which is why custom rules
   belong in this file instead.
   =========================================================================== */

/* Every page is built in Elementor and carries its own headline, so the
   theme's page-title bar duplicates it. The front page never rendered one;
   interior pages and drafts did. */
.page-header,
.page-header .entry-title {
	display: none;
}

/* The dark page background is set per page in Elementor page settings, which
   is not copied when a page is duplicated. Painting it here means a cloned
   page can never land on white. */
body {
	background-color: #111111;
}

/* The mobile menu button was a 30x30 target. 44x44 is the accepted minimum
   for a reliable tap. */
.elementor-menu-toggle {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Product cards in the tabbed section rendered at three different heights
   (253px, 212px, 212px) because the images were placed at their natural
   aspect ratio with no crop. One height plus object-fit:cover lines the
   cards up and stops any image being squashed. */
.elementor-element-d8dc7cf img {
	width: 100%;
	height: 210px;
	object-fit: cover;
	display: block;
}

/* Inline styles cannot express :hover or transitions, and WordPress strips both
   the transition property and any <style> block from widget content. These live
   here instead, keyed off stable selectors. */

/* affiliate click-outs */
a[href^="/go/"] {
	transition: background-color .16s ease, transform .16s ease;
}
a[href^="/go/"]:hover,
a[href^="/go/"]:focus-visible {
	background-color: #E8915A !important;
}
a[href^="/go/"]:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

/* product and comparison cards lift slightly on hover so they read as one unit */
.elementor-element-d8dc7cf .e-con-inner,
.elementor-element-d8dc7cf [data-element_type="container"] {
	transition: border-color .18s ease;
}

/* comparison table rows */
.stk-row:hover { background: #151517; }

/* Click-outs measured 118x35. 44px is the accepted minimum for a reliable tap,
   and these are the only revenue-bearing controls on the page. */
a[href^="/go/"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 18px !important;
}

/* Card hover and focus. Inline styles cannot express either, and the versus
   cards in particular are navigation - they need to feel like it. */
.stk-vs-card,
.stk-card {
	transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.stk-vs-card:hover,
.stk-vs-card:focus-visible {
	border-color: #FBAD7C !important;
	background-color: #151517 !important;
	transform: translateY(-2px);
}
.stk-card:hover {
	border-color: #34343A !important;
}
.stk-vs-card:focus-visible {
	outline: 2px solid #FBAD7C;
	outline-offset: 2px;
}
/* the whole versus card is the link, so its inner text must not fight it */
.stk-vs-card * { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.stk-vs-card, .stk-card, a[href^="/go/"] { transition: none; transform: none; }
}