/* housing_page — ported verbatim from the Code Snippet on www.nynasbo.se (2026-10-26). Only the background image URL differs,
   and the block below: on live the list inherits the theme's body type and button reset, which stage's theme does not have. */
#hdmRoot.hdm-wrap{
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #949494;
}
/* Live's theme scales its root size with the viewport (responsive.css), and the list inherits it. */
@media (max-width: 1679px){ #hdmRoot.hdm-wrap{ font-size: 13px; } }
@media (max-width: 1439px){ #hdmRoot.hdm-wrap{ font-size: 11px; } }
@media (max-width: 1262px){ #hdmRoot.hdm-wrap{ font-size: 10px; letter-spacing: .5px; } }
@media (max-width: 767px){ #hdmRoot.hdm-wrap{ font-size: 9px; } }
@media (max-width: 479px){ #hdmRoot.hdm-wrap{ font-size: 8px; } }
#hdmRoot.hdm-wrap button,
#hdmRoot.hdm-wrap select,
#hdmRoot.hdm-wrap input{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
:root{
  /* ===== Nynäshamnsbostäder Brand Colors (EXACT) ===== */
  --hd-mellanbla: #0F3C53;  /* Logotyp, Rubrik & Bakgrund */
  --hd-morkbla:   #092233;  /* Bakgrund */
  --hd-ljusbla:   #D1E3E8;  /* Rubrik, Bakgrund & Detaljer */
  --hd-beige:     #EDE8DF;  /* Text (enligt profilen), + varm yta */
  --hd-orange:    #DB8035;  /* Detaljer */
  --hd-gron:      #374C32;  /* Bakgrund & Detaljer */

  --hd-shadow: rgba(0,0,0,.10);
  --hd-border: rgba(9,34,51,.18);
  --hd-focus:  rgba(15,60,83,.18);
  --hd-softline: rgba(9,34,51,.12);
  --hd-softfill: rgba(255,255,255,.20);
}

/* ===== Page wrapper ===== */
#hdmRoot.hdm-wrap,
.hdm-wrap{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;

  padding: 40px 0;

  background-image: url('/wp-content/uploads/2026/03/Nynashamnsbostader_Grafiskt_Element_Beige_3-scaled.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;

  border-radius: 0;
}
/* ===== Luft mot vänster/höger kant (utan att påverka mellanrum mellan kort) ===== */
.hdm-cards{
  padding-left:96px;
  padding-right:96px;
}
/* Safety: theme leakage inside the component */
#hdmRoot,
#hdmRoot *{
  box-sizing:border-box;
  font-weight:400;
}

#hdmRoot a,
#hdmRoot button,
#hdmRoot input,
#hdmRoot select,
#hdmRoot h1,
#hdmRoot h2,
#hdmRoot h3,
#hdmRoot p,
#hdmRoot span,
#hdmRoot div,
#hdmRoot label,
#hdmRoot strong{
  font-family:inherit;
}

/* ===== Header ===== */
.hdm-head{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:10px;
}

.hdm-head h1{
  margin:0;
  font-size:26px;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--hd-morkbla);
}

/* ===== Tabs ===== */
#hdmRoot .hdm-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 14px;
}

#hdmRoot .hdm-tab{
  appearance:none;
  -webkit-appearance:none;
  border:0 !important;
  border-radius:999px !important;
  padding:10px 16px !important;
  background:rgba(209,227,232,.92) !important;
  color:var(--hd-morkbla) !important;
  font-weight:600 !important;
  cursor:pointer;
  box-shadow:none !important;
  outline:none !important;
  text-decoration:none !important;
  transition:transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
#hdmRoot[data-mode='start'] .hdm-cards{
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:640px){
  #hdmRoot[data-mode='start'] .hdm-cards{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
#hdmRoot .hdm-tab:hover{filter:brightness(.98)}
#hdmRoot .hdm-tab:active{transform:translateY(1px)}
#hdmRoot .hdm-tab:focus-visible{box-shadow:0 0 0 4px var(--hd-focus) !important}

#hdmRoot .hdm-tab[aria-selected='true']{
  background:var(--hd-mellanbla) !important;
  color:var(--hd-beige) !important;
}

/* ===== Empty state ===== */
#hdmRoot .hdm-empty{
  background:rgba(237,232,223,.94);
  border-radius:18px;
  padding:28px;
  text-align:center;
  font-weight:500;
  box-shadow:none;
  color:var(--hd-morkbla);
  line-height:1.5;
  border:1px solid rgba(9,34,51,.10);
}

#hdmRoot .hdm-empty strong{
  font-weight:700;
}

/* ===== Toolbar ===== */
.hdm-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin:6px 0 18px;
}

