/* ============================================================
   style-site.css — RelayWorks gemensamma stilar för HELA sajten
   ------------------------------------------------------------
   Används av index.php och alla undersidor (webb.php, ai.php,
   drift.php, smarta-hem.php, it-support.php, media.php, fix.php).
   Detta är den enda CSS-filen — ändringar här slår igenom på
   alla sidor.
   ============================================================ */


/* ========== DESIGN-TOKENS (CSS-variabler) ==========
   Ändra här för att uppdatera färger/avstånd globalt.
   Alla värden refereras med var(--namn) längre ner. */
:root{
  --rw-green:        #0d7a3a;   /* logons gröna — primärfärg. Alt: #2e8b57, #107a3c */
  --rw-green-dark:   #0a5d2c;   /* mörkare grön — hover/text-accent */
  --rw-green-soft:   #cfe9d2;   /* mjuk grön — borders/bakgrunder */
  --rw-green-tint:   #e8f3ec;   /* nästan vit grön — subtil accent */
  --rw-bg:           #b1dfc5;   /* sidans bakgrund (grön ton, lite ljusare än #096830). Alt: #096830 (mörkare), #dde5dc (salvia), #f5ebe0 (beige) */
  --rw-card:         #ffffff;   /* vita kort + behållarens bakgrund */
  --rw-text:         #1a1a1a;   /* huvudtextfärg */
  --rw-muted:        #5a5a5a;   /* dämpad text */
  --rw-border:       #ececec;   /* tunn ram */
  --rw-radius-lg:    24px;      /* stora rundningar (behållare) */
  --rw-radius-md:    16px;      /* medel rundningar (kort/bildramar) */
  --rw-radius-sm:    999px;     /* "piller"-form */
  --rw-shadow:       0 30px 80px -30px rgba(20,15,60,.25);  /* mjuk skugga under behållaren */
}


/* ========== GRUND ========== */
*{box-sizing:border-box}                 /* så att padding/border ingår i width */
html,body{margin:0;padding:0}

body{
  background:var(--rw-bg);
  color:var(--rw-text);
  /* Consolas — monospace för hela sajten. Alt: -apple-system, ... (systemfont), 'Inter' (webbfont) */
  font:16px/1.55 Consolas, Monaco, "Courier New", monospace;
  min-height:100vh;
  padding:32px 16px 48px;                /* yttre marginal: top right bottom left */
}


/* ========== HUVUDBEHÅLLAREN (vita kortet) ========== */
.shell{
  max-width:1180px;                      /* maxbredd. Mindre = smalare. T.ex. 960px */
  margin:0 auto;                          /* centrera horisontellt */
  background:var(--rw-card);
  border-radius:var(--rw-radius-lg);
  padding:36px 40px 44px;                 /* inre marginal: top, sides, bottom */
  box-shadow:var(--rw-shadow);
}


/* ========== TOPBAR (header med logga) ==========
   <header class="topbar"> innehåller två länkar:
   - .topbar-home-cover: osynlig länk som täcker hela ytan → klick på loggan = hem
   - .back-link: synlig "← Tillbaka..."-knapp till höger (bara på undersidor)
   Loggan ligger som CSS-bakgrundsbild på .topbar — ändra path/storlek nedan. */
.topbar{
  position:relative;                       /* för att .topbar-home-cover ska kunna absolute-positioneras */
  display:flex;
  align-items:flex-end;                    /* placerar back-link längst ned i headern */
  justify-content:flex-end;                /* skjuter back-link åt höger */
  gap:16px;
  margin:-36px -40px 32px;                 /* matcha shellens padding för att fylla bredden */
  padding:10px 40px;
  min-height:128px;                        /* headerns höjd. Större = bannerkänsla */
  /* background = färg + bild + position + storlek + repeat
     - 32px center: 32px från vänsterkanten, vertikalt centrerad
     - auto 70%: bilden fyller 70% av höjden, bredden auto (proportionell)
     - Alt: "left center / contain" (hela bilden i bredden), "100% 100%" (sträck) */
  /* Logo-positionen (40px) matchar shellens horisontella padding så att
     loggan linjerar med .subpage-innehållet nedanför. */
  background:#F5EBE0 url('image/relayworks_logo_header.png') 40px center / auto 70% no-repeat;
  border-radius:var(--rw-radius-lg) var(--rw-radius-lg) 0 0;  /* runda bara övre hörnen */
}

/* Osynlig länk som täcker hela topbaren — gör loggan klickbar som hem-länk.
   z-index:1 så den ligger ovanpå bg, men under .back-link (som har z-index:2). */
.topbar-home-cover{
  position:absolute;
  inset:0;
  z-index:1;
  text-decoration:none;
}
.topbar-home-cover:focus-visible{
  outline:2px solid var(--rw-green);
  outline-offset:-4px;
}

.brand{
  /* Visuellt dold men läsbar för skärmläsare och SEO. */
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}


