/* Global CSS */

@font-face {
  font-family: 'Grape Nuts';
  src: url('https://www.mariaffe.com/resources/GrapeNuts-Regular.ttf');

}

@font-face {
  font-family: 'Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000';
  src: url('https://www.mariaffe.com/resources/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf');

}
@font-face {
  font-family: 'Nunito Sans';
  src: url('https://www.mariaffe.com/resources/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf');

}
@font-face {
  font-family: 'Rubik Doodle Shadow';
  src: url('https://www.mariaffe.com/resources/RubikDoodleShadow-Regular.ttf');

}

@font-face {
  font-family: 'Fredericka the Great';
  src: url('https://www.mariaffe.com/resources/FrederickatheGreat-Regular.ttf');

}


:root {
    --global-md-spacing: 10px;
    --global-body-font-family: 'Nunito Sans', Sans-serif;
    --global-palette-highlight: #ca5673;
   
}

body {
  
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  font-family: var(--global-body-font-family);
  color: #000000;
  display: flex;
  flex-direction: column;
  width: 85vw;
  max-width: 1980px;
  margin: 0 auto;
}


a {
  color: var(--global-palette-highlight);
  text-underline-offset: .1em;
  transition: all .1s linear;
    background-color: rgba(0,0,0,0);
    text-decoration: none;
}

button, 
input[type="submit"], 
input[type="reset"], 
input[type="button"] {
    border: none !important;
    outline: none !important;
   
}
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Chevre pil ned i menyen */ 
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}




/* -----------------------Meny ------------------------------ */
/* Navbar container background and positioning */
.menubar {
  color: #000000;
  position: sticky; /* Keeps menu at top when scrolling */
  top: 0;
  z-index: 1000;
  order:1;
  width: 100%;
  margin: 0 auto;
  padding: 15px 20px 20px 0px;
  display: flex;
  justify-content: space-between; /* Pushes logo left, links right */
  align-items: center; /* Vertically centers text */
}

.menu-logo-container {
   width:100%; 
    font-size: 24px;
    font-family: Grape Nuts;
    font-style: normal;
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: end;
}
/* Logo styling */
.logo {
  max-width: 200px;
}

/* Horizontal list layout */
.menu-links-container {
  display: flex;
  gap: 20px; /* Modern spacing between links */
  margin-right:50px; 
    font-weight: 300;
    font-size: 18px;
    font-family: var(--global-body-font-family);
    font-style: normal;
    color: var(--global-palette-highlight);
}

.drowdown-menu-item-container {
   display: flex;
    flex-direction: row;
}

