/* Gretna Self Storage prototype — brand + Storable Easy layout match
   Bootstrap 5.3 + Font Awesome 4.7 loaded separately. */

@import url("../vendor/roboto/roboto.css");

:root {
  --g-primary: #4177be;
  --g-primary-hover: #3b6bab;
  --g-primary-active: #345f98;
  --g-secondary: #3e5daa;
  --g-secondary-hover: #385499;
  --g-secondary-active: #324a88;
  --g-nav: #3873f3;
  --g-body: #eeeeee;
  --g-heading: #555555;
}

html { height: 100%; }
/* Storable Easy root scaling (drives all rem sizes) */
@media only screen and (max-width: 75em) { html { font-size: 90%; } }
@media only screen and (max-width: 56.25em) { html { font-size: 80%; } }
@media only screen and (min-width: 112.5em) { html { font-size: 120%; } }
body {
  margin: 0;
  padding: 0;
  background-color: var(--g-body);
  height: 100%;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: #212529;
}
/* Storable's Bootstrap build uses heading line-height 1.5 (stock is 1.2) */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: 1.5; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6,
div, p, span, a, li, label, button, input, textarea, select {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Brand button / color overrides (from live inline theme) */
.btn-primary { background-color: var(--g-primary) !important; border-color: var(--g-primary) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--g-primary-hover) !important; border-color: var(--g-primary-hover) !important; }
.btn-primary:active { background-color: var(--g-primary-active) !important; border-color: var(--g-primary-active) !important; }
.btn-secondary { background-color: var(--g-secondary) !important; border-color: var(--g-secondary) !important; color: #fff !important; }
.btn-secondary:hover, .btn-secondary:focus { background-color: var(--g-secondary-hover) !important; border-color: var(--g-secondary-hover) !important; color: #fff !important; }
.btn-secondary:active { background-color: var(--g-secondary-active) !important; border-color: var(--g-secondary-active) !important; }
.primary-color { color: var(--g-primary) !important; }
.primary-background { background-color: var(--g-primary) !important; }
.primary-border { border-color: var(--g-primary) !important; }
.secondary-color { color: var(--g-secondary) !important; }
.secondary-background { background-color: var(--g-secondary) !important; }
.secondary-border { border-color: var(--g-secondary) !important; }

/* ---- Header / nav (Storable Easy) ---- */
.widget-header { position: relative; z-index: 5; }
.nav-container {
  align-items: stretch; display: flex; flex-flow: row nowrap;
  margin-left: auto; margin-right: auto; min-height: 6.9rem;
  padding-left: .9rem; padding-right: .9rem; position: relative; width: 100%;
}
.nav-fixed {
  background-color: #fff; position: fixed; top: 0; left: 0; width: 100%; z-index: 4;
  box-shadow: 0 1px 0 rgba(0,0,0,.1);
}
.nav-spacer {
  /* Invisible flow spacer matching fixed header height */
  visibility: hidden; pointer-events: none;
  min-height: 6.9rem;
  border-top: .4rem solid transparent;
}
.nav-fixed, .nav-spacer {
  align-items: flex-end; display: flex; flex-flow: row wrap;
  background-color: #fff; border-top: .4rem solid var(--g-primary);
  justify-content: space-between; min-height: 6.9rem;
}
:is(.nav-fixed, .nav-spacer) .logo, .nav-spacer .logo { align-self: center; padding: 0 0 0 15px; }
:is(.nav-fixed, .nav-spacer) .logo a, .nav-spacer .logo a { display: flex; max-height: 100%; max-width: 100%; }
:is(.nav-fixed, .nav-spacer) .logo img, .nav-spacer .logo img { height: 100%; padding: 5px; width: auto; }
:is(.nav-fixed, .nav-spacer) .logo.large, .nav-spacer .logo.large { max-width: 50%; }
:is(.nav-fixed, .nav-spacer) .logo.large img, .nav-spacer .logo.large img { max-height: 16.9rem; max-width: 31.3rem; }
:is(.nav-fixed, .nav-spacer) .top {
  align-items: center; display: flex; flex-flow: row nowrap;
  padding: .9rem; position: absolute; right: 0; top: 0;
}
:is(.nav-fixed, .nav-spacer) .buttons { align-items: center; display: flex; flex-flow: row nowrap; }
:is(.nav-fixed, .nav-spacer) .buttons .btn { font-size: 14px; margin: 0 .1rem; }
:is(.nav-fixed, .nav-spacer) .phone { display: flex; font-size: 1rem; padding: 0 .6rem; }
:is(.nav-fixed, .nav-spacer) .phone a { color: #0d6efd; text-decoration: none; }
:is(.nav-fixed, .nav-spacer) .phone a:hover { text-decoration: underline; }
:is(.nav-fixed, .nav-spacer) .menu {
  align-items: flex-end; display: flex; flex-flow: row nowrap; margin-left: auto;
}
:is(.nav-fixed, .nav-spacer) .nav-menu { display: flex; flex-flow: row nowrap; margin: 0; padding: 0; }
:is(.nav-fixed, .nav-spacer) .nav-menu li { list-style: none; padding: 0 2px; }
:is(.nav-fixed, .nav-spacer) .nav-menu a {
  align-items: center; display: flex; flex-flow: row nowrap;
  padding: .6rem .9rem; text-align: center; white-space: nowrap;
  border-radius: 5px 5px 0 0; text-decoration: none;
}
:is(.nav-fixed, .nav-spacer) .menu.nav-tabs { margin-right: .9rem; border-bottom: 0; }
:is(.nav-fixed, .nav-spacer) .nav-tabs .nav-link {
  background-color: var(--g-nav); color: #ffffff; border: 0;
  border-radius: 5px 5px 0 0; font-size: 16px;
}
:is(.nav-fixed, .nav-spacer) .nav-tabs .nav-link:hover,
:is(.nav-fixed, .nav-spacer) .nav-tabs .nav-item.active .nav-link,
:is(.nav-fixed, .nav-spacer) .nav-tabs .nav-link.active {
  background-color: var(--g-secondary) !important; color: #ffffff !important;
}
:is(.nav-fixed, .nav-spacer) .dropdown-menu {
  background-color: var(--g-nav) !important; margin: -1px 0 0; padding: 0;
  max-height: 60vh; overflow-y: auto; border: 0; border-radius: 0;
}
:is(.nav-fixed, .nav-spacer) .dropdown-menu .dropdown-item {
  color: #ffffff; border-radius: 0 !important; padding: .6rem .9rem;
}
:is(.nav-fixed, .nav-spacer) .dropdown-menu .dropdown-item:hover,
:is(.nav-fixed, .nav-spacer) .dropdown-menu .dropdown-item:focus {
  background-color: var(--g-secondary); color: #ffffff;
}

/* Mobile collapsed header */
.nav-collapsed {
  align-items: center; background-color: #fff;
  border-top: .4rem solid var(--g-primary);
  display: flex; height: 3.5rem; justify-content: space-between;
  box-shadow: 0 1px 0 rgba(0,0,0,.1);
}
.nav-collapsed .logo { display: flex; padding-left: .9rem; }
.nav-collapsed .logo img { max-height: 2.7rem; max-width: 95%; }
.nav-collapsed .menu-button {
  background-color: #fff; border: 1px solid #ddd; border-radius: 5px;
  color: #888; margin: 0 15px 0 0; padding: 2px 8px;
}
.nav-collapsed .menu-button:hover { background-color: #ddd; }
#dropdown-menu {
  background-color: var(--g-nav); border-top: 1px solid rgba(0,0,0,.1);
  padding: 0; position: absolute; top: 3.5rem; left: 0; width: 100%; z-index: 10;
}
#dropdown-menu .phone {
  font-size: 1.1rem; font-weight: bold; padding: .3rem .5rem; text-align: center;
}
#dropdown-menu .phone a { color: #fff; text-decoration: none; }
#dropdown-menu .btn { border-radius: 0; width: 100%; margin: 2px 0; }
#dropdown-menu ul { margin: 0; padding: 0; }
#dropdown-menu ul li { list-style: none; }
#dropdown-menu ul a {
  border-radius: 0; display: block; padding: .6rem .9rem; width: 100%;
  color: #fff; text-decoration: none; background: transparent;
}
#dropdown-menu ul a:hover { background-color: var(--g-secondary); color: #fff; }
#dropdown-menu ul.dropdown-menu {
  border: 0; border-bottom: 1px solid rgba(0,0,0,.1); border-radius: 0;
  box-shadow: none; margin: 0; padding: 0; width: 100%;
  background-color: var(--g-nav) !important; position: static !important;
  transform: none !important; float: none;
}
#dropdown-menu ul.dropdown-menu li a { padding: .6rem 2.5rem; }
#dropdown-menu ul.dropdown-nav { max-height: 60vh; overflow-y: auto; }
#dropdown-menu .nav-item.active > .nav-link { background-color: var(--g-secondary); }

