/*
 Theme Name:   Meorot2022
 Description:  Wordpress theme for Meorot 2022
 Template:     twentytwentyone
 Author:       Damian Hoffman
 Text Domain: twentytwentyone
 Version:      1.0.0
*/

:root 
{
	--branding--logo--max-width: 100%;
	--branding--logo--max-height:100%;
}

@import "https://fonts.googleapis.com/earlyaccess/alefhebrew.css?display=swap";
@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
body, .entry-content p
{
	font-family: "Alef Hebrew",“Helvetica Neue”,Helvetica,Arial,sans-serif !important;
	font-size: 16px;
}

div#page 
{
    max-width: var(--responsive--alignwide-width);
    margin: auto;
}

.site-main
{
	display:flex;
	flex-direction: row;
    justify-content: space-around;
}

#sidebar
{
	max-width:50%;
	margin-top: 0;
	max-width: 250px;
    height: 100%;
    padding: 1%;
	border-radius: 1%;
}
#sidebar > ul
{
	padding-right: 0;
}


.singular .entry-title {
    font-size: xxx-large;
}
header.entry-header.alignwide {
    margin-bottom: 0;
}

@media only screen and (max-width: 881px)
{
	article.page
	{
		min-width:660px;
	}
}

@media only screen and (max-width: 481px)
{
	article.page
	{
		min-width:330px;
	}
}

article.stories_project > header.entry-header 
{
    display: block;
}
article.stories_project > header.entry-header > .entry-title
{
	font-size:xxx-large;
	text-align:center;
}
.post-navigation
{
	display:none;
}
aside.widget-area
{
	display:none;
}
.powered-by 
{
	margin:auto;
}

footer > .site-info > .site-name 
{
    display: none;
}

#masthead
{
	padding-top:0;
}
@media only screen and (min-width: 481px)
{
	.site-branding {margin:auto;}
}
#site-navigation {margin:auto;}
ul.storiesList li:before { content: '\1FA90'; } 
ul.storiesList li {list-style-type:none;}
ul.entriesList li:before { content: '\1FA90'; } 
ul.entriesList li {list-style-type:none;}

p.widget-post-title
{
   padding-bottom: 5%;
}
a.widgetEntryText 
{
    text-decoration: none;
}

#header-menu
{
    display: flex;
    justify-content: start;
}

.stories_list li a {
	display: inline-block;
	vertical-align: top;
	padding-top: 8px;
}
.single-stories_project .entry-content p {
	margin: 0;
}
.single-stories_project .alignright {
	float: right !important;
}
.single-stories_project .alignleft {
	float: left !important;
}

#diary hr {
	margin-top: 30px;
}
.diaryDate, .diaryQuickAccessLink {
	font-weight: bold;
}
@media only screen and (max-width: 481px)
{
	.site-main
	{
		flex-direction: column;
		justify-content: space-around;
	}
	#sidebar
	{
	max-width:100%;
	margin-top: 0;
	}
}


@media (max-width: 480px) {
    
    /* 1. Logo Size Adjustment (from previous step) */
    .site-header img,
    .custom-logo,
    .header-logo img {
        width: 300px !important;    /* Adjust this value to your desired width */
        max-width: 300px !important;
        max-height: 450px !important;
    }

    /* 2. Overlap Fix: Increase padding on the main header container */
    .site-header { 
        padding-bottom: 100px !important; /* Adjust '20px' as needed */
    }
    
    /* If the selector above doesn't work, try a more specific one: */
    /* .site-branding { 
        padding-bottom: 20px !important;
    } */
}