:root {
	--layout-header-height: 5.5rem;
	--layout-header-height-mobile: 4.5rem;
}

body {background-color: white;}

.pageContainer {display: flex; flex-direction: column; min-width: 20rem; min-height: 100vh;}

/* Header — transparent over the hero, solid primary once the page scrolls */
header {
	position: fixed; top: 0; right: 0; left: 0; z-index: 100;
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
	height: var(--layout-header-height-mobile); padding: 0 1.25rem;
	background-color: transparent; box-shadow: none;
	transition: background-color .3s ease, box-shadow .3s ease;
}
.pageContainer.scrolled header {background-color: var(--color-primary); box-shadow: 0 4px 16px rgba(0,0,0,.18);}

/* Plain content pages (no dark hero image behind the header to begin with) need the header solid
   from the start too, or its white nav text is invisible against the white page background.
   genericPage's .page-content doesn't count — it always sits below its own .section-header
   banner (photo or solid-color fallback), same as About/Contacts, so the header can stay
   transparent over that like everywhere else */
.pageContainer:has(.thanks) header {background-color: var(--color-primary);}

header .navSlot {display: flex; align-items: center; justify-self: start;}

header .logo {display: flex; align-items: center; justify-self: center;}
header .logo img {display: block; height: 2rem; width: auto; transition: filter .2s ease;}
header .logo:hover img {filter: brightness(1.3);}