/* ========== STARTSIDA: HERO (rubrik/lead under headern) ========== */
.hero{ margin-bottom:28px; }
.hero h1{
  /* clamp(min, ideal, max) skalar font efter skärmbredden */
  font-size:clamp(1.8rem, 4.4vw, 3rem);
  line-height:1.1;
  letter-spacing:-.02em;       /* tightare bokstavsmellanrum för stora rubriker */
  margin:0;
  font-weight:600;             /* alt: 700 (fetare), 500 (lättare) */
}
.hero .lead{
  /* lead-texten har samma stil som <h2> i korten — för att höja den visuellt */
  margin:0;
  font-size:1.05rem;
  line-height:1.25;
  font-weight:600;
  color:var(--rw-text);
}


/* ========== STARTSIDA: KORTGRID (huvudområden) ========== */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);  /* 3 kolumner. Alt: 2 = 2-kol, 4 = 4-kol; auto-fit minmax(260px,1fr) = automatiskt */
  gap:18px;                              /* mellanrum mellan kort */
  margin-top:8px;
}

.feature{
  background:#fafafa;
  border:1px solid var(--rw-border);
  border-radius:var(--rw-radius-md);
  overflow:hidden;                       /* så att rundade hörn klipper bilden */
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;  /* mjuk hover-effekt */
  /* Korten är klickbara (<a class="feature">) — ta bort understrykning och ärv färg */
  text-decoration:none;
  color:inherit;
}
.feature:hover{
  transform:translateY(-2px);            /* lyfter kortet 2px vid hover. Alt: scale(1.02) */
  box-shadow:0 14px 30px -16px rgba(13,122,58,.25);
}
.feature:focus-visible{
  /* Tangentbordsfokus — synlig grön ram för tillgänglighet */
  outline:2px solid var(--rw-green);
  outline-offset:2px;
}

/* Bildytan i toppen av kortet */
.feature .visual{
  aspect-ratio:4/3;                      /* bildens proportioner. Alt: 16/9 (lägre), 1/1 (kvadrat) */
  width:100%;
  position:relative;
  background:#f4ecdc;                    /* bakgrund som syns runt bilden (om contain inte fyller) */
  overflow:hidden;
}
.feature .visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;                    /* "contain" = hela bilden syns; alt: "cover" = fyller men kan beskäras */
}

/* (Inaktiva men kvar) chip-klasser om man vill lägga in taggar i bilden */
.feature .meta{
  position:absolute;
  left:14px; bottom:14px;
  display:flex; gap:6px; flex-wrap:wrap;
  z-index:1;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  font-size:.72rem;
  border-radius:var(--rw-radius-sm);
  background:rgba(255,255,255,.92);
  color:#222;
  letter-spacing:.02em;
  backdrop-filter:saturate(140%) blur(2px);
}
.chip.is-green{ background:var(--rw-green); color:#fff; }

/* Textdelen under bilden */
.feature .body{ padding:16px 18px 20px; }
.feature h2{
  margin:0 0 8px;
  font-size:1.05rem;          /* Alt: 1.2rem för större rubriker */
  line-height:1.25;
  font-weight:600;
  color:var(--rw-text);
}
.feature p{
  margin:0;
  font-size:.92rem;
  color:var(--rw-muted);
  line-height:1.45;
}


/* ========== UNDERSIDA (innehållsblock på t.ex. webb.php) ========== */
.subpage{
  max-width:860px;                        /* smalare än shellen — bättre läsbarhet på lång text */
  margin:0;                                /* vänsterställd inom shellen, linjerar med loggan i topbaren */
}

/* Back-link i topbaren — ren textlänk till höger, ingen knapp/bakgrund */
.topbar .back-link{
  position:relative;
  z-index:2;                              /* över .topbar-home-cover så den går att klicka på */
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--rw-text);
  text-decoration:none;
  font-size:.95rem;
  font-weight:700;                         /* bold */
  transition:color .15s ease, transform .15s ease;
}
.topbar .back-link:hover{
  color:var(--rw-green-dark);
  transform:translateX(-2px);              /* liten "går tillbaka"-rörelse vid hover */
}

/* Toppsektion på undersidor: bild till vänster, rubrik till höger (sida vid sida) */
.subpage-header{
  display:grid;
  grid-template-columns:auto 1fr;          /* bild = sin egen bredd, titel = resten */
  gap:32px;                                /* avstånd mellan bild och titel */
  align-items:end;                         /* titel justeras med bildens nederkant */
  margin:0 0 32px;
}

/* Sidans rubrik */
.subpage-title{
  /* clamp(min, ideal, max) skalar font efter skärmbredden */
  font-size:clamp(1.55rem, 3.4vw, 2.15rem);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0;                               /* nollställt — avstånd styrs av .subpage-header gap */
  font-weight:600;                        /* alt: 700 (fetare) */
  color:var(--rw-text);
}

