/* ============================================================
   Helix2 Bootstrap 2 Grid Compatibility Layer
   Provides BS2 container/row-fluid/span* grid that template.css expects
   Loaded AFTER Cassiopeia BS5 so BS2 grid wins for #sp-* layout.
   ============================================================ */

/* --- Container (BS2 responsive) --- */
.container,
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.container:before,
.container:after { display: table; content: ""; line-height: 0; }
.container:after { clear: both; }
@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* --- Row-fluid (BS2) --- */
.row-fluid { width: 100%; }
.row-fluid:before,
.row-fluid:after { display: table; content: ""; line-height: 0; }
.row-fluid:after { clear: both; }
.row-fluid > [class*="span"] {
  float: left;
  margin-left: 2.12766%;
  box-sizing: border-box;
  min-height: 1px;
}
.row-fluid > [class*="span"]:first-child { margin-left: 0; }

/* --- Span widths --- */
.row-fluid .span12 { width: 100%; }
.row-fluid .span11 { width: 91.489362%; }
.row-fluid .span10 { width: 82.978724%; }
.row-fluid .span9  { width: 74.468086%; }
.row-fluid .span8  { width: 65.957448%; }
.row-fluid .span7  { width: 57.44681%; }
.row-fluid .span6  { width: 48.936172%; }
.row-fluid .span5  { width: 40.425534%; }
.row-fluid .span4  { width: 31.914896%; }
.row-fluid .span3  { width: 23.404258%; }
.row-fluid .span2  { width: 14.89362%; }
.row-fluid .span1  { width: 6.38298%; }

/* --- Offsets --- */
.row-fluid .offset12 { margin-left: 104.25532%; }
.row-fluid .offset11 { margin-left: 95.744682%; }
.row-fluid .offset10 { margin-left: 87.234044%; }
.row-fluid .offset9  { margin-left: 78.723406%; }
.row-fluid .offset8  { margin-left: 70.212768%; }
.row-fluid .offset7  { margin-left: 61.70213%; }
.row-fluid .offset6  { margin-left: 53.191492%; }
.row-fluid .offset5  { margin-left: 44.680854%; }
.row-fluid .offset4  { margin-left: 36.170216%; }
.row-fluid .offset3  { margin-left: 27.659578%; }
.row-fluid .offset2  { margin-left: 19.14894%; }
.row-fluid .offset1  { margin-left: 10.638302%; }

/* --- Responsive stacking --- */
@media (max-width: 767px) {
  .row-fluid > [class*="span"] {
    width: 100%;
    float: none;
    margin-left: 0;
  }
}

/* --- Pull utilities --- */
.pull-right { float: right; }
.pull-left  { float: left; }

/* --- Hide --- */
.hidden { display: none; }

/* ============================================================
   Menu class bridging: J5 mod_menu → old #sp-main-menu selectors
   ============================================================ */
/* Mod_menu outputs ul.mod-menu, old CSS targets #sp-main-menu ul.level-0 */
#sp-main-menu .mod-menu,
#sp-main-menu ul.level-0 {
  list-style: none;
  margin: 0;
  padding: 0;
}

#sp-main-menu .mod-menu > li,
#sp-main-menu ul.level-0 > li {
  float: left;
  position: relative;
}

#sp-main-menu .mod-menu > li > a,
#sp-main-menu ul.level-0 > li > a {
  display: block;
  padding: 8px 15px;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s;
}

#sp-main-menu .mod-menu > li > a:hover,
#sp-main-menu .mod-menu > li.active > a,
#sp-main-menu ul.level-0 > li:hover > a,
#sp-main-menu ul.level-0 > li.active > a {
  color: #5cb338;
}

