/* ==========================================================================
   CelebnMusic247 Restyle v1.0.2
   Implements: rebrand-design-spec-LOCKED.md (Peter, Oct 20, 2026).
   The FINAL LOGO TREATMENT section of the spec supersedes earlier blend
   notes. Hard exclusions honored throughout: no dark theme, no green
   identity (volt/lime/emerald appear ONLY as their assigned accents),
   no orange base (fire orange ONLY on the Concert Calendar strip item),
   no hot-pink masthead, no slate.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SPEC: Brand tokens. Wordmark colors are the FINAL LOGO TREATMENT:
   "Celebn" #14161C, "Music" #B8860B, "247" #FF1493, tagline grey #8A8199.
   Toned-down black: graphite-plum #37334A (strip/footer/Boards),
   deeper plum #262238 (247 Report band). Brand red #E01A22 = JUST IN.
   Lime #A6E22E = system spark ONLY (slider FEATURED chip, 247 Boards
   header, seams). Desk colors per the flavor system in the spec.
   -------------------------------------------------------------------------- */
:root {
	--c247-ink: #14161c;
	--c247-gold: #b8860b;
	--c247-pink247: #ff1493;
	--c247-tagline: #8a8199;
	--c247-plum: #37334a;
	--c247-plum-deep: #262238;
	--c247-brand-red: #e01a22;
	--c247-studio-pink: #e11584;
	--c247-lime: #a6e22e;
	--c247-surface: #ffffff;
	--c247-surface-soft: #fdfcfa;
	--c247-music: #a31621;
	--c247-celebrity: #ff2e93;
	--c247-movies: #7b2fbe;
	--c247-reality: #c6f232;
	--c247-sports: #1668d2;
	--c247-health: #0e9f6e;
	--c247-books: #2dd4bf;
	--c247-concert: #ff5e1a;
	--c247-desk: var(--c247-brand-red); /* neutral default; body class overrides */
}

/* --------------------------------------------------------------------------
   SPEC: Base look — "light, white reading surface, ONE-COLUMN story
   stream with a photo on every post. No dark flip, no two-column grid."
   This plugin never restructures the stream; it only guarantees the
   light surface.
   -------------------------------------------------------------------------- */
body {
	background: var(--c247-surface-soft);
	color: var(--c247-ink);
}
.site-content,
.content-area {
	background: var(--c247-surface);
}

/* --------------------------------------------------------------------------
   SPEC: Logo size (Peter, Oct 20 ~10:38 PM) — "The header logo renders
   BIG — masthead-dominant, spanning most of the header width... On
   phones it scales down proportionally so it never eats the screen."
   Explicit logo-size rule: the plugin also ships the wordmark on a
   larger canvas (see logo-kit). Selectors cover WordPress's custom-logo
   markup plus BlogHash/Blogdash branding wrappers.
   -------------------------------------------------------------------------- */