/* Link item styling */
.menu-links-container a {
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Interactive hover state */
.menu-links-container a:hover {
color: #000000;
  text-decoration: underline dotted 2px var(--global-palette-highlight);
}

/* Base navigation styling */
.menu-links-container {
  display: flex;
  list-style: none;
}

/* Position the parent relatively so the dropdown aligns to it */
.menu-dropdown-parent {
  position: relative;
}

.menu-dropdown-parent ul,ol {
    padding-left: 10px;
    margin-left: 0;
    list-style-type: none;
}

/* Hide the dropdown menu list by default */
.menu-dropdown-child {
  display: none; 
  position: absolute;
  top: 100%; /* Places it directly below the nav item */
  left: 0;
  background-color: #ffffff;
  list-style: none;
  font-weight: 200;
  min-width: 150px;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
   overflow-wrap: break-word;
}


/* Display individual links inside the dropdown */
.menu-dropdown-child li a {
  display: block;
  text-decoration: none;
  padding-top:5px;
  padding-bottom:5px;
}

/* CRITICAL STEP: Show the dropdown list when the parent li is hovered */
.menu-dropdown-parent:hover .menu-dropdown-child {
  display: block;
}




/* Hamburger-CSS for større skjermer */
 .hamburger {
    display: none; 
  }
  .menu-toggle {
    display: none;
  }
/*
  .menu-links-container {
    position: static; 
    display: flex;
    flex-direction: row;
    width: auto;
    height: auto;
    background-color: transparent;
    padding-top: 0;
  }
*/



.header-standard-h2 {
  font-size: 24px;
	font-weight: 300;
  color: #000000;
		border-bottom:2px;
		border-bottom-style:dotted;
		border-bottom-color: #DD6D8880;
    margin-top:40px; 
    margin-bottom:25px;
    max-width: 70%
}
.header-standard-h3 {
  font-size: 20px;
	font-weight: 300;
  color: #000000;
			border-bottom:2px;
		border-bottom-style:dotted;
		border-bottom-color: #DD6D8880;
    margin-top:30px; 
    margin-bottom:25px;
    max-width: 70%;
}
.header-tiles-film-full-liste
{
	font-weight: 300;	
}
.header-tiles-film-full-liste a
{
	text-decoration: none;	
}
	
.footer-tiles-film-full-liste{
	font-weight: 300;
}

.footer-tiles-film-full-liste a
{
	text-decoration: none;	
}

/* Forside */ 



.forside-container {
width: 100%;
	display:flex;
    flex-direction: column;
	
}

.forside-banner {
width:100%;

}
.forside-banner img {
width:100%;

}

.forside-tekst-container {
width:100%;
	
}


.site-title {
    font-family: 'Fredericka the Great';
    font-weight: 300;
    color: #000000;
    font-size: 48px;
    width:100%;
    margin-bottom:0px;
    
}
.site-undertitle {
    font-family: Grape Nuts;
    font-weight: 200;
    color: #000000;
    font-size: 30px;
    width:100%;
    padding-left:40px;
    margin-top:0px;
}

.forside-changelog-table {
  width: 90%;
  border-collapse: collapse;
  margin: 20px 0;
	font-size:15px;
 font-weight:300;
	color:black;
	text-align: left; 
	vertical-align: top;
	border-bottom:1px dotted;
}

.forside-changelog-table td {
  padding: 4px; 
		border-bottom:1px dotted #919191;
}
.forside-changelog-table thead th {
	font-size:16px;
 font-weight:500; 
	border-bottom:2px dotted #919191;
	padding-left:3px;
	text-align: left;
}
/*Setter egne verdier på kolonne 1 og 2 */
.forside-changelog-table tr th:nth-child(1), table tr td:nth-child(1) { 
	font-weight:400; 
	width: 15%;
text-align: left;
vertical-align: top;}

.forside-changelog-table tr th:nth-child(2), table tr td:nth-child(2) { 
	width: 85%; 
padding-left:10px;}




.movieTitle {
font-family: var(--global-body-font-family);
  font-size: 22px;
  font-weight: 300;
	--global-md-spacing: 0.5rem;
}
.movieTitle a {
	text-decoration:none;
}
.movieTitle-long a {
	text-decoration:none;
}
.title-page-tagline {
  font-size: 18px;
	font-style:italic;
  font-weight:lighter;
}
.overviewText {
	font-size:16px;
}
.regular-text {
	font-size:16px;
	text-align:left;
	align-self:start;
}
.underline {
	text-decoration:underline;
}

.page-undertitles {
		border-bottom:2px;
		border-bottom-style:dotted;
		border-bottom-color: #DD6D8880;
}

/* Darkmode-knapp*/
.theme-toggle {
width:20px;
  height: 20px;
}
.darkify_switch_style {
width:25px;
  height: 25px;
}

.watchProviderIcon {
	width:40px;
	height: 40px; 
	padding:2px;
	border-radius: 13px;
}

.watchProviderList {
	display: flex;
	 flex-wrap: wrap; 
	align-items: center;
  justify-content: flex-start;
	padding-bottom:10px;
	margin-top:2px;
}
/*--------------------------- title-pages. Visninger av enkeltfilmer og enkeltserier -------------------------------*/

.title-page-movieTitle {
/*font-family: var(--global-body-font-family);*/
font-family: Fredericka the Great;
  font-size: 28px;
  font-weight: 600;
	
	padding-left:15px;
    padding-right:10px;
}

.title-page-movieTitle a {
	text-decoration:none;
}
.title-page-tagline {
  font-family: var(--global-body-font-family);
    font-size: 18px;
	font-style:italic;
  font-weight:200;
  padding-left:25px;
    padding-right:20px;
}
.title-page-overviewText {

	font-size:16px;
	font-weight:300;
}
.title-page-regular-text {

font-size:16px;
	font-weight:300;
}

/* Button-link design */
.title-page-film-liste-tmdb-button {
font-size:16px;
	font-weight:400;
	border-radius:20px; 
	margin-top:2px;
	background-color:#fec901B3; /*text-shadow:0 0 20px #fff;*/ 
	color:black; 
	font-size: 15px;
	height:auto; 
	width:auto;
    line-height: 1.6;
  display: inline-block;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s ease;
  padding: .4em 1em;
  border: 0;
  box-shadow: 0px 0px 0px -7px rgba(0,0,0,0);
}

.title-page-film-liste-tmdb-button:hover {
	background-color:#dd6d88; 
color:black;
	text-shadow:0 0 20px #fff;
}

/* Slutt på button-link design */

.title-page-film-liste-tmdb-main-container { 
	display: flex;  
flex-direction: column; 
justify-content: start; 
justify-items: stretch; 
padding-top:1%; 
padding-left:3%';
	}

.title-page-film-liste-tmdb-container {
	max-width:100%;
	align-self:center;
  display: grid;
  grid-template-columns: 75% 25%;
	grid-template-rows: auto auto auto auto;
	padding-top:1%; 
	margin-bottom:2%;
	padding-bottom: 30px;
		border-bottom:3px;
		border-bottom-style:dotted;
		border-bottom-color: #DD6D8880;
}
.title-page-film-liste-tmdb-bilde-container{
max-width:100%;
	display:grid;
justify-self: start;
	align-self:start;
	height:auto;
	grid-column: 2 / span 1; 
  grid-row: 3 / span 2;
	order:3;
	height:auto; 
	padding-left:20px; 
	padding-top:7%;
}

.title-page-film-liste-tmdb-tekst { 
	height:auto;
	font-size:16px; 
	justify-self: start;
	display:grid;
	width: 100%;
	align-self:start;
		order:2;
	grid-column: 1 / 3;
  grid-row: 2 / span 1;
	z-index: 10;
	background-color:#ffffff59;
	}
.title-page-film-liste-tmdb-backdrop { 
	display:grid;
	grid-column: 1 / 3; 
  grid-row: 1 / span 2;
	order:1;
  width: 100%;
  height: 25vw;
		opacity:0.35;
  overflow: hidden; /* Ensures nothing spills out of the container */
}

.title-page-film-liste-tmdb-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintain aspect ratio and cover the container */
  object-position:center; /* Focus on the top part of the image, cropping the bottom */
}

