/*
Theme Name:   SCLP Institutional
Description:  Block theme for the Surrey Centre for Law and Philosophy. Pairs with the SCLP Core plugin (Events, People).
Version:      0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Author:       Surrey Centre for Law and Philosophy
License:      GPL-2.0-or-later
Text Domain:  sclp-theme
*/

/* Logo mark: the circular SCLP part of the full logo, used small in the nav bar. */
.sclp-mark { display: block; width: 56px; height: 54px; overflow: hidden; line-height: 0; }
.sclp-mark img { height: 54px !important; width: auto !important; max-width: none !important; }
.sclp-on-navy img, .sclp-mark.sclp-on-navy img { filter: brightness(0) invert(1); }

/* Navy bands: links and text default to light colours. */
.has-navy-background-color { color: var(--wp--preset--color--on-navy); }
.has-navy-background-color :where(h1, h2, h3, h4, a:not(.wp-element-button)) { color: var(--wp--preset--color--white); }
.has-navy-background-color .wp-block-navigation a { color: var(--wp--preset--color--white); }

/* Small "tag" label (series). */
.sclp-pill a, .sclp-pill { font-size: 0.75rem; font-weight: 600; text-decoration: none; padding: 3px 8px; border-radius: 3px;
	background: var(--wp--preset--color--pill); color: var(--wp--preset--color--pill-text); display: inline-block; }
.sclp-pill .wp-block-post-terms__separator { display: none; }

/* Round speaker / person photos; logo mark when there is no photo. */
.sclp-avatar img { border-radius: 50%; object-fit: cover; object-position: 50% 25%; aspect-ratio: 1; }
.sclp-avatar-fallback { width: var(--sclp-avatar, 72px); height: var(--sclp-avatar, 72px); border-radius: 50%;
	border: 1px solid var(--wp--preset--color--line); display: flex; align-items: center; justify-content: center; background: #fff; }
.sclp-avatar-fallback img { height: calc(var(--sclp-avatar, 72px) * 0.62); width: auto; max-width: none; }
.sclp-avatar-fallback span { display: block; width: calc(var(--sclp-avatar, 72px) * 0.64); height: calc(var(--sclp-avatar, 72px) * 0.62); overflow: hidden; line-height: 0; }

/* Cards */
.sclp-card { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 6px; }
.wp-block-post-template .sclp-card, .wp-block-post-template .sclp-card-ghost { height: 100%; }
.has-navy-background-color .sclp-card-ghost { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--wp--preset--color--navy-line); border-radius: 6px; }
.sclp-tile { background: #fff; border-top: 4px solid var(--wp--preset--color--navy); height: 100%; }
.sclp-tile a { text-decoration: none; }

/* Lists of events / people */
.sclp-list > li { border-bottom: 1px solid var(--wp--preset--color--line); }
.wp-block-post-template.sclp-list { gap: 0; }

/* Accessible focus */
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--wp--preset--color--gold); outline-offset: 2px; }

@media (max-width: 781px) {
	.sclp-hide-mobile { display: none !important; }
}

/* Gold accent on the "Mailing List" menu item. */
.sclp-nav-accent a, .has-navy-background-color .wp-block-navigation .sclp-nav-accent a { color: var(--wp--preset--color--gold); font-weight: 600; }

/* Portrait (rectangular) variant of the speaker photo. */
.sclp-portrait img { border-radius: 4px; aspect-ratio: auto; }

/* Template parts sit flush against each other (no gap between header, notice and page). */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* White cards inside navy bands keep dark text. */
.has-navy-background-color .sclp-card,
.has-navy-background-color .sclp-card :where(h1, h2, h3, h4, a:not(.wp-element-button)) { color: var(--wp--preset--color--ink); }
.has-navy-background-color .sclp-card .has-muted-color { color: var(--wp--preset--color--muted); }

/* Headings that link to their section are not underlined. */
:where(h1, h2, h3, h4) a { text-decoration: none; }
:where(h1, h2, h3, h4) a:hover { text-decoration: underline; }

/* Event rows: date | photo | details on one line; stack on phones. */
@media (max-width: 600px) {
	.wp-block-post-template.sclp-list > li > .wp-block-group.is-nowrap { flex-wrap: wrap; }
}

