/*
Theme Name: Best In Movies
Theme URI:
Description: Custom Astra child theme for the Best In Movies movie review site — light editorial style with a cinema-red accent, built around a movie review custom post type (2:3 poster featured images, /10 scoring).
Author: Eli
Author URI:
Template: astra
Version: 1.0.0
Text Domain: bestinmovies
*/

/* ==========================================================================
   1. DESIGN TOKENS (color palette, type, spacing)
   Everything else in this theme reads from these variables. To retheme the
   whole site later, this is the only block you need to touch.
   ========================================================================== */

:root {
	/* --- Color palette: "Light Editorial" ---------------------------------
	   Warm off-white background, ink-black type, one bold accent (cinema
	   red) used sparingly for links, buttons, ratings, and small details. */
	--bim-color-bg:            #FBFAF7; /* page background, warm off-white */
	--bim-color-bg-alt:        #F1EDE4; /* section/card alt background, cream */
	--bim-color-surface:       #FFFFFF; /* card surfaces */
	--bim-color-border:        #E5E0D3; /* hairline borders/dividers */

	--bim-color-text:          #1B1B1D; /* primary ink */
	--bim-color-text-muted:    #6B6B6F; /* secondary/meta text */
	--bim-color-text-inverse:  #FBFAF7; /* text on dark backgrounds */

	--bim-color-accent:        #B3241C; /* cinema red — links, buttons, badges */
	--bim-color-accent-dark:   #8C1B15; /* hover/active state of accent */
	--bim-color-accent-tint:   #F6E4E2; /* pale accent wash for hovers/badges */

	--bim-color-ink:           #1B1B1D; /* dark surfaces (rating badge, footer) */
	--bim-color-ink-soft:      #2B2B2E;

	/* --- Type --------------------------------------------------------------
	   Headings: Fraunces (editorial serif). Body/UI: Inter (clean sans).
	   Enqueued in functions.php — see bim_enqueue_assets(). */
	--bim-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
	--bim-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* --- Layout -------------------------------------------------------------- */
	--bim-container-width: 1200px;
	--bim-container-pad: 24px;
	--bim-radius-sm: 4px;
	--bim-radius-md: 8px;
	--bim-poster-ratio: 2 / 3; /* matches 1200x1800 featured images */

	--bim-space-xs: 8px;
	--bim-space-sm: 16px;
	--bim-space-md: 24px;
	--bim-space-lg: 48px;
	--bim-space-xl: 80px;
}

/* ==========================================================================
   2. BASE / RESET
   Astra already resets most things — this only layers the palette + type
   on top so it applies site-wide, not just on the templates we've built.
   ========================================================================== */

body {
	background-color: var(--bim-color-bg);
	color: var(--bim-color-text);
	font-family: var(--bim-font-body);
	font-size: 17px;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--bim-font-heading);
	color: var(--bim-color-text);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

a {
	color: var(--bim-color-accent);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--bim-color-accent-dark);
}

::selection {
	background: var(--bim-color-accent);
	color: var(--bim-color-text-inverse);
}

/* Every template here provides its own full layout via header.php's
   <main id="primary" class="site-main"> through to footer.php's closing
   tag — none of it depends on Astra's own content-area wrapper styling.
   Astra's parent stylesheet (particularly in "Boxed"/"Separate Containers"
   layout mode) puts default padding and a background color on several of
   its wrapper elements, which shows up as an unexplained band directly
   under the header if left alone. This targets every likely wrapper
   Astra might apply that to, with !important, since a plain override on
   #primary/.site-main alone didn't clear it — Astra's own rule is
   evidently more specific or applies to a different element than that.
   If this still doesn't clear it: right-click the bar in the browser →
   Inspect, and send along the element's tag/class/id shown there so it
   can be targeted precisely instead of guessed at. */
body,
#page,
.site,
#content,
.site-content,
.ast-container,
.ast-separate-container,
#primary,
.site-main {
	margin: 0 !important;
	padding: 0 !important;
	background-color: var(--bim-color-bg) !important;
	border: none !important;
	box-shadow: none !important;
}

/* ==========================================================================
   3. LAYOUT UTILITIES
   ========================================================================== */

.bim-container {
	width: 100%;
	max-width: var(--bim-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--bim-container-pad);
	padding-right: var(--bim-container-pad);
	box-sizing: border-box;
}

.bim-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   4. COMPONENTS (shared across header, footer, homepage, and later
   the review archive/single templates)
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */
.bim-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	background: var(--bim-color-accent);
	color: var(--bim-color-text-inverse);
	font-family: var(--bim-font-body);
	font-weight: 600;
	font-size: 15px;
	border-radius: var(--bim-radius-sm);
	border: 1px solid var(--bim-color-accent);
	cursor: pointer;
}

.bim-btn:hover,
.bim-btn:focus {
	background: var(--bim-color-accent-dark);
	border-color: var(--bim-color-accent-dark);
	color: var(--bim-color-text-inverse);
}

.bim-btn--outline {
	background: transparent;
	color: var(--bim-color-text);
	border-color: var(--bim-color-border);
}

.bim-btn--outline:hover,
.bim-btn--outline:focus {
	border-color: var(--bim-color-accent);
	color: var(--bim-color-accent);
	background: var(--bim-color-accent-tint);
}

/* --- Section headers ------------------------------------------------------ */
.bim-section {
	padding-top: var(--bim-space-xl);
	padding-bottom: var(--bim-space-xl);
}

.bim-section--alt {
	background: var(--bim-color-bg-alt);
}

.bim-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--bim-space-md);
	margin-bottom: var(--bim-space-md);
	border-bottom: 2px solid var(--bim-color-text);
	padding-bottom: var(--bim-space-sm);
}