.site-branding,
.bloghash-branding,
.header-logo {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.custom-logo-link {
	display: block;
	line-height: 0;
}
img.custom-logo,
.site-branding img.custom-logo,
.bloghash-logo img,
.site-logo img {
	width: min(880px, 94%) !important;
	max-width: 880px !important;
	height: auto !important;
	max-height: none !important;
	margin: 10px auto 6px;
}
.site-title,
.site-description {
	text-align: center;
}
@media (max-width: 640px) {
	img.custom-logo,
	.site-branding img.custom-logo,
	.bloghash-logo img,
	.site-logo img {
		width: 94% !important;
		margin: 8px auto 4px;
	}
}

/* --------------------------------------------------------------------------
   SPEC: Category strip — graphite-plum bar (#37334A replaces pure
   black), NINE items in ONE ROW that NEVER wraps; on phone widths the
   strip stays one row as a sideways-swipe row. Gold star separators
   (#B8860B). HOME first in WHITE. Desk colors per item; BOOKS teal
   #2DD4BF; CONCERT CALENDAR fire orange #FF5E1A (the only orange).
   Applies to: the primary menu restyled by the plugin
   (.c247-strip-menu) and the [c247_strip] shortcode (.c247-strip).
   -------------------------------------------------------------------------- */
.c247-strip-menu,
.c247-strip {
	background: linear-gradient(180deg, #443f5c 0%, var(--c247-plum) 55%, #2e2a40 100%);
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(38, 34, 56, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
	padding: 4px 10px;
}
.c247-strip-menu,
.c247-strip .c247-strip-list {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	justify-content: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.c247-strip-menu::-webkit-scrollbar,
.c247-strip .c247-strip-list::-webkit-scrollbar {
	display: none;
}
.c247-strip-menu > li,
.c247-strip .c247-strip-list > li {
	flex: 0 0 auto;
	position: relative;
	margin: 0;
}
/* Gold star separator between items (never before the first). */
.c247-strip-menu > li + li::before,
.c247-strip .c247-strip-list > li + li::before {
	content: "\2605";
	color: var(--c247-gold);
	font-size: 10px;
	margin: 0 7px;
	vertical-align: middle;
}
.c247-strip-menu > li > a,
.c247-strip .c247-strip-list > li > a {
	display: inline-block;
	font-weight: 800;
	font-size: 13.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	padding: 7px 2px;
}
/* Per-item spec colors. */
.c247-mi-home > a       { color: #ffffff !important; }
.c247-mi-celebrity > a  { color: var(--c247-celebrity) !important; }
.c247-mi-movies > a     { color: #b07fe8 !important; } /* spec purple #7B2FBE lightened one step so it reads on the plum bar; full #7B2FBE is used on white surfaces below */
.c247-mi-music > a      { color: #ff8f98 !important; } /* spec dark red #A31621 lightened for the dark bar; full #A31621 on white surfaces below */
.c247-mi-sports > a     { color: #7db4f5 !important; } /* spec blue #1668D2 lightened for the dark bar; full #1668D2 on white below */
.c247-mi-reality > a    { color: var(--c247-reality) !important; }
.c247-mi-health > a     { color: #4ade9e !important; } /* spec emerald #0E9F6E lightened for the dark bar; full #0E9F6E on white below */
.c247-mi-books > a      { color: var(--c247-books) !important; }
.c247-mi-concert > a    { color: var(--c247-concert) !important; }
.c247-strip-menu > li > a:hover,
.c247-strip .c247-strip-list > li > a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 640px) {
	.c247-strip-menu > li > a,
	.c247-strip .c247-strip-list > li > a {
		font-size: 12.5px;
	}
	.c247-strip-menu,
	.c247-strip {
		border-radius: 0;
		justify-content: flex-start;
	}
}

/* --------------------------------------------------------------------------
   SPEC: 247 REPORT BAND — permanent promo band ABOVE the homepage
   slider: #262238 band, studio pink #E11584 accents, "JUST IN — The 247
   Report" wordmark, play button + WATCH pill, "New episode every
   morning", linking to YouTube @Celebnmusic247. Rendered by the
   [report247] shortcode.
   -------------------------------------------------------------------------- */
.c247-report-band {
	display: flex;
	align-items: center;
	gap: 16px;
	background: linear-gradient(90deg, var(--c247-plum-deep) 0%, #322b4d 70%, var(--c247-plum-deep) 100%);
	border-top: 2px solid var(--c247-lime); /* lime as seam spark, per spec */
	border-bottom: 2px solid var(--c247-studio-pink);
	border-radius: 14px;
	padding: 12px 18px;
	margin: 14px auto;
	max-width: 1180px;
	box-shadow: 0 3px 10px rgba(38, 34, 56, .35);
}
.c247-report-play {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--c247-studio-pink);
	color: #fff !important;
	font-size: 18px;
	line-height: 46px;
	text-align: center;
	text-decoration: none;
	box-shadow: inset 0 2px 3px rgba(255, 255, 255, .45), 0 2px 6px rgba(0, 0, 0, .35);
}
.c247-report-text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	flex: 1 1 auto;
}
.c247-report-kicker {
	background: var(--c247-brand-red);
	color: #fff;
	font-weight: 900;
	font-size: 12px;
	letter-spacing: .12em;
	padding: 3px 8px;
	border-radius: 6px;
}
.c247-report-title {
	color: #fff;
	font-weight: 900;
	font-size: 22px;
	letter-spacing: .02em;
}
.c247-report-sub {
	color: #cfc9de;
	font-size: 13.5px;
	width: 100%;
}
.c247-report-watch {
	flex: 0 0 auto;
	background: var(--c247-studio-pink);
	color: #fff !important;
	font-weight: 900;
	letter-spacing: .1em;
	font-size: 13px;
	text-decoration: none;
	padding: 9px 20px;
	border-radius: 999px;
	box-shadow: inset 0 2px 3px rgba(255, 255, 255, .45), 0 2px 6px rgba(0, 0, 0, .3);
}
.c247-report-watch:hover,
.c247-report-play:hover {
	filter: brightness(1.12);
}
@media (max-width: 640px) {
	.c247-report-title { font-size: 18px; }
	.c247-report-band { gap: 10px; padding: 10px 12px; }
}

/* --------------------------------------------------------------------------
   SPEC: JUST IN block — "solid RED block bug (white text), Mock A
   treatment — jumps first." Brand red #E01A22. [c247_justin] shortcode
   or any element with .c247-justin.
   -------------------------------------------------------------------------- */
.c247-justin {
	display: inline-block;
	background: var(--c247-brand-red);
	color: #fff !important;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 8px;
	box-shadow: inset 0 2px 3px rgba(255, 255, 255, .35), 0 2px 5px rgba(224, 26, 34, .35);
}

/* --------------------------------------------------------------------------
   SPEC: Candy gloss finish throughout — pill-shaped category tags,
   rounded corners, glossy gradients. Post cards keep the one-column
   stream; they just get the finish.
   -------------------------------------------------------------------------- */
article.post,
.bloghash-post,
.entry {
	border-radius: 16px;
}
.cat-links a,
.entry-categories a,
.post-categories a,
a[rel="category tag"] {
	display: inline-block;
	border-radius: 999px;
	padding: 3px 12px;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .03em;
	color: #fff !important;
	text-decoration: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 55%), var(--c247-desk);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.tags-links a,
.tagcloud a {
	border-radius: 999px;
}
button,
input[type="submit"],
.wp-block-button__link {
	border-radius: 999px;
}

/* --------------------------------------------------------------------------
   SPEC: Slider — featured SLIDER of 5 top stories at the top; lime
   #A6E22E FEATURED chip is the system spark here. Selectors cover the
   theme slider + common featured-label markup; the chip styling itself
   is available as .c247-featured-chip for any label element.
   -------------------------------------------------------------------------- */
.c247-featured-chip,
.featured-chip,
.slider-featured-label {
	display: inline-block;
	background: linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 55%), var(--c247-lime);
	color: var(--c247-ink) !important;
	font-weight: 900;
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}

/* --------------------------------------------------------------------------
   SPEC: Right rail — ADS ONLY (300x250 + sticky 300x600) plus the 247
   Boards house box. The plugin styles the rail; the ad units themselves
   come from the theme's slots/AdSense. Sticky support for a 300x600.
   247 Boards header takes the lime spark; Boards surfaces graphite-
   plum #37334A (toned-down black rule).
   -------------------------------------------------------------------------- */
#secondary .widget,
.sidebar .widget,
.bloghash-sidebar .widget {
	border-radius: 14px;
	overflow: hidden;
}
#secondary .widget:last-child,
.sidebar .widget:last-child,
.bloghash-sidebar .widget:last-child {
	position: sticky;
	top: 16px;
}
.c247-boards-box {
	background: var(--c247-surface);
	border: 1px solid #e7e3f0;
	border-radius: 14px;
	overflow: hidden;
}
.c247-boards-box .c247-boards-header,
.c247-boards-header {
	background: var(--c247-plum);
	color: var(--c247-lime);
	font-weight: 900;
	letter-spacing: .06em;
	padding: 10px 14px;
}

/* --------------------------------------------------------------------------
   SPEC: Per-category pages — "category pages AND article pages theme to
   their desk: the masthead/logo stays constant; the category band,
   slider frame, pills, byline color, headline accents, links and
   footer seam all take the desk color. Homepage mixes all six flavors."
   The plugin's body_class filter sets body.c247-desk--<desk>; each rule
   below only re-points the --c247-desk variable. Full-strength desk
   colors are used on white surfaces (pills in the gloss section above
   read var(--c247-desk)).
   -------------------------------------------------------------------------- */
body.c247-desk--music     { --c247-desk: var(--c247-music); }
body.c247-desk--celebrity { --c247-desk: var(--c247-celebrity); }
body.c247-desk--movies    { --c247-desk: var(--c247-movies); }
body.c247-desk--reality   { --c247-desk: var(--c247-reality); }
body.c247-desk--sports    { --c247-desk: var(--c247-sports); }
body.c247-desk--health    { --c247-desk: var(--c247-health); }
body.c247-desk--books     { --c247-desk: var(--c247-books); }

/* Category band / archive header takes the desk color. */
body.c247-desk .page-header,
body.c247-desk .archive-header,
body.c247-desk .category-header {
	border-top: 4px solid var(--c247-desk);
	border-bottom: 2px solid var(--c247-desk);
}
/* Slider frame takes the desk color on desk pages. */
body.c247-desk .bloghash-slider,
body.c247-desk .featured-slider,
body.c247-desk .slider-frame {
	border: 3px solid var(--c247-desk);
	border-radius: 16px;
}
/* Byline color takes the desk color. */
body.c247-desk .byline,
body.c247-desk .byline a,
body.c247-desk .entry-meta .author a,
body.c247-desk .posted-by a {
	color: var(--c247-desk);
}
/* Headline accents on desk pages. */
body.c247-desk .entry-title a:hover,
body.c247-desk .post-title a:hover {
	color: var(--c247-desk);
}
body.c247-desk .entry-title {
	text-decoration-color: var(--c247-desk);
}
/* In-content links take the desk color on desk pages. */
body.c247-desk .entry-content a {
	color: var(--c247-desk);
}
/* Pill colors by the POST's own category too (post_class always carries
   category slugs) — this is what lets the homepage "mix all six
   flavors" card by card. */
.post.category-music-news .cat-links a,
.post.category-music-news a[rel="category tag"] { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%), var(--c247-music); }
.post.category-celebrity-news .cat-links a,
.post.category-celebrity-news a[rel="category tag"] { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%), var(--c247-celebrity); }
.post.category-movie-news .cat-links a,
.post.category-movie-news a[rel="category tag"] { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%), var(--c247-movies); }
.post.category-reality-tv-news .cat-links a,
.post.category-reality-tv-news a[rel="category tag"] { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%), var(--c247-reality); color: var(--c247-ink) !important; }
.post.category-sports-news .cat-links a,
.post.category-sports-news a[rel="category tag"] { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%), var(--c247-sports); }
.post.category-health-news .cat-links a,
.post.category-health-news a[rel="category tag"] { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%), var(--c247-health); }
.post.category-books .cat-links a,
.post.category-books a[rel="category tag"] { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%), var(--c247-books); color: var(--c247-ink) !important; }

