/* gc-mobile.css - GCPN Stage 4 designed TABLET and PHONE layouts (15 Oct 2026, Bryan's side, dev site). Loads LAST (gcpn-design.php).
   Nothing here applies at 1250px and up, where the site is a copy of live (gc-design.css).
   Started from the kit's ilaunch-responsive.template.css (copy in build/design/, tokens $P = body.gc-site #page-container,
   $H = body.gc-site.gc-home #page-container, $B = body.gc-site, $SC = gc). That template reflows the accommodation layout (#header over a
   hero, booking bar, room cards), none of which this older layout has, so what carried over is its band structure and its proven rules:
   every button and link state AA below 1250, the 14px text floor and 16px inputs, tel: links, the pager, the search page form, the
   footer stack, galleries as a strip, nested site-map bullets, left-aligned justified text and the form as label bars on a phone.
   Its palette was recomputed for GCPN (section 0 of gc-design.css). Live's own phone template (a separate Bootstrap site served to phone
   user agents) was used only as a guide to what phone visitors expect: a blue bar with a menu button, one column, big tap targets.
   Bands:  1250+ live (no rules here) | 980-1249 live's fixed menu column kept, content fitted, AA colours |
           768-979 menu column becomes a top bar with a Menu button, live's two-column content kept | below 768 one column (phone). */

