@charset "utf-8";

input.search-gander {border-radius: 8px; background-color: var(--mid); color: var(--darkbase); font-weight: 700; border: 1px solid var(--mid); height: 100%;}
input.search-gander:hover {background-color: var(--darkbase); color: var(--light); font-weight: 700; border: 1px solid var(--light); cursor: pointer;  filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.5));}
button.search-gander {font-weight: 700;}

button.search-gander {border-radius: 30px; max-width: max-content; display: flex; align-items: center; justify-content: center; gap:5px; padding: 4px 20px; min-height: 45px;}
button.search-gander {background-color: var(--mid); color: var(--darkbase); border: 2px solid var(--darkbase);  transition: all 0.3s ease; transition: background-color 0.4s ease, transform 0.2s ease;}
button.search-gander svg path {fill: var(--darkbase);}
button.search-gander:hover svg path {fill: var(--mid); transition: all 0.6s ease;}
button.search-gander:hover  {color: var(--mid); background-color: var(--darkbase); border: 2px solid var(--light);}

/********************* COVER CAROUSEL ************************/
.carousel-container {width: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: auto; -webkit-overflow-scrolling: touch; padding: 70px 0 30px 0;scrollbar-width: none;display: block; justify-content: start;    max-height: 100%;}
.carousel-container::-webkit-scrollbar { display: none; }
.carousel-track {display: flex; gap: var(--cover-gap);
    padding-left: calc(50vw - (var(--cover-w) / 2)); padding-right: calc(50vw - (var(--cover-w) / 2)); align-items: flex-end;}
.slide {flex: 0 0 var(--cover-w); width: var(--cover-w); scroll-snap-align: center;}
.slide img { width: 100%; height: 100%;  display: block; object-fit: cover;}
.season-bar {width: 100%; padding: 8px 0;font-weight: bold;
    font-size: 14px;text-align: center; color: #333; text-transform: uppercase;
    letter-spacing: 1px; border-top-left-radius: 10px;border-top-right-radius: 10px;}
.cover-card {display: flex;flex-direction: column; width: 100%; height: 100%;
    border-radius: 10px;overflow: hidden; background: #fff;
    transform-origin: bottom center; transform: scale(0.8);
    opacity: 0.5; transition: transform 0.3s ease, opacity 0.3s ease; border: 1px solid var(--darkbase);}
.slide.is-active .cover-card {transform: scale(1.15); opacity: 1;  box-shadow: 0 5px 10px rgba(0,0,0,0.4);}
.cover-card.solo {opacity: 1; display: flex;flex-direction: column;  width: 100%;
    height: 100%; border-radius: 10px;transform: scale(1);}
    .titlebar {padding:5px 20px 5px 20px; text-align: center;}
.gmaps {background-image: url(../images/goxhill-maps/compass.jpg);
background-position: top center; position: relative;}

/* ******************* MAPS ONLY - SPINNY PIN ************************** */
.pin-container {perspective: 1000px; display: flex; justify-content: center; margin-bottom: 15px; position: absolute; right:10px;}
.turning-pin {width: 40px; height: auto; animation: spinPin 6s linear infinite;filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));}
@keyframes spinPin {from { transform: rotateY(0deg); } to { transform: rotateY(360deg); }}

/******  MAP ONLY ************/
.mapboy {z-index: 10; }
.mapboy {position: absolute; height: calc(100% ); pointer-events: none; width: 100%;}
.mapboy img {width:350px;filter: drop-shadow(5px 5px 8px rgba(0, 0, 0, 0.8)); }
.box:has(.mapboy){height:100%;}
.image-area:has(.mapboy){min-height:260px;}
.banner-grid:has(.mapboy) .maxed{min-width: 333px;}

/*************** ARCHIVES ********************/
.goose-lib1 {position: absolute; height:200px; width: auto; bottom: -15px; left:2%; filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.5));}

.goose-lib2 {position: absolute; height:200px; width: auto; bottom: 0; left:-5px; filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.5));}
.goose-lib2 {z-index: 401;}
.over-mid img.goose-lib2 {border-right: none; border-left: none; width: auto;}
.over-mid.ai-overview img.goose-lib2 {height: auto;}

.whitespace .yr {font-size: 1.9rem; font-weight: 800;}
.whitespace .mapno {font-size: 1.3rem; font-weight: 800;}
.mapno {display: inline-flex; justify-content: center; align-items: center; gap:10px;}
.mapno span {color: #fff; background-color: var(--darkbase); border-radius: 50%; width: 35px; min-width: 35px; height: 35px; text-align: center; display: inline-flex; justify-content:center; align-items: center; line-height:0px; font-size: 1.1rem; }
.maptitle,.mapsub{font-weight: 700; font-size: 1.2em; text-align: center;}

:root {--cover-w: 180px; --cover-gap: 30px;}

@media (min-width: 1700px)
{
.goose-lib2 {left:30% !important;}
}
@media (min-width: 1200px)
{  
.goose-lib1 {height:500px !important; left:5% !important;}
}
@media (min-width: 900px)
{
.image-area:has(.mapboy), .image-area:has(.adspec) {min-height:440px;}
.banner-grid:has(.mapboy) {grid-template-columns: 1fr 460px minmax(0, 540px) 1fr;}
.mapboy {left: 48px; bottom:-12px;}
.mapboy img {width:500px;}
.goose-lib1 {bottom: -25px !important;}
}
@media (min-width: 750px)
{ 
.goose-lib2 {height:450px;}
.goose-lib1 {height:350px;bottom: -25px}
.carousel-container {    padding: 100px 0 70px 0;}
.whitespace .yr {font-size: 2.5rem;}
}
@media (min-width: 600px)
{
 :root {--cover-w: 250px;--cover-gap: 40px;}
}
@media (max-height: 559px)
{
.carousel-window {max-height: calc(95vh - 56px);}
.carousel-container {padding: 50px 0 40px 0;}
}
@media (min-width: 1024px) and (min-height: 800px) {
.carousel-window {max-height: none !important; height: auto;}
:root {--cover-w: 250px; }
}