/* MOA design CSS. Only what Salient theme options and WPBakery element settings cannot express.
   Source: Figma copy IoVFoHsNF5Q6sjurzqHmot: 107:279 (front page, v3), 102:28 (v1), 107:150 (v2). 1440 canvas. Desktop values are the
   Figma px; below 1000px they scale down. Tokens live here so every section uses the same ones. */

:root {
	--moa-ink: #141414;
	--moa-muted: #a4a4a4;
	--moa-line: #e5e5e5;
	--moa-serif: "Inknut Antiqua", Georgia, serif;
	/* Avenir is the Figma font. It is NOT served from this site (no web licence yet): browsers that already
	   have it installed (macOS, iOS) use their own copy; everyone else gets Nunito Sans from Google Fonts.
	   When a web licence is bought, self-host the files and register them in Salient typography. */
	--moa-sans: Avenir, "Avenir LT Std", "Nunito Sans", Helvetica, Arial, sans-serif;
	--moa-radius: 7px;
}

body { color: var(--moa-ink); }
/* Salient's generated typography CSS names Nunito Sans alone; put the Avenir stack in front of it. */
html body, html body p, html body li, html body h6, html body input, html body textarea, html body button,
html body #header-outer, html body #header-outer #top nav > ul > li > a, html body .nectar-button,
html body #slide-out-widget-area, html body #slide-out-widget-area a { font-family: var(--moa-sans); }
body p { color: var(--moa-ink); }

/* Small uppercase labels (about, OUR OFFERINGS). */
.moa-label {
	font-family: var(--moa-sans);
	font-weight: 500;
	font-size: 14.4px;
	line-height: 14.4px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* ---------- Header ---------- */
/* Reservation CTA (v3 107:399): white box, 8px radius, 50px tall, 14.4px uppercase. */
#header-outer .button_solid_color.moa-nav-cta > a {
	background-color: #fff !important;
	border-radius: 8px !important;
	padding: 0 21.6px !important;
	height: 50px;
	line-height: 50px !important;
	font-size: 14.4px !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
}
#header-outer #top nav > ul > li.moa-nav-cta { margin-left: 4px; }
/* Salient paints the solid button as an accent-coloured a:before pill (!important); the <a> is the pill here. */
html body #header-outer #top nav > ul > li.button_solid_color.moa-nav-cta > a:before,
html body #header-outer #top nav > ul > li.button_solid_color.moa-nav-cta > a:after { display: none !important; }
@media (min-width: 1000px) {
	#header-outer .slide-out-widget-area-toggle { display: none !important; }
	/* v3: the empty buttons list kept 30px right of the CTA; menu text sits 10px above the logo centre. */
	#header-outer #top nav > ul.buttons { display: none !important; }
	#header-outer:not(.small-nav) #top nav > ul.sf-menu { position: relative; top: -10px; } /* full-height header only; the shrunk sticky bar centres normally */
	/* Figma columns are not on the 1/3 grid: headline and About text start at x440, offerings list ends 47px in. */
	.moa-hero--v3 .wpb_column.vc_col-sm-offset-4,
	.moa-about .wpb_column.vc_col-sm-offset-4 { margin-left: 29.2% !important; width: 65.92% !important; }
	.moa-follow .wpb_column.vc_col-sm-offset-4 { margin-left: 30.8% !important; width: 65.92% !important; }
	.moa-about--fish > .row_col_wrap_12,
	.moa-offerings--list > .row_col_wrap_12 { display: flex; }
	.moa-about--fish > .row_col_wrap_12 > .wpb_column:first-child,
	.moa-offerings--list > .row_col_wrap_12 > .wpb_column:first-child { flex: 1 1 auto; width: auto !important; }
	.moa-about--fish > .row_col_wrap_12 > .wpb_column:last-child { flex: 0 0 65.92%; width: 65.92% !important; margin-right: 4.9% !important; }
	.moa-offerings--list > .row_col_wrap_12 > .wpb_column:last-child { flex: 0 0 65.92%; width: 65.92% !important; margin-right: 3.4% !important; }
}

/* Transparent-header state paints menu text white with !important; the CTA label stays black in every state. */
html body #header-outer[class] #top nav > ul > li.button_solid_color.moa-nav-cta > a,
html body #header-outer[class] #top nav > ul > li.button_solid_color.moa-nav-cta > a .menu-title-text { color: #000 !important; }

