/* 
   style.css - Version: 2025.6.14 (June 14, 2025 4:58 PM)
*/
/***********************************************************************************************
  📌 GLOBAL SETTINGS 
 ***********************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Roboto&display=swap');

:root {
  --clr-button:          #FFFFFF; /* white - button color variables           */
  --clr-button-bg:       #B2C6F9; /* blue bg for buttons on hover.  (CCDAFF)  */
  --clr-button-border:   #E2E2E2; /* button border color                      */
  --clr-text:            #2F4F4F; /* readable article type text               */
  --clr-blue-text:       #0000FF; /* text & link color: blue                  */
  --clr-black-text:      #000000; /* text & link color: black                 */
  --clr-text-bg:         #FFFFFF; /* text background for readability (FFFFFF) */
  --radius:              1rem;      /* button & card border radius              */
  --ff-1:                'Noto Sans JP', sans-serif;  /* primary font family    */
  --ff-2:                'Roboto', Arial, sans-serif; /* secondary font family  */
  --fk-w-width:           45%;       /* width for desktop and landscape         */
  --fk-s-width:           90%;       /* width for desktop and landscape         */
}

[id] {
  scroll-margin-top: 60px; /* Or whatever your fixed header height is */
}


:hover {                  /* DEBUG HOVER */
  outline: none;
  /* outline: 2px dotted red;  */
}

*, *::after, 
*::before { 
  /* The below commented out on March 5, 2023 11:20 AM due to conflict with font-awesome CSS libs 
     It was moved to ".hamburger .menu {"  BUT WHERE ELSE IS IT NEEDED?  ¯\_(ツ)_/¯ ❗️*/
  /* font-family: var(--ff-1);  */
  line-height: 1.5;
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

html {
  scroll-behavior: smooth;
}

body {
  background-image: url("/images/tile2.png");
  background-repeat: repeat;
  background-color: #FFFFFF;
  /* background-color: var(--clr-button-bg); */
  /* background-blend-mode: luminosity; */
  font-family: var(--ff-1);   
  margin: 0;
  padding: 0;
}

form { display: inline; }  /* REQ: prevent donation button wrap end of site menu */
form input { cursor: url('/images/favicon-black.png'), auto; }

/******************************************************************************************************
  📌 GLOBAL STYLES 
 ******************************************************************************************************/
a               { text-decoration:none; cursor: url('/images/favicon-black.png'), auto; }
a:link          { color:var(--clr-blue-text); }
a:visited       { color:var(--clr-blue-text); }
a:hover         { text-decoration: underline; color:var(--clr-blue-text); outline-color: transparent; }
/* a:focus-visible { outline-color: transparent; } */

/* BLUE SITE HEADINGS */
h1, h2, h3, h4, h5, h6 { color: var(--clr-blue-text); text-align: center; margin-bottom: 1rem; } 

/* BLACK HEADING CLASSES */
.h1b { font-size: 2em;    font-weight: 900; color: var(--clr-black-text); text-align: center; margin-bottom: 1rem; } 
.h2b { font-size: 1.5em;  font-weight: 900; color: var(--clr-black-text); text-align: center; margin-bottom: 1rem; } 
.h3b { font-size: 1.17em; font-weight: 900; color: var(--clr-black-text); text-align: center; margin-bottom: 1rem; } 
.h4b { font-size: 1em;    font-weight: 900; color: var(--clr-black-text); text-align: center; margin-bottom: 1rem; } 
.h5b { font-size: .83em;  font-weight: 900; color: var(--clr-black-text); text-align: center; margin-bottom: 1rem; }  
.h6b { font-size: .67em;  font-weight: 900; color: var(--clr-black-text); text-align: center; margin-bottom: 1rem; } 

.blue { color:var(--clr-blue-text); }      /* for blue text */
.nolf { display: inline; }                 /*  utility class to prevent cr lf  */
  
/***********************************************************************************************
  📌 GLOBAL COMPONENTS 
 ***********************************************************************************************/
.center {                                   /* DIV FORMAT - used in mnay places to center items */  
  margin: auto; 
  width: 80%;
  text-align: center;
  /* outline: 3px solid red; */
}

.tight_center {                             /* DIV FORMAT - used in mnay places to center items */  
  margin: auto; 
  width: 60%;
  text-align: center;
  /* outline: 3px solid red; */
}


.left_justify {                                  /* DIV FORMAT - used in mnay places to center items */  
  margin-left: 2rem;
  text-align: left;
}

.left_justify_indent {                                  /* DIV FORMAT - used in mnay places to center items */  
  text-align: left;
  margin-left: 2.5rem;
}

.title_name a {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;

}

.sub_title {                               /* used in support-us.html for donation text */
  font-size: 0.88rem;
  color: var(--clr-blue-text);
  margin: auto;
  text-align: center;
}

.tiny-type {                              /* used in support-us.html for donation text */
  color: var(--clr-text);
  margin: auto;
  text-align: center;
  font-size: 0.65rem;
}

.small-type {                              /* used in support-us.html for donation text */
  color: var(--clr-text);
  margin: auto;
  text-align: center;
  font-size: 0.75rem;
  /* font-weight:lighter; */
}


.larger-type {                              /* used in support-us.html for donation text */
  color: var(--clr-text);
  margin: auto;
  text-align: center;
  font-size: 0.88rem;
  font-weight:lighter;
}

.xlarger-type {                              /* used in support-us.html for donation text */
  color: var(--clr-text);
  margin: auto;
  text-align: center;
  font-size: 1rem;
  font-weight:lighter;
}

.xxlarger-type {                              /* used in support-us.html for donation text */
  color: var(--clr-text);
  margin: auto;
  text-align: center;
  font-size: 1.25rem;
  font-weight:lighter;
}

.content-title {                           /* used in index.html, help.html & about-us.html */
  font-size: 1rem;
  font-weight:bold;
  color: var(--clr-blue-text);
  margin: 0;
  padding-left: 1rem;
}

.content-text {                            /* used in help.html */
  font-size: 1rem;
  /* margin: 0; */
  padding-left: 1rem;
}

.small-content-text {                            /* used in help.html */
  font-size: 0.75rem;
  margin: 0;
  padding-left: 1rem;
}

#one-paw  { height: 29px; width: 26px; }   /* used in about-us.html & anywhere you want a one paw link */
.two-paws { width: 24px; }                 /* IMG FORMAT - for two paws icon, used in place of paw-tem below */


.left_paw, .right_paw {                    /* paw quotes for Featured Kitty 🐾<NAME>🐾  */
  padding-bottom:7px;
  width:10px; 
}

.left_paw {                                /* left paw flip for paw quotes for Featured Kitty 🐾<NAME>🐾  */
  transform: scaleX(-1);
}

/*  GRID AD INAGES */
.ads {                                       /* UL FORMAT (GIRD) - for grid of partner & supporter logos */ 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  grid-gap: 2rem;
  margin: 0;
  padding: 0;
  text-align: center;
}

.ad-item {                                   
  list-style: none;
  padding: 1rem 1rem 1rem 1rem;
  transition: transform 500ms ease;
}
.ad-item img { width: 150px; }               /* IMG FORMAT - for grid of partner & supporter logos  */
.ad-item:hover { transform: scale(1.125); }  /* zoom image on hover */
/* .ad-subscript { font-size: .88rem; }         TEXT FORMAT - for grid of partner & supporter logos subsscript */  
.ad-subscript { font-size: .75rem; }         /* TEXT FORMAT - for grid of partner & supporter logos subsscript */  

.rescue-counter { font-size: 0.88rem; font-style: italic; }   /* TEXT/FONT FORMAT - for rescue counter */                                               
.copyright { font-size: 0.88rem;  }                           /* TEXT/FONT FORMAT - for copyright message */   
.btn-go-top { display: none; }                                /* BUTTON in index.html (enabled in mobile media queries because of long Petfinder scroller */


/************************************************************************************************
  📌 SITE LOGO & MENU - used on all pages for logo and nav 
 ************************************************************************************************/
/* nav container for site-menu */     
 #nav-container { 
  /* padding-top: 10px;  2023-03-25 */
  padding-top: 5px; 
}              

