/* SM Site Optimizer v1.2.0 - Frontend CSS */

/* ─── BACK TO TOP ───────────────────────────────────────────────────────────── */
#sm-back-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 45px;
  height: 45px;
  background: #222;
  color: #fff;
  font-size: 22px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
#sm-back-top.visible { opacity: 1; visibility: visible; }
#sm-back-top:hover { background: #555; }

/* ─── COOKIE CONSENT ─────────────────────────────────────────────────────────── */
#sm-cookie-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #1a1a1a; color: #f0f0f0;
  padding: 14px 20px; display: flex; align-items: center;
  gap: 14px; z-index: 99999; font-size: 13px; flex-wrap: wrap;
}
#sm-cookie-bar p { margin: 0; flex: 1; }
#sm-cookie-bar a { color: #aad; }
#sm-cookie-ok { background: #5a5; color: #fff; border: none; padding: 8px 18px; cursor: pointer; border-radius: 3px; font-size: 13px; }
#sm-cookie-no { background: transparent; color: #aaa; border: 1px solid #555; padding: 8px 18px; cursor: pointer; border-radius: 3px; font-size: 13px; }

/* ─── MOBILE HAMBURGER ───────────────────────────────────────────────────────── */
#sm-hamburger-btn {
  display: none;
  position: fixed;
  top: 12px;
  right: 15px;
  width: 44px;
  height: 44px;
  background: rgba(0,0,0,.65);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  z-index: 99998;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
}
.admin-bar #sm-hamburger-btn { top: 58px; }

#sm-hamburger-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
#sm-hamburger-btn.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#sm-hamburger-btn.open span:nth-child(2) { opacity: 0; }
#sm-hamburger-btn.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Hide portrait photos used instead of hamburger - BOTH headers */
/* main header portrait */
.elementor-element-9e2b423 { display: none !important; }
/* sticky header portrait */
.elementor-element-82e689d { display: none !important; }

@media (max-width: 1024px) {
  #sm-hamburger-btn { display: flex; }
}
@media (min-width: 1025px) {
  #sm-hamburger-btn { display: none !important; }
  .elementor-hidden-desktop { display: none !important; }
}

/* ─── LOGO RESPONSIVE SIZE ───────────────────────────────────────────────────── */
/* Reduce logo size on smaller screens - main header logo */
.elementor-element-480a893 img,
.elementor-element-8f01340 img {
  max-width: 160px !important;
  height: auto !important;
}

@media (max-width: 1024px) {
  .elementor-element-480a893 img,
  .elementor-element-8f01340 img {
    max-width: 120px !important;
    height: auto !important;
  }
}

@media (max-width: 767px) {
  .elementor-element-480a893 img,
  .elementor-element-8f01340 img {
    max-width: 80px !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  .elementor-element-480a893 img,
  .elementor-element-8f01340 img {
    max-width: 65px !important;
    height: auto !important;
  }
}

/* ─── SKIP LINK ─────────────────────────────────────────────────────────────── */
#sm-skip-link {
  position: absolute; top: -40px; left: 0;
  background: #000; color: #fff; padding: 8px 12px;
  z-index: 999999; text-decoration: none; font-size: 14px;
  transition: top .2s;
}
#sm-skip-link:focus { top: 0; }

/* ─── FORM PLACEHOLDERS ─────────────────────────────────────────────────────── */
.wpcf7-form .wpcf7-text::placeholder,
.wpcf7-form .wpcf7-textarea::placeholder,
.wpcf7-form .wpcf7-email::placeholder {
  color: #bbb; font-style: italic;
}

/* ─── CONTACT PAGE FOOTER ───────────────────────────────────────────────────── */
#sm-contact-footer {
  background: #1a1a1a;
  color: #e0e0e0;
  padding: 48px 24px 32px;
  font-family: inherit;
}
#sm-contact-footer .sm-cf-inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 768px) {
  #sm-contact-footer .sm-cf-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
#sm-contact-footer h3 {
  color: #fff;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 16px;
  font-weight: 400;
}
#sm-contact-footer p {
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 8px;
  color: #bbb;
}
#sm-contact-footer a {
  color: #bbb;
  text-decoration: none;
  transition: color .2s;
}
#sm-contact-footer a:hover { color: #fff; }
#sm-contact-footer .sm-cf-socials {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}
#sm-contact-footer .sm-cf-socials a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid #444;
  border-radius: 3px;
  transition: border-color .2s, color .2s;
}
#sm-contact-footer .sm-cf-socials a:hover { border-color: #888; color: #fff; }
#sm-contact-footer .sm-cf-bottom {
  max-width: 960px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid #333;
  font-size: 12px;
  color: #666;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}


/* ─── HIDE ARTALE THEME FOOTER ON CONTACT PAGE ───────────────────────────────── */
/* Contact page (page-id-3388) has its own custom footer - hide the theme footer */
.page-id-3388 #footer-wrapper .elementor-2378 {
  display: none !important;
}