/* ---------- Hero ---------- */
body .vc_row.moa-hero { height: 827px; box-sizing: border-box !important; }
.moa-hero .nectar-scrolling-text { overflow: hidden; }
.moa-hero .moa-hero__text h1 {
	max-width: 680px;
	margin: 0 0 0 15px;
	color: #fff;
	font-weight: 400;
	font-size: 40px;
	line-height: 1.1;
}
.moa-hero .nectar-button.moa-pill {
	margin: 27px 0 0 18px;
	border-radius: 27.5px !important;
	height: 55px;
	padding: 0 25px !important;
	font-family: var(--moa-sans);
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 55px !important;
	text-transform: none;
	letter-spacing: 0;
}
.moa-hero .nectar-scrolling-text { margin-top: 99px; margin-bottom: -60px; }
.moa-hero .nectar-scrolling-text h2 {
	line-height: 350px !important;
	font-family: var(--moa-serif);
	font-weight: 300;
	color: #fff;
	text-transform: none;
	white-space: nowrap;
}

/* ---------- About ---------- */
.moa-lead p {
	position: relative;
	text-indent: 197px;
	font-size: 43px;
	line-height: 59.25px;
	font-family: var(--moa-sans);
}
.moa-lead .moa-label {
	position: absolute;
	left: 72px;
	top: 12px;
	text-indent: 0;
}

/* ---------- Feature bands (MOA Cafe, Venue) ---------- */
.moa-feature .divider-wrap { margin-bottom: 0; }
.moa-feature__title h2 { margin: 22px 0 33px; }
/* image_with_animation puts el_class on the <img> itself. */
img.moa-band {
	display: block;
	width: 100%;
	aspect-ratio: 1391 / 494;
	object-fit: cover;
	border-radius: var(--moa-radius);
}
.moa-feature .img-with-aniamtion-wrap { margin-bottom: 30px; }
.moa-feature__copy p { max-width: 963px; padding-bottom: 99px; }
.moa-feature__copy a { color: inherit; text-decoration: underline; }

/* ---------- Offerings ---------- */
.moa-offerings .moa-label-block p { padding-top: 8px; }
.moa-offerings__row { margin-bottom: 0 !important; }
.moa-offer > .vc_column-inner {
	border-top: 1px solid var(--moa-line);
	border-bottom: 1px solid var(--moa-line);
	padding-top: 15px !important;
	margin-bottom: 47px;
}
img.moa-offer__img { width: 100%; aspect-ratio: 429 / 330; object-fit: cover; display: block; }
.moa-offer__title h3 {
	position: relative;
	margin: 22px 0 18px;
	padding-right: 40px;
}
.moa-offer__title h3:after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 22px;
	height: 14.73px;
	transform: translateY(-50%);
	background: url("assets/arrow.svg") no-repeat center / contain;
}

/* ---------- Harbour band ---------- */
.moa-harbour { min-height: 827px; display: flex; align-items: center; }
.moa-harbour > .col.span_12 { width: 100%; }
.moa-harbour__title h2 {
	text-align: center;
	color: #fff;
	font-size: 50px;
	line-height: 1.15;
	text-transform: uppercase;
	margin: 0;
}

/* ---------- Follow us ---------- */
.moa-follow__text p { padding: 0; margin: 0; }
.moa-follow__big {
	font-family: var(--moa-serif);
	font-weight: 300;
	font-size: 123.43px;
	line-height: 104.91px;
	text-transform: uppercase;
	color: var(--moa-ink);
}
.moa-follow__small {
	display: inline-block;
	vertical-align: bottom;
	margin-left: 24.67px;
	padding-bottom: 8px;
	font-family: var(--moa-sans);
	font-weight: 500;
	font-size: 14.4px;
	line-height: 14.4px;
	letter-spacing: 0.5px;
}

/* Instagram strip: Salient flickity static-height gallery, alternate tiles dropped 41px. Pager hidden (not in design; drag still works). */
.moa-insta .moa-insta__grid .flickity-page-dots { display: none; }
.moa-insta .moa-insta__grid .flickity-slider .cell { margin-right: 14px; }
.moa-insta .moa-insta__grid .flickity-slider .cell:nth-child(even) { padding-top: 41px; }
.moa-insta .moa-insta__grid .flickity-viewport { overflow: visible; }

