/* === Troop 157 Override CSS Final Version v39=== */

/*********************/
/*****Font Import*****/
/*********************/

/* Load Google Fonts: Ubuntu, Inter & Merriweather */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&family=Inter:wght@400;600;700&family=Merriweather:wght@400;700&display=swap');


/* Color Variables */
:root {
  --troop-primary: #1f3b73;
  --troop-accent: #415d9a;
  --troop-bg: #e6ecf4;
  --troop-text: #222;
  --flamingo-pink: #ff5f91;
  --flamingo-highlight: #ffe6ef;
}
/* === Troop 157 Menu Bar Styling === */

/***********************************************/
/* Force Troop 157 styling over Florida preset */
/***********************************************/

/* === Troop 157 Menu Bar Direct Overrides === */

/* Top menu bar */
.navtable {
  background-color: #1f3b73 !important;   /* Troop navy blue */
  color: #ffffff !important;
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
}

/* Menu icon in corner */
.navicon {
  background-color: #1f3b73 !important;
  color: #ffffff !important;
}

/* Main menu links */
.navlink {
  color: #ffffff !important;
}
.navlink > a {
  color: #ffffff !important;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}
.navlink > a:hover,
.navlink > a:focus,
.navlink:hover,
.navlink:focus {
  text-decoration: underline !important;
  color: #ffe6ef !important;
  background-color: transparent !important;
}

/* Dropdown menu panels */
.navmenu > ul > li,
.navmenu,
.navmenulower > ul > li,
.navmenulower2 > ul > li,
.navmenulower3 > ul > li {
  background-color: #f8f9fa !important;  /* Light neutral panel */
  color: #222 !important;
}

/* Banner (only on home page) */
.banner-div {
  background-color: #1f3b73 !important;
}

/* === Troop 157 Menu Bar Styling End=== */

/* Typography and Body */
/* === Troop 157 Site Background and Wrappers === */
body,
#workArea,
#maincontainer,
#contentWrapper,
.customPageSection,
.maincontent {
  background-color: var(--troop-bg) !important;
}

/* Headings */
h1, h2, h3, h4 {
  font-family: 'Merriweather', serif;
  font-weight: 700;
  color: var(--troop-primary);
  margin-bottom: 12px;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }

/* Links */
a {
  color: var(--troop-primary);
  text-decoration: none;
  font-weight: 600;
}
a:hover {
  text-decoration: underline;
  color: #143059;
}

/* Layout: Section Cards */
.section-box {
  background-color: var(--troop-bg);
  padding: 24px;
  margin-bottom: 36px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 2px solid var(--troop-primary);
}
.section-box,
.section-box p,
.section-box ul,
.section-box ol,
.section-box li {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--troop-text);
}

/* Grid Layout for Camping Cards */
.camping-page-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  max-width: 100%;
}

/* Flex Cards for Sections */
.section-box.content-standard {
  flex: 1 1 480px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Table of Contents Styling */
.toc-table {
  border-collapse: collapse;
  margin: auto;
}
.toc-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
  font-size: 1.2rem;
}

/* Back to Top Styling */
.back-to-top {
  text-align: center;
  margin-top: 24px;
}
.back-to-top a {
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: 8px;
}
.back-to-top img {
  height: 24px;
  vertical-align: middle;
}

/* Multi-Column Lists */
ul.multi-column {
  columns: 2;
  column-gap: 32px;
  margin-left: 24px;
  font-size: 1.1rem;
  line-height: 1.6;
}
@media (max-width: 768px) {
  ul.multi-column {
    columns: 1;
  }
}

/* Image & Mascot Utilities */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.center-flex {
  display: flex;
  justify-content: center;
}

/* Flamingo Themed Blocks */
.flamingo {
  background-color: var(--flamingo-highlight);
  color: var(--flamingo-pink);
  border: 2px dashed var(--flamingo-pink);
  border-radius: 10px;
  padding: 20px;
  font-family: 'Merriweather', serif;
  font-size: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(255, 95, 145, 0.3);
  margin-bottom: 24px;
}

/* Buttons */
button {
  background-color: var(--troop-primary);
  color: #fff;
  border: none;
  padding: 8px 12px;
  margin: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
}
button:hover {
  background-color: #143059;
}

/*****Eagle Honor Roll*****/

