/* nd-responsive.css - Stage 4 designed layer for 9D Action Cinemas (loads LAST). Live has no viewport meta and no media query, so nothing here copies live.
   1250px and up: only keyboard focus rings (live shows the browser's own ring; Divi's reset removed it). Below 1250: WCAG AA colours in every state, 14px text,
   16px inputs, 24px tap targets. 1170 to 1249 keeps live's layout. Below 1170 the page is fluid; below 980 the menu sits behind a button; below 768 the phone design.
   Started from the kit's ilaunch-responsive.template.css (accommodation: booking bar, rooms) which this cinema site cannot use as is: tokens replaced, palette
   recomputed for 9D's dark ground, every selector rewritten for this site's own markup. */

:root {
  --nd-bg: #2c2c2c;          /* container texture average */
  --nd-text: #c8c8c8;        /* body text, 8.6:1 on --nd-bg */
  --nd-link: #7fcf4f;        /* live #6aba3a lifted: 6.4:1 on --nd-bg */
  --nd-link-hover: #ffffff;
  --nd-btn: #3b7a1c;         /* white on it 5.5:1 */
  --nd-btn-hover: #2c5f14;   /* white on it 8:1 */
  --nd-btn-dark: #1f4a0e;
  --nd-muted: #a6a6a6;       /* 5.4:1 on --nd-bg, 6:1 on the #242624 panels */
  --nd-red: #ff7a6b;         /* live's red notice, lifted: 5.3:1 on --nd-bg */
  --nd-menu: #3a3a3a;
  --nd-menu-hover: #5a5a5a;
  --nd-focus: #ffd54a;
}

/* ---------- every width: keyboard focus is visible (Divi's reset removed it; live shows the browser's own ring) ---------- */
body.nd-site a:focus-visible, body.nd-site button:focus-visible, body.nd-site input:focus-visible, body.nd-site select:focus-visible,
body.nd-site textarea:focus-visible, body.nd-site [tabindex]:focus-visible, body.nd-site summary:focus-visible { outline: -webkit-focus-ring-color auto 1px; outline-offset: 1px; }
body.nd-site .ils-menu-toggle { display: none; }
/* iframes (the YouTube embed, the map) take keyboard focus: they show the same ring; the FareHarbor kit sets outline:0 on its button's focus; an empty link (live's blank site-map row) is not a tab stop */
body.nd-site iframe:focus-visible, body.nd-site iframe.nd-focus { outline: -webkit-focus-ring-color auto 1px; outline-offset: 1px; }
body.nd-site a.fh-button-true-flat-green:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px #000000 !important; }
body.nd-site #page-container #content li > a:empty { display: none; }


