/*
Theme Name: KyleDunkerley dotCom
Theme URI: https://example.com/kdc-theme/
Description: KyleDunkerley dotCom is a simple personal blog theme.
Version: 0.5.14
Author: Kyle Dunkerley
Author URI: https://kyledunkerley.com/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kdc
Requires at least: 6.6
Requires PHP: 8.1
*/

/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/issues/42794
 */
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--secondary);
}

/**
 * Currently table styles are only available with 'wp-block-styles' 
 * theme support (block css) thus the following needs to be included
 * since 'wp-block-styles' aren't used for this theme.
 * https://github.com/WordPress/gutenberg/issues/45065
 */
.wp-block-table thead {
	border-bottom: 3px solid;
}
.wp-block-table tfoot {
	border-top: 3px solid;
}
.wp-block-table td,
.wp-block-table th {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid;
	word-break: normal;
}
.wp-block-table figcaption {
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--spacing--30);
	text-align: center;
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-color: var(--wp--preset--color--primary);
	text-decoration-thickness: .5px !important;
	text-underline-offset: .1em;
}

/* Styles for outline button */
.wp-block-button.is-style-outline>.wp-block-button__link {
	border: 1px solid var(--wp--preset--color--foreground);
	padding: calc(8px - 1px) calc(32px - 1px);
}

/* 
 * Styles for search block
 * https://github.com/WordPress/gutenberg/issues/49249
 */
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	border-radius: 999px;
	padding: 9px;
}
.wp-block-search__input,
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	border-color: var(--wp--preset--color--tertiary);
}

/* Adjust font size for comment reply title */
.wp-block-post-comments-form .comment-reply-title {
	font-size: var(--wp--preset--font-size--medium);
}

/* Editor-only: hide global skip link in block editor canvas (frontend unaffected) */
.block-editor-page .editor-styles-wrapper .skip-to-content-link {
	display: none !important;
}

/* Universal TOC: floating card container + heading sizing and dividers */

/* 0.5.11: TOC card uses palette token (toc-card) */
.universal-toc {
	background-color: var(--wp--preset--color--toc-card);
	border: 1px solid var(--wp--preset--color--tertiary);
	border-radius: 10px;
	padding: 0.5rem 1rem 0.75rem; /* tighter top padding to pull title up */
	box-shadow: 0 6px 18px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
}
.universal-toc h2 {
	font-size: clamp(0.8rem, 0.55rem + 0.35vw, 0.9rem);
	font-weight: 700;
	margin: 0 0 0.25rem 0; /* tighter bottom spacing */
	padding-top: 0;        /* ensure no theme/top padding adds extra gap */
	padding-bottom: 0;     /* remove bottom padding */
	padding-left: 0;       /* remove side padding */
	padding-right: 0;      /* remove side padding */
	text-transform: none;  /* revert to previous casing (no forced uppercase) */
	letter-spacing: normal;
	text-align: center;    /* center the title */
	white-space: nowrap;   /* no wrapping */
	overflow: hidden;
	text-overflow: ellipsis; /* fit into the block with truncation if needed */
	border: none;          /* remove any inherited borders */
	border-top: none;      /* explicitly clear inherited borders */
	border-bottom: none;   /* explicitly clear inherited borders */
}
.universal-toc h2 button.universal-toc__toggle {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0.125rem 0.25rem;
	margin: 0;
	font: inherit;
	color: inherit;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	cursor: default;
}
.universal-toc h2 .universal-toc__chevron {
	transition: transform .18s ease;
	display: inline-block;
}
.universal-toc ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.universal-toc li.toc-comments {
	border-top: 1px solid var(--wp--preset--color--tertiary);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
}
.universal-toc li.toc-back-to-top {
	border-top: 1px solid var(--wp--preset--color--tertiary);
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
}

/* Typographic guard: ensure H2 > H3 across fluid scales and utility classes */
/* Keep default theme.json sizes but constrain oversized h3 utility classes */
h3.has-xx-large-font-size,
h3.has-xxx-large-font-size {
	font-size: calc(var(--wp--preset--font-size--x-large) - 0.01px) !important;
}

/* Adjust the top padding for the submenu items */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	padding-top: var(--wp--preset--spacing--30);
}

/* 
 * Styles for Author blocks
 * https://github.com/WordPress/gutenberg/issues/24952
 */
.wp-block-post-author__avatar img,
.wp-block-avatar img {
	border-radius: 999px;
	line-height: 0;
}
.wp-block-post-author__byline,
.wp-block-post-author__bio {
	font-size: inherit;
}

/* 
 * Style for tag cloud
 * https://github.com/WordPress/gutenberg/issues/49249
 */
.wp-block-tag-cloud.is-style-outline a {
	border-radius: 999px;
	padding: 0 0.5rem;
}
.wp-block-tag-cloud.is-style-outline a:hover {
	color: var(--wp--preset--color--background);
	background-color: var(--wp--preset--color--primary);
}

/* Keep the post date single line on the front page */
.nowrap time {
	white-space: nowrap;
}

