@charset "utf-8";
/* CSS Document */

/* Keep every page’s content readable on wide screens        */
/* and still flexible on phones                              */
/* Typography inside the main content column ------------- */
/* 1.  Site-wide (or main-column) base font  ------------------ */
/* ---------- Base body copy inside <main> ---------- */
#main {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;

  /* 0.95 rem on tiny screens → 1.25 rem on big monitors */
  font-size: clamp(0.95rem, 0.75rem + 1vw, 1.25rem);

  line-height: 1.65;
  color: #333;
}

/* ---------- Headings inside the article column ---------- */
#main h1,
#main h2,
#main h3 {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

/* h1: 1.8 rem → 2.2 rem */
#main h1 {
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.2rem);
  margin-top: 0;
}

/* h2: 1.45 rem → 1.8 rem */
#main h2 {
  font-size: clamp(1.45rem, 1.0rem + 1.6vw, 1.8rem);
  margin-top: 2.5rem;
}

/* h3: 1.2 rem → 1.45 rem */
#main h3 {
  font-size: clamp(1.2rem, 0.9rem + 1.1vw, 1.45rem);
  margin-top: 2rem;
}
#main p,
#main li {                /* <— add this line */
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(0.95rem, 0.75rem + 1vw, 1.25rem);
  line-height: 1.65;
  color: #333;
}
#main ul li + li,
#main ol li + li {
  margin-top: 0.6rem;   /* tweak to taste (e.g., 0.4–0.8rem) */
}
/* Navigation bar */
.site-header{
  position:fixed;        /* sits on top of hero */
  top:0; left:0; width:100%;
  background:#111;       /* opaque after scroll */
  z-index:1000;
  padding:0.75rem 2rem;
  display:flex;align-items:center;
}
body{margin:0;}          /* kill default body margin */
.site-nav{
  display:flex;
  gap:1.5rem;
  align-items:center;
  font-size:1rem;
  font-weight:600;
}
.site-nav a{
  color:#fff;
  text-decoration:none;
}
.site-nav a:hover{text-decoration:underline;}

/* ---------- BASE NAVIGATION ---------- */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #222;
  padding: 0.75rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.main-nav .logo {
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  text-decoration: none;
}
/* hide hamburger on desktop */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.75rem;
  cursor: pointer;
}
/* inline desktop links */
.nav-links {
  display: flex;
  gap: 1.5rem;
}
.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}
.nav-links a:hover {
  color: #28a745;
}
/* close button (only shows in mobile) */
.close-menu {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.75rem;
  cursor: pointer;
}

/* ---------- MOBILE OVERLAY MENU ---------- */
@media (max-width: 600px) {
  /* show hamburger */
  .menu-toggle {
    display: block;
  }

  /* hide inline links, turn into full-screen drawer */
  .nav-links {
    display: none;
    position: fixed;
    inset: 0;  /* shorthand for top/right/bottom/left = 0 */
    background: #222;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    z-index: 1000;
  }
  /* show when toggled */
  .nav-links.open {
    display: flex;
  }
  /* tappable full-width links */
  .nav-links a {
    width: 100%;
    text-align: center;
    padding: 1rem 0;
    border-top: 1px solid #333;
    font-size: 1.25rem;
  }
  /* close "✕" button inside the drawer */
  .close-menu {
    display: block;
    position: absolute;
    top: 1rem;
    right: 1rem;
  }
}

/* ---------- HERO ---------- */
.hero{
  max-width:none !important;   /* override 900 px */
  margin:0;                    /* kill any side gaps */
  background:linear-gradient(135deg,#1e2532 0%, #3a465e 100%);
  color:#fff;
  padding:7rem 2rem 5rem;      /* top pad = nav height + air */
  box-sizing:border-box;       /* include padding in width calc */
}

/* Optional border reset if framework adds auto padding */
.hero:first-of-type{margin-top:0;}

/* Content cap INSIDE the hero */
.hero-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:3rem;
}
.hero-logo{max-width:280px;flex:0 0 280px;}
.hero-copy h1{font-size:3rem;line-height:1.2;margin:0 0 .5rem;}
.hero-copy p{font-size:1.25rem;margin:0;}
.hero-image img {
  width: 100%;
  max-width: 350px;
  height: auto;
  display: block;
}
.hero-text h1 {
  margin: 0;
  font-size: 2.5rem;
}
.hero-text p {
  margin-top: 0.5rem;
  font-size: 1.1rem;
}

/* stack hero on mobile and shrink image */
@media (max-width: 600px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }
  .hero-image,
  .hero-text {
    width: 100%;
  }
  .hero-image img {
    max-width: 180px;
    margin: 0 auto;
  }
}

html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f8f9fa;
  color: #333;
}