/* Search Box */
#eagleSearch {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

/* Eagle Honor Card Grid */
.section-box .eagle-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  width: 100%;
}
.section-box .eagle-card {
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  flex: 1 1 280px;
  max-width: 400px;
  box-sizing: border-box;
}
.section-box .eagle-card:hover {
  transform: translateY(-3px);
}

/*****High Adventure Info Page Edits*****/

/* Adventure Card Grid */
.adventure-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  width: 100%;
  margin-top: 24px;
}
.adventure-card {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  flex: 1 1 300px;
  max-width: 400px;
  box-sizing: border-box;
  text-align: center;
}
.adventure-card img {
  max-height: 180px;
  width: 100%;
  object-fit: cover;
  object-position: center center;  /* ✅ This ensures the crop is centered */
  border-radius: 8px;
  margin-bottom: 12px;
  display: block;
}
.adventure-card h3 {
  font-size: 1.75rem;
  margin-top: 0;
  margin-bottom: 12px;
}
.adventure-card a {
  color: var(--troop-primary);
  text-decoration: none;
  font-weight: bold;
}
.adventure-card a:hover {
  text-decoration: underline;
}
.hidden { display: none; }
button:hover { transform: scale(1.05); 
}
.adventure-card:hover {
  box-shadow: 0 8px 20px rgba(31, 59, 115, 0.25);
  transform: scale(1.02);
  transition: 0.3s ease-in-out;
}
.hidden {
  display: none;
}
.adventure-card button {
  margin-top: 8px;
  padding: 6px 12px;
  background-color: var(--troop-accent);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}
.adventure-card button:hover {
  background-color: var(--troop-primary);
}
.adventure-card:hover {
  box-shadow: 0 8px 20px rgba(31, 59, 115, 0.25);
  transform: scale(1.02);
  transition: 0.3s ease-in-out;
}

#seabase {
  background-image: url('https://i.postimg.cc/MKHb5Z97/Untitled-design.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff; /* Optional: light text over background */
  padding: 40px 24px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.75);
}
/* Override for Sea Base card styling only */
#seabase .adventure-card {
  background-color: rgba(255, 255, 255, 0.95); /* Light background */
  color: #222; /* Dark readable text */
  border: 1px solid #ccc;
}

#seabase .adventure-card button {
  background-color: var(--troop-primary);
  color: white;
}

#seabase .adventure-card button:hover {
  background-color: #143059;
}
#seabase h2,
#seabase h3,
#seabase p {
  background-color: rgba(255, 255, 255, 0.85); /* Light background box */
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-block;
  color: #222;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Optional: soft drop shadow */
}
/* Northern Tier Section Background and Overlay */
#northerntier {
  background-image: url('https://i.postimg.cc/xT7TV3M4/Northern-Tier.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding: 40px 24px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.75); /* White overlay */
}

/* White card content stays readable */
#northerntier .adventure-card {
  background-color: rgba(255, 255, 255, 0.95);
  color: #222;
  border: 1px solid #ccc;
}

/* Buttons */
#northerntier .adventure-card button {
  background-color: var(--troop-primary);
  color: white;
}
#northerntier .adventure-card button:hover {
  background-color: #143059;
}

/* Readable Headers and Paragraphs */
#northerntier h2,
#northerntier h3,
#northerntier p {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-block;
  color: #222;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
#philmont {
  background-image: url('https://i.postimg.cc/L64NFz2L/Untitled-design-1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding: 40px 24px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.75);
}

#philmont h2,
#philmont h3,
#philmont p {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-block;
  color: #222;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

#philmont .adventure-card {
  background-color: rgba(255, 255, 255, 0.95);
  color: #222;
  border: 1px solid #ccc;
}

#philmont .adventure-card button {
  background-color: var(--troop-primary);
  color: white;
}
#philmont .adventure-card button:hover {
  background-color: #143059;
}
#summit {
  background-image: url('https://i.postimg.cc/L83xcNZt/Summit.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding: 40px 24px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.75);
}

#summit h2,
#summit h3,
#summit p {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-block;
  color: #222;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

#swampbase {
  background-image: url('https://i.postimg.cc/hPLFG8dj/Swamp-Base.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding: 40px 24px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.75);
}

#swampbase h2,
#swampbase h3,
#swampbase p {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-block;
  color: #222;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

