/* 
Theme Name: Yippie V2
Theme URI: https://yippieharnosand.se
Description: Custom theme for Yippieharnosand.se based on Hello by Elementor
Author: Alltid Marknadsbyrå
Author URI: https://alltid.net
Template: hello-elementor
Version: 1.0.1
Text Domain: yippiev2
License: Private use only
*/

.yippie-single-post
{
	font-size: 14px;
}

.yippie-single-post .yippie-post-info ul li a
{	
	color: #c36;
	font-weight: 500;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.yippie-single-post .yippie-post-info ul li a span
{
	color: #414141;
	font-weight: 400;
	letter-spacing: 0.5px;
}



/* FAKTABOXAR */

.articleBox
{
	background-color: #fcfcfc;
	max-width: 400px;
	padding: 0;
	margin-bottom: 20px;
}
.articleBox h5.boxTitle
{
	color: #ffffff;
	padding: 10px;
	margin-bottom: 0;
	font-weight: 800;
	font-size: 16px;
	text-transform: uppercase;
}
.articleBox .boxText
{
	padding: 10px;
	margin-top: 0;
	font-size: 14px;
}
.articleBox .boxText p
{
	margin-bottom: 2px;
}


/* article box colors */

.articleBoxRed .boxText
{
	border: 1px #db2626 solid;
}

.articleBoxRed h5.boxTitle
{
	background-color: #db2626;
}

.articleBoxGrey .boxText
{
	border: 1px #6f6f6f solid;
}

.articleBoxGrey h5.boxTitle
{
	background-color: #6f6f6f;
}

.articleBoxBlue .boxText
{
	border: 1px #3243bd solid;
}

.articleBoxBlue h5.boxTitle
{
	background-color: #3243bd;
}

.articleBoxBlack .boxText
{
	border: 1px #000000 solid;
}

.articleBoxBlack h5.boxTitle
{
	background-color: #000000;
}


/* SLUT PÅ FAKTABOXAR */


/* Gemensam stil för alla knappar */
.nav-allt a,
.nav-yippie a,
.nav-tv a,
.nav-pod a {
    position: relative;
    display: inline-block; /* så att pilen kan positioneras i förhållande till länken */
}

/* Själva pilen (dold som standard) */
.nav-allt a::after,
.nav-yippie a::after,
.nav-tv a::after,
.nav-pod a::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8px; /* justera så pilen hamnar precis under navigationen */
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #000; /* byt färg så den matchar bakgrunden på respektive knapp */
    opacity: 0;
}

.nav-yippie a::after
{
	border-top: 9px solid #CC1717;
}
.nav-tv a::after
{
	border-top: 9px solid #9C17CC;
}
.nav-pod a::after
{
	border-top: 9px solid #F8D328;
}

/* Hem / ALLT */
body.home .nav-allt a::after {
    opacity: 1;
}

/* Yippie-sidan (byt .page-id-123 mot rätt id eller slug-klass) */
body.page-id-25666 .nav-yippie a::after {
    opacity: 1;
}

/* Härnösand.tv-sidan */
body.page-id-24972 .nav-tv a::after {
    opacity: 1;
}

/* Härnösandspodden-sidan */
body.page-id-25672 .nav-pod a::after {
    opacity: 1;
}




/* NUMMER */

#content-area
{
	background-color:#fff;
	padding: 10px;
}
#content-area .NumberWrapper
{
	max-width: 880px;
	margin-bottom: 70px;
	text-align: center;
}

#content-area .NumberWrapper .SectionTitle
{
	font-size: 120px;
	color: #656565;
	width: 375px;
	float: left;
	height: 150px;
	margin: 0;
	padding: 25px 0 0 0;
	text-align: center;
	border-left: 3px #ffffff solid;
	font-weight: bold;
	font-family: "Chivo", sans-serif;
}
#content-area .NumberWrapper h2.SectionTitleSpecial
{
	font-size: 38px;
	color: #b5b5b5;
	width: 438px;
	float: left;
	height: 150px;
	margin: 0;
	padding: 35px 0 0 0;
	text-align: center;
	border-left: 0px;
}
#content-area .NumberWrapper .SectionTitleSpecial span
{
	display: block;
	font-size: 80px;
	padding-top: 40px;
	line-height: 1;
	padding: 0;
	margin: 0;
}
.NumberWrapper .NumberSpecial
{
	width: 145px;
	height: 200px;
	float: left;
	border-left: 1px #ffffff solid;
	position: relative;
}
.NumberWrapper .Number
{
	width: 125px;
	height: 175px;
	float: left;
	border-left: 1px #ffffff solid;
	position: relative;
}

.NumberWrapper .NumberInfo
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	/*background: url('img/redopa2.png') repeat;*/
	/*background-color: rgba(255,255,255,0.83);*/
	z-index: 10;
	display: none;
	color: #4a4a4a;
	text-decoration: none;
}
#content-area .NumberWrapper .Number:hover .NumberInfo, 
#content-area .NumberWrapper .NumberSpecial:hover .NumberInfo
{
	display: block !important;
	z-index: 99;
}

