@charset "UTF-8";
/* L'ETO Restaurant — styles for the Couch page builder (home.php, landing.php).
   Loaded AFTER the site's main stylesheet, which is left untouched.
   Sections, links, header, menu and footer are all defined here, so every page built
   from sections looks the same. Colours and the font are inherited from the page. */

:root						{--ls-line: 23px;}


/* --- 1. Editor text: ignore pasted-in formatting ------------------------------
   Everything typed or pasted into a text box is wrapped in .rt. Font, size,
   line-height and colour always come from the site. Bold, italic, underline and links stay. */

.rt, .rt *					{font-family: inherit !important; font-size: inherit !important; line-height: inherit !important;
							 letter-spacing: inherit !important; color: inherit !important; background: none !important;}
.rt p, .rt div				{margin: 0; padding: 0;}
.rt p + p					{margin-top: var(--ls-line);}
.rt table					{border-collapse: collapse; border-spacing: 0;}
.rt td, .rt th				{vertical-align: top; text-align: left; font-weight: inherit; padding: 0 20px 0 0;}
.rt a						{text-decoration: none;}

/* Secondary text: the "Text style" option on a row or entry */
.rt--secondary				{opacity: 0.6;}


/* --- 2. Content rows and links ------------------------------------------------- */

.rows > .ls_row + .ls_row	{margin-top: var(--ls-line);}
.rows > .ls_row--none		{margin-top: 0 !important;}
.rows > .ls_row--extra		{margin-top: calc(var(--ls-line) * 2) !important;}
.rows > .ls_row--extra:first-child	{margin-top: 0 !important;}
.ls_row > * + *				{margin-top: var(--ls-line);}

.lk							{display: block; box-sizing: border-box; text-decoration: none;}
/* outlined buttons, as on the menus */
.lk--button, .lk--outline	{border: 1px solid currentColor; padding: 8px; text-align: center; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; font-weight: 400;}
.lk--button					{width: 100%;}
.lk--outline				{width: 300px; max-width: 100%;}
/* underlined: the line is at least 150px and grows with the wording */
.lk--short					{display: table; min-width: 150px; padding: 3px 0 4px 0; border-bottom: 1px solid currentColor;}
.ta_center .lk--short, .ta_center .lk--outline	{margin-left: auto; margin-right: auto;}

/* Section title (H1 for the first one on a page, H2 after that) */
.ls_h						{font-family: inherit; font-weight: 400; font-size: 18px; line-height: 1.3; letter-spacing: inherit; color: inherit; text-transform: inherit;
							 margin: 0 0 calc(var(--ls-line) * 2) 0; padding: 0;}


/* --- 3. Images and carousels --------------------------------------------------- */

.ls_media					{min-width: 0;}
.ls_media .ls_slide			{height: auto;}
.ls_media img				{display: block; width: 100%; height: auto;}
.ls_hero img				{display: block;}


/* --- 4. Sections --------------------------------------------------------------- */

.ls_sec						{position: relative; box-sizing: border-box;}

