/*
Theme Name: Appendix Properties
Description: Lett tema for aprop.no. Forsiden viser utleieobjektene fra aprop-appen (samme som appens offentlige forside), med kart, filter og forespørselsskjema. Detaljsider, booking og Min side ligger i appen.
Version: 1.0.0
Author: Appendix Holding AS
Text Domain: aprop
Requires at least: 6.5
Requires PHP: 8.1
*/

:root {
  --dark: #1e3a5f;
  --dark-hover: #2d5a8a;
  --bg: #f8fafc;
  --text: #1e293b;
  --muted: #64748b;
  --line: #e2e8f0;
  --radius: 16px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--dark); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.skip, .skjult { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: #fff; padding: 8px 12px; z-index: 100; }
.wp-block-group__inner-container { display: contents; }
.ramme { max-width: 80rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .ramme { padding: 0 24px; } }
@media (min-width: 1024px) { .ramme { padding: 0 32px; } }

/* topp */
.topp { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--line); }
.topp-inner { max-width: 80rem; margin: 0 auto; padding: 0 16px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (min-width: 1024px) { .topp-inner { padding: 0 32px; } }
.logo img { height: 36px; width: auto; display: block; }
.tekstlogo { font-weight: 700; color: var(--dark); text-decoration: none; font-size: 1.1rem; }
.logo { text-decoration: none; }
.topp-knapper { display: flex; gap: 8px; }
.knapp-ramme, .knapp-mork { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 500; padding: 7px 12px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.knapp-ramme { border: 1px solid var(--line); color: #334155; background: #fff; }
.knapp-ramme:hover { background: #f1f5f9; }
.knapp-mork { background: #1e293b; color: #fff; }
.knapp-mork:hover { background: #0f172a; }
.admin-bar .topp { top: 32px; }

/* hero */
.hero { background: linear-gradient(135deg, var(--dark), var(--dark-hover)); color: #fff; padding: 56px 0; margin-bottom: 32px; }
.hero h1 { font-size: 2.25rem; font-weight: 700; margin-bottom: 12px; }
.hero p { color: #dbeafe; font-size: 1.125rem; margin: 0; }

/* kart */
.oversiktskart { height: 380px; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; margin-bottom: 8px; z-index: 0; }
.kartboble { display: flex; flex-direction: column; gap: 2px; min-width: 180px; font-size: 13px; }
.kartboble img { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; margin-bottom: 6px; }
.kartboble .merke-liten { align-self: flex-start; color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 999px; margin-bottom: 4px; }
.kartboble a { color: var(--dark); font-weight: 600; margin-top: 4px; }

/* filtre */
.utvalg { padding-top: 24px; padding-bottom: 32px; }
.filtre { display: flex; gap: 12px; margin-bottom: 20px; }
.filtre .sok { flex: 1; }
.filtre input, .filtre select { width: 100%; font: inherit; font-size: .9rem; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); height: 38px; }
.filtre select { width: 170px; }
.treff { font-size: .875rem; color: var(--muted); margin-bottom: 16px; }
.tomt { color: var(--muted); padding: 48px 0; text-align: center; }

/* seksjoner og kort */
.liste { margin-bottom: 48px; }
.liste-hode { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.liste-hode h2 { font-size: 1.5rem; margin: 0; }
.liste-hode .antall { color: #94a3b8; font-size: .875rem; }
.strek { width: 6px; height: 36px; border-radius: 999px; }
.strek.bla { background: #3b82f6; } .strek.cyan { background: #06b6d4; } .strek.gronn { background: #10b981; }
.objekter { display: grid; gap: 24px; }
@media (min-width: 640px) { .objekter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .langtid .objekter { grid-template-columns: repeat(3, 1fr); }
  .topprad.med-parkering { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
  .topprad.med-parkering .parkering .objekter { grid-template-columns: 1fr; }
}
.objekt { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06); text-decoration: none; color: inherit; transition: box-shadow .3s; }
.objekt:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.objekt-bilde { position: relative; height: 208px; background: linear-gradient(135deg, #f1f5f9, #e2e8f0); overflow: hidden; }
.objekt-bilde img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.objekt:hover .objekt-bilde img { transform: scale(1.05); }
.merke { position: absolute; top: 12px; font-size: .75rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.merke-type { left: 12px; background: rgba(255,255,255,.9); color: #334155; }
.merke-korttid, .merke-langtid { left: 92px; }
.merke.alene { left: 12px; }
.merke-korttid { background: #dbeafe; color: #1d4ed8; }
.merke-langtid { background: #d1fae5; color: #047857; }
.merke-parkering { background: #cffafe; color: #0e7490; }
.status { position: absolute; top: 12px; right: 12px; color: #fff; font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.status.utleid { background: #ef4444; } .status.ledig { background: #10b981; }
.objekt-tekst { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.objekt h3 { font-size: 1.125rem; font-weight: 600; margin: 0; color: var(--text); }
.objekt:hover h3 { color: var(--dark); }
.sted { display: flex; align-items: center; gap: 4px; font-size: .875rem; color: var(--muted); margin: 4px 0 0; }
.fakta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: .875rem; color: #475569; margin: 12px 0 0; }
.fakta span { display: inline-flex; align-items: center; gap: 4px; }
.etikett { border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; font-size: .75rem; }
.etikett.lader { color: #d97706; border-color: #fde68a; background: #fffbeb; }
.objekt-fot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; border-top: 1px solid #f1f5f9; }
.objekt-tekst .objekt-fot { margin-top: 16px; }
.pris { font-size: 1.25rem; font-weight: 700; color: var(--text); }
.enhet { color: var(--muted); font-size: .875rem; }
.avtale, .utleid-tekst { color: var(--muted); font-weight: 500; }
.utleid-tekst { color: #94a3b8; }
.se-mer { background: var(--dark); color: #fff; font-size: .875rem; font-weight: 500; padding: 6px 12px; border-radius: 8px; }
.objekt:hover .se-mer { background: var(--dark-hover); }

/* forespørsel */
.foresporsel-ramme { padding-bottom: 64px; }
.foresporsel { background: linear-gradient(135deg, var(--dark), var(--dark-hover)); color: #fff; border-radius: var(--radius); padding: 32px; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); display: grid; gap: 32px; }
@media (min-width: 1024px) { .foresporsel { grid-template-columns: 1fr 1fr; padding: 40px; align-items: start; } }
.foresporsel h3 { font-size: 1.75rem; color: #fff; margin-bottom: 12px; }
.foresporsel .intro { color: #dbeafe; }
.foresporsel ul { list-style: none; padding: 0; margin: 0; color: #eff6ff; font-size: .875rem; }
.foresporsel li { padding-left: 24px; position: relative; margin-bottom: 12px; }
.foresporsel li::before { content: "➤"; position: absolute; left: 0; font-size: .75rem; top: 2px; }
.foresporsel li a { color: #fff; font-weight: 500; }
.skjema { background: #fff; color: var(--text); border-radius: var(--radius); padding: 24px; position: relative; }
.skjema .rad { display: grid; gap: 12px; margin-bottom: 14px; }
@media (min-width: 560px) { .skjema .rad.to { grid-template-columns: 1fr 1fr; } }
.skjema label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: 4px; }
.skjema input, .skjema select, .skjema textarea { width: 100%; font: inherit; font-size: .92rem; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); }
.skjema input:focus, .skjema select:focus, .skjema textarea:focus { outline: 2px solid var(--dark-hover); outline-offset: 1px; }
.skjema .samtykke { display: flex; gap: 8px; align-items: flex-start; font-size: .875rem; font-weight: 400; color: #475569; margin-bottom: 14px; }
.skjema .samtykke input { width: auto; margin-top: 3px; }
.skjema .felle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skjema button { width: 100%; font: inherit; font-weight: 500; font-size: .92rem; cursor: pointer; padding: 10px 18px; border-radius: 8px; border: 0; background: var(--dark); color: #fff; }
.skjema button:hover { background: var(--dark-hover); }
.skjema button[disabled] { opacity: .6; cursor: wait; }
.skjema .feil { color: #dc2626; font-size: .875rem; }
.skjema-ferdig { background: #fff; color: var(--text); border-radius: var(--radius); padding: 40px; text-align: center; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.skjema-ferdig h3 { color: var(--text); }

/* bunn og vanlige sider */
.bunn { border-top: 1px solid var(--line); padding: 32px 16px; background: #fff; font-size: .875rem; color: var(--muted); }
.bunn-inner { max-width: 80rem; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.bunn a { color: var(--muted); } .bunn a:hover { color: var(--text); }
.bunn p { margin: 0 0 .3em; }
.side { max-width: 48rem; margin: 0 auto; padding: 48px 24px; background: #fff; }