/**
 * Program Log styles — shared by the three Log page templates:
 *   - page-logs.php       (/logs/)       Hour page, for on-air DJ use.
 *   - page-logs-track.php (/logs-track/) Track page, Staff sponsor-slot view.
 *   - page-logs-week.php  (/logs-week/)  Week page, Staff 7-day view.
 *
 * Loaded only on those three templates — see kglt_enqueue_scripts()
 * in functions.php.
 *
 * Sections below are shared unless noted "Hour page only", "Track page
 * only", or "Week page only".
 */

/* ----------------------------------------
   1. Page layout (all Log pages)
-------------------------------------- */
/* box-sizing and scroll-behavior aren't inherited properties, and
   scroll-behavior needs to live on the actual document scroll root (the
   Week page's day-anchor nav relies on it for whole-page smooth scroll),
   so these two stay on body.logs-page — they don't affect the header/
   footer's own box model or scrolling. */
body.logs-page {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

/* font-family and text-align ARE inherited, so they're scoped to
   #site-content (the Log page's own content area) rather than body.
   Bug fix: these used to be set on body.logs-page directly, which made
   the header/footer — siblings of #site-content inside the same <body>
   — inherit this sans-serif font-family instead of the site's normal
   one. The ".site-header .wp-block-group" margin override below was
   removed for the same reason: that className only ever exists on Log
   pages (hardcoded by these templates' own do_blocks() call), so the
   rule only ever fired here, making the header's spacing diverge from
   every other page on the site for no reason tied to the Log content. */
body.logs-page #site-content {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
	text-align: left;
	background-color: #ece9e2;
	/* The theme adds margin-block-start to every direct child of
	   .wp-site-blocks (see style.css), which shows up as a gap between
	   the header and this page's content — the rest of the site relies
	   on that gap, but these full-bleed Log pages don't want it. */
	margin-block-start: 0;
}

/* ----------------------------------------
   1a. Playlist / "Now" nav toolbar (Hour page only)
-------------------------------------- */
.log-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* Dear DJs + Playlist toggle buttons, grouped so they stay together as
   one flex item within .log-toolbar (instead of each wrapping/spacing
   independently against the nav and text-size slider). */
.log-toolbar-buttons {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Text-size slider, shrinks/grows unchecked sponsor-message rows. */
.log-text-size {
	max-width: 400px;
	margin: 10px 0;
}

#log-text-size-range {
	width: 300px;
}

/* Prev/Now/Next hour nav buttons reuse the theme's button block style;
   the Dear DJs/Playlist toggles (Hour page) and Toggle button (Track
   page) are plain <button>s styled to match via .log-toggle-button.
   Sizes below
   are plain px, not rem: this stylesheet used to inherit an
   `html { font-size: 62.5% }` (1rem = 10px) rule from a leftover legacy
   theme <link> in the page templates' <head> (removed — it also broke
   the site header/footer, which share the root font-size). Converting
   to px keeps the exact same rendered sizes without that dependency. */
a.wp-block-button__link,
.log-toggle-button {
	background: #cd2653;
	border: none;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.0333em;
	line-height: 1.25;
	margin-right: 5px;
	opacity: 1;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.15s linear;
}

a.wp-block-button__link:hover,
.log-toggle-button:hover {
	background-color: #323232;
}

/* Track page: space before the Toggle button in the nav, replacing an
   inline style="margin-left: 2rem" that used to be on the <button>. */
.log-page-nav .log-toggle-button {
	margin-left: 20px;
}

/* "Now" button: disabled look when already viewing the current hour. */
a.wp-block-button__link.log-nav-current {
	background-color: #676767;
	color: #bdbdbd;
	pointer-events: none;
}

/* "Now" button: active/clickable look when viewing a different hour. */
a.wp-block-button__link.log-nav-current-link {
	background-color: #fff;
	border: 1px solid #676767;
	color: #e22658;
	padding: 9px 11px;
	pointer-events: auto;
}

.log-nav-current-link:hover {
	background-color: #e22658;
	color: #fff;
}

/* ----------------------------------------
   2. Log table + caption (all Log pages)
-------------------------------------- */
.logs.table {
	background: #f5efe0;
}

/* Hour page: one table per page, full-width without extra margin. */
body.logs-hour .logs.table {
	margin: 0;
	width: 980px;
}

