/*
Theme Name:   Beardmore Story
Theme URI:    https://beardmorehistory.com/
Description:  Kadence child theme for The Beardmore Story — keeps the HOLLY look (rust header, Special Elite title, Roboto Slab text) and adds genealogy navigation: line trail, family box and generation links.
Author:       Jeff
Template:     kadence
Version:      0.10.2
Text Domain:  beardmore
*/

:root {
	--bh-rust: #994233;
	--bh-rust-dark: #7a3428;
	--bh-ink: #292221;
	--bh-paper: #faf6f0;
	--bh-rule: #e4d9cc;
	--bh-muted: #6b5f5b;
}

/* ---------- Kadence palette → Beardmore colours ----------
   Set on body so it overrides Kadence's :root defaults whatever order
   the stylesheets load in. Replaces Kadence's blue-greys with warm tones
   (this is what colours the title band above each page). */
body {
	--global-palette1: #994233; /* accent: links, buttons */
	--global-palette2: #7a3428; /* accent hover */
	--global-palette3: #292221; /* headings */
	--global-palette4: #292221; /* body text */
	--global-palette5: #6b5f5b; /* muted text */
	--global-palette6: #8a7e78; /* subtle text */
	--global-palette7: #f1e9de; /* title band, subtle backgrounds */
	--global-palette8: #faf6f0; /* page background */
	--global-palette9: #ffffff; /* content background */
}

/* ---------- Type ---------- */
body,
button,
input,
select,
textarea {
	font-family: "Roboto Slab", Georgia, serif;
	color: var(--bh-ink);
}

.site-title,
.entry-title,
h1, h2, h3 {
	font-family: "Special Elite", "Courier New", monospace;
	letter-spacing: 0.06em;
}

.entry-content a,
.bh-trail a,
.bh-family a,
.bh-records a {
	color: var(--bh-rust);
}
.entry-content a:hover,
.bh-trail a:hover,
.bh-family a:hover,
.bh-records a:hover {
	color: var(--bh-rust-dark);
}

/* ---------- Header (Customizer remains the main place to set this) ---------- */
/* Photo header: family group photo, darkening towards the bottom where the
   title and menu sit. Height grows with screen width so the faces stay
   clear of the title as the photo scales up. */
#masthead .site-main-header-wrap .site-header-row-container-inner {
	background:
		linear-gradient(to bottom, rgba(58, 26, 20, 0.08) 0%, rgba(58, 26, 20, 0.08) 50%, rgba(58, 26, 20, 0.88) 100%),
		linear-gradient(rgba(153, 66, 51, 0.15), rgba(153, 66, 51, 0.15)),
		var(--bh-rust) url("/wp-content/uploads/image.jpg") center 35% / cover no-repeat;
	border-bottom: 4px solid var(--bh-rust-dark);
}
#masthead #main-header .site-main-header-inner-wrap {
	min-height: clamp(340px, 30vw, 440px);
	align-items: flex-end;
	padding-bottom: 18px;
}
#masthead #main-header .site-header-main-section-left,
#masthead #main-header .site-header-main-section-right,
#masthead #main-header .site-header-main-section-left .site-header-item,
#masthead #main-header .site-header-main-section-right .site-header-item {
	align-self: flex-end;
	align-items: flex-end;
}
#masthead #mobile-header .site-main-header-inner-wrap {
	min-height: clamp(180px, 42vw, 260px);
	align-items: flex-end;
	padding-bottom: 12px;
}
#masthead #mobile-header .site-header-main-section-left,
#masthead #mobile-header .site-header-main-section-right {
	align-self: flex-end;
}
#masthead .site-title,
#masthead .main-navigation .primary-menu-container > ul > li > a,
#masthead .menu-toggle-open {
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}
#masthead .site-title,
#masthead .site-title a,
#masthead .main-navigation .primary-menu-container > ul > li > a {
	color: #fff;
}
#masthead .site-title {
	text-transform: uppercase;
	font-size: clamp(1.6rem, 4vw, 2.6rem);
}
#masthead .main-navigation .primary-menu-container > ul > li > a {
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	font-weight: 700;
}