.hdm-toolbar-left{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* ===== Filter button ===== */
#hdmRoot .hdm-filterbtn{
  appearance:none;
  -webkit-appearance:none;
  border:0 !important;
  border-radius:999px !important;
  padding:10px 14px !important;
  font-weight:600 !important;
  cursor:pointer;
  background:rgba(209,227,232,.92) !important;
  color:var(--hd-morkbla) !important;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:none !important;
  outline:none !important;
  text-decoration:none !important;
  transition:transform .06s ease, filter .15s ease, box-shadow .15s ease;
}

#hdmRoot .hdm-filterbtn:hover{filter:brightness(.98)}
#hdmRoot .hdm-filterbtn:active{transform:translateY(1px)}

#hdmRoot .hdm-filterbtn:focus-visible{
  box-shadow:0 0 0 4px var(--hd-focus) !important;
}

#hdmRoot .hdm-filterbtn[aria-expanded='true']{
  background:var(--hd-mellanbla) !important;
  color:var(--hd-beige) !important;
  box-shadow:none !important;
}

.hdm-icon{
  width:18px;
  height:18px;
  display:inline-block;
}

.hdm-icon svg{
  width:18px;
  height:18px;
  display:block;
  fill:currentColor;
  opacity:.95;
}

/* ===== Start CTA special style ===== */
#hdmRoot[data-mode='start'] .hdm-btn.primary{
  background:var(--hd-beige);
  color:var(--hd-morkbla);
  border:2px solid var(--hd-morkbla);
  box-shadow:0 2px 0 var(--hd-shadow);
}

/* Hover */
#hdmRoot[data-mode='start'] .hdm-btn.primary:hover{
  background:var(--hd-orange);
  color:#fff;
  border-color:var(--hd-orange);
}

/* ===== Panel ===== */
#hdmRoot .hdm-panel{
  background:rgba(209,227,232,.60);
  border-radius:18px;
  box-shadow:none;
  padding:16px;
  margin-bottom:18px;
  border:1px solid rgba(9,34,51,.10);
  display:none;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease;
}

#hdmRoot .hdm-panel.is-open{
  display:block;
  opacity:1;
  transform:translateY(0);
}

#hdmRoot .hdm-panel h3{
  margin:0 0 12px 0;
  font-size:16px;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--hd-morkbla);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

#hdmRoot .hdm-panel h3:after{
  content:'';
  flex:1;
  height:1px;
  margin-left:12px;
  background:rgba(9,34,51,.18);
}

/* ===== måste vara någonstans ===== */
#hdmRoot .hdm-tabs,
#hdmRoot .hdm-toolbar,
#hdmRoot .hdm-cards,
#hdmRoot .hdm-footer{
  padding-left:96px;
  padding-right:96px;
}

@media (max-width: 640px){
  #hdmRoot .hdm-tabs,
  #hdmRoot .hdm-toolbar,
  #hdmRoot .hdm-cards,
  #hdmRoot .hdm-footer{
    padding-left:16px;
    padding-right:16px;
  }
}
/* ===== måste vara någonstans ===== */
/* ===== Meta/sub in listings ===== */
#hdmRoot .hdm-meta,
#hdmRoot .hdm-meta *{
  color:var(--hd-mellanbla) !important;
  opacity:1 !important;
  font-weight:400 !important;
}

#hdmRoot .hdm-sub,
#hdmRoot .hdm-sub *{
  color:var(--hd-morkbla) !important;
  opacity:.95 !important;
  font-weight:400 !important;
}

#hdmRoot .hdm-meta strong,
#hdmRoot .hdm-sub strong{
  color:var(--hd-morkbla) !important;
  font-weight:700 !important;
}

/* ===== Actions row ===== */
#hdmRoot .hdm-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:12px;
}

#hdmRoot #hdmOrder{min-width:220px}
#hdmRoot #hdmDir{min-width:140px}

/* ===== Inputs & selects ===== */
#hdmRoot .hdm-actions select,
#hdmRoot .hdm-actions input,
#hdmRoot .hdm-field input{
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--hd-border);
  background:rgba(237,232,223,.96);
  color:var(--hd-morkbla);
  font-weight:400;
  outline:none;
  box-shadow:none;
  transition:box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}

#hdmRoot .hdm-actions select:hover,
#hdmRoot .hdm-actions input:hover,
#hdmRoot .hdm-field input:hover{
  filter:brightness(.99);
}

#hdmRoot .hdm-actions select:focus,
#hdmRoot .hdm-actions input:focus,
#hdmRoot .hdm-field input:focus{
  border-color:var(--hd-mellanbla);
  box-shadow:0 0 0 4px var(--hd-focus);
}