/* People grid: as many 20rem columns as fit, no vertical gap (rows have their own top rule). */
.wp-block-post-template.sclp-people-grid { grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)) !important; column-gap: 2.5rem; row-gap: 0; }

/* Contact Form 7 (mailing list sign-up) */
.wpcf7-form p { margin: 0 0 1.1rem; font-weight: 500; }
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form select, .wpcf7-form textarea {
	display: block; width: 100%; max-width: 32rem; margin-top: 0.35rem; padding: 0.7rem 0.85rem; font: inherit; font-weight: 400;
	border: 1px solid #8A97A6; border-radius: 4px; background: #fff; box-sizing: border-box; }
.wpcf7-form input[type="submit"] { font: inherit; font-weight: 600; padding: 0.8rem 1.6rem; border: 0; border-radius: 4px;
	background: var(--wp--preset--color--navy); color: #fff; cursor: pointer; }
.wpcf7-form input[type="submit"]:hover { background: var(--wp--preset--color--ink); }
.wpcf7-not-valid-tip { color: #B32D2E; font-size: 0.875rem; }
.wpcf7-response-output { border-radius: 4px; }

/* Photos never shrink in flex rows (long names used to squeeze them into ovals). */
.wp-block-post-featured-image.sclp-avatar, .sclp-avatar-fallback { flex-shrink: 0; }
.wp-block-post-featured-image.sclp-avatar:not(.sclp-portrait) { aspect-ratio: 1; }
.wp-block-post-featured-image.sclp-avatar:not(.sclp-portrait) img { width: 100%; height: 100%; }

/* People groups as link chips (on /people/ they jump to each section; sticky while scrolling). */
.sclp-group-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sclp-group-links a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0 0.85rem; border-radius: 999px;
	border: 1px solid var(--wp--preset--color--line); background: #fff; color: var(--wp--preset--color--navy); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.sclp-group-links a:hover, .sclp-group-links a[aria-current] { border-color: var(--wp--preset--color--navy); }
.sclp-group-links .sclp-count { font-size: 0.75rem; font-weight: 600; color: var(--wp--preset--color--muted); }
.sclp-sticky { position: sticky; top: 0; z-index: 5; background: var(--wp--preset--color--pale); padding: 0.75rem 0; margin-inline: -0.25rem; }
.has-navy-background-color .sclp-group-links a { background: transparent; border-color: var(--wp--preset--color--navy-line); color: #fff; }
.has-navy-background-color .sclp-group-links a:hover { border-color: var(--wp--preset--color--gold); }
.has-navy-background-color .sclp-group-links .sclp-count { color: var(--wp--preset--color--gold); }

/* People directory: every group on one page. */
.sclp-dir-group { scroll-margin-top: 9rem; padding-top: var(--wp--preset--spacing--40); }
.sclp-dir-group > h2 { font-size: var(--wp--preset--font-size--large); margin: 0 0 0.5rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--wp--preset--color--navy); }
.sclp-dir-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); column-gap: 2.5rem; }
.sclp-dir-card { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.15rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.sclp-dir-photo { flex: 0 0 80px; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; display: block; line-height: 0; }
.sclp-dir-photo img { width: 80px; height: 80px; object-fit: cover; object-position: 50% 25%; border-radius: 50%; }
.sclp-dir-photo .sclp-avatar-fallback { --sclp-avatar: 80px; }
.sclp-dir-card h3 { font-size: 1.125rem; line-height: 1.25; margin: 0 0 0.2rem; }
.sclp-dir-card h3 a { text-decoration: none; }
.sclp-dir-role { margin: 0; font-size: 0.9375rem; }
.sclp-dir-areas { margin: 0.2rem 0 0; font-size: 0.875rem; color: var(--wp--preset--color--link); }

/* ---------- Mockups: people on the homepage ---------- */
.sclp-faces { row-gap: 1.75rem; }
.sclp-faces .wp-block-post-title { margin: 0; }
.sclp-faces .wp-block-post-title a { text-decoration: none; }
.sclp-faces .wp-block-post-title a:hover { text-decoration: underline; }
.sclp-faces .sclp-avatar img { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.sclp-faces li:hover .sclp-avatar img { transform: scale(1.04); }
.sclp-face-pile { gap: 0 !important; }
.sclp-face-pile > li + li { margin-left: -12px; }
.sclp-face-pile .sclp-avatar img { box-shadow: 0 0 0 2px var(--wp--preset--color--navy); }
.sclp-face-pile .sclp-avatar-fallback { --sclp-avatar: 48px; }
@media (max-width: 600px) { .sclp-face-pile > li:nth-child(n+8) { display: none; } }

/* Navigation drop-down on the navy bar. */
.sclp-header .wp-block-navigation__submenu-container { background: #fff !important; border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 6px; padding: 0.4rem 0 !important; box-shadow: 0 12px 28px rgba(15, 42, 68, 0.18); min-width: 16rem !important; }
.sclp-header .wp-block-navigation__submenu-container a { color: var(--wp--preset--color--navy) !important; padding: 0.45rem 1rem !important; }
.sclp-header .wp-block-navigation__submenu-container a:hover { background: var(--wp--preset--color--pale); }

/* ---------- Mockups: subpages ---------- */
.sclp-title-band .sclp-section-nav ul { display: none; }
.sclp-title-band .sclp-section-nav { margin: 0; }
.sclp-title-band .sclp-section-nav__parent { margin: 0; }
.sclp-title-band .sclp-section-nav__parent a { color: var(--wp--preset--color--gold); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.sclp-title-band .sclp-section-nav__parent a[aria-current] { display: none; }
.sclp-prose { font-size: 1.0625rem; line-height: 1.7; max-width: 46rem; }
.sclp-prose > .wp-block-post-content > p:first-child { font-size: 1.25rem; line-height: 1.55; color: var(--wp--preset--color--ink); }
.sclp-prose h2 { margin-top: 2.5rem; scroll-margin-top: 1.5rem; }
.sclp-prose h3 { margin-top: 2rem; scroll-margin-top: 1.5rem; }
.sclp-aside-inner { position: sticky; top: 1.5rem; }
.sclp-section-nav, .sclp-toc { font-size: 0.9375rem; }
.sclp-section-nav__parent { font-weight: 700; margin: 0 0 0.4rem; }
.sclp-section-nav__parent a { text-decoration: none; }
.sclp-section-nav ul, .sclp-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--wp--preset--color--line); }
.sclp-section-nav li a, .sclp-toc li a { display: block; padding: 0.35rem 0 0.35rem 0.9rem; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; color: var(--wp--preset--color--ink); }
.sclp-section-nav li a:hover, .sclp-toc li a:hover { border-left-color: var(--wp--preset--color--muted); }
.sclp-section-nav li a[aria-current] { border-left-color: var(--wp--preset--color--gold); font-weight: 600; color: var(--wp--preset--color--navy); }
.sclp-toc li.lvl-3 a { padding-left: 1.7rem; font-size: 0.875rem; color: var(--wp--preset--color--muted); }
@media (max-width: 781px) { .sclp-aside-inner { position: static; } }

/* Board of Advisors as a grid of names (mockup content). */
.sclp-advisors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: 0 2rem; }
.sclp-advisors > * { border-top: 1px solid var(--wp--preset--color--line); padding: 1rem 0; margin: 0 !important; }
.sclp-advisors h3 { font-size: 1.125rem; margin: 0 0 0.25rem; }
.sclp-advisors p { margin: 0; font-size: 0.9375rem; line-height: 1.45; }

/* Eyebrow line: a title restatement, date or venue shown above the text (was a heading). */
.sclp-kicker { font-size: 0.8125rem !important; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--link) !important; line-height: 1.5 !important; margin-bottom: 0.35rem; }
.sclp-kicker + .sclp-kicker { margin-top: 0; }

/* People inside pages (visiting fellows, student fellows): round photo beside name, role and bio. */
.sclp-person-list { margin-block: 1rem 2rem; }
.sclp-person { display: flex; gap: 1.4rem; align-items: flex-start; padding: 1.5rem 0; border-top: 1px solid var(--wp--preset--color--line); }
.sclp-person:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.sclp-person > .sclp-person-photo { flex: 0 0 96px; margin: 0; }
.sclp-person-photo img { width: 96px !important; height: 96px !important; border-radius: 50% !important; object-fit: cover; object-position: 50% 25%; }
.sclp-person-body { flex: 1 1 auto; min-width: 0; }
.sclp-person-body > * { margin-block: 0; }
.sclp-person-body > h3 { font-size: 1.25rem; margin: 0.15rem 0 0.15rem; }
.sclp-person-body > .sclp-person-role { font-size: 0.9375rem !important; color: var(--wp--preset--color--muted); margin-bottom: 0.6rem; }
.sclp-person-body > p:not(.sclp-person-role) { font-size: 1rem !important; line-height: 1.6; }
.sclp-person-body > p + p { margin-top: 0.6rem; }
@media (max-width: 600px) {
	.sclp-person > .sclp-person-photo { flex-basis: 72px; }
	.sclp-person-photo img { width: 72px !important; height: 72px !important; }
}

/* No "Join Our Mailing List" box beside the mailing list form itself. */
.page-slug-mailing-list .sclp-aside-mailing { display: none; }
.sclp-person:not(:has(.sclp-person-photo)) > .sclp-person-body { padding-left: calc(96px + 1.4rem); }
@media (max-width: 600px) { .sclp-person:not(:has(.sclp-person-photo)) > .sclp-person-body { padding-left: calc(72px + 1.4rem); } }

/* Menu: hover and current/section states as a bottom border on the navy bar. */
@media (min-width: 600px) {
	.sclp-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding-block: 0.45rem; border-bottom: 2px solid transparent; transition: border-color 0.15s ease-out, color 0.15s ease-out; }
	.sclp-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
		border-bottom-color: rgba(255, 255, 255, 0.55); }
	.sclp-header .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
	.sclp-header .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
		border-bottom-color: var(--wp--preset--color--gold); }
}
.sclp-header .wp-block-navigation__submenu-container .current-menu-item > a { font-weight: 600; box-shadow: inset 3px 0 0 var(--wp--preset--color--gold); }

