/*
 * Fashion Museum Tel Aviv — interior pages, rules that must not be lost.
 *
 * Plain CSS on purpose, the same arrangement as landing-page-fixes.css: it is
 * NOT compiled from any .scss, so a rebuild of pages.css cannot take these
 * rules with it. It loads immediately after pages.css, at the same
 * specificity, so whatever it declares here wins. custom.css still loads last.
 *
 * Contents:
 *   1. Contact page, everything centred (as the landing page is).
 *   2. Form direction follows the page, not a hard-coded rtl.
 */

/* ===========================================================================
 * 1. Contact page, centred
 *
 * The design put the content in a column against the reading edge. The landing
 * page is centred, and the contact page now follows it: the header, the title,
 * the form and the footer all sit on the middle of the screen. The form keeps
 * its measure (840px); only its position changes.
 * =========================================================================== */

/*
 * The header. On a wide screen the lockup, the home link and the language stay
 * on one line, now gathered in the middle instead of the lockup at one edge and
 * the links at the other. The auto margin that held them apart is released.
 *
 * Below 992px pages.css wraps the bar — the lockup on a line of its own, the
 * links centred under it — and this file leaves that alone.
 */
@media (min-width: 992px) {
	.pg__nav {
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: clamp(24px, 3vw, 56px);
	}

	.pg-nav__logo {
		flex: 0 0 auto;
		margin-inline-end: 0;
	}
}

/* The column that holds the title and the form. */
.pg__main--contact {
	margin-inline: auto;
}

@media (min-width: 1400px) {
	.pg__main--contact {
		margin-inline: auto;
	}
}

.pg-contact__title,
.pg-contact__form {
	margin-inline: auto;
}

.pg-contact__title {
	text-align: center;
}

/*
 * The consent rows: checkbox and sentence travel together to the middle, the
 * same as the newsletter card on the landing page. `flex: 0 1 auto` lets the
 * sentence size to its content; with `flex: 1 1 auto` it fills the line and
 * centring the row moves nothing.
 */
.pg .ct-form__consent {
	text-align: center;
}

.pg .ct-form__consent .wpcf7-list-item > label {
	justify-content: center;
}

.pg .ct-form__consent .wpcf7-list-item-label {
	flex: 0 1 auto;
	text-align: center;
}

