/* ==========================================================================
   footer.css — Shared footer & compliance section styles
   Loaded AFTER page-specific CSS so these rules win by cascade.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Compliance / Logo section
   Scoped under .hooc-compliance to avoid colliding with #LayoutGrid6 uses
   that appear in page body content (e.g. Covid-19 page).
   --------------------------------------------------------------------------- */

.hooc-compliance {
   padding: 28px 16px 20px;
   text-align: center;
}

/* --- Logo row --- */
.hooc-compliance #LayoutGrid6 {
   max-width: 960px;
   margin-left: auto;
   margin-right: auto;
}

.hooc-compliance #LayoutGrid6 .row {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
   gap: 40px;
   margin: 0;
}

.hooc-compliance #LayoutGrid6 > .row > .col-1,
.hooc-compliance #LayoutGrid6 > .row > .col-2,
.hooc-compliance #LayoutGrid6 > .row > .col-3 {
   flex: 0 1 auto;
   width: auto;
   min-height: 0;
   padding: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
}

.hooc-compliance #Image1,
.hooc-compliance #Image3,
.hooc-compliance #Image4 {
   max-width: 110px;
   height: auto;
   display: block;
   margin: 0 auto;
}

/* --- Disclaimer text --- */
.hooc-compliance #LayoutGrid7 {
   max-width: 960px;
   margin-left: auto;
   margin-right: auto;
}

.hooc-compliance #LayoutGrid7 .row {
   display: block;
   margin: 0;
}

.hooc-compliance #LayoutGrid7 > .row > .col-1,
.hooc-compliance #LayoutGrid7 > .row > .col-3 {
   display: none;
}

.hooc-compliance #LayoutGrid7 > .row > .col-2 {
   width: 100%;
   float: none;
   display: block;
}

.hooc-compliance #Text2-max-width {
   max-width: 620px;
}

.hooc-compliance #wb_Text2 span {
   display: block;
   font-size: 11.5px;
   line-height: 1.65;
   color: #666666;
   text-align: center;
   font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
}

/* Subtle divider between compliance and footer */
.hooc-compliance + #wb_Footer {
   border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------------------------
   2. Dark footer
   --------------------------------------------------------------------------- */

#wb_Footer {
   background-color: #142e13;
}

#Footer {
   padding: 28px 16px 22px;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}

#Footer > .row {
   margin: 0;
}

#Footer > .row > .col-1 {
   float: none;
   width: 100%;
   padding: 0;
}

/* --- Social icons --- */
.hooc-footer-social,
#LayoutGrid1 {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 14px;
   padding: 0;
   margin: 0 0 12px;
}

/* Hide empty grid columns left over from old layout */
#LayoutGrid1 > .col-1,
#LayoutGrid1 > .col-3 {
   display: none;
}

#LayoutGrid1 > .col-2 {
   flex: 1 1 100%;
   max-width: none;
   padding: 0;
   text-align: center;
}

/* Individual social links — uniform circle treatment */
.hooc-footer-social a,
#LayoutGrid1 a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.75);
   font-size: 18px;
   text-decoration: none;
   transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.hooc-footer-social a:hover,
.hooc-footer-social a:focus,
#LayoutGrid1 a:hover,
#LayoutGrid1 a:focus {
   background: rgba(255, 255, 255, 0.2);
   color: #ffffff;
   transform: translateY(-2px);
}

.hooc-footer-social a:focus-visible,
#LayoutGrid1 a:focus-visible {
   outline: 2px solid #4CAD49;
   outline-offset: 3px;
   background: rgba(255, 255, 255, 0.15);
}

/* Hide old coloured icon-box divs (wb_FontAwesomeIcon1-5) */
#wb_FontAwesomeIcon1,
#wb_FontAwesomeIcon2,
#wb_FontAwesomeIcon4,
#wb_FontAwesomeIcon5 {
   display: none !important;
}

/* --- Breadcrumb / Home link --- */
#Breadcrumb {
   padding: 4px 0 6px;
   margin: 0;
   text-align: center;
   font-size: 13px;
}

#Breadcrumb > li {
   font-size: 13px;
}

#Breadcrumb a {
   color: rgba(255, 255, 255, 0.45);
}

#Breadcrumb a:hover {
   color: rgba(255, 255, 255, 0.8);
}

/* --- Copyright --- */
#wb_Text8 {
   padding: 6px 0 0;
}

#wb_Text8 span {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.38);
   font-weight: 400;
}

/* --- Extension spacer (legacy empty div) --- */
#wb_Extension1 {
   display: none;
}

/* ---------------------------------------------------------------------------
   3. Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
   .hooc-compliance {
      padding: 20px 14px 16px;
   }

   .hooc-compliance #LayoutGrid6 .row {
      gap: 24px;
   }

   .hooc-compliance #Image1,
   .hooc-compliance #Image3,
   .hooc-compliance #Image4 {
      max-width: 90px;
   }

   .hooc-compliance #wb_Text2 span {
      font-size: 11px;
   }

   #Footer {
      padding: 24px 14px 18px;
   }

   .hooc-footer-social a,
   #LayoutGrid1 a {
      width: 38px;
      height: 38px;
      font-size: 17px;
   }
}

@media (max-width: 480px) {
   .hooc-compliance #LayoutGrid6 .row {
      flex-direction: column;
      gap: 14px;
   }

   .hooc-compliance #Image1,
   .hooc-compliance #Image3,
   .hooc-compliance #Image4 {
      max-width: 80px;
   }

   .hooc-compliance #wb_Text2 span {
      font-size: 11px;
   }

   #Footer {
      padding: 22px 12px 16px;
   }

   .hooc-footer-social a,
   #LayoutGrid1 a {
      width: 36px;
      height: 36px;
      font-size: 16px;
   }

   #Breadcrumb {
      font-size: 12px;
   }

   #Breadcrumb > li {
      font-size: 12px;
   }
}