header .contacts {display: flex; align-items: center; gap: .75rem; justify-self: end;}
header .contacts .phone {display: flex; align-items: center; gap: .35rem; color: #fff; transition: text-shadow .2s ease;}
header .contacts .phone:hover {text-shadow: 0 0 10px rgba(255,255,255,.8);}
header .contacts .phone span {display: none;}
header .contacts .phone i {font-size: .95rem;}

header .contacts .mButton.outline-light {height: 2rem; padding: 0 .9rem; font-size: .72rem; white-space: nowrap;}

/* Menu icon — shared animated hamburger, mobile only */
header .icon-menu {
	display: flex; justify-content: center; align-items: center;
	position: relative; width: 2.75rem; height: 2.75rem; overflow: hidden; cursor: pointer;
}
header .icon-menu svg {position: absolute; width: 2.75rem; height: 2.75rem; transition: transform 400ms;}
header .icon-menu svg .line {
	fill: none; stroke: #fff; stroke-width: 5.5; stroke-linecap: round;
	transition: stroke 400ms, stroke-dasharray 400ms, stroke-dashoffset 400ms;
}
header .icon-menu svg .line.top {stroke-dasharray: 40 160; transform: translateY(3px);}
header .icon-menu svg .line.middle {stroke-dasharray: 40 142; transform-origin: 50%; transition: transform 400ms;}
header .icon-menu svg .line.bottom {stroke-dasharray: 40 85; transform-origin: 50%; transform: translateY(-2px);}

header .icon-menu.active svg {transform: rotate(45deg);}
header .icon-menu.active svg .line.top {stroke-dashoffset: -64px; transform: translateY(0);}
header .icon-menu.active svg .line.middle {transform: rotate(90deg);}
header .icon-menu.active svg .line.bottom {stroke-dashoffset: -64px; transform: translateY(0);}

/* Desktop nav — only ever rendered by header.tpl (desktop UA), never alongside .icon-menu
   (that's header_mobile.tpl's job), so no viewport-based show/hide needed here anymore */
header .menuMain {display: flex; align-items: center; gap: 1.75rem;}
header .menuMain a {
	padding-bottom: .4rem; border-bottom: 2px solid transparent;
	font-size: .95rem; font-weight: 500; color: rgba(255,255,255,.85); transition: color .2s, border-color .2s;
}
header .menuMain a:hover {color: #fff;}
header .menuMain a.active {color: #fff; border-color: var(--color-accent);}

/* Mobile nav drawer */
header + aside {
	display: flex; flex-direction: column; gap: 2rem; overflow: auto;
	position: fixed; top: var(--layout-header-height-mobile); right: 0; z-index: 90;
	width: 100%; height: calc(100% - var(--layout-header-height-mobile)); padding: 2rem 1.5rem;
	box-sizing: border-box; background: var(--color-primary); transform: translateX(100%);
}
header + aside.transition {transition: transform .3s ease;}
header + aside.active {transform: translateX(0);}

header + aside .menuMain {display: flex; flex-direction: column; gap: .5rem;}
header + aside .menuMain a {padding: .9rem 0; text-align: center; font-size: 1.2rem; font-weight: 600; color: #fff;}
header + aside .menuMain a.active {color: var(--color-accent);}

header + aside .phone {
	display: flex; align-items: center; justify-content: center; gap: .6rem;
	margin-top: auto; padding-top: 2rem; font-size: 1.1rem; color: #fff;
}

/* Header stays fixed & transparent over the first section's own banner/hero image;
   each page's first section is responsible for its own top padding/min-height so its
   content isn't hidden underneath (see modules/style/home/main-section-hero.css) */

@media screen and (min-width: 40em) {
	header {height: var(--layout-header-height); padding: 0 3rem;}
	header .logo img {height: unset;}

	header .contacts {gap: 1.5rem;}
	header .contacts .phone {gap: 1rem;}
	header .contacts .phone img {display: block; width: 36px; height: 36px;}
	header .contacts .phone span {display: inline; font-size: 15px; font-weight: 500;}
	header .contacts .mButton.outline-light {height: 2.75rem; padding: 0 1.5rem; font-size: .85rem;}
}

/* Page Row — shared content container, replaces Foundation's .row/.column in new markup */
.pageRow {max-width: 90rem; margin: 0 auto; padding: 0 1.5rem;}

@media screen and (min-width: 40em) {
	.pageRow {padding: 0 3rem;}
}

/* Section Title — decorative English eyebrow + Hebrew heading, reused across sections */
.sectionTitle {display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; text-align: right;}
.sectionTitle .en {
	line-height: 1.2; font-family: var(--font-heading); font-size: 1.9rem; font-weight: 300;
	letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary);
}
.sectionTitle .he {font-size: 1rem; color: var(--color-primary-light);}

.sectionTitle.light .en {color: #fff;}
.sectionTitle.light .he {color: rgba(255,255,255,.75);}

.sectionTitle.center {align-items: center; text-align: center;}

@media screen and (min-width: 40em) {
	.sectionTitle .en {font-size: 2.75rem;}
	.sectionTitle .he {font-size: 1.2rem;}
}

/* Buttons — accent gradient CTA + light outline (used on dark/transparent header & hero) */
.mButton {
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	border-radius: .6rem; font-weight: 600; transition: filter .2s ease, background-color .2s ease;
}
.mButton.accent {
	height: 2.75rem; padding: 0 1.75rem; border: 0;
	background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 80%, white), var(--color-accent));
	font-size: .85rem; color: #fff;
}
.mButton.accent:hover {filter: brightness(.94);}
.mButton.outline-light {
	border: 1px solid rgba(255,255,255,.8); background: transparent; color: #fff;
}
.mButton.outline-light:hover {background-color: rgba(255,255,255,.12);}

/* Footer */
footer {margin-top: auto; background-color: #fff;}

footer .top {display: flex; flex-direction: column; gap: 2.5rem; padding: 3rem 0;}

footer .top .menus {display: flex; flex-direction: column; align-items: center;}
footer .top .menus .menuGroup {padding: 1.5rem 0; border-top: 1px solid var(--color-primary-lightest); text-align: center;}
footer .top .menus .menuGroup:first-child {padding-top: 0; border-top: 0;}
footer .top .menus .menuGroup .title {margin-bottom: 1rem; font-size: .9rem; font-weight: 700; color: var(--color-primary);}
footer .top .menus .menuGroup a {display: block; margin-bottom: .65rem; font-size: .85rem; color: var(--color-primary-light);}
footer .top .menus .menuGroup a:hover {text-decoration: underline;}
footer .top .menus .menuGroup a.active {font-weight: 700; color: var(--color-primary); text-decoration: underline;}

/* Contact column — sits between the menu groups and the brand/logo; reuses .menuGroup's own
   spacing/border (mobile: same stacked look) plus its own social-icons row */
footer .top .contactGroup {padding: 1.5rem 0; border-top: 1px solid var(--color-primary-lightest); text-align: center;}
footer .top .contactGroup .title {margin-bottom: 1rem; font-size: .9rem; font-weight: 700; color: var(--color-primary);}
footer .top .contactGroup a,
footer .top .contactGroup .fax {display: block; margin-bottom: .65rem; font-size: .85rem; color: var(--color-primary-light);}
footer .top .contactGroup a:hover {text-decoration: underline;}
footer .top .contactGroup .socials {display: flex; justify-content: center; gap: .75rem; margin-top: .5rem;}
footer .top .contactGroup .socials a {
	display: flex; align-items: center; justify-content: center; margin-bottom: 0;
	width: 3rem; height: 3rem; border-radius: 50%;
	background-color: var(--color-primary-lightest); font-size: .85rem; color: var(--color-primary);
}
footer .top .contactGroup .socials a:hover {background-color: var(--color-primary-lighter); color: #fff;}

footer .top .brand {display: flex; justify-content: center;}
footer .top .brand .logo img {height: 2.25rem; width: auto;}

footer .bottom {background-color: var(--color-primary); color: #fff;}
footer .bottom .pageRow {
	display: flex; flex-direction: column; gap: .5rem; align-items: center;
	padding: 1.25rem 1.5rem; font-size: .8rem;
}
footer .bottom .credit {opacity: .7;}

@media screen and (min-width: 40em) {
	footer .top {flex-direction: row; justify-content: space-between; gap: 3rem; padding: 4rem 0 3rem;}
	footer .top .menus {flex-direction: row; align-items: flex-start; gap: 3rem;}
	footer .top .menus .menuGroup {padding: 0; border-top: 0; text-align: right;}
	footer .top .contactGroup {flex: 0 0 12rem; padding: 0; border-top: 0; text-align: right;}
	footer .top .contactGroup .socials {justify-content: flex-start;}
	footer .top .brand {flex: 0 0 14rem; justify-content: flex-end; align-items: flex-start;}

	footer .bottom .pageRow {flex-direction: row; justify-content: space-between; padding: 1.5rem 3rem;}
}

/* Slick Slider — shared round outline arrows, reused by every carousel section (books, courses, reviews...) */
.slick-prev,
.slick-next {
	position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
	display: flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-accent); border-radius: 50%;
	background: transparent; padding: 0; line-height: 0; font-size: 0; outline: none; cursor: pointer;
}
.slick-prev:before,
.slick-next:before {line-height: 1; font-size: 1.2rem; color: var(--color-accent);}
.slick-prev.slick-disabled,
.slick-next.slick-disabled {opacity: .35; pointer-events: none;}
.slick-prev {left: -.75rem;}
.slick-prev:before {content: '\2190';}
.slick-next {right: -.75rem;}
.slick-next:before {content: '\2192';}

@media screen and (min-width: 40em) {
	.slick-prev {left: -2.25rem;}
	.slick-next {right: -2.25rem;}
}

/* Common Page — shared by every still-unbuilt page (modules/view/content.tpl): a header banner
   (photo when the page has one, solid color fallback otherwise — see genericPage .imageBg
   background-color below), breadcrumbs, then whatever body content exists in the CMS yet */
.genericPage .section-header .imageBg {
	position: relative;
	min-height: 20rem; background-color: var(--color-primary);
	background-size: cover; background-position: center;
}
.genericPage .section-header .content {
	position: absolute; inset: 0; z-index: 1;
	padding: calc(var(--layout-header-height-mobile) + 2rem) 0 2rem;
}

.genericPage .breadcrumbs-row {padding: 1.25rem 0; background-color: #fff;}

.genericPage .page-content {padding: 3rem 0;}

@media screen and (min-width: 40em) {
	.genericPage .section-header .imageBg {min-height: 37.125rem;}
	.genericPage .section-header .content {padding: calc(var(--layout-header-height) + 9rem) 0 3rem;}

	.genericPage .breadcrumbs-row {padding: 1.5rem 0;}

	.genericPage .page-content {padding: 5rem 0;}
}