/*
Theme Name: Noeharskjedd Child
Theme URI: https://noeharskjedd.no
Description: Child theme for Noeharskjedd interactive stories, based on Twenty Twenty-Five
Author: Noeharskjedd Team
Author URI: https://noeharskjedd.no
Template: twentytwentyfive
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: noeharskjedd-child
*/

/* Additional custom styles will be added here */

:root {
  --wp--preset--spacing--xl: clamp(1rem, -1.7957rem + 9.3385vw, 2.5rem);
}

h1, h2, h3, h4, h5, h6 {
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: pretty;
  &.has-touch-base-font-family {
    line-height: 1.1!important;
    font-family: TouchBase!important;
    text-transform: uppercase;
    text-align: center;
    font-weight: 400!important;
    color: inherit;
  }
}

body.page-id-633,
body.page-id-55 {
  background-image: url('NHS_game_bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}


body.page-id-55 {
  .wp-block-button__link {
    &:hover {
      color: white;
      text-decoration: underline;
      background-color: #666!important;
    }
  }
}

.spill-tittel {
  font-size: clamp(2.5rem, 1.1193rem + 6.1364vw, 5.875rem)!important;
}

body.archive.category {

  h1, h2, h3, h4, h5, h6 {
  &.has-touch-base-font-family {
    font-size: clamp(2.375rem, -2.5175rem + 16.3424vw, 5rem)!important;
  }
}

  .has-touch-base-font-family {
    color: #333;
  }
  .wp-block-post-template .post {
    &:hover {
      border-radius: 5px;
      cursor: pointer;
      background-color: #f7e6bf;
    }
    &:focus {
      outline: 1px auto #333;
    }
  }
}

body.home,
body.archive.category {
  background-color: var(--wp--preset--color--adventure-background) !important;
}

header .is-layout-flex {
  gap: 1rem;
}

* {
  box-sizing: border-box;
}

@font-face {
  font-family: "TouchBase";
  font-display: swap;
  src: url("./fonts/touch-base_2a2818bcd2.eot");
  src:
    url("./fonts/touch-base_2a2818bcd2.eot") format("embedded-opentype"),
    url("./fonts/touch-base_2ae8d44f97.woff2") format("woff2"),
    url("./fonts/touch-base_027aa6da70.woff") format("woff"),
    url("./fonts/touch-base_fd8a2d776f.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.wp-singular .innlegg-fremhevet-bilde {
  max-width: fit-content;
}

.wp-singular .innlegg-fremhevet-bilde img.wp-post-image {
  object-fit: scale-down !important;
}

.grid-relatert-innhold {
  @media (min-width: 550px) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: baseline;
    align-items: baseline;
  }
  gap: var(--wp--preset--spacing--40, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.grid-relatert-innhold > li {
  @media (min-width: 550px) {
    flex: 0 1 calc(50% - (var(--wp--preset--spacing--40, 2rem) / 2));
  }
  @media (min-width: 1024px) {
    flex: 0 1 calc(33% - (var(--wp--preset--spacing--40, 2rem) / 3));
  }
}

.grid-relatert-innhold > li:last-child:nth-child(odd) {
  margin-left: auto;
  margin-right: auto;
}

.wp-site-blocks {
  padding-block-start: 0;
  padding-block-end: 0;
}

body.home {
  
h1 {
  text-wrap: unset!important;
  hyphens: unset;
}
  .nhs-logo {
    font-size: 1.2em;
    width: 80px;
    text-transform: uppercase;
    word-break: break-word;
    display: block;
    margin: 0rem;
    line-height: 0.75;
    text-align: center;
    transition: color 0.5s 0.5s;
    
    & > a {
      color: #f6f6f4;
      text-decoration: none;
    }

  }
  
  .lenke-tilbake,
  .knapp-hjem {
    display: none;
  }

}

.skjev-tekst {
  transform: rotate(-7deg);
}

body:not(.home) {
  .nhs-logo {
    display: none;
  }
}

/* =============================================================================
   KATEGORI GRID - [nhs_kategorier] shortcode
   ============================================================================= */

.nhs-kategorier-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wp--preset--spacing--50, 2.5rem);
  max-width: 860px;
  margin: 0 auto;
  padding: var(--wp--preset--spacing--40, 2rem) 0;
}

.nhs-kategori-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
  flex: 0 0 calc(50% - var(--wp--preset--spacing--40, 2rem) / 2);
  @media (min-width: 600px) {
    flex: 0 0 calc(33.333% - var(--wp--preset--spacing--50, 2.5rem));
  }
  max-width: 240px;
  padding: 1rem;
  &:hover {
    transform: scale(1.05);
  }

  &:hover {
    background-color: #f7e6bf;
  }
}

.nhs-kategori-bilde img {
  width: 100%;
  aspect-ratio: 6/5;
  border-radius: 10px;
}

.nhs-kategori-navn {
  font-family: var(--wp--preset--font-family--heading, inherit);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  color: var(--wp--preset--color--contrast, #000);
}

.gg-menu {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--wp--preset--font-family--heading, inherit);
  padding: 0.25rem 0.375rem;
  gap: 0.75rem!important;
  border-radius: 5px;
  &:hover {
    background-color: rgba(247, 230, 191, .6);
    outline: 1px auto #333;
  }
  button {
    letter-spacing: 1px;
  }

  @media (max-width: 480px) {
    & > button {
    text-indent: 99999px;
      gap: 0;
      width: 1.5em;
    }
  }

}

.wp-block-navigation__responsive-container-open {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.nhs-menu-icon,
.wp-block-navigation__responsive-container-open svg {
  width: 27px;
  height: 27px;
  flex-shrink: 0;
}

.knapp-hjem,
.lenke-tilbake {
  font-size: 1rem;
  line-height: 27px;
  transition: opacity 0.5s 0.5s;
  border-radius: 5px;
  &:hover,
  &:focus {
    cursor: pointer;
    background-color: rgba(247, 230, 191, 0.6);
    outline: 1px auto #333;
  }
  img,
  svg {
    vertical-align: middle;
    width: 27px;
    height: 27px;
    transition: all 0.3s;
  }
}

.lenke-tilbake:hover,
.lenke-tilbake:focus {
  svg,
  img {
    transform: translateX(-10px);
  }
}

.lenke-tilbake {
  display: inline-block;
  padding: 0.25em 0.25rem 0.25em 1.25em;
  margin-right: 1rem!important;
  margin-left: -0.4rem!important;
}

.knapp-hjem {
  padding: 0.3rem 0.5rem;
  & a {
    width: 27px;
  }
}