/*
 Theme Name: GeneratePress Child
 Template: generatepress
*/
/* ============================
   TYPOGRAFI
============================ */
html {
  box-sizing: border-box;
}


@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600;700&family=Lato:wght@300;400;700&display=swap');

body {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: #1a1a1a;
  background: #faf9f7;
  padding-left: 50px;
  padding-right: 50px;
  box-sizing: border-box;
}

/* Rubriker */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Dancing Script', cursive;
  color: #2a2a2a;
  line-height: 1.25;
  margin-bottom: 0.4em;
}

h1 { font-size: 3.4rem; }
h2 { font-size: 2.8rem; }
h3 { font-size: 2.2rem; }
h4 { font-size: 1.7rem; }
h5 { font-size: 1.4rem; }
h6 { font-size: 1.2rem; }

/* Gör hela headern till en stabil flex-container */
.site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


/* Gör navigationen sticky utan att den lämnar headerns layout */

.site-header {
    display: block;                 /* undvik flex-problem */
    width: 100%;
    background-image: url('https://necessities.info/wp-content/uploads/2026/01/slogan.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 30px 40px;       /* justera höjd efter smak */
    margin-bottom: 0;               /* ta bort glapp mot navigation */
}
.main-navigation {
    margin-top: 0 !important;       /* ta bort glapp ovanför */
    border-top: none;               /* GP lägger ibland en linje */
    width: 100%;
}
.site-header + .main-navigation {
    margin-top: 0 !important;
}
body.nav-below-header .site-header {
    margin-bottom: 0 !important;
}

body.nav-below-header .main-navigation {
    margin-top: 0 !important;
}
.site-header,
.main-navigation {
    display: block;
}

/* ============================
   GENERELLT
============================ */

/* Box-modell för stabil layout */

html {
  box-sizing: border-box;
}

/* Lägg ett blinkande hjärta efter "Lämna en kommentar" */
.comment-reply-title::after {
  content: " ❤️";
  color: red;
  margin-left: 6px;
  animation: blink 1s infinite;
}

/* Blink-animation */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}