/* ======================================================================
   JAKTLAG PLUGIN — MINIMAL & STABIL STYLE.CSS
   Version B — Clean Build (ingen påverkan på Kadence feed)
====================================================================== */


/* ======================================================================
   GLOBALT
====================================================================== */

body .jaktlag-hidden {
    display: none !important;
}


/* ======================================================================
   FORMULÄR
====================================================================== */

.jaktlag-form {
    max-width: 520px;
    margin: 30px auto;
    padding: 22px 26px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.10);
}

.jaktlag-form p {
    margin-bottom: 14px;
}

.jaktlag-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 15px;
}

.jaktlag-form input,
.jaktlag-form textarea,
.jaktlag-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d2d7d2;
    border-radius: 8px;
    background: #f6f8f6;
    font-size: 15px;
    transition: border-color 0.2s, background 0.2s;
}

.jaktlag-form input:focus,
.jaktlag-form textarea:focus,
.jaktlag-form select:focus {
    outline: none;
    border-color: #2e6b2e;
    background: #fff;
}

.jaktlag-form textarea {
    resize: vertical;
}



/* ======================================================================
   KNAPPAR
====================================================================== */

.jaktlag-btn {
    display: inline-block;
    padding: 10px 18px;
    background: #2e6b2e;
    color: #fff !important;
    border-radius: 8px;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease;
}

.jaktlag-btn:hover {
    background: #255825;
}

.jaktlag-btn-secondary {
    display: inline-block;
    padding: 10px 18px;
    background: #666;
    color: #fff !important;
    border-radius: 8px;
}

.jaktlag-btn-secondary:hover {
    background: #555;
}



/* ======================================================================
   SINGLE — FEATURED IMAGE
====================================================================== */

.jaktlag-featured-desktop {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 14px;
    margin-bottom: 25px;
}

.jaktlag-featured-desktop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobil kant-till-kant */
@media (max-width: 700px) {
    .jaktlag-featured-desktop {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        border-radius: 0 !important;
    }
}



/* ======================================================================
   KOMMENTARER
====================================================================== */

.jaktlag-comment-item {
    padding: 15px 0;
    border-bottom: 1px solid #e5e5e5;
}

.jaktlag-comment-item .comment-edit-text {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #fafafa;
}



/* ======================================================================
   METALÄNKAR
====================================================================== */

.jaktlag-meta-link {
    color: #1e73be !important;
    text-decoration: underline;
}



/* ======================================================================
   POPUP (create/join/published)
====================================================================== */

#jaktlag-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

/* Ta bort Kadence stora blå pil längst ned i jaktlag-feed */
.entry.loop-entry .kadence-readmore-svg,
.entry.loop-entry .entry-readmore {
    display: none !important;
}

/* Ta bort Kadence dubbel-prick separator i jaktlag-feed */
#archive-container .entry-meta .entry-meta-divider-dot > span::before {
    content: "" !important;
}

/* Dödar Kadence gigantiska blå pil i loop-entry */
.entry-list-item .entry.read-more, 
.entry-list-item .entry .read-more, 
.entry-list-item .loop-entry .read-more,
.entry-list-item .loop-entry svg {
    display: none !important;
}

/* Jaktlag — Läs mer-länk i feed */
.jaktlag-read-more {
    font-size: 14px;
    font-weight: 700;
    color: #111 !important;
    text-decoration: none !important;
    display: inline-block;
    margin-top: 10px;
}

.jaktlag-read-more:hover {
    opacity: 0.75;
    text-decoration: none !important;
}

/* Jaktlag feed – Läs mer (Kadence-matchad) */
.jaktlag-read-more {
    display: inline-block;
    font-size: 14px;            /* Större text – matchar Kadence */
    font-weight: 700;
    text-transform: uppercase;  /* LÄS MER */
    color: #111 !important;     /* Samma mörkgrå/svarta som Kadence */
    text-decoration: none !important;
    margin-top: 8px;
}

.jaktlag-read-more:hover {
    text-decoration: underline;
}

/* Fix: Mellanslag efter "Av" i jaktlag-feed */
.entry-meta .posted-by::after {
    content: " ";
}

.jaktlag-dashboard-container {
    max-width: 900px;
    margin: 30px auto;
    padding: 10px;
}

.jaktlag-dashboard-title {
    font-size: 28px;
    margin-bottom: 5px;
}

.jaktlag-dashboard-subtitle {
    font-size: 20px;
    color: #555;
    margin-bottom: 20px;
}

.team-image-wrapper {
    width: 100%;
    aspect-ratio: 3/2;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 25px;
}

.team-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin-bottom: 35px;
}

.dashboard-item {
    background: #fff;
    padding: 20px 10px;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    font-size: 16px;
    text-decoration: none;
    color: #333;
}

.dashboard-item span {
    display: block;
    margin-top: 6px;
}

.latest-post-card {
    display: flex;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 35px;
}

.latest-thumb {
    width: 40%;
    aspect-ratio: 3/2;
    overflow: hidden;
}

.latest-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latest-body {
    padding: 20px;
    width: 60%;
}

.member-list {
    margin-top: 15px;
}

.member-row {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

.tag-vl {
    padding: 2px 8px;
    background: #eef3ff;
    border-radius: 6px;
    font-size: 12px;
    color: #345;
}

.section-title {
    margin-top: 50px;
    margin-bottom: 10px;
}

/* ============================================================
   JAKTLAG – TEAM DASHBOARD (Kadence matchning)
   ============================================================ */

/* Container */
.jaktlag-dashboard-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: inherit;
}

/* Titles */
.jaktlag-dashboard-title {
    font-size: 32px;
    font-weight: 700;
    color: #222;
    text-align: center;
    margin-bottom: 5px;
}

.jaktlag-dashboard-subtitle {
    font-size: 20px;
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

/* Team image */
.team-image-wrapper {
    width: 100%;
    margin-bottom: 30px;
}

.team-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}


/* ============================================================
   DASHBOARD GRID (navigation)
   ============================================================ */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px;
    margin-bottom: 40px;
}

.dashboard-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 18px 10px;
    text-align: center;
    font-size: 16px;
    text-decoration: none;
    color: #333;
    border: 1px solid #e5e5e5;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-item:hover {
    background: #f7f7f7;
    border-color: #ccc;
    transform: translateY(-2px);
}


/* ============================================================
   Latest post card
   ============================================================ */
.latest-post-card {
    display: flex;
    gap: 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 40px;
}

.latest-thumb img {
    width: 180px;
    aspect-ratio: 3/2;
    object-fit: cover;
    border-radius: 10px;
}

.latest-body h3 {
    font-size: 20px;
    margin: 0 0 8px;
}

.latest-body p {
    font-size: 15px;
    color: #555;
    margin-bottom: 12px;
}