.bim-section__eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bim-color-accent);
	margin-bottom: 4px;
}

a.bim-section__eyebrow {
	text-decoration: none;
}

a.bim-section__eyebrow:hover,
a.bim-section__eyebrow:focus {
	text-decoration: underline;
}

.bim-section__title {
	font-size: clamp(24px, 3vw, 32px);
	margin: 0;
}

.bim-section__link {
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
}

/* --- Rating badge (score out of 10) -------------------------------------- */
.bim-badge-rating {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	background: var(--bim-color-ink);
	color: var(--bim-color-text-inverse);
	font-family: var(--bim-font-body);
	font-weight: 700;
	padding: 5px 10px;
	border-radius: var(--bim-radius-sm);
	line-height: 1;
}

.bim-badge-rating__score {
	font-size: 16px;
	color: var(--bim-color-text-inverse);
}

.bim-badge-rating__max {
	font-size: 11px;
	color: var(--bim-color-accent);
	font-weight: 600;
}

.bim-badge-rating--empty {
	background: transparent;
	border: 1px solid var(--bim-color-border);
	color: var(--bim-color-text-muted);
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* --- Review card (used on the homepage now; will be reused on the
   reviews archive/genre pages later) --------------------------------------- */
.bim-card {
	display: flex;
	flex-direction: column;
	background: var(--bim-color-surface);
	border: 1px solid var(--bim-color-border);
	border-radius: var(--bim-radius-md);
	overflow: hidden;
	height: 100%;
}

.bim-card__poster {
	position: relative;
	display: block;
	aspect-ratio: var(--bim-poster-ratio);
	background: var(--bim-color-bg-alt);
	overflow: hidden;
}

.bim-card__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.bim-card__poster:hover img,
.bim-card__poster:focus-visible img {
	transform: scale(1.045);
}

.bim-card__poster .bim-badge-rating {
	position: absolute;
	top: 10px;
	right: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.bim-card__body {
	padding: var(--bim-space-sm);
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.bim-card__title {
	font-size: 18px;
	margin: 0;
}

.bim-card__title a {
	color: var(--bim-color-text);
}

.bim-card__title a:hover {
	color: var(--bim-color-accent);
}

.bim-card__meta {
	font-size: 13px;
	color: var(--bim-color-text-muted);
	margin: 0;
}

.bim-card__excerpt {
	font-size: 14px;
	color: var(--bim-color-text-muted);
	margin: 4px 0 0;
	line-height: 1.55;
}

/* --- Card grid (homepage, cast-and-crew page, and any future archive/
   taxonomy pages that list review cards) ----------------------------------- */
.bim-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--bim-space-md);
}

.bim-card__poster-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		135deg,
		var(--bim-color-border),
		var(--bim-color-border) 10px,
		var(--bim-color-bg-alt) 10px,
		var(--bim-color-bg-alt) 20px
	);
}

/* --- Admin-only reminder note (shown only to logged-in admins when a
   section is waiting on a taxonomy/field that doesn't exist yet) --------- */
.bim-admin-note {
	background: var(--bim-color-accent-tint);
	border: 1px dashed var(--bim-color-accent);
	border-radius: var(--bim-radius-sm);
	padding: 12px 16px;
	font-size: 14px;
	color: var(--bim-color-accent-dark);
}

/* --- Genre pills (homepage "Browse by Genre" and the single review's
   genre list) --------------------------------------------------------------- */
.bim-genre-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bim-genre-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: var(--bim-color-surface);
	border: 1px solid var(--bim-color-border);
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	color: var(--bim-color-text);
}

.bim-genre-pill:hover,
.bim-genre-pill:focus {
	border-color: var(--bim-color-accent);
	color: var(--bim-color-accent);
	background: var(--bim-color-accent-tint);
}

.bim-genre-pill__count {
	font-size: 12px;
	color: var(--bim-color-text-muted);
}

/* --- Meta pill (small neutral fact chip — runtime, parental rating, etc.,
   currently used on the single review page) -------------------------------- */
.bim-meta-pill {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border: 1px solid var(--bim-color-border);
	border-radius: var(--bim-radius-sm);
	font-size: 13px;
	font-weight: 600;
	color: var(--bim-color-text-muted);
	line-height: 1;
}

/* --- Prose (long-form content — the review body, and any future
   long-form page like an About page) ---------------------------------------- */
.bim-prose {
	max-width: 68ch;
	font-size: 17px;
	line-height: 1.75;
	color: var(--bim-color-text);
}

.bim-prose > * + * {
	margin-top: 1.2em;
}

.bim-prose h2 {
	font-size: 26px;
	margin-top: 1.8em;
}

.bim-prose h3 {
	font-size: 21px;
	margin-top: 1.6em;
}

.bim-prose a {
	text-decoration: underline;
	text-decoration-color: var(--bim-color-border);
	text-underline-offset: 3px;
}

.bim-prose a:hover,
.bim-prose a:focus {
	text-decoration-color: var(--bim-color-accent);
}

.bim-prose blockquote {
	margin: 0;
	padding-left: 20px;
	border-left: 3px solid var(--bim-color-accent);
	font-style: italic;
	color: var(--bim-color-text-muted);
}

.bim-prose img {
	width: 100%;
	height: auto;
	border-radius: var(--bim-radius-md);
	display: block;
}

.bim-prose ul,
.bim-prose ol {
	padding-left: 1.4em;
}

.bim-prose li + li {
	margin-top: 0.4em;
}

@media (max-width: 960px) {
	.bim-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.bim-grid {
		grid-template-columns: 1fr;
	}
}