@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,500&display=swap');

/* ------------------------------------------------------------------
   Global tokens
   ------------------------------------------------------------------ */
:root{
    /* Layout */
    --topbar-h: 75px;

    /* Theme tokens (safe fallbacks)
       NOTE: These may be overridden at runtime by <style id="siteThemeVars">.
    */

    /* Website surfaces (panels/cards/etc.) */
    --panel-bg: rgba(255,255,255,0.05);
    --panel-border: rgba(255,255,255,0.16);
    --panel-blur: 15px;

    /* Popups/modals */
    --popup-bg: rgba(255,255,255,0.05);
    --popup-border: rgba(255,255,255,0.16);
    --popup-blur: 15px;
    --popup-text: var(--site-text, rgba(255,255,255,0.92));
    --popup-text-muted: var(--site-text-muted, rgba(255,255,255,0.72));

    /* Inputs / controls */
    --input-bg: rgba(10,10,14,0.92);
    --input-border: rgba(255,255,255,0.22);
    --input-text: rgba(255,255,255,0.96);
    --input-placeholder: rgba(255,255,255,0.65);
    --input-focus-border: rgba(255,255,255,0.40);

    /* Buttons */
    --button-bg: rgba(0,0,0,0.20);
    --button-border: rgba(255,255,255,0.18);
    --button-text: rgba(255,255,255,0.92);
    --button-hover-bg: rgba(0,0,0,0.35);
    --button-hover-border: rgba(255,255,255,0.30);

    /* Legacy aliases (keep old CSS working) */
    --glass-bg: var(--popup-bg);
    --glass-border: var(--popup-border);
    --glass-blur: var(--popup-blur);

    /* Keep legacy "strong/dark" tokens in sync */
    --glass-border-strong: var(--popup-border, rgba(255,255,255,0.5));
    --glass-bg-dark: var(--popup-bg, rgba(0,0,0,0.22));
}

/* Base reset */
*,
*::before,
*::after{
    box-sizing: border-box;
}

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: "Poppins", sans-serif;
    color: var(--site-text, rgba(255,255,255,0.92));
}

/* ---------------------------
   Themed controls (website only)
   --------------------------- */
body.site input:not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
body.site select,
body.site textarea{
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text);
}

body.site input::placeholder,
body.site textarea::placeholder{
  color: var(--input-placeholder);
}

body.site input:not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus,
body.site select:focus,
body.site textarea:focus{
  outline: none;
  border-color: var(--input-focus-border);
}

body.site button:not(.editor-btn),
body.site .btn,
body.site .settings-btn,
body.site .auth-btn{
  background: var(--button-bg);
  border: 1px solid var(--button-border);
  color: var(--button-text);
}

body.site button:hover:not(.user-btn):not(.editor-btn),
body.site .btn:hover,
body.site .settings-btn:hover,
body.site .auth-btn:hover{
  background: var(--button-hover-bg);
  border-color: var(--button-hover-border);
}


/* Admin console should stay independent of user themes */
body.admin-console{
  --site-text: rgba(0,0,0,0.88);
  --site-text-muted: rgba(0,0,0,0.62);
  --site-accent: #2DABFF;
  --panel-bg: rgba(255,255,255,0.65);
  --panel-border: rgba(0,0,0,0.12);
  --panel-blur: 10px;
  --popup-bg: rgba(255,255,255,0.65);
  --popup-border: rgba(0,0,0,0.12);
  --popup-blur: 10px;
  --popup-text: rgba(0,0,0,0.88);
  --popup-text-muted: rgba(0,0,0,0.62);
  --glass-bg: var(--popup-bg);
  --glass-border: var(--popup-border);
  --glass-blur: var(--popup-blur);
  color: var(--site-text);
  --input-bg: rgba(255,255,255,0.92);
  --input-border: rgba(0,0,0,0.14);
  --input-text: rgba(0,0,0,0.88);
  --input-placeholder: rgba(0,0,0,0.55);
  --input-focus-border: rgba(45,171,255,0.65);
  --button-bg: rgba(255,255,255,0.92);
  --button-border: rgba(0,0,0,0.14);
  --button-text: rgba(0,0,0,0.88);
  --button-hover-bg: rgba(45,171,255,0.10);
  --button-hover-border: rgba(45,171,255,0.35);
}


