/* ============================================================
   MK Theme — single.css
   Loaded on singular post & page views (is_singular() && !movie).

   Covers two BEM blocks that share this stylesheet:
     .mk-single  (posts)
     .mk-page    (pages)

   v0.1.3 editorial structure for posts:
     title → byline (author · date) → categories
     → featured image → content → tags → comments
   ============================================================ */

/* ── 1. Base content container ────────────────────────────── */
/*
   The body:not([class*="elementor-page-"]) gate means our widths
   only apply on normal WP posts/pages. Elementor pages keep their
   own canvas/full-width behavior untouched.

   v0.3.0: Width is controlled by the inner wrapper via
   --mk-article-width. The outer article only provides safe
   padding and centering.
*/

body:not([class*="elementor-page-"]) .mk-single,
body:not([class*="elementor-page-"]) .mk-page {
	width: 100%;
	margin-inline: auto;
	padding-inline: 16px;
	box-sizing: border-box;
}

body:not([class*="elementor-page-"]) .mk-comments {
	width: 100%;
	margin-inline: auto;
	padding-inline: 16px;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	body:not([class*="elementor-page-"]) .mk-single,
	body:not([class*="elementor-page-"]) .mk-page,
	body:not([class*="elementor-page-"]) .mk-comments {
		padding-inline: 24px;
	}
}

/* Comments keep a fixed max-width (not affected by Content settings). */
body:not([class*="elementor-page-"]) .mk-comments {
	max-width: var(--mk-content-width);
}

/* ── 1b. Content layout width modifiers (v0.3.0) ────────────── */
/*
   Width modifiers override the responsive max-width above.
   Applied to the inner wrapper, not the article, so boxed style
   background can extend independently of content width.
*/

.mk-single__inner,
.mk-page__inner {
	max-width: var(--mk-article-width, var(--mk-content-width));
	margin-inline: auto;
}

/* Default = theme content width (800px). */
.mk-single--width-default { --mk-article-width: var(--mk-content-width); }
.mk-page--width-default   { --mk-article-width: var(--mk-content-width); }

/* Narrow = focused reading width. */
.mk-single--width-narrow  { --mk-article-width: 680px; }
.mk-page--width-narrow    { --mk-article-width: 680px; }

/* Wide = comfortable wide layout. */
.mk-single--width-wide    { --mk-article-width: 1000px; }
.mk-page--width-wide      { --mk-article-width: 1000px; }

/* Full = theme wide width (not edge-to-edge viewport). */
.mk-single--width-full    { --mk-article-width: var(--mk-wide-width); }
.mk-page--width-full      { --mk-article-width: var(--mk-wide-width); }

/* ── 1c. Content style: boxed (v0.3.0) ──────────────────────── */
/*
   Boxed applies to the inner wrapper. The article background stays
   transparent so boxed cards sit cleanly on the page background.
*/

.mk-single--style-boxed .mk-single__inner,
.mk-page--style-boxed .mk-page__inner {
	background: var(--mk-color-surface);
	border: 1px solid var(--mk-color-border);
	border-radius: var(--mk-radius);
	padding: var(--mk-space-lg);
}

/* ── 2. Article header & title ────────────────────────────── */

.mk-single__header,
.mk-page__header {
	margin-bottom: var(--mk-space-lg);
}

.mk-single__title,
.mk-page__title {
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
	margin: 0;
	line-height: 1.2;
}

/* ── 3. Byline row (author · date) ────────────────────────── */

.mk-single__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin-top: var(--mk-space-sm);
	font-size: 0.875rem;
	color: var(--mk-color-muted);
	line-height: 1.5;
}

.mk-single__byline-author,
.mk-single__byline-date {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}

.mk-single__byline-sep {
	color: var(--mk-color-border);
	user-select: none;
}

/* ── 4. Categories row ────────────────────────────────────── */

.mk-single__categories {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 6px;
	margin-top: var(--mk-space-xs);
	font-size: 0.875rem;
	color: var(--mk-color-muted);
	line-height: 1.5;
}

/* ── 5. Shared meta label (By / In: / Tagged:) ────────────── */

.mk-single__meta-label {
	font-weight: 500;
	color: var(--mk-color-muted);
}

