/*
Theme Name: Alegra
Theme URI: https://hotelalegra.com
Description: Custom theme for Hotel Alegra. Ports the design/chrome of the original Drupal 7 "spiro" sub-theme to WordPress Multisite (EN -> hotelalegra.com, HE/RTL -> hotelalegra.co.il). Structured content via CPTs + CMB2 and homepage components as native Gutenberg blocks. No paid plugins.
Author: Spiro Creative (migration)
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: alegra
Network: true
*/

/*
 * NOTE: This file is only the theme manifest. The real styles are the ported
 * spiro stylesheets under assets/css/ (styles.css + the RTL override
 * styles-rtl.css), enqueued in functions.php. Keep design edits there so the
 * port stays 1:1 with production.
 *
 * EXCEPTION: the CKEditor/RTE alignment helpers below. On Drupal these classes
 * (added by the WYSIWYG editor to body/paragraph HTML) were defined in Drupal's
 * *system* CSS, not in the spiro theme, so they were never captured in the port.
 * All homepage/body content carries them (e.g. <h2 class="rtecenter">- Ein Kerem -</h2>),
 * so without these rules headings/paragraphs fall back to left/start alignment.
 * Loaded here (alegra-theme depends on alegra-styles) so it wins the cascade.
 */

.rteleft, .has-text-align-left { text-align: left; }
.rteright, .has-text-align-right { text-align: right; }
.rtecenter, .has-text-align-center { text-align: center; }
.rtejustify, .has-text-align-justify { text-align: justify; }
.rteindent1 { margin-left: 40px; }
.rteindent2 { margin-left: 80px; }
.rteindent3 { margin-left: 120px; }
.rteindent4 { margin-left: 160px; }
.ibimage_left { float: left; }
.ibimage_right { float: right; }

/* RTL: Drupal flips the indent margins for the Hebrew site. */
body.rtl .rteindent1 { margin-right: 40px; margin-left: 0; }
body.rtl .rteindent2 { margin-right: 80px; margin-left: 0; }
body.rtl .rteindent3 { margin-right: 120px; margin-left: 0; }
body.rtl .rteindent4 { margin-right: 160px; margin-left: 0; }

/**
 * Footer "CONTACT:" form — Fluent Forms → production Drupal webform look.
 *
 * Production is one glued horizontal strip: gold outer border around the row,
 * white inputs flush against each other (shared 1px gold seams), italic
 * placeholders with ~12px start indent, solid gold Send. Fluent Forms loads
 * after the theme and injects system fonts + 11px/15px padding — override
 * those here with !important. Logical properties keep RTL mirroring automatic.
 */
.footer_newsletter .fluentform,
.footer_newsletter .frm-fluent-form {
	width: 100%;
	min-width: 0;
}
/*
 * Fluent Forms injects legend.ff_screen_reader_title with text-indent:-999999px.
 * That inflates scrollWidth (~500k) and, with RTL + other off-screen tricks,
 * can expand the mobile layout viewport. Clip it instead.
 */
.footer_newsletter legend.ff_screen_reader_title,
.fluentform legend.ff_screen_reader_title {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	text-indent: 0 !important;
	inset-inline-start: 0 !important;
}
.footer_newsletter .frm-fluent-form fieldset {
	display: flex;
	flex-flow: row nowrap;
	/* Top-align so the message field can grow downward without stretching siblings. */
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0;
	background: transparent !important;
	box-shadow: none !important;
}
.footer_newsletter .frm-fluent-form .ff-el-group {
	flex: 1 1 0;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}
/* Message is a bit wider (prod webform-component--mssg). */
.footer_newsletter .frm-fluent-form .ff-el-group:has([name="message"]) {
	flex: 1.35 1 0;
}
.footer_newsletter .frm-fluent-form .ff_submit_btn_wrapper {
	flex: 0 0 102px;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center;
}
/* Labels off — placeholders only (matches prod `label { display: none }`). */
.footer_newsletter .frm-fluent-form .ff-el-input--label {
	display: none !important;
}
.footer_newsletter .frm-fluent-form .ff-el-input--content {
	margin: 0 !important;
	padding: 0 !important;
}
.footer_newsletter .frm-fluent-form .ff-el-form-control,
.footer_newsletter .frm-fluent-form input[type="text"],
.footer_newsletter .frm-fluent-form input[type="email"],
.footer_newsletter .frm-fluent-form input[type="tel"],
.footer_newsletter .frm-fluent-form textarea {
	width: 100% !important;
	min-width: 0;
	max-width: none !important;
	height: 45px !important;
	min-height: 45px !important;
	margin: 0 !important;
	border: 1px solid #c09536 !important;
	border-radius: 0 !important;
	background: #fff !important;
	background-clip: border-box !important;
	color: #333 !important;
	font-style: normal !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	/* Beat Fluent Forms' -apple-system stack; match body (Lora EN / Assistant HE). */
	font-family: inherit !important;
	line-height: 17px !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none;
	appearance: none;
}
/* Glue: collapse the double gold border between adjacent fields into one seam. */
.footer_newsletter .frm-fluent-form .ff-el-group + .ff-el-group .ff-el-form-control,
.footer_newsletter .frm-fluent-form .ff-el-group + .ff_submit_btn_wrapper .ff-btn-submit,
.footer_newsletter .frm-fluent-form .ff-el-group + .ff_submit_btn_wrapper button[type="submit"] {
	margin-inline-start: -1px !important;
}
.footer_newsletter .frm-fluent-form input[type="text"],
.footer_newsletter .frm-fluent-form input[type="email"],
.footer_newsletter .frm-fluent-form input[type="tel"],
.footer_newsletter .frm-fluent-form input.ff-el-form-control {
	/* Logical start padding — reliable in RTL (text-indent on tel/LTR flips sides). */
	padding: 0 !important;
	padding-inline-start: 12px !important;
	text-indent: 0 !important;
	transition: none !important;
}
/**
 * Message: collapsed to the 45px strip; expands downward on focus (and stays
 * open while it has text) for comfortable multi-line typing.
 */
