/*
Theme Name: OceanWP Child - אור וישועה
Description: תבנית ילד לאתר ישיבת חיפה. כל התאמה עיצובית נכתבת כאן ולא בתבנית האם, כדי שעדכוני OceanWP לא ימחקו אותה.
Author: ישיבת חיפה
Template: oceanwp
Version: 1.2.0
Text Domain: oceanwp-child
*/

/* ==========================================================================
   משתני עיצוב מרכזיים

   היחס: הכחול העמוק הוא הצבע המוביל של האתר - כותרות, משטחים כהים, טקסט.
   הזהב והחום של הסמל הם מוטיב חוזר ולא צבע רקע: קו עליון, כפתור פעולה,
   תגית נושא, מסגרת צדדית לכרטיס. כל צבע באתר נגזר מכאן.
   ========================================================================== */
:root {
	/* --- הכחול: הצבע המוביל --- */
	--ov-navy: #002347;
	--ov-navy-soft: #1c3a5e;
	--ov-navy-deep: #001b38;
	--ov-ink: #131c26;
	--ov-ink-deep: #05080c;

	/* --- הפלטה של הסמל: מוטיב מבטא, לא צבע רקע --- */
	--ov-gold: #d59b2a;
	--ov-gold-bright: #f0b641;
	--ov-gold-dark: #a8781f;
	--ov-gold-deep: #9a6c17;
	--ov-bronze: #8b5a2b;
	--ov-brown: #5a3416;

	/* --- משטחים: שנהב חם מאוד עדין, לא חום --- */
	--ov-surface: #ffffff;
	--ov-surface-alt: #f6f3ec;
	--ov-cream: #fdfaf1;
	--ov-parchment: #fbf9f4;
	--ov-border: #ece6d9;
	--ov-text: #333333;
	--ov-text-soft: #555555;

	--ov-radius-sm: 8px;
	--ov-radius: 12px;
	--ov-radius-lg: 18px;
	--ov-radius-pill: 50px;

	--ov-shadow-sm: 0 2px 8px rgba(0, 35, 71, 0.06);
	--ov-shadow: 0 8px 24px rgba(0, 35, 71, 0.09);
	--ov-shadow-lg: 0 20px 45px rgba(0, 35, 71, 0.14);

	--ov-space: 24px;
	--ov-maxw: 1200px;
	--ov-transition: 0.25s ease;
}

/* ==========================================================================
   רקע נייר לבית המדרש הדיגיטלי ולכל ההסתעפויות ממנו

   הבסיס הוא שנהב ניטרלי שקרוב מאוד ללבן, ועליו שתי הילות רחבות וחלשות מאוד:
   זהובה מלמעלה וכחולה מלמטה. העין לא מזהה "צבע", רק עומק – והכרטיסים
   הלבנים עולים ממנו במקום להיבלע בו.
   ========================================================================== */
.page-id-7601,
.page-id-8543,
.page-id-2512,
.single-video_lesson,
.tax-rabbis,
.tax-subjects {
	background-color: var(--ov-parchment);
	background-image:
		radial-gradient(1200px 560px at 100% -8%, rgba(213, 155, 42, 0.10), transparent 60%),
		radial-gradient(900px 500px at -10% 22%, rgba(0, 35, 71, 0.05), transparent 58%);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* התבנית האם צובעת את #main בלבן ומכסה את הרקע - מנטרלים רק בעמודים האלה */
.page-id-7601 #main,
.page-id-8543 #main,
.page-id-2512 #main,
.single-video_lesson #main,
.tax-rabbis #main,
.tax-subjects #main,
.page-id-7601 #content-wrap,
.page-id-8543 #content-wrap,
.page-id-2512 #content-wrap,
.single-video_lesson #content-wrap,
.tax-rabbis #content-wrap,
.tax-subjects #content-wrap {
	background-color: transparent;
	box-shadow: none;
}

/* המיכלים של התבניות המותאמות לא צובעים לבן על גבי הרקע */
.single-video_lesson .ov-lesson,
.tax-rabbis .ov-rabbi,
.page-id-7601 .ov-directory {
	background: transparent;
}

/* קו הזהב של הסמל בראש אזור התוכן - המוטיב שחוזר בכל עמוד */
.page-id-7601 #main,
.page-id-8543 #main,
.page-id-2512 #main,
.single-video_lesson #main,
.tax-rabbis #main {
	border-top: 3px solid var(--ov-gold);
}

@media (max-width: 768px) {
	/* fixed שובר גלילה בחלק ממכשירי הנייד */
	.page-id-7601,
	.page-id-8543,
	.page-id-2512,
	.single-video_lesson,
	.tax-rabbis,
	.tax-subjects {
		background-attachment: scroll;
	}
}

/* ==========================================================================
   עמוד שיעור בודד - שרידים מהמבנה הישן (מסגרת הווידאו של תוכן הפוסט)
   ========================================================================== */
.single-video_lesson .content-area,
.single-video_lesson #primary {
	width: 100%;
	max-width: var(--ov-maxw);
	margin-inline: auto;
	padding-inline: 15px;
	float: none;
	box-sizing: border-box;
}