/* Track/Week pages: wider table, centered, with breathing room
   between stacked tables (Week shows one per day). */
body.logs-track .logs.table,
body.logs-week .logs.table {
	margin: 20px auto 80px auto;
	width: 1000px;
}

/* Bug fix: background-color and font-weight below used to come ONLY
   from Jetpack Boost's inline "critical CSS" snapshot (injected at the
   very top of <head>, painted before any real stylesheet). This rule
   never declared them itself, so once Boost's temporary snapshot is
   removed after the real stylesheet takes over, the caption visibly
   lost its bold/dark look (and the 5–10px height it also cost, via
   that snapshot's padding: .5em, was NOT restored here — the tighter
   post-load spacing without that padding is the intended, permanent
   look, not a bug). Declaring them here directly makes the bold/dark
   look permanent instead of a transient first-paint artifact. #dcd7ca
   is the same neutral gray already used elsewhere as a grid-line/border
   color, so this also reuses an existing color rather than a new one —
   #232323 (.log-cap) and #555 (.log-hour, #log-clock) both clear 4.5:1
   contrast against it.

   Bug fix, part 2: the table still visibly jumped up after load even
   with the above in place, because Boost's stale snapshot ALSO sets
   `padding: .5em` (all 4 sides) on bare `caption`, and this rule used
   to declare only padding-left — top/right/bottom padding was still
   coming from that snapshot alone, so losing it still shrank the
   caption's height. Now every side is declared explicitly (all as part
   of one `padding` shorthand, not a mix with the old standalone
   padding-left) so this rule is the sole source of truth for caption
   padding from the very first paint, regardless of whether/when
   Boost's snapshot stops applying. Top/right/bottom are 0 — that's the
   tight, no-gap-to-the-toolbar layout that used to only appear after
   the snapshot dropped away; it's the intended permanent look, not a
   leftover collapse.

   Also given its own class (.log-caption, on the <caption> in all 3
   page templates) instead of a bare-tag `caption` descendant selector,
   so a future non-Log table on these pages wouldn't accidentally
   inherit this styling. */
.log-caption {
	background-color: #dcd7ca;
	font-weight: 600;
	padding: 0 0 0 7.5px;
	text-align: left;
}

/* DJ / show name, shown large in the caption. */
.log-cap {
	color: #232323;
	display: block;
	font-size: 22.5px;
	text-align: left;
}

/* Hour + date, shown in the caption. */
.log-hour {
	width: 50px;
	white-space: nowrap;
	font-size: 20px;
	color: #555;
}

/* Live clock (HH:MM:SS), updated every second by logs.js.
   color: #555, not the slightly lighter #676767 used for this element
   elsewhere — needed to clear 4.5:1 contrast against the caption's new
   permanent #dcd7ca background (see .logs caption above); #555 matches
   .log-hour's color right next to it, so it stays visually consistent. */
#log-clock {
	color: #555;
	display: block;
	font-family: Consolas, Monaco, Menlo, ui-monospace, monospace;
	font-size: 14px;
	font-weight: 100;
	margin-top: -25px;
	text-align: right;
	white-space: nowrap;
}

/* ----------------------------------------
   3. Log rows: section headers, sponsors, programs, EAS, next-hour
-------------------------------------- */

/* Grid lines between cells. */
.logs-page th,
.logs-page td {
	border-top: 1px solid #dcd7ca;
}

/* Section-header, next-hour, and footer cells all span both columns and
   share the same left inset (previously repeated as padding-left: 7.5px
   in each row type's own rule). .logs caption gets the same value but
   stays separate below since a <caption> isn't a td. */
.logs td[colspan="2"] {
	padding-left: 7.5px;
}

/* "General Sponsors (n)" / "Programs (n)" / etc. section-header rows. */
.log-row-head {
	vertical-align: bottom;
}

.log-row-head .log-row-label,
.log-row-head .log-row-info {
	padding-top: 20px;
	/* padding-left: comes from the shared td[colspan="2"] rule above. */
}

