/* /////////  /////   style.css.  ////.  //////.  */    

.faq h1{

  min-width:250px;
}



/* BACKGROUNDS */

.twoSquirtle {

  background-color:black;
  border-left:0px;
  border-right:0px;
  text-align:center;
  margin-bottom:0px;
  padding-bottom: 0px;
}

.banner-top {
      width: 100%;
 padding: 70px 30px 50px 30px;
 color: #d3a90f;
 color: #df9535;
  text-align: left;
  background-image: url(../photos/backgrounds/redwood-dougladPeek.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height:250px;
}



.banner-top h1 {
   
  color:#df9535;
  text-shadow:
    1px 1px 3px rgba(0, 0, 0, 0.6), 
    0 0 6px rgba(255, 255, 255, 0.4), /* soft white glow */
    0 0 12px rgba(255, 245, 210, 0.3); /* extendeing the fade */

  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
}

h1.banner-top {
   
  color:#df9535;
  text-shadow:
    1px 1px 3px rgba(0, 0, 0, 0.6), 
    0 0 6px rgba(255, 255, 255, 0.4), /* soft white glow */
    0 0 12px rgba(255, 245, 210, 0.3); /* extendeing the fade */

  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
}

/*.banner-top h1{
   color: #d3a90f;
   color: #e1bd8d;
   color: #fefcf8;
} */

.forest-bckgd {
       width: 100%;
 padding: 70px 30px 50px 30px;
 color: #d3a90f;
 color: #df9535;
  text-align: center;
  background-image: url(../photos/backgrounds/forestBackUniformS.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.forest-bckgd  h2{
   color: #d3a90f;
}

.forest-background-up {
       width: 100%;
 padding: 30px;
 color: #d3a90f;
 color: #df9535;
  text-align: center;
  background-image: url(../photos/backgrounds/forestBackgroundLookUp.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}


.forest-background-up h1 {
  font-size:72px; 
  font-weight: 800;
  color: #e1f0c4;  
  text-align: center;
-webkit-text-stroke: 1px rgba(0,0,0,0.3);
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  padding: 20px 10px;
}


.words-bckgd {
  padding:0px;
       width: 100%;
position: relative;
 height:222px;
 color: #d3a90f;
  text-align: center;
  background-image: url(../graphics/Sciuridae4WordCloud.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 2px solid #d3a90f;
  border-bottom: 2px solid #d3a90f;
    box-sizing: content-box;
}

.words-bckgd  h2{
   color: #d3a90f;
}
/*
.words-bckgd h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #280707;
  color: #d3a90f;
  padding: 24px 24px;
  margin: 0; 

}*/

.words-bckgd h1 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);  /* only centeing horizontally */
  
  width: 250px;
  height: 222px;
  background-color: #280707;
  color: #d3a90f;
color: #df9535;
  padding: 0; 
  margin: 0;

  line-height: 222px;  /* to vertically center the text inside */
  text-align: center;
  font-size: 48px; 
}



.faq h1{

  min-width:250px;
}





/* -------------------------------------*/
/* WORD CLOUD */
.wordcloud-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.wordcloud-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* THUMBNAILS */
.thumbnail-row {
  text-align: center;
  margin: 16px auto;
}

.thumbnail-row a {
  display: inline-block;
  margin: 0 12px;
}

.thumbnail-row img {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 8px;
}

/* SPECIES HEADER */
.species-banner {
  text-align: center;
  padding: 20px 10px;

}

.species-banner a {
  display: inline-block;
  margin: 0 12px;
  text-decoration: none;
}



.glass-frame2 {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px;
  margin: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: inline-block;
  width: 21%; 
  min-width: 180px;
}

.glass-frame2 img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.glass-frame2:hover {
  transform: scale(0.96);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.4);
}


/* make rows of images */
.three-across{
 text-align: center;
 display:block;
}


.icons {
  text-align: center;
}
/*.icons img {
  width: 80px;
  height: auto;
}*/

p.three-across
 {
  text-align: center;
}

p.four-across {
  width: 100%;
  margin: 0;
  padding: 24px 0;
  text-align: center;
  background-color: #fefcf8; 
  border-radius:8px;

}


p.three-across img {
  width: 27%;
  height: auto;
}

p.three-across.acorn img  {
  width: 200px;
  height: auto;
}

p.four-across img {
  width: 20%;
  height: auto;
}



/* make image or div fit to full width */
.fullwidth { /* old fullwidth rule */
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}


.fullwidth img {/* old fullwidth rule */
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom:30px;
}

.img-contained {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 0;
}

.img-fullwidth {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}

.div-fullwidth {
  width: 100%;
  margin: 0;
  padding: 0;
}


.fullwidth.s1440 img {
  width: 100%;
 max-width:1440px;
  height: auto;
  margin-bottom: 16px;
  border-radius: 4px;
  background-color: black;
}

/* --------------------------- */
/*         INFO BOXES.        */
.intro-box {
  max-width: 1000px;
  margin: 40px auto;
  padding: 30px 32px;
  background-color: #fefcf8;
  border: 4px double #2e531c;
  color: #2D2D2B;
  border-radius:8px;
  font-size: 24px;
  line-height: 1.7;
  text-align: left;
}

/* title - font weight 600 */
.intro-box .title600 {
  font-size: 32px;
  font-weight: 600;
  color: #4d3c36;
  margin-bottom: 20px;
  text-align: center;
}

/* 26px text */
.intro-box .text26 {
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 16px;
  color: #2D2D2B;
}

.intro-box .text-invader {
  font-weight: 600;
  color: #6e2e28;
  margin-top: 20px;
}
/* ------- */


/* -- */

.info-box {
margin: 40px auto;
width:90%;
    max-width: 1440px;
    background-color: #f3f3f2;
    border:1px double rgb(6, 77, 2);
    padding: 20px;
    text-align: center;
}

.info-box.left {
margin: 20px auto;
width:90%;
    max-width: 1000px;
       background-color: #f6f6f6;
    border:1px double rgb(6, 77, 2);
    padding: 20px;
    text-align:left;
}


.info-box-coral {
margin: 20px auto;
  width: 90%;
    max-width: 1440px;
 background-color: #ffffff;
    border:3px double rgb(77, 2, 2);
    margin-top:24px;
      padding: 20px;
}
.info-box-green {
margin: 20px auto;
  width: 90%;
    max-width: 1440px;
 background-color: #e7eae4;
    border:3px double rgb(8, 77, 2);
    margin-top:24px;
      padding: 20px;
}



.spec-box {
  background-color: #f2f8ed;
  border: 2px solid #6c8a5d;

  padding:36px;
  margin: 20px auto;
  max-width: 90%;
}

/* Info-Card Rules */

/* =====/==== INFO CARD BASE  ==//=== */
.info-card {
  margin: 0px auto;
  width: 95%;
 max-width:1440px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  text-align: center;
  color: #1f1f1f;
  background-color: rgba(0,0,0,0.03);
  border: 2px solid #3f3d3a; /* default gray */
}

.info-card h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.info-card h4 {
  font-size: 20px;
  margin-bottom: 16px;
}

.info-card p.ident {
  font-size: 18px;
  margin: 6px 0;
}

.info-card img {
  max-width: 300px;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 12px 0;
}

.info-card.full img {
  max-width: 95%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 12px 0;
}

/* ====================. info-card-dark ===================*/
.info-card-dark {
  background-color: rgba(255, 255, 255, 0.08);
  border: 2px solid #4a3a1f; 
  color: #f5e9c8; 
  box-shadow: 0 2px 10px rgba(0,0,0,0.4); 
}

/* Headings inside .info-card-dark */
.info-card-dark h3 {
  color: #e1bd8d; 
  font-weight: 600;
}

.info-card-dark h4 {
  color: #d3920f; 
  font-weight: 500;
}

/* paragraph on dark card */
.info-card-dark p {
  color: #f0e8c2; 
  font-size: 20px;
  line-height: 1.5;
}

/* quote text */
.info-card-dark .quote {
  color: #ffe7a0;
  font-style: italic;
}

/* images */
.info-card-dark img {
  border: 1px solid #c8b278;
  box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/*-- theme color backgrounds */


/* neutral */
.neutral {
  background-color: #f3f2ef;
  border: 2px solid #888379;
  color: #3a3a3a;
}

.neutral h3,
.neutral h4 {
  color: #3a3a3a;
}

/* good green */
.good {
  background-color: #eef4ec;
  border: 2px solid #446d3e;
  color: #345c30;
}

.good h3,
.good h4 {
  color: #345c30;
}

/* Bad red*/
.bad {
  background-color: #f7f1ee;
  border: 2px solid #8b4b3e;
  color: #6e2e28;
}

.bad h3,
.bad h4 {
  color: #6e2e28;
}

/* Dark */
.dark {
  background-color: rgba(0,0,0,0.08);
  border: 2px solid #704300;
  color: #4f4200;
}

.dark h3,
.dark h4 {
  color: #3a3a3a;
}


/*dark2 */
.dark2 {
  background-color: rgba(0,0,0,0.08);
  border-top: 2px solid #704300;
  color: #4f4200;
  padding-bottom:8px;
}

.dark2 h3,
.dark2 h4 {
  color: #3a3a3a;
}


/* Darker */
.darker {
  background-color: rgba(0,0,0,0.7);
  border: 2px solid #704300;
  color: #ece3b4;
}

.darker h3,
.darker h4 {
  color: #f3d389;
}

/*Identification page*/



.native {
    background-color: #c7e489;
}

h2.native {
    color:#3A5201;
}


.invader {
    background-color: rgb(95, 2, 2);
     color:#ffeeea;
}


h2.invader,
h3.invader,
h4.invader {
     background-color: rgb(95, 2, 2);
    color:#ffeeea;
}

/* SPECIES PAGE */
.glass-frame {
  display: inline-block;
  margin: 10px;
  padding: 10px;
  border-radius: 20px;
  background: rgba(144, 154, 148, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);

}



.glass-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  max-width: 400px;
}



.squirrel-box {
  max-width: 80%;
  margin: 24px auto 40px auto;
  padding: 24px 30px;
  background-color: #fdfcf9;
  border: 2px solid #c4c2b8;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);

}

.squirrel-box ul {
  padding-left: 20px;
  line-height: 1.6;
  text-align: left;
}

.squirrel-box li {
  margin-bottom: 10px;
}

.box-heading { /* for squirrel fact list on species.html */
  margin-top: 0;
  color: #3a3a3a;
  font-size: 20px;
}



/* outer skin  */
.uber-block {
  /*max-width: 1440px;*/
  margin: 24px auto 40px auto;
  padding: 24px 30px;
  background-color: #dedddc;

}

/*  list styling. */
.list-block {
  max-width: 90%;
  margin: 24px auto;
  padding: 20px;
  background-color: #fdfdfb;  /* softer  */
  border: 2px solid #ccc;
  border-radius: 8px;

  line-height: 1.6;
  text-align: left;
}



/* increases font size and dark greem  color*/
.highlight-species {
  font-weight: 700;

  color: #2a4f2e; /* dark  green */
  letter-spacing: 0.2px;
}


   /* --- FORCE CENTERING ---*/
     .center {
        text-align: center !important;
        margin: 24px auto;
      }

/* identification page. */
.info-card,
.list-block,
blockquote {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.tc, 
.bc {
  text-align:center !important;
       margin: 24px auto;
  display: block;
}


/* index.html thumbnails.  */

.squirrel-natives {
  text-align: center;
  margin-top: 20px;
}

.thumbnail-duo {
  max-width: 200px;
  width: 42%;
  margin: 0 10px;
  vertical-align: middle;
}

/* mobile */
@media screen and (max-width: 768px) {
  .thumbnail-duo {
    display: block;
    width: 95%;
    max-width: 400px;
    margin: 12px auto;
  }
}


/*.   figure.  */
.fig-faq {

    float: left;
    width: 220px;
    margin: 6px 28px 6px 0;
    text-align: center;
  
}

.fig-cap-faq {

  font-size: 14px;
  color: rgb(95, 2, 2);
  margin-top: 4px;
}

.faq .banner-top h1,
.fullwidth .banner-top {
   color: #d37e0f;
  font-weight: 700;
  font-size: 66px;


  /* Glowing blurred dark shadow */
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.6),
    0 2px 12px rgba(0, 0, 0, 0.8),
    2px 4px 18px rgba(0, 0, 0, 0.4);
 

}

.banner-top {
  width: 100%;
  padding: 70px 30px 50px 30px;
  text-align: left;
  background-image: url(../photos/backgrounds/redwood-dougladPeek.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 250px;

  color: #df9535;
  text-shadow:
    1px 1px 3px rgba(0, 0, 0, 0.6),
    0 0 6px rgba(255, 255, 255, 0.4),
    0 0 12px rgba(255, 245, 210, 0.3);

  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
}

/* global nav weight override */
:root { --bs-nav-link-font-weight: 500; } 

.topnav-header .nav-row-primary a,
.topnav-header .nav-row-secondary a,
.navbar .nav-link,
.nav .nav-link {
  font-weight: 500 !important;  
}


/* -----   ////   -----  +/


/*     /////        /////. main.css. /////        /////.  //.  */
@font-face {
  font-family: 'National Park';
  src: url('../fonts/NationalPark/NationalPark-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'National Park';
  src: url('../fonts/NationalPark/NationalPark-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'National Park';
  src: url('../fonts/NationalPark/NationalPark-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'National Park';
  src: url('../fonts/NationalPark/NationalPark-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'National Park';
  src: url('../fonts/NationalPark/NationalPark-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'National Park';
  src: url('../fonts/NationalPark/NationalPark-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'National Park';
  src: url('../fonts/NationalPark/NationalPark-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}

/* --------------------------------------------------------------------*/

/* setting this globally */
* { box-sizing: border-box; }


body {

    font-family: 'Raleway', sans-serif;
   background-color: #1b1606;
    text-align:left;
    color: #2D2D2B;
    font-weight:500;
    font-size: 20px;
    line-height: 1.7;     
    margin: 0;
    padding: 0;
}
/* mobile - changing font for better readability */
@media screen and (max-width: 600px) {
  body {
    font-family: Verdana, 'Segoe UI', Roboto, Arial, sans-serif;
    font-weight: 400; 
  }
}

body.identification,
body.evolution,
body.home {
 background-color: #1b1606;
}

/* Identification page: unify dark body + light cards */
body.identification { background-color: #12100a; color: #eee5d0; }
body.identification p, body.identification li, body.identification .ident { color: #eee5d0; }
body.identification .info-card,
body.identification .list-block,
body.identification .uber-block,
body.identification .t-box {
  background: #F7F5EF;
  color: #1b1606;
  border: 1px solid #cfc8bb;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
body.identification .info-card h2,
body.identification .info-card h3,
body.identification .info-card h4,
body.identification .info-card h5,
body.identification .list-block h2,
body.identification .list-block h3,
body.identification .list-block h4 { color: #3a352c; }

/* Edge-to-edge feel on mobile */
@media (max-width: 991.98px) {
  body.identification .info-card,
  body.identification .list-block,
  body.identification .uber-block,
  body.identification .t-box {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
  }
}

/* Force full-width columns below 992 to avoid tiny columns */
@media (max-width: 991.98px) {
  body.identification .row > [class^='col-'],
  body.identification .row > [class*=' col-'] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Douglas block tweaks */
.douglas-block { max-width: 1200px; margin: 0 auto; }
.douglas-block .figure-grid { max-width: 1100px; margin: 0 auto; text-align: center; }
.douglas-block p.ident { color: var(--id-card-ink) !important; }
@media (max-width: 991.98px) {
  .douglas-block { text-align: center; }
  .douglas-block .figure-grid .row { justify-content: center !important; }
  .douglas-block .figure-grid figure { display: flex; justify-content: center; }
  .douglas-block .figure-grid .row > [class^='col-'] { display: flex; justify-content: center; }
}

/* Comparison section headings */
body.identification .lede-title { color: #3f3a2f; font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; }
.discover-title { color: #d37e0f; font-size: clamp(26px, 3vw, 40px); font-weight: 800; text-transform: uppercase; letter-spacing:.4px; }

body.identification h1{
 color: #d37e0f;
}
body.identification h2{
 color: #d3bc0f;
}
body.identification h3{
 color: #d3920f;
}
body.identification p{
 color: #ebe2a1;
}
body.identification .info-box p{
 color: #1b1606;
}
body.identification .uber-block p{
 color: #1b1606;
}

.t-box p {
  font-size:24px;
  padding:20px;
  margin: 0px auto;
  text-align:center !important;
}
body.identification .ident{
 color: #1b1606;
}
body.identification .list-block {
 color: #1b1606;
}

body.identification .darkenText p {
 color: #1b1606;
}


#evolution {
   background-color: #1b1606;
}




summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  font-size: 20px;
  padding-left: 30px; 
}


summary::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 44px;
  line-height: .8;
  color: #4e0202; 
  transition: transform 0.2s ease;
}


details[open] summary::before {
  content: "−"; 
}


.container {

  padding: 0 24px;
  margin: 0 auto;
}  



    h1 {
    font-family: 'National Park', serif;
        text-transform: uppercase;
        font-weight: 700;
        text-align: center;
        font-size: 60px;
        margin-top: 16px;
        color: #7A463A; /* redwood  */
      }

      h1.top-margin{
        margin-top:40px;
        color:#3f2805;
      }

      h2.top-margin{
        margin-top:-40px;
        color:#3f2805;
      } 

h2 {

  font-weight: 600;
  font-size:32px;
 text-transform: uppercase;
    text-align: center;
/*background-color: #d37e0f;*/

  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.3px;
  padding: 20px 0px;
  margin-top: 1em;
}

/* accent + size helpers */
.accent-orange { color: #d37e0f; }
.title-lg { font-size: 40px; }

  h2.back-light {
    background-color: #ede9dd;
  }

  h3 {

    color: #4D3C36;
    margin-top: 16px;
    font-size:28px;
    text-align: center;
  }


  


h4 {
  font-size: 24px;
  color: #6C8A5D;

  font-weight: 600;
  margin-top: 16px;
 text-align: center;
}


h5 {
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px; 
}




body.about h1,
body.faq h1,
div.left h1 {
 text-align: left;

}

/* ====== TOP NAVIGATION  ======== */


/* === HEADER === */
.topnav-header {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* First row: logo + primary links */
.nav-top-row {
  background-color: #e2d7c0; /* light tan */
  overflow: auto; /* contain floated elements */
  padding: 0px 5px;
}

/* Logo floats left */
.nav-logo {
  float: left;
  width: 25%;
}

.nav-logo img {
  max-width: 80px;
  height: auto;
  display: block;
}

/* top link row (float right) */
.nav-row-primary {
  float: right;
  text-align: right;
  padding-top: 32px;
  padding-bottom: 0;
  margin: 0;
}


.nav-row-primary a {
  display: inline-block;
  color: #4D3C36; /* base redwood*/
  text-decoration: none;
  font-weight: bold;
  margin: 0 12px;
  font-size: 18px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.nav-row-primary a:hover {
  transform: scale(1.1);
  color: #3d8035; /* hover color */
}


.nav-row a {
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.nav-row a:hover
 {
 color : green;

 transition: all 0.2s ease;
}

/* row2 -secondary nav */
.nav-row-secondary {
  background-color: #d9cdb2; /*  a littledarker  */
  text-align: center;
  padding: 10px 0;
}

/* container styling */
.nav-row-secondary {
  text-align: center; /* center the inline-block elements */
  margin-top: 20px;
}

.nav-row-secondary a {
  display: inline-block;
  border: 1px solid #6b4e2f; /* lt brown */
  padding: 6px 14px;
  margin: 6px;
  font-size: 20px;
  border-radius:5px;
  text-decoration: none;
  color: #3f2805;
  background-color: #fdfaf571;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
}

.nav-row-secondary a:hover {
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
  transform: translateY(-1px);
}

/* === TOP NAV LINK COLORS  === 
.nav-row a {
  display: inline-block;
  color: #4D3C36;
  text-decoration: none;
  font-weight: bold;
  margin: 0 12px;
  font-size: 18px;
}*/

.nav-row-primary a {
  display: inline-block;
  color: #fff; /* bright white */
  text-shadow: 1.5px 1.5px 3px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  font-weight: 800; 
  font-size: 22px;  
  margin: 0 16px;
  text-transform: uppercase;
letter-spacing: 1px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.nav-row a:hover {
  color: #7A463A; /* redwood-ish */
}

.nav-row a.active {
  color: #133d1d; /* dark green */
  text-decoration: underline;
}

     
nav.center ol {
  display: inline-block;
  text-align: left;
  padding-left: 20px;
  margin: 30px 0px 20px 0px;
}

nav.center ol a {
font-weight:400;
color:#152802;

}

nav.center ol li {
font-weight:600;
color:#152802;
}

nav.center ol li::marker {
  padding-right: 8px; 
}



/* === Responsive  === */
@media screen and (max-width: 768px) {
  .nav-logo,
  .nav-row-primary {
    float: none;
    width: 100%;
    text-align: center;
    padding-top: 0;
  }

  .nav-logo img {
    width: 100%;
  }
}
/* ================================ */


a {
  color: #6C8A5D; /* mossy */
}

a:hover {
  color: #D3A95C; /* goldy  */
}

blockquote {
  text-align:left;
  font-family: 'National Park', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  border-radius:8px;
  line-height: 1.5;
  border-left: 4px solid #263401;
  margin: 32px auto;
  padding: 16px 24px;
  max-width: 700px;
  background-color: #F7F5F0;/* warm light yellow ivory */
  color: #152802;
}



.caption {

    text-align: center;
    font-size:18px;
    color:rgb(95, 2, 2);/* burgundy red*/
    margin-top:-24px;
}



      p {
        /* font-family: 'National Park', serif;*/
         font-weight:400;
         text-align:left;
        font-size:24px;
        margin-bottom: 16px;
        padding:8px;
      
      }

      p.center img{
        text-align:center;
      }

      p.center {
        text-align:center;
      }

      div.center {
        text-align:center;
      }

      p.left{
        text-align:left;
      }


body.home,
body.identification {
                text-align:center;
            }

body.home p,
body.identification p {
                text-align:left;
            }



    
      ul {
        font-family: 'Raleway', sans-serif;
        font-weight:300;
       max-width:600px; 
       margin: auto; 
       padding-bottom:30px;
       line-height:1.6;
      }

      ul a{

        color:#480202;
      }
      
      ul a:hover{

        color:#3fdb0f;
      }
      
      li {
        margin-bottom: 8px;
        text-align:left;

      }

      img {
        margin: 16px auto;
        max-width: 1200px;
        height: auto;
      }

     
      cite {
        font-family: 'Raleway', sans-serif;
        display: block;
        margin-top: 8px;
        text-align: right;
        font-size: 14px;
        color: #666;
      }

      q {
        color: rgb(169, 207, 104);
      }


.list-block {
  text-align: center;
  margin-bottom: 6px;
}

/* hr styles */


.shorty {
    max-width:500px;
    margin: 24px auto; 
}

.branch-divider {
  border: none;
  background: url('../graphics/SVG/1treeBranchBare.svg') center center no-repeat;
  background-size: contain;
  height: 40px;        
  width: 60%;
  max-width: 700px;    
  margin: 24px auto;
}

.branch2-divider {
  border: none;
  background: url('../graphics/SVG/branch2-Bare.svg') center center no-repeat;
  background-size: contain;
  height: 60px;        
  width: 75%;
  max-width: 1200px;    
  margin: 24px auto;
}


.branch2Light-divider {
  border: none;
  background: url('../graphics/SVG/branch2-Bare.gif') center center no-repeat;
  background-size: contain;
  height: 80px;        
  width: 75%;
  max-width: 1200px;    
  margin: 24px auto;
}

.branchLeaf-divider {
  border: none;
  background: url('../graphics/SVG/branchGreenLeaves.svg') center center no-repeat;
  background-size: contain;
  height: 40px;        
  width: 75%;
  max-width: 1000px;    
  margin: 24px auto;
}

.squirrel-divider {
  border: none;
  background: url('../graphics/SVG/squirrel-divider.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:98px;  
  margin: 24px auto 10px auto ;
}


.squirrel-dividerGray {
  border: none;
  background: url('../graphics/SVG/squirrel-dividerGray.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:98px;  
  margin: 24px auto 10px auto ;
}


.squirrel-dividerGray1 {
  border: none;
  background: url('../graphics/SVG/squirrel-dividerGray1.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:108px;  
  margin: 24px auto 10px auto ;
}



.squirrel-dividerTum {
  border: none;
  background: url('../graphics/SVG/squirrel-dividerTum.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:98px;  
  margin: 24px auto 10px auto ;
}


.squirrel-dividerPawUp {
  border: none;
  background: url('../graphics/SVG/squirrel-dividerPawUp.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:108px;  
  margin: 40px auto 5px auto ;
}


.squirrel-dividerRunLeft {
  border: none;
  background: url('../graphics/SVG/squirrel-dividerRunLeft.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:108px;  
  margin: 40px auto 5px auto ;
}



.squirrel-dividerLookUp {
  border: none;
  background: url('../graphics/SVG/squirrel-dividerLookUp.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:108px;  
  margin: 40px auto 5px auto ;
}


.squirrel-dividerClimbDown {
  border: none;
  background: url('../graphics/SVG/squirrel-dividerClimbDown.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:128px;  
  margin: 40px 25px 5px 8px ;
}



.squirrel-dividerGuiltyAcorn {
  border: none;
  background: url('../graphics/SVG/squirrel-dividerGuiltyAcorn.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:130px;  
  margin: 30px auto 5px auto ;
}


.squirrel-dividerWideAcorn {
  border: none;
  background: url('../graphics/SVG/squirrel-dividerWideAcorn.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:130px;  
  margin: 30px auto 5px auto ;
}

.squirrel-dividerGuiltyUp {
  border: none;
  background: url('../graphics/SVG/squirrel-dividerGuiltyUp.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:118px;  
  margin: 40px auto 5px auto ;
}


.squirrel-dividerFront {
  border: none;
  background: url('../graphics/SVG/squirrel-dividerFront.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:120px;  
  margin: 32px auto 10px auto ;
}

.squirrel-dividerPeanut{
  border: none;
  background: url('../graphics/SVG/squirrel-dividerPeanut.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:120px;  
  margin: 32px auto 10px auto ;
}

.squirrel-dividerEastPeanut{
  border: none;
  background: url('../graphics/SVG/squirrel-dividerEastPeanut.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:120px;  
  margin: 32px auto 10px auto ;
}

.squirrel-dividerWorry{
  border: none;
  background: url('../graphics/SVG/squirrel-dividerWorry.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:98px;  
  margin: 32px auto ;
}

.squirrel-dividerWorryAcorn{
  border: none;
  background: url('../graphics/SVG/squirrel-dividerWorryAcorn.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:124px;  
  margin: 32px auto ;
}

.acornOrange {
  border: none;
  background: url('../graphics/SVG/acornOrange.svg') center center no-repeat;
  background-size: contain;
 max-width:322px;  
 height:118px;  
  margin: 40px auto 5px auto ;
}



/* end hr styles */



/* ////// padding and margin utilities /////////// */
.py-10{
    padding: 10px 0px;
}

.py-20{
    padding: 20px 0px;
}

.py-30{
    padding: 30px 0px;
}

.px-30{
    padding: 0px 30px;
}



.my-10{
    margin: 10px 0px;
}

.my-20{
    margin: 20px 0px;
}

.my-30{
    margin-top: 30px;
    margin-right: 10px;
    margin-bottom:30px;
    margin-left: 10px;
}



h2.pill {/* for h2 styling as pill shape */
  padding:15px;
  width:80%;
 border: 1px solid #d37e0f;
 border-radius:50px;
 background-color: black;
 margin: 20px auto;
   text-shadow:
    1px 1px 3px rgba(0, 0, 0, 0.6), 
    0 0 6px rgba(255, 255, 255, 0.4), /* soft white glow */
    0 0 12px rgba(255, 245, 210, 0.3); /* extendeing the fade */
}

/* SPACER BOXES */
   .spaceboxWhite {
    background-color: #f0e9db;
    padding: 5px;
    max-width:80%;
    margin-bottom:15px;
    text-align: center;
   }
    .spaceboxGreen {
    background-color: #d7e3d1;
    padding: 10px; 
    margin-bottom:15px; 
    text-align: center;
    margin-top: -30px;
   }

   .spaceboxGold {
background-color: #d37e0f;
color:rgb(77, 65, 1);
padding: 10px; 
  /*background-color: #280707;*/

text-align: center;
   }


      .spaceboxGold3 {
background-color: #d3a90f;
color:rgb(77, 65, 1);
padding: 10px; 
  background-color: #280707;

text-align: center;

   }


   .spaceboxDark{
background-color:#d37e0f;
color:rgb(77, 65, 1);
padding: 10px; 
text-align: center;
   }

/* ========================= */
/* Sidebar Flex Layout (global) */
/* Ensures consistent 2-column layout on wide screens and stacks at < 992px */
.main-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: nowrap; /* prevent mid-wrap around 992–900px */
}

.main-content {
  flex: 1 1 68%;
  min-width: 0; /* allow shrink without overflow */
  float: none !important;
  width: auto !important;
}

.sidebar {
  flex: 0 0 30%;
  float: none !important;
  width: auto !important;
  min-width: 0;
  padding-left: 18px;
}

@media (max-width: 991.98px) {
  .main-wrapper { flex-direction: column; }
  .main-content,
  .sidebar {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .main-content { margin-bottom: 20px; }
  .sidebar { padding-left: 0; }
}

/* ========================= */
/* National Park-style accordion */
.park-accordion { width: 95%; max-width: 800px; margin: 56px auto 56px; padding: 0 6px; }

.park-accordion h3 {
  font-family: 'National Park', serif;
  color: #e1bd8d;
}

.park-accordion details { margin: 14px 0; border: 2px solid #b68a5a; border-radius: 10px; background: linear-gradient(#4b2e18, #3b2213); box-shadow: 0 3px 0 #2a180d, 0 10px 20px rgba(0,0,0,.35); overflow: hidden; transition: transform .08s ease, box-shadow .08s ease, filter .12s ease; }

.park-accordion details:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #2a180d, 0 12px 22px rgba(0,0,0,.32);
  filter: brightness(1.04);
}

.park-accordion summary {
  list-style: none;
  display: block;
  cursor: pointer;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 700;
  color: #fff6e0;
  font-family: 'National Park', Raleway, sans-serif;
  text-transform: uppercase;
  position: relative;
  transition: background-color .15s ease, color .15s ease;
  padding-right: 46px; /* space for chevron */
}
.park-accordion summary::-webkit-details-marker { display: none; }
.park-accordion summary::before { content: none; }
.park-accordion summary:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffefc7;
}
.park-accordion summary::after {
  content: '›';
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 30px;
  color: #ffd37a;
  transition: transform .15s ease;
}
.park-accordion details[open] > summary::after { transform: rotate(90deg); }

.park-accordion .panel {
  background: #20160b;
  color: #f6efe0;
  padding: 14px 16px;
  border-top: 1px solid #3a2a17;
}
.park-accordion .panel a { color: #ffd37a; text-decoration: underline; }
.park-accordion .panel a:hover { color: #ffeaad; }

/* Sidebar personal note accordion (minimal padding, no margins) */
.sidebar-accordion details {
  border: 1px solid #b68a5a;
  border-radius: 8px;
  background: #f7efe0;
  margin: 0; /* no outer margin */
}
.sidebar-accordion summary {
  cursor: pointer;
  padding: 10px 12px 10px 38px; /* room for + */
  font-weight: 700;
  color: #3f2805;
  position: relative;
  transition: background-color .15s ease, color .15s ease;
}

.sidebar-accordion details[open] > summary::before { content: "−"; }
.sidebar-accordion summary:hover { background: #f2e6cf; }
.sidebar-accordion .panel {
  padding: 10px 12px;
  background: #fff9ee;
  color: #2D2D2B;
}

/* Sidebar note with visible first paragraph + Read more */
.sidebar-note {
  border: 1px solid #b68a5a;
  border-radius: 8px;
  background: #fffaf0;
  padding: 10px 12px;
  margin: 0;
}
.sidebar-note .note-title {
  font-weight: 800;
  font-size: 17px;
  color: #3f2805;
  margin: 0 0 6px;
}
.sidebar-note .note-lede p { margin: 0 0 8px; color: #2D2D2B; }
.sidebar-note details summary {
  cursor: pointer;
  padding: 8px 10px 8px 34px;
  background: #f3e4c7;
  border: 1px solid #caa16d;
  border-radius: 6px;
  color: #3f2805;
  position: relative;
}


.sidebar-note details summary:hover { background: #e9d6b3; }
.sidebar-note .panel { padding: 8px 2px 0; }

/* Melanism grid: responsive image + layout */
.melanism-evidence .melanism-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.melanism-evidence .melanism-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
@media (max-width: 991.98px) {
  .melanism-evidence .melanism-grid { grid-template-columns: 1fr; }
}

/* Identification: misinfo grid & media centering */
.misinfo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.misinfo-media { text-align: center; }
.misinfo-media img { display: inline-block; max-width: 100%; height: auto; }
/* ensure center alignment on mobile */
@media (max-width: 991.98px) {
  .misinfo-grid { grid-template-columns: 1fr; }
  .misinfo-text { text-align: center; }
}

/* Compare section width and heading on dark body */
.compare-block { width: 90%; max-width: 1440px; margin: 0 auto; padding: 0 12px; }
.title-compare { display: inline-block; margin: 8px auto 12px; }

/* No more yellow text on identification page */
body.identification .text-warning,
body.identification .warning,
body.identification [style*="color: yellow"],
body.identification [style*="#ff0"],
body.identification [style*="#ffd"],
body.identification [style*="#ffc"],
body.identification [style*="#ffea"],
body.identification [style*="#ffda"],
body.identification [style*="#ffe"] {
  color: #3a352c !important;
}
/* Links inside cards should be dark */
body.identification .info-card a,
body.identification .list-block a,
body.identification .uber-block a,
body.identification .t-box a { color: #3a352c !important; }
body.identification .info-card a:hover,
body.identification .list-block a:hover,
body.identification .uber-block a:hover,
body.identification .t-box a:hover { color: #152802 !important; }

/* Preserve top secondary nav colors on identification */
body.identification .nav-row-secondary a { color: #3f2805 !important; }
body.identification .nav-row-secondary a:hover { color: #3d8035 !important; }

/* Red banner in audit: light text on dark red with rounded edges */
body.identification h4.invader { 
  background: #7a2b0a; 
  color: #f7f2e4 !important; 
  border-radius: 10px; 
  padding: 10px 14px; 
  margin: 8px auto; 
}

/* Misinfo section width to match card below */
.misinfo-modern { width: 95%; max-width: 1440px; margin: 0 auto; padding: 0 12px; }

/* Identification: Douglas 4-up figure grid safety */
.douglas-block .row { display: flex; flex-wrap: wrap; }
.douglas-block figure { margin: 0; }
.douglas-block img.img-fluid { width: 100%; height: auto; display: block; }
.douglas-block .figure-grid .row { justify-content: center; }
.douglas-block .figure-grid figure { padding: 6px; }
.douglas-block { max-width: 1200px; margin: 0 auto; }
.douglas-block .figure-grid { max-width: 1100px; margin: 0 auto; text-align: center; }

/* Identification: Fur Color sections — force dark text for lists and figcaptions */
body.identification .info-box.center.fullwidth ul li,
body.identification .info-box.center.fullwidth figcaption,
body.identification section#eastern ul li,
body.identification section#eastern figcaption,
body.identification .fox-banner-block ul li,
body.identification .fox-banner-block figcaption {
  color: #1b1606 !important;
}

/* Identification: small size table (top) — force dark text */
.squirrel-size-table th,
.squirrel-size-table td { color: #1b1606 !important; }

/* Index: "Squirrels Are Here to Stay" 3-across gallery */
.stay-trio-bs .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: stretch;
}
.stay-trio-bs .col { width: 100%; }
.stay-trio-bs img { display: block; width: 100%; height: auto; }
@media (max-width: 991.98px) {
  .stay-trio-bs .row { grid-template-columns: 1fr; }
}

/* Species banner: enforce 4 → 2 → 1 across */
.species-banner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; justify-items: center; }
.species-banner .glass-frame2 { width: 100%; min-width: 0; }
.species-banner .glass-frame2 img { width: 100%; height: auto; display: block; }
@media (max-width: 1199.98px) {
  .species-banner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  .species-banner { grid-template-columns: 1fr; }
}

/* identification-full: center the pill heading */
.section-title.pill { display: block; margin-left: auto; margin-right: auto; text-align: center !important; }

/* identification: increase species callout title size */
.species-callout { font-size: clamp(22px, 3vw, 32px); }

/* ====== MISINFO MODERN ====== */
.misinfo-modern { max-width: 1200px; margin: 24px auto; padding: 0 12px; }
.misinfo-modern .section-title { margin-bottom: 12px; }
.misinfo-modern .mis-row { margin: 16px auto; }
.misinfo-modern .dark-heading { color: #403803; }

.mis-stat-list {
  display: grid; gap: 6px 16px; grid-template-columns: repeat(2, minmax(240px, 1fr));
  margin: 12px 0 0; padding-left: 18px; list-style: disc;
}
@media (max-width: 600px) { .mis-stat-list { grid-template-columns: 1fr; } }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery-grid img { width: 100%; height: auto; display: block; border-radius: 6px; }
.gallery-grid figure { margin: 0; text-align: center; }
@media (max-width: 991.98px) { .gallery-grid { grid-template-columns: 1fr; } }

.case-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: start; }
.case-grid figure { margin: 0; text-align: center; }
.case-grid img { width: 100%; height: auto; display: block; border-radius: 6px; }
@media (max-width: 991.98px) { .case-grid { grid-template-columns: 1fr; } }

/* Identification: species callouts for color sections */
.species-callout {
  font-family: 'National Park', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-align: center;
  margin: 18px auto 8px;
  padding: 8px 12px;
  display: inline-block;
  border-radius: 6px;
}
.species-callout.western { background: #1e4e03; color: #f7f2e4; }
.species-callout.eastern { background: #7a2b0a; color: #ffe7b2; }
.species-callout.fox { background: #5a3a12; color: #f7e8c8; }

/* Identification: add spacing above Why It Matters */
.misinfo-card { margin-bottom: 30px; }
.misinfo-card + .info-card { margin-top: 30px !important; }

/* Contact PNW: force dark text and light background */
body.contact .pacific-nw .info-card.bad,
body.contact .pacific-nw .info-card.bad * {
  color: #1b1606 !important;
}
body.contact .pacific-nw .info-card.bad {
  background-color: #f8f4e8 !important;
  border-color: #b68a5a !important;
}

/* Species page: ensure quick facts and lists are dark text on light background */
body#species-page .species-section .list-block,
body#species-page .species-section .list-block p,
body#species-page .species-section .list-block li {
  color: #1b1606 !important;
}

/* Contact page: make PNW sidebar section text dark for readability */
body.contact .pacific-nw,
body.contact .pacific-nw *,
body.contact .pacific-nw a {
  color: #1b1606 !important;
}

   .brown {
      background-color: #280707;
   }



   /* --- FORCE CENTERING ---*/
 


      /* ---- FLOAT STYLING. ---- */
.center {
  text-align: center !important;
  margin: 0px auto;
}

.float-wrapper,
.float-text,
.audit-text {
  overflow: hidden;
}

.float-thumb {
  float: left;
  width: 200px;
  border: 2px solid #7A463A;
  margin: 0 20px 10px 0;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.float-thumb:hover {
  transform: scale(0.96);
  border-color: #3d8035;
  cursor: pointer;
}

.float-text p {
  text-align: left;
  margin-top: 0;
}

.float-image-block {
  float: left;
  width: 200px;
  margin-right: 20px;
}

.float-thumb-col {
  float: left;
  width: 200px;
  margin-right: 24px;
}

.float-thumb-col img {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.float-thumb-col img:hover {
  transform: scale(1.03);
}

.three-floats {
  margin-top: 30px;
  margin-bottom: 20px;
}

.float-col {
  float: left;
  width: 30%;
  margin-right: 5%;
  text-align: center;
}

.float-col:last-child {
  margin-right: 0;
}

.float-col img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.caption {
  font-size: 14px;
  margin-top: 8px;
  color: #4D3C36;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 768px) {
  .float-thumb-col {
    float: none;
    width: 100%;
    margin: 0 auto 24px auto;
    text-align: center;
  }

  .float-thumb-col img {
    display: inline-block;
    width: 95%;
    max-width: 300px;
  }
}


/* --- Thumbnail col for Misidentification section --- */



/*. //////// references FOOTER ///////////  */

.references-footer {
  background-color: #f3efe6;
  padding: 40px 20px;
  margin-top: 40px;
  border-top: 2px solid #7A463A; /* redwood  */
  font-size: 18px;
  color: #2D2D2B;
}

.references-footer h3 {
  text-align: center;
  color: #4D3C36;
  font-size: 24px;
  margin-bottom: 24px;
}

.references-footer a {
  color: #3f2805;
  text-decoration: underline;
}

.references-footer a:hover {
  color: #7A463A;
}

/* //////////////////////////// */




/* standard footer */
.allsite-footer {
  background-color: #f3efe6;
  border-top: 2px solid #7A463A; /* redwood */
  padding: 30px 20px;
  margin-top: 40px;
  text-align: right;
    
}


/* footer links  */
.footer-nav ul {
    text-align: right;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav li {
  display: inline-block;
  margin: 0 16px;
}

.footer-nav a {
  text-decoration: none;
  color: #4D3C36;
  font-weight: bold;
  font-size: 18px;
}

.footer-nav a:hover {
  color: #3d8035; /* green hover */
}
.footer-credit {
  text-align:right;
  margin-top: 16px;
   margin-right: 24px;
  font-size: 16px;
  color: #6b4e2f; /* lt brown */

}
/* on mobile - to center the  links */
@media screen and (max-width: 768px) {
  .footer-nav ul {
    text-align: center; 
  }

  .footer-nav li {
    display: block;
    margin: 8px 0;
  }

  .footer-credit {
    text-align: center;
    margin-right: 0;
    margin-top: 20px;
  }
}

a.back {

 text-align: center !important;
        margin: 24px auto;
  display: inline-block;
  border: 1px solid #6b4e2f; /* lt brown */
  padding: 6px 14px;
  margin: 6px;
  font-size: 20px;
  border-radius:5px;
  text-decoration: none;
  color: #3f2805;
  background-color: #fdfaf571;
   background-color: #fcddabe2;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
}

.big-bullet {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  background-color: #6e2e28;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}


/* -------- -------- DARK STYLES --------- ------------- */
/* === DARK MODE GLOBAL === */
body.dark-mode {
  background-color: #1b1606;
  color: #f0eada;
}

/* === TEXT COLOR UTILITIES === */
.text-light {
  color: #f0eada !important;
}

.text-dark {
  color: #2d2d2b !important;
}

a.text-light {
  color: #f2d17c;
}

a.text-light:hover {
  color: #ffde8a;
}

a.text-dark {
  color: #3f2805;
}

a.text-dark:hover {
  color: #7a463a;
}

/* === HEADING VARIANTS === */
h1.dark-heading,
h2.dark-heading,
h3.dark-heading,
h4.dark-heading,
h5.dark-heading,
h6.dark-heading {
  color: #f4ecd8;
}

h1.light-heading,
h2.light-heading,
h3.light-heading,
h4.light-heading,
h5.light-heading,
h6.light-heading {
  color: #3f2805;
}



/* === SIDEBAR CARD  === */
.sidebar-card {
  background-color: transparent;
  color: #f0eada;
  margin-bottom: 24px;
  font-size: 20px;
  line-height: 1.6;
}

.sidebar-card h2,
.sidebar-card h3,
.sidebar-card h4 {
  text-align: left;
  margin: 0;
  padding: 12px 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Informational H3 — gold bar */
.sidebar-card h3.informative-heading {
  background-color: #d37e0f;
  color: #1b1606;
  font-family: 'Roboto Mono', monospace;
  text-align: center;
}

/* Informational H4 —  */
.sidebar-card h4.informative-subheading {
  background-color: #ece9e7;
  color: #1a1300;
  font-family: 'Roboto Mono', monospace;
  font-size: 22px;
  text-align: center;
  font-weight: 700;
}

/* Navigation H3 (TSOC, Resources) */
.sidebar-card h3.nav-heading {
  background-color: #382b1a;
  color: #ffe7b2;
  font-weight: 600;
}

/* === sidebar -  news column look === */
.sidebar-card .sidebar-text-block p{
  background-color: #f7f2e4;
  color: #2d2d2b !important;
  font-family: 'Roboto Mono', monospace;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  padding: 16px;
  margin: 16px 0;
  max-width: 100%;
  text-align: justify;
  border-left: 4px solid #d3a90f;
  position: relative;
}

.sidebar-card .sidebar-text-block p + p {
  border-top: 1px solid #d3a90f;
  padding-top: 12px;
  margin-top: 12px;
}



.sidebar-card .sidebar-text-block p:first-of-type::first-letter {
  font-size: 2.4em;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin-right: 10px;
  color: #3f2805;
}

/* === CITE author === */
.sidebar-card cite {
  display: block;
  font-size: 16px;
  color: #ffe5b4;
  text-align: right;
  margin-top: 10px;
  font-style: normal;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 0.3px;
}

.sidebar-card blockquote {
  background-color: #2a1d0d;
  color: #f3e7c9;
  border-left: 4px solid #d3a90f;
  padding: 16px 24px;
  margin: 24px auto;
  max-width: 700px;
  font-style: italic;
  font-family: 'National Park', serif;
  font-size: 22px;
  line-height: 1.5;
}

/* === IDENT -drk === */
.ident.text-light {
  color: #ffe8c0;
  font-size: 18px;
  text-align: center;
  line-height: 1.4;
  margin-top: 4px;
}

/* ///////////////////*/

/* === DARK MODE BACKGROUND + TEXT STYLES === */

.main-wrapper {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background-color: #1b1606; /*  global dark background */
}

/* global light text for dark background */
.main-wrapper {
  color: #f0eada;
  font-family: 'Raleway', sans-serif;
}

.main-wrapper p {
  color: #f0eada;
  font-size: 20px;
  line-height: 1.6;
}

.main-wrapper a {
  color: #f2d17c;
  text-decoration: none;
}

.main-wrapper a:hover {
  color: #ffde8a;
  text-decoration: underline;
}

.main-wrapper h1,
.main-wrapper h2,
.main-wrapper h3,
.main-wrapper h4,
.main-wrapper h5,
.main-wrapper h6 {
  color: #f4ecd8;
}

.main-wrapper h3,
.main-wrapper h4 {
  color: #ffe49c;
}



/* light style for info blocks */
.main-wrapper .info-card,
.main-wrapper .info-box,
.main-wrapper .uber-block,
.main-wrapper .list-block {
  color: #2d2d2b;
  background-color: #f7f2e4;
}

.main-wrapper .info-card p,
.main-wrapper .info-box p,
.main-wrapper .uber-block p,
.main-wrapper .list-block p {
  color: #2d2d2b;
}

.main-wrapper .info-card a,
.main-wrapper .info-box a,
.main-wrapper .uber-block a,
.main-wrapper .list-block a {
  color: #3f2805;
}

.main-wrapper .info-card a:hover,
.main-wrapper .info-box a:hover,
.main-wrapper .uber-block a:hover,
.main-wrapper .list-block a:hover {
  color: #7a463a;
}

.main-wrapper .info-card h1,
.main-wrapper .info-box h1,
.main-wrapper .uber-block h1,
.main-wrapper .list-block h1 {
  color: #3b2a01;
}

.main-wrapper .info-card h2,
.main-wrapper .info-box h2,
.main-wrapper .uber-block h2,
.main-wrapper .list-block h2 {
  color: #1e4e03;
}

.main-wrapper .info-card h3,
.main-wrapper .info-box h3,
.main-wrapper .uber-block h3,
.main-wrapper .list-block h3 {
  color: #403803;
}

.main-wrapper .info-card h4,
.main-wrapper .info-box h4,
.main-wrapper .uber-block h4,
.main-wrapper .list-block h4 {
  color: #1c4b04;
}


  body.species h3.light {

    color: #e1d0a2;
    margin-top: 16px;
    font-size:28px;
    text-align: center;
  }

  

body.species h4.light {
  font-size: 24px;
  color: #ccdec3;

  font-weight: 600;
  margin-top: 16px;
 text-align: center;
}

body.species h5.light {
  font-size: 18px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px; 
  color: rgb(222, 222, 222);
}

body.species p.light {
  color: rgb(246, 244, 240);
}

body.species cite.light {
  color: rgb(246, 244, 240);
  font-size:16px;
}
body.species cite {
font-weight:500;
  font-size:18px;
}


.footer-light {
  background-color: transparent;
  color: #f0eada; 
  text-align: center;
  padding: 24px;
  font-size: 18px;
}

.footer-light h3 {
  color: #f9e6b2; 
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.footer-light ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-light li {
  margin-bottom: 8px;
}

.footer-light a {
  color: #e3d4a0; 
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease, border-bottom 0.2s ease;
}

.footer-light a:hover,
.footer-light a:focus {
  color: #ffd972; 
  border-bottom: 1px solid #ffd972;
}


body.identification .caption {
font-size: 18px;
  color:rgb(80, 3, 3);
}

.compare-icons img {
  vertical-align: middle;
  margin: 0 15px;
}

.bullet-divider {
  display: inline-block;
  font-size: 38px;
  line-height: 1;
  color: #d3a90f; 
  vertical-align: middle;
  margin: 0 15px; 
}



.icons img {
  vertical-align: middle;
}

.acornBullet {
  max-width: 30px !important; 
  margin: 0 20px;
  line-height: 1.5; 
}

body.identification h4.bold{

  font: size 22px;
  color: rgb(97, 63, 0);

}



body#species-page h1.banner-top {
  font-size: clamp(30px, 7vw, 64px);
}

.info-card .three-across {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 16px auto;
  padding: 0 16px;
  font-size: 0;
}
.info-card .three-across img {
  display: block;
  width: 100%;
  height: auto;
}

/* Clamp big headings so they never overflow on mobile */
body.species h1,
body.identification h1,
body.evolution h1,
body.about h1,
body.contact h1{
  font-size: clamp(22px, 6.5vw, 64px) !important;
  line-height: 1.1;
  white-space: normal;
}

.trio-wrap { max-width: 1400px; margin: 12px auto 0; }
.trio-img { display: block; width: 100%; height: auto;  }

.homepage-footer-cta {
  display: flex;
  justify-content: center;
  padding: 24px 0 40px;
}

.np-cta {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 16px 28px;
  color: var(--np-text, #f3efdf);
  background: var(--np-deep, #0f3b20);
  border: 4px solid var(--np-frame, #2b532f);
  border-radius: 12px;
  box-shadow: inset 0 6px 18px rgba(0,0,0,.25), 0 2px 0 #1e3a21;
  transition: transform .08s ease, filter .15s ease;
  text-align: center;
}

.np-cta::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid var(--np-inset, #5a8a5f);
  border-radius: 8px;
  pointer-events: none;
}

.cta-duo {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
  max-width: 1200px;
  margin: 10px auto 0;
  padding: 0 12px;
}
.cta-card {
  flex: 1 1 420px;
  background: rgba(255,255,255,0.06);
  border: 1px solid #b68a5a;
  border-radius: 10px;
  text-align: center;
  padding: 16px 14px 8px;
}
.cta-card .cta-title { color: #e6d2a4; margin: 6px 0 10px; }
@media (max-width: 991.98px) { .cta-duo { flex-direction: column; } }

.np-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.np-cta:active {
  transform: translateY(0);
}

.np-cta:focus-visible {
  outline: 3px solid #ff9c2f;
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .np-cta {
    width: 100%;
    max-width: 520px;
  }
}

@media (min-width: 1024px) {
  .np-cta {
    font-size: 20px;
    padding: 18px 34px;
  }
}

.contactus {
padding:30px;
max-width: 90%;
  border:1px solid rgb(240, 150, 39);
  border-radius:8px;
  margin-top:30px;
}


.border {
  text-align: center;
padding:30px;
max-width: 70%;
  border:1px solid rgb(240, 150, 39) !important;
  border-radius:8px;
  margin-top:30px;
}


/*.  BUTTONS FOR RANGE MAP AND QUIZ. */
.np-cta { 
  position: relative; 
}

.np-cta::before {
  position: absolute; 
  inset: 6px;
  border: 2px solid var(--np-inset, #5a8a5f);
  border-radius: 8px;
  pointer-events: none;
  box-sizing: border-box;
}

.cq-scope {
  container-type: inline-size;
}


.content-cq {
  container-type: inline-size;
}

.stay-trio-bs {
  max-width: 1300px;
  margin: 12px auto;
  padding: 0 12px;
}

/* micro-utilities (Bootstrap-free) */
.u-center {
  text-align: center;
}

.u-mx-auto {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.u-my-4 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.u-border {
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  padding: 12px;
}


.cta-wrap {
  max-width: 900px;
  margin: 12px auto;
  padding: 0 12px;
  text-align: center;
}


.np-cta {
  position: relative;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}


.np-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.np-cta:active { transform: translateY(0); }
.np-cta::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid var(--np-inset, #5a8a5f);
  border-radius: 8px;
  pointer-events: none;
  box-sizing: border-box;
}

.acorn-row {
  --gap: 16px;
  display: flex;
  gap: var(--gap);
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  width:70%;
  margin: 12px auto;
}

.acorn-row img {
  display: block;
  /* cap at natural size, then shrik with container */
  width: min(300px, calc((80% - 2 * var(--gap)) / 3));
  height: auto;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}

/* Sidebar: fixed width  */
.sidebar {
  box-sizing: border-box;
  width: 320px;
  min-width: 320px;
  max-width: 27%;
  padding: 0 8px;
  flex: 0 0 320px;    
}


.sidebar .sidebar-text-block p {
  overflow-wrap: break-word;  
  word-break: normal;      
  hyphens: auto;
  -webkit-hyphens: auto;      /* Safari */
}


.sidebar .sidebar-text-block p {
  text-align: justify;
  text-justify: inter-word;
}
/*. ////         /////  style.css    ////      ///.   */













/*. ////   ---------------    /////    sidebar.css    ////    ------------  ///.   */

/* === MAIN WRAPPER === */
.main-wrapper {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;

}



/* == ==== SIDEBAR === ==== */

.sidebar img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==. == FOREST BACKGROUND === == */
.forest-background-up {
  width: 100%;
  padding: 30px;
  color: #d3a90f;
  text-align: center;
  background-image: url(../photos/backgrounds/forestBackgroundLookUp.jpg);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: contain;
}

/* = headings and links = */
.sidebar h1,
.sidebar h2 {
  color: #c7e489;
}

.sidebar h3 {
  color: #c18908;
}

.sidebar a,
.sidebar ul {
  color: #dacb02;
}

.sidebar a:hover {
  color: #a8da02;
}

.sidebar a:current {
  color: #d3a90f;
}

/* ==--  NAV SECTION --=== */
.nav-links {
  padding: 20px 5px;
}

/* = / =  glass frame === */
.glass-frame {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  border: 2px solid #c7e489;
}

.glass-frame a {
  text-decoration: none;
  color: inherit;
}

.glass-frame:hover {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.glass-frame:hover .squirrel-name {
  color: #a8da02;
}

/* - SQUIRREL NAME - */
.squirrel-name {
  margin-top: 8px;
  font-weight: bold;
  font-size: 16px;
  color: #efd56f;
  text-align: center;
  display: block;
  text-shadow: 1px 1px 2px #00000070;
}

/* //  SQUIRREL STACK - images of 4 species == // == */
.squirrel-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.squirrel-stack .glass-frame {
  width: 100%;
  max-width: 250px;
}

.squirrel-stack img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.squirrel-stack .squirrel-name {
  text-align: center;
  font-weight: bold;
  margin-top: 8px;
}



/* === TWO-COLUMN LAYOUT: Sidebar + Main Content === */
.sidebar {
  float: left;
  width: 30%;
  padding-left:18px;
}

.main-content {
  float: right;
  width: 68%;
}


/* ---------  ////////////. --------------  ////////////////////. ----- */

/* ---- contactForm.css -----  */

.contact-form{
    width:90%;
  max-width: 1000px;
  margin: 40px auto;
  padding: 24px;
  background-color: #f2e7d5;
   border: 2px solid #3f2805;
  border-radius: 12px;
  color: #1b1606;
}

.contact-form label
{
  display: block;
  margin: 12px 0 6px;
  font-weight: bold;
  color: #3f2805;
}

.contact-form legend {
  display: block;
  font-weight: bold;
  margin: 20px 0 10px;
  color: #3f2805;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 16px;
  border: 1px solid #aaa;
  border-radius: 6px;
  font-size: 20px;

}

.contact-form fieldset {
  border: none;
  margin-top: 5px;
}

.contact-form fieldset label {
  display: block;
  margin: 6px 0;  
  
}
.contact-form button {
  background-color: #d37e0f;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}

.contact-form button:hover {
  background-color: #a25f09;
}

/* -- honeypot -- */
.squirrel {
  display: none !important;
  visibility: hidden;
  position: absolute;
  left: -9999px;
}

.paragraph-input {
  width: 100%;
  font-size: 16px;
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 6px;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
}

.to-left {
  border-left: 4px solid #000;
}

.douglas {
  background-color: #d6e5d6;
}

.douglas-header {
  background-color: #c9dbc9;
}

/* -----  ////////// ----  ////////////. --------------  ////////////////////. ---  ////////. -- */

/* ---- about.css -----  */

/* ============== CONTRAST: PNW note ============== */

.sidebar .info-card.bad,
.sidebar .info-card.bad p,
.sidebar .info-card.bad h3,
.sidebar .info-card.bad a {
  color: #fbf6e8 !important; 
}

/* ============== DETAILS/SUMMARY -> PARK SIGN BUTTONS ============== */
.sidebar details {
  margin: 12px 0;
  border-radius: 12px;

  box-shadow:
    0 2px 0 #7d5b35,             /* ridge */
    0 6px 12px rgba(0,0,0,0.35);  /* drop */
  overflow: hidden;
}

.sidebar summary {
  list-style: none;
  display: block;
  padding: 12px 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #332400;
  cursor: pointer;
  position: relative;
  user-select: none;
  outline: none;
}





/* ========== SIDEBAR: UNIFY WIDTH ========== */
.sidebar {
  padding: 18px;
  box-sizing: border-box;
}
.sidebar > * {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}
.sidebar .forest-background-up,
.sidebar .about-pnw,
.sidebar .nav-links,
.sidebar .sidebar-text-block,
.sidebar .join-callout {
  width: 100%;
}



/* ========== “IN A NUTSHELL” LIST: DARK GREEN TEXT + BULLETS ========== */
.sidebar .sidebar-text-block {
  background:#f7efe0;
  color:#2b1a05;
  border:1px solid #3f2805;
  border-radius:12px;
  padding:16px 18px;
  margin-top:16px;
}
.sidebar .sidebar-text-block h4 { color:#3f2805; margin-top:0; }
.sidebar .sidebar-text-block ul {
  list-style: disc;
  padding-left: 24px;
  margin: 10px 0 0;
}
/* Override the yellow: text + bullets */
.sidebar .sidebar-text-block li { 
  color:#173b1a;             
}
.sidebar .sidebar-text-block li::marker {
  color:#173b1a;                 /* deep forest green bullets */
}



/* ========== JOIN US: BIG BUTTON ========== */
.join-callout {
  display:block; width:100%; text-align:center;
  margin-top:16px; padding:16px 18px;

  border:2px solid #b68a5a; border-radius:12px; font-weight:800;

  text-decoration:none;
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}


body.about .nav-links ul {
  list-style: none;        /* no bullets */
    
  margin: 10px 0 0;
}

body.about .nav-links li {
  margin: 6px 0;
}

.sidebar details {
  width: calc(100% - 30px);
  margin: 8px 15px;
  border: 2px solid #b68a5a;
  border-radius: 10px;
  background: linear-gradient(#4b2e18, #3b2213);
  box-shadow: 0 3px 0 #2a180d, 0 8px 16px rgba(0,0,0,.28);
  overflow: hidden;
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}

.sidebar details:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #2a180d, 0 12px 22px rgba(0,0,0,.32);
  filter: brightness(1.04);
}

.sidebar details:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #2a180d, 0 6px 12px rgba(0,0,0,.24);
}



/* buttons  animate on hover */
.sidebar { padding: 0 15px; }
.sidebar details {
  width: 100%;
  margin: 8px 0;
  border: 2px solid #b68a5a;
  border-radius: 10px;
  background: linear-gradient(#4b2e18, #3b2213);
  box-shadow: 0 3px 0 #2a180d, 0 8px 16px rgba(0,0,0,.28);
  overflow: hidden;
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.sidebar details:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #2a180d, 0 12px 22px rgba(0,0,0,.32); filter: brightness(1.04); }
.sidebar details:active { transform: translateY(1px); box-shadow: 0 2px 0 #2a180d, 0 6px 12px rgba(0,0,0,.24); }

.sidebar summary {
  display: block;
  cursor: pointer;
  padding: 12px 16px;
  font-size: 17px;
  font-weight: 700;
  color: #fff6e0;
  list-style: revert;
  font-family: "National Park", Raleway, sans-serif;
}
.sidebar summary::-webkit-details-marker { display: inline-block !important; }
.sidebar summary::before, .sidebar summary::after { content: none !important; }


.sidebar details > *:not(summary) {
  background: #20160b !important;
  padding: 14px 16px;
  border-top: 1px solid #3a2a17;
}
.sidebar details > *:not(summary),
.sidebar details > *:not(summary) * {
  color: #f6efe0 !important;
}
.sidebar details > *:not(summary) a {
  color: #ffd37a !important;
  text-decoration: underline;
}
.sidebar details > *:not(summary) a:hover { color: #ffeaad !important; }


  /* -----  ////////// ----  ////////////. --------------  ////////////////////. ---  ////////. -- */

/* ---- id.css -----  */


.sidebar {
  box-sizing: border-box;
  min-width: 320px; 
  max-width:31%;           
  padding: 0 8px;       
}

@media (max-width: 336px) {
  .sidebar {
    width: calc(100vw - 16px);
  }
}


.sidebar .sidebar-card,
.sidebar .nav-links {
  box-sizing: border-box;
  margin: 0 auto;    
  max-width: 100%;
}

/*  center */
.sidebar .four-across,
.sidebar .glass-frame,
.sidebar img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 100%;
  height: auto;
}

/* Blockquotes */
.sidebar blockquote {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

/* Natural line breaks */
.sidebar,
.sidebar p,
.sidebar li,
.sidebar h2,
.sidebar h3,
.sidebar h4,
.sidebar .sidebar-text-block p,
.sidebar blockquote {
  overflow-wrap: break-word;    
  word-break: normal;        
  hyphens: auto;         
  -webkit-hyphens: auto;          /* Safari */
}


.sidebar .sidebar-text-block p { text-align: justify; text-justify: inter-word; } 

.main-content blockquote {
  background: #2a1d0d;
  color: #f3e7c9;
  border-left: 4px solid #d3a90f;
  font-family: 'National Park', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  padding: 16px 24px;
  margin: 24px auto;
  width: 100%;
  max-width: none;
  border-radius: 8px;
}
.main-content blockquote cite {
  display: block;
  margin-top: 8px;
  text-align: right;
  color: inherit;
  font-style: normal;
}
.main-content blockquote p {
  text-align: justify;
  text-justify: inter-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
















/* -----  ////////// ----  ////////////. --------------  ////////////////////. ---  ////////. -- */

/* ---- small-table.css -----  */

/* squirrel size table */

.squirrel-size-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 18px;
  text-align: center;
  background-color: #fdfaf4;
}

.squirrel-size-table th,
.squirrel-size-table td {
  padding: 12px;
  border: 1px solid #aaa;
}

.native-header {
  background-color: #c5d4c1; /* lt green */
  color: #1b1606;
  font-weight: bold;
}

.introduced-header {
  background-color: #e0d0d0; /* soft red */
  color: #3f0f0f;
  font-weight: bold;
}

.squirrel-size-table tbody td {
  background-color: #fffaf0;
}

.smallTable.center {
  text-align: center;
  margin: 40px auto;
  width: 100%;
}

.squirrel-size-table {
  margin: 0 auto;
  border-collapse: collapse;
  width: auto;
}
.squirrel-size-table .introduced {
  background-color: #b46c5d; 
  color: #1b1606;
}


/* -----   ////   -----  +/

/* Mobile stack: main then sidebar, both full width */
@media (max-width: 900px) {
  .main-content,
  .sidebar {
    float: none !important;
    clear: both;                 /* drop out of the float layout entirely */
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;     /* beat the 320px min-width from style.css */
  }

  /*  tidy spacing */
  .main-content { margin-bottom: 20px; }
  .sidebar { padding-left: 0; }  /* remove the desktop left padding */
}






/* -----  ////////// ----  ////////////. --------------  ////////////////////. ---  ////////. -- */

/* ---- species-polish.css -----  */



body#species-page .species-banner {
  --gap: 16px;
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: stretch;
  justify-content: center;
}
body#species-page .species-banner .glass-frame2 {
  box-sizing: border-box;
  display: block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  flex: 0 0 calc((100% - (3 * var(--gap))) / 4) !important;
  max-width: calc((100% - (3 * var(--gap))) / 4) !important;
  min-width: 220px;
}
body#species-page .species-banner .glass-frame2 img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 928px) {
  body#species-page .species-banner .glass-frame2 {
    flex: 0 0 calc((100% - var(--gap)) / 2) !important;
    max-width: calc((100% - var(--gap)) / 2) !important;
  }
}
@media (max-width: 456px) {
  body#species-page .species-banner .glass-frame2 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-width: 0;
  }
}

body#species-page .char-sign {
  font-family: 'National Park', Arial, sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f8f4ea;
  background: #3f2805;
  padding: 10px 22px;
  display: inline-block;
  border: none;
  border-radius: 0;
}
body#species-page .char-sign-row {
  text-align: center;
  margin: 20px 0 12px;
}

body#species-page .learn-more {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 10px;
  background: transparent;
  color: #d87a2e;
  text-decoration: none;
  border: 2px solid #d87a2e;
  font-weight: bold;
}
body#species-page .learn-more:hover {
  background: #d87a2e;
  color: #1b120a;
}
body#species-page .learn-more:focus-visible {
  outline: 3px solid #ffe8b5;
  outline-offset: 2px;
}

body#species-page blockquote {
  font-family: 'National Park', Arial, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.7;
  text-align: left !important;
  color: #f3e7c9;
  background: linear-gradient(145deg, #2a1d0d, #3b2a15);
  border-left: 6px solid #d37e0f;
  padding: 20px 28px;
  margin: 28px auto;
  max-width: 900px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
body#species-page blockquote p { margin: 0 0 8px 0; }
body#species-page blockquote cite {
  display: block;
  font-size: 16px;
  color: #ffd972;
  text-align: right;
  margin-top: 10px;
}
body#species-page .block-invader {
  background: linear-gradient(145deg, #3a240f, #4a2b12);
  color: #ffecd0;
  border-left-color: #d37e0f;
}

body#species-page .species-section {
  --gutter: 24px;
  --space-1: 12px;
  --space-2: 20px;
  --space-3: 28px;
  --space-4: 40px;
  margin: var(--space-4) auto;
  padding: 0;
}
body#species-page .species-section > :not(img.fullwidth) {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
body#species-page .species-section .section-head { margin: var(--space-2) auto var(--space-1); }
body#species-page .species-section h3.light { margin: 0 auto var(--space-2); }
body#species-page .species-section p.light { max-width: 900px; margin: 0 auto var(--space-3); }
body#species-page .species-section blockquote { margin: var(--space-3) auto; }
body#species-page .species-section .list-block {
  max-width: 900px;
  margin: var(--space-3) auto var(--space-2);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
body#species-page .species-section p.center .learn-more { margin-top: var(--space-2); }
body#species-page .species-section p.center { margin: var(--space-2) auto var(--space-4); }

body#species-page img.fullwidth {
  display: block;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 28px;
  margin-bottom: 28px;
}

body#species-page .species-section h2.native,
body#species-page .species-section h2.invader {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  margin: 40px 0 16px;
  padding: 24px 24px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'National Park', Arial, sans-serif;
  line-height: 1.2;
}
body#species-page .species-section h2.native {
  background: #1e4e03;
  color: #f7f2e4;
  font-size: 32px;
}
body#species-page .species-section h2.invader {
  background: #7a2b0a;
  color: #ffe7b2;
  font-size: 36px;
}

body#species-page #invader-info .info-card h3 {
  font-family: 'National Park', Arial, sans-serif;
  font-size: 44px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  margin-bottom: 8px;
}
body#species-page #invader-info .info-box-p {
  max-width: 900px;
  margin: 12px auto 0;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 22px;
  line-height: 1.7;
}
body#species-page #eastern blockquote {
  margin: 20px auto;
  max-width: 900px;
}

body#species-page .allsite-footer,
body#species-page .allsite-footer .footer-nav ul,
body#species-page .allsite-footer .footer-credit {
  text-align: center;
}
body#species-page .allsite-footer .footer-nav li {
  display: inline-block;
  margin: 0 12px;
}

body#species-page .footer-light { text-align: center; }
body#species-page .footer-light ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: none;
  width: 100%;
}
body#species-page .footer-light li { margin: 0; text-align: center; }
body#species-page .footer-light a { display: inline-block; }

html, body { overflow-x: clip; }

@media (max-width: 900px) {
  body#species-page .char-sign { font-size: 20px; line-height: 24px; }
  body#species-page .species-section { --gutter: 16px; }
  body#species-page .species-section p.light { font-size: 18px; }
  body#species-page img.fullwidth { margin-top: 20px; margin-bottom: 20px; }
  body#species-page .species-section h2.native { font-size: 26px; }
  body#species-page .species-section h2.invader { font-size: 30px; }
  body#species-page blockquote { font-size: 22px; line-height: 1.6; padding: 18px 22px; }
}

body#species-page #invader-info .pull-quote{
  display:block;
  text-align:center;
  font-family:'National Park', Arial, sans-serif;
  font-weight:700;
  font-size:clamp(22px,3.4vw,38px);
  line-height:1.2;
  color:#7a2b0a;
  margin:18px auto;
  padding:6px 12px;
  max-width:1000px;
}
body#species-page #invader-info .pull-quote::before{
  content:"“";
  color:#d37e0f;
  font-size:1.4em;
  margin-right:.15em;
  position:relative;
  top:.05em;
}
body#species-page #invader-info .pull-quote::after{
  content:"”";
  color:#d37e0f;
  font-size:1.4em;
  margin-left:.15em;
  position:relative;
  top:.05em;
}



/* -----   ////   -----  +/
/* Lighten text for the melanism evidence block */
.melanism-evidence {
  background-color: #2a2723;   /* subtle dark brown/charcoal backdrop */
  color: #f8f4ec;             /* light parchment text */
  padding: 20px;
  border-top: 4px solid #d37e0f;  /* accent line matches your squirrel orange */
  border-bottom: 4px solid #d37e0f;
}

/* Adjust inner typography */
.melanism-evidence h3,
.melanism-evidence h4,
.melanism-evidence p {
  color: #f8f4ec;  /* override any dark site-wide defaults */
}

.melanism-copy .lede-body {
  background: rgba(255, 255, 255, 0.08); /* faint light overlay */
  border: 1px solid #f0d9a1;
  border-left: 6px solid #d37e0f;
  color: #fefcf8;   /* very light text inside box */
}

/* Button style on dark background */
.melanism-evidence .np-cta {
  display: inline-block;
  background: #d37e0f;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 6px;
  transition: background 0.2s ease;
}
.melanism-evidence .np-cta:hover {
  background: #a95f0b;
  color: #fff;
}




/* -----  ////////// ----  ////////////. --------------  ////////////////////. ---  ////////. -- */

/* ---- table.css -----  */



/* tightening spacing */

.table-note { font-size: 18px; color: #f3efdf; margin-top: 8px; }
 
.compare-button {
  background-color: #446d3e;
  color: #fff;
  padding: 12px 20px;
  margin-top:30px;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.compare-button:hover {
  background-color: #345c30;
}

/* squirrel size table */

.squirrel-size-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 18px;
  text-align: center;
  background-color: #fdfaf4;
}

.squirrel-size-table th,
.squirrel-size-table td {
  padding: 12px;
  border: 1px solid #aaa;
}

.native-header {
  background-color: #c5d4c1; /* lt green */
  color: #1b1606;
  font-weight: bold;
}

.introduced-header {
  background-color: #e0d0d0; /* soft red */
  color: #3f0f0f;
  font-weight: bold;
}

.squirrel-size-table tbody td {
  background-color: #fffaf0;
}

.smallTable.center {
  text-align: center;
  margin: 40px auto;
  width: 100%;
}

.squirrel-size-table {
  margin: 0 auto;
  border-collapse: collapse;
  width: auto;
}
.squirrel-size-table .introduced {
  background-color: #b46c5d; 
  color: #1b1606;
}


:root {
  --ink: #f3efdf;
  --bg: #1b1606;
  --accent: #d37e0f;
  --card: #fffdf4;
  --card-2: #fbf7ea;
  --line: #e6dcc7;
  --native: #dae2c1;
  --introduced: #e4d7cc;
}

html, body {
  height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--ink);
  margin: 0;
}

hr {
  opacity: 1 !important;
}

.ident-compare {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px 48px;
}

@media (max-width: 600px) {
  .ident-compare {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ORANGE headings + note (override prior yellows) */
body.identification .section-title,
body.identification .section-kicker,
body.identification .table-note {
  color: var(--accent);
  text-align: center;
}

.section-title {
  display: inline-block;
  margin: 18px auto 6px;
}

.pill {
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 8px 14px;
}

.section-kicker {
  margin-bottom: 14px;
}

/* Button box */
.control-box {
  background: #102617;
  border: 1px solid #2b532f;
  border-radius: 14px;
  padding: 12px;
  margin: 10px auto 14px;
  max-width: 720px;
}

.compare-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  justify-content: center;
}

.chip {
  display: inline-block;
  border: 2px solid #2b532f;
  background: #0f3b20;
  color: #f3efdf;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  letter-spacing: 0.2px;
  text-align: center;
  line-height: 1.1;
}

.chip.is-active {
  border: 3px solid var(--accent);
  background: var(--accent);
  color: #1b1606;
}

.chip:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .control-box {
    display: none;
  }
}

/* Matrix card with dark band behind the Characteristic column */
.matrix-wrap {
  position: relative;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.12), 0 12px 24px rgba(0,0,0,.18);
  padding: 10px 12px 12px;
  margin: 0 auto 40px;
  background:
    linear-gradient(to right,
      var(--bg) 0,
      var(--bg) 240px,
      var(--card) 240px,
      var(--card) 100%);
}

.matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  font-size: 0.95rem;
  color: #1b1606;
}

.matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  background: var(--card);
  color: #1b1606;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}

/* header of first column sits on the dark band */
.matrix thead th.char {
  background: transparent;
  color: var(--ink);
}

.matrix th,
.matrix td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

/* Characteristic column: dark and “transparent” look */
.matrix .char {
  position: sticky;
  left: 0;
  width: 240px;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  z-index: 1;
  border-right: 1px solid #2a2416;
}

/* Zebra striping only for data columns, not the char column */
.matrix tbody tr:nth-child(even) td:not(.char) {
  background: var(--card-2);
}

.matrix tbody tr:hover td:not(.char) {
  background: #f6f0df;
}

/* Native/Introduced colors by column (works for th and td) */
.matrix [data-col="western"],
.matrix [data-col="douglas"] {
  background-color: var(--native);
  color: #1b1606;
}

.matrix [data-col="eastern"],
.matrix [data-col="fox"] {
  background-color: var(--introduced);
  color: #1b1606;
}

/* keep headers readable even with tint */
.matrix thead [data-col] {
  font-weight: 600;
}

/* Mobile: only show two chosen species */
@media (max-width: 1023px) {
  .matrix .char {
    width: 200px;
  }

  .matrix th[data-col],
  .matrix td[data-col] {
    display: none;
  }

  .matrix th[data-col].show,
  .matrix td[data-col].show {
    display: table-cell;
  }
}





/*--- */
/* Dark, readable first column */
.matrix thead th.char,
.matrix tbody td.char,
.matrix thead th:first-child,
.matrix tbody td:first-child {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

/* Keep it pinned and visually separated */
.matrix .char,
.matrix th:first-child,
.matrix td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  box-shadow: inset -1px 0 0 #2a2416;
}






/* -----  ////////// ----  ////////////. --------------  ////////////////////. ---  ////////. -- */

/* ---- responsive.css -----  */

/* Minimal improvement kept: responsive h1 sizing */
h1 { font-size: clamp(28px, 6.5vw, 54px); }

/* === Homepage (index.html) — scoped layout modernization === */
body.home .home-columns {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

/* Replace float widths with flex sizing only on home */
body.home .home-columns .main-content,
body.home .home-columns .sidebar {
  float: none !important;
  min-width: 0; /* prevent overflow from long content */
}

/* Match existing desktop proportions (approx. 68/30) */
body.home .home-columns .main-content {
  flex: 1 1 68%;
  max-width: 68%;
}

body.home .home-columns .sidebar {
  flex: 0 0 30%;
  max-width: 30%;
}

/* Contain media within columns on home */
body.home .main-content img,
body.home .sidebar img {
  max-width: 100%;
  height: auto;
}

/* Stack columns on smaller screens without impacting other pages */
@media (max-width: 992px) {
  body.home .home-columns { flex-direction: column; }
  body.home .home-columns .main-content,
  body.home .home-columns .sidebar {
    max-width: 100%;
    flex-basis: auto;
  }
}

/* ===================================================== */
/* Identification Theme — Final Contrast-Safe Overrides */
/* Ensures dark body + light cards with correct text ink */
/* ===================================================== */

body.identification {
  /* Theme tokens */
  --id-bg: #12100a;          /* dark body */
  --id-ink: #eee5d0;         /* light body text */
  --id-link: #ffd37a;        /* warm link */
  --id-link-hover: #ffefc7;  /* lighter on hover */
  --id-card-bg: #f7f5ef;     /* light card */
  --id-card-ink: #1b1606;    /* dark card text */
  --id-border: #cfc8bb;      /* light border */

  background: var(--id-bg) !important;
  color: var(--id-ink) !important;
}

/* Body/base text and links (outside cards) */
/* Remove broad p/li overrides to avoid light ink inside cards */
/* Keep figcaptions globally dark per request */
body.identification figcaption,
body.identification .caption { color: var(--id-card-ink) !important; }
/* Do not change nav/link colors globally on the page */

/* Core card shells: light background + dark text */
body.identification .info-card,
body.identification .list-block,
body.identification .uber-block,
body.identification .t-box {
  background: var(--id-card-bg) !important;
  color: var(--id-card-ink) !important;
  border-color: var(--id-border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* Typography inside cards: enforce dark ink */
body.identification .info-card :where(h1,h2,h3,h4,h5,h6,p,li,figcaption,td,th,blockquote,.ident,.caption),
body.identification .list-block :where(h1,h2,h3,h4,h5,h6,p,li,figcaption,td,th,blockquote,.ident,.caption),
body.identification .uber-block :where(h1,h2,h3,h4,h5,h6,p,li,figcaption,td,th,blockquote,.ident,.caption),
body.identification .t-box :where(h1,h2,h3,h4,h5,h6,p,li,figcaption,td,th,blockquote,.ident,.caption) {
  color: var(--id-card-ink) !important;
}

/* Compare block should sit on dark background (not in a light card) */
body.identification .compare-block {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Tables: ensure readable ink in both contexts */
body.identification .squirrel-size-table th,
body.identification .squirrel-size-table td { color: var(--id-card-ink) !important; }

/* Figcaptions: default to light when outside cards */
body.identification :not(.info-card):not(.list-block):not(.uber-block):not(.t-box) > figcaption,
body.identification :not(.info-card):not(.list-block):not(.uber-block):not(.t-box) figcaption:not(.caption-sm) {
  color: var(--id-ink) !important;
}

/* Douglas ident line specifically needs light ink on dark body */
body.identification .douglas-block p.ident { color: var(--id-card-ink) !important; }

/* Mobile: cards edge-to-edge, no side padding effect */
@media (max-width: 991.98px) {
  body.identification .info-card,
  body.identification .list-block,
  body.identification .uber-block,
  body.identification .t-box {
    border-radius: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  /* Force full-width columns; avoid tiny columns */
  body.identification .row > [class^='col-'],
  body.identification .row > [class*=' col-'] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Force the link text to your light color across states */
#ctaAboutWash,
#ctaAboutWash:link
 {
  color: rgb(240, 228, 223) !important;
  text-decoration: none;
}

#ctaAboutWash:hover,
#ctaAboutWash:focus {
  color: #fff !important; 
}

/* If the link wraps icons/spans that keep turning black, force children too
#ctaAboutWash * {
  color: inherit !important;
}.  */