/*
Theme Name: Webbverkstad
Version: 1.0
Description: Webbverkstad eget tema — ren HTML/CSS utan page builder
Author: Webbverkstad
*/

/* =============================================
   GOOGLE FONTS — Self-hosted (lokala filer)
   GDPR-compliant, snabbare laddning
============================================= */

/* Playfair Display */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/playfair-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/playfair-700.woff2') format('woff2');
}

/* Inter */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-700.woff2') format('woff2');
}

/* =============================================
   CSS-VARIABLER
============================================= */

:root {
  --wv-blue:       #0f91e3;
  --wv-blue-dark:  #0b7bc5;
  --wv-blue-pale:  #ebf5fd;
  --wv-cyan:       #06b6d4;
  --wv-dark:       #111827;
  --wv-dark-deep:  #0a0f1a;
  --wv-gray:       #4b5563;
  --wv-gray-light: #6b7280;
  --wv-light:      #f8fafc;
  --wv-white:      #ffffff;
  --wv-border:     #e5e7eb;
  --wv-max-width:  1280px;
}


/* =============================================
   GLOBAL RESET
============================================= */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: #0f91e3; /* iOS Safari — täcker vit yta under footer */
}

/* WordPress-wrappers — full bredd, nollställda */
#page,
#content,
#primary,
#main,
.site-content,
.site-main,
.content-area,
.entry-content,
.entry-header,
.entry-footer {
  max-width: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
}


/* =============================================
   GLOBAL TYPOGRAFI
============================================= */

body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #111827;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  line-height: 1.15;
  color: #111827;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

h1 { font-size: clamp(34px, 5vw, 60px); }
h2 { font-size: clamp(26px, 3.5vw, 40px); }
h3 { font-size: clamp(20px, 2.5vw, 26px); }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p {
  font-size: 16px;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
  padding: 0;
}

a {
  color: #0f91e3;
  text-decoration: none;
}

a:hover {
  color: #0b7bc5;
}

img {
  max-width: 100%;
  height: auto;
}


/* =============================================
   ADMIN-BAR OFFSET — Bara för inloggade
============================================= */

.admin-bar #wv-header {
  top: 32px !important;
}

.admin-bar #wv-mobile-menu {
  top: 102px !important;
}

@media (max-width: 782px) {
  .admin-bar #wv-header {
    top: 46px !important;
  }
  .admin-bar #wv-mobile-menu {
    top: 116px !important;
  }
}