/* --- Girl Scout Troop 252: Brand fonts --- */
@font-face{
  font-family: "TrefoilSansNav";
  src: url("/etc/trefoilsans-nav.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "TrefoilSans";
  src: url("/etc/trefoilsans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "TrefoilSans";
  src: url("/etc/trefoilsans-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Use brand font site-wide (optional but nice) */
body { font-family: "TrefoilSans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }

/* Girl Scout official colors */
:root{
  --gs-dark:  #005640;
  --gs-med:   #00b451;
  --gs-light: #d5f267;
}

/* Navbar theming */
.gs-navbar{
  background: var(--gs-dark);
}

/* Make the hamburger icon visible on dark green */
.gs-navbar .navbar-toggler{
  border-color: rgba(213, 242, 103, 0.65);
}
.gs-navbar .navbar-toggler-icon{
  filter: invert(1);
  opacity: 0.95;
}

/* Nav font */
.gs-nav-font{
  font-family: "TrefoilSansNav", "TrefoilSans", system-ui, sans-serif;
}

/* Link colors + active state */
.gs-navbar .navbar-brand,
.gs-navbar .nav-link{
  color: rgba(213, 242, 103, 0.92); /* light */
}

.gs-navbar .nav-link:hover,
.gs-navbar .navbar-brand:hover{
  color: #ffffff;
}

.gs-navbar .nav-link.active{
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-color: var(--gs-light);
}

/* Optional: give anchor focus a nice outline for accessibility */
.gs-navbar .nav-link:focus-visible,
.gs-navbar .navbar-brand:focus-visible{
  outline: 3px solid var(--gs-light);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* --- Hero / Banner under navbar --- */
.gs-hero{
  background:
    linear-gradient(
      180deg,
      var(--gs-dark) 0%,
      var(--gs-med) 100%
    );
  color: #ffffff;
  border-bottom: 4px solid var(--gs-light);
}

.gs-hero-title{
  font-family: "TrefoilSans", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.gs-hero-subtitle{
  font-family: "TrefoilSans", system-ui, sans-serif;
  opacity: 0.9;
}

/* --- Calendar styling --- */
.gs-cal-head th{
  background: var(--gs-dark);
  color: #fff;
  font-family: "TrefoilSansNav","TrefoilSans",system-ui,sans-serif;
  font-weight: 600;
  border-color: rgba(255,255,255,0.15);
}

.gs-cal-table{
  table-layout: fixed;
}

.gs-cal-cell{
  vertical-align: top;
  padding: .5rem;
  overflow: hidden;
}

/* Only make cells tall on larger screens */
@media (min-width: 768px){
  .gs-cal-cell{ height: 7.5rem; }
}
@media (max-width: 576px){
  .gs-cal-cell{ height: 3.5rem; padding: .2rem; }
}

.gs-cal-daynum{
  font-weight: 600;
  line-height: 1;
  margin-bottom: .25rem;
}

.gs-cal-today{
  display: inline-block;
  padding: .2rem .45rem;
  border-radius: .5rem;
  background: var(--gs-light);
  color: #1b1b1b;
}

.gs-cal-event{
  background: var(--gs-med);
  color: #0b251a;
  display: block;              /* each event takes a line and wraps */
  width: 100%;
  white-space: normal;         /* allow wrapping */
  text-align: left;
  padding: .35rem .5rem;
  line-height: 1.2;
  overflow-wrap: anywhere;     /* breaks long words/URLs */
  word-break: break-word;      /* fallback */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;       /* show up to 3 lines */
  overflow: hidden;
}

.gs-cal-event:hover{
  filter: brightness(0.95);
}

/* Events accordion GS theming */
.accordion-button:not(.collapsed){
  background: rgba(0, 180, 81, 0.12); /* gs-med tint */
  color: #0b251a;
}
.accordion-button:focus{
  box-shadow: 0 0 0 .25rem rgba(213, 242, 103, 0.45); /* gs-light */
  border-color: var(--gs-light);
}

/* Gallery thumbnails */
.gs-gallery-thumb{
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Keep titles tidy */
.gs-gallery-title{
  overflow-wrap: anywhere;
}

/* Cookie page call-to-action */
.gs-cookie-cta{
  border-left: 6px solid var(--gs-light);
  background: linear-gradient(0deg, rgba(213,242,103,0.25), rgba(0,180,81,0.25) 60%);
}

/* Cookie ordering accordion theming */
#pendingOrdersAccordion .accordion-button:not(.collapsed){
  background: rgba(0, 180, 81, 0.12);
  color: #0b251a;
}

/* Make sure cells don’t look vertically padded/centered */
.gs-cal-cell { vertical-align: top; }

/* Tighten the calendar on phones */
@media (max-width: 576px) {
  .gs-cal-table td.gs-cal-cell { padding: .2rem; }
  .gs-cal-daynum { font-size: .85rem; margin-bottom: .1rem; }
  .gs-dots { margin-top: .1rem; }
  .gs-dot { width: .45rem; height: .45rem; margin: .05rem; }
}

.gs-pills .gs-pill{
  display: inline-block;
  max-width: 100%;
  background: var(--pill-color);
  color: #fff;
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Calendar dots (mobile) --- */
.gs-dots{
  margin-top: .20rem;
  line-height: 0;
}

.gs-dot{
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: var(--dot-color);
  margin: .08rem;
  text-decoration: none;
}