.jaktlag-btn.small {
    padding: 6px 12px;
    font-size: 14px;
}


/* Mobil */
@media (max-width: 600px) {
    .latest-post-card {
        flex-direction: column;
        padding: 15px;
    }

    .latest-thumb img {
        width: 100%;
    }
}


/* ============================================================
   Member list
   ============================================================ */
.section-title {
    font-size: 22px;
    margin: 40px 0 20px;
    font-weight: 600;
}

.member-list {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    padding: 10px 0;
    margin-bottom: 40px;
}

.member-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 18px;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.member-row:last-child {
    border-bottom: none;
}

.tag-vl {
    background: #0073aa;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13px;
    color: #fff;
}


/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-box {
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
}

.admin-box h4 {
    margin-top: 0;
    font-size: 18px;
    margin-bottom: 15px;
}

/* Buttons inside admin panel */
.admin-box .jaktlag-btn.small {
    font-size: 14px;
    padding: 6px 10px;
}


/* Upload message */
#team-upload-msg {
    font-size: 15px;
    margin-top: 8px;
}


/* ============================================================
   Buttons general (matchar Kadence)
   ============================================================ */
.jaktlag-btn {
    background: #006a4e;
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: 0.15s;
    display: inline-block;
}

.jaktlag-btn:hover {
    background: #00543e;
}


/* Small button */
.jaktlag-btn.small {
    padding: 6px 12px;
    font-size: 14px;
}

/* =========================================================
   Jaktlag – Kommentarer: action-länkar istället för knappar
   ========================================================= */

.jaktlag-comment-actions {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  margin-left: 10px;
}

/* Överstyr temats knapp-styling */
.jaktlag-comment-actions button.jaktlag-comment-edit,
.jaktlag-comment-actions button.jaktlag-comment-delete {
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;

  font: inherit;
  font-size: 14px;
  line-height: 1.2;

  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Lite mjukare hover */
.jaktlag-comment-actions button.jaktlag-comment-edit:hover,
.jaktlag-comment-actions button.jaktlag-comment-delete:hover {
  opacity: 0.75;
}

/* Fokus för tangentbord */
.jaktlag-comment-actions button.jaktlag-comment-edit:focus,
.jaktlag-comment-actions button.jaktlag-comment-delete:focus {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   Jaktlag – Kommentarer: mobilordning (namn, datum, kommentar, actions)
   ========================================================= */

@media (max-width: 768px) {

  /* Gör så att author/date/actions blir syskon med content */
  .jaktlag-comment-meta {
    display: contents;
  }

  /* Flexlayout på hela kommentaren */
  .jaktlag-comment-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* Ordning */
  .jaktlag-comment-author {
    order: 1;
    font-weight: 700;
  }

  .jaktlag-comment-date {
    order: 2;
    font-size: 13px;
    opacity: 0.7;
  }

  .jaktlag-comment-content {
    order: 3;
    margin-top: 6px;
  }

  .jaktlag-comment-actions {
    order: 4;
    margin-top: 8px;
    margin-left: 0;
    gap: 12px;
    align-self: flex-start; /* säkerställer att den inte hamnar "snett till höger" */
  }
}

/* ======================================================================
   SLUT — Minimal stabil plugin-CSS
====================================================================== */



/* ============================================================
   Single (återför gammalt designtänk: hero 3:2 + card + meta-box)
   ============================================================ */

.jaktlag-single-wrapper{
  max-width:900px;
  margin:40px auto;
  padding:0 18px;
}

.jaktlag-single-back{
  margin-bottom:20px;
}

.jaktlag-back-link{
  font-size:15px;
  color:#444;
  text-decoration:none;
}

.jaktlag-featured-desktop{
  width:100%;
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:14px;
  margin-bottom:25px;
  display:block;
}

.jaktlag-featured-desktop img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width:700px){
  .jaktlag-featured-desktop{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    border-radius:0 !important;
  }
}

.jaktlag-post-card{
  background:#fff;
  padding:40px;
  border-radius:10px;
  box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

@media (max-width:700px){
  .jaktlag-post-card{
    padding:0 18px 24px;
    overflow:hidden;
  }

  .jl-single-media-card{
    margin:0 -18px 18px;
  }

  .jl-featured-inside-card{
    margin-bottom:12px;
  }

  .jaktlag-gallery-thumbs.jl-gallery-under-featured{
    margin:0 18px 6px;
  }

  .jaktlag-post-card > .entry-title,
  .jaktlag-post-card > .jaktlag-shared-note,
  .jaktlag-post-card > .jaktlag-help-edit-box,
  .jaktlag-post-card > .entry-content.jaktlag-entry-content,
  .jaktlag-post-card > .jaktlag-meta-box,
  .jaktlag-post-card > .jl-actions-card,
  .jaktlag-post-card > .jaktlag-comment-toggle,
  .jaktlag-post-card > .jaktlag-comment-wrapper{
    position:relative;
    z-index:1;
  }
}

.jaktlag-admin-actions{
  margin-bottom:15px;
  text-align:right;
  font-size:14px;
  display:flex;
  gap:14px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.jaktlag-admin-link{
  color:#444;
  text-decoration:none;
}

.jaktlag-delete-form{
  display:inline;
  margin:0;
}

.jaktlag-admin-button{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  cursor:pointer;
}

.jaktlag-meta-box{
  background:#f7f7f7;
  padding:18px 20px;
  border-radius:8px;
  margin-bottom:25px;
  line-height:1.8;
  font-size:15px;
  color:#333;
}

.jaktlag-meta-row{
  margin:0;
}

.jaktlag-entry-content{
  margin-bottom:30px;
  font-size:16px;
}

.jaktlag-gallery-thumbs{
  margin-bottom:30px;
}

.jaktlag-gallery-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.jaktlag-thumb-32{
  width:160px;
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:8px;
}

.jaktlag-thumb-32 img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width:520px){
  .jaktlag-thumb-32{
    width:calc(50% - 6px);
  }
}

.jaktlag-comment-toggle{
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#f0f0f0;
  padding:14px 18px;
  border-radius:6px;
  margin-top:35px;
}

.jaktlag-comment-icon{
  font-size:20px;
  transition:0.2s;
}

.jaktlag-comment-wrapper{
  margin-top:20px;
}

.jaktlag-share-modal{
  margin-top:12px;
  padding:14px;
  border:1px solid #e3e3e3;
  border-radius:10px;
  background:#fafafa;
  max-width:520px;
}

.jl-teamcat-details{
  margin-top:10px;
  border:1px solid #e3e3e3;
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
}

/* ================================
   Teamkategori – summary / UI
   ================================ */

.jl-teamcat-summary{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  user-select:none;
  list-style:none;
  padding:8px 10px;
  border-radius:8px;
}

/* Viktigt: även barn ska ge hand-cursor */
.jl-teamcat-summary *{
  cursor:pointer;
}

/* Hover = tydligt klickbar */
.jl-teamcat-summary:hover{
  background:rgba(0,0,0,0.04);
}

/* Titeltext – länk-känsla */
.jl-teamcat-summary-title{
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Förstärk underline vid hover */
.jl-teamcat-summary:hover .jl-teamcat-summary-title{
  text-decoration-thickness:2px;
}

/* Badge (t.ex. Övrigt) */
.jl-teamcat-badge{
  font-size:12px;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
  line-height:1.6;
  white-space:nowrap;
  border:1px solid rgba(0,0,0,0.15);
}

.jl-teamcat-badge--warn{
  /* medvetet neutral – färg kan sättas senare */
}

/* Chevron */
.jl-teamcat-chevron{
  width:8px;
  height:8px;
  border-right:2px solid rgba(0,0,0,0.45);
  border-bottom:2px solid rgba(0,0,0,0.45);
  transform:rotate(45deg);
  margin-left:auto;
}

/* Rotera chevron när details är öppet */
.jl-teamcat-details[open] .jl-teamcat-chevron{
  transform:rotate(-135deg);
}

/* ================================
   Details-reset + tillgänglighet
   ================================ */

/* Ta bort browser-default styling på summary */
.jl-teamcat-details > summary.jl-teamcat-summary{
  -webkit-appearance:none;
  appearance:none;
  list-style:none;
}

/* Dölj default-triangel (Chrome/Safari) */
.jl-teamcat-details > summary.jl-teamcat-summary::-webkit-details-marker{
  display:none;
}

/* Fokusmarkering (tangentbord) */
.jl-teamcat-details > summary.jl-teamcat-summary:focus{
  outline:2px solid rgba(0,0,0,0.15);
  outline-offset:2px;
}

/* ================================
   Innehåll i utfälld vy
   ================================ */

.jl-teamcat-body{
  margin-top:10px;
}

.jl-teamcat-note{
  font-size:13px;
  color:#555;
  line-height:1.35;
  margin-bottom:8px;
}

.jl-teamcat-note--warn{
  font-weight:600;
}

.jl-teamcat-form{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.jl-teamcat-select{
  min-width:220px;
}

/* Teamkategori i meta-box: gör den diskret som en rad (inte en box) */
.jl-teamcat-meta-row .jl-teamcat-details{
  margin:0;
  border:0;
  padding:0;
  background:transparent;
}

.jl-teamcat-meta-row .jl-teamcat-summary{
  padding:0;
  border-radius:0;
  background:transparent;
}

.jl-teamcat-meta-row .jl-teamcat-summary:hover{
  background:transparent;
}

.jl-teamcat-meta-row .jl-teamcat-body{
  margin-top:8px;
}

.jl-teamcat-meta-row .jl-teamcat-summary-title{
  text-decoration:none;
}

.jl-teamcat-meta-row .jl-teamcat-summary:hover .jl-teamcat-summary-title{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:2px;
}

/* Teamkategori: flytta chevron (pilen) till vänster om texten i meta-raden */
.jl-teamcat-meta-row .jl-teamcat-summary{
  justify-content:flex-start;   /* sluta trycka ut pilen till höger */
  gap:8px;
}

/* Pilen: först i raden, inte längst till höger */
.jl-teamcat-meta-row .jl-teamcat-chevron{
  margin-left:0;                /* tar bort "push to right" */
  order:0;
}

/* Texten efter pilen */
.jl-teamcat-meta-row .jl-teamcat-summary-title{
  order:1;
}

/* Badge sist */
.jl-teamcat-meta-row .jl-teamcat-badge{
  order:2;
  margin-left:8px;
}

/* ================================
   Galleri-grid (privat + team)
   ================================ */

/* Endast i gallerivyn (har klassen jl-gallery-grid) */
.jl-gallery-grid{
  display:grid !important;
  gap:10px !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)); /* mobil: 2 i bredd */
}

/* Tablet */
@media (min-width: 600px){
  .jl-gallery-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

/* Desktop */
@media (min-width: 900px){
  .jl-gallery-grid{
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); /* fler per rad + större thumbs */
    gap:12px !important;
  }
}

/* Thumbs ska fylla sin cell (inte fast bredd) */
.jl-gallery-grid .jaktlag-thumb-32{
  width:100% !important;
  border-radius:10px;
}

/* Bilden ska alltid fylla thumb-rutan snyggt */
.jl-gallery-grid .jaktlag-thumb-32 img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* FEED — "VISA FLER" (centrera under grid) */
.jl-load-more-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40px;
  grid-column: 1 / -1;      /* <-- nyckeln: spänn över hela gridens bredd */
}

.jl-load-more-wrap #jaktlag-load-more{
  margin: 0 !important;
}