#content-area .NumberWrapper .NumberInfo .NumberInfoContent
{
	color: #2c2c2c;
	margin-top: 50px;
	position: absolute;
	bottom: 0;
	text-align: center;
	background-color: rgba(255,255,255,0.80);
	width: 100%;
	height: 40%;
	font-family: "Oswald",sans-serif;
	text-transform: uppercase;
}
#content-area .NumberWrapper .NumberInfo .NumberInfoContent h2
{
	color: #2c2c2c;
}
.NumberWrapper .NumberInfo p
{
	font-size: 16px;
}
.NumberWrapper .EmptyNumber
{
	background-color: #f7f7f7;
	height: 175px;
}

.NumberWrapper .Number.NotPublished
{
	background-color: #e7e7e7;
	cursor: default;
}
.NumberWrapper .Number.NotPublished h2
{
	color: #bababa;
	font-size: 52px;
	margin-bottom: 15px;
	margin-top: 40px;
}
.NumberWrapper .Number.NotPublished span
{
	font-size: 20px;
	display: block;
	line-height: 1;
}

.NumberWrapper .Number.NotPublished a
{
	text-decoration: none;
	color: #a1a1a1;
	font-size: 11px;
}
.NumberWrapper .Number.NotPublished p
{
	text-decoration: none;
	color: #d79fa6;
	margin-bottom: 0;
	font-size: 14px;
}

#content-area .NumberWrapper .Number img,
#content-area .NumberWrapper .NumberSpecial img
{
	width: 100%;
	height: 100%;
	opacity: 0.6;
}


#content-area .NumberWrapper .Number:hover img,
#content-area .NumberWrapper .NumberSpecial:hover img
{
	width: 100%;
	height: 100%;
	opacity: 1;
-webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.46);
-moz-box-shadow:    0px 0px 4px 0px rgba(0, 0, 0, 0.46);
box-shadow:         0px 0px 4px 0px rgba(0, 0, 0, 0.46);
	z-index: 98;
	position: relative;
}


/* EOF NUMMER */


.tag-wrapper .e-loop-item
{
	
}

.tag-wrapper .e-loop-item.type-klipp .elementor-widget-image img
{
	border-bottom: 10px #8a2d7d solid;
}

.tag-wrapper .e-loop-item.type-post .elementor-widget-image img
{
	border-bottom: 10px #DA2929 solid;
}

.tag-wrapper .e-loop-item.type-podd .elementor-widget-image img
{
	border-bottom: 10px #FAD83F solid;
}

.tag-wrapper .loop-post-title .elementor-heading-title {
line-height: 1.2;
min-height: 2.4em;  /* ca 2 rader */
}



div.wpforms-container-full .wpforms-form .wpforms-list-inline ul.wpforms-image-choices-classic li
{
  max-width: 160px;
}

div.wpforms-container-full .wpforms-form button[type="submit"].rosta-btn
{
	background-color: #266e26;
	color: #fff;
	font-weight: 600;
}


.reportage-tidning-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reportage-tidning-image img {
  max-width: 180px; /* justera */
  height: auto;
  display: block;
}

.reportage-tidning-info a.reportage-tidning-title-link {
  color: #db2626;
}



/*
*
*	PRENUMERATIONER
*
*/

#PrenWrapper fieldset {
    background-color: #f5f5f5;
    border: 1px solid #ececec;
    border-radius: 5px;
    margin-top: 10px;
    padding: 10px 10px 30px 10px;
    margin-bottom: 50px;
}

#PrenWrapper .ifield, 
#PrenWrapper #r_birthdate,
#PrenWrapper #b_email
{
	width: 90%;
	padding: 7px 3px;
	max-width: 500px;
	font-size: 14px;
}
#PrenWrapper fieldset p
{
	margin-bottom: 0px;
	margin-top: 8px;
}
#PrenWrapper fieldset p span
{
	color: #919191;
	font-style: italic;
	font-size: 13px;
}
#PrenWrapper fieldset i
{
	color: #9e9e9e;
	font-size: 13px;
	padding-right: 3px;
}

#PrenWrapper h3
{
	font-size: 26px;
	margin-bottom: 2px;
}

#PrenWrapper .ifielderror {
    border: 1px solid red;
    box-shadow: 0 0 3px 0 #e71932 !important;
}

#PrenWrapper.PrenThankYou
{
	border: 1px #d3d3d3;
	background-color: #f7f7f7;
	margin-top: 30px;
	padding: 15px;
}

#PrenWrapper.PrenThankYou ul li
{
	margin-left: 20px;
}

#PrenWrapper.PrenThankYou ul
{
	margin-bottom: 40px;
	padding-bottom: 10px;
	border-bottom: 1px #818181 dotted;
}

#post-area.page h1
{
	 font-family: "Oswald",sans-serif;
	 font-size: 28px;
}

#PrenWrapper .red.button
{
	font-size: 20px;
	display: block;
	padding: 3px 6px;
	background-color: #d62323;
	border: 1px #d62323 solid;
	color: #ffffff;
	font-weight: bold;
	max-width: 300px;
	cursor: pointer;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-khtml-border-radius: 2px;
	border-radius: 2px;
	margin: 5px auto;
}
#PrenWrapper .red.button:hover
{
	background-color: #a32f2f;
}

/*
* EOF Prenumerationer
*/

.articleBoxRed h5.boxTitle
{
	border-radius: 4px 4px 0 0; /* TL TR BR BL */
}

.articleBoxRed .boxText
{
	border-radius: 0px 0px 4px 4px; /* TL TR BR BL */
}