/*
Theme Name: If This Goes On (Don't Panic)!
Theme URI: https://itgodp.wordpress.com/
Author: Autonomic
Author URI: https://autonomic.zone/
Description: A simple, hopepunk podcast theme for the "If This Goes On (Don't Panic)!" show. Built as a WordPress block theme (Full Site Editing) so the whole look can be edited from the Site Editor or from one file (theme.json). Episodes are regular WordPress posts published by the Libsyn Publisher Hub plugin; the theme styles them into a clean card grid.
Tags: podcast, blog, full-site-editing, block-styles, one-column, two-columns, accessibility-ready
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: itgodp
*/

/*
============================================================================
 ABOUT THIS FILE
============================================================================
 This is a BLOCK THEME. That means almost all of the visual design lives in
 `theme.json` (colours, fonts, spacing) and in the HTML template files inside
 the /templates and /parts folders. You will rarely need to touch this CSS
 file.

 Only put CSS here for the handful of things that theme.json cannot express
 (small tweaks, hover effects, etc). Keep it short and commented so the next
 person can follow it. Most changes should be made in theme.json or visually
 in Appearance -> Editor inside the WordPress dashboard.
============================================================================
*/

/* --- Page canvas: coloured page, white content sheet in the centre. -------
   The whole page (body) is a soft brand periwinkle; the main content area is a
   white sheet centred on top of it, so the colour shows as margins down each
   side ("white centre, coloured edges"). The full-width dark header and footer
   bridge across the top and bottom. To tune: change the page colour below, or
   the sheet width (1140px). */
body {
	background-color: #bcc1ea;
}
.wp-site-blocks > main {
	background-color: #ffffff;
	max-width: 1140px;          /* a little wider than the 1100px wide blocks */
	margin-inline: auto;
	overflow: hidden;           /* keep the full-width hero contained in the sheet */
}

/* --- Section divider: a short, centred indigo line between page sections. -
   Pick this on a Separator block via Styles -> "Section divider (indigo)".
   Registered in functions.php (itgodp_register_block_styles). */
.wp-block-separator.is-style-section-divider {
	width: 120px;
	max-width: 120px;
	margin-inline: auto;
	border: none;
	border-top: 3px solid var(--wp--preset--color--deep-space);
	opacity: 1;
}

/* Make plain section separators read clearly as a colour: the default 2px line
   is so thin the maroon looks almost black. The colour itself comes from
   theme.json (core/separator), drawn via currentColor on this border. */
.wp-block-separator:not(.is-style-dots) {
	border-top-width: 3px;
}

/* --- "Latest episodes" list: widen the gap between items a touch. --------
   The homepage episode list is a Feedzy RSS grid (.wp-block-feedzy-rss-feeds-loop).
   The two-class selector matches Feedzy's own specificity; our stylesheet loads
   last, so this wins. Bump the value to space the episodes out further. */
.wp-block-feedzy-rss-feeds-loop.feedzy-loop-columns-2 {
	gap: 2.25rem;
}

/* --- Episode cards: lift slightly on hover so they feel clickable. ------- */
.is-style-episode-card {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.is-style-episode-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* --- Make embedded Libsyn players fill the width of their container. ------
   The Libsyn Publisher Hub drops an <iframe> into each episode's content.
   This keeps that player responsive instead of overflowing on phones. */
.entry-content iframe {
	max-width: 100%;
}

/* --- Skip link: visible only when focused (keyboard accessibility). ------ */
.skip-link:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}