.nav-list {
  background-image: url("/images/background.png");
  background-repeat: no-repeat;
  background-size: cover; 
  background-size: 1440px;
  background-position-y: center;
  box-shadow: 0px 0px 10px var(--clr-gray200);
  border-radius: var(--radius);
  width: 80%;
  margin: auto;
  padding: 1rem 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  vertical-align: middle;
}

.nav-item { list-style: none;  margin: 0; }                         /* nav item formating for site-menu items    */     
.nav-item:first-child { margin-right: auto; margin-left: 2rem; }    /* nav item formating for site-logo item     */
.nav-item:last-child { margin-right: 1rem; }                        /* nav item formating for donate button item */  
 
.site_logo {
  position: absolute;
}

#site-logo {                                                        /* IMG FORMAT for site logo */  
  /* position: absolute; */
  width: 200px;                                                     /* was: 240px; */        
}

.site-logo a {                                                        /* IMG FORMAT for site logo */  
  background: url('/images/e-rescue-site-logo.png') no-repeat left ;
}
 
/* FB link relative to site logo.  Padding for postion is crtical below logo */
.fb { 
  position: relative;    
  margin: -14px 0px 0px 75px !important;
  font-size: 0.75rem;
}
 
.fb a {                                 
  background: url('/images/facebook-logo.png') no-repeat left ;
  padding-left: 1.25rem;                                            /* was padding-left: 1.1rem;  */
} 
  
.site-menu {                                       /* SITE MENU - used in all html for site menu */
  text-align: center;
  width: 100%;
  padding: 1rem 0;
  /* padding-top: 20px; */
  font-size: 1.25rem;
}

/* SITE MENU - used in all html for site menu buttons */
/*  Without "white-space: nowrap;" this the buttons with multiple words will wrap */
.btns-site-menu {
  white-space: nowrap;
  margin-right: 1rem; 
  color: var(--clr-blue-text);
  background-color: var(--clr-button);  
  border-radius: var(--radius);
  border: 2px solid var(--clr-button-border);   
  cursor: url('/images/favicon-black.png'), auto;
  padding: 0 .5rem 0.1rem .5rem;
}

.btns-site-menu a {
  white-space: nowrap;                             
  text-decoration: none;
  text-transform: uppercase;
  margin: .5rem;    
  font-size: 0.88rem;
}

.btns-site-menu:hover {                            /* SITE MENU - used in all html for site menu buttons */
  background: var(--clr-button-bg);
  border: 2px solid var(--clr-button-bg);
  box-shadow: 0 0 5px 5px var(--clr-button-bg) inset, 0 0 10px 2px var(--clr-button-bg);
  font-weight: 550;
  background-color: white;
  transition: all 200ms ease-in;
}

.donate-button {             
  vertical-align: middle;    /* mmake sure donate button is lined up correctly */  
  width: 85px;  
  padding-bottom: 1px;       /* THIS WORKS❗️ line up button for top site menu */
  margin: .5rem .5rem .5rem .5rem; 
  /* margin: .5rem .5rem;       /* helps with nav-list button alignment */
}

.donate-button:hover {       /* make it glow */
  --clr-orange: #FED4A9;
  box-shadow: 0 0 5px 5px var(--clr-orange) inset, 0 0 10px 5px var(--clr-orange);  /* orange */
  border: 1px solid var(--clr-orange);
  border-radius: var(--radius);
}