.single-video_lesson #secondary,
.single-video_lesson .sidebar-wrap {
	display: none;
}

/* מסגרת הווידאו */
.youtube-video-container {
	width: 100%;
	max-width: 1050px;
	margin: 50px auto 40px;
	padding: 25px;
	background: var(--ov-surface);
	border: 1px solid var(--ov-border);
	border-top: 5px solid var(--ov-gold-dark);
	border-radius: var(--ov-radius-lg);
	box-shadow: var(--ov-shadow);
	box-sizing: border-box;
	transition: transform var(--ov-transition), box-shadow var(--ov-transition);
}

.youtube-video-container:hover {
	transform: translateY(-5px);
	box-shadow: var(--ov-shadow-lg);
}

/* אם השיעור נשמר בלי סרטון, לא מציגים ריבוע ריק */
.youtube-video-container:not(:has(iframe)) {
	display: none;
}

.youtube-video-container iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 10px;
	display: block;
}

.single-video_lesson .entry-content,
.single-video_lesson .elementor-widget-theme-post-content {
	max-width: 950px;
	margin-inline: auto;
	padding-inline: 20px;
	font-size: 1.15em;
	line-height: 1.7;
	color: var(--ov-text-soft);
	text-align: center;
}

@media (max-width: 768px) {
	.youtube-video-container {
		margin: 25px auto 20px;
		padding: 12px;
		border-radius: 14px;
		border-top-width: 4px;
	}

	.youtube-video-container iframe {
		border-radius: 8px;
	}

	.single-video_lesson .entry-content,
	.single-video_lesson .elementor-widget-theme-post-content {
		font-size: 1.05em;
		padding-inline: 10px;
	}
}

/* גישה מקלדתית - חובה לנגישות, חסר בתבנית המקורית */
.single-video_lesson a:focus-visible,
.ov-lessons a:focus-visible,
.ov-lessons select:focus-visible,
.ov-lessons input:focus-visible {
	outline: 3px solid var(--ov-gold);
	outline-offset: 2px;
}

/* ==========================================================================
   כותרת עמוד גלובלית (page-header המובנה של OceanWP) – מופיעה בכל עמוד שעדיין לא
   הומר לתבנית עצמאית (כל האתר חוץ מעוד השיעור ועמוד הבית, שמכבים את ה-page-header
   בעצמם דרך הפילטר ocean_display_page_header). עיצוב ברירות מחדל היה רק פס אפור 32px ללא
   פונט מותאם וללא שום אלמנט עיצובי; כאן מקבל את אותה חזות שפה שתואמת לשפה של השיעורים
   והעמודים המותאמים – פונט Frank Ruhl Libre, צבע נייווי, קו הדגשה זהב עדין.
   ספציפיות: ה-CSS המוטמע של הערכה משתמש בסלקטורים בני 2 מחלקות (.page-header .page-header-title),
   ולכן מוסיפים כאן את התג body כדי לנצח בספציפיות בלי צורך ב-important.
   ========================================================================== */

body .page-header {
	position: relative;
	margin-bottom: 0;
	padding-block: clamp(40px, 7vw, 64px) clamp(30px, 5vw, 44px);
	background: linear-gradient(180deg, var(--ov-surface-alt) 0%, var(--ov-surface) 100%);
	border-bottom: 1px solid var(--ov-border);
	text-align: center;
}

body .page-header .page-header-inner {
	max-width: 880px;
	margin-inline: auto;
}

body .page-header .page-header-title {
	position: relative;
	display: inline-block;
	margin: 0;
	padding-bottom: 22px;
	font-family: 'Frank Ruhl Libre', Georgia, serif;
	font-weight: 700;
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	line-height: 1.25;
	color: var(--ov-navy);
	letter-spacing: -0.01em;
}

body .page-header .page-header-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	width: 64px;
	height: 3px;
	border-radius: var(--ov-radius-pill);
	background: linear-gradient(90deg, var(--ov-gold) 0%, var(--ov-gold-bright) 100%);
}

body .page-header .page-subheading {
	margin-top: 14px;
	font-size: 1.05rem;
	color: var(--ov-text-soft);
}

@media (max-width: 768px) {
	body .page-header {
		padding-block: 32px 26px;
	}

	body .page-header .page-header-title {
		padding-bottom: 16px;
	}
}

/* ==========================================================================
   פוטר – מירווח כותרת ההצטרפות לרשימת התפוצה (אלמנטור פרו, עמוד 2222)

   בהגדרות הווידג'ט המצב כבר על "מרכז", אבל לא מסתפיקה שהעמודה עצמה
   תופסת לרוחב מלא. בשורה מפורשת כאן כדי שהמירווח יחול גם אם משהו
   בעתיד ישנה את רוחב העמודה או ה-flex שלה.
   ========================================================================== */
body .elementor-element-95bce0d,
body .elementor-element-95bce0d .elementor-heading-title {
	width: 100%;
	text-align: center;
}