/* Dropdown arrows on hover */
#sp-main-menu .mod-menu > li > a::after,
#sp-main-menu ul.level-0 > li > a::after {
  content: "\f107";
  font-family: FontAwesome;
  margin-left: 5px;
  font-size: 10px;
  opacity: 0;
  transition: opacity .2s;
}
#sp-main-menu .mod-menu > li:hover > a::after,
#sp-main-menu .mod-menu > li.active > a::after,
#sp-main-menu ul.level-0 > li:hover > a::after,
#sp-main-menu ul.level-0 > li.active > a::after {
  opacity: 1;
}

/* Submenu dropdown */
#sp-main-menu .mod-menu > li > ul,
#sp-main-menu ul.level-0 > .sp-menu,
#sp-main-menu .mod-menu ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 220px;
  box-shadow: 0 3px 12px rgba(0,0,0,.15);
  z-index: 9999;
  padding: 0;
  margin: 0;
  list-style: none;
}
#sp-main-menu .mod-menu > li:hover > ul,
#sp-main-menu .mod-menu > li:hover > .sp-menu {
  display: block;
}
#sp-main-menu .mod-menu ul li {
  border-bottom: 1px solid #f0f0f0;
}
#sp-main-menu .mod-menu ul li:last-child {
  border-bottom: none;
}
#sp-main-menu .mod-menu ul li a {
  display: block;
  padding: 10px 18px;
  color: #333 !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}
#sp-main-menu .mod-menu ul li a:hover {
  background: #f8f8f8;
  color: #5cb338 !important;
}
/* Active underline for current */
#sp-main-menu .mod-menu > li.active > a::before,
#sp-main-menu ul.level-0 > li.active > a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
  height: 3px;
  background: #fff;
}

/* ============================================================
   FontAwesome legacy alias
   template.css/preset1.css pseudo-elements use font-family:
   "FontAwesome" — Joomla 5 ships "Font Awesome 6 Free/Brands".
   Alias the family name so ALL old glyph rules render.
   ============================================================ */
@font-face {
  font-family: 'FontAwesome';
  src: url('/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'FontAwesome';
  src: url('/media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'FontAwesome';
  src: url('/media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* Legacy Helix icon-* glyph classes (FA3/4 names used by template markup) */
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: 'FontAwesome';
  font-weight: 900;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  speak: never;
}
.icon-angle-up:before    { content: "\f106"; }
.icon-angle-down:before  { content: "\f107"; }
.icon-angle-left:before  { content: "\f104"; }
.icon-angle-right:before { content: "\f105"; }
.icon-search:before      { content: "\f002"; }
.icon-cart:before        { content: "\f07a"; }
.icon-facebook:before    { content: "\f09a"; }
.icon-twitter:before     { content: "\f099"; }
.icon-google-plus:before { content: "\f0d5"; }
.icon-pinterest:before   { content: "\f231"; }
.icon-youtube:before     { content: "\f167"; }
.icon-envelope:before    { content: "\f0e0"; }

/* ============================================================
   Slider sizing (old module injected these via JS addStyleDeclaration)
   ============================================================ */
#sp-smart-slider.sp-organic-life-layout,
.sp-organic-life-layout .sp-slider-item {
  height: 520px;
}
@media (max-width: 767px) {
  #sp-smart-slider.sp-organic-life-layout,
  .sp-organic-life-layout .sp-slider-item {
    height: 380px;
  }
}
@media (max-width: 480px) {
  #sp-smart-slider.sp-organic-life-layout,
  .sp-organic-life-layout .sp-slider-item {
    height: 280px;
  }
}
#sp-smart-slider.sp-organic-life-layout {
  background: #62a83d;
}
/* Slider text colors on photo background */
.sp-organic-life-layout h1.sp-pretitle,
.sp-organic-life-layout h1.sp-title,
.sp-organic-life-layout h2.sp-posttitle,
.sp-organic-life-layout .sp-introtext {
  color: #fff;
}
.sp-organic-life-layout h2.sp-posttitle,
.sp-organic-life-layout .sp-slider-content .sp-introtext {
  color: rgba(255,255,255,.75);
}