/* ---------- below 1250: AA colours and the 14px floor (desktop keeps live's own colours and sizes) ---------- */
@media (max-width: 1249px) {
  body.nd-site a:focus-visible, body.nd-site button:focus-visible, body.nd-site input:focus-visible, body.nd-site select:focus-visible,
  body.nd-site textarea:focus-visible, body.nd-site [tabindex]:focus-visible, body.nd-site iframe:focus-visible, body.nd-site iframe.nd-focus { outline: 3px solid var(--nd-focus); outline-offset: 2px; }
  body.nd-site, body.nd-site #page-container, body.nd-site #page-container p, body.nd-site #page-container td, body.nd-site #page-container th, body.nd-site #page-container li { font-size: 14px; line-height: 22px; color: var(--nd-text); }
  body.nd-site #page-container .smalltext, body.nd-site #page-container small { font-size: 14px; line-height: 20px; color: var(--nd-muted); }
  body.nd-site #page-container a:link, body.nd-site #page-container a:visited { color: var(--nd-link); }
  body.nd-site #page-container a:hover, body.nd-site #page-container a:active { color: var(--nd-link-hover); text-decoration: underline; }
  body.nd-site #page-container h4 { color: var(--nd-muted); font-size: 18px; }
  body.nd-site #page-container h3 a:link, body.nd-site #page-container h3 a:visited { color: #d8d8d8; }
  body.nd-site #page-container em { color: #8fd45f; }
  body.nd-site #page-container em.highlight { background: #8a3c00; color: #ffffff; }
  body.nd-site #page-container .form td, body.nd-site #page-container .form th em, body.nd-site #page-container .form td em { color: var(--nd-text); }
  body.nd-site #page-container .contact-details a:link, body.nd-site #page-container .contact-details a:visited { color: #ff9a4d; }
  body.nd-site #page-container blockquote em { color: #ff9a4d; }
  body.nd-site #page-container .panel .details, body.nd-site #page-container .entry .details, body.nd-site #page-container .panel li em { color: var(--nd-muted); font-size: 14px; }
  body.nd-site #page-container .panel .title a:link, body.nd-site #page-container .panel .title a:visited { color: #ffffff; }
  body.nd-site #page-container div.top a:link, body.nd-site #page-container div.top a:visited { color: #c0c0c0; font-size: 14px; padding: 4px 12px; }
  body.nd-site #page-container div.top a:hover, body.nd-site #page-container div.top a:focus, body.nd-site #page-container div.top a:active { color: #ffffff; background: #a14400; }
  body.nd-site #page-container .paging { font-size: 14px; background-color: #e9e4d8; }
  body.nd-site #page-container .paging a:link, body.nd-site #page-container .paging a:visited { color: #333333; padding: 4px 8px; display: inline-block; }
  body.nd-site #page-container .paging em { color: #ffffff; background: #4a4a4a; padding: 4px 8px; display: inline-block; }
  /* live's red notice and other red copy lifted to AA */
  body.nd-site #page-container [style*="color: rgb(255, 0, 0)"], body.nd-site #page-container [style*="color:#ff0000"], body.nd-site #page-container [style*="color: #ff0000"],
  body.nd-site #page-container font[color="#ff0000"], body.nd-site #page-container [style*="color: rgb(255, 0, 0)"] * { color: var(--nd-red) !important; }
  body.nd-site #page-container [style*="color: rgb(0, 0, 0)"] { color: #c8c8c8 !important; }
  /* buttons: dark green with white text in every state */
  body.nd-site #page-container input.button, body.nd-site #page-container a.button, body.nd-site #page-container a.button:link, body.nd-site #page-container a.button:visited,
  body.nd-site #page-container .nd-form button.et_pb_contact_submit.et_pb_button {
    background: var(--nd-btn) !important; color: #ffffff !important; text-shadow: none; text-decoration: none; box-shadow: none; border: 2px solid #8fd45f !important; border-radius: 0 !important; }
  body.nd-site #page-container input.button:hover, body.nd-site #page-container a.button:hover, body.nd-site #page-container .nd-form button.et_pb_contact_submit.et_pb_button:hover,
  body.nd-site #page-container input.button:focus, body.nd-site #page-container a.button:focus, body.nd-site #page-container .nd-form button.et_pb_contact_submit.et_pb_button:focus,
  body.nd-site #page-container input.button:active, body.nd-site #page-container a.button:active, body.nd-site #page-container .nd-form button.et_pb_contact_submit.et_pb_button:active {
    background: var(--nd-btn-hover) !important; color: #ffffff !important; text-decoration: underline; }
  body.nd-site #page-container input.button.alt, body.nd-site #page-container a.button.alt { background: #4a4a4a !important; border-color: #bbbbbb !important; }
  /* form controls: 16px so a phone does not zoom, readable text on the boxed fields */
  body.nd-site #page-container input, body.nd-site #page-container select, body.nd-site #page-container textarea, body.nd-site #page-container .nd-form .input { font-size: 16px; color: #f0f0f0; }
  body.nd-site #page-container .nd-form .et_pb_contact_form_label, body.nd-site #page-container .form th { font-size: 15px; }
  body.nd-site #page-container .nd-form p.et_pb_contact_field > .input, body.nd-site #page-container .nd-form p.et_pb_contact_field > select, body.nd-site #page-container .nd-form p.et_pb_contact_field > textarea { font-size: 16px; color: #f0f0f0; line-height: 22px; }
  body.nd-site #page-container .nd-form .et_pb_contact_field_options_wrapper, body.nd-site #page-container .nd-form .et_pb_contact_field_checkbox label, body.nd-site #page-container .nd-form .et_pb_contact_right p.clearfix { font-size: 14px; color: var(--nd-text); }
  body.nd-site #page-container .nd-required { font-size: 14px; color: var(--nd-text); }
  /* header and menu */
  body.nd-site #page-container #header .topmenu { color: #9a9a9a; }
  body.nd-site #page-container #header .topmenu a:link, body.nd-site #page-container #header .topmenu a:visited { font-size: 14px; display: inline-block; padding: 2px 0; margin: 4px 8px; }
  body.nd-site #page-container #menu li { background: var(--nd-menu); }
  body.nd-site #page-container #menu li:hover, body.nd-site #page-container #menu li:focus-within { background: var(--nd-menu-hover); }
  body.nd-site #page-container #menu li:hover a, body.nd-site #page-container #menu li:focus-within a { color: #ffffff; text-decoration: underline; }
  body.nd-site #page-container #menu a:link, body.nd-site #page-container #menu a:visited { color: #ffffff; font-size: 15px; }
  /* footer */
  body.nd-site #page-container #footer, body.nd-site #page-container #footer .copyright, body.nd-site #page-container #footer .footer-tags p, body.nd-site #page-container .vcard { font-size: 14px; }
  body.nd-site #page-container #footer .footermenu a:link, body.nd-site #page-container #footer .footermenu a:visited, body.nd-site #page-container #footer .footer-tags a:not(.tag):link, body.nd-site #page-container #footer .footer-tags a:not(.tag):visited { display: inline-block; padding: 4px 2px; font-size: 14px; color: var(--nd-link); }
  body.nd-site #page-container #footer .footer-tags a.tag { display: inline-block; min-height: 24px; }
  body.nd-site #page-container .vcard a:link, body.nd-site #page-container .vcard a:visited { display: inline-block; padding: 4px 0; }
  /* a tel: link keeps the surrounding colour but stays readable and underlined only on hover (live's look is plain text) */
  body.nd-site #page-container a.tel-link, body.nd-site #page-container a.tel-link:link, body.nd-site #page-container a.tel-link:visited { color: inherit !important; }
  body.nd-site #page-container a.tel-link:hover, body.nd-site #page-container a.tel-link:focus, body.nd-site #page-container a.tel-link:active { color: #ffffff !important; text-decoration: underline !important; }
  /* flat grounds so contrast is a number, not a judgement over a texture (live's texture is a barely visible grain) */
  body.nd-site #page-container { background-image: none; background-color: #2b2b2b; }
  body.nd-site #page-container #footer { background-image: none; background-color: #242624; }
  body.nd-site #page-container .vcard { background-image: none; background-color: #1e201e; }
  body.nd-site #page-container #feature { background-image: none; }
  body.nd-site #page-container .featureimage { background-image: none; }
  /* tap rows: every standalone link is at least 24px tall */
  body.nd-site #page-container a.more, body.nd-site #page-container .title a, body.nd-site #page-container .banner a, body.nd-site #page-container a.tel-link,
  body.nd-site #page-container .panel li > a, body.nd-site #page-container .side li a, body.nd-site #page-container .panel.related a { display: inline-block; min-height: 24px; padding-top: 2px; padding-bottom: 2px; box-sizing: border-box; }
  body.nd-site #page-container a.more { font-size: 14px; line-height: 20px; padding-right: 9px; }
  body.nd-site #page-container .banner a { display: block; }
  body.nd-site #page-container .map-info a:link, body.nd-site #page-container .map-info a:visited, body.nd-site #page-container .marker-window a, body.nd-site #page-container .map-wrapper .map-info a { color: #1d5a0a; text-decoration: underline; }
  /* white page titles on the coloured bands: the green and the blue are darkened to 3:1 or better (4.2 and 4.7) */
  body.nd-site.green #page-container #feature { background-color: #4a8c28; }
  body.nd-site.blue #page-container #feature { background-color: #0d7f9c; }
  /* live's red notice (inline #f00) to AA */
  body.nd-site #page-container [style*="#f00"], body.nd-site #page-container [style*="#f00"] * { color: var(--nd-red) !important; }
  /* text links: padding grows their box to 24px without moving a line */
  body.nd-site #page-container #content a:not(.button):not(.gallery-item) { padding-top: 3px; padding-bottom: 3px; }
  body.nd-site #page-container .panel .text a, body.nd-site #page-container .panel.related a, body.nd-site #page-container .side a:not(.fh-button-true-flat-green) { font-size: 14px !important; }
  body.nd-site #page-container .image a, body.nd-site #page-container .entry .image a.gallery-item { display: block; }
  body.nd-site #page-container input[type="checkbox"], body.nd-site #page-container input[type="radio"] { width: 24px !important; height: 24px !important; margin: 0 8px 0 0; }
  body.nd-site #page-container .nd-form .datepicker_wrap > input.input { font-size: 16px; }
  /* image-only links: the box is the picture, not the 19px text line the inline link would measure */
  body.nd-site #page-container #header .logo a, body.nd-site #page-container #header .socialmedia a, body.nd-site #page-container .gallery a.gallery-item, body.nd-site #page-container .banner a { display: inline-block; vertical-align: top; }
  body.nd-site #page-container #header .logo a > img { display: block; }
  body.nd-site #page-container .nd-error-box a { display: inline-block; padding: 4px 0; }
  /* the fixed Book Now button sits over the last 80px of a stretched viewport: the page ends below it (13 pages carry it) */
  body.nd-site:has(.fh-fixed--bottom) #page-container { padding-bottom: 84px; }
  body.nd-site #page-container #content { overflow-wrap: anywhere; }
  /* gallery captions, movie titles */
  body.nd-site #page-container .gallery strong { font-size: 14px; }
  body.nd-site #page-container #content a { min-height: 24px; }
}

