/* =========================================================
   Argentum Partners - main.css (recreated)
   Theme: Dark premium, gold accents. Dimension-like layout.
   ========================================================= */

/* --- CSS Variables (easy theming) --- */
:root{
  --ap-bg:#0b111a;
  --ap-bg-2:#0f1724;
  --ap-surface:rgba(255,255,255,0.06);
  --ap-surface-2:rgba(255,255,255,0.1);
  --ap-text:#e9eef7;
  --ap-muted:#b9c3d6;
  --ap-gold:#d9b25f;
  --ap-gold-2:#c89c3a;
  --ap-border:rgba(233,238,247,0.25);
  --ap-shadow:0 10px 30px rgba(0,0,0,.45);
}

/* --- Resets / base typography --- */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; height:100%;
  background: radial-gradient(1200px 800px at 70% -10%, #162341 0%, var(--ap-bg) 60%),
              radial-gradient(900px 700px at 10% 110%, #1b2744 0%, var(--ap-bg) 55%),
              var(--ap-bg);
  color:var(--ap-text);
  font:400 16px/1.65 "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block}

/* --- Background video --- */
#bg{position:fixed; inset:0; z-index:-2; overflow:hidden}
.bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2; filter:brightness(.45) saturate(1.1);
}
/* optional gradient overlay to help legibility */
#bg:after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.65) 100%);
  pointer-events:none; z-index:-1;
}

/* --- Wrapper & layout --- */
#wrapper{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:5vh 24px;
}

/* --- Header (hero) --- */
#header{
  position:relative;
  text-align:center;
  max-width:1100px;
  width:100%;
}
#header .logo{
  width:115px; height:115px; margin:0 auto 28px;
  border:2px solid rgba(255,255,255,.5);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter:blur(2px);
  box-shadow:0 2px 16px rgba(0,0,0,.35) inset, 0 2px 10px rgba(0,0,0,.3);
}
/* Coin image inside the circular logo */
#header .logo img.ap-coin{
  width:84%; height:auto; object-fit:contain; border-radius:50%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* Headings & strapline */
#header h1{
  margin:0 0 10px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:800; font-size:clamp(28px,5vw,56px);
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
#header p.lead{
  margin:0 auto 28px; max-width:900px; color:var(--ap-muted);
  font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}
/* Thin separators */
.hr-line{height:1px; background:rgba(255,255,255,.35); margin:24px auto; width:min(920px,90%)}

/* --- Nav buttons --- */
#header nav ul{margin:24px auto 0; padding:0; display:flex; gap:14px; list-style:none; justify-content:center; flex-wrap:wrap}
#header nav a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:180px; padding:14px 20px; border-radius:8px;
  border:1px solid var(--ap-border);
  background: rgba(255,255,255,.04);
  color:#fff; text-decoration:none; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  transition: all .2s ease;
  box-shadow: var(--ap-shadow);
}
#header nav a:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.6)}
#header nav a.primary{
  background:linear-gradient(180deg, rgba(217,178,95,.25), rgba(200,156,58,.16));
  border-color:rgba(217,178,95,.55);
  box-shadow:0 8px 24px rgba(217,178,95,.25);
}

/* --- Main articles (panels) --- */
#main{position:relative; width:100%; max-width:1100px; margin:48px auto 0}
#main article{
  display:none; /* shown via JS */
  background: rgba(255,255,255,.04);
  border:1px solid var(--ap-border);
  border-radius:14px;
  padding:28px;
  box-shadow: var(--ap-shadow);
  backdrop-filter: blur(4px);
}
#main article.active{display:block}
#main article h2.major{
  font-size:clamp(24px,3.2vw,36px); margin:0 0 16px;
  letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:10px;
}
#main .image.main{margin:16px 0 22px}
#main .image.main img{border-radius:12px}

/* Section helper image (remote) */
.section-image{max-height:380px; object-fit:cover}

/* --- Cards / content boxes --- */
.card{
  background: rgba(255,255,255,.04);
  border:1px solid var(--ap-border);
  border-radius:12px;
  padding:18px 18px;
  box-shadow: var(--ap-shadow);
}
.card.gold{border-color:rgba(217,178,95,.55)}

/* --- Icons row (left icons right text) --- */
.icon-row{display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; margin:14px 0}
.icon-row img{width:26px; height:26px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}