/* 50/50 · Text + image */
@media (min-width: 801px) {
	.ls_split				{display: flex; align-items: flex-start;}
	.ls_split__media, .ls_split__copy	{flex: 0 0 50%; max-width: 50%; min-width: 0; box-sizing: border-box;}
	.ls_split--text_left .ls_split__copy	{order: 1;}
	.ls_split--text_left .ls_split__media	{order: 2;}
	.ls_split__text			{width: 60%; margin: 0 auto; padding-top: max(0px, calc(15vw - 100px)); padding-bottom: 100px;}
	.ls_split__inner		{max-width: 425px; margin: 0 auto; padding: 0 20px;}

	/* inset image (Drink style): narrower page, image with a margin, text set lower */
	.ls_split--inset		{max-width: 1400px; margin: 100px auto 0 auto;}
	.ls_split--inset .ls_media__in	{width: 90%;}
	.ls_split--inset.ls_split--image_left .ls_split__media	{flex: 0 0 calc(50% + 40px); max-width: none; margin-right: -40px;}
	.ls_split--inset.ls_split--image_left .ls_media__in	{margin-left: auto;}
	.ls_split--inset.ls_split--text_left .ls_split__media	{flex: 0 0 calc(50% + 40px); max-width: none; margin-left: -40px;}
	.ls_split--inset .ls_split__text	{width: auto; padding-top: calc(35% + 66px); padding-bottom: 110px;}
	.ls_split--inset .ls_split__inner	{max-width: 400px; box-sizing: border-box;}

	/* first section of a landing page: clear the logo and menu button */
	.landing_top + .ls_split--full .ls_split__text	{padding-top: calc(15vw + 26px);}
	.landing_top + .ls_split--inset	{margin-top: 150px;}
}
@media (max-width: 800px) {
	.ls_split				{display: flex; flex-direction: column;}
	.ls_split__text			{padding: 60px 30px;}
	.ls_split__inner		{max-width: 425px; margin: 0 auto;}
	.ls_split.ls_m-below .ls_split__copy	{order: 1;}
	.ls_split.ls_m-below .ls_split__media	{order: 2;}
	.ls_m-hidden > .ls_media	{display: none;}

	/* image after the first text row: the rows and the image become one column */
	.ls_m-after_first .ls_split__copy, .ls_m-after_first .ls_split__text,
	.ls_m-after_first .ls_split__inner, .ls_m-after_first .rows	{display: contents;}
	.ls_m-after_first .ls_h		{order: 0; margin: 60px 30px 0 30px;}
	.ls_m-after_first .ls_row	{order: 3; margin-left: 30px; margin-right: 30px;}
	.ls_m-after_first .ls_row:first-child	{order: 1; margin-top: 60px; margin-bottom: 60px;}
	.ls_m-after_first .ls_h + .rows .ls_row:first-child	{margin-top: calc(var(--ls-line) * 2);}
	.ls_m-after_first .ls_split__media	{order: 2;}
	.ls_m-after_first .ls_row:nth-child(2)	{margin-top: 60px !important;}
	.ls_m-after_first .ls_row:last-child	{margin-bottom: 60px;}

	.landing_top + .ls_split.ls_m-below .ls_split__text,
	.landing_top + .ls_split.ls_m-hidden .ls_split__text	{padding-top: 140px;}
	.landing_top + .ls_split.ls_m-after_first .ls_row:first-child	{margin-top: 140px;}
	.landing_top + .ls_split.ls_m-above	{padding-top: 110px;}
}

/* Centred image, text below */
.ls_centred					{max-width: 1100px; margin: auto; padding: 100px 0;}
.ls_h.ls_centred__title		{font-size: inherit; line-height: inherit; text-align: center; margin: 0; padding: 0 20px 30px 20px;}
.ls_centred__pad			{padding: 0 20px;}
.ls_anchor					{position: absolute; top: -150px; height: 1px; width: 1px;}
.ls_centred__text			{box-sizing: border-box; max-width: 420px; margin: auto; padding: 80px 10px 46px 10px;}
.ls_centred__text .rows		{max-width: 360px;}
.ls_centred__text.ta_center	{text-align: center;}
.ls_centred__text.ta_center .rows	{margin: 0 auto;}
.ls_centred__text > * + *	{margin-top: var(--ls-line);}
.ls_expander				{display: none; padding-top: var(--ls-line);}
@media (max-width: 800px) {
	.ls_centred				{padding: 80px 0;}
	.ls_centred__text		{padding: 60px 10px 0 10px; max-width: 425px;}
	.ls_centred__text .rows	{max-width: none;}
}