/* ---------- Drop-down menu: rust ---------- */
#masthead .header-navigation .header-menu-container ul ul.sub-menu {
	background: var(--bh-rust);
	box-shadow: 0 6px 18px rgba(41, 34, 33, 0.25);
}
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a {
	color: #fff;
	background: transparent;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	text-transform: none;
}
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a:hover,
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a:focus {
	background: var(--bh-rust-dark);
	color: #fff;
}
#masthead .header-navigation .header-menu-container ul ul li.current-menu-item > a {
	background: var(--bh-rust-dark);
	color: #fff;
	font-weight: 700;
}

/* ---------- Tablet and phone header ---------- */
#masthead .mobile-site-branding .site-title,
#masthead .mobile-site-branding .site-title.vs-md-false,
#masthead .mobile-site-branding .site-title.vs-sm-false {
	display: block !important;
	color: #fff;
	text-transform: uppercase;
	font-size: clamp(1.1rem, 5vw, 1.8rem);
	margin: 0;
}
#masthead .mobile-site-branding a {
	color: #fff;
	text-decoration: none;
}
#masthead .menu-toggle-open,
#masthead .menu-toggle-open .menu-toggle-icon {
	color: #fff;
}
#mobile-drawer .drawer-inner {
	background: var(--bh-rust);
}
#mobile-drawer .mobile-navigation ul li > a,
#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap > a,
#mobile-drawer .drawer-toggle,
#mobile-drawer .menu-toggle-close {
	color: #fff;
}
#mobile-drawer .mobile-navigation ul li.current-menu-item > a,
#mobile-drawer .mobile-navigation ul li.current-menu-item > .drawer-nav-drop-wrap > a {
	font-weight: 700;
	text-decoration: underline;
}

/* ---------- Title band above each page ---------- */
.entry-hero.page-hero-section .entry-hero-container-inner {
	background: var(--bh-paper);
	border-bottom: 3px solid var(--bh-rust);
}
.entry-hero.page-hero-section .entry-title {
	color: var(--bh-ink);
	text-transform: uppercase;
}

/* ---------- Line trail ---------- */
.bh-trail {
	font-size: 0.8rem;
	line-height: 1.7;
	color: var(--bh-muted);
	border-bottom: 1px solid var(--bh-rule);
	padding-bottom: 0.6rem;
	margin-bottom: 1.4rem;
}
.bh-trail a {
	text-decoration: none;
}
.bh-trail .bh-sep {
	margin: 0 0.35em;
	color: var(--bh-rule);
}
.bh-trail .bh-current {
	font-weight: 700;
	color: var(--bh-ink);
}
.bh-trail .bh-years,
.bh-family .bh-years,
.bh-gen-nav .bh-years {
	color: var(--bh-muted);
	font-size: 0.85em;
	white-space: nowrap;
}

/* ---------- Family and Records boxes ---------- */
.bh-family,
.bh-records {
	background: var(--bh-paper);
	border: 1px solid var(--bh-rule);
	border-top: 4px solid var(--bh-rust);
	border-radius: 4px;
	padding: 1rem 1.2rem;
	margin: 0 0 1.5rem;
	font-size: 0.9rem;
}
.bh-family h2,
.bh-records h2 {
	font-size: 1rem;
	margin: 0 0 0.6rem;
	text-transform: uppercase;
	color: var(--bh-rust);
}
.bh-family h3 {
	font-family: "Roboto Slab", Georgia, serif;
	letter-spacing: 0;
	font-size: 0.75rem;
	text-transform: uppercase;
	color: var(--bh-muted);
	margin: 0.8rem 0 0.25rem;
}
.bh-family ul,
.bh-records ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bh-family li,
.bh-records li {
	margin: 0.15rem 0;
}
.bh-family a,
.bh-records a {
	text-decoration: none;
}
.bh-family .bh-line a {
	font-weight: 700;
}

