/*
Theme Name: SureBuilt Series
Theme URI: https://surebuiltseries.org/
Author: SureBuilt Series
Description: A scholarly publishing and conference theme for the built environment. Designed for the SureBuilt Core plugin, which holds all editorial data and workflow — the platform keeps working if this theme is replaced.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: surebuilt-series
Tags: education, custom-menu, featured-images, translation-ready, accessibility-ready
*/

/* ---------------------------------------------------------------------
 * Tokens
 *
 * The palette comes from the drawing office rather than the lecture hall:
 * drafting-paper white, ink blue, a verdigris that reads as "passed", and
 * survey amber for anything with a deadline on it. Metadata is set in a
 * monospaced face because manuscript IDs, DOIs and dates are the numbers a
 * scholarly platform actually runs on.
 * ------------------------------------------------------------------ */
:root {
	--sbs-ink: #0e1a24;
	--sbs-blue: #14476b;
	--sbs-blue-dark: #0d3151;
	--sbs-verdigris: #1c7a6d;
	--sbs-amber: #9d6a10;
	--sbs-crimson: #9d3b2e;
	--sbs-paper: #f7f8f6;
	--sbs-surface: #ffffff;
	--sbs-rule: #d6dcd9;
	--sbs-muted: #5d6b73;
	--sbs-radius: 3px;
	--sbs-font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sbs-font-display: "Spectral", Georgia, "Times New Roman", serif;
	--sbs-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--sbs-shell: 1180px;
	--sbs-gutter: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--sbs-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--sbs-ink);
	background: var(--sbs-paper);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--sbs-blue); }
a:hover { color: var(--sbs-blue-dark); }
:focus-visible { outline: 2px solid var(--sbs-blue); outline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--sbs-font-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }

.shell { max-width: var(--sbs-shell); margin: 0 auto; padding: 0 var(--sbs-gutter); }
.shell--narrow { max-width: 780px; }

