/* fg-mobile.css - Stage 4 DESIGNED tablet and phone layer for Founda Gardens (skill Rule 2). Loaded LAST.
   Desktop (1250px and up) is untouched: every rule here sits inside a max-width query below 1250.
   Bands:  1170-1249  live's fixed 1170 layout kept, with the accessibility floor below.
           768-1169   a reflow: header in the flow above a shorter hero, fluid container, home blocks stacked,
                      menu inline from 980, behind a Menu button below 980 (Book Now stays in the header bar).
           below 768  the phone design.
   Floor below 1250 (every state): WCAG AA colours, text 14px+, inputs 16px+, tap targets 24px+, no clipping, no overlap,
   no sideways scroll.
   Started from the kit's ilaunch-responsive.template.css (the starter pack's render_mobile_css.py refuses this template:
   check_v2_pattern exit 3, no booking bar); its band structure, menu button and state rules are kept, every selector is
   rewritten for this template's markup (family B: .content / .container.main / .maintext, home blocks .upper-content,
   .special, .mid-content, .bottom-content, .blog-wrapper, .faq). Palette below 1250 (AA, computed for this site):
     red buttons   #d61f1f (white 5.15:1; live #ee2525 is 4.26:1)      hover/focus/active  #275e7a (white 7.07:1)
     blue button   #2f779b (white 4.96:1)                             hover/focus/active  #1d4a60 (white 9.6:1)
     dark bands    #2b2d2b (white 13.9:1, #43a8dc 5.2:1)               footer email link   #7cc4ea (7.0:1 on the footer)
     muted text    #595959 (7.0:1 on white, 6.0:1 on #f0f0f0; live's #888888 on #f0f0f0 is 3.1:1) */