/* Section landing page (e.g. Students): its pages with their opening words. */
.sclp-child-pages { list-style: none; margin: 0; padding: 0; }
.sclp-child-pages li { padding: 1.4rem 0; border-top: 1px solid var(--wp--preset--color--line); }
.sclp-child-pages li:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.sclp-child-pages h2 { font-size: var(--wp--preset--font-size--large); margin: 0 0 0.4rem; }
.sclp-child-pages p { margin: 0; color: var(--wp--preset--color--muted); }

/* Homepage events + news band: four event cards beside a news timeline. */
.sclp-evnews { column-gap: clamp(2.5rem, 5vw, 4rem) !important; }
.sclp-news-band .sclp-list { position: relative; padding-left: 1.4rem; margin: 0; }
.sclp-news-band .sclp-list::before { content: ""; position: absolute; left: 4px; top: 0.4rem; bottom: 0.4rem; width: 1px; background: var(--wp--preset--color--navy-line); }
.sclp-news-band .sclp-list > li { position: relative; border: 0 !important; margin-block-start: 0 !important; }
.sclp-news-band .sclp-list > li > .wp-block-group { padding-block: 0.85rem !important; }
.sclp-news-band .sclp-list > li::before { content: ""; position: absolute; left: -1.4rem; top: 1.15rem; width: 9px; height: 9px; border-radius: 50%;
	background: var(--wp--preset--color--navy); box-shadow: 0 0 0 2px var(--wp--preset--color--gold); }
