/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Pattaya&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sniglet:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@500&display=swap');

/* Site wide utility settings and fonts  */
/*------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  
  /*default unless overridden*/
  font-family:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* root CSS variables */
/*--------------------*/
:root{
    --red-color: #a13290;
    --text-color: #042940;
    --hover-color: #ffc037;
    --bg-color: #f5f5f5;

/*dark mode needs more work*/
    --dark-bg-color: #1a1a1a;
    --dark-text-color: #f5f5f5;
    --dark-hover-color: #ffc037;
    --dark-bg-color: #1a1a1a;
   
}

/* Media Queries */
/*----------------*/
/* 2xl */
@media (max-width: 1536px) {

}
/* xl */
@media (max-width: 1280px) {

}
/* lg */
@media (max-width: 1024px) {

}
/* md */
@media (max-width: 768px) {

}
/* sm */
@media (max-width: 640px) {

}
/* xs */
@media (max-width: 475px) {

}


/* MediaQuery - Container UtilityClass */
/*----------------*/
.container {
  max-width: 1536px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* 2xl */
@media (max-width: 1536px) {
  .container {
    max-width: 1280px;
  }
}

/* xl */
@media (max-width: 1280px) {
  .container {
    max-width: 1024px;
  }
}

/* lg */
@media (max-width: 1024px) {
  .container {
    max-width: 768px;
  }
}

/* md */
@media (max-width: 768px) {
  .container {
    max-width: 640px;
  }
}

/* sm */
@media (max-width: 640px) {
  .container {
    max-width: 475px;
  }
}

/* xs */
@media (max-width: 475px) {
  .container {
    width: 100%;
  }
}


/* 16px base font size,
    10px = 0.625rem
    12px = 0.75rem
    14px = 0.875rem
    16px = 1rem (base)
    18px = 1.125rem (body text)
    20px = 1.25rem
    24px = 1.5rem
    30px = 1.875rem
    32px = 2rem 
    
    
    style guide
    -----------------
    H1- 68px = 4.25rem
    H2- 55px = 3.4375rem
    H3- 44px = 2.75rem
    H4- 36px = 2.25rem
    H5- 28px = 1.75rem
    H6- 22px = 1.375rem

    p-large 24px = 1.5rem
    p-medium 20px = 1.25rem
    p-reg 18px = 1.125rem
    small- 14px = 0.875rem
    x-small- 12px = 0.75rem
    -----------------
    */



html{
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    /*scroll-behavior:smooth;*/
    letter-spacing: 0.4px;
}

body {
    background-color: rgb(109, 188, 104);
}
h2, h3 {
    margin-bottom: 0.675rem;
    color: #37837D;
    font-family: "Pattaya", cursive;
    font-size: 2.125em;

    /* */
    text-wrap: balance;
}
/*Sticky Header*/
header {
    font-size: 1.25rem;
    position:sticky;
    width: 100%;
    top:0;
    left:0;
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    z-index: 100;

    background-color: var(--bg-color);
    box-shadow: inset 0 -10px 0 0 rgba(255, 222, 76, 0.5);

    opacity: 1;
    letter-spacing: 0.3px;
    
}
/* Nav */
header nav a {
    font-weight: 400;
    color: var(--text-color);
    text-decoration: none;
    margin-left: 3rem;
    transition: 0.2s;
}
/*Logo*/
header h1 {
    color: darkgreen;
    padding-left: 3rem;
}

/* Nav hover & active styling */
header nav a:hover {
    color: var(--hover-color);
}
header nav a.active {
    color: var(--red-color);
}

/* ------ replace duplicate main with .containers for wide and narrow */
main {
    padding-inline: 10rem ;
    background-image: radial-gradient(at left center, rgb(161, 236, 131) 20%, rgb(44, 173, 196));
    /* try clamping this */
}
/* ------ replace duplicate main with .containers for wide and narrow */



/* Hero Section */
.home-hero {
    width: 100vw;
    min-height: 70vh;
    max-height: 90vh;
    display:flex;
    flex-direction: row;
    flex:1;
    justify-content:flex-start;
    align-items: center;
    
    isolation: isolate;
    background-image: radial-gradient(at left center, rgb(161, 236, 131) 20%, rgb(44, 173, 196));

    padding-inline:4rem;
/* blue teal radial gradient */
    /*background: #BBFFE0;
    background-image: radial-gradient(at left center, #BBFFE0, #3CC8AE);*/


    /*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=bbffe0&c2=3cc8ae&gt=r&gd=dcl
*/


    /*blue-green gradient*/
   /* background: linear-gradient(90deg, #c7ffdc 0.5 0%, #6dffff 0.8 100%);
    background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); */

    
    /*funky color gradient*/
    /* background: linear-gradient(
        217deg,
        rgba(255, 255, 204, 0.8),
        rgba(255, 231, 144, 0.2) 70.71%
      ),
        linear-gradient(127deg, rgba(255, 233, 36, 0.8), rgba(2, 255, 200, 0.349) 30.71%),
      linear-gradient(336deg, rgba(8, 87, 55, 0.124), rgba(241, 5, 194, 0.979) 80.71%); */

    /*orange gradient*/
    /*background-image: linear-gradient(to left, rgb(243, 155, 2), rgba(244, 218, 150) 50%);

    background-image: linear-gradient(to left, rgb(243, 2, 135), rgba(244, 218, 150) 50%); */

    
  }
/* work on this 
.home-hero {    
    background-image: radial-gradient(at left center, rgb(220, 236, 131) 20%, rgb(44, 173, 196));
} 
*/

.home-hero img {
    max-width: 140%;
    object-fit:fill;
    /* border: 2px solid rgb(243, 255, 109); */
    align-items:flex-end;
   /*mix-blend-mode:overlay;*/
    filter:contrast(1.2);
    filter:saturate(3.2);
    filter:blur(0px);
    transition-duration: 300ms;
    padding-block: 2rem;
    
}
.home-hero img:hover {
    max-width: 140%;
    object-fit:fill;
    /* border: 2px solid rgb(243, 255, 109); */
    align-items:flex-end;
  
    filter:blur(20px) saturate(3.2);
    transition-duration: 300ms;
}

.home-hero .text-box {
    color: var(--text-color);
    justify-content: center;
    align-items: flex-start;
    min-width: 35%;
    max-width: 50%;
    margin-left: 6rem;
    margin-right:6rem;
    overflow:auto;

    /* border: 2px solid red;*/
}


.home-hero .text-box h1 {
    font-size: 4.35rem;
    line-height: 1.2;
    letter-spacing: -2px;
    /*color: var(--text-color);*/
}
.home-hero .text-box h1:nth-child(2){
   /* color: var(--red-color);*/
   color:#964990
}
.home-hero .text-box p {
    font-size: 1.6rem;
    margin: 2rem 0;
}

/*CTA Button*/
.home-hero .text-box .btn{
    color: var(--red-color);
    width: 11.5rem;
    height: 2.8rem;
    border: 2px solid var(--red-color);
    background:transparent;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.2s;
    margin-top: 1rem;
}
/*CTA Hover*/
.home-hero .text-box .btn:hover{
    background-color: var(--red-color);
    color: var(--hover-color);
    box-shadow: 0 0 15px var(--hover-color);
}

dialog {
    border: 2px solid var(--red-color);
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    max-width: 30rem;
    margin-inline: auto;
    margin-block: auto;  
}
dialog::backdrop {
    background-color: #060540;
    background-blend-mode: color-burn;
    opacity: 0.5;
}

section.diagonal{
    position: relative;
    isolation: isolate;
    background-image: linear-gradient(
        45deg,
        #12c2e9,
        #c471ed,
        #f64f59);
        h2 {
            color: #f1e199;
            filter: drop-shadow(2px 2px 0px #d02173);
            font-size: clamp(3rem, 1.75rem + 4vw, 4rem);   
            /*tweak this - add more margins on content p and form */
            /*margin-inline-start: -1rem;*/
        };
        p {
            font-size: 1.125rem;
            max-width: 80ch;
        }
        textarea{
            color: #f1e199;
            width: 50ch;
            height: 20ch;
            resize: none; 
            font-family: "Sniglet", cursive;
            /*font-family: "caveat brush", cursive;*/
            color: #1f294f;
            font-size: 1.1rem;
            border-radius: 0.5rem;
            padding-inline: 1rem;
            padding-block: 0.5rem;
        }
        textarea:invalid {
            border: 2px dashed red;
        }
        textarea:valid {
            border: 2px solid green;
        }
        textarea:hover {
            border: 2px solid rgb(255, 139, 172);
        }
}   
section.diagonal::after{
    content: "";
    background-color: #ffc037;
    opacity: 0.75;
    position: absolute;
    z-index: -1;
    inset: 0;
    transform: skewY(-4deg);   
}

/*section.diagonal::after{
    content: "";
    background-color: #ffc037;
    opacity: 0.5;
    position: absolute;
    z-index: -1;
    inset: 0;
    transform: skewY(-9deg);   
}
section.diagonal::before{
    content: "";
    background-color: #ffc037;
    opacity: 0.5;
    position: absolute;
    z-index: -1;
    inset: 0;
    transform: skewY(4deg);
    
}*/
.diagonal-wrapper, .wavy-wrapper {
    max-width: 70rem;
    margin-inline: auto;
    padding-inline: 2rem;
    padding-block: 8rem;

}

section.wavy {
    position:relative;
    isolation: isolate;
    background-image: linear-gradient(
        90deg,
        #fdc830,
        #f37335);
    opacity: 0.75;
    
}
.wavy::before,
.wavy::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 45px;
    background: #6d198e;
    /*transform: skewY(4deg);*/
    /*transform: skewY(4deg);*/   
    /*-webkit-mask-image: url("grass-svg.svg");*/
}
.wavy::before{
    top:0
}
.wavy::after{
    bottom:0;

}


/*Grid Section*/

.layout-recent {
    /*max-width: 1260px;
    min-width: 580px;*/
    background-color: rgba(2, 35, 54, 0.757);
    
}


.recent-sightings-grid  {
    display: grid;
    grid-auto-flow:dense;
    gap: 1rem;
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    grid-auto-rows: 300px auto auto;

    container-type:inline-size;
}



.sighting {
    /*padding: 1.0rem; /*fix this */ 
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    gap: 1rem;

    background-color: rgb(15, 49, 65);
    border-radius: 0.5rem;
    overflow:hidden;
}
    .sighting > h3, .sighting > p {
        color:#f1e199;
        /*text-shadow: #964990 1px 1px 10px;*/
        filter: drop-shadow(1px 1px 8px #21d099);
    }


.sighting[data-featured="true"] {
    background-color: rgb(72, 21, 71);
    /*aspect-ratio: 1 /1.25;*/


    @container (min-width: 980px) {
        background-color: rgb(5, 39, 54);
        grid-column: span 2;
        /*grid-template-columns: subgrid;

        > img {
            grid-column: 1 / -1 */
        
    }

}


.sighting:hover {
    box-shadow: 0 0 12px rgb(252, 249, 233);
    background-color: rgb(22, 74, 97); 
    transform: scale(1.035);
    transition: 0.2s;
    transition-timing-function: ease-in-out;
    /*rotate: 1deg*/
    /*use rotate for fun*/
}

.sighting > img {
    width: 100%;
    height: 300px;
    /* 
    100%
    300px
    100% of the parent container
    Try +120% for cool visuals */
    object-fit: cover;
    
} 
.sighting >:not(img) {
    margin-inline: 0.6rem;
}


/*
.sighting > p {
    font-size: 1.2rem;
    /*margin: 0rem 0;
    color: yellow;
    display: block;
}
*/

p.sighting-comment {
    color:#d1b4ce;
    margin:0;
    padding:0;
    font-size: 1rem;

    display: none;
}













/*Benefits Section-FlexContainer*/
.home-benefits {
    display: flex;
    background-color: #ffffcc;

}
/*Benefits Section-Column*/
.home-benefits-column {
    width:max-content;
  
    border: var(--red-color) 5px dashed;
    padding-block: min(30vh, 10vh);
    padding-inline: min(30vw, 10vh);
    /*flex:1;*/
  }
  .home-benefits-column img{
    border: var(--red-color) 5px dashed;
  }


.chart-container{
    border: var(--red-color) 5px dashed;
}
.chart-container-right{
    border: var(--red-color) 5px dashed;
}

/*.video-background {
    padding: 150px 150px 150px 150px;
    background-image: radial-gradient(at left center, rgb(255, 172, 109) 20%, rgb(255, 109, 126));;
}*/

.video-container {
   

}
video {
    border-radius: 1rem;
}

/*Footer*/
footer {
    background-color: #ffffcc;
    border-top: var(--red-color) 5px dashed;
}




/* test */
.Tropical-Fruit-Punch-1-HSL { color: hsl(162, 48%, 20%);}
.Tropical-Fruit-Punch-2-HSL { color: hsl(134, 35%, 26%);}
.Tropical-Fruit-Punch-3-HSL { color: hsl(75, 57%, 60%); }
.Tropical-Fruit-Punch-4-HSL { color: hsl(54, 100%, 68%); }
.Tropical-Fruit-Punch-5-HSL { color: hsl(9, 100%, 60%); }



/* Green Globe On Moss theme */
/*-----------------------------*/
/* 1. Dark accent color - WELCOME H1 */
.Green-Globe-On-Moss-1-HSL { color: hsl(202, 100%, 29%); }
.Green-Globe-On-Moss-2-HSL { color: hsl(172, 100%, 36%); }
.Green-Globe-On-Moss-3-HSL { color: hsl(74, 80%, 62%); }
.Green-Globe-On-Moss-4-HSL { color: hsl(63, 84%, 86%); }
.Green-Globe-On-Moss-5-HSL { color: hsl(61, 31%, 84%); }

.sunny-day-1-HSL { color: hsl(90, 94%, 29%); }
.sunny-day-2-HSL { color: hsl(74, 47%, 60%); }
.sunny-day-3-HSL { color: hsl(56, 93%, 78%); }
.sunny-day-4-HSL { color: hsl(56, 96%, 50%); }
.sunny-day-5-HSL { color: hsl(56, 71%, 88%); }