/* ==========================================================================
   Salem Industrial — WordPress compatibility layer
   Loaded AFTER style.css (the verbatim original stylesheet).

   This file never restyles the delivered landing page. Every selector below is
   anchored to a class that only exists on WordPress-only views (.site-main,
   .entry-*, .post-list, .page-hero, .search-form, …), so nothing here can
   cascade into the one-page landing markup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Admin bar offset.
   The site header is position:fixed at top:0, so the WordPress admin bar would
   cover it. Only applies while an administrator is logged in.
   -------------------------------------------------------------------------- */
body.admin-bar .site-header { top: 32px; }
body.admin-bar { --anchor-offset: 132px; }

@media screen and (max-width: 782px) {
	body.admin-bar { --anchor-offset: 138px; }
}

@media screen and (max-width: 600px) {
	body.admin-bar .site-header { top: 46px; }
}

/* The admin bar is 46px tall on small screens; keep the header's own metrics. */
body.admin-bar .site-header.scrolled { background: rgba(15, 14, 12, 0.82); }

/* --------------------------------------------------------------------------
   Core class collisions.
   `custom-logo` and `sticky` are body classes; `.home`/`.blog` are body classes.
   None of them are used by the original stylesheet, but pinning the landing
   page's own layout prevents any future core rule from leaking in.
   -------------------------------------------------------------------------- */
body.salem-landing main#top { display: block; }
body.salem-landing .entry,
body.salem-landing .post-list { display: none; }

/* WordPress injects `.alignleft/.alignright/.aligncenter` inside post content
   only; the landing page contains none of them. */

/* Screen-reader text used by the search form must not inherit link colours. */
.salem-inner .screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.salem-inner .screen-reader-text:focus {
	background-color: var(--ink);
	border-radius: var(--radius-pill);
	clip-path: none;
	color: var(--bg);
	display: block;
	font-size: 13px;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 10px 18px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* --------------------------------------------------------------------------
   Optional site logo.
   The delivered design renders the site name as text; this only takes effect
   once a Site Logo has been uploaded in the Customizer.
   -------------------------------------------------------------------------- */
.brand-logo {
	display: block;
	width: auto;
	height: 34px;
}

/* --------------------------------------------------------------------------
   Tables inside post content.
   -------------------------------------------------------------------------- */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 28px 0;
	font-size: 15px;
}
.entry-content th,
.entry-content td {
	border: var(--hairline) solid var(--line);
	padding: 12px 14px;
	text-align: start;
}
.entry-content th {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
}

/* --------------------------------------------------------------------------
   Project thumbnails (CPT integration).
   The landing page uses .p-visual with gradient backgrounds.
   When a project has a featured image, we show it as a background-image
   while keeping the gradient overlay for text readability.
   -------------------------------------------------------------------------- */
.p-visual.has-thumbnail {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}
.p-visual.has-thumbnail::before {
	content: "";
	position: absolute;
	inset: 0;
	/* The featured image is applied inline as background-image, which replaces
	   the variant gradient in the element's computed background. `background:
	   inherit` would therefore repaint the photo (a ghost copy), not the veil
	   the comment below describes. Paint the delivered gradient explicitly so
	   the designed stack is preserved: photo behind, gradient in front,
	   text above. Values mirror .p-visual-1/2/3 in the original stylesheet. */
	opacity: 0.75;
	z-index: 0;
}
.p-visual-1.has-thumbnail::before { background: linear-gradient(160deg, #1b1813, #0f0e0c 60%); }
.p-visual-2.has-thumbnail::before { background: linear-gradient(200deg, #20201d, #0f0e0c 55%); }
.p-visual-3.has-thumbnail::before { background: linear-gradient(140deg, #14161a, #0f0e0c 60%); }
.p-visual.has-thumbnail > span,
.p-visual.has-thumbnail > small {
	position: relative;
	z-index: 1;
}

/* Ensure the project visual maintains aspect ratio with thumbnail. */
.project-visual { overflow: hidden; }
.project-visual .p-visual {
	aspect-ratio: 16 / 10;
}