/* ---------- Footer (global section above footer) ---------- */
.nectar-global-section.before-footer { padding: 0; }
.moa-footer .divider-wrap { margin-bottom: 0; }
.moa-footer__title h2 { max-width: 478px; margin: 0 0 40px; }
.moa-footer__subscribe { max-width: 331px; text-transform: uppercase; }
.moa-footer__info p { padding-bottom: 10px; }
.moa-footer__info a { color: inherit; text-decoration: underline; }
.moa-footer__brand .img-with-aniamtion-wrap { margin-bottom: 25px; }
.moa-footer__brand .img-with-aniamtion-wrap,
.moa-footer__brand .img-with-aniamtion-wrap .inner,
.moa-footer__brand .img-with-aniamtion-wrap .hover-wrap,
.moa-footer__brand .img-with-aniamtion-wrap .hover-wrap-inner { display: block; width: 100%; }
img.moa-footer__logo { width: 100% !important; max-width: 1373px; height: auto; margin: 0 auto; opacity: 0.11; }
.moa-footer__copy p { text-align: center; color: var(--moa-muted); padding: 13px 0 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 1300px) {
	.moa-hero .nectar-scrolling-text h2 { font-size: 240px !important; line-height: 240px !important; }
}
@media (max-width: 999px) {
	body .vc_row.moa-hero { height: auto; min-height: 640px; }
	.moa-hero .nectar-button.moa-pill { margin-top: 60px; }
	.moa-lead p { font-size: 28px; line-height: 38px; text-indent: 110px; }
	.moa-lead .moa-label { left: 0; top: 6px; }
	.moa-harbour { min-height: 520px; }
	.moa-harbour__title h2 { font-size: 36px; }
	.moa-follow__big { font-size: 80px; line-height: 70px; }
}
@media (max-width: 690px) {
	.moa-hero .moa-hero__text h1 { font-size: 28px; }
	.moa-hero .nectar-scrolling-text h2 { font-size: 140px !important; line-height: 140px !important; }
	.moa-lead p { font-size: 22px; line-height: 30px; text-indent: 70px; }
	.moa-follow__big { font-size: 56px; line-height: 52px; }
}

/* One-page anchor links all count as "current" on the home page, so Salient drew the active
   underline under four items at once. Keep the underline for hover only. */
html body #header-outer #top nav > ul > li[class*="current"]:not(:hover) > a .menu-title-text:after,
html body #header-outer #top nav > ul > li[class*="current"]:not(:hover) > a:after { transform: scaleX(0) !important; }

/* Marquee runs edge to edge, past the 25px container gutter. */
.moa-hero .nectar-scrolling-text { margin-left: -25px; margin-right: -25px; }

/* Row paddings are inline (Figma px at 1440). Scale the large ones on small screens. */
@media (max-width: 999px) {
	body .vc_row.moa-about { padding-top: 90px !important; padding-bottom: 90px !important; }
	body .vc_row.moa-offerings { padding-top: 70px !important; padding-bottom: 20px !important; }
	body .vc_row.moa-follow { padding-top: 70px !important; }
	.moa-insta .moa-insta__grid .flickity-slider .cell img { height: 220px !important; width: auto; }
}
@media (max-width: 690px) {
	body .vc_row.moa-hero { padding-top: 120px !important; }
	body .vc_row.moa-about { padding-top: 60px !important; padding-bottom: 60px !important; }
	.moa-harbour__title h2 { font-size: 28px; line-height: 1.2; }
	.moa-feature__copy p { padding-bottom: 50px; }
	.moa-insta .moa-insta__grid .flickity-slider .cell img { height: 200px !important; }
	.moa-insta .moa-insta__grid .flickity-slider .cell:nth-child(even) { padding-top: 24px; }
}
@media (min-width: 1000px) and (max-width: 1300px) {
	.moa-insta .moa-insta__grid .flickity-slider .cell img { height: 265px !important; width: auto; }
}