.sclp-news-band .wp-block-post-date { color: var(--wp--preset--color--gold) !important; font-weight: 600; }
.sclp-news-band .wp-block-post-title a { color: #fff; text-decoration: none; }
.sclp-news-band .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Homepage bottom: Visitors and Join Our Mailing List side by side, equal height. */
.sclp-bottom-cards > .sclp-card { height: 100%; }
.sclp-bottom-cards > .sclp-card .wp-block-buttons { margin-top: auto; }

/* News page as a blog: each post in full, separated by a rule; yearly archives in the aside. */
.sclp-news-feed .wp-block-post-template { gap: 0; margin: 0; }
.sclp-news-feed .wp-block-post-template > li { padding-block: 2.75rem; border-top: 1px solid var(--wp--preset--color--line); margin: 0 !important; }
.sclp-news-feed .wp-block-post-template > li:first-child { padding-top: 0; border-top: 0; }
.sclp-news-post > .wp-block-post-date { margin-bottom: 0; }
.sclp-news-post .wp-block-post-title { margin-top: 0.25rem; }
.sclp-news-post .wp-block-post-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.sclp-news-post .wp-block-post-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--wp--preset--color--gold); }
.sclp-news-post .wp-block-post-featured-image img { border-radius: 6px; }
.sclp-news-post .wp-block-post-content { margin-top: 1.25rem; }
.sclp-news-post .wp-block-post-content > :first-child { margin-top: 0; }
.sclp-news-post iframe, .sclp-news-post img, .sclp-news-post video { max-width: 100%; }
.sclp-pagination { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--wp--preset--color--line); font-size: 0.9375rem; font-weight: 600; }
.sclp-pagination a { text-decoration: none; }
.sclp-pagination .page-numbers { padding: 0.2rem 0.5rem; }
.sclp-pagination .page-numbers.current { color: var(--wp--preset--color--navy); border-bottom: 2px solid var(--wp--preset--color--gold); }
.sclp-news-index { font-size: 0.9375rem; }
.sclp-news-index > p { margin: 0 0 0.4rem; }
.sclp-news-index ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--wp--preset--color--line);
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sclp-news-index li { padding: 0.3rem 0 0.3rem 0.9rem; color: var(--wp--preset--color--muted); }
.sclp-news-index li a { color: var(--wp--preset--color--ink); text-decoration: none; }
.sclp-news-index li a:hover { text-decoration: underline; }