/* The footer: the address on its own line, the legal links under it. */
.pg__foot {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.pg-address {
	text-align: center;
}

.pg-legal__list {
	justify-content: center;
}

/* ===========================================================================
 * 2. Direction follows the page
 *
 * pages.css forces `direction: rtl` on every field, which is right for the
 * Hebrew page and wrong for the English one: placeholders and typed text
 * started on the right. Inheriting takes the direction from the form's wrapper,
 * which Contact Form 7 sets from the form's own language.
 *
 * `[dir=ltr]` in pages.css never matches: WordPress writes no dir attribute on
 * an LTR page. :dir() reads the computed direction instead, so the select's
 * arrow goes to the right side of the field in English.
 * =========================================================================== */
.pg .ct-input,
.pg input[type="text"].ct-input,
.pg input[type="tel"].ct-input,
.pg input[type="email"].ct-input,
.pg select.ct-input,
.pg textarea.ct-input {
	direction: inherit;
}

.pg select.ct-select:dir(ltr) {
	background-position: right clamp(14px, 1.2vw, 20px) center;
}

/* ===========================================================================
 * 3. The lockup with a separate mobile file
 *
 * When Site Settings holds a mobile logo, the <img> sits inside a <picture>.
 * The sizing rules are written for the <img> and its link, so the <picture>
 * steps out of the layout.
 * =========================================================================== */
.pg-nav__logo picture {
	display: contents;
}

/* Mobile background image: <picture> must not add a box of its own. */
.pg__media picture{display:contents}

/* Mobile logo: as wide as the screen allows (only when one is set). */
@media (max-width: 991.98px) {
	.pg-nav__logo:has(picture) .pg-nav__logo-link {
		flex: 0 0 100%;
		width: 100%;
		margin-inline: 0;
	}

	.pg-nav__logo picture > .pg-nav__logo-image {
		width: 100%;
		height: auto;
	}
}

/* Mobile logo, edge to edge: undo the page gutter around it. */
@media (max-width: 991.98px) {
	.pg-nav__logo:has(picture) {
		flex: 0 0 calc(100% + 2 * var(--pg-gutter));
		margin-inline: calc(-1 * var(--pg-gutter));
	}
}

/* Logo on a phone: the full width of the screen, whichever file it is. */
@media (max-width: 991.98px) {
	.pg .pg-nav__logo {
		flex: 0 0 calc(100% + 2 * var(--pg-gutter));
		margin-inline: calc(-1 * var(--pg-gutter));
	}

	.pg .pg-nav__logo .pg-nav__logo-link {
		flex: 0 0 100%;
		width: 100%;
		margin-inline: 0;
	}

	.pg .pg-nav__logo .pg-nav__logo-image {
		width: 100%;
		height: auto;
	}
}

/* Logo on a phone: 90% of the screen, centred, with room on every side. */
@media (max-width: 991.98px) {
	.pg .pg-nav__logo .pg-nav__logo-link {
		justify-content: center;
	}

	.pg .pg-nav__logo .pg-nav__logo-image {
		width: 90%;
		margin-block: 16px;
	}
}

/* Form fields: white placeholders at full strength, on a light black tint. */
.pg .ct-input,
.pg input[type="text"].ct-input,
.pg input[type="tel"].ct-input,
.pg input[type="email"].ct-input,
.pg select.ct-input,
.pg textarea.ct-input {
	background-color: rgba(0, 0, 0, 0.2);
}

.pg .ct-input::placeholder,
.pg input[type="text"].ct-input::placeholder,
.pg input[type="tel"].ct-input::placeholder,
.pg input[type="email"].ct-input::placeholder,
.pg select.ct-input::placeholder,
.pg textarea.ct-input::placeholder {
	color: #fff;
	opacity: 1;
}

.pg .ct-input::-webkit-input-placeholder {
	color: #fff;
	opacity: 1;
}

.pg .ct-input::-moz-placeholder {
	color: #fff;
	opacity: 1;
}

/* Email fields: Univers LT Std, the same face as COMING SOON on the landing page. */
.pg input[type="email"].ct-input {
	font-family: 'Univers LT Std', 'Oron Classic FM', 'Univers', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* ---------------------------------------------------------------------------
 * The top bar on a narrow screen: the link to the home page beside the
 * language, and the lockup on a line of its own underneath.
 *
 * The markup order is link, lockup, language (the order they are read in on a
 * wide screen, where they share one line). Here the lockup is moved after the
 * other two with `order`. The lockup is a link too, so the keyboard reaches it
 * before the language switcher while it is drawn below it; that is the reading
 * order of the markup and is kept deliberately.
 * ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.pg__nav > nav:not(.pg-langs) {
		order: 1;
	}

	.pg__nav > .pg-langs {
		order: 2;
	}

	.pg__nav > .pg-nav__logo {
		order: 3;
	}

	.pg__nav {
		column-gap: 24px;
	}
}


/* ---------------------------------------------------------------------------
 * The footer: the landing page's footer, on every interior page
 *
 * Same markup (template-parts/global/page-footer.php), so it only had to be
 * made to look the same: the address on its own line, the legal links under
 * it, both centred, white, no rule above and no band behind them, and sized
 * with the landing page's own units. Those units (`--u`, `--fs-small`,
 * `--fs-consent`) belong to `.lp`, which does not exist here, so they are
 * declared again on the footer with the same values. `.pg .pg__foot` is one
 * class more specific than the rules in pages.css and custom.css, so it wins
 * without depending on load order.
 * ------------------------------------------------------------------------ */
.pg .pg__foot {
	--u: clamp(0.62px, min(100vw / 393, 100vh / 812), 1.5px);
	--fs-small: max(12px, calc(16 * var(--u)));
	--fs-consent: max(11px, calc(13 * var(--u)));

	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: calc(32 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u));
	border-top: 0;
	background-color: transparent;
	text-align: center;
}

@media (min-width: 992px) {
	.pg .pg__foot {
		--fs-small: max(13px, calc(16 * var(--u)));
		--fs-consent: max(12px, calc(14 * var(--u)));

		padding-inline: var(--pg-gutter);
		padding-bottom: calc(25 * var(--u));
	}
}

.pg .pg-address {
	margin: 0;
	color: #ffffff;
	font-family: "Oron Classic FM", "Assistant", "Heebo", "Arial Hebrew", Arial, sans-serif;
	font-size: var(--fs-small);
	line-height: 1.2;
	text-align: center;
}

