/* ==========================================================================
   HOH SITE CHROME  ·  v1.1.0  ·  24-Sep-2026
   The site-wide furniture: how wide a page is, how the header behaves, the
   wordmark, the way pictures sit in the text, and the warmth of the palette.

   It is loaded on every page by includes/site-chrome.php. Nothing here is
   in the theme, deliberately: the theme can be swapped without losing it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HOW WIDE A PAGE IS
   WordPress writes every constrained block against two custom properties.
   Redefining them here widens the whole site at once — no theme edit, and
   no !important anywhere. Kris asked for 80–90%; this is 90% with a ceiling
   so the lines do not run away on a very large monitor.
   -------------------------------------------------------------------------- */
:root{
	--wp--style--global--content-size: min(90%, 1180px);
	--wp--style--global--wide-size:    min(96%, 1560px);

	--hoh-burgundy:#800020;
	--hoh-burgundy-deep:#5c0017;
	--hoh-gold:#c9a227;
	--hoh-gold-bright:#ffd700;
	/* 24-Sep-2026 gold discipline: gold now means "look here now" only
	   (the editorial note, and selection or focus). Structure that used to
	   be gold on a light ground is burgundy, in two weights. */
	--hoh-burgundy-soft:rgba(128,0,32,.45);
	--hoh-burgundy-faint:rgba(128,0,32,.26);
	--hoh-parchment:#faf6ef;
	--hoh-cream:#f7f2ea;
	--hoh-ink:#241f20;
	--hoh-edge:#e3d9d2;
	--hoh-header-h:0px;
}

/* The written pages carry their own container. Let it use the new width. */
.hoh-pg{ max-width:min(92%, 1180px) !important; }

/* --------------------------------------------------------------------------
   2. THE HEADER STAYS
   Kris: "the menu isn't frozen and it is a lot of scrolling to get back up."
   The header is sticky at every width. On a phone it is allowed to be short.
   -------------------------------------------------------------------------- */
.wp-site-blocks > header,
header.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part > header{
	position:sticky;
	top:0;
	z-index:120;
	background:var(--hoh-parchment);
	border-bottom:1px solid var(--hoh-edge);
	box-shadow:0 1px 0 rgba(128,0,32,.06);
	transition:box-shadow .2s ease, padding .2s ease;
}
body.hoh-scrolled .wp-site-blocks > header,
body.hoh-scrolled header.wp-block-template-part{
	box-shadow:0 6px 18px -10px rgba(36,31,32,.45);
}