/* PAGE MENU - used in all html for page menu buttons */
.page-menu {         
  margin: auto;                              
  font-size: 0.7rem;
  color: var(--clr-blue-text);
  padding-top: 0.5rem;
}

.page-menu a {                                      /* PAGE MENU - used in all html for page menu buttons */
  display: inline-block;
  font-size: .88rem;
  /* margin: top    right  bottom left */
  margin: .5rem  .5rem  .5rem  .5rem;
  padding: 0 .5rem 0 .5rem;
  background-color: var(--clr-button);  
  border-radius: var(--radius);
  border: 2px solid var(--clr-button-border); 
  text-align: center;
  text-decoration: none;
  transition: all 200ms ease-in;
  color: var(--clr-blue-text);
  cursor: url('/images/favicon-black.png'), auto;
}

.page-menu a:hover {                                /* PAGE MENU - used in all html for page menu buttons */
  background: var(--clr-button-bg);
  border: 2px solid var(--clr-button-bg);
  box-shadow: 0 0 5px 5px var(--clr-button-bg) inset, 0 0 10px 2px var(--clr-button-bg);
  background-color: white;
  font-weight: 900; 
  border-radius: var(--radius);
}

/* HAMBURGER MENU */

.hamburger {
  /* background-color: rgba(0,0,0,0); */
  position: absolute;
  top: 10px;
  right: 0;
  width: 200px;
  padding-right: 10px;
  z-index: 3;
}

.hamburger ul {
  margin: 0;
  list-style: none;
  overflow: hidden;
  text-align: center;
  background-color: var(--clr-text-bg);
}

.hamburger li a {                     
  display: block;
  padding: 15px 15px 15px 35px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.95rem;
  text-align: left;
}

.hamburger li a:hover,
.hamburger .menu-btn:hover {           
  background-color: var(--clr-button-bg); 
  background: var(--clr-button-bg);
  font-weight: 600;
}

/* menu */
.hamburger .menu {
  border-radius: var(--radius);
  clear: both;
  max-height: 0;
  transition: max-height .3s ease-out;
  /* The following was added on March 5, 2023 11:20 AM */
  font-family: var(--ff-1); 
}

/* icons for menu */
.icons-4menu {
  width: 20px;
  vertical-align: middle;
  margin-right: 3px;
}

/* icons for menu */
.icon-cat {
  width: 2.5rem;
  vertical-align: middle;
  margin-right: 3px;
}

/* the menu icon */

.hamburger .menu-icon {
  cursor: url('/images/favicon-black.png'), auto;
  float: right;
  padding: 28px 20px 10px 0;
  position: relative;
  user-select: none;
}

.hamburger .menu-icon .nav-icon {           
  background: blue;
  display: block;
  height: 2px;
  position: relative;
  transition: background .3s ease-out;
  width: 18px;
}

.hamburger .menu-icon .nav-icon:before,     
.hamburger .menu-icon .nav-icon:after {
  background: blue;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .3s ease-out;
  width: 100%;
}

.hamburger .menu-icon .nav-icon:before { top: 5px; }
.hamburger .menu-icon .nav-icon:after { top: -5px; }
.hamburger .menu-btn { display: none; }
.hamburger .menu-btn:checked ~ .menu {
  max-height: 350px;
  border: 2px solid var(--clr-button-border); 
}

.hamburger .menu-btn:checked ~ .menu-icon .nav-icon { background: transparent; }
.hamburger .menu-btn:checked ~ .menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top:0;
}

.hamburger .menu-btn:checked ~ .menu-icon .nav-icon:after {
  transform: rotate(45deg);
  top:0;
}

/***********************************************************************************************
  📌 PAGE SECTIONS - INDEX
 ***********************************************************************************************/


.AdoptionEventImg { max-height: 600px;}            /* IMG FORMAT: for adoption event images */   

.pet-views {                                       /* DIV - PetFinder scroller div - currenlty not much use but placeholder for future  */
  width: 80dvw;
  margin: auto;
  cursor: url('/images/favicon-black.png'), auto;
  text-align: left;
}
                                                   /* SEARCH FORM - used for Petfinder Search - a most excelent button search form*/                                                   /* SEARCH FORM - used for Petfinder Search - a most excelent button search form*/ 
.search-form {                                      
  width: 250px;                                    /* max value = 250px; anything larger fails on iPhone 4 */ 
  display: inline-block;
  margin: 5px 5px;
  padding: 5px;
}

.search-field {                                     /* SEARCH FORM - used for Petfinder Search - a most excelent button search form*/
  /* max-width: 100%; */
  padding: 5px 20px 5px 10px;
  border-radius: 1.5rem;   
  border: 2px solid var(--clr-button-border);
  font-size: 1rem;
}

.search-button {                                     /* 🔍 magifier icon SEARCH FORM - used for Petfinder Search */
  background: transparent;
  border: none;
  outline: none;
  margin-left: -37px;
}

.search-button img {                                  /* IMG 🔍 magifier icon SEARCH FORM - used for Petfinder Search */
  width: 20px;
  height: 20px;
  padding-top: 2px;
  object-fit: cover;
  cursor: url('/images/favicon-black.png'), auto;
}

/* INDEX.HTML */

#message-container {
  display: none;
  text-align: center;
  margin: 20px;
  padding: 20px;
  /* background-color: #f2f2f2;
  border: 2px solid #ccc;
  border-radius: 10px; */
}

