@charset "UTF-8";
/* ALTA — styles for the Couch page builder (home.php, landing.php).
   Loaded AFTER the page's main stylesheet, which is left untouched.
   Everything here is self-contained: sections, links, menu and footer look the same
   whether the page uses the white (restaurant) or the red (Bar ALTA / campaign) look.
   Colours are inherited from the page, so they follow the look automatically. */

:root						{--as-line: 21px;}


/* --- 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(--as-line);}
.rt table					{border-collapse: collapse; border-spacing: 0;}
.rt td, .rt th				{vertical-align: top; text-align: left; font-weight: inherit;}
.rt a						{text-decoration: none;}


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

.rows > * + *				{margin-top: var(--as-line);}
.rows > .lk--full + .lk--full	{margin-top: 0;}
.rows > .lk--tight, .lk--tight	{margin-top: 0 !important;}
.rows > .lk--gap			{margin-top: calc(var(--as-line) * 2) !important;}

.lk							{display: block; box-sizing: border-box; text-decoration: none;}
/* short: 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;}
/* full: the line spans the text column */
.lk--full					{padding: 8px 0; border-bottom: 1px solid currentColor;}
.lk--outline				{width: 300px; max-width: 100%; padding: 8px; border: 1px solid currentColor; text-align: center;}
.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) */
.as_h						{font-family: inherit; font-weight: 400; font-size: 24px; line-height: 1.3; letter-spacing: inherit; color: inherit;
							 margin: 0 0 calc(var(--as-line) * 2) 0; padding: 0;}
.as_sub						{opacity: 0.7; margin-top: calc(var(--as-line) * -1.5); margin-bottom: calc(var(--as-line) * 2);}


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

.as_media					{min-width: 0;}
.as_media .as_slide			{height: auto;}
.as_media img				{display: block; width: 100%; height: auto;}


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

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

/* 50/50 · Text + image */
@media (min-width: 801px) {
	.as_split				{display: flex; align-items: flex-start;}
	.as_split__media, .as_split__copy	{flex: 0 0 50%; max-width: 50%; min-width: 0;}
	.as_split--text_left .as_split__copy	{order: 1;}
	.as_split--text_left .as_split__media	{order: 2;}
	.as_split__text			{width: 60%; margin: 0 auto; padding-top: max(0px, calc(15vw - 100px)); padding-bottom: 100px;}
	.as_split__inner		{max-width: 425px; margin: 0 auto; padding: 0 20px;}
	/* first section of a landing page: clear the logo and menu button */
	.landing_top + .as_split .as_split__text	{padding-top: calc(15vw + 26px);}
}
@media (max-width: 800px) {
	.as_split				{display: flex; flex-direction: column;}
	.as_split__text			{padding: 60px 30px;}
	.as_split__inner		{max-width: 425px; margin: 0 auto;}
	.as_split.as_m-below .as_split__copy	{order: 1;}
	.as_split.as_m-below .as_split__media	{order: 2;}
	.as_m-hidden > .as_media	{display: none;}
	.landing_top + .as_split.as_m-below .as_split__text,
	.landing_top + .as_split.as_m-hidden .as_split__text	{padding-top: 130px;}
}

/* 40/60 · Image + text */
@media (min-width: 801px) {
	.as_side				{display: flex; align-items: stretch;}
	.as_side__media			{flex: 0 0 40%; max-width: 40%;}
	.as_side__copy			{flex: 0 0 60%; max-width: 60%; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; padding: 30px;}
	.as_side--text_left .as_side__copy	{order: 1;}
	.as_side--text_left .as_side__media	{order: 2;}
	.as_side__text			{max-width: 400px;}
	.as_side--text-top .as_side__text	{padding-top: 70px; padding-bottom: 100px;}
	.as_side--text-bottom .as_side__copy	{justify-content: flex-end;}
}
@media (max-width: 800px) {
	.as_side				{display: flex; flex-direction: column;}
	.as_side__copy			{padding: 30px 30px 0 30px;}
	.as_side__text			{max-width: 400px; padding-top: 40px; padding-bottom: 70px;}
	.as_side.as_m-below .as_side__copy	{order: 1;}
	.as_side.as_m-below .as_side__media	{order: 2;}
}

/* Narrow text + image */
@media (min-width: 801px) {
	.as_col					{display: flex; width: 100%; padding: 200px 0 200px 15px;}
	.as_col__text			{box-sizing: border-box; width: 25%; padding: 100px 16px 16px 16px; margin-bottom: 30px;}
	.as_col__media			{box-sizing: border-box; width: 50%; padding: 16px; margin-top: -20px;}
}
@media (max-width: 800px) {
	.as_col					{display: flex; flex-direction: column; padding: 100px 0 200px 0;}
	.as_col__text			{padding: 0 30px; margin-bottom: 51px;}
	.as_col__media			{padding: 0 30px;}
}