html{
  font-size: clamp(14px, 1.05vmin, 20px);
}
.background{
    background-color: var(--site-bg-color, #0b1220);
    background-image: var(--site-bg-image, url("../img/bg.jpg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100%;
	overflow: hidden;
}
.contact{
    background-color: #2DABFF;
    /* Keep it inside #app/.app-sheet so it doesn't "double offset" */
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    /* slide off-canvas */
    left: 100%;
}

.content{
    /* Keep it inside #app/.app-sheet so it doesn't "double offset" */
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;

    /* Fluid padding that won't shove content down excessively */
    padding: calc(clamp(10px, 1.05vmin, 18px) * 1.1);

    display: flex;
    gap: calc(clamp(10px, 1.05vmin, 18px) * 0.9);
    overflow: auto;

    /* Don't vertically center the whole strip (this is what makes it look "lower") */
    align-items: flex-start;

    scroll-snap-type: x mandatory;
    scroll-padding-left: calc(clamp(10px, 1.05vmin, 18px) * 1.1);
}

/*.category{
    background: transparent;
}
.toptitle{
    background: transparent;
    text-align: center;
}
.cat-objects{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 1vw;
}
.object{
    background: transparent;
    text-align: center;
}
.thumbnail{
    width: 12vw;
}
.thumbnail img{
    width: 12vw;
}*/

.category {
    /*vertical-align: middle;*/
    flex: 0 0 auto; /* Prevent categories from shrinking or growing */
    margin-right: 6vh; /* Spacing between categories */
    /* Other styling as needed */
    background: transparent;
    border: 2px solid var(--panel-border, var(--glass-border-strong));
    border-radius: 2vh;
    backdrop-filter: blur(var(--panel-blur, var(--glass-blur)));
    -webkit-backdrop-filter: blur(var(--panel-blur, var(--glass-blur)));
    color: var(--site-text);
    height: fit-content;
    padding: 1vh;
    scroll-snap-align: start;
}

.toptitle {
    /*background: transparent;*/
    text-align: center;
    vertical-align: middle;
    width: 100%; /* Full width */
    height: 6vh;
    /*line-height: 3vw;*/
    overflow: hidden;
    padding: 1vh;
    font-size: 2.5rem;
}

.cat-objects {
    display: flex; /* Flex container */
    flex-direction: row; /* Arrange columns in a row */
}

.cat-column {
    display: flex; /* Make each column a flex container */
    flex-direction: column; /* Arrange items in a column */
    /*margin-right: 20px; *//* Optional spacing between columns */
}

.object {
    /*background: transparent;*/
    text-align: center;
    width: 20vh; /* Width of each object */
    margin: 1vh;
    background: transparent;
    backdrop-filter: blur(var(--panel-blur, var(--glass-blur)));
    -webkit-backdrop-filter: blur(var(--panel-blur, var(--glass-blur)));
    border-radius: 1vh;
    background-color: var(--panel-bg, var(--glass-bg, rgba(255,255,255,0.15)));
    /*box-shadow: 5px 5px 5px rgba(150, 150, 150, 0.5);*/
}
.filler {
	background: transparent;
	backdrop-filter: blur(0px);
}
.filler div{
	border: hidden;
	background: none;
}
.thumbnail {
    width: 100%;
    overflow: hidden;
    border-radius: 1vh;
    /*border: 0.25vh solid rgba(255,255,255,0.5);*/
}

.thumbnail img {
    width: 100%;
    display: block;
    border-radius: 0.25vh;
}
.title {
    display: block;
    font-size: 1.75rem;
}


/* ===== Fluid scaling adjustments ===== */
:root{
  --u: clamp(10px, 1.05vmin, 18px);

  --fs-title: clamp(1.05rem, 1.2rem + 0.6vmin, 1.8rem);
  --fs-tile:  clamp(0.9rem, 0.9rem + 0.35vmin, 1.25rem);

  --gap:  calc(var(--u) * 0.9);
  --rad:  calc(var(--u) * 1.2);
  --tile: clamp(140px, 18vmin, 240px);
}

.content{
  padding: calc(var(--u) * 1.2);
  gap: var(--gap);
}

.category{
  margin-right: calc(var(--u) * 1.8);
  border-radius: var(--rad);
  padding: calc(var(--u) * 0.9);
}

.toptitle{
  font-size: var(--fs-title);
  height: auto;
  padding: calc(var(--u) * 0.6) calc(var(--u) * 0.9);
}

.object{
  width: var(--tile);
  margin: var(--gap);
  border-radius: calc(var(--rad) * 0.75);
}

.title{
  font-size: var(--fs-tile);
  padding: calc(var(--u) * 0.45) calc(var(--u) * 0.35) calc(var(--u) * 0.7);
}

.thumbnail{
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.thumbnail img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}