/* --- Forms (contact) --- */
form{display:grid; gap:12px}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.fields .field{display:flex; flex-direction:column}
label{font-weight:600; color:var(--ap-muted); margin-bottom:6px}
input[type="text"], input[type="email"], textarea, select{
  background:rgba(255,255,255,.06); border:1px solid var(--ap-border);
  color:#fff; border-radius:8px; padding:12px 14px; outline:none;
}
textarea{min-height:130px; resize:vertical}
input:focus, textarea:focus{border-color:rgba(217,178,95,.6); box-shadow:0 0 0 3px rgba(217,178,95,.18)}
.actions{display:flex; gap:12px; margin-top:6px}
.actions .primary{
  background:linear-gradient(180deg, rgba(217,178,95,.25), rgba(200,156,58,.16));
  border:1px solid rgba(217,178,95,.55); color:#fff;
  padding:12px 18px; border-radius:8px; cursor:pointer; font-weight:700; letter-spacing:.08em;
}
.actions .primary:hover{filter:brightness(1.05)}

/* --- Footer --- */
#footer{margin-top:48px; text-align:center; opacity:.9; font-size:.9rem; color:var(--ap-muted)}
#footer .copyright{display:inline-flex; align-items:center; gap:8px}
.footer-heart{height:24px; vertical-align:middle; display:inline-block; margin-left:4px}

/* --- Utility --- */
.center{display:flex; align-items:center; justify-content:center}
.m0{margin:0} .mt8{margin-top:8px} .mt16{margin-top:16px} .mt24{margin-top:24px}
.t-muted{color:var(--ap-muted)}
.t-gold{color:var(--ap-gold)}
.border-gold{border-color:rgba(217,178,95,.55)}

/* --- Responsive --- */
@media (max-width: 980px){
  #header nav a{min-width:150px; font-size:.78rem; letter-spacing:.14em}
  .fields{grid-template-columns:1fr}
}
@media (max-width: 640px){
  #header .logo{width:96px; height:96px}
  #header .logo img.ap-coin{width:86%}
  #header h1{font-size:clamp(24px,7vw,38px)}
  #header p.lead{font-size:.8rem; letter-spacing:.14em}
  .hr-line{width:92%}
}
/* === Argentum – Form polish === */
:root{ --ap-gold:#E7BC77; --ap-gold-20:#E7BC7733; }

/* Samma höjd & bredd på alla inputs/selects */
#contact .field input[type="text"],
#contact .field input[type="email"],
#contact .field input[type="tel"],
#contact .field select{
  height: 2.75rem;
  line-height: 2.75rem;
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.9);
  background: #0f1724;
  color: #fff;
  padding: 0 1rem;
}

/* Enhetlig fokus */
#contact .field input:focus,
#contact .field select:focus{
  border-color: var(--ap-gold);
  box-shadow: 0 0 0 3px var(--ap-gold-20);
}

/* Premium dropdown: mörk, guldpil, hover */
#contact .field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23E7BC77' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 1.1rem;
}
#contact .field select option{ background:#0f1724; color:#fff; }
#contact .field select option:hover,
#contact .field select option:focus,
#contact .field select option:checked{
  background:#E7BC77; color:#0b0f17;
}

/* Checkbox-rad tight, snygg */
.ap-fieldset{ border:1px dashed rgba(255,255,255,.2); border-radius:12px; padding:12px 14px; }
.ap-fieldset legend{ padding:0 6px; color:#cfd8ff; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; }
.ap-checks{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; }
.ap-check{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; }
.ap-check input{ accent-color: var(--ap-gold); }

/* Consent-rad */
.ap-consent{ display:flex; align-items:flex-start; gap:.6rem; margin:.5rem 0 0; }
.ap-consent input{ margin-top:.25rem; accent-color:var(--ap-gold); }
.ap-consent a{ color:var(--ap-gold); border-bottom:1px dashed var(--ap-gold-20); text-decoration:none; }
.ap-consent a:hover{ border-bottom-color: var(--ap-gold); }

/* Knappar tajtare */
.actions.tight{ gap:.6rem; display:flex; flex-wrap:wrap; align-items:center; }
.button.primary.ap-gold{ background:var(--ap-gold)!important; border-color:var(--ap-gold)!important; color:#0b0f17!important; }
.button.primary.ap-gold:hover{ box-shadow:0 0 24px var(--ap-gold-20); }

/* Dölj ev. gammal textarea (om den skulle ligga kvar i DOM) */
#contact textarea{ display:none!important; height:0!important; padding:0!important; margin:0!important; border:0!important; }

/* Honeypot */
.ap-hp{ position:absolute; left:-9999px; opacity:0; }
/* Röd highlight på ogiltiga fält */
#apForm input[required]:invalid,
#apForm select[required]:invalid {
  border-color: #ff6b6b !important;
}
/* --- Rensa bullets + snygga knappraden --- */
.actions,
.actions.actions--clean {
  display:flex;
  align-items:center;
  gap:.75rem;
  margin: .5rem 0 0;
  padding:0;
  list-style:none;                 /* inga bullets */
}
.actions.actions--clean::before,
.actions.actions--clean::after {   /* säkerställ inga pseudo-punkter */
  content:none !important;
  display:none !important;
}
.actions li { margin:0; list-style:none; }

/* Style för sekundär knapp (reset) så den matchar temat */
.actions .button {
  border-radius:8px;
  border:1px solid rgba(255,255,255,.7);
  background:transparent;
  color:#fff;
  height:2.75rem; line-height:2.75rem;
  padding:0 1rem;
  text-transform:uppercase; letter-spacing:.12rem; font-size:.8rem;
}
.actions .button:hover { border-color:#E7BC77; color:#E7BC77; }

/* Primär (guld) – redan hos dig, men repeterar för säkerhets skull */
.button.primary.ap-gold{
  background:#E7BC77 !important;
  border-color:#E7BC77 !important;
  color:#0b0f17 !important;
  box-shadow:0 0 18px #E7BC7733;
}
.button.primary.ap-gold:hover{ box-shadow:0 0 24px #E7BC7733; }

/* Mobil: helbredd för bättre UX */
@media (max-width: 520px){
  .actions { flex-wrap:wrap; }
  .actions .button { width:100%; text-align:center; }
}
/* === Centering Rescue Pack (safe) === */

/* 1) Se till att hela sajten centreras i viewporten */
#wrapper{
  max-width: 1100px;         /* kan justeras: 1000–1200px */
  margin: 0 auto;            /* centrerar hela innehållet */
}

/* 2) Header – allt i mitten */
#header{
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;        /* horisontellt center */
  justify-content: center;    /* vertikalt i headern */
}
#header > *{ margin-left:auto; margin-right:auto; }

/* Loggan i exakt mitten */
#header .logo{ margin: 0 auto 1rem; }
#header .logo img.ap-coin{
  width: 50rem; height: 50; object-fit: contain;
}