/* ---------- 1170 to 1249: live's layout, text links get a 24px tap row ---------- */
@media (min-width: 1170px) and (max-width: 1249px) {
  body.nd-site #page-container #content p a, body.nd-site #page-container #content li a { padding: 2px 0; }
}

/* ---------- below 1170: fluid page (tablet and phone share the reflow) ---------- */
@media (max-width: 1169px) {
  body.nd-site { min-height: 0; background: #1d1d1d url(/wp-content/uploads/ilaunch/skin/container-outer-bg.jpg) top center repeat-x; }
  body.nd-site #page-container { width: auto; max-width: 1100px; margin: 0 auto; padding-bottom: 0; box-shadow: none; }
  body.nd-site .et-l--header .et_pb_column { height: auto; }
  body.nd-site #page-container .nd-form .et_pb_contact_right { min-height: 0; margin: 6px 0 10px 15px; }
  body.nd-site #page-container, body.nd-site #page-container p, body.nd-site #page-container td, body.nd-site #page-container th, body.nd-site #page-container li { font-size: 15px; line-height: 23px; }
  /* header: logo, the small links, the phone number and the social icons, then the menu row */
  body.nd-site #page-container #header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; height: auto; padding: 12px 20px 0; background: #000000; border-bottom: 3px solid #3d3d3d; text-align: right; }
  body.nd-site #page-container #header .logo { position: static; width: 200px; flex: 0 0 200px; top: auto; left: auto; }
  body.nd-site #page-container #header .logo img { display: block; width: 200px; height: auto; }
  body.nd-site #page-container #header .right { display: block; flex: 1 1 0; min-width: 0; height: auto; padding: 0 0 8px; }
  body.nd-site #page-container #header .topmenu { margin: 0 0 6px; }
  body.nd-site #page-container #header .phone { display: inline-block; font-size: 24px; line-height: 32px; background-position: left center; padding-left: 33px; vertical-align: middle; }
  body.nd-site #page-container #header .socialmedia { float: none; display: inline-block; margin: 0 0 0 16px; vertical-align: middle; }
  body.nd-site #page-container #header .socialmedia a { display: inline-block; padding: 4px; }
  body.nd-site #page-container #menu { flex: 1 1 100%; margin: 0 -20px; padding: 0; order: 10; }
  body.nd-site #page-container #menu ul { float: none; display: flex; flex-wrap: wrap; background: #151515; padding: 8px 15px 0; margin: 0; width: auto; }
  body.nd-site #page-container #menu li { float: none; margin: 0 5px 8px 0; flex: 0 0 auto; }
  body.nd-site #page-container #menu li a:link, body.nd-site #page-container #menu li a:visited { padding: 0 16px; line-height: 40px; }
  body.nd-site #page-container #menu li.tickets a { font-size: 18px; }
  body.nd-site #page-container #menu .clearleft { display: none; }
  /* feature band: the page title above its banner image, no 20px overhang */
  body.nd-site #page-container #feature { height: auto; }
  body.nd-site #page-container .featureimage { height: auto; display: flex; flex-direction: column; align-items: flex-end; background-image: none; }
  body.nd-site #page-container #feature h1 { position: static; align-self: flex-start; margin: 0; padding: 22px 20px 6px; font-size: 40px; line-height: 44px; }
  body.nd-site #page-container .featureimage > img { max-width: 100%; height: auto; margin-top: 0; }
  body.nd-site #page-container .homefeature { width: auto; height: auto; }
  body.nd-site #page-container .homefeature > img { display: block; width: 100%; height: auto; margin-top: 0; }
  /* content columns stack, the sidebar follows the text */
  body.nd-site #page-container #content { padding: 26px 20px; }
  body.nd-site #page-container #content .left, body.nd-site #page-container #content .right, body.nd-site #page-container .contact-form, body.nd-site #page-container .contact-details { float: none; width: auto; }
  body.nd-site #page-container #content .right { margin-top: 28px; }
  /* an inline height="NNNpx" on a ported content image (gallery, promo) beats height:auto and stretches the picture once max-width shrinks its width: the height must follow the ratio */
  body.nd-site #page-container #content img { max-width: 100%; height: auto !important; }
  body.nd-site #page-container #content .contentimage { float: none; margin: 0 0 16px; }
  /* 3.18 fix round 1 (A9): no width:auto here: it overrides the img width attribute, so before the picture loaded the box was 0px tall and the text below jumped 199px when it arrived (home CLS 0.104 on a slow phone) */
  body.nd-site #page-container #content .contentimage img { max-width: 100%; height: auto; }
  body.nd-site #page-container .contentbottom { padding: 20px; }
  body.nd-site #page-container .panel.blog ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  body.nd-site #page-container .banner img { max-width: 100%; height: auto; }
  body.nd-site #page-container .map-container { height: 420px; }
  body.nd-site #page-container iframe, body.nd-site #page-container video, body.nd-site #page-container embed, body.nd-site #page-container object { max-width: 100%; }
  /* forms: label above or beside, fluid fields */
  body.nd-site #page-container .nd-form p.et_pb_contact_field > .input, body.nd-site #page-container .nd-form p.et_pb_contact_field > textarea.input,
  body.nd-site #page-container .right .nd-form p.et_pb_contact_field > .input, body.nd-site #page-container .right .nd-form p.et_pb_contact_field > textarea { width: auto; flex: 1 1 auto; max-width: 420px; min-width: 0; }
  body.nd-site #page-container .nd-form p.et_pb_contact_field > select.input { flex: 0 0 auto; }
  body.nd-site #page-container .nd-form .et_pb_contact_field_options_wrapper { width: auto; flex: 1 1 auto; }
  body.nd-site #page-container .nd-form .et_pb_contact_form_label { min-width: 0; width: 150px; flex: 0 0 150px; padding-left: 0; }
  body.nd-site #page-container .nd-form-redemption .et_pb_contact_form_label { width: 150px; min-width: 0; }
  body.nd-site #page-container .nd-form p.et_pb_contact_field:has(> [data-required_mark="required"]), body.nd-site #page-container .nd-form p.et_pb_contact_field:has(> .datepicker_wrap > [data-required_mark="required"]) { background-position: 150px 10px; }
  body.nd-site #page-container .nd-form .datepicker_wrap > input.input { margin-bottom: 7px; }
  body.nd-site #page-container .nd-form .et_contact_bottom_container, body.nd-site #page-container .nd-form-redemption .et_contact_bottom_container { padding-left: 150px; }
  body.nd-site #page-container .nd-required, body.nd-site #page-container .nd-form-redemption .nd-required { margin-left: 150px; }
  /* gallery and movie tables: a grid of thumbnails */
  body.nd-site #page-container table.gallery, body.nd-site #page-container table.gallery tbody { display: block; width: 100%; }
  body.nd-site #page-container table.gallery tbody, body.nd-site #page-container table.gallery { }
  body.nd-site #page-container table.gallery tbody { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  body.nd-site #page-container table.gallery tr { display: contents; }
  body.nd-site #page-container table.gallery td { display: block; width: auto; padding: 0; }
  body.nd-site #page-container table.gallery td:not(:has(*)) { display: none; }
  body.nd-site #page-container .gallery .thumb { box-sizing: border-box; }
  body.nd-site #page-container .gallery .thumb img { display: block; width: 100%; height: auto; }
  body.nd-site #page-container .gallery strong { width: auto; padding: 7px 0 0; }
  /* 3.18 fix 1 (C4): the tap layer is the picture's size (329px, centred), not the whole cell */
  body.nd-site #page-container .gallery .zoom { width: 329px; max-width: 100%; left: 0; right: 0; margin: 0 auto; height: auto; aspect-ratio: 329 / 200; }
  /* price and layout tables never push the page sideways */
  body.nd-site #page-container #content table { max-width: 100%; }
  /* footer */
  body.nd-site #page-container #footer { padding: 18px 20px; }
  body.nd-site #page-container .vcard { line-height: 30px; padding: 12px 20px; }
}

/* ---------- below 980: the menu sits behind a button ---------- */
@media (max-width: 979px) {
  body.nd-site #page-container #header { padding: 10px 16px 0; }
  body.nd-site #page-container #header .logo { flex: 0 0 150px; width: 150px; }
  body.nd-site #page-container #header .logo img { width: 150px; }
  body.nd-site #page-container #header { align-items: center; justify-content: flex-start; padding-bottom: 0; }
  body.nd-site #page-container #header .right { display: contents; }
  body.nd-site #page-container #header .logo { order: 0; }
  body.nd-site #page-container #header .phone { order: 1; margin: 0 0 0 auto; }
  body.nd-site #page-container #header .socialmedia { order: 2; margin: 0 0 0 12px; }
  body.nd-site #page-container .ils-menu-toggle { order: 3; }
  body.nd-site #page-container #menu { order: 4; }
  body.nd-site #page-container #header .topmenu { display: none; order: 5; }
  body.nd-site #page-container #header.nd-menu-open .topmenu { display: block; flex: 1 1 100%; text-align: left; margin: 0 -16px; padding: 10px 16px 14px; background: #151515; }
  body.nd-site #page-container .ils-menu-toggle { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; margin: 0 0 0 12px; border: 2px solid #ffffff; border-radius: 0; background: #1b1b1b; color: #ffffff;
    font: 15px/48px 'AdventorMedium', Arial, Helvetica, sans-serif; text-transform: uppercase; cursor: pointer; vertical-align: middle; }
  body.nd-site #page-container .ils-menu-toggle span, body.nd-site #page-container .ils-menu-toggle span::before, body.nd-site #page-container .ils-menu-toggle span::after { display: block; position: relative; width: 20px; height: 3px; background: #ffffff; content: ""; }
  body.nd-site #page-container .ils-menu-toggle span::before { position: absolute; top: -7px; }
  body.nd-site #page-container .ils-menu-toggle span::after { position: absolute; top: 7px; }
  body.nd-site #page-container .ils-menu-toggle:hover, body.nd-site #page-container .ils-menu-toggle[aria-expanded="true"] { background: #ffffff; color: #000000; }
  body.nd-site #page-container .ils-menu-toggle:hover span, body.nd-site #page-container .ils-menu-toggle:hover span::before, body.nd-site #page-container .ils-menu-toggle:hover span::after,
  body.nd-site #page-container .ils-menu-toggle[aria-expanded="true"] span, body.nd-site #page-container .ils-menu-toggle[aria-expanded="true"] span::before, body.nd-site #page-container .ils-menu-toggle[aria-expanded="true"] span::after { background: #000000; }
  body.nd-site #page-container .ils-menu-toggle[aria-expanded="true"] span { background: transparent; }
  body.nd-site #page-container #menu { display: none; margin: 0 -16px; }
  body.nd-site #page-container #header.nd-menu-open #menu { display: block; }
  body.nd-site #page-container #menu ul { display: block; padding: 0; }
  body.nd-site #page-container #menu li { display: block; margin: 0; border-bottom: 4px solid #ffffff; }
  body.nd-site #page-container #menu li a:link, body.nd-site #page-container #menu li a:visited { display: block; padding: 0 16px; line-height: 50px; font-size: 17px; text-align: left; }
  body.nd-site #page-container #menu li.tickets a { font-size: 18px; }
  body.nd-site #page-container .panel.blog ul { grid-template-columns: 1fr; }
  body.nd-site #page-container #header .phone { font-size: 20px; }
  body.nd-site #page-container #feature h1 { font-size: 34px; line-height: 38px; padding: 18px 16px 6px; }
  body.nd-site #page-container table.gallery tbody { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- the FareHarbor Book Now button (third-party kit CSS, every rule !important): AA green in every state below 1250, a compact pill on phones ---------- */
@media (max-width: 1249px) {
  body.nd-site a.fh-button-true-flat-green.fh-fixed--bottom, body.nd-site a.fh-button-true-flat-green { background-color: #2a7f26 !important; color: #ffffff !important; border: 2px solid #ffffff !important; }
  body.nd-site a.fh-button-true-flat-green.fh-fixed--bottom:hover, body.nd-site a.fh-button-true-flat-green.fh-fixed--bottom:focus, body.nd-site a.fh-button-true-flat-green.fh-fixed--bottom:active,
  body.nd-site a.fh-button-true-flat-green:hover, body.nd-site a.fh-button-true-flat-green:focus, body.nd-site a.fh-button-true-flat-green:active { background-color: #1b5c18 !important; color: #ffffff !important; text-decoration: none !important; }
  body.nd-site a.fh-button-true-flat-green.fh-fixed--bottom:focus-visible { outline: 3px solid var(--nd-focus) !important; outline-offset: 2px !important; }
}
/* 3.18 fix round 1 (A1): FareHarbor's own rule is @media (max-width:768px) { .fh-fixed--bottom { left:0; right:0; margin:0 15% } } (a 70% bar), so the compact pill must cover 768 too */
@media (max-width: 768px) {
  body.nd-site a.fh-button-true-flat-green.fh-fixed--bottom { left: auto !important; right: 12px !important; bottom: 12px !important; margin: 0 !important; font-size: 18px !important; line-height: 1.6 !important; padding: 6px 20px !important; min-height: 44px !important; box-sizing: border-box !important; }
}

/* ---------- 3.18 fix round 1 (A2): form selects below 1250 ----------
   WebKit paints a native (near-white) box for appearance:menulist and ignores the dark background, so the white label was invisible on every iPhone and iPad.
   Below 1250 (Rule 2: AA in every state) the select is drawn by the page in every browser: dark box, light text (about 7.9:1), a white chevron, and the
   option list keeps dark text on white (Chrome on Windows and Linux paints the list from the same colours). At 1250 and up live's native look is kept. */
@media (max-width: 1249px) {
  body.nd-site #page-container select, body.nd-site #page-container .nd-form p.et_pb_contact_field > select, body.nd-site #page-container .nd-form p.et_pb_contact_field > select.input {
    -webkit-appearance: none; appearance: none; background-color: #4a4a4a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 8px; color: #f0f0f0; padding-right: 32px; }
  body.nd-site #page-container select option { color: #111111; background-color: #ffffff; }
}

/* ---------- 3.18 fix round 1 (A8): /locations opening hours at 768 to 1169 ----------
   The 6-column table with 16% cells and empty spacer cells (live's own markup) is pixel-identical to live at 1170 and up. Between 768 and 1169 it left "15" touching
   "Opening Hours" and the table 242px in. The same fold as the phone design, with wider columns: spacer cells hidden, the hours rows a 3-column grid. */
@media (min-width: 768px) and (max-width: 1169px) {
  body.nd-site.red #page-container #content table[width="100%"] { width: 100%; table-layout: auto; }
  body.nd-site.red #page-container #content table[width="100%"] td { width: auto !important; padding: 2px 6px 2px 0; overflow-wrap: normal; word-break: normal; }
  body.nd-site.red #page-container #content table[width="100%"] td[colspan] { display: block; padding: 0; }
  body.nd-site.red #page-container #content > table > tbody > tr:nth-child(2) { display: none; }
  body.nd-site.red #page-container #content > table > tbody > tr:nth-child(n+3) > td:nth-child(-n+2) { display: none; }
  body.nd-site.red #page-container #content > table > tbody > tr:nth-child(n+3) > td:nth-child(n+6) { display: none; }
  body.nd-site.red #page-container #content > table > tbody > tr:first-child > td:not(:nth-child(2)) { display: none; }
  body.nd-site.red #page-container #content > table > tbody > tr:nth-child(n+3) { display: grid; grid-template-columns: minmax(140px, 1fr) 140px 200px; column-gap: 12px; }
  body.nd-site.red #page-container #content > table > tbody > tr:nth-child(3) > td:nth-child(3) { grid-column: 1 / -1; }
  body.nd-site.red #page-container #content > table > tbody > tr:nth-child(3) > td:nth-child(4) { grid-column: 2; }
  body.nd-site.red #page-container #content > table > tbody > tr:nth-child(3) > td:nth-child(5) { grid-column: 3; }
  body.nd-site.red #page-container #content > table > tbody > tr > td { padding: 4px 10px 4px 0; font-size: 15px; }
}

/* ---------- phone: below 768 ---------- */
@media (max-width: 767px) {
  body.nd-site #page-container #content { padding: 22px 16px 28px; }
  body.nd-site, body.nd-site #page-container, body.nd-site #page-container p, body.nd-site #page-container td, body.nd-site #page-container th, body.nd-site #page-container li { font-size: 16px; line-height: 24px; }
  body.nd-site #page-container #header .logo { flex: 0 0 120px; width: 120px; }
  body.nd-site #page-container #header .logo img { width: 120px; }
  body.nd-site #page-container #header .phone { order: 2; margin: 0; font-size: 18px; line-height: 28px; padding-left: 30px; background-size: 22px auto; flex: 0 0 auto; }
  body.nd-site #page-container #header .socialmedia { order: 3; margin: 0 0 0 auto; }
  body.nd-site #page-container .ils-menu-toggle { order: 1; margin: 0 0 0 auto; height: 44px; line-height: 44px; }
  body.nd-site #page-container #header { padding-bottom: 8px; }
  body.nd-site #page-container #menu { margin-top: 8px; }
  body.nd-site #page-container #feature h1 { font-size: 28px; line-height: 32px; }
  /* Jake feedback 21 Oct (reversed): the page title over the banner stays left-aligned on a phone, as on live and desktop (the site's signature look) */
  body.nd-site #page-container #feature h1 { align-self: flex-start; text-align: left; padding-left: 16px; padding-right: 16px; }
  body.nd-site #page-container #content h1 { font-size: 30px; line-height: 34px; }
  body.nd-site #page-container #content h2 { font-size: 18px; line-height: 24px; }
  body.nd-site #page-container .contact-form h2, body.nd-site #page-container .contact-details h2 { font-size: 26px; line-height: 30px; }
  body.nd-site #page-container .contact-details p, body.nd-site #page-container .contact-details td { font-size: 16px; line-height: 26px; }
  body.nd-site #page-container .contact-form p { font-size: 15px; }
  body.nd-site #page-container table.gallery tbody { grid-template-columns: 1fr 1fr; gap: 8px; }
  body.nd-site #page-container .gallery .thumb { border-width: 4px; }
  /* forms: label above its field, full width */
  body.nd-site #page-container .nd-form p.et_pb_contact_field { display: block; background-image: none !important; margin-bottom: 12px; }
  body.nd-site #page-container .nd-form .et_pb_contact_form_label { display: block; width: auto; flex: none; padding: 0 0 4px; font-size: 15px; line-height: 24px; }
  body.nd-site #page-container .nd-form p.et_pb_contact_field > .input, body.nd-site #page-container .nd-form p.et_pb_contact_field > textarea.input,
  body.nd-site #page-container .right .nd-form p.et_pb_contact_field > .input, body.nd-site #page-container .right .nd-form p.et_pb_contact_field > textarea,
  body.nd-site #page-container .nd-form p.et_pb_contact_field > select.input { display: block; width: 100%; max-width: none; margin: 0; box-sizing: border-box; min-height: 44px; }
  body.nd-site #page-container .nd-form p.et_pb_contact_field > textarea.input { min-height: 120px; height: 120px; }
  body.nd-site #page-container .nd-form .datepicker_wrap { display: flex; width: 100%; }
  body.nd-site #page-container .nd-form .datepicker_wrap > input.input { flex: 1 1 auto; width: auto; margin: 0; min-height: 44px; }
  body.nd-site #page-container .nd-form .et_contact_bottom_container, body.nd-site #page-container .nd-form-redemption .et_contact_bottom_container { padding-left: 0; }
  body.nd-site #page-container .nd-form .et_pb_contact_right { margin-left: 0; min-height: 0; }
  body.nd-site #page-container .nd-required, body.nd-site #page-container .nd-form-redemption .nd-required { margin-left: 0; }
  body.nd-site #page-container .nd-form button.et_pb_contact_submit.et_pb_button { width: 100%; height: 52px; margin: 6px 0 !important; }
  body.nd-site #page-container .right .nd-form button.et_pb_contact_submit.et_pb_button { margin-left: 0 !important; }
  body.nd-site #page-container .nd-form input.et_pb_contact_captcha { min-height: 44px; width: 70px; max-width: 70px; }
  /* contact details: the label above its value, so an email address never breaks mid-word */
  body.nd-site #page-container .contact-details table, body.nd-site #page-container .contact-details tbody, body.nd-site #page-container .contact-details tr, body.nd-site #page-container .contact-details td { display: block; width: auto; }
  body.nd-site #page-container .contact-details td { padding: 0; }
  body.nd-site #page-container .contact-details tr { margin-bottom: 10px; }
  body.nd-site #page-container .contact-details a { overflow-wrap: anywhere; }
  /* the ticket calculator tables and the search box stack: label above field */
  body.nd-site #page-container table.form, body.nd-site #page-container table.form tbody, body.nd-site #page-container table.form tr, body.nd-site #page-container table.form th, body.nd-site #page-container table.form td { display: block; width: auto; min-width: 0; }
  body.nd-site #page-container table.form th { padding: 8px 0 2px; }
  body.nd-site #page-container table.form td { padding: 2px 0 8px; }
  body.nd-site #page-container table.form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]), body.nd-site #page-container table.form select, body.nd-site #page-container table.form textarea { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; font-size: 16px; }
  body.nd-site #page-container table.form.tiny select.short { width: auto; min-width: 120px; }
  body.nd-site #page-container table.form.searchpage td { text-align: left; }
  body.nd-site #page-container table.form input.button { width: 100%; min-height: 48px; }
  /* the locations page lays its opening hours out in a 6-column table with 16% cells: let the browser size the columns by their text */
  body.nd-site #page-container #content table[width="100%"] { width: 100%; table-layout: auto; }
  body.nd-site #page-container #content table[width="100%"] td { width: auto !important; padding: 2px 6px 2px 0; overflow-wrap: normal; word-break: normal; }
  body.nd-site #page-container #content table[width="100%"] td[colspan] { display: block; padding: 0; }
  body.nd-site.red #page-container #content > table > tbody > tr:nth-child(2) { display: none; }
  body.nd-site.red #page-container #content > table > tbody > tr:nth-child(n+3) > td:nth-child(-n+2) { display: none; }
  body.nd-site.red #page-container #content > table > tbody > tr:nth-child(n+3) > td:nth-child(n+6) { display: none; }
  body.nd-site.red #page-container #content > table > tbody > tr:first-child > td:not(:nth-child(2)) { display: none; }
  body.nd-site.red #page-container #content > table > tbody > tr:nth-child(n+3) { display: grid; grid-template-columns: 1fr 80px 120px; column-gap: 8px; }
  body.nd-site.red #page-container #content > table > tbody > tr:nth-child(3) > td:nth-child(3) { grid-column: 1 / -1; }
  body.nd-site.red #page-container #content > table > tbody > tr:nth-child(3) > td:nth-child(4) { grid-column: 2; }
  body.nd-site.red #page-container #content > table > tbody > tr:nth-child(3) > td:nth-child(5) { grid-column: 3; }
  body.nd-site.red #page-container #content > table > tbody > tr > td { padding: 4px 10px 4px 0; font-size: 15px; }
  /* tables with several columns scroll inside their own box; they never widen the page */
  body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]) { display: block; overflow-x: auto; }
  body.nd-site #page-container .map-container { height: 320px; }
  /* the fixed Book Now button stays a compact pill and the page ends below it */
}

/* ---------- narrowest phones (320 to 359) ---------- */
@media (max-width: 359px) {
  body.nd-site.red #page-container #content > table > tbody > tr:nth-child(n+3) { grid-template-columns: 1fr 64px 100px; column-gap: 6px; }
  body.nd-site #page-container #header .phone { font-size: 16px; padding-left: 26px; }
}

/* ---------- 1250 to 1360: live's fixed Book Now pill sits over the phone number in the footer line at the very bottom of the page (DELIBERATE: 84px of page
   below the footer on the 13 pages that carry the pill, so the last line can be read; everywhere else the 1250+ page is live's pixel for pixel) ---------- */
@media (min-width: 1250px) and (max-width: 1360px) {
  body.nd-site:has(.fh-fixed--bottom) #page-container { padding-bottom: 84px; }
}

/* ---------- 3.18 fix round 1, part C (below 1250 only; 1250 and up stays live's) ---------- */
@media (max-width: 1249px) {
  /* C6: a phone number link is as big as the words around it */
  body.nd-site #page-container #content a[href^="tel:"] { font-size: inherit !important; }
  /* C7 (WCAG 1.4.1): links inside body copy are told apart by an underline, not by green on grey alone; menus, buttons, picture links and Read More keep their look */
  body.nd-site #page-container #content p a:not(.more):not(.button):not(.fh-button-true-flat-green):not(.gallery-item):not(.clicktarget),
  body.nd-site #page-container #content blockquote a, body.nd-site #page-container #content .entry .details a, body.nd-site #page-container #content .summary a:not(.gallery-item), body.nd-site #page-container #content li a:not(.more):not(.button) { text-decoration: underline; text-underline-offset: 2px; }
  body.nd-site #page-container #content .panel a, body.nd-site #page-container #content .title a, body.nd-site #page-container #content .side a { text-decoration: none; }
  /* C8: the stand-alone Get Directions link is a 24px target */
  body.nd-site #page-container .map-wrapper .map-info a { display: inline-block; padding: 3px 0; line-height: 20px; min-height: 24px; box-sizing: border-box; }
}
@media (max-width: 1169px) {
  /* C9: live's stray feature-image file link stays, but sits inside the page gutter under the menu instead of flush right */
  body.nd-site #page-container .featureimage > a:not(:has(img)) { display: block; position: static; align-self: stretch; text-align: left; padding: 4px 16px; font-size: 14px; overflow-wrap: anywhere; }
}
@media (max-width: 979px) {
  /* C5: the home Latest Blogs panel takes the full width and its posts stack at the same indent */
  body.nd-site #page-container .panel.blog { float: none; width: auto; }
  body.nd-site #page-container .panel.blog ul, body.nd-site #page-container .panel.blog li { float: none; width: auto; margin-left: 0; }
}
@media (max-width: 767px) {
  /* C1: the price table (6 columns, 275px cells, three empty spacer columns) becomes a 2-column list: label left, price right; no break inside a price or a word */
  body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):has(> tbody > tr > td:nth-child(6)) { display: table; width: 100%; overflow: visible; table-layout: auto; }
  body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):has(> tbody > tr > td:nth-child(6)) td { width: auto !important; padding: 4px 0; font-size: 16px; }
  body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):has(> tbody > tr > td:nth-child(6)) tr > td:nth-child(1):not([colspan]), body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):has(> tbody > tr > td:nth-child(6)) tr > td:nth-child(2):not([colspan]),
  body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):has(> tbody > tr > td:nth-child(6)) tr > td:nth-child(5):not([colspan]), body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):has(> tbody > tr > td:nth-child(6)) tr > td:nth-child(6):not([colspan]) { display: none; }
  body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):has(> tbody > tr > td:nth-child(6)) tr > td[colspan]:first-child, body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):has(> tbody > tr > td:nth-child(6)) tr > td[colspan]:last-child { display: none; }
  body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):has(> tbody > tr > td:nth-child(6)) tr > td[colspan]:nth-child(2) { display: table-cell; text-align: left; }
  body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):has(> tbody > tr > td:nth-child(6)) tr > td:nth-child(4):not([colspan]) { white-space: nowrap; text-align: right; padding-left: 12px; }
  body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):has(> tbody > tr > td:nth-child(6)) tr > td:nth-child(3):not([colspan]) { overflow-wrap: normal; word-break: normal; hyphens: manual; }
  /* C11: no lone "|" after the last footer link and no stray colon before the CMS link */
  body.nd-site #page-container #footer .footermenu em:last-child, body.nd-site #page-container #footer .nd-colon { display: none; }
}
@media (max-width: 639px) {
  /* C2: the post's lead picture sits above the text, full width, instead of floating and squeezing the first paragraph to a few letters */
  body.nd-site #page-container .entry .image:has(a.gallery-item) { float: none; margin: 0 0 12px; max-width: 100%; }
  body.nd-site #page-container .entry .image:has(a.gallery-item) img { max-width: 100%; height: auto; }
}