.mk-single__byline a,
.mk-single__categories a,
.mk-single__tags a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}

.mk-single__byline a:hover,
.mk-single__byline a:focus-visible,
.mk-single__categories a:hover,
.mk-single__categories a:focus-visible,
.mk-single__tags a:hover,
.mk-single__tags a:focus-visible {
	color: var(--mk-color-link);
	border-bottom-color: var(--mk-color-link);
}

/* ── 6. Featured image ────────────────────────────────────── */
/*
   v0.1.6 — never crop the featured image.

   Until v0.1.5 we used object-fit: cover with fixed max-height
   caps inherited from Hello (500/400/300px per breakpoint). That
   silently cropped images on single/page, which is wrong for
   blog/review/movie content where the user expects to see the
   whole image.

   Option B (the chosen default):
     - object-fit: contain → never crop, scale down to fit.
     - max-height: 70vh    → portrait posters / tall images stay
                              within ~70% of the viewport, so the
                              title and start of the article are
                              still visible without scrolling on
                              most laptops.

   Archive cards (.mk-card__thumb) and Movie Kit poster
   (.mk-movie__poster) keep their own object-fit: cover behavior
   in their own stylesheets — those are intentional grid /
   poster aspect ratios.
*/

.mk-single__thumb,
.mk-page__thumb {
	margin: 0 0 var(--mk-space-lg);
	overflow: hidden;
}

.mk-single__thumb img,
.mk-page__thumb img {
	width: 100%;
	height: auto;
	display: block;
}

/* ── Featured image fit ──────────────────────────────── */

/* Contain: image shows fully, max-height limits size. */
.mk-single--featured-fit-contain .mk-single__thumb img,
.mk-page--featured-fit-contain .mk-page__thumb img {
	object-fit: contain;
	height: auto;
}

/* Cover: wrapper gets controlled height, image fills it. */
.mk-single--featured-fit-cover .mk-single__thumb,
.mk-page--featured-fit-cover .mk-page__thumb {
	width: 100%;
}

.mk-single--featured-fit-cover .mk-single__thumb img,
.mk-page--featured-fit-cover .mk-page__thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* ── Featured image position ─────────────────────────── */

.mk-single--featured-position-center .mk-single__thumb img,
.mk-page--featured-position-center .mk-page__thumb img {
	object-position: center;
}

.mk-single--featured-position-top .mk-single__thumb img,
.mk-page--featured-position-top .mk-page__thumb img {
	object-position: top;
}

.mk-single--featured-position-bottom .mk-single__thumb img,
.mk-page--featured-position-bottom .mk-page__thumb img {
	object-position: bottom;
}

/* ── Featured image max height ───────────────────────── */

/* Contain mode: max-height on image. */
.mk-single--featured-fit-contain.mk-single--featured-height-compact .mk-single__thumb img,
.mk-page--featured-fit-contain.mk-page--featured-height-compact .mk-page__thumb img {
	max-height: 40vh;
}

.mk-single--featured-fit-contain.mk-single--featured-height-normal .mk-single__thumb img,
.mk-page--featured-fit-contain.mk-page--featured-height-normal .mk-page__thumb img {
	max-height: 55vh;
}

.mk-single--featured-fit-contain.mk-single--featured-height-large .mk-single__thumb img,
.mk-page--featured-fit-contain.mk-page--featured-height-large .mk-page__thumb img {
	max-height: 70vh;
}

.mk-single--featured-fit-contain.mk-single--featured-height-none .mk-single__thumb img,
.mk-page--featured-fit-contain.mk-page--featured-height-none .mk-page__thumb img {
	max-height: none;
}

/* Cover mode: fixed height on wrapper, image fills. */
.mk-single--featured-fit-cover.mk-single--featured-height-compact .mk-single__thumb,
.mk-page--featured-fit-cover.mk-page--featured-height-compact .mk-page__thumb {
	height: 40vh;
}

.mk-single--featured-fit-cover.mk-single--featured-height-normal .mk-single__thumb,
.mk-page--featured-fit-cover.mk-page--featured-height-normal .mk-page__thumb {
	height: 55vh;
}