/* ================= below 1250: accessibility floor for every designed width (AA colours, 14px text, 16px inputs, 24px targets) ================= */
@media (max-width: 1249px) {
  /* text links, headings and prices in live's green (#75ad26, 2.7:1 on white) become the AA green; menus, buttons and footer keep their own rules */
  body.gc-site #page-container a:link, body.gc-site #page-container a:visited, body.gc-site #page-container a:active,
  body.gc-site #page-container a:hover { color: var(--gc-green-aa); }
  body.gc-site #page-container h2, body.gc-site #page-container .property-price, body.gc-site #page-container blockquote .highlight,
  body.gc-site #page-container [style*="color: rgb(117, 173, 38)"], body.gc-site #page-container [style*="color:#75ad26"] { color: var(--gc-green-aa) !important; }
  body.gc-site #page-container h2 a:link, body.gc-site #page-container h2 a:visited, body.gc-site #page-container h2 a:active { color: #222222; }
  body.gc-site #page-container .menu-tools a:link, body.gc-site #page-container .menu-tools a:visited { color: #333333; }
  body.gc-site #page-container .menu-tabs a:link, body.gc-site #page-container .menu-tabs a:visited { color: #666666; }
  body.gc-site #page-container .menu-tabs li.heading a:link, body.gc-site #page-container .menu-tabs li.heading a:visited { color: #222222; }
  body.gc-site #page-container #footer .copyright a:link, body.gc-site #page-container #footer .copyright a:visited { color: #aaaaaa; }
  body.gc-site #page-container h2 a:hover, body.gc-site #page-container h2 a:focus { color: var(--gc-green-aa); }
  body.gc-site #page-container h3 a:link, body.gc-site #page-container h3 a:visited { color: #595959; }
  body.gc-site #page-container .menu-tools a:hover, body.gc-site #page-container .menu-tools a:focus,
  body.gc-site #page-container .menu-tabs a:hover, body.gc-site #page-container .menu-tabs a:focus, body.gc-site #page-container .menu-tabs li.heading a:hover,
  body.gc-site #page-container .menu-tabs li.active a { color: #3d6012; }
  body.gc-site #page-container .submenu a:hover { color: #222222; }

  /* 14px floor (live uses 11 to 13px for dates, details, footer, pager, small print) */
  body.gc-site #page-container :is(.smalltext, .smalltext a, .panel li em, .panel .date, .panel .details, .entry .details, .panel .summary, .property-suburb,
    .property-features p, .property-features li, div.top, .paging, .captcha-message, .form em, .vcard .org) { font-size: 14px; }
  body.gc-site #page-container .innersplitcontent .property-features li, body.gc-site #page-container .innersplitcontent .property-features p { font-size: 14px; }
  body.gc-site #page-container :is(.smalltext, .smalltext a, .panel .date, .property-suburb, blockquote .details, .form th) { color: var(--gc-muted-aa); }
  body.gc-site #page-container .right .property-suburb, body.gc-site #page-container .right .panel .summary { color: var(--gc-on-grey-aa); }
  body.gc-site #page-container .paging { color: #666666; }
  body.gc-site #page-container a.more, body.gc-site #page-container a.more:link, body.gc-site #page-container a.more:visited { font-size: 14px; line-height: 28px; }

  /* inputs 16px (no zoom on focus), selects and fields at least 40px */
  body.gc-site #page-container :is(input, select, textarea) { font-size: 16px; }
  body.gc-site #page-container .gc-contact-form .et_pb_contact_field :is(input.input, textarea.input),
  body.gc-site #page-container .gc-contact-form input.et_pb_contact_captcha { font-size: 16px; }
  body.gc-site #page-container .gc-contact-form :is(.et_pb_contact_form_label, .et_pb_contact_right p.clearfix::before) { color: var(--gc-muted-aa); }
  body.gc-site #page-container .gc-contact-form .et_contact_bottom_container::before { font-size: 14px; color: var(--gc-muted-aa); }

  /* every button readable in every state (live: white on #75ad26 at rest 2.7:1, green on white on hover 2.7:1).
     Rest: white on the AA green; hover, focus and the tap that sticks on a phone: white on the darker green. */
  body.gc-site #page-container input.button, body.gc-site #page-container a.button, body.gc-site #page-container a.icon-button {
    background-color: var(--gc-green-bg); border-color: var(--gc-green-bg); color: #ffffff; }
  body.gc-site #page-container input.button:hover, body.gc-site #page-container input.button:focus, body.gc-site #page-container input.button:active,
  body.gc-site #page-container a.button:hover, body.gc-site #page-container a.button:focus, body.gc-site #page-container a.button:active,
  body.gc-site #page-container a.icon-button:hover, body.gc-site #page-container a.icon-button:focus, body.gc-site #page-container a.icon-button:active {
    background-color: var(--gc-green-bg-hover); border-color: var(--gc-green-bg-hover); color: #ffffff; }
  body #page-container .et_pb_section .gc-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit {
    background: var(--gc-green-bg) !important; border-color: var(--gc-green-bg) !important; color: #ffffff !important; }
  body #page-container .et_pb_section .gc-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:hover,
  body #page-container .et_pb_section .gc-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:focus,
  body #page-container .et_pb_section .gc-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:active {
    background: var(--gc-green-bg-hover) !important; border-color: var(--gc-green-bg-hover) !important; color: #ffffff !important; }
  /* blue "More Details" / "Read More" / "Back to List" tabs: white on blue at rest (10.3:1); live's green hover becomes the AA green */
  body.gc-site #page-container a.more:hover, body.gc-site #page-container a.more:focus, body.gc-site #page-container a.more:active { background-color: var(--gc-green-bg); color: #ffffff !important; }
  /* Back to top: live's hover is white on #75ad26 (2.7:1) */
  body.gc-site #page-container div.top a { font-size: 14px; line-height: 32px; }
  body.gc-site #page-container div.top a:hover, body.gc-site #page-container div.top a:focus, body.gc-site #page-container div.top a:active { color: #ffffff; background: var(--gc-green-bg); }
  /* pager: 28px squares, current page and hover white on the blue */
  body.gc-site #page-container .paging a:link, body.gc-site #page-container .paging a:visited, body.gc-site #page-container .paging a:active { width: auto; min-width: 28px; height: 28px; line-height: 28px; color: #444444; font-size: 14px; }
  body.gc-site #page-container .paging a:hover, body.gc-site #page-container .paging a:focus, body.gc-site #page-container .paging em a:link, body.gc-site #page-container .paging em a:visited { color: #ffffff; background: #26388e; }
  body.gc-site #page-container .options a, body.gc-site #page-container .result-count { font-size: 14px; }
  body.gc-site #page-container .options a { display: inline-block; min-width: 28px; line-height: 28px; text-align: center; }
  /* search result highlight chip: live #0b79d9 under white is 4.4:1 */
  body.gc-site #page-container em.highlight { background: #0a6abf; }

  /* the menu column: active and hover green (white text 2.7:1 on live's #75ad26) becomes the AA green, the drop-down solid */
  body.gc-site #page-container #menu li.active a:link, body.gc-site #page-container #menu li.active a:active, body.gc-site #page-container #menu li.active a:visited,
  body.gc-site #page-container #menu li:hover a:link, body.gc-site #page-container #menu li:hover a:active, body.gc-site #page-container #menu li:hover a:visited, body.gc-site #page-container #menu li:hover a:hover,
  body.gc-site #page-container #menu li:focus-within a:link, body.gc-site #page-container #menu li:focus-within a:visited,
  body.gc-site #page-container #menu li.ils-sub-open a:link, body.gc-site #page-container #menu li.ils-sub-open a:visited { background-color: var(--gc-green-bg); border-color: var(--gc-green-bg-hover); }
  body.gc-site #page-container #menu li.active a.parent, body.gc-site #page-container #menu li:hover a.parent:link, body.gc-site #page-container #menu li:hover a.parent:visited,
  body.gc-site #page-container #menu li:focus-within a.parent:link, body.gc-site #page-container #menu li.ils-sub-open a.parent:link { background-color: var(--gc-green-bg); }
  body.gc-site #page-container #menu li ul { background: var(--gc-green-bg); }
  body.gc-site #page-container #menu li:hover ul a:link, body.gc-site #page-container #menu li:hover ul a:visited,
  body.gc-site #page-container #menu li:focus-within ul a:link, body.gc-site #page-container #menu li:focus-within ul a:visited,
  body.gc-site #page-container #menu li.ils-sub-open ul a:link, body.gc-site #page-container #menu li.ils-sub-open ul a:visited { background: none; }
  body.gc-site #page-container #menu li li:hover, body.gc-site #page-container #menu li li.active, body.gc-site #page-container #menu li li:focus-within { background: var(--gc-green-bg-hover); }
  body.gc-site #page-container .phone, body.gc-site #page-container .phone a.tel-link { color: var(--gc-phone-aa); }
  /* 3.18 C-2: the Twitter and RSS icons are live's sprite, whose rest row is 2.1 to 2.3:1 on the menu blue (icons need 3:1) and a touch screen
     never shows its hover row. Below 1250 the white (hover) row is shown in every state (about 10:1), and the links' own text colour, which
     only the hidden <em> labels use, is white too. 1250 and up keeps live's look. */
  body.gc-site #page-container #sidebar .socialmedia a[class] { background-position-y: -24px; }
  body.gc-site #page-container #sidebar .socialmedia a:link, body.gc-site #page-container #sidebar .socialmedia a:visited, body.gc-site #page-container #sidebar .socialmedia a:hover,
  body.gc-site #page-container #sidebar .socialmedia a:focus, body.gc-site #page-container #sidebar .socialmedia a:active { color: #ffffff; }
  /* the open page's menu item is also underlined, so it is not shown by colour alone */
  body.gc-site #page-container #menu li.active > a:link, body.gc-site #page-container #menu li.active > a:visited { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

  /* footer: 14px, links readable on #222 */
  body.gc-site #page-container #footer, body.gc-site #page-container #footer p, body.gc-site #page-container .footer-tags p, body.gc-site #page-container #footer .vcard .org { font-size: 14px; }
  body.gc-site #page-container #footer .menu a { color: var(--gc-footer-link); }
  body.gc-site #page-container #footer .menu a:hover, body.gc-site #page-container #footer .menu a:focus { color: #9fd65a; }
  body.gc-site #page-container #footer .menu a, body.gc-site #page-container #footer .copyright a, body.gc-site #page-container #footer .vcard a.email { display: inline-block; line-height: 28px; }
  body.gc-site #page-container #footer .vcard a.email:link, body.gc-site #page-container #footer .vcard a.email:visited { color: #9fd65a; }
  body.gc-site #page-container #footer .vcard a.tel-link { display: inline-block; line-height: 28px; }
  body.gc-site #page-container #footer .copyright a:hover, body.gc-site #page-container #footer .vcard a:hover, body.gc-site #page-container #footer .vcard a:focus { color: #ffffff; }

  /* h1 and wrapped headings: live sets 30px type on a 26px line, which overlaps once a title wraps */
  body.gc-site #page-container h1 { line-height: 34px; }
  body.gc-site.gc-home #page-container h1 { line-height: 26px; }

  /* tap height for text links in lists and headings (site map, archive, listing titles, latest news): vertical padding on the inline link
     makes its box 25px or more without moving a single line (inline padding does not change the line box) */
  body.gc-site #page-container #content :is(li, h2, .title) > a:not(.more):not(.button):not(.gallery-item) { padding-top: 3px; padding-bottom: 3px; }
  /* tel: links inside sentences (contact page intro, property Contact block): a 26px tap box from vertical padding on the inline link, no layout change */
  body.gc-site #page-container #content :is(p, li, div) > a.tel-link { padding-top: 6px; padding-bottom: 6px; }
  /* things that are only shown on hover on live are always shown on a touch screen */
  body.gc-site #page-container .list.properties .thumb:hover, body.gc-site #page-container #property-gallery-thumbs img:hover { box-shadow: 0 0 0 5px var(--gc-green-bg); }
}

