/*
 * ssi-contract.css — SSI "Projects" markup/class contract styling.
 * ---------------------------------------------------------------------------
 * ORIGIN: this block was authored in the Elementor Custom CSS box of page #23
 * ("Projects", the landing page) — Page Settings > Advanced > Custom CSS, stored
 * in the _elementor_page_settings post meta and emitted to
 * uploads/elementor/css/post-23.css. Lifted out of there verbatim 2026-07-31.
 *
 * RELOCATED FROM THE CHILD THEME PER GARY, 2026-07-31. It lived briefly at
 * themes/STRUCTURALSYSTEMSINC/ssi-contract.css. It now ships inside the plugin so
 * ssi-projects is ONE self-contained deliverable: everything the Projects section
 * needs travels with the plugin and the child theme carries nothing from this work.
 *
 * WHY IT LEFT THE ELEMENTOR BOX (STYLE_AUDIT.md BLOCKER-6): Elementor per-page
 * Custom CSS loads on that page ONLY. Single project pages (/projects/{slug}/) and
 * category archives (/project_category/{slug}/) never received it, so the reused
 * contract classes rendered unstyled there — which is why the plugin had
 * defensively re-declared the category sidebar (twice) and the whole card.
 *
 * ACCEPTED TRADE-OFF: these classes are also rendered by the THEME's own
 * [projecttaxonomy] shortcode. With the CSS plugin-owned, deactivating
 * ssi-projects leaves that shortcode's output unstyled anywhere it appears outside
 * the plugin's own templates. Deliberate, for portability.
 *
 * HARD RULE: contract CSS lives HERE. Never paste it back into an Elementor page's
 * Custom CSS box — that re-breaks every template except the one page it sits on.
 * It has already propagated into TWO boxes historically (#23 and the retired
 * #2343), so always scan rather than assume one copy:
 * Tools > SSI Projects runs the scanner.
 *
 * LOAD ORDER: enqueued in includes/assets.php as handle 'ssi-projects-contract',
 * dependent on the ACTIVE Elementor kit's stylesheet handle, which is resolved at
 * RUNTIME (never hardcoded — the kit id is 6 on this install only). That is
 * required, not cosmetic: three rules below tie the kit at specificity (0,1,1) and
 * win only on source order --
 *     h4.fetchvalue_terms              vs .elementor-kit-N h4
 *     .project_category_name_static h2 vs .elementor-kit-N h2
 *     .project_content_wrap h4         vs .elementor-kit-N h4
 *
 * 1.6.1 (2026-10-22): dead / duplicate rules removed per the sitewide CSS audit and
 * every colour pointed at the Elementor kit globals (var(--e-global-color-*)).
 * The legacy block is therefore no longer byte-identical to the page-#23 backup.
 * ---------------------------------------------------------------------------
 */

.fetchvalue_terms {
margin: 13px 0px 30px 0px;

}

.project_loader {
    display: flex;
    justify-content: center;
    align-items: center;
    /*min-height: 300px;*/
    width: 100%;
}