#swampbase .adventure-card {
  background-color: rgba(255, 255, 255, 0.95);
  color: #222;
  border: 1px solid #ccc;
}

#swampbase .adventure-card button {
  background-color: var(--troop-primary);
  color: white;
}
#swampbase .adventure-card button:hover {
  background-color: #143059;
}

/*****TOC Updates*****/

.toc-table td {
  border: 2px solid var(--troop-primary);
  background-color: var(--flamingo-highlight);
  padding: 12px;
  border-radius: 8px;
  font-size: 1.3rem;
  font-weight: 600;
  transition: all 0.3s ease;
}
.toc-table td:hover {
  background-color: var(--flamingo-pink);
  color: white;
}

/* Table-header (original + clones) & links */

html body
  table.table-striped > thead > tr,
html body
  .fixedHeader-floating table.table-striped > thead > tr,
html body
  .dataTables_scrollHeadInner table.table-striped > thead > tr {
    background: var(--troop-primary) !important;
    background-image: none         !important;
    transition: none               !important;
}

html body
  table.table-striped > thead > tr > th,
html body
  .fixedHeader-floating table.table-striped > thead > tr > th,
html body
  .dataTables_scrollHeadInner table.table-striped > thead > tr > th {
    background: transparent !important;
    color:      #ffffff     !important;
}

html body
  table.table-striped > thead > tr > th a,
html body
  .fixedHeader-floating table.table-striped > thead > tr > th a,
html body
  .dataTables_scrollHeadInner table.table-striped > thead > tr > th a {
    color:           #ffffff !important;
    text-decoration: none    !important;
}

/***** Nav-Tabs (top & bottom) Overrides ******/

.nav-tabs > li > a,
.nav-tabs-bottom > li > a {
  color:            var(--troop-primary) !important;
  background-color: var(--troop-bg)      !important;
  border:           1px solid var(--troop-accent) !important;
  border-bottom-color: transparent !important;
}

.nav-tabs > li.active > a,
.nav-tabs-bottom > li.active > a {
  color:            #ffffff      !important;
  background-color: var(--troop-primary) !important;
  border-color:     var(--troop-primary) var(--troop-primary) transparent var(--troop-primary) !important;
}

.nav-tabs > li > a:hover,
.nav-tabs-bottom > li > a:hover {
  color:            #ffffff      !important;
  background-color: var(--troop-accent) !important;
}

/***** Button Color Overrides ******/

/* Primary buttons your primary blue */
.btn-primary {
  background-color: var(--troop-primary) !important;
  border-color:     var(--troop-primary) !important;
  color:            #ffffff           !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--troop-accent)  !important;
  border-color:     var(--troop-accent)  !important;
}

/* Success buttons flamingo pink */
.btn-success {
  background-color: var(--flamingo-pink)  !important;
  border-color:     var(--flamingo-pink)  !important;
  color:            #ffffff                !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
  background-color: var(--flamingo-highlight)  !important;
  border-color:     var(--flamingo-highlight)  !important;
}

/* Warning buttons your accent blue */
.btn-warning {
  background-color: var(--troop-accent) !important;
  border-color:     var(--troop-accent) !important;
  color:            #ffffff           !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
  background-color: var(--troop-primary) !important;
  border-color:     var(--troop-primary) !important;
}

/* Info, Danger & Default buttons you can tweak these as needed */
.btn-info {
  background-color: var(--troop-bg)      !important;
  border-color:     var(--troop-primary) !important;
  color:            var(--troop-primary) !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
  background-color: var(--troop-accent) !important;
  border-color:     var(--troop-accent) !important;
  color:            #ffffff           !important;
}

/* Danger buttons → troop primary blue */
.btn-danger {
  background-color: var(--troop-primary)   !important;
  border-color:     var(--troop-primary)   !important;
  color:            #ffffff                !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
  background-color: var(--troop-accent)    !important;
  border-color:     var(--troop-accent)    !important;
  color:            #ffffff                !important;
}


.btn-default {
  background-color: #f8f9fa !important;
  border-color:     #ddd     !important;
  color:            #333     !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
  background-color: #e6e6e6 !important;
  border-color:     #adadad !important;
}

/***** Meeting Address *****/

