/*
 * 02-base.css – Grund: bakgrund, typografi, knappar, fokus, formulär
 * Del av child-temat Haninge Grav. Se README.md.
 */

/* ==========================================================================
   Bakgrund och typografi
   Lämna storlek tom för H1–H4 i Customize → Typography,
   så styr dessa flytande storlekar.
   ========================================================================== */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  background-color: var(--hg-bg);
  color: var(--hg-fg-muted);
}

/* GeneratePress innehållsyta: ingen vit platta bakom innehållet.
   Bakgrunden kommer från body (och sektionerna). */
.one-container .container,
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header {
  background-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--hg-fg);
}
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.025em; font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.02em;  font-weight: 700; }
h3 { font-size: var(--fs-h3); line-height: 1.3;  letter-spacing: -.01em;  font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: 1.35; font-weight: 600; }

/* Hjälpklasser – lägg i fältet "Additional CSS class(es)" på ett block */
.lead  { font-size: var(--fs-lead); line-height: 1.6; color: var(--hg-fg-muted); max-width: 62ch; }
.small { font-size: var(--fs-small); line-height: 1.55; color: var(--hg-fg-subtle); }
.label { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--hg-accent); }
.data  { font-weight: 700; color: var(--hg-accent); }

/* Länkar i löptext: understrukna så att de syns utan färgseende */
.entry-content p a,
.entry-content li a {
  color: var(--hg-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Knappar
   ========================================================================== */
.button,
button,
input[type="submit"],
.wp-block-button__link {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  border-radius: var(--radius-s);
}

/* Fokusring för tangentbordsnavigering */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--hg-accent);
  outline-offset: 3px;
}

/* "Begär offert" i menyn – lägg klassen menu-cta på menyvalet */
.main-navigation .main-nav ul li.menu-cta > a {
  background: var(--hg-accent);
  color: var(--hg-on-accent);
  border-radius: var(--radius-s);
  padding-left: 22px;
  padding-right: 22px;
  line-height: 44px;
  margin-left: 12px;
  font-weight: 600;
}
.main-navigation .main-nav ul li.menu-cta > a:hover,
.main-navigation .main-nav ul li.menu-cta > a:focus {
  background: var(--hg-accent-hover);
  color: var(--hg-on-accent);
}

/* ==========================================================================
   Formulär (även Gravity Forms)
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea {
  font-family: var(--font-sans);
  font-size: 16px;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--hg-input-line);
  border-radius: var(--radius-s);
  background: var(--hg-bg-alt);
  color: var(--hg-fg);
}
textarea { min-height: 120px; }
::placeholder { color: var(--hg-fg-subtle); opacity: 1; }

/* ==========================================================================
   Mobil
   ========================================================================== */
@media (max-width: 768px) {
  .main-navigation .main-nav ul li.menu-cta > a { margin-left: 0; }
}