.title-page-film-liste-tmdb-tekst-specs-container { 
height:auto;
	font-size:16px; 	
	justify-self: start;
			display:grid;
			max-width: 100%;
	align-self:start;
		order:4;
	grid-column: 1 / 3; 
  grid-row: 3 / span 2;
		padding-left:5px;

		z-index: 10;
	  display: grid;
  grid-template-columns: 70% 30%;
	grid-template-rows: auto auto;
	}
		.title-page-film-liste-tmdb-tekst-specs-overview { 
padding-top:20px;
	grid-column: 1 / 2; 
  grid-row: 1 / span 1;		
}

		.title-page-film-liste-tmdb-tekst-specs-specs2-og-buttons { 
        
	grid-column: 1 / 2; 
  grid-row: 2 / span 1;	
}
		.title-page-film-liste-tmdb-tekst-specs-specs2-og-buttons p { 
        
	margin:0px;
    margin-top:5px;
}

.title-page-film-liste-tmdb-bilde{
	max-width: 100%; 
	object-fit: contain; 
}

/* Opplisting av skuespillere */

.credits-list {
	width:fit-content;
    column-count: 2;
    column-gap: 120px;
    min-width: 1000px;
    
}

.credits-list .list-of-actors:nth-child(20) {
  padding-top: 5px;
}

.list-of-actors {
	display:flex;
    align-items:center;
width:100%;
	justify-items: start;
    gap:15px;
border-bottom: 2px dotted #f95d8080;


}


.list-of-actors-image {
	max-width:70px;
	justify-self: start;
    align-items: center;
    padding-top:7px;
}

.list-of-actors-text {

	min-width:70%;
	overflow-wrap: break-word;
	justify-self: center;
    align-items: center;

}
.list-of-actors-text a {
	text-decoration: none;
}

/* Biografivisning på skuespillersøk */
.actor-search-bio-box {
		display:flex;
        align-items: center;
        gap:20px;
	margin-bottom: 20px;
	max-width: 600px;
}
.actor-search-bio-box-img {
	width:170px;
	margin-right: 10px;
		grid-column: 1 / 1; 
  grid-row: 1 / span 5;	
}
.actor-search-bio-box-img img {
    width: 100%;
}

.actor-search-bio-box-text {
		grid-column: 2 / 5; 
  grid-row: 2 / span 4;
	text-align:left;
	justify-self: start;
}

/* Buttons på tabs på pages */
.elementor-kit-14 {
  --e-global-color-accent: #fec901B3;
}
.elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"], .elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"] a {
  color: black;
}
.elementor-widget-n-tabs .e-n-tab-title-text {
	font-weight: 300;
}

/* ------------------------------tiles-css ------------------ -------------------------------*/

.film-liste-container {
    width:100%;
    padding:0px;
}
.tiles-film-liste-tmdb-main-container {   
	justify-content: start;
    float: none; 
	width:100%;
	display: flex;
    flex-wrap: wrap;
 /* grid-template-columns: repeat(auto-fit, minmax(175px, 175px));
	grid-template-rows: auto auto auto auto auto auto;
padding:1%; */
gap:10px;
margin-left:50px;

	}

.tiles-film-liste-tmdb-container {
	max-width:175px;
  display: grid;
  grid-template-columns: auto;
	grid-template-rows: auto auto auto;
	align-items: stretch; 
	padding-top:10px; 
	margin-bottom:2%;
	margin-right:3px;
	padding-bottom: 10px;
		border-bottom:3px;
		border-bottom-style:dotted;
		border-bottom-color: #DD6D8880;
	
}

.tiles-film-liste-tmdb-bilde-container{
max-width:100%;
	display:grid;
justify-self: start;
	align-self:start;
	height:auto;
	grid-column: 1 / span 1; 
  grid-row: 1 / span 1;
	order:1;
	height:270px;

}

.tiles-film-liste-tmdb-tekst { 
	height:100px;
	display:grid;
	max-width: 170px;
	align-items: start;
    justify-items: start;
		order:2;
	grid-column: 1 / span 1; 
  grid-row: 2 / span 1; 
  padding-top:5px;
font-size: 18px;;
    /* Får teksten til å først wrappe, så resizer størrelsen for å få det til å passe */
   /* container-type: inline-size;
    resize: both;
  overflow: auto;*/
	}

.tiles-film-liste-tmdb-tekst-specs-og-buttons { 
height:auto;
	font-size:15px; 	
		font-weight:lighter;
	justify-items: start;
	 align-items: start; 
			display:grid;
			max-width: 172px;
	min-height:130px;
		order:3;
	grid-column: 1 / span 1; 
  grid-row: 3 / span 1;
	
	}
