/* STILL · Copyright 2026 DeltyWeb Ltd. All rights reserved.
   Catalogue navigation trigger. */

.demo-nav-entry{
  display:flex;
  align-items:center;
  align-self:center;
  flex-shrink:0;
}

.still-theme .demo-nav-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:42px;
  margin:0;
  padding:0 12px;
  border:1px solid rgba(212,194,149,.33);
  border-radius:6px;
  background:linear-gradient(115deg,rgba(211,192,145,.11),rgba(247,240,216,.025));
  color:#ece5d6;
  font-family:DM,Arial,sans-serif;
  font-size:11px;
  font-weight:500;
  line-height:1;
  letter-spacing:.05px;
  white-space:nowrap;
  box-shadow:inset 0 1px rgba(255,250,226,.04);
  transition:background .22s,border-color .22s,box-shadow .22s;
}

.still-theme .demo-nav-button:hover,
.still-theme .demo-nav-button[aria-expanded="true"]{
  background:linear-gradient(115deg,rgba(211,192,145,.20),rgba(247,240,216,.06));
  border-color:rgba(220,203,156,.62);
  box-shadow:0 0 26px rgba(210,189,126,.07),inset 0 1px rgba(255,250,226,.08);
}

.demo-cube-icon{
  width:17px;
  height:17px;
  stroke-width:1.1;
  flex:0 0 auto;
  color:#ccbc96;
}

.demo-nav-copy{
  line-height:1.15;
}

.demo-nav-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 5px 3px;
  border:1px solid rgba(212,194,149,.25);
  border-radius:3px;
  background:rgba(213,192,144,.10);
  color:#ddcca2;
  font-family:DM,Arial,sans-serif;
  font-size:7px;
  font-weight:500;
  letter-spacing:1px;
  line-height:1;
  vertical-align:middle;
}

.demo-nav-chevron{
  width:11px;
  height:11px;
  color:#c9b98e;
  transition:transform .22s;
  stroke-width:1.2;
}

.demo-nav-button[aria-expanded="true"] .demo-nav-chevron{
  transform:rotate(180deg);
}

.still-theme .demo-mobile-trigger{
  display:none;
}

.still-theme .desktop-nav{
  gap:27px;
}

.still-theme .site-header.demo-nav-is-open{
  background:rgba(17,17,17,.94);
  border-bottom-color:rgba(212,194,149,.17);
}

.still-theme .mobile-menu .mobile-demo-entry{
  display:grid;
  width:100%;
  grid-template-columns:32px 1fr auto;
  grid-template-areas:'idx title arrow' 'idx meta arrow';
  align-items:center;
  text-align:left;
  padding:22px 0;
  border-bottom:1px solid rgba(237,225,201,.14);
  color:#f5efe4;
}

.still-theme .mobile-menu .mobile-demo-entry strong{
  font-size:25px;
  line-height:1.25;
}

.still-theme .mobile-menu .mobile-demo-entry .demo-nav-tag{
  margin-left:4px;
  font-size:7px;
  vertical-align:middle;
}

.demo-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.demo-arrow{
  width:15px;
  height:15px;
  stroke-width:1.2;
  transition:transform .2s;
}

.demo-showreels{
  min-width:0;
  display:flex;
  flex-direction:column;
}

@media(max-width:1280px){
.still-theme .brand-caption{
  display:none;
}

.still-theme .desktop-nav{
  gap:23px;
}

.still-theme .demo-nav-button{
  gap:7px;
  font-size:10px;
  padding:0 10px;
}
}

@media(max-width:1080px){
.still-theme .site-header,
.still-theme .site-header.is-scrolled{
  height:84px;
  display:flex;
}

.still-theme .desktop-nav{
  display:none;
}

.still-theme .brand-name,
.still-theme .site-header.is-scrolled .brand-name{
  font-size:40px;
}

.still-theme .brand-caption{
  display:none;
}

.still-theme .header-actions{
  margin-left:auto;
  gap:10px;
}

.still-theme .header-actions>.icon-button{
  display:none;
}

.still-theme .menu-button{
  display:inline-flex;
}

.still-theme .demo-mobile-trigger{
  display:inline-flex;
}

.still-theme .demo-nav-button{
  font-size:10px;
  gap:8px;
  padding:0 11px;
}

.still-theme .menu-copy{
  font-size:9px;
}

.still-theme .menu-glyph{
  font-size:14px;
}

.still-theme .mobile-menu{
  display:block;
}

.still-theme .mobile-menu[hidden]{
  display:none!important;
}
}

@media(max-width:480px){
.still-theme .demo-mobile-trigger .demo-nav-word{
  display:none;
}

.still-theme .demo-mobile-trigger{
  gap:6px;
  padding:0 9px;
  min-height:39px;
  font-size:9px;
}

.still-theme .demo-mobile-trigger>.demo-cube-icon{
  width:14px;
  height:14px;
}

.still-theme .demo-mobile-trigger>.demo-nav-chevron{
  display:none;
}

.still-theme .header-actions{
  gap:8px;
}

.still-theme .menu-button{
  min-width:64px;
  height:39px;
  padding:0 10px;
  gap:7px;
}

.still-theme .site-header{
  padding-left:5%;
  padding-right:5%;
}

.still-theme .brand-name,
.still-theme .site-header.is-scrolled .brand-name{
  font-size:35px;
}
}

@media(max-width:359px){
.still-theme .demo-mobile-trigger .demo-cube-icon{
  display:none;
}

.still-theme .demo-mobile-trigger{
  padding:0 7px;
  gap:5px;
  font-size:8px;
}

.still-theme .demo-nav-tag{
  font-size:6px;
  padding:4px;
}

.still-theme .header-actions{
  gap:6px;
}

.still-theme .menu-button{
  min-width:56px;
  padding:0 8px;
  gap:6px;
}

.still-theme .brand-name,
.still-theme .site-header.is-scrolled .brand-name{
  font-size:32px;
}
}

@media(prefers-reduced-motion:reduce){
.demo-nav-button,
.demo-arrow{
  transition:none!important;
}
}