#meeting-address .embed-responsive {
  box-shadow:      0 4px 12px rgba(0,0,0,0.1);
  border-radius:   8px;
  overflow:        hidden;
  margin-top:      24px;
}
#meeting-address .embed-responsive iframe {
  border:          0;
}

/***** Force the meeting map to be taller *****/

#meeting-address .embed-responsive.embed-responsive-16by9 {
  padding-bottom: 0 !important;   /* cancel the 56.25% ratio hack */
  height:        600px !important; /* pick your desired height */
  overflow:      hidden;           /* keep it neat */
}

#meeting-address .embed-responsive.embed-responsive-16by9 > .embed-responsive-item,
#meeting-address .embed-responsive.embed-responsive-16by9 iframe {
  width:  100% !important;
  height: 100% !important;
}

/*OPTION A JOIN BANNER Top of Pages*/
/***** Join-Us Call-Out Card (Option A Level Up)*****/
#join-card {
  /* use your existing section-box styling */
  padding: 0;      /* we’ll handle inner spacing */
  margin-top: 40px;
  background: none; /* remove duplicate bg if section-box adds one */
  border: none;
}

#join-card .join-card-flex {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  gap:             24px;
  padding:         32px;
  background-color: var(--flamingo-highlight);
  border:          2px dashed var(--flamingo-pink);
  border-radius:   12px;
  box-shadow:      0 6px 18px rgba(0,0,0,0.08);
}

.join-card-img {
  flex:            0 0 120px;
  width:           120px;
  height:          auto;
  border-radius:   8px;
}

.join-card-content {
  flex:            1 1 auto;
}

.join-card-content h2 {
  margin:          0 0 12px;
  color:           var(--troop-primary);
  font-size:       2rem;
  font-family:     'Merriweather', serif;
}

.join-card-content p {
  margin:          0 0 16px;
  font-size:       1.2rem;
  color:           var(--troop-text);
}

.join-card-content a.btn-primary {
  background-color: var(--troop-primary) !important;
  border-color:     var(--troop-primary) !important;
  color:            #ffffff           !important;
  font-size:        1.1rem;
  padding:          10px 18px;
  border-radius:    6px;
  box-shadow:       0 4px 12px rgba(0,0,0,0.1);
  transition:       transform 0.2s ease, box-shadow 0.2s ease;
}

.join-card-content a.btn-primary:hover {
  background-color: var(--troop-accent)   !important;
  border-color:     var(--troop-accent)   !important;
  transform:        translateY(-2px);
  box-shadow:       0 8px 20px rgba(31,59,115,0.2);
}
/* Center the CTA button in the join-card */
.join-card-content a.btn-primary {
  display: block !important;
  margin: 16px auto 0 !important;
}
/* Join-Card: Mobile friendly column layout */
@media (max-width: 600px) {
  /* Stack image above text, center everything */
  #join-card .join-card-flex {
    flex-direction: column !important;
    align-items:    center  !important;
    text-align:     center  !important;
  }

  /* Give the flamingo some breathing room */
  #join-card .join-card-img {
    margin-bottom: 16px !important;
  }

  /* Center the CTA button under the paragraph */
  #join-card .join-card-content a.btn-primary {
    display: block !important;
    margin:  16px auto    !important;
  }
}


/*****OPTION B BANNER Bottom of Page******/

#site-join-banner {
  background-color: var(--troop-primary);
  color:            #fff;
  text-align:       center;
  padding:          8px;
  font-size:        1.1rem;
}
#site-join-banner a {
  color:            #fff;
  text-decoration:  none;
  font-weight:      600;
}
#site-join-banner a:hover {
  text-decoration:  underline;
  color:            var(--flamingo-highlight);
}
/* === Join-Us Banner with Icon === */
#site-join-banner {
  background-color: var(--troop-primary);
  color:            #fff;
  text-align:       center;
  padding:          8px 16px;
  font-size:        1.1rem;
}
#site-join-banner a {
  color:            #fff;
  text-decoration:  none;
  font-weight:      600;
  display:          inline-flex;
  align-items:      center;
  gap:              8px;
}
#site-join-banner a:hover {
  text-decoration:  underline;
  color:            var(--flamingo-highlight);
}

/* Icon sizing */
#site-join-banner .join-icon {
  width:            32px;    /* adjust size as needed */
  height:           auto;
  border-radius:    4px;     /* optional, for a softer look */
}