/* Centred image, text below */
.as_centred					{margin: auto; padding: 100px 0;}
.as_centred--w900			{max-width: 900px;}
.as_centred--w1100			{max-width: 1100px;}
.as_centred--w900 .as_centred__pad	{padding: 0 30px;}
.as_centred--w1100 .as_centred__pad	{padding: 0 20px;}
.as_centred__text			{max-width: 420px; margin: auto; padding: calc(30px + var(--as-line)) 20px 0 20px;}
.as_centred__text.ta_center	{text-align: center;}
.as_centred__text > * + *	{margin-top: var(--as-line);}
.as_expander				{display: none; padding-top: var(--as-line);}
@media (max-width: 800px) {
	.as_centred--w900		{padding: 25px 0;}
	.as_centred__text		{padding-left: 0; padding-right: 0;}
}

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

/* Custom code */
.as_embed--full				{width: 100%; height: 100vh;}
.as_embed--full > div		{position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.as_embed--full iframe		{display: block; width: 100%; height: 100%; border: 0;}

/* Text column (FAQs, terms) */
.as_text					{max-width: 52%; margin: auto; padding-top: 60px;}
.as_text__pad				{padding: 30px 30px 100px 30px;}
.as_h.as_text__title		{font-size: inherit; line-height: inherit; margin: 0 0 calc(var(--as-line) * 4) 0;}
.as_text__item + .as_text__item	{margin-top: calc(var(--as-line) * 2);}
.as_text__heading			{text-decoration: underline; margin-bottom: var(--as-line);}
@media (max-width: 800px) {
	.as_text				{max-width: 100%;}
}

/* Landing pages: clear the fixed logo and menu button above a first section that
   has no top spacing of its own */
@media (min-width: 801px) {
	.landing_top + .as_centred	{padding-top: 160px;}
	.landing_top + .as_side, .landing_top + .as_col	{margin-top: 0;}
}
@media (max-width: 800px) {
	.landing_top + .as_text		{padding-top: 100px;}
	.landing_top + .as_centred	{padding-top: 130px;}
}


/* --- 5. Homepage opening screen and hero ---------------------------------------- */

.intro_badge				{position: absolute; bottom: 75px; left: 0; right: 0; text-align: center;}
.intro_badge img			{width: 80px; height: auto;}
.intro_text					{max-width: 800px; margin: auto; text-align: center;}
.hero_mob_pad				{padding: 125px 25px 0 25px;}
#page						{position: relative;}


/* --- 6. Site-wide hamburger menu -------------------------------------------------
   One definition for every page, whichever main stylesheet the page loads. */

/* only as wide as the button, so it never covers the logo; above the homepage Reservations bar when open */
nav_mob.as_nav				{position: fixed; top: 22px; left: 10px; right: auto; width: 70px; z-index: 998; opacity: 0.97; display: block;}
@media (min-width: 801px)	{ nav_mob.as_nav.m {display: none;} }
.as_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;}
.as_nav #menuToggle input	{display: flex; width: 40px; height: 35px; position: absolute; cursor: pointer; opacity: 0; z-index: 997; margin: 0;}
.as_nav #menuToggle span	{display: flex; width: 40px; height: 2px; margin-bottom: 10px; position: relative; background: #900002; border-radius: 3px; z-index: 1;
							 transform-origin: 5px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;}
.as_nav #menuToggle span:first-child	{transform-origin: 0% 0%;}
.as_nav #menuToggle span:nth-last-child(3)	{transform-origin: 0% 100%; visibility: hidden;}
.as_nav #menuToggle span:nth-last-child(2)	{transform-origin: 0% 100%;}
.as_nav #menuToggle input:checked ~ span	{opacity: 1; transform: rotate(47deg) translate(-1px, -1px); background: #fff;}
.as_nav #menuToggle input:checked ~ span:nth-last-child(3)	{opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);}
.as_nav #menuToggle input:checked ~ span:nth-last-child(2)	{transform: rotate(-47deg) translate(0, -1px);}
.as_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: #900002; 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: 15px; line-height: 25px; letter-spacing: 1px; font-weight: 400; text-align: center;}
.as_nav #menuToggle input:checked ~ ul	{transform: none; padding: 50px; font-size: 15px; letter-spacing: 1px;}
.as_nav .mob_nav_container	{position: static; width: 100vw; margin: 50px 0 0 -7px;}
.as_nav .mob_p_l			{margin-left: -24px; padding: 40px 0 60px 0; width: 100%;}
.as_nav #menu a:link, .as_nav #menu a:visited,
.as_nav #menu a:hover, .as_nav #menu a:active	{color: #fff; text-decoration: none;}
.as_nav #menu a:hover		{opacity: 0.4;}
.as_nav__book				{width: 275px; max-width: 80vw; box-sizing: content-box; margin: auto; padding: 8px; border: 1px solid #fff; text-align: center; color: #fff;}


/* --- 7. Background texture on red-look pages ------------------------------------- */

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


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

#myBtn						{cursor: pointer;}
#footer .rt					{display: block;}