.tiles-film-liste-tmdb-tekst-specs-og-buttons p { 
    margin: 0px;
    margin-top:5px;
    align-self: start;
    min-height: 40px;
}


.tiles-film-liste-tmdb-bilde img{
	width: 100%; 
}
.tiles-film-liste-tmdb-bilde{
	max-width: 175px; 
	object-fit: contain; 
}
.tiles-regular-text {
	font-size:16px;
	font-weight:300;
    place-items: start;
}
.tiles-film-liste-tmdb-button {
		font-size:15px;
	font-weight:lighter;

}
.tiles-movieTitle {
	min-height:65px;
	max-height:78px;
    max-width:  172px;
    min-width: 160px;
    margin:0;
    align-self: start;
    /*overflow-wrap: break-word; /* Wraps text first if it's too long */
  /*font-size: clamp(16px, 18px, 22px);*/ /* Resizes to fit if it overflows */
}
/*
.tiles-movieTitle-long {
	font-size:16px;
	min-height:65px;
	max-height:78px;
     width: 172px;
    margin:0;
    align-self: start;
     overflow-wrap: break-word; /* Wraps text first if it's too long */
     /*
  font-size: clamp(16px, 8cqi, 32px); /* Resizes to fit if it overflows */

/*}*/

.tiles-movieTitle a {
	text-decoration:none;
    max-width: 172px;
}
.tiles-movieTitle-long a {
	text-decoration:none;
    max-width: 172px;
}
.tiles-genre-text {
	min-height:60px;
		font-size:16px;
	font-weight:lighter;
	margin-bottom:5px;
	 align-self: start; 
}

#genre-list {
    padding-top:15px;
    padding-bottom:10px;
}

#tiles-media-type {
margin-bottom:0px;

}


/* Link hover på linkene, og hele boksen får effekt for å vise hvilken film du holder over */
.tiles-film-liste-tmdb-container:has(.tiles-film-liste-tmdb-bilde:hover) {
 opacity: 0.75; 
}

.tiles-film-liste-tmdb-container:has(.tiles-movieTitle:hover){
   opacity: 0.75; 
}

.tiles-film-liste-tmdb-container:has(.tiles-movieTitle-long:hover) {
   opacity: 0.75; 
}



/* ------------------------------Neste episode-visning------ -------------------------------*/
.next-episode-tmdb-main-container {   
	margin-left: auto;
    margin-right: auto;
	justify-content: center;
		align-items: stretch; 
    float: none; 
	max-width:100%;
	display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 500px));
	grid-template-rows: auto;
padding-top:1%; 
padding-left:1%;
	padding-right:1%;
	}

.next-episode-tmdb-container {
	/*max-width:100%;*/
  display: grid;
  grid-template-columns: 30% 70%;
	grid-template-rows: auto;
	align-items: stretch; 
	padding-top:10px; 
	margin-bottom:2%;
	margin-right:10px;
	margin-left:10px;
	padding-bottom: 10px;
		border-bottom:3px;
		border-bottom-style:dotted;
		border-bottom-color: #DD6D8880;
}

.next-episode-tmdb-bilde-container{
max-width:100%;
	display:grid;
justify-self: start;
	align-self:start;
	height:auto;
	grid-column: 1 / 2; 
  grid-row: 1 / 2;
	order:1;
	height:auto; 
	padding:3%; 
}

.next-episode-tmdb-tekst { 
	height:100%;
	display:grid;
	max-width: 100%;
	align-items: start;
	justify-items: start;
		order:2;
	grid-column: 2 / 3; 
  grid-row: 1 / 2;
	padding:3%; 
	padding-left: 5%;
	padding-top:0;
	}

.next-episode-tmdb-bilde img{
	max-width: 100%; 
	object-fit: contain; 
}
.next-episode-regular-text {
	font-size:16px;
	font-weight:300;
	place-items: center;
}

.next-episode-movieTitle {
	font-size:18px;
	max-height:100%;
	align-self: start;
	justify-self: start;
}

.tiles-movieTitle a {
	text-decoration:none;
}

.next-episode-genre-text {
	min-height:60px;
		font-size:16px;
	font-weight:300;
	margin-bottom:5px;
	 align-self: start; 
}


/* ------------------------------Søkeside -------------------------------*/

  .search-main-container
{
  display: flex;
  flex-wrap:wrap;
  flex-direction: row;
  justify-content: space-between;

	width: 100%;
	margin: 0 auto;
	padding: 0;
	
}

.search-form-container {
flex: 0 0 45%;
display: flex;
flex-direction: column;

}




label {
	font-size:16px;
 font-weight:300;	
}

.search-form  {                    
  justify-content: center;
	max-width: 100%;
	align-self:center;
	display:grid;
	grid-column: 1 / 2; 
  grid-row: 2 / span 3;
	order:4;
		padding-top:25px;
}

.search-form form {
display: flex;                    
  justify-content: center;
	font-weight:300;
    border:none !important;
    outline:none !important; 
}


/* -------------------Valgomat----------------------------------- */