.pg .pg-legal__list {
	flex-wrap: nowrap;
	justify-content: center;
	gap: calc(10 * var(--u));
}

.pg .pg-legal__item + .pg-legal__item::before {
	margin-inline-end: calc(10 * var(--u));
	color: #ffffff;
}

.pg .pg-legal__link {
	font-family: "Oron Classic FM", "Assistant", "Heebo", "Arial Hebrew", Arial, sans-serif;
	font-size: var(--fs-consent);
	line-height: 1.2;
}


/* ---------------------------------------------------------------------------
 * The contact form's subject menu (see assets/js/pages.js)
 *
 * The native menu cannot be styled: the check mark on a Mac and the blue bar on
 * Windows come from the operating system. The script keeps the real <select>
 * in the form, hides it, and draws a button and a list in its place. The button
 * is a normal `.ct-input`, so it shares the field's border, size and font.
 *
 * In the list: the option under the pointer or the keyboard is lime with black
 * text, and the chosen option is bold lime text, so there is no check mark to
 * differ from one system to the next.
 * ------------------------------------------------------------------------ */
.pg .ct-dd {
	position: relative;
}

.pg .ct-dd__native.ct-select {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

.pg .ct-dd__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	text-align: start;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.pg .ct-dd__value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pg .ct-dd__chevron {
	flex: none;
	width: 14px;
	height: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px 8px;
	transition: transform 0.15s ease;
}

.pg .ct-dd__btn[aria-expanded="true"] .ct-dd__chevron {
	transform: rotate(180deg);
}

.pg .ct-dd__list {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 6px);
	z-index: 30;
	max-height: min(320px, 50vh);
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	border: 1px solid #ffffff;
	border-radius: 10px;
	background-color: #000000;
	color: #ffffff;
	font-family: "Oron Classic FM", "Univers LT Std", "Assistant", "Heebo", "Arial Hebrew", Arial, sans-serif;
	font-size: var(--pg-fs-body);
	line-height: 1.2;
	direction: inherit;
	text-align: start;
}

.pg .ct-dd__list[hidden] {
	display: none;
}

.pg .ct-dd__option {
	margin: 0;
	padding: 12px 14px;
	border-radius: 6px;
	color: #ffffff;
	cursor: pointer;
}

.pg .ct-dd__option[aria-selected="true"] {
	color: #e1fe03;
	font-weight: 700;
}

.pg .ct-dd__option.is-active {
	background-color: #e1fe03;
	color: #000000;
}

@media (prefers-reduced-motion: reduce) {
	.pg .ct-dd__chevron {
		transition: none;
	}
}


/* ---------------------------------------------------------------------------
 * The thank-you page (view/thanks-template.php)
 *
 * It runs on this shell now, so its top bar and footer are the ones every
 * other page has. Only the confirmation in the middle is its own: a centred
 * column between the bar and the footer, sized with the landing page's unit.
 * ------------------------------------------------------------------------ */
.pg__main--thanks {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.pg .pg-thanks {
	--u: clamp(0.62px, min(100vw / 393, 100vh / 812), 1.5px);

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(28 * var(--u));
	width: 100%;
	text-align: center;
}

.pg .pg-thanks__title {
	margin: 0;
	color: #ffffff;
	font-family: "Oron Classic FM", "Univers LT Std", "Assistant", "Heebo", "Arial Hebrew", Arial, sans-serif;
	font-size: max(24px, calc(44 * var(--u)));
	font-weight: 400;
	line-height: 1.15;
}

.pg .pg-thanks__text {
	max-width: calc(560 * var(--u));
	margin: 0;
	color: #ffffff;
	font-family: "Oron Classic FM", "Univers LT Std", "Assistant", "Heebo", "Arial Hebrew", Arial, sans-serif;
	font-size: max(14px, calc(18 * var(--u)));
	line-height: 1.45;
}

.pg .pg-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(20 * var(--u, 1px));
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg .pg-social__item {
	display: flex;
}

.pg .pg-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(44px, calc(46 * var(--u, 1px)));
	height: max(44px, calc(46 * var(--u, 1px)));
	border: 0;
	border-radius: 50%;
	padding: 0;
	color: #ffffff;
}

.pg .pg-social__link:focus-visible {
	outline: 2px solid #e1fe03;
	outline-offset: 4px;
}

