/* Usavir Premium Website V24 — responsive/taskbar/enrolment corrections */
:root{
  --v24-safe-top:env(safe-area-inset-top,0px);
  --v24-taskbar-core-h:72px;
  --v24-taskbar-h:calc(var(--v24-taskbar-core-h) + var(--v24-safe-top));
  --v23-taskbar-h:var(--v24-taskbar-h);
}

/* One permanent navigation frame. The page starts below the bar everywhere. */
.usavir-taskbar{
  top:0!important;
  height:var(--v24-taskbar-h)!important;
  padding-top:var(--v24-safe-top)!important;
  box-sizing:border-box!important;
}
.usavir-taskbar__brand,
.usavir-taskbar__nav{height:var(--v24-taskbar-core-h)!important;align-self:end}

/* Academy and subject pages previously had later rules that collapsed the top padding. */
.v21-shell{
  padding-top:calc(var(--v24-taskbar-h) + clamp(32px,4vh,48px))!important;
  scroll-padding-top:calc(var(--v24-taskbar-h) + 18px)!important;
}
.v21-shell.subject-hero{
  padding-top:calc(var(--v24-taskbar-h) + 28px)!important;
}
.v21-hero{padding-top:0!important}
html{scroll-padding-top:calc(var(--v24-taskbar-h) + 18px)}
[id]{scroll-margin-top:calc(var(--v24-taskbar-h) + 18px)}

/* About and Tools are fixed-composition pages; reserve taskbar space without changing their design. */
body[data-page="about"] .home-shell{
  padding-top:calc(var(--v24-taskbar-h) + clamp(14px,2.2vh,26px))!important;
}
body[data-page="tools"] .tools-shell{
  padding-top:calc(var(--v24-taskbar-h) + clamp(20px,3vh,38px))!important;
}

/* Feature dialogs live below the permanent taskbar and use one reliable mobile geometry. */
.feature-dialog{
  top:var(--v24-taskbar-h)!important;
  height:calc(100dvh - var(--v24-taskbar-h))!important;
  max-height:calc(100dvh - var(--v24-taskbar-h))!important;
}
.feature-dialog__frame{height:100%!important;max-height:100%!important}
.feature-dialog__body{min-height:0}

/* Social identity is an actual circular profile avatar, not a squared project mark. */
.social-identity__avatar{
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  overflow:hidden!important;
  object-fit:cover!important;
  object-position:center!important;
  flex-shrink:0!important;
}

/* Project system: left content + media docked flush to top/right/bottom on every screen. */
.project-item,
.project-card__inner{height:auto}
.project-card__inner{
  grid-template-columns:minmax(0,61%) minmax(0,39%)!important;
  min-height:208px!important;
  align-items:stretch!important;
}
.project-card__media{
  align-self:stretch!important;
  width:100%!important;
  height:100%!important;
  min-height:208px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#050505!important;
  overflow:hidden!important;
}
.project-card__media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  border-radius:0!important;
}
.project-card--construction .project-card__media{
  display:grid!important;
  place-items:center!important;
}
.project-card--construction .project-card__media img{
  width:82%!important;
  height:82%!important;
  max-width:310px!important;
  max-height:172px!important;
  object-fit:contain!important;
  object-position:center!important;
}
.project-card--roblox .project-card__media img{
  object-fit:cover!important;
  object-position:center center!important;
}

