/*
 * 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
 *
 * EVERYTHING ABOVE THE "ADDITIONS" BANNER IS BYTE-FOR-BYTE AS IT WAS IN PAGE #23.
 * Keep it that way so it still diffs against
 * Desktop\Projects\SSI\elementor-custom-css-backup-2026-07-31\.
 * ---------------------------------------------------------------------------
 */

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

}
.project_container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 24px;
}
.project_card {
    width: 32%;
    background: #ffffff;
    box-shadow: 1px 3px 11px 0px #1b4c693d;
    border-radius: 10px;
    position: relative;
    border: 1px solid #19476359;
    transition:.4s all ease-in-out;
}
.project_card:hover {
    box-shadow: none;
    transition:.4s all ease-in-out;
}
.project_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.project_image {
    width: 100%;
    height: 250px;
}
.project_content h2 {
    /*font-family: "Eurostile Bold Updated", sans-serif !important;*/
    font-weight: 700;
    text-transform: uppercase;
    margin: 0px;
    line-height: 28px;
    letter-spacing: 0px;
    /*font-size: 16px;*/
    padding: 0px;
    color: #0d2c3e !important;
    padding-top: 7px;
}
.project_terms {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: end;
    row-gap: 5px;
    padding: 10px 10px 0px 0px;
    color:#0D2C3E;
}
span.project_term {
    background: #ffffff;
    /*font-size: 13px;*/
    color: #ffffff;
    line-height: 20px;
    padding: 2px 5px;
    width: max-content;
    /*font-family: "Eurostile", Sans-serif;*/
    border-top-right-radius: 10px;
    border-left: 3px solid #ef5714;
    color:#0D2C3E;
}
.project_content {
    padding: 15px 20px 20px 20px;
}
.project_loader {
    display: flex;
    justify-content: center;
    align-items: center;
    /*min-height: 300px;*/
    width: 100%;
}

.loader_spinner {
    width: 40px;
    height: 40px;
    background-color: #194966;
    animation: projectFlip 1.2s ease-in-out infinite;
}
h4.fetchvalue_terms {
    color: #245e82;
    text-transform: uppercase;
    font-size: 35px;
    font-family: "Eurostile", sans-serif;
    letter-spacing: 2.2px;
}
@keyframes projectFlip {
    0%   { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
    25%  { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
    50%  { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
    75%  { transform: perspective(120px) rotateX(0deg) rotateY(-180deg); }
    100% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
}

.project_filter {
    display: flex;
    flex-direction: row-reverse;
    column-gap: 25px;
    align-items: center;
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.36);
    padding: 20px;
    border-radius: 10px;
     /*font-family: "Eurostile", Sans-serif;*/
    font-weight: 600;
    margin-bottom: 45px;
    /*font-size: 17px;*/
    justify-content: space-between;
}
.filter-dropdown {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 1px solid #0d2c3e;
    border-radius: 6px;
    padding: 10px 40px 10px 14px;
    font-size: 16px;
    color: #0D2C3E;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
    width: 50%;
    font-family: "Eurostile", Sans-serif;
    font-weight: 600;
}
#filterSelectedLabel {
    width: 49%;
    color: #0D2C3E;
}

.filter-dropdown:focus {
    border-color: #0d2c3e;
}

@media only screen and (max-width: 980px) {
.project_container {
    flex-direction: column;
}
.project_card {
    width: 100%;
}
.project_filter {
    flex-direction: column;
    row-gap: 16px;
}
.filter-dropdown {
    width: 100%;
}
#filterSelectedLabel {
    width: 98%;
}
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .project_container {
    display: flex;
}
.project_card {
    width: 31.5%;
}
}

/*============================================*/
span.outerproject a {
 
    /*font-size: 18px;*/
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.2px;
    color: #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;
}
h2.fetchvalue_terms {
    color: #245f81;
 

 
    font-weight: 600;
    text-transform: uppercase !important;
    line-height: 45px;
    letter-spacing: 0.2px;
}
ul.project_subcategory_list li a {
 
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.2px;
    color: #000000;
    padding-bottom: 3px;
}
.project_category_name_static h2 {
    /*font-size: 28px;*/
    text-transform: uppercase !important;
    letter-spacing: 0.8px;
    color: #245E82;
    margin-bottom: 35px;
    font-weight: 600;
    line-height: 40px;
 
}

ul.project_subcategory_list li a:hover {
    color: #F26E22;
}  
.project_posts_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}    
.project_post_item {
    width: 48%;
    background: #ffffff;
    padding: 9px;
    box-shadow: 0px 4px 14px #1a4a673d;
    border-radius: 6px;
}
span.project_subcat_name {
    /*font-family: "Montserrat", Sans-serif;*/
    /*font-size: 14px;*/
    font-weight: 500;
    text-transform: capitalize;
    line-height: 22px;
    letter-spacing: 0.2px;
    color: #ef5714;
}
.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: #256083;
}
.project_content_wrap {
    padding: 9px 0px 12px 0px;
}
.project_image_wrap {
    width: 100%;
    height: 250px;
}
.project_image_wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
    button.project_load_more_btn {
    padding: 5px 20px;
    background: #ef5714;
    color: #ffffff;
    font-size: 16px;
}