.footer_newsletter .frm-fluent-form textarea[name="message"],
.footer_newsletter .frm-fluent-form textarea.ff-el-form-control[name="message"] {
	height: 45px !important;
	min-height: 45px !important;
	max-height: 45px !important;
	padding: 14px 12px 0 !important;
	text-indent: 0 !important;
	resize: none !important;
	overflow: hidden !important;
	position: relative;
	z-index: 2;
	transition:
		height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		min-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		padding 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.footer_newsletter .frm-fluent-form textarea[name="message"]:focus,
.footer_newsletter .frm-fluent-form textarea[name="message"]:focus-visible,
.footer_newsletter .frm-fluent-form textarea[name="message"]:not(:placeholder-shown) {
	height: 140px !important;
	min-height: 140px !important;
	max-height: 220px !important;
	padding: 12px !important;
	overflow-y: auto !important;
}
html[dir="rtl"] .footer_newsletter .frm-fluent-form .ff-el-form-control,
html[dir="rtl"] .footer_newsletter .frm-fluent-form input,
html[dir="rtl"] .footer_newsletter .frm-fluent-form textarea {
	text-align: right !important;
	font-family: Assistant, assistant, sans-serif !important;
}
html[dir="ltr"] .footer_newsletter .frm-fluent-form .ff-el-form-control,
html[dir="ltr"] .footer_newsletter .frm-fluent-form input,
html[dir="ltr"] .footer_newsletter .frm-fluent-form textarea {
	text-align: left !important;
	font-family: Lora, Georgia, serif !important;
}
/* Solid gold uppercase Send — override FF's inline button colours. */
.footer_newsletter .frm-fluent-form .ff-btn-submit,
.footer_newsletter .frm-fluent-form button[type="submit"] {
	width: 102px !important;
	height: 45px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid #c09536 !important;
	border-radius: 0 !important;
	background: #c09536 !important;
	background-image: none !important;
	color: #000 !important;
	font-style: normal !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	line-height: 45px !important;
	text-align: center !important;
	text-indent: 0 !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
	cursor: pointer;
	visibility: visible !important;
}
html[dir="rtl"] .footer_newsletter .frm-fluent-form .ff-btn-submit,
html[dir="rtl"] .footer_newsletter .frm-fluent-form button[type="submit"] {
	font-family: Assistant, assistant, sans-serif !important;
	text-transform: none !important; /* Hebrew "שלח" is not uppercased in prod */
}
html[dir="ltr"] .footer_newsletter .frm-fluent-form .ff-btn-submit,
html[dir="ltr"] .footer_newsletter .frm-fluent-form button[type="submit"] {
	font-family: Lora, Georgia, serif !important;
}
.footer_newsletter .frm-fluent-form .ff-btn-submit:hover,
.footer_newsletter .frm-fluent-form button[type="submit"]:hover {
	background: #c09536 !important;
	color: #000 !important;
	opacity: 0.92;
}

@media (max-width: 900px) {
	/* Extra bottom padding inside the gold frame under Send. */
	.footer_newsletter {
		padding-bottom: 22px;
	}
	/* Gap between Send and the form’s inner #333 border-bottom line. */
	.footer_newsletter .frm-fluent-form {
		padding-bottom: 16px !important;
	}
	.footer_newsletter .frm-fluent-form fieldset {
		flex-wrap: wrap;
		gap: 8px;
	}
	.footer_newsletter .frm-fluent-form .ff-el-group,
	.footer_newsletter .frm-fluent-form .ff-el-group:has([name="message"]) {
		flex: 1 1 100%;
	}
	.footer_newsletter .frm-fluent-form .ff-el-group + .ff-el-group .ff-el-form-control,
	.footer_newsletter .frm-fluent-form .ff-el-group + .ff_submit_btn_wrapper .ff-btn-submit,
	.footer_newsletter .frm-fluent-form .ff-el-group + .ff_submit_btn_wrapper button[type="submit"] {
		margin-inline-start: 0 !important;
	}
	.footer_newsletter .frm-fluent-form .ff_submit_btn_wrapper {
		flex: 1 1 100%;
		display: flex;
		justify-content: stretch;
		width: 100%;
	}
	.footer_newsletter .frm-fluent-form .ff-btn-submit,
	.footer_newsletter .frm-fluent-form button[type="submit"] {
		width: 100% !important;
		max-width: none !important;
	}
}

/**
 * Room heroes — full-bleed viewport carousels (match Drupal Views markup).
 *
 * 1) `.rooms-li { width:100%; float:left }` (from styles.css) contains each
 *    room's floated text/amenities so the next hero isn't squeezed (~177px).
 * 2) Portrait MQ sets `.slick-list { height:auto }` for homepage mobiles;
 *    re-assert the height:100% → object-fit:cover chain on room galleries.
 */
.rooms-ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.room_wrapper .slick.h100 {
	height: calc(100vh - 80px);
	width: 100%;
	overflow: hidden;
}
.room_wrapper .slick.h100 .slick-list,
.room_wrapper .slick.h100 .slick-track,
.room_wrapper .slick.h100 .slick-slide,
.room_wrapper .slick.h100 li {
	height: 100% !important;
}
.room_wrapper .slick.h100 img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center center !important;
}
@media only screen and (orientation: portrait),
only screen and (max-width: 760px) and (orientation: landscape) {
	.room_wrapper .slick.h100,
	.room_wrapper .slick.h100.slick-initialized.slick-slider {
		height: calc(100vw * 0.6);
	}
}