/* --------------------------------------------------------------------------
   SPEC: Footer — graphite-plum #37334A (toned-down black rule); the
   footer seam takes the desk color on desk pages (lime seam on the
   homepage default via the brand seam below).
   -------------------------------------------------------------------------- */
.site-footer,
.bloghash-footer,
footer.site-footer {
	background: var(--c247-plum);
	color: #e9e5f5;
	border-top: 4px solid var(--c247-desk);
}
.site-footer a,
.bloghash-footer a {
	color: #ffffff;
}
body:not(.c247-desk) .site-footer,
body:not(.c247-desk) .bloghash-footer {
	border-top: 4px solid var(--c247-lime); /* lime seam = system spark */
}

/* ==========================================================================
   v1.0.1 — FIELD FIXES (Peter's report, Oct 23, 2026)
   1) PINK BACKGROUND: the site's Customizer carries a leftover custom
      background color (#e070b5 pink) that WordPress prints as
      body.custom-background and that outranks the base rule above.
      The design background is the warm near-white surface — enforce it
      on the exact selector WordPress uses, image included.
   2) PHONE + TABLET FORMATTING: the v1.0.0 sheet only carried a 640px
      phone breakpoint. Below: overflow guards, media that can never
      exceed the screen, a tablet band (641–1024px), and phone rules
      for the Report band so nothing crushes or scrolls sideways.
   ========================================================================== */