/* Round the corners of the persistent Join-Us banner */
#site-join-banner {
  border-radius: 12px;   /* match your site’s standard rounding */
  overflow: hidden;      /* ensure child elements don’t spill the corners */
  margin: 24px 0;        /* optional: give it vertical breathing room */
}

#site-join-banner {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/***************************************************/
/*****Committee Section Grid & Bright Styling*****/
/***************************************************/

#committee {
  background:        #ffffff;                     /* white card */
  border-left:       2px solid var(--troop-accent);
  padding:           32px;
  margin:            40px auto;
  box-shadow:        0 8px 20px rgba(0,0,0,0.05);
  max-width:         1100px;                      /* caps the width on large screens */
  border-radius:     12px;
}

/* Committee uses Ubuntu */
#committee,
#committee h2,
#committee h3,
#committee p,
#committee ul li {
  font-family: 'Ubuntu', sans-serif !important;
}

/* Make the image responsive & framed */
#committee .committee-img {
  width:             80%;                         /* fills col on small */
  max-width:         300px;                       /* caps at desktop */
  border-radius:     8px;
  box-shadow:        0 4px 12px rgba(0,0,0,0.1);
  display:           inline-block;
}

/* Tighten up the list & text */
#committee ul {
  margin-top:        16px;
  margin-bottom:     16px;
  padding-left:      1.25rem;
}

/*****Flamingo call-out: image on left, text on right *****/

/* Flamingo Call-Out as its Own Card + Flex Layout */
.section-box > .flamingo {
  display:         flex !important;
  flex-wrap:       nowrap !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             16px !important;

  background-color: var(--flamingo-highlight);
  border:           2px dashed var(--flamingo-pink);
  padding:          16px          !important; /* ↓ reduced from 24px */
  border-radius:    12px;
  text-align:       left   !important;
  margin:           16px 0 !important; /* less gap inside the card */
  box-shadow:       0 8px 20px rgba(0,0,0,0.05) !important; /* ↑ match #committee */
}

/* Flamingo Section wrapper (same as Committee) */
/* Shrink the white “gutter” around the pink */
#committee-flamingo {
  max-width:      1100px;
  margin:         8px auto;   /* less white above/below */
  padding:        16px;        /* down from 32px */
  box-shadow:     0 8px 20px rgba(0,0,0,0.05); !important;
  border-radius:  12px;
  border:         2px solid var(--troop-primary);
  background:     #ffffff;
}

/* Flamingo Call-out Layout (flex row) */
#committee-flamingo .flamingo {
  display:        flex !important;
  align-items:    center !important;
  gap:            16px !important;
  text-align:     left !important;
}

/* Flamingo Image: 110px perfect circle */
.section-box > .flamingo-img,
#committee-flamingo .flamingo-img {
  flex:           0 0 auto !important;
  width:          110px        !important; /* ↑ increased from 100px */
  height:         110px        !important;
  object-fit:     cover;
  border-radius:  50%          !important; /* perfect circle */
  box-shadow:     0 2px 6px rgba(0,0,0,0.1);
  margin:         0            !important;
}

/*****Moving Committee Patch Properly*****/

/* 1) Make the Committee a flex container so the patch sits at the top */
#committee .row.align-items-start {
  display:        flex !important;
  align-items:    flex-start !important;
  gap:            24px;            /* optional, adds space between columns */
}

/* 2) Restore margin above the Flamingo call-out box */
#committee .flamingo {
  margin-top:     36px !important; /* same spacing you had before */
}

/*****Committee Buckets Layout & Styling*****/
#committee .committee-buckets {
  display:        flex;
  flex-wrap:      wrap;
  gap:            24px;
  margin-top:     24px;
}

#committee .committee-buckets .bucket {
  flex:           1 1 280px;               /* grow/shrink responsively */
  background:     #f8f9fa;                 /* very light gray */
  border:         1px solid var(--troop-accent);
  border-radius:  8px;
  padding:        16px;
  box-shadow:     0 2px 6px rgba(0,0,0,0.05);
}

#committee .committee-buckets .bucket h4 {
  margin-top:     0;
  margin-bottom:  8px;
  font-family:    'Ubuntu', sans-serif;
  font-size:      1.25rem;
  color:          var(--troop-primary);
}

