/* 
  Scouting Without Borders - styles.css
  -----------------------------------
  This file contains small style tweaks on top of Bootstrap.
  Keep it short so it’s easy to understand and maintain.
*/

/* 1) Theme colors (edit these to change the whole site) */
:root{
  --swb-green: #0f3b2e;  /* dark green */
  --swb-brown: #3b2a1a;  /* dark brown */
  --swb-cream: #f6f2ea;  /* soft background */
}

/* 2) Fonts */
body{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.display-font{
  font-family: "Playfair Display", Georgia, serif;
}

/* 3) Helper classes used in the HTML */
.bg-swb-green{ background: var(--swb-green) !important; }
.text-swb-brown{ color: var(--swb-brown) !important; }
.bg-swb-soft{ background: var(--swb-cream); }

.link-muted{
  color: rgba(0,0,0,.55);
  text-decoration: none;
}
.link-muted:hover{
  color: rgba(0,0,0,.85);
  text-decoration: underline;
}

/* 4) Button style */
.btn-swb{
  /* These are Bootstrap button CSS variables */
  --bs-btn-bg: var(--swb-green);
  --bs-btn-border-color: var(--swb-green);
  --bs-btn-hover-bg: #0c2f25;
  --bs-btn-hover-border-color: #0c2f25;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}

/* 5) Small UI polish */
.card-hover{
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-hover:hover{
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08);
}

.badge-soft{
  background: rgba(59,42,26,.10);
  color: var(--swb-brown);
  border: 1px solid rgba(59,42,26,.18);
}

/* A gentle background for the home hero */
.hero-gradient{
  background: linear-gradient(180deg, rgba(246,242,234,.9), rgba(246,242,234,0));
}
/* =========================
   HOME PAGE HERO SECTION
   =========================
   This hero uses a background image (fully opaque),
   and a semi-transparent gray box behind the text.
*/

.hero{
  /* Background image (fully visible / opaque) */
  background-image: url("../img/hero.png");
  background-size: cover;
  background-position: center;

  /* Height of the hero area */
  min-height: 70vh;

  /* Center the content */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Small padding so content is not glued to edges on mobile */
  padding: 3rem 0;
}

/* The gray readable box */
.hero-overlay{
  background-color: rgba(128, 128, 128, 0.45); /* gray with 45% transparency */
  padding: 2rem 2.5rem;
  border-radius: 12px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto; /* center the gray box on large screens */
}

/* Make the text pop on top of the photo */
.hero-overlay h1,
.hero-overlay p{
  color: #fff;
}

/* Slightly smaller padding on small screens */
@media (max-width: 576px){
  .hero-overlay{
    padding: 1.25rem 1.25rem;
  }
}



/* Small logo in the navbar (top-left) */
.swb-logo {
  height: 48px; /* 60% of 80px header */
  width: auto;
  object-fit: contain;
}


/* =========================
   CONTACT PAGE BOXES
   =========================
   These small helpers make the contact page match the "boxed" style.
*/
.contact-box{
  position: relative; /* needed for .stretched-link */
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

.contact-box-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(15,59,46,.10); /* soft green tint */
  color: var(--swb-green);
  font-size: 20px;
}

/* Small icon pill used in the right-side cards */
.contact-pill{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  background: rgba(15,59,46,.10);
  color: var(--swb-green);
}

.contact-right-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.15);
  font-size: 20px;
}


/* =========================
   NAVBAR SIZE + STICKY HEADER
   =========================
   We make the header 80px tall and keep it on screen when you scroll.
*/
body{
  /* This prevents the fixed header from covering the top of the page content */
  padding-top: 80px;
}

.navbar.navbar-swb{
  min-height: 80px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}



.hero .container{
  /* On large screens, Bootstrap's .container has a max-width.
     This line centers the gray box inside that container. */
  display: flex;
  justify-content: center;
}



/* Home page: Upcoming Events button color */
.btn-upcoming{
  background-color: #E98C37;
  border-color: #E98C37;
  color: #fff;
}
.btn-upcoming:hover{
  background-color: #d97c20;
  border-color: #d97c20;
  color: #fff;
}

/* =========================
   ABOUT PAGE STYLING
   (Adds gentle color so the page feels less bland)
   ========================= */

/* Soft background band behind the first section */
.about-band {
  background-color: #F4F6F3; /* light sage / gray */
  padding: 4rem 0;
}

/* Green headings for a Scout feel */
.section-title {
  color: var(--swb-green);
}

/* Small orange line under headings */
.section-divider {
  width: 60px;
  height: 3px;
  background-color: #E98C37; /* warm accent */
  margin: 0.75rem 0 1.5rem;
}

/* Keep the logo from getting too huge on big screens */
.about-logo {
  max-width: 420px;
  width: 100%;
  height: auto;
}


/* =========================
   MEMBERS PAGE
   ========================= */

   .member-box {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.25rem;
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }
  
  .member-box h5 {
    color: #1F3D2B; /* Scout green */
  }
  




/* =========================
   EVENTS PAGE (GOOGLE CALENDAR)
   ========================= */

/* A simple responsive box for the calendar iframe */
.calendar-embed {
  width: 100%;
  height: 70vh;      /* scales with screen height */
  min-height: 600px; /* keeps it readable on desktop */
}

.calendar-embed iframe {
  width: 100%;
  height: 100%;
}