/*
Theme Name: Blessed Grace for Living
Theme URI: https://htmlcodex.com/free-charity-website-template
Author: Blessed Grace for Living (WordPress conversion of "HELPZ" by HTML Codex)
Author URI: https://htmlcodex.com
Description: A charity / NGO theme for Blessed Grace for Living, an organisation helping every child go back to school with school fees, materials and family support. Banners, text, images, colours and contact details are editable in Appearance > Customize > Blessed Grace Theme Options. Causes, Events, Team and Testimonials are managed from their own menus in the dashboard. Brand colours are taken from the Blessed Grace logo (brand blue #035CA0). Based on the free HELPZ template by HTML Codex (CC BY 4.0, the footer credit link must be kept).
Version: 1.3.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: CC BY 4.0 (template design) / GPL-2.0-or-later (WordPress code)
License URI: https://htmlcodex.com/license
Text Domain: blessed-grace
Tags: charity, non-profit, education, blue, custom-menu, featured-images, theme-options, one-page
*/

/* Main styles are in assets/css/template.css. Theme-specific additions: */

.bg-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.bg-alert { padding: 12px 15px; margin-bottom: 20px; border-left: 4px solid var(--bg-primary); background: #fff; color: #20212B; font-weight: 600; }
.bg-alert-error { border-left-color: #dc3545; }
.donate .bg-alert, .volunteer .bg-alert { background: rgba(255, 255, 255, .95); }

.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { background: #fff; clip: auto !important; clip-path: none; color: #20212B; display: block; height: auto; left: 5px; padding: 15px 23px 14px; top: 5px; width: auto; z-index: 100000; }

/* Logo */
.navbar .navbar-brand a { color: inherit; }

/* Hero: text also readable on phones */
.carousel .carousel-text h1, .carousel .carousel-text h2.h1 { text-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* Facts counters with editable symbol */
.facts .facts-text h3 .facts-suffix { margin-left: 2px; }

/* Donate form: "other amount" + select */
.donate .donate-form .bg-other-amount { margin-bottom: 15px; }
.donate .donate-form .btn-group { flex-wrap: wrap; }
.donate .donate-form .btn-group .btn.btn-custom { flex: 1 0 25%; }

/* Page content area on template pages */
.bg-page-content { padding-bottom: 45px; }
.bg-page-content:empty { display: none; }
.bg-entry { color: #555; line-height: 1.8; }
.bg-entry img { max-width: 100%; height: auto; }
.bg-entry h2, .bg-entry h3, .bg-entry h4 { margin-top: 25px; }
.bg-entry ul, .bg-entry ol { padding-left: 20px; }
.bg-entry blockquote { border-left: 4px solid var(--bg-primary); padding-left: 15px; font-style: italic; }
.bg-entry .alignleft { float: left; margin: 0 20px 15px 0; }
.bg-entry .alignright { float: right; margin: 0 0 15px 20px; }
.bg-entry .aligncenter { display: block; margin: 0 auto 15px; }
.wp-caption, .wp-block-image figcaption { font-size: 14px; color: #777; }
.sticky, .bypostauthor, .gallery-caption { outline: 0; }

/* Page header breadcrumbs */
.page-header span.bg-crumb { padding: 0 12px; font-size: 22px; color: #fff; }
@media (max-width: 575.98px) { .page-header h2 { font-size: 34px; } }

/* Cause / event meta on single pages */
.bg-cause-progress { margin: 0 0 30px; }
.bg-cause-progress .progress { height: 10px; border-radius: 0; background: #eee; }
.bg-cause-progress .progress-bar { background: var(--bg-primary); }
.bg-cause-progress p { margin: 8px 0 0; font-weight: 600; color: var(--bg-secondary); }
.bg-event-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; font-weight: 600; color: var(--bg-secondary); }
.bg-event-meta i { color: var(--bg-primary); margin-right: 6px; }

/* WordPress widgets in the blog sidebar */
.sidebar .sidebar-widget ul { list-style: none; margin: 0; padding: 0; }
.sidebar .sidebar-widget ul li { padding: 8px 0; border-bottom: 1px solid #eee; }
.sidebar .sidebar-widget ul li:last-child { border-bottom: none; }
.sidebar .sidebar-widget ul li a { color: #777; }
.sidebar .sidebar-widget ul li a:hover { color: var(--bg-primary); }
.sidebar .sidebar-widget .textwidget, .sidebar .sidebar-widget p { color: #777; }
.sidebar .sidebar-widget .wp-block-search__label { display: none; }

/* Blog list card + pagination from WordPress */
.blog .blog-item .blog-img img { width: 100%; height: 250px; object-fit: cover; }
.blog .blog-text p { min-height: 0; }
.bg-pagination { margin-top: 15px; }
.bg-pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.bg-pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--bg-primary); color: #777; }
.bg-pagination .page-numbers.current, .bg-pagination a.page-numbers:hover { background: var(--bg-primary); color: var(--bg-on-primary); }

/* Uniform image crops for cards filled from the Media Library */
.causes .causes-img img { width: 100%; height: 250px; object-fit: cover; }
.event .event-item img { width: 100%; height: 300px; object-fit: cover; }
.team .team-img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.testimonial .testimonial-profile img { width: 80px; height: 80px; object-fit: cover; }
.single .single-content img.wp-post-image { width: 100%; height: auto; margin-bottom: 25px; }

/* Comments */
.single .comment-form input[type="text"], .single .comment-form input[type="email"], .single .comment-form input[type="url"], .single .comment-form textarea { width: 100%; padding: 10px 15px; border: 1px solid #ddd; border-radius: 0; }
.single .comment-form .form-submit input { padding: 12px 20px; background: none; border: 2px solid var(--bg-primary); color: #777; font-weight: 500; transition: .3s; cursor: pointer; }
.single .comment-form .form-submit input:hover { background: var(--bg-primary); color: var(--bg-on-primary); }
.single .comment-list .children { list-style: none; padding-left: 40px; }

.bg-empty { text-align: center; padding: 20px; border: 2px dashed #ddd; color: #999; }

/* Mobile */
@media (max-width: 575.98px) {
	.carousel .carousel-text h1, .carousel .carousel-text h2.h1 { font-size: 30px; }
	.carousel .carousel-text p { font-size: 16px; }
	.donate .donate-form .btn-group .btn.btn-custom { flex: 1 0 50%; }
}

/* Long organisation name in the menu bar */
.navbar .navbar-brand { font-size: 26px; letter-spacing: 2px; line-height: 1.15; white-space: normal; max-width: 70%; }
.navbar .navbar-brand small { display: block; font-size: 12px; letter-spacing: 4px; font-weight: 600; color: var(--bg-primary); }
@media (min-width: 992px) {
	.navbar .navbar-brand { max-width: 300px; }
	.bg-no-topbar .navbar { top: 0; }
	.navbar { padding-left: 30px; padding-right: 30px; }
	.navbar.nav-sticky { padding-left: 30px; padding-right: 30px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.navbar a.nav-link { padding: 8px 9px; font-size: 15px; letter-spacing: 0; }
	.navbar .navbar-brand { font-size: 21px; }
}

/* Long event details wrap instead of pushing the page sideways */
.event .event-meta p { white-space: normal; }
@media (max-width: 575.98px) {
	.event .event-meta { flex-wrap: wrap; }
	.event .event-meta p { margin-right: 15px; }
}

/* Causes without a progress bar: give the title some room */
.causes .causes-img + .causes-text { padding-top: 25px; }
.causes .row .causes-item { margin-bottom: 30px; }

/* Shorter meta line on news cards */
.blog .blog-meta p { font-size: 14px; }

/* Block-based widgets (WordPress 5.8+) look like the template's widgets */
.sidebar .wp-block-search__inside-wrapper { display: flex; }
.sidebar .wp-block-search__input { border: 1px solid #ddd; border-radius: 0; padding: 8px 12px; }
.sidebar .wp-block-search__button { background: var(--bg-primary); border: none; border-radius: 0; color: var(--bg-on-primary); margin-left: 0; }
.sidebar .wp-block-latest-posts li, .sidebar .wp-block-latest-comments li { padding: 8px 0; border-bottom: 1px solid #eee; margin: 0; }
.sidebar .wp-block-latest-posts, .sidebar .wp-block-latest-comments { padding: 0; }
.single .post-navigation { margin: 30px 0; display: flex; }
.single .post-navigation .nav-links { display: flex; justify-content: space-between; width: 100%; gap: 20px; }

/* Keep menu labels on one line */
@media (min-width: 992px) {
	.navbar .navbar-nav .nav-link { white-space: nowrap; }
}

/* ===== Blessed Grace brand identity (logo blue #035CA0) ===== */
.navbar .navbar-brand.bg-brand { display: flex; align-items: center; gap: 12px; line-height: 1.1; max-width: none; }
.navbar .navbar-brand .bg-logo { height: 56px; width: auto; max-height: none; max-width: none; flex-shrink: 0; transition: height .3s; }
.navbar.nav-sticky .navbar-brand .bg-logo { height: 44px; }
.navbar .navbar-brand .bg-brand-name { font-size: 18px; letter-spacing: 2px; max-width: 170px; white-space: normal; }
@media (min-width: 992px) and (max-width: 1199.98px) {
	.navbar .navbar-brand .bg-brand-name { font-size: 15px; max-width: 140px; }
}
@media (max-width: 991.98px) {
	.navbar .navbar-brand .bg-logo { height: 44px; }
	.navbar .navbar-brand .bg-brand-name { font-size: 15px; max-width: 150px; }
}

/* Highlights that sit on photos / dark backgrounds use the sky tint */
.donate .section-header p, .volunteer .section-header p { color: var(--bg-highlight); }
.carousel .carousel-btn .btn.btn-custom { border-color: var(--bg-highlight); }
.carousel .carousel-btn .btn.btn-custom:hover { box-shadow: inset 0 0 0 30px var(--bg-primary); border-color: var(--bg-primary); }
.bg-cause-progress .progress-bar { background: var(--bg-primary); }
.footer .bg-footer-logo { display: inline-block; margin-bottom: 25px; }
.footer .bg-footer-logo img { height: 150px; width: auto; }
.footer .btn.btn-custom { color: #fff; border-color: var(--bg-highlight); }
.footer .btn.btn-custom:hover { color: #fff; border-color: var(--bg-primary); box-shadow: inset 0 0 0 30px var(--bg-primary); }
.navbar-dark .navbar-toggler { border-color: rgba(255,255,255,.4); }
::selection { background: var(--bg-primary); color: #fff; }

/* Taller banner on phones so the text always sits on the photo */
@media (max-width: 767.98px) {
	.carousel .carousel-img { height: 580px; }
	.carousel .carousel-img img { height: 100%; }
	.carousel .carousel-text { padding: 90px 15px 0; }
}

/* ===== White menu bar so the full-colour logo shows exactly as designed ===== */
.top-bar { position: relative; background: var(--bg-dark); }
.navbar.bg-light-nav,
.navbar.bg-light-nav.nav-sticky { position: sticky !important; top: 0; width: 100%; background: #ffffff !important; border-bottom: 1px solid #e3ebf4; z-index: 999; }
.navbar.bg-light-nav.nav-sticky { box-shadow: 0 2px 10px rgba(5, 28, 51, .12); }
.navbar.bg-light-nav .navbar-brand .bg-logo { height: 100px; }
.navbar.bg-light-nav.nav-sticky .navbar-brand .bg-logo { height: 70px !important; }
.navbar.bg-light-nav .navbar-brand .bg-brand-name { color: var(--bg-secondary); }
.navbar-dark.bg-light-nav .navbar-nav .nav-link,
.navbar-dark.bg-light-nav .navbar-nav .nav-link:focus { color: var(--bg-secondary); font-weight: 600; }
.navbar-dark.bg-light-nav .navbar-nav .nav-link:hover,
.navbar-dark.bg-light-nav .navbar-nav .nav-link.active { color: var(--bg-primary); }
.navbar-dark.bg-light-nav .navbar-toggler { border-color: rgba(3, 92, 160, .4); }
.navbar-dark.bg-light-nav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23035CA0' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.navbar.bg-light-nav .dropdown-menu { background: #ffffff; box-shadow: 0 6px 18px rgba(5, 28, 51, .12); }
.navbar.bg-light-nav .dropdown-item:hover, .navbar.bg-light-nav .dropdown-item.active { background: var(--bg-tint); color: var(--bg-primary); }
@media (min-width: 992px) {
	.navbar.bg-light-nav, .navbar.bg-light-nav.nav-sticky { padding: 8px 30px; }
	.bg-no-topbar .navbar.bg-light-nav { top: 0; }
}
@media (max-width: 991.98px) {
	.navbar.bg-light-nav { padding: 8px 15px; }
	.navbar.bg-light-nav .navbar-brand .bg-logo, .navbar.bg-light-nav.nav-sticky .navbar-brand .bg-logo { height: 70px !important; }
	.navbar.bg-light-nav .navbar-collapse { padding-bottom: 10px; }
}
/* The menu bar no longer sits on top of the banners */
.page-header { padding: 90px 0; }
@media (max-width: 991.98px) { .page-header { padding: 60px 0; } }

/* Footer: full-colour logo on a white tile so the blue stays visible on navy */
.footer .bg-footer-logo { background: #ffffff; padding: 14px 18px; border-radius: 6px; }

/* Donate button in the menu bar */
.navbar .bg-nav-donate { margin-left: 15px; padding: 10px 22px; background: var(--bg-primary); color: #fff !important; border: 2px solid var(--bg-primary); border-radius: 30px; font-weight: 600; letter-spacing: .5px; white-space: nowrap; transition: .3s; }
.navbar .bg-nav-donate:hover, .navbar .bg-nav-donate:focus { background: #fff; color: var(--bg-primary) !important; }
.navbar .bg-nav-donate i { margin-right: 4px; }
@media (min-width: 992px) and (max-width: 1299.98px) {
	.navbar .bg-nav-donate { margin-left: 8px; padding: 8px 14px; font-size: 14px; }
	.navbar-dark.bg-light-nav .navbar-nav .nav-link { padding-left: 8px !important; padding-right: 8px !important; font-size: 14px; letter-spacing: 0; }
	.navbar.bg-light-nav .navbar-brand .bg-logo { height: 80px; }
}
@media (max-width: 991.98px) {
	.navbar .bg-nav-donate { display: block; margin: 10px 0 5px; text-align: center; }
}

/* Shop coming soon */
.bg-shop { padding: 45px 0 90px; }
.bg-shop-img img { width: 100%; height: 420px; object-fit: cover; }
.bg-shop-content { padding: 30px 0 0; }
@media (min-width: 992px) { .bg-shop-content { padding: 0 0 0 30px; } .text-center .bg-shop-content { padding: 0; } }
.bg-shop-badge { display: inline-block; padding: 6px 16px; margin-bottom: 15px; background: var(--bg-tint); color: var(--bg-primary); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 14px; border-radius: 30px; }
.bg-shop-content h2 { font-size: 40px; font-weight: 700; margin-bottom: 20px; }
.bg-shop-text { font-size: 17px; line-height: 1.8; }
.bg-shop-form { display: flex; gap: 10px; margin-top: 25px; max-width: 480px; }
.text-center .bg-shop-form { margin-left: auto; margin-right: auto; }
.bg-shop-form .form-control { height: 50px; border-radius: 0; border: 1px solid #cfdcea; }
.bg-shop-form .btn { white-space: nowrap; }
@media (max-width: 575.98px) { .bg-shop-form { flex-direction: column; } .bg-shop-content h2 { font-size: 30px; } }

/* ===== Home page teaser sections (v1.3) ===== */
.bg-home-section { padding: 70px 0; }
.bg-home-section .section-header { margin-bottom: 30px; }
.bg-section-lead { max-width: 640px; margin: -10px auto 40px; text-align: center; font-size: 17px; color: #666; }

/* Who we are */
.bg-intro-img img { width: 100%; height: 460px; object-fit: cover; border-radius: 6px; box-shadow: 18px 18px 0 var(--bg-tint); }
.bg-intro-content { padding: 30px 0 0; font-size: 16px; line-height: 1.8; }
@media (min-width: 992px) { .bg-intro-content { padding: 0 0 0 40px; } }
.bg-checks { list-style: none; margin: 20px 0 30px; padding: 0; }
.bg-checks li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; color: var(--bg-secondary); font-weight: 600; }
.bg-checks li i { margin-top: 5px; color: var(--bg-primary); }
.btn.btn-custom.bg-btn-solid { background: var(--bg-primary); color: #fff; box-shadow: none; }
.btn.btn-custom.bg-btn-solid:hover { background: #fff; color: var(--bg-primary); }

/* Cards (why / help) */
.bg-why { background: var(--bg-tint); }
.bg-card { display: block; height: 100%; padding: 35px 28px; margin-bottom: 30px; background: #fff; border-radius: 6px; border-bottom: 4px solid var(--bg-primary); box-shadow: 0 6px 20px rgba(5, 28, 51, .06); transition: transform .3s, box-shadow .3s; }
.bg-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: 50%; background: var(--bg-tint); color: var(--bg-primary); font-size: 26px; }
.bg-card h3 { font-size: 21px; font-weight: 700; margin-bottom: 12px; }
.bg-card p { color: #666; margin-bottom: 0; }
.bg-why .row > div, .bg-help .row > div { margin-bottom: 30px; }
.bg-why .bg-card, .bg-help .bg-card { margin-bottom: 0; }
a.bg-help-card { color: inherit; text-decoration: none; }
a.bg-help-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(5, 28, 51, .14); color: inherit; }
a.bg-help-card:hover .bg-card-icon { background: var(--bg-primary); color: #fff; }
.bg-card-link { display: inline-block; margin-top: 18px; color: var(--bg-primary); font-weight: 700; }
.bg-card-link i { margin-left: 4px; transition: margin .3s; }
a.bg-help-card:hover .bg-card-link i { margin-left: 10px; }

/* Impact heading on the photo background */
.facts .bg-facts-header { margin-bottom: 40px; }
.facts .bg-facts-header p { color: var(--bg-highlight); }
.facts .bg-facts-header h2 { color: #fff; }

/* "See more" buttons */
.bg-more { margin-top: 15px; text-align: center; }
.bg-more .btn i { margin-left: 6px; }

/* Closing call to action */
.bg-cta { padding: 90px 0; background: var(--bg-primary) center / cover no-repeat; color: #fff; }
.bg-cta h2 { color: #fff; font-size: 40px; font-weight: 700; margin-bottom: 15px; }
.bg-cta p { max-width: 620px; margin: 0 auto 30px; font-size: 18px; color: rgba(255, 255, 255, .9); }
.bg-cta-btns .btn { margin: 5px 8px; padding: 13px 28px; border-radius: 30px; font-weight: 700; }
.bg-btn-white { background: #fff; color: var(--bg-primary); border: 2px solid #fff; }
.bg-btn-white:hover { background: transparent; color: #fff; }
.bg-btn-outline { background: transparent; color: #fff; border: 2px solid #fff; }
.bg-btn-outline:hover { background: #fff; color: var(--bg-primary); }
@media (max-width: 767.98px) {
	.bg-home-section { padding: 50px 0; }
	.bg-intro-img img { height: 300px; }
	.bg-cta h2 { font-size: 28px; }
}

/* Closing banner touches the footer when it is the last section */
#bg-main > .bg-cta:last-child { margin-bottom: -45px; }

/* "Edit" buttons on cards (only visible to logged-in editors) */
.bg-editable { position: relative; }
.bg-edit-link { position: absolute; top: 10px; right: 10px; z-index: 5; padding: 4px 10px; background: rgba(5, 28, 51, .85); color: #fff !important; font-size: 12px; font-weight: 600; border-radius: 20px; opacity: .85; }
.bg-edit-link:hover { opacity: 1; background: var(--bg-primary); }
.customize-partial-edit-shortcut button { left: 4px; top: 4px; }