/* Generelle stiler */
.site-title a {
  color: #efefef !important;
}

.site-title a:hover, .site-title a:focus {
    color: #943400 !important;
}

/* Generell overskrift (men kun synlig for søkeresultat?) */
.page-title {
  color: #fff;
}

/* Søkeboks */
@media (max-width: 800px) {
  #search-container > form > label > input {
     font-size: 2em;
  }
}

#search-container > form > label > input {
	color: #fff;
	border-color: #fff;
}

/* Søket ga ingen treff */
.search-no-results header, .page-title {
	margin-bottom: 0px;
}

.search-no-results .post-content p {
	color: #fff;
  visibility: hidden;
  position: relative;
}

.search-no-results .post-content p::after {
  visibility: visible;
  content: "Ittno sæt’n detti her! Je lette å lette, men fænn ittno svar på dæ du lette ætter. Dæ æ jo trist å tenkje på, men kænskje du kænn unners på no ænna i stellaførr? Så få je sjå om je få hjært deg. Åkke som ønskje je deg ei fin adventstid i vegen min.";
  width: 100%;
  display: block;
  text-align: center;	
	padding-bottom: 36px;
  padding-top: 16px;
}

.search-no-results form {
	padding-bottom: 200px;
}

/* Hvit slogan */
p.site-description {
	color: #fff;
}

/* Banner - store skjermer */
@media (min-width: 1440px) {
  header.header {
     padding: 130px 0;
  }
}

/* Snøfnugg */

/* Dytt banneret bak snøfnuggene */
header.header {
    z-index: -2;
}

/* Dytt snøen bak hovedinnholdet på siden */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("https://i0.wp.com/vegenjebori.no/wp-content/uploads/2025/11/snowing2.gif") repeat;
    opacity: 0.3;
    z-index: -1;
}

/* Stiler for forside */
main.content .posts article .post-content {
	text-align: center;
	padding-top: 6%;
	min-height: 160px;
}

main.content .posts article .post-content em {
	display: block;
	padding-top: 4%;
}

@media (max-width: 600px) {
  main.content .posts article .post-content {
	  min-height: 0px;
  }

	main.content .posts article .post-content :last-child {
	  margin-bottom: 12px;
  }
}

/* Stiler for innlegg */
main.section-inner header.post-header {
  padding-top: 7%;
  padding-bottom: 6%;
}

@media (min-width: 600px) {
  main.section-inner .content .post-content {
	/* Litt mindre luft over sitat, men kun på store skjermer */
	padding-top: 6%;
  }
}

main.section-inner .content .post-content {
	padding-bottom: 45px !important;
	text-align: center;
}

main.section-inner .content .post-content .author {
  margin-top: -20px;
  margin-bottom: 30px;
}

main.section-inner .content .post-content .wp-block-heading {
	color: #c44500bf;
}

main.section-inner .content .post-content .wp-block-group {
	margin-bottom: 8%;
}

main.section-inner .content .post-content figure {
	padding-bottom: 20px;
}

main.section-inner .content .jp-relatedposts {
	text-align: left;
}

/* Stiler for om-siden */
.about-center {
	text-align: center;
}

main.section-inner .content .post-content .wp-block-image figure {
	margin: 20px auto;
}

h2.bottom-heading {
	margin: 48px auto;
}

/* Ramme rundt videospiller og bilde på om-siden */
.wp-block-embed.wp-block-embed-vimeo, main.section-inner .content .post-content .wp-block-image figure {
  background: #f8f3ed;
  border: 1px solid #d9c5b4;
  padding: 1.8em !important;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

main.section-inner .content .post-content img {
	padding: 0px;
	border: 0px;
  border-radius: 12px;
}

@media (max-width: 600px) {
  .wp-block-embed.wp-block-embed-vimeo, main.section-inner .content .post-content .wp-block-image figure {
    padding: 12px !important;
  }
}


.wp-block-embed.wp-block-embed-vimeo .jetpack-video-wrapper {
  border-radius: 8px;
  overflow: hidden;
}

/* Stiler for ordbok */
.ordbok {
  background: #f8f3ed;
  border: 1px solid #d9c5b4;
  padding-bottom: 2em;
  margin: 3em auto;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ordbok h3 {
	font-size: 2em !important;
	margin-top: 36px !important;
}

.ordbok dl {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 0.4em;
  padding: 0 2em;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

.ordbok dt,
.ordbok dd {
  text-align: left;
  white-space: normal;
  word-break: break-word;
}

.ordbok dt {
  max-width: 16ch;
}

.ordbok dd {
  margin-left: 2em;
}


/* Stiler for footer */
#footer, footer, .nocomments, .credits-left {
	display: none !important;
}

/* 404-siden */
.wrapper .search-field,
.footer .search-field {
  background: #f6f6f6;
  border-radius: 6px;
  border: 1px solid #ddd;
  color: #000;
}

.wrapper .search-field:focus,
.footer .search-field:focus {
  background-color: #f6f6f6;
  border-color: #333;
  color: #000;
  outline: none;
}

.wrapper .search-form label:before, .footer .search-form label:before, .wrapper .search-form:focus-within label:before, .footer .search-form:focus-within label:before {
  color: #7f9f0d;
}

/* Siste-innlegg og arkiv-header */
.widget_recent_entries h2, .widget_archive h2 {
	color: #c75b30
}

.widget_recent_entries {
  max-width: 300px;
  margin: 0 auto;
}

.widget_recent_entries ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget_recent_entries ul li {
  margin: 0.2em 0;
  padding: 0;
  position: relative;
}

.widget_recent_entries ul li::before {
  left: 80px !important;
}


/* =============================================
   FIX: Layout bug på store skjermer (1542px+)
   =============================================
   
   PROBLEM: 
   Baskerville 2-temaet bruker Masonry/Isotope
   JavaScript som dynamisk beregner absolutt 
   posisjonering for hvert innlegg. 
   
   På skjermer bredere enn 1542px beregner 
   scriptet feil posisjon, slik at innleggene
   vises i feil rekkefølge.
   
   EKSEMPEL PÅ FEILEN:
   - 1. desember fikk: 
     position: absolute; 
     left: 477px; top: 5404px;
   - 2. desember fikk: 
     position: absolute; 
     left: 954px; top: 5404px;
   - Resultat: 1. desember vises til VENSTRE 
     for 2. desember (feil!)
   
   LØSNING:
   Tvinger static positioning og flexbox 
   layout på store skjermer, som overstyrer 
   JavaScript-ens inline styles og respekterer 
   HTML-rekkefølgen.
   ============================================= */
@media screen and (min-width: 1542px)
{
    /* Override JavaScript positioning */
    main.content .posts .post-container {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        float: none !important;
    }
    
    /* Force proper flexbox layout */
    main.content .posts {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        position: relative !important;
        height: auto !important;
    }
    
    /* Set correct widths for 3-column layout */
    main.content .posts .post-container {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        width: 33.333% !important;
    }
}