body.custom-background {
	background-color: var(--c247-surface-soft) !important;
	background-image: none !important;
}

/* Nothing may push the page wider than the screen. `clip` (not hidden)
   is used so the sticky right-rail ad keeps working. */
html,
body {
	overflow-x: clip;
}
img,
video,
embed,
object {
	max-width: 100%;
}
iframe {
	max-width: 100%;
}
.entry-content {
	overflow-wrap: break-word;
}
.entry-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ------------------------------ TABLET ------------------------------ */
@media (min-width: 641px) and (max-width: 1024px) {
	/* Strip: keep ONE row, swipe sideways instead of crushing. */
	.c247-strip-menu,
	.c247-strip .c247-strip-list {
		justify-content: flex-start;
		overflow-x: auto;
	}
	.c247-strip-menu > li > a,
	.c247-strip .c247-strip-list > li > a {
		font-size: 12.5px;
		padding: 7px 1px;
	}
	.c247-strip-menu > li + li::before,
	.c247-strip .c247-strip-list > li + li::before {
		margin: 0 5px;
	}
	/* Wordmark: full masthead presence, never wider than the screen. */
	img.custom-logo,
	.site-branding img.custom-logo,
	.bloghash-logo img,
	.site-logo img {
		width: min(620px, 92%) !important;
	}
	/* Report band: a little tighter so it sits cleanly at this width. */
	.c247-report-band {
		padding: 11px 14px;
		margin: 12px 10px;
		gap: 12px;
	}
	.c247-report-title {
		font-size: 19px;
	}
	/* Story cards breathe at tablet width. */
	article.post,
	.bloghash-post,
	.entry {
		margin-left: 6px;
		margin-right: 6px;
	}
}