#committee .committee-buckets .bucket p {
  margin:         0;
  font-size:      1rem;
  line-height:    1.6;
  color:          var(--troop-text);
}
  
/* Bucket Icons */
.bucket-icon {
  width:          24px;    /* or 28px if you want slightly larger */
  height:         auto;
  vertical-align: middle;
  margin-right:   8px;
}

/****************************************************/
/*****Sponsor Section and Stack & Center on Mobile*****/
/****************************************************/

/* Sponsor-Flex: Desktop & Mobile Reset */

/* Desktop defaults: two-column flex, proper spacing */
.section-box.sponsor-flex {
  display:        flex           !important;
  flex-wrap:      wrap           !important;
  align-items:    flex-start     !important;
  gap:            24px           !important;
  padding:        24px           !important;
  margin:         0 auto 36px    !important; /* 36px bottom gutter */
}

/* Mobile (<600px): single-column, centered, no bottom white-space */
@media (max-width: 600px) {
  .section-box.sponsor-flex {
    display:        block         !important;
    padding:        12px          !important;
    margin:         0 auto        !important; /* zero top/bottom */
    text-align:     center        !important;
  }
  .section-box.sponsor-flex img.img-responsive {
    display:        block         !important;
    margin:         0 auto 12px   !important;
    width:          80%           !important;
    max-width:      120px         !important;
  }
  .section-box.sponsor-flex .content-standard p {
    margin:         0 0 8px       !important;
  }
  .section-box.sponsor-flex .content-standard p:last-child {
    margin-bottom:  0             !important;
  }
}
/* 1) Remove bottom gutter on all screen sizes */
.section-box.sponsor-flex {
  margin-bottom: 0 !important;
}

/* 2) Reinstate the 36px gutter on tablets & up */
@media (min-width: 601px) {
  .section-box.sponsor-flex {
    margin-bottom: 36px !important;
  }
}

/*Designed to catch picture on mobile and scale properly*/
@media (max-width: 600px) {
  /* Stop inline max-width from breaking images in content-standard boxes */
  .section-box.content-standard img.img-responsive {
    max-width: 100%   !important;
    width:     auto    !important;
    height:    auto    !important;
  }
}
/*This fixes the back to top arrow scaling issue on mobile*/
@media (max-width: 600px) {
  /* Force the back-to-top arrow to stay small */
  .back-to-top img.img-responsive {
    max-width: 24px   !important;
    width:     24px   !important;
    height:    auto   !important;
  }
}
@media (max-width: 600px) {
  /* Target back-to-top arrow inside any content-standard card */
  .section-box.content-standard .back-to-top img.img-responsive {
    max-width: 24px    !important;
    width:     24px    !important;
    height:    auto    !important;
  }
}

/*This is to fix the images on high adventure page TOC and Footer*/
@media (max-width: 600px) {
  /* 1) TOC flamingo icon: clamp to 24px and center under the link */
  .section-box.content-standard .toc-table td a img.img-responsive {
    display:    block       !important;
    margin:     0 auto 4px  !important;
    width:      24px        !important;
    height:     auto        !important;
    max-width:  none        !important;
  }

  /* 2) All main images (packing list, Summit, Philmont, etc): scale to card width */
  .section-box.content-standard img.img-responsive {
    display:    block       !important;
    margin:     0 auto 12px !important;
    max-width:  100%        !important;
    width:      auto        !important;
    height:     auto        !important;
  }

  /* 3) “Flair” flamingo under each section header: max-height 60px, centered */
  .section-box.content-standard .center-flex > img.img-responsive {
    display:    block       !important;
    margin:     8px auto    !important;
    max-height: 60px        !important;
    width:      auto        !important;
    height:     auto        !important;
  }

  /* 4) Footer icon in your center-flex footer: max-width 32px, stack & center text */
  footer.section-box.center-flex {
    display:        flex      !important;
    flex-direction: column   !important;
    align-items:    center    !important;
    text-align:     center    !important;
  }
  footer.section-box.center-flex img.img-responsive {
    display:    block       !important;
    margin:     0 auto 8px  !important;
    max-width:  32px        !important;
    width:      auto        !important;
    height:     auto        !important;
  }
}

