/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ===== UNLOX – Nyhetsdetalj (AJAX-rutan) ===== */
:root{
  /* LOOK */
  --news-bg:           #D4D3BB;
  --news-link:         var(--e-global-color-primary);
  --news-skel-a:       #dcd7c7;
  --news-skel-b:       #efe9d7;

  /* LAYOUT */
  --news-radius:       10px;
  --news-gap:          80px;
  --news-pad:          28px;
  --news-col-left-min: 260px;
  --news-col-left-fr:  40%;

  /* ANIMATION (håll dessa i synk med JS/timeout) */
  --news-ease:         ease;
  --news-dur-fade:     .28s;
  --news-dur-height:   .28s;

  /* RESPONS */
  --news-break:        768px;

  /* HEADER-OFFSET för scroll */
  --header-offset:     96px;

  /* Stängknapp */
  --close-size: 50px;
  --close-gap:  16px;
}

/* Behövs för att skriva över elementors standardstilar - */
button.news-detail-close {
  border: none;
  padding: 0 20px 0 0;
}
button.news-detail-close:focus {
  background-color:#ffffff00;
  border: none;
} 
button.news-detail-close:hover {
  border: none;
  background-color: #ffffff00;
}

/* Expander vi animerar i höjd */
#news-detail{
  margin-top: 40px;
  overflow: hidden;
  height: 0;
  min-height: 0 !important;
  transition: height var(--news-dur-height) var(--news-ease);
  scroll-margin-top: var(--header-offset);
  position: relative;
  z-index: 1;
  will-change: height;
}

/* Själva rutan */
.news-detail-box{
  position: relative;
  background: var(--news-bg);
  border-radius: var(--news-radius);
  overflow: hidden;

  /* in/ut utgångsläge + permanent transition */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--news-dur-fade) var(--news-ease),
              transform var(--news-dur-fade) var(--news-ease);
  will-change: opacity, transform;
}
.news-detail-box.is-visible{ opacity: 1; transform: none; }
.news-detail-box.is-closing{ opacity: 0; transform: translateY(6px); pointer-events: none; }

.news-detail-inner{
  display: grid;
  grid-template-columns: minmax(var(--news-col-left-min), var(--news-col-left-fr)) 1fr;
  gap: var(--news-gap);
  padding: var(--news-pad);
  position: relative;
  padding-right: calc(var(--close-size) + var(--close-gap)); /* reservera plats för knappen */
}

/* Bild */
.news-detail-image{ border-radius: var(--news-radius); overflow: hidden; background:#d9d4c3; }
.news-detail-image img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }

/* Text */
.news-detail-content h2{ margin:0 0 8px; line-height:1.1; font-size: var(--e-global-typography-3cfb286-font-size); }
.news-detail-body{ line-height:1.65; }
.news-detail-body p{ margin:0 0 12px; }
.news-detail-permalink{ color: var(--news-link); text-decoration: underline; }

/* Stängknapp (ikon + text) */
.news-detail-close{
  position: absolute; top:14px; right:0;
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:transparent; border:0; cursor:pointer; font:inherit; text-align:center; font-size:14px;
  color: var(--e-global-color-primary);
}
.news-detail-close:focus{ outline: none; }
.news-detail-close::before{
  content:""; display:block;
  width: var(--close-size); height: var(--close-size);
  border-radius:50%;
  background-color: var(--e-global-color-f7ba553, #E9E6D9);
  background-image: url("https://www.unlox.se/wp-content/uploads/2025/08/NOOX_X_dark.svg");
  background-repeat:no-repeat; background-position:center; background-size:50% 50%;
  transition: transform .15s ease, background-color .2s ease;
}
.news-detail-close span{ font-size:.8rem; line-height:1; color: var(--e-global-color-primary); }
.news-detail-close:hover::before{ transform:scale(1.05); }
.news-detail-close:active::before{ transform:scale(.95); }
/* lås textfärgen i alla states */
.news-detail-close,
.news-detail-close span,
.news-detail-close:hover,
.news-detail-close:hover span,
.news-detail-close:focus,
.news-detail-close:focus span { color: var(--e-global-color-primary) !important; }

/* Skeleton */
.news-skel{ background:var(--news-bg); border-radius:var(--news-radius); padding:var(--news-pad); }
.news-skel .row{ display:grid; grid-template-columns:minmax(var(--news-col-left-min), var(--news-col-left-fr)) 1fr; gap:32px; }
.news-skel .ph{
  display:block; width:100%; height:14px; border-radius:6px;
  background: linear-gradient(90deg,var(--news-skel-a) 0%,var(--news-skel-b) 50%,var(--news-skel-a) 100%);
  background-size:200% 100%; animation: skel 1.2s var(--news-ease) infinite;
}
.news-skel .img{ height:220px; border-radius:12px; }
.news-skel .ph.big{ height:34px; width:70%; margin-bottom:10px; }
.news-skel .ph.w50{ width:50%; }
.news-skel .gap{ height:10px; }
@keyframes skel{ to{ background-position:-200% 0; } }

/* Respons */
@media (max-width: 768px){
  .news-detail-inner{ grid-template-columns:1fr; gap:20px; padding:20px; padding-right:20px; }
  .news-detail-image{ order:1; }
  .news-detail-content{ order:2; }
  .news-detail-close{ inset:10px 10px auto auto; }
  .news-detail-close::before{ width:44px; height:44px; }
  .news-detail-close span{ font-size:.75rem; }
  :root{ --close-size:48px; --close-gap:12px; }
  button.news-detail-close {padding: 20px 20px 0 0;}

}

/* Fokus */
.news-detail-box:focus{ outline:none; }
.news-detail-box:focus-visible{ outline:2px solid var(--e-global-color-primary); outline-offset:6px; border-radius:var(--news-radius); }