@font-face {
    font-family: "carbona";
    src: url("../fonts/carbona.ttf") format("truetype"), 
         url('../fonts/carbona.woff2') format('woff2'),
         url('../fonts/carbona.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: "runescape";
	src: url("../fonts/RuneScape-Plain-12.otf") format("woff2"),
             url("../fonts/RuneScape-Plain-12.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "runescape";
	src: url("../fonts/RuneScape-Bold-12.otf") format("woff2"),
             url("../fonts/RuneScape-Bold-12.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
}

html, body {
    min-height: 100%;
    min-width: 100px;/*very small min, remain as responsive as possible*/
    height: 100%;
    margin: 0;
    background-color: #0F75BC;
}

header {
    height: 16vh;
    min-height: 64px;
    background-color: #0D619C;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
      -moz-user-select: none; /* Firefox */
       -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                            supported by Chrome and Opera */
    -webkit-tap-highlight-color: transparent;
    
    display: flex;
    flex-direction: column; /* Ensure items are arranged in a column */
    justify-content: flex-end; /* Align items to the bottom */
}

header h2 {
    font-family: 'carbona', Arial, sans-serif;
    font-weight: bold;
    margin: 0;
    padding: 0;
    color: white;
    text-shadow: 1px 1px black;
    letter-spacing: 2px;
    margin-left: -20%;
    
    text-align: center;
    font-size: 3vw; /* Fallback */
    font-size: clamp(2rem, 3vw, 100rem);
}

header h2 > sup {
    vertical-align: super;
    font-size: 1vw; /* Fallback */
    font-size: clamp(0.75rem, 1vw, 100rem);
}

#headnav {
    height: 8vh;
    min-height: 32px;
    background-color: rgb(34, 34, 34);

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    position: relative; /* Make #headnav the positioning context */
    z-index: 1000;
}

#headnav h2 {
    margin: 0;
    padding: 0;
    font-family: 'carbona', Arial, sans-serif;
    color: orange;
    margin-left: -20%; /* Your original margin */

    text-align: center;
    font-size: 1.5vw;
    font-size: clamp(1rem, 1.5vw, 100rem);
}

#sidenav-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 80%;
    aspect-ratio: 1;

    padding: 10px 5px 10px 5px;

    position: absolute; /* Position it absolutely */
    right: 1%; /* Align to the right edge of #headnav */
    top: 50%; /* Center vertically (initial position) */
    transform: translateY(-50%); /* Adjust vertical centering */
    
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Arrange bars in a column */
    justify-content: space-between; /* Distribute space evenly */
    
    -webkit-border-radius: 12.5%;
           border-radius: 12.5%;
}

#sidenav-toggle:hover {
    background-color: #444444;
    box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.3), /* Debossed effect */
                inset -2px -2px 5px rgba(0, 0, 0, 0.7);
}

#sidenav-toggle:focus-within {
    background-color: gray;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), /* Debossed effect */
                inset -2px -2px 5px rgba(255, 255, 255, 0.7);
}

#sidenav-toggle:focus-visible {
    border: 2px solid orange;
    outline: none;
}

#sidenav-toggle .bar {
    width: 100%;
    height: 0.5vh;
    border-radius: 0.25vh;
    background-color: white;
    pointer-events: none;
}

#sidenav-links {
    position: absolute;
    top: 100%; /* Position below the button */
    right: 0;
    background-color: rgb(42, 42, 42);
    padding: 10px;
    width: 40vw;
    display: none;
    text-align: left;
    color: white;
}

#sidenav-links ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sidenav-links fieldset {
    margin: 0;
    padding: 5px;
}

#sidenav-links a {
    color: orange;
    display: inline;
    width: 100%;
    text-decoration: none;
    overflow-wrap: anywhere;
}

#sidenav-links a:focus-visible {
    outline: 1px dashed orange;
    -moz-outline-radius: 8px;
}

#sidenav-links a:hover {
    color: white;
    text-decoration: underline;
}

#sidenav-toggle:focus-within #sidenav-links {
    display: block; /* Show links when button or children have focus */
}

