/*
Theme Main Stylesheet
*/

/* ==========================================================================
   1. משתנים והגדרות בסיס (CSS Variables)
   ========================================================================== */
:root {
    --primary-color: #2c3e50;    /* כחול כהה */
    --accent-color: #e67e22;     /* כתום דגש - מושלם ל-WooCommerce */
    --text-color: #333;
    --light-bg: #f4f4f4;
    --body-color: rgb(156, 156, 156);
    --border-color: #1d1919;
    --container-width: 1200px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family:'Simona',sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--body-color);
    direction: rtl; /* תמיכה מלאה בעברית */
    text-align: right;
	padding-top: 50px;
}



/* ==========================================================================
   MAIN CONTENT
========================================================================== */
.container {
    width: 100%; /* משאיר מעט מרווח בצדדים במסכים קטנים */
    max-width: var(--container-width); /* משתמש ב-1200px או מה שהגדרת */
    margin: 0 auto; /* ממכרז את התוכן */
}

#primary {
    margin-top: 50px;
}

/*==========================================================================
   HEADER
========================================================================== */
#masthead {
    position: fixed !important; /* מכריח את הקיבוע */
    top: 0;
    left: 0;
    width: 100%;
    height: 90px; /* גובה מוגדר */
    background-color: #f3f3f3;
    z-index: 88888; /* מעל כל אלמנט אחר באתר */
    display: flex;
    align-items: center;
	    -webkit-box-shadow: 0px 5px 13px -3px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 5px 13px -3px rgba(0, 0, 0, 0.5);
}

/* תיקון המכולה הפנימית */
#masthead .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0;
}

.admin-bar #masthead{
    top: 32px;
}
@media (max-width: 768px) {
#primary {
        margin-top: 0;
        padding-left: 20px;
        padding-right: 20px;
}
#masthead {
    height: 60px; /* גובה מוגדר */
}
	.admin-bar #masthead{
    top: 46px;
}

}
/* טיפול בלוגו ובטקסט שלידו */
.site-branding {
    align-items: center;
    gap: 15px;
	order: 2;
}

/* תיקון ה-SVG שלא ייעלם */
.site-logo img {
    width: 180px !important;
    height: auto !important;
    display: block;
}

/* ואם תרצי לשנות הכל לכתום במעבר עכבר: */
.site-logo:hover {
    color: #f37021;
}
.site-logo svg {
    width: 100% ; /* תני לו רוחב ברור */
    height: auto;
    min-height: 40px; /* מבטיח שהוא לא יקרוס ל-0 */
    color:black;
    visibility: visible;
    opacity: 1;
}

@media (max-width: 768px) {
	.admin-bar #masthead{
	top: 46px;
	}
	.site-logo svg {
		width: 80% ; /* תני לו רוחב ברור */
		height: auto;
		min-height: 30px; /* מבטיח שהוא לא יקרוס ל-0 */
		color:black;
		visibility: visible;
		opacity: 1;
	}
		.site-branding {
		text-align: center;
	}
}

/* סידור התפריט הראשי */
.main-navigation ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px; /* רווח בין הלינקים */
}
.main-navigation {
order: 1;
}
.main-navigation a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
}

/* סידור העגלה */
.header-cart {
    display: flex;
    align-items: center;
    white-space: nowrap;
}



/*==========================================================================
   FOOTER
========================================================================== */

.site-footer {
    background: #000000;
    padding: 30px;
    color: white;
	margin-top: 30px;
}

.site-footer .site-logo svg {
    display: block;
    width: 100px;
    height: auto ;
    min-height: 40px;
    color: white;
    visibility: visible;
    opacity: 1;
}

.site-footer .site-logo {
    order: 2;
}

.site-footer .site-info {
    order: 1;
}

.site-footer .container {
    display: flex;
    flex-direction: column; /* ברירת מחדל למובייל: אחד מתחת לשני */
    align-items: center;    /* מרכז את האלמנטים */
    gap: 20px;              /* רווח בין האיזורים */
}

/* במחשב (מסכים רחבים) - נעבור לשורה אחת */
@media (min-width: 768px) {
    .site-footer .container {
        flex-direction: row;
        justify-content: space-between; /* מפזר את האיזורים לצדדים */
    }
}

/* 1. חסימת תפריט המובייל בדסקטופ - מונע את הריבועים הלבנים שראינו */
@media (min-width: 992px) {
    .mobile-only-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* 2. חסימת תפריט הדסקטופ במובייל */
@media (max-width: 991px) {
    .desktop-only-nav {
        display: none !important;
        visibility: hidden !important;
    }
}