/* Bildram i headerblocket */
.subpage-image{
  margin:0;
  width:280px;                            /* fast storlek på bilden. Alt: 240px (mindre), 320px (större) */
  max-width:100%;
  background:#F5EBE0;                     /* matchar bildens egen bakgrund */
  border-radius:var(--rw-radius-md);
  overflow:hidden;
  border:1px solid var(--rw-border);
}
.subpage-image img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;                       /* bildens proportioner. Alt: 16/9, 1/1 */
  object-fit:contain;                     /* "contain" = hela bilden syns; alt: "cover" = fyller men kan beskäras */
}

/* Brödtext + lista under bilden */
.subpage-content{
  font-size:1rem;
  line-height:1.65;                       /* luftigare för långa stycken */
}
.subpage-content p{ margin:0 0 16px; }

/* Första <p> = inledningstext: större och fet (lyfter introduktionen) */
.subpage-content > p:first-of-type{
  font-size:1.2rem;                       /* steget större. Alt: 1.15rem (lite mindre), 1.3rem (större) */
  font-weight:700;                        /* bold */
  line-height:1.4;
}
/* Andra <p> = uppföljning: ett steg mindre än den första, normal vikt */
.subpage-content > p:first-of-type + p{
  font-size:1.05rem;                      /* lite större än default-text men mindre än första */
  font-weight:400;
}
.subpage-content h2{
  margin:28px 0 12px;
  font-size:1.2rem;
  font-weight:600;
  color:var(--rw-green-dark);             /* grön accent för delrubriker */
}
.subpage-content ul{
  margin:0 0 16px;
  padding-left:1.4em;                     /* indrag för bullets */
}
.subpage-content ul li{ margin:0 0 8px; }


/* ========== KONTAKTFORMULÄR ========== */
.contact-form{
  display:grid;
  gap:16px;
  margin-top:16px;
  max-width:640px;
}
.form-row{
  display:grid;
  gap:6px;
}
.form-row label{
  font-weight:700;
  color:var(--rw-text);
}
.form-row input,
.form-row textarea{
  width:100%;
  border:1px solid var(--rw-border);
  border-radius:10px;
  background:#fafafa;
  color:var(--rw-text);
  font:inherit;
  padding:11px 12px;
}
.form-row textarea{
  resize:vertical;
  min-height:150px;
}
.form-row input:focus,
.form-row textarea:focus{
  outline:2px solid var(--rw-green);
  outline-offset:2px;
  background:#fff;
}
.form-row.is-hidden{
  position:absolute;
  left:-9999px;
}
.form-submit{
  justify-self:start;
  border:0;
  border-radius:var(--rw-radius-sm);
  background:var(--rw-green);
  color:#fff;
  cursor:pointer;
  font:inherit;
  font-weight:700;
  padding:10px 22px;
  transition:background .15s ease, transform .15s ease;
}
.form-submit:hover{
  background:var(--rw-green-dark);
  transform:translateY(-1px);
}
.form-submit:focus-visible{
  outline:2px solid var(--rw-green-dark);
  outline-offset:2px;
}
.form-message{
  max-width:640px;
  margin:16px 0;
  padding:14px 16px;
  border-radius:var(--rw-radius-md);
  border:1px solid var(--rw-border);
}
.form-message.success{
  background:var(--rw-green-tint);
  border-color:var(--rw-green-soft);
}
.form-message.error{
  background:#fbeded;
  border-color:#f0c4c4;
}
.form-message ul{
  margin-top:8px;
}


/* ========== FOOTER ========== */
.foot{
  max-width:1180px;
  margin:24px auto 0;
  text-align:center;
  color:#000000;                           /* svart text */
  font-weight:700;                         /* bold */
  font-size:.85rem;
}
.foot p{ margin:0; }
.foot a{
  color:#000000;
  font-weight:700;
  text-decoration:none;
}
.foot a:hover{
  color:#EFE4D6;
  text-decoration:none;
}
.foot a:focus-visible{
  outline:2px solid var(--rw-green);
  outline-offset:3px;
}


/* ========== RESPONSIVA BRYTPUNKTER ==========
   Justera värdena om layout ska byta vid annan bredd. */
@media (max-width:880px){
  /* Tablet — minska behållarens padding och anpassa korten */
  .shell{ padding:24px 22px 28px; border-radius:20px; }
  .topbar{ margin:-24px -22px 24px; }
  .feature-grid{ grid-template-columns:repeat(2, 1fr); }  /* 2 kolumner */
}
@media (max-width:560px){
  /* Mobil — krymp yttre padding, rubriker och korten till en kolumn */
  body{ padding:18px 10px 32px; }
  .subpage-title{ font-size:1.45rem; }
  .feature-grid{ grid-template-columns:1fr; }              /* 1 kolumn */
  /* Bild + titel staplas vertikalt på mobil */
  .subpage-header{ grid-template-columns:1fr; gap:16px; }
  .subpage-image{ width:100%; max-width:240px; }
}