.valgomat-main-container
{
  display: grid;
  grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;

	width: 100%;
	margin: 0 auto;
	padding: 0;
	
}
.sharky-valgomat-bilde-container {
width: 100%;
height:30vw;
grid-column: 1 / 3; 
  grid-row: 1 / 1;
  overflow: hidden;
}
.sharky-valgomat-bilde-container img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintain aspect ratio and cover the container */
  object-position:center; /* Focus on the top part of the image, cropping the bottom */

}

.valgomat-main-container h1 {
   	grid-column: 1 / 3; 
  grid-row: 2 / 2; 
}
.valgomat-intro-container {
width: 100%;
	grid-column: 1 / 3; 
  grid-row: 3 / 3;
  margin-bottom: 20px;
}


.valgomat-film-form-container {
width: 100%;
grid-column: 1 / 2; 
  grid-row: 4 / 6;

}

.valgomat-serier-form-container {
width: 100%;
grid-column: 2 / 3; 
  grid-row: 4 / 5;
  justify-self: end;

}
.genre-container {
 flex: 1;  
		max-width:80%;
         border:none !important;
    outline:none !important; 
    padding-bottom:10px;
}
.genre-container label{
 display: block;
}

.timeframe-container {
 flex: 1;
	max-width:80%;
/*	margin-left:15px; */
 border:none !important;
    outline:none !important; 
    padding-bottom:10px;
}

.timeframe-container label{
 display: block;
}

.search-form fieldset {
	max-width:380px;
}

.search-button{
	border-radius:20px;margin-top:2px;
    background-color:#f95d80B3; 
	text-shadow:0 0 20px #fff; color:black; 
	font-size: 15px;
	height:35px; 
	width:fit-content;
	padding-left:20px;
    padding-right:20px;
    border: 0px;
}
.search-button:hover{
	background-color:#f95d8080;
	color:black;
}

.search-button-reset {
background-color:#fff;
margin-top:15px;
font-weight:200;
font-style:italic;
border-radius:20px;
padding:10px 20px;
box-shadow: 0 4px 6px gainsboro;

}

.search-button-reset:hover {
box-shadow: 0 4px 6px #f95d8080;
}



/* ----------- Navnesøk søkeside --------------*/
	.name-search-wrapper {
	display:flex;
	flex-direction: column;

}
form.name-search-form input[type=text] {
  padding: 10px;
  font-size: 15px;
  border: 1px solid grey;
  float: left;
  width: 70%;
  background: #f1f1f1;

}

form.name-search-form button {
	border-radius:20px;
	margin-top:2px;
	margin-left:10px;
	background-color:#f95d80B3; 
	text-shadow:0 0 20px white; 
	color:black; 
	font-size: 15px; 
	font-weight:300;
	height:35px; 
	width:fit-content;
	padding-left:20px;
	padding-right:20px;
}

form.name-search-form button:hover {
	background-color:#f95d8080;
	color:black;
}

form.name-search-form::after {
  content: "";
  clear: both;
  display: table;
}
			  
/* Tittelsøk */

   .title-search-wrapper {
        position: relative;
        max-width: 700px;
      }
      
      #title-input {
        width: 80%;
        padding: 10px 14px;
        font-size: 15px;
        border: 1px solid #ccc;
        border-radius: 6px;
        box-sizing: border-box;
		font-size:16px;
 font-weight:300;
      }
      #title-suggestions-list {
        position: absolute;
        top: 47%;
        left: 0;
        right: 0;
        border: 1px solid #ccc;
        border-top: none;
        border-radius: 0 0 6px 6px;
        background: #fff;
        max-height: 120px;
        overflow-y: auto;
        z-index: 1000;
        list-style: none;
        margin: 0;
        padding: 0;
        display: none;
		font-size:16px;
 		font-weight:300;
        width: 80%;
      }
      #title-suggestions-list li {
        padding: 10px 14px;
        cursor: pointer;
      }
      #title-suggestions-list li:hover,
      #title-suggestions-list li.active {
        background-color: #f0f0f0;
      }
			  
			  
.string-search-form{
	display:grid;
	grid-column: 1 / 2; 
  grid-row: 5 / span 2;
	order:3;
	
}			  
			  
	.title-search-wrapper {
	display:flex;
	flex-direction: column;
	
}
form.title-search-form input[type=text] {
  padding: 10px;
  font-size: 15px;
  border: 1px solid grey;
  float: left;
  width: 100%;
  background: #f1f1f1;

}

form.title-search-form button {
	border-radius:20px;
	margin-top:2px;
	margin-left:10px;
	background-color:#f95d80B3; 
	text-shadow:0 0 20px white; 
	color:black; 
	font-size: 15px; 
	font-weight:300;
	height:35px; 
	width:fit-content;
	padding-left:20px;
	padding-right:20px;

}

form.title-search-form button:hover {
	background-color:#f95d8080;
	color:black;
}

form.title-search-form::after {
  content: "";
  clear: both;
  display: table;
}




/*- Søkestreng - */

.string-search-form{
	display:grid;
	grid-column: 1 / 2; 
  grid-row: 5 / span 2;
	order:3;
	
}
.filmsearch {
	display:flex;
	flex-direction: row;
	padding-top:15px;
}
form.filmsearch input[type=text] {
  padding: 10px;
  font-size: 15px;
  border: 1px solid grey;
  float: left;
  width: 70%;
  background: #f1f1f1;
}