/* Floating Table of Contents */
/* (legacy h3 rules removed in favor of h2) */
/* (malformed duplicate block removed in 0.4.13 fix) */
.universal-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.universal-toc li { margin: 0.125rem 0; }
.universal-toc li.toc-level-h1 { padding-left: 0; }
.universal-toc li.toc-level-h2 { padding-left: 0; }
.universal-toc li.toc-level-h3 { padding-left: 0.75rem; }
.universal-toc li.toc-level-h4 { padding-left: 1.25rem; }
.universal-toc li.toc-level-h5 { padding-left: 1.75rem; }
.universal-toc li.toc-level-h6 { padding-left: 2.25rem; }
.universal-toc a {
	text-decoration: none;
    display: block;
    padding: 3px 6px; /* slightly tighter since font smaller */
    border-radius: 6px;
	font-size: 0.85rem; /* reduced so heading stands out */
	line-height: 1.25;
	transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.universal-toc a.active {
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
	background: rgba(0,0,0,0.03);
}
.universal-toc a:hover {
	background: rgba(0,0,0,0.04); /* subtle box highlight on hover */
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14);
}

/* Keyboard focus styles for accessibility */
.universal-toc a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--wp--preset--color--background), 0 0 0 4px rgba(0,0,0,0.25);
}

/* Sticky state subtle emphasis */
.universal-toc.is-sticky {
	box-shadow: 0 10px 28px rgba(0,0,0,0.14), 0 3px 10px rgba(0,0,0,0.1);
}

/* Ensure H2 > H3 (robust guard against theme / core fluid scale edge cases) */
:where(h2){
	/* Use preset if available; fallback clamp ensures > h3 even if presets mutate */
	font-size: var(--wp--preset--font-size--xx-large, clamp(1.9rem, 2.2vw + 1.4rem, 2.15rem)) !important;
}
:where(h3){
	font-size: var(--wp--preset--font-size--x-large, clamp(1.45rem, 1.6vw + 1rem, 1.72rem)) !important;
}

/* Ensure H1 is visually larger than H2 across breakpoints */
:where(h1) {
    font-size: var(--wp--preset--font-size--xxx-large, clamp(2.25rem, 2.6vw + 1.8rem, 3rem)) !important;
}

/* Slightly tone down H2 on very large viewports to maintain hierarchy */
@media (min-width: 1400px) {
    :where(h2) {
        font-size: calc(var(--wp--preset--font-size--xx-large, 2.15rem) - 0.08rem) !important;
    }
}

/* Additional safety: if blocks explicitly set a larger h3 via class, gently reduce */
h3.has-xx-large-font-size{ font-size: var(--wp--preset--font-size--x-large) !important; }
h3.has-xxx-large-font-size{ font-size: var(--wp--preset--font-size--xx-large) !important; }

/* Music review metadata divider */
.music-review-metadata .metadata-divider {
	width: 66%;
	margin: 1rem auto 1.25rem;
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 0.3;
}
.music-review-metadata .apple-music-link a {
	text-decoration: none;
}
.music-review-metadata .apple-music-link a:hover,
.music-review-metadata .apple-music-link a:focus {
	text-decoration: underline;
}

/* (Removed) Front page post title size override.
	Previous selector `.front-page-post-row` constrained editor font controls.
	Rule intentionally deleted in 0.4.2 rollback so the block editor's chosen
	`fontSize` attributes (e.g., has-large-font-size) apply naturally. */

/* Provide a visually hidden skip link target anchor (will be inserted in header template part) */
#main-content-skip-target:focus {
	outline: none;
}
.skip-to-content-link {
	position: absolute;
	left: -999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--primary);
	padding: 0.75rem 1rem;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.skip-to-content-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 1000;
}

/* Media scaling: keep images/videos within container */
img,
video {
	max-width: 100%;
	height: auto;
}
iframe,
embed,
object {
	max-width: 100%;
	/* Do not force height; respect embed-provided height */
}

/* Responsive embeds container (matches WP core class) */
.wp-has-aspect-ratio,
.wp-block-embed__wrapper {
	position: relative;
}
/* Apple Music and similar third-party embeds should use their provided height */
iframe[src*="embed.music.apple.com"],
iframe[src*="open.spotify.com"],
iframe[src*="bandcamp.com"] {
	/* Do not force height here; let the embed's attribute/style govern */
	overflow: hidden;
}

/* If a block wrapper attempts to force aspect-ratio, prioritize the explicit provider height */
/* If the responsive wrapper targets the iframe, don't force its height; allow attribute to win */
.wp-embed-responsive .wp-has-aspect-ratio iframe[src*="embed.music.apple.com"] {
	height: auto !important; /* neutralize height:100% from core */
}

/* Also disable absolute positioning applied by WP responsive wrapper for Apple Music so height can be honored */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper iframe[src*="embed.music.apple.com"] {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	width: 100% !important;
	display: block;
}

