/*
Theme Name: JJ Bay Editorial
Theme URI: https://jjbay.com
Description: Editorial child theme for JJ Bay, a hyperlocal Bay Area community newsletter. Built on Twenty Twenty-Five. Combines a hyperlocal community-noticeboard structure with restrained, magazine-style typography and photography.
Author: JJ Bay
Template: twentytwentyfive
Version: 1.1.0
Text Domain: jjbay-editorial
*/

/* ------------------------------------------------------------------
   Most visual design lives in theme.json (palette, type, spacing).
   This file covers things theme.json can't express: captions, the
   byline, the disclosure note, pull-quote sizing, ad-slot chrome,
   and small layout fixes for the homepage/category grids.
------------------------------------------------------------------- */

/* Byline */
.jjbay-byline {
	font-family: var(--wp--preset--font-family--meta);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.78rem;
	color: var(--wp--preset--color--ink-soft);
	margin-top: 0.25em;
	margin-bottom: 1.75em;
}

/* Section subheads inside long-form articles */
.jjbay-subhead {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-style: italic;
	color: var(--wp--preset--color--rust);
	margin-top: 2.25em;
	margin-bottom: 0.75em;
}

/* Single-post hero image (templates/single.html): no custom sizing CSS
   needed. The block carries aspectRatio:3/2 — the same landscape-friendly
   ratio used for the homepage hero and every grid card — so core sets
   `aspect-ratio:3/2;width:100%;object-fit:cover` on the img itself. At the
   block's full wide-aligned width (1100px) that's 733px tall, a normal
   hero height, so unlike the earlier 4:5 portrait ratio this needs no
   width cap to stay a sane size — a previous version of this rule capped
   the img's width to keep a portrait crop from rendering 1375px tall;
   that's no longer needed now that the ratio itself is landscape. */

/* Site-wide fix, not just this template: the host's image-optimization
   CSS (SiteGround's — injected inline, not part of this theme) carries a
   blanket rule `.post-thumbnail img, .wp-post-image { object-fit: contain
   !important; height: auto !important; }`. wp-post-image is the class core
   puts on every featured image everywhere, so that rule silently overrides
   the object-fit:cover every aspectRatio-cropped featured image relies on
   (homepage hero, homepage/category grid cards, and the single-post hero
   above) — confirmed via computed styles, all of them were rendering
   "contain" instead of "cover". Rather than cropping to fill its box, the
   photo was letterboxing inside it at its own natural proportions, leaving
   blank space inside the image area — that was the real cause of the gap
   above the "From the Neighborhood" label reported on this post, not a
   margin/padding issue. Fixed here for every context at once, since the
   underlying bug is identical everywhere, by out-specificity-ing that
   rule back to the intended crop (their selector is a single class,
   .wp-post-image alone; this one is more specific, so it wins despite
   both being !important). */
.wp-block-post-featured-image img.wp-post-image {
	object-fit: cover !important;
}

/* Photo captions with credit line, e.g. "Photograph: Jaishree Viswanathan." */
figure.wp-block-image figcaption,
.wp-block-post-featured-image figcaption {
	font-family: var(--wp--preset--font-family--meta);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
	font-style: normal;
	text-align: left;
	margin-top: 0.65em;
	padding-top: 0;
	border-top: none;
}

/* Pull-quote: short punchy lines rendered as large display type, not body text */
.wp-block-pullquote {
	border-top: 1px solid var(--wp--preset--color--hairline);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding: 2em 0;
	margin: 2.5em 0;
}
.wp-block-pullquote blockquote {
	margin: 0;
}
.wp-block-pullquote p {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-style: normal;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}
.wp-block-pullquote cite {
	font-family: var(--wp--preset--font-family--meta);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink-soft);
	font-style: normal;
}

/* Disclosure note at end of a review/article */
.jjbay-disclosure {
	font-family: var(--wp--preset--font-family--meta);
	font-size: 0.85rem;
	font-style: italic;
	color: var(--wp--preset--color--ink-soft);
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: 1em;
	margin-top: 2.5em;
}

/* Eyebrow / category label */
.jjbay-eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--meta);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--rust);
	margin-bottom: 0.5em;
}
.jjbay-eyebrow.is-sage { color: var(--wp--preset--color--sage); }

