/*
Theme Name:   TKG Child
Theme URI:    https://thekendallgentleman.com
Description:  Child theme of GeneratePress for The Kendall Gentleman. All custom CSS for the site lives in this file. The GeneratePress parent theme is never modified directly.
Author:       Oakridge Media
Author URI:   https://oakridge.media
Template:     generatepress
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  tkg-child
*/

/* =============================================================================
   DESIGN TOKENS
   Single source of truth for the site's colours and type scale.

   Colours and the global type scale are ALSO applied to GeneratePress' global
   styles by scripts/gp-config.php — GP needs them natively so the block editor
   and GenerateBlocks inherit them. These custom properties exist so bespoke CSS
   in this file never hardcodes a hex value. Keep the two in sync.

   Fonts are loaded through GeneratePress' font settings, NOT via @import here.
   ========================================================================== */

:root {
	/* --- Colour ------------------------------------------------------------
	   MEASURED FROM PRODUCTION, not from the migration brief — the brief's
	   palette (#0a0a0a / #eabf4b / #e2e2e2) matches nothing on the live site.
	   Verified against Astra's stored global-color-palette, the served
	   --ast-global-color-* variables, and computed styles in the browser.
	   Mirrors scripts/gp-config.php; keep the two in sync.              */
	--tkg-bg:              #0e0d06; /* site background — must be global */
	--tkg-surface:         #1b1b1b; /* raised surfaces (cards, wells)  */
	--tkg-surface-2:       #2e2d2a; /* secondary raised surface        */
	--tkg-gold:            #dca54a; /* accent, nav hover/active        */
	--tkg-gold-hover:      #d09a40; /* accent, hover state             */
	--tkg-text:            #ffffff; /* headings, links                 */
	--tkg-body:            #faf5e5; /* body copy (warm cream)          */
	--tkg-footer-muted:    #8a8a8a; /* muted secondary text            */
	--tkg-divider:         #7a7a7a; /* dividers, borders               */

	/* --- Font families ----------------------------------------------------- */
	--tkg-font-display:    "Crimson Text", Georgia, "Times New Roman", serif;   /* H1–H3 */
	--tkg-font-heading:    "Montserrat", "Helvetica Neue", Arial, sans-serif;   /* H4–H6, nav */
	--tkg-font-body:       "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;

	/* --- Type scale: desktop ----------------------------------------------- */
	--tkg-h1: 80px;
	--tkg-h2: 40px;
	--tkg-h3: 32px;
	--tkg-h4: 22px;
	--tkg-h5: 18px;
	--tkg-h6: 13px;
	--tkg-body-size: 16px;

	/* --- Measurements ------------------------------------------------------ */
	--tkg-content-width:   720px; /* single post content column */
	--tkg-nav-size:        13px;
	--tkg-heading-tracking: 2px;  /* H4–H6 letter-spacing */
	--tkg-body-leading:    1.7;
	--tkg-display-leading: 1.2;
}

