/* Batavia Self Storage: Cassiopeia child styled after the former td_maxor template (style3 / blue). */

@font-face {
  font-family: "ProximaNovaThin";
  src: url("../fonts/proximanova-thin-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bss-blue: #2b86c5;
  --bss-grey: #585858;
  --bss-yellow: #ffff00;
  --bss-bg: #f1f1f1;
  --cassiopeia-color-primary: #2b86c5;
  --cassiopeia-color-link: #2b86c5;
  --cassiopeia-color-hover: #585858;
  --cassiopeia-font-family-body: Arial, Helvetica, sans-serif;
  --cassiopeia-font-family-headings: ProximaNovaThin, Arial, Helvetica, sans-serif;
  --cassiopeia-font-weight-headings: 300;
  --body-font-size: 13px;
}

body.site {
  background: var(--bss-bg);
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

a { color: var(--bss-blue); text-decoration: none; }
a:hover, a:focus, a:active { color: var(--bss-grey); text-decoration: none; }

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-family: ProximaNovaThin, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
}
h1, .h1 { font-size: 38.5px; line-height: 40px; margin: 10px 0; }
h2, .h2 { font-size: 31.5px; line-height: 1.2; }
h3, .h3 { font-size: 24.5px; line-height: 1.2; }

/* ---- Header: white bar, logo centred, blue tab menu underneath ---- */
.container-header {
  background: #fff;
  background-image: none;
  box-shadow: none;
  color: #000;
}
.container-header .grid-child {
  max-width: 960px;
  padding: 0;
}
.container-header .navbar-brand {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
}
.container-header .navbar-brand .brand-logo img {
  max-height: 60px;
  width: auto;
}
.container-header .container-nav {
  justify-content: center;
  padding: 0 0 2px;
}
.container-header .container-nav nav { width: 100%; }

/* Main menu (core mod_menu, collapse-metismenu layout) */
.container-header .metismenu.mod-menu {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0 auto;
}
.container-header .metismenu.mod-menu > li.metismenu-item {
  margin: 0 4px;
  padding: 0;
  display: flex;
  align-items: stretch;
  background: var(--bss-blue);
}
.container-header .metismenu.mod-menu > li.metismenu-item > a,
.container-header .metismenu.mod-menu > li.metismenu-item > button.mm-toggler {
  color: #fff;
  background: var(--bss-blue);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  padding: 7px 10px;
  border: 0;
  border-radius: 0;
  opacity: 1;
}
.container-header .metismenu.mod-menu > li.metismenu-item > a + button.mm-toggler {
  padding: 7px 8px 7px 0;
  margin-left: -6px;
}
.container-header .metismenu.mod-menu > li.metismenu-item:hover,
.container-header .metismenu.mod-menu > li.metismenu-item.active,
.container-header .metismenu.mod-menu > li.metismenu-item:hover > a,
.container-header .metismenu.mod-menu > li.metismenu-item:hover > button.mm-toggler,
.container-header .metismenu.mod-menu > li.metismenu-item.active > a,
.container-header .metismenu.mod-menu > li.metismenu-item.active > button.mm-toggler {
  color: var(--bss-yellow);
  background: var(--bss-grey);
}
.container-header .metismenu.mod-menu > li.metismenu-item > a:hover,
.container-header .metismenu.mod-menu > li.metismenu-item > a:focus { text-decoration: none; }
.container-header .metismenu.mod-menu > li.metismenu-item > a::after { display: none; }

/* Dropdowns: blue panel, white links, dotted separators; open on hover as before */
.container-header .metismenu.mod-menu .mm-collapse {
  background: var(--bss-blue);
  border: 0;
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  min-width: 0;
  width: max-content;      /* as wide as the longest item, no wider */
  padding: 0;
  top: 100%;
  left: 0;
}
@media (min-width: 992px) {
  .container-header .metismenu.mod-menu > li.metismenu-item > button.mm-toggler { display: none; }
  .container-header .metismenu.mod-menu > li.metismenu-item.parent { position: relative; }
  .container-header .metismenu.mod-menu > li.metismenu-item.parent > .mm-collapse { position: absolute; z-index: 1000; }
  .container-header .metismenu.mod-menu > li.metismenu-item.parent:hover > .mm-collapse,
  .container-header .metismenu.mod-menu > li.metismenu-item.parent:focus-within > .mm-collapse {
    display: block;
    height: auto !important;
  }
}
.container-header .metismenu.mod-menu .mm-collapse > li {
  display: block;
  border-bottom: 1px dotted #555;
  margin: 0;
  padding: 0;
}
.container-header .metismenu.mod-menu .mm-collapse > li:last-child { border-bottom: 0; }
.container-header .metismenu.mod-menu .mm-collapse > li > a {
  display: block;
  width: 100%;             /* hover grey fills the whole row, not just the word */
  white-space: nowrap;
  color: #fff;
  font-size: 12px;
  text-transform: none;
  padding: 10px;
  background: transparent;
}
.container-header .metismenu.mod-menu .mm-collapse > li > a:hover,
.container-header .metismenu.mod-menu .mm-collapse > li.active > a {
  color: var(--bss-yellow);
  background: var(--bss-grey);
  text-decoration: none;
}

/* Mobile toggler */
.container-header .navbar-toggler {
  color: #fff;
  background: var(--bss-blue);
  border: 0;
  border-radius: 0;
  margin: 4px auto;
}

/* ---- Page grid: 960px wide, main + 240px right column ---- */
.site-grid {
  grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 240px)) [main-end] minmax(0, 1fr) [full-end];
  grid-gap: 0 20px;
  background: #fff;
  padding-bottom: 20px;
}
.site-grid > [class^="container-"],
.site-grid > [class*=" container-"] { padding: 0 10px; }
.container-component { padding-top: 10px; }