/* ======================================================================
   HEM + INSPIRATION (publikt, statiskt) — jl-* scoped
====================================================================== */

:root{
  --jl-max: 1080px;
  --jl-pad: 18px;

  --jl-radius: 18px;
  --jl-radius-sm: 14px;

  --jl-shadow: 0 10px 30px rgba(0,0,0,0.18);
  --jl-shadow-soft: 0 8px 22px rgba(0,0,0,0.12);

  --jl-text: #111;
  --jl-muted: #4b4b4b;
  --jl-bg: #fff;
  --jl-surface: #f7f7f7;

  --jl-focus: 2px solid rgba(255,255,255,0.9);
}

.jl-container{
  max-width: var(--jl-max);
  margin: 0 auto;
  padding: 0 var(--jl-pad);
}

.jl-muted{ color: var(--jl-muted); }

.jl-h2{
  margin: 0 0 8px 0;
  font-size: 22px;
  line-height: 1.2;
  color: var(--jl-text);
}
.jl-h2--sm{ font-size: 18px; }

.jl-sectionhead{
  margin-bottom: 16px;
}

.jl-grid{
  display: grid;
  gap: 14px;
}
.jl-grid--3{
  grid-template-columns: 1fr;
}
@media (min-width: 860px){
  .jl-grid--3{ grid-template-columns: repeat(3, 1fr); }
}

/* Generic cards */
.jl-card{
  position: relative;
  display: block;
  background: var(--jl-bg);
  border-radius: var(--jl-radius);
  box-shadow: var(--jl-shadow-soft);
  color: var(--jl-text);
  text-decoration: none;
  overflow: hidden;
}

.jl-card:focus-visible{
  outline: var(--jl-focus);
  outline-offset: 3px;
}

.jl-card__eyebrow{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(0,0,0,0.55);
  margin-bottom: 8px;
}