/* V29 intl-tel-input: visible country-code dropdown, no search UI, sharp Usavir styling. */
.phone-field .iti{width:100%!important;display:block!important}
.phone-field .iti input{width:100%!important;min-height:48px!important}
.phone-field .iti__selected-country{
  min-width:92px!important;
  border-right:1px solid #b9b9b5!important;
  background:#f7f7f4!important;
}
.phone-field .iti__selected-country-primary{
  min-height:46px!important;
  border-radius:0!important;
  background:#f7f7f4!important;
}
.phone-field .iti__country-selector{
  z-index:1000000!important;
  border:1px solid #111!important;
  border-radius:0!important;
  background:#fff!important;
  color:#111!important;
  box-shadow:0 18px 44px rgba(0,0,0,.18)!important;
}
.phone-field .iti__country-list{
  max-height:min(310px,44dvh)!important;
  background:#fff!important;
  color:#111!important;
  scrollbar-color:#777 #eee;
}
.phone-field .iti__country{padding:9px 12px!important}
.phone-field .iti__country:hover,
.phone-field .iti__country.iti__highlight{background:#ededeb!important}
.phone-field .iti__search-input,
.phone-field .iti__search-input-container{display:none!important}
.phone-field small{display:block;margin-top:6px}

/* I Love PDF: only one top offset under the global taskbar. */
.pdf-header{top:var(--v24-taskbar-h)!important;margin-top:0!important}
.editor-app{height:calc(100dvh - var(--v24-taskbar-h))!important;margin-top:var(--v24-taskbar-h)!important}

@media(max-width:760px){
  :root{--v24-taskbar-core-h:82px}
  .usavir-taskbar__brand{width:72px!important;flex-basis:72px!important}
  .usavir-taskbar__brand img{width:50px!important;height:50px!important}
  .usavir-taskbar__nav{width:calc(100% - 72px)!important}

  .v21-shell{
    padding-top:calc(var(--v24-taskbar-h) + 18px)!important;
    padding-left:max(15px,env(safe-area-inset-left))!important;
    padding-right:max(15px,env(safe-area-inset-right))!important;
  }
  .v21-shell.subject-hero{padding-top:calc(var(--v24-taskbar-h) + 16px)!important}
  body[data-page="about"] .home-shell{
    padding-top:calc(var(--v24-taskbar-h) + 10px)!important;
  }
  body[data-page="tools"] .tools-shell{
    padding-top:calc(var(--v24-taskbar-h) + 12px)!important;
  }

  /* Same project composition from 360px through large phones. */
  .project-list{gap:10px!important}
  .project-item{min-height:0!important}
  .project-card__inner{
    grid-template-columns:minmax(0,61%) minmax(0,39%)!important;
    min-height:clamp(168px,45vw,194px)!important;
    height:clamp(168px,45vw,194px)!important;
  }
  .project-card__copy{
    min-width:0!important;
    padding:clamp(18px,5vw,23px) clamp(11px,3.8vw,17px)!important;
  }
  .project-card__type{left:10px!important;top:10px!important;font-size:clamp(.46rem,1.7vw,.54rem)!important}
  .project-card__copy h3{
    margin-top:26px!important;
    margin-bottom:5px!important;
    font-size:clamp(1rem,4.7vw,1.3rem)!important;
    line-height:1.02!important;
    overflow-wrap:anywhere;
  }
  .project-card__copy p{
    max-width:23ch;
    font-size:clamp(.64rem,2.9vw,.78rem)!important;
    line-height:1.38!important;
  }
  .project-card__cta{margin-top:auto!important;padding-top:9px;font-size:clamp(.5rem,2.2vw,.61rem)!important}
  .project-card__media{min-height:0!important;height:100%!important}
  .project-card--construction .project-card__media img{
    width:88%!important;height:88%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;
  }
  .project-card--roblox .project-card__media img{
    object-fit:cover!important;
    object-position:center center!important;
  }

  /* Social popup is sized from the taskbar down and uses the same composition on all phones. */
  .feature-dialog{padding:0!important}
  .feature-dialog__frame{display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;overflow:hidden!important}
  .feature-dialog__header{
    min-height:78px!important;
    padding:14px max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left))!important;
  }
  .feature-dialog__header h2{max-width:70vw!important;font-size:clamp(1.45rem,6.2vw,2.2rem)!important}
  .feature-dialog__body{overflow-y:auto!important;overscroll-behavior:contain;padding:14px max(12px,env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important}
  .feature-dialog__body--socials{grid-template-columns:1fr!important;gap:8px!important}
  .social-profile-tab{
    width:100%!important;
    min-height:68px!important;
    padding:10px!important;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) 28px!important;
    gap:7px!important;
  }
  .social-platform__logo-frame,
  .social-identity__avatar{width:34px!important;height:34px!important;flex-basis:34px!important}
  .social-identity__avatar{border-radius:50%!important}
  .social-platform__name{font-size:clamp(.69rem,3vw,.82rem)!important}
  .social-identity__username{font-size:clamp(.52rem,2.35vw,.66rem)!important}
  .social-profile-tab__arrow{width:27px!important;height:27px!important}

  /* Country list remains a dropdown on phones rather than becoming a fullscreen/search selector. */
  .phone-field .iti__country-selector{max-width:min(330px,calc(100vw - 28px))!important}
  .phone-field .iti__country-list{max-height:min(280px,38dvh)!important}
}

@media(max-width:390px){
  .project-card__inner{
    grid-template-columns:minmax(0,62%) minmax(0,38%)!important;
    min-height:168px!important;
    height:168px!important;
  }
  .project-card__copy{padding:17px 10px!important}
  .project-card__copy h3{font-size:1rem!important}
  .project-card__copy p{font-size:.64rem!important}
  .social-profile-tab{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) 26px!important}
  .social-platform__logo-frame,.social-identity__avatar{width:32px!important;height:32px!important;flex-basis:32px!important}
}

@media(orientation:landscape) and (max-height:560px) and (max-width:960px){
  :root{--v24-taskbar-core-h:64px}
  .v21-shell,.v21-shell.subject-hero{padding-top:calc(var(--v24-taskbar-h) + 12px)!important}
  body[data-page="about"] .home-shell,body[data-page="tools"] .tools-shell{padding-top:calc(var(--v24-taskbar-h) + 8px)!important}
}