/* A sticky header and in-page anchors do not get on unless this is set. */
html{ scroll-padding-top:calc(var(--hoh-header-h) + 16px); scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* --------------------------------------------------------------------------
   3. THE WORDMARK
   Monsieur La Doulaise, the roundhand chosen on 31-Aug-2026. Its hairlines
   vanish below about 34px, measured against the real font file, so the
   clamp floor is 34px rather than a proportion. Below that it is not a
   design choice, it is unreadable.
   -------------------------------------------------------------------------- */
.wp-block-site-title,
.wp-block-site-title a{
	font-family:"Monsieur La Doulaise","Playfair Display",Georgia,serif !important;
	font-weight:400 !important;
	font-synthesis:none;
	font-size:clamp(34px, 4.6vw, 54px) !important;
	line-height:1.24 !important;
	letter-spacing:.01em;
	color:var(--hoh-burgundy) !important;
	text-decoration:none !important;
	white-space:nowrap;
}
.wp-block-site-title a:hover{ color:var(--hoh-burgundy-deep) !important; }

/* The crest sits immediately before the words, and matches the cap height
   of the H rather than being sized by eye: 65px of H against 52px of type. */
.hoh-brand{ display:flex; align-items:center; gap:.7rem; }
.hoh-brand .wp-block-image,
.hoh-brand figure{ margin:0 !important; flex:0 0 auto; }
.hoh-brand img{
	display:block;
	height:clamp(44px, 5.8vw, 68px);
	width:auto;
}

/* --------------------------------------------------------------------------
   4. THE MENU
   -------------------------------------------------------------------------- */
.wp-block-navigation{ font-family:"Montserrat","Noto Sans",system-ui,sans-serif; }
.wp-block-navigation .wp-block-navigation-item__content{
	font-size:.92rem;
	letter-spacing:.02em;
	color:var(--hoh-ink);
	padding-block:.35rem;
	border-bottom:2px solid transparent;
}
.wp-block-navigation .wp-block-navigation-item__content:hover{
	color:var(--hoh-burgundy);
	border-bottom-color:var(--hoh-burgundy-soft);
}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content{
	color:var(--hoh-burgundy);
	border-bottom-color:var(--hoh-burgundy);
}
/* A submenu that reads as a panel rather than a list of stray links. */
.wp-block-navigation .wp-block-navigation__submenu-container{
	background:#fff;
	border:1px solid var(--hoh-edge);
	border-top:3px solid var(--hoh-burgundy);
	box-shadow:0 14px 30px -18px rgba(36,31,32,.5);
	padding:.35rem 0;
	min-width:16rem;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
	padding:.5rem 1rem;
	border-bottom:0;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
	background:var(--hoh-cream);
}
/* The quiet last item — used for Habsburg-Lorraine under History. */
.wp-block-navigation .hoh-nav-quiet > .wp-block-navigation-item__content{
	font-size:.8rem;
	color:#6b6259;
	border-top:1px solid var(--hoh-edge);
	margin-top:.25rem;
	padding-top:.6rem;
}

/* --------------------------------------------------------------------------
   5. BACK TO THE TOP
   -------------------------------------------------------------------------- */
.hoh-top{
	position:fixed;
	right:clamp(12px, 2.5vw, 28px);
	bottom:calc(clamp(12px, 2.5vw, 28px) + env(safe-area-inset-bottom, 0px));
	z-index:130;
	width:46px; height:46px;
	display:grid; place-items:center;
	border:1px solid var(--hoh-burgundy);
	border-radius:50%;
	background:var(--hoh-burgundy);
	color:#fff;
	cursor:pointer;
	opacity:0; visibility:hidden; transform:translateY(8px);
	transition:opacity .22s ease, transform .22s ease, visibility .22s, background .18s;
	box-shadow:0 10px 24px -14px rgba(36,31,32,.8);
}
.hoh-top svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.hoh-top:hover{ background:var(--hoh-burgundy-deep); }
.hoh-top:focus-visible{ outline:3px solid var(--hoh-gold-bright); outline-offset:3px; }
body.hoh-scrolled .hoh-top{ opacity:1; visibility:visible; transform:none; }
@media (prefers-reduced-motion:reduce){ .hoh-top{ transition:none; } }
@media print{ .hoh-top{ display:none; } }

/* --------------------------------------------------------------------------
   6. PICTURES IN THE TEXT
   Kris, 23-Sep: "Missing images. Visually very boring." These are the shapes
   a picture is allowed to take on a written page. Every one of them carries
   a caption and a credit line, because the site names its sources.
   -------------------------------------------------------------------------- */
.hoh-fig{ margin:1.9rem 0; }
.hoh-fig img{
	display:block; width:100%; height:auto;
	border-radius:3px;
	background:var(--hoh-cream);
}
.hoh-fig figcaption{
	font:400 .82rem/1.6 "Montserrat","Noto Sans",system-ui,sans-serif;
	color:#5a4c4c;
	margin-top:.55rem;
	padding-left:.75rem;
	border-left:3px solid var(--hoh-burgundy-faint);
}
.hoh-fig figcaption b{ color:var(--hoh-ink); font-weight:600; display:block; }
.hoh-fig figcaption .hoh-cred{ display:block; color:#8a7f79; font-size:.74rem; margin-top:.22rem; }

/* wide: the full measure of the page, for landscapes and battle pieces */
.hoh-fig--wide img{ max-height:min(62vh, 620px); object-fit:cover; object-position:center 35%; }

/* side: a portrait that the text runs beside, on a wide screen only */
.hoh-fig--side{ margin:.4rem 0 1.2rem; }
@media (min-width:62rem){
	.hoh-fig--side{
		float:right; width:min(38%, 340px);
		margin:.3rem 0 1.4rem 2rem;
		shape-margin:1rem;
	}
	.hoh-fig--side-left{ float:left; margin:.3rem 2rem 1.4rem 0; }
}

/* plate: a framed portrait, parchment mount, for the head of a page */
.hoh-fig--plate img{
	border:1px solid var(--hoh-edge);
	padding:.5rem;
	background:#fff;
	box-shadow:0 18px 34px -26px rgba(36,31,32,.8);
}

/* strip: two or three pictures in a row */
.hoh-strip{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
	gap:1.1rem;
	margin:1.9rem 0;
}
.hoh-strip .hoh-fig{ margin:0; }
.hoh-strip .hoh-fig img{ aspect-ratio:4/5; object-fit:cover; }

/* the banner at the head of a page */
.hoh-banner{ position:relative; margin:0 0 2rem; border-radius:4px; overflow:hidden; }
.hoh-banner img{ display:block; width:100%; height:clamp(180px, 34vh, 380px); object-fit:cover; object-position:center 30%; }
.hoh-banner::after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(180deg, rgba(36,31,32,0) 35%, rgba(92,0,23,.72) 100%);
}
.hoh-banner figcaption{
	position:absolute; left:0; right:0; bottom:0; z-index:2;
	padding:1rem 1.2rem;
	font:400 .8rem/1.5 "Montserrat",system-ui,sans-serif;
	color:#f6ece9;
}
.hoh-banner figcaption b{ display:block; font-weight:600; color:#fff; }
.hoh-banner figcaption .hoh-cred{ color:#e0c9cd; font-size:.72rem; }

/* clear a float before the next section starts */
.hoh-pg__sec::after{ content:""; display:block; clear:both; }

/* --------------------------------------------------------------------------
   7. A LITTLE MORE COLOUR
   Kris: "Missing nice vibrant family colours." Warmth comes from the ground
   and the rules, not from painting the text. Gold stays an accent.
   -------------------------------------------------------------------------- */
body{ background:var(--hoh-parchment); }
.wp-site-blocks > main{ background:transparent; }

.hoh-pg__head{
	border-top-width:4px;
	background:linear-gradient(180deg, rgba(128,0,32,.045), rgba(128,0,32,0) 70%);
	padding-inline:clamp(0px, 1.4vw, 18px);
	border-radius:3px 3px 0 0;
}
.hoh-pg__h{ position:relative; padding-left:.85rem; }
.hoh-pg__h::before{
	content:""; position:absolute; left:0; top:.25em; bottom:.25em;
	width:3px; border-radius:2px;
	background:linear-gradient(180deg, var(--hoh-burgundy), var(--hoh-burgundy-faint));
}

/* --------------------------------------------------------------------------
   8. THE FOOTER
   -------------------------------------------------------------------------- */
.wp-site-blocks > footer,
footer.wp-block-template-part{
	background:var(--hoh-burgundy-deep);
	color:#f1e4e6;
	margin-top:3.5rem;
}
footer.wp-block-template-part a,
.wp-site-blocks > footer a{ color:#f6dfc4; }
footer.wp-block-template-part a:hover,
.wp-site-blocks > footer a:hover{ color:var(--hoh-gold-bright); }
.hoh-foot-note{
	font:400 .78rem/1.65 "Montserrat",system-ui,sans-serif;
	color:#d8c2c6;
}

/* --------------------------------------------------------------------------
   9. SMALL SCREENS
   -------------------------------------------------------------------------- */
@media (max-width:46rem){
	.hoh-brand img{ height:40px; }
	.wp-block-site-title, .wp-block-site-title a{ font-size:34px !important; }
	.hoh-fig--side{ float:none !important; width:auto !important; margin:1.4rem 0 !important; }
	.hoh-top{ width:42px; height:42px; }
}

/* v1.2.18: the full picture credits, folded away on the Credits page. */
.hoh-credlists{ margin:1.2rem 0 2rem; }
.hoh-credlist{ border-top:1px solid #e8dfd6; padding:.7rem 0; }
.hoh-credlist:last-child{ border-bottom:1px solid #e8dfd6; }
.hoh-credlist summary{ cursor:pointer; font-weight:600; color:var(--hoh-ink,#2b1d1a); }
.hoh-credlist h4{ margin:1.1rem 0 .3rem; font-size:.95rem; }
.hoh-credlist ul{ margin:.3rem 0 .6rem 1.1rem; padding:0; }
.hoh-credlist li{ font-size:.86rem; line-height:1.5; margin:.15rem 0; }
.hoh-credlist__who{ color:#6f6560; }
/* v1.2.18: credits live on the Credits page. Any credit line still written
   into a stored page is not shown under the picture. */
.hoh-fig figcaption .hoh-cred,.hoh-banner figcaption .hoh-cred{ display:none; }