/* “Inner”-blocket med rubrik + ingress – begränsa bredd & centrera */
#header .content{ width: min(880px, 92%); margin: 0 auto; }

/* Nav-raden – centrera knapparna */
#header nav ul{
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

/* 3) Artiklar – boxarna i mitten */
#main article{
  margin-left: auto;
  margin-right: auto;
}

/* 4) Kontaktbild – centrerad och lagom stor */
#contact .image.main img{
  display:block;
  margin:0 auto 1.25rem auto;
  width:min(720px, 90%);      /* ändra t.ex. 900px för bredare */
  height:auto;
}

/* 5) Footertext – centrera */
#footer .copyright{
  width:auto;
  margin: 1rem auto 0;
  text-align:center;
  float:none;
}

/* 6) Snyggare, enhetliga fält (inkl. telefon) */
#contact .field input[type="text"],
#contact .field input[type="email"],
#contact .field input[type="tel"],
#contact .field select{
  display:block;
  width:100%;
  height:2.75rem;
  line-height:2.75rem;
  padding:0 1rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.9);
  background:#0f1724;
  color:#fff;
  box-sizing:border-box;
}
#contact .field input:focus,
#contact .field select:focus{
  border-color:#E7BC77;
  box-shadow:0 0 0 3px #E7BC7733;
}

/* 7) Premium dropdown (mörk + guldpil + hover) */
#contact .field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:2.4rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23E7BC77' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right .6rem center;
  background-size:1.1rem;
}
#contact .field select option{ background:#0f1724; color:#fff; }
#contact .field select option:hover,
#contact .field select option:focus,
#contact .field select option:checked{
  background:#E7BC77; color:#0b0f17;
}

/* 8) Dölj ev. “hemligt” fält som råkat bli synligt (honeypot) */
.ap-hp,
#contact form input[name="_hp"],
#contact form input[name="hp"],
#contact form input[name="company"]{
  position:absolute !important;
  left:-9999px !important;
  opacity:0 !important;
  width:0 !important; height:0 !important;
  pointer-events:none !important;
}
/* Ta bort cirkeln runt loggan */
#header .logo {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Kort-stil */
#main article {
  background: rgba(15, 23, 36, 0.85); /* mörk semi-transparent bakgrund */
  border: 1px solid rgba(231, 188, 119, 0.25); /* tunn guldig kant */
  border-radius: 16px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 960px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}

/* Rubriker i kort */
#main article h2 {
  font-size: 1.8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #E7BC77;
  margin-bottom: 1.2rem;
}

/* Bilder */
#main article .image.main img {
  border-radius: 12px;
  display:block;
  margin:0 auto 1.5rem auto;
  width: 100%;
  height: auto;
  max-width: 720px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
/* Grid-layout för tjänster */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.8rem;
  margin-top: 1.5rem;
}

/* Varje box */
.service-box {
  background: rgba(15, 23, 36, 0.9);
  border: 1px solid rgba(231, 188, 119, 0.25);
  border-radius: 14px;
  padding: 1.8rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.service-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(231, 188, 119, 0.25);
}

