/* CUSTOM CSS FIXES FOR ASTRO WEGOTEDGE.COM */

/* =========================================================
   1. HERO SECTION FIXES - Background video and cover
   ========================================================= */

/* Ensure semplice cover works as hero */
.semplice-cover {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background video container */
.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.background-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
}

/* Ensure content appears above video */
.semplice-cover .container {
  position: relative;
  z-index: 2;
}

/* =========================================================
   2. FONT FIXES - Custom font classes from legacy
   ========================================================= */

/* Montserrat Subrayada for headings */
.font_02b981dzn,
[data-font="font_02b981dzn"],
[data-font="font_02b981dzn"] li a,
#content-holder h1 {
  font-family: "Montserrat Subrayada", serif;
  font-weight: 700;
  font-style: normal;
}

/* Copernicus for body text */
.font_ix8yc264y,
[data-font="font_ix8yc264y"],
[data-font="font_ix8yc264y"] li a,
#content-holder h4,
#content-holder p,
#content-holder li {
  font-family: "Copernicus", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* Gotham for various text */
.font_px7xqwbe4,
[data-font="font_px7xqwbe4"],
[data-font="font_px7xqwbe4"] li a {
  font-family: "Gotham Book", "Gotham", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Gotham Bold */
.font_l0lj1o4er,
[data-font="font_l0lj1o4er"],
[data-font="font_l0lj1o4er"] li a,
#content-holder h2,
#content-holder h3,
#content-holder h5 {
  font-family: "Gotham Bold", "Gotham", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Gotham Thin */
.font_5yw4v3qgh,
[data-font="font_5yw4v3qgh"],
[data-font="font_5yw4v3qgh"] li a {
  font-family: "Gotham Thin", "Gotham", sans-serif;
  font-weight: 300;
  font-style: normal;
}

/* Ionicons */
.font_g9h559wl0,
[data-font="font_g9h559wl0"],
[data-font="font_g9h559wl0"] li a {
  font-family: "ionicons", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* =========================================================
   3. HEADER TEXT FIX - Prevent truncation
   ========================================================= */

#content-holder h1 {
  font-size: 5rem;
  line-height: 5rem;
  letter-spacing: 0rem;
  overflow: visible;
  white-space: normal;
}

/* Responsive heading sizes */
@media screen and (min-width: 992px) and (max-width: 1169.98px) {
  #content-holder h1 {
    font-size: 4.6rem;
    line-height: 4.6rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 991.98px) {
  #content-holder h1 {
    font-size: 4.3rem;
    line-height: 4.3rem;
  }
}

@media screen and (min-width: 544px) and (max-width: 767.98px) {
  #content-holder h1 {
    font-size: 4.1rem;
    line-height: 4.1rem;
  }
}

@media screen and (max-width: 543.98px) {
  #content-holder h1 {
    font-size: 3.9rem;
    line-height: 3.9rem;
  }
}

/* =========================================================
   4. SHARE ICONS FIX - Make them small footer-style
   ========================================================= */

/* Share box styling */
.share-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1rem 0;
}

.share-icons-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.share-icons-wrapper p.hidden {
  display: none;
}

/* Individual share icons - SMALL SIZE */
.semplice-share-icons {
  display: inline-flex;
}

.semplice-share-icons .share-icon a {
  display: block;
  padding: 0.25rem;
  line-height: 0;
}

/* SVG sizing - 24px for footer style */
.semplice-share-icons .share-icon a svg {
  width: 24px;
  height: 24px;
  fill: #000;
  transition: fill 0.2s ease;
}

/* Hover effects */
.semplice-share-icons .icon-facebook a:hover svg {
  fill: #3b5998 !important;
}

.semplice-share-icons .icon-twitter a:hover svg {
  fill: #0084b4 !important;
}

.semplice-share-icons .icon-linkedin a:hover svg {
  fill: #0077b5 !important;
}

/* =========================================================
   5. WEBBBYRÅ STOCKHOLM BADGE STYLING
   ========================================================= */

.webbyra-badge {
  display: inline-block;
  font-family: "Gotham Book", sans-serif;
  font-size: 1rem;
  line-height: 2rem;
  color: #000;
}

.webbyra-badge .subtext {
  font-size: 16px;
  color: #9fa7ad;
  font-family: "Gotham Thin", sans-serif;
  text-transform: uppercase;
}

/* =========================================================
   6. LAYOUT SPACING FIXES
   ========================================================= */

/* Content holder base styles */
#content-holder {
  background-color: #fff;
  position: relative;
  width: 100%;
}

.is-frontend #content-holder {
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
}

.is-frontend #content-holder .content-container {
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
}

/* Sections margin fix */
.is-frontend #content .sections,
.is-frontend #content-holder .sections {
  margin-top: 0 !important;
}

/* =========================================================
   7. RESPONSIVE BREAKPOINTS
   ========================================================= */

/* Tablet adjustments */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .semplice-cover {
    min-height: 80vh;
  }
  
  #content-holder h2 {
    font-size: 1.76rem;
    line-height: 2.35rem;
  }
  
  #content-holder h3 {
    font-size: 1.43rem;
    line-height: 1.84rem;
  }
}

/* Mobile adjustments */
@media screen and (max-width: 767.98px) {
  .semplice-cover {
    min-height: 70vh;
  }
  
  .background-video video {
    object-position: center center;
  }
  
  /* Smaller share icons on mobile */
  .semplice-share-icons .share-icon a svg {
    width: 20px;
    height: 20px;
  }
}

/* Extra small mobile */
@media screen and (max-width: 543.98px) {
  .semplice-cover {
    min-height: 60vh;
  }
  
  #content-holder h1 {
    font-size: 2.5rem;
    line-height: 2.8rem;
  }
  
  #content-holder h2 {
    font-size: 1.6rem;
    line-height: 2.13rem;
  }
  
  /* Stack share icons on very small screens */
  .share-icons-wrapper {
    flex-direction: row;
    gap: 0.75rem;
  }
}

/* =========================================================
   8. UTILITY CLASSES
   ========================================================= */

/* Text alignment utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Visibility utilities */
.hide-on-init {
  opacity: 0;
}

/* Cover transparent navbar support */
.cover-transparent {
  background: rgba(0, 0, 0, 0) !important;
}

/* Show more arrow */
.show-more {
  cursor: pointer;
  position: absolute;
  bottom: 2px;
  width: 100%;
  z-index: 105;
  display: flex;
  justify-content: center;
  padding: 30px;
}

.show-more svg {
  fill: #fff;
}

.show-more-hidden {
  display: none;
}

/* =========================================================
   9. TEAM MEMBER SOCIAL ICONS SPECIFIC
   ========================================================= */

.team-member h3 span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
}

.team-member h3 span a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 1.2rem;
  transition: color 0.2s ease;
}

.team-member h3 span a:hover {
  color: #0077b5;
}

/* =========================================================
   10. NAVBAR FIXES
   ========================================================= */

.is-frontend .semplice-navbar {
  opacity: 1 !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 120;
}