.headerimage {
  background-color: orange;
  position: absolute;
  transform: translateY(-50%);
  top: 35%;
  left: 2%;
  z-index: 1;
  height: 16vh;
  aspect-ratio: 1;
  -webkit-box-shadow: 0 0 5px 0 black;
  box-shadow: 0 0 5px 0 black;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  overflow: hidden; /* Important for containing the video */
  display: flex; /* Enable flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

.headerimage img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
  
  width: 80%;
  height: 80%;
  object-fit: cover; /* Ensures video fills the container */
  display: block;
}

::-webkit-input-placeholder {
    color: white;
    opacity: 1 !important;
    text-align: center;
    font-family: 'carbona', Arial, sans-serif;
}

:-moz-placeholder {
    color: white;
    opacity: 1 !important;
    text-align: center;
    font-family: 'carbona', Arial, sans-serif;
}

::-moz-placeholder {
    color: white;
    opacity: 1 !important;
    text-align: center;
    font-family: 'carbona', Arial, sans-serif;
}

::-ms-input-placeholder {
    color: white;
    opacity: 1 !important;
    text-align: center;
    font-family: 'carbona', Arial, sans-serif;
}

:-ms-input-placeholder {
    color: white;
    opacity: 1 !important;
    text-align: center;
    font-family: 'carbona', Arial, sans-serif;
}

::placeholder {
    color: white;
    opacity: 1 !important;
    text-align: center;
    font-family: 'carbona', Arial, sans-serif;
}

button {
    cursor: pointer;
}

button:focus {
    outline: 1px dashed orange;
    -moz-outline-radius: 8px;
}

button:focus:not(:focus-visible) {
    outline: 0;
}

button:focus:not(:-moz-focusring) {
    outline: 0;
}

button:-moz-focusring {
    outline: 1px dashed orange;
    -moz-outline-radius: 8px;
}

button:focus-visible {
    outline: 1px dashed orange;
    -moz-outline-radius: 8px;
}

button:active {
    position: relative;
    top: -1px;
}

#searchcontainer {
    height: max(8vh, 36px);
    background-color: #0D619C;
    margin: 0 auto;
    margin-top: 20px;
    width: 60%;
    -webkit-border-radius: max(4vh, 18px);
           border-radius: max(4vh, 18px);
    background-image: url("../images/search.png");
    background-repeat: no-repeat;
    background-size: auto calc(max(3vh, 24px));
    background-position: 2.5% center;
    position: relative;
    display: block;
    box-sizing: border-box;
    padding-left: calc(max(6vw, 36px));
    padding-right: calc(max(6vw, 36px));
    cursor: text;
}

#itemsearch {
    width: 100%;
    height: 100%;
    border: none;
    color: white;
    background-color: transparent;
    text-shadow: 1px 1px black;
    
    font-size: 1.5vw; /* Fallback */
    font-size: clamp(1rem, 1.5vw, 1000vw); /* Effectively no max */
}

#itemsearch:focus {
    outline: 2px solid orange;
}

#customsearchtoggle {
    height: 100%;
    position: absolute;
    width: calc(max(6vw, 32px));
    background-color: transparent;
    border: 0;
    border-left: 1px solid #0F75BC;
    text-shadow: 1px 1px black;
    background-image: url("../images/settings.png");
    background-size: auto calc(max(3vh, 24px));
    background-repeat: no-repeat;
    background-position: center;
}

#customsearchtoggle:hover {
    outline: 0;
}

#customsearchtoggle:focus {
    outline: 2px solid orange;
}

#customsearchpanel {
    margin: 0 auto;
    margin-top: 20px;
    display: none;
    background-color: #0D619C;
    width: 60%;
    -webkit-border-radius: max(4vh, 18px);
           border-radius: max(4vh, 18px);
    color: white;
    text-shadow: 1px 1px black;
    text-align: center;
    padding-bottom: 10px;
}

#customsearchtext {
    display: block;
    width: 90%;
    padding: 5px;
    margin: 0 auto;
    font-size: 1.5em;
    color: white;
    text-shadow: 1px 1px black;
    font-family: 'carbona', Arial, sans-serif;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
      -moz-user-select: none; /* Firefox */
       -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                            supported by Chrome and Opera */
}