/* Rubrik i box */
.service-box h3 {
  font-size: 1.3rem;
  margin-bottom: .8rem;
  color: #E7BC77;
}

/* Text */
.service-box p {
  font-size: 0.95rem;
  color: #d9e1f2;
  margin-bottom: .8rem;
}

/* Lista */
.service-box ul {
  margin: 0;
  padding-left: 1.2rem;
}
.service-box li {
  margin-bottom: .4rem;
  font-size: 0.9rem;
  color: #fff;
}
/* Sektionbild ovanför grid */
#tjanster .section-image img{
  display:block; margin:0 auto 1.25rem; width:min(960px, 96%);
  height:auto; border-radius:12px; box-shadow:0 6px 22px rgba(0,0,0,.35);
}

/* 6-box grid – 3x2 på desktop, 2x3 på tablet, 1x6 på mobil */
.service-grid.service-grid--6{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:1.6rem; margin-top:1rem;
}
@media (max-width: 1060px){
  .service-grid.service-grid--6{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .service-grid.service-grid--6{ grid-template-columns: 1fr; }
}

/* Premium-boxar */
.service-box{
  background: rgba(15,23,36,.92);
  border:1px solid rgba(231,188,119,.25);
  border-radius:14px; padding:1.6rem;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.service-box:hover{
  transform: translateY(-6px);
  box-shadow:0 12px 32px rgba(231,188,119,.22);
  border-color: rgba(231,188,119,.5);
}
.service-box h3{
  color:#E7BC77; font-size:1.2rem; margin:0 0 .5rem;
}
.service-box p{
  color:#d9e1f2; margin:0 0 .6rem; font-size:.96rem;
}
.service-box ul{ margin:0; padding-left:1.1rem; }
.service-box li{ margin:.3rem 0; font-size:.92rem; }
/* --- Link styling --- */
a {
  color: var(--ap-gold);
  text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease;
}

a:hover {
  color: var(--ap-gold-2); /* lite mörkare guld på hover */
  text-shadow: 0 0 6px rgba(217,178,95,0.6);
}
/* Länkfärger i guld-tema */
a,
a:visited,
a:active {
  color: var(--ap-gold);
  text-decoration: none;
}

a:hover {
  color: var(--ap-gold-2); /* mörkare guld när man hovrar */
  text-shadow: 0 0 6px rgba(217,178,95,0.6);
}
/* === Global link styling === */
a,
a:visited,
a:active {
  color: var(--ap-gold);
  text-decoration: none;
}

a:hover {
  color: var(--ap-gold-2);
  text-shadow: 0 0 6px rgba(217,178,95,0.6);
}

/* === Navigation links fix === */
#header nav a,
#header nav a:visited,
#header nav a:active {
  color: #fff; /* vit text som bas i navigation */
  border: 1px solid var(--ap-border);
}

#header nav a.primary,
#header nav a.primary:visited,
#header nav a.primary:active {
  background: linear-gradient(180deg, rgba(217,178,95,.25), rgba(200,156,58,.16));
  border-color: rgba(217,178,95,.55);
  color: var(--ap-gold);
}

#header nav a.primary:hover {
  color: var(--ap-gold-2);
  text-shadow: 0 0 6px rgba(217,178,95,0.6);
  filter: brightness(1.05);
}
/* Gör alla tjänster-bilder lika stora */
#main .image.main img {
  width: 100%;
  height: 320px;              /* justera efter smak, t.ex. 280–360px */
  object-fit: cover;          /* beskär snyggt istället för att förvränga */
  border-radius: 12px;
}
/* Samma storlek på alla "sektion-bilder" */
#main .image.main,
article .image.main {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;      /* välj 16:9 – ändra vid behov */
  max-height: 360px;         /* eller 320px om du vill lägre */
  overflow: hidden;
  border-radius: 12px;
}

/* Själva bilden fyller alltid ramen */
#main .image.main img,
article .image.main img,
img.section-image {
  width: 100%;
  height: 100% !important;   /* vinner över gamla regler */
  object-fit: cover;         /* beskär snyggt */
  display: block;
}
/* Alla huvudbilder får samma höjd & proportioner */
#main .image.main {
  width: 100%;
  height: 320px;              /* välj en höjd som passar alla */
  overflow: hidden;
  border-radius: 12px;
}

#main .image.main img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* beskär istället för att förvränga */
  display: block;
}
/* Tvinga alla sektion-bilder (inkl. Tjänster) till samma höjd */
article .image.main,
article .image.main img {
  width: 100% !important;
  height: 320px !important;      /* justera höjden här */
  object-fit: cover !important;
  border-radius: 12px;
  display: block;
}