/* 3.18 fix round 2 (C10): live's own error box keeps the page gutter at every width below 1250 */
@media (max-width: 1249px) {
  body.nd-site #page-container .nd-error-box { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
}
/* 3.18 fix round 2 (C13): the long price labels keep 20px clear of the prices (768 to 1169, and the phone table) */
@media (max-width: 1169px) {
  body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):has(> tbody > tr > td:nth-child(6)) tr > td:nth-child(3):not([colspan]) { padding-right: 20px; }
}

/* 3.18 fix round 3 (C14): the contact details table (2 columns) stacks label over value on phones, so the Head Office email keeps its address whole */
@media (max-width: 767px) {
  body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):not(:has(td:nth-child(3))) { display: block; }
  body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):not(:has(td:nth-child(3))) tbody, body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):not(:has(td:nth-child(3))) tr { display: block; }
  body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):not(:has(td:nth-child(3))) td { display: block; width: auto !important; padding: 2px 0; overflow-wrap: break-word; word-break: normal; }
  body.nd-site #page-container #content table:not(.gallery):not(.form):not([width="100%"]):not(:has(td:nth-child(3))) tr > td:first-child { padding-top: 10px; }
}

/* FAQ page (Jake feedback 21 Oct): one category list straight after the intro, equal columns on desktop and tablet, stacked on phone; the answers run in a single column beneath */
body.nd-site #page-container #content .left.faq-left { float: none; width: auto; max-width: 900px; }
body.nd-site #page-container .faq-left .panel.faqs { margin: 20px 0 10px; }
body.nd-site #page-container .faq-left .panel.faqs ul.archive { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; list-style: none; margin: 0; padding: 0; }
body.nd-site #page-container .faq-left .panel.faqs ul.archive li { margin: 0; padding: 0; }
@media (max-width: 767px) {
  body.nd-site #page-container .faq-left .panel.faqs ul.archive { grid-template-columns: 1fr; }
}

/* Testimonials (Jake feedback 21 Oct): the guest review text is italic; the name, place and date line beneath stays upright */
body.nd-site #page-container .entry blockquote p { font-style: italic; }
body.nd-site #page-container .entry blockquote p em { font-style: normal; }