form.filmsearch button {
	border-radius:20px;margin-top:2px;background-color:#f95d80B3; text-shadow:0 0 20px #fff; color:black; font-size: 15px; font-weight:300;height:35px; width:70px;padding-left:20px;padding-right:20px;
}

form.filmsearch button:hover {
	background-color:#f95d8080;
	color:black;
}

form.filmsearch::after {
  content: "";
  clear: both;
  display: table;
}

/*-----------------------------
 *skuespillere ----------------------------*/

.actors-main-container
{
  display: grid;
  grid-template-columns: 70% 30%;
	grid-template-rows: auto;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	
}
.actors-list-container {
column-count: 3;
    column-gap: 40px;
	padding-top:30px;
		grid-column: 1 / 2; 
  grid-row: 1 / 3;
	order:1;
}

.actors-sharky-container figure{
	font-size:15px;
	font-weight:lighter;
	font-style:italic;
}
.actors-sharky {
		display:grid;
	height:auto;
	grid-column: 2 / 3; 
  grid-row: 1 / 6;
	order:2;
	padding-top:20px;

}
.actors-sharky-container img {
	padding-left:15px;
	padding-bottom: 15px;
	max-width: 80%;
}

.actors-main-container a
{
	text-decoration-line: underline;
  text-decoration-style: dotted; 
	}	


  .name-search-wrapper {
        position: relative;
        max-width: 700px;
      }
      #name-input {
        width: 80%;
        padding: 10px 14px;
        font-size: 15px;
        border: 1px solid #ccc;
        border-radius: 6px;
        box-sizing: border-box;
		font-size:16px;
 font-weight:300;
      }
      #suggestions-list {
        position: absolute;
        top: 47%;
        left: 0;
        right: 0;
        border: 1px solid #ccc;
        border-top: none;
        border-radius: 0 0 6px 6px;
        background: #fff;
        max-height: 120px;
        overflow-y: auto;
        z-index: 1000;
        list-style: none;
        margin: 0;
        padding: 0;
        display: none;
		font-size:16px;
 		font-weight:300;
        width: 80%;
      }
      #suggestions-list li {
        padding: 10px 14px;
        cursor: pointer;
      }
      #suggestions-list li:hover,
      #suggestions-list li.active {
        background-color: #f0f0f0;
      }
			  
			  
.string-search-form{
	display:grid;
	grid-column: 1 / 2; 
  grid-row: 5 / span 2;
	order:3;
	
}			  
	



/* ------------------------------CSS for tablet og smalere vindu -------------------------------*/

@media (max-width: 1000px) and ( min-width:600px) {

body {
  width: 90vw;
}

    /* Øvrig */	

.menu-logo-container {
   width:100%; 
    font-size: 18px;

}
/* Logo styling */
.logo {
  max-width: 200px;
}
.menu-logo-container p {
    display:none;
}

	  .elementor-246 .elementor-element.elementor-element-2865336 {
    --e-con-grid-template-columns: repeat(1, 1fr);
    --e-con-grid-template-rows: repeat(1, 1fr);
			--grid-auto-flow: row;
            
	}
	
	.genre-list-main-container {   
	margin-left: auto;
    margin-right: auto;
	justify-content: center;
    float: none; 
	max-width:100%;
	display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 170px));
	grid-template-rows: auto;
	}
	
.genre-list-item-container{
	max-width:100%;
  display: grid;
  grid-template-columns: auto;
	grid-template-rows: auto;
	align-items: stretch;
	padding-top:10px; 
	margin-bottom:2%;
	margin-right:3px;
	padding-bottom: 10px;
		border-bottom:3px;
		border-bottom-style:dotted;
		border-bottom-color: #DD6D8880;
}

.genre-list-icon{
/*max-width:100%;*/
	display:grid;
	grid-column: 1 / 2; 
  grid-row: 1 / 2;
	order:1;
	max-height:200px; 
	padding:3%; 
}

.genre-list-title {
		display:grid;
	 align-self: center;
			order:2;
	grid-column: 1 / 2; 
  grid-row: 2 / 3;
	justify-self: center;
}

.forside-tekst-container {
	display:grid;
	grid-column: 1 / 2; 
  grid-row: 2 / span 1;
	order:3;
	
}
.forside-bilde-container {
	display:grid;
	grid-column: 2 / 3; 
  grid-row: 2 / span 1;
	order:3;	
}


.forside-main-title {
		display:grid;
	grid-column: 1 / 2; 
  grid-row: 1 / span 1;
}	

	
/* ------------------------------Søkeside -------------------------------*/



.search-sharky-container{
		display:none;
	}
.sharky-holmes {
		display:none;
}


.search-form  {                    
  justify-content: center;
	align-self:center;
	display:grid;
	grid-column: 1 / 2; 
  grid-row: 2 / span 2;
	order:3;
	max-width:100%;
}

.search-form form {
display: flex;                    
  justify-content: center;
}