/* Fallback: if an Apple Music iframe was authored with height="100%", ensure a sensible minimum */
iframe[src*="embed.music.apple.com"][height="100%"] {
	min-height: 550px;
}
.wp-has-aspect-ratio iframe,
.wp-block-embed__wrapper iframe {
	width: 100%;
}

/* Override WP responsive embed padding hack when no explicit aspect ratio class is set */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:before {
	/* do not force 50% by default; let provider height apply unless a specific aspect class is present */
	padding-top: 0 !important;
}

/* Prevent text overflow on narrow screens */
:where(p, li, blockquote, figcaption, h1, h2, h3, h4, h5, h6) {
	overflow-wrap: anywhere;
	word-wrap: break-word;
}

/* Touch target minimums for generic buttons/links */
a.button,
button,
.wp-block-button__link {
	min-height: 44px; /* widely accepted minimum is 44–48px */
}

/* =============================
   TOC Layout Fallback / Sidebar
   Ensures `.content-with-right-toc` (template markup) and dynamically inserted `.content-with-toc`
   render as two-column layouts even if inline styles are stripped or not loaded early.
============================= */
.content-with-right-toc,
.content-with-toc {
	display: grid;
	/* Use minmax to prevent overly wide first column; unified gap later */
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 2.25rem; /* reduced to match spacing feel in multi-column CPT layouts */
	align-items: start;
}

/* Apply a consistent max-width & centering across TOC-bearing layouts so TOC
	 position aligns between standard posts and CPT templates (music reviews, stories). */
.content-with-right-toc,
.content-with-toc,
.review-layout,
.story-single-layout {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	box-sizing: border-box;
}

@media (min-width: 1400px){
	/* Prevent the TOC column from drifting too far right on very wide screens */
	.content-with-right-toc,
	.content-with-toc,
	.review-layout,
	.story-single-layout {
		max-width: 1200px;
	}
}

/* When the TOC is auto-created (JS fallback), ensure the sidebar nav doesn't stretch */
.content-with-toc > .universal-toc,
.content-with-right-toc > .right-toc,
.content-with-right-toc > aside.right-toc,
.content-with-toc > aside.right-toc {
	align-self: start;
}

/* Responsive: stack on narrow viewports */
@media (max-width: 1024px) {
	.content-with-right-toc,
	.content-with-toc {
		grid-template-columns: 1fr !important;
		justify-items: stretch;
		gap: 2.25rem;
	}
	/* Ensure CPT layouts stack to single column */
	.review-layout,
	.story-single-layout,
	.single-with-toc {
		grid-template-columns: 1fr !important;
		gap: 2.25rem;
	}
	.content-with-right-toc .right-toc,
	.content-with-toc .right-toc,
	.content-with-right-toc .universal-toc,
	.content-with-toc .universal-toc {
		position: static !important;
		top: auto !important;
		max-width: 100%;
	}
	/* Hide the empty right sidebar to avoid phantom columns on mobile */
	.right-toc { display: none !important; }

	/* Music Review: disable sticky panels on mobile to prevent overlap */
	.review-layout .sticky-album-panel,
	.review-layout .review-toc,
	.review-layout aside {
		position: static !important;
		top: auto !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}
	/* Hide review TOC on mobile (per current preference) */
	.review-layout .review-toc { display: none !important; }

	/* Extra safety: override any inline grid-template-columns on known containers */
	.content-with-right-toc[style*="grid-template-columns"],
	.story-single-layout[style*="grid-template-columns"],
	.review-layout[style*="grid-template-columns"],
	.single-with-toc[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
	}

	/* Ensure primary content spans the full grid */
	.content-with-right-toc > div:first-child {
		grid-column: 1 / -1;
	}
	.story-single-layout > .story-content {
		grid-column: 1 / -1;
	}

	/* Mobile: make TOC full-width and collapsible */
	.universal-toc {
		width: 100%;
	}
	/* Mobile top bar style when TOC is moved above content */
	.universal-toc[data-mobile-top="true"] {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 10;
		box-shadow: 0 6px 18px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
		transition: transform .22s ease, opacity .22s ease;
		will-change: transform;
	}
	.universal-toc[data-mobile-top="true"][data-hidden="true"] {
		transform: translateY(-110%);
		opacity: 0;
		pointer-events: none;
	}
	.universal-toc[data-collapsible="true"] ul {
		transition: max-height .2s ease, opacity .2s ease;
		overflow: hidden;
		/* Start expanded; JS sets collapsed state */
	}
	.universal-toc[data-collapsible="true"][data-collapsed="true"] ul {
		max-height: 0;
		opacity: 0;
		pointer-events: none;
	}
	.universal-toc[data-collapsible="true"][data-collapsed="false"] ul {
		max-height: 100vh; /* generous */
		opacity: 1;
	}
	/* Rotate chevron when expanded */
	.universal-toc[data-collapsible="true"][data-collapsed="false"] .universal-toc__chevron {
		transform: rotate(180deg);
	}
}

/* 0.5.11: Body background handled via theme.json (reading-bg); keep fallback */
body { background-color: var(--wp--preset--color--reading-bg, #fcfaf3) !important; }