@media (min-width: 900px) {
	.bh-family,
	.bh-records {
		float: right;
		clear: right;
		width: 260px;
		margin: 0 0 1.5rem 2rem;
	}
}

/* Records: text links that open the scan in a pop-up viewer */
.bh-records li {
	margin: 0.3rem 0;
	line-height: 1.35;
}
.bh-records .bh-rec-year {
	display: inline-block;
	min-width: 2.6em;
	color: var(--bh-muted);
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
}
.bh-records a::after {
	/* magnifier: opens the scan in the viewer (drawn, so it shows on every device) */
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-left: 0.3em;
	vertical-align: -0.05em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.75' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M10 10l4.5 4.5' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.75' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M10 10l4.5 4.5' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.6;
}

/* ---------- Right-hand column: opening photo above the family panel ---------- */
.bh-side .wp-block-image,
.bh-side figure.alignright {
	float: none !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 1.2rem !important;
	text-align: center;
}
.bh-side figure.alignright figcaption {
	display: block !important;
	width: auto !important;
}
.bh-side figure.alignright a {
	display: block;
}
.bh-side figure.alignright img {
	display: block;
	margin: 0 auto;
	width: auto;
	max-width: 100%;
	height: auto;
}
.bh-side .bh-family,
.bh-side .bh-records {
	float: none;
	width: auto;
	margin: 0 0 1.5rem;
}
@media (min-width: 900px) {
	.bh-side {
		float: right;
		width: 260px;
		margin: 0 0 1.5rem 2rem;
	}
	.bh-side figure.alignright img {
		width: 100%;
	}
}
@media (max-width: 600px) and (orientation: portrait) {
	.bh-side figure.alignright img {
		width: 100% !important;
	}
}

/* ---------- Previous / next generation ---------- */
.bh-gen-nav {
	clear: both;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--bh-rule);
	margin-top: 2.5rem;
	padding-top: 1.2rem;
}
.bh-gen-nav a {
	display: block;
	max-width: 48%;
	padding: 0.7rem 1rem;
	border: 1px solid var(--bh-rule);
	border-radius: 4px;
	text-decoration: none;
	color: var(--bh-ink);
	background: #fff;
}
.bh-gen-nav a:hover {
	border-color: var(--bh-rust);
}
.bh-gen-nav .bh-label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bh-rust);
}
.bh-gen-nav .bh-next {
	margin-left: auto;
	text-align: right;
}

/* ---------- Captions ---------- */
.entry-content figure figcaption,
.entry-content .wp-caption .wp-caption-text {
	font-size: 0.8rem;
	font-style: italic;
	color: var(--bh-muted);
	text-align: center;
	line-height: 1.4;
	margin-top: 0.4em;
}

/* ---------- Phone, portrait: floated photos go full width ----------
   Older floated photos use display:table with a table-caption, so the
   caption must be switched to a normal block too or it collapses to the
   width of one letter. */
@media (max-width: 600px) and (orientation: portrait) {
	.entry-content figure.alignright,
	.entry-content figure.alignleft,
	.entry-content .wp-block-image .alignright,
	.entry-content .wp-block-image .alignleft,
	.entry-content .wp-caption.alignright,
	.entry-content .wp-caption.alignleft {
		display: block !important;
		float: none !important;
		width: 100% !important; /* overrides old captions' fixed widths */
		max-width: 100% !important;
		margin: 0 0 1.2em !important;
	}
	.entry-content figure.alignright figcaption,
	.entry-content figure.alignleft figcaption,
	.entry-content .wp-caption .wp-caption-text {
		display: block !important;
		width: auto !important;
	}
	.entry-content .alignright a,
	.entry-content .alignleft a {
		display: block;
	}
	.entry-content .alignright img,
	.entry-content .alignleft img {
		width: 100% !important;
		height: auto !important;
	}
}