button.project_load_more_btn:hover {;
    background: #ef5714;
}
@media only screen and (max-width: 980px) {
    .project_post_item {
         width: 100%;
    }
    .project_category_name_static h3 {
        font-size: 24px;
    }
    h3.fetchvalue_terms {
        font-size: 24px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1366px) {
    .project_post_item {
         width: 46%;
    }
}



.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: #16425d;
}


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

.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: #FF3D00;
    width: 16px;
    height: 16px;
    transform: translate(-50%, 50%);
    border-radius: 50%;
}
.project_loader::before {
    left: auto;
    right: 0;
    background:#266387;
    transform: translate(50%, 100%);
}

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

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




.project_load_more_wrap {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 20px;
}

.project_load_more_btn {
    padding: 12px 28px;
    border: none;
    background: #111;
    color: #fff;
    cursor: pointer;
    border-radius: 30px;
    font-size: 15px;
}

.project_load_more_btn:hover {
    background: #444;
}
@media(max-width: 768px) {
    .project_taxonomy_fetch {
        grid-template-columns: 1fr;
    }
    .project_taxonomy_left {
        border-right: 0;
        padding-right: 0;
    }
    .project_posts_wrap {
        grid-template-columns: 1fr;
    }
}

/* ===========================================================================
 * DESIGN TOKENS — the single place to change a colour.
 * ---------------------------------------------------------------------------
 * Everything ABOVE this banner is the verbatim page-#23 block and is LEGACY: it
 * is deliberately NOT tokenised, so it stays byte-identical to
 * Desktop\Projects\SSI\elementor-custom-css-backup-2026-07-31\ and remains
 * diffable. Where a legacy value needed to change it is OVERRIDDEN below rather
 * than edited in place.
 *
 * Consolidated 2026-07-31 (token pass):
 *   #EF5714  -> --ssi-orange      (was a second, indistinguishable orange)
 *   #256083  -> --ssi-blue        (3 hex from #245E82)
 *   #245F81  -> --ssi-blue        (one-digit typo of #245E82; dead selector)
 *   #16425D  -> removed           (active-category state no longer differs)
 *
 * NOT consolidated, deliberately — see CLAUDE.md:
 *   #0D2C3E / #194966  legacy [projectmigration] colours, inert here
 *   #F26E22 contrast (2.99:1) is a separate sitewide decision
 * ===========================================================================
 */
:root {
	--ssi-navy:        #00193B;  /* body text, project names          */
	--ssi-blue:        #245E82;  /* headings, accents, card titles     */
	--ssi-orange:      #F26E22;  /* CTAs, links, category tags         */
	--ssi-offwhite:    #F7F5F6;  /* section + meta-panel background    */
	--ssi-white:       #FFFFFF;  /* page background                    */
	--ssi-grey:        #707070;  /* fine print, muted text, hairlines  */
	--ssi-field:       #1B4F6E;  /* form field background              */
	--ssi-grad-start:  #15405A;  /* footer CTA gradient                */
	--ssi-grad-end:    #28678B;
}

/* ===========================================================================
 * 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: #245E82;
	font-family: "Eurostile-black", sans-serif;
	font-size: 47px;
	font-weight: 600;
	line-height: 40px;
	letter-spacing: 0.8px;
	text-transform: uppercase !important;
	margin: 0 0 35px;
}

/* --- Category sidebar links: one weight, one colour -----------------------
 * (Gary 2026-07-31.) The relocated block sets the active item to `font-weight:
 * bold` and `#16425d`, and every item to `#000000`. Both are dropped here: all
 * nav links read at weight 500 in #00193B, so the list is uniform.
 * #000000 was also the one off-palette colour in the live contract CSS
 * (STYLE_AUDIT.md §3) — this retires it.
 * 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(--ssi-navy, #00193B);
	font-weight: 500;
}
.project_subcategory_click.active {
	color: var(--ssi-navy, #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(--ssi-blue, #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(--ssi-blue, #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;
}

/* Card project name: Source Sans 3 30, regular, ALL CAPS. The kit gives h4
 * "Eurostile Bold Updated" 25px and the relocated block adds weight 700 +
 * capitalize, so family, size, weight and transform all have to be restated.
 * The category line is regular too and keeps the data's own casing. */
.project_content_wrap h4 {
	font-family: "Source Sans 3", sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--ssi-navy, #00193B);   /* was #256083 — matches completed list + detail H1 */
}
span.project_subcat_name {
	font-family: "Source Sans 3", sans-serif;
	font-size: 20px;           /* inherits 21px from the kit's `a` rule otherwise */
	font-weight: 400;
	line-height: 1.35;
	/* Second orange collapsed. The legacy block sets #EF5714 here; it and #F26E22
	 * are rgb(242,110,34) vs rgb(239,87,20) — indistinguishable at any size. */
	color: var(--ssi-orange, #F26E22);
}

/* Same collapse for the theme's Load More button (legacy sets #EF5714). */
button.project_load_more_btn,
button.project_load_more_btn:hover {
	background: var(--ssi-orange, #F26E22);
}

/* --- 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;
	}
}