#customsearchpanel fieldset {
    display: block;
    width: 60%;
    margin: 0 auto;
    text-align: center;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
      -moz-user-select: none; /* Firefox */
       -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                            supported by Chrome and Opera */
}

#customsearchpanel legend {
    font-weight: bold;
    color: orange;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

#customsearchpanel label {
    display: block;
}

#customsearchpanel input {
    margin: 5px;
}

#nameFilter, #shopRangeFilter {
    display: none;
    width: 70%;
    text-align: center;
    margin: 0 auto;
}

#nameFilter option:nth-child(even), #shopRangeFilter option:nth-child(even) {
    background: #DDD;
}

#nameFilter option:nth-child(odd), #shopRangeFilter option:nth-child(odd) {
    background: #CCC;
}
    
#resultpanel {
    display: none;
    background-color: #0D619C;
    margin: 0 auto;
    width: 60%;
    border-bottom-left-radius: max(4vh, 18px);
    border-bottom-right-radius: max(4vh, 18px);
    text-align: center;
}

#connectionbar {
    display: none;
    margin: auto;
    padding: 5px;
    -webkit-border-radius: 12px;
           border-radius: 12px;
    width: 40%;
    min-height: 6px;
    aspect-ratio: 25;
}

#resulttext {
    width: 90%;
    padding: 5px;
    margin: 0 auto;
    display: none;
    font-size: 2vw; /* Fallback */
    font-size: clamp(1rem, 2vw, 1000vw); /* Effectively no max */
    color: white;
    text-shadow: 1px 1px black;
    font-family: Georgia;
    border-top: 1px solid #0F75BC;
}

#selectallbutton {
    transform: scale(1.5); /* Increase size by 50% */
}

#selectionpanel {
    display: none;
    margin: 5px;
}

#resultcontainer {
    max-height: 50vh;
    margin: 0 20px;
    
    overflow-y: scroll;
    overflow-x: hidden; /* Hide horizontal scrollbar */
    
    padding: 5px;
    padding-inline-end: env(scrollbar-width, 17px);
    
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 5px;
}

.resultdata {
    max-width: 30vw;
    -webkit-border-radius: 8px;
           border-radius: 8px;
    border: 2px solid black;
    display: inline-flex;
    margin: 0;
    width: 100%;
    vertical-align: bottom;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
      -moz-user-select: none; /* Firefox */
       -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                            supported by Chrome and Opera */
    -webkit-tap-highlight-color: transparent;
    font-family: Georgia;
    align-items: center;
    position: relative;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background-color: #A5C6FB;
}

.resultdata:hover,.resultdata:active {
    outline: 0;
    border: 2px solid #A1A1A1;
}

.resultdata.selected {
    border: 2px solid orange;
    box-shadow: 0 0 10px 5px rgba(255, 165, 0, 0.7);
    animation: orangeGlow 2s infinite alternate ease-in-out;
}

@keyframes orangeGlow {
  0% {
    box-shadow: 0 0 1px 0 rgba(255, 165, 0, 0.7); /* Initial: Strong color, very small spread */
  }
  50% {
      box-shadow: 0 0 3px 2px rgba(255, 200, 100, 0.5); /* Medium: slightly weaker color, small spread */
  }
  100% {
    box-shadow: 0 0 5px 4px rgba(255, 220, 150, 0.3); /* Final: Weakest color, slightly larger spread */
  }
}

.resultdata:focus-visible {
    outline: 2px dashed white;
}

.resultdata > .item-members {
    position: absolute;
    top: 0;
    left: 0;
}

.resultdata > .item-icon {
    position: absolute;
    top: 0;
    left: 0;
    
    margin: 0 auto;
    
    height: 30%;
    aspect-ratio: 1;
    
    min-width: 32px;
    min-height: 32px;
    
    border: 2px solid black;
    border-top: none;
    border-left: none;
    
    box-shadow:
        inset 2px 2px 5px rgba(0, 0, 0, 0.2), /* Shadow (inset) */
        inset -2px -2px 5px rgba(255, 255, 255, 0.7); /* Highlight (inset) */
    
    border-top-left-radius: 8px;
    
    pointer-events: none;
}