/*To try and fix mobile troop committee patch size*/
@media (max-width: 600px) {
  /* Stack the patch above the copy and center it */
  #committee .row.align-items-start {
    display:         flex      !important;
    flex-direction:  column    !important;
    align-items:     center    !important;
    text-align:      center    !important;
    gap:             16px      !important;
  }

  /* Give the image a bit more breathing room and size */
  #committee .row.align-items-start > div:first-child {
    margin-bottom:   16px     !important;
  }
  #committee .committee-img {
    width:           60%      !important;   /* or try 70% */
    max-width:       200px    !important;   /* bump up from 300→200 for mobile */
    height:          auto     !important;
  }
}

/*This is fixing flamingo on Handbook page*/
/* ---------------------------------------------------
   Handbook page: desktop = image-left, mobile = stacked
   --------------------------------------------------- */
/* 1) Desktop: keep flamingo at left of text */
#handbook .flamingo {
  display:        flex         !important;
  align-items:    center       !important;
  gap:            16px         !important;
  text-align:     left         !important;
}

/* Ensure the image keeps its chosen size and doesn’t shrink too much */
#handbook .flamingo img.img-responsive {
  flex:           0 0 auto     !important;
  width:          120px        !important;
  height:         auto         !important;
  margin:         0            !important;
}

/* 2) Mobile (≤600px): stack the image above and center everything */
@media (max-width: 600px) {
  #handbook .flamingo {
    flex-direction: column    !important;
    align-items:    center    !important;
    text-align:     center    !important;
  }
  #handbook .flamingo img.img-responsive {
    margin-bottom:  8px       !important;
  }
}

/****************************************/
/*****This is for the Handbooks page*****/
/****************************************/

/* ------------------------------- */
/* Handbook Hero Header Styling   */
/* ------------------------------- */
#handbook-header {
  max-width:   1100px;
  margin:      0 auto 24px;
  padding:     24px;
  background:  #fff;
  border:      2px solid var(--troop-primary);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
#handbook-header h2 {
  font-family: 'Merriweather', serif;
  font-size:   2.5rem;
  color:       var(--troop-primary);
  margin:      0 0 8px;
}
#handbook-header p {
  font-family: 'Inter', sans-serif;
  font-size:   1.5rem;
  color:       var(--troop-text);
  font-style:  italic;
  margin:      0;
}

/* ------------------------------- */
/* Handbook Cards Grid            */
/* ------------------------------- */
.handbook-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:                   24px;
  max-width:             1100px;
  margin:                0 auto;
}

/* ------------------------------- */
/* Individual Handbook Card       */
/* ------------------------------- */
.handbook-card {
  background:     #fff;
  border:         2px solid var(--troop-primary);
  border-radius:  12px;
  box-shadow:     0 4px 12px rgba(0,0,0,0.08);
  padding:        24px 16px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  font-family:    'Inter', sans-serif;
  font-size:      1.5rem; /* base copy size */
}

.handbook-card img.img-responsive {
  width:        100%;
  max-width:    100%;
  max-height:   180px;
  object-fit:   cover;
  border-radius: 8px;
  margin-bottom: 16px;
}

.handbook-card h3 {
  font-family: 'Merriweather', serif;
  font-size:   2rem;
  color:       var(--troop-primary);
  margin:      0 0 12px;
}

.handbook-card p {
  flex:         1 1 auto;
  margin:       0 0 16px;
  color:        var(--troop-text);
}

.handbook-card a.btn {
  margin-top: auto;
  font-size:  1rem;
}

/* ------------------------------- */
/* Flamingo Call-Out at Bottom     */
/* ------------------------------- */
#handbook .flamingo {
  background-color: var(--flamingo-highlight);
  border:           2px dashed var(--flamingo-pink);
  border-radius:    12px;
  padding:           24px;
  margin:            32px auto 0;
  max-width:         1100px;
  font-family:      'Inter', sans-serif;
  font-size:        1.5rem;  /* match card copy */
  color:            var(--troop-text);
  box-shadow:       0 4px 12px rgba(0,0,0,0.08);
}

#handbook .flamingo img {
  width:        100px;
  height:       auto;
  border-radius: 50%;
  margin-bottom: 12px;
}

/* ------------------------------- */
/* Troop PLC Planning Cards Grid            */
/* ------------------------------- */
.agenda-card {
  width: 100%;
  max-width: 100%;
  margin: 0 0 24px 0;
  box-sizing: border-box;
}