.mk-single--featured-fit-cover.mk-single--featured-height-large .mk-single__thumb,
.mk-page--featured-fit-cover.mk-page--featured-height-large .mk-page__thumb {
	height: 70vh;
}

.mk-single--featured-fit-cover.mk-single--featured-height-none .mk-single__thumb,
.mk-page--featured-fit-cover.mk-page--featured-height-none .mk-page__thumb {
	height: auto;
}

.mk-single--featured-fit-cover.mk-single--featured-height-none .mk-single__thumb img,
.mk-page--featured-fit-cover.mk-page--featured-height-none .mk-page__thumb img {
	height: auto;
}

/* ── Featured image radius ───────────────────────────── */

.mk-single--featured-radius-inherit .mk-single__thumb img,
.mk-page--featured-radius-inherit .mk-page__thumb img {
	border-radius: var(--mk-radius);
}

.mk-single--featured-radius-none .mk-single__thumb img,
.mk-page--featured-radius-none .mk-page__thumb img {
	border-radius: 0;
}

.mk-single--featured-radius-sm .mk-single__thumb img,
.mk-page--featured-radius-sm .mk-page__thumb img {
	border-radius: 4px;
}

.mk-single--featured-radius-md .mk-single__thumb img,
.mk-page--featured-radius-md .mk-page__thumb img {
	border-radius: var(--mk-radius);
}

.mk-single--featured-radius-lg .mk-single__thumb img,
.mk-page--featured-radius-lg .mk-page__thumb img {
	border-radius: 12px;
}

/* ── 7. Content flow + responsive embed safety ────────────── */
/*
   v0.1.5 — proper aspect-ratio handling for video embeds.

   Two scenarios to cover:

   (A) Gutenberg embed block — WordPress wraps in
       <figure class="wp-block-embed wp-has-aspect-ratio">
       and core block library CSS uses absolute positioning to
       enforce the right ratio. We must NOT fight that.

   (B) Raw oEmbed / classic editor / pasted iframe HTML — comes
       out as <iframe width="500" height="281">. With only
       max-width:100% the iframe gets narrower but keeps fixed
       height → flat / wrong proportion.

   Fix: force aspect-ratio: 16/9 on YouTube and Vimeo iframes
   inside our content wrappers, but only when WP hasn't already
   applied wp-has-aspect-ratio. Targeted by [src*=...] so we do
   not affect Google Maps, Twitter, or other non-video iframes.
*/

.mk-single__content > * + *,
.mk-page__content > * + * {
	margin-top: var(--mk-space-md);
}

.mk-single__content a,
.mk-page__content a {
	text-decoration: underline;
}

.mk-single__pages,
.mk-page__pages {
	margin-top: var(--mk-space-lg);
	font-size: 0.875rem;
}

/* Block-embed wrappers: ensure they never overflow. */
.mk-single__content .wp-block-embed,
.mk-page__content .wp-block-embed {
	margin-block: var(--mk-space-md);
	max-width: 100%;
}

.mk-single__content .wp-block-embed__wrapper,
.mk-page__content .wp-block-embed__wrapper {
	max-width: 100%;
}

/* Generic safety for raw <iframe> / <video> in content. */
.mk-single__content iframe,
.mk-page__content iframe,
.mk-single__content video,
.mk-page__content video {
	max-width: 100%;
	display: block;
	margin-inline: auto;
	border: 0;
}

/* Aspect-ratio fallback for video iframes — only YouTube/Vimeo. */
.mk-single__content iframe[src*="youtube"],
.mk-single__content iframe[src*="youtu.be"],
.mk-single__content iframe[src*="vimeo"],
.mk-page__content iframe[src*="youtube"],
.mk-page__content iframe[src*="youtu.be"],
.mk-page__content iframe[src*="vimeo"] {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}

/* If WordPress already wrapped the embed with wp-has-aspect-ratio,
   defer to WP's positioning trick. */
.mk-single__content .wp-has-aspect-ratio iframe,
.mk-page__content .wp-has-aspect-ratio iframe {
	aspect-ratio: auto;
	height: 100%;
	width: 100%;
}

/* ── 8. Footer / tags row (below content) ─────────────────── */