#message-container img {
  max-width: 80%;
  height: auto;
  border-radius: 5px; /* test this */
}
#message-container p {
    font-size: 1em;
    margin-top: 10px;
}
#message-container a {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #B2C6F9;
  color: #000000;
  text-decoration: none;
  border-radius: 5px;
  /* test this */
  transition: background-color 0.3s; 

}
#message-container a:hover {
    /* background-color: #0056b3; */

    color: #000000;

    background-color: #B2C6F9;
}

#adoption_event {                       /* DIV ENABLE/DISANLE for Adoption Event notifications */ 
  padding: 5px 0 5px 0;    
  display: none; 
}


#featured__kitten     { display: none; }
#coming-soon          { display: none; }
#back_today          { display: none; }

.coming-soon {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  box-sizing: border-box;
}

.coming-soon-img {
  width: 100%;
  max-height: 100%;
  object-fit: cover;

  position: relative;
}

.featured-kitty {
  padding: 0 0 0 1rem;
  text-align: center;
}

  /* [ ✓ DONE on June 1, 2025 6:25 PM ]:  */
  .kitten_features_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(600px, 1fr));
    grid-gap: 16px; 
    max-width: 900px; 
    margin: 0 auto;
    justify-content: center;
  }

  .kitten_features_grid > div[style*="display: none"] {
    display: none !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .kitten_features_grid > div { 
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .kitten_features_grid.single-panel {
    grid-template-columns: 1fr !important;
    justify-items: center;
  }

  .kitten_features_grid.single-panel .slide_container {
    width: 75%;
  }

  .cattery_posters_grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);  /* change this to 'repeat(2, 1fr)' for two cattery posters */
    padding: 25px 125px 25px 125px;         /* bring grid columns together but padding left & right to 125px */
  }

  .cattery { 
    margin:auto;
    /* width: 100%; */
    text-align: center;
    padding: 0;
  }

  .cattery_image { 
    width: 40dvw; 
  }

  .adoptapet {
    width: 100%; 
    transition: transform 500ms ease;
  }
  
  .adoptapet:hover {
    transform: scale(1.125);
  }

/*  -------------------------------------
    slideshow gallery for featured kitty 
    -------------------------------------  */
  .slide_container {
    position: relative;
    background-image: url('/images/background.png');
    background-repeat: no-repeat;
    background-size: cover; 
    background-position-y: center;
    border-radius: var(--radius);
    margin: 0 auto;
    width: 100%; 
    min-width: 0; 
    box-sizing: border-box;
  }

  .slide_container p {
    color: var(--clr-text);
    padding: 0 1rem 1rem 1rem;
    text-justify:newspaper;
    text-align: justify;
    font-size: 1rem;
  }
  
  .mySlides { display: none;  }
  .mySlides img { 
      display: block; 
      margin: 0 auto 0 auto;        
      width: 100%;
      max-height: 600px;
      object-fit: cover;
      object-position: 85% 45%;
      border: 2px solid darkgray;
      overflow: hidden;

      position: relative;
  }

  .mySlides video,
  .mySlides iframe {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    border: 2px solid darkgray;
    overflow: hidden;
    position: relative;
  }


  .watermark {
    position: absolute;
    top: 60px; /* Adjust as needed */
    left: 30px;  /* Adjust as needed */
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    font-size: 30px;
    border-radius: 5px;
    transform: rotate(-20deg); /* Adjust the degree of rotation as needed */
}

  .top_level_watermark {
    position: absolute;
    left: 300px;  
    background-color: rgba(0, 0, 0, 0.085);
    color: #9C3CAB;
    font-weight: bold;
    padding: 10px 10px;
    font-size: 16px;
    border-radius: 5px;
    transform: rotate(10deg); 
    transform: rotate(-10deg); 
    max-width: 200px ;
    margin: 95px; 
    width: 80%;
    text-align: center;    
}


  /* Next & previous buttons */
  .prev, .next {
    position: absolute;
    cursor: url('/images/favicon-white.png'), auto;
    top: 300px;         /* location ~ 50% of height img */
    width: max-content; 
    padding: 16px;
    margin-top: -5%;    /* compenstate for text in container */
    color: white;
    background-color: rgba(180, 171, 176, 0.5);
    font-weight: bold;
    font-size: 1rem;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    border: none;
  }
  
  /* Position the "prev button" to the left */
  .prev { left: 0; border-radius: 3px 0 0 3px; }
  
  /* Position the "next button" to the right */
  .next { right: 0; border-radius: 3px 0 0 3px; }
  

  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    color:#ffffff;
    background-color: #000000;
    font-weight: 900; 
    text-decoration:none;
  }
  
  /* The dots/bullets/indicators */
  .dot_container { 
    /* margin-left: 45%;  */
    text-align:center;
    
  }

  .dot {
    cursor: url('/images/favicon-black.png'), auto;
    height: 15px;
    width: 15px;
    margin: .88rem;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  /* .dot:first-child    { margin-left: 44%; }  center all 3 dots */
  /* .active, .dot:hover { background-color: white; } */
  .active, .dot:hover { background-color: white; }
  
  /* Fading animation */
  .fade {
    outline-color: #000;  /* to prevent VS editor error when below is commented */
    animation-name: fade;
    animation-duration: 1.0s;
  }

  @keyframes fade { from {opacity: .4}  to {opacity: 1} }
  
/***********************************************************************************************
  📌 PAGE SECTIONS - SUPPORT-US
 ***********************************************************************************************/
.big-donate-button {                      /* IMG FORMAT - big donate button on support-us.html */
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 175px;
}

.big-donate-button:hover {                      /* IMG FORMAT - big donate button on support-us.html */
  --clr-light-orange: #f7e3d2;
  box-shadow: 0 0 25px 25px var(--clr-light-orange) inset, 0 0 5px 4px var(--clr-light-orange);  /* orange */
  border-radius: var(--radius);
  background-color: var(--clr-light-orange);
}

#whydonate{
  margin-bottom:0px; padding-bottom:0px;
}

