/*
Theme Name: Beep & Pixel
Description: A bright, child-friendly child theme of Twenty Twenty-Five for the Beep & Pixel coding site. Uses only the parent theme's bundled fonts and loads nothing from other websites.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beep-pixel
*/

/* Rainbow stripe above the header, in the mascots' colours. */
.bp-header {
	border-top: 10px solid transparent;
	border-image: linear-gradient(90deg, #1FB5A8 0 16%, #FF8A3D 16% 33%, #FFD23F 33% 50%, #EE4B8B 50% 66%, #3BA7F5 66% 83%, #7B5CE0 83% 100%) 1;
	background: #FFFFFF;
	box-shadow: 0 4px 0 rgba(29, 36, 69, 0.06);
}
.bp-header .wp-block-site-logo img { border-radius: 14px; }
.bp-header .wp-block-navigation a:hover { color: #EE4B8B; }

/* Callouts: Beep says, Pixel says, Grown-ups, Try it, Did you know?, Safety first. */
.bp-callout { border: 3px solid #1D2445; box-shadow: 6px 6px 0 rgba(29, 36, 69, 0.15); margin-block: 1.75rem; }
.bp-callout p { margin: 0; }
.bp-callout strong:first-child { font-family: "Fira Sans", system-ui, sans-serif; font-weight: 800; margin-right: 0.25em; }
.bp-callout-beep strong:first-child::before { content: "🤖 "; }
.bp-callout-pixel strong:first-child::before { content: "🐱 "; }
.bp-callout-grownups strong:first-child::before { content: "👪 "; }
.bp-callout-tryit strong:first-child::before { content: "⭐ "; }
.bp-callout-didyouknow strong:first-child::before { content: "💡 "; }
.bp-callout-safety strong:first-child::before { content: "⚠️ "; }

.bp-lesson-info { font-size: 0.95rem; margin-bottom: 1.5rem; }
.bp-lesson-info p { margin: 0; }

/* Hidden answers and hints. */
.wp-block-details {
	background: #FFFFFF;
	border: 3px dashed #7B5CE0;
	border-radius: 18px;
	padding: 0.9rem 1.25rem;
	margin-block: 1.25rem;
}
.wp-block-details summary {
	cursor: pointer;
	font-family: "Fira Sans", system-ui, sans-serif;
	font-weight: 800;
	color: #7B5CE0;
}
.wp-block-details[open] summary { margin-bottom: 0.75rem; }

/* Cards in query loops (track pages, home page). */
.bp-card, .wp-block-post-template.is-layout-grid > li > .wp-block-group {
	background: #FFFFFF;
	border: 3px solid #1D2445;
	border-radius: 22px;
	padding: 0 0 1.1rem;
	overflow: hidden;
	height: 100%;
	box-shadow: 6px 6px 0 rgba(29, 36, 69, 0.12);
	transition: transform 0.15s ease;
}
.bp-card:hover { transform: translateY(-4px) rotate(-0.4deg); }
.bp-card .wp-block-post-featured-image { margin: 0 0 0.75rem; }
.bp-card .wp-block-post-featured-image img { border-radius: 0; }
.bp-card > :not(.wp-block-post-featured-image) { padding-inline: 1.1rem; }
.bp-card .wp-block-post-excerpt { font-size: 0.95rem; }
.bp-card .wp-block-post-excerpt__more-text { display: none; }

/* Track tiles and hero on the home page. */
.bp-tile { border: 3px solid #1D2445; box-shadow: 6px 6px 0 rgba(29, 36, 69, 0.15); height: 100%; }
.bp-tile h3 { margin-top: 0.5rem; }
.bp-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; }
.bp-hero { margin-top: 2rem; }
.bp-tile .wp-block-image img, .bp-hero .wp-block-image img { width: 100%; height: auto; }

/* Tables: friendly stripes. */
.wp-block-table table { border-collapse: collapse; background: #FFFFFF; border-radius: 12px; overflow: hidden; }
.wp-block-table th { background: #D2F5F1; }
.wp-block-table td, .wp-block-table th { border: 2px solid #E3E6EF; padding: 0.5rem 0.75rem; }
.wp-block-table tr:nth-child(even) td { background: #FFFBF2; }
.bp-binary-table td { font-family: "Fira Code", ui-monospace, monospace; }

/* Galleries and images. */
.wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: 14px; }
.wp-block-image img { border: 3px solid #1D2445; }
.wp-block-image.bp-plain img, .wp-block-post-featured-image img { border: 0; }

.wp-block-button__link { box-shadow: 4px 4px 0 rgba(29, 36, 69, 0.25); }
.is-style-outline .wp-block-button__link { border: 3px solid currentColor; box-shadow: none; }

.bp-footer { border-top: 10px solid #FFD23F; }
.bp-footer a { color: #FFFFFF; }
.bp-footer a:hover { color: #FFD23F; }

.wp-block-search__input { border: 3px solid #1D2445; border-radius: 999px; padding-inline: 1rem; }