/* Ad slots — clearly labelled placeholders, quiet chrome so they don't
   read as banner ads. Swap the inner Custom HTML block for real ad code
   once a plugin (e.g. Ad Inserter / AdRotate) is installed. */
.jjbay-ad-slot {
	background: var(--wp--preset--color--paper-2);
	border: 1px dashed var(--wp--preset--color--hairline);
	padding: 1.25em;
	text-align: center;
}
.jjbay-ad-slot__label {
	font-family: var(--wp--preset--font-family--meta);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.68rem;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 0.5em;
	display: block;
}
.jjbay-ad-slot--sidebar { min-height: 250px; display: flex; flex-direction: column; justify-content: center; }
.jjbay-ad-slot--homepage { min-height: 250px; display: flex; flex-direction: column; justify-content: center; }
/* jjbay_inject_in_article_ad() (functions.php) auto-inserts this slot after
   the 3rd paragraph of every post's content — it sits directly in the
   article's text flow, so any alignleft/alignright image earlier in that
   same post (a float) can still be occupying horizontal space when this
   block starts. Without clear:both the ad's own box (not reflowable text,
   so it doesn't shrink/wrap around the float the way a paragraph's lines
   do) renders wherever the float physically leaves it — which can mean
   overlapping the float's tail end — instead of always starting on a
   fresh line below it. clear:both forces it below any float, left or
   right, regardless of which post or how many images precede it. */
.jjbay-ad-slot--in-article { margin: 2.5em 0; clear: both; }

/* An ad-slot column sits inside a flexbox row (the homepage/single/category
   68/32 layout). Flex items default to min-width:auto, which lets a large
   intrinsic image force the column wider than its flex-basis and overflow
   the page. Scope the fix to just the column holding an ad slot so no other
   layout is touched. */
.wp-block-column:has(.jjbay-ad-slot) {
	min-width: 0;
	overflow: hidden;
}

/* Once a real ad image is configured (Appearance > Customize > JJ Bay Ad
   Slots), the slot drops the "TODO" placeholder chrome — a real ad
   shouldn't look like an unfinished box — and the image keeps its own
   natural aspect ratio (no object-fit) so nothing is ever cropped or
   stretched, whatever shape the ad happens to be. */
.jjbay-ad-slot--filled {
	background: none;
	border-style: solid;
	border-color: var(--wp--preset--color--hairline);
	padding: 0.75em;
}
.jjbay-ad-slot__trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
}
.jjbay-ad-slot__image {
	max-width: 100%;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
/* Thumbnail caps — the image is served at 'large' size already, but a
   tall/portrait ad can still be far taller than the sidebar rail is wide.
   Capping height (with width:100%/height:auto above) shrinks it
   proportionally with no distortion and no cropping. */
.jjbay-ad-slot--sidebar .jjbay-ad-slot__image,
.jjbay-ad-slot--homepage .jjbay-ad-slot__image {
	max-height: 320px;
	width: auto;
	object-fit: contain;
}
.jjbay-ad-slot--in-article .jjbay-ad-slot__image {
	max-height: 480px;
	width: auto;
	object-fit: contain;
}

/* Lightbox overlay: click an ad thumbnail to see it at full resolution. */
.jjbay-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vh 5vw;
	background: rgba(20, 16, 12, 0.82);
}
.jjbay-lightbox[hidden] { display: none; }
.jjbay-lightbox__image {
	max-width: 100%;
	max-height: 100%;
	display: block;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	background: var(--wp--preset--color--paper, #fff);
}
.jjbay-lightbox__close {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: none;
	background: rgba(255, 255, 255, 0.95);
	color: var(--wp--preset--color--ink, #1a1a1a);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.jjbay-lightbox__close:hover,
.jjbay-lightbox__close:focus-visible {
	background: #fff;
}
body.jjbay-lightbox-open {
	overflow: hidden;
}

/* Homepage grid card meta */
.jjbay-card .wp-block-post-title a { text-decoration: none; }
.jjbay-card .wp-block-post-title { font-size: 1.15rem; line-height: 1.3; }
.jjbay-card time { font-family: var(--wp--preset--font-family--meta); font-size: 0.75rem; color: var(--wp--preset--color--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }

/* Featured story on homepage */
.jjbay-featured .wp-block-post-title { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; }