/*
Theme Name: Skills for Life Child
Theme URI: https://fundraising.mwscouts.org
Author: Lee Curry  | Treaclesponge
Template: skillsforlife
Description: Custom child theme for Skills for Life theme.
Version: 1.0
Text Domain: skillsforlifechild
*/

/* Sections
	 ========================================================================== */

/**
 * Scout brand colours
 */
:root {
  --scoutwhite: #ffffff;
  --scoutyellow: #ffe627;
  --scoutorange: #ff912a;
  --scoutpurple: #4a0499;
  --scoutteal: #088486;
  --scoutgreen: #23a950;
  --scoutred: #e22e12;
  --scoutpink: #d21c60;
  --scoutblue: #006ddf;
  --scoutgrey: #dddddd;
  --scoutforestgreen: #205b41;
  --scoutsectiongreen: #004851;
  --scoutdarkblue: #003881;

   --scoutpurple-bg20: rgba(74, 4, 153,0.2);
  --gap: 1.5rem;
}

body {
  background: var(--scoutpurple);

background-image: url('img/4th_background.png');
  background-repeat: repeat;
    background-blend-mode: overlay;
      background-color: var(--scoutpurple);
}

}
p {
  margin: 0 0 1em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}
/*--------------------------------------------------------------
#  Homepage
--------------------------------------------------------------*/

.home-welcome-box {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background: rgba(0, 0, 0, 0.4);
}

@media screen and (max-width: 867px) {
  .home-welcome-box {
    padding-top: 0rem;
    padding-bottom: 0rem;
  }
}

.home-welcome-box a,
.home-welcome-box a:visited {
  color: #ffffff;
}

.home-welcome-box-container {
  max-width: 1500px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  /*	height: 394px; */
  display: flex;
  flex-wrap: wrap;
}

.home-welcome-box-left {
  width: 100%;
  padding: 2.4rem;
  flex: auto;
}

.home-welcome-box-left .wp-block-button__link {
  display: inline-block;
  padding: 0.8rem 1.4rem; 
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 700;
  text-decoration: none;
  color: var(--scoutwhite);

  border: 2px solid var(--scoutpurple);
  border-radius: 8px;
  transition: all 0.25s ease; /* smooth hover */
}

.home-welcome-box-left .wp-block-button__link:hover {
  color: var(--scoutblack)!important;

  text-decoration: none;
}


.home-welcome-box-left h1 {
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
}

.home-welcome-box-left .wp-block-button {
  margin: 0;
}

.home-welcome-box-left p {
  font-size: 1.25rem;
  font-weight: 300;
  color: #ffffff;
}
.home-welcome-box-left p.lead {
  font-size: 1.85rem;
}

.home-welcome-box-right {
  float: right;
  width: 33.4%;
  background: #490499;
  flex: 0.4;
  flex-shrink: 0;
}

@media screen and (max-width: 374px) {
  .mob-search .donate {
    display: none;
  }
}

@media (max-width: 600px) {
  .wp-block-media-text.is-stacked-on-mobile figure {
    width: 30%;
  }

  .wp-block-media-text__content {
    padding: 0 !important;
  }
}

/*--------------------------------------------------------------
#  Section Links for home page 
--------------------------------------------------------------*/
/* Sections container */
.sections {
  width: 100%;
  color: var(--scoutwhite);
  padding: 0 1rem 4rem;
}

.container {
  max-width: var(--max-width, 1200px);
  margin: 0 auto;
  padding: 3rem 1rem;
}

/* Grid */
.section-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 2rem);
  justify-content: space-between;
}

/* Each box */
.section-grid .section {
  flex: 1 1 calc(25% - var(--gap, 2rem));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  background: var(--scoutwhite);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  color: var(--scoutpurple);
}

/* Section logo as background */
.section-logo {
  width: 100%;
  height: 120px;
  aspect-ratio: 1.6 / 1; /* adjust to SVG ratio */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 0;
}

/* Visually-hidden text for ARIA */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Section description */
.section p {
  flex: 1 1 auto;
  margin: 0 0 0.75rem;
}

/* Age styling */
.section p.age {
  margin: 0.5rem 0 0.75rem;
  font-weight: 300;
  min-height: 2rem;
  font-size: 1.5rem;
}

/* Buttons */
.section .button,
.button {
  display: inline-block;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  background: var(--scoutpurple);
  color: var(--scoutwhite);
  text-decoration: none;
  border: 2px solid var(--scoutpurple);
  transition: all 0.3s ease;
}