.resultdata:hover > .item-members, .resultdata:active > .item-members {
    opacity: 0.2;
}

.resultdata > .item-id {
    position: absolute; /* Position relative to the nearest positioned ancestor */
    top: 8px; /* Adjust top position */
    right: 5px; /* Adjust right position */
    
    font-size: 1vw; /* Fallback */
    font-size: clamp(0.75rem, 1vw, 1000vw); /* Effectively no max */
}

.resultdata > .item-price {
    font-family: 'runescape';
    -webkit-font-smoothing: none;
    text-rendering: optimizeLegibility;
    
    position: absolute; /* Position relative to the nearest positioned ancestor */
    left: 5px;
    padding-top: 32px;
    
    white-space: nowrap; /* Prevent text from wrapping */
    overflow-x: hidden; /* Hide horizontal overflow */
    overflow-y: visible; /* Allow vertical overflow */
    text-overflow: ellipsis; /* Add ellipses (...) */
    max-width: 100%;
    width: 70%;
    font-weight: normal;
    text-align: left;
    
    font-size: 1vw; /* Fallback */
    font-size: clamp(0.75rem, 1vw, 1000vw); /* Effectively no max */
}

.resultdata > .item-margin {
    font-family: 'runescape';
    -webkit-font-smoothing: none;
    text-rendering: optimizeLegibility;
    
    position: absolute; /* Position relative to the nearest positioned ancestor */
    right: 5px;
    padding-top: 32px;
    
    white-space: nowrap; /* Prevent text from wrapping */
    overflow-x: hidden; /* Hide horizontal overflow */
    overflow-y: visible; /* Allow vertical overflow */
    text-overflow: ellipsis; /* Add ellipses (...) */
    max-width: 100%;
    width: 30%;
    font-weight: normal;
    text-shadow: 1px 1px 0 black;
    text-align: center;
    
    font-size: 1vw; /* Fallback */
    font-size: clamp(0.75rem, 1vw, 1000vw); /* Effectively no max */
}

.resultdata > .item-name {
    position: absolute; /* Position relative to the nearest positioned ancestor */
    bottom: 0px;
    
    font-family: 'runescape';
    -webkit-font-smoothing: none;
    text-rendering: optimizeLegibility;
    margin: 0;
    color: orange;
    text-shadow: 1px 1px 0 black;
    font-weight: bold;
    
    border-top: 2px solid black;
    
    box-shadow:
        inset 2px 2px 5px rgba(0, 0, 0, 0.2), /* Shadow (inset) */
        inset -2px -2px 5px rgba(255, 255, 255, 0.7); /* Highlight (inset) */
	
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
	   
    background-color: #89A4D0;
    
    width: 100%;
    
    white-space: nowrap; /* Prevent text from wrapping */
    overflow-x: hidden; /* Hide horizontal overflow */
    overflow-y: visible; /* Allow vertical overflow */
    text-overflow: ellipsis; /* Add ellipses (...) */
    
    font-size: 1.25vw; /* Fallback */
    font-size: clamp(1rem, 1.25vw, 1000vw); /* Effectively no max */
}

#selectionribbon {
    background-color: #222222;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin-top: 20px;
    width: 100%;
    height: 4vh;
    /* Use Flexbox to center the button */
    display: none;
    justify-content: center; /* Center button horizontally */
    align-items: center;     /* Center button vertically */
    overflow: visible; /* Allow button to extend below */
    position: absolute;
    bottom: 4vh;
}

#selectionribbonbutton {
    /* --- Specify the desired overall size of the V-shape --- */
    width: 32vh;
    height: 8vh;

    background-color: #0D619C;
    border: 2px solid black;
    cursor: pointer;
    outline: none;

    /* --- Text styling --- */
    text-shadow: 1px 1px 0 black;
    color: white;
    font-size: 3vh; /* Fallback */
    font-size: clamp(0.75rem, 3vh, 1000vh); /* Effectively no max */
    
    /* --- Use Flexbox *on the button* to center the text inside the V --- */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Stack items vertically */
    padding: 0 10px; /* Add horizontal padding if needed */
    text-align: center; /* Fallback */
    position: relative;
    z-index: 2; /* Position it behind the main button content */
    
    /* Add drop-shadow for a more shape-following effect */
    filter: drop-shadow(0 0 10px rgba(255, 165, 0, 0.7)); /* Initial shadow */
    animation: orangeGlow 2s infinite alternate ease-in-out;
}


