/* TRPH Site Design 1.0.0
   One palette, one type scale, one heading font, one button style, one chip style, and the mobile drawer.
   Fonts are self-hosted (SIL Open Font License 1.1). */

/* Fonts */
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/source-sans-3-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/source-sans-3-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/source-sans-3-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/source-serif-4-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/source-serif-4-latin-700-normal.woff2') format('woff2'); }

/* Tokens */
:root {
	--trph-green: #03793C;
	--trph-navy: #003D6B;
	--trph-ink: #0F2233;
	--trph-muted: #4F6377;
	--trph-line: #D5DFD8;
	--trph-bg: #F3F7F4;
	--trph-tint: #E2EBF4;
	--trph-field: #8C9AA5;
	--trph-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--trph-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	/* Type scale, phone first */
	--fs-xs: 13px;
	--fs-sm: 14px;
	--fs-base: 16px;
	--fs-lead: 17px;
	--fs-h3: 18px;
	--fs-h2: 20px;
	--fs-h1: 28px;
	--fs-hero: 30px;
	--trph-radius: 6px;
	--trph-radius-card: 8px;
}
@media (min-width: 782px) {
	:root { --fs-lead: 18px; --fs-h2: 22px; --fs-h1: 34px; --fs-hero: 40px; }
}

/* Base text */
body { font-family: var(--trph-sans); font-size: var(--fs-base); line-height: 1.6; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.single-post .wp-block-post-content { font-family: var(--trph-serif); font-size: 1.125rem; line-height: 1.7; }

/* Headings: one serif, lighter weight, one scale. The Library plugin sets its own heading sizes inside .trph-bir. */
.wp-site-blocks :is(h1, h2, h3, h4):not(.trph-bir *) { font-family: var(--trph-serif); font-weight: 600 !important; letter-spacing: 0; line-height: 1.25; }
.wp-site-blocks h1:not(.trph-bir *) { font-size: var(--fs-h1) !important; }
.wp-site-blocks h2:not(.trph-bir *) { font-size: var(--fs-h2) !important; }
.wp-site-blocks h3:not(.trph-bir *) { font-size: var(--fs-h3) !important; }
.home .wp-site-blocks h1:not(.trph-bir *) { font-size: var(--fs-hero) !important; line-height: 1.2; }
.home .wp-site-blocks h1 + p { font-size: var(--fs-lead) !important; line-height: 1.55; }
.wp-site-blocks p.has-small-font-size, .wp-site-blocks .has-small-font-size { font-size: var(--fs-xs) !important; }

/* Header */
header.wp-block-template-part p { font-family: var(--trph-sans); }
header.wp-block-template-part .wp-block-navigation-item__content { font-size: 15px; font-weight: 600; }
.wp-block-navigation .current-menu-item > a, .wp-block-navigation a[aria-current="page"] { color: var(--trph-green); }

/* Buttons: one style. Solid navy is primary, outline is secondary. */
.wp-block-button__link, .wp-element-button, .wp-block-file__button {
	font-family: var(--trph-sans);
	font-size: var(--fs-sm) !important;
	font-weight: 600 !important;
	line-height: 1.2;
	min-height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px !important;
	border-radius: var(--trph-radius) !important;
	text-decoration: none;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) { background: var(--trph-navy); color: #fff; }
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):hover { background: #002C4E; color: #fff; }

/* Chips: the outline buttons on Home. */
.wp-block-buttons { gap: 8px; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	min-height: 32px;
	padding: 5px 12px !important;
	color: var(--trph-navy) !important;
	background: #fff !important;
	border: 1px solid #B9C9D8 !important;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--trph-tint) !important; color: var(--trph-navy) !important; }

/* Search block */
.wp-block-search__inside-wrapper { gap: 8px; }
.wp-block-search__input { height: 44px; padding: 0 14px; font-family: var(--trph-sans); font-size: 16px; border: 1px solid var(--trph-field); border-radius: var(--trph-radius); background: #fff; }
.wp-block-search__button { height: 44px; padding: 0 20px !important; font-family: var(--trph-sans); font-size: var(--fs-sm); font-weight: 600; color: #fff; background: var(--trph-navy); border: 0; border-radius: var(--trph-radius); }
.wp-block-search__button:hover { background: #002C4E; }

/* Cards */
.trph-card { border-radius: var(--trph-radius-card); }

/* Home: the large logo card is hidden on phones because the header already shows the logo. */
@media (max-width: 781px) {
	.trph-hero-logo { display: none !important; }
}

/* Focus */
.wp-site-blocks :focus-visible { outline: 2px solid #1B6FD1; outline-offset: 2px; }

/* ---------- Mobile navigation: left-sliding drawer (below 782px) ---------- */
.trph-drawer-head { display: none; }

/* Between 600 and 781px WordPress would show the inline menu; keep the button there too. */
@media (min-width: 600px) and (max-width: 781px) {
	header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
	header .wp-block-navigation__responsive-container.is-menu-open { display: flex !important; }
}

@media (max-width: 781px) {
	/* Menu button: 44px tap area, icon stays 24px. */
	header .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: -6px -10px -6px 0;
		color: var(--trph-navy);
		background: transparent;
		border: 0;
		border-radius: var(--trph-radius);
	}
	header .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; }

	/* Backdrop */
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: 0 !important;
		height: 100% !important;
		max-height: none !important;
		padding: 0 !important;
		overflow: hidden !important;
		background: rgba(0, 30, 53, 0.55) !important;
		animation: trphFade 0.25s ease-out;
		z-index: 100000;
	}
	.is-menu-open .wp-block-navigation__responsive-close { width: 100%; height: 100%; max-width: none !important; }

	/* Panel */
	.is-menu-open .wp-block-navigation__responsive-dialog {
		position: relative;
		display: flex;
		flex-direction: column;
		width: min(86vw, 340px) !important;
		height: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow-y: auto;
		background: #fff;
		box-shadow: 12px 0 40px rgba(0, 30, 53, 0.25);
		animation: trphSlide 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
	}
	.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0 !important;
	}
	.is-menu-open .trph-drawer-head {
		display: flex;
		align-self: stretch;
		width: 100%;
		box-sizing: border-box;
		align-items: center;
		gap: 10px;
		padding: 14px 20px;
		border-bottom: 1px solid var(--trph-line);
	}
	.trph-drawer-logo { display: inline-flex; }
	.trph-drawer-logo img { width: 36px; height: 36px; object-fit: contain; }
	.trph-drawer-name { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; }
	.trph-drawer-name .trph-w1 { color: var(--trph-green); }
	.trph-drawer-name .trph-w2 { color: var(--trph-navy); }

	/* Links */
	.is-menu-open .wp-block-navigation__responsive-container-content,
	.is-menu-open .wp-block-navigation__container,
	.is-menu-open .wp-block-navigation-item { align-items: stretch !important; justify-content: flex-start !important; box-sizing: border-box; }
	.is-menu-open .wp-block-navigation__responsive-container-content { width: 100%; }
	.is-menu-open .wp-block-navigation__container { width: 100%; max-width: 100%; flex-direction: column; gap: 0; padding: 6px 20px 24px; }
	.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid #E3E9EC; }
	.is-menu-open .wp-block-navigation-item:last-child { border-bottom: 0; }
	.is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 14px 0 !important; font-size: 17px !important; font-weight: 600; color: var(--trph-ink); }
	.is-menu-open .wp-block-navigation-item__content[aria-current="page"] { color: var(--trph-green); }

	/* Close button: round, just outside the panel's right edge. */
	.is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: fixed !important;
		top: 12px !important;
		left: calc(10px + min(86vw, 340px)) !important;
		right: auto !important;
		width: 44px;
		height: 44px;
		padding: 0 !important;
		color: var(--trph-ink);
		background: #fff;
		border: 0;
		border-radius: 50%;
		box-shadow: 0 4px 14px rgba(0, 30, 53, 0.25);
		z-index: 5;
	}
	.is-menu-open :focus-visible { outline: 2px solid #1B6FD1 !important; outline-offset: 2px; }
}

@keyframes trphFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes trphSlide { from { transform: translateX(-100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open,
	.is-menu-open .wp-block-navigation__responsive-dialog { animation: none !important; }
}