#WaysToSupport{
  margin: 40px auto 0 auto;
  font-size: 1.5rem;   
  font-weight: 300;
  text-align: center; 
  color: var(--clr-blue-text); 
}

/* FLEX Coloumns - used on support-us.html under donate button  */ 
.columns {                                       
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: auto;
  width: 100vw;
  text-align: center;
}

.columns > *:nth-child(1) {                       
  flex: 1 1 55%;
  margin-left: 20px;
  margin-right: 20px;
  padding-left: 20px;
  padding-right: 20px;
  /* outline: 1px dotted red; */
}

.columns > *:nth-child(2) {                       
  flex: 1 1 20%;
  margin: 0;
  /* outline: 1px dotted red; */
}

.cost-note {             
  margin: auto;
  padding-left: 40px;
  padding-right: 40px;
  width: 100vw;
                         
  /* text-align: left; */
  text-justify:newspaper;
  text-align: justify;
  color: var(--clr-text);
  background-color: var(--clr-text-bg);
  font-size: 1rem;
}

.kitten-costs {                                   /* IMG FORMAT - used on support-us.html for Free "Kittens vs Rescue Kittens" img */
  width: 300px;   /* 250px; */
  margin: 0;
  padding: 0;

}

.forever_homes {
	margin: auto;
	height: 80vh;
	width: 60%;
	overflow: hidden;
	position: relative;
  box-shadow: 0 15px 60px 0 rgba(0, 0, 0, .5);
  border: 2px solid darkgray;
}

.forever_homes .slide {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
  background-position: 85% 25%;
	z-index: 1; 
	display: none;
	padding:0 15px;
	/* animation: slide 2s ease; */
  animation: slide 1s ease;
}

.forever_homes .slide.active {
	display: flex;
}

/* Transition of slides = zoom in from 1.5 to 1 (this may be distracting, so eliminate 0% if so) */
@keyframes slide {
/* 0%  { transform:scale(1.1); } */
  0%   { transform:scale(1.25); }  
	100% { transform: scale(1) ; }
}

.forever_homes .caption {	
	width: 25ch;
	height: min-content;
  font-size: 2.5rem;
	color:#FFFFFF;
	background-color: rgba(180, 171, 176, 0.5); 
	margin-left: 1rem;	
	margin-top: 65vh;
	padding: .25rem .5rem;
}

.forever_homes .slide.active .caption {	
	opacity:0;
	animation: captionText .5s ease forwards;
	animation-delay: 0.5s;
}

.forever_homes a { text-decoration: none; }

@keyframes captionText { /* stage left caption */
	0%{ opacity:0; transform: translateX(-100px); }
	100%{ opacity:1; transform: translateX(0px);	}
}

.forever_homes .controls .slide_prev,
.forever_homes .controls .slide_next{
 position: absolute;
 z-index: 2;
 top: 50%;
 height: 40px;
 width: 40px;
 margin-top: -20px;
 color:#ffffff;
 background-color: rgba(180, 171, 176, 0.5);
 text-align: center;
 line-height: 40px;
 font-size: 20px;
 cursor: url('/images/favicon-white.png'), auto;
 /* transition: all .5s ease; */
    transition: all .5s ease;
}
.forever_homes .controls .slide_prev:hover,
.forever_homes .controls .slide_next:hover{
	background-color: #000000;
}

.forever_homes .controls .slide_prev{ left:0; }
.forever_homes .controls .slide_next{ right:0; }

/*  COOMMENT OUT THE INDICATORS 

.forever_homes .indicator{
	display: none;
	position: absolute;
	left: 50%;
	
  bottom: 30px;
	bottom: 5px;
	
  z-index: 2;
	transform: translateX(-50%);
	width: 500px;
	width: fit-content;
}

.forever_homes .indicator div {
	display: inline-block;
	width:25px;
	height: 25px;
	color:#ffffff;
	background-color: rgba(180, 171, 176, 0.5);
	border-radius:50%;
	text-align: center;
	line-height: 25px;
	
  margin:0 3px;
	
  margin: 0 .25rem;
}

.forever_homes .indicator div.active { background-color: #000; }
*/

/*responsive*/
@media(max-width: 767px){
	.forever_homes{
		width: 100%;
    height: 60vh;
	}

  .forever_homes .slide{  
    background-position: 55% 35%;
  }

	.forever_homes .caption {	
		margin-top: 25rem;
    font-size: 2rem;
	}

}

/***********************************************************************************************
   PAGE SECTIONS - HELP
 ***********************************************************************************************/


/*
BEST VIODEO, but only for one iframe;  This then needs to all go in a GRID or FLEX box for multiple iframes
How To Make iframe's Responsive (YouTube Embeds, Google Maps etc.) - YouTube: https://www.youtube.com/watch?v=X4t0JxiBeO0&list=WL&index=12  

<div class="example">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/X4t0JxiBeO0?controls=0" 
  title="TEST" frameborder="0" autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
*/

.video-container {
  overflow: hidden;
  position: relative;
  width: 55%;
  margin: auto;
}