/* Breadcrumbs: plain line with thin rules, as before */
.mod-breadcrumbs__wrapper .breadcrumb {
  background: transparent;
  border-radius: 0;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
  font-size: 12px;
  margin: 0 0 10px;
  padding: 6px 0 !important;
}
.mod-breadcrumbs__divider { display: none; }

/* Tab titles (Tabs & Accordions): one font for all, ignoring sizes/fonts pasted in from Word */
[role="tablist"] > [role="tab"],
[role="tablist"] > [role="tab"] h1, [role="tablist"] > [role="tab"] h2, [role="tablist"] > [role="tab"] h3,
[role="tablist"] > [role="tab"] h4, [role="tablist"] > [role="tab"] h5, [role="tablist"] > [role="tab"] h6 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
[role="tablist"] > [role="tab"] * {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* Product tables (Locks, Moving Boxes, Packing Supplies, Towing Supplies): equal cells, fixed photo area */
table.bss-products {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 12px;
  margin: 0 -12px;
}
table.bss-products td.bss-product {
  width: 33.333%;
  vertical-align: top;
  padding: 10px 12px 12px;
  background: #fff;
  border: 1px solid #e7e7e7;
}
table.bss-products td.bss-product--empty { border: 0; background: transparent; }
.bss-product__title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  text-align: center;
  margin: 0 0 10px;
  min-height: 2.5em;            /* one- and two-line titles keep the photos aligned */
  display: flex;
  align-items: center;
  justify-content: center;
}
.bss-product__img {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.bss-product__img img { max-width: 100%; max-height: 200px; width: auto; height: auto; }
.bss-product__text { font-size: 13px; line-height: 1.45; }
.bss-product__text p { margin: 0 0 6px; }
.bss-product__label { font-weight: 700; }
.bss-product__list { margin: 0 0 6px; padding-left: 18px; }
.bss-product__list li { margin: 0 0 2px; }
@media (max-width: 767px) {
  /* phones: one product per row, full width (selectors as specific as the desktop ones so they win) */
  table.bss-products { display: block; width: 100%; margin: 0; border-spacing: 0; table-layout: auto; }
  table.bss-products > tbody, table.bss-products > tbody > tr { display: block; width: 100%; }
  table.bss-products td.bss-product { display: block; width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 12px; }
  table.bss-products td.bss-product--empty { display: none; }
  .bss-product__title { min-height: 0; font-size: 18px; }
  .bss-product__img { height: auto; min-height: 0; }
  .bss-product__img img { max-height: 220px; }
  .bss-product__text { font-size: 14px; }
  /* tabs become accordions on phones: trim their nested side padding */
  /* (Tabs & Accordions sets this padding with long attribute selectors, hence !important) */
  .com-content-article [role="region"],
  .com-content-article [role="region"] > div { padding-left: 6px !important; padding-right: 6px !important; }
}

/* Self-Storage Tips: larger topic headings in the left column */
table.bss-tips td:first-child,
table.bss-tips td:first-child strong {
  font-size: 17px;
  line-height: 1.3;
}
table.bss-tips td:first-child { width: 30%; padding-right: 15px; }

/* Article pages */
.com-content-article .page-header h1,
.com-content-article .page-header h2 { font-size: 38.5px; line-height: 40px; margin: 10px 0; }
.item-page img, .blog-featured img { max-width: 100%; height: auto; }

/* ---- Right column modules: underlined headings, no cards ---- */
.container-sidebar-right .card,
.container-sidebar-right .moduletable {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-bottom: 15px;
}
.container-sidebar-right .card-header,
.container-sidebar-right h3,
.moduletable > h3,
.bss-module-title {
  font-family: ProximaNovaThin, Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: normal;
  color: #000;
  background: url("../images/h3_bg.png") repeat-x 0 100%;
  border: 0;
  margin: 0 0 10px;
  padding: 0 0 13px;
}
.container-sidebar-right .card-body { padding: 0; }

/* ---- Home page photo strip (replaces TC Gallery) ---- */
.bss-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  max-width: 688px;
  padding: 10px 13px 14px;
  margin: 10px 0;
  background: #fff;
  border: 1px solid #e7e7e7;
}
.bss-gallery a { scroll-snap-align: start; display: block; }
.bss-gallery img {
  width: 200px;
  height: 120px;
  object-fit: cover;
  display: block;
  border: 1px solid #ddd;
}

/* ---- Contact page (core com_contact) ---- */
.com-contact { display: flex; flex-direction: column; }
.com-contact > h1 { order: 0; }
.com-contact > .com-contact__miscinfo { order: 1; }
.com-contact > .com-contact__form { order: 2; }
.com-contact > .page-header,
.com-contact > h3,
.com-contact .contact-miscinfo dt { display: none; }
.com-contact .contact-miscinfo dd { margin: 0; }
.com-contact__form fieldset > legend { display: none; }
.com-contact__form .control-group:has(#jform_contact_email_copy) { display: none; }
.com-contact table td { padding: 10px; }

/* ---- Footer: dark strip ---- */
.container-footer {
  background: #333;
  background-image: none;
  color: #ccc;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
}
.container-footer .grid-child { max-width: 960px; padding: 10px; min-height: 21px; }
.container-footer a { color: #bbb; }
.back-to-top-link { background: var(--bss-blue); }