.log-row-label {
	font-size: 20px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* Sponsor-message row (General, Program, or Hour sponsor). */
.logs .log-row-sponsor {
	background-color: #fff;
}

.log-row-sponsor.log-row-legal-id { /* Top-of-hour Legal Station ID. */ }

/* Program row and its grouped Program-Sponsor row are visually joined
   with a shared border and no border between them. */
.logs .log-row-program.log-row-has-sponsor td,
.logs .log-row-sponsor.log-row-program-sponsor td {
	border-top: 4px solid #beb8a8;
	border-bottom: 4px solid #beb8a8;
}

.logs .log-row-program.log-row-has-sponsor td {
	border-bottom: none;
}

.logs .log-row-sponsor.log-row-program-sponsor td {
	border-top: none;
}

.log-row-has-sponsor .log-program-name,
.log-row-program-sponsor .log-cell-message {
	border-right: 4px solid #beb8a8;
}

.log-cell-message {
	font-size: 22.5px;
	line-height: 1.5;
}

/* Checked-off sponsor/program rows shrink; see .log-checkbox below. */
.log-row-read .log-cell-message {
	color: #747472;
	font-size: 12.5px;
	font-weight: 200;
	line-height: 1.2;
}

.log-row-read .log-cell-message mark { background-color: #eee; }

/* EAS (Emergency Alert System) weekly/monthly test row. */
.log-row-head.log-row-eas .log-row-label {
	background-color: #fff;
	color: #dc0505;
}

/* Next-hour preview row, in the table footer area of tbody. */
.log-row-next td {
	background-color: #f1eeee;
	border-top: 8px solid #d0c1c1;
	font-style: italic;
	vertical-align: top;
	padding-top: 7.5px;
}

/* Feedback link row, in <tfoot>. */
.log-row-foot .log-cell-foot {
	text-align: right;
}

/* ----------------------------------------
   4. Checkboxes (read/unread) + text-size control (Hour page)
-------------------------------------- */
.log-cell-check {
	padding: 10px;
}

/* Bug fix (layout shift, part 5): Jetpack Boost's stale critical-CSS
   snapshot (see logs.css's caption rule above for the full mechanism)
   also has its own generic `input[type=checkbox]` reset, including
   `-webkit-appearance:none;-moz-appearance:none;` and a fixed `1.5rem`
   box. An earlier version of this rule set `appearance: none` itself
   plus explicit `width`/`height`, matching the snapshot's custom look —
   but that custom look isn't wanted, so `appearance` is deliberately
   left at the browser's native default here instead. That sidesteps
   the shift a different way: native checkbox rendering doesn't depend
   on Boost's snapshot (or on this rule) for its size at all, so there's
   no longer any timing-dependent handoff to shift between. `width`/
   `height` are kept for documentation/intent but browsers ignore them
   on a native (non-appearance:none) checkbox, sizing it intrinsically
   instead. Scoped to `.logs-page` (0-2-1) purely to outrank the
   snapshot's own reset outright, so nothing here is ever contingent on
   source-order timing.

   Small follow-up: the snapshot's border (`.1rem solid #dcd7ca`) was
   still arriving late (no border, then a grey border grows the box),
   same timing dependency as everywhere else in this family of bugs.
   Declared it ourselves so it's present from the first paint — with
   `box-sizing: border-box` already set, the border draws inward and
   doesn't change the 24x24 footprint at all, so there's nothing left to
   grow into. */
.logs-page input.log-checkbox {
	box-sizing: border-box;
	width: 20px;
	height: 20px;
}

/* Checking a row marks it "read" (see .log-row-read) and shrinks it. */
.logs-page .log-checkbox:checked {
	accent-color: #f6f1e5;
	transform: scale(0.75);
}

.log-row-read .log-cell-check {
	padding: 5px 10px;
}

.log-program-name em {
	margin-right: 15px;
}

/* Inline detail/info text next to a Program's title. */
.log-program-detail {
	background-color: #dedede;
	margin-left: 15px;
}

/* ----------------------------------------
   5. Dear DJs / Playlist popup dialog (Hour page only)
-------------------------------------- */
/* The "Dear DJs" and "Playlist" open buttons are styled via
   .log-toggle-button (section 1a) so they match the Prev/Now/Next nav
   buttons. Inside the dialog, .log-dialog-tab switches between the two
   panels below. */

/* Native <dialog>, draggable + resizable via logs.js. */
#log-modal-dialog {
	padding: 0;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);

	/* Essential dimensions for default view. */
	width: 600px;
	height: 750px;
	min-width: 300px;
	min-height: 300px;

	/* Native resize handle. */
	resize: both;
	overflow: hidden;

	/* Remove default centering so JS can position/drag it freely. */
	margin: 0;
	position: absolute;
	top: 54px;
	left: calc(100vw - 600px);
}