/* Full-screen image: fills the viewport, cropped to fit on any screen */
.ls_full					{width: 100%; height: 100vh; height: 100svh; overflow: hidden;}
.ls_full .slider, .ls_full .slick-list, .ls_full .slick-track	{height: 100%;}
.ls_full img				{display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.ls_full.pos_top img		{object-position: center top;}
.ls_full.pos_bottom img		{object-position: center bottom;}
.ls_full.pos_left img		{object-position: left center;}
.ls_full.pos_right img		{object-position: right center;}

/* Custom code */
.ls_embed--raw				{max-width: 650px; margin: auto; padding: 60px 20px;}
.ls_embed--full				{width: 100%; height: 100vh;}
.ls_embed--full > div		{position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.ls_embed--full iframe		{display: block; width: 100%; height: 100%; border: 0;}

/* Text column (FAQs, terms, thank-you message) */
.ls_text					{max-width: 650px; margin: auto;}
.ls_text__pad				{padding: 100px 20px;}
.ls_text.ta_center			{text-align: center;}
.ls_h.ls_text__title		{text-align: center; margin: 0 0 100px 0;}
.ls_text__item + .ls_text__item	{margin-top: calc(var(--ls-line) * 2);}
.ls_text__heading			{margin-bottom: var(--ls-line);}

/* Landing pages: clear the fixed logo and menu button above the first section */
.landing_top + .ls_text .ls_text__pad	{padding-top: 200px;}
.landing_top + .ls_centred	{padding-top: 160px;}
.landing_top + .ls_embed--raw	{padding-top: 200px;}
@media (max-width: 800px) {
	.landing_top + .ls_text .ls_text__pad	{padding-top: 160px;}
	.landing_top + .ls_centred	{padding-top: 130px;}
}
/* a page that is only a short message still fills the screen, footer at the bottom */
body.landing #page			{min-height: calc(100vh - 160px);}


/* --- 5. Homepage hero ------------------------------------------------------------ */

.d > .ls_hero				{padding: 150px 100px 100px 100px;}
.m > .ls_hero				{padding: 125px 25px 0 25px;}
#page						{position: relative;}


/* --- 6. Site-wide header: logo, Reservations button, hamburger menu ---------------- */

.ls_logo					{position: fixed; top: 41px; left: 50%; width: 125px; margin-left: -62px; z-index: 997; text-align: center; line-height: 0;}
.ls_logo img				{width: 100%; height: auto;}
.ls_book					{position: fixed; top: 40px; right: 30px; z-index: 997; width: 200px;}
@media (max-width: 800px)	{ .ls_book {display: none;} }

/* only as wide as the button, so it never covers anything else; above everything when open */
nav_mob.ls_nav				{position: fixed; top: 22px; left: 10px; right: auto; width: 70px; z-index: 998; opacity: 0.97; display: block;}
.ls_nav #menuToggle			{display: flex; flex-direction: column; position: relative; top: 20px; left: 20px; right: 0; z-index: 996; -webkit-user-select: none; user-select: none;}
.ls_nav #menuToggle input	{display: flex; width: 40px; height: 35px; position: absolute; cursor: pointer; opacity: 0; z-index: 997; margin: 0;}
.ls_nav #menu				{position: fixed; top: 0; bottom: 0; width: 102vw; margin: 0 0 0 -50px; padding: 50px; box-sizing: content-box; list-style-type: none;
							 background-color: #708573; color: #fff; -webkit-font-smoothing: antialiased; overflow-y: auto;
							 transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.9s cubic-bezier(0.77,0.2,0.05,1.0);
							 font-size: 14px; line-height: 25px; font-weight: 400; text-align: center;}
.ls_nav #menuToggle input:checked ~ ul	{transform: none;}
.ls_nav .mob_nav_container	{position: static; width: 100vw; margin: 50px 0 0 -7px;}
.ls_nav .mob_p_l			{margin-left: -24px; padding: 40px 0 60px 0; width: 100%;}
.ls_nav__book				{margin: auto;}


/* --- 7. Background texture -------------------------------------------------------- */

.ls_texture					{position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;}
.ls_texture img				{display: block; width: 100%; height: 100%; opacity: 0.7;}


/* --- 8. Footer and newsletter button --------------------------------------------- */

#footer .rt					{display: block;}
.ls_newsletter_btn			{display: block; width: 100%; padding: 0; margin: 0; cursor: pointer; text-align: left; color: #fff; text-transform: inherit;}
.ls_newsletter_btn span		{display: block; width: 93%; border-bottom: 1px solid #fff;}