.jl-card__title{
  margin: 0 0 6px 0;
  font-size: 18px;
  line-height: 1.25;
}
.jl-card__title--sm{ font-size: 16px; }

.jl-card__text{
  margin: 0;
  font-size: 14px;
  color: var(--jl-muted);
}

.jl-card__arrow{
  position:absolute;
  right: 14px;
  top: 14px;
  opacity: 0.55;
}

.jl-private-cta-card .jl-private-cta-media{
  display:flex;
  align-items:center;
  justify-content:center;
}

.jl-private-cta-hero{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.jl-private-cta-iconwrap{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.03);
}

.jl-private-cta-icon{
  max-width: 120px;
  width: 40%;
  height:auto;
  display:block;
}

.jl-private-cta-bullets{
  margin: 10px 0 8px;
  padding-left: 18px;
}

.jl-private-cta-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

.jl-private-cta-form{
  margin: 0;
}

.jl-private-cta-hint{
  font-size: 13px;
  opacity: .7;
}

/* HERO */
.jl-hero{
  position: relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
}

.jl-hero__bg{
  position:absolute;
  inset:0;
  background-image: var(--jl-hero-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.jl-hero__panel{
  display: inline-block;
  padding: 28px 32px;
  border-radius: 20px;
  background: rgba(0,0,0,0.35);
}

.jl-hero__inner{
  position: relative;
  z-index: 2;
  padding-top: 84px;
  padding-bottom: 72px;
  color: #fff;
}

.jl-hero__header{
  max-width: 720px;
}

.jl-hero__title{
  margin: 0 0 10px 0;
  font-size: 42px;
  line-height: 1.05;
}

.jl-hero__subtitle{
  margin: 0 0 10px 0;
  font-size: 18px;
  opacity: 0.95;
}

.jl-hero__tagline{
  margin: 0 0 22px 0;
  font-size: 14px;
  opacity: 0.92;
}

@media (min-width: 860px){
  .jl-hero__title{ font-size: 56px; }
}

/* Actions */
.jl-actions{
  margin-top: 22px;
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 860px){
  .jl-actions{ grid-template-columns: repeat(3, 1fr); }
}

.jl-card--action{
  padding: 16px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  box-shadow: var(--jl-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}

.jl-card--action:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
}

.jl-card--action .jl-card__arrow{
  color: rgba(0,0,0,0.65);
}

/* CTA button */
.jl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-decoration:none;
  border-radius: 999px;
  padding: 14px 18px;
  font-weight: 700;
}

.jl-btn--primary{
  background: rgba(255,255,255,0.96);
  color: #111;
  box-shadow: var(--jl-shadow);
}

.jl-btn--primary:focus-visible{
  outline: var(--jl-focus);
  outline-offset: 3px;
}

.jl-cta{
  margin-top: 20px;
}
.jl-cta__secondary{
  margin-top: 14px;
}
.jl-cta--center{
  margin-top: 22px;
  text-align: center;
}

.jl-link{
  color: rgba(255,255,255,0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jl-link--dark{
  color: #111;
}

/* Inspiration section (home) */
.jl-inspo{
  background: #fff;
  padding: 46px 0;
}

.jl-card--profile{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px;
  background: var(--jl-surface);
  box-shadow: none;
  border: 1px solid rgba(0,0,0,0.06);
}

.jl-card--profile .jl-card__media img{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  display:block;
}

.jl-card--storylink{
  transition: transform .16s ease, box-shadow .16s ease;
}
.jl-card--storylink:hover{
  transform: translateY(-2px);
}

/* Inspiration pages */
.jl-inspiration{
  background: #fff;
  padding: 28px 0 56px 0;
}

.jl-panel{
  background: #fff;
  border-radius: var(--jl-radius);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  margin-bottom: 18px;
}

.jl-inspiration__header{
  display:flex;
  align-items:center;
  gap: 14px;
}

.jl-inspiration__avatar img{
  width: 84px;
  height: 84px;
  border-radius: 18px;
  object-fit: cover;
  display:block;
  background: #fff;
}

.jl-card--story{
  background: var(--jl-surface);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: none;
}

.jl-card__media--story{
  width: 100%;
  aspect-ratio: 16/9;
  overflow:hidden;
}
.jl-card__media--story img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.jl-card__body{
  padding: 12px 14px 14px 14px;
}

.jl-actions--2{
  grid-template-columns: 1fr;
}
@media (min-width: 860px){
  .jl-actions--2{ grid-template-columns: repeat(2, 1fr); }
}

.jl-card--icon{
  position: relative;
  padding-left: 64px;
}
.jl-card__icon{
  position:absolute;
  left: 16px;
  top: 16px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(0,0,0,0.08);
}

/* =========================================================
   HEM (Hero polish) – enligt nya krav
   ========================================================= */

/* 4) Ljusa upp bakgrundsbilderna */
.jl-hero__bg{
  filter: brightness(1.35) contrast(1.05) saturate(1.05);
}

/* Minska "mörkhet" i overlay men behåll läsbarhet */
.jl-hero__overlay{
  background:
    radial-gradient(1200px 700px at 20% 30%, rgba(0,0,0,0.10), rgba(0,0,0,0.34)),
    linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.32));
}

/* 7) Försök eliminera scroll: tajtare paddings + svh (mobil) */
.jl-hero{
  min-height: 100svh; /* bättre än 100vh på mobil */
  align-items: center;
}

.jl-hero__inner{
  padding-top: 92px;   /* plats för sticky header */
  padding-bottom: 22px;
}

/* 9) Tvinga vita rubriker i hero (utloggad + inloggad) */
.jl-hero__title,
.jl-hero__subtitle,
.jl-hero__tagline{
  color: #fff;
}

/* 3) Panelen bakom texten: rökig/transparent (INGEN blur) */
.jl-hero__panel{
  background: rgba(0,0,0,0.38);
  max-width: 820px;
}

/* 2) Ny “stor CTA-rubrik + underrubrik + pil” */
.jl-hero__primary{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;

  text-decoration:none;
  color:#fff;
  padding: 18px 18px;
  border-radius: 18px;

  background: rgba(0,0,0,0.26);
  border: 1px solid rgba(255,255,255,0.14);
}

.jl-hero__primary:focus-visible{
  outline: var(--jl-focus);
  outline-offset: 3px;
}

.jl-hero__primary-title{
  font-size: 34px;
  line-height: 1.05;
  font-weight: 800;
}

.jl-hero__primary-sub{
  margin-top: 6px;
  font-size: 16px;
  opacity: 0.95;
}

.jl-hero__primary-arrow{
  font-size: 26px;
  line-height: 1;
  opacity: 0.95;
}

/* Inloggad: två stora CTA */
.jl-hero__biglinks{
  margin-top: 14px;
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 860px){
  .jl-hero__biglinks{
    grid-template-columns: 1fr 1fr;
  }
}

/* Småjustering: lite mindre title på små skärmar */
@media (max-width: 520px){
  .jl-hero__primary-title{ font-size: 28px; }
  .jl-hero__primary-sub{ font-size: 15px; }
}

/* 6) Inspirationskort i hero (tillfällig placering, design tar vi senare) */
.jl-hero__profiles{
  margin-top: 14px;
  display:grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

@media (min-width: 860px){
  .jl-hero__profiles{
    grid-template-columns: repeat(3, 1fr);
  }
}

.jl-hero__profiles-title{
  margin: 16px 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  opacity: 0.9;
}

/* Se till att hero-sektionen är referens för absolut positionerade element */
.jl-hero{
  position: relative;
}

/* Rubrik ovanför profilboxarna */
.jl-hero__profiles-title{
  color: #fff;
  margin: 20px 0 12px 0; /* grundluft */
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
  opacity: 0.95;
}

/* Extra luft just när rubriken kommer direkt efter CTA-blocket */
.jl-hero__cta + .jl-hero__profiles-title{
  margin-top: 28px; /* öka om du vill ha mer */
}

.jl-home__copyright{
  position: absolute;
  left: 50%;
  bottom: 14px;

  transform: translateX(-50%);
  width: 100%;
  padding: 0 16px;

  text-align: center;
  font-size: 12px;
  color: #fff;
  opacity: 0.85;

  z-index: 5;
  pointer-events: none;
}

/* Gör hero-profiler lite kompaktare så vi slipper scroll */
.jl-card--profile-hero{
  padding: 12px;
  background: rgba(255,255,255,0.92);
  border: 0;
}

.jl-card--profile-hero .jl-card__arrow{
  top: 12px;
  right: 12px;
}

/* =========================================================
   5) Kadence header: vit text + rökig bakgrund + sticky utan vit “switch”
   OBS: Detta scoping bygger på att det är startsidan (body.home).
   ========================================================= */

body.home #masthead,
body.home .site-header{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.34) !important;
  /* blur borttagen */
}

/* Tvinga vit text i menyer/branding */
body.home #masthead a,
body.home .site-header a,
body.home .main-navigation a,
body.home .nav-menu a{
  color: #fff !important;
}

/* Kadence sticky-state (hindrar att den blir vit när man scrollar) */
body.home #masthead.kadence-sticky-header,
body.home .site-header.kadence-sticky-header,
body.home .kadence-sticky-header{
  background: rgba(0,0,0,0.34) !important;
}

/* =========================================================
   HEM – MOBIL finjusteringar (utloggad)
   ========================================================= */

/* 1) Header ska vara transparent direkt (inte grå innan scroll) */
body.home #masthead,
body.home .site-header,
body.home #masthead.kadence-sticky-header,
body.home .site-header.kadence-sticky-header,
body.home .kadence-sticky-header{
  background: transparent !important;
  box-shadow: none !important;
  /* blur borttagen */
}

/* behåll vit text i meny/ikoner */
body.home #masthead a,
body.home .site-header a,
body.home .main-navigation a,
body.home .nav-menu a{
  color: #fff !important;
}

/* 2) Flytta upp hero-innehållet (mindre luft ovanför) */
.jl-hero{
  align-items: flex-start; /* istället för vertikal center */
}
.jl-hero__inner{
  padding-top: 64px;   /* var 92px – drar upp panelen */
  padding-bottom: 14px;
}

/* 6) Gör både bakre panel och främre CTA (lite mörkare än innan, fortfarande transparent) */
.jl-hero__panel{
  background: rgba(0,0,0,0.30); /* var 0.26 - nu lite mörkare */
}
.jl-hero__primary{
  background: rgba(0,0,0,0.28); /* var 0.16 - nu lite mörkare */
  border: 1px solid rgba(255,255,255,0.12);
}

/* 4) Centrera rubrik/underrubrik och mildra radbrytning */
.jl-hero__header{
  text-align: center;
}
.jl-hero__subtitle{
  font-size: 15px;      /* liiite mindre */
  line-height: 1.25;
  max-width: 34ch;      /* hjälper att hålla snygg radbrytning på mobil */
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

/* CTA-text lite mer centrerad visuellt */
.jl-hero__primary-text{
  text-align: left; /* låt CTA vara vänster inom knappen för läsbarhet */
}

/* 3) Copyright längst ner i hero-panel – så vi slipper scroll */
.jl-hero__copyright{
  margin-top: 12px;
  font-size: 12px;
  opacity: 0.9;
}

/* =========================================================
   HEM – Mobil: header alltid TRANSPARENT + ta bort BLUR
   ========================================================= */

/* 1) Kadence header: döda vit bakgrund på alla inre wrappers */
body.home #masthead,
body.home .site-header,
body.home .site-header-wrap,
body.home .site-header-inner,
body.home .site-header-inner-wrap,
body.home .site-header-row,
body.home .site-header-row-container,
body.home .site-header-row-container-inner,
body.home .site-header-section,
body.home .header-navigation,
body.home .header-widget-area,
body.home .site-branding,
body.home .main-navigation,
body.home .mobile-navigation,
body.home .kadence-sticky-header {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Säkerställ att headern faktiskt ligger ovanpå hero-bilden */
body.home #masthead,
body.home .site-header{
  position: fixed !important; /* sticky kan ibland trigga “vit wrapper” i Kadence */
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
}

/* Meny/ikon + sitetitel vit */
body.home #masthead a,
body.home .site-header a,
body.home .menu-toggle,
body.home .menu-toggle svg{
  color: #fff !important;
  fill: #fff !important;
}

/* Se till att hero inte hamnar “under” headern visuellt (vi har fixed header nu) */
body.home .jl-hero__inner{
  padding-top: 120px; /* justera vid behov (typ 64–84) */
}

/* =========================================================
   STARTSIDAN – FACIT
   Header + Hero (mobil & desktop)
   - Vit text
   - Tonad bakgrund
   - Egen vit hamburgare (Kadence-ikon ignoreras)
   Ändra startsidan endast här eller i nya block efter detta.
   ========================================================= */

/* 1) Header: vit text + tonad bakgrund (endast startsidan) */
body.home #masthead,
body.home .site-header{
  background: rgba(0,0,0,0.26) !important;
}

/* Vit sitetitel och länkar */
body.home .site-title,
body.home .site-title a,
body.home #masthead a,
body.home .site-header a,
body.home .main-navigation a{
  color: #fff !important;
}

/* 2) Säkerställ att hero-overlay alltid täcker hela hero */
.jl-hero__overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* =========================================================
   STARTSIDAN – MOBILMENY
   Egen vit hamburgare (Kadence-ikon ignoreras)
   ========================================================= */

/* Targeta alla toggle-knappar i headern */
body.home #masthead button[class*="toggle"],
body.home #masthead .menu-toggle,
body.home #masthead .mobile-menu-toggle{
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Dölj Kadence original-ikon (svg/img/font) */
body.home #masthead button[class*="toggle"] svg,
body.home #masthead button[class*="toggle"] img,
body.home #masthead button[class*="toggle"] .kadence-svg-icon,
body.home #masthead button[class*="toggle"] [class*="icon"]{
  opacity: 0 !important;
}

/* Rita egen vit hamburgare (3 streck) */
body.home #masthead button[class*="toggle"]::before{
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;

  box-shadow:
    0 7px 0 #fff,
    0 14px 0 #fff;
}

/* Ingen blå bakgrund / ring vid tryck */
body.home #masthead button[class*="toggle"]:hover,
body.home #masthead button[class*="toggle"]:focus,
body.home #masthead button[class*="toggle"]:active,
body.home #masthead button[class*="toggle"]:focus-visible{
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* =========================================================
   HERO-profiler: transparenta kort med vit text
   ========================================================= */

.jl-card--profile-hero{
  background: rgba(0,0,0,0.28);              /* transparent mörk platta */
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: none;
  color: #fff;
}

/* Titel + text i kortet */
.jl-card--profile-hero .jl-card__title,
.jl-card--profile-hero .jl-card__text{
  color: #fff;
}

.jl-card--profile-hero .jl-card__text{
  opacity: 0.92;
}

/* Pilar/indikatorer */
.jl-card--profile-hero .jl-card__arrow{
  color: rgba(255,255,255,0.92);
  opacity: 0.9;
}

/* =========================================================
   Profilbild: gör den tydlig oavsett bakgrund
   ========================================================= */

/* Om bilden är direkt i .jl-card__media img */
.jl-card--profile-hero .jl-card__media img{
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.55);   /* vit kant */
  box-shadow: 0 10px 26px rgba(0,0,0,0.30);   /* lyfter från bakgrunden */
  background: rgba(255,255,255,0.08);         /* fallback om PNG med transparens */
}