/* ======================= below 1250: accessibility floor (all narrower bands) ======================= */
@media (max-width: 1249px) {
  /* type floor: live's 11 to 13px lines */
  body.fg-site #page-container .panel { font-size: 14px; line-height: 20px; }
  body.fg-site #page-container .panel .date, body.fg-site #page-container .panel .details, body.fg-site #page-container .entry .details,
  body.fg-site #page-container .panel li em, body.fg-site #page-container .details strong, body.fg-site #page-container .details a { font-size: 14px; }
  body.fg-site #page-container .panel .summary { font-size: 14px; line-height: 20px; }
  body.fg-site #page-container a.more, body.fg-site #page-container a.more:link, body.fg-site #page-container a.more:visited { font-size: 14px; line-height: 24px; padding-right: 13px; }
  body.fg-site #page-container .smalltext, body.fg-site #page-container .smalltext a { font-size: 14px; line-height: 20px; }
  body.fg-site #page-container div.top { font-size: 14px; line-height: 24px; }
  body.fg-site #page-container div.top a { color: #595959; padding: 2px 10px; }
  body.fg-site #page-container div.top a:hover, body.fg-site #page-container div.top a:focus, body.fg-site #page-container div.top a:active { color: #ffffff; background: #595959; }
  body.fg-site #page-container .paging { font-size: 14px; line-height: 32px; color: #595959; }
  body.fg-site #page-container .paging a:link, body.fg-site #page-container .paging a:visited, body.fg-site #page-container .paging a:active,
  body.fg-site #page-container .paging em { display: inline-block; min-width: 14px; line-height: 24px; padding: 2px 8px; color: #4a4a4a; text-align: center; }
  body.fg-site #page-container .paging a:hover, body.fg-site #page-container .paging a:focus, body.fg-site #page-container .paging em,
  body.fg-site #page-container .paging em a:link, body.fg-site #page-container .paging em a:visited { background-color: #595959; color: #ffffff; }
  body.fg-site #page-container span.options a { display: inline-block; padding: 2px 6px; line-height: 24px; font-size: 14px; }
  body.fg-site #page-container .result-count { font-size: 14px; }
  /* search results mark the query word white on live's #43a8dc (2.7:1): the darker brand blue below 1250 (4.96:1) */
  body.fg-site #page-container em.highlight { background: #2f779b; }
  body.fg-site #page-container h5, body.fg-site #page-container h6 { font-size: 14px; }
  body.fg-site #page-container .form td em, body.fg-site #page-container p.ils-required-note em.required { font-size: 14px; color: #595959; }
  body.fg-site #page-container .panel.blog .date, body.fg-site #page-container .panel.blog .date em, body.fg-site #page-container .panel.blog .date span { font-size: 14px; line-height: 18px; color: #595959; }
  body.fg-site #page-container .panel .title a:hover, body.fg-site #page-container .panel .title a:focus, body.fg-site #page-container .panel .title a:active,
  body.fg-site #page-container .panel.blog .title a:hover, body.fg-site #page-container .panel.blog .title a:focus, body.fg-site #page-container .panel.blog .title a:active { color: #275e7a; text-decoration: underline; }
  body.fg-site #page-container a.more:hover, body.fg-site #page-container a.more:focus, body.fg-site #page-container a.more:active { color: #000000 !important; }
  /* fields: 16px (no zoom-on-focus) */
  body.fg-site #page-container input, body.fg-site #page-container select, body.fg-site #page-container textarea { font-size: 16px; }
  body.fg-site #page-container .fg-contact-form p.et_pb_contact_field .input, body.fg-site #page-container .fg-contact-form input.et_pb_contact_captcha { font-size: 16px; }

  /* the home video tile's link text ("Video Link") sits over the photo as plain text once the tile is narrower: the play button
     carries it visually, the words stay for screen readers */
  body.fg-site.fg-home #page-container .video p a, body.fg-site.fg-home #page-container .video p a:hover,
  body.fg-site.fg-home #page-container .video p a:focus, body.fg-site.fg-home #page-container .video p a:active { color: transparent; text-decoration: none; }
  /* the hero line over the photo: a soft dark band behind it so the white words read on the bright sky (AA) */
  body.fg-site #page-container .featureoverlay { left: 0; right: 0; width: auto; margin-left: 0; background-color: rgba(0, 0, 0, 0.55); padding-top: 10px; padding-bottom: 10px; }
  /* (55% black under white text keeps it at 4.7:1 or better whatever the photo shows, even on a white sky) */

  /* header phone number and logo: real tap boxes */
  body.fg-site #page-container #footer .logo a { display: inline-block; }
  body.fg-site #page-container a.tel-link[href^="tel:"]:is(:link, :visited) { padding-top: 5px; padding-bottom: 5px; }
  body.fg-site #page-container .content strong > a:only-child { padding-top: 5px; padding-bottom: 5px; }
  /* booking links inside running text (48 posts point at the HiSite engine): bold, AA blue, a 24px tap box */
  body.fg-site #page-container :is(.content, .container) a:is([href*="hisitedirect.com"], [href*="book-directonline.com"]):not(.button) { font-weight: 700; color: #275e7a; padding-top: 5px; padding-bottom: 5px; }
  body.fg-site #page-container #header .tel a.tel-link { display: inline-block; }
  body.fg-site #page-container #header .logo a { display: block; }

  /* white words over the home photos: the stadium title as highlighted lines on 55% black (4.7:1 or better on any part of
     the photo), the four local banners over a dark fade at their foot */
  body.fg-site.fg-home #page-container .bottom-content .stadium-text p { display: inline; padding: 0 12px; background-color: rgba(0, 0, 0, 0.55); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  body.fg-site.fg-home #page-container .bottom-content .banner::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 75%; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78)); pointer-events: none; }
  body.fg-site.fg-home #page-container .bottom-content .banner .text-container { z-index: 1; }

  /* menu: the sub-menu's white on live's #43a8dc is 2.7:1; the Book Now item's white on #ee2525 is 4.3:1 */
  body.fg-site #page-container #menu li ul, body.fg-site #page-container #menu li:hover ul a:link, body.fg-site #page-container #menu li:hover ul a:visited,
  body.fg-site #page-container #menu li ul a:link, body.fg-site #page-container #menu li ul a:visited { background: #275e7a; color: #ffffff; }
  body.fg-site #page-container #menu li li:hover a:link, body.fg-site #page-container #menu li li a:hover, body.fg-site #page-container #menu li li a:focus,
  body.fg-site #page-container #menu li li.active a:link, body.fg-site #page-container #menu li li.active a:visited, body.fg-site #page-container #menu li:hover li.active a { background: #ffffff; color: #000000; }
  body.fg-site #page-container #menu li:focus-within ul { display: block; }
  /* touch and keyboard drop-downs (fix round 1 N5, script in fg-sitewide.php): li.fg-open = a parent opened by a first tap (its title shows
     the hover colour, as when a mouse rests on it); li.fg-shut = a list closed with Escape while focus or hover is still on it */
  body.fg-site #page-container #menu > ul > li.fg-open > ul { display: block; }
  body.fg-site #page-container #menu > ul > li.fg-open > a:is(:link, :visited) { color: #43a8dc; }
  body.fg-site #page-container #menu > ul > li.fg-shut > ul { display: none; }
  body.fg-site #page-container #menu li.alt a:link, body.fg-site #page-container #menu li.alt a:visited { background: #d61f1f; color: #ffffff; }
  body.fg-site #page-container #menu li.alt a:hover, body.fg-site #page-container #menu li.alt a:focus, body.fg-site #page-container #menu li.alt a:active,
  body.fg-site #page-container #menu li.alt:hover a:link, body.fg-site #page-container #menu li.alt:hover a:visited { background: #275e7a; color: #ffffff; }

  /* buttons: rest white on the AA red, every active state white on dark blue */
  body.fg-site #page-container a.button:link, body.fg-site #page-container a.button:visited, body.fg-site #page-container input.button,
  body.fg-site #page-container .et_pb_section .fg-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { background-color: #d61f1f !important; color: #ffffff !important; }
  body.fg-site #page-container a.button:hover, body.fg-site #page-container a.button:focus, body.fg-site #page-container a.button:active,
  body.fg-site #page-container input.button:hover, body.fg-site #page-container input.button:focus, body.fg-site #page-container input.button:active,
  body.fg-site #page-container .et_pb_section .fg-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:hover,
  body.fg-site #page-container .et_pb_section .fg-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:focus,
  body.fg-site #page-container .et_pb_section .fg-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:active { background-color: #275e7a !important; color: #ffffff !important; }
  /* home Book Direct banner's Book Now: live's blue with its arrow; the active states go darker instead of live's light blue (white 2.7:1) */
  body.fg-site #page-container .bookingbannercontent a.button:link, body.fg-site #page-container .bookingbannercontent a.button:visited { background-color: #2f779b !important; }
  body.fg-site #page-container .bookingbannercontent a.button:hover, body.fg-site #page-container .bookingbannercontent a.button:focus,
  body.fg-site #page-container .bookingbannercontent a.button:active { background-color: #1d4a60 !important; }

  /* links: the footer email (#2f779b on the dark footer is 2.7:1), the home offer and FAQ banner states */
  body.fg-site #page-container #footer li a.email, body.fg-site #page-container #footer li a.email:hover,
  body.fg-site #page-container #footer li a.email:focus, body.fg-site #page-container #footer li a.email:active { color: #7cc4ea; }
  body.fg-site #page-container .special a:hover, body.fg-site #page-container .special a:focus, body.fg-site #page-container .special a:active { color: #ffffff; }
  body.fg-site #page-container .faq a:hover, body.fg-site #page-container .faq a:focus, body.fg-site #page-container .faq a:active { color: #ffffff; }

  /* footer: 14px type, 24px tap rows */
  body.fg-site #page-container #footer { font-size: 14px; }
  body.fg-site #page-container #footer .fmenu li a { font-size: 14px; line-height: 24px; height: auto; }
  body.fg-site #page-container .copyright, body.fg-site #page-container .footer-tags p, body.fg-site #page-container .footer-tags a { font-size: 14px; line-height: 24px; }
  body.fg-site #page-container .footer-tags a { display: inline-block; }
  body.fg-site #page-container #footer .vcard li a { display: inline-block; line-height: 24px; }
  body.fg-site #page-container #footer .footermenu a { display: inline-block; line-height: 24px; padding-top: 3px; padding-bottom: 3px; }
  body.fg-site #page-container .socialmedia a { background-clip: content-box; }

  /* 24px tap rows without changing how lines wrap: inline vertical padding (site map, month list, one-link paragraphs) */
  body.fg-site #page-container .content li > a, body.fg-site #page-container .panel li > a, body.fg-site #page-container .container > ul li > a,
  body.fg-site #page-container .content p > a:only-child:not(.button), body.fg-site #page-container .content td > a:not(.button) { padding-top: 5px; padding-bottom: 5px; }
  body.fg-site #page-container .panel .title a { display: inline-block; padding: 2px 0; }
  /* a link that holds only a picture: its box wraps the picture (an inline link round an inline image is only one text line tall) */
  body.fg-site #page-container :is(.content, .container) a:has(> img:only-child):not(.gallery-item):not(:has(> img.blog-image)) { display: inline-block; padding-top: 0; padding-bottom: 0; }   /* (blog list photos float beside their text on tablets, as on live: left alone) */
  /* blog sidebar tag cloud: live's smallest tags are 10px (inline size); 14px floor, the large tag keeps its own size */
  body.fg-site #page-container .panel a[style*="font-size: 10px"], body.fg-site #page-container .panel a[style*="font-size:10px"] { font-size: 14px !important; }
  body.fg-site #page-container .panel .text a { padding-top: 5px; padding-bottom: 5px; line-height: 26px; }
  body.fg-site #page-container a.tel-link { padding-top: 5px; padding-bottom: 5px; }
  /* phone numbers inside a post's running text (fix round 1 N3: 32 numbers in 28 posts are now tel: links): underlined below 1250 so the
     tap target shows without relying on colour (on live an iPhone draws its own link there); the text keeps its colour. 1250 and up: as live. */
  body.fg-site #page-container .entry .summary a.tel-link[href^="tel:"]:is(:link, :visited, :hover, :active, :focus) { text-decoration: underline !important; }

  /* keyboard focus below 1250: two-tone ring (2px white against the element, 2px near-black outside), visible on any ground */
  body.fg-site :focus-visible { outline: 2px solid #101010; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
}

/* 1170 to 1199: live's 240px Contact Us list (left-aligned to its title) ran up to 9px past the right edge of the screen when open, cutting
   FAQs and scrolling the page sideways (found with N5 in fix round 1). Here it hangs from the title's right edge instead; from 1200 it fits as on live. */
@media (min-width: 1170px) and (max-width: 1199px) {
  body.fg-site #page-container #menu > ul > li:has(+ li.alt) > ul { left: auto; right: 0; }
}

/* ======================= below 1170: tablet and phone reflow ======================= */
@media (max-width: 1169px) {
  body.fg-site #page-container .container, body.fg-site #page-container .container.main { width: auto; max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
  body.fg-site #page-container #container-outer, body.fg-site #page-container #feature, body.fg-site #page-container .content,
  body.fg-site #page-container .content-bottom, body.fg-site #page-container #footer, body.fg-site #page-container .special,
  body.fg-site #page-container .bottom-content { min-width: 0; }

  /* header: out of the hero into a solid band; logo left, RSS and phone number right, the menu as its own row */
  body.fg-site #page-container #header { position: relative; height: auto; min-width: 0; background: #2b2d2b; }
  body.fg-site #page-container #header .container { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 0; padding-top: 10px; padding-bottom: 10px; }
  body.fg-site #page-container #header .container > .clearboth, body.fg-site #page-container #header .right > .clearboth { display: none; }
  body.fg-site #page-container #header .right { display: contents; }
  body.fg-site #page-container #header #left { order: 1; float: none; width: auto; margin: 0 auto 0 0; background: none; }
  body.fg-site #page-container #header .logo { float: none; padding: 0; }
  body.fg-site #page-container #header .socialmedia { order: 2; float: none; margin: 0; }
  body.fg-site #page-container #header .tel { order: 3; float: none; font-size: 26px; }
  body.fg-site #page-container #menu { order: 5; flex: 0 0 100%; float: none; display: block; margin: 6px 0 0; }
  body.fg-site #page-container #menu > ul { display: flex; flex-wrap: wrap; justify-content: center; }
  body.fg-site #page-container #menu > ul > li { margin: 0 10px; }
  body.fg-site #page-container #menu > ul > li > a:link, body.fg-site #page-container #menu > ul > li > a:visited, body.fg-site #page-container #menu > ul > li > a:active { line-height: 44px; }
  body.fg-site #page-container #menu li ul { top: 44px; }
  body.fg-site #page-container #menu > ul > li.alt { margin: 0 0 0 10px; padding: 0; }
  body.fg-site #page-container #menu > ul > li.alt > a:link, body.fg-site #page-container #menu > ul > li.alt > a:visited { line-height: 40px; margin: 2px 0; }

  /* hero: shorter */
  body.fg-site #page-container #feature { height: auto; }
  body.fg-site #page-container #feature::before { display: none; }
  body.fg-site #page-container .featureimage { height: 320px; }
  body.fg-site.fg-home #page-container #feature, body.fg-site.fg-home #page-container .featuremain,
  body.fg-site.fg-home #page-container .featuremain li, body.fg-site.fg-home #page-container .featuremain img { height: 480px; }
  body.fg-site #page-container .featuremain img { width: 100%; object-fit: cover; }
  body.fg-site #page-container .featureoverlay { left: 0; right: 0; width: auto; margin: 0; padding: 0 24px; bottom: 48px; }
  body.fg-site #page-container .featureoverlay p { font-size: 34px; line-height: 40px; }
  /* special offers and the Milton unit print an empty hero on live (an empty band under live's overlaid header): no band here */
  body.fg-site #page-container #feature:not(:has(.featureimage, .featuremain)) { height: 0; }

  /* inner content */
  body.fg-site #page-container .container.main { padding-top: 40px; padding-bottom: 24px; }
  body.fg-site #page-container .content.bottom { margin: 40px 0; }
  body.fg-site #page-container .container .left { float: left; width: calc(100% - 340px); }
  body.fg-site #page-container .container .right.sidemenu { float: right; width: 300px; }
  body.fg-site #page-container .content img, body.fg-site #page-container .content iframe, body.fg-site #page-container .container img { max-width: 100%; }
  body.fg-site #page-container .content img, body.fg-site #page-container .container img { height: auto !important; }
  body.fg-site #page-container .content table[style*="width"] { width: 100% !important; }

  /* page galleries (facilities, location, attractions): fluid grid, full rows at every width */
  body.fg-site #page-container .gallery:not(.room) .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
  body.fg-site #page-container .gallery:not(.room) .container > :not(a.gallery-item) { grid-column: 1 / -1; }
  body.fg-site #page-container .gallery:not(.room) .container > a:not(.gallery-item), body.fg-site #page-container .gallery:not(.room) .container > .clearleft { display: none; }
  body.fg-site #page-container .gallery:not(.room) a.gallery-item { display: block; }
  body.fg-site #page-container .gallery:not(.room) img { float: none; display: block; width: 100%; height: auto; margin: 0; }
  body.fg-site #page-container .gallery { margin: 40px 0; }
  body.fg-site #page-container .gallery h3 { margin: 0 0 8px; }

  /* apartments: each room is photo, then text and Book Online Now, then the thumbnails */
  body.fg-site #page-container .list.rooms .entry { height: auto; display: flex; flex-direction: column; }
  body.fg-site #page-container .list.rooms .entry .main-photo { position: relative; top: auto; left: auto; bottom: auto; order: 1; width: auto; height: 380px; }
  body.fg-site #page-container .list.rooms .entry .roomtext { order: 2; float: none; width: auto; height: auto; padding: 28px 24px 24px; }
  body.fg-site #page-container .list.rooms .entry .images { order: 3; float: none; width: auto; padding: 0 24px 24px; }
  body.fg-site #page-container .list.rooms .entry .clearleft { display: none; }
  body.fg-site #page-container .gallery.room { float: none; width: auto; height: auto; overflow: visible; display: flex; flex-wrap: wrap; gap: 10px; }
  body.fg-site #page-container .gallery.room a.gallery-item { display: block; flex: 0 0 auto; }
  body.fg-site #page-container .gallery.room img { float: none; display: block; width: 150px; height: auto; margin: 0; }
  body.fg-site #page-container .button.roombooking { margin-top: 20px; }

  /* forms: label over a full-width field (the desktop grid is fg-design.css from 1170) */
  body.fg-site #page-container .fg-contact-form { max-width: 640px; }
  body.fg-site #page-container .fg-contact-form form.et_pb_contact_form { display: block; }
  body.fg-site #page-container .fg-contact-form .et_pb_contact_form_label { text-align: left; padding: 0; line-height: 24px; margin: 14px 0 6px; font-size: 16px; }
  body.fg-site #page-container .fg-contact-form p.et_pb_contact_field .input { width: 100%; height: 48px; margin: 0; }
  body.fg-site #page-container .fg-contact-form p.et_pb_contact_field textarea.input { width: 100%; height: 150px; min-height: 150px; margin: 0; }
  body.fg-site #page-container .fg-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after { position: static; display: inline-block; vertical-align: -2px; margin-left: 6px; }
  body.fg-site #page-container .fg-contact-form .et_contact_bottom_container, body.fg-site #page-container .fg-contact-form .et_pb_contact_right { display: block; width: auto; text-align: left; }
  body.fg-site #page-container .fg-contact-form .et_pb_contact_right p.clearfix { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 8px; line-height: 48px; text-align: left; }
  body.fg-site #page-container .fg-contact-form .et_pb_contact_right p.clearfix::before { content: "Verification"; flex: 1 1 100%; display: block; visibility: visible; height: auto; font: 400 16px/24px 'PT Sans', Arial, Helvetica, sans-serif; color: #666666; margin: 0 0 6px; }
  body.fg-site #page-container .fg-contact-form input.et_pb_contact_captcha { width: 90px; height: 48px; }
  body.fg-site #page-container .et_pb_section .fg-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { display: block; width: 100%; height: 52px; margin: 22px 0 0 0; line-height: 50px !important; font-size: 16px !important; }
  body.fg-site #page-container p.ils-required-note { margin: 8px 0 20px; text-align: left; }
  body.fg-site #page-container p.ils-required-note em.required { display: inline-block; }

  /* search form */
  body.fg-site #page-container table.form.searchpage, body.fg-site #page-container table.form.searchpage tbody, body.fg-site #page-container table.form.searchpage tr { display: block; width: auto; }
  body.fg-site #page-container table.form.searchpage td { display: flex; gap: 8px; width: auto; max-width: 560px; padding: 0; }
  body.fg-site #page-container .form.searchpage input { float: none; margin: 0; }
  body.fg-site #page-container .form.searchpage input.clicknclear { flex: 1 1 auto; min-width: 0; width: auto; height: 48px; box-sizing: border-box; border: 1px solid #767676; }
  body.fg-site #page-container .form.searchpage input.button { flex: 0 0 auto; height: 48px; line-height: 48px; padding: 0 22px; }

  /* maps: the address box goes under the map (laid over a narrow map it covers Google's attribution row) */
  body.fg-site #page-container .map-wrapper { width: auto; display: flex; flex-direction: column; }
  body.fg-site #page-container .map-wrapper .map-container { order: 1; height: 380px; }
  body.fg-site #page-container .map-wrapper .map-info { position: static; order: 2; align-self: center; transform: none; margin: 16px 0; box-shadow: none; border: 1px solid #d0d0d0; }

  /* footer: two columns (keyword links | logo and address), then the legal row and the credit */
  body.fg-site #page-container #footer { padding: 40px 0 0; }
  body.fg-site #page-container #footer > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 24px; }
  body.fg-site #page-container #footer .container > .clearboth { display: none; }
  body.fg-site #page-container .footermenu { float: none; width: auto; padding: 0; }
  body.fg-site #page-container .footermenu ul { margin: 0; padding: 0; }
  body.fg-site #page-container .footermenu li { float: none; display: block !important; width: auto !important; background-position: 0 center; padding-left: 14px; }
  body.fg-site #page-container #footer .footermenu a { display: inline-block; padding: 3px 0; line-height: 24px; }
  body.fg-site #page-container #footer .container .right { float: none; width: auto; text-align: left; }
  body.fg-site #page-container #footer .logo { float: none; margin: 0 0 16px; }
  body.fg-site #page-container .vcard { float: none; width: auto; }
  body.fg-site #page-container #footer .vcard li { line-height: 24px; }
  body.fg-site #page-container #footer .leftli { float: none; display: inline-block; }
  body.fg-site #page-container #footer .socialmedia { float: none; margin-top: 12px; }
  body.fg-site #page-container #footer .bottom { position: relative; bottom: auto; margin-top: 32px; }
  body.fg-site #page-container #footer .bottom .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; column-gap: 24px; row-gap: 8px; padding-top: 14px; padding-bottom: 18px; }
  body.fg-site #page-container #footer .fmenu { float: none; padding: 0; }
  body.fg-site #page-container .fmenu ul { margin: 0; padding: 0; }
  body.fg-site #page-container .copyright { float: none; padding: 0; text-align: left; }
}

/* ======================= home below 1170: one column in reading order ======================= */
@media (max-width: 1169px) {
  /* welcome: video photo, the Book Direct banner, then the welcome text */
  body.fg-site.fg-home #page-container .content { height: auto; }
  body.fg-site.fg-home #page-container .content .left { position: static; width: auto; float: none; }
  body.fg-site.fg-home #page-container .video { height: 420px; }
  body.fg-site.fg-home #page-container .bookingbanner { float: none; width: auto; height: auto; }
  body.fg-site.fg-home #page-container .bookingbannercontent { position: static; height: auto; display: flex; align-items: stretch; width: 100%; }
  body.fg-site.fg-home #page-container .bookingbannercontent ul { float: none; display: block; flex: 1 1 auto; width: auto; margin: 0; padding: 18px 24px; text-align: left; }
  body.fg-site.fg-home #page-container .bookingbannercontent li { float: none; display: block; width: auto; }
  body.fg-site.fg-home #page-container .bookingbannercontent p:last-of-type { float: none; flex: 0 0 215px; width: 215px; height: auto; margin: 0; }
  body.fg-site.fg-home #page-container .bookingbannercontent a.button { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 100%; min-height: 120px; line-height: 28px; padding: 0 30px 0 0; background-position: calc(100% - 26px) center !important; }
  body.fg-site.fg-home #page-container .content .maintext { float: none; width: auto; padding: 40px 24px; }
  /* readable line length on wide tablets */
  body.fg-site.fg-home #page-container .content .maintext > *, body.fg-site.fg-home #page-container .upper-content .left > *,
  body.fg-site.fg-home #page-container .midbannercontent p { max-width: 820px; }

  /* corporate stays: text, then the photo */
  body.fg-site.fg-home #page-container .upper-content { float: none; min-height: 0; }
  body.fg-site.fg-home #page-container .upper-content .left { float: none; width: auto; padding: 40px 24px; }
  body.fg-site.fg-home #page-container .upper-content .right { position: relative; top: auto; right: auto; bottom: auto; float: none; width: auto; height: 360px; }

  /* special offers: photo, then the offer panel */
  body.fg-site.fg-home #page-container .special { height: auto; display: flex; flex-direction: column; background: #275e7a; }
  body.fg-site.fg-home #page-container .special .special-image { position: relative; top: auto; bottom: auto; left: auto; width: 100%; height: 380px; }
  body.fg-site.fg-home #page-container .special .text { float: none; display: flow-root; width: auto; margin: 0; padding: 32px 24px 36px; background: #275e7a; }
  body.fg-site.fg-home #page-container .special h3 { float: none; font-size: 48px; line-height: 52px; margin: 0 0 16px; }
  body.fg-site.fg-home #page-container .special h4, body.fg-site.fg-home #page-container .special h4 a { float: none; }
  body.fg-site.fg-home #page-container .special h4 a.button { display: inline-block; }
  body.fg-site.fg-home #page-container .special > .clearboth { display: none; }

  /* convenient location: the heading and text, then the map */
  body.fg-site.fg-home #page-container .mid-content { height: auto; }
  body.fg-site.fg-home #page-container .mid-content .container { display: flex; flex-direction: column; }
  body.fg-site.fg-home #page-container .mid-content .midbannercontent { order: 1; width: auto; padding: 40px 0 32px; }
  body.fg-site.fg-home #page-container .mid-content .midbannercontent::before { display: none; }
  body.fg-site.fg-home #page-container .mid-content .midbannercontent h2 { font-size: 44px; line-height: 50px; letter-spacing: 3px; padding-left: 110px; background-size: 88px auto; min-height: 70px; }
  body.fg-site.fg-home #page-container .mid-content .map-wrapper { order: 2; position: relative; right: auto; width: auto; height: auto; margin: 0 -24px; background: #ffffff; }
  body.fg-site.fg-home #page-container .mid-content .container > .clearboth { display: none; }

  /* stadium photo with its title, then the four local banners two by two */
  body.fg-site.fg-home #page-container .bottom-content { float: none; height: auto; }
  body.fg-site.fg-home #page-container .bottom-content .left { float: none; width: auto; height: 380px; }
  body.fg-site.fg-home #page-container .bottom-content .stadium-text { left: 24px; top: 24px; margin: 0; width: auto; padding: 0; }
  body.fg-site.fg-home #page-container .bottom-content .stadium-text p { font-size: 52px; line-height: 56px; }
  body.fg-site.fg-home #page-container .bottom-content .right { float: none; width: auto; display: grid; grid-template-columns: 1fr 1fr; }
  body.fg-site.fg-home #page-container .bottom-content .right > .clearboth { display: none; }
  body.fg-site.fg-home #page-container .bottom-content .banner { float: none; width: auto; height: 260px; }
  body.fg-site.fg-home #page-container .bottom-content .banner .text-container { left: 20px; right: 20px; }

  /* latest blog: four across from 980, two across below */
  body.fg-site.fg-home #page-container .blog-wrapper { float: none; padding-bottom: 48px; }
  body.fg-site.fg-home #page-container .panel.blog { width: auto; padding: 0 24px; }
  body.fg-site.fg-home #page-container .panel.blog h3 { margin: 48px 0 24px; }
  body.fg-site.fg-home #page-container .panel.blog ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  body.fg-site.fg-home #page-container .panel.blog li { float: none; width: auto; margin: 0; padding-bottom: 12px; }
  /* the photo is an empty div with a CSS background: live's float and fixed 270px are released so it takes its card's width and keeps
     live's 270:140 shape (floated with width auto it shrank to 0 x 0, fix round 1 N1) */
  body.fg-site.fg-home #page-container .panel.blog .blog-image { float: none; width: auto; height: auto; aspect-ratio: 270 / 140; margin: 0 0 15px; background-size: cover; }
  body.fg-site.fg-home #page-container .panel.blog .blog-image a { width: 100%; height: 100%; }
  body.fg-site.fg-home #page-container .panel.blog .more { display: inline-block; }

  /* FAQ banner */
  body.fg-site.fg-home #page-container .faq { width: auto; margin: 0 24px; }
  body.fg-site.fg-home #page-container .faq a { display: block; padding: 16px 20px; font-size: 26px; line-height: 34px; }
}

/* ======================= below 980: menu behind a button, Book Now stays in the header bar ======================= */
@media (max-width: 979px) {
  /* the header row: logo, phone number, Book Now, Menu; the menu items open below it */
  body.fg-site #page-container #header .container { column-gap: 14px; }
  body.fg-site #page-container #menu, body.fg-site #page-container #menu > ul { display: contents; }
  body.fg-site #page-container #header .tel { font-size: 22px; line-height: 30px; padding-left: 40px; background-size: 28px auto; }
  body.fg-site #page-container #header .socialmedia { display: none; }
  body.fg-site #page-container #menu > ul > li.alt { order: 4; display: block; margin: 0; padding: 0; }
  body.fg-site #page-container #menu > ul > li.alt > a:link, body.fg-site #page-container #menu > ul > li.alt > a:visited { display: block; margin: 0; padding: 0 16px; line-height: 44px; font-size: 16px; }
  body.fg-site #page-container .ils-menu-toggle { order: 5; display: inline-flex; align-items: center; gap: 10px; height: 44px; margin: 0; padding: 0 14px; border: 2px solid #ffffff; border-radius: 0;
    background: #2b2d2b; color: #ffffff; font: 600 16px/40px 'Raleway', Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
  body.fg-site #page-container .ils-menu-toggle:hover, body.fg-site #page-container .ils-menu-toggle:focus, body.fg-site #page-container .ils-menu-toggle:active,
  body.fg-site #page-container #header.ils-menu-open .ils-menu-toggle { background: #ffffff; color: #2b2d2b; }
  body.fg-site #page-container .ils-menu-toggle span, body.fg-site #page-container .ils-menu-toggle span::before, body.fg-site #page-container .ils-menu-toggle span::after { display: block; position: relative; width: 18px; height: 2px; background: currentColor; content: ""; }
  body.fg-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.fg-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  /* the menu items: hidden until the button opens them, then one full-width row each */
  body.fg-site #page-container #menu > ul > li:not(.alt) { display: none; order: 10; flex: 0 0 100%; margin: 0; text-align: left; border-top: 1px solid rgba(255, 255, 255, 0.2); }
  body.fg-site #page-container #header.ils-menu-open #menu > ul > li:not(.alt) { display: block; }
  body.fg-site #page-container #header.ils-menu-open #menu > ul > li:first-child { margin-top: 10px; }
  body.fg-site #page-container #menu > ul > li:not(.alt) > a:link, body.fg-site #page-container #menu > ul > li:not(.alt) > a:visited { display: block; padding: 0; line-height: 50px; font-size: 16px; color: #ffffff; }
  body.fg-site #page-container #menu > ul > li.active:not(.alt) > a:link, body.fg-site #page-container #menu > ul > li.active:not(.alt) > a:visited,
  body.fg-site #page-container #menu > ul > li:not(.alt):hover > a:link, body.fg-site #page-container #menu > ul > li:not(.alt) > a:focus { color: #43a8dc; }
  body.fg-site #page-container #menu li ul { position: static; display: block; width: auto; padding: 0 0 8px; background: none; }
  body.fg-site #page-container #menu li li { border: 0; }
  body.fg-site #page-container #menu li ul a:link, body.fg-site #page-container #menu li ul a:visited,
  body.fg-site #page-container #menu li:hover ul a:link, body.fg-site #page-container #menu li:hover ul a:visited { display: block; padding: 0 0 0 20px; line-height: 44px; font-size: 15px; background: none; color: #ffffff; }
  body.fg-site #page-container #menu li li a:hover, body.fg-site #page-container #menu li li a:focus,
  body.fg-site #page-container #menu li li.active a:link, body.fg-site #page-container #menu li li.active a:visited, body.fg-site #page-container #menu li:hover li.active a { background: none; color: #43a8dc; }
  /* a picked sub-menu row: live's white highlight (li li:hover, li li.active) is for the desktop drop-down; in the dark phone and tablet panel it paints a white block under white text, so the row keeps no background and shows the hover blue */
  body.fg-site #page-container #menu li li:hover, body.fg-site #page-container #menu li li.active, body.fg-site #page-container #menu li li:hover a:hover, body.fg-site #page-container #menu li li:focus-within { background: none; border: 0; }
  body.fg-site #page-container #menu li:hover li:hover > a:is(:link, :visited, :hover, :active), body.fg-site #page-container #menu li li > a:is(:focus, :active) { background: none; color: #43a8dc; }

  body.fg-site #page-container .container .left, body.fg-site #page-container .container .right.sidemenu { float: none; width: auto; }
  body.fg-site #page-container .container .right.sidemenu { margin-top: 32px; }

  /* latest blog below 980: one post per row, the photo at its own 270 x 140 size beside its text (the files are 270px wide; across a
     two-up card they would be drawn up to 1.7 times their size and look soft). Fix round 1 N1. */
  body.fg-site.fg-home #page-container .panel.blog ul { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.fg-site.fg-home #page-container .panel.blog li { display: grid; grid-template-columns: 270px minmax(0, 1fr); align-content: start; padding: 0; }
  body.fg-site.fg-home #page-container .panel.blog li > .blog-image { grid-row: 1 / span 4; width: 270px; margin: 0; }
  body.fg-site.fg-home #page-container .panel.blog li > :not(.blog-image) { grid-column: 2; }
  body.fg-site.fg-home #page-container .panel.blog li > .date { margin-top: 14px; }
  body.fg-site.fg-home #page-container .panel.blog li > .more { justify-self: start; }
  body.fg-site #page-container #footer > .container { grid-template-columns: 1fr; }
  /* a Book Now button written inside a heading (Rosalie Unit) drops onto its own line with clear space above it, instead of wrapping hard against the heading text */
  body.fg-site #page-container .maintext h2 > a.button:link, body.fg-site #page-container .maintext h2 > a.button:visited { display: block; width: max-content; max-width: 100%; margin-top: 22px; }
}

/* ======================= phone: below 768 ======================= */
@media (max-width: 767px) {
  body.fg-site #page-container .maintext h2 > a.button:link, body.fg-site #page-container .maintext h2 > a.button:visited { width: 100%; margin-top: 22px; }
  body.fg-site #page-container .container, body.fg-site #page-container .container.main { padding-left: 16px; padding-right: 16px; }

  /* header: logo and Menu on the first row, the phone number and Book Now on the second */
  body.fg-site #page-container #header .container { column-gap: 12px; row-gap: 8px; }
  body.fg-site #page-container #header #left { flex: 1 1 auto; }
  body.fg-site #page-container #header .logo img { width: 130px; height: auto; }
  body.fg-site #page-container .ils-menu-toggle { order: 2; }
  body.fg-site #page-container #header .tel { order: 3; flex: 1 1 auto; font-size: 20px; line-height: 30px; padding-left: 36px; background-size: 26px auto; }
  body.fg-site #page-container #menu > ul > li.alt { order: 4; }

  /* hero */
  body.fg-site #page-container .featureimage { height: 200px; }
  body.fg-site.fg-home #page-container #feature, body.fg-site.fg-home #page-container .featuremain,
  body.fg-site.fg-home #page-container .featuremain li, body.fg-site.fg-home #page-container .featuremain img { height: 300px; }
  body.fg-site #page-container .featureoverlay { padding: 0 16px; bottom: 24px; }
  body.fg-site #page-container .featureoverlay p { font-size: 22px; line-height: 28px; letter-spacing: 1px; }

  /* type */
  body.fg-site #page-container h1 { font-size: 28px; line-height: 32px; padding-bottom: 24px; margin-bottom: 16px; }
  body.fg-site #page-container h2 { font-size: 24px; line-height: 28px; }
  body.fg-site #page-container h3 { font-size: 21px; line-height: 26px; }
  body.fg-site #page-container .list .entry h2, body.fg-site #page-container .list .entry h3 { font-size: 23px; line-height: 28px; }
  body.fg-site #page-container .panel h3 { font-size: 24px; line-height: 28px; }
  body.fg-site #page-container .container.main { padding-top: 28px; padding-bottom: 16px; }
  body.fg-site:not(.fg-home) #page-container .content p { margin: 14px 0; }
  body.fg-site #page-container [style*="justify"] { text-align: left !important; }
  body.fg-site #page-container .content.bottom { margin: 28px 0; }

  /* home */
  body.fg-site.fg-home #page-container .video { height: auto; aspect-ratio: 16 / 10; }
  body.fg-site.fg-home #page-container .video p a { background-size: 72px auto; }
  body.fg-site.fg-home #page-container .bookingbannercontent { display: block; }
  body.fg-site.fg-home #page-container .bookingbannercontent ul { padding: 20px 16px 14px; }
  body.fg-site.fg-home #page-container .bookingbannercontent li { font-size: 17px; line-height: 26px; }
  body.fg-site.fg-home #page-container .bookingbannercontent p:last-of-type { width: auto; padding: 0 16px 20px; }
  body.fg-site.fg-home #page-container .bookingbannercontent a.button { min-height: 0; height: 52px; font-size: 18px; }
  body.fg-site.fg-home #page-container .content .maintext { padding: 28px 16px; }
  body.fg-site.fg-home #page-container .upper-content .left { padding: 28px 16px; }
  body.fg-site.fg-home #page-container .upper-content .right { height: 220px; }
  body.fg-site.fg-home #page-container .special .special-image { height: 220px; }
  body.fg-site.fg-home #page-container .special .text { padding: 24px 16px 8px; }
  body.fg-site.fg-home #page-container .special h3 { font-size: 34px; line-height: 38px; letter-spacing: 1px; }
  body.fg-site.fg-home #page-container .special h4, body.fg-site.fg-home #page-container .special h4 a { font-size: 21px; line-height: 26px; }
  body.fg-site.fg-home #page-container .special h4 a.button { display: block; text-align: center; padding: 0 16px; height: 52px; line-height: 52px; }
  body.fg-site.fg-home #page-container .mid-content .midbannercontent { padding: 28px 0 24px; }
  body.fg-site.fg-home #page-container .mid-content .midbannercontent h2 { font-size: 28px; line-height: 32px; letter-spacing: 2px; padding-left: 74px; background-size: 60px auto; min-height: 48px; margin-bottom: 16px; }
  body.fg-site.fg-home #page-container .mid-content .midbannercontent p { font-size: 16px; }
  body.fg-site.fg-home #page-container .mid-content .map-wrapper { margin: 0 -16px; }
  body.fg-site.fg-home #page-container .bottom-content .left { height: 220px; }
  body.fg-site.fg-home #page-container .bottom-content .stadium-text { left: 16px; top: 16px; }
  body.fg-site.fg-home #page-container .bottom-content .stadium-text p { font-size: 34px; line-height: 38px; }
  body.fg-site.fg-home #page-container .bottom-content .banner { height: 160px; }
  body.fg-site.fg-home #page-container .bottom-content .banner .text-container { left: 12px; right: 12px; bottom: 12px; }
  body.fg-site.fg-home #page-container .bottom-content .banner p { font-size: 19px; line-height: 23px; }
  body.fg-site.fg-home #page-container .panel.blog { padding: 0 16px; }
  body.fg-site.fg-home #page-container .panel.blog h3 { margin: 32px 0 20px; font-size: 28px; line-height: 32px; }
  /* the teaser photos are 270px files: a photo-and-text row keeps them sharp instead of stretching them across the phone */
  body.fg-site.fg-home #page-container .panel.blog ul { grid-template-columns: 1fr; gap: 12px; }
  body.fg-site.fg-home #page-container .panel.blog li { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 12px; }
  body.fg-site.fg-home #page-container .panel.blog li > .blog-image { grid-row: 1 / span 4; width: 120px; margin: 0; }
  body.fg-site.fg-home #page-container .panel.blog li > .date { margin-top: 0; }
  body.fg-site.fg-home #page-container .panel.blog li > :not(.blog-image) { grid-column: 2; }
  /* the side-padding reset skips Read More: its chevron is a background drawn in its 13px right padding (fix round 1 N2) */
  body.fg-site.fg-home #page-container .panel.blog li > :not(.blog-image, .more) { padding-left: 0; padding-right: 0; }
  body.fg-site.fg-home #page-container .panel.blog .title a { font-size: 17px; line-height: 22px; }
  body.fg-site.fg-home #page-container .panel.blog .more { padding-left: 0; margin-bottom: 0; justify-self: start; }
  body.fg-site.fg-home #page-container .faq { margin: 0 16px; }
  body.fg-site.fg-home #page-container .faq a { padding: 16px; font-size: 19px; line-height: 26px; letter-spacing: 1px; }

  /* inner pages */
  body.fg-site #page-container .list.rooms .entry .main-photo { height: 240px; }
  body.fg-site #page-container .list.rooms .entry .roomtext { padding: 24px 16px 20px; }
  body.fg-site #page-container .list.rooms .entry .roomtext h2 { font-size: 24px; line-height: 28px; }
  body.fg-site #page-container .list.rooms .entry .roomtext a.button { display: block; text-align: center; padding: 0 16px; }
  body.fg-site #page-container .list.rooms .entry .images { padding: 0 0 20px 16px; }
  body.fg-site #page-container .gallery.room { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 8px; padding-right: 16px; }
  body.fg-site #page-container .gallery.room a.gallery-item { scroll-snap-align: start; }
  body.fg-site #page-container .gallery.room img { width: 120px; }
  body.fg-site #page-container .gallery:not(.room) .container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* tables of short label and value cells (contact details): label column plus value; the units table: one unit per row */
  body.fg-site #page-container .content table:not(.form), body.fg-site #page-container .content table:not(.form) tbody { display: block; }
  body.fg-site #page-container .content table:not(.form) tr { display: grid; grid-template-columns: 84px minmax(0, 1fr); row-gap: 4px; margin-bottom: 6px; }
  body.fg-site #page-container .content table:not(.form) td { display: block; width: auto !important; overflow-wrap: anywhere; }
  body.fg-site #page-container .content table[style*="1170px"] tr { grid-template-columns: 1fr; row-gap: 24px; margin-bottom: 24px; }
  /* content buttons may hold long labels ("Book Pet Friendly Accommodation Now"): they wrap inside the button instead of overflowing it */
  body.fg-site #page-container .content a.button:link, body.fg-site #page-container .content a.button:visited { box-sizing: border-box; max-width: 100%; height: auto; min-height: 45px; padding: 10px 24px; line-height: 25px; white-space: normal; text-align: center; }
  body.fg-site #page-container blockquote { padding-left: 50px; background-size: 36px auto; }
  body.fg-site #page-container .map-wrapper .map-container { height: 300px; }
  body.fg-site #page-container .list .entry .blog-image, body.fg-site #page-container .entry img.blog-image,
  body.fg-site #page-container .entry > a.gallery-item img { float: none; display: block; margin: 0 0 14px; }
  body.fg-site #page-container .paging { text-align: left; }
  body.fg-site #page-container .paging .options { margin: 0 12px 0 0; }

  /* footer: one column */
  body.fg-site #page-container #footer { padding-top: 32px; }
  body.fg-site #page-container #footer .vcard { font-size: 15px; }
  body.fg-site #page-container #footer .bottom .container { display: block; }
  body.fg-site #page-container #footer .fmenu ul { display: flex; flex-wrap: wrap; column-gap: 20px; }
  body.fg-site #page-container #footer .fmenu li, body.fg-site #page-container #footer .fmenu li:first-child { display: block; padding: 0; background: none; }
  body.fg-site #page-container #footer .fmenu li a { line-height: 36px; }
  body.fg-site #page-container .copyright { margin-top: 8px; }
  body.fg-site #page-container .footer-tags { display: block; }
}

/* ======================= small phones: below 360 ======================= */
@media (max-width: 359px) {
  /* the phone number and Book Now still share the second header row */
  body.fg-site #page-container #header .tel { font-size: 18px; padding-left: 32px; background-size: 24px auto; }
  body.fg-site #page-container #menu > ul > li.alt > a:link, body.fg-site #page-container #menu > ul > li.alt > a:visited { padding: 0 12px; font-size: 15px; }
  body.fg-site #page-container #header .container { column-gap: 8px; }
}

/* desktop (980 and up): the Rosalie Unit Book Now button also sits on its own line under the heading, with the same 22px clear space above it */
@media (min-width: 980px) {
  body.fg-site #page-container .maintext h2 > a.button:link, body.fg-site #page-container .maintext h2 > a.button:visited { display: block; width: max-content; max-width: 100%; margin-top: 22px; }
}