@media (max-width: 767.98px) {
  body.header-padding-large { padding-top: 3.5rem; }
  .nav-spacer { display: none !important; }
}
@media (min-width: 768px) {
  .nav-collapsed, #dropdown-menu { display: none !important; }
}
@media (min-width: 1200px) { .nav-container { width: 1170px; } }
@media (max-width: 1199px) and (min-width: 990px) { .nav-container { width: 970px; } }
@media (max-width: 989px) and (min-width: 768px) { .nav-container { width: 750px; } }

/* ---- Widgets ---- */
.widget { padding: 2em 0 3em; }
.widget h2, .widget .h2 {
  color: var(--g-heading); font-weight: normal; margin-bottom: 1em; text-align: center;
}
.widget h4, .widget .h4 { margin-bottom: .2rem; }
/* Odd/even alternation: body children numbered; .widget that are odd children get white */
.widget:nth-child(odd) { background-color: #fff; }
.widget-checklist .fa-check { margin-top: .15rem; }

.widget-image-with-overlay {
  background: no-repeat center center / cover;
  /* keeps .widget padding (2em 0 3em) on wide screens, like live */
}
@media (max-width: 76.8rem) {
  .widget-image-with-overlay { padding: 0; }
}
.widget-image-with-overlay .content {
  background-color: rgba(0,0,0,.6); border-radius: 4px; color: #fff;
  margin: 2em 0; padding: 2em; text-shadow: 0 0 2px rgba(0,0,0,.9);
}
@media (max-width: 76.8rem) {
  .widget-image-with-overlay .content { margin: 1.5rem 0; padding: 1em; }
}
.widget-image-with-overlay hgroup { margin-bottom: 1.5em; }
.widget-image-with-overlay h1 { color: #fff; }
.widget-image-with-overlay h3 { color: #fff; font-weight: normal; }
.overlay-right hgroup, .overlay-right .overlay-button { text-align: right; }
@media (max-width: 56.25em) {
  .widget-image-with-overlay { padding-top: 6rem; }
}

.widget-map .map { min-height: 30rem; width: 100%; border: 0; }
.widget-map iframe.map { display: block; }

/* Unit cards */
.unit-card {
  background: #fff; border: 1px solid #dee2e6; border-radius: 0;
  padding: 1rem; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
}
.unit-card h4 { color: var(--g-primary); }
.unit-card .price { color: var(--g-primary); }
.unit-card img { max-width: 100%; height: auto; }

/* Footer */
.widget-footer {
  /* Live Storable trick: pins footer near viewport bottom on short pages */
  position: sticky; top: calc(100vh - 100px);
  color: #fff; width: 100%;
  background-color: var(--g-primary) !important;
}
.widget-footer a { color: #fff; }
.widget-footer h3 { margin-top: 0; }
.office-hours-row { display: flex; }
.office-hours-row .label-col { width: 40%; }
.office-hours-row .hours-col { width: 60%; }
@media (max-width: 37.5em) {
  .widget-footer { text-align: center; }
  .widget-footer .office-hours-row .label-col { margin-left: 30px; text-align: left; width: 50%; }
  .widget-footer .office-hours-row .hours-col { margin-right: 30px; text-align: right; width: 50%; }
}
.widget-footer .powered-by { font-size: .875em; opacity: .9; }
.widget-footer .powered-by a { text-decoration: none; }
.widget-footer .powered-by a:hover { text-decoration: underline; }

/* Facility layout map */
#site-map {
  background-color: #fff; border: 1px solid #555; margin: 0 auto .5em;
  overflow: hidden; position: relative;
}
.site-map-unit {
  background-color: #555; position: absolute; cursor: pointer;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000;
}
.site-map-unit-label {
  align-items: center; color: #fff; display: flex;
  font-family: "Roboto Mono", "Lucida Console", monospace;
  font-weight: normal; height: 100%; justify-content: center;
  overflow: visible; pointer-events: none; position: absolute;
  text-align: center;
  text-shadow: 1px 0 0 rgba(0,0,0,.6), -1px 0 0 rgba(0,0,0,.1),
               0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(0,0,0,.1),
               1px 1px 2px rgba(0,0,0,.3);
  width: 100%;
}
.widget-site-map { padding-top: 2em; }
@media (max-width: 56.25em) {
  .widget-site-map { padding-top: 2em; }
}

/* Forms success banner */
.form-success {
  display: none; background: #d1e7dd; border: 1px solid #a3cfbb;
  color: #0f5132; padding: 1rem; border-radius: .25rem; margin-bottom: 1rem;
}
.form-success.show { display: block; }

/* Login / waiting list panels */
.auth-panel { background: #f8f9fa; border-radius: .25rem; padding: 1rem; }

/* Rent modal plan box */
.plan-box .card { cursor: pointer; border: 1px solid #dee2e6; }
.plan-box .card:hover { border-color: var(--g-primary); }

/* Prototype banner (tiny, removable) */
.proto-note {
  font-size: 11px; color: #888; text-align: center; padding: 4px;
  background: #fafafa; border-bottom: 1px solid #eee;
}