/*
Theme Name: Hello Biz Child
Theme URI: https://enno.net/
Description: Child theme for Hello Biz
Author: Enno
Version: 1.0.0
Template: hello-biz
Text Domain: hello-biz-child
*/

/* =========================================================
   1) GLOBALS
========================================================= */

:root {
  --accent-yellow: #FDF800;
}

/* 16:9 helper */
.media-16x9 {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.media-16x9 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   2) SWEDENFIXER GRID + CARDS
========================================================= */

.swedenfixer-portfolio-grid {
  display: grid;
  gap: 1.75rem;
}

.sf-work-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

/* Desktop: 3 columns */
@media (min-width: 1025px) {
  .sf-work-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1024px) {
  .sf-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
  .sf-work-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Card Style */
.sf-work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.25s ease;
}

.sf-work-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 35px rgba(0,0,0,0.14);
  background-color: var(--accent-yellow);
}

/* Yellow underline */
.sf-work-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--accent-yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.sf-work-card:hover::after { transform: scaleX(1); }

/* Image area */
.sf-work-card__thumb {
  background: #111;
  overflow: hidden;
}
.sf-work-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.sf-work-card:hover .sf-work-card__thumb img {
  transform: scale(1.08);
}

/* Content */
.sf-work-card__content {
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* Meta strip */
.sf-work-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: #121212;
  color: #f5f5f5;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sf-work-card__meta-item { opacity: 0.85; }

/* Title + excerpt */
.sf-work-card__title,
.sf-work-card__excerpt {
  padding: 0.8rem 0.9rem;
}
.sf-work-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1.3;
  transition: color 0.2s ease;
}
.sf-work-card__excerpt {
  font-size: 0.9rem;
  color: #4b5563;
  margin: 0 0 0.6rem 0;
}

/* (Old sf-popup styles – harmless to keep, not used now) */
.sf-popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 99999;
  justify-content: center;
  align-items: center;
  padding: 40px;
}
.sf-popup.open { display: flex; }

.sf-popup-inner {
  background: #fff;
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  padding: 20px 30px;
  position: relative;
}

.sf-popup-close {
  position: absolute;
  right: 20px;
  top: 15px;
  background: none;
  font-size: 32px;
  border: none;
  cursor: pointer;
}

/* =========================================================
   3) HERO FOR PROJECT PAGES (single project pages)
========================================================= */

.project-hero {
  aspect-ratio: 16/9 !important;
  min-height: 50vh !important;
}
.project-hero > *,
.project-hero .elementor-container,
.project-hero .elementor-column,
.project-hero .elementor-widget-wrap {
  height: 100% !important;
}
.project-hero iframe,
.project-hero video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

/* =========================================================
   4) SIDEBAR – 3 STABLE STATES
========================================================= */

header.elementor-location-header {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar);
  z-index: 1000;
  overflow-y: auto;

  /* hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;

  margin: 0 !important;
  padding: 0 !important;
}
header.elementor-location-header::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

/* content offset */
body.elementor-page {
  padding-left: var(--sidebar);
}

/* DESKTOP (>=1025px) */
@media (min-width: 1025px) {
  :root { --sidebar: 280px; }

  header.elementor-location-header {
    display: flex;
    justify-content: center;
  }

  header.elementor-location-header .e-con,
  header.elementor-location-header .elementor-container {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    padding: 0;
  }
}

/* TABLET (768–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  :root { --sidebar: 220px; }

  header.elementor-location-header {
    display: block;
    justify-content: flex-start;
  }

  header.elementor-location-header .e-con,
  header.elementor-location-header .elementor-container {
    max-width: none;
    margin: 0;
    padding: 0 16px; /* optional */
  }
}

/* MOBILE (<=767px) */
@media (max-width: 767px) {
  :root { --sidebar: 0px; }

  header.elementor-location-header {
    display: none !important;
    width: 0 !important;
  }

  body.elementor-page {
    padding-left: 0 !important;
  }
}

/* ===================================================
   CONTENT GUTTER – panels ska inte ligga mot sidebar
===================================================== */

:root{
  --content-gap: 48px;
}