.genre-container {
 flex: 1;  
	padding:5px;
	max-width:80%;
	
}

.timeframe-container {
 flex: 1;
padding:5px;
		max-width:80%;
	margin-left:15px;
}

.search-form fieldset {
	max-width:380px;
}

	
/*-----------------------------
 *skuespillere ----------------------------*/
.actors-main-container
{
  display: grid;
  grid-template-columns: auto;
	grid-template-rows: auto;
	
}
.actors-list-container {
column-count: 3;
    column-gap: 40px;
	padding-top:30px;
}
	.actors-sharky-container {
	display:none;
}
	
.actors-main-container a
{
	text-decoration: none;
	}


.credits-list {
    width: 100%;
    column-count: 1;
}
.list-of-actors {
width:100%;
}
	
.list-of-actors-image {
	max-width:70px;
    align-items: center;
}	

.list-of-actors-text {
align-items: center;
}


}

/* CSS for mobil */

@media (max-width: 600px) {

html,body {
  /*width: 95vw;*/
    width: 96%;
  max-width: 96vw;
  overflow-x: hidden;
  padding-left:2px;
  padding-right:1px;
}

.header-standard-h2 {
  font-size: 22px;
  max-width: 100%;
}
.header-standard-h3 {
  font-size: 18px;
  max-width: 100%;
}


/* meny */
.menu-logo-container img{
 max-width: 150px;
}


.menu-logo-container p {
 display: none;
}

  /* 2. Build the Hamburger Icon */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  cursor: pointer;
  z-index: 100; /* Must stay on top */
  margin-right:10px;
}

.bar {
  width: 100%;
  height: 3px;
  background-color: var(--global-palette-highlight);
  border-radius: 2px;
  transition: all 0.3s ease; /* Smooth transformation */
}

/* 3. Mobile Mobile Menu Setup */
.menu-links-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 45px;
  right: -100%; /* Initially hidden off-screen */
  width: 70%;
  height: 100vh;
  background-color: #919191;
  padding-top: 20px;
  gap: 1.5rem;
  transition: right 0.3s ease; /* Smooth slide-in */
   z-index: 90; /* Higher than overlay, lower than button */
}

.menu-links-container li {
  list-style: none;
   text-align: right;
   display: block;
}

.drowdown-menu-item-container {
   text-align: right;
   display: block;
   align-items: center;
}

.menu-links-container a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
 
  padding-right:15px;
}

.menu-dropdown-child {
  background-color: #6B6B6B;
font-size: 15px;
position: absolute;
z-index: 95; 
}

/* Invisible Outside-Click Overlay (Hidden by default) */
.menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3); /* Dim background (optional, use transparent if preferred) */
  z-index: 80; /* Sits underneath the menu but covers the website content */
}

/* 4. The Pure CSS Click Magic (:checked selector) */
/* Slide the menu in when checkbox is checked */
.menu-toggle:checked ~ .menu-links-container {
  right: 0;
}

/* Transform hamburger into an "X" when checked */
.menu-toggle:checked ~ .hamburger .bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.menu-toggle:checked ~ .hamburger .bar:nth-child(2) {
  opacity: 0; /* Hide middle bar */
}

.menu-toggle:checked ~ .hamburger .bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* 2. Show the overlay to capture outside clicks */
.menu-toggle:checked ~ .menu-overlay {
  display: block;
}


/* Tiles*/

.header-tiles-film-full-liste p {
padding:0px;
}

.tiles-film-liste-tmdb-container {
	max-width:160px;
  
}
.tiles-film-liste-tmdb-bilde-container{
	height:250px;

}

.tiles-film-liste-tmdb-tekst {
    max-height:fit-content;
}
.tiles-film-liste-tmdb-tekst-specs-og-buttons {
    margin-top:10px;
}

	.tiles-film-liste-tmdb-main-container {   
margin-left:0px;
gap:5px;
justify-content: center;
	}

	.title-page-film-liste-tmdb-tekst-specs-overview { 
			grid-column: 1 / 2; 
  grid-row: 1 / span 1;	
		padding-right:5px;
	}	

.title-page-film-liste-tmdb-tekst-specs-specs2-og-buttons { 
	grid-column: 1 / 3; 
  grid-row: 2 / span 1;	
	}





.site-title {
    font-family: 'Fredericka the Great';
    font-weight: 200;
    color: #000000;
    font-size: 30px;
    width:100%;
}

.site-undertitle {
    font-weight: 200;
    font-size: 20px;

}
	
/*Changelog-tabell */

.forside-changelog-table {
		width:100%
	}
.forside-changelog-table tr th:nth-child(1), table tr td:nth-child(1) { 
	font-weight:400; 
	width: 20%; }

.forside-changelog-table tr th:nth-child(2), table tr td:nth-child(2) { 
	width: 80%; 
padding-left:8px;}	
	
/*Enkeltoppslag-CSS for små skjermer */
	.title-page-film-liste-tmdb-container {
	max-width:100%;
	align-self:center;
  display: grid;
  grid-template-columns: 100%;
	grid-template-rows: auto auto auto auto;

}
.title-page-film-liste-tmdb-bilde-container{
	order:4;
	grid-column: 1 / 3;
  grid-row: 5 / span 1;
	width:60%;
	/*Filmplakaten flyttes til bånn istedenfor */
	
}