#log-modal-dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.1);
}

.log-dialog-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

/* Drag handle for the dialog (see logs.js dialog-drag logic). */
.log-dialog-header {
	background-color: #232323;
	color: white;
	padding: 7.5px;
	cursor: move;
	user-select: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Tab buttons replacing the old static "Playlist" <h2> title. */
.log-dialog-tabs {
	display: flex;
	gap: 4px;
}

.log-dialog-tab {
	background: transparent;
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.0333em;
	line-height: 1.25;
	opacity: 0.6;
	padding: 7.5px 10px;
	text-transform: uppercase;
	transition: opacity 0.15s linear, background-color 0.15s linear;
}

.log-dialog-tab:hover {
	opacity: 0.85;
}

.log-dialog-tab.is-active {
	background-color: #b8224b;
	opacity: 1;
}

/* Close is the ONLY way to dismiss the dialog, so it gets its own
   look — a solid light pill, distinct from the dark-on-red tabs and
   the flat-red toolbar buttons — plus a bigger tap target. */
.log-dialog-close {
	background-color: #fff;
	border: none;
	border-radius: 20px;
	color: #232323;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.0333em;
	text-transform: uppercase;
	cursor: pointer;
	line-height: 1.25;
	padding: 8px 18px;
	margin-left: 10px;
	flex-shrink: 0;
	transition: background-color 0.15s linear, color 0.15s linear;
}

.log-dialog-close:hover {
	background-color: #cd2653;
	color: #fff;
}

.log-dialog-body {
	padding: 10px;
	flex-grow: 1;
	overflow-y: auto;
}

/* Dear DJs panel: plain page content (paragraphs of events/notices). */
.log-dialog-panel p {
	margin: 0 0 1em;
}

.log-dialog-panel p:last-child {
	margin-bottom: 0;
}

/* Playlist panel's iframe already fills the body; strip the panel's own
   padding contribution so the iframe sizing math (logs.js/inline width)
   is unaffected by the switch to a wrapping panel div. */
#log-panel-playlist {
	margin: -10px;
}

/* ----------------------------------------
   6. Week page (7 stacked day-tables, Staff view)
-------------------------------------- */
/* Top-of-page link nav, shared by the Week and Track pages (day-anchor
   links + Current/Week/Track cross-links). */
.log-page-nav {
	font-size: 24px;
	margin: 10px auto;
	text-align: center;
}

/* Hour-header row (e.g. "9am: Rik & Karen James") starting each hour's block. */
.log-row-hour {
	background-color: #676767;
	color: white;
}

/* Next-EAS-test notice, below the day-anchor nav. */
.log-eas-notice {
	background-color: #fff;
	border: 1px solid #dcd7ca;
	margin: 0 auto 20px auto;
	padding: 10px 15px;
	width: 1000px;
}

.log-eas-notice p {
	margin: 5px 0;
}

/* ----------------------------------------
   7. Track page (sponsor-slot availability, Staff view)
-------------------------------------- */
/* Horizontal-scroll wrapper so the wide table stays usable on narrower windows. */
.log-track-scroll {
	overflow: auto;
}

.logs-track-table .log-caption {
	min-height: 85px;
}

.logs-track-table th {
	vertical-align: bottom;
}

/* <details>/<summary> sponsor-count disclosure in each cell. */
.log-org-names {
	margin: 0;
}

.log-sponsor-list {
	background-color: #efefef;
	margin: 0;
}

.log-sponsor-list-program {
	background-color: #fff;
	font-style: italic;
}

/* Slot-availability color coding: the reason this page exists — lets
   Staff spot open, full, and overbooked hours at a glance. Thresholds
   are set in page-logs-track.php ($hr_total vs. 7/8 sponsors). */
.log-slot-open {
	background-color: #eaf6ea;
}

.log-slot-full {
	background-color: #fff8e0;
}

.log-slot-over {
	background-color: #fbe7e9;
}

.log-track-overbooked-note {
	font-size: 16px;
	text-align: right;
}

.log-track-overbooked-note .log-track-overbooked-flag {
	color: #e22657;
	font-style: italic;
}