.section .button:hover,
.button:hover {
  background: var(--scoutwhite);
  color: var(--scoutpurple);
  border-color: var(--scoutpurple);
}
/*--------------------------------------------------------------
#  News Section
--------------------------------------------------------------*/
.news {
  background-color: var(--scoutwhite);
}

.news-wrapper {}

.post-grid {
    margin-right: 1rem;
    margin-left: 1rem;
    margin-bottom: 2rem;
    display: flex;
    flex: 30%;
    -webkit-box-pack: center;
    justify-content: center;
}

.post-box {}

/*--------------------------------------------------------------
#  Footer
--------------------------------------------------------------*/
.site-footer {
  background: var(--scoutpurple);
  color: var(--scoutwhite);
  margin-top: auto;
  border-top: 1px solid var(--scoutwhite);
  padding: 1rem 0;
  font-size: 0.85rem;
}

.site-footer .container {
  max-width: var(--max-width, 1200px);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center; /* <-- vertical centering */
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-logo img {
  width: 85px;
  height: auto;
  display: block;
}

.footer-info {
  flex: 1 1 300px;
  min-width: 250px;
  line-height: 1.4;
}

.footer-info p {
  margin: 0;
  opacity: 0.95;
}

.footer-info p + p {
  margin-top: 0.4rem;
}

.footer-info p a {
  color: var(--scoutpink);
}

.social {
  display: flex;
}

.social ul {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social img {
  width: 28px;
  height: auto;
  transition: opacity 0.2s ease-in-out;
}

.social img:hover {
  opacity: 0.8;
}

/* Mobile stacking */
@media (max-width: 700px) {
  .site-footer .container {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 1rem;
  }

  .footer-logo img {
    width: 100px;
  }

  .social {
    margin-top: 0.5rem;
  }
}


/*--------------------------------------------------------------
#  Landing Pages
--------------------------------------------------------------*/
.banner {
  min-height: 600px; /* adjust as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover; /* ensures full coverage */
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  color: #fff; /* or whatever fits design */
  position: relative;
}

.banner .wrap {
  width: 100%;
  max-width: 1200px; /* match main wrapper width */
  margin: 0 auto;
  padding: 2rem; /* optional padding */
}

.banner .intro h1 {
  font-size: 3rem; /* scale for desktop */
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .banner {
    min-height: 250px;
  }
  .banner .intro h1 {
    font-size: 2rem;
  }
}
.landing-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/*breadcrumbs*/
/* Breadcrumbs: shared styling */
.breadcrumbs {
  padding: 0.5rem 0;
}

/* Wrap matches main layout and spaces items correctly */
nav.breadcrumbs .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Override parent theme #breadcrumbs without breaking other styles */
nav.breadcrumbs .wrap #breadcrumbs {
  width: auto;          /* prevent stretching full width */
  display: flex;        /* stop inline-flex quirks */
  flex: 1;
  min-width: 0;         /* prevent squishing */
  overflow-x: auto;     /* allow horizontal scroll if long */
  white-space: nowrap;
}

/* Share button stays right, no squish */
nav.breadcrumbs .share-space {
  flex-shrink: 0;
  margin-left: 0.75rem;
  display: flex;
  align-items: center;
}




/*colours*/

.yellow {
  background-color: var(--scoutyellow);
}
.orange {
  background-color: var(--scoutorange);
}
.purple {
  background-color: var(--scoutpurple);
}
.red {
  background-color: var(--scoutred);
}
.pink {
  background-color: var(--scoutpink);
}
.blue {
  background-color: var(--scoutblue);
}
.grey {
  background-color: var(--scoutgrey);
}
.green {
  background-color: var(--scoutforestgreen);
}

.blue2 {
    background-color: var(--scoutdarkblue);
}

/*--------------------------------------------------------------
Section Landing Pages
--------------------------------------------------------------*/
.banner .intro h1 {
  font-size: clamp(3rem, 3vw, 3rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0;
  padding: 0;
  
  color: #fff;
  text-shadow:
    0 4px 12px rgba(0,0,0,0.65),
    0 2px 4px rgba(0,0,0,0.45);

  /* optional: subtle fade-in if you want */
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 1s ease-out forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

section.section-landing {}

section.section-landing .wrapper {
background:#fff;}

.section-block {
  padding: 2rem;
  margin-bottom: 2rem;

}

.section-block img {
  max-width: 100%;
  height: auto;
}

.section-block .wp-block-button .wp-block-button__link {
  background-color: #004080; /* example color */
  color: #fff;
}