/* Tablet */
@media (max-width: 1024px) {
	:root {
		--tkg-h1: 64px;
		--tkg-h2: 36px;
		--tkg-h3: 30px;
		--tkg-h4: 20px;
		--tkg-h5: 16px;
		--tkg-h6: 12px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	:root {
		--tkg-h1: 48px;
		--tkg-h2: 32px;
		--tkg-h3: 24px;
		--tkg-h4: 18px;
		--tkg-h5: 14px;
		--tkg-h6: 11px;
	}
}

/* =============================================================================
   BASELINE
   The dark background is critical: on the Astra/UAG site it came from UAG
   container blocks rather than a global setting, so without this (and the
   matching GP global style) every article renders on white.
   ========================================================================== */

body {
	background-color: var(--tkg-bg);
	color: var(--tkg-body);
}

/* =============================================================================
   HEADER  (Phase 04)

   ONE global treatment. Production mixed transparent and opaque headers, which
   is what made the site look inconsistent. Here the nav bar is always
   transparent and always overlaid at the top of the page; pages without a
   full-height hero get a matching top offset so nothing collides with it.
   ========================================================================== */

.main-navigation {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background-color: transparent;
}

.main-navigation .inside-navigation {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
	min-height: 78px; /* production header height */
}

/* Centre the menu in the FULL bar width, as production does. The social icons
   are taken out of the flex flow so they cannot push the menu off-centre. */
.main-navigation .main-nav {
	flex: 0 1 auto;
	display: flex;
	justify-content: center;
}

.main-navigation .main-nav > ul {
	display: flex;
	align-items: center;
}

.main-navigation .main-nav ul li a {
	color: var(--tkg-body);
	padding-left: 18px;
	padding-right: 18px;
	line-height: 78px;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a {
	color: var(--tkg-gold);
	background-color: transparent;
}

/* Social icons sit at the right end of the nav bar. */
.main-navigation .menu-bar-items {
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
}

/* Pages without a hero start below the overlaid nav bar. */
body.tkg-no-hero .site-content {
	padding-top: 78px;
}

/* =============================================================================
   SOCIAL ICONS  (header and footer)
   ========================================================================== */

.tkg-social {
	display: flex;
	align-items: center;
	/* Links carry their own padding to reach a 44px tap target, so the gap here
	   is small — the visual spacing between glyphs comes from that padding. */
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* GeneratePress forces display:block on navigation anchors, which killed the
   flex centring and left the glyph pinned to the top of its 44px box - 12px
   above the menu text's centre line. This has to out-specify that rule. */
.main-navigation .menu-bar-items .tkg-social .tkg-social__link,
.tkg-footer .tkg-social .tkg-social__link,
.tkg-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44x44 minimum tap target; the glyph itself stays 20px. */
	width: 44px;
	height: 44px;
	color: var(--tkg-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.tkg-social__link:hover,
.tkg-social__link:focus {
	color: var(--tkg-gold);
}

.tkg-social__icon {
	width: 20px;
	height: 20px;
	display: block;
	/* Simple Icons glyphs fill their viewBox, so equal boxes are equal marks. */
	flex: 0 0 auto;
}

/* =============================================================================
   FOOTER  (Phase 04)
   ========================================================================== */

.tkg-footer {
	background-color: var(--tkg-bg);
	color: var(--tkg-body);
}

.tkg-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
}

/* --- Subscribe row -------------------------------------------------------- */

.tkg-footer__subscribe {
	padding: 77px 0;
	text-align: center;
}

.tkg-footer__subscribe-title {
	font-family: var(--tkg-font-display);
	font-size: var(--tkg-h3);
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--tkg-body);
	margin: 0;
}

.tkg-footer__form {
	margin-top: 30px;
}

.tkg-footer__form .ff-btn-submit {
	background-color: var(--tkg-gold);
	color: var(--tkg-bg);
	border: 0;
}

.tkg-footer__form .ff-btn-submit:hover,
.tkg-footer__form .ff-btn-submit:focus {
	background-color: var(--tkg-gold-hover);
	color: var(--tkg-bg);
}

/* --- Footer navigation ---------------------------------------------------- */

.tkg-footer__nav-row {
	padding: 104px 0 64px;
}

.tkg-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Production footer links are body font, 15px, regular weight, NOT uppercase —
   deliberately different from the header nav. */
.tkg-footer__menu a {
	font-family: var(--tkg-font-body);
	font-size: 15px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--tkg-text);
	text-decoration: none;
}

.tkg-footer__menu a:hover,
.tkg-footer__menu a:focus {
	color: var(--tkg-gold);
}

/* --- Bottom bar ----------------------------------------------------------- */

.tkg-footer__bottom {
	padding: 20px 0;
}

.tkg-footer__bottom .tkg-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.tkg-footer__copyright {
	font-family: var(--tkg-font-body);
	font-size: 14px;
	color: var(--tkg-body);
	text-align: center;
	margin: 0;
}

/* =============================================================================
   RESPONSIVE  (Phase 04)
   ========================================================================== */

@media (max-width: 768px) {
	.main-navigation .inside-navigation {
		padding: 0 20px;
		min-height: 70px; /* production's mobile header height */
	}

	body.tkg-no-hero .site-content {
		padding-top: 70px;
	}

	/* GP's mobile menu opens beneath the bar; give it the site background so it
	   is readable over whatever it overlays. */
	.main-navigation.toggled .main-nav {
		background-color: var(--tkg-bg);
	}

	.main-navigation .main-nav {
		flex-basis: 100%;
	}

	.main-navigation .main-nav ul li a {
		line-height: 1.6;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.tkg-footer__subscribe {
		padding: 48px 0;
	}

	.tkg-footer__nav-row {
		padding: 48px 0 32px;
	}

	.tkg-footer__menu {
		gap: 18px;
	}
}

/* =============================================================================
   SINGLE POST  (Phase 05)

   Measured from production, which differs from the migration brief: the
   featured image is a constrained portrait image ABOVE the title (not a
   full-width hero), the content column is ~497px (not ~720px), and there is
   NO sidebar (production renders `ast-no-sidebar` on single posts).
   ========================================================================== */

.single-post .content-area {
	max-width: 710px;
	margin-left: auto;
	margin-right: auto;
}

.single-post .entry-header,
.single-post .entry-content,
.single-post .featured-image {
	max-width: 497px;
	margin-left: auto;
	margin-right: auto;
}

/* Featured image sits above the title, portrait, centred. GeneratePress emits
   it as .featured-image (not .post-image) on single posts. */
/* Spacing measured against production: featured image top at 227px and a 10px
   gap down to the title. The 78px header offset already sits on .site-content,
   so the remainder goes on the article padding. GeneratePress sets its own
   margin on .page-header-image-single, so the gap override has to out-specify
   it rather than rely on source order. */
.single-post .inside-article {
	padding-top: 129px;
}

.single-post .inside-article > .featured-image.page-header-image-single {
	margin-top: 0;
	margin-bottom: 10px;
	padding: 0;
}

.single-post .featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

.single-post .entry-header {
	text-align: center;
	margin-bottom: 32px;
}

/* Byline: "/ Category / By Author" */
.tkg-byline {
	font-family: var(--tkg-font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--tkg-body);
	margin-top: 10px;
}

.tkg-byline__sep {
	color: var(--tkg-divider);
	margin: 0 2px;
}

.single-post .entry-content {
	font-size: var(--tkg-body-size);
	line-height: var(--tkg-body-leading);
}

/* Body copy inside an article keeps the reading column; full-bleed media may
   still break out where the block asks to. */
.single-post .entry-content > .alignwide,
.single-post .entry-content > .alignfull {
	max-width: none;
}

/* =============================================================================
   ARCHIVE / BLOG INDEX  (Phase 05)

   /the-articles/ is the posts page (page_for_posts = 1389), so this covers it.
   Production: 3-column card grid with a right sidebar. GeneratePress' free
   version has no Blog module, so the grid is done here.
   ========================================================================== */

/* Production's blog row is 960px wide (content 672 + sidebar 288), narrower
   than the 1200px global container. With a 32px gap that lands each card image
   at ~203px, matching production. */
body.blog .site-content,
body.archive .site-content,
body.search .site-content {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

body.blog .site-main,
body.archive .site-main,
body.search .site-main {
	display: grid;
	/* minmax(0, 1fr) rather than 1fr: with plain 1fr the columns are floored at
	   min-content and come out unequal. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 32px;
	align-items: start;
	/* GP insets .site-main by 10px each side; the grid must span the full 672px
	   content column so each card image lands at production's 203px. */
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Elements that must span the whole grid rather than sit in a column. */
body.blog .site-main > .page-header,
body.archive .site-main > .page-header,
body.search .site-main > .page-header,
body.blog .site-main > .paging-navigation,
body.archive .site-main > .paging-navigation,
body.search .site-main > .paging-navigation,
body.blog .site-main > .no-results,
body.archive .site-main > .no-results,
body.search .site-main > .no-results {
	grid-column: 1 / -1;
}

.tkg-card {
	background-color: transparent;
	margin: 0;
	padding: 0;
	border: 0;
}

/* GeneratePress renders the card image after the entry header; production shows
   it first. Ordering here avoids re-hooking GP's markup. */
.tkg-card .inside-article {
	display: flex;
	flex-direction: column;
	/* GeneratePress' separate-container puts 40px of padding here, which shrank
	   the card content box to 116px. Cards are edge-to-edge; with a 32px grid
	   gap in a 672px column that lands the image at ~203px, matching production. */
	padding: 0;
}

.tkg-card .post-image {
	order: -1;
	margin: 0 0 16px;
	align-self: stretch;
	width: 100%;
}

/* The thumbnail is wrapped in an anchor, which is inline by default — width
   100% on the image would otherwise resolve against a shrink-to-fit box. */
.tkg-card .post-image a {
	display: block;
}

/* Production's cards carry no date/author meta. */
.tkg-card .entry-meta {
	display: none;
}

.tkg-card .post-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 203 / 253; /* production card image proportion */
	object-fit: cover;
}

.tkg-card .entry-title {
	margin: 0 0 10px;
}

.tkg-card .entry-title a {
	color: var(--tkg-text);
	text-decoration: none;
}

.tkg-card .entry-title a:hover,
.tkg-card .entry-title a:focus {
	color: var(--tkg-gold);
}

.tkg-card .entry-summary,
.tkg-card .entry-content {
	font-size: 15px;
	color: var(--tkg-body);
}

/* On Home the rule replaces a 95px spacer, so it carries that spacing itself. */
.tkg-rule-home {
	margin-top: 46px;
	margin-bottom: 46px;
}

/* --- Blog index intro (the posts page's own content) ---------------------- */

.tkg-blog-intro {
	/* Rendered above .site-content, spanning the full container across both the
	   card column and the sidebar. The shared .tkg-page-header inside supplies
	   the type sizes and its own top padding. */
	max-width: 1200px;
	margin: 0 auto;
	padding: 78px 0 40px;
	text-align: center;
}

/* The blog index supplies its own top spacing, so drop the global header offset
   that would otherwise double it up. */
body.blog .site-content {
	padding-top: 0;
}

.tkg-blog-intro p:empty {
	display: none;
}

/* --- Sidebar -------------------------------------------------------------- */

/* Gutter between the card grid and the sidebar - without it the rightmost card
   sits flush against the widgets. */
body.blog #right-sidebar,
body.archive #right-sidebar,
body.search #right-sidebar {
	padding-left: 40px;
}

.widget-area .widget {
	background-color: transparent;
	padding: 0;
	margin-bottom: 40px;
}

.widget-area .widget-title,
.widget-area .wp-block-heading {
	font-family: var(--tkg-font-display);
	font-size: 22px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--tkg-body);
	margin-bottom: 16px;
}

.widget-area a {
	color: var(--tkg-body);
	text-decoration: none;
}

.widget-area a:hover,
.widget-area a:focus {
	color: var(--tkg-gold);
}

.widget-area input[type="search"],
.widget-area input[type="text"] {
	background-color: var(--tkg-bg);
	border: 1px solid var(--tkg-divider);
	color: var(--tkg-text);
}

/* --- Archive responsive --------------------------------------------------- */

@media (max-width: 1024px) {
	body.blog .site-main,
	body.archive .site-main,
	body.search .site-main {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	body.blog .site-main,
	body.archive .site-main,
	body.search .site-main {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.single-post .entry-header,
	.single-post .entry-content,
	.single-post .featured-image {
		max-width: 100%;
	}
}

/* =============================================================================
   HOME PAGE  (Phase 06)

   Measured from production at 1440x900: hero is a full-viewport background
   (min-height 900px, cover, centred) with the 612x302 stacked logo at y=527 and
   the SCROLL DOWN link directly beneath it. Asset URLs are ROOT-RELATIVE so the
   same markup works locally and in production without a search-replace.
   ========================================================================== */

/* The front page is full-bleed: the hero must reach the viewport edges and
   start at y=0 behind the overlaid nav. GeneratePress' container padding and
   max-width are removed here only; .tkg-who and .tkg-cta re-constrain
   themselves to 1200px. */
body.tkg-has-hero .site.grid-container,
body.tkg-has-hero .site-content,
body.tkg-has-hero .content-area,
body.tkg-has-hero .site-main,
body.tkg-has-hero .inside-article,
body.tkg-has-hero .entry-content {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* GeneratePress puts a top margin on .entry-content that would push the hero
   down from y=0; out-specify it rather than rely on source order. */
body.tkg-has-hero .inside-article > .entry-content {
	margin-top: 0;
}

.tkg-hero {
	position: relative;
	min-height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	/* Production anchors the logo at y=527 and the scroll link at y=832 in a
	   900px hero, leaving 52px beneath the link. */
	padding-bottom: 12px;
	background-image: url("/wp-content/uploads/2024/11/Fun-man-cave-design-Cool-Things-Collected-2048x1365-1.jpeg");
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.tkg-hero__logo {
	margin: 0;
	max-width: 612px;
	width: 100%;
}

.tkg-hero__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.tkg-hero__scroll {
	margin: 3px 0 0;
	padding: 0;
	text-align: center;
	line-height: 1;
}

.tkg-hero__scroll a {
	font-family: var(--tkg-font-heading);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--tkg-text);
	text-decoration: none;
}

.tkg-hero__scroll a:hover,
.tkg-hero__scroll a:focus {
	color: var(--tkg-gold);
}

/* --- "Who is The Kendall Gentleman?" two-column ---------------------------- */

.tkg-who {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 84px 30px 0;
	gap: 60px;
}

.tkg-who__eyebrow {
	/* Production uses the darker gold here, not the primary accent. */
	font-family: var(--tkg-font-heading);
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--tkg-gold-hover);
	margin: 0 0 26px;
}

.tkg-who__title {
	font-family: var(--tkg-font-display);
	font-size: var(--tkg-h2);
	font-weight: 600;
	text-transform: uppercase;
	line-height: var(--tkg-display-leading);
	color: var(--tkg-text);
	margin: 0;
}

.tkg-who__body p {
	font-family: var(--tkg-font-body);
	font-size: 16px;
	line-height: 1.857; /* production computes 29.71px at 16px */
	color: var(--tkg-body);
}

.tkg-who__body strong {
	font-weight: 600;
}

.tkg-who__more {
	margin-top: 24px;
}

.tkg-who__more .wp-block-button__link {
	/* Pill, gold fill, no border — the white outline is deliberately gone. */
	background-color: var(--tkg-gold);
	border: 0;
	color: var(--tkg-bg);
	font-family: var(--tkg-font-heading);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	border-radius: 999px;
	padding: 13px 30px;
}

.tkg-who__more .wp-block-button__link:hover,
.tkg-who__more .wp-block-button__link:focus {
	background-color: var(--tkg-gold-hover);
	color: var(--tkg-bg);
}

/* --- Three gold call-to-action buttons ------------------------------------ */

.tkg-cta {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px 96px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

/* All three CTAs share one width rather than sizing to their own label. */
.tkg-cta .wp-block-button {
	flex: 1 1 0;
	min-width: 0;
}

.tkg-cta .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

.tkg-cta .wp-block-button__link {
	background-color: var(--tkg-gold);
	border: 1px solid var(--tkg-gold);
	color: #000000;
	font-family: var(--tkg-font-heading);
	font-size: 36px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	line-height: 1;
	border-radius: 999px;
	padding: 15px 23px;
}

.tkg-cta .wp-block-button__link:hover,
.tkg-cta .wp-block-button__link:focus {
	background-color: var(--tkg-gold-hover);
	border-color: var(--tkg-gold-hover);
	color: #000000;
}

/* --- Home responsive ------------------------------------------------------ */

@media (max-width: 1024px) {
	.tkg-who {
		gap: 40px;
	}

	.tkg-cta .wp-block-button__link {
		font-size: 28px;
	}
}

@media (max-width: 768px) {
	.tkg-hero__logo {
		max-width: 78vw;
	}

	.tkg-who {
		padding-top: 56px;
		gap: 28px;
	}

	.tkg-cta {
		padding-bottom: 64px;
		gap: 16px;
	}

	/* Below this width three equal pills would squeeze narrower than their
	   labels, so they stack full-width instead — still equal to each other. */
	.tkg-cta .wp-block-button {
		flex: 1 1 100%;
	}

	.tkg-cta .wp-block-button__link {
		font-size: 22px;
		padding: 12px 18px;
	}
}

/* =============================================================================
   THE MAGAZINE  (Phase 07)

   Measured from production: H1 80px / H2 40px / H3 32px Crimson Text uppercase
   white (all already the global scale), a 2px CREAM rule (not gold, despite the
   source block naming a gold variable), and a full-bleed 3D FlipBook while the
   headings stay at the 1200px container.
   ========================================================================== */

.tkg-rule {
	/* The site-wide page rule. Production used gold on the Podcast and Articles
	   but cream elsewhere; Michael's call (2026-08-15) is gold everywhere, on
	   every page that carries a heading — including Contact and Nominate, which
	   previously had no rule at all. Gold is --ast-global-color-0 / #DCA54A. */
	max-width: 1200px;
	margin: 10px auto;
	border: 0;
	border-top: 2px solid var(--tkg-gold);
	background: none;
	height: 0;
	opacity: 1;
}

/* The FlipBook runs edge to edge, as it does on production. The shortcode
   renders a bare ._3d-flip-book div, not a .wp-block-shortcode wrapper. */
.page-id-694 ._3d-flip-book {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Pages carry no GeneratePress container chrome: production starts page content
   immediately below the header offset. Single posts keep their own padding. */
body.page .site-main {
	margin-top: 0;
}

body.page .inside-article {
	padding: 0;
}

/* --- Issue archive grid --------------------------------------------------- */

.tkg-issues {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* core/group renders a .wp-block-group__inner-container, so the grid must go on
   THAT - putting it on .tkg-issues gave the grid a single child and stacked all
   18 covers into one narrow column. One uniform grid replaces the source's
   uneven 2/4/4/4/4 rows, which made the first row's covers twice the size. */
.tkg-issues > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 24px;
	align-items: start;
}

/* Styling keys off the grid container, NOT a per-image class: an issue added
   through the block editor will not carry `tkg-issue`, and requiring it meant a
   normally-added cover rendered unstyled and broke the row. Any image dropped
   into this group is now laid out correctly. */
.tkg-issues .wp-block-image {
	margin: 0;
}

/* core's .wp-block-image sizing wins on specificity, leaving each cover
   narrower than its grid cell; out-specify it so covers fill the cell. The
   cover links must be block-level too: an inline <a> shrink-wraps, so width
   100% on the image resolved against the file's natural size and left the
   already-loaded covers at 231px while the rest filled the cell. */
.tkg-issues .wp-block-image,
.tkg-issues .wp-block-image a,
.tkg-issues .wp-block-image img {
	display: block;
	width: 100%;
	max-width: none;
}

.tkg-issues .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	/* Every cover renders in an identical box regardless of the source file's
	   dimensions - some issues are full-size PNGs, others 231x300 thumbnails. */
	aspect-ratio: 231 / 300;
	object-fit: cover;
}

.tkg-issues .wp-block-image figcaption {
	font-family: var(--tkg-font-body);
	font-size: 16px;
	font-weight: 400;
	text-transform: none;
	color: var(--tkg-body);
	text-align: center;
	margin-top: 8px;
}

.tkg-issues .wp-block-image a:hover img,
.tkg-issues .wp-block-image a:focus img {
	opacity: 0.85;
}

@media (max-width: 1024px) {
	.tkg-issues > .wp-block-group__inner-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.tkg-issues > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}
}

/* =============================================================================
   CONTACT + SIMPLE PAGES  (Phase 08)

   Measured from production: H1 "Contact" 80px Crimson centred; a two-column
   body with the 1946 county map on the left and the FluentForms form on the
   right under a GOLD 32px "Send a Message" heading.
   ========================================================================== */

/* =============================================================================
   SHARED PAGE HEADER

   Every page opens the same way: "The Kendall Gentleman" (H1), the page's own
   name beneath it (H2), then the gold rule. One block, one set of sizes, so the
   pages cannot drift apart again. Sizes come from the global type scale, which
   is already responsive.
   ========================================================================== */

.tkg-page-header {
	max-width: 1200px;
	margin: 0 auto;
	padding: 22px 30px 0;
	text-align: center;
}

.tkg-page-header__eyebrow {
	font-family: var(--tkg-font-display);
	font-size: var(--tkg-h1);
	font-weight: 600;
	text-transform: uppercase;
	line-height: var(--tkg-display-leading);
	color: var(--tkg-text);
	margin: 0 0 8px;
}

.tkg-page-header__title {
	font-family: var(--tkg-font-display);
	font-size: var(--tkg-h2);
	font-weight: 600;
	text-transform: uppercase;
	line-height: var(--tkg-display-leading);
	color: var(--tkg-text);
	margin: 0 0 24px;
}

.tkg-page-header .tkg-rule {
	margin: 0 auto;
}

/* core/group's inner container was insetting the rule 40px each side on regular
   pages (but not inside the blog intro), giving two different rule widths. */
.tkg-page-header > .wp-block-group__inner-container {
	max-width: none;
	padding: 0;
}

.tkg-page-header .tkg-rule {
	max-width: none;
	width: 100%;
}

/* GeneratePress puts a 2em top margin on .entry-content, which pushed the page
   header 40px lower on regular pages than on the blog index. */
body.page .inside-article > .entry-content {
	margin-top: 0;
}

/* Section headings within a page (e.g. "Issue Archives"). */
.tkg-section-title {
	font-family: var(--tkg-font-display);
	font-size: var(--tkg-h3);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--tkg-text);
	margin: 48px 0 24px;
}

@media (max-width: 768px) {
	.tkg-page-header {
		padding: 16px 20px 0;
	}
}

.tkg-contact {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	/* Production: map column 510px, form column 440px, 104px apart. */
	gap: 104px;
	margin-top: 108px;
}

/* Core's .wp-block-columns > .wp-block-column rule ties on specificity and
   wins on source order, so these have to out-specify it. */
.wp-block-columns.tkg-contact > .wp-block-column.tkg-contact__where {
	flex: 0 0 510px;
}

.wp-block-columns.tkg-contact > .wp-block-column.tkg-contact__form {
	flex: 0 0 440px;
	/* Production starts the form column lower than the address column. */
	margin-top: 182px;
}

.tkg-contact__eyebrow {
	font-family: var(--tkg-font-heading);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--tkg-text);
	text-align: left;
	margin: 0 0 8px;
}

.tkg-contact__address {
	font-family: var(--tkg-font-body);
	font-size: 16px;
	color: var(--tkg-body);
	/* Production leaves a large gap between the address and the map. */
	margin: 0 0 184px;
}

.tkg-contact__map {
	margin: 0;
}

.tkg-contact__map img {
	display: block;
	width: 100%;
	height: auto;
}

/* Production renders this heading in the gold accent, unlike other H3s. */
.tkg-contact__title {
	font-family: var(--tkg-font-display);
	font-size: var(--tkg-h3);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--tkg-gold);
	text-align: left;
	margin: 0 0 12px;
}