body.home main,
body.home .site-content{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* FIX: overlay måste täcka exakt hela hero */
body.home .jl-hero{
  position: relative;   /* säkerställer att absolute overlay har rätt referens */
  overflow: hidden;     /* klipper ev pixelspill */
}

body.home .jl-hero__overlay,
body.home .jl-hero__bg{
  position: absolute;
  inset: 0;
}

/* FIX: inget under hero ska skapa pyttescroll på startsidan */
body.home main,
body.home .site-content,
body.home #content{
  margin: 0 !important;
  padding: 0 !important;
}

/* Om temat lägger spacing efter sista sektionen */
body.home .jl-hero{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.home{
  margin: 0 !important;
}

/* FIX: ta bort sista vita raden (Kadence footer/wrappers kan ge extra höjd) */
body.home #colophon,
body.home footer,
body.home .site-footer,
body.home .site-footer-wrap,
body.home .site-footer-inner,
body.home .footer-wrap,
body.home .footer-bottom-area,
body.home .footer-top-area{
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ibland ligger “gapet” på själva innehållswrappern */
body.home #page,
body.home #content,
body.home .site,
body.home .site-content,
body.home main{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================================
   STARTSIDAN (MOBIL): Tillåt naturlig höjd när innehållet kräver det
   (behåll hero-känslan men kapa inte innehåll på mindre skärmar)
   ========================================================= */
@media (max-width: 768px){

  /* Låt startsidan växa naturligt i höjd */
  body.home,
  body.home #page,
  body.home #content,
  body.home .site,
  body.home .site-content,
  body.home main{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Hero får minst fylla skärmen men får bli högre vid behov.
     Byt till dynamisk viewport på mobil för att följa browserns UI-höjd
     och undvika mikroscroll/vit remsa när adressfältet expanderar/kollapsar. */
  body.home .jl-hero{
    height: auto !important;
    min-height: 100svh !important; /* fallback */
    min-height: 100dvh !important; /* verklig mobil viewport */
    margin: 0 !important;
  }

  /* Behåll borttagning av extra spacing under content */
  body.home main,
  body.home .site-content,
  body.home #content{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* =========================================================
   STARTSIDAN – DESKTOP POLISH (ej påverkan på mobil)
   ========================================================= */
@media (min-width: 860px){

  /* 1) Ljusare bakgrundsbild på desktop (mindre "mörk känsla") */
  body.home .jl-hero__bg{
    filter: brightness(1.55) contrast(1.05) saturate(1.05);
  }

  /* 2) Mjukare overlay på desktop (mindre toning) */
  body.home .jl-hero__overlay{
    background:
      radial-gradient(1200px 700px at 20% 30%, rgba(0,0,0,0.06), rgba(0,0,0,0.26)),
      linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0.26));
  }

  /* 3) Gör "action-rutan" (panelen) ljusare och lite bredare */
  body.home .jl-hero__panel{
    background: rgba(0,0,0,0.26);
    max-width: 980px;
    width: min(980px, 92vw);
  }

  /* 4) Gör CTA-kort/boxar ljusare */
  body.home .jl-hero__primary{
    background: rgba(0,0,0,0.18);
    border-color: rgba(255,255,255,0.16);
  }

  /* 5) Centrera action-rutan mer i höjdled (mindre "för högt") */
  body.home .jl-hero{
    align-items: center;
  }

  /* Om ni vill ha ännu mer centrerat: ge hero-inner lite mindre top/bottom */
  body.home .jl-hero__inner{
    padding-top: 96px;
    padding-bottom: 72px;
  }

  /* 6) Profilboxarna: större och luftigare på desktop */
  body.home .jl-hero__profiles{
    gap: 12px;
  }

  body.home .jl-card--profile-hero{
    padding: 16px;
  }
}

/* =========================================================
   STARTSIDAN – PILAR (gäller mobil + desktop)
   Alla pilar nere till höger + tydligare
   ========================================================= */

/* Se till att kort/CTA är positionerings-ankare */
body.home .jl-card,
body.home .jl-hero__primary{
  position: relative;
}

/* Standardpil: nere till höger */
body.home .jl-card__arrow{
  top: auto;
  bottom: 12px;
  right: 12px;
  opacity: 0.9;
  transform: none;
}

/* Om pilen är text/tecken: gör den tydligare */
body.home .jl-card__arrow{
  font-size: 24px;
  line-height: 1;
}

/* Profilkort i hero: samma placering */
body.home .jl-card--profile-hero .jl-card__arrow{
  top: auto;
  bottom: 12px;
  right: 12px;
  opacity: 0.9;
}

/* CTA-pil: nere till höger (om ni vill samma logik där) */
body.home .jl-hero__primary-arrow{
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 28px;
  opacity: 1;
}

/* Desktop: centrera action-rutan i sidled */
@media (min-width: 860px){
  body.home .jl-hero__panel{
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================================
   STARTSIDAN – DESKTOP (bara finjusteringar)
   ========================================================= */
@media (min-width: 860px){

  /* Profilkorten lite mörkare på desktop */
  body.home .jl-card--profile-hero{
    background: rgba(0,0,0,0.34);
    border-color: rgba(255,255,255,0.16);
  }

  /* Mer luft i action-rutan (panelen) på desktop */
  body.home .jl-hero__panel{
    padding: 34px 40px;
  }

  /* CENTRERA action-rutan i sidled (funkar nu eftersom den blir block) */
  body.home .jl-hero__panel{
    display: block;              /* <-- nyckeln */
    margin-left: auto;
    margin-right: auto;
  }

  /* Gör "Skapa din privata jaktdagbok" samma toning som profilrutorna */
  body.home .jl-hero__primary{
    background: rgba(0,0,0,0.34);
    border-color: rgba(255,255,255,0.16);
  }
}

@media (min-width: 860px){
  body.home .jl-hero__panel{
    position: relative;               /* krävs för left */
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important;             /* neutraliserar ev. sid-marginaler */
  }
}

/* STARTSIDAN – CTA: centrera text i "Skapa din privata jaktdagbok" */
body.home .jl-hero__primary-text{
  text-align: center;
}

/* STARTSIDAN – CTA: centrera rubrik/underrubrik i hela rutan */
body.home .jl-hero__primary{
  position: relative;
  justify-content: center;   /* istället för space-between */
}

body.home .jl-hero__primary-text{
  width: 100%;
  text-align: center;
}

/* Pilen ska inte påverka layoutens bredd */
body.home .jl-hero__primary-arrow{
  position: absolute;
  right: 12px;
  bottom: 12px;
}

/* =====================================================
   STARTSIDA – CENTRAL TONING (OVERRIDE ALLT)
   Ändra endast värdena nedan
===================================================== */

body.home{
  /* Justera dessa tre */
  --jl-panel-bg: rgba(0,0,0,0.0);   /* Huvudpanelen */
  --jl-cta-bg:   rgba(0,0,0,0.0);   /* Stora CTA-boxen */
  --jl-card-bg:  rgba(0,0,0,0.0);   /* Mindre profilboxar */
}

/* Huvudpanel */
body.home .jl-hero__panel{
  background: var(--jl-panel-bg) !important;
}

/* Stor CTA-box */
body.home .jl-hero__primary{
  background: var(--jl-cta-bg) !important;
}

/* Profilkort / mindre boxar */
body.home .jl-card--profile-hero{
  background: var(--jl-card-bg) !important;
}

/* Om du vill nollställa hero-overlay under test */
body.home .jl-hero__overlay{
  /* background: transparent !important; */
}
/* =========================================================
   JAKTLAG – FORM HERO / GLASSMORPHISM
   Premium natur / nordisk outdoor
   Komplett block för formulärsidor
========================================================= */

/* Dölj sidtitel på sidor som använder form-hero */
body:has(.jl-form-hero) .entry-header,
body:has(.jl-form-hero) .page-title,
body:has(.jl-form-hero) header.entry-header {
  display: none !important;
}

/* Ta bort extra tema-spacing */
body:has(.jl-form-hero) #content,
body:has(.jl-form-hero) .site-content,
body:has(.jl-form-hero) .content-area,
body:has(.jl-form-hero) .site-main,
body:has(.jl-form-hero) .entry-content {
  margin: 0 !important;
  padding: 0 !important;
}

/* Header/footer-princip – samma idé som startsidan */
body:has(.jl-form-hero) #masthead,
body:has(.jl-form-hero) .site-header,
body:has(.jl-form-hero) .site-header-wrap,
body:has(.jl-form-hero) .site-header-inner,
body:has(.jl-form-hero) .site-header-inner-wrap,
body:has(.jl-form-hero) .site-header-row,
body:has(.jl-form-hero) .site-header-row-container,
body:has(.jl-form-hero) .site-header-row-container-inner,
body:has(.jl-form-hero) .site-header-section,
body:has(.jl-form-hero) .header-navigation,
body:has(.jl-form-hero) .site-branding,
body:has(.jl-form-hero) .main-navigation,
body:has(.jl-form-hero) .mobile-navigation,
body:has(.jl-form-hero) .kadence-sticky-header {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body:has(.jl-form-hero) #masthead,
body:has(.jl-form-hero) .site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
}

body:has(.jl-form-hero) #masthead a,
body:has(.jl-form-hero) .site-header a,
body:has(.jl-form-hero) .main-navigation a {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}

/* Dölj footer/copyright på form-hero-sidor */
body:has(.jl-form-hero) #colophon,
body:has(.jl-form-hero) footer,
body:has(.jl-form-hero) .site-footer,
body:has(.jl-form-hero) .site-footer-wrap,
body:has(.jl-form-hero) .site-footer-inner,
body:has(.jl-form-hero) .footer-wrap,
body:has(.jl-form-hero) .footer-bottom-area,
body:has(.jl-form-hero) .footer-top-area {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.jl-form-hero) #page,
body:has(.jl-form-hero) .site,
body:has(.jl-form-hero) main {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Hero */
.jl-form-hero {
  position: relative;
  width: 100vw !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding: 120px 18px 40px !important;

  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  color: #fff;
}

.jl-form-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--jl-form-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: brightness(1.02) contrast(1.02) saturate(1.04);
  z-index: 0;
}

.jl-form-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 50% 35%, rgba(0,0,0,0.06), rgba(0,0,0,0.22)),
    linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0.28));
  z-index: 1;
}

/* Glass card */
.jl-form-glass {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  padding: 30px 34px 26px;
  border-radius: 24px;

  background: rgba(18, 24, 20, 0.18);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 24px 70px rgba(0,0,0,0.34);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.jl-form-eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .78;
}

.jl-form-title {
  margin: 0 0 8px;
  font-size: 32px;
  line-height: 1.08;
  color: #fff;
}

.jl-form-intro {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
}

.jl-form-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.72);
  text-align: center;
}