#selectionribbonbutton:hover, #selectionribbonbutton:active {
    background-color: #406F90;
}

#selectedtext {
    color: orange;
    text-shadow: 1px 1px 0 black;
    font-size: 1.5vh; /* Fallback */
    font-size: clamp(0.3rem, 1.5vh, 1000vh); /* Effectively no max */
}

#detailslider {
    margin: 0;
    padding: 0;
    padding-inline-end: env(scrollbar-width, 17px);
    list-style: none;
    display: flex;
    background-color: #222222;
    width: 100vw;
    align-items: center;
    justify-content: center;
    overflow: visible;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.detailsslideritem {
    border: 1px solid gray;
    background-color: #0D619C;
    color: white;
    text-shadow: 1px 1px black;
    padding: 10px;
    display: block; /* Ensure items stay in a row */
    box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.3), /* Embossed effect */
                inset -2px -2px 5px rgba(0, 0, 0, 0.7);
    height: 2vh;
    min-width: 32px;
    min-height: 32px;
    aspect-ratio: 1;
        display: flex; /* Make the item a flex container */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.detailsslideritem.selected {
    border: 1px solid orange;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), /* Embossed effect */
                inset -2px -2px 5px rgba(255, 255, 255, 0.7);
}

.detailsslideritem:hover:not(.selected), .detailsslideritem:active:not(.selected) {
    border: 1px solid gray;
    background-color: #0F75BC;
    cursor: pointer;
}

.detailsslideritem img {
    object-fit: contain; /* Prevents distortion of images */
}

#graphcontainer {
    margin: auto auto;
    width: 100%;
    height: 70%;
    border-top: 2px solid orange;
    border-bottom: 2px solid orange;
    background-color: #A5C6FB;
}

#itemdetails {
    margin: 0 auto;
    margin-top: 20px;
    display: none;
    background-color: #0D619C;
    width: 100vw;
    height: 100vh;
    text-align: center;
}

.detailed-item-container {
    margin: 5px;
}

.detailed-item-header {
    width: 60%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.detailed-item-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 5px;
}

.detailed-item-data {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.detailed-item-section {
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 5px;
    background-color: #fff;
}

.detailed-item-section-title {
    margin-top: 0;
    font-size: 16px;
    margin-bottom: 5px;
}

.detailed-item-section p {
    margin: 5px 0;
    font-size: 14px;
}

/* Adjust header and container width when in portrait or small width screens */
@media (orientation: portrait), (max-width: 640px) {
    header, #headnav > h2 {
        display: none;
    }
    
    
    #resultcontainer {
        max-height: 65vh;
    }

    #sidenav-links a {
        display: block;
    }

    #headnav {
	display: block;
    }
    
    .headerimage {
	top: 0;
	left: 0;
	height: 100%;
	aspect-ratio: 1;
	position: relative;
	transform: none;
	box-shadow: none;
    }
    
    .container {
	width: 100%;
    }
    
    #searchcontainer {
	width: 90%;
    }
    
    #resultpanel {
	width: 90%;
    }

    #customsearchpanel {
        width: 90%;
    }
    
    .detailed-item-header {
        width: 90%;
    }
    
    .resultdata {
	max-width: 50vw;
    }
}

/* Reduce detailed item result data as screen size decreases */
@media (max-width: 360px) {
	.resultdata {
	    min-height: 40px;
	    min-width: 40px;
	    max-width: 100%;
	}
	
	.resultdata > .item-id,
	.resultdata > .item-price,
	.resultdata > .item-margin,
	.resultdata > .item-name {
	    display: none;
	}
	
	.resultdata > .item-icon {
	    position: relative;
	    width: 100%;
	    height: 100%;
	    border: none;
	    pointer-events: auto;
	    border-radius: 8px;
	    box-shadow: none;
	    background-color: transparent !important;
	}
	
	#resultcontainer {
	    grid-template-columns: 100%;/* force 1 column */
	}
}