/*-----------------------------------------------------------------------------------
  Sandbox Steve
-----------------------------------------------------------------------------------*/

/* Swatch Variables */
:root{
  --swatch-var-3849: rgba(255,255,255,1.00);
  --swatch-var-970:  rgba(245,245,247,1.00);
  --swatch-var-2190: rgba(0,0,0,1.00);
  --swatch-var-6153: rgba(0,0,0,0.40);
  --swatch-var-3726: rgba(255,87,81,1.00);
  --swatch-var-5341: rgba(254,130,30,1.00);
}

/* Base */
body{
  margin:0;
  padding:0;
  background: var(--swatch-var-970);
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-container{ overflow:hidden; } /* Prevent unwanted scroll space when scroll FX used. */

a, button{
  transition: background .3s ease-in-out;
  outline: none !important;
}
a:hover{ text-decoration:none; cursor:pointer; }

/* ScrollFX Lock */
.scroll-fx-lock-init{
  position:fixed !important;
  top:0; bottom:0; left:0; right:0;
  z-index:99999;
}

/* Nav dropdown link color */
nav .dropdown-menu .nav-link{ color: rgba(0,0,0,0.6) !important; }
[data-bs-theme="dark"] nav .dropdown-menu .nav-link{ color: var(--bs-dropdown-link-color) !important; }

/* Preloader */
.page-preloader{
  position: fixed;
  top:0; bottom:0;
  width:100%;
  z-index:100000;
  background:#FFFFFF url("img/pageload-spinner.gif") no-repeat center center;
  animation-name: preloader-fade;
  animation-delay: 2s;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}
.preloader-complete{ animation-delay: 0.1s; }

@keyframes preloader-fade {
  0% { opacity:1; visibility:visible; }
  100% { opacity:0; visibility:hidden; }
}

/* Web Font */
@font-face{
  font-family:'JustMeAgainDownHere';
  src: url('./fonts/JustMeAgainDownHere/JustMeAgainDownHere-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Blocs */
.bloc{
  width:100%;
  clear:both;
  background: 50% 50% no-repeat;
  padding:0 20px;
  background-size: cover;
  position:relative;
  display:flex;
}
.bloc .container{
  padding-left:0;
  padding-right:0;
  position:relative;
}

/* Sizes */
.bloc-lg{ padding:100px 20px; }
.bloc-md{ padding:50px 20px; }
.bloc-sm{ padding:20px; }

/* Light theme */
.d-bloc .card, .l-bloc{ color: rgba(0,0,0,.5); }
.d-bloc .card button:hover, .l-bloc button:hover{ color: rgba(0,0,0,.7); }

.d-bloc .card .a-btn,
.l-bloc .a-btn,
.l-bloc .navbar a,
.l-bloc a .icon-sm, .l-bloc a .icon-md, .l-bloc a .icon-lg, .l-bloc a .icon-xl,
.l-bloc h1 a, .l-bloc h2 a, .l-bloc h3 a, .l-bloc h4 a, .l-bloc h5 a, .l-bloc h6 a,
.l-bloc p a{
  color: rgba(0,0,0,.6);
}

.d-bloc .card .a-btn:hover,
.l-bloc .a-btn:hover,
.l-bloc .navbar a:hover,
.l-bloc a:hover .icon-sm, .l-bloc a:hover .icon-md, .l-bloc a:hover .icon-lg, .l-bloc a:hover .icon-xl,
.l-bloc h1 a:hover, .l-bloc h2 a:hover, .l-bloc h3 a:hover, .l-bloc h4 a:hover, .l-bloc h5 a:hover, .l-bloc h6 a:hover,
.l-bloc p a:hover{
  color: rgba(0,0,0,1);
}

.d-bloc .card .btn-wire,
.d-bloc .card .btn-wire:hover,
.l-bloc .btn-wire,
.l-bloc .btn-wire:hover{
  color: rgba(0,0,0,.7);
  border-color: rgba(0,0,0,.3);
}

/* Sticky nav */
.sticky-bloc.sticky, .sticky-nav.sticky{
  position:fixed;
  z-index:1000;
  transition: all .2s ease-out;
}
.sticky-nav.sticky{
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  background-color: rgba(255,255,255,0.30);
}

/* Navbar icon */
.svg-menu-icon{
  fill:none;
  stroke: rgba(0,0,0,0.5);
  stroke-width:2px;
  fill-rule:evenodd;
}
.navbar-dark .svg-menu-icon{ stroke: rgba(255,255,255,0.5); }
.navbar-toggler-icon{
  background:none !important;
  pointer-events:none;
  width:33px;
  height:33px;
}

/* Buttons */
.btn-d, .btn-d:hover, .btn-d:focus{
  color:#FFF;
  background: rgba(0,0,0,.3);
}
.btn-rd{ border-radius:40px; }

/* Make full card clickable */
.bento-link{
  display:block;
  text-decoration:none;
  color:inherit;
  -webkit-tap-highlight-color: transparent;
}

/* Card interaction */
.bento-link .bento-box{
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Only do hover lift on real hover devices (prevents iOS sticky hover) */
@media (hover:hover) and (pointer:fine){
  .bento-link .bento-box:hover{
	transform: translateY(-4px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  }
}

/* Tap feedback (touch) */
.bento-link .bento-box:active{
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}

/* ScrollToTop */
.scrollToTop{
  width:36px;
  height:36px;
  padding:5px;
  position:fixed;
  bottom:20px;
  right:20px;
  opacity:0;
  z-index:999;
  transition: all .3s ease-in-out;
  pointer-events:none;

  background: linear-gradient(335deg, var(--swatch-var-3726) 0%, var(--swatch-var-5341) 100%);
  border-radius:8px;
  border:0;
}
.scrollToTop:hover{
  background: linear-gradient(0deg, var(--swatch-var-3726) 0%, var(--swatch-var-5341) 100%);
}
.showScrollTop{
  opacity:1;
  pointer-events:all;
}
.scroll-to-top-btn-icon{
  fill:none;
  stroke:#fff;
  stroke-width:2px;
  fill-rule:evenodd;
  stroke-linecap:round;
}

/* Typography */
h1,h2,h3,h4,h5,h6,p,label,.btn,a{ font-family:"Helvetica"; }
h1,h2,h3,h4,h5,h6{ font-family:"JustMeAgainDownHere"; }
p{ font-family:"Klee One"; }

.container{ max-width:1140px; }

.brand{ font-weight:600; }
.link-style{
  font-family:"JustMeAgainDownHere";
  font-size:30px;
}
.navbar-brand img{ width:50px; }

/* Bento card layout */
.bento-box{
  background-color: var(--swatch-var-3849);
  width:100%;
  position:relative;
  padding:40px;
  border-radius:30px;
  overflow:hidden;
}

/* Background images are controlled by HTML via:
   --card-bg-fallback: url(...)
   --card-bg: image-set(...)
   CSS only CONSUMES those variables. */
.bg-img-box{
  height:500px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  /* fallback first */
  background-image: var(--card-bg-fallback, none);

  /* modern override */
  background-image: var(--card-bg, var(--card-bg-fallback, none));
}

/* Heading */
.box-heading{
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight:600;
  margin:0;
}

/* General gradient heading (keep available if you want elsewhere) */
.gradient-heading{
  background: linear-gradient(269deg, rgba(255,255,255,0.32) 0%, #FFFFFF 100%);
  background-clip:text !important;
  -webkit-background-clip:text !important;
  color:transparent !important;
  display:inline-block;
  position:relative;
  z-index:1;
}

/* =========================================================
   FIXED Bento Title Pill
   - We DO NOT use transparent gradient text on the cards.
   - We force solid white text so it’s readable everywhere.
   ========================================================= */

.bento-box .box-heading.gradient-heading{
  position: relative;
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  line-height: 1.05;
  z-index: 2;

  /* override the gradient/transparent text */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;

  /* crisp */
  text-shadow: 0 2px 6px rgba(0,0,0,0.55);
}

.bento-box .box-heading.gradient-heading::before{
  content:"";
  position:absolute;
  inset:-6px -10px;
  border-radius:999px;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.22);
  z-index:-1;
}

/* Color helpers */
.bgc-3849{ background-color: var(--swatch-var-3849); }
.tc-3849{ color: var(--swatch-var-3849) !important; }
.tc-2190{ color: var(--swatch-var-2190) !important; }
.ltc-2190{ color: var(--swatch-var-2190) !important; }
.ltc-2190:hover{ color:#000000 !important; }

/* Responsive tweaks */
@media (max-width: 991px){
  .container{ width:100%; }
  .bg-img-box{ height:350px; }
  .bento-box{ padding:30px; }
}

@media (max-width: 767px){
  .bg-img-box{ height:250px; }
  .bento-box{ padding:26px; }
}

@media (max-width: 575px){
  .bg-img-box{ height:300px; }
  .bento-box{ padding:20px; }
}