/* ---------- Events: Upcoming / Past tabs, past events by academic year, recent past ---------- */
.sclp-tabs { display: flex; gap: 2rem; margin-top: 0.5rem !important; }
.sclp-tabs a { padding: 0.75rem 0 0.85rem; color: rgba(255, 255, 255, 0.72); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; }
.sclp-tabs a:hover { color: #fff; border-bottom-color: var(--wp--preset--color--navy-line); }
.sclp-tabs a[aria-current] { color: #fff; border-bottom-color: var(--wp--preset--color--gold); }

.sclp-past-years { position: sticky; top: 0; z-index: 5; background: var(--wp--preset--color--pale); padding: 0.75rem 0; }
.sclp-past-series { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); white-space: nowrap; }

/* Past page: academic year in the margin, a dated line per event. */
.sclp-ledger-year { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 2rem; padding: 2.25rem 0; border-top: 1px solid var(--wp--preset--color--line); scroll-margin-top: 4.5rem; }
.sclp-ledger-label { margin: 0; font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--wp--preset--color--navy);
	position: sticky; top: 5rem; align-self: start; }
.sclp-ledger-list { list-style: none; margin: 0; padding: 0; }
.sclp-ledger-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: 1.25rem; align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.sclp-ledger-list li:first-child { padding-top: 0.15rem; }
.sclp-ledger-list time { font-variant-numeric: tabular-nums; font-size: 0.875rem; font-weight: 600; color: var(--wp--preset--color--link); }
.sclp-ledger-list a { color: var(--wp--preset--color--ink); text-decoration: none; }
.sclp-ledger-list a:hover { color: var(--wp--preset--color--navy); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 781px) {
	.sclp-ledger-year { grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem 0; }
	.sclp-ledger-label { position: static; font-size: 1.625rem; }
	.sclp-ledger-list li { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.25rem 1rem; }
	.sclp-ledger-list .sclp-past-series { grid-column: 2; }
}

/* Events page: the latest eight past events, same lines with the year in the date. */
.sclp-recent-list li { grid-template-columns: 6.5rem minmax(0, 1fr) auto; }
.sclp-recent-past h2 { margin: 0; }
@media (max-width: 781px) { .sclp-recent-list li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; } .sclp-recent-list .sclp-past-series { grid-column: 1; } }

@media (max-width: 781px) {
	.sclp-past-years ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
	.sclp-past-years li { flex: 0 0 auto; }
}
.admin-bar .sclp-past-years { top: var(--wp-admin--admin-bar--height, 32px); }
.sclp-recent-list { margin-top: 0.75rem !important; }