/* --- Customized 5-Section Footer CSS --- */

/* --- 1. Frontend CSS (Live Website) --- */
#footer-wrapper {
  clear: both;
  width: 100%;
  margin: 20px auto 0;
  padding: 0;
  background-color: #333; /* Default dark background */
  color: #fff;
  font-family: inherit;
}

.footer-sec-wrapper {
  max-width: 1100px; /* Adjust based on your theme width */
  margin: 0 auto;
  padding: 20px;
}

/* Footer Header (Image Only) */
.footer-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-header .widget-content img {
  max-width: 100%;
  height: auto;
}

/* Footer Top & Bottom (Multiple Widgets) */
.footer-top, .footer-bottom {
  margin-bottom: 20px;
}

/* Footer Columns (3 Cols) */
.footer-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}
.footer-col {
  flex: 0 0 31%; /* Approximation for 3 columns with gaps */
  margin-bottom: 15px;
}

/* Footer Bar (Credits & Links) */
.footer-bar {
  padding: 15px 20px;
  background-color: rgba(0,0,0,0.2);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.footer-bar .Attribution {
  margin: 0;
}
.footer-bar .LinkList ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.footer-bar .LinkList li {
  margin-left: 15px;
}
.footer-bar .LinkList a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}

/* Responsive for smaller screens */
@media screen and (max-width: 768px) {
  .footer-col {
    flex: 0 0 100%;
  }
  .footer-bar {
    text-align: center;
    justify-content: center;
  }
  .footer-bar .LinkList ul {
    justify-content: center;
    margin-top: 10px;
    width: 100%;
  }
  .footer-bar .LinkList li {
    margin: 0 10px;
  }
}

/* --- 2. Blogger Layout Mode Styling (CRUCIAL) --- */
/* These styles only appear in the Layout tab, making sections easy to find */
body#layout #footer-wrapper {
  background-color: #f4f4f4;
  color: #333;
  padding: 10px;
  margin-top: 50px;
  border: 2px dashed #ccc;
}

/* Common style for all footer b:section containers in Layout mode */
body#layout .footer-sec {
  border: 1px solid #ddd;
  background-color: #fff;
  margin-bottom: 15px !important;
  padding: 10px !important;
  box-sizing: border-box;
}

/* Visual labeling for easy identification */
body#layout .footer-sec::before {
  font-weight: bold;
  display: block;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
}

/* Specific colors for each section to differentiate them */
body#layout #footer-header-sec { border-color: #ff9800; }
body#layout #footer-header-sec::before { content: "1. Footer Header (IMAGE ONLY)"; background-color: #ff9800; }

body#layout #footer-top-sec { border-color: #2196f3; }
body#layout #footer-top-sec::before { content: "2. Footer Top (MULTIPLE WIDGETS)"; background-color: #2196f3; }

body#layout #footer-col-left { border-color: #4caf50; }
body#layout #footer-col-left::before { content: "3a. Footer Col: LEFT"; background-color: #4caf50; }

body#layout #footer-col-center { border-color: #4caf50; }
body#layout #footer-col-center::before { content: "3b. Footer Col: CENTER"; background-color: #4caf50; }

body#layout #footer-col-right { border-color: #4caf50; }
body#layout #footer-col-right::before { content: "3c. Footer Col: RIGHT"; background-color: #4caf50; }

body#layout #footer-bottom-sec { border-color: #9c27b0; }
body#layout #footer-bottom-sec::before { content: "4. Footer Bottom (MULTIPLE WIDGETS)"; background-color: #9c27b0; }

body#layout #footer-bar-sec { border-color: #e91e63; }
body#layout #footer-bar-sec::before { content: "5. Footer Bar (LINKLIST + ATTRIBUTION)"; background-color: #e91e63; }

/* In Layout Mode, ensure columns look like rows for clarity */
body#layout .footer-columns {
  display: block;
}
body#layout .footer-col {
  width: 100% !important;
  float: none;
}
]]>

<footer id='footer-wrapper'>
  <div class='footer-sec-wrapper'>

    <div class='footer-header'>
      <b:section class='footer-sec' id='footer-header-sec' maxwidgets='1' showaddelement='yes'>
        </b:section>
    </div>

    <div class='footer-top'>
      <b:section class='footer-sec' id='footer-top-sec' showaddelement='yes'/>
    </div>

    <div class='footer-columns'>
      
      <div class='footer-col footer-left'>
        <b:section class='footer-sec' id='footer-col-left' showaddelement='yes'/>
      </div>

      <div class='footer-col footer-center'>
        <b:section class='footer-sec' id='footer-col-center' showaddelement='yes'/>
      </div>

      <div class='footer-col footer-right'>
        <b:section class='footer-sec' id='footer-col-right' showaddelement='yes'/>
      </div>
      
    </div> <div class='footer-bottom'>
      <b:section class='footer-sec' id='footer-bottom-sec' showaddelement='yes'/>
    </div>

  </div> <div class='footer-bar'>
    <b:section class='footer-sec' id='footer-bar-sec' showaddelement='yes'>
      <b:widget id='Attribution1' locked='true' title='' type='Attribution' visible='true'/>
      </b:section>
  </div>

</footer>