.tkg-contact__intro {
	font-family: var(--tkg-font-body);
	font-size: 16px;
	line-height: var(--tkg-body-leading);
	color: var(--tkg-body);
	margin: 0 0 24px;
}

.tkg-contact__intro a {
	color: var(--tkg-gold);
}

.tkg-contact__intro a:hover,
.tkg-contact__intro a:focus {
	color: var(--tkg-gold-hover);
}

/* FluentForms on a dark ground. */
.tkg-contact__form .ff-el-input--label label,
.tkg-contact__form .ff-el-form-control::placeholder {
	color: var(--tkg-body);
}

.tkg-contact__form .ff-el-form-control {
	background-color: var(--tkg-bg);
	border: 1px solid var(--tkg-divider);
	color: var(--tkg-text);
	border-radius: 0;
}

.tkg-contact__form .ff-el-form-control:focus {
	border-color: var(--tkg-gold);
}

.tkg-contact__form .ff-btn-submit {
	background-color: var(--tkg-gold);
	border: 1px solid var(--tkg-gold);
	color: var(--tkg-bg);
	font-family: var(--tkg-font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	border-radius: 0;
}

.tkg-contact__form .ff-btn-submit:hover,
.tkg-contact__form .ff-btn-submit:focus {
	background-color: var(--tkg-gold-hover);
	border-color: var(--tkg-gold-hover);
}

@media (max-width: 1024px) {
	.wp-block-columns.tkg-contact > .wp-block-column.tkg-contact__where,
	.wp-block-columns.tkg-contact > .wp-block-column.tkg-contact__form {
		flex: 1 1 auto;
		margin-top: 0;
	}

	.tkg-contact {
		gap: 48px;
	}
}

@media (max-width: 768px) {
	.tkg-contact {
		gap: 32px;
		margin-top: 56px;
	}
}