.title-page-film-liste-tmdb-tekst { 
		order:2;
	grid-column: 1 / 3;
  grid-row: 2 / span 1;

	}

    .title-page-movieTitle {
font-size: 22px;
    }

.title-page-film-liste-tmdb-backdrop { 
height: 40vw;
max-height: 400px;
	grid-column: 1 / 3; 
  grid-row: 1 / span 2;
	order:1;
}


.title-page-film-liste-tmdb-tekst-specs-container { 

		order:3;
	grid-column: 1 / 3; 
  grid-row: 3 / span 2;

	}
	
			.title-page-film-liste-tmdb-tekst-specs-overview { 
	grid-column: 1 / 3; 
	
}
	
.credits-list {
    width: 100%;
    column-count: 1;
}
.list-of-actors {
width:100%;
}
	
.list-of-actors-image {
	max-width:70px;
    align-items: center;
}	

.list-of-actors-text {
align-items: center;
}
	
	
/* ------------------------------Søkeside -------------------------------*/
.search-main-container
{
  display: flex;
  flex-direction: column;

}

.search-form-container {
flex: auto;
}

	
	.search-sharky-container{
		display:none;
	}
.sharky-holmes {
		display:none;
}


.search-form  {                    
  justify-content: center;
	align-self:center;
	display:grid;
	grid-column: 1 / 2; 
  grid-row: 3 / span 2;
	order:3;
	max-width:100%;
}

.search-form form {
display: flex;                    
  justify-content: center;
	flex-direction: column;
}

.genre-container {
	padding-left: 5px;
	max-width:100%;
}

.timeframe-container {
		max-width:100%;
}

.search-form fieldset {
	max-width:400px;
}
	
.actors-list-column-setup {
	column-count: 1; 
max-width:100%;
	min-width:300px;
}
	
/*- Søkestreng - */

.string-search-form{
	display:grid;
	grid-column: 1 / 2; 
  grid-row: 2 / span 1;
	order:2;

	
}
.filmsearch {
	display:flex;
	flex-direction: row;
	padding-top:15px;
}
form.filmsearch input[type=text] {
  padding: 10px;
  font-size: 15px;
  border: 1px solid grey;
  float: left;
  width: 80%;
	height:50px;
  background: #f1f1f1;
}

form.filmsearch button {
	border-radius:20px;
	margin-top:2px;
	background-color:#f95d80B3; 
	text-shadow:0 0 20px #fff; 
	color:black; 
	font-size: 15px; 
	height:20px; 	
	width:75px;
	padding-left:20px;
	padding-right:20px;
}

form.filmsearch button:hover {
	background-color:#f95d8080;
	color:black;
}

form.filmsearch::after {
  content: "";
  clear: both;
  display: table;
}

/*-----------------------------
 *skuespillere ----------------------------*/
.actors-main-container
{
  display: grid;
  grid-template-columns: auto;
	grid-template-rows: auto;
	
}
.actors-list-container {
column-count: 2;
    column-gap: 25px;
	padding-top:30px;
}
		.actors-sharky-container {
	display:none;
}

	/* Global*/
	
	  .entry-content-wrap {
    padding: 0.5rem;
	}
.actors-main-container a
{
	text-decoration: none;
	}	


.name-search-wrapper {
        position: relative;
        max-width: 500px;
        	display:flex;
	flex-direction: column;
	padding-top:15px;
	 gap: 10px;
      }
   #name-input {
        width: 100%;
		}
    #suggestions-list {
     
        width: 100%;
         top: 50%;
      }   

  .title-search-wrapper {
        position: relative;
        max-width: 500px;
        	display:flex;
	flex-direction: column;
	padding-top:15px;
	 gap: 10px;
      }	
   #title-input {
        width: 100%;
    
		}
    #title-suggestions-list {
     
        width: 100%;
         top: 50%;
      }
    

      .actor-search-bio-box {
        gap:10px;

}
.actor-search-bio-box-img {
	width:140px;
	margin-right: 5px;
}


/* -------------------Valgomat----------------------------------- */

.valgomat-main-container
{
  display: grid;
  grid-template-columns: 1fr;
	grid-template-rows: auto;

}
.sharky-valgomat-bilde-container {
width: 100%;
height:40vw;
grid-column: 1 / 1; 
  grid-row: 1 / 1;
  overflow: hidden;
}
.sharky-valgomat-bilde-container img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintain aspect ratio and cover the container */
  object-position:center; /* Focus on the top part of the image, cropping the bottom */

}

.valgomat-main-container h1 {
   	grid-column: 1 / 1; 
  grid-row: 2 / 2; 
}
.valgomat-intro-container {
width: 100%;
	grid-column: 1 / 1; 
  grid-row: 3 / 3;
  margin-bottom:10px;
}


.valgomat-film-form-container {
width: 100%;
grid-column: 1 / 1; 
  grid-row: 4 / 4;

}

.valgomat-serier-form-container {
width: 100%;
grid-column: 1 / 1; 
  grid-row: 5 / 5;


}
	
}