.eyebrow {
	font-family: var(--sbs-font-mono);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--sbs-muted);
	margin: 0 0 .5rem;
}
.eyebrow--light { color: rgba(255, 255, 255, .72); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: #fff; padding: .7rem 1rem; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------ */
.site-header { background: var(--sbs-surface); border-bottom: 1px solid var(--sbs-rule); position: relative; z-index: 20; }
.site-header__bar { display: flex; align-items: center; gap: 1.5rem; padding: 1rem 0; }
.site-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
.site-brand__mark { width: 34px; height: 34px; flex: none; }
.site-brand__name { font-family: var(--sbs-font-display); font-size: 1.16rem; line-height: 1.1; display: block; }
.site-brand__tagline { font-family: var(--sbs-font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .13em; color: var(--sbs-muted); display: block; margin-top: .2rem; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding: .5rem .7rem; font-size: .87rem; color: var(--sbs-ink); text-decoration: none; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav .current-menu-item > a { color: var(--sbs-blue); border-bottom-color: var(--sbs-blue); }
.site-header__actions { display: flex; gap: .5rem; align-items: center; }

.nav-toggle { display: none; background: none; border: 1px solid var(--sbs-rule); border-radius: var(--sbs-radius); padding: .5rem .7rem; font-size: .85rem; cursor: pointer; }

/* ---------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------ */
.button {
	display: inline-block;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1;
	padding: .8rem 1.3rem;
	border-radius: var(--sbs-radius);
	background: var(--sbs-blue);
	border: 1px solid var(--sbs-blue);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.button:hover { background: var(--sbs-blue-dark); border-color: var(--sbs-blue-dark); color: #fff; }
.button--ghost { background: transparent; color: var(--sbs-blue); }
.button--ghost:hover { background: rgba(20, 71, 107, .08); color: var(--sbs-blue); }
.button--light { background: #fff; border-color: #fff; color: var(--sbs-ink); }
.button--light:hover { background: rgba(255, 255, 255, .86); color: var(--sbs-ink); }
.button--outline-light { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.button--outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.button--small { padding: .55rem .9rem; font-size: .8rem; }

/* ---------------------------------------------------------------------
 * Hero — the drafting-grid thesis
 * ------------------------------------------------------------------ */
.hero {
	position: relative;
	background: var(--sbs-ink);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, .15));
	z-index: -1;
}
.hero__media { position: absolute; inset: 0; z-index: -2; opacity: .28; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.hero__inner { padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem); max-width: 800px; }
.hero__title { font-size: clamp(2.1rem, 5.2vw, 3.5rem); margin: 0 0 .6rem; color: #fff; }
.hero__theme { font-family: var(--sbs-font-display); font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-style: italic; color: rgba(255, 255, 255, .82); margin: 0 0 1.2rem; }
.hero__description { font-size: 1.02rem; color: rgba(255, 255, 255, .78); max-width: 62ch; margin: 0 0 1.8rem; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid rgba(255, 255, 255, .18); border-bottom: 1px solid rgba(255, 255, 255, .18); margin: 0 0 1.8rem; }
.hero__fact { padding: .9rem 1.4rem .9rem 0; margin-right: 1.4rem; border-right: 1px solid rgba(255, 255, 255, .18); }
.hero__fact:last-child { border-right: 0; }
.hero__fact dt { font-family: var(--sbs-font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .6); margin: 0 0 .3rem; }
.hero__fact dd { margin: 0; font-size: .95rem; color: #fff; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero__countdown { font-family: var(--sbs-font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sbs-amber); margin-top: 1.4rem; }
.hero__countdown strong { color: #fff; }

/* ---------------------------------------------------------------------
 * Sections
 * ------------------------------------------------------------------ */
.section { padding: clamp(2.8rem, 6vw, 4.5rem) 0; }
.section--paper { background: var(--sbs-paper); }
.section--surface { background: var(--sbs-surface); border-top: 1px solid var(--sbs-rule); border-bottom: 1px solid var(--sbs-rule); }
.section--ink { background: var(--sbs-ink); color: #fff; }
.section--ink h2, .section--ink h3 { color: #fff; }

.section__head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; }
.section__title { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.section__lead { color: var(--sbs-muted); max-width: 62ch; margin: .5rem 0 0; }
.section--ink .section__lead { color: rgba(255, 255, 255, .72); }

.grid { display: grid; gap: 1.4rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------ */
.card {
	background: var(--sbs-surface);
	border: 1px solid var(--sbs-rule);
	border-radius: var(--sbs-radius);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--sbs-blue); }
.card__title { font-size: 1.16rem; margin: 0; }
.card__title a { color: var(--sbs-ink); text-decoration: none; }
.card__title a:hover { color: var(--sbs-blue); }
.card__theme { font-family: var(--sbs-font-display); font-style: italic; color: var(--sbs-muted); margin: 0; }
.card__meta { font-family: var(--sbs-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sbs-muted); margin: 0; }
.card__excerpt { font-size: .92rem; color: var(--sbs-ink); margin: 0; }
.card__footer { margin-top: auto; padding-top: .8rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

.status {
	display: inline-block;
	font-family: var(--sbs-font-mono);
	font-size: .66rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	padding: .25em .65em;
	border: 1px solid currentColor;
	border-radius: 2px;
}
.status--call_for_papers, .status--submissions_open { color: var(--sbs-verdigris); }
.status--under_review { color: var(--sbs-blue); }
.status--registration_open { color: var(--sbs-amber); }
.status--completed { color: var(--sbs-muted); }

/* Keynote cards */
.speaker { background: var(--sbs-surface); border: 1px solid var(--sbs-rule); border-radius: var(--sbs-radius); overflow: hidden; display: flex; flex-direction: column; }
.speaker__portrait { aspect-ratio: 4 / 3; background: var(--sbs-paper); overflow: hidden; }
.speaker__portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .2s ease; }
.speaker:hover .speaker__portrait img { filter: grayscale(0); }
.speaker__placeholder { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--sbs-font-display); font-size: 2rem; color: var(--sbs-muted); background: repeating-linear-gradient(45deg, #eef1ef, #eef1ef 8px, #f7f8f6 8px, #f7f8f6 16px); }
.speaker__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.speaker__name { font-size: 1.1rem; margin: 0; }
.speaker__name a { color: var(--sbs-ink); text-decoration: none; }
.speaker__role { font-size: .88rem; color: var(--sbs-muted); margin: 0; }
.speaker__bio { font-size: .9rem; margin: .4rem 0 0; }
.speaker__link { margin-top: auto; padding-top: .8rem; font-size: .84rem; }

/* Research areas */
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--sbs-rule); border: 1px solid var(--sbs-rule); }
.area { background: var(--sbs-surface); padding: 1.1rem 1.2rem; text-decoration: none; color: inherit; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.area:hover { background: var(--sbs-paper); color: var(--sbs-blue); }
.area__name { font-size: .95rem; }
.area__count { font-family: var(--sbs-font-mono); font-size: .74rem; color: var(--sbs-muted); }

/* Paper list */
.paper { padding: 1.4rem 0; border-bottom: 1px solid var(--sbs-rule); }
.paper__title { font-size: 1.12rem; margin: 0 0 .3rem; }
.paper__title a { color: var(--sbs-ink); text-decoration: none; }
.paper__title a:hover { color: var(--sbs-blue); }
.paper__authors { font-size: .92rem; color: var(--sbs-ink); margin: 0 0 .3rem; }
.paper__meta { font-family: var(--sbs-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sbs-muted); margin: 0 0 .5rem; }
.paper__abstract { font-size: .92rem; color: var(--sbs-muted); margin: 0; }

/* Announcements */
.notice-item { display: grid; grid-template-columns: 120px 1fr; gap: 1.2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--sbs-rule); }
.notice-item__date { font-family: var(--sbs-font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sbs-muted); }
.notice-item__title { font-size: 1.05rem; margin: 0 0 .3rem; }
.notice-item__title a { color: var(--sbs-ink); text-decoration: none; }
.notice-item__title a:hover { color: var(--sbs-blue); }

/* ---------------------------------------------------------------------
 * Article and conference pages
 * ------------------------------------------------------------------ */
.page-head { background: var(--sbs-surface); border-bottom: 1px solid var(--sbs-rule); padding: clamp(2.2rem, 5vw, 3.4rem) 0 clamp(1.6rem, 3vw, 2.4rem); }
.page-head__title { font-size: clamp(1.8rem, 4vw, 2.7rem); margin: 0 0 .5rem; max-width: 24ch; }
.page-head__meta { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .9rem; color: var(--sbs-muted); align-items: center; }
.page-head__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; }

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; padding: 2.5rem 0 4rem; }
.article-body { font-size: 1.02rem; }
.article-body h2 { font-size: 1.4rem; margin: 2rem 0 .8rem; }
.article-body h3 { font-size: 1.12rem; margin: 1.6rem 0 .6rem; }
.article-body p { margin: 0 0 1.1rem; }
.article-body ul, .article-body ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }

.sidebar-card { background: var(--sbs-surface); border: 1px solid var(--sbs-rule); border-radius: var(--sbs-radius); padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; }
.sidebar-card h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-family: var(--sbs-font-body); color: var(--sbs-muted); margin: 0 0 .8rem; }
.sidebar-card dl { margin: 0; font-size: .9rem; }
.sidebar-card dt { font-family: var(--sbs-font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sbs-muted); margin-top: .8rem; }
.sidebar-card dd { margin: .15rem 0 0; }
.sidebar-card ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.sidebar-card li { padding: .35rem 0; border-bottom: 1px solid var(--sbs-rule); }

.citation { font-family: var(--sbs-font-mono); font-size: .8rem; line-height: 1.6; background: var(--sbs-paper); border: 1px solid var(--sbs-rule); padding: .9rem 1rem; word-break: break-word; }

/* Important dates — the tick rule reused as a timeline */
.dates { list-style: none; margin: 0; padding: 0; }
.dates li { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--sbs-rule); font-size: .93rem; }
.dates__when { font-family: var(--sbs-font-mono); font-size: .8rem; color: var(--sbs-blue); }
.dates li.is-past .dates__when { color: var(--sbs-muted); text-decoration: line-through; }

/* Tabs on conference pages */
.tabs { display: flex; flex-wrap: wrap; gap: .2rem; border-bottom: 1px solid var(--sbs-rule); margin-bottom: 2rem; }
.tabs button {
	background: none; border: 0; border-bottom: 2px solid transparent;
	padding: .7rem 1rem; font-family: inherit; font-size: .88rem; color: var(--sbs-muted); cursor: pointer;
}
.tabs button:hover { color: var(--sbs-ink); }
.tabs button[aria-selected="true"] { color: var(--sbs-blue); border-bottom-color: var(--sbs-blue); font-weight: 600; }
.tab-panel[hidden] { display: none; }

.committee { list-style: none; margin: 0; padding: 0; }
.committee li { padding: .6rem 0; border-bottom: 1px solid var(--sbs-rule); font-size: .93rem; }

/* ---------------------------------------------------------------------
 * Archive index
 * ------------------------------------------------------------------ */
.archive-year { border-top: 2px solid var(--sbs-ink); padding-top: 1.2rem; margin-bottom: 2.5rem; }
.archive-year__label { font-family: var(--sbs-font-mono); font-size: 1.5rem; letter-spacing: .05em; margin: 0 0 1rem; }

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------ */
.site-footer { background: var(--sbs-ink); color: rgba(255, 255, 255, .78); padding: 3rem 0 2rem; margin-top: 0; }
.site-footer a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; }
.footer__brand-name { font-family: var(--sbs-font-display); font-size: 1.2rem; color: #fff; margin: 0 0 .4rem; }
.footer__tagline { font-size: .9rem; max-width: 34ch; }
.footer h2 { font-family: var(--sbs-font-body); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .55); margin: 0 0 .8rem; }
.footer ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.footer li { padding: .25rem 0; }
.footer__base { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .8rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem; }

/* Newsletter block on dark ground */
.section--ink .sbs-newsletter__fields input { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .25); color: #fff; }
.section--ink .sbs-newsletter__fields input::placeholder { color: rgba(255, 255, 255, .55); }
.section--ink .sbs-newsletter__interests legend, .section--ink .sbs-checkbox { color: rgba(255, 255, 255, .75); }
.section--ink .sbs-stat { background: transparent; border: 0; }
.section--ink .sbs-stat-strip { background: transparent; border-color: rgba(255, 255, 255, .18); gap: 0; }
.section--ink .sbs-stat { border-right: 1px solid rgba(255, 255, 255, .18); }
.section--ink .sbs-stat__value { color: #fff; }
.section--ink .sbs-stat__label { color: rgba(255, 255, 255, .6); }

/* Pagination */
.pagination { display: flex; gap: .4rem; flex-wrap: wrap; padding: 2rem 0; }
.pagination .page-numbers { padding: .5rem .8rem; border: 1px solid var(--sbs-rule); border-radius: var(--sbs-radius); text-decoration: none; font-size: .85rem; background: var(--sbs-surface); }
.pagination .current { background: var(--sbs-blue); color: #fff; border-color: var(--sbs-blue); }

/* Filters on directories */
.filters { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2rem; }
.filters select, .filters input { padding: .55rem .7rem; border: 1px solid var(--sbs-rule); border-radius: var(--sbs-radius); font-family: inherit; font-size: .88rem; background: var(--sbs-surface); }

/* Scroll reveal — one restrained motion cue */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
	.article-layout { grid-template-columns: 1fr; }
	.notice-item { grid-template-columns: 1fr; gap: .3rem; }
}

@media (max-width: 820px) {
	.nav-toggle { display: inline-block; margin-left: auto; }
	.site-nav { display: none; width: 100%; order: 3; }
	.site-nav.is-open { display: block; }
	.site-nav ul { flex-direction: column; gap: 0; padding-bottom: .8rem; }
	.site-nav a { padding: .7rem .2rem; border-bottom: 1px solid var(--sbs-rule); }
	.site-header__bar { flex-wrap: wrap; }
	.site-header__actions { order: 2; }
	.hero__fact { border-right: 0; }
	.dates li { grid-template-columns: 1fr; gap: .1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	* { animation: none !important; transition: none !important; }
}