.mk-single__footer {
	margin-top: var(--mk-space-xl);
	padding-top: var(--mk-space-md);
	border-top: 1px solid var(--mk-color-border);
}

.mk-single__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 6px;
	font-size: 0.875rem;
	color: var(--mk-color-muted);
	line-height: 1.5;
}

/* ── 9. Comments (aligned with content) ───────────────────── */

.mk-widget-area--placement-below-content {
	margin-top: var(--mk-space-xl);
}

.mk-comments {
	margin-top: var(--mk-space-xl);
	padding-top: var(--mk-space-lg);
	border-top: 1px solid var(--mk-color-border);
}

.mk-comments__title {
	font-size: 1.25rem;
	margin: 0 0 var(--mk-space-lg);
}

.mk-comments__list {
	list-style: none;
	margin: 0 0 var(--mk-space-xl);
	padding: 0;
}

.mk-comments__list li.comment,
.mk-comments__list li.pingback,
.mk-comments__list li.trackback {
	padding: var(--mk-space-md) 0;
	border-bottom: 1px solid var(--mk-color-border);
}

.mk-comments__list li.comment:last-child {
	border-bottom: 0;
}

.mk-comments__list .children {
	list-style: none;
	margin-top: var(--mk-space-md);
	margin-left: var(--mk-space-md);
	padding-left: var(--mk-space-md);
	border-left: 2px solid var(--mk-color-border);
}

.mk-comments__list .comment-author {
	font-weight: 600;
	margin-bottom: var(--mk-space-xs);
}

.mk-comments__list .comment-author img.avatar {
	border-radius: 50%;
	margin-right: var(--mk-space-sm);
	vertical-align: middle;
}

.mk-comments__list .comment-meta {
	font-size: 0.8125rem;
	color: var(--mk-color-muted);
	margin-bottom: var(--mk-space-sm);
}

.mk-comments__list .comment-meta a {
	color: inherit;
	text-decoration: none;
}

.mk-comments__list .reply {
	margin-top: var(--mk-space-sm);
	font-size: 0.875rem;
}

.mk-comments__closed {
	color: var(--mk-color-muted);
	font-style: italic;
	margin-bottom: var(--mk-space-lg);
}

/* ── 10. Comment form ─────────────────────────────────────── */

.comment-respond {
	margin-top: var(--mk-space-lg);
}

.comment-respond .comment-reply-title {
	font-size: 1.125rem;
	margin: 0 0 var(--mk-space-md);
}

.comment-form p {
	margin: 0 0 var(--mk-space-md);
}

.comment-form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: var(--mk-space-xs);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	max-width: 100%;
	padding: var(--mk-space-sm);
	border: 1px solid var(--mk-color-border);
	border-radius: var(--mk-radius);
	font: inherit;
	background: var(--mk-color-bg);
	color: var(--mk-color-text);
	box-sizing: border-box;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	outline: 2px solid var(--mk-color-focus);
	outline-offset: 1px;
	border-color: var(--mk-color-focus);
}

.comment-form textarea {
	min-height: 8rem;
	resize: vertical;
	line-height: 1.5;
}

.comment-form .form-submit {
	margin-top: var(--mk-space-md);
}

.comment-form .submit {
	display: inline-block;
	padding: var(--mk-space-sm) var(--mk-space-lg);
	background: var(--mk-color-link);
	color: var(--mk-color-text-on-accent);
	border: 0;
	border-radius: var(--mk-radius);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.comment-form .submit:hover,
.comment-form .submit:focus-visible {
	background: var(--mk-color-link-hover);
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--mk-space-sm);
	font-size: 0.875rem;
}

.comment-form .comment-form-cookies-consent input[type="checkbox"] {
	margin-top: 0.25rem;
	flex-shrink: 0;
}

.comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
}

/* ── 11. Mobile-only refinements ──────────────────────────── */

@media (max-width: 480px) {
	.mk-comments__list .children {
		margin-left: var(--mk-space-sm);
		padding-left: var(--mk-space-sm);
	}
}

/* ── 12. Comment styling modifiers (Phase 2D) ──────────────── */

