/*
 Theme Name:   Enfold Child
 Template:     enfold
 Description:  Child Theme for Enfold
 Version:      1.0.0
*/

/* No @import here. Put your custom CSS below. */


/* ===============================
   MIGRATED QUICK CSS (CLEANED)
   =============================== */

/* Parallax stacking in mobile */
.avia_mobile #top .av-parallax-section { z-index: 0; }

/* Slider image bg */
.main_color .avia-content-slider .slide-image { background: transparent; }

/* Logo sizing/spacing (consider adjusting in Enfold > Header too) */
.logo img { padding: 0; }
div .logo { margin-top: 32px; }
.logo, .logo img { width: 187px !important; height: 39px !important; }

/* Grid entry spacing */
.grid-entry .inner-entry { margin-bottom: 5%; margin-right: 5%; }

/* Scroll-to-top */
#scroll-top-link { color: #bbb; border: 1px solid #bbb; }

/* ---------- Footer & Socket ---------- */

/* NOTE: New Enfold markup may differ.
   If things look off, consider using flex instead of absolute centering. */
#socket .container { padding: 0; }
#socket { padding-bottom: 70px; font-size: 14px; }
#footer { padding: 15px 0 0 0; z-index: 1; }
.footer_color { border-color: #e1e1e1; }
#top .socket_color a:hover { color: #999; text-decoration: none; }
#footer .widget { padding: 0; margin: 30px 0 0 0 !important; }

/* Aggressive absolute centering (may need review with current markup) */
#socket .container > * {
  float: none;
  left: 49%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  position: absolute;
}

/* Small phones */
@media only screen and (max-width: 479px) {
  .responsive #socket .sub_menu_socket {
    display: block !important;
    width: 65% !important;
    margin-top: -22px;
  }
  #scroll-top-link { right: 5% !important; }
}

/* Mid phones/tablets (old breakpoint) */
@media only screen and (max-width: 767px) and (min-width: 480px) {
  .responsive #socket .sub_menu_socket {
    margin-left: -10px !important;
    width: 200px !important;
  }
}

/* ---------- Hero ---------- */
#bio-hero {
  -webkit-background-size: cover;
  background-size: cover;
  height: 800px;
  padding: 270px 0 0 0;
}

/* Responsive tweaks for hero */
@media only screen and (max-width: 767px) {
  #bio-hero { height: 350px; padding: 75px 0 0 0; }
}
@media only screen and (max-width: 480px) {
  #bio-hero { height: 350px; padding: 100px 0 0 0; }
}

/* ---------- Containers ---------- */
.mdcontainer, .mdcontainer2 { overflow: hidden; width: 970px; margin: 0 auto; }

@media screen and (min-width: 975px) and (max-width: 1124px) {
  .mdcontainer, .mdcontainer2 { width: 100% !important; }
}
@media only screen and (min-width: 768px) and (max-width: 989px) {
  .mdcontainer, .mdcontainer2 { width: 80% !important; }
}
@media only screen and (max-width: 767px) {
  .responsive .logo a, .responsive .logo img { height: auto !important; }
  .mdcontainer, .mdcontainer2 { width: 100% !important; }
}

/* ---------- Title blocks ---------- */
/* (These classes look custom; keep them if you still use
   those elements/shortcodes in your new pages.) */

.title, .title-hp, .title2, .title3 { overflow: hidden; }

.title h1          { margin-top: 20px; font-weight: 100 !important; }
.title-hp h1       { margin-top: 20px; font-weight: 100 !important; }
.title2 h1         { margin-top: 20px; font-weight: 100 !important; }
.title3 h1         { margin-top: 20px; font-weight: 700 !important; }

.title.title-blank         { padding: 0 0 100px 0; }
.title-hp.title-blank-hp   { padding: 40px 0!important; }
.title2.title-blank2       { padding: 50px 0; font-weight: 100 !important; }
.title3.title-blank3       { padding: 50px 0 0 0; font-weight: 100 !important; }

.title.title-blank h1,
.title-hp.title-blank-hp h1 {
  text-transform: none !important;
  font-size: 2.3125em;
  font-weight: 500 !important;
  line-height: 140%;
}

/* Spans (fixed missing semicolons) */
.title.title-blank h1 span,
.title-hp.title-blank-hp h1 span,
.title2.title-blank2 h1 span,
.title3.title-blank3 h1 span {
  line-height: 100%;
  display: block;
  font-style: italic;
}

/* Specific sizing variants */
.title2.title-blank2 h1 {
  font-family: 'Josefin Sans', sans-serif;
  text-transform: none !important;
  font-size: 4.3125em;
  font-weight: 100 !important;
  line-height: 140%;
}
.title3.title-blank3 h1 {
  font-family: 'PT Sans', sans-serif;
  text-transform: none !important;
  font-size: 8.3125em;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em;
}

/* Intro animations */
.title h1,
.title-hp h1,
.title2 h1,
.title3 h1 {
  opacity: 0;
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  transform: translateY(-20px);
  -webkit-animation: fadein 0.6s 0.5s 1 forwards ease-in-out;
  -moz-animation: fadein 0.6s 0.5s 1 forwards ease-in-out;
  animation: fadein 0.6s 0.5s 1 forwards ease-in-out;
}

/* Keyframes */
@-webkit-keyframes fadein { 0% { -webkit-transform: translateY(-20px); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } }
@-moz-keyframes    fadein { 0% { -moz-transform: translateY(-20px);    opacity: 0; } 100% { -moz-transform: translateY(0);    opacity: 1; } }
@keyframes         fadein { 0% { transform: translateY(-20px);         opacity: 0; } 100% { transform: translateY(0);         opacity: 1; } }

/* Bio image pad */
.bio-pad img { margin-top: 100px; }
@media only screen and (max-width: 480px) {
  .responsive .logo a, .responsive .logo img { max-width: 100%; }
  .mdcontainer, .mdcontainer2 { width: 100% !important; }
  .responsive .container { width: 325px !important; }
  .bio-pad img { margin-top: 0 !important; }
}

/* Overlay icon (ensure entypo-fontello is still used by Enfold) */
.image-overlay.overlay-type-extern .image-overlay-inside::before {
  content: "\e803";
  font-family: 'entypo-fontello'; /* important for the glyph to render */
}

/* Misc fixups */
#scroll-top-link { /* already above; keep here if you want stronger specificity */ }

/* The following selector looked invalid in the old CSS.
   If you meant an element with attribute id="attachment_id=3145", use: */
div[id="attachment_id=3145"] { margin: 0 auto !important; border-radius: 0 !important; }
/* If you meant an element with ID like #attachment_3145 then use: */
/* #attachment_3145 { margin: 0 auto !important; border-radius: 0 !important; } */

/* Footer menu inside #nav_menu-3 */
#nav_menu-3 .menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#nav_menu-3 .menu li {
  float: none;
  margin: 0;
  display: inline-flex;
}

#nav_menu-3 .menu a {
  text-decoration: none;
  display: inline-block;
  padding: .25rem 0;
  color: #808080;               /* link color */
  transition: color 0.2s ease;  /* smooth hover effect */
}

#nav_menu-3 .menu a:hover,
#nav_menu-3 .menu a:focus {
  color: #333333;               /* hover color */
  text-decoration: none;
}

/* Optional: responsive wrapping on small screens */
@media (max-width: 600px) {
  #nav_menu-3 .menu {
    flex-wrap: wrap;
    gap: 1rem;
  }
}