@media (min-width: 1025px){
  body.elementor-page{
    padding-left: calc(var(--sidebar) + var(--content-gap)) !important;
    padding-right: var(--content-gap) !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  :root{ --content-gap: 16px; }

  body.elementor-page{
    padding-left: calc(var(--sidebar) + var(--content-gap)) !important;
    padding-right: var(--content-gap) !important;
  }
}

@media (max-width: 767px){
  body.elementor-page{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Force left header/sidebar to hug the left edge */
.site-header,
.elementor-location-header,
.enno-leftbar,
.swedenfixer-leftbar,
.site-sidebar {
  margin-left: 0 !important;
  left: 0 !important;
}

/* If the header is inside a boxed container, unbox it */
.elementor-location-header .elementor-container,
.elementor-location-header .elementor-section,
.site-header .container,
.site-header .elementor-container {
  max-width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* =========================================================
   DOMAIN COLORS – FINAL
========================================================= */

/* ENNO.NET – yellow ONLY when not SF + not Studio */
body:not(.site-swedenfixer):not(.site-studio):not([data-site="swedenfixer"])
  header.elementor-location-header{
  background: var(--accent-yellow) !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* SWEDENFIXER – grey */
body.site-swedenfixer header.elementor-location-header,
body.site-swedenfixercom header.elementor-location-header,
body[data-site="swedenfixer"] header.elementor-location-header{
  background: #E6E6E6 !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* SUSTAINALISTS.STUDIO – green */
body.site-studio header.elementor-location-header,
body.site-studio .left-sidebar,
body.site-studio .site-sidebar{
  background: #00A184 !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove any pseudo separators */
header.elementor-location-header::before,
header.elementor-location-header::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   PROJECT PANEL OVERLAY – BASE
========================================================= */

/* Overlay wrapper (covers viewport, flex-center the panel) */
#enno-project-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;               /* hidden until .is-open */
  font-family: inherit;
}

/* Center popup; padding gives space to window edges */
#enno-project-panel-overlay.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

/* Dark backdrop (softened) */
.enno-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}

/* Panel container (white box) */
#enno-project-panel-overlay .enno-panel-container {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 25px 45px rgba(0,0,0,0.25);
  max-width: 720px;
  width: 100%;
  margin: 40px auto;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  box-sizing: border-box;
}

/* Content wrapper that JS fills */
#enno-project-panel-overlay .enno-panel-content-wrap {
  max-width: 100%;
  overflow-x: hidden;
}

/* Inner column – hero + text share this width */
.enno-panel-inner {
  box-sizing: border-box;
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 32px 40px;
  background: #ffffff;
}

/* Loading text */
.enno-panel-loading {
  padding: 40px;
  text-align: center;
}

/* Typography / meta */
.enno-panel-title {
  margin: 0 0 4px 0;
  font-size: 24px;
  line-height: 1.3;
}

.enno-panel-meta {
  margin-bottom: 16px;
  font-size: 14px;
  color: #666;
}

.enno-panel-meta span + span::before {
  content: " • ";
  margin: 0 4px;
}

.enno-panel-summary {
  font-weight: 500;
  margin-bottom: 16px;
}

.enno-panel-body p {
  margin-bottom: 0.7em;
}

/* =========================================================
   POPUP HERO OVERRIDES – NO FULL-PAGE BEHAVIOUR
========================================================= */

/* In the popup, the hero should NOT behave like the big page hero */
#enno-project-panel-overlay .project-hero {
  aspect-ratio: auto !important;
  min-height: 0 !important;
}

/* Reset any forced full-height children inside popup hero */
#enno-project-panel-overlay .project-hero > *,
#enno-project-panel-overlay .project-hero .elementor-container,
#enno-project-panel-overlay .project-hero .elementor-column,
#enno-project-panel-overlay .project-hero .elementor-widget-wrap {
  height: auto !important;
}

/* 16:9 ratio box only inside the popup */
#enno-project-panel-overlay .project-hero__ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;  /* 16:9 */
  overflow: hidden;
  border-radius: 8px;
}

/* Make sure the iframe fills the ratio box correctly */
#enno-project-panel-overlay .project-hero__ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border: 0;
  display: block;
}

/* Ensure popup hero container itself doesn’t cause overflow */
#enno-project-panel-overlay .enno-panel-hero {
  width: 100%;
  margin: 0 0 24px 0;
  position: relative;
  max-width: 100%;
}

/* =========================================================
   POPUP COLORS – KEEP PANEL BRIGHT
========================================================= */

/* Make sure the popup surface is pure white */
#enno-project-panel-overlay .enno-panel-container {
  background: #ffffff !important;
  backdrop-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
  border: none !important;
}

/* Also force the inner wrapper to stay white */
#enno-project-panel-overlay .enno-panel-inner {
  background: #ffffff !important;
}

/* Remove any inherited tint from the hero */
#enno-project-panel-overlay .enno-panel-hero,
#enno-project-panel-overlay .enno-panel-body,
#enno-project-panel-overlay .enno-panel-content-wrap,
#enno-project-panel-overlay .project-hero {
  background: #ffffff !important;
}

/* =========================================================
   POPUP: CLOSE BUTTON (generic)
========================================================= */

.enno-panel-close {
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  border: none;
  box-shadow: none;
  text-shadow: none;
  filter: none;
  color: #222;
}

.enno-panel-close:hover {
  opacity: 0.7;
}

/* =========================================================
   POPUP: GALLERY STYLING
========================================================= */

.enno-panel-gallery {
  margin: 16px 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.enno-panel-gallery__item {
  margin: 0;
}

.enno-panel-gallery__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}

/* =========================================================
   LIGHTBOX for popup gallery images
========================================================= */