/* -- List style: boxed ---------------------------------------- */
.mk-comments--list-boxed .mk-comments__list li.comment,
.mk-comments--list-boxed .mk-comments__list li.pingback,
.mk-comments--list-boxed .mk-comments__list li.trackback {
	background: var(--mk-color-surface);
	border: 1px solid var(--mk-color-border);
	border-bottom: 1px solid var(--mk-color-border);
	padding: var(--mk-space-md);
	margin-bottom: var(--mk-space-sm);
}

/* -- List style: minimal -------------------------------------- */
.mk-comments--list-minimal .mk-comments__list li.comment,
.mk-comments--list-minimal .mk-comments__list li.pingback,
.mk-comments--list-minimal .mk-comments__list li.trackback {
	border-bottom: none;
	padding: var(--mk-space-sm) 0;
}

.mk-comments--list-minimal .mk-comments__list .children {
	border-left-color: var(--mk-color-border-light, var(--mk-color-border));
	border-left-width: 1px;
}

/* -- Form style: boxed ---------------------------------------- */
.mk-comments--form-boxed .comment-respond {
	background: var(--mk-color-surface);
	border: 1px solid var(--mk-color-border);
	padding: var(--mk-space-lg);
}

/* -- Form style: minimal -------------------------------------- */
.mk-comments--form-minimal .comment-respond {
	border-top: none;
	padding-top: 0;
}

.mk-comments--form-minimal .comment-form label {
	font-weight: 400;
	color: var(--mk-color-muted);
}

/* -- Avatar size ---------------------------------------------- */
.mk-comments--avatar-sm .comment-author img.avatar {
	width: 32px;
	height: 32px;
}

.mk-comments--avatar-md .comment-author img.avatar {
	width: 48px;
	height: 48px;
}

.mk-comments--avatar-lg .comment-author img.avatar {
	width: 64px;
	height: 64px;
}

/* -- Spacing -------------------------------------------------- */
.mk-comments--spacing-compact .mk-comments__list li.comment,
.mk-comments--spacing-compact .mk-comments__list li.pingback,
.mk-comments--spacing-compact .mk-comments__list li.trackback {
	padding-top: var(--mk-space-sm);
	padding-bottom: var(--mk-space-sm);
}

.mk-comments--spacing-spacious .mk-comments__list li.comment,
.mk-comments--spacing-spacious .mk-comments__list li.pingback,
.mk-comments--spacing-spacious .mk-comments__list li.trackback {
	padding-top: var(--mk-space-lg);
	padding-bottom: var(--mk-space-lg);
}

/* -- Radius --------------------------------------------------- */
.mk-comments--radius-none .mk-comments__list li.comment,
.mk-comments--radius-none .mk-comments__list li.pingback,
.mk-comments--radius-none .mk-comments__list li.trackback,
.mk-comments--radius-none .comment-respond { border-radius: 0; }

.mk-comments--radius-sm .mk-comments__list li.comment,
.mk-comments--radius-sm .mk-comments__list li.pingback,
.mk-comments--radius-sm .mk-comments__list li.trackback,
.mk-comments--radius-sm .comment-respond { border-radius: 4px; }

.mk-comments--radius-md .mk-comments__list li.comment,
.mk-comments--radius-md .mk-comments__list li.pingback,
.mk-comments--radius-md .mk-comments__list li.trackback,
.mk-comments--radius-md .comment-respond { border-radius: var(--mk-radius); }

.mk-comments--radius-lg .mk-comments__list li.comment,
.mk-comments--radius-lg .mk-comments__list li.pingback,
.mk-comments--radius-lg .mk-comments__list li.trackback,
.mk-comments--radius-lg .comment-respond { border-radius: 12px; }

/* -- Shadow --------------------------------------------------- */
.mk-comments--shadow-soft .mk-comments__list li.comment,
.mk-comments--shadow-soft .mk-comments__list li.pingback,
.mk-comments--shadow-soft .mk-comments__list li.trackback {
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.mk-comments--shadow-medium .mk-comments__list li.comment,
.mk-comments--shadow-medium .mk-comments__list li.pingback,
.mk-comments--shadow-medium .mk-comments__list li.trackback {
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.mk-comments--shadow-soft .comment-respond {
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.mk-comments--shadow-medium .comment-respond {
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}