/* Rest of your styles remain unchanged */
section {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.accordion {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.accordion-header {
  padding: 1.2rem 1.2rem;
  cursor: pointer;
  background-color: #F7F7F7;
        padding: 22px;
                font-size: 22px;
                font-weight: 300;                                                                                                                                                                                                                                                                                                                                                                                                              

  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Add arrow indicator to main accordion headers */
.accordion-header::after {
  content: "▼";
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

/* Rotate arrow when accordion is open */
.accordion-header.active::after {
  transform: rotate(180deg);
}

.accordion-body {
  overflow: hidden;
  background-color: #fff;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0;
  max-height: 0;
  /* Added to prevent horizontal scrollbars on mobile */
  width: 100%;
  box-sizing: border-box;
}
.accordion-body.open {
  max-height: none !important;
  padding: 1rem;
}
.sub-toggle {
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  color: #555;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ccc;
  padding: 0.75rem 0;
}
.sub-toggle span.arrow {
  margin-left: 1rem;
}
.sub-content {
  overflow: hidden;
  transition: max-height 0.6s ease;
  padding: 0;
  max-height: 0;
}
.sub-content.open {
  max-height: 5000px !important;
  padding: 0.5rem 0;
}

.accordion-header,
.sub-toggle,
.sub2-toggle,
.sub3-toggle,
.sub4-toggle,
.sub5-toggle {       
  transition: border-left .2s ease, padding-left .2s ease;
  border-left: 3px solid transparent;
}

.accordion-header:hover,
.sub-toggle:hover,
.sub2-toggle:hover,
.sub3-toggle:hover,
.sub4-toggle:hover, 
.sub5-toggle:hover {
  border-left: 3px solid #28a745;
  padding-left: 5px;
}

.cta {
  text-align: center;
  padding: 3rem 1rem;
  background-color: #343a40;
  color: #fff;
}
.cta a {
  background: #28a745;
  color: white;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  display: inline-block;
  margin-top: 1rem;
}

/* Policy styling */
.policy-intro {
  background-color: rgba(40, 167, 69, 0.05);
  border-left: 3px solid #28a745;
  padding: 1.2rem;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  line-height: 1.7;
}

.policy-details {
  background-color: rgba(0, 123, 255, 0.05);
  border-left: 3px solid #007bff;
  padding: 1.2rem;
  margin: 1rem 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

.policy-examples {
  background-color: rgba(255, 193, 7, 0.05);
  border-left: 3px solid #ffc107;
  padding: 1.2rem;
  margin: 1rem 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

.policy-sources {
  background-color: rgba(108, 117, 125, 0.05);
  border-left: 3px solid #6c757d;
  padding: 1.2rem;
  margin: 1rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Secondary and tertiary toggles */
.sub2-toggle {
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  color: #555;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ccc;
  padding: 0.75rem 0;
  margin-top: 1rem;
}
.sub2-toggle .arrow2 {
  margin-left: 1rem;
}
.sub2-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0;
}
.sub2-content.open {
  padding: 0.5rem 0;
}

.sub3-toggle {
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  color: #555;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ccc;
  padding: 0.75rem 0;
  margin-top: 1rem;
}
.sub3-toggle .arrow3 {
  margin-left: 1rem;
}
.sub3-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0;
}
.sub3-content.open {
  padding: 0.5rem 0;
}

.sub4-content,
.sub5-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0;
}

.sub4-content.open,
.sub5-content.open {
  padding: 0.5rem 0;
}

.sub4-toggle,
.sub5-toggle {
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  color: #555;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ccc;
  padding: 0.75rem 0;
  margin-top: 1rem;
}

.sub4-toggle .arrow4,
.sub5-toggle .arrow5 {
  margin-left: 1rem;
}

.accordion-header:hover,
.sub-toggle:hover,
.sub2-toggle:hover,
.sub3-toggle:hover,
.sub4-toggle:hover,
.sub5-toggle:hover {
  border-left: 3px solid #28a745;
  padding-left: 5px;
  cursor: pointer;
}
	.how-will-do-it-highlight {
  background-color: rgba(40, 167, 69, 0.1);  /* subtle green wash */
  border-left: 4px solid #28a745;            /* your accent green */
  padding: 0.5rem 1rem;                      /* breathing room */
  border-radius: 4px;                        /* soften the edges */
  margin: 1.5rem 0 0.5rem;                   /* space above/below */
}

.how-will-do-it-highlight h4 {
  margin: 0;
  font-style: italic;                        /* a playful twist */
}

/* Optional “pulse” animation to draw the eye */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.85; }
}
.how-will-do-it-highlight {
  animation: pulse 3s ease-in-out infinite;
}
/* core/footer.css (imported in <head>) */
.site-footer{
  background:#f8f8f8;          /* subtle contrast */
  padding:2rem 1rem;
  font-size:.9rem;
  text-align:center;           /* centers everything inside */
}
.footer-inner{max-width:960px;margin:0 auto;}
.legal-nav{
  margin-top:.3rem;
  line-height:1.6;
}
.legal-nav a{
  color:inherit;               /* inherit text color */
  text-decoration:none;
}
.legal-nav a:hover{text-decoration:underline;}
.divider{margin:0 .25rem;}

/* === Accessibility : Skip-link =========================== */
.skip-link {
  position: absolute;      /* remove it from normal flow              */
  top: -4rem;              /* shove it way off the visible viewport   */
  left: 0;
  background: #fff;        /* give it contrast when it *is* visible   */
  color: #000;
  padding: .75rem 1rem;
  border-radius: .25rem;
  font-weight: 600;
  z-index: 1000;           /* keep it above other elements            */
  transition: top .2s ease-out;
}

/* Show the link only when it gains keyboard focus */
.skip-link:focus {
  top: 0;                  /* slide it back into view                 */
}