/* ------------------------------- PHONE ------------------------------ */
@media (max-width: 640px) {
	/* Report band stacks: play + text on the first row, WATCH pill
	   drops to its own full-width row instead of crushing the text. */
	.c247-report-band {
		flex-wrap: wrap;
		margin: 10px 8px;
		border-radius: 12px;
	}
	.c247-report-play {
		width: 38px;
		height: 38px;
		line-height: 38px;
		font-size: 15px;
	}
	.c247-report-text {
		flex: 1 1 200px;
	}
	.c247-report-title {
		font-size: 17px;
	}
	.c247-report-sub {
		font-size: 12.5px;
	}
	.c247-report-watch {
		flex: 1 1 100%;
		text-align: center;
		padding: 9px 12px;
	}
	/* Story cards use the full phone width. */
	article.post,
	.bloghash-post,
	.entry {
		border-radius: 12px;
		margin-left: 0;
		margin-right: 0;
	}
	/* Category pills stay tappable but compact. */
	.cat-links a,
	.entry-categories a,
	.post-categories a,
	a[rel="category tag"] {
		font-size: 11px;
		padding: 3px 10px;
	}
	/* The sticky 300x600 rail ad must not stick on phones — the rail
	   stacks below the stories there and a sticky unit traps scroll. */
	#secondary .widget:last-child,
	.sidebar .widget:last-child,
	.bloghash-sidebar .widget:last-child {
		position: static;
	}
}

/* ==========================================================================
   v1.0.2 — PER-POST COLOR LINE (Peter, Oct 23, 2026): "a line of color
   for each post so we see more of each individual colors." Every story
   card in the stream wears a 4px line across its top in its own desk's
   color (full-strength desk colors, the same ones the pills use), so
   the mixed homepage stream reads as a rotation of colors. Keyed to the
   category classes WordPress puts on each post, exactly like the pill
   rules above. SoCal Concerts posts take the concert fire orange.
   ========================================================================== */
article.post.category-celebrity-news,
.bloghash-post.category-celebrity-news { border-top: 4px solid var(--c247-celebrity); }
article.post.category-music-news,
.bloghash-post.category-music-news { border-top: 4px solid var(--c247-music); }
article.post.category-movie-news,
.bloghash-post.category-movie-news { border-top: 4px solid var(--c247-movies); }
article.post.category-reality-tv-news,
.bloghash-post.category-reality-tv-news { border-top: 4px solid var(--c247-reality); }
article.post.category-sports-news,
.bloghash-post.category-sports-news { border-top: 4px solid var(--c247-sports); }
article.post.category-health-news,
.bloghash-post.category-health-news { border-top: 4px solid var(--c247-health); }
article.post.category-books,
.bloghash-post.category-books { border-top: 4px solid var(--c247-books); }
article.post.category-socal-concerts,
.bloghash-post.category-socal-concerts { border-top: 4px solid var(--c247-concert); }