/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Template: twentytwentyfour
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.3.1756548109
Updated: 2025-08-30 10:01:49
*/

/* Hide duplicate post titles */
.wp-block-post-title {
  display: none;
}

/* =========================
   HEADER (logo, title, nav)
   ========================= */

/* Stack header groups vertically */
header.wp-block-template-part .alignwide.is-layout-flex.is-content-justification-space-between {
  flex-direction: column;
  align-items: center;
  gap: var(--wp--style--block-gap, 1rem);
}

/* Stack logo above site title */
header.wp-block-template-part .alignwide.is-layout-flex > .wp-block-group.is-layout-flex:first-child {
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

/* Center nav under the site title (when constrained) */
header.wp-block-template-part .wp-block-group > .wp-block-navigation {
  width: 100%;
  justify-content: center;
}

/* Site title styles */
header.wp-block-template-part .wp-block-site-title {
  margin: .25rem 0 0;
  text-align: center;
}
header.wp-block-template-part .wp-block-site-logo {
  margin: 0 auto;
}

/* Make site title larger */
p.wp-block-site-title {
  font-size: xxx-large;
}

/* =========================
   FULL-WIDTH NAV BAR
   ========================= */

:root {
  --nav-bg: #2e56a3;        /* background colour of the nav bar */
  --nav-link: #fff;         /* link colour */
  --nav-link-hover: #f3f3f3;
}

/* Make the nav itself create a full-width bar */
header.wp-block-template-part .wp-block-navigation {
  background: var(--nav-bg);
  color: var(--nav-link);
  padding-block: .6rem;

  /* Full-bleed trick: push nav to viewport edges even inside alignwide */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);

  position: relative;
  z-index: 0;
}

/* Nav links */
header.wp-block-template-part .wp-block-navigation a {
  color: var(--nav-link);
  text-decoration: none;
}
header.wp-block-template-part .wp-block-navigation a:hover,
header.wp-block-template-part .wp-block-navigation a:focus {
  color: var(--nav-link-hover);
}

/* Hamburger / close icons visible on dark bg */
header.wp-block-template-part .wp-block-navigation svg rect,
header.wp-block-template-part .wp-block-navigation svg path {
  fill: var(--nav-link);
}

/* Make the logo image larger */
header.wp-block-template-part .wp-block-site-logo img {
  width: 120px;   /* adjust as needed */
  height: auto;   /* keep aspect ratio */
}
/* Nav links with underline on hover */
header.wp-block-template-part .wp-block-navigation a {
  color: var(--nav-link);
  text-decoration: none;
}

header.wp-block-template-part .wp-block-navigation a:hover,
header.wp-block-template-part .wp-block-navigation a:focus {
  color: var(--nav-link-hover);
  text-decoration: underline;
}

/* =========================
   LISTEN HERE BUTTON
   ========================= */
.button_cont {
  width: 100%;
  margin: 4rem 0;   /* space above and below the button */
}

.button_cont a {
  display: block;
  width: 100%;
  background-color: #2e56a3;    /* dark blue background */
  color: #fff;                  /* white text */
  padding: 1em 1.5em;           /* spacing inside button */
  border: none;
  border-radius: 4px;
  font-size: 1.4rem;            /* bigger text */
  font-weight: 700;             /* bolder */
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.button_cont a:hover {
  background-color: #fff;
  color: #2e56a3;
  transform: translateY(-2px);
  border: 2px solid #2e56a3;
}

.button_cont a:active {
  background-color: #444;
  color: #fff;
  transform: translateY(0);
}

/* =========================
   HOMEPAGE TYPOGRAPHY & DIVIDERS
   ========================= */

/* Homepage section headings */
body.home h2,
body.home h3 {
  font-weight: 700;
  color: #2e56a3;
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: 2.4rem;
  line-height: 1.3;
}

/* Divider line above each heading */
body.home h2::before,
body.home h3::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #ccc;
  margin: 2rem 0 1.5rem;
}

/* Homepage spacers with extra breathing room */
body.home .wp-block-spacer {
  margin-top: 2rem;
  margin-bottom: 2rem;
}


/* =========================
   Donations section images
   ========================= */

/* Remove stray empty divs */
#sectionFive > div:empty {
  display: none;
}

/* Make all .image-stack images full width and consistent */
#sectionFive .image-stack {
  width: 100%;
  max-width: 720px;         /* adjust max width to suit your layout */
  margin: 1.5rem auto;      /* space around + center them */
}

#sectionFive .image-stack img {
  display: block;
  width: 100%;              /* force same width */
  height: auto;             /* keep aspect ratio */
  border-radius: 6px;       /* optional: rounded corners */
}

/* Reduce the first spacer after the nav in the header */
header.wp-block-template-part .wp-block-spacer:first-of-type {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: 1rem !important;  /* adjust as you like */
}


html, body {
  overflow-x: hidden;
}