#hdmRoot .hdm-actions select:active,
#hdmRoot .hdm-actions input:active,
#hdmRoot .hdm-field input:active{
  transform:translateY(1px);
}

/* ===== Labels ===== */
#hdmRoot .hdm-field label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  opacity:.95;
  margin:8px 0 6px;
  color:var(--hd-morkbla);
}

/* ===== Grid fields ===== */
#hdmRoot .hdm-grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

@media (max-width:740px){
  #hdmRoot .hdm-grid2{grid-template-columns:1fr}
  #hdmRoot #hdmOrder,
  #hdmRoot #hdmDir{width:100%;min-width:0}
  #hdmRoot .hdm-actions{gap:8px}
}

/* ===== Buttons ===== */
#hdmRoot .hdm-btn{
  border:0;
  border-radius:14px;
  padding:11px 14px;
  font-weight:600;
  cursor:pointer;
  transition:transform .06s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow:none;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

#hdmRoot .hdm-btn:hover{filter:brightness(.98)}
#hdmRoot .hdm-btn:active{transform:translateY(1px)}

#hdmRoot .hdm-btn:focus-visible{
  box-shadow:0 0 0 4px var(--hd-focus);
}

#hdmRoot .hdm-btn.primary{
  background:var(--hd-mellanbla);
  color:var(--hd-beige);
  border:2px solid var(--hd-orange);
  font-weight:700;
}

#hdmRoot .hdm-btn.ghost{
  background:rgba(209,227,232,.92);
  color:var(--hd-morkbla);
  border:1px solid rgba(9,34,51,.12);
  box-shadow:none;
}

#hdmRoot .hdm-btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
}

@media (max-width:740px){
  #hdmRoot .hdm-btn{width:100%}
}

/* ===== Summary badge ===== */
.hdm-summary{
  display:none !important;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin:0;
  flex-wrap:wrap;
}

.hdm-badge{
  background:var(--hd-mellanbla);
  color:var(--hd-beige);
  border-radius:999px;
  padding:8px 12px;
  font-weight:700;
  font-size:13px;
  border:0;
}

.hdm-muted{
  opacity:.85;
  font-weight:500;
  color:var(--hd-morkbla);
}

/* ===== Listings: one connected beige surface ===== */
/* ===== Cards: 3 i rad med transparent kortbakgrund ===== */
.hdm-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}

@media (max-width:980px){
  .hdm-cards{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:640px){
  .hdm-cards{
    grid-template-columns:1fr;
  }
}

.hdm-card{
  background:transparent;
  border:0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:none;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  min-height:0;
  transition:transform .08s ease, filter .15s ease, box-shadow .15s ease, background .15s ease;
}

.hdm-card + .hdm-card{
  border-top:0;
}

.hdm-card:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.08);
}

#hdmRoot .hdm-thumb{
  aspect-ratio:3 / 2;
  min-height:0;
  height:auto;
  background:rgba(209,227,232,.22);
  overflow:hidden;
  position:relative;
  border-radius:18px;
}

#hdmRoot .hdm-thumb img{
  width:100% !important;
  height:100% !important;
  min-width:100%;
  min-height:100%;
  object-fit:cover !important;
  object-position:center center;
  display:block;
}

.hdm-pad{
  padding:14px 4px 2px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.hdm-title{
  margin:0 0 8px 0;
  font-size:22px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:.1px;
  color:var(--hd-morkbla);
}

.hdm-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:14px;
  line-height:1.45;
  font-weight:400;
  margin-bottom:8px;
}

.hdm-sub{
  margin-top:2px;
  font-size:14px;
  font-weight:400;
  line-height:1.55;
}

/* ===== Footer ===== */
.hdm-footer{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  margin-top:16px;
}

/* ===== Error ===== */
.hdm-error{
  background:rgba(219,128,53,.92);
  border:1px solid rgba(9,34,51,.20);
  color:var(--hd-morkbla);
  padding:10px 12px;
  border-radius:12px;
  font-weight:600;
  margin:10px 0;
}

/* ===== Mobile ===== */
@media (max-width:860px){
  #hdmRoot.hdm-wrap,
  .hdm-wrap{
    padding:18px 12px 18px;
    background-position: top center;
    background-size: cover;
  }

  .hdm-cards{
    border-radius:16px;
  }

  .hdm-card{
    grid-template-columns:1fr;
    min-height:0;
  }

  #hdmRoot .hdm-thumb{
    min-height:220px;
  }

  .hdm-pad{
    padding:18px;
  }

  .hdm-title{
    font-size:22px;
  }

  .hdm-meta,
  .hdm-sub{
    font-size:14px;
  }
}