.pg .pg-social__icon {
	display: block;
	width: max(24px, calc(26 * var(--u, 1px)));
	height: auto;
}


/* ---------------------------------------------------------------------------
 * No phantom scroll under the footer
 *
 * WordPress puts the class `page` on the body of every page, and the parent
 * stylesheet gives `.page` a bottom margin of 1.5em (`.post, .page`). On the
 * body that is 24px of extra document height below a footer that already ends
 * the screen, so a page that fits the window still scrolled by 24px. The
 * pages are laid out to fill the window exactly (`.pg` is a full-height column
 * with the footer at its foot); the body takes no margin of its own.
 * ------------------------------------------------------------------------ */
body.page {
	margin-bottom: 0;
}

/* ==========================================================================
 * CONTACT PAGE: ONE SCREEN ON DESKTOP
 *
 * On a computer the contact page must not scroll, like the landing page. The
 * landing page does it by drawing everything in one unit that shrinks with the
 * window's height. This page keeps its normal design and gives up only the
 * things that can give: the space around the content, and the height of the
 * message box, which is the one part that is just a field. Each is a function
 * of the window's height (vh), so a taller window gets the original sizes back
 * and a shorter one gets a tighter, but complete, page.
 *
 * Phones and tablets (below 992px) are not touched: there the keyboard takes
 * half of the screen, and a form that cannot scroll is a form that cannot be
 * used. Below roughly 600px of height the page still scrolls, because the
 * fields have a minimum size; a screen that short is not a desktop.
 * ========================================================================== */
@media (min-width: 992px) {
	body.page-template-contact-template .pg__nav {
		padding-top: clamp(12px, 3.2vh, 34px);
	}

	body.page-template-contact-template .pg__main--contact {
		padding-top: clamp(10px, 3.4vh, 51px);
		padding-bottom: clamp(10px, 2.8vh, 40px);
	}

	body.page-template-contact-template .pg-contact__title {
		margin-bottom: clamp(8px, 2.2vh, 31px);
		font-size: clamp(34px, 6.6vh, 56px);
	}

	body.page-template-contact-template .ct-form {
		--ct-control-h: clamp(40px, 6.2vh, 48px);
	}

	/* The message box takes whatever height the rest of the page leaves. */
	body.page-template-contact-template .pg textarea.ct-textarea {
		min-height: 0;
		height: clamp(64px, calc(54.2vh - 248px), 219px);
	}

	body.page-template-contact-template .pg .pg__foot {
		padding-top: clamp(12px, 2.6vh, 28px);
		padding-bottom: clamp(10px, 2vh, 22px);
	}
}


/* ==========================================================================
 * CONTACT PAGE: SUBHEADING
 *
 * Editable in ACF (Contact page > Form > Subheading). Sits between the title
 * and the form, centred like the rest of the page. With a subheading present
 * the title's bottom margin is handed over to it, and on a computer the message
 * box gives back the height the line takes, so the page still fits one screen.
 * ========================================================================== */
.pg .pg-contact__subtitle {
	max-width: 840px;
	margin: 0 auto clamp(18px, 2.4vw, 34px);
	color: #ffffff;
	font-family: "Oron Classic FM", "Univers LT Std", "Assistant", "Heebo", "Arial Hebrew", Arial, sans-serif;
	font-size: var(--pg-fs-lead);
	font-weight: 400;
	line-height: 1.45;
	text-align: center;
}

.pg-contact__title--has-sub {
	margin-bottom: clamp(6px, 1vw, 14px);
}

@media (min-width: 992px) {
	body.page-template-contact-template .pg-contact__title--has-sub {
		margin-bottom: clamp(4px, 1vh, 10px);
	}

	body.page-template-contact-template .pg .pg-contact__subtitle {
		margin-bottom: clamp(8px, 2.2vh, 31px);
		font-size: clamp(16px, 2.4vh, 20px);
	}

	/* The line's own height plus the title's small margin, taken off the box,
	   from the cap as well, so a tall window gives the room back too. */
	body.page-template-contact-template .pg .pg__main--has-sub textarea.ct-textarea {
		--ct-sub-h: calc(clamp(16px, 2.4vh, 20px) * 1.45 + clamp(4px, 1vh, 10px));
		height: clamp(64px, calc(54.2vh - 248px - var(--ct-sub-h)), calc(219px - var(--ct-sub-h)));
	}
}