/*
Theme Name:     Be Child Safe 2025
Theme URI:      https://bechildsafe.org
Description:    Child theme of Twenty Twenty-Five built for Be Child Safe. Designed around scannable CPSC recall and product-safety-warning notices.
Author:         Bare Web Design
Author URI:     https://barewebdesign.com
Template:       twentytwentyfive
Version:        1.4.0
Requires at least: 6.7
Requires PHP:   7.2
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    bechildsafe
*/

/* -------------------------------------------------------------
   Design tokens live in theme.json. This file is for the few
   things theme.json cannot express.
   ------------------------------------------------------------- */

/* Long CPSC headlines are the defining content problem on this site.
   They run 20+ words, so card titles need tight leading and balanced
   wrapping or they shred the grid. */
.bcs-card .wp-block-post-title {
	line-height: 1.25;
	text-wrap: balance;
	margin: 0 0 .5rem;
}

.bcs-card .wp-block-post-title a {
	text-decoration: none;
}

.bcs-card .wp-block-post-title a:hover,
.bcs-card .wp-block-post-title a:focus {
	text-decoration: underline;
}

/* Notice cards */
.bcs-card {
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--30);
	height: 100%;
}

/* Warnings read as more urgent than recalls: firm refused to recall. */
.bcs-warning .bcs-card {
	border-left: 5px solid var(--wp--preset--color--alert);
}

.bcs-recall .bcs-card {
	border-left: 5px solid var(--wp--preset--color--brand);
}

.bcs-card .wp-block-post-date {
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
}

/* Section headers with a rule and a "view all" link on the same line */
.bcs-section-head {
	border-bottom: 2px solid var(--wp--preset--color--brand);
	padding-bottom: .5rem;
	margin-bottom: var(--wp--preset--spacing--40);
}

.bcs-section-head h2 {
	margin: 0;
}

.bcs-section-head a {
	white-space: nowrap;
}

/* Hero banner. The SVG replaces the old Yoko header image; it scales to any
   width without a second retina asset. */
.bcs-hero {
	background-image: url('assets/banner.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 6px;
	overflow: hidden;
}

.bcs-hero h1,
.bcs-hero p {
	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(13, 36, 68, .45);
}

/* Hero search */
.bcs-hero .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--rule);
	border-right: 0;
	border-radius: 4px 0 0 4px;
	padding: .8em 1em;
	font-size: 1rem;
}

.bcs-hero .wp-block-search__button {
	border-radius: 0 4px 4px 0;
	padding: .8em 1.4em;
}

/* Topic tiles */
.bcs-topic {
	display: block;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 6px;
	padding: 1rem 1.15rem;
	text-decoration: none;
	background: var(--wp--preset--color--surface);
	font-weight: 600;
	transition: border-color .15s ease, background .15s ease;
}

.bcs-topic:hover,
.bcs-topic:focus {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--base);
}

/* Single notice body: the posts are dense label/value paragraph pairs,
   so give them room and make the bold labels do more work. */
.bcs-notice-body p {
	margin-block: .85em;
}

.bcs-notice-body h2 {
	margin-top: 1.8em;
	padding-bottom: .3em;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

@media (max-width: 600px) {
	.bcs-section-head {
		padding-bottom: .75rem;
	}
}

/* -------------------------------------------------------------
   Section rhythm & icons
   ------------------------------------------------------------- */

.bcs-head-left {
	gap: .6rem;
	align-items: center;
}

.bcs-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--brand);
}

.bcs-warning .bcs-icon {
	background: #fbeceb;
	color: var(--wp--preset--color--alert);
}

.bcs-recall .bcs-icon {
	background: #e8eef7;
	color: var(--wp--preset--color--brand);
}

/* Alternating band so sections read as distinct zones */
.bcs-warning {
	background: var(--wp--preset--color--surface);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--40);
}

.bcs-warning .bcs-card {
	background: var(--wp--preset--color--base);
}

/* Header brand lockup */
.bcs-brand {
	gap: .7rem;
	align-items: center;
}

.bcs-brand .wp-block-site-logo img {
	display: block;
	height: auto;
}

/* Topic tiles get a little more presence */
.bcs-topic {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.bcs-topic::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	flex: 0 0 8px;
}

@media (max-width: 600px) {
	.bcs-icon {
		width: 34px;
		height: 34px;
		flex-basis: 34px;
	}
	.bcs-icon svg {
		width: 20px;
		height: 20px;
	}
	.bcs-warning {
		padding: var(--wp--preset--spacing--30);
	}
}