#enno-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999; /* above popup */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#enno-lightbox.is-open {
  display: flex;
}

.enno-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(3px);
  z-index: 1;
}

.enno-lightbox-image {
  position: relative;
  max-width: 90vw;
  max-height: 80vh;
  z-index: 2;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

/* Arrows below image */
.enno-lightbox-controls {
  position: relative;
  z-index: 3;
  margin-top: 16px;
  display: flex;
  gap: 28px;
}

.enno-lightbox-prev,
.enno-lightbox-next {
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: white;
  cursor: pointer;
  padding: 6px 10px;
  opacity: 0.8;
}

.enno-lightbox-prev:hover,
.enno-lightbox-next:hover {
  opacity: 1;
}

@media (max-width: 600px) {
  .enno-lightbox-prev,
  .enno-lightbox-next {
    font-size: 26px;
  }
}

/* =========================================================
   Credits box
========================================================= */

.enno-panel-creditsbox {
  margin-top: 32px;
  padding: 20px 22px;
  background: #f7f7f7;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
}

.enno-panel-credits-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
  color: #111;
}

.enno-panel-credits-body p {
  margin: 0 0 6px 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: #444;
}

/* =========================================================
   PROJECT POPUP NAV – Prev / X / Next ABOVE POPUP
========================================================= */

/* Make the popup container a positioning reference */
#enno-project-panel-overlay .enno-panel-container {
  position: relative;
}

/* Top nav bar */
.enno-panel-project-nav {
  position: absolute;
  top: -24px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;  /* prev left, next right, X in mitten */
  align-items: center;
  pointer-events: none;            /* only buttons clickable */
}

/* Previous/Next buttons */
.enno-panel-project-nav-btn {
  pointer-events: auto;
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 4px;
  font-size: 13px;
  padding: 4px 10px;
  cursor: pointer;
  opacity: 0.95;
  line-height: 1.2;
  transition: opacity 0.15s;
}

.enno-panel-project-nav-btn:hover:not(.is-disabled) {
  opacity: 1;
}

.enno-panel-project-nav-btn.is-disabled {
  opacity: 0.4;
  cursor: default;
}

/* Centered close "X" between Prev and Next */
.enno-panel-close-top {
  pointer-events: auto;
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50%;
  font-size: 16px;
  padding: 2px 10px;
  cursor: pointer;
  opacity: 0.95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}

.enno-panel-close-top:hover {
  opacity: 1;
}

/* =========================================================
   LOAD MORE BUTTON
========================================================= */

.enno-portfolio-loadmore-wrap {
  text-align: center;
  margin: 30px 0;
}

#enno-portfolio-loadmore {
  background: #ffffff;
  color: #000000;
  border: none;
  padding: 10px 22px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.95;
}

#enno-portfolio-loadmore:hover {
  opacity: 1;
}
/* =========================================================
   SIMPLE TOP NAV INSIDE POPUP
========================================================= */

.enno-panel-inner {
  position: relative;
}

/* Nav-rad högst upp i panelen */
.enno-panel-project-nav {
  position: static;          /* inte absolut längre */
  width: 100%;
  display: flex;
  justify-content: space-between;  /* prev left, next right */
  align-items: center;
  margin: 0 0 16px 0;
  pointer-events: auto;      /* allt klickbart */
}

/* Prev/Next-knappar */
.enno-panel-project-nav-btn {
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 4px;
  font-size: 13px;
  padding: 4px 10px;
  cursor: pointer;
  opacity: 0.95;
  line-height: 1.2;
  transition: opacity 0.15s;
}

.enno-panel-project-nav-btn:hover:not(.is-disabled) {
  opacity: 1;
}

.enno-panel-project-nav-btn.is-disabled {
  opacity: 0.4;
  cursor: default;
}

/* X-knapp i mitten */
.enno-panel-close-top {
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50%;
  font-size: 16px;
  padding: 2px 10px;
  cursor: pointer;
  opacity: 0.95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}

.enno-panel-close-top:hover {
  opacity: 1;
}

/* FORCE BUTTONS TO LOOK LIKE SIMPLE TEXT */
.enno-filter-btn {
    all: unset !important;          /* resets everything: background, border, padding, font, etc. */
    font-family: inherit !important;
    font-size: 1rem !important;
    color: #000 !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin-right: 0.8rem !important;
}

/* Prevent hover effects */
.enno-filter-btn:hover,
.enno-filter-btn.is-active {
    color: #000 !important;
    text-decoration: none !important;
}

.enno-filter-btn {
    background: none !important;
    border: none !important;
    padding: 10px 0 !important; /* adds 20px total height */
    margin: 0 0.8rem 0 0 !important;
    font: inherit !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #000 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.enno-filter-btn:hover,
.enno-filter-btn.is-active {
    color: #000 !important;
    text-decoration: none !important;
}
.enno-filter-btn.is-active {
    font-weight: 700 !important; /* bold */
    color: #000 !important;
    text-decoration: none !important;
}