/* ---------- Family tree ---------- */
.bh-tree-wrap {
	margin: 1rem 0 2rem;
}
.bh-tree-tools {
	margin-bottom: 1rem;
}
.bh-tree-tools button {
	font: inherit;
	font-size: 0.8rem;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--bh-rule);
	border-radius: 4px;
	background: var(--bh-paper);
	color: var(--bh-rust);
	cursor: pointer;
}
.bh-tree-tools button:hover {
	border-color: var(--bh-rust);
}
.bh-tree,
.bh-tree ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bh-tree ul {
	margin-left: 1.1rem;
	padding-left: 1.1rem;
	border-left: 1px solid var(--bh-rule);
}
.bh-tree li {
	position: relative;
	margin: 0.35rem 0;
}
.bh-tree ul > li::before {
	content: "";
	position: absolute;
	left: -1.1rem;
	top: 1.15rem;
	width: 0.9rem;
	border-top: 1px solid var(--bh-rule);
}
.bh-tree details > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}
.bh-tree details > summary::-webkit-details-marker {
	display: none;
}
.bh-tree details > summary::before {
	content: "+";
	flex: none;
	width: 1.2rem;
	height: 1.2rem;
	margin-top: 0.55rem;
	border: 1px solid var(--bh-rule);
	border-radius: 3px;
	background: #fff;
	color: var(--bh-rust);
	font-size: 0.85rem;
	line-height: 1.1rem;
	text-align: center;
}
.bh-tree details[open] > summary::before {
	content: "–";
}
.bh-tree li > .bh-card {
	margin-left: 1.7rem;
}
.bh-card {
	display: inline-block;
	max-width: 100%;
	padding: 0.45rem 0.8rem;
	background: #fff;
	border: 1px solid var(--bh-rule);
	border-radius: 4px;
	font-size: 0.9rem;
	line-height: 1.45;
}
.bh-card-line {
	border-left: 4px solid var(--bh-rust);
	background: var(--bh-paper);
}
.bh-card-name {
	font-weight: 400;
}
.bh-card-line .bh-card-name {
	font-weight: 700;
}
.bh-card a {
	color: var(--bh-rust);
	text-decoration: none;
}
.bh-card a:hover {
	text-decoration: underline;
}
.bh-card-years {
	color: var(--bh-muted);
	font-size: 0.85em;
	white-space: nowrap;
}
.bh-card-spouse {
	display: block;
	font-size: 0.85em;
	color: var(--bh-muted);
}
.bh-card-count {
	margin-top: 0.6rem;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bh-muted);
	white-space: nowrap;
}
.bh-tree-note {
	margin-top: 1.5rem;
	font-size: 0.8rem;
	font-style: italic;
	color: var(--bh-muted);
}
@media (max-width: 600px) {
	.bh-tree-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.5rem;
	}
	.bh-tree {
		width: max-content;
		min-width: 100%;
	}
	.bh-card {
		min-width: 10.5rem;
		max-width: 15rem;
	}
	.bh-tree ul {
		margin-left: 0.55rem;
		padding-left: 0.55rem;
	}
	.bh-tree ul > li::before {
		left: -0.55rem;
		width: 0.45rem;
	}
	.bh-tree details > summary {
		gap: 0.3rem;
	}
	.bh-tree li > .bh-card {
		margin-left: 1.5rem;
	}
	.bh-card-count {
		display: none;
	}
}

/* ---------- Kadence gallery beside the right-hand column ----------
   The gallery's built-in clearfix pushed it below the whole column,
   leaving a large gap under the photos. */
.entry-content .wp-block-kadence-advancedgallery::after {
	clear: none;
}

/* ---------- Portrait thumbnails in the family tree ---------- */
.bh-card-has-thumb {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.bh-card-thumb {
	flex: none;
	width: 42px;
	height: 42px;
	object-fit: cover;
	object-position: center 20%;
	border-radius: 50%;
	border: 1px solid var(--bh-rule);
}