/* Formulär inne i glass-kort */
.jl-form-glass .jaktlag-form {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.jl-form-glass .jaktlag-form p {
  margin: 0 0 12px !important;
}

.jl-form-glass .jaktlag-form label {
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  font-weight: 600;
}

.jl-form-glass .jaktlag-form input,
.jl-form-glass .jaktlag-form textarea,
.jl-form-glass .jaktlag-form select {
  width: 100%;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.20);
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;
}

.jl-form-glass .jaktlag-form input::placeholder,
.jl-form-glass .jaktlag-form textarea::placeholder {
  color: rgba(255,255,255,0.55);
}

.jl-form-glass .jaktlag-form input:focus,
.jl-form-glass .jaktlag-form textarea:focus,
.jl-form-glass .jaktlag-form select:focus {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.58);
  outline: none;
}

/* Knapp */
.jl-form-glass .jaktlag-btn {
  width: 100%;
  margin-top: 8px;
  padding: 13px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: #111 !important;
  font-weight: 600 !important;
}

.jl-form-glass .jaktlag-btn:hover {
  background: #fff;
}

/* Mobil */
@media (max-width: 640px) {
  .jl-form-hero {
    padding: 92px 14px 28px !important;
    align-items: flex-start;
  }

  .jl-form-glass {
    padding: 24px 18px 22px;
    border-radius: 20px;
  }

  .jl-form-title {
    font-size: 28px;
  }

  .jl-form-intro {
    font-size: 15px;
  }
}
/* FORM HERO – ta bort Kadence fixed-header placeholder */
body:has(.jl-form-hero) .site-header-upper-inner-wrap.child-is-fixed {
  height: 0 !important;
  min-height: 0 !important;
}

