/* styles.css */

/* === variables === */
:root{
  --brand-primary:#2A58A3;
  --brand-primary-rgb:42,88,163;
  --brand-accent:#FF8B07;

  --nav-bg:var(--brand-primary);

  --header-h:56px;
  --footer-h:52px;

  /* bootstrap bridge */
  --bs-primary:var(--brand-primary);
  --bs-primary-rgb:var(--brand-primary-rgb);
}
@media (min-width:576px){ :root{ --header-h:60px; --footer-h:56px } }
@media (min-width:992px){ :root{ --header-h:64px; --footer-h:60px } }

/* === resets === */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden;margin:0;background:#f8f9fa}
img,video{max-width:100%;height:auto}
.row{--bs-gutter-x:.75rem}
.container,.container-fluid,footer{max-width:100%}

/* === layout frame === */
.wrapper{display:flex;flex-direction:column;min-height:100svh}
@supports(height:100dvh){ .wrapper{min-height:100dvh} }

.content{
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px));
  padding-bottom:var(--footer-h);
}

/* === header: fixed === */
.navbar{
  position:fixed; top:0; left:0; right:0;
  background:var(--nav-bg)!important; color:#fff;
  z-index:1030; transform:translateZ(0); will-change:transform;
  padding-top: env(safe-area-inset-top);
}
.navbar .nav-link{color:#fff}
.navbar .nav-link:hover{color:#e6e6e6}
.navbar-brand{max-width:70vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* === footer: fixed + safe-area === */
footer.app-footer{
  position:fixed;left:0;right:0;bottom:0;
  height:var(--footer-h);
  background:var(--nav-bg)!important;color:#fff;
  display:flex;align-items:center;justify-content:center;
  padding-bottom:env(safe-area-inset-bottom);
  z-index:1029;
  transform:translateZ(0);will-change:transform;
}

/* lift offline banner above footer if present */
#offline-banner{
  bottom:var(--footer-h)!important;
  padding-bottom:env(safe-area-inset-bottom);
}

/* Offcanvas всегда в пределах экрана и ниже fixed-top */
.offcanvas{
  /* ширина не больше экрана */
  --bs-offcanvas-width: min(86vw, 360px);
  /* отступ сверху под высоту navbar */
  top: var(--header-h);
  height: calc(100dvh - var(--header-h));
  max-width: 100vw;
  overscroll-behavior: contain;
}

/* безопасные зоны iOS */
.offcanvas-header{ padding-top: max(.5rem, env(safe-area-inset-top)); }
.offcanvas{ padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }

/* на совсем узких экранах — почти фулл-скрин */
@media (max-width: 360px){
  .offcanvas{ --bs-offcanvas-width: 96vw; }
}

.offcanvas-header {
  background-color: #f8f9fa;
  color: #2A58A3;
}

.offcanvas-title {
  font-weight: 600;
  color: inherit;
}

.offcanvas-header .btn-close {
  filter: invert(27%) sepia(84%) saturate(747%) hue-rotate(194deg) brightness(90%) contrast(92%);
  opacity: 1;
}


/* === buttons === */
.btn-primary{color:#fff;background-color:var(--bs-primary);border-color:var(--bs-primary)}
.btn-primary:hover{background-color:#254f97;border-color:#254f97}
.btn-primary:focus{ box-shadow:none; outline:0 }
/*.btn-primary:focus-visible{ box-shadow:0 0 0 .25rem rgba(255,139,7,.35) }*/
.btn-outline-primary{color:var(--bs-primary);border-color:var(--bs-primary)}
.btn-outline-primary:hover{color:#fff;background-color:var(--bs-primary);border-color:var(--bs-primary)}

/* === generic links === */
a{color:var(--brand-primary);text-decoration:none}
a:not(.btn):hover{ text-decoration:underline }

/* === hero / main blocks (home) === */
.main{text-align:center;padding:20px}
.main img{width:120px;height:auto;border-radius:10px;margin-bottom:20px}
.main h1{font-size:22px;font-weight:700;color:#333;margin-bottom:20px}
@media (max-width:768px){
  .main h1{font-size:20px}
  .main img{width:100px}
}

/* CTA button block used on home */
.button a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 24px;font-size:16px;font-weight:700;
  color:#fff;background:var(--bs-primary);
  border:2px solid var(--bs-primary);border-radius:8px;
  transition:all .2s
}
.button a:hover{background:#254f97;border-color:#254f97}
.button a:focus{outline:0;box-shadow:0 0 0 .25rem rgba(255,139,7,.25)}
.button a svg{margin-right:10px;fill:#fff;transition:fill .2s}

/* === cards, lists minor tweaks === */
.list-group-item.bg-light{background:#f8f9fa!important}
.card{border-radius:.75rem;overflow:hidden}


.btn-danger {
  background-color:#FF8B07;
  border-color:#FF8B07;
  color:#fff;
}
.btn-danger:hover {
  background-color:#e67a00;
  border-color:#e67a00;
}
.btn-outline-danger {
  color:#FF8B07;
  border-color:#FF8B07;
}
.btn-outline-danger:hover {
  background-color:#FF8B07;
  color:#fff;
}