/*
 * FlaroCity WatchTower Pass 17
 * Restores the proven large-button scale from flarocity.net while preserving
 * the clean Laravel/server-authoritative staging architecture.
 */
:root{
  --wt17-nav-width:clamp(184px,9.5vw,210px);
  --wt17-nav-height:58px;
  --wt17-hero-width:220px;
  --wt17-hero-height:56px;
}

/* Shared public and authenticated header. */
header.site-top .shell.nav{
  width:min(1920px,99vw)!important;
  max-width:none!important;
  min-height:88px!important;
  padding:5px 18px!important;
  display:grid!important;
  grid-template-columns:minmax(330px,430px) minmax(0,1fr)!important;
  align-items:center!important;
  gap:clamp(12px,1.2vw,24px)!important;
}
header.site-top .brand.brand-banner{
  justify-self:start!important;
}
header.site-top .brand.brand-banner img{
  width:clamp(330px,21vw,430px)!important;
  min-width:330px!important;
  max-width:430px!important;
  height:auto!important;
  max-height:96px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 16px rgba(208,44,255,.48))!important;
}
header.site-top .nav-image-links{
  min-width:0!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:clamp(8px,.82vw,16px)!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
}
header.site-top .nav-image-links .image-btn.has-image{
  width:var(--wt17-nav-width)!important;
  min-width:var(--wt17-nav-width)!important;
  max-width:210px!important;
  height:var(--wt17-nav-height)!important;
  min-height:var(--wt17-nav-height)!important;
  max-height:var(--wt17-nav-height)!important;
  flex:0 0 var(--wt17-nav-width)!important;
}
header.site-top .nav-image-links .image-btn.has-image img{
  width:100%!important;
  height:100%!important;
  max-height:var(--wt17-nav-height)!important;
  object-fit:contain!important;
}

/* Public-page hero calls to action. */
.page-home .hero .actions .image-btn.has-image,
.page-features .hero .actions .image-btn.has-image,
.page-pricing .hero .actions .image-btn.has-image,
.page-docs .hero .actions .image-btn.has-image,
.page-terms .hero .actions .image-btn.has-image,
body:not([class]) .wt-action-form .image-btn.has-image{
  width:var(--wt17-hero-width)!important;
  min-width:var(--wt17-hero-width)!important;
  max-width:var(--wt17-hero-width)!important;
  height:var(--wt17-hero-height)!important;
  min-height:var(--wt17-hero-height)!important;
  max-height:var(--wt17-hero-height)!important;
  flex:0 0 var(--wt17-hero-width)!important;
}
.page-features .feature-hero-big-buttons .feature-big-cta.image-btn.has-image{
  width:230px!important;
  min-width:230px!important;
  max-width:230px!important;
  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;
  flex:0 0 230px!important;
}
.page-pricing .plan > .image-btn.has-image{
  width:230px!important;
  min-width:230px!important;
  max-width:230px!important;
  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.page-pricing .actions .image-btn.has-image,
.page-docs .actions .image-btn.has-image{
  width:205px!important;
  min-width:205px!important;
  max-width:205px!important;
  height:52px!important;
  min-height:52px!important;
  max-height:52px!important;
}
footer.footer .image-btn.has-image{
  width:190px!important;
  min-width:190px!important;
  max-width:190px!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
}

/* Authenticated dashboard: match the same header and hero scale. */
.watchtower-dashboard header.site-top .nav-image-links .image-btn.has-image{
  width:var(--wt17-nav-width)!important;
  min-width:var(--wt17-nav-width)!important;
  max-width:210px!important;
  height:var(--wt17-nav-height)!important;
  min-height:var(--wt17-nav-height)!important;
  max-height:var(--wt17-nav-height)!important;
  flex:0 0 var(--wt17-nav-width)!important;
}
.watchtower-dashboard main.dashboard .overview-hero-actions .image-btn.has-image,
.watchtower-dashboard main.dashboard.shell > section.hero > .actions .image-btn.has-image{
  width:var(--wt17-hero-width)!important;
  min-width:var(--wt17-hero-width)!important;
  max-width:var(--wt17-hero-width)!important;
  height:var(--wt17-hero-height)!important;
  min-height:var(--wt17-hero-height)!important;
  max-height:var(--wt17-hero-height)!important;
  flex:0 0 var(--wt17-hero-width)!important;
}

@media(max-width:1500px){
  :root{
    --wt17-nav-width:160px;
    --wt17-nav-height:50px;
  }
  header.site-top .shell.nav{
    grid-template-columns:minmax(260px,310px) minmax(0,1fr)!important;
    gap:10px!important;
  }
  header.site-top .brand.brand-banner img{
    width:clamp(260px,19vw,310px)!important;
    min-width:260px!important;
    max-width:310px!important;
  }
  header.site-top .nav-image-links{gap:8px!important;}
}

@media(max-width:1120px){
  header.site-top .shell.nav{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    gap:8px!important;
    padding:8px 16px!important;
  }
  header.site-top .brand.brand-banner{justify-self:center!important;}
  header.site-top .brand.brand-banner img{
    width:min(360px,72vw)!important;
    min-width:0!important;
  }
  header.site-top .nav-image-links{
    width:100%!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:9px 14px!important;
  }
  header.site-top .nav-image-links .image-btn.has-image{
    width:170px!important;
    min-width:170px!important;
    max-width:190px!important;
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    flex:1 1 170px!important;
  }
}

@media(max-width:700px){
  header.site-top .nav-image-links .image-btn.has-image{
    width:calc(50% - 7px)!important;
    min-width:138px!important;
    max-width:none!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    flex:1 1 calc(50% - 7px)!important;
  }
  .page-home .hero .actions .image-btn.has-image,
  .page-features .hero .actions .image-btn.has-image,
  .page-pricing .hero .actions .image-btn.has-image,
  .page-docs .hero .actions .image-btn.has-image,
  .page-terms .hero .actions .image-btn.has-image,
  .page-features .feature-hero-big-buttons .feature-big-cta.image-btn.has-image,
  .watchtower-dashboard main.dashboard .overview-hero-actions .image-btn.has-image,
  .watchtower-dashboard main.dashboard.shell > section.hero > .actions .image-btn.has-image{
    width:100%!important;
    min-width:0!important;
    max-width:280px!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    flex:1 1 100%!important;
  }
}