/* ---------- Hero v3 (107:279): photo, headline in the right two thirds ---------- */
.moa-hero3__title h1 {
	max-width: 906px;
	margin: 0;
	color: #fff;
	font-weight: 400;
	font-size: min(83px, 5.76vw); /* 83px at 1440, scales with the column below that */
	line-height: 1.15;
	text-transform: uppercase;
}

/* ---------- Hero v1 (102:28): colour band, centred headline, five photo cards ---------- */
.moa-hero1__title h1 {
	max-width: 906px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-weight: 300;
	font-size: 83px;
	line-height: 1.05;
	text-transform: none;
}
.moa-hero1__sub p {
	max-width: 389px;
	margin: 48px auto 0;
	padding: 0;
	text-align: center;
	color: #fff;
	font-family: var(--moa-serif);
	font-weight: 300;
	font-size: 24px;
	line-height: 1.14;
}
body .vc_row.moa-hero1 { padding-bottom: 61px !important; }
body .vc_row.moa-hero1-cards { padding-left: 10px !important; padding-right: 10px !important; }
.moa-hero1-cards > .row_col_wrap_12 { display: flex; gap: 6px; }
.moa-hero1-cards > .row_col_wrap_12 > .wpb_column { flex: 1 1 0; width: auto !important; margin: 0 !important; padding: 0 !important; }
.moa-hero1-cards .img-with-aniamtion-wrap { margin-bottom: 0 !important; }
img.moa-card { display: block; width: 100%; aspect-ratio: 279 / 373; object-fit: cover; border-radius: var(--moa-radius); }

/* Line drawings beside About and Offerings (v1): decorative, 34% opacity, desktop only. */
.vc_row.moa-about--fish { overflow: clip; }
.moa-about--fish .wpb_column:first-child { position: relative; min-height: 1px; }
img.moa-deco-fish {
	position: absolute;
	left: -358px;
	top: -29px;
	width: 734px;
	height: 550px;
	max-width: none !important;
	object-fit: cover;
	opacity: 0.34 !important; /* image_with_animation sets opacity 1 after its entrance */
	transform: rotate(-30.77deg) !important;
	pointer-events: none;
}
img.moa-deco-plate {
	display: block;
	width: 327px;
	height: 342px !important;
	max-width: 100%;
	margin-top: 300px;
	object-fit: cover;
	object-position: 75% 0;
	opacity: 0.34 !important;
}

/* The plate hangs 47px past the list in Figma without pushing the harbour band down. */
.moa-offerings--deco .img-with-aniamtion-wrap { margin-bottom: -47px !important; }

/* ---------- Offerings as a text list (v1, v3) ---------- */
.moa-offer-list p {
	display: flex;
	align-items: center;
	height: 154.2px;
	margin: 0 0 -1px;
	padding: 0;
	border-top: 1px solid var(--moa-line);
	border-bottom: 1px solid var(--moa-line);
	font-family: var(--moa-serif);
	font-weight: 300;
	font-size: min(88px, 6.1vw);
	line-height: 1.17;
}
.moa-offer-list a { color: var(--moa-ink); text-decoration: none; transition: opacity 0.2s; }
.moa-offer-list a:hover { opacity: 0.6; }

@media (max-width: 999px) {
	.moa-hero1__title h1 { font-size: 56px; }
	.moa-hero--v3 .wpb_column { margin-left: 0 !important; width: 100% !important; }
	.moa-hero3__title h1 { font-size: min(56px, 8.4vw); }
	.moa-hero1-cards > .row_col_wrap_12 { flex-wrap: wrap; }
	.moa-hero1-cards > .row_col_wrap_12 > .wpb_column { flex: 1 1 30%; }
	img.moa-deco-fish, img.moa-deco-plate { display: none; }
	.moa-offer-list p { height: 100px; font-size: 56px; line-height: 64px; }
}
@media (max-width: 690px) {
	.moa-hero1__title h1 { font-size: 38px; }
	.moa-hero3__title h1 { font-size: 30px; } /* MEDITERRANEAN in capitals must fit 325px */
	body .vc_row.moa-hero1 { padding-top: 120px !important; }
	.moa-hero1-cards > .row_col_wrap_12 > .wpb_column { flex: 1 1 45%; }
	.moa-offer-list p { height: 72px; font-size: 34px; line-height: 40px; }
}