/* ================= 980-1249: live's fixed menu column kept; the content area is fitted ================= */
@media (min-width: 980px) and (max-width: 1249px) {
  /* a short screen (laptop or tablet in landscape) cannot show the whole column: it scrolls with the page instead of hiding its foot */
  @media (max-height: 699px) { body.gc-site #page-container #sidebar { position: absolute; } }
}
@media (max-width: 1249px) {
  /* property listings: the info column holds a 220px photo and its text side by side, which live's 40% column can no longer hold */
  body.gc-site #page-container .list.properties .property-info { width: 58%; display: grid; grid-template-columns: minmax(0, 220px) 1fr; column-gap: 20px; align-items: start; }
  body.gc-site #page-container .list.properties .property-info > a:first-child { grid-row: 1 / span 4; }
  body.gc-site #page-container .list.properties .property-info .thumb { float: none; margin: 0; width: 100%; height: auto; }
  body.gc-site #page-container .list.properties .property-info > :not(a:first-child) { grid-column: 2; }
  /* the bed, bath and car icons keep one row in the narrower text column (live's 20px gaps, !important on live, become 12px) */
  body.gc-site #page-container .list.properties .property-details li { margin-right: 12px !important; }
  body.gc-site #page-container .list.properties .property-details { white-space: nowrap; }
  body.gc-site #page-container .list.properties .summary { width: 40%; }
  body.gc-site #page-container .list.properties .entry { margin: 48px 0; }
  /* the listing heading row. Below 1250 the heading no longer has room beside its three category links, and wherever those links go they must
     not come between a heading and its own content (heading_order_check pairs "Property Search" with "Properties for Sale" and that heading
     with the first property): they become one row of links straight under the tools bar, above the search form. #content turns into a
     wrapping flex row; the tab list and its container step aside (display: contents) so the links and the heading are placed on their own. */
  body.gc-site #page-container #content:has(> .menu-tab-container) { display: flex; flex-wrap: wrap; align-items: flex-end; }
  body.gc-site #page-container #content:has(> .menu-tab-container) > * { flex: 1 1 100%; order: 5; min-width: 0; }
  body.gc-site #page-container #content:has(> .menu-tab-container) > .menu-tools { order: 1; }
  body.gc-site #page-container #content > .menu-tab-container, body.gc-site #page-container #content > .menu-tab-container > ul.menu-tabs { display: contents; }
  body.gc-site #page-container .menu-tabs li { float: none; margin: 0; }
  body.gc-site #page-container .menu-tabs li:not(.heading) { order: 2; flex: 0 0 auto; margin: 0 0 14px 30px; line-height: 40px; }
  body.gc-site #page-container .menu-tabs li:not(.heading) a { display: inline-block; padding: 0; }
  body.gc-site #page-container #content:has(> .menu-tab-container) > #property-search { order: 3; }
  body.gc-site #page-container .menu-tabs li.heading { order: 4; flex: 1 1 100%; margin: 20px 30px 0; line-height: 40px; border-bottom: 1px solid #d9d9d9; }
  body.gc-site #page-container .menu-tabs li.heading a { display: inline-block; padding: 0; }
  body.gc-site #page-container #content:has(> .menu-tab-container) > .clearboth, body.gc-site #page-container .menu-tab-container > .clearleft { display: none; }
  /* property search: the five drop-downs and the button on one tidy grid */
  body.gc-site #page-container #property-search form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; text-align: left; }
  body.gc-site #page-container #property-search h3 { grid-column: 1 / -1; margin: 0; }
  body.gc-site #page-container #property-search ul { display: contents; }
  body.gc-site #page-container #property-search li { display: block; margin: 0; }
  body.gc-site #page-container #property-search select { width: 100%; height: 44px; box-sizing: border-box; }
  body.gc-site #page-container #property-search input.button { width: 100%; height: 44px; padding: 0 20px; box-sizing: border-box; }
  /* the tools row */
  body.gc-site #page-container .menu-tools ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 24px; }
  body.gc-site #page-container .menu-tools li, body.gc-site #page-container .menu-tools li:first-child { margin: 0; }
  body.gc-site #page-container .innersplitcontent .menu-tools ul { display: block; }
  body.gc-site #page-container .menu-tools a { display: inline-block; line-height: 44px; }
  body.gc-site #page-container .innersplitcontent .menu-tools a { line-height: 32px; }
  /* property page: gallery strip wraps, the price column keeps its grey */
  body.gc-site #page-container #property-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
  body.gc-site #page-container #property-gallery-thumbs a.gallery-item { display: block; }
  body.gc-site #page-container #property-gallery-thumbs img { float: none; margin: 0; }
  body.gc-site #page-container #property-gallery-thumbs .clearleft { display: none; }
  body.gc-site #page-container #property-images { padding: 24px; }
  /* forms fill the column (live's contact table is a fixed 680px) */
  body.gc-site #page-container .gc-contact-form p.et_pb_contact_field, body.gc-site #page-container .gc-contact-form .et_pb_contact_right p.clearfix { width: auto; max-width: 680px; }
  body.gc-site #page-container .gc-property-form p.et_pb_contact_field, body.gc-site #page-container .gc-property-form .et_pb_contact_right p.clearfix { max-width: none; }
  /* maps: the Get Directions box sits over the map from 768 */
  body.gc-site #page-container .map-info-window { max-width: 100%; box-sizing: border-box; }
  /* tables in page text never push the page sideways */
  body.gc-site #page-container #content table:not(.form) { max-width: 100%; }
  body.gc-site #page-container #content img { max-width: 100%; height: auto; }
  body.gc-site #page-container #property-gallery-thumbs img, body.gc-site #page-container #content img.blog-image { max-width: none; }
  /* footer: the copyright line and the link row share the width instead of overlapping */
  body.gc-site #page-container .footermenu { width: auto; }
  body.gc-site #page-container .copyright { width: auto; float: right; }
  body.gc-site #page-container .vcard li { padding-top: 2px; padding-bottom: 2px; }
}

/* ================= below 980: the menu column becomes a top bar with a Menu button ================= */
@media (max-width: 979px) {
  body.gc-site #page-container #sidebar { position: relative; top: auto; left: auto; width: auto !important; height: auto; display: flex; flex-wrap: wrap; align-items: center;
    column-gap: 16px; padding: 10px 24px; background: var(--gc-blue); z-index: 1000; }
  body.gc-site #page-container #sidebar .logo { order: 1; margin: 0 auto 0 0; }
  body.gc-site #page-container #sidebar .logo a { display: block; }
  body.gc-site #page-container #sidebar .logo img { width: 180px; height: auto; }
  body.gc-site #page-container #sidebar .phone:not(.alt) { order: 2; margin: 0; padding-left: 36px; border: 0; font-size: 22px; line-height: 44px; background-position: left center; }
  body.gc-site #page-container #sidebar .phone a.tel-link { display: inline-block; line-height: 44px; }
  body.gc-site #page-container .ils-menu-toggle { order: 3; display: inline-flex; align-items: center; gap: 10px; height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 0;
    background: var(--gc-green-bg); color: #ffffff; font: 16px/44px 'AdventorDemi', Arial, Helvetica, sans-serif; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; }
  body.gc-site #page-container .ils-menu-toggle:hover, body.gc-site #page-container .ils-menu-toggle:focus, body.gc-site #page-container .ils-menu-toggle:active,
  body.gc-site #page-container #sidebar.ils-menu-open .ils-menu-toggle { background: var(--gc-green-bg-hover); color: #ffffff; }
  body.gc-site #page-container .ils-menu-toggle span, body.gc-site #page-container .ils-menu-toggle span::before, body.gc-site #page-container .ils-menu-toggle span::after {
    display: block; position: relative; width: 20px; height: 2px; background: #ffffff; content: ""; }
  body.gc-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.gc-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  body.gc-site #page-container #sidebar.ils-menu-open .ils-menu-toggle span { background: transparent; }
  body.gc-site #page-container #sidebar.ils-menu-open .ils-menu-toggle span::before { top: 0; transform: rotate(45deg); }
  body.gc-site #page-container #sidebar.ils-menu-open .ils-menu-toggle span::after { top: 0; transform: rotate(-45deg); }
  /* the menu list: full width under the bar, opened by the button; the Properties for Sale pages are listed under it (no fly-out) */
  body.gc-site #page-container #menu { order: 10; display: none; flex: 1 1 100%; margin: 10px -24px 0; font-size: 16px; }
  body.gc-site #page-container #sidebar.ils-menu-open #menu { display: block; }
  body.gc-site #page-container #menu li a:link, body.gc-site #page-container #menu li a:visited, body.gc-site #page-container #menu li a:active { line-height: 48px; padding: 0 24px; }
  body.gc-site #page-container #menu li ul, body.gc-site #page-container #menu li:hover ul, body.gc-site #page-container #menu li:focus-within ul, body.gc-site #page-container #menu li.ils-sub-open ul {
    position: static; display: block; width: auto; padding: 0; background: #1e2c70; }
  body.gc-site #page-container #menu li ul a:link, body.gc-site #page-container #menu li ul a:visited { padding-left: 48px; line-height: 44px; font-size: 15px; border-left: 7px solid var(--gc-rule); }
  body.gc-site #page-container #menu li:hover a.parent:link, body.gc-site #page-container #menu li:hover a.parent:visited,
  body.gc-site #page-container #menu li:focus-within a.parent:link, body.gc-site #page-container #menu li.active a.parent { background-image: none; }
  body.gc-site #page-container #menu li:not(.active):hover > a:link, body.gc-site #page-container #menu li:not(.active):hover > a:visited { background-color: var(--gc-green-bg); }
  body.gc-site #page-container #menu li li:hover, body.gc-site #page-container #menu li li:focus-within { background: var(--gc-green-bg); }
  body.gc-site #page-container #menu li li a:link, body.gc-site #page-container #menu li li a:visited, body.gc-site #page-container #menu li.active li a:link, body.gc-site #page-container #menu li.active li a:visited { background: none; }
  body.gc-site #page-container #menu li li.active, body.gc-site #page-container #menu li li.active > a:link { background: var(--gc-green-bg-hover); }
  body.gc-site #page-container #sidebar .socialmedia { order: 11; display: none; flex: 1 1 100%; margin: 0 -24px; padding: 14px 24px 6px; text-align: left; }
  body.gc-site #page-container #sidebar.ils-menu-open .socialmedia { display: block; }
  body.gc-site #page-container #sidebar .socialmedia a { margin-right: 16px; }
  body.gc-site #page-container #container, body.gc-site #page-container #gc-footer-wrap { margin-left: 0; }
  /* a short page (search) ends in the footer's own dark grey instead of a band of the page's blue under the footer */
  html body.gc-site { background-color: #222222; }
  body.gc-site #page-container #sidebar { background-color: var(--gc-blue); }
  /* banners */
  body.gc-site #page-container #feature, body.gc-site #page-container .featureimage { height: 240px; }
  /* home: live's look (the text panel over the aerial photo) */
  body.gc-site.gc-home #page-container #content { min-height: 0; }
}

/* ================= phone: below 768 ================= */
@media (max-width: 767px) {
  /* top bar: logo and Menu button, then the tap-to-call number on its own line */
  body.gc-site #page-container #sidebar { padding: 8px 16px 0; column-gap: 12px; }
  body.gc-site #page-container #sidebar .logo img { width: 132px; }
  body.gc-site #page-container .ils-menu-toggle { order: 2; }
  body.gc-site #page-container #sidebar .phone:not(.alt) { order: 4; flex: 1 1 100%; margin: 8px -16px 0; padding: 0 16px 0 52px; border-top: 1px solid var(--gc-rule); font-size: 20px; background-position: 16px center; }
  body.gc-site #page-container #sidebar .phone a.tel-link { display: block; }
  body.gc-site #page-container #menu { margin: 0 -16px; }
  body.gc-site #page-container #menu li a:link, body.gc-site #page-container #menu li a:visited, body.gc-site #page-container #menu li a:active { padding: 0 16px; }
  body.gc-site #page-container #menu li ul a:link, body.gc-site #page-container #menu li ul a:visited { padding-left: 36px; }
  body.gc-site #page-container #sidebar .socialmedia { margin: 0 -16px; padding: 14px 16px 10px; }

  /* text pages: one column */
  body.gc-site #page-container #feature, body.gc-site #page-container .featureimage { height: 160px; }
  body.gc-site #page-container #content { min-height: 0; }
  body.gc-site #page-container #content .innercontent, body.gc-site #page-container #content .innersplitcontent { padding: 28px 16px 32px; }
  body.gc-site #page-container .split .left, body.gc-site #page-container .split .right { float: none; width: auto; }
  body.gc-site #page-container h1 { font-size: 24px; line-height: 28px; margin-bottom: 16px; }
  body.gc-site #page-container h2 { font-size: 18px; line-height: 24px; }
  body.gc-site #page-container .featuretext { margin: 0 16px; padding: 24px 0; }
  body.gc-site #page-container .featuretext .bigtext { font-size: 22px !important; line-height: 28px !important; }
  body.gc-site #page-container #content [style*="justify"] { text-align: left !important; }
  /* live's condensed bullet lists: the stand-in draws them at 92% of a 15px size, which reads small on a phone; 16px on a 22px line */
  body.gc-site #page-container :is(.innercontent, .innersplitcontent) ul { font-size: 16px; }
  body.gc-site #page-container :is(.innercontent, .innersplitcontent) ul li { line-height: 22px; }
  body.gc-site #page-container .innersplitcontent .property-features li, body.gc-site #page-container .list.properties .property-details li, body.gc-site #page-container .panel li { line-height: inherit; }
  body.gc-site #page-container #content p > a:only-child:not(.more):not(.button) { display: inline-block; padding: 6px 0; }
  body.gc-site #page-container #content td a:not(.button) { display: inline-block; padding: 4px 0; }
  body.gc-site #page-container #content td a.tel-link { display: inline; padding: 0; }
  body.gc-site #page-container div.top { padding: 12px 16px 20px; }
  body.gc-site #page-container div.top a { line-height: 36px; }
  body.gc-site #page-container #content table:not(.form) td { display: block; width: auto !important; }
  body.gc-site #page-container #content table:not(.form) tr { display: block; margin-bottom: 8px; }
  /* 3.18 (found by the LOOK lane's re-run, not a verifier finding): post 408's table carries live's inline heights on the table, every row and
     every cell (175px, 24px, 56px). Stacked as blocks those heights stay, so the cells printed over each other below 768. The heights are
     released there; tables without inline heights (contact) are unchanged. */
  body.gc-site #page-container #content table:not(.form), body.gc-site #page-container #content table:not(.form) :is(tr, td, th) { height: auto !important; }
  /* 3.18 C-3: the four guide pages (network assistance, purchase procedures, property management, foreign investors) carry a "Section" or
     "Navigate to section" jump list in their desktop right column. Stacked, it came after every section it links to. On a phone it now sits
     straight under the quote, before the page text: the left column steps aside (display: contents) so the quote, the grey jump-list box and
     the text box are placed in that order. Each box keeps its own padding and ground; the page title stays directly above its own text
     (heading_order_check). Only pages whose right column holds a ul.submenu are affected. */
  body.gc-site #page-container #content.split:has(> .right ul.submenu) { display: flex; flex-direction: column; }
  body.gc-site #page-container #content.split:has(> .right ul.submenu) > .left { display: contents; }
  body.gc-site #page-container #content.split:has(> .right ul.submenu) > .left > * { order: 3; }
  body.gc-site #page-container #content.split:has(> .right ul.submenu) > .left > .featuretext { order: 1; }
  body.gc-site #page-container #content.split:has(> .right ul.submenu) > .right { order: 2; }
  body.gc-site #page-container #content.split:has(> .right ul.submenu) > :not(.left):not(.right) { order: 4; }

  /* home: the aerial photo already leads the text (live's 300 x 200 picture), so the large copy behind the panel is not repeated */
  body.gc-site.gc-home #page-container #content.coverimage { background-image: none !important; }
  body.gc-site.gc-home #page-container #content .innercontent { width: auto; background: #ffffff; }
  body.gc-site.gc-home #page-container #content .innercontent img { width: 100% !important; max-width: 100%; height: auto !important; }

  /* listings: tools row, search form, heading and tabs, then each property as a photo-and-text row with its summary below */
  body.gc-site #page-container #content > .menu-tools { padding: 6px 16px; }
  body.gc-site #page-container #content > .menu-tools ul { column-gap: 18px; }
  body.gc-site #page-container #content > .menu-tools li:first-child { flex: 1 1 100%; text-align: center; line-height: 30px; padding: 0; }
  body.gc-site #page-container #content > .menu-tools li { font-size: 17px; }
  body.gc-site #page-container #property-search { padding: 0 16px 20px; }
  body.gc-site #page-container #property-search form { grid-template-columns: 1fr 1fr; }
  body.gc-site #page-container #property-search li:nth-child(-n+2) { grid-column: 1 / -1; }
  body.gc-site #page-container #property-search input.button { grid-column: 1 / -1; height: 48px; }
  body.gc-site #page-container #property-search select { height: 48px; }
  body.gc-site #page-container .menu-tabs li.heading { font-size: 24px; margin: 16px 16px 0; }
  body.gc-site #page-container .menu-tabs li:not(.heading) { margin: 0 0 6px 16px; }
  body.gc-site #page-container .list.properties .entry { margin: 32px 0; }
  body.gc-site #page-container .list.properties .property-info { float: none; width: auto; grid-template-columns: 132px 1fr; column-gap: 14px; line-height: 24px; }
  body.gc-site #page-container .list.properties h2 { font-size: 16px; line-height: 24px; }
  body.gc-site #page-container .list.properties .property-details { margin-top: 6px; }
  body.gc-site #page-container .list.properties .summary { float: none; width: auto; margin-top: 14px; }
  body.gc-site #page-container .list.properties .summary p { margin: 0 0 14px; }
  /* 3.18 C-4: the three tool pop-ups (currency, loan, stamp duty) are live's fixed-width desktop pages with no viewport meta; on a phone they
     open at about a third of their size. Live's own phone site does not offer them, so below 768 the TOOLS row on the listings and the Tools
     box on a property page are not shown (decision recorded in build/fix318-look.md). */
  body.gc-site #page-container .menu-tools { display: none; }

  /* property page: photo strip you swipe, then title and description, the price block, map, contact, enquiry form and tools */
  body.gc-site #page-container #property-images { padding: 12px 0; }
  body.gc-site #page-container #property-gallery-thumbs { flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 0 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-padding: 0 16px; }
  body.gc-site #page-container #property-gallery-thumbs a.gallery-item { flex: 0 0 auto; scroll-snap-align: start; }
  body.gc-site #page-container #content.split:has(.property-info) { display: flex; flex-direction: column; padding: 24px 16px 32px; }
  body.gc-site #page-container #content.split:has(.property-info) :is(.left, .right, .left > .innercontent, .right > .innersplitcontent) { display: contents; }
  body.gc-site #page-container #content.split:has(.property-info) .left > .innercontent > * { order: 1; }
  body.gc-site #page-container #content.split:has(.property-info) .left > .innercontent > a.back { order: 0; align-self: flex-end; float: none; margin: 0 0 12px; }
  body.gc-site #page-container #content.split:has(.property-info) .right > .innersplitcontent > .property-info { order: 2; margin: 24px -16px 0; padding: 20px 16px 24px; background: #f5f5f5; }
  body.gc-site #page-container #content.split:has(.property-info) .left > .innercontent > .property-map { order: 3; margin-top: 36px; }
  body.gc-site #page-container #content.split:has(.property-info) .right > .innersplitcontent > h4, body.gc-site #page-container #content.split:has(.property-info) .right > .innersplitcontent > p { order: 4; }
  body.gc-site #page-container #content.split:has(.property-info) .right > .innersplitcontent > h4 { margin-top: 32px; }
  body.gc-site #page-container #content.split:has(.property-info) .left > .innercontent > .property-form { order: 5; margin-top: 36px; }
  body.gc-site #page-container #content.split:has(.property-info) .right > .innersplitcontent > .menu-tools { order: 6; margin: 8px 0 0; }
  body.gc-site #page-container #content.split:has(.property-info) > .clearboth { order: 7; }
  body.gc-site #page-container .innersplitcontent .property-price { margin: 14px 0 6px; }
  body.gc-site #page-container .innersplitcontent .property-features { margin-top: 8px; }
  body.gc-site #page-container .innersplitcontent h4 { margin-top: 28px; }
  /* map: lane B's keyless embed is at least 300px tall, with its Get Directions box over the foot of the map (kept) */
  body.gc-site #page-container .property-map .map-container, body.gc-site #page-container .map-container { height: 300px; }
  body.gc-site #page-container .map-info-window a { display: inline-block; padding: 4px 0; }

  /* news: list rows with a small photo, the side panels below, the archive in three columns */
  body.gc-site #page-container .list .entry { margin: 36px 0; }
  body.gc-site #page-container .list .entry h2 { font-size: 18px; line-height: 24px; }
  body.gc-site #page-container .list .entry img.blog-image { width: 120px; height: auto; margin: 4px 14px 8px 0; }
  body.gc-site #page-container .entry > a.gallery-item img.blog-image { float: none; display: block; margin: 0 0 16px; max-width: 100%; height: auto; }
  body.gc-site #page-container .paging, body.gc-site #page-container .result-count, body.gc-site #page-container .options { float: none; display: block; margin: 16px 0 0; }
  body.gc-site #page-container .paging a:link, body.gc-site #page-container .paging a:visited { min-width: 32px; height: 32px; line-height: 32px; margin: 0 2px 6px; }
  body.gc-site #page-container .panel ul.archive { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; }
  body.gc-site #page-container .panel ul.archive li { margin: 0; padding-left: 20px; background-position: 0 9px; }
  body.gc-site #page-container .panel ul.archive a { display: inline-block; padding: 6px 0; font-size: 14px; }
  /* 3.18 C-1: the archive's VIEW MORE button is an a.more inside that list; it keeps the other .more buttons' side padding (live's 0 20px 0 10px),
     so its chevron sits clear of the label, and the 40px tap height the rule above gives it */
  body.gc-site #page-container .panel ul.archive li.archive-more a.more { padding: 6px 20px 6px 10px; }
  body.gc-site #page-container .panel .title a { display: inline; }
  body.gc-site #page-container .panel li { margin: 20px 0; }
  body.gc-site #page-container #content .summary table, body.gc-site #page-container #content .entry table { display: block; overflow-x: auto; }

  /* site map: links stay inline so a wrapped item keeps its bullet on the first line, with tall tap areas */
  body.gc-site.page-id-2410 #page-container #content li a { display: inline; padding: 7px 0; }
  body.gc-site.page-id-2410 #page-container #content li { line-height: 22px; padding-top: 6px; padding-bottom: 6px; }

  /* search page: field and button on one row */
  body.gc-site #page-container #content table.form.searchpage, body.gc-site #page-container #content table.form.searchpage tbody,
  body.gc-site #page-container #content table.form.searchpage tr { display: block; width: auto; }
  body.gc-site #page-container #content table.form.searchpage { margin: 24px 0 !important; }
  body.gc-site #page-container #content table.form.searchpage td { display: flex; gap: 8px; padding: 8px; border: 1px solid #c2c2c2; }
  body.gc-site #page-container #content .form.searchpage input.clicknclear { flex: 1 1 auto; min-width: 0; width: auto; height: 48px; margin: 0; padding: 0 12px; box-sizing: border-box; float: none; }
  body.gc-site #page-container #content .form.searchpage input.button { flex: 0 0 auto; width: auto; height: 48px; margin: 0; padding: 0 18px; float: none; box-sizing: border-box; }

  /* forms: a label bar over a full-width field in one bordered box, 16px text, 48px fields, a full-width SUBMIT */
  body.gc-site #page-container .gc-contact-form p.et_pb_contact_field, body.gc-site #page-container .gc-contact-form .et_pb_contact_right p.clearfix { display: block; width: auto; max-width: none; margin-bottom: 12px; }
  body.gc-site #page-container .gc-contact-form .et_pb_contact_form_label, body.gc-site #page-container .gc-contact-form .et_pb_contact_right p.clearfix::before {
    width: auto; margin: 0; padding: 0 12px 0 24px; line-height: 34px; background-position: 12px 13px; }
  body.gc-site #page-container .gc-contact-form:not(.gc-property-form) .et_pb_contact_right p.clearfix::before { padding-left: 12px; }
  body.gc-site #page-container .gc-contact-form .et_pb_contact_field input.input { display: block; width: 100%; height: 48px; padding: 0 12px; border-top: 1px solid #e3e3e3; }
  body.gc-site #page-container .gc-contact-form .et_pb_contact_field textarea.input { display: block; width: 100%; height: 140px; padding: 10px 12px; border-top: 1px solid #e3e3e3; }
  body.gc-site #page-container .gc-contact-form .et_pb_contact_right p.clearfix, body.gc-site #page-container .gc-property-form .et_pb_contact_right p.clearfix { min-height: 0; padding: 0 12px 10px; line-height: 44px; }
  body.gc-site #page-container .gc-contact-form .et_pb_contact_right p.clearfix::before { margin: 0 -12px; }
  body.gc-site #page-container .gc-contact-form input.et_pb_contact_captcha { width: 90px; min-width: 90px; height: 44px; margin: 0 0 0 10px; vertical-align: middle; }
  body.gc-site #page-container .gc-contact-form .et_contact_bottom_container { display: flex; flex-direction: column; padding: 0 0 24px; }
  body.gc-site #page-container .gc-contact-form .et_contact_bottom_container > .et_pb_contact_right { order: 1; }
  body.gc-site #page-container .gc-contact-form .et_contact_bottom_container::before { order: 2; }
  body.gc-site #page-container .gc-contact-form .et_contact_bottom_container > .et_pb_contact_submit { order: 3; }
  body.gc-site #page-container .gc-contact-form .et_contact_bottom_container::before { position: static; display: block; width: auto; line-height: 32px; background-position: left 12px; }
  body #page-container .et_pb_section .gc-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit { width: 100%; height: 52px; margin: 4px 0 0; padding: 0 20px !important; font-size: 22px !important; line-height: 48px !important; }

  /* footer: one column */
  body.gc-site #page-container #footer .container { padding: 20px 16px; }
  body.gc-site #page-container .footermenu, body.gc-site #page-container .copyright { float: none; width: auto; text-align: left; }
  body.gc-site #page-container .copyright { margin-top: 10px; line-height: 24px; }
  body.gc-site #page-container .footer-tags { display: block; margin: 6px 0 0; }
  body.gc-site #page-container #footer .clearboth { display: none; }
  body.gc-site #page-container .vcard { padding: 18px 16px 24px; text-align: left; }
  body.gc-site #page-container .vcard ul { margin: 0 !important; }
  body.gc-site #page-container .vcard li { display: block; margin: 0; padding: 2px 0; background: none; line-height: 24px; }
  body.gc-site #page-container .vcard .org { font-size: 15px; margin-bottom: 6px; }
  body.gc-site #page-container #footer .menu li { padding-top: 0; padding-bottom: 0; }
}
@media (max-width: 400px) {
  body.gc-site #page-container .panel ul.archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.gc-site #page-container .list.properties .property-info { grid-template-columns: 112px 1fr; }
}