h4.fetchvalue_terms {
    color: var(--e-global-color-primary, #245E82);
    text-transform: uppercase;
    font-size: 35px;
    font-family: "Eurostile", sans-serif;
    letter-spacing: 2.2px;
}

/*============================================*/
span.outerproject a {
 
    /*font-size: 18px;*/
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.2px;
    color: var(--e-global-color-text, #F26E22);
    padding-bottom: 3px;
    padding-top: 25px;
    display: block;
    text-transform: uppercase;
    /*font-family: "Eurostile Regular", Sans-serif;*/
    letter-spacing: 0.2px;
}

.project_taxonomy_fetch {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 30px;
}

.project_taxonomy_left {
    padding-right: 20px;
}

ul.project_subcategory_list li a {
 
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.2px;
    color: var(--e-global-color-secondary, #00193B);
    padding-bottom: 3px;
}
.project_category_name_static h2 {
    /*font-size: 28px;*/
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--e-global-color-primary, #245E82);
    margin-bottom: 35px;
    font-weight: 600;
    line-height: 40px;
 
}

ul.project_subcategory_list li a:hover {
    color: var(--e-global-color-text, #F26E22);
}  
.project_posts_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}    
.project_post_item {
    width: 48%;
    background: var(--e-global-color-accent, #FFFFFF);
    padding: 9px;
    box-shadow: 0px 4px 14px rgba(0, 25, 59, 0.24);
    border-radius: 6px;
}

.project_content_wrap h4 {
    /*font-family: "Montserrat", Sans-serif;*/
    /*font-size: 20px;*/
    font-weight: 700;
    text-transform: capitalize;
    line-height: 30px;
    letter-spacing: 0.2px;
    margin: 0px;
    color: var(--e-global-color-primary, #245E82);
}
.project_content_wrap {
    padding: 9px 0px 12px 0px;
}
.project_image_wrap {
    width: 100%;
    height: 250px;
}
.project_image_wrap img {
    width: 100%;
    height: 100% !important; /* !important: beats `.elementor img {height:auto}` and the theme reset (audit #540) */
    object-fit: cover;
}

.project_subcategory_list {
    list-style: none;
    padding-left: 0;
}

.project_subcategory_click {
    display: inline-block;
    margin-bottom: 8px;
    cursor: pointer;
}
.project_subcategory_click.active {
    font-weight: bold;
    text-decoration: underline;
    color: var(--e-global-color-secondary, #00193B);
}

.project_post_item img {
    width: 100%;
    height: auto;
    display: block;
}

.project_loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: block;
    margin:15px auto;
    position: relative;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
        /*top: 160px;*/
}
.project_loader::after,
.project_loader::before {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--e-global-color-text, #F26E22);
    width: 16px;
    height: 16px;
    transform: translate(-50%, 50%);
    border-radius: 50%;
}
.project_loader::before {
    left: auto;
    right: 0;
    background: var(--e-global-color-primary, #245E82);
    transform: translate(50%, 100%);
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 


@media(max-width: 768px) {

    .project_posts_wrap {
        grid-template-columns: 1fr;
    }
}

/* ===========================================================================
 * ADDITIONS after the 2026-07-31 relocation. Everything ABOVE this line is the
 * verbatim page-#23 block; everything below is authored. Keep it that way so a
 * future diff against the backup still works.
 * ===========================================================================
 */

/* --- Category-archive H1 -------------------------------------------------
 * The archive template had no H1 at all (STYLE_AUDIT.md A11Y-7). It now emits
 * the term name as <h1> inside the contract's own wrapper. Extending the
 * existing selector to cover h1 keeps ONE source of truth for this heading
 * instead of the plugin re-declaring it. The landing still uses <h2>. */
.project_category_name_static h1 {
	color: var(--e-global-color-primary, #245E82);
	font-family: "Eurostile-black", sans-serif;
	font-size: 47px;
	font-weight: 600;
	line-height: 40px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	margin: 0 0 35px;
}

/* --- Category sidebar links: one weight, one colour -----------------------
 * (Gary 2026-07-31.) All nav links read at weight 500 in Structural Blue, so the
 * list is uniform (the legacy block's bold active state is overridden here).
 * Selectors match the originals' specificity and sit later in the file, so they
 * win without !important and the verbatim block above stays diffable. */
ul.project_subcategory_list li a,
ul.project_subcategory_list li a:visited {
	color: var(--e-global-color-secondary, #00193B);
	font-weight: 500;
}
.project_subcategory_click.active {
	color: var(--e-global-color-secondary, #00193B);
	font-weight: 500;
}

/* --- Section headings: off the black face ---------------------------------
 * (Gary 2026-07-31: "way too bold".) "COMMERCIAL PROJECTS" / "RESIDENTIAL
 * PROJECTS" inherit `font-family: Eurostile-black` from the kit's h2 rule.
 * eurostile-black.ttf is a SINGLE black-weight file, so the relocated block's
 * `font-weight: 600` has no effect — the face is black regardless. Only a family
 * change lightens it. "Eurostile Bold Updated" is a genuine bold face; weight is
 * pinned to 400 so the browser does not synthesise faux-bold on top of it.
 *
 * Weight ladder if this needs another nudge:
 *   "Eurostile"             lightest (regular)
 *   "Eurostile Bold Updated"  <- here
 *   "Eurostile-black"       heaviest (previous) */
/* Landing section headings ("COMMERCIAL PROJECTS") stay on the Eurostile bold
 * face. Size pinned: it used to be inherited from whatever the site's Elementor
 * kit set for h2 — 47px on Local but 38px on staging, so the same build looked
 * different in each environment. */
.project_category_name_static h2 {
	font-family: "Eurostile Bold Updated", sans-serif;
	font-weight: 400;
	font-size: 38px;
	line-height: 40px;
	color: var(--e-global-color-primary, #245E82);
}

/* Category-archive H1 — same Eurostile bold face as the landing's section
 * headings. NOT Montserrat: per Gary 2026-07-31, nothing in the Projects section
 * uses Montserrat. The rest of the site uses it for h1; this section is
 * deliberately Eurostile + Source Sans 3 only. */
.project_category_name_static h1 {
	font-family: "Eurostile Bold Updated", sans-serif;
	font-weight: 400;
	font-size: 38px;
	line-height: 40px;
	color: var(--e-global-color-primary, #245E82);
}

/* --- Cards: project name above the category, neither bold -----------------
 * (Gary 2026-07-31.) Approved landing visual puts the PROJECT NAME directly under
 * the image with the category beneath it — the reverse of the source order.
 *
 * Done with flex `order`, NOT by swapping the markup: the reuse contract fixes
 * `project_content_wrap > project_subcat_name + project_title` as the tag/nesting
 * order, and the theme's own AJAX card renderer emits it that way too. Reordering
 * visually keeps one card component that looks right no matter which renderer
 * produced it. Reading order still gives the name first to a screen reader,
 * because flex order does not move it in the accessibility tree — it is already
 * first visually and the category reads as its supporting label. */
.project_content_wrap {
	display: flex;
	flex-direction: column;
}
.project_content_wrap .project_title {
	order: 1;
}
.project_content_wrap .project_subcat_name {
	order: 2;
}

/* --- Uniform card height -------------------------------------------------
 * Card titles clamp to two lines so archive cards stay level. Scoped to the
 * archive; the landing's curated 2-up sets are hand-picked and unaffected. */
.ssi-archive .project_content_wrap h4 {
	min-height: 60px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Sidebar-less browser: full width, three-up cards ---------------------
 * (Gary, 2026-08-06.) The category data is not organised yet, so the left
 * CATEGORY nav is suppressed and the browser shows every project at once.
 *
 * Done with an `ssi-nonav` MODIFIER on the wrapper, never by editing the shared
 * rules: `.project_taxonomy_fetch` (30%/70%) and `.project_post_item` (48%) are
 * the sidebar layout and have to come back untouched when the nav does.
 * Specificity (0,2,0) beats the (0,1,0) originals without !important.
 *
 * 3 columns with the existing 30px flex gap = 2 gaps to subtract. */
.project_taxonomy_fetch.ssi-nonav {
	grid-template-columns: 1fr;
	gap: 0;
}
.ssi-nonav .project_post_item {
	width: calc((100% - 60px) / 3);
}
/* Rows stay level. Without this the cards run 352-424px tall depending on how
 * many lines the project name takes, and every row steps. Same two-line clamp the
 * category archive already uses — extended to the sidebar-less grid, which is now
 * the same thing: a full listing rather than a hand-picked pair. */
.ssi-nonav .project_content_wrap h4 {
	min-height: 72px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ssi-nonav .project_posts_wrap {
	align-items: stretch;
}

/* --- Responsive ----------------------------------------------------------
 * Breakpoints follow the ELEMENTOR KIT (1024 / 767), which is the site's
 * authoritative responsive system. The moved block above also carries legacy
 * 1366 / 980 / 768 queries from the original author; those still apply and are
 * left untouched. */
@media (max-width: 1024px) {
	/* 3-up -> 2-up. Restated with the modifier because the plain
	 * `.project_post_item { width: 100% }` below is (0,1,0) and would lose. */
	.ssi-nonav .project_post_item {
		width: calc((100% - 30px) / 2);
	}
}
@media (max-width: 767px) {
	.ssi-nonav .project_post_item {
		width: 100%;
	}
}
@media (max-width: 1024px) {
	/* Landing browser: sidebar above, cards below. */
	.project_taxonomy_fetch {
		grid-template-columns: 1fr;
	}
	.project_taxonomy_left {
		padding-right: 0;
	}
	.project_post_item {
		width: 100%;
	}
	.project_category_name_static h1 {
		font-size: 34px;
		line-height: 1.15;
	}
}

@media (max-width: 767px) {
	.project_category_name_static h1 {
		font-size: 27px;
	}
}