/* Se till att headern fortfarande ligger ovanpå bilden */
body:has(.jl-form-hero) #masthead,
body:has(.jl-form-hero) .site-header,
body:has(.jl-form-hero) .site-main-header-wrap,
body:has(.jl-form-hero) .site-main-header-wrap.site-header-row-container,
body:has(.jl-form-hero) .site-header-row-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Flytta upp innehållet eftersom placeholdern är borta */
body:has(.jl-form-hero) .entry-content-wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* FORM HERO – ta bort sista scroll/vit rand under hero */
body:has(.jl-form-hero),
body:has(.jl-form-hero) #page,
body:has(.jl-form-hero) #content,
body:has(.jl-form-hero) .site,
body:has(.jl-form-hero) .site-content,
body:has(.jl-form-hero) main,
body:has(.jl-form-hero) .content-wrap,
body:has(.jl-form-hero) article,
body:has(.jl-form-hero) .entry,
body:has(.jl-form-hero) .entry-content-wrap {
  background: #000 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body:has(.jl-form-hero) .jl-form-hero {
  min-height: 100dvh !important;
}
/* =========================================================
   STARTSIDA – CTA-BOXAR DESKTOP + MOBIL
========================================================= */

body.home .jl-hero__primary {
  background: rgba(20, 20, 20, 0.28) !important;
  background-color: rgba(20, 20, 20, 0.28) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 18px !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Pil – desktop */
body.home .jl-hero__primary .jl-hero__primary-arrow {
  position: absolute !important;
  right: 40px !important;
  bottom: 12px !important;

  font-size: 40px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  transform: none !important;
  opacity: 1 !important;
}

/* Mobil – samma stil, bara något anpassad placering */
@media (max-width: 768px) {
  body.home .jl-hero__primary {
    padding-right: 72px !important;
  }

  body.home .jl-hero__primary .jl-hero__primary-arrow {
    right: 28px !important;
    bottom: 18px !important;
    font-size: 38px !important;
  }
}
/* STARTSIDA – mobil finjustering CTA v2 */
@media (max-width: 768px) {

  /* Mer luft mellan titelblocket och CTA-rutorna */
  body.home .jl-hero__biglinks {
    margin-top: 42px !important;
  }

  /* Håll boxarna centrerade och lagom breda */
  body.home .jl-hero__primary {
  width: 100% !important;
  max-width: 320px !important;
  margin-inline: auto !important;
  padding: 22px 54px 22px 22px !important;
  box-sizing: border-box !important;
  }

  /* Håll rubriken på en rad utan att flytta boxen */
  body.home .jl-hero__primary-title {
    font-size: 28px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.home .jl-hero__primary-sub {
    font-size: 15px !important;
  }

  body.home .jl-hero__primary-arrow {
    right: 22px !important;
    bottom: 22px !important;
    font-size: 36px !important;
  }
}
input[type="date"] {
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 1;
    cursor: pointer;
}
.jaktlag-form input[type="text"],
.jaktlag-form input[type="date"],
.jaktlag-form textarea,
.jaktlag-form select {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    color: #ffffff;
}

.jaktlag-form textarea::placeholder,
.jaktlag-form input::placeholder {
    color: rgba(255,255,255,0.65);
}
.jaktlag-form input[type="file"] {
    width: 100%;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    color: #ffffff;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
}
/* =========================================================
   FORM HERO – vit hamburgare på mobila formulärsidor
========================================================= */

body:has(.jl-form-hero) #masthead button[class*="toggle"],
body:has(.jl-form-hero) #masthead .menu-toggle,
body:has(.jl-form-hero) #masthead .mobile-menu-toggle{
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Dölj originalikon */
body:has(.jl-form-hero) #masthead button[class*="toggle"] svg,
body:has(.jl-form-hero) #masthead button[class*="toggle"] img,
body:has(.jl-form-hero) #masthead button[class*="toggle"] .kadence-svg-icon,
body:has(.jl-form-hero) #masthead button[class*="toggle"] [class*="icon"]{
  opacity: 0 !important;
}

/* Rita egen vit hamburgare */
body:has(.jl-form-hero) #masthead button[class*="toggle"]::before{
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;

  box-shadow:
    0 7px 0 #fff,
    0 14px 0 #fff;
}
body:not(:has(.jl-form-hero)) {
    background-image: url('../assets/bg-dash.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
/* Dölj standardrubrik/hero på Om jaktminnen */
body.blog section.entry-hero.post-archive-hero-section {
    display: none !important;
}
/* Mindre inzoomning på skriv/redigera jaktminne */

.jl-memory-hero::before {
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #000;
    transform: scale(1) !important;
}
/* ==========================================
   FIX – Skapa/redigera jaktminne: samma fältstil som login
   ========================================== */

.jl-memory-hero .jl-form-glass.jaktlag-form input,
.jl-memory-hero .jl-form-glass.jaktlag-form textarea,
.jl-memory-hero .jl-form-glass.jaktlag-form select {
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

.jl-memory-hero .jl-form-glass.jaktlag-form input:focus,
.jl-memory-hero .jl-form-glass.jaktlag-form textarea:focus,
.jl-memory-hero .jl-form-glass.jaktlag-form select:focus {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.58) !important;
  color: #fff !important;
  outline: none !important;
}

.jl-memory-hero .jl-form-glass.jaktlag-form input::placeholder,
.jl-memory-hero .jl-form-glass.jaktlag-form textarea::placeholder {
  color: rgba(255,255,255,0.55) !important;
}

.jl-memory-hero .jl-form-glass.jaktlag-form option {
  color: #111;
}