.video-container::after {
  padding-top: 56.25%;
  display: block;
  content: '';
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.paws_container {                           /* DIV FORMAT - Container for paws & paw items; for two-paw links & w/notes */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 80%;
  margin: auto;
}

/* UL - Use in help.html & about.html for two-paw links & w/notes */
.paws {                                     
  text-align: left;
  /* list-style: none; */
}

/* adjust indent after paw anchor */
/* .paws p { padding-left: 2.25rem; } */

.paw-item {                                 /* LI FORMAT - Use with .paws in help.html & about.html for two-paw links & w/notes */
  /* display: inline-block; */
  color: var(--clr-text);
  background-color: var(--clr-text-bg);
  margin-left: 1rem;
  margin-right: .88rem;
  margin-bottom: 1.5rem;
  list-style: none;
  text-align: left;
  /* text-justify:newspaper;
  text-align:justify; */
}

/* DIV for ANCHOR, IMG FORMAT - Use for anchor with div class="paw-item" two-paw img */ 
.paw-item a {  
 /* background: url('/images/two-paws-icon.png') no-repeat top left; */
 /* background-size: 23px; */
 /* padding-left: 2rem;   */
 background: url('/images/paw_icon_black.png') no-repeat top left;
 background-size: 16px;
 background-position-y: center;
 padding-left: 1.25rem;  
 font-size: 1rem;
}

.paw-item a:hover  { text-decoration: underline; color:var(--clr-blue-text); }

.did-you-know {
  margin: auto; 
  width: 50%;
  text-align: center;
  font-size: 1rem; 
  font-weight: bold;
}

.pic-did-you-know { 
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100vh;
  width: 100dvh;
}

.pic2-did-you-know { 
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 280px; 
  /* height: 262px; */
}

.pic-tnr { 
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50dvh;
}




/****************** 
   GUIDES STYLES 
*******************/
.guides {                                    /* GRID STYLE USING UL - used in about-us.html & support-us.html */ 
  padding: 1rem;
 }                   

.guides > ul {                               /* UL FORMAT GRID STYLE - used in about-us.html & support-us.html */
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 2rem;
}

/* consider making this ".guides > li and not include the >ul TEST IT ❗️  */  
.guides > ul > li {                           /* IL FORMAT GRID STYLE - used in about-us.html & support-us.html */
  position: relative;
  list-style: none;
  border: 1px solid var(--clr-button-border);
  border-radius: .5rem;
  background-color: var(--clr-text-bg);
  transition: transform 500ms ease;        
}

/* IL HOVER GRID - used in about-us.html & support-us.html */
.guides > ul > li:hover {                    
  transform: scale(1.025);
  box-shadow: 0 15px 60px 0 rgba(0, 0, 0, .5);
}

/* consider making this ".guides > li and not include the >ul TEST IT ❗️  */  
.guides > ul > li > figure {                   /* FIGURE DIV IMG FORMAT - used with guides in help.html (not in support-us.html) */
  /* max-height: 400px; September 24, 2021 8:45 AM */
  overflow: hidden;
  margin-top: 20px;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

/* consider making this ".guides > li and not include the >ul TEST IT ❗️  */  
.guides > ul > li > figure > img {             /* FIGURE IMG FORMAT - used with guides in help.html (not in support-us.html)  */
  width: 375px;
  /* max-height: 400px; */
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* consider making this ".guides > li and not include the >ul TEST IT ❗️  */  
.guides > ul > li > figure2 > a > img {             /* FIGURE IMG FORMAT - used with guides in help.html (not in support-us.html)  */
  width: 100%;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
  
}

/* consider making this ".guides > li and not include the >ul TEST IT ❗️  */  
.guides > ul > li > figure > figcaption {      /* FIGURE CAPTION FORMAT - used with guides in help.html (not in support-us.html)  */
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* consider making this ".guides > li and not include the >ul TEST IT ❗️  */  
.guides > ul > li > figure > figcaption > h3 {  /* FIGURE CAPTION HEADING FORMAT - used with guides in help.html (not in support-us.html)  */    
  padding: .75rem;
  font-size: 1.25rem;
}

/* consider making this ".guides > li and not include the >ul TEST IT ❗️  */  
.guides > ul > li > p {                         /* PARAGRAPH FORMAT - used with guides in help.html (not in support-us.html)  */  
  font-size: 1rem;
  line-height: 1.5;
  margin: 1rem  1rem 1rem 1rem;
  /* padding: 0.25rem .75rem 1rem 0; */
  color: var(--clr-text);
  /* text-align: left; */
  text-align: justify;
  text-justify: newspaper;
}

.guides > ul > li > .eaddr {                         
  margin: auto;
  text-align: center;
}


.guide_button {
  position: absolute;
  text-align: right;
  /* padding: 4rem 0 0 0; */
  bottom: 0;
  right: 0;

  margin: 4rem 0 0 0;
}

/* consider making this ".guides > li and not include the >ul TEST IT ❗️  */  
.guides > ul > li > a {                         /* ANCHOR/BUTTON FORMAT - used with guides in help.html (not in support-us.html)  */  
  /*  without this the buttons with multiple words will wrap */
  /* white-space: nowrap; */
  position: absolute;
  bottom: 0;
  right: 0;
  margin:  0 .5rem .5rem 0;
  padding: 0 .5rem 0 .5rem;
  background-color: rgba(176, 197, 248, 0.5);  /* bg color --clr-button-bg, but with opacity of 0.5 */
  border: 2px solid var(--clr-button-border);
  text-decoration: none;
  color: var(--clr-blue-text);
  /* border-radius: var(--radius); */
  border-radius: 0.5rem;
  text-align: center;
  display: inline-block;
  cursor: url('/favicon.png'), auto;
  transition: all 200ms ease-in;
  margin-right: 45px;
  outline-color: transparent;
}

/* consider making this ".guides > li and not include the >ul TEST IT ❗️  */  
.guides > ul > li > a:hover {                   /* ANCHOR/BUTTON FORMAT - used with guides in help.html (not in support-us.html)  */  
  background: var(--clr-button-bg);
  border: 2px solid var(--clr-button-bg);
  box-shadow: 0 0 5px 5px var(--clr-button-bg) inset, 0 0 10px 2px var(--clr-button-bg);
  background-color: white;
  font-weight: 900;
}


/* consider making this ".guides > li and not include the >ul TEST IT ❗️  */  
.guides > ul > li > ol {                        /* OL FORMAT inside guides text */  
  font-size: 0.85rem;
  line-height: 1.25;
  padding-left: 3rem;
  color: var(--clr-text);
}

/* consider making this ".guides > li and not include the >ul TEST IT ❗️  */  
.guides > ul > li > ul {                        /* UL FORMAT inside guides text */  
  font-size: 0.85rem;
  line-height: 1.25;
  padding-left: 3rem;
  color: var(--clr-text);
  margin-right: 1rem;
}

/***********************************************************************************************
  PAGE SECTIONS - ABOUT-US
 ***********************************************************************************************/
.banner {                                      /* IMG FORMAT LEGACY BANNER GIF IMAGE for about-us.html */       
  width: 100%;
  /* margin: auto; */
  /* width: 1024; */
  border-radius: 1rem;
} 

.main_poster {                                  /* IMG FORMAT LEGACY BANNER GIF IMAGE for embeded graphic */       
  /* width: 80%; */
  width: 100vh;
  width: 100dvh;
  margin: auto;
  /* width: 525; */
  border-radius: 1rem;
} 

.article {                                      /* DIV CONTAINER - FOR ABOUT US ARTICLE - for about-us.html */
  margin: auto;
  background-color: var(--clr-text-bg);
  width: 80%;
  text-align: center;
}

.article-content {                              /* DIV CONTAINER - FOR ABOUT US ARTICLE CONTENT - for about-us.html */
  font-size: 1.25rem;
  color: var(--clr-text);
  /* text-align: left; */
  text-justify: newspaper;
  text-align:justify;
}

.article-content p {                            /* PARAGRAPH - FOR ABOUT US ARTICLE CONTENT - for about-us.html */
  font-size: 1.25rem;
  color: var(--clr-text);
  padding: 10px 0 10px 0;
}


/* Oval & Circlar img format depending on picture dimensions -❗️ NOT CURRENTLY USED */
/* .featuredRounded {                              
  border-radius: 50%;                           
  width:150px;
  border: 3px solid darkgray;
} */

/***********************************************************************************************
  SHARE MENU BUTTON & POPUP
 ***********************************************************************************************/

 .button_color {
  color:var(--clr-blue-text);
  background: transparent;
  border: #000000;
  padding-left: 5px;
  cursor: url('/favicon.png'), auto;
}

.share-menu-button_color {
  /* white-space: nowrap; */                   /* without this the buttons with multiple words will wrap */
  position: absolute;
  bottom: 0;
  right: 0;
  margin:  0 .5rem .5rem 0;
  padding: 0 .5rem 0 .5rem;
  background-color: rgba(176, 197, 248, 0.5);  /* was bg color --clr-button-bg, but with opacity of 0.5 */
  border: 2px solid var(--clr-button-border);
  text-decoration: none;
  color: var(--clr-blue-text);
  border-radius: 0.5rem;
  /* text-align: center; */
  display: inline-block;
  cursor: url('/favicon.png'), auto;
  transition: all 200ms ease-in;
  /* margin-left: 10px; */
}

/* share-menu-button for right justified button in gird */
.share-menu-button_color-r {
  /* white-space: nowrap;  */                  /* without this the buttons with multiple words will wrap */
  position: absolute;
  bottom: 0;
  right: 0;
  margin:  0 .5rem .5rem 0;
  padding: 0 .5rem 0 .5rem;
  background-color: rgba(176, 197, 248, 0.5);  /* was bg color --clr-button-bg, but with opacity of 0.5 */
  border: 2px solid var(--clr-button-border);
  text-decoration: none;
  color: var(--clr-blue-text);
  border-radius: 0.5rem;
  text-align: center;
  display: inline-block;
  cursor: url('/favicon.png'), auto;
  transition: all 200ms ease-in;
}

/* share-menu-button(s) 'hover'  */
.share-menu-button_color:hover, .share-menu-button_color-r:hover {
  background: var(--clr-button-bg);
  border: 2px solid var(--clr-button-bg);
  box-shadow: 0 0 5px 5px var(--clr-button-bg) inset, 0 0 10px 2px var(--clr-button-bg);
  background-color: white;
  font-weight: 900;

  cursor: url('/favicon.png'), auto;
}

.share-menu {
  position: fixed;
  color: var(--clr-blue-text);
  background-color: white;
  padding: 10px;
  border: 1px solid var(--clr-blue-text);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  z-index: 999;
}

.share-menu popup_icon {
  font-size: 24px;
  color:var(--clr-blue-text);
  margin: 0 10px;
  cursor: pointer;
}

/* this is the styling for the ✖︎ button in main.js */
.share-menu close_button {
  border: none;  
  font-size: 16px;
  color:var(--clr-black-text);
  margin-left: 1px;
}



/************************************************************************************************************************************************************************** 
   MEDIA QUERIES 
 **************************************************************************************************************************************************************************/
/* large resolution monitor - site nav list correction - THIS IS A VERY SPECIFIC FIX */
@media(min-width: 1800px) { 
  .nav-list { width: 50%; }   
}

/* <<< SHOULD BE ALL MOBILE DEVICES THAT NEED HAMBURGER MENU OFF */
@media(min-width: 897px) {                                                      /* ✓ always turn off hamburger menu for devices > 897px */
      .hamburger .menu      { clear: none; float: right; max-height: none; }    /* turn off menu; buttons menus default to ON */
      .hamburger .menu-icon { display: none; }                                  /* turn off menu icon */
      .hamburger .menu a    { display: none; }                                  /* turn off menu links */
}

/* <<< SHOULD BE ALL MOBILE DEVICES = iPhone 11, 12, iPad (Ugh), iPad Mini (Ugh) and most Android of similar resolution */
/* 📍 MAYBE LATER EXPERIMENT WITH: changing all width: 100% to width: 100dvw or 100dvb and see how it looks*/
@media(max-width: 896px) {                                                      /* ✓ all mobile devices turn on hamburger menu and make below corrections */  
      .nav-item:nth-child(2), .nav-item:nth-child(3), .nav-item:nth-child(4), .nav-item:nth-child(5), 
      .nav-item:nth-child(6),.nav-item:nth-child(7) { display:none; }           /* turn off all nav-list button menus but the 1st one (logo) */
      .nav-list { width: 100%; }                                                /* TAKE THIS OUT AFTER TESTING - Make site nav wider for mobiles */
      .btn-go-top { display:inline-block; }                                     /* enable the go to top button */ 
      .paws_container { width: 100%; }                                          /* normally 80% width but wider for mobile */
      .AdoptionEventImg { width: 100%; }                                        /* normally 75% width but wider for mobile */
      .ads { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));  grid-gap: 1.5rem; }
      .columns { width: 100%; }                                                
            
      /* .banner { width: 100%; }                                                  normally width 80% but wider for mobile */
      .prev, .next { top: 175px;}                                               /* arrow locations from top = 50% of height */        
      .prev:hover, .next:hover { box-shadow: none; color: white; background-color: rgba(180, 171, 176, 0.5); }
      .mySlides img { width: 100%; height: 300px; max-width: 375px; }   /* important img sizing for Featured Kitty  */  
      .watermark {
        top: 55px; /* Adjust as needed */
        left: 25px;  /* Adjust as needed */
        font-size: 20px;
      }
    
      /* .dot:first-child { margin-left: 35%; }                                    center all 3 dots */

      .sub_title { font-size: 0.7rem; }
      .video-container { width: 100%; }                                         /* to ensure full width vs 55% */ 
      .page-menu { font-size: 0.7rem; }                                         /* PAGE MENU - used in all html for page menu buttons */
      .page-menu a { font-size: 0.7rem; }                                       /* PAGE MENU - used in all html for page menu buttons */
      .did-you-know { font-size: 0.65rem; margin: auto; width: 100%; text-align: center; }
      .pic-did-you-know { 
        width: 100%;
        margin: auto;
      }
      .pic2-did-you-know { width: 50%; margin: auto; }
      .pic-tnr { width: 75%; }
      
      .cost-note { font-size: 1rem; }                                         /* TEXT FORMAT used on support-us.html under Why Donate? */
      .left_justify {                                  
        width: 90%;
        /* outline: 3px solid red; */
        margin-left: 1.5rem;
      }
      
      .left_justify_indent {                                  
        width: 90%;
        /* outline: 3px solid red; */
        margin-left: 1rem;
      }
      
      .pet-views { width: 100dvw; }  /* NOTE: 2023-04-07 This widens the PetFinder window to full width on mobiles YAY! */
          

      .kitten_features_grid {
        grid-template-columns: 1fr !important;
      }

      .slide_container {
        /* width: 100% !important; */
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
      }

      .featured-kitty {
        width: 100% !important;
        padding: 10px;
        text-align: center;
        box-sizing: border-box;
      }

    .kitten_features_grid.single-panel .coming-soon .slide_container {
        width: 95vw !important;
        max-width: 420px;
        margin: 0 auto;
      }

    .kitten_features_grid.single-panel .featured-kitty .slide_container {
        width: 95vw !important;
        max-width: 420px;
        margin: 0 auto;
      }

      .coming-soon .slide_container {
        width: 95vw;
        max-width: 420px;
        margin: 0 auto;
      }      
      
      .cattery_posters_grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        justify-content: center;
        align-items: center;
      }
    
      .cattery {
        margin: auto; 
        text-align: center;
        padding-top: 25px;
      }
      
      .cattery_image {
        width: 90dvw;
      }
    
      .adoptapet img {
        width: 50dvw; 
      }
    
      .content-title {                           /* used in index.html, help.html & about-us.html */
        font-size: 1rem;
        font-weight:bold;
        color: var(--clr-blue-text);
        margin: 0;
        padding-left: 1rem;
      }
      
      .content-text {                            /* used in help.html */
        font-size: 0.8rem;
        padding-left: 1rem;
      }      

      .top_level_watermark {
        position: absolute;
        /* top: 10px;  */
        left: 130px;  
        transform: rotate(-10deg); 
    }
    
    #message-container img { max-width: 60%; }

}

/************************************************************************************************************************************************************************** 
   iframe containers for events.html
 **************************************************************************************************************************************************************************/

.responsive-iframe-container {
    /* width: 100%; */
    margin: auto;
    width: 100%;
    max-width: 80%;
    overflow: hidden;
}

.responsive-iframe-container iframe {
    width: 100%;
    height: 600px;
    border: 0;
    display: block;
}

/* Ensure viewport isn’t stretched */
body, html {
    max-width: 100%;
    overflow-x: hidden;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .responsive-iframe-container iframe {
        height: 500px; /* Adjust height for mobile */
    }
}



/* @media (orientation: landscape) { .slide_container { width: 45%; } }            45% width on landscape, but 90% on portrait  */
/* @media (orientation: portrait) { .slide_container { width: 90%; } }             90% width on portrait, but 45% on landscape  */
/* @media (min-width: 768px) { .slide_container { width: 45%; } }                  45% width on tablets (iPads)                 */

/************************************************************************************************************************************************************************** 
  🧨 FOR TEST PURPOSES
 **************************************************************************************************************************************************************************/